/* Symbol Mirror — shared chrome. Recipe 26.
   The palette and the three faces are locked (TODO-FREE-REBUILD.md).
   Radius tokens: panel 12 / card 6 / control 4.
   Depth is a 1px hairline. No shadows anywhere. No translucent fills as surface.
   Gold is hairline and ornament only — 2.26 on parchment, illegal as text there. */
:root{
  --abyss:#061F2E; --cy-ink:#082230; --cy-a2:#0b2c3e;
  --parchment-lt:#F7EED9; --parchment:#E4D3AF; --ink:#171717;
  --gold:#C39A47; --cheiro-light-gold:#F2DCA3;
  --turquoise:#1E9BC6; --turquoise-deep:#1E728F;
  --suit-red:#B72A22; --danger:#E8B4A0;

  --f-head:"Alegreya",Georgia,serif;
  --f-menu:"Cormorant Garamond",Georgia,serif;
  --f-body:"Newsreader",Georgia,serif;

  --r-panel:12px; --r-card:6px; --r-control:4px;

  /* base 8, generous at section level */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --measure:68ch;
}
*{box-sizing:border-box}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale}
body{
  margin:0; background:var(--abyss); color:var(--parchment-lt);
  font-family:var(--f-body); font-size:19px; line-height:1.62; text-wrap:pretty;
}
.wrap{max-width:980px; margin:0 auto; padding:var(--s4) var(--s3) var(--s6)}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--cheiro-light-gold); outline-offset:3px; border-radius:2px;
}
.skip{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:50;
  background:var(--parchment-lt); color:var(--ink); padding:10px 16px;
  font-family:var(--f-menu); letter-spacing:.16em; text-transform:uppercase;
  font-size:13px; border-radius:var(--r-control);
  min-height:44px; display:inline-flex; align-items:center;
}
.skip:focus{inset-inline-start:var(--s2); top:var(--s2)}

/* ---------- chrome: header + nav ---------- */
.sm-head{display:flex; flex-direction:column; align-items:center;
  gap:var(--s2); margin-bottom:var(--s5)}
.sm-eyebrow{
  font-family:var(--f-menu); font-style:italic; font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
.sm-nav{display:flex; gap:var(--s4); flex-wrap:wrap; justify-content:center}
.sm-nav a{
  position:relative;
  font-family:var(--f-menu); font-weight:600; font-size:14px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--parchment);
  text-decoration:none; padding:4px 2px; display:inline-block;
  transition:color .25s ease;
}
.sm-nav a::after{
  content:""; display:block; height:1px; margin-top:7px;
  background:var(--gold); transition:background .25s ease;
}
.sm-nav a:hover,.sm-nav a:focus-visible{color:var(--parchment-lt)}
.sm-nav a:hover::after,.sm-nav a:focus-visible::after{background:var(--cheiro-light-gold)}
.sm-nav a[aria-current=page]{color:var(--cheiro-light-gold)}
.sm-nav a[aria-current=page]::after{background:var(--cheiro-light-gold); height:2px}

/* ---------- page head ---------- */
.page-head{text-align:center; margin-bottom:var(--s5)}
.page-head h1{
  font-family:var(--f-head); font-style:italic; font-weight:500;
  font-size:clamp(38px,6vw,60px); line-height:1.05; margin:0 0 var(--s2);
  text-wrap:balance; color:var(--parchment-lt);
}
.page-head p{margin:0 auto; max-width:56ch; color:var(--parchment); font-weight:400}

.eyebrow{
  font-family:var(--f-menu); font-weight:600; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  margin:0 0 var(--s2);
}
section{margin-bottom:var(--s6)}

/* ---------- homepage hero ---------- */
/* Split diptych (TASTE 01): a statement column, and a working current-window
   card. Nothing centred but the chrome. */
/* One statement column. The live-window card that used to sit beside it was
   Cycles a second time, and Cycles already has a card in the grid below. */
.hero{
  display:block; margin-bottom:var(--s6);
}
.hero-say .eyebrow{margin-bottom:var(--s3)}
.hero-say h1{
  font-family:var(--f-head); font-style:italic; font-weight:500;
  font-size:clamp(40px,6.4vw,66px); line-height:1.02; margin:0 0 var(--s3);
  max-width:20ch; text-wrap:balance; color:var(--parchment-lt);
}
.hero-say p{margin:0 0 var(--s3); max-width:56ch; color:var(--parchment)}
.hero-say .lede{font-size:21px; color:var(--parchment-lt)}

/* The one light patch on the page — the live window, where the answer lands. */
.now-card{
  background:var(--parchment-lt); color:var(--ink);
  border:1px solid #C39A47; border-radius:var(--r-panel);
  padding:var(--s4) var(--s4) var(--s3);
}
.now-card .eyebrow{color:var(--turquoise-deep)}
.now-card .now-name{
  font-family:var(--f-head); font-weight:500; font-size:clamp(30px,4vw,44px);
  line-height:1.05; margin:0 0 var(--s1); color:var(--ink); text-wrap:balance;
}
.now-card .now-when{
  font-family:var(--f-body); font-style:italic; font-size:17px;
  color:#171717; margin:0 0 var(--s3); font-variant-numeric:tabular-nums;
}
.now-card .now-line{margin:0 0 var(--s3); max-width:44ch}
.now-card .now-go{
  font-family:var(--f-menu); font-weight:600; font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--turquoise-deep);
  text-decoration:none; display:inline-flex; align-items:center; min-height:44px;
  border-bottom:1px solid var(--turquoise-deep); padding-bottom:2px; width:fit-content;
}
.now-card .now-go:hover{color:var(--suit-red); border-color:var(--suit-red)}

