/* ============================================================
   THE ROOMS, the shared material language.  Loaded by every page.

   Campbell, 2026-07-31: "Why can we get the rest of the pages to match... Check
   the colors the maroons the pinks... we still have the basics and I'm having to
   beg you to add all of the elements."

   He is right, and it is the failure TASTE.md already records against gracepc:
   the homepage got the work and every other room kept the old bones. Measured on
   this build before this file existed: /menu/, /events/ and /visit/ had NO dark
   ground anywhere on them. Five pages, all pale, all a stack of horizontal bands
   with centred copy, all sharing one skeleton.

   This file is the MATERIAL, held in common so every room is unmistakably the
   same building: the maroon room, her paper, her cake board, torn edges.
   The ARCHITECTURE is not here. Each page's job chooses its own bones, because
   a shared material that becomes a shared skeleton is the exact defect this is
   fixing (TASTE 2026-07-31, gracepc: "Shared tokens do not earn shared bones").
   ============================================================ */

/* ---------- 1. THE ROOM. Her espresso pressed dark, with the lamp over it.
              The same room THE LONG TABLE stands in, so a reader moving between
              pages is moving through one building. ---------- */
.room{
  position:relative;
  /* the solid rides inside the shorthand so the room has a resolvable
     background-color: without one, every contrast reader walks past this
     element to the cream body and reports white-on-maroon as failing
     (site.css .foot carries the full story). */
  background:
    radial-gradient(44% 30% at 50% 0%, rgba(255,214,204,.34), rgba(255,214,204,0) 72%),
    radial-gradient(120% 74% at 50% 18%,
      var(--kc-maroon) 0%, var(--kc-maroon-mid) 40%, var(--kc-maroon-deep) 72%, #1c080d 100%)
    var(--kc-maroon-mid);
  color:#f4e3dc;
  overflow:hidden;
}
/* the crimp device printed on the dark, so the room is a surface not a void */
.room::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(251,228,234,.14) 1.4px, transparent 1.5px) 0 0/24px 24px;
  pointer-events:none;
}
.room > *{ position:relative; z-index:1; }
.room h1, .room h2, .room h3{ color:#fff6ee; }
.room .script{ color:var(--kc-field); }
.room .soft, .room p{ color:#e9d2ca; }
.room .faint, .room .tiny{ color:#cdb0a9; }
.room dt{ color:var(--kc-field); }
.room dd{ color:#f0dcd5; }
.room .btn-ghost{ color:#fff6ee; border-color:rgba(251,228,234,.55); }
.room .btn-ghost:hover{ background:rgba(251,228,234,.12); border-color:var(--kc-field); }
.room .btn-primary{ background:var(--kc-field); color:var(--kc-espresso); }
.room a:not(.btn){ color:var(--kc-field); }

/* PAPER INSIDE THE ROOM KEEPS ITS OWN INK.

   The room repaints everything under it for a dark ground, and that leaks into
   the pale surfaces STANDING in the room. Patching it class by class failed
   twice in a row: first every dish name on /menu/ went near-white on cream,
   then the whole address block on /visit/ did the same. So this is the
   mechanism, not another patch.

   One list of surfaces that own their own ink, and the reset covers the WHOLE
   SUBTREE (`*`), so a new element added inside any of them can never inherit
   the room's light text again. Two classes beats the room's one, so it wins
   without !important, and an inline colour still overrides it.               */
.room :is(.ticket, .spk-t, .stratum, .pair > div, .lead, form),
.room :is(.ticket, .spk-t, .stratum, .pair > div, .lead, form) *{
  color:var(--kc-ink);
}
.room :is(.ticket, .spk-t, .stratum, .pair > div, .lead, form)
  :is(p, .soft, dd, li, .note, label span){
  color:var(--kc-ink-soft);
}
.room :is(.ticket, .spk-t, .stratum, .pair > div, .lead, form)
  :is(.faint, .tiny, dt){
  color:var(--kc-ink-faint);
}
.room :is(.ticket, .spk-t, .stratum, .pair > div, .lead, form) .btn-ghost{
  color:var(--kc-espresso); border-color:var(--kc-espresso);
}
.room :is(.ticket, .spk-t, .stratum, .pair > div, .lead, form) .btn-primary{
  background:var(--kc-espresso); color:#fdf6f2;
}
/* THE FLIP BACK OVERRIDES ARE GONE (2026-08-01). They existed because the
   room's paper reset painted a dark card's spec list dark-on-dark, and /menu/
   was the only page with flip cards. It now runs THE SPIKE, so there is no
   dark paper standing in a room on this site and the three-class override has
   nothing left to correct. Recoverable from git. */

/* a caption under a photograph is ON the room, not on paper */
.room .board-fig figcaption{ color:#f4e3dc; }

/* ---------- 2. THE TICKET. Her order pad: paper set down at a small angle with
              one torn corner and a dashed inner rule. The tilt lives on a layer
              BEHIND the content so the reading stays level and no control ends
              up measured on a rotated axis. ---------- */
.ticket{
  position:relative; isolation:isolate;
  padding:var(--space-7) var(--space-6) var(--space-6);
  color:var(--kc-ink);
}
.ticket::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background:linear-gradient(176deg, #fdf7f0, #f7e9dd);
  border-radius:4px 4px 40px 4px;
  box-shadow:0 26px 48px -24px rgba(30,15,15,.6);
  transform:rotate(var(--tilt, -1deg));
}
.ticket::after{
  content:"";
  position:absolute; inset:12px; z-index:-1;
  border:1px dashed rgba(166,100,114,.4);
  border-radius:2px 2px 30px 2px;
  transform:rotate(var(--tilt, -1deg));
  pointer-events:none;
}
.ticket h2, .ticket h3{ color:var(--kc-ink); }
.ticket .soft, .ticket p{ color:var(--kc-ink-soft); }
.ticket-r{ --tilt:1deg; }

/* ---------- 2b. THE PAD LIST. The range written down the sheet in two
              columns, the way a pad page actually gets filled: a name, what it
              is sold as under it, and a written line ruled off beneath.

   Replaced the last `.ledger` on the site (2026-08-01). That device was a
   7-row spec table 1,140px wide whose dotted rules ran a third of a metre
   between a name and its note, on the flattest band of the homepage, and it
   repeated /menu/ line for line, which the message-architecture law calls
   filler. The list is the same information standing on her paper instead.

   COLUMNS, NOT A GRID, and the reason is the short-row law: seven items in a
   two-column GRID leave a hole in the last cell, which is the exact defect
   Campbell photographed. `column-count` flows 4 then 3 and reads as a written
   list with no hole to leave. ---------- */
.pad-list{
  column-count:2;
  column-gap:var(--space-8);
  margin:var(--space-6) 0 0;
  padding:0;
  list-style:none;
}
.pad-list li{
  break-inside:avoid;
  padding:0 0 var(--space-3);
  margin-bottom:var(--space-4);
  border-bottom:1px dashed rgba(166,100,114,.42);
  text-align:left;   /* SCANNED, not read: a written pad column is scanned down
                        its left edge, which is what earns left here. The block
                        holding it is centred. */
}
.pad-list li:last-child{ margin-bottom:0; }
.pad-list b{
  display:block;
  font-family:var(--kc-script);
  font-size:var(--kc-d3);
  font-weight:400;
  /* --kc-rose-text, NOT --kc-rose. At 21px this is reading size, not display
     size, so it needs 4.5:1 and the wordmark rose only carries 4.12:1
     (MEASURED off the rendered pixels). The token system already holds the
     same hue tuned for reading; the spike's 27px ticket names stay on the
     display rose because large text needs 3.0:1. */
  color:var(--kc-rose-text);
  line-height:1.25;
}
.pad-list span{
  display:block;
  margin-top:2px;
  font-size:var(--kc-small);
  color:var(--kc-ink-soft);
}
@media (max-width:620px){
  .pad-list{ column-count:1; }
}

/* ---------- 3. THE BOARD. A photograph standing on her own crimped cake board,
              which is the disc her logo is drawn from. This is the detail that
              stops a picture reading as a floating rectangle. ---------- */
/* THE BOARD GOES UNDER THE PICTURE, NOT UNDER THE CAPTION. Hung off the whole
   <figure> it drew below the figcaption, so every cake appeared to be standing
   on top of its own label. The photograph gets its own box (.board-shot) and
   the board belongs to that. */
.board-fig{
  position:relative;
  margin:0 0 30px;
  display:block;
}
.board-shot{
  position:relative;
  display:block;
  margin-bottom:26px;
}
.board-fig img{
  display:block; width:100%; height:auto;
  box-shadow:0 18px 30px -18px rgba(30,15,15,.75);
}
.board-shot::before{          /* the board */
  content:"";
  position:absolute; left:50%; bottom:-16px;
  width:104%; height:26px;
  transform:translateX(-50%);
  border-radius:50%;
  background:linear-gradient(#fdf6ee 0%, #f0e0d0 58%, #dcc4b1 100%);
  border:2px dashed rgba(166,100,114,.55);
  box-shadow:0 5px 0 rgba(110,72,66,.42);
  z-index:-1;
}
.board-shot::after{           /* what it throws on the cloth */
  content:"";
  position:absolute; left:50%; bottom:-26px;
  width:106%; height:26px;
  transform:translateX(-50%);
  background:radial-gradient(46% 50% at 50% 44%, rgba(30,13,12,.7), rgba(30,13,12,0) 74%);
  z-index:-2;
}
.room .board-shot::after{ background:radial-gradient(46% 50% at 50% 44%, rgba(0,0,0,.75), rgba(0,0,0,0) 74%); }

/* ---------- 4. TORN EDGES. A photograph somebody handled, never a component.
              Four cuts so a set never repeats a silhouette. ---------- */
.torn-1{ clip-path:polygon(3% 0, 100% 4%, 96% 100%, 0 95%); }
.torn-2{ clip-path:polygon(0 4%, 96% 0, 100% 94%, 4% 100%); }
.torn-3{ border-radius:6px 6px 30px 6px; }
.torn-4{ border-radius:50% 50% 14px 14px; }
.torn-5{ border-radius:50% 50% 10px 50%; }
.torn-6{ border-radius:50%; aspect-ratio:1; object-fit:cover; }

/* ---------- 5. THE STRATA. Alternating full-bleed rows that flip their column
              order, so a set of real things reads as a run of rooms rather than
              a grid of equal cards. (Mechanism from the rival's occasion ribbon,
              harvest §4, re-tokenized.) ---------- */
.strata{ display:grid; gap:2px; }
.stratum{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  align-items:stretch;
  background:var(--kc-cream);
  min-height:clamp(230px, 30vw, 330px);
  overflow:hidden;
}
.stratum:nth-child(even){ grid-template-columns:1.08fr .92fr; }
/* the photograph changes sides. `order:-1` did nothing: the figure is already
   first in the DOM, so it has to be pushed to the END to swap. */
.stratum:nth-child(even) .stratum-fig{ order:2; }
.stratum:nth-child(4n+2){ background:var(--kc-pinkwhite); }
.stratum:nth-child(4n+3){ background:var(--kc-field); }
.stratum:nth-child(4n+4){ background:var(--kc-cream-deep); }
.stratum-fig{ position:relative; overflow:hidden; min-height:180px; }
.stratum-fig img{ width:100%; height:100%; object-fit:cover; display:block; }
.stratum-body{
  padding:clamp(24px, 3.4vw, 48px);
  display:flex; flex-direction:column; justify-content:center;
  text-align:center;
}
.stratum-body h3{ font-size:var(--kc-d3); margin:0 0 var(--space-3); }
.stratum-body p{ margin:0; max-width:38ch; margin-inline:auto; }
.stratum-body .btn{ margin-top:var(--space-5); align-self:center; }

@media (max-width:760px){
  .stratum,
  .stratum:nth-child(even){ grid-template-columns:1fr; }
  .stratum:nth-child(even) .stratum-fig{ order:0; }
  .stratum-fig{ min-height:210px; }
}

/* ---------- 6. THE PLATES. A set of photographs in MIXED apertures at
              deliberate angles: never one shape repeated down a page
              (TASTE 2026-07-30, merg). ---------- */
.plates{
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:flex-end;
  gap:clamp(26px, 3.6vw, 54px);
  max-width:1100px; margin-inline:auto;
}
.plates > *{ flex:0 0 auto; width:var(--pw, 210px); margin:0; }
.plates > *:nth-child(6n+1){ --pw:236px; transform:rotate(-2.2deg); }
.plates > *:nth-child(6n+2){ --pw:190px; transform:rotate(1.6deg); }
.plates > *:nth-child(6n+3){ --pw:222px; transform:rotate(-1.1deg); }
.plates > *:nth-child(6n+4){ --pw:178px; transform:rotate(2.4deg); }
.plates > *:nth-child(6n+5){ --pw:248px; transform:rotate(-1.7deg); }
.plates > *:nth-child(6n+6){ --pw:200px; transform:rotate(1.2deg); }
.plates img{ width:100%; height:auto; display:block; }
.plates figcaption{
  margin-top:var(--space-4);
  font-family:var(--kc-script); font-size:var(--kc-d3);
  text-align:center; color:inherit;
}
@media (max-width:620px){
  .plates{ gap:34px 18px; }
  .plates > *{ width:min(var(--pw), 43vw); }
}