/* ==========================================================================
   RECIPES — VERSION B. THE VITRINE OF OUTCOMES.
   Loaded on recipes-b.html only. Brief: docs/SURFACES-VERSION-B-ART-DIRECTION.md

   Two registers, and keeping them apart is the design:
     the WALL     hairline frames, wall labels, nothing in them
     the PROTO    fenced, hatched, marked on the zone and on every plate
   ========================================================================== */

.vb {
  font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3);
  margin: 0 0 var(--s4); padding-block-end: var(--s2);
  border-bottom: 1px solid var(--rule);
}
/* The page leads with the shelves, so the title block is a band rather than
   a section: no section-sized air above it and none under it. */
.plain .leaf:first-of-type { padding-block: var(--s4) var(--s3); }

/* ------------------------------------------------------------- the plate -- */

.rplate { margin: 0; }
.rplate__work {
  display: flex; align-items: stretch;
  aspect-ratio: 16 / 7;
  border: 1px solid var(--rule-firm);
  overflow: hidden;
}
.rplate--tall .rplate__work { aspect-ratio: 21 / 7; }
/* THE FIELD IS WHERE SUBDIVISION BECOMES VISIBLE. specimen.css lays these
   cells out from the record's own decision: Swiss into a module matrix, Manga
   into unequal panels. It is the clearest thing on the plate that the two
   records do not agree, and it is not drawn — it is applied. */
.rplate__field { list-style: none; margin: 0; padding: 0; flex: 1; align-self: stretch; }
/* HEIGHT ONLY. An earlier version also set a background and an opacity here
   and lost the argument with specimen.css on both — the module matrix came
   out as four solid black bars, which is a redaction, not a grid. The
   subdivision, the rule treatment and the colour role are the record's to
   decide; this rule gives the empty cells something to be. */
.rplate__field li { min-height: 1.7rem; }

/* A band carries only what its own record licenses and the others contest.
   The shared skeleton lives on the parent, so type, radius, rules and measure
   are genuinely common across the plate. */
.rplate__band {
  flex: 1 1 0; min-width: 0;
  padding: var(--s4);
  display: grid; align-content: space-between; gap: var(--s3);
  border: 0;
}
.rplate__bname { font-size: var(--t-md); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
.rplate__bline { font-size: var(--t-xl); line-height: 0.9; opacity: 0.5; margin: 0; }
.rplate__flat {
  display: block; width: 58%; height: 0.5rem;
  background: currentColor; opacity: 0.85;
}

/* THE SEAM, AGAIN. Same joint as the bench, at plate scale: hatched, hard
   edged, bridging nothing. One grammar for "no decision exists". */
.rplate__seam {
  flex: 0 0 var(--s4);
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--ink) 34%, transparent) 0 1px, transparent 1px 5px);
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--ink) 30%, transparent),
              inset -1px 0 0 color-mix(in srgb, var(--ink) 30%, transparent);
}

.rplate__cap {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin-block-start: var(--s3);
  font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3);
}
.rplate__cap b { font-family: var(--ui); font-weight: 700; color: var(--ink); }

/* -------------------------------------------------------------- the wall -- */

.rwall { margin-block: var(--s7); }
.rwall__head { margin-block-end: var(--s6); }
.rwall__head h2 { margin: 0; font-size: var(--t-section); letter-spacing: -0.02em; }
.rwall__n {
  font: var(--t-md)/1 var(--mono); color: var(--ink-3); vertical-align: middle;
  margin-inline-start: var(--s3);
}
.rwall__sub { margin: var(--s3) 0 0; max-width: var(--measure); color: var(--ink-2); }

/* A PICTURE RAIL, NOT A CARD GRID.
   Six empty rectangles on their own read as an unfinished grid. Hung from a
   rail, with a visible stem and a wall label under each, they read as what
   they are: places where a work is not. One frame is larger and off-axis —
   the outcome, the thing everyone comes for, and the largest absence.

   Every frame fills its own cell exactly, so the label rule beneath it is the
   frame's width and not a longer line that happens to pass under it. */
