/* THE COVER STUDIO — Haute Lumière on glass.
   Cream, never white. Cormorant for every voice, Manrope for furniture.
   Radius zero. Gold is a mark and never a fill. Nothing pops.
   The covers themselves are the writer's and are drawn on canvas in their
   own faces and colours; none of this file reaches them. */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Manrope:wght@400;500;600&display=swap");

/* ── the registers this page uses ─────────────────────────────────────── */
:root,
html[data-register="daylight"]{
  --paper:#FAF8F3; --paper-2:#F3EFE6; --ink:#0C1E16; --ink-soft:#334A3F;
  --text-body:#334A3F; --text-muted:#5C7065; --muted:#5C7065;
  --gold:#C5A059; --gold-d:#9A7A3A; --rule:#E1E7E2; --desk:#D6DAD4;
  --veil:12,30,22;
}
html[data-register="midnight"]{
  --paper:#111620; --paper-2:#171E2A; --ink:#EFE8D8; --ink-soft:#CFC7B4;
  --text-body:#CFC7B4; --text-muted:#8E97A6; --muted:#8E97A6;
  --gold:#D9B472; --gold-d:#C39A56; --rule:#2A3140; --desk:#080B11;
  --veil:5,8,14;
}
:root{
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Manrope", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --ease:cubic-bezier(.165,.84,.44,1);
  --fast:200ms; --base:400ms; --slow:700ms;
  --s1:4px; --s2:8px; --s3:14px; --s4:22px; --s5:34px; --s6:52px; --s7:74px;
  --tap:44px;
  --shadow-sheet:0 30px 90px -40px rgba(var(--veil),.5);
  --shadow-plate:0 12px 38px -20px rgba(var(--veil),.42);
  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--text-body);
  font:400 17px/1.66 var(--serif);
  transition:background var(--slow) var(--ease), color var(--slow) var(--ease);
  -webkit-font-smoothing:antialiased;
}
::selection{ background:rgba(var(--veil),.12); }
a{ color:inherit; text-decoration-color:var(--gold); text-underline-offset:.22em; text-decoration-thickness:1px; }
:focus-visible{ outline:1px solid var(--gold-d); outline-offset:3px; }
[hidden]{ display:none !important; }

/* ── furniture ────────────────────────────────────────────────────────── */
.kicker{ font:600 10px/1.4 var(--sans); letter-spacing:.32em; text-transform:uppercase; color:var(--muted); margin:0; }
.tag{ font:500 9px/1.4 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--gold); vertical-align:middle; }

/* ── the masthead ─────────────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:5; background:var(--paper);
  border-bottom:1px solid var(--rule); padding:calc(var(--safe-t) + var(--s2)) var(--s4) 0;
}
.top-row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); max-width:1360px; margin:0 auto; }
.brand{ margin:0; font:400 22px/1.2 var(--serif); color:var(--ink); letter-spacing:.02em; }
.brand em{ font-style:italic; color:var(--ink-soft); }
.steps{ display:flex; gap:0; overflow-x:auto; scrollbar-width:none; max-width:1360px; margin:0 auto; }
.steps::-webkit-scrollbar{ display:none; }
.steps a{
  flex:0 0 auto; min-height:var(--tap); display:flex; align-items:center; gap:var(--s2);
  padding:0 var(--s3) 0 0; margin-right:var(--s3);
  font:500 10px/1 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
  text-decoration:none; transition:color var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.steps a[aria-disabled="true"]{ opacity:.45; pointer-events:none; }
.steps a .dot{ opacity:0; transition:opacity var(--base) var(--ease); }
.steps a[aria-current="step"]{ color:var(--ink); }
.steps a[aria-current="step"] .dot{ opacity:1; }

/* ── the studio: a desk on the left, the easel on the right ──────────── */
.studio{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:var(--s6); max-width:1360px; margin:0 auto; padding:var(--s5) var(--s4) var(--s7);
}
.desk{ min-width:0; }
.easel{ min-width:0; position:sticky; top:calc(var(--safe-t) + 104px); align-self:start; }

