/*
    KWAC: the selected full-bleed still-life direction, with rounded headings and calm body
    typography. Phone layout is the default; wider layouts use min-width queries only.
    All visual values stay in this contract. Product, account and staff views share it.
*/
:root {
    --ink: #202125;
    --paper: #fdfbf7;
    --brand: #ffc629;
    --brand-dark: #252629;
    --quiet: #5e5e63;
    --line: #ddd8cf;
    --sold: #665f52;
    --frame: #f0e7da;
    --notice: #fff1ce;
    --surface: #fffdfa;
    --tint: #fff0bb;
    --control-border: #898982;
    --focus: #874208;
    --shadow: 0 12px 32px #20212514;
    --hero-background: linear-gradient(110deg, #ffca24, #ffba19 60%, #ffc827);
    --masthead-background: linear-gradient(115deg, #ffcc27, #ffbd1c);
    --hero-secondary: #fff0bd;

    --type-face: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --type-face-headings: "Fredoka", "Arial Rounded MT Bold", sans-serif;
    --type-line-height: 1.5;
    --type-small: 0.875rem;
    --type-label: 0.9375rem;
    --type-base: 1rem;
    --type-card-title: 1.125rem;
    --type-price: 1.1875rem;
    --type-lead: 1.125rem;
    --type-total: 1.375rem;
    --type-figure: 2.25rem;
    --type-page-title: clamp(2.25rem, 4vw, 3rem);
    --type-section: 1.75rem;
    --type-hero: clamp(2.125rem, 10.8vw, 2.875rem);
    --type-catalogue: clamp(3rem, 6.2vw, 5rem);
    --type-staff-title: clamp(2rem, 3.5vw, 3rem);
    --type-featured: 1.5rem;
    --space: 1.5rem;
    --gutter: clamp(1.25rem, 4.5vw, 4rem);
    --radius: 0.5rem;
    --radius-large: 0.75rem;
    --radius-search-input: 1.25rem;
    --radius-search-button: 1rem;
    --tap: 2.75rem;
    --viewport-height: 100vh;
    --hero-height: 32rem;
    --hero-height-wide: clamp(32rem, 43.4vw, 40rem);
    --page-height: 60vh;
    --media-height: 18rem;
    --empty-height: 12rem;
    --access-art-height: 8rem;
    --access-art-height-wide: 32rem;
    --single-card-height: 17rem;
    --panel-tint: #fcf5df;
    --masthead-height: 12rem;
    --masthead-height-wide: clamp(14rem, 20vw, 17rem);
    --editorial-height-wide: clamp(13rem, 26vw, 22rem);
}

/* Local, licensed variable fonts. Latin is preloaded; extended Latin loads when needed. */
@font-face {
    font-family: "Fredoka";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/fredoka-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Fredoka";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/fredoka-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 1rem; }
html[data-kwac-navigating]::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: 3px;
    background: var(--ink);
    z-index: 2147483647;
    pointer-events: none;
}
body {
    margin: 0;
    min-height: var(--viewport-height);
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--type-face);
    font-size: var(--type-base);
    font-weight: 400;
    line-height: var(--type-line-height);
    overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
a { color: var(--brand-dark); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}
h1, h2, h3, .staff-sidebar-title {
    font-family: var(--type-face-headings);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}
h1 { font-size: var(--type-page-title); }
h2 { font-size: var(--type-section); }
h3 { font-size: var(--type-total); }
p { margin: 0 0 1rem; }
/* Explicit em measures also resolve in the rendered-cascade checks. */
.lead { font-size: var(--type-lead); color: var(--quiet); max-width: 42.12em; }
.note { font-size: var(--type-small); color: var(--quiet); }
.note:last-child, section > p:last-child { margin-bottom: 0; }
main {
    width: 100%;
    flex: 1;
    max-width: 84rem;
    min-height: var(--page-height);
    margin: 0 auto;
    padding: 2.75rem var(--gutter) 4rem;
}
.page-body { min-width: 0; }
.page-body > section { margin-top: 2rem; }
.page-body > h2 { margin-top: 2.5rem; }
.page-body > h3 { margin-top: 1.75rem; }
.page-body > p, .page-body > section > p { max-width: 45.36em; }
.page-body h3:not(:first-child) { margin-top: 1.75rem; }
.page-body > h1 { padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 3px solid var(--brand); }
.page-body > form:last-child { margin-top: 2rem; }
blockquote { margin: 1.25rem 0; padding: 1rem 1.25rem; border-left: 3px solid var(--brand); background: var(--tint); }
dd, button, input, select, textarea { overflow-wrap: anywhere; }

.skip-link {
    position: absolute;
    left: -9999px;
    min-height: var(--tap);
    padding: 0.65rem 1rem;
    background: var(--paper);
    border: 2px solid var(--focus);
    border-radius: var(--radius);
    z-index: 30;
}
.skip-link:focus { left: var(--space); top: 0.75rem; }
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* One server-rendered shell. The phone menu uses the browser's native disclosure. */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.header-inner {
    max-width: 84rem;
    margin: 0 auto;
    padding: 0.625rem var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    min-height: var(--tap);
    font-family: var(--type-face-headings);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--ink);
    text-decoration: none;
}
/* The child-designed KWAC mark: the bird is the K, so the name is never set beside it in type. */
.brand img { display: block; width: auto; height: 2.75rem; }
.site-header nav ul, .site-footer nav ul { margin: 0; padding: 0; list-style: none; }
.site-header nav a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    min-width: var(--tap);
    padding: 0.65rem 0.8rem;
    font-size: var(--type-label);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius);
}
.site-header nav a:hover, .site-header nav a[aria-current="page"] { background: var(--tint); }
/* The sign-out form sits in the menu and its button reads as one of the menu's links. */
.site-header nav form { margin: 0; }
.site-header nav button.quiet {
    min-height: var(--tap);
    min-width: var(--tap);
    padding: 0.65rem 0.8rem;
    font-size: var(--type-label);
    font-weight: 500;
    border-color: transparent;
    background: transparent;
    border-radius: var(--radius);
}
.site-header nav button.quiet:hover { background: var(--tint); }
.desktop-navigation { display: none; }
.mobile-navigation > button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    min-height: var(--tap);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}
.mobile-navigation svg { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.mobile-navigation > button:hover { background: var(--tint); }
.mobile-navigation nav {
    position: fixed;
    top: 4.55rem;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    max-height: 75vh;
    overflow: auto;
    margin: 0;
    padding: 0.75rem var(--gutter) 1rem;
    background: var(--paper);
    color: var(--ink);
    border: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.mobile-navigation nav ul { display: grid; gap: 0.25rem; }

/* Headline and imagery follow the selected mockup. All words remain real HTML. */
main.home-page { max-width: none; padding: 0; }
main.home-page > section { margin-top: 0; border-top: 0; }
.home-hero { position: relative; overflow: hidden; background: var(--hero-background); }
.hero-art { position: absolute; inset: 0; display: block; mask-image: linear-gradient(180deg, #000 64%, transparent 74%); }
/* Lossless source rectangles retain the original board's decorative pixels.
   All headings, copy and controls remain accessible HTML. */
.hero-art::before, .hero-art::after {
    content: ""; position: absolute; inset: 0;
    background-image: url('/images/approved-home-phone.webp');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.hero-art::before { mask-image: linear-gradient(90deg, transparent 75%, #000 80%), linear-gradient(180deg, #000 48%, transparent 52%); mask-composite: intersect; }
.hero-art::after { mask-image: linear-gradient(90deg, transparent 83%, #000 88%), linear-gradient(180deg, #000 20%, transparent 27%); mask-composite: add; clip-path: inset(0 0 27% 0); }
.hero-inner {
    position: relative;
    max-width: 84rem;
    min-height: var(--hero-height);
    margin: 0 auto;
    padding: 7.5rem var(--gutter) 1.5rem;
    display: flex;
    align-items: center;
}
.hero-copy { width: 100%; }
.hero-copy h1 {
    font-size: var(--type-hero);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.018em;
    margin-bottom: 1rem;
    max-width: 75%;
}
.hero-copy h1 span { display: block; white-space: nowrap; }
.hero-copy .lead { max-width: 73%; color: var(--ink); font-size: var(--type-base); line-height: 1.5; }
.hero-actions { display: grid; gap: 0.65rem; margin-top: 1.5rem; }
.hero-actions .button { width: 100%; }
.hero-actions .button.secondary { background: var(--hero-secondary); }
.home-latest, .impact-inner { max-width: 84rem; margin: 0 auto; padding: 1.75rem var(--gutter); }
.home-impact { background: var(--tint); }
.home-impact { position: relative; overflow: hidden; }
.home-impact::after { content: ""; position: absolute; right: -1rem; bottom: 0; width: 10rem; height: 10.4rem; background: url('/images/approved-home-leaf.webp') center / 100% 100% no-repeat; pointer-events: none; }
.impact-inner { position: relative; z-index: 1; }
.home-impact h2 { margin-bottom: 1.5rem; }
.allocation {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 1.75rem;
}
.allocation > div { display: flex; flex-direction: column-reverse; padding: 0 0.75rem; text-align: center; }
.allocation > div:first-child { padding-left: 0; }
.allocation > div:last-child { padding-right: 0; }
.allocation > div + div { border-left: 1px solid var(--control-border); }
.allocation dt { font-size: var(--type-small); line-height: 1.4; }
.allocation dd { margin: 0 0 0.3rem; font-size: var(--type-figure); font-weight: 500; line-height: 1.15; }
.allocation-description { max-width: 45.36em; color: var(--quiet); }
.home-impact .impact { margin-top: 1.75rem; }
.home-impact .impact > div { background: var(--paper); }

/* Shop cards and family businesses share type, spacing and image treatment. */
.products, .businesses {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem 1.25rem;
    margin: var(--space) 0 0;
    padding: 0;
    list-style: none;
}
.products li, .businesses li { min-width: 0; }
.products article { height: 100%; }
.product-card-copy { padding-top: 0.75rem; }

.products h2, .products h3 {
    margin: 0;
    font-family: var(--type-face);
    font-size: var(--type-card-title);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
}
.products h2 a, .products h3 a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--ink);
    text-decoration: none;
}
.products h2 a:hover, .products h3 a:hover { text-decoration: underline; }
.businesses article { height: 100%; padding: var(--space); border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); }
.businesses h2 { font-size: var(--type-total); }
.thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    margin: 0;
    background: var(--frame);
}

.thumbnail.none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; color: var(--quiet); font-size: var(--type-small); padding: 1.5rem; text-align: center; }
.thumbnail.none::before, .product-no-photo::before { content: ""; display: block; width: 4.5rem; height: 4.5rem; background: url('/brand/kwac-mark.svg') center / contain no-repeat; }
.business { color: var(--quiet); font-size: var(--type-label); margin: 0.25rem 0; }
.price { margin: 0.2rem 0 0.5rem; font-size: var(--type-price); font-weight: 600; }
.sold-out { color: var(--sold); font-weight: 600; margin-bottom: 0; }
.one-off { color: var(--brand-dark); font-size: var(--type-small); margin-bottom: 0; }
.in-stock { color: var(--quiet); }
.count { color: var(--quiet); font-size: var(--type-label); }
.empty-state { border: 1px solid var(--line); border-radius: var(--radius-large); padding: 2rem; background: var(--surface); }
.photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: var(--space) 0; padding: 0; list-style: none; }
.photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--frame); }
.product { max-width: 76rem; margin: 0 auto; }
.product-heading { margin-bottom: 2.5rem; }
.product-heading .price { font-size: var(--type-figure); margin-top: 0.75rem; }
.product-layout { display: grid; gap: 2rem; align-items: start; }
.product-layout > div { min-width: 0; }
.product-information > section + section { margin-top: 1.5rem; }
.product-information h2 { font-size: var(--type-total); }
.product-media .photos { margin: 0; }
.product-media section > h2, .product-media section > .note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.product-media .photos > li:first-child { grid-column: 1 / -1; }
.product-media .photos > li:first-child img { aspect-ratio: 1.15; }
.product-media .photos > li:not(:first-child) img { aspect-ratio: 1.17; }
.product-page { padding-top: 1.5rem; }
.product-information h1 { font-size: clamp(2rem, 3.9vw, 3.5rem); }
.product-no-photo { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: var(--media-height); aspect-ratio: 4 / 3; border-radius: var(--radius-large); background: var(--frame); color: var(--quiet); padding: 2rem; text-align: center; }
.product-delivery { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.product-delivery p { max-width: 44.064em; }
.product .buy { margin-top: 2rem; }
.product .buy button { width: 100%; }
.product section[aria-labelledby="safety"] { padding: var(--space); border-radius: var(--radius); background: var(--notice); }

/* Controls keep the same 44px target and measured border in every workspace. */
button, input, select, textarea { font-family: var(--type-face); font-size: var(--type-base); }
button, summary { touch-action: manipulation; }
button, a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--tap);
    padding: 0.7rem 1.35rem;
    border: 1px solid var(--brand-dark);
    border-radius: 999px;
    background: var(--brand-dark);
    color: var(--paper);
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
button:hover, a.button:hover { background: var(--ink); }
button.quiet, .button.secondary {
    border: 1px solid var(--control-border);
    background: var(--paper);
    color: var(--ink);
}
button.quiet:hover, .button.secondary:hover { background: var(--tint); }
button:disabled { cursor: not-allowed; }
p > a:only-child, li > a:only-child {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
}
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
select, textarea {
    max-width: 100%;
    min-width: 0;
    min-height: var(--tap);
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    line-height: 1.4;
}
input::placeholder, textarea::placeholder { color: var(--quiet); opacity: 1; }
textarea { width: 100%; resize: vertical; }
select { width: 100%; }
input[type="checkbox"], input[type="radio"] { width: var(--tap); height: var(--tap); min-height: var(--tap); margin: 0; accent-color: var(--brand-dark); flex-shrink: 0; }
form.stacked { display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; max-width: 42rem; margin: var(--space) 0; }
form.stacked label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
form.stacked input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { width: 100%; }
form.stacked .note { margin-top: 0.5rem; }
form.stacked button { align-self: flex-start; }
form.stacked .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.published-article { max-width: 70ch; padding-block: 1rem; }
.published-article + .published-article { border-top: 1px solid var(--line); }
form.stacked .checkbox { display: flex; gap: 0.85rem; align-items: center; }
form.stacked .checkbox label { margin: 0; min-height: var(--tap); display: flex; align-items: center; font-weight: 400; }
fieldset { min-width: 0; margin: 0; padding: var(--space); border: 1px solid var(--line); border-radius: var(--radius-large); }
legend { padding: 0 0.4rem; font-family: var(--type-face-headings); font-size: var(--type-total); font-weight: 600; }
fieldset > div + div { margin-top: 1rem; }
.search { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; margin: 2rem 0; }
.search label { flex-basis: 100%; font-weight: 600; }
.search input { flex: 1 1 12rem; }
.search button { flex: 1 1 100%; }
.search input[type='search'] { border-radius: var(--radius-search-input); }
.search button { border-radius: var(--radius-search-button); }

/* Actual money totals, never a substitute for the donation/allocation distinction. */
.impact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: var(--space) 0; }
.impact > div { min-width: 0; padding: var(--space); border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); }
.impact dt { color: var(--quiet); font-size: var(--type-label); }
.impact dd { margin: 0.35rem 0 0; font-size: var(--type-figure); font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }

