
/* Afterlogue / Personal Log — true black background and restrained editorial cards */
html:has(body.archive-body) { background: #000; }
body.archive-body { background: #000; color: #f3eadc; min-height: 100vh; }
body.archive-body > header.site-header { background: #000; border-bottom: 1px solid #34312e; }
body.archive-body > header.site-header nav { gap: clamp(16px,2.2vw,34px); }
body.archive-body button { font-family: 'Inter', Arial, sans-serif; }
body.archive-body [hidden] { display: none !important; }
.archive-page { max-width: 1510px; margin: 0 auto; padding: 42px 5% 120px; }
.archive-page .archive-eyebrow { margin: 0 0 6px; color: #bea489; font: 500 10px/1.5 'Inter', sans-serif; letter-spacing: .17em; }
.archive-page .archive-title { font: 400 clamp(48px,5vw,76px)/1.03 Georgia, serif; letter-spacing: -.035em; margin: 0 0 6px; color: #f4eadc; }
.archive-page .archive-subtitle { margin: 0; color: #b9b0a5; font: 13px/1.65 'Inter', sans-serif; }
.archive-page .archive-toolbar { display: flex; gap: 18px; justify-content: space-between; align-items: end; padding-top: 30px; flex-wrap: wrap; }
.archive-page .archive-tabs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.archive-page .archive-primary-tabs { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: #161514; border: 1px solid #4c4034; border-radius: 999px; }
.archive-page .archive-tab { appearance: none; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #b6aba0; padding: 10px 23px; min-width: 100px; font-size: 12px; cursor: pointer; transition: background .17s, color .17s, border-color .17s; }
.archive-page .archive-tab-favorites { border-color: #4c4034; background: #161514; min-width: 107px; }
.archive-page .archive-tab:hover { color: #f4eadc; border-color: #a99376; }
.archive-page .archive-tab.active { color: #1b1916; background: #dec49e; border-color: #dec49e; box-shadow: none; }
.archive-page .archive-categories { display: inline-flex; align-items: center; gap: 2px; background: #1d1b19; border: 1px solid #50463a; border-radius: 999px; padding: 3px; }
.archive-page .archive-category { padding: 8px 19px; font-size: 11px; color: #bcb2a6; background: transparent; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.archive-page .archive-category.active { color: #1b1916; background: #dec49e; }
.archive-page .archive-rule { height: 1px; background: #38332c; margin: 21px 0 23px; }
.archive-page .archive-count { font-size: 11px; color: #978b7d; letter-spacing: .09em; margin: 0 0 16px; }
.archive-page .archive-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: 29px; row-gap: 34px; align-items: stretch; }
.archive-page .archive-card { display: grid; grid-template-columns: 35% minmax(0,1fr); min-height: 205px; padding: 8px; gap: 10px; position: relative; background: #1f1d1b; border: 1px solid #4c4236; border-radius: 9px; box-shadow: none !important; }
/* Delicate dividers sit in the black gutters, not on top of the artwork. */
.archive-page .archive-card:not(:nth-child(3n))::after { content: ''; pointer-events: none; position: absolute; top: 10%; bottom: 10%; right: -15px; width: 1px; background: rgba(193,162,124,.26); }
.archive-page .archive-poster { min-width: 0; background: #2c2925; position: relative; border-radius: 5px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.archive-page .archive-poster img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.archive-page .archive-poster-fallback { color: #9d8b77; font: 18px Georgia, serif; text-align: center; padding: 8px; }
.archive-page .archive-card-body { display: flex; flex-direction: column; min-width: 0; padding: 5px 2px 5px 0; }
.archive-page .archive-card-heading { display: flex; align-items: start; gap: 5px; justify-content: space-between; }
.archive-page .archive-card-title { margin: 0; color: #f5eee3; font: 600 clamp(11px,1.15vw,14px)/1.3 'Inter',Arial,sans-serif; overflow-wrap: anywhere; }
.archive-page .archive-favorite { flex: none; appearance: none; background: none; border: 0; color: #b4a18c; cursor: pointer; font-size: 19px; line-height: 1; padding: 0 2px; }
.archive-page .archive-favorite[aria-pressed="true"] { color: #e2b988; }
.archive-page .archive-meta { margin: 3px 0 8px; font-size: 10px; color: #b0a69c; }
.archive-page .archive-rating { font-size: 10px; color: #d8b486; min-height: 18px; margin-bottom: 8px; }
.archive-page .archive-rating .archive-rating-icon { font-size: 14px; padding-right: 4px; }
.archive-page .archive-rating.is-neutral { color: #b4aba0; }
.archive-page .archive-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.archive-page .archive-action { appearance: none; color: #d9c6aa; background: transparent; border: 1px solid #675743; border-radius: 5px; font-size: 9px; min-height: 27px; padding: 5px 7px; cursor: pointer; white-space: nowrap; }
.archive-page .archive-action:hover { background: #393126; }
.archive-page .archive-note { margin-top: auto; border-top: 1px solid #51483c; padding-top: 8px; padding-bottom: 1px; min-width: 0; cursor: pointer; }
.archive-page .archive-note-label { color: #bda181; display: block; font-size: 8px; font-weight: 600; letter-spacing: .15em; margin-bottom: 4px; }
.archive-page .archive-note-text { margin: 0; color: #c5bbb0; font-size: 10px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.archive-page .archive-empty { margin: 0; max-width: 620px; padding: 55px 0 80px; color: #c4b7a8; font-size: 14px; line-height: 1.7; }
.archive-page .archive-empty a { color: #e2c3a0; }
.archive-page .archive-feedback { min-height: 0; margin: 0; color: #e1c49d; font-size: 12px; }
.archive-page .archive-feedback:empty { display: none; }
.archive-dialog { width: min(560px,calc(100% - 30px)); max-height: min(90vh, 850px); padding: 0; border: 1px solid #6b5844; border-radius: 12px; background: #211f1c; color: #f4eadc; box-shadow: 0 24px 75px rgba(0,0,0,.55); }
.archive-dialog::backdrop { background: rgba(0,0,0,.73); }
.archive-dialog .dialog-content { padding: 24px; }
.archive-dialog .dialog-top { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; }
.archive-dialog .dialog-eyebrow { font: 10px/1.4 'Inter',sans-serif; letter-spacing: .15em; color: #c2a17f; margin: 0 0 5px; }
.archive-dialog h2 { font: 400 33px/1.08 Georgia,serif; margin: 0 0 6px; }
.archive-dialog .dialog-meta { font-size: 12px; color: #b9ab9a; margin: 0 0 22px; }
.archive-dialog .dialog-close { appearance: none; border: 1px solid #5e5144; color: #f4eadc; background: transparent; border-radius: 50%; width: 32px; height: 32px; font-size: 20px; cursor: pointer; }
.archive-dialog .dialog-field { display: block; color: #d8c6b2; font-size: 12px; margin-top: 16px; }
.archive-dialog .dialog-field select, .archive-dialog .dialog-field textarea { display: block; width: 100%; border: 1px solid #655645; border-radius: 5px; background: #171614; color: #f4eadc; font: 13px/1.6 'Inter',sans-serif; padding: 11px 12px; margin-top: 7px; }
.archive-dialog .dialog-field textarea { min-height: 130px; resize: vertical; }
.archive-dialog .dialog-privacy { color: #a89a8b; font-size: 11px; line-height: 1.55; margin: 10px 0; }
.archive-dialog .dialog-controls { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-top: 23px; }
.archive-dialog .dialog-save { appearance: none; border: 1px solid #ddc19a; color: #1b1712; background: #ddc19a; border-radius: 5px; font-size: 12px; padding: 11px 20px; cursor: pointer; }
.archive-dialog .dialog-remove { margin-right: auto; background: transparent; border: 0; color: #c9a28b; text-decoration: underline; font-size: 11px; cursor: pointer; }
.archive-dialog .dialog-error { color: #f6b6a8; font-size: 12px; margin: 12px 0 0; }
.archive-dialog button:focus-visible, .archive-page button:focus-visible { outline: 2px solid #e2c39e; outline-offset: 3px; }
@media (max-width: 899px) { .archive-page .archive-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .archive-page .archive-card:not(:nth-child(3n))::after { display: none; } .archive-page .archive-card:nth-child(odd):not(:last-child)::after { display: block; } .archive-page .archive-card-title { font-size: 14px; } }
@media (min-width: 900px) and (max-width: 1130px) { .archive-page .archive-card { gap: 8px; padding: 7px; min-height: 194px; } .archive-page .archive-note-text { font-size: 9px; } .archive-page .archive-action { font-size: 9px; padding: 4px 5px; } }
@media (max-width: 735px) {
  body.archive-body > header.site-header { padding: 19px 5%; align-items: center; flex-direction: row; gap: 8px; flex-wrap: wrap; }
  body.archive-body > header.site-header nav { gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
  body.archive-body > header.site-header nav > a { font-size: 11px; }
  body.archive-body > header.site-header .logo-link { font-size: 27px !important; }
  .archive-page { padding: 31px 5% 90px; }
  .archive-page .archive-title { font-size: 55px; }
  .archive-page .archive-toolbar { padding-top: 24px; align-items: start; }
  .archive-page .archive-tabs { width: 100%; gap: 9px; }
  .archive-page .archive-primary-tabs { flex: 1 1 auto; }
  .archive-page .archive-tab { min-width: 0; flex: 1; padding: 10px 8px; }
  .archive-page .archive-tab-favorites { flex: 0 1 100px; }
  .archive-page .archive-grid { grid-template-columns: 1fr; }
  .archive-page .archive-card:not(:last-child)::after { display: block; top: auto; right: 5%; left: 5%; bottom: -18px; width: auto; height: 1px; background: rgba(193,162,124,.26); }
  .archive-page .archive-card { grid-template-columns: 35% minmax(0,1fr); min-height: 210px; }
  .archive-page .archive-card-title { font-size: 14px; }
  .archive-page .archive-card .archive-meta { font-size: 10px; }
  .archive-page .archive-categories { margin-left: auto; }
}
@media (max-width: 390px) { .archive-page .archive-card { gap: 9px; grid-template-columns: 33% minmax(0,1fr); } .archive-page .archive-card-body { padding-top: 2px; } .archive-page .archive-action { padding: 5px 7px; } }


/* Log Sharing — quiet privacy-first dialogs, keeping the existing black/champagne design */
body.archive-body > header.site-header .account-dropdown .archive-settings-open {
  display: block;
  padding: 8px 0;
  margin: 0 0 9px;
  border: 0;
  background: none;
  color: #ead2b1;
  text-align: left;
  font: 12px/1.5 'Inter',Arial,sans-serif;
  cursor: pointer;
}
body.archive-body > header.site-header .account-dropdown .archive-settings-open:hover {
  color: #fff1de;
}
.archive-share-dialog .archive-share-explanation {
  color: #beb2a4;
  font: 12px/1.6 'Inter',Arial,sans-serif;
  margin: 5px 0 20px;
}
.archive-share-dialog .archive-share-check {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid #64513b;
  border-radius: 7px;
  background: #181715;
  padding: 12px;
  font: 13px/1.4 'Inter',Arial,sans-serif;
  cursor: pointer;
}
.archive-share-dialog .archive-share-check input {
  width: 17px;
  height: 17px;
  accent-color: #c6a679;
  flex: none;
}
.archive-share-dialog .archive-preview-label {
  margin: 22px 0 8px;
}
.archive-share-dialog .archive-share-preview {
  max-height: min(31vh,220px);
  overflow: auto;
  padding: 12px;
  background: #151412;
  border: 1px solid #4f4437;
  border-radius: 5px;
  color: #e9dccc;
  font: 12px/1.65 'Inter',Arial,sans-serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.archive-dialog .archive-secondary-button {
  appearance: none;
  border: 1px solid #6f5e4d;
  color: #e0d1c0;
  border-radius: 5px;
  background: transparent;
  padding: 11px 18px;
  font-size: 12px;
  cursor: pointer;
}
.archive-dialog .archive-secondary-button:hover {
  background: #393127;
}


/* AFTERLOGUE / FEATURED FROM YOUR LOG
   A cropped editorial moment, deliberately not a homepage-sized hero.
   No rule or separator between the photograph and its typography.
*/
.archive-page .archive-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .61fr) auto;
  align-items: center;
  gap: clamp(23px, 3.8vw, 53px);
  margin: 27px 0 0;
  padding: 0;
  background: #000;
}
.archive-page .archive-feature-media {
  width: 100%;
  height: clamp(165px, 17vw, 220px);
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #1c1715;
}
.archive-page .archive-feature-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 54%, rgba(0,0,0,.19) 100%);
}
.archive-page .archive-feature-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: saturate(.86) brightness(.88);
  display: block;
}
.archive-page .archive-feature-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 clamp(24px, 3vw, 40px)/1 Georgia,serif;
  letter-spacing: -.02em;
  color: rgba(223,195,163,.42);
  background: linear-gradient(115deg, #26201d, #161313 58%, #080808);
}
.archive-page .archive-feature-content { align-self: center; min-width: 0; }
.archive-page .archive-feature-kicker {
  color: #d4b892;
  font: 500 10px/1.5 'Inter',sans-serif;
  letter-spacing: .18em;
  margin: 0 0 8px;
}
.archive-page .archive-feature-title {
  font: 400 clamp(27px, 2.5vw, 39px)/1.06 Georgia,serif;
  color: #f4eadc;
  margin: 0 0 6px;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.archive-page .archive-feature-meta {
  color: #b8aea3;
  font: 12px/1.6 'Inter',sans-serif;
  margin: 0 0 8px;
}
.archive-page .archive-feature-rating {
  color: #ddbd8f;
  font: 12px/1.5 'Inter',sans-serif;
  margin: 0 0 12px;
}
.archive-page .archive-feature-note {
  border: 0;
  padding: 0;
  margin: 0;
  color: #e1d7c8;
  font: italic clamp(14px,1.4vw,18px)/1.4 Georgia,serif;
  white-space: pre-line;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.archive-page .archive-feature-no-note {
  color: #a99e90;
  font: italic 15px/1.45 Georgia,serif;
  margin: 0;
}
.archive-page .archive-feature-link {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-width: 142px;
  background: transparent;
  border: 1px solid #ad8c67;
  border-radius: 999px;
  color: #e6c99b;
  font: 12px/1.3 'Inter',sans-serif;
  padding: 13px 20px;
  cursor: pointer;
  white-space: nowrap;
}
.archive-page .archive-feature-link:hover {
  border-color: #e1bb85;
  color: #f4eadc;
  background: rgba(191,165,139,.07);
}
.archive-page .archive-card.archive-feature-target {
  outline: 1px solid #d3b48d;
  outline-offset: 3px;
}
@media (max-width: 1050px) {
  .archive-page .archive-feature { grid-template-columns: minmax(0,1.12fr) minmax(0,.7fr); gap: 25px; }
  .archive-page .archive-feature-link { grid-column: 2; justify-self: start; margin-top: -9px; }
}
@media (max-width: 735px) {
  .archive-page .archive-feature {
    margin-top: 22px;
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .archive-page .archive-feature-media { height: clamp(155px,39vw,230px); }
  .archive-page .archive-feature-title { font-size: 30px; }
  .archive-page .archive-feature-content { padding: 2px 0 0; }
  .archive-page .archive-feature-link { grid-column: 1; justify-self: start; margin: 2px 0 0; }
  .archive-page .archive-toolbar { padding-top: 30px; }
}
