/* Layout: a quiet sandstone-and-rust frame; screenshots are the color, type does the rest.
   Character page = sticky photo viewer on the left, profile and story on the right. */
:root {
  --bg: #8ea3ae;
  --surface: #a3b7c0;
  --stage: #778d98;
  --ink: #121c22;
  --muted: #22313a;
  --line: #6f8692;
  --accent: #163c52;
  --accent-soft: #b4c5cd;
  --gold: #5c410c;
  --on-stage: #f6efe6;
  --display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --body: "Alegreya", Georgia, "Times New Roman", serif;
  --label: "Alegreya Sans SC", "Alegreya Sans", system-ui, sans-serif;
  --radius: 6px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1.0625rem/1.65 var(--body);
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 76rem; margin: 0 auto; padding-inline: 1.25rem; }

/* Header */
.site-head { position: relative; background: var(--stage) url("images/site/banner.jpg") center / cover no-repeat; border-bottom: 1px solid var(--line); }
.site-head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,22,30,0.62) 0%, rgba(10,22,30,0.28) 45%, rgba(10,22,30,0) 75%); }
.site-head .wrap { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; min-height: clamp(11rem, 22vw, 18rem); padding-block: 1.25rem 1.5rem; }
.brand { font: clamp(1.8rem, 3.6vw, 2.6rem)/1.05 var(--display); color: var(--on-stage); text-decoration: none; letter-spacing: 0.01em; text-shadow: 0 1px 12px rgba(20,14,10,0.55); }
.brand small { display: block; font: 0.85rem/1.2 var(--label); letter-spacing: 0.08em; color: var(--on-stage); opacity: 0.9; margin-top: 0.45rem; }
.nav { display: flex; gap: 1.4rem; align-self: flex-start; }
.nav a { font: 1rem var(--label); letter-spacing: 0.06em; color: var(--on-stage); text-decoration: none; padding-block: 0.25rem; border-bottom: 1px solid transparent; text-shadow: 0 1px 8px rgba(20,14,10,0.6); }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--on-stage); }

main { padding-block: 2.5rem 4rem; }
.eyebrow { font: 0.9rem/1.3 var(--label); letter-spacing: 0.1em; color: var(--gold); margin: 0 0 0.5rem; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; margin: 0; line-height: 1.12; }
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.25rem; }
p { margin: 0; }
.muted { color: var(--muted); }

.btn { display: inline-flex; align-items: center; gap: 0.5rem; font: 1rem var(--label); letter-spacing: 0.06em; text-decoration: none; padding: 0.6rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--accent); background: var(--accent); color: var(--surface); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn:hover { filter: brightness(1.08); }

/* Home */
.section { margin-top: 3rem; display: grid; gap: 1.25rem; }
.section-head { border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; }

/* Cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 2.25rem 1.5rem; }
.card { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card-body { padding: 0.85rem 1rem 1rem; }
.card-art { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stage); }
.card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.card:hover .card-art img { transform: scale(1.035); }
.card-art .initials { position: absolute; inset: 0; display: grid; place-items: center; font: 3rem var(--display); color: var(--accent); background: repeating-linear-gradient(135deg, var(--accent-soft) 0 12px, var(--surface) 12px 24px); }
.card-art .tag { position: absolute; top: 0.6rem; left: 0.6rem; font: 0.75rem var(--label); letter-spacing: 0.08em; padding: 0.15rem 0.5rem; border-radius: 3px; background: var(--surface); color: var(--muted); }
.card-name { font: 1.3rem/1.15 var(--display); }
.card:hover .card-name { color: var(--accent); }
.card-more:hover .card-name { color: inherit; }
.card-meta { font: 0.9rem/1.3 var(--label); letter-spacing: 0.05em; color: var(--muted); margin-top: 0.15rem; }
.card-hook { font-size: 0.95rem; line-height: 1.45; color: var(--ink); margin-top: 0.35rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }


/* Character page */
.char-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 2.75rem; align-items: center; }
.viewer { display: grid; gap: 0.75rem; min-width: 0; }
.stage { position: relative; background: var(--stage); border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; max-width: 100%; touch-action: pan-y; box-shadow: 0 10px 30px rgba(10, 30, 40, 0.3); }
.stage img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: opacity 0.25s ease; }
.stage .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(20, 14, 10, 0.55); color: var(--on-stage); font-size: 1.4rem; line-height: 1; }
.stage .arrow:hover { background: rgba(20, 14, 10, 0.8); }
.stage .prev { left: 0.75rem; }
.stage .next { right: 0.75rem; }
.stage .counter { position: absolute; right: 0.75rem; bottom: 0.65rem; font: 0.85rem var(--label); letter-spacing: 0.06em; color: var(--on-stage); background: rgba(20, 14, 10, 0.55); padding: 0.1rem 0.55rem; border-radius: 3px; font-variant-numeric: tabular-nums; }
.stage-empty { display: grid; place-items: center; text-align: center; padding: 1.5rem; color: var(--muted); font: 1.05rem var(--label); letter-spacing: 0.05em; height: 100%; }
.caption { font-style: italic; color: var(--muted); min-height: 1.65em; }
.thumbs { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.25rem; }
.thumbs button { flex: 0 0 auto; width: 5.5rem; aspect-ratio: 3 / 2; padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden; cursor: pointer; background: var(--stage); opacity: 0.6; transition: opacity 0.2s; }
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button:hover { opacity: 0.9; }
.thumbs button[aria-current="true"] { border-color: var(--accent); opacity: 1; }

