/* ============================================================
 *  notebook.css — Ronin Inc SITE-WIDE skin: dark black-&-white FIELD
 *  NOTEBOOK (chalk on graph paper), pen-and-ink. Re-implements every shared
 *  class so a stylesheet swap carries the look across all pages. Pairs with
 *  atelier.js (the cursor "surveillance" matrix + scroll-float + rough.js
 *  hand-drawn card frames) and rough.js. Replaces atelier.css.
 * ============================================================ */
:root{
  --paper:#000000; --paper-2:#0a0a0a; --edge:#050505;
  --ink:#000000;                 /* ground token (kept for inline var refs) */
  --ink-hi:#f6f4ef; --ink-body:#d4d2cc; --muted:#b7b5ae; --dim:#8a8883;
  --chalk:#f2f0ea;
  --brass:#f2f0ea; --brass-bright:#faf9f5; --brass-deep:#8f8d87;   /* aliased to chalk so old refs read notebook */
  --accent:#f2f0ea; --accent-bright:#faf9f5; --accent-glow:rgba(242,240,234,.28);
  --line:rgba(242,240,234,.16); --line-soft:rgba(242,240,234,.08);
  --rule:rgba(242,240,234,.08); --rule-2:rgba(242,240,234,.04); --margin:rgba(242,240,234,.16);
  --parch:#0a0a0a; --parch-2:#101010; --parch-edge:rgba(242,240,234,.22); --paper-ink:#f2f0ea; --paper-dim:#b7b5ae;
  --maxw:1160px; --ease-lux:cubic-bezier(0.16,1,0.3,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background-color:var(--paper);
  background-image:
    linear-gradient(var(--rule) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule) 1px,transparent 1px),
    linear-gradient(var(--rule-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule-2) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,24px 24px,24px 24px;
  color:var(--ink-body);font-family:"Spectral",Georgia,serif;font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%,rgba(242,240,234,.03),transparent 55%),radial-gradient(140% 120% at 50% 120%,rgba(0,0,0,.5),transparent 60%);}
body::after{content:"";position:fixed;left:62px;top:0;bottom:0;width:1.5px;background:var(--margin);opacity:.45;z-index:0;pointer-events:none;}
#mech{position:fixed;inset:0;z-index:0;pointer-events:none;}
img{max-width:100%;}
a{color:var(--ink-hi);text-decoration:none;}

/* frame + gauge/HUD */
.frame{position:fixed;inset:14px;z-index:5;pointer-events:none;border:1px solid rgba(242,240,234,.14);}
.frame i{position:absolute;width:15px;height:15px;border:1px solid var(--chalk);opacity:.55;}
.frame i.tl{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.frame i.tr{top:-1px;right:-1px;border-left:0;border-bottom:0;}
.frame i.bl{bottom:-1px;left:-1px;border-right:0;border-top:0;}
.frame i.br{bottom:-1px;right:-1px;border-left:0;border-top:0;}
.gauge{display:none;}
.hud{position:fixed;left:18px;bottom:16px;z-index:7;pointer-events:none;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.16em;line-height:1.8;text-transform:uppercase;color:var(--dim);}
.hud .hud-l1{color:var(--chalk);}
.hud #hud-ptr,.hud #hud-scr{color:var(--muted);font-variant-numeric:tabular-nums;}
@media(max-width:700px){.hud{display:none;}}

/* top bar / nav */
.topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:16px clamp(22px,5vw,64px);background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.5) 70%,transparent);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
.menu-btn{justify-self:start;background:transparent;border:1px solid var(--line);border-radius:2px;padding:9px 10px;cursor:pointer;display:inline-flex;flex-direction:column;gap:4px;}
.menu-btn span{width:18px;height:1.4px;background:var(--chalk);display:block;}
.brand{font-family:"Bodoni Moda",serif;font-weight:700;font-size:22px;letter-spacing:.1em;color:var(--ink-hi);justify-self:center;display:inline-flex;align-items:center;}
.brand span{color:var(--chalk);}
.brand .ruby{flex:none;width:16px;height:16px;margin:0 13px;display:inline-flex;align-items:center;justify-content:center;opacity:.95;}
.brand .ruby canvas{width:16px;height:16px;display:block;}
@media(max-width:520px){.brand .ruby{margin:0 9px;width:13px;height:13px;}.brand .ruby canvas{width:13px;height:13px;}}
.topbar-right{display:flex;align-items:center;gap:14px;justify-self:end;}
.topbar-logo{height:32px;width:auto;opacity:.92;filter:grayscale(1) brightness(1.4) contrast(1.1);}
.lang{position:relative;}
.lang-btn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--line);border-radius:2px;padding:8px 10px;color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;cursor:pointer;}
.lang-btn svg{width:15px;height:15px;} .lang-btn .chev{width:12px;height:12px;}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:150px;background:var(--paper-2);border:1px solid var(--line);border-radius:2px;padding:6px;display:none;flex-direction:column;z-index:30;box-shadow:6px 6px 0 rgba(0,0,0,.4);}
.lang-menu.open{display:flex;}
.lang-menu button{background:transparent;border:0;color:var(--ink-body);text-align:left;padding:9px 11px;font:inherit;font-size:13px;cursor:pointer;}
.lang-menu button:hover{background:rgba(242,240,234,.06);color:var(--ink-hi);}

