/* Bake face. Inherits the site tokens from ../css/site.css. Four screens that
   swap in place: the six doors, the four jobs, and one panel per job. */

.bakewrap{max-width:1060px;margin:0 auto;padding:30px 20px 80px}
.bakewrap h1{font-size:clamp(27px,5vw,44px);line-height:1.06;margin:0 0 10px;
  letter-spacing:-.02em;text-wrap:balance}
.bakewrap h2{font-size:clamp(21px,3.4vw,30px);margin:6px 0 10px;letter-spacing:-.015em}
.bakewrap h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;
  opacity:.72;margin:16px 0 7px}
.lede{max-width:64ch;margin:0 0 16px}
.src{font-size:.82rem;opacity:.68;margin:18px 0 0}
.back{font:inherit;font-size:.84rem;background:transparent;color:inherit;
  border:none;padding:0 0 12px;cursor:pointer;opacity:.75}
.back:hover{opacity:1}

/* --- the drawn palette ------------------------------------------------
   Illustration colour lives here and nowhere in the JS, so a door follows
   the site's light and dark themes. Same three-block pattern site.css uses:
   :root, the media query, then the explicit data-theme overrides. */
:root{
  --sponge:#DFAE6E; --cream:#FFF8EC; --frost:#6B3A22; --frost-top:#7E4529;
  --berry:#BE3A2B; --leaf:#5F8A4A; --plate:rgba(0,0,0,.09);
  --crumb:rgba(110,62,24,.34); --halo:var(--paper,#FAF7F2);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --sponge:#C7914F; --cream:#F6EBD8; --frost:#74391F; --frost-top:#8A4A2C;
    --berry:#CE4234; --leaf:#74A05C; --plate:rgba(255,255,255,.07);
    --crumb:rgba(60,30,10,.34);
  }
}
:root[data-theme="dark"]{
  --sponge:#C7914F; --cream:#F6EBD8; --frost:#74391F; --frost-top:#8A4A2C;
  --berry:#CE4234; --leaf:#74A05C; --plate:rgba(255,255,255,.07);
  --crumb:rgba(60,30,10,.34);
}
:root[data-theme="light"]{
  --sponge:#DFAE6E; --cream:#FFF8EC; --frost:#6B3A22; --frost-top:#7E4529;
  --berry:#BE3A2B; --leaf:#5F8A4A; --plate:rgba(0,0,0,.09);
  --crumb:rgba(110,62,24,.34);
}

/* --- the six doors ---------------------------------------------------- */
.doors{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  margin:22px 0 0;align-items:start}
.door{display:flex;flex-direction:column;justify-content:flex-end;width:100%;
  text-align:left;font:inherit;color:inherit;background:transparent;
  cursor:pointer;border:1px solid currentColor;border-radius:8px;
  padding:16px 18px 15px;opacity:.86;overflow:hidden;position:relative;
  transition:opacity .18s ease,box-shadow .18s ease,transform .18s ease}
.door:hover,.door:focus-visible{opacity:1;transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px currentColor}
.door b{display:block;font-size:1.22rem;letter-spacing:-.01em;margin-bottom:4px}
.door span{font-size:.82rem;opacity:.72;font-variant-numeric:tabular-nums}

/* A door with art is taller and gives the drawing the room; a door without
   art keeps the plain card. Five honest blanks beside one good drawing is
   better than six mediocre drawings. */
.door.drawn{min-height:250px;padding-top:4px}
.art{display:block;width:100%;height:auto;margin:0 auto 8px;max-height:182px;
  flex:1 1 auto;overflow:visible}
/* Stroked in the page colour and drawn first, so the slice reads as sitting
   IN FRONT of the cake. Without it the two brown shapes fused into one mass. */
.art .halo{fill:var(--halo);stroke:var(--halo);stroke-width:7;
  stroke-linejoin:round}
.art .plate{fill:var(--plate)}
.art .sponge{fill:var(--sponge)}
.art .cream{fill:var(--cream)}
.art .frost{fill:var(--frost)}
.art .frost-top{fill:var(--frost-top)}
.art .berry{fill:var(--berry)}
.art .leaf{fill:var(--leaf)}
.art .crumb{fill:var(--crumb)}

/* The slice is the entertainment: it sits cut but still tucked in, and slides
   clear of the cake when you come near it. fill-box keeps the rotation on the
   slice's own centre rather than the whole 240x170 canvas. */
/* AWAY from the cake, which is to the RIGHT: the slice sits on the right of
   the composition. The first version moved it left, which was the direction
   from an earlier draft that had the slice on the other side, and it slid the
   slice back into the cake it had just been cut from. */
