/* ==========================================================================
   Marine Forwarding Company of Virginia
   Layout is deliberately non-linear: full-bleed hero, a pinned horizontal
   cargo rail, overlapping plates that break the container, and inverted
   sections. Nothing here is a centred column of equal blocks.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  --paper:        #F4F1EB;
  --paper-sunk:   #EAE6DE;
  --ink:          #0C1116;
  --ink-2:        #2B353D;
  --steel:        #4E5A64;
  --steel-soft:   #5C666F;   /* darkened from #626D77 for the same reason (4.25:1) */
  --rule:         #0C111620;
  --rule-strong:  #0C111640;

  --oxide:        #B33A0A;   /* darkened from #C2410C: the old value scored 4.16:1
                                as small text on --paper-sunk, under the 4.5 AA floor */
  --oxide-lift:   #E2570F;

  --display: "Sentient", ui-serif, Georgia, "Times New Roman", serif;
  --ui:      "Switzer", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --gutter: clamp(1.5rem, 5vw, 5.5rem);
  --measure: 68ch;
  --shell: 84rem;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.76, 0, .24, 1);
  --ease-back: cubic-bezier(.34, 1.4, .64, 1);
}


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

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

html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; overflow-x: clip; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: clamp(1rem, .95rem + .25vw, 1.1rem);
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--oxide); outline-offset: 3px; }
::selection { background: var(--oxide); color: #fff; }

/* --- Typography ----------------------------------------------------------- */

h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.014em;
  margin: 0;
  text-wrap: balance;
  font-feature-settings: "liga" 1, "kern" 1;
}

h1 { font-size: clamp(2.4rem, 1.4rem + 3.1vw, 4.4rem); line-height: 1.06; letter-spacing: -.019em; }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.5rem); }

/* Sub-heads inside body copy stay in the text face: a serif at 1.1rem next to
   serif body would blur the level it is meant to mark. */
h3 {
  font-family: var(--ui); font-weight: 600; margin: 0;
  font-size: clamp(1rem, .96rem + .25vw, 1.12rem); line-height: 1.35;
  letter-spacing: .002em; text-wrap: balance;
}

h1 em, h2 em { font-style: italic; font-weight: 400; }

p { margin: 0 0 1.45em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1rem, 1rem + .65vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 46ch;
  font-weight: 400;
}

.label {
  font-family: var(--ui);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0;
}

.data { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Headline line masks. Structural, so the line breaks survive reduced motion;
   only the movement inside them is animated. */
.rl { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.rl > span { display: block; }

/* --- Layout --------------------------------------------------------------- */

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(5rem, 9vw, 10rem); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Asymmetric offsets. Sections deliberately do not share a left edge. */
.indent-1 { margin-inline-start: 0; }
@media (min-width: 64rem) {
  .indent-1 { margin-inline-start: 8vw; }
  .indent-2 { margin-inline-start: 22vw; }
  .pull-right { margin-inline-start: auto; }
}

/* Emphasis bands. Previously a dark ground; now the space itself does the
   work, held between hairlines with the accent carried only by the action. */
.invert {
  background: var(--paper);
  border-block: 1px solid var(--rule-strong);
  padding-block: clamp(5.5rem, 11vw, 13rem);
}
.invert .lede { max-width: 42ch; }

/* --- Masthead ------------------------------------------------------------- */

.masthead {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid var(--rule);
  view-transition-name: masthead;
}
body { padding-top: 4.25rem; }
body.arc-bleed { padding-top: 0; }

.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }

.wordmark {
  display: flex; align-items: baseline; gap: .55rem;
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.wordmark span { font-family: var(--ui); font-size: .6rem; font-weight: 600; letter-spacing: .2em; color: var(--steel); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.nav a {
  font-size: .82rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-2); padding-block: .3rem; position: relative;
}
.nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--oxide); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }

@media (max-width: 56rem) {
  .nav--links { display: none; }
  .nav--links[data-open] {
    display: flex; position: fixed; inset: 4.25rem 0 auto; flex-direction: column;
    align-items: flex-start; gap: 0; background: var(--paper);
    border-bottom: 1px solid var(--rule); padding: .5rem var(--gutter) 1.5rem;
  }
  .nav--links[data-open] a { width: 100%; padding-block: 1rem; border-bottom: 1px solid var(--rule); font-size: 1rem; }
}
.navtoggle {
  display: none; align-items: center; min-height: 44px; background: none; border: 0;
  padding: .5rem; margin-inline-end: -.5rem; color: inherit; cursor: pointer;
  font-family: var(--ui); font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
@media (max-width: 56rem) { .navtoggle { display: inline-flex; } }

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

.btn {
  display: inline-flex; align-items: center; gap: .65rem; min-height: 44px;
  padding: 1rem 1.75rem; background: var(--oxide); color: #fff;
  font-family: var(--ui); font-size: .82rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  border: 0; cursor: pointer; position: relative; overflow: hidden;
  isolation: isolate;
  transition: color .4s var(--ease-out);
}
/* Fill wipes across on hover instead of a flat colour swap. The wipe sits
   behind the content rather than above it: raising only child elements left
   the label, which is a bare text node, underneath the overlay. isolate
   keeps the negative z-index inside the button. */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-io);
}
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn__arrow { transition: transform .45s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--ghost {
  background: none; color: var(--ink); padding: .55rem 0; min-height: 44px;
  border-bottom: 2px solid var(--rule-strong); overflow: visible;
}
.btn--ghost::before { display: none; }
.btn--ghost:hover { color: var(--oxide); border-bottom-color: var(--oxide); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }

/* --- HERO ---------------------------------------------------------------
   A dimmed, softly blurred photograph carries the full width; the type sits
   centred on top. Holds the whole first screen, then hands off to the page
   with a graded edge rather than a hard cut. */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding-top: 4.25rem;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding-block: clamp(3rem, 7vw, 6rem);
  overflow: clip;
}