.step{ padding:var(--s5) 0 var(--s6); border-bottom:1px solid var(--rule); scroll-margin-top:120px; }
.step:last-child{ border-bottom:0; }
.step[aria-disabled="true"]{ opacity:.42; pointer-events:none; }
.step h2{ margin:var(--s2) 0 var(--s3); font:300 34px/1.1 var(--serif); color:var(--ink); letter-spacing:.005em; }
.step .deck{ margin:0 0 var(--s4); font:italic 400 20px/1.42 var(--serif); color:var(--ink-soft); max-width:36ch; }
.lede{ margin:0 0 var(--s4); max-width:52ch; }

/* ── fields ───────────────────────────────────────────────────────────── */
.fields{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4) var(--s4); }
.field{ display:flex; flex-direction:column; gap:var(--s1); min-width:0; }
.field.wide{ grid-column:1 / -1; }
.field > span{ font:600 10px/1.4 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.field input, .field select, .field textarea{
  appearance:none; -webkit-appearance:none; width:100%; min-height:var(--tap);
  border:0; border-bottom:1px solid var(--rule); border-radius:0; background:transparent;
  color:var(--ink); font:400 20px/1.4 var(--serif); padding:var(--s2) 0;
  transition:border-color var(--fast) var(--ease);
}
.field textarea{ font-size:18px; line-height:1.55; resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--gold-d); }
.field small{ font:italic 400 15px/1.4 var(--serif); color:var(--muted); }
.field select{ background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size:5px 5px; background-repeat:no-repeat; padding-right:var(--s5); }

.versions{ display:flex; flex-wrap:wrap; gap:0 var(--s4); border:0; padding:0; margin:0; }
.versions legend{ font:600 10px/1.4 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--muted); padding:0; margin-bottom:var(--s1); }
.check{ display:flex; align-items:center; gap:var(--s2); min-height:var(--tap); cursor:pointer; font:400 19px/1.3 var(--serif); color:var(--ink); }
.check input{ position:absolute; opacity:0; width:1px; height:1px; }
.check i{ width:14px; height:14px; border:1px solid var(--ink-soft); display:inline-grid; place-items:center; flex:0 0 auto; }
.check i::after{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold-d); opacity:0; transition:opacity var(--fast) var(--ease); }
.check input:checked + i::after{ opacity:1; }
.check input:focus-visible + i{ outline:1px solid var(--gold-d); outline-offset:3px; }

/* ── the one button: a tracked word with a hairline ───────────────────── */
.act{
  appearance:none; -webkit-appearance:none; border:0; border-radius:0; background:transparent; cursor:pointer;
  min-height:var(--tap); padding:0 var(--s1); display:inline-flex; align-items:center; gap:var(--s2);
  font:600 11px/1 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid var(--ink); text-decoration:none;
  transition:opacity var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.act:hover{ opacity:.72; }
.act:active{ opacity:.55; }
.act[disabled], .act[aria-disabled="true"]{ opacity:.35; cursor:default; pointer-events:none; }
.act.quiet{ border-bottom-color:var(--rule); color:var(--ink-soft); }
.act.lead{ border-bottom-color:var(--gold-d); }
.acts{ display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); align-items:center; margin-top:var(--s4); }

/* ── the picture ──────────────────────────────────────────────────────── */
.drop{
  position:relative; display:grid; place-items:center; text-align:center; gap:var(--s2);
  min-height:220px; padding:var(--s5) var(--s4); border:1px solid var(--rule); background:var(--paper-2);
  transition:border-color var(--fast) var(--ease), background var(--base) var(--ease); cursor:pointer;
}
.drop.over{ border-color:var(--gold-d); }
.drop p{ margin:0; font:300 26px/1.2 var(--serif); color:var(--ink); }
.drop small{ font:italic 400 16px/1.4 var(--serif); color:var(--muted); }
.drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; }

