/* ============================================================
   We Can Do! — site styles.

   Ported from design/wagtail-export/css/wecando.css, the approved
   "American workshop" design: kraft field, shop-sign red, blueprint
   blue, brass, bold condensed poster type, hard stamped shadows.

   Two deliberate deviations from the export, both so the production
   CSP can stay at 'self' with no external origins:

   FONTS: the export loads Barlow + Barlow Condensed from Google
   Fonts. They are self-hosted here instead (see @font-face below,
   and static/fonts/OFL.txt). Barlow is SIL Open Font License, so
   self-hosting is permitted — unlike the Typekit face in the
   earlier _ds export, which was APS's licensed brand font.

   ICONS: the export loads Bootstrap Icons from jsDelivr for four
   glyphs (arrow-right, envelope, send, check-circle). Those are
   inlined as SVG in the templates instead. Adding an icon means
   inlining it too, or adding the CDN to the CSP in the same commit.
   ============================================================ */

/* ---------- Self-hosted Barlow (SIL OFL 1.1) ---------- */
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/barlow-400.b9b596c7d618.woff2") format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/barlow-400-italic.74102f9228c7.woff2") format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/barlow-500.be69dfa36220.woff2") format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/barlow-600.862116afc1c2.woff2") format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/barlow-condensed-700.db3da8cffd10.woff2") format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/barlow-condensed-800.f0951e815d3d.woff2") format('woff2');
}

:root {
    --wcd-paper:  #eee3cf;   /* kraft field           */
    --wcd-card:   #fdfaf3;   /* card / input surface  */
    --wcd-card-2: #e7dcc6;   /* image well            */
    --wcd-ink:    #20201c;   /* near-black ink        */
    --wcd-body:   #4a4236;   /* body text             */
    --wcd-red:    #b23122;   /* shop-sign red         */
    --wcd-red-dk: #7f2016;
    --wcd-blue:   #274a63;   /* blueprint blue        */
    --wcd-brass:  #c58a1e;
    --wcd-green:  #7a9a1e;
    --wcd-cream:  #f4ecd8;
    --wcd-muted:  #a89476;
    --wcd-rule:   #cabfa5;

    --font-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-body: 'Barlow', system-ui, sans-serif;

    /* ---------- Borders + shading ----------
       The export stamps every panel with a 2px ink border and a hard, fully
       opaque offset shadow. Softened here: hairline borders, and shadows
       that are offset, blurred and semi-transparent so they read as depth
       rather than as a second printed layer. Every bordered-and-shadowed
       surface pulls from these, so the weight of the whole site is tuned in
       one place. */
    --wcd-border: 1px solid var(--wcd-ink);
    --wcd-shadow-sm: 2px 2px 5px rgba(32, 32, 28, .16);
    --wcd-shadow:    3px 3px 9px rgba(32, 32, 28, .18);
    --wcd-shadow-lg: 4px 4px 14px rgba(32, 32, 28, .20);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-body);
    color: var(--wcd-body);
    background: var(--wcd-paper);
    background-image:
        linear-gradient(rgba(32, 28, 23, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32, 28, 23, .028) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--wcd-red); }
a:hover { color: var(--wcd-red-dk); }
img { max-width: 100%; height: auto; }

/* Keyboard focus has to stay visible against the kraft field. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible { outline: 3px solid var(--wcd-blue); outline-offset: 2px; }

.wcd-shell { min-height: 100vh; display: flex; flex-direction: column; }
.wcd-wrap  { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 30px; }

/* Visually hidden, still read by screen readers. */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link — keyboard users can jump past the nav. */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--wcd-ink); color: var(--wcd-cream);
    font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; padding: 10px 18px; text-decoration: none;
}
.skip-link:focus { left: 0; color: var(--wcd-cream); }

/* ============================================================
   Header / navigation
   ============================================================ */