/* nav overlay — luxury couture menu */
.menu{position:fixed;inset:0;z-index:19;background:var(--paper);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:84px 20px;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .3s;}
.menu.open{opacity:1;pointer-events:auto;}
.menu::before{content:"MENU";position:absolute;top:78px;left:50%;transform:translateX(-50%);font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.5em;color:var(--dim);}
.menu a{position:relative;font-family:"Cormorant Garamond","Bodoni Moda",serif;font-weight:500;font-style:italic;
  font-size:clamp(2rem,5vw,3.1rem);line-height:1.16;letter-spacing:.01em;color:var(--ink-hi);padding:4px 30px;transition:color .3s var(--ease-lux),letter-spacing .3s var(--ease-lux);}
.menu a::before{counter-increment:navi;content:counter(navi,upper-roman);position:absolute;left:0;top:50%;transform:translateY(-50%);
  font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:10px;letter-spacing:.1em;color:var(--dim);opacity:0;transition:opacity .3s var(--ease-lux);}
.menu{counter-reset:navi;}
.menu a:hover{color:var(--chalk);letter-spacing:.03em;}
.menu a:hover::before{opacity:1;}
.menu a::after{content:"";position:absolute;left:50%;right:50%;bottom:2px;height:1px;background:var(--chalk);transition:left .5s var(--ease-lux),right .5s var(--ease-lux);}
.menu a:hover::after{left:30px;right:30px;}

/* shared type + layout */
.wrap{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,64px);}
.wrap.narrow{max-width:820px;}
.kicker{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px;}
.kicker::before{content:"";width:32px;height:1.5px;background:var(--chalk);}
h1,h2,h3{font-family:"Bodoni Moda",serif;font-weight:700;color:var(--ink-hi);text-wrap:balance;letter-spacing:-.012em;}
h1{font-size:clamp(2.8rem,6.4vw,5rem);line-height:.99;margin:20px 0 0;}
h2{font-size:clamp(2rem,4vw,3rem);line-height:1.03;margin:0;letter-spacing:-.008em;}
h3{font-size:1.3rem;line-height:1.2;margin:0;color:var(--ink-hi);}
.sheen{color:var(--ink-hi);font-style:italic;font-weight:600;}
.lede{font-size:clamp(1.05rem,1.55vw,1.26rem);line-height:1.6;color:var(--ink-body);font-weight:400;}
.dim{color:var(--muted);}
p{font-weight:400;}
.rule{display:flex;align-items:center;gap:14px;margin:34px 0 0;max-width:420px;}
.rule .ln{height:1px;flex:1;background:var(--line);}
.rule .dia{width:7px;height:7px;background:var(--chalk);transform:rotate(45deg);}

