/*
 * Ocskovszki Ákos — site stylesheet.
 *
 * Unlayered on purpose: the theme's CSS lives in cascade layers, so these
 * rules win without !important. Colours, type sizes and spacing come from the
 * Design System tokens wherever a token exists; the fallbacks only matter if
 * the token CSS is missing.
 *
 * Breakpoints: 768 (6 → 12 columns), 1024 (offsets and drops), 1424 (rotated
 * years need a 112 px side margin).
 */

:root {
  --ocs-ink: var(--color-text, #111110);
  --ocs-paper: var(--color-background, #F4F3EF);
  --ocs-muted: var(--color-text-secondary, #4F4C46);
  --ocs-hair: var(--color-secondary-light, #CFCBC2);
  --ocs-ph: var(--color-tertiary-light, #D3CFC7);
  --ocs-sans: var(--font-family-sans, 'Archivo', 'Helvetica Neue', Helvetica, sans-serif);
  --ocs-mono: var(--font-family-mono, 'JetBrains Mono', ui-monospace, Menlo, monospace);

  --ocs-cols: 6;
  --ocs-gut: 12px;
  /* Content width and the side margin beside it: max(20px, (page − 1200px) / 2).
     Measured against #app (100cqw), not the viewport: 100vw includes a classic
     scrollbar, and a panorama bleeding "to the page edge" would then run a few
     pixels under it — cropped. */
  --ocs-w: min(1200px, 100cqw - 40px);
  --ocs-m: calc((100cqw - var(--ocs-w)) / 2);
}

@media (min-width: 768px) {
  :root {
    --ocs-cols: 12;
    --ocs-gut: 24px;
  }
}

/* ---- Base ---------------------------------------------------------------- */

/* Always reserve the scrollbar's space. Otherwise a page short enough not to
   scroll (Contact, on a tall window) is a scrollbar wider than the others, and
   the grid sits in a different place from page to page. */
html { scrollbar-gutter: stable; }

#app {
  position: relative;
  container-type: inline-size;
}

.ocs-wrap {
  width: var(--ocs-w);
  margin-inline: auto;
}

.ocs-section,
.ocs-header,
.ocs-footer {
  position: relative;
  z-index: 1;
}

/* The theme colours body copy with the secondary text colour; here ink is the default and muted is the exception. */
.ocs-section,
.ocs-footer { color: var(--ocs-ink); }
.ocs-section :is(p, li, dd) { color: inherit; }

/* :link/:visited on purpose: the theme's unlayered `a:visited` rule loads after this file and would win a tie. */
:is(.ocs-header, .ocs-footer, .ocs-section, .ocs-menu, .ocs-lv) a:is(:link, :visited) { color: inherit; }

.ocs-section a:hover,
.ocs-footer a:hover { color: var(--ocs-muted); }

/* The theme grows a 1px underline under every plain link on hover (motion.css).
   Here links are tiles, cells and buttons, where that shows up as a stray line.
   The selector mirrors the theme's so it wins on specificity, without !important. */
:is(.ocs-header, .ocs-footer, .ocs-section, .ocs-menu, .ocs-lv) a:not([class*="rounded"]):not([class*="bg-"]):not([class*="border"]) {
  background-image: none;
}

:is(.ocs-header, .ocs-footer, .ocs-section, .ocs-menu) :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--ocs-ink);
  outline-offset: 2px;
}

.ocs-band :is(a, button):focus-visible,
.ocs-lv :is(a, button):focus-visible {
  outline: 2px solid var(--ocs-paper);
  outline-offset: 2px;
}

.ocs-nowrap { white-space: nowrap; }

.ocs-icon {
  display: block;
  flex-shrink: 0;
}

/* Small mono label: taglines, counts, form labels. */
.ocs-label {
  margin: 0;
  font-family: var(--ocs-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ocs-ink);
}

.ocs-label--plain { font-weight: 400; font-size: 12px; }

@media (min-width: 768px) {
  .ocs-label { font-size: 12px; }
}

/* Motion: a fade and an 8px lift on entry, nothing else. */
@media (prefers-reduced-motion: no-preference) {
  .ocs-section > .ocs-wrap {
    animation: ocs-in 240ms cubic-bezier(.2, .7, .2, 1) both;
  }
}

@keyframes ocs-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* Page-to-page transitions (cross-document View Transitions; browsers without
   them just navigate as before).

   The page is redrawn like an e-ink screen: the new page is revealed in twelve
   vertical strips — the twelve columns of the grid — each drawn from the top
   down, one starting just after the other, left to right. The leading edge of
   each strip is a halftone band: 16 rows of dots that shrink to nothing, so
   the new page arrives through a screen of dots rather than behind a hard line.
   Nothing fades, so nothing blinks. Nothing runs under reduced motion.

   How it works: one number, --ocs-t, runs from 0 to 1 over the whole
   transition. Each strip derives its own progress from it (--p1…--p12: starts
   40ms after its neighbour, takes 480ms) and eases it (--e1…--e12, smoothstep).
   The mask has two layers per strip: a solid rectangle that grows from the
   top, and the dot band riding on its lower edge.

   To retime: 920 = 480 + 11 × 40 (total = strip time + 11 × stagger).
   To change the halftone: the band is 160px (16 rows × 10px cells) in --ocs-dots. */
@property --ocs-t {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root) {
    animation: none;
    mix-blend-mode: normal;
  }

  ::view-transition-new(root) {
    animation: ocs-redraw 920ms linear both;
    mix-blend-mode: normal;

    --ocs-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='160'%3E%3Cdefs%3E%3Cpattern id='p0' x='0' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='5' cy='5' r='7.2'/%3E%3C/pattern%3E%3Cpattern id='p1' x='5' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='5' cy='5' r='6.77'/%3E%3C/pattern%3E%3Cpattern id='p2' x='0' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='5' cy='5' r='6.35'/%3E%3C/pattern%3E%3Cpattern id='p3' x='5' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='5' cy='5' r='5.92'/%3E%3C/pattern%3E%3Cpattern id='p4' x='0' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='5' cy='5' r='5.49'/%3E%3C/pattern%3E%3Cpattern id='p5' x='5' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='5' cy='5' r='5.07'/%3E%3C/pattern%3E%3Cpattern id='p6' x='0' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='5' cy='5' r='4.64'/%3E%3C/pattern%3E%3Cpattern id='p7' x='5' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='5' cy='5' r='4.21'/%3E%3C/pattern%3E%3Cpattern id='p8' x='0' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='5' cy='5' r='3.79'/%3E%3C/pattern%3E%3Cpattern id='p9' x='5' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='5' cy='5' r='3.36'/%3E%3C/pattern%3E%3Cpattern id='p10' x='0' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='5' cy='5' r='2.93'/%3E%3C/pattern%3E%3Cpattern id='p11' x='5' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='5' cy='5' r='2.51'/%3E%3C/pattern%3E%3Cpattern id='p12' x='0' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='5' cy='5' r='2.08'/%3E%3C/pattern%3E%3Cpattern id='p13' x='5' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='5' cy='5' r='1.65'/%3E%3C/pattern%3E%3Cpattern id='p14' x='0' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='5' cy='5' r='1.23'/%3E%3C/pattern%3E%3Cpattern id='p15' x='5' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='5' cy='5' r='0.8'/%3E%3C/pattern%3E%3C/defs%3E%3Crect y='0' width='100%25' height='10' fill='url(%23p0)'/%3E%3Crect y='10' width='100%25' height='10' fill='url(%23p1)'/%3E%3Crect y='20' width='100%25' height='10' fill='url(%23p2)'/%3E%3Crect y='30' width='100%25' height='10' fill='url(%23p3)'/%3E%3Crect y='40' width='100%25' height='10' fill='url(%23p4)'/%3E%3Crect y='50' width='100%25' height='10' fill='url(%23p5)'/%3E%3Crect y='60' width='100%25' height='10' fill='url(%23p6)'/%3E%3Crect y='70' width='100%25' height='10' fill='url(%23p7)'/%3E%3Crect y='80' width='100%25' height='10' fill='url(%23p8)'/%3E%3Crect y='90' width='100%25' height='10' fill='url(%23p9)'/%3E%3Crect y='100' width='100%25' height='10' fill='url(%23p10)'/%3E%3Crect y='110' width='100%25' height='10' fill='url(%23p11)'/%3E%3Crect y='120' width='100%25' height='10' fill='url(%23p12)'/%3E%3Crect y='130' width='100%25' height='10' fill='url(%23p13)'/%3E%3Crect y='140' width='100%25' height='10' fill='url(%23p14)'/%3E%3Crect y='150' width='100%25' height='10' fill='url(%23p15)'/%3E%3C/svg%3E");

    --p1: clamp(0, (var(--ocs-t) * 920 - 0) / 480, 1);
    --p2: clamp(0, (var(--ocs-t) * 920 - 40) / 480, 1);
    --p3: clamp(0, (var(--ocs-t) * 920 - 80) / 480, 1);
    --p4: clamp(0, (var(--ocs-t) * 920 - 120) / 480, 1);
    --p5: clamp(0, (var(--ocs-t) * 920 - 160) / 480, 1);
    --p6: clamp(0, (var(--ocs-t) * 920 - 200) / 480, 1);
    --p7: clamp(0, (var(--ocs-t) * 920 - 240) / 480, 1);
    --p8: clamp(0, (var(--ocs-t) * 920 - 280) / 480, 1);
    --p9: clamp(0, (var(--ocs-t) * 920 - 320) / 480, 1);
    --p10: clamp(0, (var(--ocs-t) * 920 - 360) / 480, 1);
    --p11: clamp(0, (var(--ocs-t) * 920 - 400) / 480, 1);
    --p12: clamp(0, (var(--ocs-t) * 920 - 440) / 480, 1);

    --e1: calc(var(--p1) * var(--p1) * (3 - 2 * var(--p1)));
    --e2: calc(var(--p2) * var(--p2) * (3 - 2 * var(--p2)));
    --e3: calc(var(--p3) * var(--p3) * (3 - 2 * var(--p3)));
    --e4: calc(var(--p4) * var(--p4) * (3 - 2 * var(--p4)));
    --e5: calc(var(--p5) * var(--p5) * (3 - 2 * var(--p5)));
    --e6: calc(var(--p6) * var(--p6) * (3 - 2 * var(--p6)));
    --e7: calc(var(--p7) * var(--p7) * (3 - 2 * var(--p7)));
    --e8: calc(var(--p8) * var(--p8) * (3 - 2 * var(--p8)));
    --e9: calc(var(--p9) * var(--p9) * (3 - 2 * var(--p9)));
    --e10: calc(var(--p10) * var(--p10) * (3 - 2 * var(--p10)));
    --e11: calc(var(--p11) * var(--p11) * (3 - 2 * var(--p11)));
    --e12: calc(var(--p12) * var(--p12) * (3 - 2 * var(--p12)));

    mask-repeat: no-repeat;
    mask-image:
      linear-gradient(#000, #000),
      linear-gradient(#000, #000),
      linear-gradient(#000, #000),
      linear-gradient(#000, #000),
      linear-gradient(#000, #000),
      linear-gradient(#000, #000),
      linear-gradient(#000, #000),
      linear-gradient(#000, #000),
      linear-gradient(#000, #000),
      linear-gradient(#000, #000),
      linear-gradient(#000, #000),
      linear-gradient(#000, #000),
      var(--ocs-dots),
      var(--ocs-dots),
      var(--ocs-dots),
      var(--ocs-dots),
      var(--ocs-dots),
      var(--ocs-dots),
      var(--ocs-dots),
      var(--ocs-dots),
      var(--ocs-dots),
      var(--ocs-dots),
      var(--ocs-dots),
      var(--ocs-dots);
    mask-position:
      0.000% 0,
      9.091% 0,
      18.182% 0,
      27.273% 0,
      36.364% 0,
      45.455% 0,
      54.545% 0,
      63.636% 0,
      72.727% 0,
      81.818% 0,
      90.909% 0,
      100.000% 0,
      0.000% calc(var(--e1) * 100% + (var(--e1) * 320 - 160) * 1px),
      9.091% calc(var(--e2) * 100% + (var(--e2) * 320 - 160) * 1px),
      18.182% calc(var(--e3) * 100% + (var(--e3) * 320 - 160) * 1px),
      27.273% calc(var(--e4) * 100% + (var(--e4) * 320 - 160) * 1px),
      36.364% calc(var(--e5) * 100% + (var(--e5) * 320 - 160) * 1px),
      45.455% calc(var(--e6) * 100% + (var(--e6) * 320 - 160) * 1px),
      54.545% calc(var(--e7) * 100% + (var(--e7) * 320 - 160) * 1px),
      63.636% calc(var(--e8) * 100% + (var(--e8) * 320 - 160) * 1px),
      72.727% calc(var(--e9) * 100% + (var(--e9) * 320 - 160) * 1px),
      81.818% calc(var(--e10) * 100% + (var(--e10) * 320 - 160) * 1px),
      90.909% calc(var(--e11) * 100% + (var(--e11) * 320 - 160) * 1px),
      100.000% calc(var(--e12) * 100% + (var(--e12) * 320 - 160) * 1px);
    mask-size:
      8.5% calc(var(--e1) * (100% + 160px) - 160px),
      8.5% calc(var(--e2) * (100% + 160px) - 160px),
      8.5% calc(var(--e3) * (100% + 160px) - 160px),
      8.5% calc(var(--e4) * (100% + 160px) - 160px),
      8.5% calc(var(--e5) * (100% + 160px) - 160px),
      8.5% calc(var(--e6) * (100% + 160px) - 160px),
      8.5% calc(var(--e7) * (100% + 160px) - 160px),
      8.5% calc(var(--e8) * (100% + 160px) - 160px),
      8.5% calc(var(--e9) * (100% + 160px) - 160px),
      8.5% calc(var(--e10) * (100% + 160px) - 160px),
      8.5% calc(var(--e11) * (100% + 160px) - 160px),
      8.5% calc(var(--e12) * (100% + 160px) - 160px),
      8.5% 160px,
      8.5% 160px,
      8.5% 160px,
      8.5% 160px,
      8.5% 160px,
      8.5% 160px,
      8.5% 160px,
      8.5% 160px,
      8.5% 160px,
      8.5% 160px,
      8.5% 160px,
      8.5% 160px;
  }

  /* The redraw brings the page in; don't run the on-load lift on top of it. */
  .ocs-vt .ocs-section > .ocs-wrap { animation: none; }
}

@keyframes ocs-redraw {
  from { --ocs-t: 0; }
  to { --ocs-t: 1; }
}

/* ---- Exposed column grid (DEV-06) ---------------------------------------- */

.ocs-grid { display: none; }

.ocs-has-grid .ocs-grid {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ocs-grid__cols {
  position: absolute;
  inset: 0 var(--ocs-m);
  display: grid;
  grid-template-columns: repeat(var(--ocs-cols), minmax(0, 1fr));
  column-gap: var(--ocs-gut);
}

.ocs-grid__cols span {
  border-inline: 1px solid rgba(17, 17, 16, 0.10);
}

@media (max-width: 767.98px) {
  .ocs-grid__cols span:nth-child(n + 7) { display: none; }
}

@media print {
  .ocs-grid { display: none !important; }
}

/* ---- Fitted display headings (DEV-05) ------------------------------------ */

.ocs-fitbox {
  container-type: inline-size;
  min-width: 0;
}

.ocs-fit {
  margin: 0;
  /* Accented capitals (Á É Í Ő Ű) must clear whatever sits above. */
  padding-top: max(8px, 0.2em);
  font-family: var(--ocs-sans);
  font-stretch: 62%;
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-wrap: normal;
  overflow: visible;
  color: inherit;
  /* Fallback until site.js has measured the text: never larger than the fit. */
  font-size: min(calc(var(--cap-m) * 1px), calc(100cqi / (var(--n) * 0.5)));
}

@media (min-width: 768px) {
  .ocs-fit {
    font-size: min(calc(var(--cap) * 1px), calc(100cqi / (var(--n) * 0.5)));
  }
}

.ocs-fit[style*="--fit"] { font-size: calc(var(--fit) * 1px); }

/* "/24" after a numeral. */
.ocs-total {
  font-family: var(--ocs-mono);
  font-size: 0.33em;
  font-stretch: 100%;
  font-weight: 400;
  letter-spacing: 0;
}

/* A section heading under a hard rule (details, statement). */
.ocs-rule-head {
  border-top: 2px solid var(--ocs-ink);
  padding-top: 8px;
}

/* A section heading over a hard rule, with an optional link at its right. */
.ocs-rule-head--below {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  border-top: 0;
  border-bottom: 2px solid var(--ocs-ink);
  padding: 0 0 12px;
}

.ocs-rule-head--below .ocs-fitbox { flex: 1; }
.ocs-rule-head__link { display: none; }

@media (min-width: 768px) {
  .ocs-rule-head--below { padding-bottom: 16px; }
  .ocs-rule-head__link { display: block; }
}

/* ---- Buttons ------------------------------------------------------------- */

.ocs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 0 16px;
  border: 2px solid var(--ocs-ink);
  border-radius: 0;
  background: transparent;
  color: var(--ocs-ink);
  font-family: var(--ocs-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.ocs-btn--ink,
.ocs-section a.ocs-btn--ink {
  background: var(--ocs-ink);
  color: var(--ocs-paper);
}

.ocs-section a.ocs-btn:hover,
.ocs-btn:hover {
  background: var(--ocs-ink);
  color: var(--ocs-paper);
}

.ocs-section a.ocs-btn--ink:hover,
.ocs-btn--ink:hover {
  background: transparent;
  color: var(--ocs-ink);
}

.ocs-btn--submit {
  width: 100%;
  height: 56px;
  padding: 0 24px;
}

/* ---- Header (DEV-07) ----------------------------------------------------- */

.ocs-header {
  z-index: 2;
  display: flex;
  align-items: stretch;
  border-bottom: 2px solid var(--ocs-ink);
  padding-left: var(--ocs-m);
}

.ocs-header__logo {
  display: flex;
  align-items: center;
  margin-right: auto;
  color: var(--ocs-ink);
}

/* The logo slot: fixed height, width follows the signature, 240px at most. */
.ocs-header__logo svg {
  display: block;
  height: 28px;
  width: auto;
  max-width: 240px;
}

.ocs-header__nav { display: none; }

.ocs-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
  padding: 0 16px;
  border: 0;
  border-left: 2px solid var(--ocs-ink);
  border-radius: 0;
  background: transparent;
  color: var(--ocs-ink);
  font-family: var(--ocs-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ocs-header a.ocs-cell[aria-current="page"],
.ocs-header__toggle {
  background: var(--ocs-ink);
  color: var(--ocs-paper);
}

.ocs-header a.ocs-cell:hover { background: var(--ocs-ink); color: var(--ocs-paper); }

@media (min-width: 768px) {
  /* The navigation sits on the grid: its right edge is the container's, not the page's. The rule under it still runs edge to edge. */
  .ocs-header { padding-right: var(--ocs-m); }
  .ocs-header__lang { border-right: 2px solid var(--ocs-ink); }
  .ocs-header__logo svg { height: 32px; }
  .ocs-header__nav { display: flex; }
  .ocs-header__toggle { display: none; }
  .ocs-cell { height: 80px; padding: 0 20px; }
}

@media (min-width: 1024px) {
  .ocs-cell { padding: 0 32px; }
}

/* ---- Mobile menu (DEV-07) ------------------------------------------------ */

.ocs-menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ocs-paper);
  color: var(--ocs-ink);
  flex-direction: column;
  overflow-y: auto;
}

.ocs-menu[open] { display: flex; }
.ocs-menu::backdrop { background: var(--ocs-paper); }

/* The page behind an open dialog must not scroll. */
html:has(dialog[open]) { overflow: hidden; }

.ocs-menu__bar { padding-left: 20px; flex-shrink: 0; }
.ocs-menu__close { display: flex; }

.ocs-menu__nav {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
  border-top: 2px solid var(--ocs-ink);
}

.ocs-menu__item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 20px 12px;
  border-bottom: 2px solid var(--ocs-ink);
  text-decoration: none;
}

.ocs-menu__item .ocs-fitbox { flex: 1; }
.ocs-menu__item .ocs-fit { padding-top: 12px; }

.ocs-menu__no {
  font-family: var(--ocs-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--ocs-muted);
}

.ocs-menu a.ocs-menu__item[aria-current="page"] {
  background: var(--ocs-ink);
  color: var(--ocs-paper);
}

.ocs-menu__item[aria-current="page"] .ocs-menu__no { color: inherit; }

.ocs-menu__foot { margin-top: auto; padding-top: 48px; }

.ocs-menu__langs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 2px solid var(--ocs-ink);
}

.ocs-menu__langs a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-family: var(--ocs-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.ocs-menu__langs a + a { border-left: 2px solid var(--ocs-ink); }

.ocs-menu .ocs-menu__langs a[aria-current="true"] {
  background: var(--ocs-ink);
  color: var(--ocs-paper);
}

.ocs-menu__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 20px 32px;
  font-family: var(--ocs-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Footer (DEV-08) ----------------------------------------------------- */

.ocs-footer {
  margin-top: auto;
  border-top: 2px solid var(--ocs-ink);
}

.ocs-footer__email {
  display: block;
  padding: 32px 20px 24px;
  border-bottom: 2px solid var(--ocs-ink);
  text-decoration: none;
}

.ocs-footer__email .ocs-fit { padding-top: 0; }

.ocs-footer__cells {
  display: flex;
  flex-direction: column;
}

.ocs-footer__cells > div {
  padding: 16px 20px;
  font-family: var(--ocs-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ocs-footer__cells > div + div { border-top: 2px solid var(--ocs-ink); }

@media (min-width: 768px) {
  /* The rules run 24px past the container on each side; the text inside sits on it. */
  .ocs-footer { padding-inline: max(0px, calc(var(--ocs-m) - 24px)); }
  .ocs-footer__email { padding: 40px 24px 32px; }

  .ocs-footer__cells {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .ocs-footer__cells > div { padding: 24px; }

  .ocs-footer__cells > div + div {
    border-top: 0;
    border-left: 2px solid var(--ocs-ink);
  }
}

/* ---- Artwork and caption ------------------------------------------------- */

/* The painting: whole, square-cornered, nothing on top. The box has the image's own proportions, so nothing is ever cropped. */
.ocs-art {
  width: 100%;
  border-radius: 0;
  box-shadow: none;
}

.ocs-art__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

.ocs-art--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  background: var(--ocs-ph);
  color: #55514A;
  font-family: var(--ocs-mono);
  font-size: 11px;
  text-align: center;
}

/* Secondary photos (details, in-situ, portrait) are the only images that may be cropped. */
.ocs-photo { overflow: hidden; }

.ocs-photo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ocs-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 2px solid currentColor;
  padding-top: 8px;
}

.ocs-caption__no {
  font-family: var(--ocs-sans);
  font-stretch: 62%;
  font-weight: 800;
  font-size: 32px;
  line-height: 0.86;
  letter-spacing: -0.01em;
}

.ocs-caption__title {
  margin: 0;
  font-family: var(--ocs-sans);
  font-stretch: 100%;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

.ocs-caption__meta {
  font-family: var(--ocs-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ocs-muted);
}

@media (min-width: 768px) {
  .ocs-caption__no { font-size: 48px; }
  .ocs-caption__title { font-size: 18px; }
  .ocs-caption__meta { font-size: 12px; }
}

/* ---- Artwork Grid: broken (DEV-02) --------------------------------------- */

.ocs-works { padding: 64px 0; }
.ocs-works--page { padding: 24px 0 64px; }

.ocs-pagehead {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ocs-works__groups {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: 24px;
}

.ocs-works__more { margin-top: 24px; }
.ocs-works__more .ocs-btn { display: flex; }
.ocs-works__empty { margin: 24px 0 0; }

.ocs-broken {
  display: grid;
  grid-template-columns: repeat(var(--ocs-cols), minmax(0, 1fr));
  column-gap: var(--ocs-gut);
  row-gap: 40px;
  align-items: start;
}

.ocs-works--index .ocs-broken { row-gap: 24px; }

.ocs-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  grid-column: var(--mc) / span var(--ms);
  grid-row: var(--mr);
  margin-top: var(--md);
  text-decoration: none;
  color: inherit;
}

.ocs-section a.ocs-tile:hover { color: inherit; }

/* Panoramas (≥ 2.2:1): their own row, bleeding off the page; the caption returns to the grid. */
.ocs-tile--pano { grid-column: 1 / -1; }
.ocs-tile__bleed { margin-inline: calc(-1 * var(--ocs-m)); }
.ocs-tile--pano .ocs-caption { margin-left: calc((100% + var(--ocs-gut)) / 6 * 2); }

@media (min-width: 768px) {
  .ocs-works { padding: 128px 0; }
  .ocs-works--page { padding: 48px 0 128px; }
  .ocs-works__groups { gap: 64px; margin-top: 48px; }
  .ocs-works__more { display: none; }
  .ocs-broken { row-gap: 96px; }
  .ocs-works--index .ocs-broken { row-gap: 40px; }

  .ocs-tile {
    grid-column: var(--c) / span var(--s);
    grid-row: var(--r);
    margin-top: var(--d);
  }

  .ocs-tile--pano { grid-column: 1 / -1; }
  /* Desktop: the left edge stays on the container (the margin belongs to the rotated year), the right edge bleeds. */
  .ocs-tile__bleed { margin-left: 0; }
  .ocs-tile--pano .ocs-caption { margin-left: calc((100% + var(--ocs-gut)) / 12 * 8); }
}

/* Year groups. */
.ocs-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ocs-group__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  border-top: 2px solid var(--ocs-ink);
  padding-top: 8px;
}

.ocs-group__year {
  margin: 0;
  padding-top: 13px;
  font-family: var(--ocs-sans);
  font-stretch: 62%;
  font-weight: 800;
  font-size: 64px;
  line-height: 0.86;
  letter-spacing: -0.01em;
  color: var(--ocs-ink);
}

.ocs-group__mono { display: none; }

.ocs-group__count,
.ocs-group__mono {
  font-family: var(--ocs-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .ocs-group { gap: 48px; }
  .ocs-group__year { font-size: 96px; padding-top: 19px; }
  .ocs-group__count, .ocs-group__mono { font-size: 12px; }
}

/* With a side margin of at least 112px the year turns and moves into it. */
@media (min-width: 1424px) {
  .ocs-group__year {
    position: absolute;
    left: -104px;
    top: 24px;
    padding-top: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
  }

  .ocs-group__mono { display: inline; }
}

/* Filter bar. */
.ocs-filter {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  border: 2px solid var(--ocs-ink);
}

.ocs-filter__series {
  display: flex;
  flex-wrap: wrap;
  /* When the buttons wrap, every row keeps a rule under it; the last one doubles as the group's own. */
  overflow: hidden;
}

.ocs-filter__series a { margin-bottom: 0; border-bottom: 2px solid var(--ocs-ink); flex-grow: 1; }

.ocs-filter__series a {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 12px;
  border-right: 2px solid var(--ocs-ink);
  font-family: var(--ocs-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.ocs-section .ocs-filter__series a[aria-current="true"],
.ocs-section .ocs-filter__series a:hover {
  background: var(--ocs-ink);
  color: var(--ocs-paper);
}

.ocs-filter__year {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  margin: 0;
  padding: 0 16px;
  font-family: var(--ocs-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ocs-filter__year select {
  height: 36px;
  padding: 0 8px;
  border: 2px solid var(--ocs-ink);
  border-radius: 0;
  background: var(--ocs-paper);
  color: var(--ocs-ink);
  font-family: var(--ocs-mono);
  font-size: 12px;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .ocs-filter {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
  }

  .ocs-filter__series a { padding: 0 20px; border-bottom: 0; flex-grow: 0; }
  .ocs-filter__year { height: auto; }
}

/* ---- Artwork Grid: featured ---------------------------------------------- */

.ocs-featured { padding: 24px 0 0; }

.ocs-featured__grid {
  display: grid;
  grid-template-columns: repeat(var(--ocs-cols), minmax(0, 1fr));
  column-gap: var(--ocs-gut);
  row-gap: 16px;
}

.ocs-featured__label,
.ocs-featured__work { grid-column: 1 / -1; }

.ocs-featured__work { display: block; }
.ocs-featured__caption { grid-column: 3 / span 4; }

@media (min-width: 768px) {
  .ocs-featured { padding-top: 48px; }

  .ocs-featured__grid {
    grid-template-rows: 1fr auto;
    row-gap: 24px;
  }

  .ocs-featured__label {
    grid-column: 1 / span 3;
    grid-row: 1;
    align-self: end;
  }

  .ocs-featured__caption {
    grid-column: 1 / span 3;
    grid-row: 2;
    padding-bottom: 4px;
  }

  .ocs-featured__work {
    grid-column: 4 / span 9;
    grid-row: 1 / span 2;
  }
}

/* ---- Name band (DEV-09) -------------------------------------------------- */

.ocs-section.ocs-band {
  margin-top: 64px;
  padding: 32px 0 48px;
  background: var(--ocs-ink);
  color: var(--ocs-paper);
  overflow: hidden;
}

.ocs-band .ocs-fit { padding: 16px 0 24px; }

.ocs-band__meta {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ocs-paper);
}

.ocs-band__meta > div {
  padding: 12px 16px;
  font-family: var(--ocs-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ocs-band__meta > div + div { border-top: 2px solid var(--ocs-paper); }
.ocs-section.ocs-band a:hover { color: var(--ocs-hair); }

.ocs-band__text { margin-top: 24px; }

.ocs-band__text p {
  margin: 0;
  color: inherit;
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .ocs-band {
    margin-top: 128px;
    padding: 48px 0 80px;
  }

  .ocs-band .ocs-fit { padding: 24px 0 40px; }

  .ocs-band__meta {
    display: grid;
    grid-template-columns: repeat(var(--cells, 4), minmax(0, 1fr));
  }

  .ocs-band__meta > div + div {
    border-top: 0;
    border-left: 2px solid var(--ocs-paper);
  }

  .ocs-band__text { margin-top: 48px; }
  .ocs-band__text p { font-size: 20px; }
}

@media (min-width: 1024px) {
  .ocs-band__text {
    margin-left: calc((100% + var(--ocs-gut)) / 12 * 6);
    width: calc((100% + var(--ocs-gut)) / 12 * 5 - var(--ocs-gut));
  }
}

/* ---- Single painting (DEV-04) -------------------------------------------- */

.ocs-painting { padding: 8px 0 64px; }

.ocs-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--ocs-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.ocs-painting__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 16px;
}

.ocs-painting__work { display: block; }

.ocs-painting__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-left: calc((100% + var(--ocs-gut)) / 6);
}

.ocs-painting__no { padding-top: 0.12em; }

.ocs-painting__info .ocs-caption {
  gap: 8px;
  padding-top: 12px;
}

.ocs-painting__info .ocs-caption__title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
}

.ocs-painting__info .ocs-caption__meta { font-size: 12px; }

.ocs-section .ocs-painting__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ocs-muted);
  text-wrap: pretty;
}

.ocs-painting__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 768px) {
  .ocs-painting { padding: 24px 0 128px; }

  .ocs-painting__main {
    gap: 48px;
    margin-top: 24px;
  }

  /* Stacked (and every ratio below 1024): the work across the container, the text at columns 6–11. */
  .ocs-painting__info {
    margin-left: calc((100% + var(--ocs-gut)) / 12 * 5);
    width: calc((100% + var(--ocs-gut)) / 12 * 6 - var(--ocs-gut));
  }

  .ocs-painting__info .ocs-caption__title { font-size: 36px; }
}

@media (min-width: 1024px) {
  /* Offset: the work at columns 1–6, the text at 8–12, dropped 128. */
  .ocs-painting--offset .ocs-painting__main {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--ocs-gut);
    align-items: start;
  }

  .ocs-painting--offset .ocs-painting__work { grid-column: 1 / span 6; }

  .ocs-painting--offset .ocs-painting__info {
    grid-column: 8 / span 5;
    width: auto;
    margin: 128px 0 0;
  }
}

/* Details strip: staggered, never touching. */
.ocs-details { padding: 0 0 64px; }

.ocs-details > .ocs-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ocs-details__grid {
  display: grid;
  grid-template-columns: repeat(var(--ocs-cols), minmax(0, 1fr));
  column-gap: var(--ocs-gut);
  row-gap: 16px;
  align-items: start;
}

.ocs-details__item:nth-child(3n + 1) { grid-column: 1 / span 4; }
.ocs-details__item:nth-child(3n + 2) { grid-column: 3 / span 4; }
.ocs-details__item:nth-child(3n) { grid-column: 1 / span 3; }

@media (min-width: 768px) {
  .ocs-details { padding-bottom: 128px; }
  .ocs-details > .ocs-wrap { gap: 32px; }
  .ocs-details__grid { row-gap: 48px; }

  .ocs-details__item:nth-child(3n + 1) { grid-column: 1 / span 4; }

  .ocs-details__item:nth-child(3n + 2) {
    grid-column: 6 / span 3;
    margin-top: 96px;
  }

  .ocs-details__item:nth-child(3n) {
    grid-column: 10 / span 3;
    margin-top: 32px;
  }
}

/* Previous / next. */
.ocs-prevnext { padding: 0 0 64px; }

.ocs-prevnext__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 2px solid var(--ocs-ink);
}

.ocs-prevnext__cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  text-decoration: none;
}

.ocs-prevnext__cell--next {
  align-items: flex-end;
  border-left: 2px solid var(--ocs-ink);
  text-align: right;
}

.ocs-prevnext__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ocs-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ocs-prevnext__title {
  font-size: 17px;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .ocs-prevnext { padding-bottom: 128px; }
  .ocs-prevnext__cell { padding: 24px; }
  .ocs-prevnext__title { font-size: 28px; }
}

/* ---- Large view (DEV-03) ------------------------------------------------- */

.ocs-lv {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ocs-ink);
  color: var(--ocs-paper);
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 80px minmax(0, 1fr) auto auto;
  grid-template-areas:
    "top top"
    "work work"
    "cap cap"
    "prev next";
}

.ocs-lv[open] { display: grid; }

/* The reserved scrollbar strip shows the page's canvas colour. Behind the large view it must be ink, not paper. */
html:has(.ocs-lv[open]) { background: var(--ocs-ink); }
.ocs-lv::backdrop { background: var(--ocs-ink); }

.ocs-lv__top {
  grid-area: top;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
}

.ocs-lv__no {
  font-family: var(--ocs-sans);
  font-stretch: 62%;
  font-weight: 800;
  font-size: 32px;
  line-height: 0.86;
  letter-spacing: -0.01em;
}

.ocs-lv__no .ocs-total { font-size: 14px; }

.ocs-lv__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--ocs-paper);
  text-decoration: none;
}

.ocs-lv a.ocs-lv__btn:hover {
  background: var(--ocs-paper);
  color: var(--ocs-ink);
}

/* Contain-fit: as large as the space allows, never cropped. */
.ocs-lv__work {
  grid-area: work;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  container-type: size;
}

.ocs-lv__work .ocs-art {
  width: min(100cqw, calc(100cqh * var(--ratio, 1)));
}

.ocs-lv .ocs-art--ph {
  background: #34322E;
  color: #B9B4AB;
}

.ocs-lv__caption {
  grid-area: cap;
  padding: 16px 20px 0;
}

.ocs-lv .ocs-caption__meta { color: #AAA59C; }

.ocs-lv__prev {
  grid-area: prev;
  justify-self: start;
  margin: 16px 16px 32px;
}

.ocs-lv__next {
  grid-area: next;
  justify-self: end;
  margin: 16px 16px 32px;
}

@media (min-width: 768px) {
  .ocs-lv {
    grid-template-columns: 168px minmax(0, 1fr) 168px;
    grid-template-rows: 104px minmax(0, 1fr) 152px;
    grid-template-areas:
      "top top top"
      "prev work next"
      "cap cap cap";
  }

  .ocs-lv__top { padding: 0 48px; }
  .ocs-lv__no { font-size: 48px; }

  .ocs-lv__btn {
    width: 56px;
    height: 56px;
  }

  .ocs-lv__prev,
  .ocs-lv__next {
    align-self: center;
    margin: 0 48px;
  }

  .ocs-lv__caption {
    display: flex;
    align-items: center;
    padding: 0 48px;
  }

  .ocs-lv__caption .ocs-caption { width: 420px; }
}

/* ---- About ---------------------------------------------------------------- */

.ocs-bio { padding: 24px 0 64px; }

.ocs-bio > .ocs-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ocs-bio__grid {
  display: grid;
  grid-template-columns: repeat(var(--ocs-cols), minmax(0, 1fr));
  column-gap: var(--ocs-gut);
  row-gap: 24px;
  align-items: start;
  border-top: 2px solid var(--ocs-ink);
  padding-top: 16px;
}

.ocs-bio__photo { grid-column: 1 / span 5; }

.ocs-bio__text {
  grid-column: 2 / span 5;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ocs-bio__text p:not(.ocs-label) {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

.ocs-statement { padding: 0 0 64px; }
.ocs-statement__text { margin-top: 20px; }

.ocs-statement__text p {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  text-wrap: pretty;
}

.ocs-statement__text p + p { margin-top: 1em; }

@media (min-width: 768px) {
  .ocs-bio { padding: 48px 0 128px; }
  .ocs-bio > .ocs-wrap { gap: 48px; }
  .ocs-bio__grid { padding-top: 24px; }
  .ocs-bio__photo { grid-column: 1 / span 4; }

  .ocs-bio__text {
    grid-column: 6 / span 6;
    gap: 24px;
    /* The drop halves below 1024. */
    margin-top: 64px;
  }

  .ocs-bio__text p:not(.ocs-label) { font-size: 20px; }

  .ocs-statement { padding-bottom: 128px; }

  .ocs-statement__text {
    margin-top: 40px;
    margin-left: calc((100% + var(--ocs-gut)) / 12 * 2);
    width: calc((100% + var(--ocs-gut)) / 12 * 9 - var(--ocs-gut));
  }

  .ocs-statement__text p {
    font-size: 36px;
    line-height: 1.25;
  }
}

@media (min-width: 1024px) {
  .ocs-bio__text { margin-top: 128px; }
}

/* ---- Exhibitions list (DEV-10) ------------------------------------------- */

.ocs-exhibitions { padding: 0 0 64px; }

.ocs-exhibitions > .ocs-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ocs-exh {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 2px solid var(--ocs-ink);
}

.ocs-exh__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  /* Hairline between rows within a year — the one place the hairline colour is used. */
  border-top: 1px solid var(--ocs-hair);
}

.ocs-exh__row--first { border-top: 2px solid var(--ocs-ink); }

.ocs-exh__year {
  font-family: var(--ocs-sans);
  font-stretch: 62%;
  font-weight: 800;
  font-size: 36px;
  line-height: 0.86;
  letter-spacing: -0.01em;
}

.ocs-exh__year:empty { display: none; }

.ocs-exh__title {
  font-size: 16px;
  line-height: 1.3;
}

.ocs-exh__place {
  font-family: var(--ocs-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ocs-muted);
}

.ocs-exh__type { display: none; }

@media (min-width: 768px) {
  .ocs-exhibitions { padding-bottom: 128px; }
  .ocs-exhibitions > .ocs-wrap { gap: 32px; }

  .ocs-exh__row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 280px;
    column-gap: 24px;
    align-items: baseline;
    padding: 12px 0;
  }

  .ocs-exh__year { font-size: 80px; }
  .ocs-exh__year:empty { display: block; }
  .ocs-exh__title { font-size: 18px; }
  .ocs-exh__place { font-size: 12px; }
}

@media (min-width: 1024px) {
  .ocs-exh__row { grid-template-columns: 200px minmax(0, 1fr) 280px 120px; }
  .ocs-exh__type-inline { display: none; }

  .ocs-exh__type {
    display: block;
    font-family: var(--ocs-mono);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: right;
  }
}

/* ---- Contact -------------------------------------------------------------- */

.ocs-contact { padding: 24px 0 64px; }

.ocs-contact > .ocs-wrap,
.ocs-contact__grid,
.ocs-contact__details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ocs-contact__intro {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}

.ocs-dl {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 2px solid var(--ocs-ink);
  border-top: 0;
}

.ocs-dl > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-top: 2px solid var(--ocs-ink);
}

.ocs-dl dt {
  font-family: var(--ocs-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ocs-muted);
}

.ocs-dl dd {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.ocs-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}

.ocs-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ocs-field label {
  font-family: var(--ocs-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ocs-field input,
.ocs-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 2px solid var(--ocs-ink);
  border-radius: 0;
  background: #FFFFFF;
  color: var(--ocs-ink);
  font-family: var(--ocs-sans);
  font-size: 16px;
  box-shadow: none;
}

.ocs-field input { height: 52px; }

.ocs-field textarea {
  line-height: 1.5;
  resize: vertical;
}

.ocs-section .ocs-form__privacy {
  margin: 0;
  font-family: var(--ocs-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ocs-muted);
}

.ocs-form__privacy a { color: var(--ocs-ink); }

/* Honeypot: off-screen for people, present for bots. */
.ocs-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ocs-section .ocs-form__notice {
  margin: 0;
  padding: 12px 16px;
  border: 2px solid;
  font-size: 16px;
  line-height: 1.5;
}

.ocs-section .ocs-form__notice--ok {
  border-color: var(--color-success, #2F6B3F);
  background: var(--color-success-lighter, #E4EFE6);
  color: var(--color-success-dark, #1E4729);
}

.ocs-section .ocs-form__notice--error {
  border-color: var(--color-error, #A3322A);
  background: var(--color-error-lighter, #F7E3E1);
  color: var(--color-error-dark, #6E1F19);
}

@media (min-width: 768px) {
  .ocs-contact { padding: 48px 0 128px; }
  .ocs-contact > .ocs-wrap { gap: 48px; }

  .ocs-contact__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--ocs-gut);
    align-items: start;
    border-top: 2px solid var(--ocs-ink);
    padding-top: 24px;
  }

  .ocs-contact__details {
    grid-column: 1 / span 5;
    gap: 32px;
  }

  .ocs-contact__form {
    grid-column: 7 / span 6;
    /* The drop halves below 1024. */
    margin-top: 64px;
  }

  .ocs-contact__intro { font-size: 20px; }
  .ocs-dl dd { font-size: 24px; }
}

@media (min-width: 1024px) {
  .ocs-contact__details { grid-column: 1 / span 4; }
  .ocs-contact__form { margin-top: 128px; }
}

/* ---- Ordinary text pages (Privacy) and 404 ------------------------------- */

.ocs-textpage { padding: 32px 0 64px; }
.ocs-prose { max-width: 640px; }
.ocs-prose > * { margin: 16px 0 0; }
.ocs-prose > :first-child { margin-top: 0; }

/* Ordinary headings: sizes from the Text Sizes tokens, never the fitted display type. */
.ocs-prose h1,
.ocs-prose h2,
.ocs-404__title {
  font-family: var(--ocs-sans);
  font-stretch: 62%;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ocs-ink);
}

.ocs-prose h1,
.ocs-404__title { font-size: 36px; }

.ocs-prose h2 {
  margin-top: 32px;
  border-top: 2px solid var(--ocs-ink);
  padding-top: 24px;
  font-size: 26px;
}

.ocs-prose h3,
.ocs-prose h4 {
  font-family: var(--ocs-sans);
  font-stretch: 100%;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ocs-ink);
}

.ocs-prose p,
.ocs-prose ul,
.ocs-prose ol {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ocs-ink);
  text-wrap: pretty;
}

.ocs-prose ul,
.ocs-prose ol { padding-left: 20px; }
.ocs-prose ul { list-style: disc; }
.ocs-prose ol { list-style: decimal; }
.ocs-prose li { padding-left: 4px; }
.ocs-prose li + li { margin-top: 4px; }

.ocs-prose a {
  color: var(--ocs-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Editor block styles: "Meta line" and "Note" on a paragraph. */
.ocs-section .ocs-prose p.is-style-ocs-meta {
  margin-top: 12px;
  font-family: var(--ocs-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ocs-muted);
}

.ocs-section .ocs-prose p.is-style-ocs-note {
  margin-top: 32px;
  color: var(--ocs-muted);
}

.ocs-404 { padding: 24px 0 64px; }

.ocs-404 > .ocs-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ocs-404__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-top: 2px solid var(--ocs-ink);
  padding-top: 16px;
}

.ocs-404__title { margin: 0; }

.ocs-404__text p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.ocs-404__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .ocs-textpage { padding: 64px 0 128px; }
  .ocs-prose h1, .ocs-404__title { font-size: 48px; }
  .ocs-prose h2 { margin-top: 40px; font-size: 32px; }
  .ocs-prose h3, .ocs-prose h4 { font-size: 24px; }
  .ocs-prose p, .ocs-prose ul, .ocs-prose ol { font-size: 18px; }
  .ocs-prose p.is-style-ocs-meta { font-size: 12px; }
  .ocs-prose p.is-style-ocs-note { margin-top: 40px; }

  .ocs-404 { padding: 48px 0 128px; }
  .ocs-404 > .ocs-wrap { gap: 48px; }

  .ocs-404__body {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--ocs-gut);
    align-items: start;
    padding-top: 24px;
  }

  .ocs-404__title { grid-column: 1 / span 5; }

  .ocs-404__text {
    grid-column: 7 / span 5;
    margin-top: 96px;
  }

  .ocs-404__text p { font-size: 18px; }

  .ocs-404__actions {
    flex-direction: row;
    margin-top: 32px;
  }
}