/* ============================================================
   fromel.com — the workshop of the person
   Modern-corporate skin over the house skeleton
   (sticky top banner + bottom footer band, one page per nav item)
   Self-contained: no external fonts, no CDN, no trackers.
   ============================================================ */

/* ---- tokens ---------------------------------------------------- */
:root{
  --bg:#ffffff; --bg-soft:#f4f6f8; --panel:#fbfcfd;
  --ink:#14181d; --ink-soft:#4a525c; --faint:#8a929c;
  --line:#e6eaef; --line-2:#d6dce3;
  --accent:#a97c26;      /* brass — the seal thread to the family */
  --brand:#14181d;       /* the lockup: ink on light, brass on dark */
  --accent-hi:#c39a44;
  --accent-2:#1d5f6b;    /* deep teal — links, labels */
  --on-accent:#ffffff;
  --ok:#1f7a4d; --no:#a5342b;
  --shadow:0 20px 50px rgba(20,24,29,.10);
  --shadow-sm:0 6px 20px rgba(20,24,29,.07);
  --display:"Helvetica Neue",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* wordmark: Helvetica Neue, kept 2026-09-12 — John's pick for the lockup. */
  --wordmark:"Helvetica Neue",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --wrap:1120px;
}
:root[data-theme="dark"]{
  --bg:#0d1013; --bg-soft:#12161b; --panel:#161b21;
  --ink:#eef1f4; --ink-soft:#aab2bd; --faint:#6d7681;
  --line:#242a31; --line-2:#313941;
  --accent:#d3a24a; --accent-hi:#e3b665; --accent-2:#5fb0bd;
  --brand:#d3a24a;
  --on-accent:#0d1013;
  --ok:#4bbf85; --no:#e0796d;
  --shadow:0 24px 60px rgba(0,0,0,.5);
  --shadow-sm:0 6px 24px rgba(0,0,0,.4);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0d1013; --bg-soft:#12161b; --panel:#161b21;
    --ink:#eef1f4; --ink-soft:#aab2bd; --faint:#6d7681;
    --line:#242a31; --line-2:#313941;
    --accent:#d3a24a; --accent-hi:#e3b665; --accent-2:#5fb0bd;
  --brand:#d3a24a;
    --on-accent:#0d1013;
    --ok:#4bbf85; --no:#e0796d;
    --shadow:0 24px 60px rgba(0,0,0,.5);
    --shadow-sm:0 6px 24px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .25s ease,color .25s ease;
}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.08;
  letter-spacing:-.02em; margin:0; color:var(--ink)}
a{color:var(--accent-2); text-decoration:none}
a:hover{color:var(--accent)}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}
.wrap.narrow{max-width:760px}
.eyebrow,.kicker{font-family:var(--sans); font-size:12px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0 0 14px}
.dek{font-size:20px; color:var(--ink-soft); max-width:64ch}
section{padding:74px 0}
section.alt{background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sechead{max-width:64ch}
.sechead h2{font-size:clamp(28px,4.2vw,42px)}
.sechead .dek{margin-top:14px}

/* ---- buttons -------------------------------------------------- */
.btn{display:inline-block; font-family:var(--sans); font-weight:700; font-size:15px;
  letter-spacing:.01em; padding:13px 24px; border-radius:10px; cursor:pointer;
  border:1.5px solid var(--accent); transition:.16s; text-align:center}
.btn.solid{background:var(--accent); color:var(--on-accent)}
.btn.solid:hover{background:var(--accent-hi); border-color:var(--accent-hi); transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent)}
.cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}

/* ---- top banner ---------------------------------------------- */
.topnav{position:sticky; top:0; z-index:40;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line)}
.topnav .wrap{display:flex; align-items:center; justify-content:space-between; height:112px; gap:18px}
/* The mark is dry-brush raster art. Used as a mask so the ink recolours with
   the theme instead of being a black PNG that vanishes on the dark ground.
   Aspect is 484:614 — width is height x 0.788. */
