/* ==========================================================================
   The footer, on every page: ticker, closing line, Get in touch, the Geneva Ko
   name and its pixel stars, over the black "night" under the white page (the
   .sheet). One stylesheet for the homepage, Field Notes and the case studies;
   each page's own stylesheet (site.css, or case.css) loads first and supplies
   the fonts and tokens. The Layout options (home-lab.js) switch the variants
   with data-* attributes on <html>.
   ========================================================================== */
/* --- footer --------------------------------------------------------------- */
.site-footer{padding-block:clamp(56px,7vw,92px) 40px;
  text-align:center;display:flex;flex-direction:column;align-items:center}
.site-footer__cta{font-size:var(--fs-lead);font-weight:400;line-height:1.4;letter-spacing:-.03em;color:var(--ink);
  margin-bottom:clamp(44px,6vw,88px)}
.social{display:flex;gap:20px;align-items:center}
.social a{display:inline-flex;transition:opacity .15s ease}
.social a:hover{opacity:.6}
.social img{width:28px;height:28px}
.colophon{font-size:var(--fs-cap);color:var(--muted);margin-top:clamp(24px,3vw,36px)}

/* --- footer marquee ------------------------------------------------------- */
/* Two identical halves; the track shifts exactly -50% so the loop is seamless.
   Spacing lives in each item's padding (not `gap`) so half the track is an
   exact repeat of the other half. */
.site-footer .marquee{width:100%;overflow:hidden;padding-block:4px;
  margin-bottom:clamp(28px,3.6vw,44px)}
.site-footer .marquee__track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.site-footer .marquee__item{font-family:var(--serif);font-style:italic;font-size:15.7px;
  line-height:1.2;color:var(--ink);white-space:nowrap;padding-right:2.4em}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .site-footer .marquee{display:flex;justify-content:center}
  .site-footer .marquee__track{animation:none;width:auto}
  .site-footer .marquee__item{padding-right:0}
  .site-footer .marquee__item:not(:first-child){display:none}}

/* --- layered page (homepage) ---------------------------------------------- */
/* The page body is a light "sheet" sitting on a dark base. Overscrolling at
   the top (rubber-band pull) shows the base, and the footer is pinned to the
   bottom of the viewport *under* the sheet, so scrolling to the end slides
   the sheet up off it. Pure CSS: sticky bottom:0 + stacking order. */
body.layered{background:var(--ink)}
.layered .sheet{position:relative;z-index:1;background:var(--bg);
  border-radius:0 0 clamp(28px,5vw,64px) clamp(28px,5vw,64px)}
