/* ============================================================
   SÉRA — design tokens
   warm neutral palette, one muted clay accent, no pink
   ============================================================ */
:root{
  /* surface */
  --milk:#FCFAF7;
  --ivory:#F5F1EA;
  --stone:#EBE5DA;
  --sand:#DFD6C7;
  --clay-wash:#EDE3D9;
  --rule:#E7E3DC;      /* the hairline between two light sections */
  --dark:#191511;

  /* ink */
  --ink:#15120E;
  --ink-70:#4E473F;
  --ink-45:#8B8278;
  --ink-25:#B9B1A6;
  --on-dark:#F2EDE6;

  /* lines */
  --line:rgba(21,18,14,.16);
  --line-soft:rgba(21,18,14,.085);
  --line-dark:rgba(242,237,230,.18);

  /* accent — muted clay, used sparingly */
  --accent:#A26F49;
  --accent-soft:#C8A98E;

  /* type */
  --ui:'Switzer','Helvetica Neue',Arial,sans-serif;
  --display:'Zodiak','Times New Roman',serif;

  --t-label:.6875rem;
  --t-meta:.8125rem;
  --t-body:clamp(.9375rem,.25vw + .86rem,1.0625rem);
  --t-lead:clamp(1.0625rem,.5vw + .95rem,1.25rem);
  --t-card:clamp(1.125rem,.7vw + .95rem,1.4375rem);

  /* display ramp — five steps, used everywhere a serif heading appears */
  --d0:clamp(2.6rem,7vw,5.5rem);        /* statement            */
  --d1:clamp(2.7rem,5.56vw,4.63rem);    /* page title           */
  --d2:clamp(2.45rem,3.18vw,3.23rem);   /* section title        */
  --d3:clamp(1.5rem,2.4vw,2.1rem);      /* block title          */
  --d4:clamp(1.25rem,1.8vw,1.75rem);    /* card / inline title  */
  --t-display:clamp(2.7rem,6vw,5.8rem); /* homepage hero only   */

  /* tracking: static micro-labels vs interactive controls */
  --ls-label:.14em;
  --ls-ui:.12em;

  /* metrics */
  --gutter:clamp(18px,3.6vw,60px);
  --max:1560px;
  /* ============================================================
     VERTICAL RHYTHM — one scale, three section sizes, nothing else.
     Every vertical distance on the site comes from here. A section pays
     half its gap at each edge, so two neighbours of the same size always
     end up exactly one gap apart, whatever page they are on.
     ============================================================ */
  /* the scale */
  --space-xs:16px;
  --space-sm:24px;
  --space-md:40px;
  --space-lg:64px;
  --space-xl:96px;
  --space-2xl:128px;

  /* the three section sizes — the number is the gap BETWEEN two sections */
  --section-compact:80px;   /* blocks that belong to one another  */
  --section-default:128px;  /* nearly everything — 64 at each edge */
  --section-large:144px;    /* a hero or an editorial break       */

  /* inside a section */
  --space-sub:30px;         /* heading → description              */
  --space-head:52px;        /* heading area → cards, grid, image  */

  /* aliases, so a component can keep asking for what it means */
  --space-section:calc(var(--section-default) / 2);
  --space-section-sm:calc(var(--section-compact) / 2);
  --col-pad:clamp(20px,2.4vw,38px);
  --sec:var(--space-section);
  --sec-sm:var(--space-section-sm);
  --bar-h:72px;

  /* radius — a polish layer, never a soft-UI look */
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:cubic-bezier(.16,1,.3,1);
}


/* On a phone the vw term in the ramp above is worth a few pixels, so every
   heading sits on its floor. These are those floors, raised: mobile headings
   read a step larger without touching the desktop end of any clamp. */
@media (max-width:700px){
  :root{
    /* the same three sizes, one step down */
    --section-compact:48px;
    --section-large:88px;
    --space-sub:24px;
    --space-head:40px;
    --d0:clamp(3rem,7vw,5.5rem);
    --d1:clamp(2.6rem,11.7vw,3.05rem);
    --d2:clamp(2.5rem,11vw,2.7rem);
    --d3:clamp(1.7rem,2.4vw,2.1rem);
    --d4:clamp(1.4rem,1.8vw,1.75rem);
  }
}