/* ============================================
   THE SUNDAY CRUMBLE
   Newspaper-style recipes. One stylesheet.
   ============================================ */

/* Fonts are self-hosted (latin subset). Loading them from Google cost about
   2.9s of render-blocking time on a throttled connection, because the
   stylesheet request had to resolve before the font files could even start. */

@font-face {
    font-family: 'DM Serif Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/dm-serif-display-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/lato-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/lato-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/fonts/lato-900.woff2') format('woff2');
}

@font-face {
    font-family: 'Libre Caslon Text';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/libre-caslon-400.woff2') format('woff2');
}

:root {
    /* Colour - carried over unchanged from the original brand system */
    --paper: #F8F8F8;
    --paper-deep: #EEECE6;
    --paper-cream: #F3EFE6;
    --ink: #06040A;
    --ink-soft: #333333;
    --rule: #16151B;
    --stamp: oklch(0.55 0.14 22);
    --stamp-soft: oklch(0.62 0.10 22);
    --sage: oklch(0.72 0.04 140);

    /* Type - three families, down from five */
    --display: 'DM Serif Display', 'Times New Roman', Times, serif;
    --body: 'Libre Caslon Text', 'Times New Roman', Times, serif;
    --sans: 'Lato', Helvetica, Arial, sans-serif;

    --wrap: 1100px;
    --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, p, ul, ol, li, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; }

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* --- Masthead --- */

.masthead {
    max-width: var(--wrap);
    margin: 0 auto 44px;
    padding: 34px var(--gutter) 0;
    text-align: center;
}

/* The hero sits immediately below on both templates - no gap needed. */
.page-home .masthead,
.page-recipe .masthead { margin-bottom: 28px; }

.masthead-heading { font-weight: 400; }

.masthead-title {
    display: block;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(38px, 8vw, 74px);
    line-height: 1;
    letter-spacing: -0.01em;
}

.masthead a:hover .masthead-title { color: var(--stamp); }

.masthead-sub {
    margin-top: 12px;
    padding-top: 9px;
    border-top: 1px solid var(--ink);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* --- Shared --- */

.kicker {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--stamp);
    margin-bottom: 7px;
}

.section-heading {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding-bottom: 9px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--ink);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Home hero: the search box is the hero --- */

.hero {
    background: var(--paper-deep);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    margin-bottom: 40px;
}

.hero-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px var(--gutter) 52px;
    text-align: center;
}

.hero-heading {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(26px, 4.6vw, 40px);
    line-height: 1.1;
    margin-bottom: 22px;
}

.search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 999px;
    padding: 0 22px;
    transition: box-shadow .15s;
}

.search:focus-within {
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--stamp) 30%, transparent);
}

.search-icon {
    flex-shrink: 0;
    color: var(--ink-soft);
}

.search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: var(--body);
    font-size: 17px;
    color: var(--ink);
    padding: 15px 0;
}

.search input::placeholder {
    color: var(--ink-soft);
    opacity: 0.65;
}

/* Safari draws its own clear button; the rest is ours. */
.search input::-webkit-search-decoration { -webkit-appearance: none; }

/* --- Filter chips --- */

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--ink);
    margin-bottom: 40px;
}

.chip {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 7px 15px;
    border: 1px solid var(--ink-soft);
    border-radius: 999px;
    color: var(--ink-soft);
    transition: color .15s, border-color .15s, background-color .15s;
}

.chip:hover { color: var(--ink); border-color: var(--ink); }

.chip.is-active {
    color: var(--paper);
    background: var(--ink);
    border-color: var(--ink);
}

/* --- Card grid --- */

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 44px 32px;
    padding-bottom: 80px;
}

.card-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--paper-deep);
    margin-bottom: 15px;
    transition: opacity .2s;
}

.card:hover .card-photo { opacity: 0.88; }
.card:hover .card-title { color: var(--stamp); }

.card-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: 25px;
    line-height: 1.15;
    margin-bottom: 8px;
    transition: color .15s;
}

.card-deck {
    font-size: 15px;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta {
    margin-top: 11px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.empty {
    padding: 56px 0;
    text-align: center;
    font-style: italic;
    color: var(--ink-soft);
}

/* --- Recipe hero: full-bleed photo with the title sitting on it --- */

.recipe-hero {
    position: relative;
    width: 100%;
    min-height: clamp(360px, 62vh, 620px);
    display: flex;
    align-items: flex-end;
    background: var(--paper-deep);
    overflow: hidden;
}

.recipe-hero-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No photo yet: a plain ink panel rather than placeholder art fighting the
   title for the same space. The card still shows the "photo coming soon" art,
   which is where that signal is actually useful. */
.recipe-hero.is-placeholder {
    min-height: clamp(240px, 34vh, 340px);
    background: var(--ink);
}

.recipe-hero.is-placeholder .recipe-hero-scrim { display: none; }

/* Dark enough at the foot to keep the title legible over any photo. */
.recipe-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(6, 4, 10, 0.88) 0%,
        rgba(6, 4, 10, 0.62) 32%,
        rgba(6, 4, 10, 0.18) 62%,
        rgba(6, 4, 10, 0.05) 100%
    );
}