.wcd-nav {
    position: sticky; top: 0; z-index: 50;
    background: var(--wcd-paper);
    border-bottom: var(--wcd-border);
    box-shadow: 0 2px 8px rgba(32, 28, 23, .12);
    display: flex; align-items: center; gap: 20px;
    padding: 14px 30px; flex-wrap: wrap;
}
.wcd-brand { text-decoration: none; display: flex; align-items: center; gap: 12px; }
.wcd-brand-badge {
    width: 42px; height: 42px; flex: none;
    background: var(--wcd-red); border: var(--wcd-border);
    border-radius: 3px; box-shadow: var(--wcd-shadow-sm);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-weight: 800; font-size: 1.5rem;
    color: var(--wcd-cream); line-height: 1;
}
.wcd-brand-text { line-height: 1; }
.wcd-brand-name {
    display: block; font-family: var(--font-head); font-weight: 800;
    font-size: 1.5rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--wcd-ink);
}
.wcd-brand-url {
    display: block; font-family: var(--font-body); font-weight: 600;
    font-size: .7rem; letter-spacing: .28em; text-transform: uppercase;
    color: var(--wcd-red); margin-top: 3px;
}
.wcd-menu { display: flex; gap: 30px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.wcd-menu a {
    font-family: var(--font-head); font-weight: 700; font-size: 1.12rem;
    letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
    color: var(--wcd-ink); padding-bottom: 3px; white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.wcd-menu a:hover { color: var(--wcd-red); }
/* The export marks the current page with .is-active; Django sets
   aria-current instead, so both select the same styling. */
.wcd-menu a.is-active,
.wcd-menu a[aria-current="page"] { color: var(--wcd-red); border-bottom-color: var(--wcd-red); }

/* Drop-down for a menu entry with child pages ("What I Make"). CSS only:
   opened on hover and on keyboard focus (:focus-within), no script. The
   panel hangs directly off the link's bottom edge so the pointer never
   crosses a dead gap on its way down. */
.wcd-menu-item { position: relative; }
/* The plain menu links are flex children of .wcd-menu, so flex blockifies them
   and their padding-bottom + border-bottom add to their height. This one is
   wrapped in .wcd-menu-item, so it is not a flex item and stays inline — where
   vertical padding and borders do not grow the line box. The wrapper measured
   5px shorter than its siblings and align-items: center split the difference,
   dropping the label 2.5px. Blockifying it by hand makes the two boxes agree,
   and hangs the drop-down off the underline rather than the text. */
.wcd-menu-item > a { display: block; }
.wcd-menu-caret { font-size: .72em; margin-left: 6px; color: var(--wcd-red); }
.wcd-menu-drop {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    display: none; flex-direction: column; min-width: 200px;
    background: var(--wcd-paper); border: var(--wcd-border);
    box-shadow: var(--wcd-shadow-sm); padding: 8px 0; z-index: 60;
}
.wcd-menu-item:hover .wcd-menu-drop,
.wcd-menu-item:focus-within .wcd-menu-drop { display: flex; }
.wcd-menu-drop a {
    padding: 9px 20px; border-bottom: none; font-size: 1rem; white-space: nowrap;
}
.wcd-menu-drop a:hover { background: var(--wcd-card); }
.wcd-menu-drop a[aria-current="page"] { color: var(--wcd-red); }

/* ============================================================
   Main
   ============================================================ */

.wcd-main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 60px 30px 96px; }
.wcd-narrow   { max-width: 760px; }
.wcd-form-col { max-width: 620px; }

/* ============================================================
   Eyebrow + headings
   ============================================================ */

.wcd-eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.wcd-eyebrow .tick { width: 30px; height: 3px; background: var(--wcd-red); }
.wcd-eyebrow .label {
    font-family: var(--font-head); text-transform: uppercase; letter-spacing: .16em;
    font-weight: 700; font-size: .86rem; color: var(--wcd-red);
}
.wcd-h1 {
    font-family: var(--font-head); font-weight: 800; text-transform: uppercase;
    line-height: .92; color: var(--wcd-ink); font-size: 3.4rem; margin: 0 0 18px;
}
.wcd-h1--hero { font-size: 5.2rem; line-height: .9; letter-spacing: .005em; margin: 0 0 22px; }
.wcd-h2 {
    font-family: var(--font-head); font-weight: 800; text-transform: uppercase;
    font-size: 1.9rem; color: var(--wcd-ink); margin: 0 0 24px; line-height: 1;
}
.wcd-lead { font-family: var(--font-body); font-size: 1.15rem; line-height: 1.55; color: var(--wcd-body); margin: 0 0 16px; }
.wcd-hero-lead { font-size: 1.32rem; line-height: 1.4; font-weight: 500; color: #2f2a22; margin: 0 0 26px; max-width: 600px; }

/* Rich-text output is a block of <p>/<ul> the editor controls, so the
   body rules are scoped to a wrapper rather than to bare elements. */
.wcd-body,
.wcd-richtext p {
    font-family: var(--font-body); font-size: 1.1rem; line-height: 1.6;
    color: var(--wcd-body); margin: 0 0 18px;
}
.wcd-richtext ul,
.wcd-richtext ol {
    font-family: var(--font-body); font-size: 1.1rem; line-height: 1.6;
    color: var(--wcd-body); margin: 0 0 18px; padding-left: 22px;
}
.wcd-richtext > :last-child { margin-bottom: 0; }
.wcd-lead-block p { font-size: 1.15rem; line-height: 1.55; }

/* Bold inside body copy is semi-bold, not 700. Only Barlow 400/400i/500/600
   are vendored, so a 700 <b> has no real face and the browser synthesises
   one — visibly smeared beside the genuine 600. Vendor a 700 face before
   raising this. */
.wcd-richtext b,
.wcd-richtext strong { font-weight: 600; }

/* Photos written into body copy by hand — see "Placing a photo in body copy"
   in CLAUDE.md. The point of styling them here rather than on each pasted
   <img> is that an editor writes nothing but src and alt: the frame, the
   column-wide sizing and the caption type all come from this block, so every
   inline photo matches the galleries and re-weights with --wcd-border /
   --wcd-shadow along with the rest of the site.

   `width: 100%` with `height: auto` is what makes it responsive *and* as wide
   as the text column, whatever column it lands in — the full page measure on
   the home page, the narrower left-hand column on a product detail page. An
   uploaded image is always larger than the measure, so this scales down; to
   hold one deliberately narrower, put a max-width on the <figure>. */
.wcd-richtext figure { margin: 0 0 24px; }
.wcd-richtext img {
    display: block; width: 100%; max-width: 100%; height: auto;
    border: var(--wcd-border); border-radius: 3px;
    box-shadow: var(--wcd-shadow); background: var(--wcd-card-2);
}
.wcd-richtext figcaption {
    margin: 10px 0 0; font-family: var(--font-body); font-size: .92rem;
    font-style: italic; line-height: 1.4; color: var(--wcd-body);
}

/* ============================================================
   Hero
   ============================================================ */

.wcd-hero-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; }
.wcd-hero-copy { max-width: 720px; }
.wcd-hero-seal { flex: none; padding-top: 6px; }
.wcd-rule-band {
    border-top: 2px solid var(--wcd-ink); border-bottom: 2px solid var(--wcd-ink);
    padding: 6px 0; margin: 14px 0 34px;
}
.wcd-rule-band > div { border-top: 1px solid var(--wcd-ink); }
.wcd-hero-body { max-width: 680px; }

/* Space above the calls to action.
   Set on the button row itself, not as a bottom margin on the last
   paragraph: the intro has two mutually exclusive wrappers (.wcd-hero-body
   without a portrait, .wcd-intro-grid with one), and hanging the spacing off
   one of them means it silently disappears in the other layout. */
.wcd-hero-body .wcd-btn-row,
.wcd-intro-grid .wcd-btn-row { margin-top: 34px; }

/* Introduction with the portrait beside it.
   ------------------------------------------------------------
   The photo has to end up exactly as tall as the text column, whatever
   length Jim's copy runs to. So the text column drives the row height and
   the figure absorbs it: the grid stretches the figure to the row, and the
   image is positioned to fill that box and cropped with object-fit rather
   than sized by its own aspect ratio. Sizing the image by height:auto
   instead would make it contribute to the row height and the two columns
   would chase each other.
   Full width when there is no portrait — .wcd-intro-grid is only emitted
   when the field is set. */
.wcd-intro-grid {
    display: grid;
    grid-template-columns: 1fr minmax(0, 340px);
    gap: 36px;
    align-items: stretch;
}
.wcd-intro-figure {
    position: relative;
    min-height: 260px;   /* floor for very short copy */
    margin: 0;
    border: var(--wcd-border);
    border-radius: 3px;
    box-shadow: var(--wcd-shadow-lg);
    background: var(--wcd-card-2);
    overflow: hidden;
}
.wcd-intro-figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Maker's seal */
.wcd-seal { position: relative; width: 168px; height: 168px; transform: rotate(-8deg); }
.wcd-seal .disc { position: absolute; inset: 0; border-radius: 50%; background: var(--wcd-red); border: var(--wcd-border); box-shadow: var(--wcd-shadow-lg); }
.wcd-seal .ring { position: absolute; inset: 11px; border-radius: 50%; border: 2px dashed rgba(244, 236, 216, .6); }
.wcd-seal .text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.wcd-seal .text span {
    font-family: var(--font-head); font-weight: 800; text-transform: uppercase;
    line-height: .82; font-size: 2.75rem; color: var(--wcd-cream); text-align: center;
    font-style: italic; transform: skewX(-8deg); display: inline-block;
}
/* Image stamp, as an alternative to the words. Sized as a share of the seal
   rather than in pixels, so it tracks the disc if that ever resizes, and kept
   inside the dashed ring (which is inset 11px of 168px ≈ 87% of the disc).
   object-fit: contain guarantees it stays proportional whatever shape is
   uploaded — a wide graphic letterboxes rather than stretching. */
.wcd-seal__img {
    width: 72%;
    height: 72%;
    object-fit: contain;
    display: block;
}

/* ============================================================
   Buttons
   ============================================================ */

.wcd-btn {
    display: inline-flex; align-items: center; font-family: var(--font-head);
    font-weight: 700; font-size: 1.12rem; text-transform: uppercase; letter-spacing: .05em;
    padding: 13px 26px; border: var(--wcd-border); border-radius: 2px;
    box-shadow: var(--wcd-shadow); cursor: pointer; text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}
.wcd-btn__icon { width: 1em; height: 1em; margin-left: 6px; flex: none; }
/* Press keeps the export's move-into-the-shadow gesture, just softer. */
.wcd-btn:active, .wcd-btn:hover { transform: translate(2px, 2px); box-shadow: var(--wcd-shadow-sm); }
.wcd-btn--primary { background: var(--wcd-red); color: var(--wcd-cream); }
.wcd-btn--primary:hover { color: var(--wcd-cream); }
.wcd-btn--outline { background: var(--wcd-paper); color: var(--wcd-ink); }
.wcd-btn--outline:hover { color: var(--wcd-ink); }
.wcd-btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* ============================================================
   Product cards ("What I Make")
   ============================================================ */

.wcd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 28px; }
.wcd-card {
    background: var(--wcd-card); border: var(--wcd-border); border-radius: 3px;
    box-shadow: var(--wcd-shadow-lg); overflow: hidden; display: flex; flex-direction: column;
}
.wcd-card__img { aspect-ratio: 3 / 2; background: var(--wcd-card-2); border-bottom: var(--wcd-border); position: relative; }
.wcd-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Empty well names the photo that's coming, so the gap reads as pending
   rather than broken. Removed automatically once a photo is uploaded. */
