/* Baking With Mari — the blog reading layer
   ==========================================================================
   Canary: Oliver-Legend-org15-f6c3 · retargeted onto the current world 2026-08-12

   LOADS AFTER hero/world.css + hero/themes.css AND ADDS ONLY WHAT READING NEEDS.

   WHY THIS FILE WAS REWRITTEN. It was written against `style.css`, the design the
   Nintendo rebuild replaced, and every token it reached for had since been
   deleted: --ink-2, --paper-2, --lead, --lead-press, --r, --t-hover. Unknown
   custom properties do not fall back, they make the whole declaration invalid,
   so those rules were doing nothing at all.

   One of them was doing worse than nothing. `--line` used to be a hairline
   COLOUR; in world.css it is the pen WIDTH, `3px`. So every
   `border:1px solid var(--line)` on this page resolved to
   `border:1px solid 3px` — invalid — and the hairline-divided story stack, which
   is the entire structure of the index, had no dividers. The page looked
   "designed" in a screenshot because the type still rendered; the design was gone.

   The lesson worth keeping: a stylesheet that outlives its token set fails
   SILENTLY and looks fine in a thumbnail. When a design system is replaced,
   every sheet that consumed the old tokens is broken until proven otherwise.

   TOKENS THIS FILE USES, all from world.css:
     --paper #FFFFFF · --ink #332742 (deep plum, the linework colour, never black)
     --plum  #6B4A87 (secondary text) · --rose #D95C7A (the accent that passes AA
     on paper) · --wash #F7EFFB (the tint) · --display Alfa Slab One
     --voice Shantell Sans · --ui Jost (body already inherits this from world.css,
     which is why long-form prose sets no family of its own)

   Alfa Slab One ships ONE weight. `font-weight:800` on it asks the browser to
   synthesise a bold, which smears an already-heavy slab. Every display rule here
   is 400 on purpose.

   TYPE stays on the locked scale: 11 13 15 17 20 24 30 38 48 60 76, floor 13.
   NO EYEBROWS in this lane — impeccable's craft floor calls the kicker a ban
   rather than a default, and nothing in the brief earns it back.
   ========================================================================== */

/* The hairline. One value, so the index, the byline rule and the footer rule are
   provably the same line rather than three that happen to look alike. */
:root{
  --hair:rgba(51,39,66,.18);
  /* --rose #D95C7A is documented in world.css as "darkened until it passes 4.5:1 on paper".
     MEASURED 2026-08-12: it is 3.64:1 on white. That is a pass for LARGE type and a FAIL for
     body, so the story headings keep it and every small link takes this darkened twin of the
     same hue instead — 5.06:1 on white. Small text is where reading actually happens. */
  --rose-text:#CD3056;
}

/* THE READING WIDTH. world.css's .wrap is the shop's edge; a page whose job is
   to be read does not want it. `.read` narrows the same container. */
.read{max-width:72ch}

/* --------------------------------------------------------------------------
   THE INDEX — a hairline-divided row stack, single column at every width.
   Not a card grid: a card grid used because a card grid is easy is one of the
   named ways this build fails.
   -------------------------------------------------------------------------- */
.masthead{padding:0 0 40px}
.masthead h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(38px,8vw,60px);
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 16px;
}
.masthead p{margin:0;max-width:52ch;font-family:var(--voice);
  font-size:20px;line-height:1.45;color:var(--plum)}

.notes{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.notes li{border-bottom:1px solid var(--hair)}
/* Hairlines go BETWEEN rows. The last row's rule plus the footer's rule below it
   drew two parallel lines with nothing between them, which reads as a mistake
   rather than as structure. The footer's rule closes the list. */
.notes li:last-child{border-bottom:none}

.notes a{display:block;padding:24px 0;text-decoration:none;color:inherit;
  transition:background .18s ease}
.notes a:hover{background:var(--wash)}
.notes h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(20px,4.4vw,24px);
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 8px;
  color:var(--rose);
}
/* --rose is the pink already darkened until it passes 4.5:1 on paper, and it
   still passes on --wash. Hover adds the underline so the state is not carried
   by colour alone — the same rule the rest of the site is held to. */