.nfmark{
  display:block; flex:none;
  background-color:var(--brand);
  -webkit-mask:url("/assets/brand/neuronic-foundry/logo/mark.png") no-repeat center/contain;
  mask:url("/assets/brand/neuronic-foundry/logo/mark.png") no-repeat center/contain;
}

/* Horizontal lockup: big mark, wordmark stacked to its right in wide caps.
   One colour throughout — ink on light, brass on dark. */
.brandmark{display:flex; align-items:center; gap:20px; text-decoration:none; color:var(--brand)}
.brandmark .nfmark{width:63px; height:80px}
/* Both words justified flush to the same measure. Each line is a flex row of
   letters with space-between, so the glyphs keep their true shapes and only the
   gaps change — NEURONIC (8) tightens, FOUNDRY (7) opens. --wmw sets the measure. */
/* One tracking value on both lines, left aligned. NEURONIC is a letter longer, so
   its C overhangs. Two other routes were tried and dropped 2026-09-12: justifying
   both lines to a common measure (forces FOUNDRY's gaps 46% wider than NEURONIC's
   at equal size) and filling FOUNDRY's short line with a rule (structurally only
   ~16px of leftover at nav size, so the rule read as a hyphen).
   Tracking is emitted per letter, not as letter-spacing, so the last glyph carries
   no trailing space. */
.wordmark{display:flex; flex-direction:column; color:var(--brand)}
.wordmark .wline{
  font-family:var(--wordmark); font-weight:400; font-size:var(--wms);
  line-height:1.34; white-space:nowrap;
}
.wordmark .wline i{font-style:normal}
.brandmark{--wms:22px}
.foot .mark{--wms:13.5px}
@media (max-width:1080px){
  .topnav .wrap{height:96px}
  .brandmark{gap:15px; --wms:17px}
  .brandmark .nfmark{width:47px; height:60px}
  .navlinks a.here::after{bottom:-37px}
}
@media (max-width:820px){
  .topnav .wrap{height:84px}
  .brandmark{--wms:15px}
  .brandmark .nfmark{width:39px; height:50px}
  .navlinks{top:84px!important}
}
.foot .mark .nfmark{width:35px; height:45px}
.navlinks{display:flex; gap:21px; align-items:center; font-family:var(--sans);
  font-size:14.5px; font-weight:600}
.navlinks a{color:var(--ink-soft)}
.navlinks a:hover,.navlinks a.here{color:var(--ink)}
.navlinks a.here{position:relative}
.navlinks a.here::after{content:""; position:absolute; left:0; right:0; bottom:-45px;
  height:2px; background:var(--accent)}
.navtools{display:flex; align-items:center; gap:14px}
.themebtn{width:36px; height:36px; border-radius:9px; border:1px solid var(--line-2);
  background:transparent; color:var(--ink); cursor:pointer; display:grid; place-items:center;
  font-size:16px; line-height:1; transition:.16s}
.themebtn:hover{border-color:var(--accent); color:var(--accent)}
.navtoggle{display:none; width:40px; height:38px; border:1px solid var(--line-2);
  border-radius:9px; background:transparent; cursor:pointer; padding:0}
.navtoggle span{display:block; width:20px; height:2px; background:var(--ink);
  margin:4px auto; border-radius:2px; transition:.2s}

/* ---- hero ----------------------------------------------------- */
.hero{position:relative; overflow:hidden; padding:96px 0 84px; background:var(--bg)}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.9;
  background:
    radial-gradient(60% 55% at 78% 8%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 70%),
    radial-gradient(55% 50% at 8% 92%, color-mix(in srgb,var(--accent-2) 20%,transparent), transparent 72%);}
.hero .wrap{position:relative; z-index:1}
.hero h1{font-size:clamp(40px,7vw,76px); max-width:16ch; letter-spacing:-.03em}
.hero .tagline{font-family:var(--serif); font-style:italic; font-size:clamp(19px,2.6vw,25px);
  color:var(--ink-soft); margin:20px 0 0; max-width:34ch}
