/* Clayhouse — one typeface, one style, two sizes, ink on paper, and a gold line.
   Headings are large; everything you read is one size. Muted ink is only for asides. */
:root{
  --paper:#F1EBE0;--paper-eve:#E7DDCF;--paper-deep:#EAE2D5;
  --ink:#1E1914;--mute:#1E1914;--rule:rgba(35,29,23,.14);--rule-2:rgba(35,29,23,.28);
  --gold:#DB9F32;
  --serif:'EB Garamond','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --L:clamp(2.3rem,3.4vw,3.4rem);
  --M:clamp(1.25rem,1.5vw,1.45rem);
  --S:1.05rem;
  --gut:clamp(22px,5.2vw,84px);
  --col:46vw;
  --ease:cubic-bezier(.22,1,.36,1);
  --wipe:cubic-bezier(.7,0,.2,1);
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:var(--M);line-height:1.45;font-feature-settings:"kern","liga","onum";transition:background-color 1.4s var(--ease)}
body[data-tone="eve"]{background:var(--paper-eve)}
::selection{background:rgba(219,159,50,.32);color:var(--ink)}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure{margin:0;font-weight:400;font-style:normal}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}

h1,h2{font-size:var(--L);line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
p,li{text-wrap:pretty}

/* ---- the gold line ----
   Only links and the rotating word carry it. Links draw theirs in from the left on hover
   and draw it out to the right when you leave. */
.ln{--ly:calc(100% - max(.18em - 3px, 0px));background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;background-size:0% 2px;background-position:100% var(--ly);transition:background-size .6s var(--wipe)}
.ln:hover,.ln:focus-visible{background-size:100% 2px;background-position:0 var(--ly)}
.ln .ar{display:inline-block;transition:transform .5s var(--ease);margin-left:.15em}
.ln:hover .ar{transform:translateX(.2em)}
.ln .ar.dn{transform:translateY(-.06em)}
.ln:hover .ar.dn{transform:translateY(.05em)}

/* ---- header ---- */
.top{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:24px var(--gut);font-size:var(--S);pointer-events:none}
.top>*{pointer-events:auto}
.top nav{display:flex;gap:clamp(18px,2.2vw,32px)}
.top nav a.on{background-size:100% 2px;background-position:0 var(--ly)}
.menu{display:none;font:inherit;background:none;border:0;color:inherit;padding:6px 0;cursor:pointer}
.top::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--paper) 30%,rgba(241,235,224,0));opacity:0;transition:opacity .5s;pointer-events:none;z-index:-1}
body.scrolled .top::before{opacity:.92}
body[data-tone="eve"] .top::before{background:linear-gradient(var(--paper-eve) 30%,rgba(231,221,207,0))}

/* ---- the stage: the house lives here ---- */
.stage{position:fixed;top:0;right:0;width:calc(100vw - var(--col));height:100vh;height:100svh;z-index:1;transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease}
.stage.live canvas{opacity:1}
.stage .still{position:absolute;inset:6% 4% 10%;width:92%;height:84%;object-fit:contain;opacity:0;transition:opacity .8s}
.stage.nogl .still,html:not(.js) .stage .still{opacity:1}
.stage.nogl canvas{display:none}
body.full .stage{opacity:.13;transform:scale(1.06) translateX(-8%)}
body.grab{cursor:grab}
body.grab:active{cursor:grabbing}

/* ---- chapters: each one fills the screen and the page settles on it ---- */
main{position:relative;z-index:2}
.ch{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:14vh calc(100vw - var(--col)) 14vh var(--gut)}
.ch>.col{width:100%;max-width:34rem}
.ch.full{padding-right:var(--gut)}
.ch.full>.col{max-width:58rem}
.col>*+*{margin-top:1em}
.col>h1+*,.col>h2+*{margin-top:1.4em}
.col>.cta{margin-top:1.6em}
.hero h1{max-width:13ch}
.cta{display:flex;flex-wrap:wrap;gap:.4em 1.6em}
.links{display:flex;flex-direction:column;align-items:flex-start;gap:.35em;margin-top:1.6em!important}
.rot{display:inline-block;position:relative;vertical-align:baseline;transition:width .6s var(--ease);background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 calc(100% - max(.1em - 4px, 0px))/100% max(2px,.045em)}
.rot.on{background-size:0% max(2px,.045em);background-position:100% calc(100% - max(.1em - 4px, 0px));transition:width .6s var(--ease),background-size .55s var(--wipe)}
.rot.on.drawn{background-size:100% max(2px,.045em);background-position:0 calc(100% - max(.1em - 4px, 0px))}
.rot .w8{display:inline-block;white-space:nowrap}
.rot.on .w8{position:absolute;left:0;top:0;opacity:0;transform:translateY(.3em);transition:opacity .55s,transform .7s var(--ease)}
.rot.on .w8.cur{position:relative;opacity:1;transform:none}
.rot.on .w8.out{opacity:0;transform:translateY(-.3em)}