/* --- backdrop ----------------------------------------------------------- */
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  overflow: clip;
}
.hero__bg picture, .hero__bg img {
  width: 100%; height: 100%; display: block;
}
.hero__bg img {
  object-fit: cover;
  object-position: 50% 46%;
  filter: blur(3px) saturate(.72) brightness(.62);
  transform: scale(1.08);          /* hides the blur's soft edge */
  will-change: transform;
}

/* The scrim is a gradient, densest behind the type, so the photograph still
   reads at the edges instead of sitting under a flat sheet of black. */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 78% 62% at 50% 48%, #05090Ccc 0%, #05090C99 45%, #05090C40 100%),
    linear-gradient(to bottom, #05090C66 0%, #05090C22 30%, #05090C55 100%);
}

/* --- type on the backdrop ------------------------------------------------ */
.hero__inner { position: relative; z-index: 1; display: grid; justify-items: center; }
.hero__type { max-width: min(90vw, 46rem); }

.hero h1 {
  color: #F7F4EE;
  font-size: clamp(1.9rem, min(1.45rem + 3.2vw, 1rem + 5.6svh), 4.6rem);
  max-width: 14ch;            /* ch here resolves against the headline itself */
  margin-inline: auto;
  text-shadow: 0 1px 30px rgba(5, 9, 12, .35);
}
.hero .label {
  /* p carries a global max-width measure; without releasing it a short
     eyebrow sits flush left of a centred column instead of on its axis. */
  max-width: none;
  color: #DCD6CB;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: .66rem; letter-spacing: .26em;
}
.hero .lede { color: #EAE5DC; max-width: 46ch; margin-inline: auto; }

.hero__lower { position: relative; display: grid; justify-items: center; }
.hero__lower::before {
  content: "";
  display: block;
  width: 3.5rem; height: 2px;
  background: var(--oxide);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: clamp(1.75rem, 3.2vw, 2.5rem);
}
.hero .actions { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); justify-content: center; }
.hero .btn--ghost { color: #F7F4EE; border-bottom-color: #F7F4EE59; }
.hero .btn--ghost:hover { color: var(--oxide-lift); border-bottom-color: var(--oxide-lift); }

/* --- the handoff --------------------------------------------------------- */
/* A graded edge into the page ground, so the hero resolves instead of
   stopping at a line. */
.hero__edge {
  position: absolute; inset-inline: 0; bottom: 0; height: 22vh;
  z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--paper) 92%);
}

@media (max-height: 940px) {
  .hero { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
  .hero .label { margin-bottom: 1rem; }
  .hero__lower::before { margin-top: 1.5rem; margin-bottom: 1.5rem; }
  .hero .actions { margin-top: 1.5rem; }
}
@media (max-height: 800px) {
  .hero { padding-block: clamp(1.25rem, 2.5vw, 2rem); }
  .hero .label { margin-bottom: 1rem; }
  .hero__lower::before { margin-top: 1.15rem; margin-bottom: 1.15rem; }
  .hero .lede { font-size: 1rem; line-height: 1.55; }
  .hero .actions { margin-top: 1.5rem; }
}

/* --- Marquee: edge to edge, continuous, reacts to scroll ------------------ */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--rule-strong);
  padding-block: 1.1rem;
  white-space: nowrap;
  user-select: none;
}
.marquee__track { display: inline-flex; gap: 3.5rem; will-change: transform; }
.marquee__track > span {
  font-family: var(--display);
  font-size: clamp(.85rem, .8rem + .3vw, 1.05rem);
  letter-spacing: -.01em;
  color: var(--steel-soft);
  display: inline-flex; align-items: center; gap: 3.5rem;
}
.marquee__track > span::after { content: "●"; font-size: .35em; color: var(--oxide); }

/* --- CARGO RAIL: pinned section, moves horizontally on vertical scroll ---- */

.rail { position: relative; }
@media (min-width: 64rem) {
  .rail { height: 275vh; }
  .rail__pin {
    position: sticky; top: 4.25rem;
    height: calc(100vh - 4.25rem);
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden;
  }
  .rail__track { display: flex; width: max-content; gap: clamp(1.5rem, 3vw, 3rem); padding-inline: var(--gutter); will-change: transform; }
  .rail__card { flex: 0 0 clamp(22rem, 32vw, 30rem); }
}
/* Below the pin breakpoint it is an ordinary swipeable scroller, not a stack. */
@media (max-width: 63.99rem) {
  .rail__track {
    display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-inline: var(--gutter); padding-bottom: 1.5rem;
    scrollbar-width: thin;
  }
  .rail__card { flex: 0 0 82vw; scroll-snap-align: start; }
}