.wcd-card__img--empty {
    display: flex; align-items: center; justify-content: center; padding: 16px;
    font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; font-size: .8rem; color: var(--wcd-muted); text-align: center;
}
.wcd-card__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.wcd-card__title { margin: 0; font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; text-transform: uppercase; color: var(--wcd-ink); line-height: 1; }
.wcd-card p { margin: 0; font-family: var(--font-body); font-size: 1.02rem; line-height: 1.5; color: var(--wcd-body); }
.wcd-placeholder { margin-top: auto; padding-top: 8px; font-family: var(--font-body); font-size: .82rem; font-style: italic; color: var(--wcd-muted); }
.wcd-card--feature { background: var(--wcd-blue); }
.wcd-card--feature .wcd-card__body { padding: 24px; }
.wcd-card--feature .wcd-card__title { color: var(--wcd-cream); }
.wcd-card--feature p { color: #dbe4ea; }
.wcd-card__action { margin-top: auto; padding-top: 6px; }
/* Card link. Defaults to red-on-light, which is the ordinary card; the blue
   callout panel overrides it to cream below. The export only ever had this
   on the blue panel, so cream used to be the base — that made the link
   invisible the moment a light card carried one. */
.wcd-card__cta {
    font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    font-size: 1rem; color: var(--wcd-red); text-decoration: none;
    border-bottom: 2px solid var(--wcd-red); padding-bottom: 2px;
    display: inline-flex; align-items: center;
}
.wcd-card__cta:hover { color: var(--wcd-red-dk); border-bottom-color: var(--wcd-red-dk); }
.wcd-card--feature .wcd-card__cta { color: var(--wcd-cream); border-bottom-color: var(--wcd-red); }
.wcd-card--feature .wcd-card__cta:hover { color: var(--wcd-cream); }

/* ============================================================
   Product detail page ("Lumber Luggers")
   ------------------------------------------------------------
   Story left, photos stacked in a column to its right — the same
   8/4 split as the In the Shop page, which is why the grid itself
   is defined once, down with .wcd-shop-grid. Only the column's
   contents differ: these figures carry captions and open a lightbox.

   The photos moved out of a row beneath the text because the copy
   runs long. Down the side they stay beside the passage that
   describes them instead of waiting at the bottom of the page.
   Frames match .wcd-shop-shot.
   ============================================================ */

.wcd-detail-gallery {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.wcd-detail-figure {
    margin: 0;
}
.wcd-detail-figure img {
    display: block; width: 100%; height: auto;
    border: var(--wcd-border); border-radius: 3px;
    box-shadow: var(--wcd-shadow); background: var(--wcd-card-2);
}
.wcd-detail-figure figcaption {
    margin-top: 10px; font-family: var(--font-body); font-size: .92rem;
    font-style: italic; line-height: 1.4; color: var(--wcd-body);
}
.wcd-detail-zoom { display: block; cursor: zoom-in; }

/* The lightbox the photos open into (built by lindsley_site.js). */
.wcd-lightbox {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 28px; background: rgba(32, 32, 28, .93);
}
.wcd-lightbox[hidden] { display: none; }
.wcd-lightbox-open { overflow: hidden; }
.wcd-lightbox__figure {
    margin: 0; max-width: min(1200px, 100%); text-align: center;
}
.wcd-lightbox__img {
    display: block; max-width: 100%; max-height: 82vh;
    margin: 0 auto; object-fit: contain;
    border: var(--wcd-border); border-radius: 3px;
    box-shadow: var(--wcd-shadow); background: var(--wcd-card-2);
}
.wcd-lightbox__caption {
    margin-top: 14px; font-family: var(--font-body); font-size: 1rem;
    font-style: italic; line-height: 1.4; color: var(--wcd-cream);
}
.wcd-lightbox__close {
    position: absolute; top: 20px; right: 20px;
    width: 44px; height: 44px; padding: 0;
    background: var(--wcd-red); color: var(--wcd-cream);
    border: var(--wcd-border); border-radius: 3px;
    box-shadow: var(--wcd-shadow-sm);
    font-family: var(--font-head); font-weight: 800;
    font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.wcd-lightbox__close:hover { background: var(--wcd-red-dk); }

/* ============================================================
   Callout (the patent line)
   ============================================================ */

.wcd-callout {
    margin: 0 0 34px; padding: 20px 22px; background: var(--wcd-card);
    border: var(--wcd-border); border-left: 6px solid var(--wcd-brass);
    border-radius: 3px; box-shadow: var(--wcd-shadow);
}
.wcd-callout p { margin: 0; font-family: var(--font-body); font-style: italic; font-size: 1.06rem; line-height: 1.5; color: var(--wcd-body); }

/* ============================================================
   Numbered principles ("In the Shop")
   ============================================================ */

.wcd-principles { display: flex; flex-direction: column; border-top: 2px solid var(--wcd-ink); }
.wcd-principle { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--wcd-rule); }
.wcd-principle .num { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; line-height: 1; flex: none; width: 34px; }
.wcd-principle .num--red   { color: var(--wcd-red); }
.wcd-principle .num--brass { color: var(--wcd-brass); }
.wcd-principle .num--blue  { color: var(--wcd-blue); }
.wcd-principle .num--green { color: var(--wcd-green); }
.wcd-principle h3 { margin: 0 0 4px; font-family: var(--font-head); font-weight: 700; font-size: 1.28rem; text-transform: uppercase; color: var(--wcd-ink); }
.wcd-principle p { margin: 0; font-family: var(--font-body); font-size: 1.04rem; line-height: 1.5; color: var(--wcd-body); }

/* ---------- In the Shop: text + photo column ----------
   An 8/4 split (Bootstrap's old col-8 / col-4). The eyebrow and h1 sit above
   this grid, full width, so the photo column's top lines up with the top of
   the intro rather than the heading. align-items: start keeps the photos from
   stretching to the text's height. Only emitted when the page has gallery
   images; otherwise the section keeps its original .wcd-narrow width. */
.wcd-shop-grid,
.wcd-detail-grid {
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: 44px;
    align-items: start;
}
.wcd-shop-grid__main,
.wcd-detail-grid__main { min-width: 0; }
.wcd-shop-grid__aside { display: flex; flex-direction: column; gap: 20px; }
.wcd-shop-shot {
    margin: 0;
    border: var(--wcd-border);
    border-radius: 3px;
    box-shadow: var(--wcd-shadow);
    background: var(--wcd-card-2);
    overflow: hidden;
}
.wcd-shop-shot img { display: block; width: 100%; height: auto; }

/* ============================================================
   Contact form
   ------------------------------------------------------------
   Fields are defined in the Wagtail admin and rendered by Django,
   not by the design export, so these rules match on element as
   well as on the export's .wcd-input class.
   ============================================================ */

.wcd-form { display: flex; flex-direction: column; gap: 18px; }
.wcd-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wcd-label,
.wcd-form label {
    display: block; font-family: var(--font-head); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--wcd-ink);
    font-size: 1rem; margin-bottom: 6px;
}
.wcd-label .opt,
.wcd-form label .opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--wcd-muted); }
.wcd-input,
.wcd-form input[type="text"],
.wcd-form input[type="email"],
.wcd-form input[type="tel"],
.wcd-form input[type="url"],
.wcd-form input[type="number"],
.wcd-form input[type="date"],
.wcd-form select,
.wcd-form textarea {
    width: 100%; font-family: var(--font-body); font-size: 1.02rem; color: #2a251e;
    padding: 12px 14px; border: var(--wcd-border); border-radius: 2px;
    background: var(--wcd-card); line-height: 1.4;
    transition: box-shadow .15s ease, border-color .15s ease;
}
/* Focus stays deliberately loud — it's the accessibility indicator, not
   decoration. Softened from the export's hard offset stamp to a ring, which
   reads at any border width and doesn't shift the field's apparent position. */
