/* shell.css — Terra Firma: design tokens + rail + page frame + typography.
   Single dark theme. Google Fonts are linked from each HTML file, not here. */

:root{
  --bg:#0b0a09; --panel:#141210; --sunk:#0e0d0b; --plate:#000;
  --ink:#efe9dd; --dim:#a89f8f; --faint:#6b6358;
  --line:#2a2622; --hair:#1b1815;
  --brass:#c9a24f;
  --house:#7fb08c; --chef:#d99a42; --prod:#7fa8c4; --supplier:#d1584f;
  --e:#8c969d; --s:#d6a341; --m:#4fb3bd;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Archivo",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --geo:"Jost","Brown","Futura",system-ui,sans-serif;

  --kraft:#b9976a; --kraft-ink:#2a2118;

  --rail-h:56px;
}

/* reset */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}

/* typography roles */
h1,h2{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(32px,5.5vw,64px)}
h2{font-size:clamp(22px,3.4vw,34px)}
em,i{font-style:italic}

.kick{
  font-family:var(--geo);
  font-weight:600;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
  margin:0 0 .8em;
}
.mono{font-family:var(--mono)}
.geo{font-family:var(--geo); font-weight:600; letter-spacing:.1em; text-transform:uppercase}
.c-brass{color:var(--brass)}
.c-dim{color:var(--dim)}
.c-faint{color:var(--faint)}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--geo);
  font-weight:700;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  border:none;
  border-radius:999px;
  padding:14px 22px;
  cursor:pointer;
  text-decoration:none;
  background:var(--ink);
  color:var(--bg);
}
.btn:hover{opacity:.88}

/* rail */
/* One horizontal bar at every width. The mobile layout used to be the exception;
   it is now the rule, and wide screens only add the context line and the maker. */
nav.rail{
  position:fixed;
  top:0; left:0; right:0; bottom:auto;
  width:100%;
  height:calc(var(--rail-h) + env(safe-area-inset-top, 0px));
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:clamp(16px,2.4vw,32px);
  background:rgba(11,10,9,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:env(safe-area-inset-top, 0px) clamp(16px,3vw,32px) 0;
  z-index:100;
  overflow:hidden;
}
.rail-brand{
  font-family:var(--geo);
  font-weight:700;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brass);
  text-decoration:none;
  cursor:pointer;
  display:block;
  margin:0;
  flex:0 0 auto;
  white-space:nowrap;
  transition:opacity .2s ease;
}
.rail-brand:hover{
  opacity:.8;
}
.rail-chapters{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:clamp(14px,2vw,26px);
  min-width:0;
}
.rail-chapters a{
  white-space:nowrap;
  font-family:var(--geo);
  font-weight:600;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--dim);
  display:block;
  transition:color .15s ease;
}
.rail-chapters a:hover{color:var(--ink)}
.rail-chapters a.current{color:var(--ink)}
.nav-desk{display:inline}
.nav-mob{display:none}
.rail-context{
  font-family:var(--mono);
  font-size:9.5px;
  color:var(--faint);
  line-height:1.5;
  margin-left:auto;
  white-space:nowrap;
  flex:0 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* The house that makes the films signs the bar, on every page. */
.rail-maker{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint);
  text-decoration:none;
  white-space:nowrap;
  flex:0 0 auto;
  transition:color .15s ease;
}
.rail-maker:hover{color:var(--ink)}
.rail-maker .maker-short{display:none}
/* Shown only on an annexe: it names the page the reader stepped into, and offers the
   way back. The three chapters above stay unhighlighted — an annexe is off the spine. */
.rail-annexe{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brass);
  line-height:1.6;
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  white-space:nowrap;
}
.rail-annexe a{color:var(--dim); text-decoration:none}
.rail-annexe a:hover{color:var(--ink)}
.rail-annexe a .back-short{display:none}
.rail-annexe a .back-long{display:inline}

/* page frame */
main.page{
  margin-left:0;
  margin-top:calc(var(--rail-h) + env(safe-area-inset-top, 0px));
  padding:clamp(28px,5vw,64px);
  min-height:100vh;
}

