/* ============================================================
   MyAttic — site styles
   ------------------------------------------------------------
   One dark room, lit by one lamp. Committed single visual world:
   light is the interaction material, and cream paper appears only
   where a memory has been recovered. Load order is fonts.css then
   this file. Every colour comes from a token in :root — change it
   there, never at the component.
   ============================================================ */
/* ===========================================================
   MyAttic — a dark attic, lit by one lamp.
   Single visual world by design: the entire site is the room
   at night. Light is the interaction material. Paper — the
   only cream in the palette — appears only where a memory is
   found. The lights come on once, at the very end.
   =========================================================== */

:root{
  /* --- ground: warm brown-black, never grey, never blue --- */
  --void:      #070605;
  --attic:     #100D0A;
  --leather:   #221B14;
  --leather-2: #2E251B;

  /* --- the light --- */
  --amber:     #E8924A;
  --amber-hi:  #FFC489;
  --ember:     #B85C2C;
  --ember-ink: #A04A1E;   /* the ember, darkened for use on cream */

  /* --- paper: reserved for recovered memory --- */
  --paper:     #F5EDE0;
  --paper-2:   #FDFAF5;
  --ink:       #221B14;

  /* --- warm neutrals, biased toward the amber, not grey --- */
  --dust:      #C6B5A3;
  --dust-dim:  #9A8876;
  --dust-far:  #6E6154;

  --icon: url("../img/icon.png");
  --portrait: url("../img/founder.jpg");

  --edge:      rgba(232,146,74,.14);

  --measure: 34rem;

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-prose:   "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-ui:      "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

  --e-out: cubic-bezier(.16,1,.3,1);
  --e-soft: cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--attic);
  color:var(--dust);
  font-family:var(--f-ui);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:rgba(232,146,74,.28); color:var(--amber-hi); }

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:4px;
  border-radius:3px;
}

/* --- the lamp: a fixed light source that follows the pointer --- */
.lamp{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(560px circle at var(--mx,50%) var(--my,42%),
      rgba(255,196,137,.115) 0%,
      rgba(232,146,74,.075) 26%,
      rgba(184,92,44,.035) 46%,
      transparent 72%);
  transition:opacity 1.4s var(--e-soft);
  will-change:background;
}
/* the room's own dark edges */
.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(130% 95% at 50% 40%, transparent 42%, rgba(7,6,5,.72) 100%);
  transition:opacity 2s var(--e-soft);
}
/* dust in the beam */
#motes{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.6; }
/* paper grain over everything */
.grain{
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

main{ position:relative; z-index:4; }

/* ---------------- shared type ---------------- */
.wrap{ width:min(100% - 2.5rem, 68rem); margin-inline:auto; }
.narrow{ width:min(100% - 2.5rem, 46rem); margin-inline:auto; }

.ring{
  font-family:var(--f-ui);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber);
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem .75rem;
}
.ring::after{ content:""; height:1px; flex:1 1 2rem; min-width:0; max-width:5rem;
  background:linear-gradient(90deg,var(--edge),transparent); }
.ring--center{ justify-content:center; }
.ring--center::after{ display:none; }

h1,h2,h3{ font-family:var(--f-display); font-weight:400; text-wrap:balance; margin:0;
  font-variation-settings:"SOFT" 24,"WONK" 1; }

h1{
  font-size:clamp(2.6rem, 7.2vw, 5.6rem);
  line-height:.98; letter-spacing:-.035em;
  font-optical-sizing:auto;
  color:var(--paper);
}
h2{
  font-size:clamp(2rem, 4.6vw, 3.5rem);
  line-height:1.04; letter-spacing:-.028em;
  color:var(--paper);
}
h3{ font-size:clamp(1.25rem,2.2vw,1.6rem); line-height:1.2; letter-spacing:-.018em; color:var(--paper); }

.lede{
  font-family:var(--f-prose);
  font-size:clamp(1.0625rem,1.65vw,1.3125rem);
  line-height:1.72; color:var(--dust);
  max-width:var(--measure);
  font-weight:400;
}
.lede em{ color:var(--amber); font-style:italic; }
.lede strong{ color:var(--paper); font-weight:400; }

section{ position:relative; }
.pad{ padding-block:clamp(7rem,17vh,13rem); }

/* ---------------- reveal-by-illumination ----------------
   Nothing on this page slides in. Things become visible,
   the way objects do when a light reaches them.            */
.lit-target{
  opacity:0; filter:blur(9px);
  transition:opacity 1.15s var(--e-soft), filter 1.15s var(--e-soft);
}
.lit-target.lit{ opacity:1; filter:blur(0); }
.lit-target[data-delay="1"]{ transition-delay:.13s }
.lit-target[data-delay="2"]{ transition-delay:.26s }
.lit-target[data-delay="3"]{ transition-delay:.4s }
.lit-target[data-delay="4"]{ transition-delay:.55s }

