/* Gut Pathways site styles: components of the design system and the home page.
   Colors, fonts, spacing and radii come from tokens.css as var(--name).
   The body carries the .gp class, which sets the ground and the base font. */
/* Gut Pathways components. Colors, fonts, spacing and radii come from tokens.css (var(--name)).
   Sizes below mirror the type styles in tokens.json. Wrap a page in .gp to get the ground and the base font. */
.gp{background:var(--paper);color:var(--ink);font-family:var(--font-serif);font-size:1.125rem;line-height:1.667;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.gp *, .gp *::before, .gp *::after{box-sizing:border-box}
.gp :focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.gp a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
.gp a:hover{color:var(--accent-press)}
.gp-on-sand a{color:var(--accent-deep)}
/* Button */
.gp-button{display:inline-flex;align-items:center;gap:var(--space-2);min-height:46px;padding:var(--space-3) var(--space-5);border:2px solid transparent;border-radius:var(--radius-pill);font-family:var(--font-sans);font-size:.9375rem;line-height:1.467;font-weight:550;text-decoration:none;cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.gp .gp-button--primary, .gp-button--primary{background:var(--accent);color:var(--on-accent)}
.gp .gp-button--primary:hover, .gp-button--primary:hover{background:var(--accent-press);color:var(--on-accent)}
.gp .gp-button--secondary, .gp-button--secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.gp .gp-button--secondary:hover, .gp-button--secondary:hover{background:var(--ink);color:var(--paper)}
.gp .gp-button--quiet, .gp-button--quiet{background:transparent;color:var(--ink);padding-inline:0;border-radius:var(--radius-xs);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em}
.gp .gp-button--quiet:hover, .gp-button--quiet:hover{color:var(--accent)}
/* Meta line: plain text tags, never pills */
.gp-meta{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);margin:0;padding:0;list-style:none;font-family:var(--font-sans);font-size:.8125rem;line-height:1.46;color:var(--ink-soft)}
.gp-meta__main{font-weight:600;color:var(--ink)}
.gp-meta a{color:inherit;text-decoration:none}
.gp-meta a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.25em}
.gp-on-sand .gp-meta a:hover{color:var(--accent-deep)}
/* Prose */
.gp-prose{max-width:var(--measure);font-size:1.125rem;line-height:1.667}
.gp-prose>*{margin-block:0}
.gp-prose>*+*{margin-top:var(--space-4)}
.gp-prose h1{font-size:clamp(2.125rem,5vw,2.75rem);line-height:1.14;font-weight:500;letter-spacing:-.005em;text-wrap:balance}
.gp-prose h2{font-size:clamp(1.625rem,3.4vw,2rem);line-height:1.25;font-weight:500;margin-top:var(--space-8);text-wrap:balance}
.gp-prose h3{font-size:1.375rem;line-height:1.36;font-weight:600;margin-top:var(--space-6)}
.gp-prose .gp-lead{font-size:1.3125rem;line-height:1.57;color:var(--ink)}
.gp-prose .gp-byline{font-family:var(--font-sans);font-size:.8125rem;line-height:1.46;color:var(--ink-soft)}
.gp-prose blockquote{margin-inline:0;padding:0;font-size:1.5rem;line-height:1.45;font-style:normal;font-weight:500;letter-spacing:-.005em;max-width:none}
.gp-prose code, .gp-data{font-family:var(--font-mono);font-size:.875rem;line-height:1.57}
.gp-prose figure{margin-inline:0}
.gp-prose figcaption{font-family:var(--font-sans);font-size:.8125rem;line-height:1.46;color:var(--ink-soft);margin-top:var(--space-2)}
.gp-prose ul, .gp-prose ol{padding-left:1.25em}
.gp-prose li+li{margin-top:var(--space-2)}
.gp-cite{font-family:var(--font-sans);font-size:.8125rem;line-height:1.46;color:var(--ink-soft)}
/* Notice */
.gp-notice{background:var(--sand);color:var(--ink);border-radius:var(--radius-sm);padding:var(--space-5) var(--space-6);max-width:var(--measure);font-size:1rem;line-height:1.625}
.gp-notice strong{font-family:var(--font-sans);font-weight:650;display:block;margin-bottom:var(--space-1)}
.gp-notice a{color:var(--accent-deep)}
/* Case index */
.gp-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.gp-index__row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr);gap:var(--space-3) var(--space-7);padding:var(--space-5) var(--space-2);border-bottom:1px solid var(--rule);transition:background-color .18s ease}
.gp-index__row:hover{background:var(--sand)}
.gp-index__title{margin:0;font-size:1.375rem;line-height:1.36;font-weight:600}
.gp-index__title a{color:var(--ink);text-decoration:none}
.gp-index__title a:hover{color:var(--accent-deep);text-decoration:underline;text-underline-offset:.2em}
.gp-index__summary{margin:var(--space-2) 0 0;font-size:1rem;line-height:1.625;color:var(--ink-soft);max-width:var(--measure)}
.gp-index__tags{display:flex;flex-direction:column;gap:var(--space-1);align-content:flex-start}
.gp-index__tags .gp-meta{flex-direction:column;gap:var(--space-1)}
@media (max-width:44rem){
.gp-index__row{grid-template-columns:minmax(0,1fr)}
}
/* Hero band: ink field with paper text */
.gp-hero{background:var(--ink);color:var(--paper)}
.gp .gp-hero a{color:var(--paper)}
.gp .gp-hero .gp-button--invert, .gp-hero .gp-button--invert{background:var(--paper);color:var(--ink)}
.gp .gp-hero .gp-button--invert:hover{background:var(--sand);color:var(--ink)}
/* Topic index: large names between hairlines */
.gp-topics-label{margin:0 0 var(--space-3);font-family:var(--font-sans);font-size:.8125rem;line-height:1.46;font-weight:600;letter-spacing:.02em;color:var(--ink-soft)}
.gp-topics{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.gp-topics li{border-bottom:1px solid var(--rule)}
.gp .gp-topics a{display:block;padding:var(--space-3) 0;font-size:clamp(1.375rem,2.6vw,1.75rem);line-height:1.3;font-weight:500;color:var(--ink);text-decoration:none;transition:transform .2s ease,color .2s ease}
.gp .gp-topics a:hover{color:var(--accent);transform:translateX(8px)}
.gp-on-sand .gp-topics a:hover{color:var(--accent-deep)}
/* Article feature: one lead, a stack of rows */
.gp-articles{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-7) var(--space-8)}
.gp-feature{display:flex;flex-direction:column;gap:var(--space-4);color:var(--ink);text-decoration:none}
.gp .gp-feature{color:var(--ink);text-decoration:none}
.gp-feature__art{aspect-ratio:4/3;background:var(--sage);border-radius:var(--radius-sm);overflow:hidden}
.gp-feature__art svg{display:block;width:100%;height:100%}
.gp-feature__title{margin:0;font-size:clamp(1.75rem,3.6vw,2.5rem);line-height:1.15;font-weight:500;text-wrap:balance}
.gp-feature:hover .gp-feature__title{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.gp-feature__dek{margin:0;max-width:34rem;font-size:1.0625rem;line-height:1.6;color:var(--ink)}
.gp-stack{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.gp-stack li{padding:var(--space-5) 0;border-bottom:1px solid var(--rule)}
.gp-stack h3{margin:0 0 var(--space-2);font-size:1.375rem;line-height:1.3;font-weight:600}
.gp .gp-stack h3 a{color:var(--ink);text-decoration:none}
.gp .gp-stack h3 a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}
@media (max-width:52rem){
.gp-articles{grid-template-columns:minmax(0,1fr)}
}
/* Excerpt signup */
.gp-signup{max-width:30rem;font-family:var(--font-sans)}
.gp-signup h3{margin:0;font-family:var(--font-serif);font-size:1.375rem;line-height:1.36;font-weight:600}
.gp-signup p{margin:var(--space-2) 0 0;font-size:.9375rem;line-height:1.5;color:var(--ink-soft)}
.gp-signup__row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.gp-signup input[type=email]{flex:1 1 14rem;min-height:46px;padding:var(--space-3) var(--space-4);border:2px solid var(--ink);border-radius:var(--radius-xs);background:var(--paper);color:var(--ink);font:inherit;font-size:1rem}
.gp-signup input[type=email]::placeholder{color:var(--ink-soft)}
.gp-signup__consent{display:flex;gap:var(--space-3);align-items:flex-start;margin-top:var(--space-4);font-size:.8125rem;line-height:1.46;color:var(--ink-soft)}
.gp-signup__consent input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent)}
.gp-signup__consent a{color:var(--accent-deep)}
/* Beads tube */
@media (prefers-reduced-motion:reduce){
.gp-button, .gp-index__row{transition:none}
}
body{margin:0;background:var(--paper)}
.gp-wrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)}
.gp-nav a{font-family:var(--font-sans);font-size:.9375rem;font-weight:500;text-decoration:none}
.gp .hx .gp-nav a:hover{color:var(--signal);text-decoration:underline;text-underline-offset:.3em}
.gp-footer a{color:var(--ink-soft)}
.gp .hx .gp-button--invert{background:var(--paper);color:var(--ink)}
.gp .hx .gp-button--invert:hover{background:var(--sand);color:var(--ink)}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;margin-bottom:40px}
.sec-head h2{margin:0;font-size:clamp(1.75rem,3.6vw,2.5rem);line-height:1.15;font-weight:500}
.sec-head a{font-family:var(--font-sans);font-size:.9375rem;font-weight:500}
.hx{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);min-height:max(640px,min(100vh,900px));min-height:max(640px,min(100svh,900px));display:flex;flex-direction:column}
.gp .hx a, .gp .hx a:hover{color:var(--paper)}
.hx-art{position:absolute;z-index:0;aspect-ratio:740/880;height:min(112vh,980px);height:min(112svh,980px);right:-6%;top:-3vh;top:-3svh;pointer-events:none}
.hx-head{position:relative;z-index:4;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-block:24px;width:100%}
.hx-brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;font-family:var(--font-serif);font-size:1.25rem;font-weight:600}
.hx-body{position:relative;z-index:2;flex:1;display:flex;align-items:center;padding-block:32px 96px;width:100%}
.hx-text{max-width:34rem;display:flex;flex-direction:column;gap:24px}
.hx-text h1{margin:0;font-size:clamp(2.5rem,6.4vw,4.5rem);line-height:1.02;font-weight:500;letter-spacing:-.015em;text-wrap:balance}
.hx-lead{margin:0;font-size:clamp(1.0625rem,2.2vw,1.3125rem);line-height:1.57;max-width:30rem}
.hero-stations{display:grid;margin-top:12px;padding:20px 24px;max-width:30rem;min-height:9.5rem;border-radius:var(--radius-md);background:color-mix(in srgb,var(--paper) 9%,transparent);border:1px solid color-mix(in srgb,var(--paper) 22%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.p{animation:hx-drift var(--d,14s) ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes hx-drift{from{transform:translate(0,0)}to{transform:translate(var(--dx,20px),var(--dy,-24px))}}
.hx-ripple{opacity:0;transform-box:fill-box;transform-origin:center;animation:hx-ripple 2.6s ease-out infinite}
@keyframes hx-ripple{0%{opacity:.4;transform:scale(.55)}100%{opacity:0;transform:scale(1.3)}}
.hero-station{grid-area:1/1;opacity:0;animation:hero-station 14s ease infinite}
.hero-station:nth-child(2){animation-delay:3.5s}
.hero-station:nth-child(3){animation-delay:7s}
.hero-station:nth-child(4){animation-delay:10.5s}
.hero-station h2{margin:0;font-size:1.375rem;line-height:1.36;font-weight:600}
.hero-station p{margin:8px 0 0;font-size:1.0625rem;line-height:1.6}
@keyframes hero-station{0%{opacity:0;transform:translateY(10px)}4%{opacity:1;transform:none}22%{opacity:1;transform:none}26%{opacity:0;transform:none}100%{opacity:0}}
.gp-feature__art svg{transition:transform .5s ease}
.gp-feature:hover .gp-feature__art svg{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){
.hero-station{animation:none}
.hero-station:first-child{opacity:1}
.p, .hx-ripple{animation:none}
.gp-feature__art svg{transition:none}
}
.sr{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* wordmark */
.wm{display:inline-flex;flex-direction:column;line-height:1;font-size:1.3rem;letter-spacing:-.005em}
.wm b{color:var(--signal);font-weight:600}
.wm-2{margin-left:.95em;margin-top:.12em}
/* burger and mobile menu */
.burger{display:none;position:relative;width:44px;height:44px;cursor:pointer}
.burger span{position:absolute;left:9px;height:2.5px;border-radius:2px;background:var(--paper);transition:transform .3s ease,top .3s ease,width .3s ease}
.burger .b1{top:15px;width:26px}
.burger .b2{top:26px;width:14px}
.burger i{position:absolute;left:26px;top:23.5px;width:8px;height:8px;border-radius:50%;background:var(--signal);transition:transform .3s ease}
#nav-toggle:checked ~ .burger .b1{top:21px;left:10px;width:24px;transform:rotate(45deg)}
#nav-toggle:checked ~ .burger .b2{top:21px;left:10px;width:24px;transform:rotate(-45deg)}
#nav-toggle:checked ~ .burger i{transform:scale(0)}
#nav-toggle:focus-visible ~ .burger{outline:2px solid var(--signal);outline-offset:2px;border-radius:8px}
.nav-scrim{display:none;position:fixed;inset:0;z-index:5;background:color-mix(in srgb,var(--ink) 38%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.nav-panel{display:none;position:absolute;z-index:6;top:calc(100% - 10px);right:var(--gutter);width:min(58vw,300px);padding:10px;border-radius:var(--radius-md);background:linear-gradient(color-mix(in srgb,var(--paper) 13%,transparent),color-mix(in srgb,var(--paper) 13%,transparent)),color-mix(in srgb,var(--ink) 62%,transparent);border:1px solid color-mix(in srgb,var(--paper) 28%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top right;transition:opacity .28s ease,transform .28s ease,visibility .28s}
.gp .hx .nav-panel a{display:flex;align-items:baseline;gap:14px;padding:13px 14px;border-radius:10px;font-family:var(--font-sans);font-size:1.0625rem;font-weight:500;text-decoration:none;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease,background-color .2s ease}
.gp .hx .nav-panel a:hover{background:color-mix(in srgb,var(--paper) 12%,transparent)}
.np-n{font-family:var(--font-sans);font-size:.75rem;color:var(--signal)}
#nav-toggle:checked ~ .nav-scrim, #nav-toggle:checked ~ .nav-panel{opacity:1;visibility:visible}
#nav-toggle:checked ~ .nav-panel{transform:none}
#nav-toggle:checked ~ .nav-panel a{opacity:1;transform:none}
#nav-toggle:checked ~ .nav-panel a:nth-child(1){transition-delay:.05s}
#nav-toggle:checked ~ .nav-panel a:nth-child(2){transition-delay:.09s}
#nav-toggle:checked ~ .nav-panel a:nth-child(3){transition-delay:.13s}
#nav-toggle:checked ~ .nav-panel a:nth-child(4){transition-delay:.17s}
#nav-toggle:checked ~ .nav-panel a:nth-child(5){transition-delay:.21s}
#nav-toggle:checked ~ .nav-panel a:nth-child(6){transition-delay:.25s}
/* hero on tablet and phone: the tube stays where it was and continues into the next section */
.hx-cont{display:none;position:absolute;z-index:1;left:0;right:0;top:0;height:50vh;height:50svh;overflow:hidden;pointer-events:none}
.hx-cont-art{position:absolute;aspect-ratio:740/880;height:50vh;height:50svh;right:-22%;top:-42svh}
.art-sec{position:relative}
@media (max-width:52rem){
.hx{min-height:100svh}
.hx-body{align-items:flex-start;padding-block:16px 0}
.hx-art{height:50vh;height:50svh;top:auto;bottom:-8vh;bottom:-8svh;right:-22%}
.hx-cont{display:block}
}
@media (max-width:48rem){
.hx-head{flex-wrap:nowrap}
.gp-nav{display:none !important}
.burger{display:block}
.nav-scrim, .nav-panel{display:block}
}
@media (max-width:40rem){
.hero-stations{display:none}
}
/* oval meta element */
.ov{display:inline-flex;align-items:center;gap:10px;padding:5px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);background:radial-gradient(90% 180% at 0% 0%,rgba(232,136,63,.30),transparent 62%),radial-gradient(90% 180% at 100% 100%,rgba(111,140,133,.34),transparent 62%),color-mix(in srgb,var(--paper) 55%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-family:var(--font-sans);font-size:.8125rem;line-height:1.3;color:var(--ink);white-space:nowrap}
.ov b{font-weight:600}
.ov i{width:1px;height:12px;background:color-mix(in srgb,var(--ink) 30%,transparent)}
.ov i:last-child{display:none}
.ov span{color:var(--ink-soft)}
.ov--img{position:absolute;left:18px;bottom:18px;background:radial-gradient(90% 180% at 0% 0%,rgba(232,136,63,.28),transparent 62%),radial-gradient(90% 180% at 100% 100%,rgba(111,140,133,.3),transparent 62%),color-mix(in srgb,var(--paper) 80%,transparent);border-color:color-mix(in srgb,var(--paper) 60%,transparent)}
.gp-index__tags{align-content:flex-start}
/* articles */
.lead-img{position:relative;aspect-ratio:16/10;border-radius:var(--radius-md);overflow:hidden;background:radial-gradient(60% 90% at 18% 18%,rgba(232,136,63,.75),transparent 62%),radial-gradient(70% 90% at 88% 82%,rgba(111,140,133,.95),transparent 64%),radial-gradient(50% 70% at 60% 40%,rgba(213,226,215,.35),transparent 70%),var(--ink)}
.gp-feature .gp-feature__title{margin-top:4px}
.gp-stack li{padding:var(--space-5) 0}
.stack-row{display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-decoration:none}
.gp .stack-row{color:var(--ink);text-decoration:none}
.stack-t{display:block;font-size:1.375rem;line-height:1.3;font-weight:600}
.gp .stack-row:hover .stack-t{color:var(--accent);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
/* topics options */
.topics-all{cursor:pointer;font-family:var(--font-sans);font-size:.9375rem;font-weight:500;color:var(--accent);text-decoration:underline;text-underline-offset:.28em;text-decoration-thickness:1px}
.rail-wrap{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 40px 20px 0;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.gp .rcard{flex:0 0 236px;height:300px;scroll-snap-align:start;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:20px;border-radius:20px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 70%,transparent) 0%,transparent 68%),var(--paper);color:var(--ink);text-decoration:none;cursor:pointer;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.gp .rcard:hover{transform:translateY(-8px)}
.rc-name{font-size:1.75rem;line-height:1.15;font-weight:500}
.topics-all:hover{color:var(--accent-press)}
.drawer-scrim{position:fixed;inset:0;z-index:40;background:color-mix(in srgb,var(--ink) 40%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.drawer{position:fixed;z-index:41;top:0;right:0;height:100%;width:min(92vw,440px);overflow:auto;padding:32px 32px 48px;color:var(--paper);background:linear-gradient(color-mix(in srgb,var(--paper) 10%,transparent),color-mix(in srgb,var(--paper) 10%,transparent)),color-mix(in srgb,var(--ink) 82%,transparent);border-left:1px solid color-mix(in srgb,var(--paper) 24%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);transform:translateX(104%);visibility:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),visibility .45s}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.drawer-head h3{margin:0;font-size:1.75rem;line-height:1.2;font-weight:500}
.drawer-close{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer;border:1px solid color-mix(in srgb,var(--paper) 35%,transparent);transition:background-color .2s ease}
.drawer-close:hover{background:color-mix(in srgb,var(--paper) 14%,transparent)}
.drawer .gp-topics-label{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.drawer ul{list-style:none;margin:0;padding:0;border-top:1px solid color-mix(in srgb,var(--paper) 24%,transparent)}
.drawer li{border-bottom:1px solid color-mix(in srgb,var(--paper) 24%,transparent)}
.gp .drawer li a{display:block;padding:12px 0;font-size:1.375rem;line-height:1.3;font-weight:500;color:var(--paper);text-decoration:none;transition:transform .2s ease,color .2s ease}
.gp .drawer li a:hover{color:var(--signal);transform:translateX(8px)}
#topics-toggle:checked ~ .drawer-scrim{opacity:1;visibility:visible}
#topics-toggle:checked ~ .drawer{transform:none;visibility:visible}
/* notebook */
@media (max-width:40rem){
.gp-wrap .signup-card{grid-template-columns:minmax(0,1fr);padding:28px 24px}
.bk{width:200px}
.seal{right:-44px;bottom:-24px;width:100px;height:100px}
}
@media (prefers-reduced-transparency:reduce){
.ov, .nav-panel, .drawer{-webkit-backdrop-filter:none;backdrop-filter:none}
.nav-panel, .drawer{background:var(--ink)}
}
.bio-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.07);display:block}
.signup-card input[type=email]{min-width:0;max-width:100%;box-sizing:border-box}
/* book band */
.bk-glow{position:absolute;left:-10%;top:-10%;width:60%;height:120%;background:radial-gradient(closest-side,rgba(63,95,119,.55),rgba(63,95,119,0));pointer-events:none}
.bk-stage{perspective:1400px;width:max-content;margin:0 0 36px 8px;position:relative}
.bk-float{position:relative;animation:bk-bob 7s ease-in-out infinite alternate}
@keyframes bk-bob{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.bk{position:relative;width:236px;transform:rotateY(-17deg) rotateX(3deg);transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1);border-radius:3px 8px 8px 3px;box-shadow:-22px 26px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06)}
.bk:hover{transform:rotateY(-5deg) rotateX(1deg) translateY(-4px)}
.bk img{display:block;width:100%;height:auto;border-radius:3px 8px 8px 3px}
.bk::before{content:"";position:absolute;inset:0 auto 0 0;width:9px;border-radius:3px 0 0 3px;background:linear-gradient(90deg,rgba(0,0,0,.4),rgba(255,255,255,.14) 70%,rgba(255,255,255,0))}
.bk::after{content:"";position:absolute;inset:0;border-radius:3px 8px 8px 3px;background:linear-gradient(115deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%);pointer-events:none}
.seal{position:absolute;right:-58px;bottom:-30px}
.seal-ring{transform-origin:60px 60px;animation:seal-spin 26s linear infinite}
@keyframes seal-spin{to{transform:rotate(360deg)}}
.bk-title{margin:0;font-size:clamp(2rem,4vw,2.75rem);line-height:1.1;font-weight:500}
.bk-sub{margin:14px 0 26px;max-width:26rem;font-size:1.0625rem;line-height:1.6;color:color-mix(in srgb,var(--paper) 86%,transparent)}
.signup-card{position:relative;margin-top:72px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px 56px;align-items:center;padding:32px 40px;border-radius:var(--radius-md);background:var(--paper);color:var(--ink)}
.signup-card h3{margin:0;font-size:1.5rem;line-height:1.25;font-weight:600}
.signup-card p{margin:8px 0 0;font-family:var(--font-sans);font-size:.9375rem;line-height:1.5;color:var(--ink-soft)}
.signup-card input[type=email]{flex:1 1 14rem;min-height:46px;padding:var(--space-3) var(--space-4);border:2px solid var(--ink);border-radius:var(--radius-xs);color:var(--ink);font:inherit;font-size:1rem}
.signup-card input[type=email]::placeholder{color:var(--ink-soft)}
.signup-card .gp-signup__consent{color:var(--ink-soft)}
.gp .signup-card .gp-signup__consent a{color:var(--accent-deep)}
.gp .signup-card .gp-button--primary{color:var(--on-accent)}
/* bio */
.bio{display:flex;flex-wrap:wrap;gap:32px 48px;align-items:center;margin:0;padding:48px;border-radius:var(--radius-md);background:var(--sand);color:var(--ink)}
.bio-photo{position:relative;flex:0 0 168px;width:168px;height:168px}
.bio-ring{position:absolute;inset:0;width:100%;height:100%}
.bio-img{position:absolute;inset:14px;border-radius:50%;background:var(--sage);display:grid;place-items:center;font-size:2.5rem;font-weight:500;color:var(--ink);overflow:hidden}
.bio-body{flex:1 1 320px;min-width:0;max-width:44rem}
.bio-eyebrow{margin:0;font-family:var(--font-sans);font-size:.875rem;font-weight:600;color:var(--ink-soft)}
.bio-name{margin:4px 0 14px;font-size:clamp(1.75rem,3.6vw,2.5rem);line-height:1.15;font-weight:500}
.bio-body p{margin:0 0 12px;font-size:1.0625rem;line-height:1.65}
.gp .bio a:not(.gp-button){color:var(--accent-deep)}
.bio-cta{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:20px}
@media (max-width:40rem){
.bio{padding:32px 24px}
.bio-photo{flex-basis:132px;width:132px;height:132px}
}
/* ===== book screen options (A edge index, B top index, C fan) ===== */
.bx{position:relative;overflow:hidden;background:var(--ink);color:var(--paper)}
.bx + .bx{border-top:1px solid color-mix(in srgb,var(--paper) 16%,transparent)}
.gp .bx a{color:var(--paper)}
.gp .bx .gp-button--invert{background:var(--paper);color:var(--ink)}
.gp .bx .gp-button--invert:hover{background:var(--sand);color:var(--ink)}
.bx-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
/* screen 1: the book */
.bx-s1{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:min(100vh,740px);min-height:min(100svh,740px);padding:40px 24px 48px}
.bx .bk-stage{margin:0 0 30px 8px}
.bx .bk{width:250px}
.bx .seal{--s:140px;width:var(--s);height:var(--s);right:calc(var(--s) * -.5);top:30%;bottom:auto}
.bx .bk-title{margin-top:6px}
/* screen 2: dividers and page */
.bx-s2{position:relative;padding-block:36px 56px;min-width:0}
.bx-sheet{position:relative;height:var(--sh);perspective:1800px;min-width:0;--lp:36px 36px 28px 44px}
.bx-ruled{background-color:var(--on-accent);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,color-mix(in srgb,var(--rule) 26%,transparent) 35px,color-mix(in srgb,var(--rule) 26%,transparent) 36px);background-position:0 18px}
.bx-page{position:absolute;inset:0;overflow:hidden;border-radius:6px 16px 16px 6px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.bx-page::before, .bx-leaf::before{content:"";position:absolute;left:18px;top:22px;bottom:22px;width:2px;background:repeating-linear-gradient(to bottom,color-mix(in srgb,var(--ink) 45%,transparent) 0 10px,transparent 10px 20px)}
.bx-leaf{display:none;position:absolute;inset:0;padding:var(--lp);color:var(--ink);border-radius:6px 16px 16px 6px;overflow:hidden;transform-origin:left center;backface-visibility:hidden;animation:bx-turn .75s cubic-bezier(.25,.7,.2,1) both}
@keyframes bx-turn{from{transform:perspective(1500px) rotateY(-112deg);opacity:0}30%{opacity:1}to{transform:perspective(1500px) rotateY(0)}}
.bx-cover{position:absolute;inset:0;z-index:2;border-radius:6px 16px 16px 6px;background:linear-gradient(135deg,#3d6c68,#2a5551);box-shadow:0 30px 60px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.1);transform-origin:left center;transition:transform .95s cubic-bezier(.3,.7,.2,1),opacity .5s ease .35s;backface-visibility:hidden;display:grid;place-items:center}
.bx-cover::before{content:"";position:absolute;inset:14px;border:1.5px dashed rgba(249,245,236,.3);border-radius:4px 12px 12px 4px}
.bx-band{position:absolute;top:0;bottom:0;right:40px;width:14px;background:var(--signal);box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.bx-label{position:relative;display:flex;flex-direction:column;gap:6px;align-items:center;padding:18px 24px;border-radius:6px;background:var(--on-accent);color:var(--ink);text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.bx-label strong{font-size:1.5rem;line-height:1.1;font-weight:500}
.bx-label span{font-family:var(--font-sans);font-size:.8125rem;color:var(--ink-soft)}
.bx:has(.bx-r:not(.bx-r0):checked) .bx-cover{transform:rotateY(-112deg);opacity:0;pointer-events:none}
.bx-close{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;cursor:pointer;color:var(--ink-soft);transition:background-color .2s ease}
.bx-close:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.bx-icon{width:104px;height:104px;margin:0 0 10px -6px}
.bx-icon img{display:block;width:100%;height:100%;object-fit:contain}
.bx-leaf h3{margin:6px 0 0;font-size:clamp(1.5rem,2.6vw,2.125rem);line-height:1.12;font-weight:500;text-wrap:balance}
.bx-leaf h3::after{content:"";display:block;width:56px;height:4px;border-radius:2px;background:var(--tc);margin-top:14px}
.bx-tag{margin:16px 0 0;max-width:26rem;font-size:1.125rem;line-height:1.5;font-style:italic}
.bx-kw{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:18px 0 0;font-family:var(--font-sans);font-size:.8125rem;color:var(--ink-soft)}
.bx-kw i{width:1px;height:12px;background:color-mix(in srgb,var(--ink) 30%,transparent)}
/* the dividers */
.bx-tab{--th:52px;--gd:270deg;display:flex;align-items:center;box-sizing:border-box;min-width:0;height:var(--th);padding:0 12px 0 16px;border-radius:14px 0 0 14px;background:linear-gradient(var(--gd),color-mix(in srgb,var(--tc) 78%,#000),color-mix(in srgb,var(--tc) 96%,transparent) 22%);color:var(--tx);font-family:var(--font-sans);font-size:.74rem;font-weight:700;line-height:1.15;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),-3px 4px 10px rgba(0,0,0,.28);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.bx-tab{position:relative}
.bx .bx-r{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.bx-tab:hover{--sel:.5}
.bx-tab:has(input:checked){--sel:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),-6px 8px 18px rgba(0,0,0,.35)}
.bx-tab:has(input:focus-visible){outline:2px solid var(--signal);outline-offset:3px}
.bx-tt{display:block;text-wrap:balance}
/* A: edge index */
.bx-a{position:relative;height:var(--sh);padding-left:16px;--tw:150px}
.bx-a .bx-sheet{margin-right:calc(var(--tw) - 20px)}
.bx-a .bx-tabs{position:absolute;right:0;top:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px;z-index:3}
.bx-a .bx-tab{width:var(--wm);transform:translateX(calc(var(--sel,0) * -10px))}
/* B: top index */
.bx-in{display:block}
/* mobile sizes */
.bx--a{--sh:565px}
@media (max-width:63.99rem){
.bx-a{padding-left:0}
.bx-a .bx-sheet{--lp:36px 36px 28px 26px}
.bx-a .bx-page, .bx-a .bx-leaf, .bx-a .bx-cover{border-radius:0 16px 16px 0}
.bx-a .bx-page::before, .bx-a .bx-leaf::before{display:none}
.bx--a .bx-s2{padding-right:0}
.bx-leaf h3{font-size:1.375rem}
.bx-kw i{display:none}
.bx-kw{gap:4px 14px}
}
/* desktop */
@media (min-width:64rem){
.bx-grid{--gx:max(24px,calc((100% - 1168px) / 2));grid-template-columns:minmax(0,470px) minmax(0,1fr);align-items:center;min-height:min(100vh,800px);min-height:min(100svh,800px);padding-left:var(--gx)}
.bx-s1{padding:56px 0;min-height:0}
.bx .bk{width:300px}
.bx .seal{--s:200px;right:calc(var(--s) * -.72);top:28%}
.bx-s2{padding-block:56px}
.bx-sheet{--lp:46px 56px 40px 64px}
.bx-page::before, .bx-leaf::before{left:28px;top:26px;bottom:26px}
.bx-icon{width:132px;height:132px;margin-bottom:16px}
.bx-tag{font-size:1.3125rem}
.bx-band{right:64px;width:16px}
.bx-label{padding:22px 34px}
.bx-label strong{font-size:1.625rem}
.bx--a{--sh:580px}
.bx-tab{font-size:.9375rem;padding-left:22px}
.bx-a{--tw:214px;padding-left:0}
.bx-a .bx-tab{--th:54px}
.bx-a .bx-tab{width:var(--w)}
.bx-a .bx-tabs{gap:6px}
}
/* signup band after the options */
.bx-sign{background:var(--ink);color:var(--paper);padding-block:0 96px}
@media (prefers-reduced-motion:reduce){
.bx-leaf{animation:none}
.bx-cover, .bx-tab{transition:none}
}
/* case pills hug their text */
.gp-index__tags{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.gp-index__tags .ov{width:fit-content;max-width:100%;flex:none}
@media (max-width:48rem){
.bio{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;padding:24px 18px;margin-inline:-8px}
.bio-body{display:contents}
.bio .bio-photo{grid-row:1 / span 2;grid-column:1;flex:none;width:92px;height:92px;align-self:center}
.bio .bio-eyebrow{grid-column:2;grid-row:1;align-self:end}
.bio .bio-name{grid-column:2;grid-row:2;align-self:start;margin:2px 0 0;font-size:1.5rem}
.bio-body p:not(.bio-eyebrow), .bio .bio-cta{grid-column:1 / -1}
.bio .bio-name + p{margin-top:20px}
}
@media (min-width:48.01rem){
.bio{padding:40px}
}
.bx-a .bx-close{right:48px}
.bx-a .bx-tab::after{content:"";position:absolute;left:calc(100% - 1px);top:0;bottom:0;width:24px;background:color-mix(in srgb,var(--tc) 78%,#000);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.bx:has(#a1:checked) .bx-leaf[data-i="1"]{display:block}
.bx:has(#a2:checked) .bx-leaf[data-i="2"]{display:block}
.bx:has(#a3:checked) .bx-leaf[data-i="3"]{display:block}
.bx:has(#a4:checked) .bx-leaf[data-i="4"]{display:block}
.bx:has(#a5:checked) .bx-leaf[data-i="5"]{display:block}
.bx:has(#a6:checked) .bx-leaf[data-i="6"]{display:block}
.bx:has(#a7:checked) .bx-leaf[data-i="7"]{display:block}
.bx:has(#a8:checked) .bx-leaf[data-i="8"]{display:block}
.bx:has(#a9:checked) .bx-leaf[data-i="9"]{display:block}
.bx:has(#a10:checked) .bx-leaf[data-i="10"]{display:block}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
a, label, button, summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.gp{overflow-x:clip}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
}
/* topics: two rows of cards, name bottom left */
.rail-wrap{-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
.rail{display:grid;grid-template-rows:repeat(2,142px);grid-auto-flow:column dense;grid-auto-columns:clamp(210px,72vw,256px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 48px 18px 0;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 35%,transparent) transparent}
.rail::-webkit-scrollbar{display:block;height:6px}
.rail::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 35%,transparent);border-radius:3px}
.gp .rcard{flex:none;height:auto;min-height:0;justify-content:flex-end;padding:18px 20px;border-radius:18px}
.gp .rcard--r1{grid-row:1}
.gp .rcard--r2{grid-row:2}
.rcard .rc-name{font-size:1.5rem;line-height:1.15;text-wrap:balance}
.gp .rcard:hover{transform:translateY(-5px)}
/* book: notebook a little wider (under the dividers), cover on the closed notebook, seal next to the button */
.bx-s1{min-height:0}
.bx-cta{display:flex;align-items:center;flex-wrap:nowrap;gap:22px}
.bx-cta .gp-button{flex:none}
.bx .bx-cta .seal{position:static;flex:none;--s:96px;width:var(--s);height:var(--s);right:auto;top:auto}
.bx .bk-title{margin-top:0}
.bx .bk-sub{max-width:30rem}
.bx-a .bx-sheet{--grow:14px;margin-right:calc(var(--tw) - 20px - var(--grow))}
.bx-a .bx-close{right:calc(48px + var(--grow))}
.bx .bk--png{width:270px;transform:none;box-shadow:none;border-radius:0;background:none}
.bx .bk--png:hover{transform:translateY(-4px)}
.bx .bk--png::before, .bx .bk--png::after{display:none}
.bx .bk--png img{border-radius:0}
.bx .bk-stage{margin:0 0 22px 0}
@media (max-width:63.99rem){
.bx-a .bx-leaf{--lp:36px 46px 28px 26px}
}
@media (min-width:64rem){
.bx-a .bx-sheet{--grow:28px}
.bx .bx-cta .seal{--s:124px}
.bx .bk--png{width:330px}
.bx .bk-sub{max-width:28rem}
}
@media (prefers-reduced-motion:reduce){
.seal-ring{animation:none}
}
/* disclaimer box: smaller type, tighter leading */
.gp-notice--sm{font-size:.875rem;line-height:1.42}
.gp-notice--sm strong{font-size:.9375rem;line-height:1.3;margin-bottom:2px}

/* ===== Theme additions: classes introduced when the prototype became a WordPress theme ===== */

/* WordPress helpers (the parent theme's versions are switched off) */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal !important}
.screen-reader-text:focus,.skip-link:focus{background:var(--paper);clip:auto !important;clip-path:none;color:var(--ink);display:block;font-family:var(--font-sans);font-size:.9375rem;font-weight:600;height:auto;left:8px;top:8px;padding:12px 20px;width:auto;z-index:100000;border-radius:var(--radius-sm);box-shadow:0 2px 12px rgba(0,0,0,.25);text-decoration:none}

/* Header on the home page (inside the hero) and on every other page (an ink bar) */
.gp-nav{display:flex;flex-wrap:wrap;gap:8px 28px}
.hx--bar{position:relative;z-index:20;display:block;min-height:0;overflow:visible}
.hx-actions{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.gp .hx .hx-quiet,.gp .hx .hx-quiet:hover{color:var(--paper)}

/* Section spacing (was inline in the prototype) */
.gp-sec{padding-block:96px}
.gp-sec--topics{padding-block:80px}
.gp-sec--sand{background:var(--sand)}
.gp-sec--notice{padding-block:0 96px}
.gp-notice--wide{max-width:none}

/* Footer */
.gp-footer{padding-block:32px 48px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between;font-family:var(--font-sans);font-size:.8125rem;line-height:1.46;color:var(--ink-soft)}
.gp-footer__links{display:flex;flex-wrap:wrap;gap:8px 24px}
.gp-footer__brand{display:inline-flex;align-items:center;gap:10px}
.gp-footer__brand .gp-mark{width:36px;height:auto;flex:none}

/* A real photo in the lead article */
.lead-img__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lead-img .ov--img{z-index:1}

/* Topic cards: optional small drawing at the top right */
.gp .rcard{overflow:hidden}
.rc-art{position:absolute;right:10px;top:10px;width:84px;height:84px;object-fit:contain;pointer-events:none;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.rcard:hover .rc-art{transform:scale(1.06) rotate(-2deg)}
.rcard .rc-name{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.rc-art{transition:none}.rcard:hover .rc-art{transform:none}}

/* Note shown to the site owner only, under an unconnected signup form */
.signup-note{margin:12px 0 0;padding:8px 12px;border-radius:var(--radius-sm);background:var(--sand);color:var(--ink);font-family:var(--font-sans);font-size:.8125rem;line-height:1.46}

/* ---- Social links (1.6.0) ---------------------------------------------- */
.gp-social{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin:0;padding:0;list-style:none;font-family:var(--font-sans);font-size:.9375rem}
.gp-social a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:.25em}
.gp-social a:hover{color:var(--accent-deep)}
.ab2-social{margin-top:var(--space-5)}
.gp-footer__social{flex-basis:100%}
.gp-footer .gp-social{font-size:inherit}
/* 1.7.21: video hero (Customize > Top of the home page > Background) */
.hx--video{--paper:#f9f5ec;--ink:#12403f;background:#010923;color:var(--paper)}
.hx-video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#010923}
.hx-video__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hx-video__veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,9,35,.38) 0%,rgba(1,9,35,.16) 42%,rgba(1,9,35,0) 70%),linear-gradient(0deg,rgba(1,9,35,.22) 0%,rgba(1,9,35,0) 30%)}
.hx-video__grain{position:absolute;inset:-50%;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hx--video .hx-text{text-shadow:0 1px 18px rgba(1,9,35,.35)}
@media (max-width:52rem){
.hx-video__media{top:auto;bottom:0;height:72%;object-position:68% 50%}
.hx-video__veil{background:linear-gradient(180deg,#010923 0%,#010923 26%,rgba(1,9,35,.55) 40%,rgba(1,9,35,.12) 62%,rgba(1,9,35,0) 100%)}
}
@media (min-width:52.01rem) and (max-width:75rem){.hx-video__media{object-position:85% 50%}}

/* 1.7.28 home: Same plate, different chemistry, animated (CSS only) */
.gp-chem{position:relative;overflow:hidden;background:var(--sage);color:var(--ink);padding-block:96px}
.gp-chem::before{content:"";position:absolute;right:-180px;top:-140px;width:620px;height:620px;border-radius:50%;background:repeating-radial-gradient(ellipse at center,transparent 0 22px,color-mix(in srgb,var(--ink) 7%,transparent) 22px 23px);pointer-events:none;animation:gp-chem-breathe 14s ease-in-out infinite alternate}
@keyframes gp-chem-breathe{to{transform:scale(1.06) rotate(4deg)}}
.gp-chem__wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:28px 64px;align-items:start}
.gp-chem__r{position:fixed;top:50%;left:0;width:1px;height:1px;opacity:0;pointer-events:none}
.gp-chem__lead,.gp-chem__plate,.gp-chem__close{grid-column:1}
.gp-chem__kick{font-family:var(--font-sans);font-size:.95rem;font-weight:550;color:var(--accent);margin:0 0 14px}
.gp-chem h2{font-weight:500;font-size:clamp(1.9rem,3.6vw,2.75rem);line-height:1.12;margin:0 0 18px}
.gp-chem h2 em{font-style:italic;color:var(--accent)}
.gp-chem__intro{font-size:1.0625rem;line-height:1.65;color:var(--ink-soft);margin:0 0 24px;max-width:30rem}
.gp-chem__pick{font-family:var(--font-sans);font-size:.875rem;font-weight:600;margin:0}
.gp-chem__plate{display:flex;flex-wrap:wrap;gap:8px;margin-top:-16px}
.gp-chem__plate label{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:3px 13px 3px 3px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);background:color-mix(in srgb,var(--paper) 60%,transparent);font-family:var(--font-sans);font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
.gp-chem__plate label img{width:30px;height:30px;border-radius:50%;background:var(--paper);object-fit:cover;flex:none;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.gp-chem__plate label:hover{transform:translateY(-2px);box-shadow:0 8px 18px -12px color-mix(in srgb,var(--ink) 60%,transparent)}
.gp-chem__plate label:hover img{transform:rotate(-12deg) scale(1.06)}
#gp-chem-0:checked~.gp-chem__plate label[for=gp-chem-0],#gp-chem-1:checked~.gp-chem__plate label[for=gp-chem-1],#gp-chem-2:checked~.gp-chem__plate label[for=gp-chem-2],#gp-chem-3:checked~.gp-chem__plate label[for=gp-chem-3],#gp-chem-4:checked~.gp-chem__plate label[for=gp-chem-4]{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 10px 22px -14px var(--ink)}
#gp-chem-0:focus-visible~.gp-chem__plate label[for=gp-chem-0],#gp-chem-1:focus-visible~.gp-chem__plate label[for=gp-chem-1],#gp-chem-2:focus-visible~.gp-chem__plate label[for=gp-chem-2],#gp-chem-3:focus-visible~.gp-chem__plate label[for=gp-chem-3],#gp-chem-4:focus-visible~.gp-chem__plate label[for=gp-chem-4]{outline:2px solid var(--accent);outline-offset:3px}
.gp-chem__stage{grid-column:2;grid-row:1/span 3;perspective:1200px}
.gp-chem__card{display:none;position:relative;overflow:hidden;border-radius:22px;padding:32px 34px 28px;background:radial-gradient(120% 60% at 0% 0%,color-mix(in srgb,var(--sage) 55%,transparent),transparent 60%),radial-gradient(90% 70% at 100% 100%,color-mix(in srgb,var(--signal) 10%,transparent),transparent 65%),var(--paper);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent),0 30px 60px -34px color-mix(in srgb,var(--ink) 45%,transparent)}
.gp-chem__card::after{content:"";position:absolute;right:-90px;bottom:-110px;width:280px;height:280px;border-radius:50%;background:repeating-radial-gradient(ellipse at center,transparent 0 14px,color-mix(in srgb,var(--ink) 6%,transparent) 14px 15px);pointer-events:none}
#gp-chem-0:checked~.gp-chem__stage .gp-chem__card--0,#gp-chem-1:checked~.gp-chem__stage .gp-chem__card--1,#gp-chem-2:checked~.gp-chem__stage .gp-chem__card--2,#gp-chem-3:checked~.gp-chem__stage .gp-chem__card--3,#gp-chem-4:checked~.gp-chem__stage .gp-chem__card--4{display:block;animation:gp-chem-card .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes gp-chem-card{from{opacity:0;transform:translateY(18px) rotateX(6deg) scale(.98)}to{opacity:1;transform:none}}
.gp-chem__card h3{position:relative;font-weight:500;font-size:1.5rem;line-height:1.25;margin:0 0 24px;animation:gp-chem-up .6s .1s cubic-bezier(.2,.7,.2,1) both}
@keyframes gp-chem-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* the route: a small gut tube that draws itself, beads that pop in, a particle that keeps flowing */
.gp-chem__route{position:relative;margin:0 0 26px}
.gp-chem__track{position:absolute;left:12.5%;right:12.5%;top:12px;height:12px;border-radius:12px;background:color-mix(in srgb,var(--ink) 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent),inset 0 2px 3px color-mix(in srgb,var(--ink) 12%,transparent)}
.gp-chem__fill{position:absolute;inset:3px;border-radius:8px;background:linear-gradient(90deg,var(--bead-1),var(--bead-2),var(--bead-3),var(--signal));transform-origin:left center;animation:gp-chem-draw 1.1s .25s cubic-bezier(.5,0,.2,1) both}
@keyframes gp-chem-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.gp-chem__dot{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 3px color-mix(in srgb,var(--paper) 35%,transparent),0 0 10px 2px color-mix(in srgb,var(--paper) 70%,transparent);opacity:0;animation:gp-chem-flow 3.2s 1.6s linear infinite}
@keyframes gp-chem-flow{0%{left:0;opacity:0}8%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
.gp-chem__steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.gp-chem__steps li{position:relative;text-align:center;font-family:var(--font-sans);font-size:.875rem;line-height:1.35;color:var(--ink-soft);overflow-wrap:anywhere}
.gp-chem__steps li b{display:block;color:var(--ink);font-weight:600;font-size:.9375rem;margin-bottom:2px}
.gp-chem__steps li b,.gp-chem__steps li span{animation:gp-chem-up .5s cubic-bezier(.2,.7,.2,1) both}
.gp-chem__steps li::before{content:"";position:relative;z-index:1;display:block;width:36px;height:36px;margin:0 auto 10px;border-radius:50%;--bc:var(--bead-1);background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0 9%,rgba(255,255,255,0) 32%),radial-gradient(circle at 50% 55%,var(--bc) 0 58%,color-mix(in srgb,var(--bc) 70%,var(--ink)) 100%);box-shadow:0 0 0 4px var(--paper),0 6px 12px -4px color-mix(in srgb,var(--ink) 45%,transparent);animation:gp-chem-pop .55s cubic-bezier(.3,1.5,.5,1) both}
@keyframes gp-chem-pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.gp-chem__steps li:nth-child(1)::before{--bc:#efe7d4}
.gp-chem__steps li:nth-child(2)::before{--bc:var(--bead-2)}
.gp-chem__steps li:nth-child(3)::before{--bc:var(--bead-3)}
.gp-chem__steps li:nth-child(4)::before{--bc:var(--signal)}
.gp-chem__steps li:nth-child(1)::before,.gp-chem__steps li:nth-child(1) b,.gp-chem__steps li:nth-child(1) span{animation-delay:.3s}
.gp-chem__steps li:nth-child(2)::before,.gp-chem__steps li:nth-child(2) b,.gp-chem__steps li:nth-child(2) span{animation-delay:.6s}
.gp-chem__steps li:nth-child(3)::before,.gp-chem__steps li:nth-child(3) b,.gp-chem__steps li:nth-child(3) span{animation-delay:.9s}
.gp-chem__steps li:nth-child(4)::before,.gp-chem__steps li:nth-child(4) b,.gp-chem__steps li:nth-child(4) span{animation-delay:1.2s}
.gp-chem__steps li:nth-child(4)::after{content:"";position:absolute;z-index:0;left:50%;top:18px;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:var(--signal);opacity:0;animation:gp-chem-ripple 2.4s 1.7s ease-out infinite}
@keyframes gp-chem-ripple{0%{transform:scale(1);opacity:.45}100%{transform:scale(2.3);opacity:0}}
.gp-chem__fact{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 22px;align-items:center;padding:20px 22px;border-radius:16px;background:linear-gradient(120deg,var(--sand),color-mix(in srgb,var(--sand) 70%,var(--paper)));border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);animation:gp-chem-up .6s 1.35s cubic-bezier(.2,.7,.2,1) both}
.gp-chem__big{font-size:clamp(2.2rem,4.6vw,3.2rem);line-height:1;font-weight:500;color:var(--accent);white-space:nowrap;animation:gp-chem-big .7s 1.5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes gp-chem-big{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.gp-chem__fact p{margin:0;font-size:1rem;line-height:1.55}
.gp-chem__src{position:relative;font-family:var(--font-sans);font-size:.8125rem;margin:12px 0 0;animation:gp-chem-up .5s 1.6s ease both}
.gp-chem__src a{color:var(--ink-soft)}
.gp-chem__close{align-self:end;border-left:3px solid var(--signal);padding:4px 0 4px 18px;margin-top:12px}
.gp-chem__close p{margin:0 0 16px;font-size:1.125rem;line-height:1.55}
.gp-chem__btns{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.gp-chem__q{font-family:var(--font-sans);font-weight:500;color:var(--ink);text-underline-offset:.28em}
@media (max-width:52rem){
.gp-chem{padding-block:64px}
.gp-chem__wrap{grid-template-columns:minmax(0,1fr)}
.gp-chem__stage{grid-column:1;grid-row:auto}
.gp-chem__wrap{row-gap:18px}
.gp-chem__plate{gap:6px 5px;margin-top:-8px}
.gp-chem__plate label{gap:5px;min-height:32px;padding:2px 9px 2px 2px;font-size:.78rem}
.gp-chem__plate label img{width:26px;height:26px}
.gp-chem__card{padding:24px 18px}
.gp-chem__steps{grid-template-columns:minmax(0,1fr);gap:18px}
.gp-chem__track{left:12px;right:auto;top:20px;bottom:20px;width:12px;height:auto}
.gp-chem__fill{background:linear-gradient(180deg,var(--bead-1),var(--bead-2),var(--bead-3),var(--signal));transform-origin:center top;animation-name:gp-chem-drawv}
@keyframes gp-chem-drawv{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.gp-chem__dot{top:0;left:50%;margin:-5px 0 0 -5px;animation-name:gp-chem-flowv}
@keyframes gp-chem-flowv{0%{top:0;opacity:0}8%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
.gp-chem__steps li{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;text-align:left;align-items:center}
.gp-chem__steps li::before{margin:0;grid-row:1/span 2}
.gp-chem__steps li b,.gp-chem__steps li span{grid-column:2}
.gp-chem__steps li b{align-self:end}
.gp-chem__steps li span{align-self:start}
.gp-chem__steps li:nth-child(4)::after{left:18px;top:50%}
.gp-chem__fact{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
.gp-chem::before,.gp-chem__card,.gp-chem__card h3,.gp-chem__fill,.gp-chem__steps li::before,.gp-chem__steps li b,.gp-chem__steps li span,.gp-chem__fact,.gp-chem__big,.gp-chem__src{animation:none!important}
.gp-chem__dot,.gp-chem__steps li:nth-child(4)::after{display:none}
.gp-chem__plate label,.gp-chem__plate label img{transition:none}
.gp-chem__plate label:hover,.gp-chem__plate label:hover img{transform:none}
}

/* 1.7.29 articles: sources-checked line, share bar, cite box, share this finding, method note */
.ar-meta__check time{font-weight:600}
.ar-share{margin:48px 0 0;padding:22px 24px;border-radius:var(--radius-md);background:var(--sage);color:var(--ink)}
.ar-share__t{margin:0 0 14px;font-family:var(--font-serif);font-size:1.125rem;line-height:1.45}
.ar-share__row{display:flex;flex-wrap:wrap;gap:10px}
.ar-share__b{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);background:var(--paper);color:var(--ink);font-family:var(--font-sans);font-size:.9375rem;font-weight:550;text-decoration:none;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.ar-share__b:hover,.ar-share__b.is-done{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ar-share__native{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.ar-share__native:hover{background:var(--accent-press);border-color:var(--accent-press)}
.ar-share__b:focus-visible,.ar-find:focus-visible,.ar-cite summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ar-cite{margin:14px 0 0;padding:14px 20px;border-radius:var(--radius-md);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);background:var(--paper)}
.ar-cite summary{cursor:pointer;font-family:var(--font-sans);font-weight:600;font-size:.9375rem;color:var(--ink)}
.ar-cite__txt{margin:12px 0;font-size:.9375rem;line-height:1.6;overflow-wrap:anywhere}
/* 1.7.31: "Share this finding" is a quiet text link inside the card, bottom right. No border, no dot, no box of its own. */
.ar-find{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0 auto;padding:4px 2px;min-height:32px;border:0;border-radius:4px;background:none;color:var(--ink-soft);font-family:var(--font-sans);font-size:.8125rem;font-weight:550;line-height:1.2;cursor:pointer;opacity:.85;transition:opacity .2s ease,color .2s ease}
.ar-find svg{flex:none}
.ar-find:hover,.ar-find.is-done,.ar-find:focus-visible{opacity:1;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.mcs-blog .mcs-chart>.ar-find,.mcs-blog .mcs-bars>.ar-find,.mcs-blog .mcs-casestats>.ar-find,.mcs-blog .mcs-imap>.ar-find,.ar-find-row>.ar-find{display:flex;width:max-content;max-width:100%}
.ar-find-row{display:flex;justify-content:flex-end;margin:calc(-1 * var(--space-6) + 6px) 0 var(--space-6)}
.ar-find-row>.ar-find{margin:0}
.ar-method{margin-bottom:16px}
@media (max-width:40rem){.ar-share{padding:18px 16px}.ar-share__b{padding:8px 14px}}
.gp .ar-share a.ar-share__b,.ar-share a.ar-share__b{color:var(--ink);text-decoration:none}
.gp .ar-share a.ar-share__b:hover,.ar-share a.ar-share__b:hover{color:var(--paper)}

/* ---- 1.7.37 case study name badge: glass, bottom right of the featured picture (decision 27/10/2026) ---- */
.gp-casebadge{position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 28px);padding:7px 14px 7px 10px;border-radius:999px;background:rgb(255 255 255 / .30);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);border:1px solid rgb(255 255 255 / .65);box-shadow:0 6px 18px rgb(18 64 63 / .18),inset 0 1px 0 rgb(255 255 255 / .7);color:#12403f;font:600 .875rem/1.15 var(--font-sans);white-space:nowrap;pointer-events:none}
.gp-casebadge b{flex:none;display:block;width:9px;height:9px;border-radius:50%;background:#e8883f;box-shadow:0 0 0 3px rgb(232 136 63 / .25)}
.gp-casebadge small{font:500 .75rem/1.15 var(--font-sans);opacity:.78;margin-left:2px}
.gp-casebadge--dark{background:rgb(18 64 63 / .34);border-color:rgb(255 255 255 / .35);box-shadow:0 6px 18px rgb(0 0 0 / .22),inset 0 1px 0 rgb(255 255 255 / .18);color:#fffcf5}
.gp-casebadge--dark small{opacity:.85}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.gp-casebadge{background:rgb(255 252 245 / .86)}.gp-casebadge--dark{background:rgb(18 64 63 / .82)}}
.gp-casebadge-pic{position:relative;display:block}
.mcs-blog .mcs-figure--hero>.gp-casebadge-pic>img{width:100%!important;aspect-ratio:auto!important;height:auto!important;object-fit:contain!important;max-height:80vh;border-radius:var(--radius-md);display:block;margin:0}
/* on cards the topic oval holds the bottom left, so the badge sits at the right, one row above it */
.gp-casebadge--card{right:24px;bottom:62px;max-width:calc(100% - 48px);padding:5px 11px 5px 8px;gap:7px;font-size:.75rem}
.gp-casebadge--card b{width:8px;height:8px}
@media (max-width:40rem){.gp-casebadge--card{right:20px;bottom:56px}}
@media (max-width:480px){.gp-casebadge--page{right:10px;bottom:10px;padding:5px 11px 5px 8px;font-size:.75rem}.gp-casebadge--page small{font-size:.6875rem}}