/* buttons */
.btnrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:2px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);color:var(--ink-hi);background:transparent;transition:all .2s var(--ease-lux);cursor:pointer;}
.btn:hover{border-color:var(--chalk);background:rgba(242,240,234,.06);}
.btn.solid{color:#000000;font-weight:500;border:0;background:var(--chalk);}
.btn.solid:hover{background:#fff;box-shadow:0 0 22px rgba(242,240,234,.25);}
.arw{transition:transform .2s;} .btn:hover .arw{transform:translateX(4px);}

/* sections */
.hero{position:relative;z-index:2;min-height:90vh;display:flex;flex-direction:column;justify-content:center;max-width:var(--maxw);margin:0 auto;padding:120px clamp(22px,5vw,64px) 70px;}
.hero>*{max-width:640px;}
.cue{margin-top:50px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;}
.cue .down{width:1.5px;height:32px;background:var(--chalk);display:inline-block;}
.section{position:relative;z-index:2;padding:clamp(64px,11vh,130px) 0;}
.section .kicker{margin-bottom:20px;}

/* card grid — hand-drawn frame is added by atelier.js (canvas.nb-frame) */
.grid{display:grid;gap:18px;margin-top:14px;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.cell{position:relative;display:block;padding:26px 24px 28px;background:rgba(27,25,19,.5);border:1px solid transparent;border-radius:3px;color:var(--ink-body);transition:transform .3s var(--ease-lux),background .3s;overflow:hidden;}
.cell canvas.nb-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.cell:hover{transform:translateY(-4px);background:rgba(27,25,19,.8);}
.cell .idx{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em;color:var(--muted);margin-bottom:14px;position:relative;z-index:1;}
.cell h3{margin:0 0 10px;position:relative;z-index:1;}
.cell p{font-size:.98rem;color:var(--muted);margin:0;position:relative;z-index:1;}

/* governed chain / flow */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:30px;}
.node{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-body);border:1px solid var(--line);border-radius:2px;padding:9px 14px;}
.node.end{color:#000000;background:var(--chalk);border:0;}
.sep{color:var(--chalk);}

/* parchment leaf -> notebook "card" (dark, hand-drawn frame via JS) */
.leaf{position:relative;max-width:640px;background:rgba(27,25,19,.55);color:var(--ink-body);border:1px solid transparent;border-radius:3px;padding:clamp(26px,4vw,46px);}
.leaf canvas.nb-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.leaf.right{margin-left:auto;}
.leaf .plate{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);position:relative;z-index:1;}
.leaf h2,.leaf h3{color:var(--ink-hi);position:relative;z-index:1;}
.leaf p{color:var(--ink-body);position:relative;z-index:1;}
.leaf .cap{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:12px;position:relative;z-index:1;}
.leaves{display:flex;flex-direction:column;gap:clamp(48px,9vh,120px);}

/* footer */
.site-footer{position:relative;z-index:2;margin-top:40px;border-top:1px solid var(--line);padding:80px clamp(22px,5vw,64px) 36px;}
.footer-logo{display:block;width:92px;height:92px;object-fit:contain;margin:0 auto 26px;border:1px solid var(--line);border-radius:8px;background:#060606;filter:grayscale(1) brightness(1.25) contrast(1.05);}
.footer-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px;}
.fbrand{font-family:"Bodoni Moda",serif;font-weight:700;font-size:22px;letter-spacing:.1em;color:var(--ink-hi);}
.fbrand span{color:var(--chalk);}
.ftag{margin-top:12px;font-size:.98rem;color:var(--muted);max-width:42ch;}
.fmotto{margin-top:14px;font-family:"Cormorant Garamond","Bodoni Moda",serif;font-style:italic;font-size:1.4rem;color:var(--ink-hi);}
.footer-col h4{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--chalk);margin:0 0 14px;font-weight:500;}
.footer-col a{display:block;color:var(--ink-body);font-size:.98rem;padding:5px 0;}
.footer-col a:hover{color:var(--ink-hi);}
.footer-col address{font-style:normal;color:var(--muted);font-size:.98rem;line-height:1.7;}
.footer-bar{max-width:var(--maxw);margin:44px auto 0;padding-top:22px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;color:var(--dim);}
.footer-bar a{color:var(--muted);}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
[hidden]{display:none!important;}

