/* ==========================================================================
   COF base
   Tokens, fonts, reset, typography, controls, header, footer, primitives.
   Every colour below is from the token table in COF-Build-Spec.md.
   Nothing outside that table may appear in any COF stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Fonts */
/* Self-hosted. Never link fonts.googleapis.com: GDPR exposure in Germany.    */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-display-400.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: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-display-400-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: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/playfair-display-500.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: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/playfair-display-500-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: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/playfair-display-600.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: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/playfair-display-600-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: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jost-400.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: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jost-400-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: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost-500.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: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jost-500-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: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jost-600.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: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jost-600-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;
}

/* Tokens live in tokens.css, which the editor canvas also loads. */


/* --------------------------------------------------------------- 3. Reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cof-cream);
  color: var(--cof-ink);
  font-family: var(--cof-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* One visible focus style everywhere, including on espresso surfaces. */
/*
 * Two-tone, because one colour cannot do this job on both grounds.
 *
 * The ring used to be gold on everything. Gold on espresso measures 6.83:1, which
 * is why it looked fine in the header; gold on the cream page background measures
 * 1.73:1, which is invisible. WCAG asks for 3:1 against what the indicator sits
 * on, so every focusable control on every cream surface on the site failed.
 *
 * --cof-focus flips with the surface and carries the contrast; the gold halo
 * outside it is what makes the ring recognisably COF rather than a browser
 * default, and it is the visible half on espresso.
 */
:root { --cof-focus: var(--cof-ink); }
.cof-on-dark,
.cof-header,
.cof-slimbar,
.cof-section--espresso { --cof-focus: var(--cof-on-dark); }

:focus-visible {
  outline: 2px solid var(--cof-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--cof-gold);
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.cof-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cof-skip-link {
  position: absolute;
  top: -100px; left: 8px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--cof-espresso);
  color: var(--cof-on-dark);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.cof-skip-link:focus { top: 8px; }

/* ---------------------------------------------------------- 4. Typography */

.cof-serif { font-family: var(--cof-serif); }

/* Display headings. clamp() so the 1440 design degrades without a breakpoint per size. */
.cof-h1 {
  font-family: var(--cof-serif);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.02em;
}
.cof-h2 {
  font-family: var(--cof-serif);
  font-size: clamp(28px, 3.2vw, 47px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.02em;
}
.cof-h3 {
  font-family: var(--cof-serif);
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.06em;
}
.cof-h4 {
  font-family: var(--cof-serif);
  font-size: clamp(18px, 1.8vw, 27px);
  font-weight: 400;
  line-height: 1.3;
}

/* The letter-spaced sans heading used for the home hero. */
.cof-h1--sans {
  font-family: var(--cof-sans);
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.35;
}

.cof-eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* The merch band's label is set larger and lighter than a section eyebrow. */
.cof-eyebrow--lg { font-size: 15px; font-weight: 400; letter-spacing: 0.2em; }

.cof-lede { font-size: 17px; line-height: 1.65; color: var(--cof-body); }
.cof-body { font-size: 16px; line-height: 1.7; color: var(--cof-body); }
.cof-small { font-size: 14px; line-height: 1.7; color: var(--cof-muted); }

/* The short rule that sits under a heading throughout the design. */
/*
 * margin-inline: 0 is load-bearing. The browser's own stylesheet gives every <hr>
 * `margin-inline: auto`, and the reset above resets p and h1-h6 but not hr. An hr
 * at its default auto width fills its parent, so the auto margins resolve to zero
 * and nobody notices; this one is 78px wide, so the auto margins split the
 * remaining space and centred the rule under every left-aligned heading on the
 * site. On the widest container that put it 597px from where it was drawn.
 */
.cof-rule { width: 78px; height: 1px; margin-inline: 0; background: var(--cof-rule); border: 0; }
.cof-rule--short { width: 54px; }
.cof-rule--on-dark { background: var(--cof-rule-dark); }

/* An unconfirmed value the client still has to supply. */
.cof-flag { color: var(--cof-flag); }
.cof-flag--on-dark { color: var(--cof-flag-dark); }

a { color: var(--cof-espresso); text-decoration: none; transition: color 0.18s var(--cof-ease); }
a:hover { color: var(--cof-gold); }

/*
 * On any espresso surface a link must take the surface's colour, not the global
 * link colour. An inherited `color` loses to a direct rule on the element, so
 * without this the header nav renders espresso-on-espresso: a contrast ratio of
 * 1.00, which is invisible rather than merely low. Anything dark added later
 * needs the `cof-on-dark` class for the same reason.
 *
 * Buttons are excluded. A .cof-btn--light sits on a dark panel but paints its own
 * cream background, so making it inherit the panel's cream text gives cream on
 * cream: the same invisibility, one layer down.
 */
.cof-header a:not(.cof-btn),
.cof-slimbar a:not(.cof-btn),
.cof-on-dark a:not(.cof-btn) { color: inherit; }
.cof-header a:not(.cof-btn):hover,
.cof-slimbar a:not(.cof-btn):hover,
.cof-on-dark a:not(.cof-btn):hover { color: var(--cof-gold); }

/* ------------------------------------------------------------- 5. Buttons */

.cof-btn {
  display: inline-flex;
  align-items: center;
  gap: 46px;
  padding: 19px 34px;
  min-height: 52px;
  background: var(--cof-espresso);
  color: var(--cof-on-dark);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: 1px solid var(--cof-espresso);
  transition: background 0.18s var(--cof-ease), color 0.18s var(--cof-ease);
}
.cof-btn:hover { background: var(--cof-ink); color: var(--cof-on-dark); }
.cof-btn svg { flex: none; }

/* On an espresso surface or a dark image. */
.cof-btn--light {
  background: var(--cof-cream);
  color: var(--cof-ink);
  border-color: var(--cof-cream);
}
.cof-btn--light:hover { background: var(--cof-card); color: var(--cof-ink); }

/* Form submit: full width, label centred, no arrow. */
.cof-btn--submit {
  width: 100%;
  justify-content: center;
  gap: 16px;
  padding: 19px 24px;
}

/* The circular arrow button on the three concept cards. */
.cof-btn-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--cof-espresso);
  color: var(--cof-on-dark);
  transition: transform 0.18s var(--cof-ease);
}
a:hover > .cof-btn-round,
.cof-card:hover .cof-btn-round { transform: translate(2px, -2px); }

