/* ————————————————————————————————————————————————
   SPECTRUM — house system v2 (MASTER.md is law)
   paper #F9F7F4 · ink #1E1101 · orange #FF6701
   pink #FEA9FA · blue #0E00FF · (soft pink #EADAEA retired from UI per user 2026-07-08)
   type: JetBrains Mono only
———————————————————————————————————————————————— */
:root{
  --paper:#F9F7F4; --ink:#1E1101; --orange:#FF6701;
  --pink:#FEA9FA; --pink-quiet:#EADAEA; --blue:#0E00FF;
  --hair:rgba(30,17,1,.25);
  --rail:280px; --tick:38px;
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out-quart:cubic-bezier(0.76,0,0.24,1);
  --pad-x:64px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:light}
body{
  background:var(--paper); color:var(--ink);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:15px; line-height:1.65;
  -webkit-tap-highlight-color:transparent;
  padding-bottom:var(--tick);
}
::selection{background:var(--pink);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:12px;z-index:99;background:var(--ink);color:var(--paper);padding:10px 18px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.skip:focus{left:12px}
#starSrc{display:none}

/* ————— + registration grid — ink, inverts over dark (r4: back to normal) ————— */
/* r24: registration mark = the sparkle silhouette (user image), not "+" —
   same fixed grid, same difference inversion over dark surfaces */
/* r54: one fixed blended layer, above the map menu — marks invert over it.
   r78: this is the CHROMIUM/FIREFOX structure (they GPU-optimize a single
   blended layer; 63 tiny ones made desktop Chrome lag). WebKit (html.wk,
   set by JS: Safari + all iOS) instead gets display:contents + per-star
   blend below — its full-viewport re-blend is the slow path there. */
#plusgrid{position:fixed;inset:0;z-index:35;pointer-events:none;mix-blend-mode:difference}
html.wk #plusgrid{display:contents}
/* r73c: the BOTTOM row lives in its own layer BELOW the infobar (z 29 < 30) —
   if the browser bar overlaps it, the row slips UNDER, never on top.
   r73g: NO blend here — difference-blended fixed layers can't ride the
   compositor, so Samsung repainted this row a beat AFTER the bar moved
   ("appears out of nowhere"). Plain ink-on-paper color (#161616 = what the
   blend produced) keeps it permanently painted; the reveal is instant.
   Trade accepted: this one row doesn't invert over dark surfaces. */
#plusgrid-b{position:fixed;inset:0;z-index:29;pointer-events:none;will-change:transform}
body.menu-open #plusgrid-b{z-index:35}  /* r77: the map menu (z 32) was swallowing the bottom row — over the OPEN menu it joins the other rows on top */
div#plusgrid-b span{background:#161616;transition:background-color .13s linear}  /* wins over the shared #e3e1de rule below; the short fade turns the invert flip into a transition, not a pop */
div#plusgrid-b span.lite{background:#C5D0DD}  /* r74: emulated invert — the exact color difference-blend produced over ink; toggled by JS hit-test */
#plusgrid span,#plusgrid-b span{position:absolute;transform:translate(-50%,-50%);width:9px;height:9px;background:#e3e1de;  /* r50: 11→9px */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 175.43 176.06'%3E%3Cpath d='M5.26,83.82c3.51-.98,9.27-2.1,17.28-3.37,10.81-1.54,19.83-3.33,27.06-5.36,7.23-2.04,12.8-5.09,16.74-9.17,3.79-3.92,6.63-9.3,8.54-16.11,1.89-6.8,3.75-15.68,5.57-26.63,1.41-8.14,2.64-14.05,3.68-17.7,1.06-3.65,2.5-5.48,4.32-5.48s3.22,1.83,4.22,5.48c.98,3.65,1.97,9.34,2.95,17.06,1.54,10.81,3.22,19.8,5.06,26.96,1.82,7.16,4.7,12.63,8.64,16.42,3.92,4.08,9.48,7.1,16.62,9.06,7.16,1.97,16.14,3.8,26.96,5.48,8,1.27,13.76,2.39,17.28,3.37,3.51.99,5.26,2.39,5.26,4.22s-1.78,3.23-5.36,4.21c-3.58.99-9.37,2.11-17.38,3.38-10.81,1.68-19.76,3.47-26.86,5.36-7.08,1.9-12.6,4.82-16.52,8.74-3.94,3.93-6.79,9.41-8.54,16.43-1.77,7.03-3.41,16.08-4.95,27.17-1.27,8.42-2.35,14.32-3.26,17.69-.93,3.37-2.28,5.06-4.11,5.06-1.97,0-3.48-1.87-4.52-5.59-1.05-3.71-2.14-9.5-3.27-17.37-1.82-11.23-3.68-20.28-5.57-27.16-1.9-6.88-4.82-12.29-8.74-16.22-3.94-3.92-9.48-6.87-16.64-8.84-7.16-1.96-16.14-3.72-26.96-5.26-8-1.27-13.8-2.39-17.36-3.38-3.58-.98-5.38-2.38-5.38-4.21s1.77-3.23,5.26-4.22Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 175.43 176.06'%3E%3Cpath d='M5.26,83.82c3.51-.98,9.27-2.1,17.28-3.37,10.81-1.54,19.83-3.33,27.06-5.36,7.23-2.04,12.8-5.09,16.74-9.17,3.79-3.92,6.63-9.3,8.54-16.11,1.89-6.8,3.75-15.68,5.57-26.63,1.41-8.14,2.64-14.05,3.68-17.7,1.06-3.65,2.5-5.48,4.32-5.48s3.22,1.83,4.22,5.48c.98,3.65,1.97,9.34,2.95,17.06,1.54,10.81,3.22,19.8,5.06,26.96,1.82,7.16,4.7,12.63,8.64,16.42,3.92,4.08,9.48,7.1,16.62,9.06,7.16,1.97,16.14,3.8,26.96,5.48,8,1.27,13.76,2.39,17.28,3.37,3.51.99,5.26,2.39,5.26,4.22s-1.78,3.23-5.36,4.21c-3.58.99-9.37,2.11-17.38,3.38-10.81,1.68-19.76,3.47-26.86,5.36-7.08,1.9-12.6,4.82-16.52,8.74-3.94,3.93-6.79,9.41-8.54,16.43-1.77,7.03-3.41,16.08-4.95,27.17-1.27,8.42-2.35,14.32-3.26,17.69-.93,3.37-2.28,5.06-4.11,5.06-1.97,0-3.48-1.87-4.52-5.59-1.05-3.71-2.14-9.5-3.27-17.37-1.82-11.23-3.68-20.28-5.57-27.16-1.9-6.88-4.82-12.29-8.74-16.22-3.94-3.92-9.48-6.87-16.64-8.84-7.16-1.96-16.14-3.72-26.96-5.26-8-1.27-13.8-2.39-17.36-3.38-3.58-.98-5.38-2.38-5.38-4.21s1.77-3.23,5.26-4.22Z'/%3E%3C/svg%3E") center/contain no-repeat}
html.wk #plusgrid span{position:fixed;z-index:35;mix-blend-mode:difference;pointer-events:none}  /* r78: WebKit only — each mark blends alone (r54 law kept: z 35 = above the map menu) */

/* ————— left instrument rail ————— */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);border-right:1px solid var(--ink);
      display:flex;flex-direction:column;padding:20px;z-index:20;background:var(--paper)}
