/* Black Knight AI: what every page shares (round 13, 13 Oct 2026).
   1. The frame: the bar at the top and the footer at the bottom. One bar, three tones: clear over a dark opening,
      an ink bar while a dark surface scrolls beneath it, a paper bar over paper. It steps aside on the way down
      and returns on the way up (assets/js/shell.js).
   2. The parts any page may use: the two actions, the closing band, the method board with the Knight on it.
   The colors are its own (--s-*), so these look the same whatever stylesheet the page body uses.
   Loads after the page's older stylesheets on the inner pages, and before home.css on the home page. */
@font-face{font-family:"Newsreader";src:url("/assets/fonts/Newsreader.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/assets/fonts/Newsreader-Italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("/assets/fonts/SchibstedGrotesk.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("/assets/fonts/SchibstedGrotesk-Italic.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}

:root{
  /* Materials carry meaning: lacquer is the stage, gold is ink, bone is people, jade is AI, paper is where you read. */
  --s-lq:#0b1014;--s-lq-2:#10171d;--s-lq-3:#161f27;
  --s-bone:#efe9dc;--s-soft:#c9d0d3;--s-muted:#9ea8ae;--s-dim:#7d888e;
  --s-gold:#d3ad68;--s-gold-deep:#bd903f;--s-gold-ink:#7a5417;
  --s-jade:#4aa998;--s-jade-deep:#226d65;
  --s-paper:#f8f5ee;--s-paper-2:#efe9dc;--s-ink:#14232e;--s-ink-2:#3f4f5a;--s-ink-3:#52616b;
  --s-hair:rgba(239,233,220,.12);--s-hair-2:rgba(239,233,220,.2);--s-rule:rgba(20,35,46,.14);--s-rule-2:rgba(20,35,46,.24);
  --s-display:"Newsreader",Georgia,"Times New Roman",serif;
  --s-text:"Schibsted Grotesk",Arial,Helvetica,sans-serif;
  --s-ease-out:cubic-bezier(.16,1,.3,1);--s-ease-io:cubic-bezier(.65,0,.35,1);
  --s-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --s-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%230b1014' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* the page column: it grows a little on large screens; --u is its inner width */
  --gut:clamp(22px,6vw,86px);--bar:96px;
  --wrap:clamp(1440px,calc(100vw - 180px),1640px);--u:calc(min(100vw,var(--wrap)) - 2 * var(--gut));
  /* the method board: the Knight's height and the floor's depth, in parts of the column */
  --mw:var(--u);--mk:.262;--fd:.1;
}
.wrap{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-left:var(--gut);padding-right:var(--gut)}
.skip{position:absolute;left:20px;top:-80px;padding:12px 16px;background:var(--s-paper);color:var(--s-ink);z-index:80;font-weight:650}
.skip:focus{top:10px}
/* AI-native never breaks at the hyphen (tools/stage_parts.py wraps it) */
.nb{white-space:nowrap}

/* ---------- The bar ---------- */
.site-header{position:absolute;left:0;right:0;top:0;z-index:60;height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:28px;
  font-family:var(--s-text);line-height:1.6;color:var(--s-bone);transition:transform .5s var(--s-ease-out),height .3s var(--s-ease-out)}
html.js .site-header{position:fixed}
.site-header::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;z-index:-1;background-color:rgba(11,16,20,.9);box-shadow:0 1px 0 var(--s-hair);opacity:0;transition:opacity .3s,background-color .3s,box-shadow .3s}
.site-header a{color:inherit;text-decoration:none}
.sh-brand{position:relative;display:block;flex-shrink:0}
.sh-brand img{display:block;height:31px;width:auto;max-width:none;transition:opacity .3s}
.sh-brand .on-light{position:absolute;left:0;top:0;opacity:0}
.sh-nav{display:flex;align-items:center;gap:36px;font-size:14.5px;font-weight:500;letter-spacing:.005em}
.sh-nav a{display:flex;align-items:center;min-height:44px;color:var(--s-soft);transition:color .2s}
.sh-nav a:not(.sh-cta){background:linear-gradient(var(--s-gold),var(--s-gold)) 0 calc(100% - 9px)/0 1px no-repeat;transition:color .2s,background-size .3s var(--s-ease-out)}
.sh-nav a:not(.sh-cta):hover,.sh-nav a[aria-current=page]:not(.sh-cta){color:var(--s-bone);background-size:100% 1px}
.sh-nav a.sh-cta{padding:0 20px;color:var(--s-bone);box-shadow:inset 0 0 0 1px rgba(239,233,220,.34);transition:background-color .2s,color .2s,box-shadow .2s}
.sh-nav a.sh-cta:hover{background:var(--s-bone);color:var(--s-ink);box-shadow:inset 0 0 0 1px var(--s-bone)}
.sh-menu{display:none;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.site-header :focus-visible{outline:2px solid var(--s-gold);outline-offset:4px}
/* a bar only when something scrolls beneath it: ink over a dark surface, paper once you are reading */
.site-header.is-ink,.site-header.is-paper{height:72px}
.site-header.is-ink::before{opacity:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.site-header.is-paper{color:var(--s-ink)}
.site-header.is-paper::before{opacity:1;background-color:rgba(248,245,238,.965);box-shadow:0 1px 0 var(--s-rule);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.site-header.is-paper .on-dark{opacity:0}
.site-header.is-paper .on-light{opacity:1}
.site-header.is-paper .sh-nav a{color:var(--s-ink-2)}
.site-header.is-paper .sh-nav a:not(.sh-cta):hover,.site-header.is-paper .sh-nav a[aria-current=page]:not(.sh-cta){color:var(--s-ink)}
.site-header.is-paper .sh-nav a.sh-cta{background:var(--s-ink);color:var(--s-paper);box-shadow:none}
.site-header.is-paper .sh-nav a.sh-cta:hover{background:#21394a}
.site-header.is-paper :focus-visible{outline-color:var(--s-ink)}
.site-header.is-away{transform:translateY(-110%)}

/* ---------- The footer: lacquer on every page ---------- */
.site-footer{padding:54px 0 40px;background:var(--s-lq);color:var(--s-soft);font-family:var(--s-text);line-height:1.6}
.site-footer a{color:inherit;text-decoration:none}
.sf-top,.sf-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px}
.sf-brand{display:block}
.sf-brand img{display:block;height:29px;width:auto;max-width:none}
.sf-top p{margin:0;font-family:var(--s-display);font-style:italic;font-size:21px;line-height:1.6;letter-spacing:-.01em;color:var(--s-bone)}
.sf-bottom{margin-top:40px;padding-top:22px;box-shadow:inset 0 1px 0 var(--s-hair);font-size:13.5px;color:var(--s-muted)}
.sf-bottom nav{display:flex;flex-wrap:wrap;gap:6px 26px}
.sf-bottom nav a{display:inline-flex;align-items:center;min-height:36px;transition:color .2s}
.sf-bottom nav a:hover,.sf-bottom nav a[aria-current=page]{color:var(--s-bone)}
.site-footer :focus-visible{outline:2px solid var(--s-gold);outline-offset:4px}

/* ---------- Actions: one gold button, one underlined link ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;white-space:nowrap;border:0;text-decoration:none;font-family:var(--s-text);line-height:1.3;background:var(--s-gold);color:var(--s-ink);font-size:15px;font-weight:650;letter-spacing:-.003em;transition:background-color .2s,transform .2s var(--s-ease-out)}
.btn:hover{background:#e2c183}
.btn:active{transform:translateY(1px)}
.btn.dark{background:var(--s-ink);color:var(--s-paper)}
.btn.dark:hover{background:#21394a}
.lnk{display:inline-block;font-family:var(--s-text);font-size:15px;font-weight:650;line-height:1.4;padding:4px 0 6px;color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .25s var(--s-ease-out),color .2s}
.lnk:hover{background-size:100% 2px}

/* ---------- The closing band: every page ends on gold ---------- */
.close{background:#dfc18a;color:var(--s-ink);padding:clamp(72px,9vw,128px) 0;font-family:var(--s-text)}
.close-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:36px 60px}
.close-acts{display:flex;align-items:center;flex-wrap:wrap;gap:20px 30px;padding-bottom:.6em}
.close .lnk{font-size:16px}
.close :focus-visible{outline:2px solid var(--s-ink);outline-offset:4px}
.close h2{margin:0;font-family:var(--s-display);font-weight:500;font-optical-sizing:auto;font-size:clamp(38px,5.4vw,80px);line-height:1;letter-spacing:-.028em;color:var(--s-ink);text-wrap:balance}

/* ---------- The method board: four squares seen from the front. The Knight stands on the step you point at. ---------- */
.m-board{position:relative;height:calc(var(--mw) * (var(--mk) + var(--fd) * .46));margin-top:clamp(4px,1vw,16px)}
.m-floor{position:absolute;left:0;bottom:0;width:100%;height:calc(var(--mw) * var(--fd));overflow:visible}
.m-tile polygon{fill:#141c23;transition:fill .5s}
.m-tile:nth-of-type(even) polygon{fill:#1b262e}
.m-tile path{fill:none;stroke:rgba(239,233,220,.22);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .5s}
.m-tile.is-on polygon{fill:#3b3526}
.m-tile.is-on path{stroke:var(--s-gold);stroke-width:2}
html.js .m-tile{cursor:pointer}
.m-far{fill:url(#m-far);pointer-events:none}
.m-edge{fill:#070a0d}
.m-set{position:absolute;left:17%;bottom:calc(var(--mw) * var(--fd) * .46);height:calc(var(--mw) * var(--mk));aspect-ratio:684/1174;transform:translateX(-50%);pointer-events:none}
.m-x,.m-y{position:absolute;inset:0;will-change:transform}
/* the light follows the piece */
.m-x::before{content:'';position:absolute;left:50%;top:46%;width:420%;height:190%;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(closest-side,rgba(206,212,215,.15),rgba(201,208,211,.06) 48%,transparent 100%)}
.m-y picture{display:block;height:100%}
.m-y img{display:block;width:100%;height:100%;max-width:none;filter:drop-shadow(0 18px 20px rgba(0,0,0,.5))}
.m-shadow{position:absolute;left:-5%;right:-5%;bottom:-4.5%;height:10.5%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.95),rgba(0,0,0,0) 70%)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:clamp(20px,2.2vw,30px) 0 0;padding:0}
.step{position:relative;padding-right:clamp(16px,2.4vw,36px);cursor:default}
.step h3,.step h2{margin:0;font-family:var(--s-display);font-weight:500;font-optical-sizing:auto;font-size:clamp(27px,2.7vw,39px);line-height:1.08;letter-spacing:-.024em;color:var(--s-soft);transition:color .35s}
.step-n{display:block;margin-bottom:9px;font-size:15px;line-height:1;letter-spacing:.04em;color:var(--s-gold)}
.step-s{margin:10px 0 0;font-size:16.5px;font-weight:650;line-height:1.4;color:var(--s-soft);transition:color .35s}
.step.is-on h3,.step.is-on h2,.step.is-on .step-s{color:var(--s-bone)}
.step-b{margin:8px 0 0;font-size:15.5px;line-height:1.6;color:var(--s-muted)}
.step-tag{margin:12px 0 0;font-size:13.5px;line-height:1.45;font-weight:600;color:var(--s-jade)}

@media(min-width:1500px){:root{--gut:85px}}
@media(max-height:780px) and (min-width:901px){:root{--bar:80px}}
@media(max-width:1180px) and (min-width:901px){.sh-nav{gap:24px}}
@media(max-width:900px){
  :root{--bar:68px}
  .sh-brand img{height:23px}
  .site-header.is-ink,.site-header.is-paper{height:60px}
  /* the menu covers the page */
  .sh-nav{position:fixed;inset:0;z-index:-2;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:var(--bar) var(--gut) 40px;background:var(--s-lq);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
  .sh-nav.open{opacity:1;visibility:visible;transition-delay:0s}
  .sh-nav a,.site-header.is-paper .sh-nav a{min-height:58px;font-family:var(--s-display);font-size:34px;line-height:1.15;letter-spacing:-.02em;color:var(--s-bone);background:none}
  .sh-nav a.sh-cta,.site-header.is-paper .sh-nav a.sh-cta{margin-top:22px;min-height:56px;padding:0 28px;font-family:var(--s-text);font-size:15px;font-weight:650;letter-spacing:0;background:var(--s-gold);color:var(--s-ink);box-shadow:none}
  .sh-menu{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 0 0 12px;background:none;border:0;font-size:14.5px;font-weight:600;color:inherit}
  .sh-menu span{display:inline-block;width:12px;text-align:center}
  html.menu-open{overflow:hidden}
  html.menu-open .site-header{color:var(--s-bone);transform:none}
  html.menu-open .site-header::before{opacity:0}
  html.menu-open .site-header .on-dark{opacity:1}
  html.menu-open .site-header .on-light{opacity:0}
  html.menu-open .site-header :focus-visible{outline-color:var(--s-gold)}
  html.menu-open .site-header .sh-nav a:not(.sh-cta),html.menu-open .site-header .sh-nav a[aria-current=page]:not(.sh-cta),html.menu-open .site-header .sh-nav a:not(.sh-cta):hover{color:var(--s-bone)}
  /* without script there is no menu to open: the links sit under the wordmark, on a bar of their own */
  html:not(.js) .site-header{position:relative;height:auto;flex-wrap:wrap;gap:0 20px;padding-top:16px;padding-bottom:6px;background:var(--s-lq);color:var(--s-bone)}
  html:not(.js) .site-header .on-dark{opacity:1}
  html:not(.js) .site-header .on-light{opacity:0}
  html:not(.js) .sh-nav{position:static;z-index:auto;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:0 18px;width:100%;padding:0;background:none;opacity:1;visibility:visible}
  html:not(.js) .sh-nav a,html:not(.js) .sh-nav a.sh-cta{min-height:44px;margin:0;padding:0;font-family:var(--s-text);font-size:14.5px;font-weight:500;letter-spacing:0;color:var(--s-soft);background:none}
  html:not(.js) .sh-menu{display:none}
}
@media(max-width:760px){
  :root{--mk:.43;--fd:.17}
  .steps{grid-template-columns:minmax(0,1fr);margin-top:6px}
  .step{padding:22px 0 24px 46px;box-shadow:inset 0 1px 0 var(--s-hair)}
  .step-n{position:absolute;left:2px;top:33px;margin:0}
}
@media(max-width:640px){
  .sf-bottom{flex-direction:column;align-items:flex-start}
  .close h2 br{display:none}
  .close-acts{width:100%}
  .close-acts .btn{flex:1 0 auto}
}
@media print{
  .site-header{position:static;height:auto;padding-top:0;padding-bottom:0;color:#000}
  .site-header::before,.sh-nav,.sh-menu,.sf-bottom nav,.skip{display:none!important}
  .site-header .on-dark{opacity:0}
  .site-header .on-light{position:static;opacity:1}
  .sh-brand .on-dark{position:absolute}
  .site-footer{padding:16px 0;background:none;color:#000}
  .sf-brand{display:none}
  .sf-top p{color:#000;font-size:12px}
  .sf-bottom{margin-top:8px;padding-top:8px;color:#000}
}