/* --------------------------------------------------------------- 6. Forms */

/*
 * Persistent label above the box. The client's concept puts the label inside as
 * placeholder text, which vanishes the moment someone types.
 */
.cof-field { display: flex; flex-direction: column; gap: 7px; }

.cof-field__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--cof-body);
}
.cof-field__label .required { color: var(--cof-flag); }

.cof-field input[type="text"],
.cof-field input[type="email"],
.cof-field input[type="tel"],
.cof-field input[type="url"],
.cof-field input[type="number"],
.cof-field input[type="date"],
.cof-field select,
.cof-field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 18px;
  background: var(--cof-card);
  color: var(--cof-ink);
  border: 1px solid var(--cof-control);
  border-radius: var(--cof-r-input);
  font-size: 15px;
  transition: border-color 0.18s var(--cof-ease), box-shadow 0.18s var(--cof-ease);
}
.cof-field textarea { min-height: 116px; resize: vertical; padding-top: 15px; }
.cof-field select { appearance: none; padding-right: 44px; }

/*
 * The border darkens on focus however the field was reached.
 *
 * What is NOT here is `outline: none`. It used to be, together with a 2px ring
 * at 15% opacity, and at (0,1,1) that pair outranked the site's own
 * `:focus-visible` block at (0,1,0). Measured by tabbing: every other control on
 * the site drew a 2px ink outline at 11.7:1 with a 5px gold halo, and the four
 * contact fields and the message box drew a ring of about 1.3:1, which is under
 * the 3:1 WCAG 1.4.11 asks of a focus indicator and is invisible in practice.
 * Somebody filling in the enquiry form with a keyboard could not see which box
 * they were in.
 */
.cof-field input:focus,
.cof-field select:focus,
.cof-field textarea:focus { border-color: var(--cof-espresso); }

/*
 * The soft ring is kept for a pointer, where there is a caret and a cursor to
 * say where you are and a heavy outline would be noise. :focus:not(:focus-visible)
 * is (0,3,1), so it wins when the browser decides no visible indicator is owed,
 * and stands aside for the real one when it is.
 */
.cof-field input:focus:not(:focus-visible),
.cof-field select:focus:not(:focus-visible),
.cof-field textarea:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 0 0 0 2px rgba(51, 32, 18, 0.15);
}
.cof-field ::placeholder { color: var(--cof-muted); opacity: 1; }

