/* swiss-red — International Typographic Style. 12 columns, one red. */
:root {
  --ink: #0a0a0a;
  --paper: #ffffff;
  --red: #d9000d;
  --grey: #5c5c5c;
  --hair: #d6d6d6;
  --bar: #000000;
  --bar-ink: #f2f2f2;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: 20px;
  --edge: 20px;
  --max: 1320px;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  counter-reset: sec;
  overflow-x: hidden;
}

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

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* ---------- Masthead: black bar, red base rule ---------- */
.masthead { background: var(--bar); color: var(--bar-ink); border-bottom: 6px solid var(--red); }
.masthead-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--edge) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 32px;
}
.brand { display: block; padding: 6px 0 14px; text-decoration: none; }
.brand-logo { height: 34px; width: auto; }
.primary { width: 100%; overflow-x: auto; scrollbar-width: none; border-top: 1px solid #2e2e2e; }
.primary::-webkit-scrollbar { display: none; }
.primary-list { list-style: none; margin: 0; padding: 0; display: flex; white-space: nowrap; }
.primary-list li { flex: 0 0 auto; }
.primary-list a {
  display: block;
  padding: 12px 22px 13px 0;
  color: var(--bar-ink);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
}
.primary-list a:hover { color: #fff; text-decoration: underline; text-decoration-color: #fff; }
.primary-list a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* ---------- Page frame ---------- */
.page { max-width: var(--max); margin: 0 auto; padding: 0 var(--edge); }

/* ---------- Hero: flush-left title over an offset image ---------- */
.hero { padding: 36px 0 52px; border-bottom: 1px solid var(--ink); align-items: start; }
.hero-title {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0 0 28px;
  font-size: clamp(2.4rem, 8.6vw, 6.5rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.04em;
  position: relative;
  z-index: 2;
}
.hero-title::before {
  content: "";
  display: block;
  width: 56px;
  height: 10px;
  background: var(--red);
  margin-bottom: 22px;
}
.hero-title-text {
  background: var(--paper);
  padding-right: .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero-frame { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 1; }
.hero-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-intro { grid-column: 1 / -1; grid-row: 3; padding-top: 28px; }
.hero-intro p { margin: 0 0 1em; max-width: 62ch; font-size: 1.0625rem; line-height: 1.65; }
.hero-intro p:first-child { font-size: 1.2rem; line-height: 1.55; font-weight: 400; letter-spacing: -.005em; }

/* ---------- Body sections: numbered rail ---------- */
.body { padding-bottom: 72px; }

.sec {
  counter-increment: sec;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-content: start;
  padding: 44px 0 52px;
  border-bottom: 1px solid var(--hair);
}
.sec:last-child { border-bottom: 0; }
.sec::before {
  content: counter(sec, decimal-leading-zero);
  grid-column: 1 / -1;
  align-self: start;
  display: block;
  width: 4.4rem;
  margin-bottom: 18px;
  padding-top: 10px;
  border-top: 4px solid var(--ink);
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.05em;
  color: var(--red);
}
.sec-text, .sec--plain > .sec-title, .sec--plain > .sec-body { grid-column: 1 / -1; min-width: 0; }

.sec-title {
  margin: 0 0 22px;
  font-size: clamp(1.6rem, 4.2vw, 2.6rem);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.03em;
  max-width: 22ch;
}
.sec-body { max-width: 66ch; }
.sec-body p { margin: 0 0 1.1em; }
.sec-body ul { list-style: none; margin: 0 0 1.4em; padding: 0; border-top: 1px solid var(--ink); }
.sec-body li { position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--hair); }
.sec-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2em;
  width: 12px;
  height: 3px;
  background: var(--red);
}
.sec-body strong { font-weight: 700; }

.sec-media { grid-column: 1 / -1; margin-top: 12px; }
.sec-img { width: 100%; max-width: 640px; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Footer ---------- */
.colophon { background: var(--bar); color: var(--bar-ink); border-top: 6px solid var(--red); }
.colophon-inner { max-width: var(--max); margin: 0 auto; padding: 52px var(--edge) 28px; row-gap: 32px; }
.colophon-inner > * { grid-column: 1 / -1; min-width: 0; }
.colophon p { margin: 0 0 .5em; }
.colophon-name { font-size: 1.6rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.colophon-addr { font-style: normal; color: #cfcfcf; line-height: 1.6; margin-top: 12px; }
.colophon a { color: #fff; text-decoration-color: var(--red); }
.colophon a:hover { color: #fff; text-decoration-color: #fff; }
.colophon-contact { overflow-wrap: anywhere; }
.lbl { display: inline-block; width: 1.6em; font-weight: 700; color: #9a9a9a; }
.colophon .colophon-line { margin-top: 16px; padding-top: 12px; border-top: 1px solid #333; color: #9a9a9a; font-size: .875rem; }
.colophon-map iframe { display: block; width: 100%; filter: grayscale(1); }
.colophon .colophon-copy { margin: 0; padding-top: 18px; border-top: 1px solid #333; color: #9a9a9a; font-size: .8125rem; }

/* ---------- 768: tablet, 8 columns ---------- */
@media (min-width: 768px) {
  :root { --gutter: 24px; --edge: 32px; }
  .grid, .sec { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .hero { padding: 52px 0 72px; }
  .hero-frame { grid-column: 3 / -1; }
  .hero-img { aspect-ratio: 16 / 10; }
  .hero-intro { grid-column: 1 / 7; }
  .sec::before { grid-column: 1 / 2; grid-row: 1 / span 2; width: 100%; font-size: 2.4rem; }
  .sec-text, .sec--plain > .sec-title, .sec--plain > .sec-body { grid-column: 2 / -1; }
  .sec-media { grid-column: 2 / 7; }
  .colophon-id { grid-column: 1 / 5; }
  .colophon-contact { grid-column: 5 / -1; }
}

/* ---------- 1100+: the full 12-column grid ---------- */
@media (min-width: 1100px) {
  :root { --gutter: 28px; --edge: 40px; }
  .grid, .sec { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .masthead-inner { flex-wrap: nowrap; padding-top: 0; }
  .brand { padding: 22px 0; }
  .brand-logo { height: 38px; }
  .primary { width: auto; border-top: 0; overflow: visible; }
  .primary-list a { padding: 30px 0; margin-left: 32px; }

  /* Title spans 11 columns and knocks out of the image offset to the right */
  .hero { padding: 64px 0 88px; }
  .hero-title { grid-column: 1 / 12; grid-row: 1; margin-bottom: 0; }
  .hero-frame { grid-column: 6 / -1; grid-row: 1 / 4; margin-top: 150px; }
  .hero-img { aspect-ratio: 4 / 3; max-height: 600px; }
  .hero-intro { grid-column: 1 / 5; grid-row: 2; padding-top: 40px; }

  /* Rail cols 1-2 / text 3-8 / image 9-12 */
  .sec { padding: 64px 0 76px; }
  .sec::before { grid-column: 1 / 3; max-width: 120px; padding-top: 14px; font-size: 4.5rem; }
  .sec-text { grid-column: 3 / 9; }
  .sec--rail .sec-media { grid-column: 9 / -1; grid-row: 1 / span 2; margin-top: 0; align-self: stretch; }
  .sec--rail .sec-img { position: sticky; top: 28px; aspect-ratio: 4 / 5; border-top: 4px solid var(--ink); }
  .sec--plain > .sec-title, .sec--plain > .sec-body { grid-column: 3 / 11; }
  .sec--plain > .sec-title { max-width: 26ch; }

  .colophon-inner { padding-top: 72px; }
  .colophon-id { grid-column: 1 / 5; }
  .colophon-contact { grid-column: 5 / 8; }
  .colophon-map { grid-column: 8 / -1; grid-row: 1 / span 2; }
  .colophon-copy { grid-column: 1 / 8; align-self: end; }
}

@media (min-width: 1500px) {
  .hero-title { font-size: 7.25rem; }
  .hero-frame { margin-top: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}