.hero .lede{font-size:20px; color:var(--ink-soft); max-width:60ch; margin:22px 0 0}

/* ---- grids / cards ------------------------------------------- */
.grid{display:grid; gap:26px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:28px; transition:.16s}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--line-2)}
.card h3{font-size:21px; margin:0 0 8px}
.card p{color:var(--ink-soft); font-size:16.5px; margin:0}
.card .ico{font-size:26px; margin:0 0 14px; display:block}
.pathcard{display:block; color:inherit; background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:12px; padding:24px 26px; transition:.16s}
.pathcard:hover{transform:translateY(-2px); border-left-color:var(--accent-hi); color:inherit}
.pathcard h3{font-size:20px; margin:0 0 6px}
.pathcard p{color:var(--ink-soft); font-size:16px; margin:0}
.pathcard .go{display:inline-block; margin-top:12px; font-size:12.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}

/* ---- page head ------------------------------------------------ */
.pagehead{padding:72px 0 34px; background:var(--bg)}
.pagehead h1{font-size:clamp(34px,5.5vw,58px)}
.pagehead .dek{margin-top:16px; font-family:var(--serif); font-size:21px}

/* ---- the Standard (articles) --------------------------------- */
.articles{border-top:1px solid var(--line-2); margin-top:8px}
.article{display:grid; grid-template-columns:64px 1fr; gap:20px; padding:26px 0;
  border-bottom:1px solid var(--line)}
.article .anum{font-family:var(--display); font-weight:700; font-size:26px; color:var(--accent)}
.article h3{font-size:22px; margin:0 0 6px}
.article p{margin:0; color:var(--ink-soft); font-size:17px}
.article .no{color:var(--no); font-weight:600}
.callout{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:26px 28px; margin-top:34px}
.callout h3{font-size:19px; margin:0 0 8px}
.callout p{margin:0 0 .6em; color:var(--ink-soft); font-size:16.5px}
.callout p:last-child{margin:0}
.brightlines{background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--no);
  border-radius:14px; padding:26px 28px; margin-top:34px}
.brightlines h3{font-size:19px; margin:0 0 10px}
.brightlines p{color:var(--ink-soft); font-size:16.5px; margin:0 0 12px}
.brightlines ul{margin:0 0 12px; padding-left:22px}
.brightlines li{color:var(--ink-soft); font-size:16.5px; margin:0 0 6px}
.brightlines .fine{margin:0; color:var(--faint); font-size:14.5px}

/* ---- fit screener (toy) -------------------------------------- */
.screener{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:30px; box-shadow:var(--shadow-sm)}
.q{padding:18px 0; border-bottom:1px solid var(--line)}
.q:last-of-type{border-bottom:0}
.q p{font-weight:600; font-size:17.5px; margin:0 0 12px; color:var(--ink)}
.opts{display:flex; gap:10px; flex-wrap:wrap}
.opt{font-family:var(--sans); font-weight:600; font-size:14px; padding:9px 18px;
  border:1.5px solid var(--line-2); border-radius:999px; background:transparent;
  color:var(--ink); cursor:pointer; transition:.14s}