.cof-field--error input,
.cof-field--error select,
.cof-field--error textarea { border-color: #8B2F1F; }
.cof-field__error { font-size: 13px; color: #8B2F1F; }

.cof-check { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--cof-body); }
.cof-check input[type="checkbox"] {
  appearance: none;
  width: 16px; height: 16px;
  flex: none;
  border: 1px solid var(--cof-control);
  border-radius: var(--cof-r-check);
  background: var(--cof-card);
}
.cof-check input[type="checkbox"]:checked { background: var(--cof-espresso); border-color: var(--cof-espresso); }

/* The honeypot. Off-screen rather than display:none, which some bots skip. */
.cof-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------- 7. Primitives */

.cof-container {
  width: 100%;
  max-width: var(--cof-page);
  margin-inline: auto;
  padding-inline: var(--cof-gutter);
}
.cof-container--wide { padding-inline: var(--cof-gutter-lg); }
.cof-container--flush { padding-inline: 0; }

.cof-section { padding-block: var(--cof-section); }
.cof-section--cream     { background: var(--cof-cream); }
.cof-section--sand      { background: var(--cof-sand); }
.cof-section--deep-sand { background: var(--cof-deep-sand); }
.cof-section--espresso  { background: var(--cof-espresso); color: var(--cof-on-dark); }

.cof-stack { display: flex; flex-direction: column; }
.cof-stack--sm { gap: 14px; }
.cof-stack--md { gap: 26px; }
.cof-stack--lg { gap: 44px; }

.cof-center { display: flex; flex-direction: column; align-items: center; text-align: center; }

.cof-grid { display: grid; gap: 30px; }
.cof-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cof-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cof-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cof-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .cof-grid--4, .cof-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cof-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .cof-grid--2, .cof-grid--3, .cof-grid--4, .cof-grid--5 { grid-template-columns: minmax(0, 1fr); }
}

/* Image-left / text-right, and its mirror. Collapses to one column. */
.cof-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 76px; align-items: center; }
.cof-split--tight { gap: 28px; }
@media (max-width: 980px) {
  .cof-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cof-split--reverse > *:first-child { order: 2; }
}

.cof-media { border-radius: var(--cof-r-card); overflow: hidden; }
.cof-media img { width: 100%; height: 100%; object-fit: cover; }
.cof-media--thumb { border-radius: var(--cof-r-thumb); }

/* A row of items separated by vertical hairlines, as on the benefit and feature bands. */
.cof-dividers > * + * { border-left: 1px solid var(--cof-hairline); }
@media (max-width: 780px) {
  .cof-dividers > * + * { border-left: 0; border-top: 1px solid var(--cof-hairline); padding-top: 32px; }
}

/* ------------------------------------------------------------- 8. Header */

/*
 * Three tracks, the outer two equal, so the wordmark sits on the true centre of
 * the header. flex with `flex: 1 1 0` does not centre it: a flex item will not
 * shrink below its min-content width, so the wider nav side wins and pushes the
 * mark off centre. minmax(0, 1fr) is what makes the outer tracks genuinely equal.
 */
.cof-header {
  position: relative; /* anchors the mobile nav panel */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  height: 104px;
  padding-inline: 56px;
  background: var(--cof-espresso);
  color: var(--cof-on-dark);
}

.cof-header__nav { display: flex; align-items: flex-start; gap: 42px; }

/* The anchor is the column, not the wrapper. The label and the sub-label are
   inside the <a>, so making only the wrapper a flex column leaves them as inline
   siblings and they render side by side: "COFOCUSCOWORKING SPACE". */
.cof-navitem { display: flex; flex-direction: column; }
.cof-navitem a { display: flex; flex-direction: column; gap: 3px; }
.cof-navitem__label { font-size: 15px; letter-spacing: 0.09em; text-transform: uppercase; }
.cof-navitem__sub { font-size: 10px; letter-spacing: 0.13em; color: var(--cof-muted-dark); text-transform: uppercase; }

/* Gold text and nothing else. An earlier build drew a 30px gold bar under the
   active item; that bar appears in none of the client's boards. */
.cof-navitem.is-current .cof-navitem__label { color: var(--cof-gold); }
.cof-navitem.is-current .cof-navitem__sub { color: var(--cof-flag-dark); }
.cof-navitem a:hover .cof-navitem__label { color: var(--cof-gold); }