/* ---------------- nav ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem; padding:1.05rem clamp(1.25rem,4vw,2.5rem);
  background:rgba(16,13,10,.5);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid rgba(232,146,74,.07);
}
.mark{ grid-column:1; display:flex; align-items:center; gap:.6rem; justify-self:start; color:var(--paper); text-decoration:none; }
.markicon{ width:22px; height:22px; border-radius:6px; flex:none;
  background:var(--icon) center/cover no-repeat;
  box-shadow:0 0 0 1px rgba(232,146,74,.18), 0 2px 10px -4px rgba(7,6,5,.9); }
.mark span{ font-family:var(--f-display); font-size:1.0625rem; letter-spacing:-.01em; font-variation-settings:"WONK" 1; }

/* section links — quiet until they are where you are */
.nav-links{
  grid-column:2;
  display:flex; align-items:center; justify-content:center; gap:.35rem;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  display:block; padding:.4rem .7rem; border-radius:999px;
  font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dust-dim); text-decoration:none; white-space:nowrap;
  transition:color .35s var(--e-soft), background .35s var(--e-soft);
}
.nav-links a:hover{ color:var(--paper); background:rgba(232,146,74,.07); }
/* the lamp marks where you are standing */
.nav-links a[aria-current="true"]{ color:var(--amber); background:rgba(232,146,74,.1); }

/* Progressive disclosure by width. Nothing ever wraps or scrolls: a link
   is either shown at a comfortable size or it is not shown. The rail on
   the right edge carries the full set regardless. */
.nav-links [data-tier="2"], .nav-links [data-tier="3"]{ display:none; }
@media (min-width:1120px){ .nav-links [data-tier="2"]{ display:block; } }
@media (min-width:1360px){ .nav-links [data-tier="3"]{ display:block; } }
/* below this the bar cannot hold even three, so the menu carries them */
@media (max-width:767px){ .nav-links{ display:none; } }

/* ---------------- the menu ----------------
   Only exists where the bar and the rail cannot show everything. Three
   lines that become a cross, and a sheet that materialises rather than
   sliding — same rule as the rest of the site: things become visible. */
.menu-btn{
  grid-column:3; justify-self:end;
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px;      /* a full 44px touch target */
  background:none; border:0; cursor:pointer;
}
@media (max-width:1119px){ .menu-btn{ display:flex; } }

.menu-btn span{
  display:block; height:1.5px; width:100%; border-radius:2px;
  background:var(--dust);
  transition:transform .32s var(--e-out), opacity .2s var(--e-soft), background .3s var(--e-soft);
}
.menu-btn:hover span{ background:var(--paper); }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(.4); }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:18;
  display:flex; align-items:center; justify-content:center;
  padding:6rem 1.5rem 3rem;
  background:rgba(11,9,7,.86);
  backdrop-filter:blur(26px) saturate(140%);
  -webkit-backdrop-filter:blur(26px) saturate(140%);
  opacity:0; transition:opacity .32s var(--e-soft);
  overflow-y:auto;
}
.menu.on{ opacity:1; }
.menu[hidden]{ display:none; }

.menu-inner{ display:flex; flex-direction:column; gap:.15rem; width:min(100%,26rem); }
.menu-inner a{
  display:flex; align-items:baseline; gap:1rem;
  padding:.62rem .25rem; text-decoration:none;
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.375rem,5.5vw,1.75rem); letter-spacing:-.02em;
  color:var(--paper);
  opacity:0; transform:translateY(.5rem);
  transition:opacity .4s var(--e-soft), transform .4s var(--e-out), color .25s var(--e-soft);
}
.menu.on .menu-inner a{ opacity:1; transform:none; }
.menu-inner a:active{ color:var(--amber); }
.menu-inner a i{
  font-family:var(--f-ui); font-style:normal;
  font-size:.625rem; font-weight:600; letter-spacing:.16em;
  color:var(--ember); flex:none; width:1.6rem;
}
.menu-inner a[aria-current="true"]{ color:var(--amber); }
.menu-rule{ height:1px; background:var(--edge); margin:1.1rem .25rem; }
.menu-doc{ font-size:1.0625rem !important; color:var(--dust) !important; }
.menu-doc i{ display:none; }

/* the items arrive in order, like the sections do */
.menu.on .menu-inner a:nth-child(1){ transition-delay:0.04s }
.menu.on .menu-inner a:nth-child(2){ transition-delay:0.07s }
.menu.on .menu-inner a:nth-child(3){ transition-delay:0.10s }
.menu.on .menu-inner a:nth-child(4){ transition-delay:0.12s }
.menu.on .menu-inner a:nth-child(5){ transition-delay:0.15s }
.menu.on .menu-inner a:nth-child(6){ transition-delay:0.18s }
.menu.on .menu-inner a:nth-child(7){ transition-delay:0.21s }
.menu.on .menu-inner a:nth-child(8){ transition-delay:0.24s }
.menu.on .menu-inner a:nth-child(9){ transition-delay:0.26s }
.menu.on .menu-inner a:nth-child(11){ transition-delay:0.32s }
.menu.on .menu-inner a:nth-child(12){ transition-delay:0.35s }
.menu.on .menu-inner a:nth-child(13){ transition-delay:0.38s }

body.menu-open{ overflow:hidden; }

/* ---------------- the section rail ----------------
   All eight sections, reachable, without putting eight links in the
   bar. Unlit marks down the right edge; the light sits on the section
   you are in, and a name appears only when you reach for one. */