.rail__card {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: .9rem;
  text-decoration: none; padding-top: 1.5rem;
  border-top: 2px solid var(--ink);
  transition: border-color .45s var(--ease-out);
}
.rail__card:hover { border-top-color: var(--oxide); }
.rail__card .num { font-family: var(--display); font-size: 2rem; line-height: .8; color: var(--rule-strong); transition: color .45s var(--ease-out); }
.rail__card:hover .num { color: var(--oxide); }
.rail__card h3 { font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); }
.rail__card p { color: var(--steel); font-size: .95rem; margin: 0; }
.rail__card .go { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--oxide); }
.rail__card .go .btn__arrow { display: inline-block; transition: transform .4s var(--ease-out); }
.rail__card:hover .go .btn__arrow { transform: translateX(6px); }

/* --- Manifest: offset, oversized figures ---------------------------------- */

.manifest { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3.5rem 2.5rem; }
@media (min-width: 52rem) { .manifest { grid-template-columns: repeat(4, 1fr); gap: 3rem 2rem; } }
.manifest dt { margin-bottom: .6rem; }
.manifest dd {
  margin: 0; font-family: var(--display);
  font-size: clamp(1.25rem, 1.05rem + .85vw, 1.75rem); line-height: .95; letter-spacing: -.02em;
}
.manifest dd a { text-decoration: none; }
.manifest dd a:hover { color: var(--oxide); }

/* --- Overlapping plate ---------------------------------------------------- */

.plate { margin: 0; position: relative; overflow: clip; } /* the scale parallax stays inside the figure */
.plate img { width: 100%; object-fit: cover; background: var(--paper-sunk); }
.plate figcaption {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-top: .65rem; margin-top: .65rem; border-top: 1px solid var(--rule);
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--steel);
}
@media (min-width: 64rem) {
  .plate--overlap { margin-top: -8vw; }
  .plate--bleed-l { margin-inline-start: calc((100vw - var(--shell)) / -2 - var(--gutter)); }
}

/* --- Editorial two-up (not a rail + column stack) ------------------------- */

.duo { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 64rem) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--offset > :nth-child(2) { margin-top: 12vw; }
  .duo--wide-l { grid-template-columns: 1.4fr 1fr; }
  .duo--wide-r { grid-template-columns: 1fr 1.4fr; }
}

/* --- Spec rows ------------------------------------------------------------ */

.specs { margin: 0; border-top: 2px solid var(--ink); }
.specs > div { display: grid; gap: .45rem 3rem; padding-block: 2rem; border-bottom: 1px solid var(--rule); }
@media (min-width: 48rem) { .specs > div { grid-template-columns: 16rem 1fr; } }
.specs dt { font-weight: 600; }
.specs dd { margin: 0; color: var(--steel); max-width: 58ch; }

/* --- Prose ---------------------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose h2 { margin-block: 2em .5em; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-block: 1.9em .45em; font-family: var(--ui); font-weight: 600; font-size: 1.08rem; letter-spacing: .01em; text-transform: none; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-inline-start: 1.1em; max-width: var(--measure); }
.prose li { margin-bottom: .5em; padding-inline-start: .3em; }
.prose li::marker { color: var(--oxide); }
.prose strong { font-weight: 600; }

.note {
  border-left: 3px solid var(--oxide);
  background: color-mix(in srgb, var(--oxide) 7%, transparent);
  padding: 1.3rem 1.5rem; margin-block: 2.25rem; max-width: var(--measure);
}
.note p { margin-bottom: .55em; }
.note p:last-child { margin-bottom: 0; }
.note .label { color: var(--oxide); margin-bottom: .5rem; }

/* --- Table ---------------------------------------------------------------- */

.tablewrap { overflow-x: auto; margin-block: 1.75rem; border-bottom: 1px solid var(--rule); }
table { width: 100%; border-collapse: collapse; min-width: 42rem; font-size: .93rem; }
caption { text-align: left; color: var(--steel); font-size: .88rem; padding-bottom: .8rem; }
th, td { text-align: left; padding: 1.15rem 1.75rem 1.15rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th {
  border-bottom: 2px solid var(--ink); font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--steel); white-space: nowrap;
}
tbody th { font-family: var(--display); font-weight: 400; font-size: .95rem; white-space: nowrap; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

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

.contactgrid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 56rem) { .contactgrid { grid-template-columns: 1.3fr 1fr 1fr; } }
.contactgrid a { text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.contactgrid a:hover { border-bottom-color: var(--oxide); color: var(--oxide); }

.bigcall {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.4rem);
  letter-spacing: -.02em; line-height: .95; text-decoration: none; border: 0 !important;
  display: inline-block;
}
.bigcall:hover { color: var(--oxide); }

.foot { border-top: 0; padding-block: clamp(4.5rem, 8vw, 7rem) 2.5rem; }
.foot__grid { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) { .foot__grid { grid-template-columns: 2fr 1fr 1fr; } }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .6rem; }
.foot a { text-decoration: none; color: var(--steel); font-size: .92rem; }
.foot a:hover { color: var(--oxide); }
.foot__legal {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  color: var(--steel-soft); font-size: .8rem;
}

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: .8rem 1.2rem; z-index: 100; }
.skip:focus { left: .5rem; top: .5rem; }

.crumbs { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--steel); padding-block: 1.5rem 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--oxide); }
.crumbs li + li::before { content: "/"; margin-inline-end: .5rem; color: var(--rule-strong); }