.art .slice{transform-box:fill-box;transform-origin:30% 70%;
  transition:transform .42s cubic-bezier(.34,1.3,.5,1)}
.door:hover .art .slice,.door:focus-visible .art .slice{
  transform:translate(15px,5px) rotate(4deg)}
.art .berry{transition:transform .42s cubic-bezier(.34,1.5,.5,1)}
.door:hover .art .berry{transform:translateY(-3px)}

/* --- the four jobs ---------------------------------------------------- */
.jobs{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
  margin:18px 0 0}
.job{display:block;width:100%;text-align:left;font:inherit;color:inherit;
  background:transparent;border:1px solid currentColor;border-radius:4px;
  padding:16px 17px;cursor:pointer;opacity:.9}
.job:hover:not([disabled]){opacity:1;box-shadow:inset 0 0 0 1px currentColor}
.job[disabled]{opacity:.42;cursor:not-allowed}
.job b{display:block;font-size:1.04rem;margin-bottom:6px}
.job p{margin:0;font-size:.85rem;opacity:.8;max-width:40ch}
.job .thin{display:inline-block;margin-top:9px;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.08em;border:1px solid currentColor;
  border-radius:2px;padding:1px 6px;opacity:.8}

/* --- the form question ------------------------------------------------ */
.forms{display:grid;gap:12px;margin:20px 0 0;
  grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
.formcard{display:flex;flex-direction:column;align-items:center;font:inherit;
  color:inherit;background:transparent;border:1px solid currentColor;
  border-radius:8px;padding:12px 10px 11px;cursor:pointer;opacity:.84;
  transition:opacity .18s ease,transform .18s ease,box-shadow .18s ease}
.formcard:hover,.formcard:focus-visible{opacity:1;transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px currentColor}
.formcard b{font-size:.95rem;margin-top:4px;text-align:center}
.formcard span{font-size:.78rem;opacity:.7;font-variant-numeric:tabular-nums}
.fart{max-height:86px;margin:0 0 2px}
/* "Any shape" has no drawing, so it fills the height its siblings get from
   their art rather than sitting as a short odd card out. */
.formcard.any{justify-content:center;min-height:130px}
.formcard.any b{font-size:1.02rem}

/* --- the batter question ---------------------------------------------- */
#bq-list{grid-template-columns:repeat(auto-fill,minmax(224px,1fr))}
#vq-list{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.vart{max-height:74px}
.formcard.flav b{font-size:.88rem}
.formcard.batter{text-align:center}
.bart{max-height:92px;margin:0 0 4px}
/* Air cells. The hairline is not decoration: filled with the page colour
   alone they were invisible on the two PALE crumbs, white and angel food,
   whose fill is nearly the page colour -- the white card drew as an empty
   rectangle. */
.art .cell{fill:var(--halo);stroke:var(--crumb);stroke-width:.55;opacity:.92}
.art .crust{fill:none;stroke:var(--frost-top);stroke-width:1.5;opacity:.5}
.formcard .side{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  border:1px solid currentColor;border-radius:2px;padding:1px 6px;opacity:.72;
  margin:3px 0 2px}
.formcard .num{font-variant-numeric:tabular-nums;font-size:.76rem;opacity:.85}
.formcard .num.thin{opacity:.6;font-style:italic}
.formcard .bdef{margin:7px 0 0;font-size:.78rem;opacity:.72;line-height:1.4;
  max-width:30ch}

/* --- filters and chips ------------------------------------------------ */
.filters{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:.85rem;padding:5px 11px;border:1px solid currentColor;
  border-radius:999px;background:transparent;color:inherit;cursor:pointer;opacity:.72}
.chip:hover:not([disabled]){opacity:1}
.chip[aria-pressed=true]{opacity:1;border-width:2px;font-weight:600}
.chip[disabled]{opacity:.3;cursor:not-allowed}
.chip u{text-decoration:none;opacity:.6;font-size:.76em;margin-left:5px;
  font-variant-numeric:tabular-nums}
.count{font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;opacity:.75;
  margin:20px 0 10px;font-variant-numeric:tabular-nums}

/* --- result cards ----------------------------------------------------- */
.cards{list-style:none;padding:0;margin:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{border:1px solid currentColor;border-radius:4px;padding:13px 15px;opacity:.9}
/* A coined name is a name, so it is set as one -- upright and solid. The
   stated parts drop underneath in the italic the parts-only label used. */
.card h4{margin:0 0 5px;font-size:1rem;font-weight:600;line-height:1.3;
  letter-spacing:-.01em}
.card .parts{margin:0 0 8px;font-size:.78rem;opacity:.68;font-style:italic;
  line-height:1.35}
.card .meta{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 7px}
.tag{font-size:.73rem;padding:2px 7px;border:1px solid currentColor;
  border-radius:3px;opacity:.72}
.tag.base{border-width:2px;opacity:1;font-weight:600}
.tag.coat{opacity:.95;border-style:dashed}
.card .ratio{margin:0 0 7px;font-size:.78rem;opacity:.82;
  font-variant-numeric:tabular-nums}
.card .carry{margin:0 0 7px;font-size:.78rem;opacity:.9;
  border-left:3px solid currentColor;padding-left:9px}
.formcard.skip{border-style:dashed}
.card a{font-size:.8rem;opacity:.8;color:inherit}

/* --- invent ----------------------------------------------------------- */
.invent{display:grid;gap:22px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  margin:14px 0 0}
@media (max-width:780px){.invent{grid-template-columns:1fr}}
.iout{border:1px solid currentColor;border-radius:4px;padding:18px 20px}
.iout h3{margin-top:0}
.formula{list-style:none;padding:0;margin:0 0 14px}
.formula li{display:grid;grid-template-columns:1fr auto;gap:10px;padding:7px 0;
  border-bottom:1px solid currentColor;font-variant-numeric:tabular-nums}
.formula li:last-child{border-bottom:none}
.formula b{font-weight:600}
.range{font-size:.78rem;opacity:.72;font-variant-numeric:tabular-nums}
.iout h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;
  opacity:.66;margin:16px 0 6px}
.iout h4:first-of-type{margin-top:10px}
/* the raising and the liquid are measured but they are not the structure, so
   they sit quieter than the four that are */
.formula li.thinrow{opacity:.72;font-size:.9em}
.oven{margin:12px 0 0;font-size:.9rem;font-weight:600}
.leafpairs li{border-bottom:none;padding:3px 0}
.leafpairs li u{text-decoration:none;opacity:.55;font-size:.78rem;
  font-variant-numeric:tabular-nums}
.steps{margin:0 0 10px;padding-left:1.2em}
.steps li{padding:4px 0;display:flex;justify-content:space-between;gap:12px;
  align-items:baseline}
.steps li span{flex:1 1 auto}
.steps li u{text-decoration:none;opacity:.5;font-size:.72rem;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.warn{border-left:3px solid currentColor;padding-left:12px;opacity:.86;
  font-size:.87rem;max-width:62ch}

/* --- makers and books ------------------------------------------------- */
.makers{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:7px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.makers li{border:1px solid currentColor;border-radius:4px;padding:10px 13px;
  display:flex;justify-content:space-between;gap:10px;opacity:.88;font-size:.9rem}
.makers li u{text-decoration:none;opacity:.65;font-variant-numeric:tabular-nums}
.books{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  margin:16px 0 0}
.books div{border:1px solid currentColor;border-radius:4px;padding:11px 14px;
  display:flex;justify-content:space-between;gap:10px;opacity:.88;font-size:.9rem}
.books u{text-decoration:none;opacity:.65;font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* where you are -- the same line the ingredient pages open with */
.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}

/* the three cake questions: an answered one is marked, "show" is the way on */
.door.chosen{box-shadow:inset 0 0 0 2px currentColor;opacity:1}
.door.go{border-style:dashed}
.linkbtn{font:inherit;background:none;border:0;padding:0;color:inherit;
  text-decoration:underline;cursor:pointer;opacity:.75}

/* the two batter families, each heading its own row of methods */
#bq-list{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
#bq-list .galhead{grid-column:1/-1;margin-top:10px}
#bq-list .galhead h3{margin:0 0 2px;text-transform:capitalize}
#bq-list .door{justify-content:flex-start}
#bq-list .door .bdef{font-size:.8rem;opacity:.75;margin:6px 0 0}
#bq-list .door.quiet{opacity:.5;cursor:default;border-style:dashed}

/* one written recipe: the same side-by-side form as a video recipe */
.rcsrc a{display:inline-block;border:1px solid currentColor;border-radius:6px;
  padding:6px 11px;font-size:.9rem;text-decoration:none;color:inherit}
.rcgrid{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:22px;margin-top:16px}
.rcgrid h3{margin:0 0 6px}
.rcgrid h4{margin:12px 0 4px;font-size:.92rem}
.rcgrid ul,.rcgrid ol{margin:0;padding-left:20px}
.rcgrid li{margin:3px 0;line-height:1.45}
@media (max-width:700px){.rcgrid{grid-template-columns:1fr}}