/* ---------- tool index ---------- */
.tools-lead{text-align:center; margin:0 auto var(--s5); max-width:52ch;
  color:var(--parchment)}
.tool-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s3);
}
.tool-card{
  display:flex; flex-direction:column; gap:var(--s2);
  border:1px solid var(--turquoise-deep); border-radius:var(--r-card);
  padding:var(--s3); text-decoration:none; color:inherit; background:transparent;
  transition:border-color .25s ease;
}
.tool-card:hover{border-color:var(--turquoise)}
.tool-card:focus-visible{border-color:var(--turquoise);
  outline:2px solid var(--cheiro-light-gold); outline-offset:3px}
.tool-card .tc-eyebrow{
  font-family:var(--f-menu); font-weight:600; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.tool-card h2{
  font-family:var(--f-head); font-weight:500; font-size:29px;
  line-height:1.1; margin:0; color:var(--parchment-lt);
}
.tool-card p{margin:0; color:var(--parchment); font-size:17px; line-height:1.55}
.tool-card .tc-go{
  margin-top:auto; font-family:var(--f-menu); font-weight:600; font-size:13px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--turquoise);
}
.tool-card:hover .tc-go{color:var(--cheiro-light-gold)}

/* ---------- footer ---------- */
.foot{
  margin-top:var(--s6); text-align:center; font-family:var(--f-menu);
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--turquoise-deep);
}
.foot a{
  color:var(--turquoise-deep); text-decoration:none; display:inline-flex;
  align-items:center; min-height:44px; padding-inline:10px;
}
.foot a:hover{color:var(--turquoise)}
.foot .tip{color:var(--gold)}
.foot .tip:hover{color:var(--cheiro-light-gold)}
/* the easter-egg diamond — dim, unlabelled in the reading sense */
.foot .egg{color:var(--gold)}
.foot .egg:hover{color:var(--cheiro-light-gold)}

@media (max-width:760px){
  .tool-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sm-head{margin-bottom:var(--s4); gap:var(--s1)}
  .sm-nav{gap:var(--s2) var(--s3)}
  .sm-nav a{min-height:44px; display:inline-flex; align-items:center}
  .wrap{padding:var(--s3) var(--s2) var(--s5)}
  .hero-say h1{font-size:34px}
  .now-card{padding:var(--s3) var(--s2)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* ---------- authored form controls (contact, support) ---------- */
/* Inputs and selects match the button radius at 4px. Owner's call. */
.field{display:block; margin-bottom:var(--s3)}
.field label{
  display:block; font-family:var(--f-menu); font-weight:600; font-size:13px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  margin-bottom:var(--s1);
}
.field input, .field textarea, .field select{
  width:100%; font-family:var(--f-body); font-size:17px; color:var(--ink);
  background:var(--parchment-lt); border:1px solid #C39A47;
  border-radius:var(--r-control); padding:12px 14px;
}
.field textarea{min-height:140px; resize:vertical}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:2px solid var(--cheiro-light-gold); outline-offset:2px;
  border-color:var(--turquoise-deep);
}
/* prose pages: readable measure, quiet links on the dark ground */
.prose{max-width:var(--measure); margin:0 auto}
.prose h2{font-family:var(--f-head); font-weight:500; font-size:clamp(24px,3.4vw,32px);
  color:var(--parchment-lt); margin:var(--s5) 0 var(--s2); line-height:1.15}
.prose h3{font-family:var(--f-menu); font-weight:600; font-size:14px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  margin:var(--s4) 0 var(--s1)}
.prose p, .prose li{color:var(--parchment); margin:0 0 var(--s2)}
.prose a{color:var(--turquoise); text-decoration:none; border-bottom:1px solid var(--turquoise-deep)}
.prose a:hover{color:var(--cheiro-light-gold); border-color:var(--cheiro-light-gold)}
.prose ul, .prose ol{padding-inline-start:1.3em; margin:0 0 var(--s3)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  font-family:var(--f-menu); font-weight:600; font-size:14px; letter-spacing:.22em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  padding:12px 26px; border-radius:var(--r-control);
  color:var(--abyss); background:var(--gold); border:1px solid var(--gold);
}
.btn:hover{background:var(--cheiro-light-gold); border-color:var(--cheiro-light-gold)}
.btn-quiet{color:var(--turquoise); background:transparent; border-color:var(--turquoise-deep)}
.btn-quiet:hover{color:var(--parchment-lt); background:transparent; border-color:var(--turquoise)}
/* `.prose a` outranks `.btn`, so a button inside prose came out turquoise on
   gold — 1.22:1 — with a link underline through it. 404 and the thanks page
   both had one. */
.prose a.btn{color:var(--abyss); border-bottom:0}
.prose a.btn:hover{color:var(--abyss); border-bottom:0}
.prose a.btn-quiet{color:var(--turquoise); border-bottom:0}
.prose a.btn-quiet:hover{color:var(--parchment-lt)}

/* ---------- 404 ---------- */
/* One centred column: heading, one line of explanation, one way back. */
.page-missing{max-width:52ch; margin:var(--s6) auto; text-align:center}
.page-missing .page-head{margin-bottom:var(--s3)}
.page-missing p{color:var(--parchment); margin:0 auto var(--s4); max-width:44ch}
.page-missing .btn{margin:0 auto}

/* Inline code in the legal pages: the type system has three serifs and no
   fourth, so a storage key is set in the body face, tracked to read as a name. */
.prose code{font-family:var(--f-body); font-style:normal; letter-spacing:.02em;
  color:var(--parchment-lt)}