.rail .logo{display:block}   /* r20: no fixed gap below logo — the menu's auto margins center it exactly */
.rail .logo img{width:100%;max-width:none;height:auto}
/* r20d: menu centered in the WHITE GAP between logo and ticker (equal air above/below) */
.rail .index{font-size:11px;letter-spacing:.08em;text-transform:uppercase;display:flex;flex-direction:column;margin:auto 0}
.rail .index a{display:flex;justify-content:space-between;padding:10px 2px;border-bottom:1px solid var(--hair);
               transition:padding .3s var(--ease-out-expo),color .2s}
.rail .index a b{font-weight:400;opacity:.5}
.rail .index a:hover{color:var(--orange);padding-left:10px}
.rail .index a[aria-current="page"],.rail .index a.active{color:var(--orange);font-weight:700}
.rail .index a[aria-current="page"] b,.rail .index a.active b{opacity:1;color:var(--orange)}
.rail .spacer{display:none}
/* vertical capabilities ticker — text fades before it can touch the hairlines */
.railtick{overflow:hidden;height:120px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin-bottom:14px;padding:12px 0;
          -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%)}
.railtick-in{display:flex;flex-direction:column;font-size:10px;letter-spacing:.1em;text-transform:uppercase;line-height:24px}
/* motion driven by JS (modulo wrap = truly infinite loop, no reset point) */
.railtick-in span{height:24px;overflow:hidden;white-space:nowrap}
.railtick-in span b{color:var(--orange);font-weight:400;margin-right:8px}
.rail .stat{font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.7;line-height:1.9}
.rail .stat .dot{display:inline-block;width:8px;height:8px;background:var(--orange);border-radius:50%;margin-right:6px;animation:blink 2.4s infinite}
@keyframes blink{50%{opacity:.25}}
.rail .clock{font-size:10px;letter-spacing:.08em;text-transform:uppercase;border-top:1px solid var(--hair);padding-top:12px;margin-top:8px;margin-bottom:-8px}
/* r20b: centered between hairline and rail bottom, tightened — 12px above the text, 12px below (rail's 20px bottom padding minus the -8px pull) */
.rail .clock b{color:var(--orange);font-weight:400}