.opt:hover{border-color:var(--accent)}
.opt.sel-yes{background:var(--ok); border-color:var(--ok); color:#fff}
.opt.sel-no{background:var(--no); border-color:var(--no); color:#fff}
.verdict{margin-top:26px; padding:24px; border-radius:14px; border:1px solid var(--line-2);
  background:var(--bg-soft); display:none}
.verdict.show{display:block}
.verdict h3{font-size:22px; margin:0 0 8px}
.verdict.pass h3{color:var(--ok)} .verdict.fail h3{color:var(--no)} .verdict.mixed h3{color:var(--accent)}
.verdict p{margin:0 0 .6em; color:var(--ink-soft); font-size:16.5px}
.progress{height:6px; border-radius:6px; background:var(--line); overflow:hidden; margin-bottom:22px}
.progress i{display:block; height:100%; width:0; background:var(--accent); transition:width .3s ease}

/* ---- constellation list -------------------------------------- */
.constel{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:8px}
.wnode{display:block; color:inherit; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:24px 26px; transition:.16s}
.wnode:hover{transform:translateY(-2px); box-shadow:var(--shadow-sm); color:inherit}
.wnode h3{font-size:20px; margin:0 0 4px}
.wnode .glyph{font-family:var(--serif); font-style:italic; color:var(--accent); font-size:15px}
.wnode p{color:var(--ink-soft); font-size:16px; margin:8px 0 0}

/* ---- footer band --------------------------------------------- */
.foot{background:var(--bg-soft); border-top:1px solid var(--line); padding:52px 0 40px; margin-top:20px}
.foot .cols{display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:start}
.foot .disc{font-size:14.5px; color:var(--faint); max-width:56ch; line-height:1.6}
.foot .disc b{color:var(--ink-soft)}
.foot .lineage{font-size:14.5px; color:var(--ink-soft)}
.foot .mark{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.foot .mmxxvi{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:16px}
.foot .footnav{display:flex; gap:18px; flex-wrap:wrap; font-size:14px; margin-top:10px}
.foot .footnav a{color:var(--ink-soft)}

/* ---- responsive ---------------------------------------------- */
@media (max-width:860px){
  .navlinks{position:absolute; top:112px; left:0; right:0; flex-direction:column; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    display:none; padding:6px 0}
  .topnav.open .navlinks{display:flex}
  .navlinks a{padding:13px 28px; width:100%}
  .navlinks a.here::after{display:none}
  .navtoggle{display:block}
  .g3,.g2,.constel,.foot .cols{grid-template-columns:1fr}
  section{padding:56px 0}
}

/* ============================================================
   Foundry skin (2026-09) — sharp, earthy, modern.
   Warm ivory and foundry-iron instead of cool white and slate;
   brass stays the mark's colour. Square corners throughout:
   precision tooling against the hand-drawn mark.
   ============================================================ */
:root{
  --bg:#f4efe6; --bg-soft:#ebe4d7; --panel:#f8f4ec;
  --ink:#1b1916; --ink-soft:#57504a; --faint:#8b8378;
  --line:#ddd3c3; --line-2:#c9bda9;
  --iron:#1b1916;          /* the foundry floor: deep bands, the dial face */
  --iron-ink:#efe8dc;
  --shadow:0 20px 50px rgba(40,30,15,.12); --shadow-sm:0 6px 20px rgba(40,30,15,.08);
}
:root[data-theme="dark"]{
  --bg:#13110f; --bg-soft:#1a1714; --panel:#1d1a16;
  --ink:#efe8dc; --ink-soft:#b8ad9e; --faint:#857b6e;
  --line:#2b2621; --line-2:#3a332c;
  --iron:#0c0b09; --iron-ink:#efe8dc;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#13110f; --bg-soft:#1a1714; --panel:#1d1a16;
    --ink:#efe8dc; --ink-soft:#b8ad9e; --faint:#857b6e;
    --line:#2b2621; --line-2:#3a332c;
    --iron:#0c0b09; --iron-ink:#efe8dc;
  }
}
.hero-bg{display:none}
.btn, .card, .pathcard, .callout, .themebtn, .navtoggle, input, select, textarea{border-radius:0 !important}
.btn{font-family:var(--display); font-weight:500; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; padding:15px 26px}
.btn.solid:hover, .pathcard:hover{transform:none}
.eyebrow,.kicker{letter-spacing:.24em}

/* ---- Type (2026-09): Deco headlines, readable text ----------------------------
   Headlines: Italiana, bolded by the browser (John approved it in Safari, Chrome and
   Firefox). Text and interface: Instrument Sans, a crisp grotesque (John chose it over Jost,
   which read too Century Gothic, and Source Sans 3). The wordmark stays Helvetica.
   Italiana lacks €, ≠, ≤, ≥, ‰, † and most extended Latin — keep those out of headlines. */
:root{
  --head:"Italiana",Georgia,serif;
  --sans:"Instrument Sans Variable","Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Instrument Sans Variable","Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
h1,h2,h3,h4{font-family:var(--head); font-weight:700; letter-spacing:.005em}
.hero h1{letter-spacing:.005em}
.eyebrow,.kicker{font-weight:600}

/* ---- Navigation (2026-09): no top menu --------------------------------------------
   Every page opens on the logo lockup; its rotor turns to the page's stop on the dial.
   A thin bar pinned to the bottom carries the legal links, the theme switch and a plain
   drop-up menu of every page. */
.lockup-head{padding:44px 0 8px}
.lockup{display:inline-flex; align-items:center; gap:28px; text-decoration:none; color:var(--brand); --wms:30px}
.lrig{position:relative; width:78px; aspect-ratio:484/614; flex:none}
.lrotor,.lbase{position:absolute; left:0; width:100%; background-color:var(--accent)}
.lrotor{top:0; height:80.3%; transform-origin:48.9% 53.9%; transform:rotate(var(--a,0deg));
  transition:transform .9s cubic-bezier(.3,1.45,.45,1);
  -webkit-mask:url("/assets/brand/neuronic-foundry/logo/logo-rotor-alpha.png") no-repeat center/contain;
  mask:url("/assets/brand/neuronic-foundry/logo/logo-rotor-alpha.png") no-repeat center/contain}
.lbase{bottom:0; height:16.5%;
  -webkit-mask:url("/assets/brand/neuronic-foundry/logo/logo-base-alpha.png") no-repeat center/contain;
  mask:url("/assets/brand/neuronic-foundry/logo/logo-base-alpha.png") no-repeat center/contain}
.lockup:hover .lrotor{--a:-150deg}
@media (max-width:760px){ .lockup{--wms:20px; gap:18px} .lrig{width:54px} .lockup-head{padding-top:28px} }
@media (prefers-reduced-motion:reduce){ .lrotor{transition:none} }

body{padding-bottom:54px}
.bottombar{position:fixed; left:0; right:0; bottom:0; z-index:60; height:54px;
  display:flex; align-items:center; gap:24px; padding:0 max(16px, calc((100% - var(--wrap)) / 2));
  background:color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); font-family:var(--sans); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase}
.bottombar a{color:var(--ink-soft); text-decoration:none}
.bottombar a:hover,.bottombar a.here{color:var(--accent)}
.bb-logo{display:flex; align-items:center; gap:10px; color:var(--brand) !important; --wms:9.5px; flex:none}
.bb-logo .nfmark{width:24px; height:30px}
.bb-links{flex:1; display:flex; justify-content:center; gap:26px; white-space:nowrap}
.bottombar .themebtn{margin-left:auto}
@media (max-width:1100px){ .bb-links{display:none} }
.bottombar .themebtn{width:30px; height:30px; font-size:14px; background:transparent}
.bb-menu{position:relative}
.bb-toggle{font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--ink); background:none; border:1px solid var(--line-2); padding:7px 14px; cursor:pointer}
.bb-toggle:hover,.bb-toggle[aria-expanded="true"]{border-color:var(--accent); color:var(--accent)}
.bb-panel{position:absolute; right:0; bottom:calc(100% + 10px); min-width:220px; margin:0; padding:8px 0; list-style:none;
  background:var(--panel); border:1px solid var(--line-2); box-shadow:var(--shadow)}
.bb-panel a{display:block; padding:10px 18px; color:var(--ink); letter-spacing:.14em}
.bb-panel a:hover,.bb-panel a.here{color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent)}
@media (max-width:520px){ .bottombar{font-size:10.5px; letter-spacing:.14em; gap:14px} }

