/* Site styles (#31 Signal). The cog is the system: oversized behind the hero, a triangle for markers,
   sections cycling paper / navy / warm. Layout wrappers (hero, intro, section, strip, bento, closing) come from src/rehype-signal.mjs. */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(/fonts/AtkinsonHyperlegibleNext-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(/fonts/AtkinsonHyperlegibleNext-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(/fonts/AtkinsonHyperlegibleNext-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --navy: oklch(27% 0.06 240); --navy-2: oklch(35% 0.07 240); --rule: oklch(36% 0.05 240);
  --orange: oklch(72% 0.19 55); --orange-ink: oklch(54% 0.16 48);
  --paper: oklch(97.5% 0.012 70); --warm: oklch(93% 0.035 62); --line: oklch(86% 0.02 70);
  --ink: oklch(24% 0.05 240); --on-navy: oklch(97% 0.012 70); --on-navy-2: oklch(83% 0.03 240); --link: oklch(90% 0.02 240);
  --tri: polygon(0 0, 100% 50%, 0 100%);
  --s0: .236rem; --s1: .382rem; --s2: .618rem; --s3: 1rem; --s4: 1.618rem; --s5: 2.618rem; --s6: 4.236rem; --s7: 6.854rem;
  --gutter: max(var(--s3), calc((100vw - 76rem) / 2));
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif; font-size: 1.1875rem; line-height: 1.68; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s3); top: var(--s3); z-index: 30; padding: var(--s2) var(--s4); border-radius: 999px; background: var(--orange); color: var(--navy); font-weight: 600; text-decoration: none; translate: 0 -200%; }
.skip:focus-visible { translate: 0 0; outline-color: var(--on-navy); }
main { overflow-x: clip; }
/* Content outside the build-time wrappers (the editor preview renders the body flat) keeps the gutter. */
main > :not(.hero, .intro, section, .closing) { margin-inline: var(--gutter); }
h1, .hero-title { font-size: clamp(2.75rem, 1.2rem + 5.6vw, 6.854rem); line-height: .98; font-weight: 600; letter-spacing: -.035em; color: var(--navy); max-width: 14ch; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); line-height: 1.05; font-weight: 600; letter-spacing: -.025em; color: var(--navy); margin: 0 0 var(--s4); max-width: 18ch; text-wrap: balance; }
h3 { font-size: 1.375rem; color: var(--navy); font-weight: 600; margin: var(--s5) 0 var(--s2); }
p, ul { margin: 0 0 var(--s4); max-width: 62ch; }
main a { color: inherit; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* Header: sticky; slims and gains a shadow over the first 8rem of scroll. */
header { position: sticky; top: 0; z-index: 20; background: var(--navy); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); padding: var(--s4) var(--gutter); }
.logo img { height: 2.1rem; width: auto; }
header nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); }
header nav a { position: relative; font-size: 1rem; font-weight: 500; color: var(--link); text-decoration: none; padding: var(--s1) var(--s2); border-radius: var(--s1);
  background: linear-gradient(var(--orange), var(--orange)) no-repeat var(--s2) calc(100% - .2em) / 0 2px; }
header nav a:hover { color: var(--on-navy); background-size: calc(100% - 2 * var(--s2)) 2px; }
header nav a[aria-current] { color: var(--on-navy); }
header nav a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: -.45rem; translate: -50% 0; border-inline: .35rem solid transparent; border-bottom: .45rem solid var(--orange); }
.divider { align-self: stretch; width: 1px; margin-block: var(--s1); background: oklch(48% 0.05 240); }
.menu summary { display: none; align-items: center; gap: var(--s2); list-style: none; cursor: pointer; color: var(--on-navy); font-weight: 600; padding: var(--s1) var(--s3); border: 1px solid oklch(45% 0.05 240); border-radius: 999px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: .6em; height: .6em; background: var(--orange); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.menu[open] summary::after { rotate: 180deg; }
.menu::details-content { content-visibility: visible; }
/* Without ::details-content the closed menu hides the nav, so Menu shows at every width. */
@supports not selector(::details-content) { .menu summary { display: inline-flex; } }
@media (prefers-reduced-motion: no-preference) {
  header nav a { transition: background-size .3s cubic-bezier(.22, 1, .36, 1), color .2s; }
  @supports (animation-timeline: scroll()) {
    header { animation: slim linear both; animation-timeline: scroll(root); animation-range: 0 8rem; }
    @keyframes slim { to { padding-block: var(--s2); box-shadow: 0 1px 0 oklch(40% 0.05 240), 0 var(--s2) var(--s4) oklch(20% 0.05 240 / .35); } }
  }
}
@media (max-width: 56rem) {
  .menu summary { display: inline-flex; }
  .menu:not([open]) nav { display: none; }
  .menu[open] nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--navy); flex-direction: column; align-items: stretch; gap: 0; padding: var(--s2) var(--s3) var(--s4); border-top: 1px solid var(--rule); }
  .menu[open] nav a { padding: var(--s2) var(--s3); font-size: 1.125rem; }
  header nav a[aria-current]::after { left: 0; top: 50%; bottom: auto; translate: 0 -50%; border-inline: 0; border-block: .35rem solid transparent; border-left: .45rem solid var(--orange); }
  .divider { width: 100%; height: 1px; margin: var(--s2) 0; }
}