.rail{
  position:fixed; right:1.5rem; top:50%; transform:translateY(-50%);
  z-index:19; display:flex; flex-direction:column; gap:.5rem;
  align-items:flex-end;
}
.rail a{
  display:flex; align-items:center; gap:.6rem;
  padding:.5rem 0 .5rem .6rem;        /* a real hit target around a small dot */
  text-decoration:none;
}
.rail a::after{                        /* the mark itself */
  content:""; flex:none;
  width:6px; height:6px; border-radius:50%;
  background:var(--dust-far);
  transition:background .4s var(--e-soft), transform .4s var(--e-out),
             box-shadow .4s var(--e-soft);
}
.rail a span{                          /* the name, kept in the a11y tree */
  font-family:var(--f-ui);
  font-size:.625rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dust); white-space:nowrap;
  opacity:0; transform:translateX(.4rem);
  transition:opacity .3s var(--e-soft), transform .3s var(--e-out);
  pointer-events:none;
}
.rail a:hover span, .rail a:focus-visible span{ opacity:1; transform:none; }
.rail a:hover::after{ background:var(--dust); transform:scale(1.3); }
.rail a[aria-current="true"]::after{
  background:var(--amber); transform:scale(1.45);
  box-shadow:0 0 12px rgba(232,146,74,.6);
}
.rail a[aria-current="true"] span{ color:var(--amber); }

/* below this the top bar's three links are enough — a rail on a phone
   is a target nobody can hit and a column nobody asked for */
@media (max-width:1024px){ .rail{ display:none; } }

/* the fixed bar must not sit on top of the section it just scrolled to */
[id]{ scroll-margin-top:5.5rem; }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

/* ---------------- 1 · HERO ---------------- */
.hero{ min-height:100svh; display:grid; place-items:center; padding:8rem 0 6rem;
  overflow:hidden; }   /* the fragments bleed past the edge by design */
.hero-inner{ position:relative; text-align:center; }

.hero h1{ position:relative; z-index:2; }
.hero h1 .w{
  display:inline-block;
  opacity:0; filter:blur(14px);
  transition:opacity 1.5s var(--e-soft), filter 1.5s var(--e-soft), color 1.5s var(--e-soft);
  color:var(--dust-far);
}
.hero h1 .w.on{ opacity:1; filter:blur(0); color:var(--paper); }
.hero h1 .hi.on{ color:var(--amber-hi); font-style:italic; font-variation-settings:"SOFT" 60,"WONK" 1; }

.hero-sub{
  margin:2.25rem auto 0; max-width:31rem;
  font-family:var(--f-prose); font-weight:400;
  font-size:1.0625rem; line-height:1.7; color:var(--dust);
  opacity:0; transition:opacity 1.4s var(--e-soft) .9s;
}
.hero-sub.on{ opacity:1; }

/* The plain line under the poem. Quieter than the sub and sitting right
   above the button, because that is where someone decides. */
.hero-deck{
  margin:1.5rem auto 0; max-width:34rem;
  font-family:var(--f-prose); font-weight:400;
  font-size:.9375rem; line-height:1.65; color:var(--dust-dim);
  opacity:0; transition:opacity 1.4s var(--e-soft) 1.05s;
}
.hero-deck.on{ opacity:1; }

/* the fragments hidden in the dark of the hero — only the lamp finds them */
.fragments{
  position:absolute; inset:-12vh -8vw; z-index:1; pointer-events:none;
  -webkit-mask-image:radial-gradient(300px circle at var(--mx,50%) var(--my,42%), #000 0%, rgba(0,0,0,.58) 45%, transparent 74%);
          mask-image:radial-gradient(300px circle at var(--mx,50%) var(--my,42%), #000 0%, rgba(0,0,0,.58) 45%, transparent 74%);
  opacity:0; transition:opacity 2.2s var(--e-soft) 1.6s;
}
.fragments.on{ opacity:1; }
.fragments i{
  position:absolute;
  font-family:var(--f-prose); font-style:italic; font-weight:300;
  font-size:clamp(1rem,1.6vw,1.3125rem);
  color:var(--amber); white-space:nowrap;
  text-shadow:0 0 26px rgba(232,146,74,.4);
}

/* ---------------- 2 · WHAT FORGETTING ACTUALLY DOES ----------------
   One real memory, one screen. As you scroll it does what memory
   does: it goes soft first, and only then does it go missing. The
   words are never deleted from the layout — they are replaced by
   the blank they leave behind, which is the honest shape of it. */
.forget{ padding-block:0; }
.forget .stick{ position:sticky; top:0; height:100svh; display:grid; place-items:center; }
.forget-track{ height:250svh; }

.memory{ width:min(100% - 2.5rem, 46rem); }

.recall{
  margin:1.6rem 0 0;
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.55rem,3.9vw,2.85rem);
  line-height:1.34; letter-spacing:-.022em;
  color:var(--paper); text-wrap:pretty;
}
.recall .w{
  display:inline-block; position:relative; filter:blur(0);
  transition:filter .85s var(--e-soft), opacity .85s var(--e-soft), color .5s var(--e-soft);
}
.recall .w.vague{ filter:blur(6px); opacity:.42; }
.recall .w.blank{ filter:blur(0); opacity:1; color:transparent; }
.recall .w.blank::after{
  content:""; position:absolute; left:.05em; right:.22em; bottom:.19em;
  height:1.5px; background:var(--dust-dim); border-radius:1px;
}

.age{ position:relative; height:1.4em; margin-top:clamp(1.75rem,4vh,2.75rem); }
.age span{
  position:absolute; inset:0 auto auto 0;
  font-size:.6875rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber); opacity:0; transition:opacity .55s var(--e-soft);
  white-space:nowrap;
}
.age span.on{ opacity:1; }