/* A sticky sub-header on a chapter page sits directly under the bar. */
.bar{top:calc(var(--rail-h) + env(safe-area-inset-top, 0px)) !important}
main.page.fade-in{animation:page-fade-in .4s ease both}
main.page.fade-out{animation:page-fade-out .3s ease both}
@keyframes page-fade-in{from{opacity:0}to{opacity:1}}
@keyframes page-fade-out{from{opacity:1}to{opacity:0}}

/* chapter-next link, ends every chapter */
.chapter-next{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:clamp(48px,7vw,88px);
  padding-top:20px;
  border-top:1px solid var(--line);
  font-family:var(--geo);
  font-weight:600;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--brass);
  text-decoration:none;
}
.chapter-next::after{content:"\2192"}
.chapter-next:hover{opacity:.8}

/* footer reference line */
footer.ref-line{
  margin-top:clamp(40px,6vw,72px);
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--faint);
}
/* Shown only where the bar cannot carry the maker. */
.ref-maker{display:none}

/* wide/scrollable content */
.tw{overflow-x:auto}

/* the door: rail stays in the DOM (keyboard nav still works) but is not shown
   until the visitor has entered the house */
body.door nav.rail{display:none}
body.door main.page{margin-left:0; margin-top:0}

/* presentation mode */
html.present nav.rail{display:none}
html.present main.page{margin-left:0; margin-top:0}
html.present{font-size:18px}
html.present .present-hide{display:none}

/* Under 760px the bar tightens: no context line, short chapter labels, the maker
   shortened to the name alone. */
@media (max-width:760px){
  :root{
    --rail-h:54px;
  }
  nav.rail{
    gap:8px;
    padding:env(safe-area-inset-top, 0px) 12px 0 14px;
    background:rgba(11, 10, 9, 0.94);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    z-index:1000;
  }
  .rail-brand{
    font-size:11px;
    letter-spacing:.12em;
    padding:6px 0;
  }
  .nav-desk{display:none}
  .nav-mob{display:inline}
  .rail-chapters{
    justify-content:flex-end;
    gap:16px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    flex:1 1 auto;
    margin:0 0 0 auto;
    padding:2px 0;
  }
  .rail-chapters::-webkit-scrollbar{
    display:none;
  }
  .rail-chapters a{
    font-size:11px;
    padding:8px 3px;
  }
  .rail-chapters a::before{
    display:none;
  }
  .rail-chapters a.current{
    color:var(--ink);
    border-bottom:2px solid var(--brass);
  }
  .rail-context{
    display:none;
  }
  .rail-maker{
    font-size:8.5px;
    letter-spacing:.06em;
  }
  .rail-maker .maker-long{display:none}
  .rail-maker .maker-short{display:inline}
  .rail-annexe{
    font-size:9px;
    letter-spacing:.04em;
    gap:4px;
  }
  .rail-annexe .rail-annexe-title{
    display:none;
  }
  .rail-annexe a{
    display:inline-flex;
    align-items:center;
    padding:5px 10px;
    background:rgba(201, 162, 79, 0.12);
    border:1px solid rgba(201, 162, 79, 0.35);
    border-radius:999px;
    color:var(--brass);
    font-size:9px;
    font-weight:600;
  }
  .rail-annexe a .back-short{display:inline}
  .rail-annexe a .back-long{display:none}
  .rail-sound{
    display:none !important;
  }

  main.page{
    padding:clamp(20px, 4vw, 36px) max(16px, env(safe-area-inset-left, 16px)) max(32px, env(safe-area-inset-bottom, 32px)) max(16px, env(safe-area-inset-right, 16px));
  }
}

/* Under 400px the brand, the chapters and the maker no longer fit one line, and the
   chapters are the navigation: the maker steps out of the bar and signs the footer. */
@media (max-width:400px){
  .rail-maker{display:none}
  .ref-maker{
    display:block;
    margin-top:6px;
    color:var(--faint);
    text-decoration:none;
    letter-spacing:.1em;
    text-transform:uppercase;
    font-size:9.5px;
  }
}