.cof-brand { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.cof-brand__mark { font-family: var(--cof-serif); font-size: 46px; line-height: 1; letter-spacing: 0.02em; }
/* letter-spacing adds a trailing space after the last letter, which shifts the
   text off the centre of its own box. The negative margin cancels it. */
.cof-brand__sub { font-size: 10px; letter-spacing: 0.42em; margin-right: -0.42em; }

.cof-header__shop { display: flex; align-items: center; justify-content: flex-end; gap: 26px; }
.cof-header__shop-label { display: flex; align-items: center; gap: 26px; font-size: 15px; letter-spacing: 0.09em; text-transform: uppercase; }

/* The icon stays 17px and keeps its place in the layout; the hit area is grown
   with a pseudo-element instead of padding. Padding would push the icon 13px off
   the right gutter, which is exactly where the design puts it. */
.cof-cart { position: relative; display: inline-flex; }
.cof-cart::after { content: ''; position: absolute; inset: -14px; }
.cof-cart__badge {
  position: absolute;
  top: -7px; right: -8px;
  display: flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--cof-gold);
  color: var(--cof-ink);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.cof-header__toggle { display: none; position: relative; color: var(--cof-on-dark); }
.cof-header__toggle::after { content: ''; position: absolute; inset: -13px -14px; }

@media (max-width: 1100px) {
  .cof-header { height: 76px; padding-inline: var(--cof-gutter); }
  .cof-header__toggle { display: inline-flex; justify-self: start; }
  .cof-brand__mark { font-size: 32px; }
  .cof-brand__sub { font-size: 8px; letter-spacing: 0.34em; margin-right: -0.34em; }
  .cof-header__shop-label { display: none; }

  /*
   * Toggled with display rather than an animated max-height. A max-height
   * transition to a viewport unit did not reliably open here, and a menu that
   * always opens beats one that animates.
   */
  .cof-header__nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--cof-gutter) 24px;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    background: var(--cof-espresso);
    box-shadow: 0 18px 30px rgba(26, 17, 10, 0.28);
  }
  .cof-header__nav.is-open { display: flex; animation: cof-nav-in 0.2s var(--cof-ease); }

  @keyframes cof-nav-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
  /* The padding sits on the anchor, not the wrapper, so the whole 56px row is
     the touch target rather than a 29px line of text inside it. */
  .cof-navitem { width: 100%; border-bottom: 1px solid var(--cof-hairline-dark); }
  .cof-navitem a { display: flex; flex-direction: column; gap: 3px; padding-block: 16px; min-height: 56px; justify-content: center; }
  .cof-navitem__label { font-size: 18px; }
  .cof-navitem.is-current a { color: var(--cof-gold); }
}

/* ------------------------------------------------------------- 9. Footer */

.cof-footer { background: var(--cof-sand); padding: 76px var(--cof-gutter-lg) 34px; }
.cof-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.cof-footer__list { display: flex; flex-direction: column; gap: 21px; font-size: 17px; list-style: none; }
.cof-footer__divider { height: 1px; background: var(--cof-hairline); border: 0; margin-block: 44px; }

.cof-social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; }
.cof-social__head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; font-size: 15px; letter-spacing: 0.11em; text-transform: uppercase; }
.cof-social__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cof-social__grid img { width: 100%; height: 250px; object-fit: cover; border-radius: var(--cof-r-thumb); }

.cof-footer__legal { font-size: 14px; color: var(--cof-muted); }

.cof-slimbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 20px;
  padding: 22px var(--cof-gutter-lg);
  background: var(--cof-espresso);
  color: var(--cof-on-dark-soft);
}
/* The reset sets `svg { display: block }`, so any anchor holding an icon beside a
   label must be a flex row or the icon stacks on top of the text. */
.cof-slimbar__item { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 0.13em; }
.cof-slimbar__item a { display: flex; align-items: center; gap: 12px; }
.cof-slimbar__item span { text-transform: uppercase; }
.cof-slimbar__item--end { justify-content: flex-end; }
.cof-slimbar__centre { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; letter-spacing: 0.19em; text-align: center; }

@media (max-width: 900px) {
  .cof-social { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cof-social__grid img { height: 180px; }
  .cof-slimbar { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 14px; }
  .cof-slimbar__item--end { justify-content: center; }
}
@media (max-width: 600px) {
  .cof-footer__cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ------------------------------------------------------- 9.1 Touch targets */

/*
 * WCAG 2.2 asks for 24x24 CSS pixels (2.5.8). Measured before these rules, the
 * two slimbar links were 19px tall, the social headings 24px exactly, and the
 * footer list links 25px. The slimbar failed outright and the other two had no
 * margin at all.
 *
 * The heights are set on the anchor rather than the row, because a taller row
 * with a short link inside it is a bigger box around the same small target.
 * Everything here uses min-height and keeps the text where the board put it,
 * so nothing moves at 1440.
 */
.cof-slimbar__item a,
.cof-social__head { min-height: 24px; }

/*
 * On a finger, 24px is the floor of what is allowed rather than a size anyone
 * should aim at, so touch pointers get the 44px of 2.5.5. Keyed on the pointer
 * and not on the width: a 1024px tablet is a finger and a narrow desktop window
 * is not, and the board's own proportions survive at every width on a mouse.
 */
@media (pointer: coarse) {
  .cof-slimbar__item a,
  .cof-social__head,
  .cof-footer__list a { min-height: 44px; align-items: center; }
  .cof-slimbar__item a,
  .cof-footer__list a { display: flex; }
  /* The rows were spaced for 25px links; 44px ones need less between them. */
  .cof-footer__list { gap: 4px; }
  .cof-social__head { margin-bottom: 16px; }
}