.verdict{
  margin:.35rem 0 0; max-width:36rem;
  font-family:var(--f-prose); font-weight:400;
  font-size:clamp(1rem,1.75vw,1.25rem); line-height:1.7; color:var(--dust);
  opacity:0; filter:blur(8px);
  transition:opacity .9s var(--e-soft), filter .9s var(--e-soft);
}
.verdict.on{ opacity:1; filter:blur(0); }
.verdict em{ color:var(--amber); font-style:italic; }

/* ---------------- 3 · THE BELIEF ---------------- */
.belief{ text-align:center; }
.belief blockquote{
  margin:0 auto; max-width:22ch;
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(2.2rem,6.2vw,4.75rem); line-height:1.02; letter-spacing:-.038em;
  color:var(--paper); text-wrap:balance;
}
.belief blockquote em{ font-style:italic; color:var(--amber); font-variation-settings:"SOFT" 70,"WONK" 1; }
.belief .after{
  margin:2rem auto 0; max-width:42ch;
  font-family:var(--f-prose); font-weight:400;
  font-size:clamp(1.0625rem,1.6vw,1.25rem);
  line-height:1.6; color:var(--dust);
}
.belief .attrib{ margin-top:2.5rem; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dust-dim); }

/* ---------------- 5 · THE NO LIST ---------------- */
.nolist{ display:flex; flex-wrap:wrap; gap:.55rem .9rem; margin-top:2.75rem; max-width:44rem; }
.nolist span{
  position:relative; font-family:var(--f-prose); font-weight:400;
  font-size:clamp(1.0625rem,2.1vw,1.5rem); color:var(--dust-dim);
  padding:.1em .15em; transition:color .6s var(--e-soft);
}
.nolist span::after{
  content:""; position:absolute; left:0; right:0; top:54%; height:1.5px;
  background:var(--ember); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--e-out);
}
.nolist.struck span::after{ transform:scaleX(1); }
.nolist.struck span{ color:var(--dust-far); }
.nolist.struck span:nth-child(2)::after{ transition-delay:.07s } .nolist.struck span:nth-child(3)::after{ transition-delay:.14s }
.nolist.struck span:nth-child(4)::after{ transition-delay:.21s } .nolist.struck span:nth-child(5)::after{ transition-delay:.28s }
.nolist.struck span:nth-child(6)::after{ transition-delay:.35s } .nolist.struck span:nth-child(7)::after{ transition-delay:.42s }
.nolist.struck span:nth-child(8)::after{ transition-delay:.49s } .nolist.struck span:nth-child(9)::after{ transition-delay:.56s }
.nolist.struck span:nth-child(10)::after{ transition-delay:.63s }
.yes{
  margin-top:3rem; font-family:var(--f-display); font-size:clamp(1.5rem,3.4vw,2.25rem);
  line-height:1.2; letter-spacing:-.024em; color:var(--paper); max-width:28ch;
}
.yes em{ font-style:italic; color:var(--amber); font-variation-settings:"SOFT" 60,"WONK" 1; }

/* ---------------- 6 · THE ROOM (interactive) ---------------- */
.room{ padding-block:clamp(6rem,13vh,10rem); }
.rooms-strip{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.25rem; }
.room-btn{
  font-family:var(--f-ui); font-size:.875rem; font-weight:500; letter-spacing:-.005em;
  color:var(--dust); background:rgba(46,37,27,.5);
  border:1px solid rgba(232,146,74,.12); border-radius:999px;
  padding:.6rem 1.05rem; cursor:pointer;
  transition:transform .12s ease-out, background .35s var(--e-soft), color .35s var(--e-soft), border-color .35s var(--e-soft);
}
.room-btn:hover{ color:var(--paper); border-color:rgba(232,146,74,.32); background:rgba(46,37,27,.85); }
.room-btn:active{ transform:scale(.965); }
.room-btn[aria-pressed="true"]{
  color:var(--attic); background:var(--amber); border-color:var(--amber);
  box-shadow:0 0 44px rgba(232,146,74,.34);
}

/* the paper — the only cream surface in the room */
.paper{
  position:relative; margin-top:2.5rem; border-radius:5px;
  background:linear-gradient(168deg, var(--paper-2), var(--paper));
  color:var(--ink);
  padding:clamp(1.75rem,4vw,3.25rem);
  box-shadow:0 2px 4px rgba(7,6,5,.5), 0 24px 60px -18px rgba(7,6,5,.8), 0 0 100px -30px rgba(232,146,74,.4);
  opacity:0; transform:scale(.985); filter:blur(8px);
  transition:opacity .7s var(--e-soft), transform .7s var(--e-out), filter .7s var(--e-soft);
  min-height:16rem;
}
.paper.on{ opacity:1; transform:none; filter:blur(0); }
.paper::before{ /* a torn top edge of light */
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,196,137,.9),transparent);
  opacity:.8;
}
.paper .kicker{
  font-family:var(--f-ui); font-size:.625rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ember-ink);
  display:flex; align-items:baseline; gap:.6rem; margin-bottom:1.4rem;
  line-height:1.5;
}
.paper .kicker b{ width:5px; height:5px; border-radius:50%; background:var(--ember-ink); }
.story{
  font-family:var(--f-prose); font-weight:400;
  font-size:clamp(1.0625rem,1.85vw,1.375rem); line-height:1.78;
  letter-spacing:-.004em; color:var(--ink); margin:0; min-height:9rem;
  max-width:42rem;
}
.story .cur{ display:inline-block; width:.5em; height:1.05em; vertical-align:-.16em;
  background:var(--ember-ink); margin-left:.08em; animation:blink 1.05s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0} }