/* Hero: title, rule, summary on navy; the image beside; a low-contrast cog behind. */
.hero { position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s6); align-items: end; background: var(--navy); color: var(--on-navy); padding: var(--s7) var(--gutter) var(--s6); min-height: min(78vh, 46rem); }
.hero::before { content: ""; position: absolute; z-index: -1; width: min(70vw, 52rem); aspect-ratio: 1; right: -14vw; top: 50%; translate: 0 -50%; background: oklch(33% 0.07 240); mask: url(/cog.svg) center / contain no-repeat; }
.hero > * { grid-column: 1; margin: 0; }
.hero-title { color: var(--on-navy); }
.hero-sub { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.75rem); line-height: 1.4; color: var(--on-navy-2); max-width: 30ch; margin-top: var(--s5); padding-top: var(--s4); border-top: 3px solid var(--orange); }
.hero > p:has(img) { grid-column: 2; grid-row: 1 / span 3; align-self: stretch; border-radius: 0 var(--s5) 0 var(--s5); overflow: hidden; }
.hero > p:has(img) img { width: 100%; height: 100%; max-height: 34rem; object-fit: cover; }
.hero:not(:has(img)) { grid-template-columns: minmax(0, 1fr); min-height: 0; }

/* Intro statement: the text between the hero and the first section, set large under a short orange dash. */
.intro { padding: var(--s7) var(--gutter); }
.intro > * { margin-left: calc(var(--s6) + var(--s5)); }
.statement { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.3; font-weight: 500; letter-spacing: -.015em; color: var(--navy); max-width: 32ch; text-wrap: pretty; }
.statement::before { content: ""; display: block; width: var(--s5); height: 4px; border-radius: 4px; margin-bottom: var(--s4); background: var(--orange); }

/* Sections: full width, cycling paper / navy / warm as <main>'s children (hero first, so an intro takes the first paper band), each opened by an orange triangle. */
section { padding: var(--s7) var(--gutter); display: grid; grid-template-columns: 4.236rem minmax(0, 44rem) 1fr; column-gap: var(--s5); }
section > * { grid-column: 2; }
section::before { content: ""; grid-column: 1; grid-row: 1; align-self: start; margin-top: .55em; width: 1.25rem; height: 1.45rem; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); background: var(--orange); clip-path: var(--tri); }
section:nth-child(3n) { background: var(--navy); color: var(--on-navy); }
section:nth-child(3n) :is(h2, h3, a) { color: var(--on-navy); }
section:nth-child(3n) li { border-color: oklch(40% 0.05 240); }
section:nth-child(3n+1) { background: var(--warm); }
section > p:has(> img), .intro > p:has(> img) { grid-column: 2 / -1; margin-block: var(--s5); max-width: none; border-radius: var(--s5) 0 var(--s5) 0; overflow: hidden; }
:is(section, .intro) > p:has(> img) img { width: 100%; max-height: 32rem; object-fit: cover; }

/* Lists: orange triangle markers on hairlines. */
main ul { list-style: none; padding: 0; }
main li { position: relative; padding: var(--s3) 0 var(--s3) var(--s5); border-top: 1px solid var(--line); margin: 0; }
main li::before { content: ""; position: absolute; left: 0; top: calc(var(--s3) + .45em); width: .7em; height: .8em; background: var(--orange); clip-path: var(--tri); }

/* Numbered parts: each its own full-width strip, the number large in the left column. */
section:has(.strip) { padding-bottom: 0; }
section:has(.strip)::before { content: none; }
.strip { position: relative; display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; padding-block: var(--s6); background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); }
.strip:nth-of-type(even) { background: var(--warm); box-shadow: 0 0 0 100vmax var(--warm); }
.strip > * { grid-column: 2; }
.strip > :last-child { margin-bottom: 0; }
.strip > h3 { margin: 0 0 var(--s3); font-size: 1.618rem; line-height: 1.2; }
.strip .num { position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; font-size: clamp(3rem, 2rem + 3vw, 5.5rem); line-height: .85; letter-spacing: -.04em; color: var(--orange-ink); font-variant-numeric: tabular-nums; }
.strip > p { position: relative; padding-left: var(--s5); }
.strip > p::before { content: ""; position: absolute; left: 0; top: .45em; width: .7em; height: .8em; background: var(--orange); clip-path: var(--tri); }