/* Public and private lists use the same cards without truncating names or controls. */
.review { list-style: none; padding: 0; }
ul.review { display: grid; gap: 0.75rem; }
ul.review > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    padding: var(--space);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
.review .what { flex: 1 1 15rem; min-width: 0; }
.review a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); }
.review .how-many, .review .how-much { font-size: var(--type-label); }
.what .business { display: block; margin-top: 0.2rem; }
article.review { padding: var(--space); margin: 1rem 0; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); }
.staff-links { margin: 0; padding: 0.75rem; border-radius: var(--radius-large); background: var(--tint); }
.staff-links ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.staff-links li > a, .staff-links li > span[aria-current] { display: flex; align-items: center; min-height: var(--tap); height: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); text-decoration: none; }
.staff-links a:hover { background: var(--surface); text-decoration: underline; }
.staff-links li > span[aria-current] { background: var(--brand); border-color: var(--brand); font-weight: 600; }
.workspace-page .page-body > .staff-links { padding: 0; background: transparent; }
.workspace-page .page-body > .staff-links li > a { padding: 1.5rem; background: var(--surface); border-top: 4px solid var(--brand); }
.unavailable { border: 1px solid var(--control-border); border-left: 4px solid var(--focus); border-radius: var(--radius); padding: var(--space); background: var(--notice); }
details:not(.mobile-navigation) { margin: 1rem 0; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
details:not(.mobile-navigation) > summary { min-height: var(--tap); cursor: pointer; font-weight: 600; }
details:not(.mobile-navigation)[open] > summary { margin-bottom: 0.75rem; }

/* A basket is stacked cards at phone widths, and a proper table only when it fits. */
.basket, .basket caption, .basket tbody, .basket tr, .basket th, .basket td { display: block; }
.basket { width: 100%; border-collapse: collapse; margin: var(--space) 0; }
.basket thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.basket caption { text-align: left; padding-bottom: 0.75rem; font-weight: 600; }
.basket tbody tr { border: 1px solid var(--line); border-radius: var(--radius-large); padding: var(--space); margin-bottom: 1rem; background: var(--surface); }
.basket th, .basket td { text-align: left; padding: 0.4rem 0; border: 0; vertical-align: top; overflow-wrap: anywhere; }
.basket tbody th { font-weight: 600; }
.basket td[data-label="Price"] { white-space: nowrap; }
.basket td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 0.25rem; color: var(--quiet); font-size: var(--type-small); font-weight: 600; }
.quantity { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.quantity input { width: 4.5rem; }
.quantity button { padding: 0.65rem 1rem; font-size: var(--type-label); }
.parcels { padding-left: 1.25rem; }
.parcel-heading { font-weight: 600; margin-bottom: 0.25rem; }
.totals { max-width: 42rem; padding: var(--space); background: var(--tint); border-radius: var(--radius-large); }
.totals dl { margin: 0; }
.totals dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.totals dl > div.grand { font-size: var(--type-total); font-weight: 600; border-bottom: 0; }
.totals dt, .totals dd { margin: 0; }

/*
    The guest order page: one card per part of the order, two columns on a wide screen. Each
    card carries a header strip across its full width and lifts off the page, so a buyer can
    see where one part ends and the next begins. Cards that ask the buyer to act (the quote,
    the payment) have a brand-yellow strip; cards that only tell them something are neutral.
*/
.order-status-head { padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 3px solid var(--brand); }
.order-status-head h1 { margin-bottom: 0.5rem; overflow-wrap: anywhere; }
.order-status-head .lead { margin: 0; color: var(--ink); }
.order-eyebrow { margin: 0 0 0.35rem; font-size: var(--type-small); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--quiet); }
.order-notice { max-width: none; margin: 0 0 1rem; padding: 1rem 1.25rem; border: 1px solid var(--control-border); border-left: 4px solid var(--focus); border-radius: var(--radius); background: var(--notice); }
.order-status-layout { display: grid; gap: 1.5rem; align-items: start; margin-top: 2rem; }
.order-column { display: grid; gap: 1.5rem; min-width: 0; }
.order-card { margin: 0; padding: 0 1.25rem 1.25rem; border: 1px solid var(--control-border); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow); }
.order-card > h2 { margin: 0 -1.25rem 1.25rem; padding: 0.85rem 1.25rem; font-size: var(--type-card-title); background: var(--frame); border-bottom: 1px solid var(--control-border); border-radius: calc(var(--radius-large) - 1px) calc(var(--radius-large) - 1px) 0 0; }
.order-card > p:last-child, .order-card > form:last-child, .order-card > ul:last-child, .order-card > dl:last-child { margin-bottom: 0; }
.order-card ul.review { margin: 0; }
.order-card ul.review > li { padding: 0.9rem 1rem; background: var(--paper); }
.order-card form.stacked { max-width: none; }
.order-card.order-action > h2 { background: var(--brand); }
.order-card.totals { max-width: none; padding: 0 1.25rem; background: var(--surface); }
.order-card.totals dl > div.grand { margin: 0 -1.25rem; padding: 1rem 1.25rem; background: var(--tint); border-radius: 0 0 calc(var(--radius-large) - 1px) calc(var(--radius-large) - 1px); }
.order-sums { margin: 0 0 1.25rem; }
.order-sums > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.order-sums dt, .order-sums dd { margin: 0; }
.order-done { margin: 0 0 1.25rem; padding: 1rem 1.25rem; border-left: 4px solid var(--ink); border-radius: var(--radius); background: var(--notice); }
.order-done > p { margin: 0 0 0.5rem; }
.order-done > p:last-child { margin: 0; }
.order-done > p:first-child { font-weight: 600; }
/* A link inside a sentence is exempt from the tap-size rule (WCAG 2.5.8); as a 44px box it stretched the line. */
.order-done p > a { display: inline; min-height: 0; }
.order-card.order-help { margin-top: 2.5rem; }
.order-card.order-help > p { max-width: 45.36em; }
.order-card.order-help h3 { font-size: var(--type-card-title); margin-top: 1.5rem; }
.order-returns { display: grid; gap: 1rem; margin: 0 0 1rem; }
.order-returns form.stacked { margin: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.order-finish { margin: 0; }
.order-sums > div.grand { font-size: var(--type-total); font-weight: 600; border-bottom: 0; }
/* The PayFast hand-off: one card, narrow enough to read at a glance. */
.payment-handoff { max-width: 40rem; }
.payment-handoff form { margin: 0 0 1rem; }
.payment-handoff .payment-handoff-back { margin: 0; }

/* The same visual system, composed for each task. Base rules are the phone layout. */
.catalogue-intro { position: relative; isolation: isolate; overflow: hidden; margin: -2.75rem calc(-1 * var(--gutter)) 0; min-height: var(--masthead-height); padding: 1.5rem var(--gutter) 1.25rem; background: var(--masthead-background); }
.catalogue-intro::before, .catalogue-intro::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url('/images/approved-shop-phone.webp') center / 100% 100% no-repeat; }
.catalogue-intro::before { height: 10.625rem; mask-image: linear-gradient(90deg, transparent 57%, #000 64%), linear-gradient(180deg, #000 40%, transparent 50%); mask-composite: intersect; }
.catalogue-intro::after { mask-image: linear-gradient(90deg, transparent 93%, #000 97%), linear-gradient(180deg, transparent 70%, #000 82%); mask-composite: intersect; }
.catalogue-intro .lead { max-width: 90%; color: var(--ink); font-size: var(--type-label); line-height: 1.4; }
.catalogue-intro h1 { font-size: var(--type-catalogue); line-height: 1.1; margin-bottom: 0.75rem; }
.catalogue-intro p:last-child { margin-bottom: 0; }
.catalogue-page .count { margin-bottom: 0; }
.catalogue-page .empty-state { min-height: var(--empty-height); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; border: 0; background: transparent; text-align: center; }
.catalogue-page .empty-state::before { content: ""; width: 3.5rem; height: 3.5rem; background: url('/brand/kwac-mark.svg') center / contain no-repeat; }
.page-intro { margin: -2.75rem calc(-1 * var(--gutter)) 2rem; padding: 2rem var(--gutter); background: var(--brand); }
.page-intro .lead { color: var(--ink); }
.editorial-page .page-intro, .guardian-intro, .child-intro { position: relative; isolation: isolate; overflow: hidden; background: var(--masthead-background); }
.editorial-page .page-intro::before, .guardian-intro::before, .child-intro::before { content: ""; position: absolute; inset: 0; z-index: -1; background-repeat: no-repeat; }
.editorial-page .page-intro::before { width: 46rem; height: 12rem; left: auto; background-image: url('/images/approved-information-banner.webp'); background-size: 100% 100%; background-position: center; mask-image: linear-gradient(90deg, transparent 70%, #000 80%); }
.guardian-intro::before { background-image: url('/images/approved-guardian-banner.webp'); background-size: 100% 100.90904076%; background-position: center 67.90043555%; }
.child-intro::before { background-image: url('/images/approved-child-banner.webp'); background-size: 100% 100.90904076%; background-position: center 67.90043555%; }
.guardian-intro::before, .child-intro::before { width: 46.4375rem; height: 6.875rem; left: auto; bottom: auto; mask-image: linear-gradient(90deg, transparent 82%, #000 88%), linear-gradient(180deg, #000 65%, transparent); mask-composite: intersect; }
.editorial-page .page-intro h1 { max-width: 70%; }
.editorial-page .page-intro p, .guardian-intro > * { max-width: 75%; }
.child-intro > * { max-width: 78%; }
.page-intro h1:last-child, .page-intro p:last-child { margin-bottom: 0; }
.legal-page .page-body > section,
.staff-body > section, .review-page .page-body > section,
.message-page .page-body > section, .editor-page .page-body > section,
.application-page .page-body > section {
    padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface);
}
.editorial-page .page-body > .unavailable, .legal-page .page-body > .unavailable,
.family-columns .unavailable, .staff-body > .unavailable,
.editor-page .page-body > .unavailable { background: var(--notice); border-left: 4px solid var(--focus); }
.legal-page { max-width: 62rem; }
.legal-page p, .legal-page ul { max-width: 43rem; }
.editorial-page .page-body > section, .editorial-details section { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.editorial-page .page-body > section:has(.allocation-copy) { padding-top: 0; border-top: 0; }
.editorial-details { display: grid; gap: 1.5rem; }
.editorial-details > div > section + section { margin-top: 2rem; }
.allocation-copy { display: grid; padding: 1rem; list-style: none; background: var(--tint); border-radius: var(--radius); }
.allocation-copy li { padding: 1rem; }
.allocation-copy li + li { border-top: 1px solid var(--control-border); }
.allocation-copy strong { display: block; font-size: var(--type-figure); font-weight: 500; }
.businesses article { padding: 2rem; }
.businesses article::before { content: ""; display: block; width: 3rem; height: 0.4rem; margin-bottom: 1.5rem; border-radius: var(--radius); background: var(--brand); }
.businesses .pending { color: var(--quiet); }
.businesses .illustration { display: block; width: 100%; max-width: 15rem; height: auto; aspect-ratio: 1; margin-bottom: 1rem; border-radius: var(--radius-large); background: var(--surface); object-fit: cover; }
.illustration-preview { display: block; width: 100%; max-width: 20rem; height: auto; aspect-ratio: 1; margin-block: 1rem; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); object-fit: contain; }
.illustration-thumbnail { display: block; width: 6rem; height: 6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); object-fit: contain; }
.access-layout { display: grid; gap: 1.5rem; max-width: 70rem; margin: 0 auto; }
.access-panel { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.access-panel > h1 { border-bottom: 0; padding-bottom: 0; }
.access-panel form.stacked { margin-top: 2rem; }
.access-panel form.stacked button { width: 100%; }
.access-art { min-height: var(--access-art-height); border-radius: var(--radius); background: var(--brand) url('/images/approved-access-panel.webp') center / 100% 100% no-repeat; }
.access-panel form.stacked button { border-radius: var(--radius); }
.access-panel > section { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.application-page .page-body > form.stacked, .editor-page .page-body > form.stacked {
    max-width: none; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface);
}
.application-page fieldset { background: var(--paper); }
.parcel-fields { background: var(--paper); }
.family-columns, .commerce-layout, .staff-layout { display: grid; gap: 1.5rem; align-items: start; }
.family-columns > div, .commerce-layout > div, .staff-layout > * { min-width: 0; }
.family-columns > div, .family-details > section, .workspace-page section[aria-labelledby='your-messages'], .workspace-page section[aria-labelledby='sold'] { padding: 1.25rem; border-radius: var(--radius); background: var(--panel-tint); }
.family-columns section { margin-top: 1.5rem; }
.family-details { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.workspace-page section[aria-labelledby='attention'] { margin: 0 0 1.5rem; padding: 1.25rem; border: 0; border-radius: var(--radius); background: var(--tint); }
.family-columns section:first-child { margin-top: 0; }
.family-columns .review > li { padding: 1rem; }
.family-columns article.review { padding: 0; border: 0; background: transparent; }
.consent-choices { padding: 0; border: 0; }
.family-columns .impact > div { padding: 1rem; background: var(--paper); }
.workspace-page .page-body > section[aria-labelledby='attention'] { border: 0; background: var(--tint); padding: 1.25rem; }
.workspace-page .page-body > section[aria-labelledby='attention'] ul { margin-bottom: 0; }
.family-columns ul.review { gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.family-columns ul.review > li { border: 0; border-radius: 0; padding: 0.5rem 1rem; }
.family-columns ul.review > li + li { border-top: 1px solid var(--line); }
.family-columns .review .what { flex-basis: 11rem; }
.family-columns .review .how-many, .family-columns .review .how-much { margin-left: auto; }
.family-secondary section[aria-labelledby='your-story'] > p { background: var(--surface); padding: 1rem; margin: 0; }
.family-secondary section[aria-labelledby='your-story'] > p + p { padding-top: 0; }
.family-secondary section[aria-labelledby='team'] { border-top: 4px solid var(--paper); padding-top: 1rem; }
.family-secondary .impact dd { font-size: var(--type-total); }
.family-secondary section[aria-labelledby='money'] > .impact:first-of-type { gap: 0; padding: 0.25rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.family-secondary section[aria-labelledby='money'] > .impact:first-of-type > div { padding: 1rem 0; border: 0; border-radius: 0; background: transparent; }
.family-secondary section[aria-labelledby='money'] > .impact:first-of-type > div + div { border-top: 1px solid var(--line); }
.workspace-page .page-body > section[aria-labelledby='your-numbers'] { margin: 0 0 1.5rem; padding: 1.25rem; border-radius: var(--radius); background: var(--tint); }
.workspace-page section[aria-labelledby='your-numbers'] h2 { font-size: var(--type-total); }
.workspace-page section[aria-labelledby='your-numbers'] .impact { margin-bottom: 0; gap: 0; }
.workspace-page section[aria-labelledby='your-numbers'] .impact > div { border: 0; border-radius: 0; background: transparent; }
.workspace-page section[aria-labelledby='your-numbers'] .impact dd { font-size: var(--type-section); }
.commerce-main > section { padding: 1.5rem; margin-top: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); }
.commerce-main > section:first-child { margin-top: 0; }
.commerce-summary { padding: 1.5rem; border-radius: var(--radius-large); background: var(--tint); }
.commerce-summary .totals { padding: 0; }
.commerce-summary > section + section { margin-top: 1.75rem; }
.commerce-summary > section h2 { font-size: var(--type-total); }
.commerce-summary > p:last-child { margin: 1.5rem 0 0; }
.commerce-summary .button { width: 100%; }
.commerce-summary .unavailable { background: var(--paper); }
.checkout-page .commerce-main > section { padding: 1.5rem 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.checkout-page .commerce-main > section:first-child { padding-top: 0; border-top: 0; }
.checkout-page .commerce-summary { padding: 0; background: transparent; }
.checkout-page .commerce-summary > section { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.checkout-page .commerce-summary > .totals { background: var(--tint); border-color: transparent; }
.checkout-page .commerce-summary .unavailable { padding: 0; border: 0; background: transparent; }
.commerce-summary .totals dl > div { flex-wrap: wrap; }
.commerce-summary .totals dd { text-align: right; margin-left: auto; }
.staff-sidebar { display: none; }
.staff-mobile-links { padding: 0; }
.staff-sidebar-title, .staff-sidebar h2, .staff-mobile-links h2 { font-size: var(--type-total); }
.staff-layout .staff-links { padding: 0; background: transparent; }
.staff-layout .staff-links ul { grid-template-columns: minmax(0, 1fr); gap: 0; }
.staff-layout .staff-links li > a, .staff-layout .staff-links li > span { border-radius: 0; border-width: 0 0 1px; background: transparent; }
.staff-layout .staff-links li > span[aria-current] { border-radius: var(--radius); background: var(--brand); }
.staff-mobile-links .staff-links { padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.staff-sign-out button { width: 100%; border-radius: var(--radius); }
.staff-body > h1 { font-size: var(--type-staff-title); margin: -2.75rem calc(-1 * var(--gutter)) 0; padding: 2rem var(--gutter) 1rem; border: 0; background: var(--brand); }
.staff-body > h1 + .lead { margin: 0 calc(-1 * var(--gutter)) 2rem; padding: 0 var(--gutter) 2rem; max-width: none; color: var(--ink); background: var(--brand); }
.staff-body > h1:not(:has(+ .lead)) { margin-bottom: 2rem; }
.report-sections { display: grid; gap: 2rem; }
.report-sections > section { min-width: 0; }
.report-sections .impact { gap: 0; padding: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.report-sections .impact > div { padding: 1rem; background: transparent; border: 0; border-radius: 0; }
.report-sections .impact > div + div { border-top: 1px solid var(--line); }
.report-sections ul.review { gap: 0; padding: 0.25rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.staff-body .report-sections ul.review > li { padding: 0.35rem 0; border-width: 0 0 1px; border-radius: 0; background: transparent; }
.report-sections ul.review > li:last-child { border-bottom: 0; }
.staff-body > section { margin-top: 1.5rem; }
.staff-body .impact dd, .review-page .impact dd, .message-page .impact dd { font-size: var(--type-total); }
.reports-page .impact dd { font-size: 2rem; }
.staff-body ul.review > li { padding: 1rem 1.25rem; }
.staff-body .review .how-many, .staff-body .review .how-much { color: var(--quiet); }
.staff-body .audit-filters { max-width: none; padding: 1.25rem; background: var(--tint); border-radius: var(--radius-large); }
table.parcels { width: 100%; padding: 0; border-collapse: collapse; }
table.parcels caption { text-align: left; margin: 1rem 0; }
table.parcels th, table.parcels td { padding: 0.75rem 0.35rem; text-align: left; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.staff-body table { table-layout: fixed; }
.staff-body table.basket tr > :first-child { width: auto; }
.staff-body table.parcels { font-size: var(--type-base); }
.recovery-page { max-width: 58rem; padding-top: 3rem; padding-bottom: 3rem; }
.recovery-page .page-body, main.recovery-page:not(.content-page) { padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--tint); }
.recovery-page h1::before { content: ""; display: block; width: 4rem; height: 4rem; margin-bottom: 1.25rem; background: url('/brand/kwac-mark.svg') center / contain no-repeat; }
.message-page { max-width: 68rem; }
.message-page section[aria-labelledby='report'] { background: var(--notice); }
.message-page section[aria-labelledby='what-was-said'] li { border-left: 3px solid var(--brand); }
.editor-page form.stacked, .review-page form.stacked, .staff-body form.stacked { max-width: none; }
.editor-page input[type='file'] { width: 100%; font-size: var(--type-label); }
.story-layout { display: grid; gap: 1.5rem; align-items: start; }
.story-layout > * { min-width: 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); }
.story-work form.stacked { margin-top: 0; }

@media (min-width: 40rem) {
    .staff-body table.parcels { font-size: var(--type-small); }
    .search { align-items: center; }
    .search button { flex: 0 0 auto; }
    .catalogue-page .products-single { grid-template-columns: minmax(0, 1fr); }
    .catalogue-page .products-single article { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
    .catalogue-page .products-single .thumbnail { border-radius: 0; }
    .catalogue-page .products-single .thumbnail { height: 100%; min-height: var(--single-card-height); aspect-ratio: 1.9; }
    .catalogue-page .products-single .product-card-copy { display: flex; flex-direction: column; justify-content: center; padding: 2rem; }
    .catalogue-page .products-single h2, .catalogue-page .products-single h3 { font-size: var(--type-featured); }
    .catalogue-page .products-single .price { margin-top: 1rem; font-size: var(--type-total); }
    .allocation-copy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .allocation-copy li + li { border-top: 0; border-left: 1px solid var(--control-border); }
    .parcel-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .parcel-fields > p { grid-column: 1 / -1; }
    .parcel-fields > div + div { margin-top: 0; }
    .staff-body form.audit-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .staff-body form.audit-filters button { align-self: end; }
    .access-panel { padding: 2.5rem; }
}
@media (min-width: 48rem) {
    .header-inner { flex-wrap: wrap; gap: 0; }
    .desktop-navigation { display: block; width: 100%; }
    .desktop-navigation ul { display: flex; align-items: center; justify-content: space-between; }
    .desktop-navigation nav a, .desktop-navigation nav button.quiet { font-size: var(--type-small); padding: 0.4rem 0.65rem; }
    .mobile-navigation, .mobile-navigation nav { display: none; }
    .catalogue-intro { min-height: var(--masthead-height-wide); display: flex; align-items: center; }
    .catalogue-intro::before { height: auto; background-image: url('/images/approved-shop-wide.webp'); mask-image: linear-gradient(90deg, transparent 42%, #000 48%); mask-composite: add; }
    .catalogue-intro::after { display: none; }
    .catalogue-intro > div { max-width: 38%; }
    .catalogue-intro .lead { max-width: 100%; font-size: var(--type-lead); }
    .page-intro { padding: 2.5rem var(--gutter); }
    .editorial-page .page-intro { min-height: var(--editorial-height-wide); display: flex; flex-direction: column; justify-content: center; }
    .editorial-page .page-intro::before { width: auto; height: auto; left: 0; mask-image: linear-gradient(90deg, transparent 45%, #000 50%); }
    .editorial-page .page-intro h1 { font-size: clamp(3rem, 5.7vw, 4.5rem); line-height: 1.06; }
    .editorial-page .page-intro h1, .editorial-page .page-intro p { max-width: 45%; }
    .guardian-intro > * { max-width: 60%; }
    .guardian-intro::before, .child-intro::before { width: auto; height: auto; left: 0; bottom: 0; }
    .guardian-intro::before { mask-image: linear-gradient(90deg, transparent 61%, #000 69%); }
    .child-intro::before { mask-image: linear-gradient(90deg, transparent 68%, #000 75%); }
    .access-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); margin-top: 4rem; margin-bottom: 4rem; }
    .access-art { grid-column: 1; grid-row: 1; aspect-ratio: 267 / 490; min-height: var(--access-art-height-wide); }
    .access-panel { grid-column: 2; grid-row: 1; max-width: none; padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
    .access-panel > h1 { font-size: 3.5rem; }
    .workspace-page section[aria-labelledby='your-numbers'] .impact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .report-sections .impact > div + div { border-top: 0; border-left: 1px solid var(--line); }
}
@media (min-width: 64rem) {
    .catalogue-intro, .page-intro { margin-top: -3.75rem; }
    .catalogue-page .search label { flex-basis: auto; margin-right: 0.5rem; }
    .product-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; }
    .commerce-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; }
    .order-status-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; }
    .order-column { gap: 2rem; }
    .order-card { padding: 0 1.5rem 1.5rem; }
    .order-card > h2 { margin: 0 -1.5rem 1.5rem; padding: 1rem 1.5rem; }
    .order-card.totals { padding: 0 1.5rem; }
    .order-card.totals dl > div.grand { margin: 0 -1.5rem; padding: 1.1rem 1.5rem; }
    .order-card.order-help { margin-top: 3rem; }
    .order-returns { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
    .commerce-main .basket { table-layout: fixed; }
    .commerce-main .basket th, .commerce-main .basket td { padding: 1rem 0.35rem; }
    .commerce-main .basket tr > :first-child { width: 29%; }
    .commerce-main .basket tr > :nth-child(2) { width: 17%; }
    .commerce-main .quantity { align-items: start; }
    .family-columns { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.75rem; }
    .guardian-columns { grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); }
    .guardian-intro h1, .child-intro h1 { font-size: 3.5rem; }
    .family-main .impact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .family-secondary .impact { grid-template-columns: minmax(0, 1fr); }
    .family-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workspace-page section[aria-labelledby='your-numbers'] .impact { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .workspace-page section[aria-labelledby='your-numbers'] .impact > div { grid-column: span 2; }
    .workspace-page section[aria-labelledby='your-numbers'] .impact > div:nth-child(n+4) { grid-column: span 3; border-top: 1px solid var(--control-border); }
    .staff-layout { grid-template-columns: 13.5rem minmax(0, 1fr); gap: 2rem; }
    .staff-sidebar { display: block; }
    .staff-mobile-links { display: none; }
    .staff-body { grid-column: 2; grid-row: 1 / span 2; }
    .staff-sign-out { align-self: end; }
    .staff-body .page-intro, .staff-body > h1 { margin-top: -3.75rem; margin-left: -2rem; margin-right: calc(-1 * var(--gutter)); padding-left: 2rem; }
    .staff-body > h1 + .lead { margin-left: -2rem; padding-left: 2rem; }
    .report-sections { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
    .report-sections > section { grid-column: 1 / -1; }
    .report-sections > section[aria-labelledby='queues'], .report-sections > section[aria-labelledby='commerce'] { grid-column: auto; }
    .report-sections section[aria-labelledby='commerce'] .impact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .staff-sidebar .staff-links ul { grid-template-columns: minmax(0, 1fr); }
    .staff-sidebar .staff-links li > a { background: transparent; border-color: transparent; }
    .staff-sidebar .staff-links li > a:hover { background: var(--paper); }
    .staff-body .impact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .staff-body .impact > div { padding: 1rem; }
    .editorial-page .page-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
    .editorial-page .page-intro { grid-column: 1 / -1; margin-bottom: 0.5rem; }
    .editorial-page .page-body > section { margin-top: 0; height: 100%; }
    .editorial-details { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
    .editorial-details > section { border-left: 1px solid var(--line); padding-left: 2rem; }
    .editorial-page section:has(.allocation-copy) { grid-column: 1 / -1; }
    .application-page .page-body, .editor-page .page-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.5rem 2rem; align-items: start; }
    .application-page .page-body > h1, .editor-page .page-body > h1,
    .application-page .page-body > p, .editor-page .page-body > p,
    .editor-page .page-body > blockquote { grid-column: 1 / -1; }
    .application-page .page-body > section, .editor-page .page-body > section,
    .application-page .page-body > form, .editor-page .page-body > form { margin-top: 0; }
    .editor-page .page-body > section[aria-labelledby='details'] { grid-column: 1 / -1; }
    .editor-page section[aria-labelledby='details'] form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .editor-page section[aria-labelledby='details'] form > fieldset { grid-column: 1 / -1; }
    .editor-page section[aria-labelledby='details'] form > button { justify-self: start; }
    .new-listing-page .page-body > form.stacked { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .new-listing-page .page-body > form.stacked > fieldset { grid-column: 1 / -1; }
    .new-listing-page .page-body > form.stacked > button { justify-self: start; }
    .story-page .page-body { display: block; }
    .story-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2rem; }
}

.site-footer { margin-top: 0; padding: 2.5rem var(--gutter); background: var(--ink); color: var(--paper); font-size: var(--type-label); }
.footer-inner { max-width: 76rem; margin: 0 auto; display: grid; gap: 1.5rem; }
.footer-brand { font-family: var(--type-face); font-size: var(--type-lead); font-weight: 700; }
.footer-inner > div > p:last-child { max-width: 27.216em; margin-bottom: 0; }
.site-footer nav ul { display: grid; gap: 0.2rem; }
.site-footer a { display: inline-flex; align-items: center; min-width: var(--tap); min-height: var(--tap); color: var(--paper); }
.site-footer a:focus-visible { outline-color: var(--brand); }

@media (min-width: 30rem) {
    .photos, .impact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-actions { display: flex; flex-wrap: wrap; }
    .hero-actions .button { width: auto; min-width: 9.5rem; }
}
@media (min-width: 40rem) {
    .staff-links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .products, .businesses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalogue-page .products-single { grid-template-columns: minmax(0, 1fr); }
    .basket { display: table; }
    .basket caption { display: table-caption; }
    .basket td[data-label]::before { display: none; }
    .basket thead { position: static; display: table-header-group; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
    .basket tbody { display: table-row-group; }
    .basket tr { display: table-row; }
    .basket tbody tr { display: table-row; border: 0; border-radius: 0; padding: 0; margin: 0; background: transparent; }
    .basket th, .basket td { display: table-cell; padding: 1rem 0.75rem; border-bottom: 1px solid var(--line); }
    .allocation > div { text-align: left; padding: 0 2rem; }
    .allocation dt { font-size: var(--type-base); }
    .product .buy button { width: 100%; min-width: 14rem; }
}
@media (min-width: 48rem) {
    .hero-inner { padding-top: 4rem; padding-bottom: 4rem; }
    .hero-art { mask-image: none; }
    .hero-art::before, .hero-art::after { background-image: url('/images/approved-home-tablet.webp'); }
    .hero-art::before { mask-image: linear-gradient(90deg, transparent 66%, #000 73%); clip-path: none; }
    .hero-art::before { mask-composite: add; }
    .hero-art::after { mask-image: linear-gradient(180deg, #000 15%, transparent 23%), radial-gradient(ellipse 11.5% 18% at 63.5% 25.5%, #000 90%, transparent 100%); mask-composite: add; clip-path: none; }
    .hero-copy { max-width: 52%; }
    .hero-copy h1 { font-size: clamp(3rem, 6.3vw, 5rem); }
    .hero-copy h1 { max-width: 100%; }
    .hero-copy .lead { max-width: 23.328em; font-size: var(--type-lead); }
    .home-latest, .impact-inner { padding-top: 1.75rem; padding-bottom: 2.25rem; }
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
    .site-footer nav ul { grid-template-columns: 1fr 1fr; gap: 0.3rem 1rem; }
}
@media (min-width: 64rem) {
    .staff-links ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .header-inner { padding-top: 0.625rem; padding-bottom: 0.625rem; flex-wrap: nowrap; gap: 1rem; }
    .desktop-navigation { width: auto; }
    .desktop-navigation nav a, .desktop-navigation nav button.quiet { font-size: var(--type-label); padding: 0.65rem 0.8rem; }
    .hero-inner { min-height: var(--hero-height-wide); padding-left: max(var(--gutter), 7rem); }
    .hero-copy h1 { line-height: 0.95; }
    .hero-art::before, .hero-art::after { background-image: url('/images/approved-home-wide.webp'); }
    .hero-art::before { mask-image: linear-gradient(90deg, transparent 46%, #000 49%); }
    .hero-art::after { clip-path: none; mask-image: linear-gradient(180deg, #000 8%, transparent 17%), linear-gradient(90deg, #000 15%, transparent 26%); mask-composite: intersect; }
    .desktop-navigation { display: block; }
    .desktop-navigation ul { display: flex; align-items: center; gap: 0.2rem; }
    .mobile-navigation, .mobile-navigation nav { display: none; }
    .site-footer nav a { min-width: auto; }
    .products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
    .catalogue-page .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .catalogue-page .products-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalogue-page .products-single { grid-template-columns: minmax(0, 1fr); }
    .businesses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .product .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-page { padding-top: 3.75rem; }
    .product-page { padding-top: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}