.tells{ display:flex; flex-wrap:wrap; gap:.5rem 1.75rem; margin-top:2rem; padding-top:1.4rem;
  border-top:1px solid rgba(34,27,20,.13); opacity:0; transition:opacity .8s var(--e-soft); }
.tells.on{ opacity:1; }
.tell{ display:flex; flex-direction:column; gap:.2rem; }
.tell b{ font-size:.625rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(34,27,20,.6); }
.tell span{ font-family:var(--f-prose); font-size:.9375rem; color:var(--ink); }
.room-note{ margin-top:1.5rem; font-size:.75rem; color:var(--dust-dim); letter-spacing:.01em; }

/* ---------------- 7 · WHAT IT DOES (scrubbed) ---------------- */
.what-track{ height:230svh; }
.what .stick{
  position:sticky; top:0; height:100svh; overflow:hidden;
  /* content grows downward from a fixed line rather than being centred on
     its own height — that is what keeps the four steps from shifting */
  display:grid; justify-items:center; align-content:start;
  padding-top:clamp(7.5rem, 19vh, 11rem);
}
.stage{
  position:relative; width:min(100% - 2.5rem, 44rem);
  min-height:clamp(18rem, 46vh, 24rem);
}
.step{
  /* anchored to a common top, never centred on their own height — that is
     what made the eyebrow and the heading jump from step to step */
  position:absolute; left:0; right:0; top:0;
  opacity:0; filter:blur(10px); transition:opacity .6s var(--e-soft), filter .6s var(--e-soft);
  pointer-events:none;
}
.step.on{ opacity:1; filter:blur(0); }
.step .num{ font-size:.625rem; letter-spacing:.24em; text-transform:uppercase; color:var(--amber); margin-bottom:1.1rem; }
.step h3{ margin-bottom:1rem; font-size:clamp(1.5rem,3.2vw,2.125rem); max-width:20ch; }
.step .lede{ margin:0; max-width:32rem; }
/* ---- the step body ----
   One treatment, four steps. A 2px rule at a fixed inset, one type size,
   one measure. The rule's colour is the only variable, and it carries
   meaning: grey is raw material, amber is what was kept and what comes
   back to you. */
.slab{
  margin:0; padding-left:1.1rem;
  border-left:2px solid var(--dust-far);
  font-family:var(--f-prose); font-weight:400;
  font-size:clamp(.9375rem,1.5vw,1.0625rem); line-height:1.8;
  color:var(--dust); max-width:34rem;
}
.slab{ margin-top:1.6rem; }
.slab--kept{ border-left-color:var(--amber); color:var(--paper); }

/* The spoken-entry credit. Sentence case and dim on purpose: the step
   already has one eyebrow, and two uppercase amber labels in a single
   block is two headings fighting. The bars breathe because that is what
   the app shows while it is listening. */
.spoken{
  display:flex; align-items:flex-start; gap:.55rem;
  margin:.95rem 0 0;
  padding-left:calc(1.1rem + 2px);
  font-family:var(--f-ui); font-size:.75rem; font-weight:400;
  letter-spacing:.01em; color:var(--dust-dim);
}
.mic{ display:flex; align-items:flex-end; gap:2px; height:11px; flex:none; margin-top:.2em; }
.mic b{
  display:block; width:2px; height:4px; border-radius:1px; background:var(--amber);
  animation:listen 1.6s var(--e-soft) infinite;
}
.mic b:nth-child(2){ animation-delay:.22s; }
.mic b:nth-child(3){ animation-delay:.44s; }
@keyframes listen{ 0%,100%{ height:4px; opacity:.55 } 50%{ height:11px; opacity:1 } }
@media (prefers-reduced-motion:reduce){ .mic b{ animation:none; height:7px; } }

.progress{
  position:absolute; left:50%; transform:translateX(-50%); bottom:7vh;
  width:min(100% - 2.5rem, 44rem); height:1px; background:rgba(232,146,74,.12);
}
.progress b{ display:block; height:100%; width:0%; background:var(--amber); }

/* ---------------- 8 · PRIVACY ---------------- */
.vault{ text-align:center; }
.vault .cable{ display:block; margin:0 auto 2.5rem; width:min(100%,20rem); height:auto; overflow:visible; }
.vault .cable path{ stroke:var(--dust-far); fill:none; stroke-width:1.25; stroke-linecap:round; }
.vault .cable .live{ stroke:var(--amber); stroke-dasharray:5 7; animation:flow 1.6s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-24 } }
.vault .cable .cut{ stroke:var(--ember); stroke-width:1.5; }
.specs{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem .5rem; margin-top:3rem; }
.specs li{ list-style:none; font-size:.75rem; letter-spacing:.08em; color:var(--dust);
  border:1px solid rgba(232,146,74,.1); border-radius:999px; padding:.42rem .95rem; }