/* ==========================================================================
   MOTION
   Progressive enhancement throughout. With animation unavailable or
   reduced-motion set, every element renders in its final state.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* --- Page load choreography ------------------------------------------ */
  /* A curtain wipes off the top while masked headline lines push up behind
     it. Runs once, on load, and cannot leave content hidden: the keyframes
     end at the natural state and the curtain removes itself from flow. */

  .curtain {
    position: fixed; inset: 0; z-index: 90; background: var(--ink);
    transform-origin: top;
    animation: curtain-lift .9s var(--ease-io) forwards;
    pointer-events: none;
  }
  @keyframes curtain-lift {
    0%   { transform: scaleY(1); }
    100% { transform: scaleY(0); visibility: hidden; }
  }

  /* Masked line reveal. The mover animates; the structure itself is defined
     outside this block so reduced motion keeps the line breaks. */
  .rl > span { animation: line-up 1.05s var(--ease-out) both; }
  @keyframes line-up {
    from { transform: translateY(105%) rotate(2.5deg); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
  .rl > span { animation-delay: .42s; }

  .load-up { animation: load-up .95s var(--ease-out) both; }
  @keyframes load-up { from { opacity: 0; transform: translateY(1.6rem); } to { opacity: 1; transform: none; } }
  .d1 { animation-delay: .70s; } .d2 { animation-delay: .78s; }
  .d3 { animation-delay: .86s; } .d4 { animation-delay: .94s; }

  /* Hero plate uncovers itself rather than fading in. */
  .hero__plate img { animation: uncover 1.3s var(--ease-io) .5s both; }
  @keyframes uncover {
    from { clip-path: inset(0 0 100% 0); transform: scale(1.12); }
    to   { clip-path: inset(0 0 0 0);    transform: none; }
  }

  .masthead { animation: drop .7s var(--ease-out) .15s both; }
  @keyframes drop { from { transform: translateY(-100%); } to { transform: none; } }

  /* --- Cross-document view transitions --------------------------------- */

  @view-transition { navigation: auto; }

  ::view-transition-group(masthead) { animation-duration: .6s; }
  ::view-transition-old(masthead), ::view-transition-new(masthead) { animation: none; }

  ::view-transition-old(root) { animation: pg-out .4s var(--ease-io) both; }
  ::view-transition-new(root) { animation: pg-in .68s var(--ease-out) both; }

  @keyframes pg-out { to { opacity: 0; transform: translateY(-2.5rem) scale(.985); filter: blur(4px); } }
  @keyframes pg-in {
    from { clip-path: inset(0 0 100% 0); transform: translateY(2rem); }
    to   { clip-path: inset(0 0 0 0);    transform: none; }
  }

  html:active-view-transition-type(back) {
    &::view-transition-old(root) { animation: pg-out-rev .4s var(--ease-io) both; }
    &::view-transition-new(root) { animation: pg-in-rev .68s var(--ease-out) both; }
  }
  @keyframes pg-out-rev { to { opacity: 0; transform: translateY(2.5rem) scale(.985); filter: blur(4px); } }
  @keyframes pg-in-rev {
    from { clip-path: inset(100% 0 0 0); transform: translateY(-2rem); }
    to   { clip-path: inset(0 0 0 0);    transform: none; }
  }

  ::view-transition-group(svc-title) { animation-duration: .7s; animation-timing-function: var(--ease-out); }
  ::view-transition-old(svc-title), ::view-transition-new(svc-title) { height: 100%; object-fit: none; }

  /* --- Scroll-driven ---------------------------------------------------- */

  @supports (animation-timeline: view()) {

    /* Pinned horizontal cargo rail. */
    @media (min-width: 64rem) {
      .rail { view-timeline-name: --rail; view-timeline-axis: block; }
      .rail__track {
        animation: rail-slide linear both;
        animation-timeline: --rail;
        animation-range: entry 100% exit 0%;
      }
      @keyframes rail-slide {
        from { transform: translateX(2vw); }
        to   { transform: translateX(calc(-100% + 88vw)); }
      }
    }

    /* Marquee drifts continuously and speeds up with scroll. */
    .marquee__track {
      animation: drift 34s linear infinite, marq-scroll linear both;
      animation-timeline: auto, scroll(root block);
    }
    @keyframes drift { to { transform: translateX(-50%); } }
    @keyframes marq-scroll { to { translate: -22vw 0; } }

    .rise { animation: rise linear both; animation-timeline: view(); animation-range: entry 2% cover 24%; }
    @keyframes rise { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: none; } }

    /* Section headings wipe in from a clipped edge. */
    .wipe { animation: wipe linear both; animation-timeline: view(); animation-range: entry 5% cover 20%; }
    @keyframes wipe {
      from { clip-path: inset(0 0 100% 0); transform: translateY(1.5rem); }
      to   { clip-path: inset(0 0 -20% 0); transform: none; }
    }

    /* Oversized figures count up in scale as they enter. */
    .pop { animation: pop linear both; animation-timeline: view(); animation-range: entry 8% cover 30%; }
    @keyframes pop { from { opacity: 0; transform: translateY(1.5rem) scale(.9); } to { opacity: 1; transform: none; } }

    /* Plates parallax and uncover. */
    .plate img { animation: plate-par linear both; animation-timeline: view(); animation-range: cover; }

    /* Hero handoff. The backdrop drifts slower than the page and the type
       settles out, so leaving the hero reads as one movement. */
    .hero__bg img {
      animation: hero-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
    @keyframes hero-drift {
      from { transform: scale(1.08) translateY(0); }
      to   { transform: scale(1.16) translateY(6%); }
    }
    .hero__inner {
      animation: hero-settle linear both;
      animation-timeline: scroll(root block);
      animation-range: 6vh 64vh;
    }
    @keyframes hero-settle {
      from { opacity: 1; transform: none; }
      to   { opacity: 0; transform: translateY(-2.5rem); }
    }
    @keyframes plate-par { from { scale: 1.14; } to { scale: 1; } }

    .drawline { animation: draw linear both; animation-timeline: view(); animation-range: entry 8% cover 22%; transform-origin: left; }
    @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    .progress {
      position: fixed; top: 0; left: 0; height: 3px; width: 100%;
      background: var(--oxide); transform-origin: left; z-index: 60;
      animation: draw linear both; animation-timeline: scroll(root block);
    }

    /* Stagger inside spec lists and rails. */
    .stagger > * { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }

  .rail__card, .btn, .nav a { transition-timing-function: var(--ease-out); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .curtain { display: none; }
  .progress { display: none; }

  /* The rail's height exists to give the pinned track something to travel
     through. With no travel it is dead scroll, so it becomes an ordinary
     swipeable rail at its natural height. */
  .rail { height: auto; }
  .rail__pin { position: static; height: auto; overflow: visible; display: block; }
  .rail__track {
    /* width:max-content is what lets the pinned track travel under motion.
       As a scroll container it has to size to the viewport instead, or the
       document itself goes 3000px wide. */
    width: auto;
    overflow-x: auto; scroll-snap-type: x mandatory;
    /* Snap alignment lands cards on the scrollport edge and ignores padding,
       which clipped the first card. scroll-padding gives snapping the same
       inset the box already has. */
    scroll-padding-inline: var(--gutter);
    padding-bottom: 1.5rem; transform: none !important;
  }
  .rail__card { scroll-snap-align: start; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .masthead, .progress, .actions, .navtoggle, .curtain, .marquee { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; padding-top: 0; }
  .rail { height: auto; }
  .rail__track { display: block; }
}

/* ==========================================================================
   COLOUR FAMILIES
   Each content family swaps the accent. All five sit in the same value and
   saturation band so they read as one system rather than five themes.
   ========================================================================== */



/* ==========================================================================
   LAYOUT ARCHETYPES
   Each gives a page a different skeleton. Pages in the same family are
   assigned different archetypes so no two neighbours share a composition.
   ========================================================================== */

/* --- arc-poster: type carries the page, image is incidental -------------- */
.arc-poster .pagehead { padding-block: clamp(3rem, 9vw, 8rem) clamp(2rem, 5vw, 4rem); }
.arc-poster h1 { font-size: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); line-height: .84; }
.arc-poster .lede { margin-inline-start: auto; max-width: 38ch; text-align: left; }
@media (min-width: 64rem) { .arc-poster .lede { margin-inline-start: 42%; } }

/* --- arc-index: numbered directory, no imagery --------------------------- */
.arc-index .idx { border-top: 2px solid var(--ink); }
.arc-index .idx a {
  display: grid; gap: .25rem 2rem; padding-block: clamp(1.1rem, 2.2vw, 1.9rem);
  border-bottom: 1px solid var(--rule); text-decoration: none; position: relative;
  transition: padding-inline-start .45s var(--ease-out);
}
@media (min-width: 52rem) { .arc-index .idx a { grid-template-columns: 4rem 1fr 1fr auto; align-items: baseline; } }
.arc-index .idx a:hover { padding-inline-start: 1.25rem; }
.arc-index .idx a::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--oxide); transition: width .5s var(--ease-io);
}
.arc-index .idx a:hover::after { width: 100%; }
.arc-index .idx .n { color: var(--steel-soft); font-variant-numeric: tabular-nums; font-size: .8rem; font-weight: 600; letter-spacing: .12em; }
.arc-index .idx .t { font-family: var(--display); font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); line-height: 1.05; }
.arc-index .idx .d { color: var(--steel); font-size: .92rem; }

