/* Conceptual Kitchen — 1970s institutional/editorial.
   Aged paper, black ink, hard square edges, heavy rules.
   Display: old serif (imposing). Labels: Swiss grotesque. Document: typewriter. */

:root{
  --paper:#e8e1ce;        /* aged off-white stock */
  --paper-hi:#f0ebdc;     /* lighter field for inputs */
  --ink:#19160f;          /* near-black */
  --soft:#564f41;
  --faint:#615a48;        /* darkened from #8f8773 to clear 4.5:1 on paper */
  --line:#b9af96;         /* aged rule */
  --serif:"Hoefler Text","Times New Roman",Times,serif;
  --grot:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --type:"American Typewriter","Courier New",Courier,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0 !important;}
html,body{background:var(--paper);color:var(--ink);overflow-x:clip;}
body{
  font-family:var(--type);
  font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding:48px 22px 90px;
  min-height:100vh;
  display:flex;justify-content:center;
}
/* margin-block:auto centers the frame vertically when there's room,
   and collapses safely (no clipping) when content is taller than the screen */
.frame{width:100%;max-width:660px;margin-block:auto;}
.hidden{display:none !important;}

/* ---- rules ---- */
.rule{height:1px;background:var(--ink);}
.rule-thick{height:4px;background:var(--ink);}

/* ---- masthead ---- */
.masthead{margin-bottom:54px;}
.masthead-row{
  display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:2px 18px;padding:7px 1px 9px;
}
.kicker{
  font-family:var(--grot);font-size:10.5px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--soft);
}
.bigtitle{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(26px,6vw,40px);
  line-height:1.0;letter-spacing:.02em;
  text-align:center;text-transform:uppercase;
  padding:16px 4px 18px;
}

/* ---- stages ---- */
.stage{animation:fade .45s ease;}
@keyframes fade{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}

.instruction{
  font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.55;
  max-width:44ch;margin-bottom:28px;color:var(--ink);
}

/* ---- inputs ---- */
textarea{
  width:100%;background:var(--paper-hi);border:1.5px solid var(--ink);
  color:var(--ink);font-family:var(--type);font-size:15px;line-height:1.65;
  padding:15px 17px;resize:vertical;
}
textarea::placeholder{color:var(--faint);}
/* keep the focus state inside the aged-paper world (no pure #fff) and
   make focus unmistakable by thickening the ink border rather than removing it */
textarea:focus{outline:none;background:#f4efe1;box-shadow:inset 0 0 0 1px var(--ink);}

.actions{margin-top:20px;}
.actions-end{display:flex;gap:14px;margin-top:30px;}

.btn{
  font-family:var(--grot);font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);
  padding:13px 24px;cursor:pointer;transition:opacity .15s;
}
.btn:hover{opacity:.8;}
.btn:disabled{opacity:.35;cursor:default;}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);opacity:1;}

/* ---- interrogation ---- */
.qmeta{
  display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:24px;
}
.label{
  font-family:var(--grot);font-size:10px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--faint);
}
.progress{
  font-family:var(--grot);font-size:11px;font-weight:700;
  letter-spacing:.22em;color:var(--soft);
}
.question{
  font-family:var(--serif);font-size:23px;line-height:1.42;
  margin-bottom:26px;max-width:40ch;
}

/* ---- prescription ---- */
.doc{
  border:2.5px solid var(--ink);background:var(--paper-hi);
  padding:40px 34px 38px;position:relative;
}
.doc::after{           /* rubber-stamp */
  content:"VALID FOR ONE MEAL";
  position:absolute;top:26px;right:26px;
  font-family:var(--grot);font-size:9px;font-weight:700;letter-spacing:.18em;
  color:var(--soft);border:1.5px solid var(--soft);padding:5px 8px;
  transform:rotate(-5deg);opacity:.7;
}
.dish-title{
  font-family:var(--serif);font-weight:700;font-size:30px;line-height:1.18;
  text-transform:uppercase;letter-spacing:-.005em;
  margin-bottom:22px;padding-bottom:20px;border-bottom:2px solid var(--ink);
  max-width:24ch;
}
.dish-body{
  font-family:var(--type);font-size:14px;line-height:1.75;
  white-space:pre-wrap;word-wrap:break-word;color:var(--ink);
}

/* ---- working overlay ---- */
.working{
  position:fixed;inset:0;background:rgba(232,225,206,.94);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--grot);font-size:12px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--soft);
}
.blink{animation:blink 1s steps(2) infinite;}
@keyframes blink{0%,50%{opacity:1;}50.01%,100%{opacity:0;}}

/* ---- colophon ---- */
.colophon{margin-top:60px;}
.colophon p{
  font-family:var(--grot);font-size:10px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint);text-align:center;padding-top:11px;
}

/* ---- small screens: tighten wide tracking so nothing overruns the edge ---- */
@media (max-width:430px){
  body{padding:34px 18px 70px;}
  .masthead{margin-bottom:42px;}
  .kicker{letter-spacing:.18em;font-size:10px;}
  .colophon p{letter-spacing:.14em;}
}

/* ---- print ---- */
@media print{
  body{padding:0;background:#fff;}
  .qmeta,.actions,.actions-end,.working,.colophon{display:none !important;}
  .doc{border:none;padding:0;}
  .doc::after{display:none;}
}