.photo-row{ display:grid; grid-template-columns:120px 1fr; gap:var(--s4); align-items:start; margin-top:var(--s4); }
.photo-row canvas{ width:120px; height:auto; display:block; box-shadow:var(--shadow-plate); background:var(--paper-2); }
.facts{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:var(--s1) var(--s3); font:400 17px/1.4 var(--serif); }
.facts dt{ font:600 9.5px/2 var(--sans); letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.facts dd{ margin:0; color:var(--ink); }

.archive{ margin-top:var(--s4); }
.archive form{ display:flex; gap:var(--s3); align-items:flex-end; }
.archive .field{ flex:1; }
.grid-pics{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:1px; background:var(--rule); margin-top:var(--s3); border:1px solid var(--rule); }
.grid-pics button{ appearance:none; border:0; border-radius:0; padding:0; margin:0; background:var(--paper-2); cursor:pointer; aspect-ratio:2 / 3; overflow:hidden; transition:opacity var(--fast) var(--ease); }
.grid-pics button:hover{ opacity:.72; }
.grid-pics img{ width:100%; height:100%; object-fit:cover; object-position:50% 0%; display:block; }

.routes{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:var(--s4); }
.route{ appearance:none; border:0; border-radius:0; text-align:left; background:var(--paper); padding:var(--s3); cursor:pointer; min-height:120px;
  display:flex; flex-direction:column; gap:var(--s1); color:var(--text-body); font:400 16px/1.45 var(--serif); transition:background var(--base) var(--ease); }
.route b{ font:600 10px/1.4 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--ink); }
.route[aria-pressed="true"]{ background:var(--paper-2); }
.route[aria-pressed="true"] b::after{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--gold); margin-left:var(--s2); vertical-align:middle; }

.dpi{ margin-top:var(--s4); padding:var(--s3) 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); display:grid; grid-template-columns:auto 1fr; gap:var(--s1) var(--s4); align-items:baseline; }
.dpi .figure{ font:300 40px/1 var(--serif); color:var(--ink); font-variant-numeric:lining-nums; }
.dpi p{ margin:0; font:400 16.5px/1.5 var(--serif); }

/* ── the conversation ─────────────────────────────────────────────────── */
.thread{ display:flex; flex-direction:column; gap:var(--s4); margin:0 0 var(--s4); }
.line{ display:grid; grid-template-columns:96px 1fr; gap:var(--s3); align-items:baseline; }
.line .who{ font:600 9.5px/2 var(--sans); letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.line p{ margin:0; font:400 19px/1.55 var(--serif); color:var(--ink); max-width:46ch; }
.line.writer p{ font-style:italic; color:var(--ink-soft); }
.line.thinking p{ color:var(--muted); font-style:italic; animation:breathe 2.4s var(--ease) infinite; }
@keyframes breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

.ask{ display:flex; gap:var(--s3); align-items:flex-end; }
.ask .field{ flex:1; }
.counter{ font:600 10px/1.4 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin:var(--s3) 0 0; }

.five{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin:var(--s4) 0; }
.option{ appearance:none; border:0; border-radius:0; margin:0; background:var(--paper); padding:var(--s2) var(--s2) var(--s3); text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:var(--s2); color:var(--text-body); transition:background var(--base) var(--ease); min-width:0; }
.option canvas{ width:100%; height:auto; display:block; background:var(--paper-2); box-shadow:var(--shadow-plate); }
.option b{ font:500 17px/1.2 var(--serif); color:var(--ink); }
.option span{ font:italic 400 14.5px/1.35 var(--serif); color:var(--muted); }
.option[aria-pressed="true"]{ background:var(--paper-2); }
.option[aria-pressed="true"] b::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--gold); margin-right:var(--s2); vertical-align:middle; }

/* ── the easel ────────────────────────────────────────────────────────── */
.easel-frame{ background:var(--paper-2); border:1px solid var(--rule); padding:var(--s4); display:grid; place-items:center; min-height:320px; position:relative; }
.easel-frame canvas{ max-width:100%; max-height:calc(100svh - 300px); width:auto; height:auto; display:block; box-shadow:var(--shadow-sheet); background:var(--paper); }
.easel-empty{ text-align:center; max-width:30ch; }
.easel-empty p{ margin:0; font:italic 300 24px/1.35 var(--serif); color:var(--ink-soft); }
.easel-bar{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s2) var(--s3); align-items:center; margin-top:var(--s2); }
.views{ display:flex; gap:0 var(--s3); flex-wrap:wrap; }
.views button{ appearance:none; border:0; border-radius:0; background:transparent; cursor:pointer; min-height:var(--tap); padding:0;
  font:500 10px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:var(--s2);
  transition:color var(--fast) var(--ease); }
.views button .dot{ opacity:0; transition:opacity var(--base) var(--ease); }
.views button[aria-pressed="true"]{ color:var(--ink); }
.views button[aria-pressed="true"] .dot{ opacity:1; }
.readout{ font:italic 400 15.5px/1.4 var(--serif); color:var(--muted); margin:var(--s2) 0 0; min-height:1.4em; }