/* --- arc-editorial: narrow measure, figures break the margin ------------- */
.arc-editorial .prose { max-width: 58ch; }
@media (min-width: 70rem) {
  .arc-editorial .prose { margin-inline-start: 18vw; }
  .arc-editorial .breakout { margin-inline-start: -18vw; max-width: none; width: calc(100% + 18vw); }
  .arc-editorial .marginnote {
    float: left; width: 14vw; margin-inline-start: -17vw; margin-block: .4rem 1rem;
    font-size: .82rem; color: var(--steel); line-height: 1.45; clear: left;
    border-top: 2px solid var(--oxide); padding-top: .5rem;
  }
}

/* --- arc-compare: two columns argue with each other --------------------- */
.arc-compare .versus { display: grid; gap: 0; border-top: 2px solid var(--ink); }
@media (min-width: 56rem) { .arc-compare .versus { grid-template-columns: 1fr 1fr; } }
.arc-compare .versus > div { padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem); border-bottom: 1px solid var(--rule); }
@media (min-width: 56rem) { .arc-compare .versus > div:nth-child(odd) { border-inline-end: 1px solid var(--rule); } }
.arc-compare .versus h3 { margin-bottom: .75rem; }
.arc-compare .versus > div:hover { background: var(--paper-sunk); }