html{overflow-x:clip}   /* r61: nothing may widen the page sideways */
main{margin-left:var(--rail)}
section{scroll-margin-top:24px}
.sec{padding:104px var(--pad-x);border-bottom:1px solid var(--ink);position:relative}
.sec-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:56px;gap:16px 24px;flex-wrap:wrap}
.sec-label h2{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.sec-label .idx{font-size:12px;color:var(--orange);font-weight:700;letter-spacing:.08em}
.sec-label a.more{font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:2px}
.sec-label a.more:hover{color:var(--orange);border-color:var(--orange)}

/* ————— hero ————— */
.hero{position:relative;min-height:calc(100vh - var(--tick));display:grid;align-content:center;
      overflow:hidden;padding:96px var(--pad-x) 72px;border-bottom:1px solid var(--ink)}
#hero3d,.hero .star-fallback{position:absolute;inset:0;z-index:1;pointer-events:none}
/* stars stay BEHIND the typography — brief law, user-confirmed r13 */
#hero3d canvas{width:100%;height:100%;display:block}
.hero .star-fallback{display:none;place-items:center}  /* r49: hidden until 3D actually fails — no flash on load */
.hero .star-fallback.on{display:grid}
.hero .star-fallback img{width:min(34vw,420px);height:auto;opacity:.92;transform:translateX(28%)}
.hero-copy{position:relative;z-index:2;max-width:1100px}
.hero .kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin-bottom:22px}
.hero h1{font-size:clamp(2.3rem,5.4vw,5.5rem);font-weight:800;text-transform:uppercase;line-height:1.02;
         letter-spacing:-.03em;text-wrap:balance;
         text-shadow:0 0 14px var(--paper),0 0 34px var(--paper)}
.hero h1 .hit{color:var(--orange)}
.hero h1 .hp{color:var(--blue)}
.hero .co{margin-top:44px;display:flex;flex-wrap:wrap;gap:10px;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.hero .co a{border:1px solid var(--ink);padding:9px 18px;border-radius:99px;background:var(--paper);transition:background .2s,color .2s,border-color .2s}
/* r15f: all four pills identical at rest; the hovered one (any of them)
   floods solid orange with the border swallowed */
.hero .co a:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.corner{position:absolute;font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.55;z-index:2}
.c-tl{top:16px;left:20px}.c-tr{top:16px;right:20px}.c-bl{bottom:14px;left:20px}.c-br{bottom:14px;right:20px}
.c-br em{font-style:normal;color:var(--blue)}

/* page hero (subpages): compact */
.page-hero{padding:88px var(--pad-x) 64px;border-bottom:1px solid var(--ink);position:relative;overflow:hidden}
.page-hero .kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.65;margin-bottom:16px}
.page-hero h1{font-size:clamp(2.2rem,4.6vw,4.4rem);font-weight:800;text-transform:uppercase;line-height:1.02;letter-spacing:-.03em;max-width:18ch}
.page-hero h1 .hit{color:var(--blue)}   /* r19: subpage headline accent word = blue (matches homepage verbs) */
.page-hero .lede{margin-top:24px;max-width:60ch}
.page-hero .star-side{position:absolute;right:calc(var(--pad-x) - 20px);top:50%;transform:translateY(-50%);font-size:8px;line-height:1;white-space:pre;color:var(--ink);opacity:.8;user-select:none;pointer-events:none}  /* r65b: a touch past the content line (user call) */
.page-hero .ph3d{display:none}   /* r62: mobile-only 3D star behind the subpage headline */
.page-hero .ph3d canvas{width:100%;height:100%;display:block}

