/* ============================================================
   KITCHEN ATLAS — cluster theme: enamelware and tile
   Loaded AFTER atlas.css. Keeps the structural system (plates,
   key/plate layout, ruled rows, clip-path bars) and replaces the
   material world.

   The world: a kitchen that gets used. Vitreous enamel — a warm
   body with a dark cobalt rim — glazed splashback tile, oilcloth
   check, a brass scale. Warm because the subject is warm.

   Deliberately NOT the cream-paper-and-terracotta look that every
   food site defaults to: the lead here is COBALT, with tomato as
   the signal beneath it. Terracotta-led warmth is the cliché; a
   cobalt rim on a warm body is enamelware.
   ============================================================ */

:root{
  /* ground — warm plaster and linen, not paper */
  --paper:#f3efe6;
  --paper-2:#eae4d7;
  /* ink — warm near-black, never neutral grey */
  --ink:#22201b;
  --ink-2:#5a5346;
  --ink-3:#6b6151;
  --rule:#b9b0a0;
  --rule-2:#d8d1c2;
  /* plate inks */
  --prussian:#1d4e8f;        /* cobalt — the enamel rim, and the lead */
  --vermillion:#c3402f;      /* tomato */
  --vermillion-ink:#a5301f;
  --ochre:#c08a2a;           /* brass */
  --ochre-ink:#7d5613;
  --olive:#5c6b3c;           /* herb */
  --olive-ink:#4a5730;
}

/* ── the wallpaper: a tiled splashback ──────────────────────
   Pure CSS, no image, so it costs nothing against the page budget.
   Four-inch tiles with a grout line and a small delft dot at each
   centre — the wall behind the worktop.

   Kept faint on purpose. This is still a surface someone reads a
   schedule off, and every reading surface below sits on a solid
   ground so no text normally falls on patterned colour at all.
   Measured worst case anyway — secondary text over the darkest
   point of a tile dot: 5.69:1, against 6.63:1 on plain ground.
   Still comfortably above AA, so the pattern is safe even where
   it does show through. */
body{
  background-color:var(--paper);
  background-image:
    radial-gradient(circle, rgba(29,78,143,.10) 1.5px, transparent 1.7px),
    linear-gradient(rgba(29,78,143,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,78,143,.055) 1px, transparent 1px);
  background-size:4rem 4rem, 4rem 4rem, 4rem 4rem;
  background-position:2rem 2rem, 0 0, 0 0;
  background-attachment:fixed;
}
/* Reading surfaces sit on flat colour — the tile is the wall, not the paper. */
.title,.content,.key,.related,.foot,.tools{
  background:var(--paper);
}
.title,.content{padding-left:1rem;padding-right:1rem;margin-left:-1rem;margin-right:-1rem}
@media (max-width:60rem){
  .title,.content{padding-left:.75rem;padding-right:.75rem;margin-left:-.75rem;margin-right:-.75rem}
}

/* Enamelware has a dark rim on a light body. The plate gets that rim:
   a heavy cobalt edge with a hairline of body colour inside it. */
.plate{
  border:3px solid var(--prussian);
  box-shadow:inset 0 0 0 1px var(--paper);
}
.plate-head{border-bottom:2px solid var(--prussian)}
.plate-head .legend-ink{color:var(--prussian)}

/* Group heads read as a tiled edge rather than a ruled one. */
.group > .legend{
  border-bottom:2px solid var(--prussian);
  color:var(--prussian);
}

/* Softer, warmer field wells — a kitchen surface, not a form. */
.row input,.row select,.row textarea{
  background:#fbf8f1;
  border-color:#c2b8a5;
}
.row input:focus,.row select:focus{background:#fff}

/* Buttons carry the enamel rim too. */
.btn{border-width:2px;border-color:var(--prussian);color:var(--prussian);background:#fbf8f1}
.btn:hover{background:var(--prussian);color:var(--paper)}
.toggle label{background:#fbf8f1;border-color:#c2b8a5}
.toggle input:checked + label{background:var(--prussian);border-color:var(--prussian)}

/* The masthead is the splashback proper — the tile runs at full strength
   here, because nothing is read off it but the site name. */
.masthead{
  background-color:var(--paper-2);
  background-image:
    /* the double rule, in cobalt rather than ink — an enamel edge */
    linear-gradient(var(--prussian),var(--prussian)),
    linear-gradient(var(--prussian),var(--prussian)),
    /* the tile, at full strength: nothing is read off this band */
    radial-gradient(circle, rgba(29,78,143,.16) 2px, transparent 2.2px),
    linear-gradient(rgba(29,78,143,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,78,143,.10) 1px, transparent 1px);
  background-size:100% 3px, 100% 1px, 2.5rem 2.5rem, 2.5rem 2.5rem, 2.5rem 2.5rem;
  background-position:bottom left, bottom 5px left, 1.25rem 1.25rem, 0 0, 0 0;
  background-repeat:no-repeat, no-repeat, repeat, repeat, repeat;
}
.masthead .brand{color:var(--prussian)}
.masthead .brand{color:var(--prussian);font-weight:700}

/* Headline warmth: heavier and a touch tighter, so it reads as
   confident rather than clinical. */
h1{font-weight:700;letter-spacing:-.024em}
.standfirst{color:var(--ink-2)}

/* Timeline dots become the brass scale's marks. */
.timeline{border-left-color:var(--prussian)}
.timeline li::before{background:var(--ochre);width:9px;height:9px;left:-5.5px}

/* A worked example reads as a recipe card: warm ground, ruled edge. */
.content .worked{
  background:#fbf8f1;
  border:1px solid #c2b8a5;
  border-left:3px solid var(--ochre);
}

/* Related cards get the same warm well. */
.related a{background:#fbf8f1;border-color:#c2b8a5}
.related a:hover{border-color:var(--prussian);background:#fff}

/* Mobile result bar in cobalt reads as the enamel rim wrapping the page. */
@media (max-width:60rem){
  .pinned{background:var(--prussian);border-top-color:var(--ink)}
  .pinned .legend{color:#c3d4ea}
}