/* ---------------- 9 · LIGHTS ON ---------------- */
.finale{
  position:relative; overflow:hidden; text-align:center;
  background:var(--attic);
  padding-block:clamp(8rem,20vh,15rem);
  transition:background 2.2s var(--e-soft);
}
.finale.on{ background:var(--paper); }
.finale .bulb{
  position:absolute; left:50%; top:44%; translate:-50% -50%;
  width:120vmax; height:120vmax; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,196,137,.85) 0%, rgba(232,146,74,.35) 26%, transparent 62%);
  opacity:0; scale:.05;
  transition:opacity 1.6s var(--e-soft), scale 2.4s var(--e-out);
}
.finale.on .bulb{ opacity:1; scale:1; }
.finale > .narrow{ position:relative; z-index:2; }
.finale h2{ color:var(--paper); transition:color 2.2s var(--e-soft); max-width:16ch; margin-inline:auto; }
.finale.on h2{ color:var(--ink); }
.finale .close-sub{ margin:2rem auto 0; max-width:30rem; color:var(--dust); transition:color 2.2s var(--e-soft);
  font-family:var(--f-prose); font-weight:400; font-size:1.0625rem; line-height:1.75; }
.finale.on .close-sub{ color:rgba(34,27,20,.7); }
.appicon{ width:104px; height:104px; border-radius:24px; margin:0 auto 2.75rem;
  background:var(--icon) center/cover no-repeat;
  box-shadow:0 18px 50px -18px rgba(7,6,5,.7); opacity:.25; transition:opacity 2.2s var(--e-soft), box-shadow 2.2s var(--e-soft); }
.finale.on .appicon{ opacity:1; box-shadow:0 22px 60px -20px rgba(184,92,44,.5); }
/* ---------------- the App Store badge ----------------
   The one element on this site that does not take the palette. Apple's
   badge is trademarked artwork with fixed proportions and colours, so it
   stays black-on-white or white-on-black — never cream, never amber. The
   variant flips with the ground it sits on, which is what the guidelines
   ask for. */
.hero-cta{
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  margin-top:clamp(2rem,5vh,3rem);
}
.hero#top .hero-cta, .hero .hero-cta{ opacity:0; transition:opacity 1.4s var(--e-soft); }
.hero .hero-cta.on{ opacity:1; }

.appstore{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.5rem 1.15rem .55rem 1rem;
  border-radius:10px;
  background:#fff; color:#000; text-decoration:none;
  font-family:-apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  transition:transform .16s var(--e-out), box-shadow .4s var(--e-soft),
             background 2.2s var(--e-soft), color 2.2s var(--e-soft);
}
.appstore-logo{ width:26px; height:26px; flex:none; fill:currentColor; margin-top:-2px; }
.appstore-text{ display:flex; flex-direction:column; align-items:flex-start; line-height:1; }
.appstore-sm{ font-size:.625rem; font-weight:400; letter-spacing:.005em; }
.appstore-lg{ font-size:1.1875rem; font-weight:500; letter-spacing:-.02em; margin-top:.18em; }

.appstore:hover{ transform:scale(1.03); box-shadow:0 0 44px rgba(232,146,74,.3); }
.appstore:active{ transform:scale(.98); }

/* the finale lights up to cream, so the badge flips to its dark variant */
.finale.on .appstore{ background:#000; color:#fff; }
.finale.on .appstore:hover{ box-shadow:0 0 44px rgba(184,92,44,.4); }


/* The price and the hardware requirement, promoted out of fine print.
   Both were footnotes under the badge; both are arguments, so they are
   set at reading size with the claim on its own line above the reason. */
.cta-price, .cta-hw{
  margin:0; max-width:30rem; text-align:center;
  font-family:var(--f-prose); font-weight:400;
  font-size:.9375rem; line-height:1.62; color:var(--dust-dim);
  transition:color 2.2s var(--e-soft); text-wrap:pretty;
}
.cta-price b, .cta-hw b{
  display:block; margin-bottom:.3rem;
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.1875rem,2.2vw,1.4375rem); line-height:1.25; letter-spacing:-.022em;
  color:var(--paper); transition:color 2.2s var(--e-soft);
}
.finale.on .cta-price, .finale.on .cta-hw{ color:rgba(34,27,20,.7); }
.finale.on .cta-price b, .finale.on .cta-hw b{ color:var(--ink); }

footer{ position:relative; z-index:2; padding:6rem 1.5rem 0; text-align:center; }
footer p{ margin:0; font-size:.75rem; color:var(--dust-dim); letter-spacing:.04em;
  transition:color 2.2s var(--e-soft); }
.finale.on footer p{ color:rgba(34,27,20,.5); }

/* ---------------- responsive ----------------
   The room has to fit the device it is in. Below the tablet
   breakpoint the two scroll-scrubbed sections change shape: the
   machine stops being a sticky scrub and becomes something you
   simply read, because a scrub on a small screen is mostly empty
   scrolling, and the forgetting gets a shorter track and a
   smaller field so the argument still lands in one screen. */

@media (max-width:900px){
  .nav{ padding-inline:clamp(1rem,3vw,2rem); }
  .nav-links{ gap:.15rem; }
}

@media (max-width:430px){
  .mark span{ display:none; }              /* the icon alone still reads as the wordmark */
  .nav-links a{ padding:.4rem .5rem; font-size:.625rem; letter-spacing:.1em; }
}

