/* Meat & Fish face. Inherits the site tokens from ../css/site.css. Four
   screens that swap in place: animal, cut, method, recipes. */

.pwrap{max-width:1060px;margin:0 auto;padding:22px 16px 80px}
.pwrap h1{font-size:clamp(27px,5vw,44px);line-height:1.06;margin:0 0 10px;
  letter-spacing:-.02em;text-wrap:balance}
.pwrap h2{font-size:clamp(21px,3.4vw,30px);margin:6px 0 10px;letter-spacing:-.015em;
  text-wrap:balance}
.pwrap h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;
  opacity:.72;margin:26px 0 8px}
.lede{max-width:64ch;margin:0 0 16px}
.src{font-size:.82rem;opacity:.68;margin:26px 0 0;max-width:70ch}
.loading{opacity:.6}

/* --- where you are ----------------------------------------------------- */
.trail{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;padding:0;
  margin:0 0 14px;font-size:.88rem;min-height:1.3em}
.trail li+li::before{content:"\203A";margin:0 8px;opacity:.5}
.trail a{color:inherit;opacity:.75}
.trail a:hover{opacity:1}
.trail [aria-current]{font-weight:600}

/* --- tiles: animals, cuts, methods ------------------------------------ */
.tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  width:100%;text-align:left;font:inherit;color:inherit;background:transparent;
  border:1px solid currentColor;border-radius:8px;padding:13px 15px;
  cursor:pointer;opacity:.86;transition:opacity .15s ease,transform .15s ease,
  box-shadow .15s ease}
