/* Fenix. R2D (round 2 design).
   Two families. Display: Baskervville 500 (interim for Nicolas Cochin LT Pro Regular) for each page's H1 and the home
   band line. Book: Baskervville 400 for long-form text (manifesto essay, science article). Everything else: Schibsted Grotesk.
   House rule: home and manifesto open on the gold field with black type; science opens on black and carries its gold
   lower down, as the nutrition panel. Every page closes on the gold field (the footer, R3F). Gold is a field, never a line.
   Images: low-key product cards; the engraved base twice, once as a black-and-white photograph (home band) and once as
   ink on the gold field (manifesto head). Never the same treatment twice.
   Rules only in tables and accordions. No transitions, no reveals, no hover zoom. */

/* FONTS. The preview build (python3 _build.py) loads them from Google Fonts through the <link> in HEAD(), so the pages
   open from disk. The deploy build (FENIX_DEPLOY=1, see README.md) self-hosts them: its pages preload the woff2 files
   named below and have no Google links, and in its copy of this file (dist/assets/css) the two marker comments around
   the rules below are replaced, so the rules apply. Keep both markers as they are: the deploy build stops without them.
   The woff2 files are Google's own latin subset files (byte-identical, Nov 2026): Basic Latin, Latin-1, the
   general punctuation block and the euro sign. A letter outside that set (for example c with caron, l with stroke)
   would fall back to Georgia or system-ui. */
/*DEPLOY-FONTS
@font-face{font-family:"Baskervville";src:url("../fonts/baskervville-var.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-grotesk-var.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
DEPLOY-FONTS*/
/* Nicolas Cochin, once the web licence is bought: add its @font-face, set --display:"Nicolas Cochin LT Pro",serif and
   --dw:400, keep --book on Baskervville, and re-fit --hero (Cochin sets wider; see the note at #hero h1). */