/* ---- Page change ----
   A cross-fade from the page you're leaving to the one you're going to
   (cross-document view transitions: Chrome, Edge, Safari), 1.65s from the click. The dial
   banner and the bottom bar are the same on every page, so they stay put while the page
   changes around them, and the dial finishes its turn on the new page.
   Browsers without it (Firefox, for now) fade the new page in instead.
   html.vt marks a page that arrived by cross-fade. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 1.65s; animation-timing-function: ease; }
.dial-hero { view-transition-name: dial; }
.bottombar { view-transition-name: bottombar; }
::view-transition-group(dial), ::view-transition-group(bottombar),
::view-transition-new(dial), ::view-transition-new(bottombar) { animation: none; }
::view-transition-old(dial), ::view-transition-old(bottombar) { display: none; }
html.vt body > *, html.vt .over > * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
body > :not(.dial-hero, .bottombar, .over, script, style), .over > :not(.dial-hero) { animation: page-in 1.65s ease both; }
@media (prefers-reduced-motion: reduce) {
  body > *, .over > * { animation: none !important; }
}

/* ---- Backdrop: every page but Home (which has its own) sits over the industrial
   photograph, pinned behind everything and veiled like Home's; the text moves through it
   between the pinned banner and the bottom bar. Placeholder still. */
