/* ==========================================================================
   Island & Cook - Printable cards (recipe, run sheet, tasting menu).
   Screen: renders as a paper sheet on marble. Print: pure ink-economical paper.
   ========================================================================== */

/* Printable pages: clean white paper, no page texture (print is the deliverable) */
body.sheet-page { background: #fff; }
body.sheet-page::before { display: none !important; }

.paper-stage { padding-block: clamp(2rem, 5vw, 4rem); display: flex; justify-content: center; position: relative; z-index: 1; }

.sheet {
  width: 100%; max-width: 820px; background: #fff;
  border: 1px solid #fff; border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20,17,14,0.04), 0 24px 60px -30px rgba(36,24,18,0.35);
  padding: clamp(2rem, 5vw, 3.6rem);
  color: var(--ink);
}

/* Print toolbar (screen only) */
.print-bar { display: flex; justify-content: center; gap: 0.7rem; padding-block: 1.4rem; position: relative; z-index: 1; }

/* ---------- Sheet header ---------- */
.sheet__head { text-align: center; border-bottom: 2px solid var(--ink); padding-bottom: 1.4rem; margin-bottom: 1.8rem; }
.sheet__wordmark { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; letter-spacing: 0.02em; }
.sheet__wordmark .amp { color: var(--copper); font-weight: 700; font-style: italic; }
.sheet__eyebrow { font-family: var(--sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--copper-deep); margin-top: 1rem; }
.sheet__title { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 600; line-height: 1.08; margin-top: 0.5rem; }
.sheet__meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.6rem; margin-top: 1.2rem; }
.sheet__meta div { text-align: center; }
.sheet__meta .l { font-family: var(--sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
.sheet__meta .v { font-family: var(--serif); font-size: 1.05rem; margin-top: 0.15rem; }

/* ---------- Recipe card body ---------- */
.recipe-body { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.6rem, 4vw, 3rem); }
.recipe-intro { grid-column: 1 / -1; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--ink-soft); text-align: center; max-width: 60ch; margin: 0 auto 1.8rem; line-height: 1.5; }
.recipe-h { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; padding-bottom: 0.4rem; border-bottom: 1px solid var(--copper-line); margin-bottom: 0.9rem; }
.ing-list { list-style: none; }
.ing-list li { display: flex; gap: 0.6rem; padding: 0.32rem 0; font-family: var(--sans); font-size: 0.9rem; border-bottom: 1px dotted var(--hair); }
.ing-list .q { flex: none; min-width: 4.6rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ing-list .nm { color: var(--ink-soft); }
.ing-list .nt { display: block; font-size: 0.78rem; color: var(--grey); }
.method-list { list-style: none; counter-reset: step; }
.method-list li { position: relative; padding-left: 2.4rem; padding-bottom: 1rem; font-family: var(--sans); font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }
.method-list li::before {
  counter-increment: step; content: counter(step, upper-roman);
  position: absolute; left: 0; top: 0; font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--copper); font-weight: 600;
}
.chef-note { grid-column: 1 / -1; margin-top: 0.6rem; padding: 1.1rem 1.3rem; background: var(--marble); border-left: 3px solid var(--copper); border-radius: 0 8px 8px 0; }
.chef-note .k { font-family: var(--sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper-deep); }
.chef-note p { font-family: var(--serif); font-style: italic; color: var(--ink-soft); margin-top: 0.3rem; }

/* ---------- Run sheet ---------- */
.phase { margin-bottom: 1.8rem; break-inside: avoid; }
.phase__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--ink); margin-bottom: 0.8rem; }
.phase__name { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
.phase__offset { font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper-deep); white-space: nowrap; }
.step { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.8rem; padding: 0.55rem 0; border-bottom: 1px dotted var(--hair); break-inside: avoid; }
.step__tick { width: 15px; height: 15px; border: 1.5px solid var(--ink-soft); border-radius: 4px; margin-top: 0.2rem; }
.step__action { font-family: var(--sans); font-size: 0.9rem; color: var(--ink); line-height: 1.5; }
.step__tags { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.3rem; font-family: var(--sans); font-size: 0.72rem; color: var(--grey); }
.step__tags .cook { color: var(--copper-deep); font-weight: 600; }
.step__tags .timer { font-variant-numeric: tabular-nums; }
.step__tags .step__course { font-style: italic; }

/* ---------- Tasting menu card (guest handout) ---------- */
.menu-card { text-align: center; }
.menu-card__intro { font-family: var(--serif); font-style: italic; color: var(--ink-soft); max-width: 48ch; margin: 0 auto 2rem; }
.menu-course { padding: 1.15rem 0; border-bottom: 1px solid var(--hair); }
.menu-course:last-child { border-bottom: none; }
.menu-course__roman { font-family: var(--serif); font-style: italic; color: var(--copper); font-size: 0.95rem; letter-spacing: 0.1em; }
.menu-course__name { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; margin-top: 0.25rem; }
.menu-course__note { font-family: var(--sans); font-size: 0.8rem; color: var(--grey); margin-top: 0.3rem; }
.sheet__foot { text-align: center; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--hair); font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); }

/* ---------- Printable recipe card photo & layout rules ---------- */
.sheet-photo { width: 100%; max-height: 320px; object-fit: cover; border-radius: 8px; margin-bottom: 1.2rem; display: block; }
.sheet.has-photo .sheet__head { page-break-after: always; break-after: page; }
.sheet.no-photo .sheet-photo { display: none; }
.sheet.no-photo .sheet__head { padding-bottom: 0.8rem; margin-bottom: 1rem; page-break-after: auto; break-after: auto; }
.sheet.no-photo .recipe-intro { margin-bottom: 1rem; }
.sheet.no-photo .recipe-body { margin-top: 1rem; }

@media (max-width: 640px) {
  .recipe-body { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@page { size: A4; margin: 16mm 14mm; }

@media print {
  html, body { background: #fff !important; }
  body::before { display: none !important; }            /* kill marble noise */
  .no-print, .site-header, .site-footer, .print-bar, .overlay, .modal-backdrop { display: none !important; }
  .paper-stage { padding: 0 !important; display: block !important; }
  .sheet {
    max-width: none !important; width: 100% !important;
    border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important;
  }

  /* When photo present: Page 1 single column hero; Page 2 2-column ingredients & method */
  .sheet.has-photo .sheet__head { break-after: page; page-break-after: always; }
  .recipe-body { display: grid !important; grid-template-columns: 0.85fr 1.15fr !important; gap: 2rem !important; }

  /* When no photo: compact 1-page fit on Page 1 (overflows to page 2 only if method requires) */
  .sheet.no-photo .sheet__head { break-after: auto !important; page-break-after: auto !important; margin-bottom: 0.8rem !important; padding-bottom: 0.6rem !important; }
  .sheet.no-photo .recipe-intro { margin-bottom: 0.8rem !important; font-size: 1rem !important; }
  .sheet.no-photo .recipe-body { gap: 1.4rem !important; margin-top: 0.6rem !important; }
  .sheet.no-photo .chef-note { margin-top: 0.6rem !important; padding: 0.8rem 1rem !important; }

  .phase, .step, .menu-course, .chef-note, .recipe-h + * { break-inside: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}