.rwall__hang {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s6) var(--s5);
  align-items: start;
}
.rwall__f { margin: 0; padding-block-start: var(--s5); border-top: 1px solid var(--ink); position: relative; }
.rwall__f--lead { grid-column: span 2; }
.rwall__f::before {
  content: ""; position: absolute; left: 2rem; top: 0; height: var(--s5);
  border-left: 1px solid var(--rule-firm);
}
.rwall__frame {
  aspect-ratio: 5 / 4;
  border: 1px solid var(--rule-firm);
  background: var(--paper);
}
.rwall__f--lead .rwall__frame { aspect-ratio: 21 / 10; }
.rwall__f figcaption {
  margin-block-start: var(--s3);
  font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2);
}
.rwall__f figcaption b {
  display: block; font: var(--t-xs)/var(--lh-meta) var(--mono);
  color: var(--ink); margin-block-end: var(--s1);
}
.rwall__built {
  margin: var(--s6) 0 0; padding-block-start: var(--s3);
  border-top: 1px solid var(--rule);
  max-width: 52rem; font-size: var(--t-sm); color: var(--ink-2);
}
.rwall__built b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------- the prototype -- */

/* FENCED, AND THE FENCE IS NOT DECORATION. Everything inside it is a future
   state, and the marking has to survive a screenshot taken out of context. */
.proto { margin-block: var(--s4) var(--s8); }
.proto__fence {
  max-width: var(--page); margin: 0 auto;
  padding: var(--s4) var(--s5) var(--s7);
  border: 2px dashed var(--rule-firm);
  background:
    repeating-linear-gradient(45deg, var(--paper-3) 0 1px, transparent 1px 6px) top left / 100% var(--s5) no-repeat,
    var(--paper-deep);
}
/* THE FENCE HAS A COOLER GROUND, SO ITS APPARATUS GETS A DARKER GREY.
   --ink-3 is 5.0:1 on white and 4.42:1 on --paper-deep, which put every
   shelf's basis line and every empty field just under AA — inside the one
   zone whose whole job is to be read carefully. */
.proto__fence .rrail__basis,
.proto__fence .rcp__void,
.proto__fence .rcp__machine,
.proto__fence .rcp__title--void,
.proto__fence .rcp__ing em { color: var(--ink-2); }

.proto__tag {
  margin: 0; justify-self: start;
  font: var(--t-xs)/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); background: var(--paper); display: inline-block;
  padding: var(--s2) var(--s3); border: 1px solid var(--ink);
}
/* The fence's own header is one band, not a page-sized hero: the shelves are
   what the reader came for and they start immediately under it. */
/* ONE BAND, NOT A HEADER. The fence has to be unmistakable and it does not
   have to be tall: the tag, the sentence and the caveat sit on one row, and
   the first shelf starts immediately under them. */
.proto__bar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4);
  margin-block-end: var(--s5); padding-block-end: var(--s3);
  border-bottom: 1px solid var(--ink);
}
.proto__bar h2 { margin: 0; font-size: var(--t-base); font-weight: 650; letter-spacing: -0.01em; }
.proto__say { margin: 0; color: var(--ink-2); font: var(--t-xs)/var(--lh-meta) var(--mono); flex: 1 1 26rem; }

/* --------------------------------------------------------------- shelves -- */

/* EXPLORE'S GRAMMAR, IN DAYLIGHT.
   Same shape as the collection page — a head with a mono basis line, a track
   that scrolls sideways, a card that is a piece of glass with a wall label
   under it. Not the same colour: the dark room belongs to the collection, and
   a recipe is not a world. */
.rrail { margin-block-end: var(--s7); }
.rrail:last-child { margin-block-end: 0; }
.rrail__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4);
  margin-block-end: var(--s4);
  padding-block-end: var(--s2); border-bottom: 1px solid var(--rule-firm);
}
.rrail__h { margin: 0; font-size: var(--t-md); font-weight: 650; letter-spacing: -0.015em; }
.rrail__basis { margin: 0; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); flex: 1 1 18rem; }

.rrail__track {
  display: flex; gap: var(--s4);
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-block-end: var(--s3);
  /* The next card is visible off the edge rather than hidden behind a timer.
     Browsing IS the purpose here, same as on the collection page. */
  scroll-padding-inline-start: var(--s5);
}

.rcp {
  position: relative; flex: 0 0 auto; width: 19rem; scroll-snap-align: start;
  isolation: isolate;
  background: var(--paper); border: 1px solid var(--rule);
  display: grid; grid-template-rows: auto 1fr;
}
/* Bottom-right of the glass: the top corner is where a third ingredient's
   name lands, and the mark was sitting on top of it. */