.backdrop{position:fixed; inset:0; z-index:-1; margin:0}
.backdrop img{width:100%; height:100%; object-fit:cover; object-position:50% 58%; display:block}
.backdrop::after{content:''; position:absolute; inset:0; pointer-events:none; background:color-mix(in srgb, var(--bg) 62%, transparent)}
.lnl-credit{position:absolute; right:24px; bottom:70px; z-index:1; display:block; width:150px; aspect-ratio:1304/242;
  background:var(--ink); opacity:.7; transition:opacity .3s ease;
  -webkit-mask:url('/assets/brand/lightnotlight-logo.png') no-repeat center/contain;
  mask:url('/assets/brand/lightnotlight-logo.png') no-repeat center/contain}
.lnl-credit:hover{opacity:1}
body:has(> .backdrop) .pagehead{background:transparent}
body:has(> .backdrop) section.alt{background:color-mix(in srgb, var(--bg-soft) 70%, transparent)}

/* ---- Rectangles, with the Foundry's mark on them ----
   Nothing on the site is rounded. Every box and button is a plain rectangle carrying
   registration marks: a small brass L at its top-left and bottom-right corners, like the
   corner marks on a print plate or a pattern-maker's layout. Boxes get long marks,
   buttons short ones; on a solid brass button the marks are cut in the button's ink. */
