/* Onine base: reset, type scale, rhythm, surfaces, utilities. Mobile first. Loads after tokens.css. */

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--pod-height) + 24px)}
body{min-height:100svh;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-synthesis:none}
img,svg,picture,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
ul,ol{padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
p,h1,h2,h3,h4,li,td,th,dt,dd,figcaption{overflow-wrap:break-word}
[hidden]{display:none!important}
:target{scroll-margin-top:calc(var(--pod-height) + 32px)}

/* ---- Type scale (8 sizes: 11 / 13 / 16 / 20 / 28 / 40 / 56 / 80, the two largest fluid) ---- */
h1,.h1{font-size:clamp(44px,8vw,88px);max-width:24ch;text-wrap:balance}
h2,.h2{font-size:clamp(32px,4.5vw,56px);max-width:24ch;text-wrap:balance}
h3,.h3{font-size:28px;line-height:1.1;letter-spacing:-.02em;font-weight:300}
h4,.h4{font-family:var(--sans);font-weight:500;font-size:20px;line-height:1.3;letter-spacing:-.01em}
.display-40{font-family:var(--display);font-weight:300;font-size:40px;line-height:1;letter-spacing:-.03em}
p{max-width:var(--measure)}
p+p{margin-top:1em}
.lede{font-size:clamp(19px,1.2vw + 14px,21px);line-height:1.45;max-width:60ch;color:var(--ink);letter-spacing:-.005em}
[data-surface="dark"] .lede{color:var(--on-panel)}
small,.small{font-size:13px;line-height:1.5}
strong,b{font-weight:500}
em{font-style:italic}
hr{border:0;border-top:1px solid var(--line);margin:var(--space-4) 0}
.label,.caption,.size,.meta{display:block;margin:0}
.label.eyebrow{margin-bottom:var(--space-3)}
.section-index{display:inline-flex;align-items:center;gap:10px;margin-bottom:var(--space-3)}
.section-index::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
[data-surface="dark"] .section-index::before{background:var(--accent-on-dark)}
.money{white-space:nowrap}
.meta{color:var(--text-soft)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums}
.text-soft{color:var(--text-soft)}

/* ---- Links & focus ---- */
a{color:inherit}
a:not(.btn){transition:color var(--dur-1) var(--ease),text-decoration-color var(--dur-1) var(--ease)}
a:not(.btn):not(nav a):not(.card-title a):not(.directory a):hover{text-decoration-thickness:2px}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:2px}
.btn:focus-visible,.chip:focus-visible,.pod:focus-visible,.bag-count:focus-visible{border-radius:var(--r-pill)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:2px;border-radius:var(--r-1)}
main:focus{outline:none}

/* Skip link: visually hidden until focused, then a Copper pill at the top left. */
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:12px 18px;border-radius:var(--r-pill);font-weight:500;text-decoration:none;transition:top var(--dur-1) var(--ease)}
.skip-link:focus,.skip-link:focus-visible{top:16px;outline-color:var(--ink)}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- Layout rhythm ---- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:820px}
.container--prose{max-width:calc(var(--measure-prose) + 2 * var(--gutter))}
.section{padding-block:var(--space-6)}
.section+.section{padding-top:0}
.section[data-surface="dark"],.section[data-surface="dark"]+.section{padding-top:var(--space-6)}
/* Inner pages: the first section sits closer to the pod and its h1 is a page title, not the hero. */
main>.section:first-child{padding-top:var(--space-4)}
.page:not(.page--home) h1.section-title{font-size:clamp(36px,5vw,56px)}
@media (min-width:768px){main>.section:first-child{padding-top:var(--space-5)}}
@media (min-width:1200px){main>.section:first-child{padding-top:var(--space-6)}}
.section-head{margin-bottom:var(--space-4);max-width:var(--measure)}
.section-title{margin-bottom:var(--space-2)}
.section-title+.lede,.section-head .lede{margin-top:var(--space-2)}
.section-foot{margin-top:var(--space-4)}
.section-foot .label{margin-top:var(--space-3)}
@media (min-width:768px){
  .section{padding-block:var(--space-7)}
  .section[data-surface="dark"],.section[data-surface="dark"]+.section{padding-top:var(--space-7)}
  .section-head{margin-bottom:var(--space-5)}
}
@media (min-width:1200px){
  .section{padding-block:var(--space-8)}
  .section[data-surface="dark"],.section[data-surface="dark"]+.section{padding-top:var(--space-8)}
}
.grid-2{display:grid;gap:var(--space-4)}
@media (min-width:768px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stack>*+*{margin-top:var(--space-2)}
.stack-lg>*+*{margin-top:var(--space-4)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.flow>*+*{margin-top:1em}

/* ---- Deep moss surfaces with matching light text and focus roles ---- */
[data-surface="dark"]{color-scheme:dark}
[data-surface="dark"] h1,[data-surface="dark"] h2,[data-surface="dark"] h3{color:var(--on-panel)}
[data-surface="dark"] hr{border-color:rgba(244,241,233,.16)}
[data-surface="dark"] .divider{border-color:rgba(244,241,233,.16)}
[data-surface="dark"] ::selection{background:var(--accent-on-dark);color:var(--panel)}
::selection{background:var(--hair-tint);color:var(--ink)}
/* Fields stay light objects on dark panels; tokens.css set their colours. */
[data-surface="dark"] input,[data-surface="dark"] select,[data-surface="dark"] textarea{color-scheme:light}

/* ---- Reveal on scroll (only when JS is present; never hides content without it) ---- */
.reveal{transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);transition-delay:var(--reveal-delay,0ms)}
.reveal.is-pending{opacity:0;transform:translateY(24px)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal.is-pending{opacity:1;transform:none;transition:none}
  *::before,*::after{animation:none!important;transition-duration:160ms!important;transform:none!important}
}

/* ---- Print ---- */
@media print{
  .site-header,.skip-link,.toast,.nav-toggle,.btn,.filters{display:none!important}
  body{background:#fff;color:#000}
  a:not(.btn){color:#000;text-decoration:underline}
  [data-surface="dark"]{background:#fff;color:#000;--text-soft:#444;--link:#000}
  .section{padding-block:24px}
}