@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-var-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: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-var-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;
}
/* ==========================================================================
   Offices Daily — "The Signal" design tokens & base styles
   Source of truth: brand/README.md + brand/brand-guide.html
   Rules encoded here:
   - Text is only ever black (ink) or plaster; contrast never depends on red.
   - Signal red is the square only — it never carries text.
   - Archivo only; weight is the entire hierarchy; never letterspace lowercase
     (positive tracking is reserved for UPPERCASE data labels).
   - Type lives in plaster/white/black bands separated by hairline or 1.5px
     black rules; never over photography.
   ========================================================================== */

:root {
  /* Colour */
  --od-plaster: #F5F4F1;
  --od-ink: #101010;
  --od-signal: #E8380D;
  --od-muted: #6B6963;
  --od-faint: #A6A49E;
  --od-hairline: #ECEBE7;          /* rules on white */
  --od-hairline-plaster: #DBD9D3;  /* rules on plaster */
  --od-white: #FFFFFF;

  /* Type — Archivo only (variable 100–900) */
  --od-font: "Archivo", "Archivo Fallback", Arial, sans-serif;

  /* Display: 800, 28–108px, −0.04…−0.05em */
  --od-display-xl: clamp(3rem, 1rem + 6.5vw, 6.75rem);   /* 48–108px */
  --od-display: clamp(1.75rem, 1rem + 3vw, 3.5rem);      /* 28–56px  */

  /* Standfirst / card titles: 700, 16–34px, −0.02…−0.03em */
  --od-title-lg: clamp(1.25rem, 1rem + 1vw, 2.125rem);   /* 20–34px */
  --od-title: 1.125rem;                                  /* 18px */
  --od-title-sm: 1rem;                                   /* 16px */

  /* Body / credits: 400, 12–14px */
  --od-body: 0.875rem;                                   /* 14px */
  --od-body-sm: 0.75rem;                                 /* 12px */

  /* Data labels: 500, 8.5–11px, +0.14…+0.18em, uppercase */
  --od-label: 0.6875rem;                                 /* 11px */
  --od-label-sm: 0.625rem;                               /* 10px */
  --od-label-tracking: 0.16em;

  /* Rules */
  --od-rule-hairline: 1px solid var(--od-hairline);
  --od-rule-hairline-plaster: 1px solid var(--od-hairline-plaster);
  --od-rule-black: 1.5px solid var(--od-ink);

  /* Layout */
  --od-max-width: 80rem;   /* 1280px */
  --od-gutter: clamp(1rem, 4vw, 2.5rem);
  --od-band-pad: clamp(1.5rem, 4vw, 3rem);
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--od-font);
  font-size: var(--od-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--od-ink);
  background: var(--od-plaster);
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }

/* Visible focus states on every interactive element (WCAG 2.1 AA) */
:focus-visible {
  outline: 2px solid var(--od-ink);
  outline-offset: 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;
  }
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--od-ink);
  color: var(--od-plaster);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   Type utilities
   -------------------------------------------------------------------------- */