.wcd-input:focus,
.wcd-form input:focus,
.wcd-form select:focus,
.wcd-form textarea:focus {
    outline: none;
    border-color: var(--wcd-red);
    box-shadow: 0 0 0 3px rgba(178, 49, 34, .28);
}
.wcd-input::placeholder,
.wcd-form input::placeholder,
.wcd-form textarea::placeholder { color: var(--wcd-muted); }
.wcd-form textarea,
textarea.wcd-input { resize: vertical; }
.wcd-form .helptext {
    display: block; margin-top: 6px; font-family: var(--font-body);
    font-size: .88rem; color: var(--wcd-muted);
}
.wcd-form .errorlist,
.wcd-errorlist {
    list-style: none; margin: 8px 0 0; padding: 0;
    font-family: var(--font-body); font-size: .92rem;
    color: var(--wcd-red-dk); font-weight: 600;
}

/* ============================================================
   Success panel (form submission landing)
   ============================================================ */

.wcd-success {
    padding: 26px; background: var(--wcd-card); border: var(--wcd-border);
    border-left: 6px solid var(--wcd-green); border-radius: 3px; box-shadow: var(--wcd-shadow-lg);
}
.wcd-success__head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.wcd-success__icon { width: 1.5rem; height: 1.5rem; flex: none; color: var(--wcd-green); }
.wcd-success__head span { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; color: var(--wcd-ink); font-size: 1.4rem; }
.wcd-success p { margin: 0 0 16px; font-family: var(--font-body); font-size: 1.06rem; line-height: 1.5; color: var(--wcd-body); }
.wcd-link-arrow { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; color: var(--wcd-red); }