/* ————— folders (services) — straight overlapping stack, LAST in front (r12: uniform left padding = fonts align) ————— */
.fan{position:relative;height:400px}
.ffolder{position:absolute;top:0;width:27%;cursor:pointer;
         transition:transform .5s var(--ease-out-expo)}
         /* r61 perf: NO rest-state filters — 4 permanent drop-shadows on every
            folder forced filter repaints on each scrolled frame (jank). The
            hover ring now appears with the lift instead of cross-fading. */
.ffolder:nth-child(1){left:0;z-index:1}
.ffolder:nth-child(2){left:24.3%;z-index:2}
.ffolder:nth-child(3){left:48.6%;z-index:3}
.ffolder:nth-child(4){left:73%;z-index:4}
.ffolder:not(:nth-child(4)) .fbody{padding-right:52px}
.ffolder .ftab{display:inline-block;background:var(--ink);color:var(--orange);border:1px solid var(--ink);border-bottom:0;
               padding:7px 18px 5px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
               border-radius:10px 10px 0 0;position:relative;top:1px;z-index:2}
.ffolder .fbody{border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:0 14px 14px 14px;height:340px;
                padding:22px;display:flex;flex-direction:column;justify-content:space-between;
                box-shadow:-2px 0 0 var(--paper);transition:box-shadow .5s var(--ease-out-expo)}
/* pulled file: paper air-gap around the silhouette + soft drop shadow back
   onto the stack. r76 perf: the ring is BOX-SHADOWS now, not 4 stacked
   drop-shadow filters — the filter rasterization was the hover hitch on
   desktop. Tab ring skips its bottom side (no seam onto the body). */
.ffolder:hover,.ffolder:focus-within{transform:translateY(-12px);z-index:9}
.ffolder:hover .ftab,.ffolder:focus-within .ftab{box-shadow:-2px 0 0 var(--paper),2px 0 0 var(--paper),0 -2px 0 var(--paper)}
.ffolder:hover .fbody,.ffolder:focus-within .fbody{box-shadow:0 0 0 2px var(--paper),0 26px 44px -18px rgba(30,17,1,.5)}
.ffolder .fnum{font-size:40px;font-weight:500;line-height:1;color:var(--paper)}  /* r53: 800→500, quieter */
.ffolder h3{font-size:18px;font-weight:700;line-height:1.3;margin-top:8px;max-width:22ch}
.ffolder ul{list-style:none;font-size:12px;letter-spacing:.02em;margin-top:12px;
            opacity:0;max-height:0;overflow:hidden;transition:opacity .4s,max-height .5s var(--ease-in-out-quart)}
.ffolder:hover ul,.ffolder:focus-within ul{opacity:1;max-height:220px}
.ffolder li{padding:7px 0;border-top:1px solid rgba(249,247,244,.28);display:flex;justify-content:space-between;opacity:.9}
.ffolder li b{color:var(--orange);font-weight:400}
.ffolder .fgo{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);opacity:0;transition:opacity .3s}
.ffolder:hover .fgo,.ffolder:focus-within .fgo{opacity:1}

/* services page: full folder rows that open in place — DARK, matching the
   homepage folders (r25: ink body + ink tab, orange label, paper sheet) */
.svcfile{border:1px solid var(--ink);border-radius:0 12px 12px 12px;margin-bottom:56px;background:var(--ink);color:var(--paper);position:relative}
.svcfile,.pfile{scroll-margin-top:96px}   /* r64: no-JS anchor fallback — air above the tab, never flush */
.svcfile>.ftab,.pfile>.ftab{display:inline-block;background:var(--ink);color:rgba(249,247,244,.6);border:1px solid var(--ink);border-bottom:0;
               padding:6px 16px 4px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
               border-radius:10px 10px 0 0;position:absolute;top:-27px;left:0;transform:translateX(-1px)}   /* r27c: tab text grey site-wide. r79: translateX not left:-1px — layout offsets SNAP to device pixels on fractional DPRs (phones ~2.6×) and the tab edge jagged 1px left of the body edge */