/* --- arc-lane: origin to destination, route-forward --------------------- */
.arc-lane .route { display: grid; gap: 1rem; align-items: center; border-block: 2px solid var(--ink); padding-block: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 48rem) { .arc-lane .route { grid-template-columns: 1fr auto 1fr; gap: 2rem; } }
.arc-lane .route .port { font-family: var(--display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); line-height: .95; }
.arc-lane .route .arrow { color: var(--oxide); font-size: 1.8rem; }
.arc-lane .route .meta { color: var(--steel); font-size: .85rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-top: .4rem; }

/* --- arc-map: geography and coordinates lead ---------------------------- */
.arc-map .coords { font-variant-numeric: tabular-nums; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--oxide); }
.arc-map .terminals { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.arc-map .terminals > div { display: grid; gap: .3rem 2rem; padding-block: 1.35rem; border-bottom: 1px solid var(--rule); }
@media (min-width: 48rem) { .arc-map .terminals > div { grid-template-columns: 1fr 10rem 8rem; align-items: baseline; } }
.arc-map .terminals .tn { font-family: var(--display); font-size: 1.15rem; }
.arc-map .terminals .tv { color: var(--steel); font-size: .88rem; font-variant-numeric: tabular-nums; }

/* --- arc-steps: numbered sequence, large ordinals ----------------------- */
.arc-steps ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.arc-steps ol.steps > li {
  counter-increment: s; display: grid; gap: .5rem 2rem;
  padding-block: clamp(1.5rem, 3vw, 2.6rem); border-bottom: 1px solid var(--rule);
}
@media (min-width: 52rem) { .arc-steps ol.steps > li { grid-template-columns: 7rem 1fr; } }
.arc-steps ol.steps > li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.4rem);
  line-height: .8; color: var(--rule-strong);
}
.arc-steps ol.steps > li:hover::before { color: var(--oxide); transition: color .4s var(--ease-out); }
.arc-steps ol.steps h3 { margin-bottom: .4rem; }
.arc-steps ol.steps p { color: var(--steel); margin: 0; }

/* --- arc-qa: questions dominate ----------------------------------------- */
.arc-qa .qa { border-top: 2px solid var(--ink); }
.arc-qa .qa details { border-bottom: 1px solid var(--rule); }
.arc-qa .qa summary {
  cursor: pointer; list-style: none; padding-block: clamp(1.1rem, 2.2vw, 1.7rem);
  font-family: var(--display);
  font-size: clamp(1rem, .96rem + .35vw, 1.2rem); line-height: 1.1;
  display: flex; justify-content: space-between; gap: 2rem; align-items: baseline;
}
.arc-qa .qa summary::-webkit-details-marker { display: none; }
.arc-qa .qa summary::after { content: "+"; color: var(--oxide); font-size: 1.5rem; transition: transform .4s var(--ease-out); }
.arc-qa .qa details[open] summary::after { transform: rotate(45deg); }
.arc-qa .qa details p { padding-bottom: 1.5rem; color: var(--steel); max-width: 62ch; }

/* --- arc-ticker: dense data page, tabular first ------------------------- */
.arc-ticker table { min-width: 34rem; }
.arc-ticker tbody tr:hover { background: var(--paper-sunk); }


/* --- Shared page head used by most archetypes --------------------------- */
.pagehead { padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3.5rem); }
.pagehead h1 { margin-bottom: .5em; }

