/* Fridge Catalogue — shared tokens and prose styles.
   Light only, deliberately: the brand is warm cream and the marketing site
   presents the brand. The app itself respects prefers-color-scheme; this
   page does not. */

:root{
  --background:#faf8f3; --surface:#ffffff; --ink:#1f1b14; --mutedink:#797266;
  --line:#ebe5d8; --accent:#e07b39; --on-accent:#ffffff; --accent-deep:#b8551a;
  --accent-soft:#fdeee1;
  --ok-soft:#e6f0dd; --ok-ink:#476334;
  --warn-soft:#fbe0d7; --warn-ink:#a63a20;
  --paper:#fffdf7;
  --sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --r-lg:2rem; --r-xl:2.75rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--background);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:var(--accent-deep)}
a:focus-visible,.cta-pill:focus-visible,.badge:focus-visible{
  outline:3px solid var(--accent-deep);outline-offset:4px;border-radius:10px
}
.wrap{width:100%;max-width:74rem;margin-inline:auto;padding-inline:1.75rem}
.narrow{max-width:44rem}

.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ink);padding:.75rem 1rem;z-index:40;border-radius:0 0 .75rem 0}
.skip:focus{left:0}

/* ── masthead ────────────────────────────────────────────────────────── */
.masthead{padding:1.5rem 0}
.mast-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.7rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);text-decoration:none;font-size:1.02rem}
.brand svg{width:2.1rem;height:2.1rem;border-radius:.6rem;flex:none}
.cta-pill{
  display:inline-block;background:var(--ink);color:#fff;font-weight:700;font-size:.9rem;
  text-decoration:none;padding:.65rem 1.3rem;border-radius:999px;transition:background .2s ease;
}
.cta-pill:hover{background:var(--accent-deep)}

/* ── footer ──────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:3rem 0 4rem;color:var(--mutedink);font-size:.92rem;margin-top:2rem}
.foot-row{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;align-items:center;justify-content:space-between;margin-bottom:1.75rem}
.flinks{display:flex;flex-wrap:wrap;gap:1.75rem;margin:0;padding:0;list-style:none}
.flinks a{color:var(--ink);text-decoration:none;font-weight:700}
.flinks a:hover{color:var(--accent-deep)}
footer p{margin:0}

/* ── legal / prose pages ─────────────────────────────────────────────── */
.doc{padding:1.5rem 0 4rem}
.doc h1{font-size:clamp(2rem,5vw,2.9rem);line-height:1.05;letter-spacing:-.035em;font-weight:800;margin:0 0 .5rem}
.doc .updated{font-family:var(--mono);font-size:.78rem;color:var(--mutedink);margin:0 0 2.5rem}
.doc h2{font-size:1.2rem;font-weight:800;letter-spacing:-.015em;margin:2.5rem 0 .7rem}
.doc p{margin:0 0 1.1rem;max-width:38rem}
.doc ul{margin:0 0 1.1rem;padding-left:1.25rem;max-width:38rem}
.doc li{margin-bottom:.6rem}
.doc .lead{font-size:1.1rem;color:var(--mutedink);max-width:36rem}
.doc dt{font-weight:800;margin-top:1.75rem}
.doc dd{margin:.4rem 0 0;color:var(--mutedink);max-width:38rem}