:root{
  color-scheme:dark;
  --ink:#000; --paper:#fff; --grey:#a3a3a3; --dim:#7a7a7a; --gold:#d8b878;
  --rule:rgba(255,255,255,.22); --rule-ink:rgba(0,0,0,.26); --focus:var(--paper);
  --display:"Baskervville",Baskerville,Georgia,serif; --dw:500;
  --book:"Baskervville",Baskerville,Georgia,serif;
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --m:clamp(20px,2.8vw,40px); --gut:clamp(12px,1.67vw,24px);
  /* WIG A6 safe areas: --ml/--mr are the side margins plus any notch, --st/--sb the top and bottom insets. env() is 0 on a
     screen with no notch (and without viewport-fit=cover), so there they equal --m and 0 and nothing moves. */
  --ml:calc(var(--m) + env(safe-area-inset-left,0px)); --mr:calc(var(--m) + env(safe-area-inset-right,0px));
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  --sx:calc(env(safe-area-inset-left,0px) + env(safe-area-inset-right,0px));
  --d1:clamp(56px,11.6vw,188px); --d2:clamp(48px,8.4vw,132px);
  --hero:min(calc(15.8vw - .158 * var(--sx)),262px);   /* WIG A6: 15.8% of the width inside the safe area (= 15.8vw without a notch) */
  --h2:clamp(30px,2.8vw,42px); --lead:clamp(19px,1.45vw,21px); --body:17px; --small:14px;
  --bookset:clamp(19px,1.5vw,22px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* WIG A7: no rubber-band on the page with a mouse or trackpad; touch screens keep pull-to-refresh. "none" also stops
   scroll chaining and, in Chrome, the trackpad back/forward swipe (overscroll-behavior-y:none would keep the swipe). */
@media (pointer:fine){html{overscroll-behavior-y:none}} /* vertical only: stops page rubber-banding, keeps trackpad swipe-back */
body{margin:0;background:var(--ink);color:var(--paper);font:400 var(--body)/1.6 var(--sans);font-kerning:normal;font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
a,button,summary,label{-webkit-tap-highlight-color:transparent}
a,button,summary,label,input,select,textarea{touch-action:manipulation}
button,input{font:inherit;color:inherit}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;font-weight:600;line-height:1.06;letter-spacing:-.02em}
h1{font-family:var(--display);font-weight:var(--dw);line-height:.97;letter-spacing:-.022em;font-variant-numeric:lining-nums}
h2{font-size:var(--h2)}
h3{font-size:19px;line-height:1.3;letter-spacing:-.01em}
h2,h3{text-wrap:balance}
ul,ol,dl,dd{margin:0;padding:0}
blockquote,figure{margin:0}
::selection{background:var(--paper);color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.hdr--gold,#hero,.ftr,.nutr,.essay-head{--focus:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--ml);top:-80px;z-index:90;background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{top:calc(12px + var(--st))}
.skip:focus-visible{outline:2px solid var(--ink);outline-offset:-5px}
.ln{display:block}
.nw{white-space:nowrap}

/* grid: 12 columns; content capped at 1600px by padding, so fields still bleed */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding-inline:max(var(--ml),calc((100% - 1600px)/2)) max(var(--mr),calc((100% - 1600px)/2))}
.rail{grid-column:1/4}

/* buttons and pills (pills: calculator loads) */
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 24px;border-radius:999px;border:0;font:500 16px/1 var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:active{opacity:.85}
.btn--paper{background:var(--paper);color:var(--ink)}
.btn--paper:hover{background:#dcdcdc}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:#262626}
.btn--sm{height:38px;padding:0 18px;font-size:15px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;height:40px;padding:0 18px;border:1px solid var(--rule);border-radius:999px;background:none;color:var(--grey);font:500 15px/1 var(--sans);cursor:pointer;white-space:nowrap}
.pill:hover{color:var(--paper);border-color:var(--grey)}
.pill[aria-pressed=true]{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* header: static. On home and the manifesto it sits on the gold field (.hdr--gold). Wordmark 34 px (judge 20). */
.hdr{padding-top:var(--st)}
.hdr .g{height:76px;align-items:center}
.hdr__logo{grid-column:1/3;justify-self:start;display:flex;align-items:center;height:44px}
.hdr__logo img{height:34px;width:auto}
.hdr__nav{grid-column:4/10;display:flex;gap:32px;font-size:15px}
.hdr__nav a{text-decoration:none;color:var(--grey)}
.hdr__nav a:hover,.hdr__nav a[aria-current]{color:var(--paper)}
.hdr__cta{grid-column:10/13;justify-self:end;display:flex;align-items:center;gap:4px}
.hdr--gold{background:var(--gold);color:var(--ink)}
.hdr--gold .hdr__nav a{color:rgba(0,0,0,.66)}
.hdr--gold .hdr__nav a:hover,.hdr--gold .hdr__nav a[aria-current]{color:var(--ink)}
.burger{display:none;width:44px;height:44px;padding:0;border:0;background:none;color:inherit;cursor:pointer;place-content:center;gap:7px}
.burger span{display:block;width:22px;height:1.5px;background:currentColor}
.burger:hover,.drawer__close:hover{opacity:.7}
.drawer{display:none}

/* home: hero = the face of the can. The H1 is set to the measure: line 1 ("Sixty grams of") fills the twelve columns
   at 1440 (15.8vw); line 2 stops short. No min-height, so no dead quadrant: the field is exactly the type plus the foot,
   and the first can shows above the fold at 1440 x 900. If the copy changes, re-fit --hero so line 1 still fills. */
#hero{background:var(--gold);color:var(--ink);padding-block:clamp(8px,1.4vw,24px) clamp(36px,3.6vw,56px);row-gap:0}
#hero h1{grid-column:1/13;font-size:var(--hero);line-height:.98;letter-spacing:-.03em;margin-left:-.045em}
#hero h1 .ln{white-space:nowrap}
.hero__foot{grid-column:1/13;display:grid;grid-template-columns:subgrid;align-items:end;margin-top:clamp(40px,4.4vw,72px)}
.hero__foot p{grid-column:1/6;font-size:clamp(19px,1.6vw,24px);line-height:1.32;letter-spacing:-.005em;max-width:22em}
.hero__foot .btn{display:none}

/* home: film hero (HERO_VIDEO in _build.py). Black stage; the gold can stands 60-75% across the film, lit from below.
   The section is never narrower than 16:9 (height = min(16:9, screen)), so the film is only ever cropped top and bottom:
   the can never moves under the type, which keeps to the left seven columns. The film's black is 1-4/255, so it meets
   the black header and the black flavours band with no seam; a short fade hides the cut-off floor reflection. */
#hero.hero--video{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--paper);--focus:var(--paper);
  min-height:min(56.25vw,calc(100svh - 76px - var(--st)));align-content:end;padding-block:96px clamp(36px,3.6vw,56px)}
.hero__media{position:absolute;inset:0;z-index:-1;margin:0;background:var(--ink)}
.hero__media video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* the fade is a mask on the film itself (not an overlay), so the film's last rows are transparent and no sub-pixel row
   of the reflection shows below it at fractional heights (4:5 on a 390 px phone = 487.5 px) */
.hero__media video{-webkit-mask-image:linear-gradient(#000 88%,transparent);mask-image:linear-gradient(#000 88%,transparent)}
/* 8.4vw keeps "Sixty grams of" about 90 px clear of the can at 1440 and 60 px at 1024 (measured on the text, film_test.js) */
#hero.hero--video h1{grid-column:1/8;font-size:min(calc(8.4vw - .084 * var(--sx)),134px);line-height:.98;letter-spacing:-.025em;margin-left:-.04em}
#hero.hero--video .hero__foot{grid-column:1/8;margin-top:clamp(24px,2.6vw,40px)}
.vidctl{position:absolute;z-index:1;right:max(var(--mr),calc((100% - 1600px)/2));bottom:calc(clamp(36px,3.6vw,56px) - 12px);min-width:44px;height:44px;padding:0;border:0;background:none;color:var(--grey);font:500 14px/1 var(--sans);cursor:pointer}
.vidctl:hover{color:var(--paper)}

/* home: flavours. Rail at left (no gap in it), three low-key cans, caption under each. */
#flavours{padding-block:clamp(72px,7.5vw,120px) clamp(80px,8vw,128px)}
#flavours .rail{grid-row:1;display:flex;flex-direction:column}
#flavours .rail>p{margin-top:16px;max-width:17em;color:var(--grey)}
.pack{margin-top:40px;max-width:17em}
.pack h3{margin-bottom:6px}
.pack p{color:var(--grey)}
.cans{grid-column:4/13;grid-row:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gut);list-style:none}
.can{display:block;text-decoration:none;color:inherit}
.can__img{height:clamp(300px,34vw,520px);display:flex;align-items:flex-end;justify-content:flex-start}
.can__img img{height:100%;width:auto}
.can__cap{margin-top:20px}
.can__cap h3{font-size:clamp(19px,1.6vw,23px)}
.can__cap p{margin-top:6px;font-size:16px;line-height:1.45;color:var(--grey);max-width:17em}

/* home: studies, in Cadence's "Shop by function" form. Heading and tabs on one baseline; one column below (judge 18). */
#studies{padding-block:clamp(72px,7.5vw,120px) clamp(80px,8vw,128px);align-items:baseline}
#studies h2{grid-column:1/4;grid-row:1}
.fn__tabs{grid-column:4/13;grid-row:1;display:flex;flex-wrap:wrap;gap:0 clamp(20px,2.4vw,40px)}
.fn__tab{padding:0 0 6px;border:0;border-bottom:1px solid transparent;background:none;color:var(--dim);font:500 18px/1.3 var(--sans);letter-spacing:0;cursor:pointer}
.fn__tab:hover{color:var(--paper)}
.fn__tab[aria-selected=true]{color:var(--paper);border-bottom-color:var(--paper)}
.fn__tab:focus-visible{outline-offset:6px}
.fn__panels{grid-column:4/13;grid-row:2;display:grid;margin-top:48px}
.fn__panel{grid-area:1/1;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.fn__panel[hidden]{display:grid;visibility:hidden}
.fn__panel:focus-visible{outline-offset:12px}
.fn__pts{grid-column:1/10;display:grid;gap:24px}
.fn__pts p{font:400 clamp(22px,2vw,30px)/1.32 var(--book);font-variant-numeric:lining-nums;letter-spacing:0;max-width:24em}
.fn__keys{grid-column:1/10;max-width:calc(24 * clamp(22px,2vw,30px));margin-top:32px;font-size:15px;line-height:1.4}
.fn__key{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:14px 0;border-top:1px solid var(--rule)}
.fn__key dt{color:var(--grey);max-width:34em;text-wrap:balance}
.fn__key dd{font-weight:600;font-size:19px;text-align:right;white-space:nowrap;font-variant-numeric:lining-nums proportional-nums}
.fn__more{grid-column:4/13;grid-row:3;justify-self:start;margin-top:28px;font-weight:500}

/* home: the image band. The engraved base in black and white, cut by the right edge and by its own lower arc. */
#band{align-items:end}
.band__img{grid-column:5/13;grid-row:1;position:relative;margin-right:calc(-1 * max(var(--mr),calc((100vw - 1600px)/2)));overflow:hidden;background:#0c0c0c;aspect-ratio:1040/750}
.band__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.band__txt{grid-column:1/5;grid-row:1;padding-block:0 8px;padding-right:var(--gut)}
.band__txt blockquote p{font:var(--dw) clamp(32px,3vw,48px)/1.08 var(--display);letter-spacing:-.014em;max-width:10.5em;hanging-punctuation:first}
#band .by{margin-top:22px;font-size:15px;color:var(--grey);max-width:20em}
.band__txt a{display:inline-block;margin-top:24px;font-weight:500}

/* questions (home #questions and science #science-questions) */
#questions{padding-block:clamp(88px,8.5vw,136px) clamp(72px,7vw,112px)}
.faq{grid-column:4/10}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:22px 0 21px;font:400 clamp(20px,1.6vw,23px)/1.3 var(--book)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";content:"+" / "";flex:none;font:300 22px/1 var(--sans);color:var(--grey)}
.faq details[open] summary::after{content:"\2013";content:"\2013" / ""}
.faq summary:hover::after{color:var(--paper)}
.faq summary:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.faq details p{padding:0 56px 26px 0;color:var(--grey);max-width:36em}

/* footer and waitlist */
.ftr{background:var(--gold);color:var(--ink);padding-block:clamp(80px,8vw,128px) calc(32px + var(--sb))}
.ftr ::selection{background:var(--ink);color:var(--gold)}
.ftr__brand{grid-column:1/4;align-self:start}
.ftr__brand img{height:34px;width:auto}
.nl{grid-column:4/9;padding-right:var(--gut)}
.nl__h{margin-bottom:32px;max-width:13em;font:var(--dw) clamp(32px,3.2vw,48px)/1.06 var(--display);letter-spacing:-.016em}
.nl__label{display:block;margin-bottom:8px;font-size:var(--small);color:rgba(0,0,0,.7)}
.nl__row{display:flex;gap:8px;max-width:520px}
.nl input[type=email]{flex:1;min-width:0;height:48px;padding:0 20px;border:1px solid var(--ink);border-radius:999px;background:none;color:var(--ink);font:400 17px var(--sans)}
.nl input[type=email]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.nl.is-error input[type=email]{border-color:#7a1200;box-shadow:0 0 0 1px #7a1200}
.nl .btn{height:48px}
.nl .btn:disabled{opacity:.5}
.nl[aria-busy=true] .btn{cursor:progress}
.nl[aria-busy=true] button[type=submit]::after{content:"";width:14px;height:14px;margin-left:10px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:fx-spin .8s linear infinite}
@keyframes fx-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.nl[aria-busy=true] button[type=submit]::after{animation:none;border-right-color:currentColor;opacity:.5}}
.nl__msg{font-size:15px;color:var(--ink)}
.nl__msg:not(:empty){margin-top:12px}
.nl.is-error .nl__msg{color:#7a1200}
.nl small{display:block;margin-top:16px;font-size:var(--small);line-height:1.5;color:rgba(0,0,0,.7);max-width:32em;text-wrap:pretty}
.nl .done{display:none;font-size:var(--lead);font-weight:500}
.nl.is-done .fields,.nl.is-done .nl__msg{display:none}
.nl.is-done .done{display:block}
.ftr__nav{grid-column:10/13;display:grid;gap:24px;align-content:start}
.ftr__nav ul{list-style:none;display:grid;gap:4px;font-size:16px}
.ftr__nav a{display:inline-flex;align-items:center;min-height:32px;text-decoration:none;color:rgba(0,0,0,.7)}
.ftr__nav a:hover{color:var(--ink)}
.ftr__base{grid-column:1/13;display:flex;justify-content:space-between;align-items:start;gap:24px;margin-top:clamp(72px,7vw,112px);font-size:var(--small);color:rgba(0,0,0,.7)}
details.claims summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;min-height:32px}
details.claims summary::-webkit-details-marker{display:none}
details.claims summary:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.22em}
details.claims summary::after{content:"\00a0+";content:"\00a0+" / ""}
details.claims[open] summary::after{content:"\00a0\2013";content:"\00a0\2013" / ""}
details.claims ul{margin:12px 0 8px;padding-left:18px;display:grid;gap:6px;max-width:64em;line-height:1.5}

/* science page. One measure: everything in the article, the calculator and the nutrition table ends on column 9 (judge 13).
   The article is set as a paper: book type in Baskervville with lining figures, section heads and data in the grotesk. */
.art-head{padding-block:clamp(56px,6vw,96px) clamp(48px,5vw,80px)}
.art-head h1{grid-column:1/13;font-size:var(--d1)}
.art-head .dek{grid-column:4/10;margin-top:40px;font-size:var(--lead);line-height:1.45}
.art{align-items:start;padding-bottom:128px}
.toc-wrap{grid-column:1/4;grid-row:1;position:sticky;top:32px;min-width:0}
.toc{display:grid;gap:2px;font-size:var(--small);padding-top:6px}
.toc a{display:block;padding:5px 0;text-decoration:none;color:var(--grey)}
.toc a:hover{color:var(--paper)}
.art__body{grid-column:4/10;grid-row:1;min-width:0}
.art__body section{padding-top:64px;scroll-margin-top:24px}
.art__body section:first-child{padding-top:0}
.art__body h2{font-size:26px;margin-bottom:16px}
.art__body section>p{font:400 var(--bookset)/1.56 var(--book);font-variant-numeric:lining-nums proportional-nums;margin-bottom:.8em;text-wrap:wrap}
sup{font-size:.62em;line-height:0;margin-left:1px;font-family:var(--sans);font-variant-numeric:lining-nums}
sup a{text-decoration:none;color:var(--grey)}
sup a:hover{color:var(--paper);text-decoration:underline}
/* WIG A1: the tables are real <table>s. Table, thead and tbody are blocks and each <tr> is the same grid row as before, so
   they look as they did; the cells drop the UA padding, bold and centring. (Chrome, Firefox 113+ and Safari 17+ keep table
   semantics with these display values.) */
.tbl{display:block;margin:32px 0;font-size:15px;line-height:1.4;border-top:1px solid var(--paper)}
.tbl thead,.tbl tbody{display:block}
:where(.tbl) :is(th,td){padding:0;font-weight:inherit;text-align:inherit}
.tbl__r{display:grid;grid-template-columns:minmax(0,2.2fr) repeat(var(--cols,2),minmax(0,1fr));column-gap:16px;padding:12px 0;border-bottom:1px solid var(--rule)}
.tbl--4{--cols:3}
.tbl__r>*+*{text-align:right;font-variant-numeric:lining-nums proportional-nums}
/* WIG A2 (JUDGE3 #12): tabular figures in the number cells, so the digits line up row to row. Schibsted's tabular point,
   comma and percent are figure-width ("1.63" would set as "1 . 6 3"), so _build.py and fenix.js put them in .pnum, which
   keeps their normal width. The figures still share one right edge, because .u is a fixed-width box. */
.tbl__r:not(.tbl__h)>*+*{white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.pnum{font-variant-numeric:lining-nums proportional-nums}
.tbl .u{display:inline-block;width:1.9em;text-align:left}
.tbl__h{font-weight:600}
.tbl__sub>:first-child{padding-left:16px}
#number{margin:56px 0 8px}
#number h3{margin-bottom:20px;font-size:21px}
.calc__row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:15px;font-weight:500}
.calc__kg{display:inline-flex;align-items:center;gap:8px;font-weight:400}
.calc__kg input{width:84px;height:44px;padding:0 14px;border:1px solid var(--grey);border-radius:999px;background:none;font-size:17px;text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.calc__kg input::-webkit-inner-spin-button,.calc__kg input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#number input[type=range]{display:block;width:100%;height:44px;margin:0 0 20px;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
#number input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--grey)}
#number input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-11px;border:0;border-radius:50%;background:var(--paper)}
#number input[type=range]::-moz-range-track{height:2px;background:var(--grey)}
#number input[type=range]::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:var(--paper)}
#number .pills{gap:0 28px;margin-bottom:12px}
#number .pill{height:auto;min-height:36px;padding:0 0 4px;border:0;border-bottom:1px solid transparent;border-radius:0;background:none;color:var(--dim);font:500 16px/1.3 var(--sans)}
#number .pill:hover{color:var(--paper)}
#number .pill[aria-pressed=true]{color:var(--paper);border-bottom-color:var(--paper)}
.calc__desc{margin:0 0 28px;font-size:15px;color:var(--grey)}
.calc__res{border-top:1px solid var(--paper)}
.res{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:baseline;padding:12px 0 13px;border-bottom:1px solid var(--rule)}
.res b{grid-column:2;grid-row:1;font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.res small{grid-column:1/-1;margin-top:2px;font-size:var(--small);line-height:1.45;color:var(--grey)}
.note{margin-top:16px;font-size:var(--small);line-height:1.55;color:var(--grey)}
/* the nutrition band is the can's back: a printed panel, heavy rule on top, a second heavy rule under the macros */
.nutr{background:var(--gold);color:var(--ink);padding-block:clamp(72px,7.5vw,120px)}
.nutr h2{grid-column:1/4;font-size:var(--h2);max-width:7em}
.nutr .tbl,.nutr .note{grid-column:4/10}
.nutr .tbl{margin:0;border-top:6px solid var(--ink);font-size:16px}
.nutr .tbl__r{border-bottom-color:var(--rule-ink)}
.nutr .tbl__h{border-bottom:2px solid var(--ink)}
.nutr .tbl__end{border-bottom:2px solid var(--ink)}
.nutr .note{margin-top:20px;color:rgba(0,0,0,.74)}
.art2{padding-block:120px 32px;row-gap:96px}
.art2+.art2{padding-top:64px}
.art2 h2{grid-column:1/4;font-size:26px}
.art2 .faq,.art2 .refs{grid-column:4/10}
/* references: counter markers (judge 25) */
.refs ol{list-style:none;counter-reset:r;padding-left:0;display:grid;gap:10px;font:400 16px/1.5 var(--book);font-variant-numeric:lining-nums;color:var(--grey)}
.refs i{font-style:normal}
.refs li{counter-increment:r;position:relative;padding-left:2.4em;scroll-margin-top:24px}
.refs li::before{content:counter(r) ".";position:absolute;left:0;top:0;width:1.6em;text-align:right;color:var(--dim)}
.refs li:target{color:var(--paper)}
.refs a{color:var(--paper)}
.art__date{margin-top:24px;font-size:var(--small);color:var(--grey)}
/* science sidenotes (RT2): absolutely placed at their static top, so each starts level with its section's first paragraph */
.art__body section{position:relative}
.side{position:absolute;left:calc(100% + var(--gut) + (100% + var(--gut)) / 6);width:calc((100% + var(--gut)) / 3 - var(--gut));display:grid;gap:12px;padding-top:.35em;font-size:13px;line-height:1.4;color:var(--grey)}
.side p{display:grid;grid-template-columns:1.9em minmax(0,1fr)}
.side a{grid-row:1/3;text-decoration:none;color:var(--dim);font-variant-numeric:lining-nums}
.side i{grid-column:2;font-style:normal;color:var(--dim)}
@media (max-width:1100px){.side{display:none}}

/* manifesto. The head is a gold field: the title in black, and the engraving from the can's base printed as ink, cut by
   the right edge and by the field's lower edge above "DUBLIN". Then one column of book type, set as a book: indented
   paragraphs, no space between them, lining figures. */
.essay-head{position:relative;overflow:hidden;background:var(--gold);color:var(--ink);--seal:min(50vw,800px);min-height:calc(var(--seal) * .7);padding-block:clamp(16px,2vw,32px) 64px;align-content:start}
.essay-head h1{grid-column:1/8;grid-row:1;position:relative;z-index:1;font-size:var(--d1)}
.seal{position:absolute;width:var(--seal);height:var(--seal);right:calc(var(--seal) * -.03);bottom:calc(var(--seal) * -.355);margin:0;pointer-events:none}
.seal img{width:100%;height:100%}
#manifesto{padding-block:clamp(64px,7vw,112px) 160px}
.essay__body{grid-column:1/10;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:var(--gut)}
.essay__body>p{grid-column:4/10}
.essay__body p{font:400 var(--bookset)/1.6 var(--book);font-variant-numeric:lining-nums proportional-nums;text-indent:1.4em;max-width:31em}
.essay__body p:first-child,.essay__body p.byline{text-indent:0}
.essay__body>p:first-child{grid-column:1/9;font:var(--dw) clamp(28px,2.6vw,40px)/1.16 var(--display);letter-spacing:-.012em;max-width:21em;margin-bottom:1.4em}
.essay__body p:first-child+p{text-indent:0}
.essay__body .byline{margin-top:56px;font:var(--dw) clamp(28px,2.4vw,36px)/1.1 var(--display);letter-spacing:-.012em;color:var(--paper)}
.essay__body .byline span{display:block;margin-top:10px;font:500 15px/1.4 var(--sans);letter-spacing:0;color:var(--grey)}

/* image slots: the ?slots outline CSS is not in this file. It is added to the pages only by FENIX_SLOTS=1 python3 _build.py (JUDGE3 #13). */

/* ---------- 7 Nov: black, white, champagne gold as the accent (founder feedback; David's rhythm) ----------
   Gold leaves the big fields on the home page and the footer and becomes the accent: buttons, the ticker strip, the
   study years. White sections (.paper) break up the black: "Shop all" and the questions. */
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:#e7cf9c}
.btn--line{background:none;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.btn--line:hover{box-shadow:inset 0 0 0 1px var(--paper)}
.paper{background:var(--paper);color:var(--ink);--grey:#5c5c5c;--dim:#6b6b6b;--rule:rgba(0,0,0,.14);--focus:var(--ink)}
.paper ::selection{background:var(--ink);color:var(--paper)}
.paper .faq summary:hover::after{color:var(--ink)}

/* hero copy at David's scale: one short line, a sub-line and two pills, bottom left over the film */
#hero.hero--video .hero__txt{grid-column:1/8}
/* three set lines ("Performance has / a final movement. / Join it."); 6.8vw (max 120px) keeps the longest line
   ~75px left of the can at 1440 and 1920, ~50px at 1024 (v8_test.js measures it) */
#hero.hero--video h1{grid-column:auto;font-size:clamp(44px,6.8vw,120px);line-height:1;letter-spacing:-.022em;margin-left:-.03em}
#hero.hero--video .hero__txt>p{margin-top:14px;font-size:clamp(18px,1.4vw,22px);line-height:1.35;color:rgba(255,255,255,.86)}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.4vw,36px)}

/* gold ticker (David's strip). Two identical halves, moved by -50%, so the loop has no seam. Diamond separators from the
   logo. Hover or the button pauses it; reduced motion stops it. */
.ticker{position:relative;display:flex;align-items:center;height:44px;overflow:hidden;background:var(--gold);color:var(--ink);--focus:var(--ink);font:500 14px/1 var(--sans);letter-spacing:.01em}
.ticker__track{display:flex;flex:none;width:max-content;animation:fx-tick 70s linear infinite}
.ticker__track ul{display:flex;list-style:none}
.ticker__track li{display:flex;align-items:center;white-space:nowrap}
.ticker__track li::after{content:"";width:5px;height:5px;margin-inline:26px;background:currentColor;transform:rotate(45deg)}
@keyframes fx-tick{to{transform:translateX(-50%)}}
.ticker:hover .ticker__track,.ticker.is-paused .ticker__track{animation-play-state:paused}
.ticker::after{content:"";position:absolute;inset:0 0 0 auto;width:calc(max(var(--mr),calc((100% - 1600px)/2)) + 72px);background:linear-gradient(90deg,rgba(216,184,120,0),var(--gold) 45%);pointer-events:none}
.ticker__ctl{position:absolute;z-index:1;right:calc(max(var(--mr),calc((100% - 1600px)/2)) - 6px);top:50%;width:32px;height:32px;margin-top:-16px;padding:0;border:0;border-radius:50%;background:var(--ink);color:var(--gold);cursor:pointer;display:grid;place-content:center}
.ticker__ctl::before{content:"";position:absolute;inset:-6px}
.ticker__ctl span{display:block;width:9px;height:10px;border-inline:3px solid currentColor}
.ticker__ctl[aria-pressed=true] span{width:0;height:0;border:0;border-left:9px solid currentColor;border-block:6px solid transparent;margin-left:3px}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* "Shop all": white, David's tile row. Tiles are 4:5 renders on each flavour's colour. */
#flavours.paper{padding-block:clamp(72px,7vw,112px);row-gap:0}
.shop__head{grid-column:1/13;display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:clamp(28px,3vw,44px)}
.shop__head h2{font:var(--dw) clamp(40px,3.6vw,56px)/1 var(--display);letter-spacing:-.018em}
.shop__head h2:focus:not(:focus-visible){outline:none}
.shop__head p{font-size:16px;color:var(--grey)}
.tiles{grid-column:1/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);list-style:none}
.tile__img{aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:#e9e6e1}
.tile__img img{width:100%;height:100%;object-fit:cover}
.tile__cap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;margin-top:16px}
.tile__cap h3{grid-column:1;font-size:clamp(19px,1.5vw,22px)}
.tile__cap p{grid-column:1;margin-top:4px;font-size:16px;line-height:1.45;color:var(--grey);max-width:22em}
.tile__cap .tile__price{grid-column:2;grid-row:1;margin-top:0;font-size:17px;font-weight:500;color:var(--ink)}
#flavours .pack{grid-column:1/13;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;max-width:none;margin-top:clamp(36px,3.6vw,56px);padding-top:24px;border-top:1px solid var(--rule)}
#flavours .pack h3{margin:0;font-size:17px}
#flavours .pack p{margin:0;color:var(--grey)}
#flavours .pack .btn{margin-left:auto}
/* the click animation: tiles start 48 px low and clear, then rise one after another while the page scrolls down */
.shop-from .tile{opacity:0;transform:translateY(48px)}
.shop-go .tile{transition:opacity .6s ease-out,transform .9s cubic-bezier(.16,1,.3,1)}
.shop-go .tile:nth-child(2){transition-delay:.09s}
.shop-go .tile:nth-child(3){transition-delay:.18s}
@media (prefers-reduced-motion:reduce){.shop-from .tile{opacity:1;transform:none}.shop-go .tile{transition:none}}

/* "Built on science": the 1967 line and two dated studies, then the tabs */
.since{grid-column:4/13;grid-row:1}
.since__lead{font:var(--dw) clamp(30px,3vw,46px)/1.12 var(--display);letter-spacing:-.014em;max-width:19em}
.since__facts{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);margin-top:clamp(32px,3.2vw,48px)}
.since__facts li{padding-top:16px;border-top:1px solid var(--rule)}
.since__yr{display:block;font:var(--dw) 24px/1 var(--display);color:var(--gold);font-variant-numeric:lining-nums}
.since__facts p{margin-top:12px;font-size:17px;line-height:1.5;max-width:28em}
.since__facts a{color:var(--grey);white-space:nowrap}
.since__facts a:hover{color:var(--paper)}
#studies .fn__tabs{grid-row:2;margin-top:clamp(64px,6vw,96px)}
#studies .fn__panels{grid-row:3}
#studies .fn__more{grid-row:4}

/* band: the founder quote is gone (founder feedback); one line, one sentence, one link */
.band__txt h2{font:var(--dw) clamp(32px,3vw,48px)/1.08 var(--display);letter-spacing:-.014em;max-width:10em}
.band__txt h2+p{margin-top:18px;color:var(--grey);max-width:22em}

/* footer: black, gold button */
.ftr{background:var(--ink);color:var(--paper);--focus:var(--paper);border-top:1px solid var(--rule)}
.ftr ::selection{background:var(--paper);color:var(--ink)}
.nl__label,.nl small,.ftr__base{color:var(--grey)}
.nl input[type=email]{border-color:rgba(255,255,255,.55);color:var(--paper)}
.nl input[type=email]:focus-visible{outline-color:var(--paper)}
.nl__msg{color:var(--paper)}
.nl.is-error input[type=email]{border-color:#ff9d8c;box-shadow:0 0 0 1px #ff9d8c}
.nl.is-error .nl__msg{color:#ff9d8c}
.ftr__nav a{color:var(--grey)}
.ftr__nav a:hover,details.claims summary:hover{color:var(--paper)}

/* ---------- small laptops ---------- */
@media (min-width:821px) and (max-width:1100px){
  .hero__foot p{grid-column:1/8}
  .band__img{grid-column:6/13}
  .band__txt{grid-column:1/6}
  .fn__pts,.fn__keys{grid-column:1/10}
  .essay-head h1{grid-column:1/10}
}

/* ---------- tablets and phones ---------- */
@media (max-width:820px){
  :root{--gut:12px;--h2:30px;--lead:19px;--bookset:19px}
  .g{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rail{grid-column:1/-1}
  .hdr .g{height:64px}
  .hdr__logo{grid-column:1/3}
  .hdr__logo img{height:28px}
  .hdr__nav{display:none}
  .hdr__cta{grid-column:3/5}
  .burger{display:grid;margin-right:-10px}
  .drawer.open{display:flex;flex-direction:column;position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--paper);padding:calc(76px + var(--st)) var(--mr) calc(32px + var(--sb)) var(--ml);overflow-y:auto;overscroll-behavior:contain}
  .drawer a{display:flex;align-items:center;min-height:64px;font:600 34px/1 var(--sans);letter-spacing:-.02em;text-decoration:none}
  .drawer__close{position:absolute;top:calc(10px + var(--st));right:calc(var(--mr) - 10px);width:44px;height:44px;border:0;background:none;color:inherit;font:300 34px/1 var(--sans);cursor:pointer}
  body.nav-open{overflow:hidden}

  /* JUDGE3 #6: three lines at 15.6vw ("Sixty" / "grams of" / "carbohydrate"). No min-height: the gold field ends at the type
     and the button, so the first can shows above the fold at 390 x 844. */
  #hero{min-height:0;align-content:start;padding-block:28px 40px}
  #hero h1{grid-column:1/-1;font-size:calc(15.6vw - .156 * var(--sx));line-height:.92;letter-spacing:-.025em;margin-left:-.03em}
  #hero h1 .br{display:block}
  .hero__foot{grid-column:1/-1;display:block;margin-top:28px}
  .hero__foot p{font-size:19px;margin-bottom:20px}
  .hero__foot .btn{display:inline-flex}
  /* film hero on phones: type, then the film cropped to 4:5 around the can (67% across), then the line and the button */
  #hero.hero--video{min-height:0;align-content:start;padding-block:28px 40px}
  #hero.hero--video h1{grid-column:1/-1;grid-row:1;font-size:calc(15.6vw - .156 * var(--sx));line-height:.92;letter-spacing:-.025em;margin-left:-.03em}
  #hero.hero--video .hero__media{position:relative;inset:auto;z-index:auto;grid-column:1/-1;grid-row:2;margin:24px calc(-1 * var(--mr)) 0 calc(-1 * var(--ml));aspect-ratio:4/5}
  #hero.hero--video .hero__media video{object-position:67% 50%}
  #hero.hero--video .hero__foot{grid-column:1/-1;grid-row:3;margin-top:24px}
  .vidctl{right:calc(var(--mr) - 6px);bottom:4px}

  #flavours{padding-block:56px 48px;row-gap:24px}
  #flavours .rail{display:contents}
  #flavours h2{grid-column:1/-1}
  #flavours .rail>p{grid-column:1/-1;margin-top:-12px;max-width:24em}
  .pack{grid-column:1/-1;order:4;margin-top:0;padding-top:16px;max-width:none}
  .pack h3{display:inline;font-size:inherit;letter-spacing:0}
  .pack h3::after{content:"\00a0\00a0"}
  .pack p{display:inline}
  .cans{grid-column:1/-1;grid-row:auto;order:3;display:flex;gap:12px;margin-inline:calc(-1 * var(--ml)) calc(-1 * var(--mr));padding-inline:var(--ml) var(--mr);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--ml) var(--mr);overscroll-behavior-x:contain;scrollbar-width:none}
  .cans::-webkit-scrollbar{display:none}
  .cans::after{content:"";flex:0 0 calc(var(--mr) - 12px)}
  .cans li{flex:0 0 62%;scroll-snap-align:start}
  .can__img{height:380px}
  .can__cap{margin-top:14px}

  #studies{padding-block:64px 72px;row-gap:20px}
  #studies h2,.fn__tabs,.fn__panels,.fn__more{grid-column:1/-1;grid-row:auto}
  /* WIG A5: each tab's hit area runs 15px above it, 44px in all (::before). The strip gets 15px of padding above and 8px
     below, taken back by negative margins, so nothing moves; the padding also stops the strip's scroll box clipping the
     hit area and the top and bottom of the focus ring. */
  .fn__tabs{gap:0 22px;flex-wrap:nowrap;overflow-x:auto;margin:-15px calc(-1 * var(--mr)) -8px calc(-1 * var(--ml));padding:15px var(--mr) 8px var(--ml);scrollbar-width:none}
  .fn__tabs::-webkit-scrollbar{display:none}
  .fn__tab{position:relative;flex:none;font-size:17px;padding-bottom:6px}
  .fn__tab::before{content:"";position:absolute;inset:-15px 0 0}
  .fn__panels{margin-top:16px}
  .fn__panel{grid-template-columns:1fr;row-gap:0}
  .fn__panel[hidden]{display:none}
  .fn__pts,.fn__keys{grid-column:1/-1}
  .fn__pts{gap:14px}
  .fn__pts p{font-size:21px}
  .fn__keys{margin-top:24px}
  .fn__more{margin-top:12px;display:inline-block;padding:11px 0}
  .band__txt a{margin-top:13px;padding:11px 0}

  #band{grid-template-columns:1fr;align-items:start}
  .band__img{grid-column:1/-1;grid-row:1;margin:0 calc(-1 * var(--mr)) 0 calc(-1 * var(--ml));aspect-ratio:4/5}
  .band__img img{object-position:46% 50%}
  .band__txt{grid-column:1/-1;grid-row:2;padding-block:36px 64px;padding-right:0}
  .band__txt blockquote p{font-size:32px}

  #questions{padding-block:56px 64px;row-gap:20px}
  .faq{grid-column:1/-1}
  .faq summary{min-height:60px;align-items:center;padding:14px 0;font-size:19px}
  .faq details p{padding:0 0 20px;font-size:16px}

  .ftr{padding-block:64px calc(24px + var(--sb));row-gap:48px}
  .ftr__brand,.nl,.ftr__nav,.ftr__base{grid-column:1/-1}
  .ftr__brand{display:none}
  .nl__h{margin-bottom:24px;font-size:34px}
  .nl__row{flex-direction:column;max-width:none}
  .nl input[type=email],.nl .btn{flex:none;height:52px;width:100%}
  .ftr__nav{gap:16px}
  .ftr__nav ul{gap:0}
  .ftr__nav a{min-height:44px}
  .ftr__base{flex-direction:column;gap:8px;margin-top:0}
  details.claims summary{min-height:44px}

  .art-head{padding-block:40px 40px}
  .art-head h1{grid-column:1/-1;font-size:clamp(44px,13vw,64px)}
  .art-head .dek{grid-column:1/-1;margin-top:20px}
  .art{padding-bottom:72px}
  .toc-wrap{grid-column:1/-1;grid-row:1;top:0;z-index:20;margin-inline:calc(-1 * var(--ml)) calc(-1 * var(--mr));background:var(--ink);border-bottom:1px solid var(--rule)}
  .toc{display:flex;gap:0;overflow-x:auto;padding:0 var(--mr) 0 var(--ml);scrollbar-width:none;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .toc::-webkit-scrollbar{display:none}
  html:has(.toc-wrap){scroll-padding-top:64px}
  .toc a{display:flex;align-items:center;min-height:48px;padding:0 12px}
  .toc a:first-child{padding-left:0}
  .art__body{grid-column:1/-1;grid-row:2;padding-top:40px}
  .art__body section{scroll-margin-top:64px;padding-top:48px}
  .art__body h2{font-size:24px}
  .tbl{font-size:14px}
  .tbl__r{grid-template-columns:minmax(0,1.6fr) repeat(var(--cols,2),minmax(0,1fr));column-gap:10px}
  /* JUDGE3 #12: measured at 14px: "Per 100 ml" 70px, "Per can" 51px, "%NRV" 43px, widest figures 56px. One line per header
     cell, about 13px between headers. Same 180px of fixed columns as before, so the name column keeps its width. */
  .tbl--4 .tbl__r{grid-template-columns:minmax(0,1fr) 72px 58px 50px;column-gap:6px}
  .tbl__h{font-size:14px;line-height:1.25;align-items:end}
  #number .pills{flex-wrap:nowrap;gap:0 22px}
  #number .pill{min-height:44px;font-size:16px}
  .nutr{padding-block:56px 64px}
  .nutr h2,.nutr .tbl,.nutr .note{grid-column:1/-1}
  .nutr h2{margin-bottom:24px;max-width:none}
  .nutr .tbl{font-size:14px}
  .art2{padding-block:64px 24px;row-gap:24px}
  .art2+.art2{padding-top:40px}
  .art2 h2,.art2 .faq,.art2 .refs{grid-column:1/-1}
  .art2 .refs{margin-bottom:24px}
  sup a{display:inline-block;padding:8px 4px;margin:-8px -4px}
  .refs a{display:inline-block;padding:6px 0;margin:-6px 0}

  .essay-head{--seal:94vw;min-height:0;padding-block:24px calc(var(--seal) * .645 + 20px)}
  .essay-head h1{grid-column:1/-1;font-size:clamp(56px,17vw,80px)}
  .seal{right:calc(var(--seal) * -.06);bottom:calc(var(--seal) * -.355)}
  #manifesto{padding-block:48px 80px}
  .essay__body{grid-column:1/-1;display:block}
  .essay__body p:first-child{font-size:26px}
}

/* ---------- very small phones (RT3): at 320 px "Carbohydrate" overran its 82 px nutrition cell by 3 px ---------- */
@media (max-width:340px){.nutr .tbl{font-size:13px}}

/* ---------- 7 Nov phones: hero line, film, sub-line, pills; ticker; tiles as a swipe rail ---------- */
@media (max-width:820px){
  #hero.hero--video .hero__txt{display:contents}
  #hero.hero--video h1{grid-column:1/-1;grid-row:1;font-size:clamp(36px,10.4vw,58px);line-height:1.02;letter-spacing:-.02em;margin-left:-.02em}
  #hero.hero--video .hero__media{grid-row:2}
  #hero.hero--video .hero__txt>p{grid-column:1/-1;grid-row:3;margin-top:20px;font-size:19px}
  .hero__btns{grid-column:1/-1;grid-row:4;margin-top:20px}
  .hero__btns .btn{flex:1 1 0;height:48px}
  .ticker{height:40px;font-size:13px}
  .ticker__track li::after{margin-inline:20px}
  #flavours.paper{padding-block:56px 64px}
  .shop__head{grid-column:1/-1;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:24px}
  .shop__head h2{font-size:40px}
  .tiles{grid-column:1/-1;display:flex;gap:12px;margin-inline:calc(-1 * var(--ml)) calc(-1 * var(--mr));padding-inline:var(--ml) var(--mr);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--ml) var(--mr);overscroll-behavior-x:contain;scrollbar-width:none}
  .tiles::-webkit-scrollbar{display:none}
  .tiles::after{content:"";flex:0 0 calc(var(--mr) - 12px)}
  .tile{flex:0 0 78%;scroll-snap-align:start}
  #flavours .pack{grid-column:1/-1;margin-top:32px}
  #flavours .pack .btn{margin-left:0;height:44px}
  .since{grid-column:1/-1;grid-row:auto;margin-bottom:48px}
  #studies .fn__tabs,#studies .fn__panels,#studies .fn__more{grid-row:auto}
  #studies .fn__tabs{margin-top:-15px}
  .since__lead{font-size:30px}
  .since__facts{grid-template-columns:1fr;gap:20px;margin-top:28px}
  .band__txt h2{font-size:34px}
}