/* ============================================================================
   SITE — the chrome every page shares: tokens, base, the header, the multiply
   pill, the word arrival, the footer. Moved out of index.html on 2026-08-28 when
   the Work page arrived; the rules are the homepage's, unchanged. Page-specific
   styling stays in each page's own <style>.
   ========================================================================== */
  /* the two faces are served from the site (2026-10-15): the Fontshare and Google @imports were a
     chain — page → this sheet → their CSS → the files — that held the first paint on a phone.
     Same faces (Fontshare's Tanker and General Sans, as woff2); the Geist and Anton fallbacks
     are no longer fetched — the local files are always there */
  @font-face{font-family:'Tanker';src:url(assets/fonts/Tanker-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;}
  @font-face{font-family:'General Sans';src:url(assets/fonts/GeneralSans-Variable.woff2) format('woff2');font-weight:200 700;font-style:normal;font-display:swap;}
  :root{
    --bg:#FCFBF8; --red:#F61515; --black:#000000;
    --green:#34C759; --blue:#007AFF; --purple:#AF52DE;   /* the footer chips (Figma Colors/…) */
    --margin:max(40px, calc((100vw - 1620px) / 2));   /* the page's side margin (Figma 40); content never wider than 1620 — full-bleed grounds and pictures still stretch (Markiian, 2026-10-16) */
    /* the two easings that carry shopify.design's intro, decoded verbatim */
    --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
    --ease-in-out-quint:cubic-bezier(0.83,0,0.17,1);
    /* THE SCORE — every arrival delay in one place. JS fills the ones that
       depend on how many words there are (rise, header, logos, card). */
    --logo-pace:1.05s;      /* black seed → capsule → wordmark */
    --words-per-seed:2;     /* a couple of words come out of each dot (shopify: 1) */
    --word-stagger:.12s;    /* shopify: one group every .12s, numbered across both lines */
    --word-reveal:.8s;      /* shopify: 1s per word; a beat shorter for the pairs */
    --burst-after:1s;       /* the burst fires this long after the last words land */
    --furniture-after:.1s;  /* header, client row, first case follow the last words at once */
    --cycle-every:1.6s;     /* the last word swaps this often, from its own seed */
    --header-delay:3s;      /* set by JS: burst + furniture */
    --card-delay:3s;        /* set by JS: burst + furniture */
    --logo-delay:3.1s;      /* set by JS: burst + furniture + .1 */
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  ::selection{background:var(--red);color:#fff;}
  html,body{background:var(--bg);}
  body{font-family:'Tanker','Anton',sans-serif;color:var(--black);overflow-x:hidden;}
  a{color:inherit;}
  img,video{display:block;}

  /* ============ header — one centred group (Figma 279-2431) ============
     Logo pill, the tab strip and the Contact button sit in one row that is
     centred as a whole, rather than logo-left / actions-right. */
  header{
    position:fixed;top:0;left:0;right:0;z-index:40;
    display:flex;align-items:center;justify-content:center;
    padding:10px var(--margin);
  }
  .brand{display:flex;align-items:center;}
  .logo{
    width:80px;height:40px;border-radius:45px;background:var(--red);
    display:flex;align-items:center;justify-content:center;flex:none;
  }
  .logo img{width:58px;height:32px;}
  /* The strip carries the white-10% + blur 8 and the tabs sit transparent on it.
     Per-tab blur regions rendered with hairline seams between chips (each chip is
     its own backdrop sample); one blurred strip has no seams and reads identically. */
  .menu{
    display:flex;align-items:center;height:40px;
    background:rgba(255,255,255,0.1);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);   /* Figma: background blur 8 */
  }
  /* the tabs and the Contact button are Tanker 15 (Figma 469-3542, 2026-09-07 — Markiian: "update
     the header"), named here because sans.css hands the body to General Sans */
  .menu a{
    display:flex;align-items:center;justify-content:center;height:40px;padding:0 10px;
    font-family:'Tanker','Anton',sans-serif;font-weight:400;
    font-size:15px;letter-spacing:.01em;line-height:1.2;
    color:var(--black);text-decoration:none;white-space:nowrap;
    transition:background-color .15s ease;
  }
  .menu a:first-child{padding-left:20px;}
  .menu a:last-child{padding-right:20px;}
  .menu a:hover,.menu a:focus-visible,.menu a[aria-current="page"]{background:rgba(0,0,0,0.1);}
  /* over a dark ground (site-footer.js sets it as the page scrolls): white tabs on a white 10 % chip */
  header.on-dark .menu a{color:#fff;}
  header.on-dark .menu a:hover,header.on-dark .menu a:focus-visible,header.on-dark .menu a[aria-current="page"]{background:rgba(255,255,255,.12);}
  .menu a{transition:background-color .15s ease,color .2s ease;}
  /* ============ Button — ONE component (Figma "Frame 28762", 2026-09-08) ============
     Markiian: "make sure that we use same button components in particular places … there should
     not be many components … when the button is the same but it's different colors, it's not a
     different button, it's a different state of a button." So: Tanker, no radius, the lab's
     multiply label (v2) — the label you read on the button's own ground and two ghosts behind it;
     on hover the label swells 1.06 while the ghosts slide 9 up and 9 down out from under it, on the
     overshooting swing. Two sizes: S (40 tall, 12 pad, Tanker 15) — the header; L (48 tall, 20 pad,
     Tanker 20) — the invite band, Home's About. Four tones are STATES, not other buttons:
     ink (black, hovers red), red (the dark page's header; hovers white), paper (white with red
     type, the CTA on the red band; its colours never change — "we don't do that"), light (white
     with black type on the mosaic; hovers red). No rounded corners anywhere. */
  .btn{
    --btn-bg:var(--black);--btn-fg:#fff;
    --mb-dur:.3s;--mb-swing:cubic-bezier(.175,.885,.32,1.275);--mb-move:9px;--mb-scale:1.06;
    position:relative;overflow:hidden;box-sizing:border-box;
    height:40px;padding:0 12px;background:var(--btn-bg);color:var(--btn-fg);
    display:inline-flex;align-items:center;justify-content:center;
    font-family:'Tanker','Anton',sans-serif;font-weight:400;font-size:15px;line-height:1.2;letter-spacing:.01em;white-space:nowrap;
    text-decoration:none;border:0;border-radius:0;cursor:pointer;transition:background-color .2s ease,color .2s ease;
  }
  .btn--l{height:48px;padding:0 20px;font-size:20px;}
  .btn--xs{height:24px;padding:0 12px;font-size:15px;--mb-move:6px;}   /* the hint card's View work (Figma 518-3213, 2026-09-12): 24 tall, the S type, a shorter swing */
  .btn:hover,.btn:focus-visible{--btn-bg:var(--red);}
  .btn--red{--btn-bg:var(--red);}
  .btn--red:hover,.btn--red:focus-visible{--btn-bg:#fff;--btn-fg:var(--black);}
  .btn--paper,.btn--paper:hover,.btn--paper:focus-visible{--btn-bg:#fff;--btn-fg:var(--red);}
  .btn--grey{--btn-bg:#2C2C2C;--btn-fg:#fff;}   /* the hint card's View work examples (Figma 518-3213, third cut): the card's line grey, white type */
  .btn--grey:hover,.btn--grey:focus-visible{--btn-bg:#fff;--btn-fg:#151515;}   /* Markiian: "it should be just white, just the label behaves" — no red here */
  .btn--light{--btn-bg:#fff;--btn-fg:var(--black);}
  .btn--light:hover,.btn--light:focus-visible{--btn-bg:var(--red);--btn-fg:#fff;}
  .btn--mute{--btn-bg:color-mix(in srgb,#000 var(--btn-mute-a,5%),var(--btn-ground,#fff));--btn-fg:var(--black);}   /* the cases' Hide (Daisy Figma 1039:31655): black at --btn-mute-a over the section's --btn-ground, mixed opaque so the label layers don't show through; hovers red */
  .btn--mute:hover,.btn--mute:focus-visible{--btn-bg:var(--red);--btn-fg:#fff;}
  .btn:focus-visible{outline:2px solid var(--btn-bg);outline-offset:3px;}
  .btn .btn-t{position:relative;z-index:2;background:var(--btn-bg);color:var(--btn-fg);line-height:1;transition:transform var(--mb-dur) var(--mb-swing),background-color .2s ease,color .2s ease;}
  .btn .btn-l{position:absolute;left:0;right:0;top:50%;z-index:1;text-align:center;color:var(--btn-fg);background:var(--btn-bg);line-height:1;transform:translateY(-50%);transition:transform var(--mb-dur) var(--mb-swing),background-color .2s ease,color .2s ease;}
  .btn .btn-l2{z-index:0;}
  .btn:hover .btn-t,.btn:focus-visible .btn-t{transform:scale(var(--mb-scale));}
  .btn:hover .btn-l1,.btn:focus-visible .btn-l1{transform:translateY(calc(-50% - var(--mb-move)));}
  .btn:hover .btn-l2,.btn:focus-visible .btn-l2{transform:translateY(calc(-50% + var(--mb-move)));}
  @media (prefers-reduced-motion:reduce){
    .btn .btn-t,.btn .btn-l{transition:background-color .2s ease,color .2s ease;}
    .btn:hover .btn-t{transform:none;}
    .btn:hover .btn-l1,.btn:hover .btn-l2{transform:translateY(-50%);}
  }
  /* the focus ring is for the keyboard: after a pointer press it stays off (contact-copy.js sets html.mouse) */
  html.mouse .btn:focus-visible{outline:none;}
  /* ---- the contact state (Figma 495-16475 / 495-15506): the message cell — "Send us a message" at 50 %,
     the address — Tanker 15 / 18 on black 10 %, 20 pad, 8 gap. In the header it sits over the tabs
     inside the same strip. ---- */
  .menu{position:relative;}
  /* Markiian (2026-09-08): "We don't need any kind of animation like this. What we need when I hit
     contact is this middle section is opacity is higher so it's grayish and then the text appears.
     That's it. And it should be pretty fast. No moving." So: the tabs drop out (120 ms), the cell's
     black 10 % greys the strip and its text appears (160 ms). Nothing travels. */
  .menu a:not(.contact-cell){transition:background-color .15s ease,opacity .12s ease,visibility 0s linear 0s;}
  .menu.is-contact a:not(.contact-cell){opacity:0;visibility:hidden;pointer-events:none;transition:background-color .15s ease,opacity .12s ease,visibility 0s linear .12s;}
  .menu a.contact-cell,.menu a.contact-cell:hover,.menu a.contact-cell:focus-visible{position:absolute;inset:0;padding:0 20px;gap:8px;line-height:18px;background:rgba(0,0,0,.1);opacity:0;transition:opacity .16s ease .06s;}
  .menu.is-contact a.contact-cell{opacity:1;}
  /* the strip fits the message (2026-10-16, Markiian: "when I hit contact it doesn't fit — extend the middle part"): with three
     tabs the strip is narrower than "Send us a message  mark@supermega.design", so in the contact state the tabs leave the
     layout and the cell, no longer laid over them, sets the strip's width */
  .menu.is-contact a:not(.contact-cell){display:none;}
  .menu.is-contact a.contact-cell{position:static;inset:auto;display:flex;align-items:center;white-space:nowrap;height:40px;}
  @media (max-width:640px){
    .menu.is-contact a.contact-cell{padding:0 12px;font-size:13px;}
    .menu.is-contact .contact-cell-k{display:none;}   /* a phone: the address alone beside Copy */
  }
  .contact-cell-k{opacity:.5;}
  .contact-cell:focus-visible{outline:2px solid currentColor;outline-offset:-2px;}
  .sr-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  @media (prefers-reduced-motion:reduce){
    .menu a:not(.contact-cell),.menu.is-contact a:not(.contact-cell),.menu a.contact-cell{transition:none;}
  }


  /* on a warm arrival the header is never hidden, not even for the parse — it holds still through the transition */
  html.smd-warm .loading header{opacity:1;animation:none;}
  /* ============ arriving from inside the site: no arrival ============
     Moving between our own pages the page arrives at rest and the page transition
     (transitions.css/js, mouthwash's fade-out · beat · fade-in) brings it in; the
     seeds, the word reveal and the burst are for landing here from outside. */
  /* `body.mellow …` outranks `.wr.revealed .wr-text` below, which would otherwise still pop the words */
  /* …except the cycling word (`.wr-cycle`): each new word still comes out of its seed
     (Markiian: "keep the previous version where it's kind of appearing nicely") */
  body.mellow .wr:not(.wr-cycle) .wr-text,body.mellow .wr.revealed:not(.wr-cycle) .wr-text{animation:none;color:inherit;transform:none;translate:none;}
  body.mellow .wr:not(.wr-cycle) .wr-text::before,body.mellow .wr.revealed:not(.wr-cycle) .wr-text::before{display:none;animation:none;}

  /* ============ THE ARRIVAL — the words (shared by every page that has a headline) ============ */
  .loading [data-reveal="headline"]{visibility:hidden;}
  .loading [data-reveal="headline"] .wr{visibility:visible;}
  .loading .wr.revealed .wr-text,.loading .wr.revealed .wr-text::before{animation-play-state:paused;}
  /* the words — shopify's `wr`, decoded constants; the seed takes the line's ink */
  .line[data-reveal]{--side-bearing:-0.08em;margin-left:var(--side-bearing);user-select:none;}
  .wr{display:inline-block;position:relative;}
  .wr .wr-text{display:inline-block;color:transparent;}
  /* the swapping word's slot is fixed at the longest word's width (set in index.html),
     so the centred line never changes width and its start never moves */
  .wr-cycle{white-space:nowrap;text-align:left;}
  .wr[data-side="left"] .wr-text{transform-origin:left bottom;}
  .wr[data-side="right"] .wr-text{transform-origin:right bottom;}
  .wr .wr-text::before{
    content:"";position:absolute;width:.12em;height:.12em;bottom:.02em;
    background:var(--seed,currentColor);visibility:hidden;scale:1;
  }
  .line.black{--seed:var(--black);}
  .line.red{--seed:var(--red);}
  .wr[data-side="left"] .wr-text::before{right:100%;transform-origin:right bottom;}
  .wr[data-side="right"] .wr-text::before{left:calc(100% + .06em);transform-origin:left bottom;}
  .wr[data-shape="circle"] .wr-text::before{border-radius:50%;}
  .wr.revealed .wr-text::before{animation:wr-shape var(--word-reveal) step-end var(--wr-delay,0s) both;}
  .wr.revealed .wr-text{
    animation:wr-text var(--word-reveal) step-end var(--wr-delay,0s) forwards,
              wr-drift .25s ease-out calc(var(--wr-delay,0s) + .55s) both;
  }
  /* seed: pops in, grows 1 → 1.5 → 2, holds, gone at 55% */
  @keyframes wr-shape{
    0%{visibility:hidden;scale:1;}
    0.5%{visibility:visible;scale:1;}
    15%{visibility:visible;scale:1.5;}
    30%{visibility:visible;scale:2;}
    45%{visibility:visible;scale:2;}
    55%{visibility:hidden;scale:0;}
  }
  /* word: invisible and small until beat 2, then coloured at .35, .65, 1 — one beat behind */
  @keyframes wr-text{
    0%{color:transparent;transform:scale(.35);}
    15%{color:transparent;transform:scale(.35);}
    30%{color:inherit;transform:scale(.35);}
    45%{color:inherit;transform:scale(.65);}
    55%{color:inherit;transform:scale(1);}
    to{color:inherit;transform:scale(1);}
  }
  /* the settle — the only eased motion in the effect */
  @keyframes wr-drift{
    0%{translate:calc(var(--wr-drift-dir,-1) * .08em) 0;}
    to{translate:0 0;}
  }


  @media (prefers-reduced-motion:reduce){
    .wr .wr-text{animation:none;color:inherit;transform:none;}
    .wr .wr-text::before{display:none;}
    .loading [data-reveal="headline"]{visibility:visible;}
  }

  /* ============ footer (Figma 463-1530, 2026-09-07) ============
     Two columns inside the margins, 40 apart, 400 from the end of the last section (the
     beat kept from the first footer, Markiian 2026-08-29): on the left the copyright at
     the column's top and Privacy / Terms at its foot, both at 20 %; on the right the nav
     as a stack of tabs (General Sans 20 / 125% on an 8/10 pad), then the social links 40
     under. 80 below, the mark's outline — SMD 26 — the width of the margins, at 20 %.
     Light by default (the page's ink); `.dark` on a dark page (white ink, the tabs' tint
     swapped). The first footer — statement, contact boxes, painted mark — is in git. */
  footer.site-footer{display:flex;flex-direction:column;align-items:center;gap:80px;width:100%;padding:400px 0 40px;   /* 40 under the mark (Markiian, 2026-09-07) */color:var(--black);font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:20px;letter-spacing:.01em;}
  footer.site-footer.dark{color:#fff;}
  .foot-cols{display:flex;gap:40px;align-items:stretch;width:100%;padding:0 var(--margin);box-sizing:border-box;}
  .foot-cols>*{flex:1 1 0;min-width:0;}
  /* the 20 % sits on the items, not the column, so a link can come up to full on hover — and it
     only comes up, it never changes colour (Markiian, 2026-09-07) */
  .foot-meta{display:flex;flex-direction:column;justify-content:space-between;padding-top:8px;line-height:1;}
  .foot-meta p,.foot-legal a{opacity:.2;transition:opacity .15s ease;}
  .foot-legal a:hover,.foot-legal a:focus-visible{opacity:1;outline:none;}
  .foot-meta p{margin:0;white-space:nowrap;}
  .foot-legal{display:flex;gap:20px;}
  .foot-links{display:flex;flex-direction:column;gap:40px;align-items:flex-start;}
  /* the tabs: every one as wide as the longest (one grid column sized to its content), the
     highlight hugging the word on its 8/10 pad — the first footer's hover, standardized */
  .foot-nav{display:grid;grid-template-columns:max-content;justify-content:start;align-content:start;}
  .foot-nav a{display:flex;align-items:center;justify-content:flex-start;line-height:1.25;text-decoration:none;white-space:nowrap;color:inherit;}
  .foot-nav a span{padding:8px 10px;background:rgba(255,255,255,.1);transition:background-color .15s ease;}
  .foot-nav a:last-child span{padding-right:20px;}   /* the frame's last tab */
  .foot-nav a:hover span,.foot-nav a:focus-visible span{background:rgba(0,0,0,.05);}
  .foot-nav a:focus-visible{outline:none;}
  .foot-nav a.foot-ext span{display:inline-flex;align-items:center;gap:3px;}   /* Experiments: same ↗ as the header tab, no movement on hover */
  .foot-nav a.foot-ext svg{width:.78em;height:.78em;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;transform:translateY(-.04em);}
  .dark .foot-nav a span{background:rgba(0,0,0,.1);}
  .dark .foot-nav a:hover span,.dark .foot-nav a:focus-visible span{background:rgba(255,255,255,.1);}
  /* the social links take the tabs' hover — the tint on an 8/10 pad (Markiian, 2026-09-07: "selected
     similar to the footer menu"); the boxes start where the tabs' boxes start, so the words line
     up with the tabs' words on the same 10 inset (Markiian: "aligned properly too") — the vertical
     pad is pulled back, so the row stays on the legal line; the words keep their 20 apart */
  .foot-social{display:flex;gap:0;line-height:1;margin:-8px 0;}
  .foot-social a{padding:8px 10px;transition:background-color .15s ease;}
  .foot-social a:hover,.foot-social a:focus-visible{background:rgba(0,0,0,.05);outline:none;}
  .dark .foot-social a:hover,.dark .foot-social a:focus-visible{background:rgba(255,255,255,.1);}
  footer.site-footer a{color:inherit;text-decoration:none;}
  /* the outline is the frame's export cut as a MASK and filled with the footer's ink: an SVG
     in an <img> has no page colour (currentColor there is black — the dark footer's mark
     vanished, 2026-09-07), a mask takes whatever colour the footer is. 20 %, as the frame. */
  .foot-art{display:flow-root;width:100%;padding:0 var(--margin);box-sizing:border-box;opacity:.2;line-height:0;}   /* flow-root: the mark's negative margins stay inside */
  /* brushed (Markiian, 2026-10-02: "the outline of the logo but in this style … kind of brushed
     outline", the invite band's stamp): the same lines painted once by p5.brush's pen
     (_ref/footer-brush/make.mjs → assets/footer-art-brushed.png). The painting carries 12 mark
     units of margin on every side for the hand's drift, so the box runs 1384 wide and is pulled
     back by 12 / 1360 of the column: the mark itself lands exactly where the outline was. */
  .foot-mark{display:block;width:calc(100% * 1384 / 1360);margin:calc(-100% * 12 / 1360);aspect-ratio:1384/426.333;background:currentColor;-webkit-mask:url(assets/footer-art-brushed.png) 0 0/100% 100% no-repeat;mask:url(assets/footer-art-brushed.png) 0 0/100% 100% no-repeat;}
  .foot-stage{position:relative;width:100%;}
  /* the easter egg (footer-egg.js, 2026-10-07): the stage runs on for --egg-px past the outline,
     which sticks with its foot 40 above the screen's while the egg plays over it */
  .foot-stage.has-egg{height:calc(var(--egg-art-h,400px) + 40px + var(--egg-px,240vh));}
  .foot-stage.has-egg .foot-art{position:sticky;top:calc(100vh - var(--egg-art-h,400px) - 40px);}
  .egg-layer{position:fixed;inset:0;z-index:9000;pointer-events:none;visibility:hidden;}
  .egg-layer.on{visibility:visible;}
  .egg-layer canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
  /* Contact us, in the mark's own style: a red pill with a white word, extruded down in darker reds */
  .egg-cta{position:absolute;left:50%;top:50%;display:inline-flex;text-decoration:none;opacity:0;will-change:transform,opacity;}
  .egg-layer.cta-on .egg-cta{pointer-events:auto;}
  .egg-cta-face{display:block;padding:17px 42px 14px;border-radius:999px;background:var(--red);color:#fff;
    font-family:'Tanker','Anton',sans-serif;font-size:34px;line-height:1;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
    box-shadow:0 1px 0 #E21212,0 2px 0 #DA1111,0 3px 0 #D11010,0 4px 0 #C80F0F,0 5px 0 #BF0E0E,0 6px 0 #B60D0D,0 7px 0 #AD0C0C,0 8px 0 #A40B0B,0 9px 0 #9B0A0A,0 10px 0 #920909,
      0 14px 24px rgba(80,0,0,.45),0 0 70px rgba(255,190,170,var(--glow,.55)),inset 0 2px 0 rgba(255,255,255,.35);
    transform:translateY(0);transition:transform .14s cubic-bezier(.2,.8,.3,1),box-shadow .14s cubic-bezier(.2,.8,.3,1);}
  .egg-cta:hover .egg-cta-face,.egg-cta:focus-visible .egg-cta-face{transform:translateY(4px);
    box-shadow:0 1px 0 #E21212,0 2px 0 #D11010,0 3px 0 #BF0E0E,0 4px 0 #AD0C0C,0 5px 0 #9B0A0A,0 6px 0 #920909,
      0 10px 18px rgba(80,0,0,.45),0 0 80px rgba(255,200,180,.7),inset 0 2px 0 rgba(255,255,255,.35);}
  .egg-cta:active .egg-cta-face{transform:translateY(9px);box-shadow:0 1px 0 #C80F0F,0 6px 12px rgba(80,0,0,.45),0 0 60px rgba(255,180,160,.55),inset 0 2px 0 rgba(255,255,255,.25);}
  .egg-cta:focus-visible{outline:none;} .egg-cta:focus-visible .egg-cta-face{outline:3px solid #fff;outline-offset:4px;}
  @media (max-width:640px){.egg-cta-face{font-size:26px;padding:14px 30px 12px;}}
  /* the header steps aside while the egg plays */
  html.egg-on header{opacity:0;pointer-events:none;transition:opacity .35s ease;}
  header{transition:opacity .35s ease;}

  /* ============ responsive — the chrome ============ */
  @media (max-width:1280px){
    .menu a{font-size:14px;padding:0 8px;}
    .menu a:first-child{padding-left:14px;}
    .menu a:last-child{padding-right:14px;}
  }
  @media (max-width:1020px){
    /* three tabs fit beside the logo and Contact (pre-launch, 2026-10-15: there was no way to the pages on a phone) */
    .menu a{font-size:14px;padding:0 7px;}
    .menu a:first-child{padding-left:12px;}
    .menu a:last-child{padding-right:12px;}
    .foot-cols{flex-direction:column;gap:48px;}
    .foot-meta{gap:20px;order:2;}   /* the legal line under the links on a narrow screen */
  }
  @media (max-width:640px){
    :root{--margin:16px;}
    footer.site-footer{gap:48px;padding-top:200px;font-size:17px;}
    .foot-social,.foot-legal{flex-wrap:wrap;}
  }

/* ============ the LEDE: the secondary line under each page's pill (Home, Work, Info, Thinking, Gallery) ============
   ONE style on every page (2026-10-16, Markiian: "it should be same across all pages - same font and size"):
   General Sans 500, 40 / 125 % (Info's 125 %, his call 2026-09-04), +1 %; 32 under 1020, 24 on a phone, and
   the lines may wrap below 1020. Before this: Home 40/100 % scaling with the width, Work 40/115 %, Info 40/125 %
   scaling, Thinking Tanker 40/100 %. */
.hero .lines,.work-lines,.info-lines,.think-lines,.gal-lines{font-size:40px;}
.hero .lines .line,.work-lines .line,.info-lines .line,.think-lines .line,.gal-lines .line{
  font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:1em;line-height:1.25;letter-spacing:.01em;}
@media (max-width:1020px){
  .hero .lines,.work-lines,.info-lines,.think-lines,.gal-lines{font-size:32px;}
  html .hero .lines .line,html .work-lines .line,html .info-lines .line,html .think-lines .line,html .gal-lines .line{white-space:normal;padding:0 var(--margin);}   /* html: beats the pages' own nowrap */
}
@media (max-width:640px){
  .hero .lines,.work-lines,.info-lines,.think-lines,.gal-lines{font-size:24px;}
}

/* ============ Experiments: the one tab that leaves the site (2026-10-16, Markiian: "it should have this arrow so it's
   kinda link is outside of the website") — the tab as the others, a small ↗ after the word, opens in a new tab ============ */
.menu a.menu-ext{gap:3px;}
.menu a.menu-ext svg{width:.78em;height:.78em;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;transform:translateY(-.04em);}   /* no movement on hover (Markiian) */
@media (max-width:520px){.menu a.menu-ext{display:none;}}   /* a phone's strip has no room for five tabs and Contact (2026-10-16: Contact ran 29px off a 390 screen); Experiments stays in the footer */

/* the scroll stamps over the footer mark (site-footer.js, 2026-10-16): full strength, above the 20 % outline */
.site-footer .foot-paint{position:absolute;top:0;pointer-events:none;}
footer.site-footer{overflow:clip;}   /* the stamps' canvas runs past the mark; it must not widen or lengthen the page */