/* ============================================================================
   The problem page — a kitchen scheduling brief, told plainly and shown, not
   spelled out. Tokens + the shared header/nav live in base.css.
   ========================================================================== */
.wrap{max-width:66.67vw;margin:0 auto;padding:4px 0 64px;
      /* fine typography for the running text: contextual kerning + ligatures,
         and quotes/dashes hung into the margin so the left edge reads flush */
      text-rendering:optimizeLegibility;
      hanging-punctuation:first last;}

/* ---- the failing-nights figure, centred in its own section --------------- */
.fail-fig{margin:16px auto 0;max-width:760px;}
.fail-fig img{display:block;width:100%;height:auto;padding:28px;background:var(--bg-pale);
              border:1px solid var(--rule);border-radius:2px;
              box-shadow:0 2px 10px rgba(45,33,15,.13);}
.fail-fig figcaption{font:italic 14px/1.5 var(--serif);color:var(--muted);text-align:center;
                     margin-top:11px;text-wrap:balance;}
.fail-fig figcaption .x{color:var(--accent);font-style:normal;}
.fail-fig--empty{display:flex;align-items:center;justify-content:center;text-align:center;
                 min-height:280px;border:1px dashed var(--rule);border-radius:2px;
                 color:var(--faint);font:italic 14px/1.6 var(--serif);background:var(--bg-pale);}
.fail-fig--empty code{font:12px/1.6 var(--mono);color:var(--muted);font-style:normal;}

/* ---- hero: the question -------------------------------------------------- */
.hero{margin:16px 0 4px;}
.hero-q{font:400 31px/1.25 var(--serif);letter-spacing:-.01em;color:var(--ink);margin:0 0 16px;}
.hero-sub{font-size:19px;line-height:1.55;color:var(--muted);max-width:58ch;margin:0;
          text-wrap:pretty;}
.hero-sub em{font-style:italic;color:var(--ink);}

/* ---- sections: small-caps accent labels, not heavy headings -------------- */
.prob-section{margin-top:46px;}
.prob-h{font:600 13px/1 var(--serif);font-feature-settings:"smcp" 1;text-transform:uppercase;
        letter-spacing:.09em;color:var(--accent);margin:0 0 16px;padding-bottom:9px;
        border-bottom:1px solid var(--rule);}
.prose{font-size:18px;line-height:1.6;color:var(--ink);max-width:64ch;margin:0 0 4px;
       text-wrap:pretty;}                  /* no widows — even the last line carries weight */
.prose + .prose{margin-top:.9em;}          /* a clear, uniform breath between paragraphs */
.prose.set-off{margin-top:28px;}
.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;}
.prose a:hover{border-bottom-color:var(--accent);}

/* ---- the goal ------------------------------------------------------------ */
.goal-lead{font:400 23px/1.45 var(--serif);color:var(--ink);max-width:58ch;margin:0 0 14px;
           text-wrap:balance;}             /* a display lead — break the lines evenly */

/* ---- section break: from the problem to the approach --------------------- */
.shift{display:flex;align-items:center;gap:26px;margin:60px 0 8px;}
.shift-rule{flex:1 1 auto;border-top:1px solid var(--rule);}
.shift-text{flex:0 0 auto;font:italic 22px/1.3 var(--serif);color:var(--accent);}
/* the output term, marked the Tufte way: small caps at text weight, a quiet
   rust accent — the smallest effective difference, not bold ALL-CAPS shouting */
.gr{font-variant-caps:small-caps;font-weight:400;font-style:normal;
    letter-spacing:.03em;color:var(--accent);}

/* ---- what's fixed: the line at a glance (capacity pips) ------------------ */
.line-cap{font:italic 14px/1.4 var(--serif);color:var(--faint);margin:12px 0 2px;}
.line{margin-top:6px;border-top:1px solid var(--rule);}
.line-row{display:grid;grid-template-columns:200px 60px 1fr 1.2fr;gap:18px;align-items:center;
          padding:10px 0;border-bottom:1px solid var(--rule-soft);}
.ln-name{font-size:17px;color:var(--ink);}
.line-row--bn .ln-name{font-weight:600;}
/* the recipes that route through each station — small, light dish chips */
.ln-dishes{display:flex;flex-wrap:wrap;gap:5px 6px;}
.ln-dish{font:12px/1.25 var(--serif);color:var(--muted);background:var(--bg-pale);
         border:1px solid var(--rule);border-radius:2px;padding:2px 7px;white-space:nowrap;}
.ln-dish--none{border:0;background:none;color:var(--faint);padding:0;}
.ln-pips{display:flex;gap:6px;align-items:center;}
.pip{width:11px;height:11px;border-radius:50%;background:var(--ink);display:inline-block;
     flex:0 0 auto;}
.pip--bn{background:var(--accent);}
.pip--inf{width:auto;height:auto;background:none;border-radius:0;font:400 19px/1 var(--serif);
          color:var(--faint);}
.pip--legend{width:9px;height:9px;vertical-align:baseline;margin:0 1px;background:var(--muted);}
.ln-note{font-size:15px;line-height:1.45;color:var(--muted);font-style:italic;}
.bottleneck{display:inline-block;margin-left:10px;font:600 10px/1 var(--serif);
            font-feature-settings:"smcp" 1;text-transform:uppercase;letter-spacing:.06em;
            color:var(--accent);border:1px solid var(--accent);border-radius:2px;
            padding:2px 5px;vertical-align:middle;}

/* ---- the approach: explanation left, the cycle right --------------------- */
.approach{display:flex;gap:46px;align-items:center;}
.approach-text{flex:1 1 0;min-width:0;}
.approach-cycle{flex:0 0 46%;max-width:470px;}
.approach-cycle .cycle{max-width:none;margin:0;}
.approach-cycle .cycle-cap{margin-top:6px;}

/* ---- the loop, as a cycle (inline SVG) ----------------------------------- */
.cycle{display:block;width:100%;max-width:520px;height:auto;margin:6px auto 4px;}
.carrow{fill:none;stroke:#8a857a;stroke-width:1.6;}
.cnode{fill:var(--paper);stroke:var(--ink);stroke-width:1.3;}
.cnum{fill:var(--ink);font:600 14px/1 var(--serif);font-variant-numeric:lining-nums;}
.clabel{fill:var(--ink);font:600 15px/1 var(--serif);letter-spacing:.05em;}
.csub{fill:var(--muted);font:italic 13px/1 var(--serif);}
.ccenter{fill:var(--accent);font:600 12px/1 var(--serif);letter-spacing:.1em;text-anchor:middle;}
.ccenter-sub{fill:var(--faint);font:italic 13px/1 var(--serif);text-anchor:middle;}
.cycle-cap{font:italic 15px/1.55 var(--serif);color:var(--muted);text-align:center;
           max-width:56ch;margin:6px auto 0;text-wrap:balance;}

/* ---- the service nights -------------------------------------------------- */
.nights{margin-top:16px;display:grid;gap:18px 30px;
        grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.night{border-left:2px solid var(--rule);padding:1px 0 1px 15px;}
.night-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
         font:400 18px/1.25 var(--serif);color:var(--ink);}
.night-tag{flex:0 0 auto;font:600 10px/1 var(--serif);font-feature-settings:"smcp" 1;
           text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
           border:1px solid var(--rule);border-radius:2px;padding:3px 6px;white-space:nowrap;}
.night-b{font-size:14px;line-height:1.55;color:var(--muted);margin-top:6px;text-wrap:pretty;}
.nights.held .night{border-left-color:var(--accent);}
.nights.held .night-tag{color:var(--accent);border-color:var(--accent);}