.plate{margin-top:1.6em!important}
.shot{position:relative;display:block;margin-top:1.6em!important;max-width:34rem}
.shot>a{display:block}
.shot img{width:100%;height:auto;border-radius:3px;box-shadow:0 22px 46px -28px rgba(60,40,20,.55)}
.shot .live{--ly:calc(100% - .43em + 3px);position:absolute;left:1rem;bottom:1rem;background-color:var(--paper);padding:.25em .75em;border-radius:3px;box-shadow:0 6px 18px -10px rgba(60,40,20,.45)}
.cards{display:flex;flex-direction:column;gap:.75em;margin-top:1.5em!important}
.card{border:1px solid var(--rule-2);border-radius:4px;padding:1em 1.25em 1.05em}
.card>p:first-child{font-weight:600}
.card p+p{margin-top:.25em}
.card .proof{margin-top:.75em;padding-top:.65em;border-top:1px solid var(--rule)}
.plate img{height:clamp(220px,32vh,320px);width:auto;border-radius:3px;box-shadow:0 22px 46px -28px rgba(60,40,20,.55)}
.runs{display:flex;flex-direction:column;gap:.9em;margin-top:1.4em!important}
.portrait img{width:clamp(110px,9vw,136px);height:auto;aspect-ratio:731/817;object-fit:cover;border-radius:3px;filter:grayscale(1) sepia(.12);margin-top:.6em}

.rec{display:flex;flex-direction:column;gap:.85em;margin-top:1.6em!important}
.rec li{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:0 1.5rem;align-items:baseline}
.rec .y{color:var(--mute);font-feature-settings:"kern","lnum","tnum"}
.note{margin-top:1.8em!important}

.foot{position:relative;z-index:2;padding:0 var(--gut) 30px;font-size:var(--S);color:var(--mute)}

/* ---- reveal ---- */
.motion .r{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:var(--d,0ms)}
.motion .r.in{opacity:1;transform:none}

/* ---- menu (narrow screens) ---- */
.sheet{position:fixed;inset:0;z-index:40;background:var(--paper);display:flex;flex-direction:column;justify-content:center;gap:.2rem;padding:0 var(--gut);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.sheet.open{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.sheet a{font-size:var(--L);line-height:1.25;align-self:flex-start}
.sheet .x{position:absolute;top:18px;right:var(--gut);font:inherit;font-size:var(--S);background:none;border:0;color:inherit;cursor:pointer}

@media (max-width:1180px){
  :root{--col:52vw}
}
@media (max-width:899px){
  /* phones: the house sits in a band across the top and the text scrolls beneath it,
     so every chapter still changes the scene you're looking at */
  :root{--col:100vw;--M:1.2rem;--band:40svh}
  .top{padding:14px var(--gut)}
  .top::before{display:none}
  .top nav{display:none}
  .menu{display:block}
  .stage{left:0;right:auto;width:100vw;height:var(--band);z-index:20;background:var(--paper);transition:background-color 1.4s var(--ease)}
  body[data-tone="eve"] .stage{background:var(--paper-eve)}
  .stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:36px;background:linear-gradient(var(--paper),rgba(241,235,224,0));pointer-events:none}
  body[data-tone="eve"] .stage::after{background:linear-gradient(var(--paper-eve),rgba(231,221,207,0))}
  body.full .stage{opacity:1;transform:none}
  main{padding-top:var(--band)}
  .ch{min-height:0;display:block;padding:7vh var(--gut) 8vh;scroll-margin-top:calc(var(--band) - 5vh)}
  .ch.hero{min-height:calc(100svh - var(--band));padding-top:4vh}
  .rec li{grid-template-columns:1fr}
  .foot{padding-top:2vh}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0ms!important}
}