/* motion */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* focus */
:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:2px;
}

/* ── motion: scroll reveals, image settle, rail marker ───────────────────
   One idea per effect, all cancelled by prefers-reduced-motion above.      */

/* a section rises a little as it enters the viewport, once */
[data-reveal]{opacity:0; transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.2,.6,.2,1), transform .55s cubic-bezier(.2,.6,.2,1)}
[data-reveal].is-in{opacity:1; transform:none}
[data-reveal][data-reveal="soft"]{transform:translateY(8px)}

/* stagger children of a revealed group */
[data-reveal-group]>*{opacity:0; transform:translateY(12px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.6,.2,1)}
[data-reveal-group].is-in>*{opacity:1; transform:none}

/* Images settle once, on first paint. Never applied blindly to every img:
   pages that re-render their markup on an animation frame would restart the
   animation on every frame and the image would never become visible. */
main.page img.settle{animation:plate-settle .9s cubic-bezier(.2,.6,.2,1) both}
@keyframes plate-settle{from{opacity:0; transform:scale(1.035)} to{opacity:1; transform:none}}

/* the rail marks the current chapter with a brass rule that slides in */
/* Horizontal bar, so the brass marker underlines the chapter instead of pointing
   at it from the left. */
.rail-chapters a{position:relative}
.rail-chapters a::before{content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:1px; background:var(--brass); transform:scaleX(0);
  transform-origin:left center; transition:transform .35s cubic-bezier(.2,.6,.2,1)}
.rail-chapters a.current::before,.rail-chapters a:hover::before{transform:scaleX(1)}

/* the single call to action breathes once when it first appears */
.btn{transition:transform .2s ease, opacity .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-group]>*{opacity:1 !important; transform:none !important}
  main.page img.settle{animation:none}
}

/* ── 35mm Film Grain Texture Overlay ────────────────────────────────────── */
.film-grain{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:9990;
  opacity:0.038;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ── Luxury Magnetic & Contextual Cursor ───────────────────────────────── */
@media (hover: hover) and (pointer: fine){
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor [role="button"]{
    cursor:none !important;
  }
  .lux-cursor-dot{
    position:fixed;
    top:0; left:0;
    width:6px; height:6px;
    background:var(--brass);
    border-radius:50%;
    pointer-events:none;
    z-index:99999;
    transform:translate(-50%, -50%);
    transition:width .2s ease, height .2s ease, background .2s ease, opacity .2s ease;
  }
  .lux-cursor-ring{
    position:fixed;
    top:0; left:0;
    width:34px; height:34px;
    border:1px solid rgba(201, 162, 79, 0.45);
    border-radius:50%;
    pointer-events:none;
    z-index:99998;
    transform:translate(-50%, -50%);
    transition:width .28s cubic-bezier(.16,1,.3,1), height .28s cubic-bezier(.16,1,.3,1), background .28s ease, border-color .28s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--mono);
    font-size:8px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink);
    white-space:nowrap;
  }
  .lux-cursor-ring .cursor-label{
    opacity:0;
    transform:scale(0.85);
    transition:opacity .2s ease, transform .2s ease;
    pointer-events:none;
  }
  /* States */
  body.cursor-hover-btn .lux-cursor-ring{
    width:56px; height:56px;
    border-color:rgba(201, 162, 79, 0.85);
    background:rgba(201, 162, 79, 0.08);
  }
  body.cursor-hover-btn .lux-cursor-dot{
    transform:translate(-50%, -50%) scale(1.4);
  }
  body.cursor-hover-play .lux-cursor-ring{
    width:84px; height:84px;
    background:rgba(11, 10, 9, 0.88);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-color:var(--brass);
    box-shadow:0 8px 32px rgba(0,0,0,0.6);
  }
  body.cursor-hover-play .lux-cursor-ring .cursor-label{
    opacity:1;
    transform:scale(1);
    color:var(--brass);
    font-weight:600;
  }
  body.cursor-hover-play .lux-cursor-dot{
    opacity:0;
  }
}