/* ==========================================================================
   COPPERPOT — Design System
   Cookbooks for people who actually cook on a Tuesday
   --------------------------------------------------------------------------
   Palette : warm near-black · bone · one accent (copper)
   Type    : Schibsted Grotesk — one family, four weights, nothing else
   Idea    : no ornament. Rules instead of borders, space instead of boxes,
             uppercase micro-labels instead of decoration.
   ========================================================================== */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }

/* ---------- tokens ---------- */
:root {
  /* the dark scale — warm, not neutral */
  --pot:      #0C0A09;
  --pot-1:    #141110;
  --pot-2:    #1C1816;
  --pot-3:    #26211D;
  --pot-4:    #332C26;

  /* the light scale */
  --bone:     #F6F2EC;
  --bone-1:   #EBE5DC;
  --bone-2:   #D8D0C4;

  /* text on dark */
  --fg:       #F6F2EC;
  --fg-2:     #BDB5AB;
  --fg-3:     #8A8178;
  --fg-4:     #5E574F;

  /* text on bone */
  --ink:      #0C0A09;
  --ink-2:    #4C463F;
  --ink-3:    #7B746B;

  /* the single accent — the inside of a copper pan */
  --copper:      #E0904D;
  --copper-lit:  #EFA968;
  --copper-dim:  #C4753A;
  --copper-deep: #8A4A17;          /* legible on bone */
  --copper-wash: rgba(224,144,77,.12);

  --warn:     #D8543C;

  /* lines */
  --hair:      rgba(246,242,236,.10);
  --hair-2:    rgba(246,242,236,.19);
  --hair-ink:  rgba(12,10,9,.12);

  /* geometry — minimal radii, nothing pill-shaped */
  --r:    4px;
  --r-lg: 8px;

  --gutter: clamp(1.15rem, 4.5vw, 3rem);
  --measure: 34rem;

  --font: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22,.75,.28,1);
  --t:    .28s var(--ease);
}

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--fg-2);
  background: var(--pot);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--copper); color: var(--pot); }

:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 2px; }

/* ---------- type scale ----------
   One family. Distinction comes from weight, size and tracking only. */
.h1, .h2, .h3, .h4 {
  color: var(--fg);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.h1 { font-size: clamp(2.7rem, 8vw, 5.4rem); }
.h2 { font-size: clamp(1.9rem, 4.6vw, 3.05rem); letter-spacing: -.032em; }
.h3 { font-size: clamp(1.35rem, 2.8vw, 1.85rem); letter-spacing: -.028em; line-height: 1.12; }
.h4 { font-size: 1.06rem; letter-spacing: -.02em; line-height: 1.25; font-weight: 500; }

.lead {
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: var(--measure);
}

/* the micro-label that carries most of the hierarchy */
.label {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.label--copper { color: var(--copper); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.dim  { color: var(--fg-3); }
.dim2 { color: var(--fg-4); }

/* ---------- layout ---------- */
.shell { width: min(1320px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.shell--text { width: min(820px, 100%); }
.stack > * + * { margin-top: 1rem; }
.rule { height: 1px; background: var(--hair); border: 0; }

/* ---------- brandmark ----------
   A pan seen from above: a ring with a bright spot of copper in it. */
.mark { display: inline-flex; align-items: center; gap: .62rem; color: var(--fg); }
.mark__glyph {
  width: 22px; height: 22px; flex: none;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  position: relative;
}
.mark__glyph::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 10px 1px rgba(224,144,77,.5);
}
.mark__word {
  font-size: .84rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  padding-left: .06em;
}
.mark--sm .mark__glyph { width: 18px; height: 18px; }
.mark--sm .mark__glyph::after { width: 6px; height: 6px; }
.mark--sm .mark__word { font-size: .74rem; letter-spacing: .26em; }
.mark--lg .mark__glyph { width: 30px; height: 30px; border-width: 2px; }
.mark--lg .mark__glyph::after { width: 11px; height: 11px; }
.mark--lg .mark__word { font-size: 1.02rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.35rem;
  border-radius: var(--r);
  font-size: .88rem; font-weight: 500; letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: background var(--t), border-color var(--t), color var(--t), opacity var(--t);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--copper  { background: var(--copper); color: var(--pot); font-weight: 600; }
.btn--copper:hover { background: var(--copper-lit); }

.btn--bone  { background: var(--bone); color: var(--ink); font-weight: 600; }
.btn--bone:hover { background: #fff; }

.btn--line  { border-color: var(--hair-2); color: var(--fg); }
.btn--line:hover { border-color: var(--fg-3); background: rgba(246,242,236,.05); }

.btn--quiet { color: var(--fg-2); padding-inline: .6rem; }
.btn--quiet:hover { color: var(--fg); }

.btn--sm    { padding: .5rem .9rem; font-size: .8rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- tag ---------- */
.tag {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem;
  border: 1px solid var(--hair);
  border-radius: 3px;
  font-size: .69rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-3);
}
.tag--copper { border-color: rgba(224,144,77,.36); color: var(--copper); background: var(--copper-wash); }
.tag__dot  { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--hair);
  padding: 3.4rem 0 2.6rem;
  margin-top: 5rem;
  background: var(--pot);
}
.foot__top { display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; align-items: flex-start; justify-content: space-between; }
.foot__blurb { max-width: 26rem; font-size: .88rem; color: var(--fg-3); margin-top: .9rem; }
.foot__mail { display: inline-block; margin-top: .9rem; font-size: .88rem; color: var(--copper); }
.foot__mail:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot__nav {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin-top: 2.4rem; padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
  font-size: .8rem;
}
.foot__nav a { color: var(--fg-3); transition: color var(--t); }
.foot__nav a:hover { color: var(--fg); }
.foot__fine { margin-top: 1.3rem; font-size: .74rem; line-height: 1.65; color: var(--fg-4); max-width: 52rem; }

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 900;
  display: none; align-items: center; justify-content: center;
  padding: 1.2rem;
  background: rgba(12,10,9,.8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.modal.open { display: flex; }
.modal__box {
  position: relative;
  width: min(660px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--pot-1);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 2.4rem 2rem 2rem;
}
.modal__close {
  position: absolute; top: .8rem; right: .8rem;
  width: 32px; height: 32px; border-radius: var(--r);
  border: 1px solid var(--hair); color: var(--fg-2); line-height: 1;
}
.modal__close:hover { background: var(--pot-3); color: var(--fg); }
.modal__box h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.03em; color: var(--fg); margin: .5rem 0 1rem; }
.modal__box h3 { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--copper); margin: 1.6rem 0 .45rem; }
.modal__box p, .modal__box li { font-size: .93rem; line-height: 1.7; color: var(--fg-2); }
.modal__box p + p { margin-top: .7rem; }
.modal__box ul { padding-left: 1.1rem; margin-top: .5rem; }
.modal__box li + li { margin-top: .3rem; }
.modal__box a { color: var(--copper); }

/* ---------- utility ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.noscroll { overflow: hidden; }
@media (max-width: 720px) { .hide-sm { display: none !important; } }