/* ── the back and the spine ──────────────────────────────────────────── */
.author-photo{ display:flex; gap:var(--s3); align-items:center; }
.author-photo canvas{ width:64px; height:64px; display:block; background:var(--paper-2); }

/* ── every platform ──────────────────────────────────────────────────── */
.files{ list-style:none; margin:var(--s4) 0 0; padding:0; border-top:1px solid var(--rule); }
.files li{ display:grid; grid-template-columns:1fr auto; gap:var(--s1) var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--rule); align-items:baseline; }
.files .name{ font:400 19px/1.3 var(--serif); color:var(--ink); }
.files .spec{ font:600 9.5px/1.6 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.files .verdict{ font:600 10px/1.4 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--ink); white-space:nowrap; }
.files .verdict.pass::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--gold); margin-right:var(--s2); vertical-align:middle; }
.files .finds{ grid-column:1 / -1; margin:var(--s1) 0 0; padding:0; list-style:none; border:0; }
.files .finds li{ display:block; border:0; padding:0 0 var(--s1); font:400 16px/1.45 var(--serif); color:var(--text-body); }
.files .finds li b{ font:600 9.5px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--ink); margin-right:var(--s2); }

.till{ margin-top:var(--s5); padding:var(--s4) 0 0; border-top:1px solid var(--ink); }
.till .figure{ font:300 52px/1 var(--serif); color:var(--ink); font-variant-numeric:lining-nums; margin:0 0 var(--s2); }
.till p{ margin:0 0 var(--s2); max-width:50ch; }
.aside{ margin-top:var(--s5); font:italic 400 17px/1.5 var(--serif); color:var(--ink-soft); }

/* ── states ──────────────────────────────────────────────────────────── */
.status{ margin:var(--s3) 0 0; font:italic 400 17px/1.5 var(--serif); color:var(--ink-soft); min-height:1.5em; }
.status.working{ animation:breathe 2.4s var(--ease) infinite; }
.status.fault{ color:var(--ink); }
.status.fault::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--gold-d); margin-right:var(--s2); vertical-align:middle; }
.offline{ position:fixed; left:0; right:0; bottom:0; z-index:6; padding:var(--s3) var(--s4) calc(var(--s3) + var(--safe-b)); background:var(--paper);
  border-top:1px solid var(--rule); font:italic 400 17px/1.4 var(--serif); color:var(--ink); text-align:center; }

/* ── the colophon ─────────────────────────────────────────────────────── */
.colophon{ max-width:1360px; margin:0 auto; padding:var(--s5) var(--s4) calc(var(--s6) + var(--safe-b)); border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); justify-content:space-between; }
.colophon p{ margin:0; font:italic 400 15.5px/1.5 var(--serif); color:var(--muted); max-width:62ch; }

/* ── a phone ──────────────────────────────────────────────────────────── */
@media (max-width: 960px){
  .studio{ grid-template-columns:minmax(0,1fr); gap:0; padding:0 var(--s3) var(--s7); }
  .easel{ order:-1; position:sticky; top:calc(var(--safe-t) + 92px); z-index:4; background:var(--paper); padding:var(--s2) 0; border-bottom:1px solid var(--rule); }
  .easel-frame{ min-height:180px; padding:var(--s2); }
  .easel-frame canvas{ max-height:34svh; }
  .easel-empty p{ font-size:19px; }
  .readout{ display:none; }
  .fields{ grid-template-columns:1fr; }
  .five{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .five::-webkit-scrollbar{ display:none; }
  .option{ flex:0 0 44%; scroll-snap-align:start; }
  .routes{ grid-template-columns:1fr; }
  .route{ min-height:0; }
  .line{ grid-template-columns:1fr; gap:var(--s1); }
  .step h2{ font-size:30px; }
  .brand{ font-size:19px; }
}
@media (max-width: 420px){
  .option{ flex-basis:64%; }
  .photo-row{ grid-template-columns:88px 1fr; }
  .photo-row canvas{ width:88px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition-duration:0ms !important; }
}
@media print{ .top, .easel-bar, .colophon, .offline{ display:none; } }