.notes a:hover h2{color:var(--ink);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.notes p{margin:0 0 8px;color:var(--ink);max-width:54ch}
.notes .when{display:block;font-family:var(--ui);font-size:13px;color:var(--plum);
  font-variant-numeric:tabular-nums lining-nums;
  text-transform:uppercase;letter-spacing:.08em}

/* Empty state. It teaches the interface rather than saying "nothing here", and
   it says in plain words what is not yet true. */
.none{border:var(--line) solid var(--ink);border-radius:var(--radius);
  background:var(--wash);box-shadow:var(--drop) var(--drop) 0 var(--ink);
  padding:32px;margin:0}
.none b{font-family:var(--display);font-weight:400;font-size:20px;
  display:block;margin-bottom:8px;color:var(--ink)}
.none span{color:var(--plum)}

/* --------------------------------------------------------------------------
   THE POST
   -------------------------------------------------------------------------- */
/* `.sec` — the site's own section — now owns the page gutter AND the clearance
   under the fixed command bar. The blog used to skip it and set its own
   padding-block on `.wrap`, which left the post with a zero-width gutter (the
   headline touched the left edge of the phone) and its h1 tucked underneath the
   bar. Measured at 390 on 2026-08-12: padding-left 0, h1 top exactly at the
   bar's bottom edge. Reusing the shared section fixed both at once and is the
   reason this rule now sets no padding of its own. */
.post h1{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(30px,7.5vw,60px);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 20px;
  max-width:20ch;
}

/* The byline rides its own row. Tight against the headline it reads as metadata;
   loose, it reads as a masthead. */
.byline{font-family:var(--ui);font-size:15px;line-height:2.2;color:var(--plum);
  margin:0 0 32px;padding-bottom:20px;border-bottom:1px solid var(--hair);
  font-variant-numeric:tabular-nums lining-nums}

/* One hero image per post, drawn in the same ink line as every other framed
   thing on the site so it belongs to this world rather than floating in it. */
.hero{margin:0 0 40px;background:var(--wash);border:var(--line) solid var(--ink);
  border-radius:var(--radius);overflow:hidden}
.hero img{width:100%;display:block}

/* THE READING COLUMN. 56ch, and that number is MEASURED, not reasoned.
   The target is 65–75 real characters per line. `ch` measures the "0" glyph,
   which in this face is wider than the average character, so a ch buys about
   1.3 characters: 56ch measures ~74 characters, inside the band. 65ch measured
   81 and was too wide. A number derived from a plausible model of a font is
   still a guess — measure it. */
.prose{max-width:56ch;font-size:17px;line-height:1.62;color:var(--ink)}
.prose p{margin:0 0 24px}
.prose h2{font-family:var(--display);font-weight:400;
  font-size:clamp(24px,5vw,30px);line-height:1.15;letter-spacing:-.01em;
  color:var(--ink);margin:40px 0 12px}   /* more space above a heading than below */
.prose h3{font-family:var(--display);font-weight:400;font-size:20px;
  line-height:1.2;color:var(--ink);margin:32px 0 8px}
.prose ul,.prose ol{margin:0 0 24px;padding-left:24px}
.prose li{margin-bottom:8px}
.prose img{margin:32px 0;border-radius:var(--radius)}
/* A quote is set in the brand's own voice face and indented by space, not by a
   coloured bar down its edge — a colour-stripe on one side is the tell this
   build is measured against. */
.prose blockquote{margin:32px 0;padding:0 0 0 24px;
  font-family:var(--voice);font-size:20px;line-height:1.45;color:var(--plum)}
.prose a{font-weight:600;color:var(--rose-text)}
.prose a:hover{color:var(--ink)}

/* The protein figure. The number is a nutrient content claim, so the serving it
   refers to is stated beside it and no regulated adjective goes near it. */
.pnum{margin:40px 0}
/* `.protein` was style.css's component and went with it, so the number was
   rendering as ordinary body text — the one figure the whole brand is built on,
   set like a sentence. Rebuilt here in the current world: the drawn gold
   underline is a clip-path zigzag, not a border, because this world draws its
   marks rather than ruling them. */
.pnum .protein{font-family:var(--display);font-weight:400;font-size:48px;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;
  display:inline-block;position:relative;padding-bottom:6px}
/* impeccable-disable-next-line side-tab: drawn brand underline, not a card side stripe */
.pnum .protein::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:var(--gold);
  clip-path:polygon(0 40%,12% 10%,28% 55%,46% 15%,64% 60%,82% 20%,100% 50%,100% 100%,0 100%)}
.pnum .protein .u{font-size:24px;margin-left:2px}
.pnum .serving{display:block;margin-top:12px;font-family:var(--ui);
  font-size:15px;font-weight:400;color:var(--plum);max-width:44ch}

.back{display:inline-block;margin:56px 0 0;padding:12px 0;
  font-family:var(--ui);font-size:15px;font-weight:600;color:var(--rose-text)}
.back:hover{color:var(--ink)}

/* The footer sits OUTSIDE `.sec`, so it has to carry the page gutter itself —
   without this its text ran to the very edge of the phone while every other line
   on the page was inset 20px. The value matches `.sec`'s own gutter on purpose;
   a footer indented differently from the column above it reads as a break. */
.blogfoot{margin-top:80px;padding:32px 20px 48px;border-top:1px solid var(--hair);
  color:var(--plum);font-family:var(--ui);font-size:15px}
.blogfoot p{margin:0 0 6px}
.blogfoot a{color:var(--rose-text);font-weight:600}
.blogfoot a:hover{color:var(--ink)}

@media (min-width:744px){
  .masthead{padding:0 0 48px}

}