*, *::before, *::after{border-radius:0 !important}
:is(.card, .pathcard, .callout, .brightlines, .screener, .verdict, .wnode, .bb-panel),
:is(.btn, .opt, .themebtn, .bb-toggle, .navtoggle){
  --mk:var(--accent); --ml:16px; --mw:2px;
  background-image:
    linear-gradient(var(--mk), var(--mk)), linear-gradient(var(--mk), var(--mk)),
    linear-gradient(var(--mk), var(--mk)), linear-gradient(var(--mk), var(--mk)) !important;
  background-size:var(--ml) var(--mw), var(--mw) var(--ml), var(--ml) var(--mw), var(--mw) var(--ml) !important;
  background-position:0 0, 0 0, 100% 100%, 100% 100% !important;
  background-repeat:no-repeat !important;
}
:is(.btn, .opt, .themebtn, .bb-toggle, .navtoggle){--ml:7px; --mw:1.5px}
.btn.solid, .opt.sel-yes, .opt.sel-no{--mk:var(--on-accent)}
.opt.sel-yes, .opt.sel-no{--mk:#fff}

/* solid (brass) buttons: let the page show through */
.btn.solid{background-color:color-mix(in srgb, var(--accent) 68%, transparent); border-color:color-mix(in srgb, var(--accent) 80%, transparent);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.btn.solid:hover{background-color:color-mix(in srgb, var(--accent-hi) 82%, transparent); border-color:var(--accent-hi)}

/* theme button icons (Base.astro): the coal offers dark, the flame offers light */
.themebtn .ic{width:18px; height:18px; display:block}
.themebtn .ic-flame, .themebtn[data-mode="dark"] .ic-coal{display:none}
.themebtn[data-mode="dark"] .ic-flame{display:block}

/* ---- Seams ----
   No alternating light and dark bands. Sections share one ground and are divided by a
   mold's parting line: a thin brass seam with a key at its centre, drawn as a black hole
   (John's call) — see .seamkey. As a section comes into view the seam draws out from
   the key and the section rises out of it. (Base.astro marks the sections and opens them.) */
section.alt{background:transparent !important; border-top:0; border-bottom:0}
html.seams section.seamed{position:relative}
html.seams section.seamed::before{content:''; position:absolute; top:0; left:50%; height:1px;
  width:min(calc(var(--wrap) - 56px), calc(100% - 32px));
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent) 12%, color-mix(in srgb, var(--accent) 60%, transparent) 88%, transparent);
  transform:translateX(-50%) scaleX(0); transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
/* the key as a black hole: an eye lying on the seam — a black eye, pointed at both ends,
   inside a brass border twice the seam's weight (2px at its widest) that runs out to points
   along the line. Hard edges, no glow. Drawn as a small SVG that Base.astro adds to each seam. */
html.seams .seamkey{position:absolute; top:-4.5px; left:50%; width:24px; height:10px; overflow:visible;
  transform:translateX(-50%) scale(.4); opacity:0; transition:opacity .4s ease, transform .5s cubic-bezier(.3,1.4,.5,1)}
.seamkey .rim{fill:var(--accent)}
.seamkey .core{fill:#050403}
html.seams section.seamed > .wrap{opacity:0; transform:translateY(16px); transition:opacity .9s ease .2s, transform .9s cubic-bezier(.2,.7,.2,1) .2s}
html.seams section.seamed.open::before{transform:translateX(-50%) scaleX(1)}
html.seams section.seamed.open > .seamkey{opacity:1; transform:translateX(-50%) scale(1)}
html.seams section.seamed.open > .wrap{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html.seams section.seamed::before, html.seams .seamkey, html.seams section.seamed > .wrap{transition:none}
}

/* dial clicks toggle (bottom bar): a small knob; brass when on */
.detentbtn{width:30px; height:30px; display:grid; place-items:center; padding:0; cursor:pointer;
  background:transparent; color:var(--faint); border:1px solid var(--line-2); transition:.16s}
.detentbtn .ic{width:18px; height:18px; display:block}
.detentbtn .dt{opacity:.45}
.detentbtn:hover{color:var(--accent); border-color:var(--accent)}
.detentbtn[aria-pressed="true"]{color:var(--accent)}
.detentbtn[aria-pressed="true"] .dt{opacity:1}
.bottombar .detentbtn{margin-left:auto}
.bottombar .detentbtn + .themebtn{margin-left:0}
.detentbtn{--mk:var(--accent); --ml:7px; --mw:1.5px;
  background-image:linear-gradient(var(--mk),var(--mk)),linear-gradient(var(--mk),var(--mk)),linear-gradient(var(--mk),var(--mk)),linear-gradient(var(--mk),var(--mk));
  background-size:var(--ml) var(--mw), var(--mw) var(--ml), var(--ml) var(--mw), var(--mw) var(--ml);
  background-position:0 0, 0 0, 100% 100%, 100% 100%; background-repeat:no-repeat}

/* ---- Patina: dial labels for pages you've already been to darken a little, like brass
   that's been handled. The browser remembers visited links on its own; the site keeps nothing. */
.dial-hero .stop:visited:not([aria-current]){color:color-mix(in srgb, var(--accent) 45%, var(--ink-soft))}

/* ---- Work-order slip (fit.js): the fit check ends in a stamped slip ---- */
.slip{margin-top:22px; padding:20px 22px 18px; background:var(--panel); border:1px solid var(--line-2)}
.slip-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:10px; border-bottom:2px solid var(--accent)}
.slip-t{font-family:var(--sans); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent)}
.slip-no{font-family:var(--sans); font-size:12px; letter-spacing:.14em; font-variant-numeric:tabular-nums; color:var(--ink)}
.slip-meta{margin:10px 0 12px !important; font-size:13.5px !important; color:var(--faint) !important}
.slip-rows{width:100%; border-collapse:collapse; font-size:14px}
.slip-rows td{padding:6px 0; border-bottom:1px solid var(--line); color:var(--ink-soft)}
.slip-rows td:first-child{width:6.5em; font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.slip-rows td:last-child{text-align:right; font-weight:600; color:var(--ink)}
.slip-rows tr.red td:last-child{color:var(--no)}
.slip-fill{display:flex; gap:10px; align-items:flex-end; margin:16px 0 0 !important; font-size:13px !important; color:var(--faint) !important}
.slip-fill span{flex:1; border-bottom:1px solid var(--line-2); height:1.2em}
.slip-acts{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}
.slip-note{margin:12px 0 0 !important; font-size:13px !important; color:var(--faint) !important}
.slip-print{display:none}
@media print{ html.print-slip .slip-print{display:block} }

/* ---- Print: any page prints as a clean broadsheet, signed off like a mill certificate —
   the wordmark at the head, the content in ink on paper, and the hallmarks, heat number and
   casting record at the foot, with where and when it was printed. ---- */
@media print{
  :root, :root[data-theme]{--bg:#fff !important; --bg-soft:#fff !important; --panel:#fff !important; --ink:#15130f !important;
    --ink-soft:#3a352d !important; --faint:#6b6358 !important; --line:#d8d0c2 !important; --line-2:#b9ad99 !important;
    --accent:#8a6420 !important; --accent-hi:#8a6420 !important; --brand:#15130f !important; --shadow:none !important}
  @page{margin:16mm 16mm 18mm}
  body{background:#fff !important; padding:0 !important; font-size:11pt}
  body > *, .over > *{animation:none !important}
  .backdrop, .plate, .bottombar, .lnl, .lnl-credit, .dial-hero .stage, .seamkey, .slip-acts, .slip-note{display:none !important}
  .over{margin-top:0 !important}
  .dial-hero{position:static !important; background:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    border-bottom:3px double var(--ink) !important; padding:0 0 10px !important; margin-bottom:8mm}
  .dial-hero .dial-grid{display:block !important; max-width:none !important; padding:0 !important}
  .dial-hero .panels{justify-content:center !important; margin:0 !important}
  .dial-hero .big-wordmark{--wms:20pt !important}
  section{padding:6mm 0 !important}
  .wrap{max-width:none !important; padding:0 !important}
  html.seams section.seamed > .wrap{opacity:1 !important; transform:none !important}
  html.seams section.seamed::before{transform:translateX(-50%) scaleX(1) !important; background:var(--line-2) !important; width:100% !important}
  .card, .callout, .brightlines, .wnode, .pathcard, .q, .slip, .makes li{break-inside:avoid}
  :is(.card, .pathcard, .callout, .brightlines, .screener, .verdict, .wnode, .btn){-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .btn{border:1px solid var(--ink) !important; background-color:transparent !important; color:var(--ink) !important; -webkit-backdrop-filter:none; backdrop-filter:none}
  section:not(.dial-hero):not(.endmarks) p a[href^="http"]::after{content:" (" attr(href) ")"; font-size:.85em; color:var(--faint)}
  .endmarks{break-inside:avoid; border-top:3px double var(--ink); margin-top:8mm; padding-top:6mm !important}
  .endmarks .em-row{align-items:flex-start}
  .endmarks .hallmarks{align-self:flex-start}
  .heat .record{position:static !important; width:auto !important; margin-top:8px; box-shadow:none !important; border-color:var(--line) !important}
  .printed{display:block !important; margin:4mm 0 0; font-family:var(--sans); font-size:8pt; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
  /* printing just the work-order slip */
  html.print-slip body > :not(.slip-print){display:none !important}
  html.print-slip .slip{border:1.5px solid var(--ink) !important; margin:0}
}
@media (max-width:640px){ .heat .record{right:auto; left:0} }

/* stills that aren't John's (lab placeholders) carry no Light Not Light credit */
.not-mine .lnl, .not-mine .lnl-credit{display:none !important}