.od-display {
  font-weight: 800;
  font-size: var(--od-display);
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.od-display--xl {
  font-size: var(--od-display-xl);
  letter-spacing: -0.05em;
}
.od-title {
  font-weight: 700;
  font-size: var(--od-title);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.od-title--lg {
  font-size: var(--od-title-lg);
  letter-spacing: -0.03em;
}
.od-body { font-size: var(--od-body); }
.od-credit {
  font-size: var(--od-body-sm);
  color: var(--od-muted);
}
.od-label {
  font-weight: 500;
  font-size: var(--od-label);
  letter-spacing: var(--od-label-tracking);
  text-transform: uppercase;
}
.od-label--muted { color: var(--od-muted); }

/* --------------------------------------------------------------------------
   The signal square — never carries text; one per surface
   -------------------------------------------------------------------------- */
.od-square {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  background: var(--od-signal);
  flex: none;
}

/* --------------------------------------------------------------------------
   Wordmark — live text so it is always pixel-perfect in Archivo.
   Archivo 800, lowercase, −0.05em, square docked at the baseline
   (square ≈ 0.16em, gap ≈ 0.12em).
   -------------------------------------------------------------------------- */
.od-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-weight: 800;
  letter-spacing: -0.05em;
  text-transform: lowercase;
  line-height: 1;
  color: var(--od-ink);
  text-decoration: none;
  white-space: nowrap;
}
.od-wordmark .od-square {
  margin-left: 0.12em;
  transform: translateY(-0.02em);
}

/* --------------------------------------------------------------------------
   Bands & rules — the layout logic of the brand
   -------------------------------------------------------------------------- */
.od-band {
  background: var(--od-plaster);
  border-bottom: var(--od-rule-hairline-plaster);
}
.od-band--white {
  background: var(--od-white);
  border-bottom: var(--od-rule-hairline);
}
.od-band--ink {
  background: var(--od-ink);
  color: var(--od-plaster);
  border-bottom: 0;
}
.od-band--rule-black { border-bottom: var(--od-rule-black); }

.od-band__inner {
  max-width: var(--od-max-width);
  margin-inline: auto;
  padding: var(--od-band-pad) var(--od-gutter);
}
.od-band__inner--tight {
  padding-block: clamp(0.875rem, 2vw, 1.25rem);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header .od-band__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-header .od-wordmark { font-size: clamp(1.75rem, 1rem + 3vw, 2.75rem); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--od-ink);
  color: var(--od-plaster);
}
.site-footer a { color: var(--od-plaster); }
.site-footer .od-label { color: var(--od-faint); }
.site-footer .od-band__inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Spec strip — the data row under titles (Location / Designer / … )
   -------------------------------------------------------------------------- */
.od-spec {
  display: grid;
  border-top: var(--od-rule-black);
  border-bottom: var(--od-rule-hairline-plaster);
  list-style: none;
  margin: 0;
  padding-inline: 0;
}
.od-spec dt {
  font-weight: 500;
  font-size: var(--od-label-sm);
  letter-spacing: var(--od-label-tracking);
  text-transform: uppercase;
  color: var(--od-muted);
}
.od-spec dd {
  margin: 0;
  font-size: var(--od-body);
}

/* Phones: one data row per line, label and value in fixed columns so every
   row aligns, hairline between rows. Wrapping flex left ragged rows here. */
.od-spec > div {
  display: grid;
  grid-template-columns: minmax(5.5rem, 7.5rem) 1fr;
  gap: 0 1rem;
  align-items: baseline;
  padding-block: 0.5rem;
  border-bottom: var(--od-rule-hairline-plaster);
}
.od-spec > div:last-child { border-bottom: 0; }

/* Wider screens: even columns, label stacked above value. */
@media (min-width: 40rem) {
  .od-spec {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.75rem 1.5rem;
    padding-block: 0.75rem;
  }
  .od-spec > div {
    grid-template-columns: 1fr;
    gap: 0.125rem;
    padding-block: 0;
    border-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   Nav band & search
   -------------------------------------------------------------------------- */
.od-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.od-nav__list {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.od-nav__list a {
  font-weight: 500;
  font-size: var(--od-label);
  letter-spacing: var(--od-label-tracking);
  text-transform: uppercase;
  text-decoration: none;
}
.od-nav__list a:hover { text-decoration: underline; }

.od-search { display: flex; }
.od-search input[type="search"] {
  font-family: var(--od-font);
  font-size: var(--od-body);
  padding: 0.375rem 0.625rem;
  border: 1px solid var(--od-ink);
  border-right: 0;
  background: var(--od-white);
  color: var(--od-ink);
  width: clamp(9rem, 20vw, 14rem);
}
.od-search button {
  font-family: var(--od-font);
  font-weight: 500;
  font-size: var(--od-label-sm);
  letter-spacing: var(--od-label-tracking);
  text-transform: uppercase;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--od-ink);
  background: var(--od-ink);
  color: var(--od-plaster);
  cursor: pointer;
}

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.od-hero__media { display: block; background: var(--od-ink); }
.od-hero__media img {
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */
.od-section-head { margin-bottom: 1.25rem; }
.od-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.5rem;
}
.od-card {
  background: var(--od-white);
  border: var(--od-rule-hairline);
}
.od-card__link { text-decoration: none; display: block; }
.od-card__media { aspect-ratio: 4 / 3; background: var(--od-hairline-plaster); }
.od-card__media img { width: 100%; height: 100%; object-fit: cover; }
.od-card__body {
  padding: 0.875rem 1rem 1rem;
  border-top: var(--od-rule-black);
  display: grid;
  gap: 0.25rem;
}
.od-card__studio { color: var(--od-muted); }
.od-card__link:hover .od-title { text-decoration: underline; }

.od-more {
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.od-more:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Projects archive layout (facet sidebar + grid)
   -------------------------------------------------------------------------- */
.od-archive {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .od-archive { grid-template-columns: 14rem 1fr; }
}
.od-facets {
  border-top: var(--od-rule-black);
  padding-top: 0.75rem;
  align-self: start;
  display: grid;
  gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.od-gallery { display: grid; gap: 2.5rem; }
.od-gallery__item { margin: 0; background: var(--od-white); border: var(--od-rule-hairline); }
.od-gallery__item img { width: 100%; height: auto; }
.od-gallery__item figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.625rem 1rem;
  border-top: var(--od-rule-hairline);
}

/* --------------------------------------------------------------------------
   Studio credit block
   -------------------------------------------------------------------------- */
.od-studio-credit { padding-block: 0.5rem; }
.od-studio-credit + .od-studio-credit { border-top: var(--od-rule-hairline); }

/* --------------------------------------------------------------------------
   Article list & prose
   -------------------------------------------------------------------------- */
.od-article-list { list-style: none; margin: 0; padding: 0; }
.od-article-list li { border-top: var(--od-rule-hairline); }
.od-article-list li:last-child { border-bottom: var(--od-rule-hairline); }
.od-article-list a {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 0;
  text-decoration: none;
}
.od-article-list a:hover .od-title { text-decoration: underline; }
.od-article-list__excerpt { color: var(--od-muted); }

.od-prose { max-width: 42rem; }
.od-prose p { margin-bottom: 1em; }
.od-prose h2, .od-prose h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 1.5em 0 0.5em;
}
.od-prose img { border: var(--od-rule-hairline); }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.od-archive__main .navigation.pagination,
.od-band .navigation.pagination { margin-top: 2.5rem; }
.nav-links {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.nav-links .page-numbers {
  font-weight: 500;
  font-size: var(--od-label);
  letter-spacing: var(--od-label-tracking);
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--od-ink);
}
.nav-links .page-numbers.current {
  background: var(--od-ink);
  color: var(--od-plaster);
}

/* --------------------------------------------------------------------------
   Newsletter band
   -------------------------------------------------------------------------- */
.od-newsletter .od-band__inner { max-width: var(--od-max-width); }

/* --------------------------------------------------------------------------
   FacetWP widgets — restyled to The Signal
   -------------------------------------------------------------------------- */
.od-facets__group { display: grid; gap: 0.5rem; padding-bottom: 0.75rem; border-bottom: var(--od-rule-hairline-plaster); }
.facetwp-facet { margin-bottom: 0 !important; font-size: var(--od-body); }
.facetwp-checkbox { background-position: left 0.35em; padding-left: 1.35em; }
.facetwp-counter { color: var(--od-muted); font-size: var(--od-body-sm); }
.facetwp-facet select,
.facetwp-facet .facetwp-dropdown {
  font-family: var(--od-font);
  font-size: var(--od-body);
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--od-ink);
  background: var(--od-white);
  width: 100%;
  max-width: 100%;
}
.facetwp-slider-wrap { padding-right: 0.25rem; }
.facetwp-slider .noUi-connect { background: var(--od-ink) !important; }
.facetwp-slider .noUi-handle { border: 1px solid var(--od-ink) !important; box-shadow: none !important; }
.facetwp-selections { margin-top: 0.25rem; }
.facetwp-selections li { font-size: var(--od-body-sm); }
.facetwp-selections .facetwp-selection-value { background: var(--od-ink); color: var(--od-plaster); padding: 0.2rem 0.5rem; }
.facetwp-page {
  font-weight: 500;
  font-size: var(--od-label);
  letter-spacing: var(--od-label-tracking);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--od-ink);
  text-decoration: none;
  display: inline-block;
  margin: 2.5rem 0.25rem 0 0;
}
.facetwp-page.active { background: var(--od-ink); color: var(--od-plaster); }

/* --------------------------------------------------------------------------
   Studio profile header
   -------------------------------------------------------------------------- */
.od-studio-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.od-studio-header__logo {
  width: 7.5rem;
  flex: none;
  border: var(--od-rule-hairline);
  background: var(--od-white);
}

/* --------------------------------------------------------------------------
   Forms (submit page, newsletter)
   -------------------------------------------------------------------------- */
.od-form { max-width: 36rem; display: grid; gap: 1.25rem; }
.od-form p { display: grid; gap: 0.375rem; margin: 0; }
.od-form label.od-label { color: var(--od-muted); }
.od-form input[type="text"],
.od-form input[type="email"],
.od-form input[type="url"],
.od-form textarea {
  font-family: var(--od-font);
  font-size: var(--od-body);
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--od-ink);
  background: var(--od-white);
  color: var(--od-ink);
  width: 100%;
}
.od-form button {
  font-family: var(--od-font);
  font-weight: 500;
  font-size: var(--od-label);
  letter-spacing: var(--od-label-tracking);
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--od-ink);
  background: var(--od-ink);
  color: var(--od-plaster);
  cursor: pointer;
  justify-self: start;
}
.od-form button:hover { background: var(--od-white); color: var(--od-ink); }
.od-form__consent label { display: flex; gap: 0.5rem; align-items: flex-start; }
.od-form__consent input { margin-top: 0.2em; }
.od-form__hp { position: absolute !important; left: -9999px !important; }
.od-form-notice { border: var(--od-rule-black); padding: 1rem 1.25rem; margin-bottom: 1.5rem; max-width: 36rem; display: grid; gap: 0.375rem; }
.od-form-notice--error { border: 1.5px solid var(--od-ink); background: var(--od-plaster); }

