/*
 * The Hi design: header, drawer, hero cards, video card, work cards, section heads,
 * news band, torn footer with the brick field, story chapters.
 * Night mode is a class on <html>, set before first paint (functions.php), so it never flashes.
 */
/* layout: four pages (home, work, news, story) opened from the side drawer, one shared torch footer.
     The site is one deliberate light look with a black footer, so colours are set outright, not themed. */
  :root {
    --ink:#111; --blue:#4284F5; --yellow:#FFC400; --mist:#E9E9E9; --grey:#c4c4c4; --paper:#dcdad8; --white:#fff; --slate:#2E3A4A; --rule:#d6d6d6;
    --drawer:#5a5a5a;
    --display:"Bricolage Grotesque", "Arial Narrow", Arial, sans-serif; --shout:"Anton", "Arial Narrow", Impact, sans-serif;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  html.lenis, html.lenis body { height:auto; }
  .lenis.lenis-smooth { scroll-behavior:auto !important; }
  body { background-color:var(--white); color:var(--ink); font-family:var(--display);
    background-image:linear-gradient(rgba(46,58,74,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(46,58,74,.075) 1px, transparent 1px); background-size:36px 36px; }
  a { color:inherit; }
  
  main.page { padding-bottom:22vh; }   /* main only: WordPress also puts a page class on the body */                       /* air before the footer tears in */

  /* ---------- chrome ---------- */
  .bar { position:fixed; top:0; left:0; right:0; z-index:60; display:flex; justify-content:flex-end; align-items:center; padding:max(18px, env(safe-area-inset-top, 0px)) 26px 18px; mix-blend-mode:difference; color:#fff; pointer-events:none; }
  /* the mark sits outside the blended bar, so it keeps its blue on every ground */
  .hi-mark { position:fixed; z-index:61; top:calc(max(18px, env(safe-area-inset-top, 0px)) + 12px); left:26px; display:block; line-height:0; }
  .hi-mark img { display:block; height:24px; width:auto; }
  /* The mark is black or white, never a colour: hi.js reads what is behind it and sets .on-dark. */
  .hi-mark .on-dark, .hi-mark.on-dark .on-light { display:none; }
  .hi-mark.on-dark .on-dark { display:block; }
  .hi-mark:focus-visible { outline:2px solid var(--blue); outline-offset:6px; }
  .bar a, .bar button { pointer-events:auto; }
  @keyframes bounce { 0%,60%,100% { transform:translateY(0); } 30% { transform:translateY(-.16em); } }
  .tools { display:flex; align-items:center; gap:22px; }
  /* night mode lives in the drawer, top left, opposite Close */
  .drawer .nightbtn { position:absolute; top:24px; left:clamp(22px, 8vw, 72px); display:flex; align-items:center; gap:10px; font:inherit; font-size:18px; color:#ececec; background:none; border:0; padding:.4rem 0; cursor:pointer; }
  .nightbtn__dot { width:24px; height:24px; border-radius:50%; border:2px solid #ececec; background:linear-gradient(90deg, #ececec 50%, transparent 50%); flex:none; }
  .nightbtn[aria-pressed="true"] .nightbtn__dot { background:linear-gradient(90deg, transparent 50%, #ececec 50%); }
  .drawer .nightbtn:hover { color:var(--yellow); } .drawer .nightbtn:hover .nightbtn__dot { border-color:var(--yellow); }
  .nightbtn:focus-visible { outline:2px solid #fff; outline-offset:6px; }
  /* the menu button sits in its own small bubble; the header blends by difference, so the white bubble reads on any ground and the bars are cut out of it */
  .burger { position:relative; width:58px; height:58px; display:grid; place-content:center; gap:5px; background:none; border:0; cursor:pointer; padding:0; }
  .burger .bub { position:absolute; inset:-4px; width:66px; height:66px; overflow:visible; pointer-events:none; }
  .burger .bub path { fill:#fff; }
  .burger span { position:relative; display:block; width:26px; height:4px; background:#000; border-radius:3px; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
  .burger:hover span:nth-child(2) { transform:translateX(3px); } .burger:hover span:nth-child(4) { transform:translateX(-3px); }
  .burger:focus-visible { outline:2px solid #fff; outline-offset:6px; }
  @media (max-width:700px) { .burger { transform:scale(.72); transform-origin:100% 50%; } }
  /* on a phone the hero starts below the logo and menu button instead of under them */
  /* on a phone the logo and menu sit on a strip of their own that stays at the top while the page scrolls */
  @media (max-width:700px) {
    body { --strip:calc(env(safe-area-inset-top, 0px) + 56px); }
    .bar { height:var(--strip); padding:env(safe-area-inset-top, 0px) 12px 0; }
    .hi-mark { top:calc(env(safe-area-inset-top, 0px) + 16px); left:20px; }
    body::before { content:""; position:fixed; z-index:59; top:0; left:0; right:0; height:var(--strip); background:var(--white); border-bottom:1px solid rgba(0,0,0,.08); pointer-events:none; }
    html.night body::before { background:#0b0b0b; border-bottom-color:rgba(255,255,255,.08); }
  }
  @media (max-width:700px) { main.page > .hcard:first-child { margin-top:var(--strip); } }

  /* ---------- the side drawer ---------- */
  .drawer { position:fixed; inset:0 0 0 auto; width:min(620px, 100%); z-index:90; background-color:var(--drawer);
    background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size:44px 44px; color:#ececec; display:flex; flex-direction:column; visibility:hidden; box-shadow:-30px 0 60px rgba(0,0,0,.25); }
  .drawer.open, .drawer.closing { visibility:visible; }   /* it opens as the bubble, grown out of the menu button (hi.js) */
  .drawer .close { position:absolute; top:24px; right:28px; font:inherit; font-size:20px; color:#ececec; background:none; border:0; cursor:pointer; padding:.4rem .6rem; }
  .drawer .inner { margin:auto 0; padding:0 clamp(28px, 8vw, 72px); }
  .drawer .mark { width:72px; height:58px; display:block; margin-bottom:2.4rem; object-fit:contain; object-position:left center; }
  .drawer nav { display:grid; gap:.1rem; }
  .drawer nav a { font-family:var(--shout); font-size:clamp(44px, 7.4vw, 92px); line-height:1.02; text-transform:uppercase; text-decoration:none; color:#ececec; width:fit-content; transition:color .25s ease, transform .35s cubic-bezier(.2,.8,.2,1), opacity .45s ease; }
  .drawer nav a:hover, .drawer nav a:focus-visible { transform:translateX(14px); }
  /* the links arrive one after another as the bubble opens */
  .drawer.open nav a { animation:hiLinkIn .55s cubic-bezier(.2,.8,.2,1) both; }
  .drawer.open nav a:nth-child(2) { animation-delay:.06s; } .drawer.open nav a:nth-child(3) { animation-delay:.12s; } .drawer.open nav a:nth-child(4) { animation-delay:.18s; } .drawer.open nav a:nth-child(5) { animation-delay:.24s; }
  @keyframes hiLinkIn { from { opacity:0; translate:0 22px; } to { opacity:1; translate:0 0; } }
  @media (prefers-reduced-motion:reduce) { .drawer.open nav a { animation:none; } }
  .drawer nav a:hover, .drawer nav a:focus-visible { color:var(--yellow); outline:none; }
  .drawer nav a[aria-current="page"] { color:#fff; }
  .drawer .links { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; padding:0 clamp(16px, 4vw, 28px) clamp(16px, 4vw, 28px); }
  .drawer .links a, .drawer .links .unlinked { display:grid; justify-items:start; align-content:space-between; gap:14px; min-height:96px; padding:16px; border-radius:12px; background:var(--blue); color:#fff; font-size:17px; font-weight:600; text-decoration:none; transition:background .25s ease, color .25s ease; }
  .drawer .links svg { width:24px; height:24px; display:block; }
  .drawer .links .unlinked { opacity:.55; }
  .drawer .links a:hover, .drawer .links a:focus-visible { background:var(--yellow); color:#111; outline:none; }
  @media (max-width:700px) {
    .drawer { width:min(84vw, 460px); }
    .drawer .inner { padding:0 22px; }
    .drawer .mark { width:56px; height:44px; margin-bottom:1.6rem; }
    .drawer nav a { font-size:clamp(40px, 11.6vw, 60px); }
    .drawer .links { gap:8px; padding:0 14px 22px; }
    .drawer .links a, .drawer .links .unlinked { min-height:104px; padding:14px 12px; font-size:16px; }
    .drawer .links svg { width:28px; height:28px; }
  }
  .scrim { position:fixed; inset:0; z-index:85; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .4s ease; }
  .scrim.on { opacity:1; pointer-events:auto; }

  /* ---------- section header (StrideNote format): title and line on the left, a column of rows on the right ---------- */
  .shead { padding:15vh 5vw 8vh; display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:5vw; align-items:end; }
  .crumbs { font-size:17px; color:#6b7280; margin-bottom:6vh; } .crumbs a { text-decoration:none; } .crumbs span { margin:0 .6em; }
  .shead h2 { font-family:var(--shout); font-size:clamp(64px, 10vw, 160px); font-weight:400; letter-spacing:.005em; line-height:.92; text-transform:uppercase; }
  .shead .lede { margin-top:1.4rem; max-width:30em; font-size:clamp(18px, 1.6vw, 22px); line-height:1.5; color:#5b6472; }
  .rows { border-top:1px solid var(--rule); }
  .rows .row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.15rem 0; border-bottom:1px solid var(--rule); min-height:76px; flex-wrap:wrap; }
  .rows .row > b { font-size:clamp(18px, 1.5vw, 22px); font-weight:600; }
  .rows .row > span { color:#6b7280; font-size:clamp(16px, 1.35vw, 20px); text-align:right; }
  .pill { display:inline-flex; align-items:center; gap:.6rem; border:1.5px solid #9ca3af; border-radius:999px; padding:.65rem 1.3rem; font-size:17px; font-weight:600; text-decoration:none; transition:background .25s ease, color .25s ease, border-color .25s ease; }
  .pill:hover, .pill:focus-visible { background:var(--ink); color:#fff; border-color:var(--ink); outline:none; }
  .icons { display:flex; gap:.55rem; }
  .icons a { width:50px; height:50px; display:grid; place-items:center; border:1.5px solid #9ca3af; border-radius:12px; transition:background .25s ease, color .25s ease, border-color .25s ease; }
  .icons a:hover, .icons a:focus-visible { background:var(--ink); color:#fff; border-color:var(--ink); outline:none; }
  .icons svg { width:22px; height:22px; }
  @media (max-width:860px) { .shead { grid-template-columns:1fr; } }

  /* ---------- the bubble (shared): colour lives inside it ---------- */
  .bub-rim { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; visibility:hidden; }
  .bub-rim path { fill:none; stroke:#fff; stroke-linejoin:round; filter:drop-shadow(0 3px 10px rgba(0,0,0,.25)); }


  /* ---------- the hero cards (approved designs): a far-back wall that tilts with the pointer, you standing still, the bubble ---------- */
  .hcard { position:relative; width:100%; aspect-ratio:16/9; max-width:100%; overflow:hidden; cursor:none; touch-action:pan-y; }
  .hcard.yellow { background:linear-gradient(90deg, #141414 50%, #070707 50%); }
  .hcard.grey, .hcard.anton { background:linear-gradient(90deg, #d6d6d6 50%, #c4c4c4 50%); }
  .hcard .layer { position:absolute; inset:0; will-change:transform; transform-origin:50% 50%; }
  .hcard img { position:absolute; display:block; user-select:none; -webkit-user-drag:none; pointer-events:none; }
  .hcard img.ground { left:0; top:-35%; width:100%; height:170%; }
  .hcard img.txt, .hcard img.subj { inset:0; width:100%; height:100%; }
  .hcard .word { position:absolute; left:0; width:100%; top:49.1%; transform:translateY(-50%); text-align:center; white-space:nowrap; line-height:1;
    font-family:var(--display); font-weight:800; font-stretch:75%; letter-spacing:.01em; }
  .hcard .word .fit { display:inline-block; }
  .hcard .w-l { clip-path:inset(0 50% 0 0); } .hcard .w-r { clip-path:inset(0 0 0 50%); }
  .hcard .small { position:absolute; bottom:4.6%; font-weight:500; white-space:nowrap; }
  .hcard .s-l { left:3.1%; } .hcard .s-r { right:3.1%; }
  .hcard.yellow .small { color:#d9d9d9; } .hcard.grey .small { color:var(--slate); }
  .hcard .reveal { position:absolute; inset:0; background:#fcfcfc; }
  .hcard .hrim { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
  .hcard .hrim path { fill:none; stroke:#fff; stroke-linejoin:round; }
  .hcard img.icon { inset:auto; left:3.1%; bottom:4.6%; top:auto; width:3.2%; height:auto; aspect-ratio:49/38.5; object-fit:contain; }

  /* ---------- hero video card ---------- */
  .vstage { position:relative; width:100%; aspect-ratio:16/9; max-width:100%; overflow:hidden; background:var(--grey); cursor:none; touch-action:pan-y; }
  .vstage canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
  .vstage video { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

  /* ---------- work cards: two panels to a row, joined by the small brush edge ---------- */
  .wrow { display:grid; grid-template-columns:1fr 1fr; position:relative; }
  .wpanel { position:relative; display:block; min-height:min(92vh, 900px); overflow:hidden; text-decoration:none; cursor:none; isolation:isolate; }
  .wpanel.lt { background:linear-gradient(90deg, #d6d6d6, #fafafa); }
  .wpanel.gr { background:var(--grey); }
  .wpanel .fig { position:absolute; left:50%; transform:translateX(-50%); bottom:0; height:94%; width:auto; max-width:none; object-fit:contain; object-position:bottom center; pointer-events:none; z-index:1;
    filter:drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 -5px 0 #fff) grayscale(1) contrast(1.08); }
  .wpanel .lbl { position:absolute; left:clamp(18px, 3vw, 44px); top:clamp(96px, 14vh, 150px); max-width:min(46%, 30em); z-index:0; pointer-events:none; }
  .wpanel h3 { font-family:var(--shout); font-size:clamp(46px, 6.6vw, 124px); font-weight:400; letter-spacing:.005em; line-height:.92; text-transform:uppercase; }
  .wpanel .lbl p { margin-top:.9rem; font-size:clamp(16px, 1.3vw, 20px); font-weight:400; line-height:1.4; opacity:.5; }
  .wpanel.lt h3 { color:var(--blue); } .wpanel.gr h3 { color:var(--ink); }
  .wpanel .reveal { position:absolute; inset:0; background:#fff; visibility:hidden; z-index:3; pointer-events:none; }
  .wpanel .reveal .fig { filter:none; }
  .wpanel.lt .reveal h3 { color:var(--ink); } .wpanel.gr .reveal h3 { color:var(--blue); }
  /* the Art picture keeps its own background: it fills the card, black and white, colour under the bubble; the words sit on it at the bottom */
  .wpanel.bleed .fig { left:0; right:0; top:0; bottom:0; transform:none; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; filter:grayscale(1) contrast(1.05) brightness(.82); }
  .wpanel.bleed .reveal .fig { filter:none; }
  .wpanel.bleed .lbl { z-index:1; }
  .wpanel.bleed .fig.person { z-index:2; }
  .wpanel.shift .lbl { left:calc(clamp(18px, 3vw, 44px) + 80px); }
  .wpanel.bleed h3, .wpanel.bleed .reveal h3, .wpanel.bleed .lbl p, .wpanel.bleed .tiny, .wpanel.bleed .reveal .tiny { color:#fff; }
  /* the Design picture is cut closer and shown larger */
  .wpanel.big .fig { height:100%; max-width:none; left:calc(50% - 70px); }
  /* very small words in front, for interest: heading and subheading always stay behind the picture */
  .wpanel .tiny { position:absolute; left:clamp(18px,3vw,44px); bottom:clamp(16px,3vh,30px); z-index:2; font:300 14px/1.2 var(--display); pointer-events:none; color:#111; opacity:.55; }
  .wpanel.lt .tiny { color:var(--blue); } .wpanel .reveal .tiny { color:#111; }
  /* on a dark scene the headers are yellow: the dark chapter cards, the Art card (a dark photo) and night mode */
  .card.dark h3, .card.warm h3, .card.blk h3 { color:var(--yellow); }
  .wpanel.bleed h3, .wpanel.bleed .reveal h3 { color:var(--yellow); }
  html.night body .shead h2, html.night body .chapters h2, html.night body .portraits .ptitle, html.night body .newsband h2, html.night body .wdetail .list h4 { color:var(--yellow); }
  .wpanel .bub-rim { z-index:4; }
  .wpanel:focus-visible { outline:3px solid var(--blue); outline-offset:-6px; }
  .seam { position:absolute; top:0; height:100%; width:44px; left:calc(50% - 22px); z-index:5; pointer-events:none; }
  .seam path { fill:none; stroke:#fff; stroke-width:8px; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 0 4px rgba(0,0,0,.35)); }
  .wrow > .wpanel.gr { margin-left:-22px; }
  .wrow > .wpanel.lt { margin-right:-22px; }
  @media (max-width:760px) { .wrow { grid-template-columns:1fr; } .seam { display:none; } .wrow > .wpanel.gr { margin-left:0; clip-path:none !important; } .wrow > .wpanel.lt { margin-right:0; } .wpanel { min-height:80vh; } .wpanel .lbl { max-width:60%; } .wpanel .fig { height:70%; } }

  /* ---------- portraits strip: the same tile, one picture each, bubble on hover ---------- */
  .portraits { padding:0 0 14vh; }
  .portraits .ptitle { padding:0 5vw 5vh; font-family:var(--shout); font-size:clamp(44px, 6.4vw, 100px); font-weight:400; letter-spacing:.005em; line-height:.95; text-transform:uppercase; }
  .pgrid { display:grid; grid-template-columns:repeat(3, 1fr); }
  .wpanel.ptile { min-height:0; aspect-ratio:4/5; }
  .wpanel.ptile .fig { height:88%; max-width:92%; right:auto; left:50%; transform:translateX(-50%); object-position:bottom center; }
  @media (max-width:760px) { .pgrid { grid-template-columns:1fr 1fr; } }

  /* ---------- work page ---------- */
  .wdetail { display:grid; grid-template-columns:1fr 1fr; }
  .wdetail .list { background:transparent; padding:clamp(28px, 5vw, 80px); display:flex; flex-direction:column; justify-content:center; gap:1.6rem; }
  .wdetail .list h4 { font-family:var(--shout); font-size:clamp(30px, 3.2vw, 50px); font-weight:400; letter-spacing:.01em; text-transform:uppercase; }
  .wdetail .list ul { list-style:none; display:grid; gap:1rem; }
  .wdetail .list li { font-size:clamp(17px, 1.5vw, 21px); line-height:1.45; color:var(--slate); padding-top:1rem; border-top:1px solid var(--rule); }
  .wdetail .list li b { color:var(--ink); }
  .wdetail.swap .wpanel { order:2; }
  @media (max-width:760px) { .wdetail { grid-template-columns:1fr; } .wdetail.swap .wpanel { order:0; } }

  /* ---------- news page: an empty state until there is news ---------- */
  .empty { margin:0 5vw; padding:12vh 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); display:grid; gap:1rem; }
  .empty b { font-size:clamp(24px, 2.4vw, 34px); font-weight:800; letter-spacing:-.02em; }
  .empty p { font-size:clamp(17px, 1.5vw, 21px); color:#5b6472; max-width:34em; line-height:1.5; }

  /* ---------- story page ---------- */
  .philo { padding:0 5vw 14vh; display:grid; grid-template-columns:1fr 1fr; gap:6vw; }
  .philo .q { font-size:clamp(26px, 2.8vw, 42px); font-weight:800; line-height:1.12; letter-spacing:-.02em; text-wrap:balance; }
  .philo .body p { font-size:clamp(18px, 1.7vw, 23px); line-height:1.55; margin-bottom:1.4rem; max-width:32em; }
  @media (max-width:760px) { .philo { grid-template-columns:1fr; } }
  .chapters { background:var(--paper); padding:14vh 5vw 4vh; }
  .chapters h2 { font-family:var(--shout); font-size:clamp(52px, 8.6vw, 140px); font-weight:400; letter-spacing:.005em; line-height:.95; text-transform:uppercase; }
  .cards { display:grid; grid-template-columns:repeat(3, 1fr); margin:calc(4vh + 44px) 0 14vh; }
  .card { --card:#111; --sheet:#fff; --sheet-ink:#111; background:var(--card); position:relative; padding:2.4rem 1.4rem 1.4rem; display:flex; flex-direction:column; min-height:560px; cursor:pointer; transition:background-color .45s ease, color .45s ease; }
  .card .art { width:70%; max-width:300px; margin:0 auto 1rem; display:block; }
  .card .glow { animation:glowp 3.2s ease-in-out infinite; } @keyframes glowp { 50% { opacity:.72; } }
  .card-tear { position:absolute; left:0; bottom:calc(100% - 1px); width:100%; height:44px; display:block; pointer-events:none; }
  .card-tear .fiber { fill:#fff; } .card-tear .edge { fill:var(--card); }
  .card-tear.foot { bottom:auto; top:calc(100% - 1px); transform:scaleY(-1); }
  .card-tear.foot .edge { transition:fill .45s ease; } .card:hover .card-tear.foot .edge { fill:var(--sheet); }
  .card.dark { --card:#111; color:#f5f3ee; } .card.blue { --card:#A6C8EC; color:#111; } .card.yel { --card:#FFC400; --sheet:#111; --sheet-ink:#f5f3ee; color:#111; }
  .card.warm { --card:#3f3d3a; color:#f5f3ee; } .card.paper { --card:#f5f3ee; --sheet:#111; --sheet-ink:#f5f3ee; color:#111; } .card.blk { --card:#000; color:#f5f3ee; }
  .card h3 { font-family:var(--shout); font-size:clamp(26px, 2.6vw, 38px); font-weight:400; letter-spacing:.01em; line-height:1.05; text-transform:uppercase; }
  .card .sheet { margin:auto -1.4rem -1.4rem; padding:1rem 1.4rem calc(2.6rem + 28px); transition:background-color .45s ease, color .45s ease; }
  .card:hover .sheet, .card:focus-visible .sheet { background:var(--sheet); color:var(--sheet-ink); }
  .card .extra { display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1); }
  .card .extra > div { overflow:hidden; }
  .card:hover .extra, .card:focus-visible .extra { grid-template-rows:1fr; }
  .card .extra p { margin-top:.8rem; font-size:1rem; line-height:1.5; opacity:.85; }
  .card .extra .kick { font-weight:600; font-size:.95rem; opacity:.7; margin-top:1rem; }
  .card:focus-visible { outline:3px solid var(--blue); outline-offset:-6px; }
  @media (max-width:1100px) { .cards { grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:700px) { .cards { grid-template-columns:1fr; } }
  body.on-story main.page { padding-bottom:0; }

  /* ---------- the torch footer: torn in with the same thick white rim as the videos ---------- */
  .tear { display:block; width:100%; height:130px; margin-bottom:-1px; background:transparent; }
  body.on-story .tear { background:var(--paper); }
  .tear .glow { fill:#000; opacity:.22; filter:blur(7px); }   /* a soft shade behind the white rim, so it reads on a white page */
  .tear .fiber { fill:#fff; } .tear .edge { fill:var(--foot, #000); }
  .bottom { background:var(--foot, #000); color:#f5f3ee; padding:0 5vw 4vh; position:relative; overflow:hidden; cursor:none; }
  .bottom a { cursor:none; }
  .giant { position:relative; z-index:1; font-weight:800; letter-spacing:-.03em; line-height:.85; font-size:clamp(76px, 17.5vw, 340px); margin:2vh 0 0 -0.04em; user-select:none; white-space:nowrap; }
  .giant .hi { color:#fff; }   /* HI... is white and still; only the part the light finds is yellow */
  .giant .ghost { background:linear-gradient(180deg, #ffe27a 0%, #FFC400 60%, #c98f00 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .giant .flatwrap { position:relative; display:inline-block; }
  .giant .flat { color:transparent; }   /* LLARY does not show until the pointer lights it */
  @property --rr { syntax:'<length>'; inherits:false; initial-value:190px; }
  .giant .ghost { position:absolute; inset:0; pointer-events:none; clip-path:path('M0 0'); }   /* the lit letters: only inside the bubble shape, set by the script */
  @keyframes ripple { 50% { --rr:245px; } }
  .giant .d3 { display:inline-flex; gap:.06em; margin:0 .06em; }
  .giant .d3 i { width:.158em; height:.12em; border-radius:40% / 50%;   /* the dot of the i in Hi: a soft squircle about 1.3 times wider than tall */ background:#fff; display:block; }
  .giant .d3 i:nth-child(2) { animation-delay:.15s; } .giant .d3 i:nth-child(3) { animation-delay:.3s; }
  #torch { z-index:1; filter:blur(18px); -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 150px); mask-image:linear-gradient(180deg, transparent 0, #000 150px); position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s ease; mix-blend-mode:screen;
    background:none; }
  #torch .tglow { position:absolute; inset:0; background:rgba(255,196,0,.42); visibility:hidden; }
  .bottom:hover #torch { opacity:1; }
  #water { -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 260px); mask-image:linear-gradient(180deg, transparent 0, #000 260px); position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:1; z-index:0; }
  #spark { position:fixed; width:12px; height:12px; border-radius:50%; background:var(--yellow); box-shadow:0 0 18px 6px rgba(255,196,0,.8); pointer-events:none; z-index:95; opacity:0; transform:translate(-50%, -50%); transition:opacity .3s ease; }
  .social { position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); margin-top:5vh; }
  .social a, .social > span { text-decoration:none; padding:1.4rem 1.2rem 1.2rem; display:grid; grid-template-rows:34px auto; align-content:start; row-gap:.9rem; color:#f5f3ee; transition:background .3s ease, color .3s ease; }
  .social > span { opacity:.5; }
  .social a:hover, .social a:focus-visible { background:var(--yellow); color:#111; outline:none; }
  .social svg { width:34px; height:34px; display:block; }
  .social small { font-size:1rem; opacity:.7; font-weight:500; }
  @media (max-width:560px) { .social { grid-template-columns:repeat(2, minmax(0, 1fr)); } .social a, .social > span { padding:1.1rem .4rem 1rem; } .social small { font-size:.95rem; line-height:1.3; } }
  .base { position:relative; z-index:1; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.4vh; font-size:.95rem; color:#8f8c86; }
  .base a { text-decoration:none; margin-left:1.4rem; } .base a:hover { color:#f5f3ee; }
  

  /* ---------- night mode ---------- */
  html.night body { --rule:#2b2b2b; --paper:#161616; --foot:#2E3A4A; background-color:#0b0b0b; color:#f5f3ee;
    background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size:36px 36px; }
  html.night body .crumbs { color:#9ca3af; }
  html.night body .shead .lede, html.night body .wdetail .list li, html.night body .empty p { color:#b8b5ae; }
  html.night body .rows .row > span { color:#9ca3af; }
  html.night body .pill, html.night body .icons a { border-color:#6b7280; }
  html.night body .pill:hover, html.night body .pill:focus-visible, html.night body .icons a:hover, html.night body .icons a:focus-visible { background:#f5f3ee; color:#111; border-color:#f5f3ee; }
  html.night body .wdetail .list { background:transparent; } html.night body .wdetail .list li b { color:#f5f3ee; }
  html.night body .chapters { background:var(--paper); }
  html.night body .tear { background:transparent; } html.night body.on-story .tear { background:var(--paper); }
  html.night body .wpanel.lt { background:linear-gradient(90deg, #1b1b1b, #2a2a2a); }
  html.night body .wpanel.gr { background:#101010; } html.night body .wpanel.gr h3 { color:#f5f3ee; } html.night body .wpanel.gr .reveal h3 { color:var(--blue); }
  html.night body .seam path { fill:#101010; }
  .wpanel .reveal .lbl p { color:var(--ink); }                         /* the bubble is always white, so its text is always dark */
  html.night body .wpanel > .lbl p { color:#f5f3ee; }
  html.night body .empty { border-color:var(--rule); }

  /* ---------- reader for a chapter ---------- */
  #reader { position:fixed; inset:0; z-index:80; transform:translateY(102%); visibility:hidden; transition:transform .7s cubic-bezier(.2,.8,.2,1), visibility 0s linear .7s; }
  #reader.open { transform:none; visibility:visible; transition:transform .7s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s; }
  #reader .tear-top { display:block; width:100%; height:84px; } #reader .tear-top .fiber { fill:#fff; } #reader .tear-top .edge { fill:#f5f3ee; } #reader .tear-top .glow { display:none; }
  #reader .sheetp { background:#f5f3ee; height:calc(100% - 84px); overflow:auto; padding:6vh 6vw 12vh; color:#111; }
  #reader h2 { font-family:var(--shout); text-transform:uppercase; font-size:clamp(46px, 7.4vw, 118px); font-weight:400; letter-spacing:.005em; line-height:.95; margin:.8rem 0 2rem; max-width:14em; }
  #reader p { max-width:38em; font-size:clamp(17px, 1.6vw, 21px); line-height:1.65; margin-bottom:1.4rem; }
  #readerClose { position:absolute; top:calc(84px + 2vh); right:5vw; font:inherit; font-weight:700; background:#111; color:#f5f3ee; border:none; border-radius:999px; padding:.7rem 1.5rem; cursor:pointer; }
  @media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }

  /* news cards, StrideNote card style: Mist ground, 36px grid, blue circle with the subject over it, key words on yellow */
  .newsband { padding:clamp(48px,7vw,96px) clamp(16px,4vw,56px) clamp(140px,18vw,260px); background:transparent; }
  .bandrow + .bandrow { margin-top:clamp(48px,6vw,80px); }
  .bandrow__head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
  .bandrow__head h3 { font-family:var(--shout); font-weight:400; text-transform:uppercase; font-size:clamp(28px,2.8vw,40px); line-height:1; color:var(--ink); }
  .bandrow__head p { font-size:17px; color:var(--slate); opacity:.8; }
  html.night body .bandrow__head h3 { color:var(--yellow); } html.night body .bandrow__head p { color:#b8b5ae; }
  .newsband .nh { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
  .newsband h2 { font-family:var(--shout); font-weight:400; text-transform:uppercase; font-size:clamp(40px,5.4vw,84px); line-height:.95; color:var(--slate); }
  .newsband .all { font:600 16px/1 var(--display); color:var(--ink); text-decoration:none; border:1.5px solid var(--ink); border-radius:999px; padding:12px 20px; }
  .newsband .all:hover, .newsband .all:focus-visible { background:var(--ink); color:#fff; outline:none; }
  .ncards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .ncard { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:clamp(340px,30vw,440px); padding:clamp(20px,2vw,30px); border-radius:18px; overflow:hidden; text-decoration:none; color:var(--slate);
    background-color:var(--mist); transition:transform .25s ease; --mx:0; --my:0; isolation:isolate; }
  /* the grid ground is a layer of its own: it drifts on its own and leans away from the cursor, while the cut-out and text stay steady */
  .ncard::before { content:""; position:absolute; inset:-48px; z-index:-1; pointer-events:none;
    background-image:linear-gradient(rgba(46,58,74,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(46,58,74,.12) 1px,transparent 1px); background-size:36px 36px;
    transform:translate(calc(var(--mx) * -22px), calc(var(--my) * -22px)); transition:transform .35s ease-out; animation:gridDrift 7s linear infinite; }
  @keyframes gridDrift { to { background-position:36px 36px; } }
  @media (prefers-reduced-motion:reduce) { .ncard::before { animation:none; transition:none; } }
  .ncard .sub { position:relative; z-index:2; font:500 16px/1.4 var(--display); color:var(--slate); max-height:0; opacity:0; overflow:hidden; margin-top:0; transform:translateY(10px);
    transition:max-height .35s ease, opacity .3s ease, margin-top .3s ease, transform .35s ease; }
  .ncard:hover .sub, .ncard:focus-visible .sub { max-height:6em; opacity:1; margin-top:12px; transform:none; }
  @media (hover:none) { .ncard .sub { max-height:6em; opacity:1; margin-top:12px; transform:none; } }
  .ncard:hover, .ncard:focus-visible { transform:translateY(-4px); outline:none; }
  .ncard:focus-visible { box-shadow:0 0 0 3px var(--blue); }
  .ncard .kick { font:600 14px/1 var(--display); color:var(--slate-text, #586378); position:relative; z-index:2; }
  .ncard .disc { position:absolute; right:-6%; top:-4%; width:46%; aspect-ratio:1; border-radius:50%; background:var(--blue); overflow:hidden; }
  .ncard .disc img { position:absolute; left:50%; bottom:0; height:112%; transform:translateX(-50%); }
  .ncard h3 { position:relative; z-index:2; font-family:var(--shout); font-weight:400; text-transform:uppercase; font-size:clamp(28px,2.7vw,42px); line-height:1.12; margin-top:auto; padding-top:34%; }
  .ncard h3 mark { background:var(--yellow); color:#111; padding:0 .12em; margin-inline:.05em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
  .ncard .foot { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; font:500 14px/1.2 var(--display); }
  .ncard .lock { display:flex; align-items:center; gap:8px; font-weight:600; }
  .ncard .lock img { width:32px; height:26px; object-fit:contain; }
  html.night body .newsband { background:transparent; } html.night body .newsband h2 { color:#f5f3ee; } html.night body .newsband .all { color:#f5f3ee; border-color:#6b7280; }
  @media (max-width:860px) { .ncards { grid-template-columns:1fr; } .ncard { min-height:340px; } }

  /* --- theme additions --- */
  /* the footer has no ruled lines across it: the social row floats on the black like the rest */
  .hu-skip-link { position:absolute; left:16px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:999px; font:600 16px/1 var(--display); text-decoration:none; }
  .hu-skip-link:focus { top:16px; }
  .ncard .disc.photo img { left:0; top:0; width:100%; height:100%; object-fit:cover; transform:none; }
  .newsband--page { padding-top:0; }
  .hi-pager { display:flex; justify-content:space-between; gap:16px; margin-top:32px; }
  .hi-pager a { font:600 16px/1 var(--display); color:var(--ink); text-decoration:none; border:1.5px solid var(--ink); border-radius:999px; padding:12px 20px; }
  html.night body .hi-pager a { color:#f5f3ee; border-color:#6b7280; }
  .hi-prose { max-width:42em; margin:0 auto; padding:10vh 5vw 4vh; font-size:clamp(18px, 1.6vw, 21px); line-height:1.65; color:var(--slate); }
  .hi-prose > * + * { margin-top:1.2em; }
  .hi-prose h2, .hi-prose h3 { font-family:var(--shout); font-weight:400; text-transform:uppercase; color:var(--ink); line-height:1; }
  .hi-prose h2 { font-size:clamp(36px, 4.4vw, 64px); margin-top:1.6em; } .hi-prose h3 { font-size:clamp(26px, 3vw, 40px); margin-top:1.4em; }
  .hi-prose img { max-width:100%; height:auto; }
  .hi-prose a { color:inherit; }
  html.night body .hi-prose { color:#c9c6c0; } html.night body .hi-prose h2, html.night body .hi-prose h3 { color:var(--yellow); }
  .drawer nav a.hu-drawer__link { display:block; }
  /* art cards: the featured image whole, framed, never cropped into the circle */
  .ncard.whole h3 { padding-top:0; margin-top:16px; }
  .ncard .artframe { position:relative; z-index:2; display:block; margin-top:16px; aspect-ratio:16/9; background:#fff; border-radius:10px; overflow:hidden; }
  .ncard .artframe img { width:100%; height:100%; object-fit:contain; display:block; }