.profile-head { display: grid; gap: 0.7rem; min-width: 0; }
.profile-head .eyebrow { margin: 0; }
.tagline { font-size: 1.1rem; line-height: 1.5; margin-top: 0.4rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.5rem; margin: 0.9rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); }

.facts dt { font: 0.82rem/1.2 var(--label); letter-spacing: 0.09em; color: var(--gold); }
.facts dd { margin: 0.2rem 0 0; line-height: 1.35; }
.char-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3.5rem; align-items: start; margin-top: 3.25rem; }
.story { display: grid; gap: 0.75rem; margin-bottom: 2.25rem; }
.story h2 { display: flex; align-items: center; gap: 0.75rem; }
.story h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.story p + p { margin-top: 0.25rem; }
.hooks { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.sample-note { font: 0.95rem var(--label); letter-spacing: 0.04em; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); padding: 0.6rem 0.9rem; }

.pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.pager a { text-decoration: none; display: grid; gap: 0.1rem; }
.pager a span { font: 0.85rem var(--label); letter-spacing: 0.08em; color: var(--muted); }
.pager a strong { font: 400 1.25rem var(--display); }
.pager .next-link { text-align: right; margin-left: auto; }

/* About: intro on the left, details card on the right */
.about { margin-top: 0; }
.about-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.about-text { display: grid; gap: 0.9rem; max-width: 38rem; font-size: 1.1rem; }
.about-card { display: grid; gap: 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; min-width: 0; }
.about-group + .about-group { border-top: 1px solid var(--line); padding-top: 1.1rem; }
.about-group h3 { font: 0.85rem/1.2 var(--label); letter-spacing: 0.09em; color: var(--gold); margin-bottom: 0.55rem; }
.mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.25rem; margin: 0; }
.mini dt { font: 0.8rem/1.2 var(--label); letter-spacing: 0.05em; color: var(--muted); }
.mini dd { margin: 0.1rem 0 0; line-height: 1.35; }
.credit { position: absolute; right: 0.75rem; bottom: 0.5rem; margin: 0; font-size: 0.75rem; color: var(--on-stage); opacity: 0.85; text-shadow: 0 1px 6px rgba(20,14,10,0.7); }
.credit a { color: inherit; }
@media (max-width: 600px) { .site-head .wrap { padding-bottom: 2.2rem; } }
.about-prefs { margin-top: 0.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.about-prefs h3 { font: 0.85rem/1.2 var(--label); letter-spacing: 0.09em; color: var(--gold); margin-bottom: 0.55rem; }
.about-text .prefs { font-size: 1rem; }
.prefs { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; line-height: 1.45; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(14, 10, 8, 0.94); display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem); }
.lightbox img { max-width: 100%; max-height: 88vh; object-fit: contain; }
.lightbox .arrow, .lightbox .close { position: absolute; border: 0; cursor: pointer; background: rgba(246, 239, 230, 0.12); color: var(--on-stage); width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.5rem; }
.lightbox .prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox .close { top: calc(env(safe-area-inset-top, 0px) + 1rem); right: 1rem; }


@media (max-width: 860px) {
  .char-top, .about-body { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .char-body { grid-template-columns: minmax(0, 1fr); margin-top: 2.25rem; }
}
@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0.8rem; }
  .card-name { font-size: 1.1rem; }
  .card-hook { display: none; }
  .thumbs button { width: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}