@media (max-width:768px){
  :root{ --measure:100%; }
  .pad{ padding-block:clamp(2.75rem,6.5vh,4.5rem); }
  .room{ padding-block:clamp(2.75rem,6.5vh,4.5rem); }
  .hero{ min-height:80svh; padding:5rem 0 2rem; }
  /* on a phone the headline has to carry the screen, or the hero
     reads as empty space with a caption in it */
  .hero h1{ font-size:clamp(3rem,11.2vw,4.25rem); line-height:1.02; }
  .hero-sub{ margin-top:1.25rem; font-size:.9375rem; }
  .hero-deck{ margin-top:1rem; font-size:.875rem; }
  .fragments{ display:none; }

  .forget-track{ height:185svh; }
  .memory{ width:calc(100% - 2.5rem); }
  .recall{ font-size:clamp(1.5rem,6.5vw,2rem); line-height:1.36; }
  .verdict{ font-size:1rem; }

  .what-track{ height:auto; }
  .what .stick{ position:static; height:auto; overflow:visible; display:block;
                padding-block:clamp(2.75rem,6.5vh,4.5rem); }
  .stage{ width:calc(100% - 2.5rem); margin-inline:auto; min-height:0; }
  .step{ position:static; translate:none; opacity:1; filter:none;
         padding-block:2rem; border-top:1px solid rgba(232,146,74,.09); }
  .step:first-of-type{ border-top:0; padding-top:0; }
  .progress{ display:none; }

  .rooms-strip{ gap:.5rem; margin-top:1.5rem; }
  .room-btn{ padding:.78rem 1.05rem; }
  .paper{ padding:1.6rem 1.35rem; min-height:0; margin-top:1.5rem; }
  .tells{ gap:1.1rem; }
  .nolist{ gap:.35rem .7rem; }
  .yes{ margin-top:1.75rem; }
  .specs{ gap:.45rem .4rem; }
  .vault .cable{ width:min(100%,13rem); margin-bottom:1.25rem; }
  .appicon{ width:76px; height:76px; margin-bottom:1.6rem; }
  .finale{ padding-block:clamp(3.5rem,9vh,6rem); }
  footer{ padding:3rem 1.25rem 0; }
}

@media (max-width:768px){
  h2{ margin-top:1.25rem !important; }
  .lede{ margin-top:1.1rem !important; }
  .step h3{ margin-bottom:.7rem; }
  .step .num{ margin-bottom:.8rem; }
  .belief .after{ margin-top:1.5rem; }
  .belief .attrib{ margin-top:1.75rem; }
  .specs{ margin-top:2rem; }
  .room-note{ margin-top:1.1rem; }
  .finale .close-sub{ margin-top:1.4rem; }
  .cta{ margin-top:2rem; }
}