.rcp__mark {
  position: absolute; right: 0; z-index: 1;
  top: calc(19rem * 10 / 16);           /* the glass is 16:10 of the card */
  transform: translateY(-100%);
  font: var(--t-xs)/1 var(--mono); color: var(--paper); background: var(--ink);
  padding: var(--s1) var(--s2);
}
.rcp__glass { display: block; border-bottom: 1px solid var(--rule); grid-row: 1; }
.rcp__glass--empty { aspect-ratio: 16 / 10; background: var(--paper-deep); }

.rcp__label { display: grid; gap: var(--s1); padding: var(--s3) var(--s4) var(--s4); align-content: start; }
.rcp__no { font: var(--t-xs)/1 var(--mono); font-style: normal; color: var(--brand); }
.rcp__title { font-size: var(--t-base); font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; }
.rcp__title--void { color: var(--ink-3); font-weight: 400; font-style: italic; }
.rcp__ing { font-size: var(--t-sm); line-height: 1.35; margin-block-start: var(--s1); }
.rcp__ing em { font: var(--t-xs)/1 var(--mono); font-style: normal; color: var(--ink-3); }
.rcp__x { color: var(--ink-3); padding-inline: 0.35em; }
.rcp__meta, .rcp__machine, .rcp__lin, .rcp__void {
  font: var(--t-xs)/var(--lh-meta) var(--mono);
}
.rcp__meta { color: var(--ink); margin-block-start: var(--s2); }
.rcp__machine { color: var(--ink-3); overflow-wrap: anywhere; }
.rcp__lin { color: var(--ink-2); }
/* Never a zero, never a placeholder name. */
.rcp__void { color: var(--ink-3); }
.rcp__void::before { content: "— "; }

.rrail--people .rcp { background: transparent; border-style: dashed; }

/* The card plate: the composite at image size, no caption. */
.rplate--card .rplate__work { aspect-ratio: 16 / 10; border: 0; }
.rplate--card .rplate__band { padding: var(--s3); align-content: space-between; }
.rplate--card .rplate__bname { font-size: var(--t-sm); }
.rplate--card .rplate__flat { height: 0.35rem; }

/* ------------------------------------------------------------- lineage ---- */

.lin { margin-block-start: var(--s7); }
.lin__h { margin: 0 0 var(--s3); font-size: var(--t-md); }
.lin__say, .lin__foot { margin: 0 0 var(--s5); max-width: var(--measure); color: var(--ink-2); font-size: var(--t-sm); }
.lin__foot { margin: var(--s4) 0 0; }
.lin__chain {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s5);
}
.lin__node {
  position: relative; background: var(--paper);
  border: 1px solid var(--rule-firm); padding: var(--s3) var(--s4);
  display: grid; gap: var(--s1); flex: 1 1 13rem;
}
/* The descent line. Drawn between nodes rather than inside them, so the chain
   is a chain and not a row of cards. */
.lin__node + .lin__node::before {
  content: ""; position: absolute; left: calc(var(--s5) * -1); width: var(--s5);
  top: 50%; border-top: 1px solid var(--ink);
}
.lin__node + .lin__node::after {
  content: ""; position: absolute; left: -0.5rem; top: 50%;
  width: 0.5rem; height: 0.5rem; transform: translateY(-50%) rotate(45deg);
  border-top: 1px solid var(--ink); border-right: 1px solid var(--ink);
}
.lin__gen { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.lin__nm { font-size: var(--t-sm); font-weight: 600; }
.lin__ing { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 62rem) {
  .rwall__hang { grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s4); }
  .rwall__f--lead { grid-column: span 2; }
}
@media (max-width: 40rem) {
  .rwall__hang { grid-template-columns: 1fr; }
  .rwall__f--lead { grid-column: span 1; }
  .rplate__work { aspect-ratio: 4 / 3; }
  .proto__fence { padding: var(--s5) var(--s4) var(--s6); }
  .rcp { width: 16rem; }
  .lin__node + .lin__node::before,
  .lin__node + .lin__node::after { display: none; }
}

/* The wall, behind a door. */
.rwall__sum {
  cursor: pointer; list-style: none;
  font: var(--t-sm)/1 var(--ui); color: var(--ink-2);
  padding: var(--s3) 0; border-top: 1px solid var(--rule);
}
.rwall__sum::-webkit-details-marker { display: none; }
.rwall__sum::before { content: "＋ "; font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.rwall[open] .rwall__sum::before { content: "－ "; }
.rwall__sum:hover { color: var(--brand); }
.rwall[open] .rwall__hang { margin-block-start: var(--s5); }