/* Newsletter band form (Mailchimp for WP) */
.od-newsletter .mc4wp-form-fields { display: flex; gap: 0; max-width: 26rem; margin-top: 1rem; }
.od-newsletter .mc4wp-form input[type="email"] {
  font-family: var(--od-font);
  font-size: var(--od-body);
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--od-plaster);
  background: var(--od-ink);
  color: var(--od-plaster);
  flex: 1;
}
.od-newsletter .mc4wp-form input[type="email"]::placeholder { color: var(--od-faint); }
.od-newsletter .mc4wp-form button {
  font-family: var(--od-font);
  font-weight: 500;
  font-size: var(--od-label);
  letter-spacing: var(--od-label-tracking);
  text-transform: uppercase;
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--od-plaster);
  border-left: 0;
  background: var(--od-plaster);
  color: var(--od-ink);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Motion — one orchestrated page-load reveal, structure only (never on the
   photographs themselves beyond a fade), and tactile hover states. All of it
   is opt-out: nothing below runs for visitors who prefer reduced motion.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes od-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }

  .site-header,
  .od-nav,
  .od-hero > *,
  main > *:not(.od-hero) {
    animation: od-rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .site-header            { animation-delay: 0ms; }
  .od-nav                 { animation-delay: 70ms; }
  .od-hero > :nth-child(1){ animation-delay: 120ms; }
  .od-hero > :nth-child(2){ animation-delay: 220ms; }
  main > :nth-child(1)    { animation-delay: 140ms; }
  main > :nth-child(2)    { animation-delay: 260ms; }
  main > :nth-child(3)    { animation-delay: 360ms; }
  main > :nth-child(4)    { animation-delay: 440ms; }
  main > :nth-child(n+5)  { animation-delay: 500ms; }

  /* Hover: hairlines firm up into the black rule */
  .od-card,
  .od-article-list li,
  .od-gallery__item {
    transition: border-color 0.18s ease;
  }
  .od-card:hover { border-color: var(--od-ink); }
  .od-article-list li:hover,
  .od-article-list li:hover + li { border-top-color: var(--od-ink); }

  /* Nav links: rule draws in from the left */
  .od-nav__list a {
    text-decoration: none;
    background: linear-gradient(var(--od-ink), var(--od-ink)) no-repeat 0 100% / 0 1.5px;
    padding-bottom: 0.2em;
    transition: background-size 0.22s ease;
  }
  .od-nav__list a:hover,
  .od-nav__list a:focus-visible { background-size: 100% 1.5px; text-decoration: none; }

  /* Buttons invert ink/plaster */
  .od-search button,
  .od-newsletter .mc4wp-form button,
  .facetwp-page,
  .facetwp-selections .facetwp-selection-value {
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .od-search button:hover { background: var(--od-white); color: var(--od-ink); }
  .od-newsletter .mc4wp-form button:hover { background: var(--od-ink); color: var(--od-plaster); }
  .facetwp-page:hover:not(.active) { background: var(--od-ink); color: var(--od-plaster); }
  .facetwp-selections .facetwp-selection-value:hover { background: var(--od-white); color: var(--od-ink); box-shadow: inset 0 0 0 1px var(--od-ink); }

  /* Filter options nudge when hovered */
  .facetwp-checkbox, .facetwp-radio {
    transition: transform 0.15s ease;
  }
  .facetwp-checkbox:hover, .facetwp-radio:hover { transform: translateX(3px); }

  /* "Browse the archive →" arrow eases forward */
  .od-more { transition: letter-spacing 0.2s ease; }
  .od-more:hover { letter-spacing: 0; }
}

/* --------------------------------------------------------------------------
   Footer site map
   -------------------------------------------------------------------------- */
.od-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .od-footer { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.od-footer__brand { display: grid; gap: 0.5rem; align-content: start; }
.od-footer__count { color: var(--od-plaster); }
.od-footer__rights { color: var(--od-faint); }
.od-footer__col { display: grid; gap: 0.5rem; align-content: start; }
.od-footer__head { color: var(--od-faint); }
.od-footer__col a {
  font-size: var(--od-body);
  text-decoration: none;
}
.od-footer__col a:hover { text-decoration: underline; }

/* Prose tables (cookie policy and future editorial tables) */
.od-prose table { border-collapse: collapse; width: 100%; font-size: var(--od-body); }
.od-prose th {
  font-weight: 500;
  font-size: var(--od-label-sm);
  letter-spacing: var(--od-label-tracking);
  text-transform: uppercase;
  text-align: left;
  color: var(--od-muted);
  border-bottom: var(--od-rule-black);
  padding: 0.5rem 0.75rem 0.5rem 0;
}
.od-prose td { border-bottom: var(--od-rule-hairline); padding: 0.5rem 0.75rem 0.5rem 0; vertical-align: top; }

/* --------------------------------------------------------------------------
   Phone refinements
   -------------------------------------------------------------------------- */

/* Archive: on phones the five filter groups pushed every project below the
   fold. Results come first; a jump link reaches the filters. */
.od-archive__filterlink {
  font-weight: 500;
  font-size: var(--od-label);
  letter-spacing: var(--od-label-tracking);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.od-archive__filterlink a { text-decoration: none; border-bottom: 1.5px solid var(--od-ink); padding-bottom: 0.15em; }
.od-facets { order: 2; }
.od-archive__main { order: 1; }

@media (min-width: 48rem) {
  .od-archive__filterlink { display: none; }
  .od-facets { order: 0; }
  .od-archive__main { order: 0; }
}

/* Wide tables (cookie policy) scroll inside themselves rather than
   squashing five columns into a phone screen. */
@media (max-width: 47.999rem) {
  .od-prose table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .od-prose th, .od-prose td { padding-right: 1.25rem; }
}