.svcfile .fhead{display:grid;grid-template-columns:110px 1fr 56px;align-items:center;cursor:pointer;padding:26px 28px}
.svcfile .fhead .n{font-size:13px;color:var(--orange);font-weight:700}
.svcfile .fhead h2{font-size:clamp(1.5rem,3.4vw,2.8rem);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05}
.svcfile .fhead .arrow{font-size:24px;justify-self:end;transition:transform .4s var(--ease-out-expo)}
.svcfile.open .fhead .arrow{transform:rotate(45deg);color:var(--orange)}
.svcfile .fpanel{max-height:0;overflow:hidden;transition:max-height .6s var(--ease-in-out-quart);border-radius:0 0 11px 11px}  /* r52: rounded clip — corners stay round mid-animation */
.svcfile.open .fpanel{max-height:640px}
.svcfile .sheet{background:var(--paper);color:var(--ink);border-top:1px solid var(--ink);border-radius:0 0 11px 11px;
                display:grid;grid-template-columns:1.1fr 1fr;gap:36px;padding:36px 28px 34px}
.svcfile .sheet p{max-width:52ch}
.svcfile .sheet .pill{display:inline-block;margin-top:22px;background:var(--orange);color:var(--ink);font-weight:700;
                      font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:12px 20px;border-radius:99px;transition:background .2s}
.svcfile .sheet .pill:hover{background:var(--pink);color:var(--ink)}  /* r35: pink hover */
.svcfile .sheet ul{list-style:none;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.svcfile .sheet li{border-bottom:1px solid var(--hair);padding:13px 0;display:flex;justify-content:space-between}
.svcfile .sheet li:first-child{border-top:1px solid var(--hair)}
.svcfile .sheet li b{color:var(--orange);font-weight:400}

/* ————— projects: dark FOLDERS on paper that OPEN (r27: same folder design
   as services — tab + cut corner; overflow removed so the tab can stick out) */
.pfile{border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:0 12px 12px 12px;margin-bottom:56px;position:relative}
.pfile .phead{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:8px;width:100%;text-align:left;padding:30px 28px;cursor:pointer}
.pfile .phead .n{font-size:12px;color:var(--orange);font-weight:700;letter-spacing:.08em}
.pfile .phead h3{font-size:clamp(1.5rem,3.4vw,2.8rem);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;  /* r62: same type as the services-file headings (user prefers it) */
                 transition:transform .4s var(--ease-out-expo)}
.pfile .phead .arrow{font-size:24px;color:var(--paper);transition:transform .4s var(--ease-out-expo)}
.pfile:hover .phead h3{transform:translateX(14px)}
.pfile.open .phead .arrow,.pfile:hover .phead .arrow{transform:rotate(45deg);color:var(--orange)}
.pfile .ppanel{max-height:0;overflow:hidden;transition:max-height .6s var(--ease-in-out-quart);border-radius:0 0 11px 11px}  /* r52: rounded clip — corners stay round mid-animation */
.pfile.open .ppanel{max-height:560px}
.pfile .sheet{background:var(--paper);color:var(--ink);border-top:1px solid var(--ink);border-radius:0 0 11px 11px;
              display:grid;grid-template-columns:1.1fr 1fr;gap:36px;padding:36px 28px 34px}   /* r27b: full-bleed like services */
.pfile .sheet p{max-width:50ch;font-size:14px}
.pfile .sheet .pill{display:inline-block;margin-top:20px;background:var(--orange);color:var(--ink);font-weight:700;
                    font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:12px 20px;border-radius:99px;transition:background .2s}
.pfile .sheet .pill:hover{background:var(--pink);color:var(--ink)}  /* r35: pink hover */
.pfile .sheet ul{list-style:none;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.pfile .sheet li{border-bottom:1px solid var(--hair);padding:12px 0;display:flex;justify-content:space-between}
.pfile .sheet li:first-child{border-top:1px solid var(--hair)}
.pfile .sheet li b{color:var(--orange);font-weight:400}
.pfile:last-child,.svcfile:last-child{margin-bottom:0}   /* r62: the section's own padding closes the block — no double gap */

/* ————— about / manifesto ————— */
.manifesto p{font-size:clamp(1.15rem,2.1vw,1.65rem);font-weight:500;max-width:56ch;text-wrap:balance}
.manifesto p em{font-style:normal;background:var(--pink);padding:0 .2ch}
.factrow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
.fact{border:1px solid var(--ink);padding:20px;border-radius:8px}
.fact .fv{font-size:34px;font-weight:800;line-height:1.1}
.fact .fv i{font-style:normal;color:var(--orange)}
.fact .fk{font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin-top:8px}

/* ————— footer ————— */
footer{background:var(--ink);color:var(--paper);padding:104px var(--pad-x) 44px;position:relative;overflow:hidden}
footer .fstar{position:absolute;right:calc(var(--pad-x) - 20px);bottom:110px;font-size:7px;line-height:1;white-space:pre;color:var(--paper);opacity:.55;user-select:none;pointer-events:none}  /* r65b: a touch past the content line (user call) */
footer .fkick{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);margin-bottom:18px}  /* r22: white, was pink */
footer h2{font-size:clamp(2.4rem,6.4vw,5.8rem);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:.98;max-width:16ch}
footer h2 a{color:var(--orange)}
footer h2 a:hover{color:var(--paper)}
.fmeta{display:flex;justify-content:space-between;margin-top:72px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;flex-wrap:wrap;gap:12px;opacity:.85}
.fmeta a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--blue)}