/* ==========================================================================
   ADDITIONAL MOTION
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* Letters of a heading skew back to upright as the block enters. */
    .skewin { animation: skewin linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; transform-origin: left bottom; }
    @keyframes skewin { from { opacity: 0; transform: translateY(2rem) skewY(3.5deg); } to { opacity: 1; transform: none; } }

    /* Index rows slide in from the left edge in sequence. Lateral travel is
       desktop only: below that it pushed rows past the viewport edge. */
    .arc-index .idx a { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 65%; }
    @media (min-width: 68rem) {
      .arc-index .idx a { animation-name: slidein; }
      @keyframes slidein { from { opacity: 0; transform: translateX(-2.5rem); } to { opacity: 1; transform: none; } }
    }

    /* Step ordinals scale up as each row enters. */
    .arc-steps ol.steps > li { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }

    /* Route ports converge toward the arrow. */
    .arc-lane .route .port { animation: converge linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
    @keyframes converge { from { opacity: 0; letter-spacing: .12em; } to { opacity: 1; letter-spacing: -.02em; } }

    /* Comparison halves enter from opposite sides, desktop only. Stacked at
       narrow widths they have nowhere to come from, and the lateral offset
       pushed them past the edge. */
    .arc-compare .versus > div { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% cover 26%; }
    @media (min-width: 68rem) {
      .arc-compare .versus > div:nth-child(odd)  { animation-name: fromleft; }
      .arc-compare .versus > div:nth-child(even) { animation-name: fromright; }
      @keyframes fromleft  { from { opacity: 0; transform: translateX(-2rem); } to { opacity: 1; transform: none; } }
      @keyframes fromright { from { opacity: 0; transform: translateX(2rem);  } to { opacity: 1; transform: none; } }
    }

    /* Table rows wipe in. */
    .arc-ticker tbody tr { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }

    /* Terminal rows draw their rule as they arrive. */
    .arc-map .terminals > div { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}


/* ==========================================================================
   THE SPINE
   Sections were uniform full-width blocks in a vertical queue, which is what
   made every page read as a stack. Two treatments replace that, picked by what
   a section actually contains, so the markup of all 68 pages stays untouched.
   ========================================================================== */

@media (min-width: 68rem) {

  /* --- A. Sections with their own heading: the heading moves to a rail and
     holds while its body scrolls past, so consecutive sections interlock. --- */

  .section:has(> h2):not(.section--tight):not(.invert) {
    display: grid;
    grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 6rem);
    align-items: start;
  }
  .section:has(> h2):not(.section--tight):not(.invert) > h2 {
    grid-column: 1; grid-row: 1;
    position: sticky; top: 6rem;
    margin: 0;
    font-size: clamp(1.45rem, 1rem + 1.4vw, 2.35rem);
    line-height: .95;
  }
  .section:has(> h2):not(.section--tight):not(.invert) > h2::after {
    content: ""; display: block; width: 2.5rem; height: 2px;
    background: var(--oxide); margin-top: 1.1rem;
  }
  .section:has(> h2):not(.section--tight):not(.invert) > *:not(h2) { grid-column: 2; }

  /* Every second such section mirrors, so no two share a left edge. */
  .section:has(> h2):nth-of-type(even):not(.section--tight):not(.invert) {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 16rem);
  }
  .section:has(> h2):nth-of-type(even):not(.section--tight):not(.invert) > h2 {
    grid-column: 2; text-align: right;
  }
  .section:has(> h2):nth-of-type(even):not(.section--tight):not(.invert) > h2::after { margin-left: auto; }
  .section:has(> h2):nth-of-type(even):not(.section--tight):not(.invert) > *:not(h2) { grid-column: 1; }

  /* Wide content spans both columns and takes the full measure, so the
     two-column rhythm never becomes its own pattern. Spanning rather than
     using negative margins means it cannot overshoot the viewport. */
  .section:has(> h2):not(.section--tight):not(.invert) > :is(.tablewrap, .idx, .versus, .terminals, .steps),
  .section:has(> h2):nth-of-type(even):not(.section--tight):not(.invert) > :is(.tablewrap, .idx, .versus, .terminals, .steps) {
    grid-column: 1 / -1;
    max-width: none;
  }

  /* A sticky heading above one of those full-width children is a collision,
     not a rail: the child scrolls up underneath the stuck heading. Sections
     with wide content keep the two-column head and let the heading sit in
     flow, so the table or list starts below it and stays there. */
  /* Specificity note: the sticky rule above is (0,3,2); this one must carry
     the same :not() qualifiers to reach (0,4,2), or it silently loses. */
  .section:has(> h2):not(.section--tight):not(.invert):has(> :is(.tablewrap, .idx, .versus, .terminals, .steps)) > h2 {
    position: static;
  }

  /* --- B. Prose sections keep a reading measure, but the column is offset and
     its sub-headings hang into the margin rather than sitting on top of the
     text like another stacked block. --- */

  .section > .prose {
    margin-left: clamp(6rem, 14vw, 15rem);
    max-width: 60ch;
    position: relative;
  }
  body:not(.arc-editorial) .section > .prose > h2 {
    margin-left: clamp(-15rem, -14vw, -6rem);
    width: clamp(11rem, 13vw, 15rem);
    float: left;
    font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem);
    line-height: .98;
    margin-top: .35em;
    margin-bottom: 1.5rem;
    text-align: right;
    padding-right: 1.5rem;
    border-right: 2px solid var(--oxide);
  }
  body:not(.arc-editorial) .section > .prose > h2 + * { clear: none; }
  .section > .prose::after { content: ""; display: block; clear: both; }
  /* arc-editorial keeps its own margin-note gutter; give the column the
     same offset so the two systems share one left edge. */
  body.arc-editorial .section > .prose { margin-left: clamp(6rem, 14vw, 15rem); max-width: 60ch; }
}

/* Grounds alternate, but sparingly: every third section recesses rather than
   every other one, so the page does not flip back and forth. */
/* Grounds run edge to edge. Applied to a max-width container the tint stops
   at the shell and reads as a floating panel instead of a change of ground,
   so it is painted by a full-viewport pseudo-element behind the content. */
.section:nth-of-type(3n+2):not(.invert),
.invert { position: relative; isolation: isolate; }

.section:nth-of-type(3n+2):not(.invert)::before {
  content: "";
  position: absolute; inset-block: 0; left: 50%;
  width: 100vw; transform: translateX(-50%);
  background: var(--paper-sunk);
  z-index: -1;
}

/* The emphasis band keeps its hairlines, also full width. */
.invert { border-block: 0; background: var(--paper); }
.invert::before, .invert::after {
  content: "";
  position: absolute; left: 50%; width: 100vw; height: 1px;
  transform: translateX(-50%);
  background: var(--rule-strong);
  z-index: -1;
}
.invert::before { top: 0; }
.invert::after  { bottom: 0; }

/* Vertical rhythm is uneven on purpose. A metronome reads as a stack. */
.section:nth-of-type(3n)   { padding-block: clamp(4.5rem, 8vw, 9rem); }
.section:nth-of-type(3n+1) { padding-block: clamp(5.5rem, 10vw, 12rem); }
.section:nth-of-type(3n+2) { padding-block: clamp(5rem, 9vw, 10rem); }


/* ==========================================================================
   PAGE HEAD
   It was a narrow left column with half the viewport empty beside it, which
   made every interior page open on the same thin block. Split it: the title
   takes the width it needs, the lede and the action sit beside it on the
   baseline, and the eyebrow hangs in the margin.
   ========================================================================== */