/* Bento: image, caption and body tiles alternating wide and narrow; narrow photos fill the row. */
section:has(.bento) { grid-template-columns: 4.236rem minmax(0, 1fr); }
section > .bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.tile { display: flex; flex-direction: column; border-radius: var(--s4); overflow: hidden; background: var(--navy-2); color: var(--on-navy); }
.tile:nth-child(4n+1), .tile:nth-child(4n+4) { grid-column: span 4; }
.tile:nth-child(4n+2) { grid-column: span 2; background: var(--orange); color: var(--navy); }
.tile:nth-child(4n+3) { grid-column: span 2; background: var(--warm); color: var(--ink); }
.tile > p { margin: 0; padding: 0 var(--s4); max-width: 46ch; }
.tile > p:has(img) { padding: 0; max-width: none; }
.tile > p:has(img) img { width: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.tile:is(:nth-child(4n+2), :nth-child(4n+3)) > p:has(img) { flex: 1 1 auto; position: relative; min-height: 12rem; }
.tile:is(:nth-child(4n+2), :nth-child(4n+3)) > p:has(img) img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.tile > p:nth-child(2) { padding-top: var(--s4); font-size: 1.375rem; line-height: 1.2; letter-spacing: -.01em; }
.tile > p:last-child { padding-block: var(--s2) var(--s4); font-size: 1rem; line-height: 1.6; }
.tile:is(:nth-child(4n+1), :nth-child(4n+4)) > p:last-child { color: var(--on-navy-2); }

/* Closing band: a standalone final statement on full-bleed orange. */
.closing { background: var(--orange); color: var(--navy); padding: var(--s7) var(--gutter); }
.closing p { margin: 0; max-width: 22ch; font-size: clamp(2rem, 1.1rem + 3.6vw, 4.236rem); line-height: 1.04; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
.closing.long p { max-width: 32ch; font-size: clamp(1.5rem, 1rem + 2vw, 2.618rem); line-height: 1.15; letter-spacing: -.02em; }
.closing p + p { margin-top: var(--s4); font-size: 1.25rem; font-weight: 500; letter-spacing: 0; }

/* Footer: contact leads, page links in hairline-ruled columns, the cog on stacked orange bands. */
footer { background: var(--navy); color: var(--on-navy-2); border-top: 4px solid var(--orange); }
.f-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); padding-inline: var(--gutter); border-bottom: 1px solid var(--rule); }
.f-contact { padding: var(--s6) var(--s5) var(--s6) 0; }
footer ul { list-style: none; margin: 0; padding: var(--s6) var(--s5); border-left: 1px solid var(--rule); display: grid; align-content: start; gap: var(--s2); }
footer a { color: var(--link); text-decoration: none; font-size: 1rem; }
footer a:hover { color: var(--on-navy); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .25em; }
footer .contact { margin: 0; font-size: clamp(1.375rem, 1rem + 1.4vw, 2.25rem); line-height: 1.25; font-weight: 500; }
footer .contact a { font-size: inherit; color: var(--on-navy); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .2em; }
footer .contact .arrow { display: inline-block; width: .55em; height: .55em; margin-left: .3em; background: var(--orange); clip-path: var(--tri); }
footer .contact a:hover .arrow { translate: .2em 0; }
footer .li { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.li-mark { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.li-mark path { fill: var(--navy); }
.horizon { padding-top: var(--s7); }
.horizon::after { content: ""; display: block; height: calc(var(--s5) * 2.618); background: linear-gradient(to bottom, var(--orange) 0 33.4%, oklch(63% 0.17 50) 33.4% 66.7%, var(--orange-ink) 66.7% 100%); }
.cog { display: block; margin: 0 auto var(--s6); width: min(9rem, 30vw); aspect-ratio: 6620 / 7115; background: var(--orange); mask: url(/cog.svg) center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  footer .contact .arrow { transition: translate .3s cubic-bezier(.22, 1, .36, 1); }
  @supports (animation-timeline: scroll()) {
    .cog { animation: cog-turn linear both; animation-timeline: scroll(root); animation-range: calc(100% - 32rem) 100%; }
    @keyframes cog-turn { from { rotate: -360deg; } to { rotate: 0deg; } }
  }
}

/* Narrow screens: one column throughout. */
@media (max-width: 52rem) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: var(--s6); row-gap: var(--s5); }
  .hero > p:has(img) { grid-column: 1; grid-row: auto; }
  .hero::before { width: 120vw; right: -60vw; }
  .intro > * { margin-left: 0; }
  section, section:has(.bento) { grid-template-columns: minmax(0, 1fr); padding-block: var(--s6); }
  section > *, section > p:has(> img) { grid-column: 1; }
  section::before { grid-row: auto; margin: 0 0 var(--s3); width: 1rem; height: 1.15rem; }
  .strip { grid-template-columns: minmax(0, 1fr); }
  .strip > * { grid-column: 1; }
  .strip .num { position: static; display: block; margin-bottom: var(--s3); font-size: 2.618rem; }
  section > .bento { grid-template-columns: minmax(0, 1fr); }
  .tile:nth-child(n) { grid-column: auto; }
  .tile:nth-child(n) > p:has(img) { flex: none; position: static; min-height: 0; }
  .tile:nth-child(n) > p:has(img) img { position: static; aspect-ratio: 16 / 9; height: auto; }
}
@media (max-width: 56rem) {
  .f-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .f-contact { grid-column: 1 / -1; padding: var(--s6) 0 var(--s5); }
  footer ul { padding: var(--s5) var(--s4) var(--s6); border-left: 0; border-top: 1px solid var(--rule); }
  footer ul:first-of-type { padding-left: 0; }
  footer ul + ul { border-left: 1px solid var(--rule); }
}