/* Curate & Harness — shared design tokens and base styles.
   Single source of truth for color, type, spacing, and radius. Every public and
   subscriber-facing page links this file rather than redefining these values. */

/* Newsreader (SIL Open Font License, fonts/OFL.txt), served from our own domain so no
   visitor's browser contacts Google for it. One variable file per style covers every
   weight and optical size: headlines get the display cut, body text the reading cut.
   studio/static/studio.css repeats these four rules because the Studio doesn't link
   this file. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader-v26-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader-v26-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader-v26-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url(/assets/fonts/newsreader-v26-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light;

  /* Color: rose (primary), sage (secondary), plum (accent), two neutrals. */
  --rose:#9C4E66;
  --rose-deep:#7D3D52;
  --sage:#7F9271;
  --sage-deep:#5F6F52;
  --plum:#5B3F58;
  --paper:#F6F0EC;
  --ink:#332A30;
  --muted:#6B5C62;
  --line:#E4D9D3;
  --surface:#FFFFFF;

  /* Type: one newspaper serif for everything, headlines and body alike. */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;

  /* A deliberate type scale rather than browser defaults. The base is a step above 16px
     because a serif reads smaller than a sans at the same size. */
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 2.75rem;

  /* Spacing on a 4px base. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius varies by what it's applied to — not a single blanket value — and stays small:
     print has square corners, so rounding only takes the edge off. */
  --radius-sm: 2px;  /* inputs, tags, small controls */
  --radius-md: 4px;  /* buttons, product cards */
  --radius-lg: 6px;  /* large panels, used sparingly */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-serif);
  font-size:var(--text-base);
  line-height:1.6;
  font-optical-sizing:auto;
  /* Old-style figures sit in running text the way they do in print. Anything that needs
     numbers to line up sets tabular-nums, which switches them back to lining figures. */
  font-variant-numeric:oldstyle-nums proportional-nums;
  font-synthesis:none;
}
h1,h2,h3{font-family:var(--font-serif);font-weight:500;margin:0;text-wrap:balance;font-variant-numeric:lining-nums}
h1{font-size:var(--text-4xl);line-height:1.04;letter-spacing:-0.02em}
h2{font-size:var(--text-2xl);line-height:1.15;letter-spacing:-0.01em}
h3{font-size:var(--text-lg);line-height:1.3}
p{margin:0;max-width:62ch;text-wrap:pretty}
p+p{margin-top:var(--space-4)}
a{color:inherit;text-underline-offset:3px}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
[hidden]{display:none!important}
img{max-width:100%;display:block}

:focus-visible{outline:2px solid var(--plum);outline-offset:2px}

.button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:12px 22px;border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm);
  border:1px solid transparent;text-decoration:none;
}
.button-primary{background:var(--rose);color:#fff;border-color:var(--rose)}
.button-primary:hover:not(:disabled){background:var(--rose-deep);border-color:var(--rose-deep)}
.button-secondary{background:transparent;color:var(--plum);border-color:var(--plum)}
.button-secondary:hover:not(:disabled){background:rgba(91,63,88,0.07)}

.tag{
  display:inline-block;padding:4px 12px;border-radius:var(--radius-sm);font-size:var(--text-sm);
  font-weight:600;background:rgba(127,146,113,0.18);color:#4F5C44;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms!important;animation-iteration-count:1!important;transition-duration:0.001ms!important}
}