/* ————— fixed bottom conveyor ————— */
.infobar{position:fixed;left:var(--rail);right:0;bottom:0;height:var(--tick);z-index:30;background:var(--ink);color:var(--paper);
        border-top:1px solid var(--ink);display:flex;align-items:center;justify-content:space-between;gap:24px;
        padding:0 24px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;overflow:hidden;white-space:nowrap}
.infobar b{color:var(--pink);font-weight:400}
.infobar a:hover{color:var(--pink)}   /* r28: mail hover pink */

/* ————— map menu (r54): full-screen index for mobile/tablet ————— */
.menu-btn{display:none}
.mapmenu{position:fixed;inset:0;z-index:32;background:var(--ink);color:var(--paper);
         opacity:0;visibility:hidden;transition:opacity .35s var(--ease-out-expo),visibility 0s .35s}
body.menu-open .mapmenu{opacity:1;visibility:visible;transition:opacity .35s var(--ease-out-expo)}
.mm-in{height:100%;display:flex;flex-direction:column;padding:76px 24px 24px;
       transform:translateY(16px);transition:transform .45s var(--ease-out-expo)}
body.menu-open .mm-in{transform:none}
.mm-close{position:absolute;top:12px;right:16px;width:44px;height:44px;display:grid;place-items:center;
          background:none;border:1px solid rgba(249,247,244,.4);border-radius:99px;color:var(--paper);
          font-size:16px;cursor:pointer;transition:border-color .2s,color .2s}
.mm-close:hover{border-color:var(--pink);color:var(--pink)}
.mm-kick{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(249,247,244,.6);margin-bottom:20px}
.mm-nav{display:flex;flex-direction:column}
.mm-nav a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0;
          border-bottom:1px solid rgba(249,247,244,.28);color:var(--paper);
          font-size:clamp(1.9rem,7.6vw,3rem);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1}
.mm-nav a:first-child{border-top:1px solid rgba(249,247,244,.28)}
.mm-nav a b{font-size:12px;font-weight:400;color:var(--pink);letter-spacing:.08em}
.mm-nav a[aria-current="page"]{color:var(--pink)}
.mm-meta{margin-top:auto;padding-top:24px;display:flex;flex-direction:column;gap:6px;
         font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(249,247,244,.6)}
.mm-meta b{color:var(--pink);font-weight:400}   /* r63: whole map menu accents = PINK (user call, reverses r62's orange) */
html.menu-open,html.menu-open body{overflow:hidden}

/* ————— reveals ————— */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out-expo),transform .7s var(--ease-out-expo)}
.reveal.in{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}

/* reduced-motion block REMOVED (r76) — user law: motion always on.
   The OS setting froze the clock/spin/turntables for remote-desktop and
   VPS visitors, reading as breakage. Deliberate bypass, logged in MASTER. */

/* ————— breakpoints (r54 responsive overhaul) ————— */

/* wide screens: more air, marks + content stay star-aligned automatically */
@media (min-width:1800px){
  :root{--pad-x:96px}
  .hero-copy{max-width:1240px}
}