/* ============================================================
   Footer
   ============================================================ */

.wcd-footer { margin-top: auto; }
.wcd-footer__main { background: var(--wcd-ink); padding: 48px 0; }
.wcd-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; align-items: start; }
.wcd-footer__name { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--wcd-cream); margin-bottom: 6px; }
.wcd-footer__url  { font-family: var(--font-body); font-weight: 600; font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; color: var(--wcd-brass); margin-bottom: 16px; }
.wcd-footer__blurb { font-family: var(--font-body); font-size: 1.04rem; line-height: 1.5; color: #c7bfb0; margin: 0; max-width: 440px; }
.wcd-footer__h { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; color: var(--wcd-cream); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--wcd-red); display: inline-block; }
.wcd-footer__contact { margin: 0; font-family: var(--font-body); font-size: 1.04rem; line-height: 1.7; color: #c7bfb0; }
.wcd-footer__icon { width: 1em; height: 1em; margin-right: 7px; color: var(--wcd-brass); vertical-align: -.125em; }
.wcd-footer__contact a { color: var(--wcd-cream); text-decoration: none; }
.wcd-footer__contact a:hover { color: var(--wcd-cream); text-decoration: underline; }
.wcd-footer__bar { background: var(--wcd-red); padding: 13px 0; }
.wcd-footer__bar .wcd-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.wcd-footer__copy { font-family: var(--font-body); font-size: .9rem; color: var(--wcd-cream); }
.wcd-footer__slogan { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: .9rem; color: var(--wcd-cream); }

/* ============================================================
   Responsive
   ------------------------------------------------------------
   The export ships one breakpoint at 760px. Jim's visitors arrive
   by QR code from printed promo material, so phones are the primary
   case — the nav, gutters and poster type are tuned here too.
   ============================================================ */

@media (max-width: 760px) {
    .wcd-nav { padding: 12px 20px; gap: 14px; }
    .wcd-menu { gap: 18px; margin-left: 0; width: 100%; }

    /* No hover on touch: the drop-down's links flow inline in the wrapping
       menu row instead, right after their parent entry. */
    .wcd-menu-item { display: contents; }
    .wcd-menu-caret { display: none; }
    /* The hover/focus selectors are repeated so this beats them on
       specificity — otherwise hovering would re-open the panel layout. */
    .wcd-menu-drop,
    .wcd-menu-item:hover .wcd-menu-drop,
    .wcd-menu-item:focus-within .wcd-menu-drop {
        position: static; transform: none; display: contents;
        border: none; box-shadow: none; background: none; padding: 0;
    }
    .wcd-main { padding: 40px 20px 64px; }
    .wcd-wrap { padding: 0 20px; }

    .wcd-hero-grid { grid-template-columns: 1fr; }
    .wcd-h1 { font-size: 2.6rem; }
    .wcd-h1--hero { font-size: 3.4rem; }
    .wcd-hero-lead { font-size: 1.18rem; }

    .wcd-footer__grid { grid-template-columns: 1fr; }
    .wcd-field-row { grid-template-columns: 1fr; }
    .wcd-btn-row .wcd-btn { width: 100%; justify-content: center; }

    /* Stacked, so there is no text column left to match. The figure goes
       back to its own aspect ratio rather than filling a row height. */
    .wcd-intro-grid { grid-template-columns: 1fr; gap: 28px; }
    .wcd-intro-figure { position: static; min-height: 0; aspect-ratio: 4 / 3; }
    .wcd-intro-figure img { position: static; }

    /* One column: the photos fall below the text. Laid out two-up rather than
       a tall single stack, so five images don't run the page on forever. */
    .wcd-shop-grid { grid-template-columns: 1fr; gap: 30px; }
    .wcd-shop-grid__aside { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

    /* The photo column falls below the story. It stays one-up, unlike the
       In the Shop aside: these photos carry captions, and two captioned
       stamps side by side are unreadable on a phone. */
    .wcd-detail-grid { grid-template-columns: 1fr; gap: 30px; }
    .wcd-detail-gallery { gap: 28px; }
}