.layered .site-footer{position:sticky;bottom:0;z-index:0;background:var(--ink);color:#fff}
.layered .site-footer__cta,
.layered .marquee__item{color:#fff}
.layered .colophon{color:#a3a3a3}          /* 8.4:1 on black */
.layered .social img{filter:invert(1)}     /* dark webp icons → white */
.layered .site-footer :focus-visible{outline-color:#fff}
.layered .sheet{will-change:transform}

/* --- footer: ticker at the sheet's edge, then the name --------------------- */
/* The ticker sits right under the sheet's rounded edge, so it reads as the
   seam between the page and the footer. The name below fills the footer's
   width inside generous side padding:its advance at 1em is 3.92em, so the
   font size is (container width minus padding) / 3.92. Container query units
   keep that exact whatever the scrollbar does. */
.layered .site-footer{padding-top:clamp(20px,2.2vw,28px);container-type:inline-size}
.layered .site-footer .marquee{margin-bottom:0}
.footer-name{
  --pad:clamp(24px,6cqw,112px);
  --adv:3.65;  /* "geneva ko" is 3.65em wide in the italic, 3.66em in the roman */
  width:100%;padding-inline:var(--pad);margin:clamp(20px,3cqw,44px) 0 clamp(36px,5cqw,72px);
  font-family:"That That New Pixel",var(--sans);font-weight:400;
  font-size:calc((100cqw - var(--pad) * 2) / var(--adv));line-height:.9;
  white-space:nowrap;text-align:center;color:#fff;
  -webkit-font-smoothing:none;font-smooth:never;
}

/* footer stars (assets/js/footer-stars.js): drawn at 1/4 size, scaled up with
   no smoothing like the pull-to-peek sky, and kept behind the footer content */
.site-footer{position:relative}
.layered .site-footer{position:sticky}
.footer-stars{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;image-rendering:pixelated}
.site-footer > :not(.footer-stars):not(.twinkle){position:relative;z-index:1}

/* --- footer variants, switched from the homepage Layout options (home-lab.js).
   Defaults are the current choices; the attributes bring back the earlier ones. */
.footer-name__italic{font-style:italic}
.footer-name__roman,.footer-name__mark{display:none}
:root[data-fname="roman"] .footer-name{--adv:3.66}
:root[data-fname="roman"] .footer-name__roman{display:inline}
:root[data-fname="roman"] .footer-name__italic{display:none}
/* the logo wordmark (the geneva.png artwork, as the crisp SVG), white on the dark
   footer, filling the same padded width as the type */
:root[data-fname="wordmark"] .footer-name__italic{display:none}
:root[data-fname="wordmark"] .footer-name__mark{display:block;width:var(--wm,85%);height:auto;max-height:32vh;object-fit:contain;margin-inline:auto}   /* geneva2.png: already white, no invert */
/* the thin wordmark: a white PNG (790px), so it needs no invert; shares the size setting */
.footer-name__thin{display:none}
:root[data-fname="thin"] .footer-name__italic{display:none}
:root[data-fname="thin"] .footer-name__thin{display:block;width:var(--wm,85%);height:auto;max-height:32vh;object-fit:contain;margin-inline:auto}
/* wordmark size, as a share of the padded footer width (85% is the default) */
:root[data-wmsize="40"]{--wm:40%}
:root[data-wmsize="55"]{--wm:55%}
:root[data-wmsize="70"]{--wm:70%}
:root[data-wmsize="95"]{--wm:95%}
/* Wordmark full width (Layout options): the name drops its side margins and
   fills the footer edge to edge, whatever the Wordmark size setting */
:root[data-wmfull="on"]{--wm:100%}
:root[data-wmfull="on"] .layered .site-footer .footer-name{padding-inline:0}

/* the ticker: 4× its old 16px, then 2px smaller. Type sizes sit outside the
   4-point spacing grid, so 62 is fine here */
.site-footer .marquee__item{font-size:clamp(30px,4.3vw,62px);line-height:1.2}
/* the ticker in the pixel italic, lowercase, tracked out 1px; 1× keeps the old serif */
.layered .site-footer .marquee__item{font-family:"That That New Pixel",var(--serif);font-style:italic;
  text-transform:lowercase;letter-spacing:1px;-webkit-font-smoothing:none}
:root[data-ticker="1x"] .layered .site-footer .marquee__item{font-family:var(--serif);letter-spacing:normal;-webkit-font-smoothing:antialiased}
:root[data-ticker="3x"] .marquee__item{font-size:clamp(24px,3.3vw,48px)}
:root[data-ticker="2x"] .marquee__item{font-size:clamp(20px,2.2vw,32px)}
:root[data-ticker="1x"] .marquee__item{font-size:16px}

/* bottom row: CTA left, links right, icons hidden */
.foot-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px 32px;flex-wrap:wrap}
.foot-row .site-footer__cta{margin-bottom:0}
.foot-links{display:flex;gap:24px;font-size:var(--fs-body)}
.foot-links a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:rgb(255 255 255 / .4);transition:text-decoration-color .15s ease}
.foot-links a:hover{text-decoration-color:#fff}
.layered .site-footer{text-align:left;align-items:stretch}
.layered .social{display:none}
.layered .colophon{align-self:stretch;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--rail)}
:root[data-fbottom="center"] .foot-row{display:block;text-align:center}
:root[data-fbottom="center"] .foot-row .site-footer__cta{margin-bottom:clamp(44px,6vw,84px)}
:root[data-fbottom="center"] .foot-links{display:none}
:root[data-fbottom="center"] .layered .site-footer{text-align:center;align-items:center}
:root[data-fbottom="center"] .layered .social{display:flex;justify-content:center}
:root[data-fbottom="center"] .layered .colophon{text-align:center}

/* --- twinkling star (assets/js/star-twinkle.js), for testing ------------------
   The star PNG rests small and dim, then flashes: it swells, turns a few
   degrees, blooms a soft white glow, and throws two thin flare lines across
   it, the way a bright star catches the eye. Each star gets its own timing
   from the script, so they never pulse in unison. */
.site-footer .twinkle[hidden]{display:none}
.site-footer .twinkle{position:absolute;z-index:1;width:var(--s,32px);aspect-ratio:167/203;pointer-events:none;
  translate:-50% -50%;animation:twinkle var(--dur,4s) var(--delay,0s) infinite ease-in-out}
.site-footer .twinkle img{width:100%;height:100%;display:block;
  filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px rgb(255 255 255 / .6))}
.site-footer .twinkle::before, .site-footer .twinkle::after{content:"";position:absolute;left:50%;top:50%;pointer-events:none;
  background:linear-gradient(90deg,transparent,#fff 45%,#fff 55%,transparent);
  translate:-50% -50%;opacity:0;animation:flare var(--dur,4s) var(--delay,0s) infinite ease-out}
.site-footer .twinkle::before{width:400%;height:2px}
.site-footer .twinkle::after{width:2px;height:320%;background:linear-gradient(180deg,transparent,#fff 45%,#fff 55%,transparent)}
@keyframes twinkle{
  0%,58%,100%{transform:scale(.56) rotate(0deg);opacity:.56}
  66%{transform:scale(1.12) rotate(12deg);opacity:1}
  74%{transform:scale(.84) rotate(4deg);opacity:.84}
}
@keyframes flare{
  0%,60%,100%{opacity:0;transform:scale(.2)}
  66%{opacity:.9;transform:scale(1)}
  80%{opacity:0;transform:scale(1.2)}
}
:root[data-twinkle="off"] .twinkle{display:none}
@media (prefers-reduced-motion:reduce){
  .site-footer .twinkle{animation:none;transform:scale(.8)}
  .site-footer .twinkle::before, .site-footer .twinkle::after{animation:none}}

/* the contact row now sits between the ticker and the name */
.layered .site-footer .foot-row{margin-top:clamp(32px,4vw,56px)}
.layered .site-footer .footer-name{margin-top:clamp(28px,4cqw,56px)}

/* a clear, but not cavernous, field of starry black between the ticker and
   the contact row (a full-window footer was too much) */
.layered .site-footer .foot-row{margin-top:clamp(80px,10vw,144px)}
.layered .site-footer .colophon{margin-top:clamp(16px,2vw,28px)}
.footer-name__ed{display:none}
:root[data-fname="editorial"] .footer-name__italic{display:none}
:root[data-fname="editorial"] .footer-name__ed{display:inline-flex;align-items:center;white-space:nowrap;
  font-family:"PP Editorial New",var(--serif);font-weight:var(--edw,400);font-style:var(--eds,normal);
  letter-spacing:var(--edk,0em);line-height:1;color:#fff;-webkit-font-smoothing:antialiased;
  font-size:var(--edfs,160px)}   /* --edfs is set by footer-name-fit.js to fill the width */
.ed-star{display:inline-block;height:.72em;aspect-ratio:167/203;margin-right:.12em;flex:none;align-self:center;translate:0 -.04em}
.ed-star img{width:100%;height:100%;display:block}
:root[data-edstar="empty"] .ed-star img{visibility:hidden}
:root[data-edweight="200"]{--edw:200}
:root[data-edweight="800"]{--edw:800}
:root[data-edstyle="italic"]{--eds:italic}
:root[data-edkern="-40"]{--edk:-.04em}
:root[data-edkern="-20"]{--edk:-.02em}
:root[data-edkern="20"]{--edk:.02em}

/* ==========================================================================
   Footer, v3 (2026-10-01): at most half the window tall, everything inside
   scaled to the window height; one adjustable star across all name styles;
   a footer-text size setting. Later rules here win over the earlier footer
   rules above, at equal or higher specificity.
   ========================================================================== */
.layered .site-footer{max-height:var(--fh,50svh);overflow:hidden;
  padding-top:min(28px,3svh);padding-bottom:min(40px,3.5svh)}

/* ticker sizes, each also capped by the window height */
.layered .site-footer .marquee__item{font-size:min(clamp(30px,4.3vw,62px),6svh)}
:root[data-ticker="3x"] .layered .site-footer .marquee__item{font-size:min(clamp(24px,3.3vw,48px),5svh)}
:root[data-ticker="2x"] .layered .site-footer .marquee__item{font-size:min(clamp(20px,2.2vw,32px),3.6svh)}
:root[data-ticker="1x"] .layered .site-footer .marquee__item{font-size:16px}

/* vertical rhythm in svh, so the stack keeps its proportions in half a window */
.layered .site-footer .foot-row{margin-top:min(clamp(80px,10vw,144px),5svh)}
.layered .site-footer .footer-name{margin-top:min(clamp(28px,4cqw,56px),3svh);margin-bottom:min(clamp(36px,5cqw,72px),3svh)}
.layered .site-footer .colophon{margin-top:min(clamp(16px,2vw,28px),2svh)}

/* footer text size (Layout options slider, --ft): "Let's work together", the
   links and the credit scale together from one value; links and credit keep
   their proportion to it (16:22 and 14:22) */
.layered .site-footer .site-footer__cta{font-size:var(--ft,22px)}
.layered .site-footer .foot-links{font-size:max(14px,calc(var(--ft,22px) * .727))}
.layered .site-footer .colophon{font-size:max(12px,calc(var(--ft,22px) * .636))}

/* the name: capped at ~17% of the window height whatever its width setting */
/* the name's height budget: ~15% of the window, given back to the text as the
   footer-text slider grows, so the whole stack stays inside half a window */
.layered .site-footer{--nameh:max(7svh,calc(15svh - (var(--ft,22px) - 22px) * 2.4))}
.layered .site-footer > *{flex-shrink:0}   /* never squash a row; the name budget does the giving */
.footer-name{font-size:min(calc((100cqw - var(--pad) * 2) / var(--adv)),calc(var(--nameh,15svh) / .9))}

/* the image wordmarks, with their own star cropped off and star.png laid over
   the measured box (bold 874×176: star 0–136px, "g" from 147; thin 790×185:
   star 0–131px, "g" from 141), so the star can be sized and nudged */
:root .footer-name__mark,:root .footer-name__thin{display:none}
.fn-logo{display:none;position:relative;margin-inline:auto}
:root[data-fname="wordmark"] .fn-logo--bold,
:root[data-fname="thin"] .fn-logo--thin{display:block}
.fn-logo--bold{--cut:16.8%;--sy:4.55%;--sw:15.56%;--sh:94.89%;width:min(var(--wm,85%),calc(var(--nameh,15svh) * 874 / 176))}
.fn-logo--thin{--cut:17.85%;--sy:8.65%;--sw:16.58%;--sh:85.95%;width:min(var(--wm,85%),calc(var(--nameh,15svh) * 790 / 185))}
:root[data-fname="wordmark"] .fn-logo .footer-name__mark,
:root[data-fname="thin"] .fn-logo .footer-name__thin{display:block;width:100%;height:auto;max-height:none;
  clip-path:inset(0 0 0 var(--cut))}
.fn-logo__star{position:absolute;left:0;top:var(--sy);width:var(--sw);height:var(--sh);
  transform:translate(var(--stx,0%),var(--sty,0%)) scale(var(--sts,1));transform-origin:50% 50%}
.fn-logo__star img{width:100%;height:100%;display:block}

/* the typeset (Editorial New) star follows the same three settings */
.ed-star{transform:translate(var(--stx,0%),var(--sty,0%)) scale(var(--sts,1));transform-origin:50% 50%}

/* --- footer name size (Layout options slider --ns, 2026-10-01) -------------
   The footer is exactly half the window; the ticker, contact row and credit
   keep their room, and the name's line (.footer-name, a size container) takes
   whatever height is left. --ns is how much of that space the name fills, so
   it can be pushed as large as the half-window allows and no further. */
.layered .site-footer{height:var(--fh,50svh)}   /* Footer height slider: 50–75% of the window */
.layered .site-footer .footer-name{flex:1 1 auto;min-height:0;container-type:size;
  display:flex;align-items:center;justify-content:center;font-size:inherit}
.footer-name :is(.footer-name__italic,.footer-name__roman){
  font-size:min(calc(100cqw / var(--adv)),calc(100cqh * var(--ns,.7) / .9))}
.fn-logo--bold{width:min(var(--wm,85%),calc(100cqh * var(--ns,.7) * 874 / 176))}
.fn-logo--thin{width:min(var(--wm,85%),calc(100cqh * var(--ns,.7) * 790 / 185))}

/* footer name past 100% (ns-over, set by footer-name-fit.js): the name is
   sized in px from the space it had at 100%, and the footer grows to fit it,
   up to 75% of the window, instead of the name overlapping its neighbours */
.ns-over .layered .site-footer{height:auto;min-height:var(--fh,50svh);max-height:75svh}
.ns-over .layered .site-footer .footer-name{flex:none;container-type:inline-size}
.ns-over .footer-name :is(.footer-name__italic,.footer-name__roman){font-size:min(calc(100cqw / var(--adv)),calc(var(--namepx) / .9))}
.ns-over .fn-logo--bold{width:min(var(--wm,85%),calc(var(--namepx) * 874 / 176))}
.ns-over .fn-logo--thin{width:min(var(--wm,85%),calc(var(--namepx) * 790 / 185))}

/* past 100%, the slider also eats into the name's side margins and lifts the
   Wordmark size cap, so by 200% the name runs edge to edge: the largest it can
   be without being cut off. --ns runs 1 → 2 across that stretch. */
.ns-over .layered .site-footer .footer-name{padding-inline:calc(clamp(24px,6cqw,112px) * clamp(0, 2 - var(--ns), 1))}
.ns-over .fn-logo{--wmx:calc(var(--wm,85%) + (100% - var(--wm,85%)) * clamp(0, var(--ns) - 1, 1))}
.ns-over .fn-logo--bold{width:min(var(--wmx),calc(var(--namepx) * 874 / 176))}
.ns-over .fn-logo--thin{width:min(var(--wmx),calc(var(--namepx) * 790 / 185))}

/* footer taller than half the window (or a name past 100%): the ticker stays at
   the top and everything else is anchored to the bottom; a minimum gap under
   the ticker is kept, and the free height opens up between them */
.ns-over .layered .site-footer .foot-row{margin-top:auto}
.ns-over .layered .site-footer .marquee{margin-bottom:min(clamp(80px,10vw,144px),5svh)}

/* the footer's height always lands on the 4-point grid: a share of the window
   is rounded to the nearest 4px, whatever the window and the setting */
.layered .site-footer{height:round(nearest,var(--fh,50svh),4px);max-height:round(nearest,var(--fh,50svh),4px)}
.ns-over .layered .site-footer{height:auto;min-height:round(nearest,var(--fh,50svh),4px);max-height:round(down,75svh,4px)}

/* ticker separator: the ▪ sits on its own between phrases, with exactly the
   same space either side (it used to be part of the text, a big gap after
   "them" and one word-space before "leave"). Each item ends in a separator,
   so the two halves of the track stay identical and the loop stays seamless. */
.site-footer .marquee__item{padding-right:0}
.site-footer .marquee__item::after{content:"▪";display:inline-block;margin-inline:.8em}
@media (prefers-reduced-motion:reduce){.site-footer .marquee__item::after{content:none}}

/* the "✓ Email copied" confirmation (copy-email.js) pops above the button */
.site-footer .copy-wrap{position:relative;display:inline-flex}
.site-footer .copy-toast{position:absolute;left:50%;bottom:calc(100% + 8px);translate:-50% 4px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  font-size:13px;line-height:1;background:var(--toast-bg,#000);color:var(--toast-fg,#fff);
  opacity:0;pointer-events:none;transition:opacity .2s ease,translate .2s ease}
.site-footer .copy-toast.is-shown{opacity:1;translate:-50% 0}
.site-footer .copy-toast svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.layered .site-footer{--toast-bg:#fff;--toast-fg:#000}
@media (prefers-reduced-motion:reduce){.site-footer .copy-toast{transition:none}}

/* footer links at the same size as "Let's work together" (the default;
   "Smaller" keeps the old ~73% of it) */
:root:not([data-flinks="small"]) .layered .site-footer .foot-links{font-size:var(--ft,22px)}
.foot-links :is(a,button){font-size:inherit}

/* footer: just "Get in touch" (the default), or all three links as before */
:root:not([data-footlinks="all"]) .foot-links a{display:none}

/* footer: "Let's work together" + Get in touch below the wordmark (option) */
:root[data-footorder="below"] .layered .site-footer .footer-name{order:1}
:root[data-footorder="below"] .layered .site-footer .foot-row{order:2;margin-top:0}
:root[data-footorder="below"] .layered .site-footer :is(.social,.colophon){order:3}
:root[data-footorder="below"] .layered .site-footer .footer-name{margin-top:clamp(48px,6cqw,96px)}

/* ticker at the bottom of the footer (option): last in the footer's column */
:root[data-tickerpos="bottom"] .layered .site-footer .marquee{order:20;margin-top:clamp(16px,2vw,28px)}
:root[data-tickerpos="bottom"] .layered .site-footer{padding-top:0}
/* raise the footer wordmark (Layout options → Footer → Name), moved, not resized */
.layered .site-footer .footer-name{translate:0 calc(var(--fnup,0px) * -1)}

/* the copyright line at the same size as "Let's work together" (--ft) */
.layered .site-footer .colophon{font-size:calc(var(--ft,22px) - 4px)}   /* 4px under "Let's work together" */

/* the closing line ("Thanks for visiting. / Would love to work together.")
   at 16px by default (its own slider); the links match it, and the © line
   stays 4px under it */
.layered .site-footer .site-footer__cta{font-size:max(16px,var(--ctafs,16px));line-height:1.4;letter-spacing:-.01em}   /* the -.03em display tracking is too tight at 16px */
:root:not([data-flinks="small"]) .layered .site-footer .foot-links{font-size:var(--ctafs,16px)}
.layered .site-footer .colophon{font-size:calc(var(--ctafs,16px) - 4px)}

/* the copy confirmation, when the cursor pill shows it: kept for screen readers only */
.site-footer .copy-toast.is-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the footer name is display type, not a control: its (tall) line box must
   never sit on top of "Get in touch" and swallow the click */
.layered .site-footer .footer-name{pointer-events:none}

/* more room at the very end of the footer, under the © line */
.layered .site-footer{padding-bottom:clamp(40px,4.4vw,64px)}

/* the closing line at display size (28px by default, its own slider): a
   sign-off that matches "Get in touch" opposite it; Book weight and tight
   tracking for the message, Medium + underline for the link. The © stays
   fine print. */
.layered .site-footer .site-footer__cta{font-size:max(16px,var(--ctafs,28px));font-weight:400;line-height:1.2;letter-spacing:-.02em}
.layered .site-footer .colophon{font-size:12px}

/* the email button's words (Layout options → Footer → Email button says); same copy-email action either way */
.gk-touch .gk-touch__say--together{display:none}
:root:is([data-gitlabel="together"],[data-gitlabel="together-short"]) .gk-touch .gk-touch__say--touch{display:none}
:root:is([data-gitlabel="together"],[data-gitlabel="together-short"]) .gk-touch .gk-touch__say--together{display:inline}
:root[data-gitlabel="together-short"] .site-footer__cta .cta-more{display:none}

/* "Get in touch" (footer), rebuilt 2026-10-08. A plain button that looks like
   a link, in the footer name's typeface. These rules are the default, so it is
   right from the first paint; touch.js then copies the name's exact face inline.
   The pixel font has one weight, so its bold is drawn as a 1px overstrike
   (a stroke round the letters smeared them into a blob at 28px). */
.site-footer .gk-touch{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;color:#fff;
  font:italic 400 28px/1.2 "That That New Pixel",var(--serif,serif);text-transform:lowercase;
  letter-spacing:.08em;text-shadow:.036em 0 currentColor;-webkit-font-smoothing:none;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;
  text-decoration-color:rgb(255 255 255 / .4)}
:root[data-fname="roman"] .site-footer .gk-touch{font-style:normal}
:root:is([data-fname="editorial"],[data-fname="wordmark"],[data-fname="thin"]) .site-footer .gk-touch{
  font-family:"PP Editorial New",var(--serif,serif);font-style:normal;font-weight:800;letter-spacing:-.01em;
  text-shadow:none;-webkit-font-smoothing:antialiased}
:root[data-touchwt="name"]:not([data-fname="editorial"],[data-fname="wordmark"],[data-fname="thin"]) .site-footer .gk-touch{letter-spacing:.04em;text-shadow:none}
:root[data-fname="editorial"] .site-footer .gk-touch{font-style:var(--eds,normal)}   /* the name's own slant */
:root[data-touchwt="name"][data-fname="editorial"] .site-footer .gk-touch{font-weight:var(--edw,400)}
.site-footer .gk-touch:hover{text-decoration-color:#fff}
.site-footer .gk-touch:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:2px}

/* reduced motion turns every transition into a 0.01ms one (site.css), which is
   enough to make footer-fit.js / footer-name-fit.js read a size a moment before
   it changes. The parts they measure don't animate anyway: no transition at all. */
@media (prefers-reduced-motion:reduce){
  .site-footer,.site-footer > *,.footer-name *{transition:none!important}
}