.recipe-hero-inner {
    position: relative;
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter) 40px;
    color: var(--paper);
}

.recipe-hero .kicker { color: var(--paper); opacity: 0.85; }

.recipe-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(32px, 6vw, 60px);
    line-height: 1.05;
    max-width: 20ch;
}

.recipe-hero .deck {
    margin-top: 14px;
    font-size: clamp(16px, 2.2vw, 20px);
    line-height: 1.5;
    color: var(--paper);
    opacity: 0.9;
    max-width: 52ch;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
    opacity: 0.75;
    margin-bottom: 26px;
    transition: opacity .15s;
}

.back-link:hover { opacity: 1; }

/* --- Recipe body --- */

.recipe-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.recipe-bar .meta-row { flex: 1 1 320px; }

.recipe-actions { display: flex; gap: 8px; flex-shrink: 0; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border: 1px solid var(--ink-soft);
    border-radius: 999px;
    padding: 8px 14px;
    transition: color .15s, border-color .15s;
}

.icon-btn:hover { color: var(--ink); border-color: var(--ink); }

/* Auto-flow column so one, two or three cells share the row evenly and it
   never wraps - a wrapped cell would carry its separator to a new line. */
.meta-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin: 34px 0;
    border-top: 1px solid var(--ink);
    border-bottom: 3px double var(--ink);
}

.meta-cell {
    padding: 15px 10px;
    text-align: center;
}

.meta-cell + .meta-cell { border-left: 1px solid var(--ink-soft); }

.meta-label {
    display: block;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.meta-value {
    display: block;
    font-family: var(--display);
    font-size: 24px;
    line-height: 1.2;
    margin-top: 3px;
}

.recipe-body {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    padding-bottom: 80px;
}

.ingredient {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 0;
    border-bottom: 1px solid var(--paper-deep);
    transition: color .15s, opacity .15s;
}

.ingredient.is-done {
    color: var(--ink-soft);
    opacity: 0.45;
    text-decoration: line-through;
}

.method-list { counter-reset: step; }

.method-list li {
    counter-increment: step;
    position: relative;
    padding-left: 54px;
    min-height: 40px;
}

.method-list li + li { margin-top: 28px; }

.method-list li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -7px;
    font-family: var(--display);
    font-size: 34px;
    line-height: 1;
    color: var(--stamp);
}

/* --- Footer --- */

.footer {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 34px var(--gutter) 52px;
    border-top: 1px solid var(--ink);
    text-align: center;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.footer-fine {
    margin-top: 7px;
    font-weight: 400;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.footer-credits {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--paper-deep);
    font-size: 10px;
    letter-spacing: 0.16em;
}

.footer-credits a {
    color: var(--ink-soft);
    opacity: 0.75;
    transition: color .15s, opacity .15s;
}

.footer-credits a:hover {
    color: var(--stamp);
    opacity: 1;
}

.footer-sep { opacity: 0.4; }

/* --- Breakpoints --- */

@media (min-width: 640px) {
    :root { --gutter: 40px; }
    .grid { grid-template-columns: repeat(2, 1fr); }
    .meta-cell { padding: 15px 20px; }
    .meta-value { font-size: 26px; }
}

@media (min-width: 1024px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
    .recipe-body { grid-template-columns: 1fr 2fr; gap: 64px; }
}

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

/* --- Print: a clean kitchen sheet --- */

@media print {
    .masthead-sub, .filters, .hero, .recipe-actions, .back-link, .footer,
    .recipe-hero-photo, .recipe-hero-scrim, .card-photo, .empty {
        display: none !important;
    }

    body { background: #fff; font-size: 11pt; line-height: 1.45; }
    .masthead { margin-bottom: 14pt; padding-top: 0; }
    .masthead-title { font-size: 18pt; }

    /* The hero collapses to plain text on paper - no photo, no scrim, ink on white. */
    .recipe-hero {
        display: block;
        min-height: 0;
        background: none;
        overflow: visible;
    }

    /* Keep the same gutter as .wrap so the title lines up with the body. */
    .recipe-hero-inner {
        padding: 0 var(--gutter);
        color: var(--ink);
    }

    .recipe-hero .kicker { color: var(--stamp); opacity: 1; }
    .recipe-hero .deck { color: var(--ink-soft); opacity: 1; }

    .recipe-title { font-size: 22pt; max-width: none; }
    .deck { font-size: 11pt; margin-top: 6pt; }
    .meta-row { margin: 12pt 0; }
    .meta-value { font-size: 13pt; }
    .recipe-body { display: block; padding-bottom: 0; }
    .ingredients { margin-bottom: 18pt; }
    .ingredient { padding: 3pt 0; }
    .ingredient.is-done { opacity: 1; color: var(--ink); text-decoration: none; }
    .method-list li { break-inside: avoid; padding-left: 34pt; }
    .method-list li + li { margin-top: 10pt; }
    .method-list li::before { font-size: 20pt; top: -2pt; }
}