/* tablet + mobile: rail becomes a STICKY top bar with the map-menu hamburger */
@media (max-width:1080px){
  :root{--pad-x:32px}
  .rail{position:sticky;top:0;bottom:auto;width:auto;border-right:0;border-bottom:1px solid var(--ink);
        flex-direction:row;align-items:center;gap:18px;padding:12px 20px}
  .rail .logo{margin:0}
  .rail .logo img{width:140px}
  .rail .index,.railtick,.rail .spacer,.rail .stat,.rail .clock{display:none}
  .menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;
            width:44px;height:44px;margin-left:auto;padding:11px;background:none;border:0;cursor:pointer;
            transform:translateY(8px)}  /* r70: optical center of the WORD "spectrum" sits at 65% of the logo's height (the star rides above it) — align to the word, not the image box */
  .menu-btn span{display:block;height:2px;width:100%;background:var(--ink)}
  main{margin-left:0}
  .svcfile,.pfile{scroll-margin-top:150px}          /* r64: sticky top bar + air */
  .infobar{left:0}                                  /* was var(--rail): bar started 280px off-screen */
  /* r55: star CENTRED behind the content (like desktop) — not pinned to the header */
  .hero{min-height:76vh;padding-top:72px;padding-bottom:64px}
  .hero .star-fallback img{transform:none;width:min(52vw,300px)}
  .fan{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
  .ffolder{position:static;width:auto;transform:none!important;filter:none!important}
  .ffolder .fbody{padding-right:22px;box-shadow:none}
  .ffolder ul{opacity:1;max-height:none}
  .ffolder .fgo{opacity:1}
  .svcfile .sheet,.pfile .sheet{grid-template-columns:1fr}
  .factrow{grid-template-columns:1fr}
  .page-hero .star-side{display:none}
  /* r62: subpage heroes get the homepage treatment — the 3D star centred
     behind/beneath the headline, text glowing clear of it */
  .page-hero{min-height:76vh;display:grid;align-content:center;padding-top:72px;padding-bottom:64px}
  .page-hero .ph3d{display:block;position:absolute;inset:0;z-index:0;pointer-events:none}
  .page-hero .kicker,.page-hero h1,.page-hero .lede{position:relative;z-index:1}
  .page-hero h1{text-shadow:0 0 14px var(--paper),0 0 34px var(--paper)}
}

/* phones */
@media (max-width:680px){
  :root{--pad-x:20px}
  .rail{padding:10px 16px}
  .rail .logo img{width:168px}  /* r59: bigger mobile logo */
  .menu-btn{transform:translateY(9px)}  /* r70: bigger logo → the word's center sits proportionally lower */
  .fan{grid-template-columns:1fr}
  .mhide{display:none}                              /* r59b: trims long labels on phones */
  .corner{display:none}                             /* labels collided with the star */
  .hero{min-height:70vh}
  .page-hero{min-height:70vh}
  .ffolder .fnum{font-size:30px;font-weight:400}    /* r62: quieter than the headline above it */
  .hero .co{margin-top:30px}
  .hero .co a{padding:8px 12px}
  .sec{padding-top:72px;padding-bottom:72px}
  /* r60: label→content gap stays the desktop 56px everywhere — the folder
     tabs eat 27px of it, so anything tighter reads as touching */
  /* r66: phone file heads — the orange SPC number goes, the title takes
     the left edge (three columns were crowding the row) */
  .pfile .phead{grid-template-columns:1fr auto;padding:22px 18px}
  .svcfile .fhead{grid-template-columns:1fr 40px;padding:20px 18px}
  .pfile .phead .n,.svcfile .fhead .n{display:none}
  .svcfile>.ftab,.pfile>.ftab{color:var(--orange)}  /* r66b: grey tab read flat once the number left — orange carries the accent on phones */
  .pfile .sheet{padding:26px 20px 26px}
  .svcfile .sheet{padding:26px 20px 26px}
  .infobar{gap:14px;padding:0 16px;font-size:9px}
  .infobar span:nth-of-type(1),.infobar span:nth-of-type(3){display:none}  /* keep email + working 24/7 */
  /* r65: phone footer — no meta line, content centred in the block's
     height. r65b: ASCII star on the RIGHT, BEHIND the text where they
     overlap (home-hero treatment — ink glow lifts the type off it) */
  footer{padding-top:80px;padding-bottom:80px;display:flex;flex-direction:column;justify-content:center}
  footer .fmeta{display:none}
  footer .fstar{display:block;right:-26px;top:50%;bottom:auto;transform:translateY(-50%);font-size:6px;opacity:.6}  /* r71: pushed right; footer's overflow:hidden clips whatever swings past the edge (user call) */
  footer .fkick,footer h2{position:relative;z-index:1;text-shadow:0 0 12px var(--ink),0 0 30px var(--ink)}
  .mm-in{padding:70px 20px 20px}
}