@media (min-width: 68rem) {
  .pagehead {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .75fr);
    grid-template-areas: "brow  brow"
                         "title side";
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: end;
  }
  .pagehead > .label      { grid-area: brow; margin-bottom: 1.5rem; }
  .pagehead > h1          { grid-area: title; margin: 0; }
  .pagehead > .lede,
  .pagehead > .actions    { grid-column: 2; }
  .pagehead > .lede       { grid-row: 2; align-self: end; margin: 0 0 1.75rem; }
  .pagehead > .actions    { grid-row: 3; margin-top: 0; }
  .pagehead > h1          { grid-row: 2 / span 2; align-self: start; }
}



/* ==========================================================================
   FORM
   The quote request on /contact/. Composes a structured email to the desk
   that matches the direction of travel, because email is where this office
   already works. No backend required, and it degrades to a plain mailto
   when JavaScript does not run.
   ========================================================================== */

.qform { max-width: 100%; }
.qform__grid { display: grid; gap: 1.5rem 1.75rem; }
@media (min-width: 42rem) { .qform__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .qform__grid { column-gap: clamp(1.75rem, 3vw, 3rem); } }
.qform__grid > .wide { grid-column: 1 / -1; }

.field { display: grid; gap: .45rem; }
.field label { font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-2); }
.field label .req { color: var(--oxide); }
.field .hint { font-size: .8rem; color: var(--steel); }

.field input,
.field select,
.field textarea {
  font: inherit; font-size: .98rem;
  color: var(--ink); background: var(--paper);
  border: 0; border-bottom: 1px solid var(--rule-strong);
  padding: .6rem 0; width: 100%;
  border-radius: 0; appearance: none;
  transition: border-color .3s var(--ease-out);
}
.field textarea { min-height: 6.5rem; resize: vertical; line-height: 1.55; }
.field select { background-image: none; cursor: pointer; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--oxide); border-bottom-width: 2px; padding-bottom: calc(.6rem - 1px);
}
.field input:user-invalid, .field textarea:user-invalid { border-bottom-color: #A3241A; }

.qform__foot { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center; }
.qform__note { font-size: .85rem; color: var(--steel); max-width: 34ch; }

/* Direction switch: two real radios, styled as a pair of choices. */
.switch { display: flex; gap: 0; border: 1px solid var(--rule-strong); width: max-content; }
.switch label {
  padding: .6rem 1.25rem; cursor: pointer; font-size: .82rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--steel);
  transition: background .25s var(--ease-out), color .25s var(--ease-out);
}
.switch label + label { border-left: 1px solid var(--rule-strong); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch input:checked + label { background: var(--ink); color: var(--paper); }
.switch input:focus-visible + label { outline: 2px solid var(--oxide); outline-offset: 2px; }


/* ==========================================================================
   MASTHEAD OVER THE HERO
   On the homepage the bar starts clear so the photograph runs behind it, then
   takes its ground as the reader leaves the hero. Interior pages open on
   paper, so they keep the bar they always had.
   ========================================================================== */

.arc-bleed .masthead {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
/* The ground rides on its own layer so it can be absent rather than merely
   transparent. A backdrop-filter on the bar itself blurs and saturates the
   photograph underneath at every scroll position, which paints a visible band
   across the hero no matter what the background colour is doing. */
.arc-bleed .masthead::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid var(--rule);
}
.arc-bleed .masthead .wordmark { color: #F7F4EE; }
.arc-bleed .masthead .wordmark span { color: #C9C2B7; }
.arc-bleed .masthead .nav a { color: #EAE5DC; }
.arc-bleed .masthead .nav a[aria-current="page"] { color: #FFF; }
.arc-bleed .masthead .navtoggle { color: #F7F4EE; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll(root block)) {
    .arc-bleed .masthead::after {
      animation: mast-ground linear both;
      animation-timeline: scroll(root block);
      animation-range: 4vh 20vh;
    }
    @keyframes mast-ground {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .arc-bleed .masthead .wordmark,
    .arc-bleed .masthead .nav a,
    .arc-bleed .masthead .navtoggle {
      animation: mast-ink linear both;
      animation-timeline: scroll(root block);
      animation-range: 4vh 20vh;
    }
    @keyframes mast-ink {
      from { color: #F7F4EE; }
      to   { color: #0C1116; }
    }
    .arc-bleed .masthead .wordmark span {
      animation: mast-ink-soft linear both;
      animation-timeline: scroll(root block);
      animation-range: 4vh 20vh;
    }
    @keyframes mast-ink-soft {
      from { color: #C9C2B7; }
      to   { color: #4E5A64; }
    }
  }
}

/* Without scroll timelines the bar keeps a readable ground from the start
   rather than sitting clear over the photograph forever. */
@supports not (animation-timeline: scroll(root block)) {
  .arc-bleed .masthead::after { opacity: 1; }
  .arc-bleed .masthead .wordmark,
  .arc-bleed .masthead .nav a,
  .arc-bleed .masthead .navtoggle { color: var(--ink); }
  .arc-bleed .masthead .wordmark span { color: var(--steel); }
}
@media (prefers-reduced-motion: reduce) {
  .arc-bleed .masthead::after { opacity: 1; animation: none; }
  .arc-bleed .masthead .wordmark,
  .arc-bleed .masthead .nav a,
  .arc-bleed .masthead .navtoggle { color: var(--ink) !important; }
  .arc-bleed .masthead .wordmark span { color: var(--steel) !important; }
}