/* Tempered Health placeholder (temperedhealth.co). Palette and site font from the Instead system (locked 2026-10-29);
   wordmark locked 2026-11-09 (Mona Sans, outlined, so no extra font loads). */
@font-face{font-family:'Schibsted Grotesk';src:url('fonts/SchibstedGrotesk-Variable.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --graphite:#262829;--paper:#F4F5F2;--seafoam:#C2D7CD;--blue:#244BB2;--blue-light:#9DB4F0;
  --text-muted:#4A4F51;--fog:#C9CDC9;--hairline:#C7CCC7;
  --font:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --inset:8px;--radius:12px;--gutter:clamp(20px,4vw,56px);
  --ease-enter:cubic-bezier(.22,1,.36,1);
  /* Panel: seafoam (Derek, 2026-11-09, over graphite). Graphite on seafoam 9.8:1 */
  --panel-bg:var(--seafoam);--panel-ink:var(--graphite);--panel-ink-2:var(--graphite);--panel-focus:var(--blue);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:100svh;background:var(--paper);color:var(--graphite);font-family:var(--font);font-weight:400;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
::selection{background:var(--seafoam);color:var(--graphite)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* Panel: the wordmark, then the headline and the lede */
.panel{margin:var(--inset) var(--inset) 0;border-radius:var(--radius);background:var(--panel-bg);color:var(--panel-ink);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(56px,12vh,160px);padding:calc(var(--gutter) - var(--inset) + 6px) var(--gutter) clamp(36px,7vh,88px)}
.panel :focus-visible{outline-color:var(--panel-focus)}
.panel ::selection{background:var(--graphite);color:var(--paper)}   /* seafoam selection would vanish on the seafoam panel */
.mark{display:block;line-height:0;color:var(--panel-ink)}
/* Height set from the cap height (--cap); 89.60 / 72.90 = box height over cap height; 821.53 / 89.60 = aspect */
.mark svg{--cap:15px;height:calc(var(--cap) * 1.2291);width:auto;aspect-ratio:821.53 / 89.60;display:block}
.statement{display:flex;flex-direction:column;gap:clamp(20px,3.2vh,32px)}
h1{font-weight:400;font-size:clamp(40px,min(6.4vw,9.4vh),84px);line-height:1;letter-spacing:-.032em;max-width:16ch;text-wrap:balance;animation:enter 900ms var(--ease-enter) 120ms both}
.lede{font-size:clamp(18px,1.45vw,22px);line-height:1.42;max-width:46ch;color:var(--panel-ink-2);text-wrap:pretty}

/* Paper band: two lines only */
.band{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 48px;padding:clamp(18px,3vh,28px) calc(var(--gutter) + var(--inset)) clamp(20px,3vh,30px);font-size:15px;color:var(--text-muted)}
.band a{color:var(--graphite);font-weight:500;text-decoration:none;border-bottom:1px solid var(--hairline);transition:border-color 150ms}
.band a:hover{border-color:var(--graphite)}

@keyframes enter{from{transform:translateY(8px)}to{transform:none}}   /* starts visible: motion never hides the headline */

@media (max-width:640px){
  .band{flex-direction:column;gap:8px;padding:18px calc(var(--gutter) + var(--inset)) 22px}
}
@media (max-width:480px){
  .panel{padding:18px 20px 28px}
  .mark svg{--cap:13px}
  h1{font-size:clamp(36px,10.4vw,46px);line-height:1.02;max-width:none}
  .lede{font-size:17px}
  .band{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}