.tile:hover,.tile:focus-visible{opacity:1;transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px currentColor}
.tile b{font-size:1.06rem;letter-spacing:-.005em}
.tile span{font-size:.82rem;opacity:.72;font-variant-numeric:tabular-nums}
.tile.quiet{border-style:dashed;opacity:.7}
/* the tile's reel button (protein.js tile()) sits in its lower right corner */
.tilewrap{position:relative;display:flex}
.tilewrap .tile{flex:1;padding-right:50px}
.tile-reel{position:absolute;right:9px;bottom:9px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  text-decoration:none;background:#3B1F35;color:#F6ECF2}
.tile-reel .reel-ico{width:21px;height:21px}
.tile-reel:hover,.tile-reel:focus-visible{background:#5A2F51}
.reel-ico{width:1.15em;height:1.15em;flex:none}

/* --- recipes ----------------------------------------------------------- */
.rbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:4px 0 12px}
.rbar input{font:inherit;padding:8px 11px;border:1px solid currentColor;
  border-radius:6px;background:transparent;color:inherit;min-width:0;
  flex:1 1 220px;max-width:360px}
.count{font-size:.85rem;opacity:.72;font-variant-numeric:tabular-nums}
.recipes{list-style:none;padding:0;margin:0 0 8px;columns:2 320px;column-gap:32px}
.ghead{margin-top:22px}
.recipes li{break-inside:avoid;padding:8px 0;border-bottom:1px solid
  color-mix(in srgb,currentColor 12%,transparent)}
.recipes a{font-weight:600;color:inherit;text-decoration-thickness:1px;
  text-underline-offset:2px}

/* --- one recipe: method and ingredients lined up by time --------------- */
.recipes a.go{cursor:pointer}
.xwho{margin:0 0 12px;opacity:.75}
.xbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 18px}
.tbtn{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;
  font-variant-numeric:tabular-nums;white-space:nowrap;text-decoration:none;
  color:var(--accent,#8C3A1E);border:1px solid currentColor;border-radius:5px;
  padding:3px 9px;line-height:1.3}
.tbtn:hover,.tbtn:focus-visible{background:var(--accent,#8C3A1E);color:#fff}
.tbtn.big{font-size:.95rem;padding:7px 14px}
.tl{border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.tl .row{display:grid;grid-template-columns:5.6rem minmax(0,1fr) minmax(0,1.6fr);
  border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.tl .row>div{padding:11px 12px}
.tl .row.th>div{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;
  opacity:.65;padding:10px 12px 8px}
.tl .ing ul{list-style:none;margin:0;padding:0;font-size:.9rem}
.tl .ing li{padding:1px 0}
.tl .step{line-height:1.5}
.tl .row.hit{background:color-mix(in srgb,var(--accent,#8C3A1E) 9%,transparent)}
.tl .row.hit .step::after{content:"the cooking method";display:block;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;opacity:.7;margin-top:4px}
/* the Techniques column: a recipe's moments, each a bracket down its steps with a reel button
   on the first (scripts/build_recipe_pages.py moment_cells) */
.tl.has-mo .row{grid-template-columns:5.6rem minmax(0,1fr) minmax(0,1.5fr) minmax(9.5rem,.75fr)}
.tl .row>.mcell{padding:0 10px 0 4px;display:flex}
.tl .mcell .mo{flex:1;border-left:3px solid var(--pc,var(--accent,#8C3A1E));margin:0 0 -1px;padding:10px 0 10px 10px}
.tl .mcell .mo.first{border-top-left-radius:8px;margin-top:8px}
.tl .mcell .mo.last{border-bottom-left-radius:8px;margin-bottom:8px}
.mbtn,.mlabel{display:block;text-decoration:none;color:inherit;line-height:1.25}
.mbtn b,.mlabel b{display:block;font-size:.84rem;font-weight:700}
.mbtn small{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font:700 .74rem/1 var(--disp,system-ui);padding:4px 10px 4px 4px;border-radius:999px;
  background:#3B1F35;color:#F6ECF2}
.mbtn small .reel-ico{width:16px;height:16px}
.mbtn:hover small,.mbtn:focus-visible small{background:#5A2F51}
@media (max-width:640px){
  .tl .row{grid-template-columns:5.2rem minmax(0,1fr)}
  .tl .row.th>.h-ing{display:none}
  .tl .row>.ing{grid-column:2;grid-row:2;padding-top:0}
  .tl .row>.ing:empty{display:none}
  .tl .row>.time{grid-row:1 / span 2}
  .tl .row>.step{grid-column:2;grid-row:1}
  .tl.has-mo .row{grid-template-columns:5.2rem minmax(0,1fr)}
  .tl .row.th>.h-mo{display:none}
  .tl .row>.mcell{grid-column:2;grid-row:3;padding:0 12px 8px}
  .tl .row>.mcell:empty,.tl .mcell .mo:not(.first){display:none}
  .tl .mcell .mo.first{border:0;margin:0;padding:0}
}

/* the video's own picture is the "watch from the start" link */
.xvid{position:relative;display:block;width:min(100%,420px);aspect-ratio:16/9;
  border-radius:10px;overflow:hidden;background:color-mix(in srgb,currentColor 8%,transparent)}
.xvid img{width:100%;height:100%;object-fit:cover;display:block}
.xplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:44px;border-radius:12px;display:grid;place-items:center;
  font-size:20px;color:#fff;background:rgba(0,0,0,.62);transition:background .15s ease}
.xvid:hover .xplay,.xvid:focus-visible .xplay{background:var(--accent,#8C3A1E)}
.xbar{align-items:flex-end}

/* arrived from the BrightCulinary Book: the row the book pointed to */
.tl.from-book .row.hit{box-shadow:inset 4px 0 0 var(--accent,#8C3A1E)}
.tl.from-book .row.hit .step::after{content:"the moment the book points to"}

/* "Play these as a reel" (reel/) */
.reel-go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem;padding:7px 14px;border-radius:999px;
  background:#3B1F35;color:#F6ECF2;text-decoration:none}
.reel-go:hover{background:#5A2F51}

/* list groups with a colour: the batter a cake is made from (protein.js recipes(), D.listGroups).
   The colour is a wash over the page, so it reads in light and dark alike. */
.ghead.band{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:8px 12px;border-radius:10px 10px 0 0;
  background:color-mix(in srgb,var(--band) 34%,transparent);margin-bottom:0}
.ghead.band i{font:italic 400 .8rem var(--body,Georgia,serif);text-transform:none;letter-spacing:0;opacity:.8}
ul.recipes.band{background:color-mix(in srgb,var(--band) 13%,transparent);border-radius:0 0 10px 10px;padding:4px 12px 8px;margin-top:0}
.bchips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 16px}
.bchip{font:600 .82rem var(--disp,system-ui);padding:5px 12px;border-radius:999px;cursor:pointer;color:inherit;
  border:1.5px solid color-mix(in srgb,var(--band) 75%,black 10%);background:color-mix(in srgb,var(--band) 28%,transparent)}
.bchip.on{background:color-mix(in srgb,var(--band) 70%,transparent);box-shadow:inset 0 0 0 1px currentColor}

/* the batter key above a cake list (protein.js recipes()) */
.bkey{border:1px solid color-mix(in srgb,currentColor 14%,transparent);border-radius:14px;padding:14px 16px;margin:6px 0 20px}
.bkey summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;list-style:none}
.bkey summary::-webkit-details-marker{display:none}
.bkey summary::after{content:'+';margin-left:auto;font:700 1.1rem var(--disp,system-ui);opacity:.6}
.bkey[open] summary::after{content:'\2212'}
.bkey[open] summary{margin-bottom:10px}
.bkey[open] .bkey-strip{display:none}
.bkey-strip{display:flex;gap:4px}
.bkey h3{margin:0;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;opacity:.75}
.bkey-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:8px}
.bkey-item{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;font:inherit;color:inherit;cursor:pointer;
  padding:9px 11px;border-radius:10px;border:1.5px solid transparent;background:color-mix(in srgb,var(--band) 18%,transparent)}
.bkey-item:hover{border-color:color-mix(in srgb,var(--band) 80%,transparent)}
.bkey-item.on{background:color-mix(in srgb,var(--band) 55%,transparent);border-color:currentColor}
.bkey-item.none{opacity:.45;cursor:default}
.bkey-top{display:flex;align-items:center;gap:7px;width:100%}
.bkey-top b{font:700 .9rem var(--disp,system-ui)}
.bkey-sw{width:14px;height:14px;border-radius:4px;background:var(--band);flex:none}
.bkey-n{margin-left:auto;font:700 .78rem var(--disp,system-ui);opacity:.75}
.bkey-item i{font:italic .76rem var(--body,Georgia,serif);opacity:.75}
.bkey-d{font-size:.8rem;line-height:1.35;opacity:.85}
/* the breadcrumb, readable and tappable on a phone (Matt, 2026-10-11: "increase font size here
   so phone users can see and use it") */
.trail{font-size:1.05rem;line-height:1.5}
.trail a,.trail [aria-current]{display:inline-block;padding:6px 2px}
@media (max-width:640px){.trail{font-size:1.1rem}}
/* every crumb on one line, the plain last one too (Matt, 2026-10-11: "chapter is offset") */
.trail{align-items:center}
.trail li{display:flex;align-items:center;min-height:2.4em}
.trail a,.trail [aria-current]{padding:0 2px}