@media (max-width:430px){
  .wrap,.narrow,.stage{ width:calc(100% - 2rem); }
  .recall{ font-size:1.45rem; }
  .ring{ font-size:.5625rem; letter-spacing:.14em; }
  .paper .kicker b{ position:relative; top:-.15em; }
  .story{ font-size:1.0625rem; line-height:1.72; }
  .room-btn{ font-size:.8125rem; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .lit-target,.hero h1 .w,.recall .w,.verdict,.step,.paper,.menu-inner a{ filter:none !important; transform:none !important; }
  .recall .w.vague{ opacity:.34; }
  .lamp,.fragments,#motes{ display:none; }
  .finale .bulb{ transition:opacity .3s linear; scale:1; }
  .cta,.room-btn{ transition:background .2s linear, color .2s linear; }
}
@media (prefers-reduced-transparency:reduce){
  .nav,.menu{ background:var(--attic); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media (prefers-contrast:more){
  :root{ --dust:#E4D6C6; --dust-dim:#BCAB99; --dust-far:#8E7F70; --edge:rgba(232,146,74,.4); }
  .grain{ display:none; }
}

/* ---------------- document pages (privacy, support, 404) ----------------
   Same room, no theatre. These are read, not experienced: the lamp
   and the grain stay so it is recognisably the same place, but
   nothing here moves on scroll. */
.doc{ padding:clamp(7rem,16vh,10rem) 0 clamp(4rem,10vh,7rem); }
.doc-head{ margin-bottom:clamp(2.5rem,6vh,4rem); }
.doc-head h1{ font-size:clamp(2.2rem,5vw,3.5rem); margin-top:1.25rem; }
.doc-head .stamp{
  margin:1.25rem 0 0; font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dust-dim);
}

.prose{ max-width:38rem; }
.prose h2{
  font-size:clamp(1.25rem,2.4vw,1.55rem); line-height:1.25;
  margin:clamp(2.5rem,5vh,3.25rem) 0 .9rem; color:var(--paper);
}
.prose h2:first-child{ margin-top:0; }
.prose p, .prose li{
  font-family:var(--f-prose); font-weight:400;
  font-size:clamp(1rem,1.6vw,1.125rem); line-height:1.75; color:var(--dust);
}
.prose p{ margin:0 0 1.1rem; }
.prose ul{ margin:0 0 1.1rem; padding-left:1.1rem; }
.prose li{ margin-bottom:.55rem; }
.prose li::marker{ color:var(--ember); }
.prose strong{ color:var(--paper); font-weight:400; }
.prose em{ color:var(--amber); font-style:italic; }
.prose a{ color:var(--amber); text-decoration:underline; text-underline-offset:.18em;
  text-decoration-thickness:1px; text-decoration-color:rgba(232,146,74,.4);
  transition:text-decoration-color .3s var(--e-soft); }
.prose a:hover{ text-decoration-color:var(--amber); }

.prose .lead{
  font-size:clamp(1.125rem,2vw,1.3125rem); color:var(--paper);
  line-height:1.65; margin-bottom:2rem;
}

/* the one claim on the privacy page that deserves the paper treatment */
.pledge{
  margin:2.5rem 0; padding:clamp(1.5rem,4vw,2.25rem);
  border-radius:5px; border:1px solid var(--edge);
  background:linear-gradient(168deg, rgba(46,37,27,.7), rgba(34,27,20,.7));
}
.pledge p{ margin:0; color:var(--paper); font-size:clamp(1.0625rem,1.9vw,1.25rem); }


/* ---------------- founders ----------------
   One column, one photograph, and a lot of room around both. The photo
   is small on purpose: at this size it reads as a person in the room
   rather than a headshot pinned to a wall. */
.founders .portrait{
  width:clamp(96px,18vw,132px); aspect-ratio:1; border-radius:50%;
  margin:0 0 clamp(2.25rem,5vh,3rem);
  background:var(--portrait) center/cover no-repeat, var(--edge);
  box-shadow:0 18px 50px -20px rgba(7,6,5,.75);
  filter:saturate(.9) contrast(1.02);
}
.founders .byline{ margin:clamp(2.5rem,6vh,3.5rem) 0 0; }
.founders .socials{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.founders .role{ margin:.35rem 0 0; font-family:var(--f-ui); font-size:.75rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dust-dim); }
.founders .social{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1.15rem; padding:.4rem 0;
  font-family:var(--f-ui); font-size:.8125rem; letter-spacing:.04em;
  color:var(--dust-dim); text-decoration:none;
  transition:color .3s var(--e-soft);
}
/* Flex centres the boxes, but the label's ink sits ~1.4px above its line
   box's centre (ascent/descent are not symmetric), so a box-centred icon
   reads low. Nudge it onto the text's optical centre. */
.founders .social svg{ width:16px; height:16px; fill:currentColor; flex:none;
  transform:translateY(-1.5px); }
/* The Medium wordmark bleeds to the edges of its viewBox, so at a shared
   16px it reads visually larger and higher than the LinkedIn badge glyph.
   Scale and reseat it to match their optical size and baseline. */
.founders .social svg.i-medium{ transform:translateY(-1px) scale(.72); }
.founders .social:hover{ color:var(--amber); }
.founders .social:focus-visible{ color:var(--amber); outline:1px solid var(--edge); outline-offset:4px; }

.founders .signature{
  margin:0;
  font-family:var(--f-display); font-weight:300; font-style:italic;
  font-size:clamp(1.35rem,3vw,1.85rem); color:var(--amber);
}

.doc .back{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:clamp(3rem,7vh,4.5rem);
  font-family:var(--f-ui); font-size:.875rem; font-weight:500; color:var(--dust);
  text-decoration:none; transition:color .3s var(--e-soft);
}
.doc .back:hover{ color:var(--amber); }

/* skip link — visible only when it has focus */
.skip{
  position:fixed; top:.75rem; left:.75rem; z-index:40;
  padding:.6rem 1rem; border-radius:6px;
  background:var(--leather); color:var(--paper);
  font-family:var(--f-ui); font-size:.875rem; text-decoration:none;
  transform:translateY(-160%); transition:transform .2s var(--e-out);
}
.skip:focus{ transform:none; }

.foot-links{ display:flex; justify-content:center; gap:1.5rem; margin:0 0 .9rem; }
.foot-links a{
  font-size:.75rem; letter-spacing:.04em; color:var(--dust-dim);
  text-decoration:none; transition:color .3s var(--e-soft);
}
.foot-links a:hover{ color:var(--amber); }
.finale.on .foot-links a{ color:rgba(34,27,20,.55); }
.finale.on .foot-links a:hover{ color:var(--ember-ink); }


/* ==================== responsive corrections ====================
   Found by measuring, not by looking: the menu overflows on short
   screens, and a handful of touch targets are under the 44px minimum
   once the wordmark loses its text. */

/* The menu is a centred flex sheet. Once its content is taller than the
   screen — a small phone, or any phone in landscape — centring pushes the
   first items above the scrollable region, where they cannot be reached
   at all. Anchor it to the top and tighten it instead. */
@media (max-height:760px){
  .menu{ align-items:flex-start; padding-top:5rem; padding-bottom:2.5rem; }
  .menu-inner a{ padding:.46rem .25rem; font-size:clamp(1.125rem,4.4vw,1.4rem); }
  .menu-rule{ margin:.7rem .25rem; }
  .menu-doc{ font-size:.9375rem !important; }
}

/* Landscape has the height of a postcard and the width of a desk. Two
   columns is the only way the list fits without shrinking the type past
   reading size. */
@media (max-height:520px) and (min-width:600px){
  .menu-inner{ width:min(100%,40rem); display:grid;
    grid-template-columns:1fr 1fr; column-gap:2.5rem; align-content:start; }
  .menu-rule{ grid-column:1 / -1; }
}

/* Below 430px the wordmark drops its text and the link collapses to the
   22px icon — half the minimum touch target. */
@media (max-width:430px){
  .nav .mark{ display:inline-flex; align-items:center;
    min-width:44px; min-height:44px; }
  .ring{ font-size:.625rem; }          /* 9px was below the legibility floor */
}

@media (max-width:768px){
  .room-btn{ min-height:44px; }        /* was 43 */
  .foot-links a{ display:inline-block; padding:.6rem .3rem; }
  .doc .back{ padding:.6rem 0; }
}

/* The bar is a table of contents for one page; Founders is a destination.
   A hairline says so without needing a second bar. */
.nav-links .nav-aside{ margin-left:.4rem; padding-left:1rem;
  border-left:1px solid var(--edge); }