/* scroll-driven float-up (Active-Theory vibe) */
@supports (animation-timeline: view()){
  .js-motion .fold{opacity:1;transform:none;}
  @keyframes floatUp{from{opacity:0;transform:translateY(46px) scale(.985)}to{opacity:1;transform:none}}
  .section .wrap>.kicker,.section .wrap>h2,.section .wrap>.lede,.section .wrap>p,.section .wrap>.btnrow,.section .wrap>.flow,.grid>.cell,.leaf{
    animation:floatUp linear both;animation-timeline:view();animation-range:entry 4% cover 34%;}
  .grid>.cell:nth-child(2){animation-range:entry 8% cover 36%;}
  .grid>.cell:nth-child(3){animation-range:entry 12% cover 38%;}
  .grid>.cell:nth-child(4){animation-range:entry 16% cover 40%;}
}

@media(max-width:900px){
  .grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .grid.cols-3{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  #mech{opacity:.55;}
  .leaf,.leaf.right{margin:0;}
}
@media(max-width:600px){.grid.cols-4,.grid.cols-2{grid-template-columns:1fr;}.footer-grid{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .section .wrap>*,.grid>.cell,.leaf{animation:none!important;opacity:1!important;transform:none!important;}
}

/* build page — scheduler fallback disclosure */
.sched-fallback{margin-top:24px;border-top:1px solid var(--rule);padding-top:16px;}
.sched-fallback>summary{cursor:pointer;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);list-style:none;}
.sched-fallback>summary::-webkit-details-marker{display:none;}
.sched-fallback>summary:hover{color:var(--ink-hi);}
.sched-fallback[open]>summary{margin-bottom:18px;color:var(--ink-hi);}

/* ============================================================
 * scroll-rise reveal — mirrored from ronin-os so it also runs on pages that
 * load ONLY notebook.css (e.g. the home page). app.js adds .reveal/.stagger
 * and toggles .in via IntersectionObserver; hero rises on load.
 * ============================================================ */
.has-js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-lux),transform .9s var(--ease-lux);transition-delay:calc(var(--i,0)*90ms);will-change:opacity,transform;}
.has-js .reveal.in{opacity:1;transform:none;}
.has-js .stagger>*{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-lux),transform .8s var(--ease-lux);}
.has-js .stagger.in>*{opacity:1;transform:none;}
.stagger.in>*:nth-child(2){transition-delay:.09s}.stagger.in>*:nth-child(3){transition-delay:.18s}
.stagger.in>*:nth-child(4){transition-delay:.27s}.stagger.in>*:nth-child(5){transition-delay:.36s}
.stagger.in>*:nth-child(6){transition-delay:.45s}.stagger.in>*:nth-child(7){transition-delay:.54s}.stagger.in>*:nth-child(8){transition-delay:.63s}
.has-js .hero>*{opacity:0;transform:translateY(20px);animation:nb-heroIn .95s var(--ease-lux) forwards;}
.has-js .hero>*:nth-child(2){animation-delay:.12s}.has-js .hero>*:nth-child(3){animation-delay:.24s}
.has-js .hero>*:nth-child(4){animation-delay:.36s}.has-js .hero>*:nth-child(5){animation-delay:.48s}
@keyframes nb-heroIn{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.has-js .reveal,.has-js .stagger>*,.has-js .hero>*{opacity:1!important;transform:none!important;animation:none!important;}}

/* site-wide crest watermark — the Ronin crest ghosted behind all content */
.crest-veil{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url(/assets/ronin-logo.png) center 42%/min(760px,74vw) no-repeat;
  opacity:.06;filter:grayscale(1) brightness(1.7) contrast(1.04);}
@media(max-width:700px){.crest-veil{background-size:min(430px,92vw);opacity:.05;}}