/* ══════════════════════════════════════════════════════════════════════════
   HAUTE LUMIÈRE — the house.

   Lifted verbatim from the apex at hautelumiere.life, which is the mockup and
   the authority. Every surface in the house is set from this file so the store,
   the reader and the front door are one page in three rooms rather than three
   interpretations of one idea. If this and the apex ever disagree, the apex is
   right and this file is stale.
   ══════════════════════════════════════════════════════════════════════════ */
/* ─── the seven registers ─────────────────────────────────────────────────
   Each is a complete palette, not a skin. Gold is the only accent and is
   never a fill. Radius zero. Cards are grid cells over a hairline rule.    */
html[data-register="aurora"]  {--paper:#F4F9FD;--paper-2:#E9F2FA;--ink:#17283A;--text:#3A5062;--muted:#6685A0;--gold:#B7A667;--gold-d:#93813C;--rule:#D2E5F2;--desk:#C3D9EC}
html[data-register="daylight"]{--paper:#FAF8F3;--paper-2:#F3EFE6;--ink:#0C1E16;--text:#334A3F;--muted:#5C7065;--gold:#C5A059;--gold-d:#9A7A3A;--rule:#E1E7E2;--desk:#D6DAD4}
html[data-register="solstice"]{--paper:#FDF8E4;--paper-2:#F7EFD3;--ink:#3A3117;--text:#5C4F28;--muted:#877949;--gold:#C79A3C;--gold-d:#A2782A;--rule:#EDE3C4;--desk:#E6DBB6}
html,html[data-register="dusk"]{--paper:#FBF4EA;--paper-2:#F4E8DA;--ink:#33201A;--text:#5A3C2E;--muted:#7A5B4C;--gold:#D69A4C;--gold-d:#B0713C;--rule:#EDDFCE;--desk:#E0CDB8}
html[data-register="vespers"] {--paper:#3A2E22;--paper-2:#463829;--ink:#F2E3C8;--text:#DCC9A6;--muted:#B39B78;--gold:#D9AE6A;--gold-d:#C79753;--rule:#55432F;--desk:#241C14}
html[data-register="midnight"]{--paper:#111620;--paper-2:#181E2A;--ink:#EFE8D8;--text:#D8D2C4;--muted:#8B93A3;--gold:#D9B472;--gold-d:#E7C88E;--rule:#242C3A;--desk:#080B11}
html[data-register="nocturne"]{--paper:#0E1712;--paper-2:#152019;--ink:#EDE6D2;--text:#D6CFBB;--muted:#849184;--gold:#C7A468;--gold-d:#D9B87F;--rule:#1F2B23;--desk:#070B08}

:root{--serif:"Cormorant Garamond",Georgia,serif;--sans:"Manrope",system-ui,sans-serif;
      --ease:cubic-bezier(.165,.84,.44,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--desk);color:var(--text);font-family:var(--serif);
     font-size:17.5px;line-height:1.72;-webkit-font-smoothing:antialiased;
     transition:background .8s var(--ease),color .8s var(--ease)}
.sheet{max-width:66em;margin:0 auto;background:var(--paper);min-height:100vh;
       padding:0 3em 8em;transition:background .8s var(--ease)}

/* furniture — Manrope, uppercase, tracked, ignored by the reader */
.kicker,.tag,.folio{font-family:var(--sans);text-transform:uppercase;font-weight:600}
.kicker{font-size:10px;letter-spacing:.32em;color:var(--muted);margin:0}
.tag{font-size:8.5px;letter-spacing:.34em;color:var(--muted)}

/* the register switch, the only chrome with a radius */
.registers{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;
  display:flex;gap:2px;padding:4px;border-radius:999px;
  background:color-mix(in srgb,var(--paper) 84%,transparent);
  backdrop-filter:blur(16px);border:1px solid var(--rule)}
.registers button{appearance:none;border:0;background:none;cursor:pointer;border-radius:999px;
  font-family:var(--sans);font-size:8px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);padding:8px 11px;transition:color .5s var(--ease)}
.registers button[aria-pressed="true"]{color:var(--gold-d)}
[data-hit]{min-height:44px;display:inline-flex;align-items:center}

/* masthead */
header.mast{padding:7.5em 0 0;text-align:center}
.mark{font-family:var(--serif);font-weight:300;letter-spacing:.26em;
      font-size:clamp(30px,5.6vw,52px);color:var(--ink);margin:0;line-height:1}
.mast .rule{height:1px;background:var(--rule);margin:2.4em 0 0}

/* the cover line */
.cover{padding:3.6em 0 0;max-width:24em;margin:0 auto;text-align:center}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(38px,7.4vw,70px);
   line-height:1.04;letter-spacing:.008em;color:var(--ink);margin:.5em 0 0;text-wrap:balance}
h1 em{font-style:italic;color:var(--gold-d)}
.deck{font-style:italic;font-size:20px;color:var(--muted);margin:1.5em auto 0;max-width:26em;line-height:1.5}

/* the aphorism — the system's signature */
.quiet{font-style:italic;font-size:22px;line-height:1.45;color:var(--ink);
       max-width:19em;margin:2.6em auto 0;text-align:center}

/* the offer */
.offer{margin:4.4em auto 0;max-width:34em;text-align:center;
       border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:3em 1em}
.amount{font-family:var(--serif);font-weight:300;font-size:clamp(60px,13vw,104px);
        line-height:.9;color:var(--ink);display:block;font-variant-numeric:tabular-nums}
.per{font-family:var(--sans);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
     color:var(--muted);margin:1.4em 0 0}
.free{font-style:italic;font-size:19px;color:var(--gold-d);margin:1.1em 0 0}

/* the only button on the page. Not gold — gold is never a fill. */
.join{display:inline-block;margin:2.4em 0 0;padding:1.15em 3.4em;
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;text-decoration:none;
  color:var(--paper);background:var(--ink);border:1px solid var(--ink);
  transition:background .5s var(--ease),color .5s var(--ease)}
.join:hover{background:transparent;color:var(--ink)}
.join:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.after{font-family:var(--sans);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
       color:var(--muted);margin:1.6em 0 0}

/* what is in it — grid cells over a hairline, radius zero */
.contents{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin:4.4em 0 0}
.cell{background:var(--paper);padding:2.2em 1.8em}
.cell .n{font-family:var(--serif);font-weight:300;font-size:44px;line-height:1;
         color:var(--gold-d);display:block;font-variant-numeric:tabular-nums}
.cell h3{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--ink);
         margin:.55em 0 .35em;line-height:1.2}
.cell p{margin:0;font-size:16px;line-height:1.62}

/* the argument */
.movement{max-width:33em;margin:5.4em auto 0}
.movement h2{font-family:var(--serif);font-weight:300;font-size:clamp(28px,4.6vw,40px);
  line-height:1.12;color:var(--ink);margin:0 0 .7em;text-wrap:balance}
.movement p{margin:0 0 1.15em}
.movement p strong{color:var(--ink);font-weight:600}
.drop::first-letter{font-family:var(--serif);font-weight:300;font-size:82px;line-height:.72;
  float:left;padding:.06em .1em 0 0;color:var(--gold-d)}

/* the comparison — a table, because it is a table */
.wide{overflow-x:auto;margin:2.4em 0 0}
table{width:100%;border-collapse:collapse;font-size:16px}
th{font-family:var(--sans);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
   font-weight:600;color:var(--muted);text-align:left;padding:.9em 1.2em .9em 0;
   border-bottom:1px solid var(--rule)}
td{padding:1em 1.2em 1em 0;border-bottom:1px solid var(--rule);vertical-align:top}
td:first-child{color:var(--ink)}
td em{font-style:italic;color:var(--gold-d)}

footer{margin:6.4em 0 0;padding:2.6em 0 0;border-top:1px solid var(--rule);text-align:center}
footer p{font-family:var(--sans);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
         color:var(--muted);margin:.5em 0}
footer a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
footer a:hover{color:var(--gold-d)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:640px){
  .sheet{padding:0 1.5em 5em}
  header.mast{padding:5.4em 0 0}
  .registers{top:auto;bottom:14px}
}