/* Pitch Competition Standards Council. Zero JavaScript.
   Institutional, document-forward: serif display type, navy chrome, light body,
   hairline rules instead of alternating marketing bands. */

:root {
  --ink: #16181B;
  --ink-soft: #4C5157;
  --muted: #6A6F76;
  --canvas: #FBFAF8;
  --panel: #FFFFFF;
  --panel-2: #F5F3EE;
  --hairline: #E2DDD3;
  --hairline-2: #CFC9BC;

  --navy: #022545;
  --navy-2: #073861;
  --gold: #C49D2A;
  --accent: #C49D2A;
  --accent-solid: #022545;
  --accent-soft: rgba(196, 157, 42, .16);

  --on-navy: #F4F2ED;
  --on-navy-soft: rgba(244, 242, 237, .72);
  --on-navy-line: rgba(244, 242, 237, .18);

  --maxw: 1100px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }

/* Serif display type is the single biggest "institution, not startup" signal. */
h1, h2, h3, .band-title, .hero h1 { font-family: var(--serif); font-weight: 700; letter-spacing: -.005em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.band { padding: 68px 0; border-top: 1px solid var(--hairline); }
.band--panel { background: var(--panel); }
.band--navy { background: var(--navy); color: var(--on-navy); border-top: 0; }
@media (max-width: 640px) { .band { padding: 46px 0; } .wrap { padding: 0 20px; } }

.eyebrow { margin: 0 0 14px; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.band--navy .eyebrow { color: var(--gold); }
.band-title { margin: 0 0 14px; font-size: clamp(24px, 3.2vw, 31px); line-height: 1.2; }
.band-lede { margin: 0 0 32px; font-size: 16.5px; color: var(--ink-soft); max-width: 66ch; }
/* Legal pages (privacy, terms): a readable prose measure with clear section breaks. */
.legalpage { max-width: 72ch; }
.legalpage h2 { margin: 34px 0 10px; font-size: 20px; line-height: 1.3; }
.legalpage h2:first-child { margin-top: 0; }
.legalpage p { margin: 0 0 15px; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
.legalpage p strong { color: var(--ink); }
.legalpage a { color: var(--navy); text-decoration: underline; }
.band--navy .band-lede { color: var(--on-navy-soft); }

/* The nav is sticky at 75px, so an anchor jump would land the target underneath it.
   scroll-margin-top parks each anchor clear of the bar, with room to breathe. */
:target { scroll-margin-top: 80px; }
.band[id], .pagehead[id], section[id], header[id] { scroll-margin-top: 80px; }
@media (max-width: 620px) {
  :target,
  .band[id], .pagehead[id], section[id], header[id] { scroll-margin-top: 60px; }
}

/* ── nav ── */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(251, 250, 248, .94); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--hairline-2); }
.nav__in { display: flex; align-items: center; gap: 18px; padding: 14px 28px; max-width: var(--maxw); margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand__logo { height: 38px; width: auto; display: block; }
.brand__glyph { height: 30px; width: auto; display: none; }
.nav__links { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav__links a { text-decoration: none; color: var(--ink-soft); font-size: 14px; font-weight: 600; white-space: nowrap; }
.nav__links a:hover { color: var(--navy); }
/* ".nav__links a" outranks a bare ".btn", so the button has to win its color back explicitly */
.nav__links a.btn, .nav__links a.btn:hover { color: #fff; }
/* Shown only to a signed-in editor, injected server side by the middleware. */
.nav__links a.nav__edit {
  order: 99; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #6E5510; background: var(--accent-soft); border: 1px solid rgba(196, 157, 42, .5);
  padding: 7px 12px; border-radius: 5px;
}
.nav__links a.nav__edit:hover { color: #4E3C0B; border-color: var(--gold); }
@media (max-width: 760px) { .nav__links a.nav__edit { display: inline-block; } }

.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 14px;
  padding: 11px 18px; border-radius: 5px; background: var(--navy); color: #fff; white-space: nowrap;
  border: 1px solid var(--navy);
}
.btn:hover { background: var(--navy-2); border-color: var(--navy-2); }
/* a navy button on a navy surface disappears: the primary inverts to gold there */
.hero .btn:not(.btn--ghost), .band--navy .btn:not(.btn--ghost) { background: var(--gold); border-color: var(--gold); color: #16233A; }
.hero .btn:not(.btn--ghost):hover, .band--navy .btn:not(.btn--ghost):hover { background: #D4AC3A; border-color: #D4AC3A; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hairline-2); }
/* the hero is navy but is not a .band--navy, so it has to be named here too */
.band--navy .btn--ghost, .hero .btn--ghost { color: var(--on-navy); border-color: var(--on-navy-line); background: transparent; }
.band--navy .btn--ghost:hover, .hero .btn--ghost:hover { border-color: var(--gold); color: var(--gold); background: transparent; }
.btn--lg { font-size: 15px; padding: 13px 22px; }
@media (max-width: 760px) {
  .nav__links a:not(.btn) { display: none; }
  .nav__in { padding: 11px 20px; gap: 12px; }
}
/* the full lockup is wide: below this the mark carries the brand on its own */
@media (max-width: 620px) {
  .brand__logo { display: none; }
  .brand__glyph { display: block; }
}

/* ── hero ── */
/* Background is built from the brand, not a stock photo: a deep navy wash, a faint
   engraved rule texture, and the mark itself ghosted off the right edge. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--on-navy); padding: 74px 0 42px;
  background:
    radial-gradient(1100px 520px at 78% 12%, #0A3A63 0%, rgba(10, 58, 99, 0) 62%),
    linear-gradient(178deg, #032A50 0%, var(--navy) 58%, #011C36 100%);
}
.hero::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(244, 242, 237, .05) 0 1px, transparent 1px 26px);
}
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -170px; top: 58%; transform: translateY(-50%);
  width: 660px; height: 660px; opacity: .05;
  background: url("../img/mark-reverse.png") no-repeat center / contain;
}
@media (max-width: 900px) { .hero::after { right: -180px; width: 460px; height: 460px; opacity: .05; } }
/* Two explicit rows: the eyebrow owns row 1 on its own, so the status panel in row 2
   starts level with the headline rather than with the eyebrow above it. */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; column-gap: 46px; row-gap: 0; align-items: start; }
.hero__kicker { grid-column: 1; grid-row: 1; }
.hero__body { grid-column: 1; grid-row: 2; min-width: 0; }
.status { grid-column: 2; grid-row: 2; }
.hero__kicker { margin: 0 0 18px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.hero h1 { margin: 0 0 20px; font-size: clamp(31px, 4.4vw, 45px); line-height: 1.14; max-width: 19ch; }
.hero__lede { margin: 0 0 28px; font-size: 17px; color: var(--on-navy-soft); max-width: 58ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; row-gap: 34px; }
  .hero__kicker, .hero__body, .status { grid-column: 1; grid-row: auto; }
  .hero__kicker { margin-bottom: 0; }
}
@media (max-width: 640px) { .hero { padding: 52px 0 34px; } }

/* document status panel: the furniture that makes a document look like a document of record */
.status { border: 1px solid var(--on-navy-line); border-radius: 6px; background: rgba(244, 242, 237, .045); }
.status__head {
  margin: 0; padding: 13px 18px; border-bottom: 1px solid var(--on-navy-line); font-family: var(--sans);
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.status dl { margin: 0; padding: 6px 18px 14px; }
.status .row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(244, 242, 237, .10); font-size: 13.5px; }
.status .row:last-child { border-bottom: 0; }
.status dt { color: var(--on-navy-soft); }
.status dd { margin: 0; font-weight: 700; text-align: right; }
.status dd.is-live { color: var(--gold); }

/* ── institution bar, directly under the hero ── */
.marks { background: var(--panel); border-bottom: 1px solid var(--hairline); padding: 26px 0 28px; }
.marks__label {
  margin: 0 0 20px; text-align: center; font-family: var(--sans);
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.marks__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 0; }
.mark { flex: 1 1 240px; max-width: 320px; padding: 4px 28px; text-align: center; border-left: 1px solid var(--hairline); }
.mark:first-child { border-left: 0; }
/* Drop a file into assets/img/institutions/ and uncomment the <img> in the markup.
   Logos normalize to one optical height; .mark__logo--mono renders them single-color
   navy, which most university brand guides permit where full color does not fit. */
.mark__logo { display: block; height: 46px; width: auto; max-width: 200px; margin: 0 auto 12px; object-fit: contain; }
.mark__logo--mono { filter: grayscale(1) brightness(0) saturate(100%) invert(9%) sepia(52%) saturate(2494%) hue-rotate(190deg) brightness(96%) contrast(101%); }
.mark:has(.mark__logo) .mark__org { font-size: 14px; font-weight: 600; }
.mark:has(.mark__logo) .mark__unit { font-size: 11.5px; }
.mark__org { display: block; font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.25; }
.mark__unit { display: block; margin-top: 5px; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.marks__note { margin: 20px 0 0; text-align: center; font-size: 11.5px; color: var(--muted); }
@media (max-width: 720px) {
  .marks__row { gap: 22px; }
  .mark { flex: 1 1 100%; max-width: none; border-left: 0; padding: 0 12px; }
}

/* Split section header: title left, lede right. Fixes the dead right half that made
   every section look unfinished, and stops five sections opening identically. */
.band-head { margin-bottom: 34px; }
.band-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: start; }
.band-head--split .band-title { margin: 0; }
.band-head--split .band-lede { margin: 0; max-width: none; padding-top: 7px; }
@media (max-width: 820px) { .band-head--split { grid-template-columns: 1fr; gap: 14px; } }

/* ── figures band: what the standard actually contains ── */
.figures { background: var(--navy); color: var(--on-navy); border-top: 1px solid rgba(244, 242, 237, .14); padding: 30px 0 42px; }
.figures__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.figure-stat { border-left: 2px solid rgba(196, 157, 42, .5); padding-left: 16px; }
.figure-stat b { display: block; font-family: var(--serif); font-size: 34px; font-weight: 700; line-height: 1; color: #fff; }
.figure-stat span { display: block; margin-top: 7px; font-size: 13.5px; color: var(--on-navy-soft); }
@media (max-width: 820px) { .figures__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }

/* ── explore band: the rest of the site, as real destinations ── */
.explore { background: var(--panel-2); }
.explore__rows { border-top: 1px solid var(--hairline-2); }
.explore__row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) 24px; gap: 26px; align-items: baseline;
  padding: 22px 4px; border-bottom: 1px solid var(--hairline-2); text-decoration: none; color: inherit;
}
.explore__row:hover { background: var(--panel); }
.explore__row h3 { margin: 0; font-size: 19px; }
.explore__row p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.explore__row span { justify-self: end; color: var(--muted); font-weight: 800; }
.explore__row:hover span { color: var(--accent-solid); }
@media (max-width: 700px) {
  .explore__row { grid-template-columns: minmax(0, 1fr) 20px; gap: 6px 14px; }
  .explore__row h3 { grid-column: 1; }
  .explore__row p { grid-column: 1; }
  .explore__row span { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* ── page masthead for subpages: they were opening cold, straight into a light band ── */
.pagehead {
  position: relative; overflow: hidden; color: var(--on-navy); padding: 54px 0 58px;
  background: linear-gradient(178deg, #032A50 0%, var(--navy) 60%, #011C36 100%);
}
.pagehead::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: repeating-linear-gradient(115deg, rgba(244, 242, 237, .05) 0 1px, transparent 1px 26px);
}
.pagehead .wrap { position: relative; z-index: 1; }
.pagehead .eyebrow { color: var(--gold); }
.pagehead h1 { margin: 0 0 14px; font-size: clamp(28px, 3.8vw, 40px); line-height: 1.14; max-width: 20ch; }
.pagehead__lede { margin: 0; font-size: 16.5px; color: var(--on-navy-soft); max-width: 64ch; }
@media (max-width: 640px) { .pagehead { padding: 40px 0 44px; } }

/* ── card grids ── */
.grid { display: grid; gap: 20px; }
/* grid--2 was used in the markup long before it was written: seals.html asks for two
   columns and, with no rule, got four full-width rows. */
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 8px; padding: 24px; }
.band--panel .card { background: var(--canvas); }
.card h3 { margin: 0 0 10px; font-size: 17px; line-height: 1.3; }
.card p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.card__n {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 4px;
  background: var(--navy); color: #fff; font-family: var(--sans); font-weight: 800; font-size: 13px; margin-bottom: 14px;
}

/* The fourth gap spans the whole grid. It is the one the other three do not imply, it is the
   claim that separates this standard from the field, and at one-third width the copy would not fit.
   Selectors are doubled (.card.card--wide) on purpose: .card h3 and .card p carry the same
   specificity, so a single-class override would depend on source order alone. */
.card--wide { grid-column: 1 / -1; }
/* Gutter 70px = 24px right padding + 1px border + the grid's 20px gap + 1px border + 24px left
   padding. Solve it for n columns at any container width and the borders and paddings cancel to
   exactly 70 every time, so these text columns land under the ones above at every viewport size.
   Count the 1px borders: at 68 the third column sits 1.3px short, which is visible on a hairline. */
.card.card--wide {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 70px; align-items: start; padding: 24px;
}
.card.card--wide h3 { font-size: 19px; margin: 0 0 14px; }
.card__quote { margin: 0 0 18px; padding-left: 15px; border-left: 3px solid var(--gold); max-width: 52ch; }
.card.card--wide .card__quote p {
  margin: 0 0 8px; font-family: var(--serif); font-size: 16.5px; line-height: 1.38;
  font-style: italic; color: var(--ink);
}
.card__quote cite {
  font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.card__more {
  display: inline-block; font-size: 13px; font-weight: 700; color: var(--navy);
  text-decoration: none; border-bottom: 1px solid var(--hairline-2); padding-bottom: 2px;
}
.card__more:hover { border-bottom-color: var(--navy); }
/* Two links in a 285px column: stacked and left-aligned, so neither underline runs the
   full column width and they never sit on one line and wrap into each other. */
.card__links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
/* The grid above goes 2-up at 900 and 1-up at 620; the card follows it so the columns stay aligned,
   and the heading block takes the full width rather than leaving a short third column stranded. */
@media (max-width: 900px) {
  .card.card--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .card.card--wide .card__head { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .card.card--wide { grid-template-columns: 1fr; row-gap: 14px; }
}

/* ── reference implementation panel ── */
.impl { margin: 0; }
.impl__head { display: none; }
.impl__head h3 { margin: 0 0 10px; font-size: 20px; }
.impl__head p { margin: 0; font-size: 14.5px; color: var(--ink-soft); max-width: 76ch; }
.impl__grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hairline); }
.impl__item { padding: 24px 30px 26px 0; border-bottom: 1px solid var(--hairline); }
.impl__item:nth-child(n+3) { padding-bottom: 4px; border-bottom: 0; }
.impl__item:nth-child(even) { padding-left: 30px; border-left: 1px solid var(--hairline); }
.impl__k {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 3px;
  background: var(--accent-soft); color: #6E5510; font-family: var(--sans); font-weight: 800; font-size: 12px; margin-bottom: 12px;
}
.impl__item h4 { margin: 0 0 8px; font-family: var(--serif); font-size: 16.5px; font-weight: 700; }
.impl__item p { margin: 0 0 12px; font-size: 14px; color: var(--ink-soft); }
.impl__tie { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.impl__tie b { color: var(--navy); font-weight: 800; }
.impl__foot { display: none; }
@media (max-width: 760px) {
  .impl__grid { grid-template-columns: 1fr; }
  .impl__item { padding: 22px 0; border-left: 0 !important; border-bottom: 1px solid var(--hairline); }
  .impl__item:last-child { border-bottom: 0; }
}

/* ── card icons ── */
.card__icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 6px;
  background: var(--accent-soft); color: var(--navy); margin-bottom: 16px;
}
.card__icon svg { width: 26px; height: 26px; display: block; }

/* ── the standard ── */
/* The eyebrow owns row 1 alone so the panel beside it starts level with the HEADLINE.
   Never top-align a box against an eyebrow when the box is shorter than the column beside it. */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 40px; row-gap: 0; align-items: start; }
.feature > .eyebrow { grid-column: 1; grid-row: 1; }
.feature__body { grid-column: 1; grid-row: 2; min-width: 0; }
.feature > .contents { grid-column: 2; grid-row: 2; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; row-gap: 28px; }
  .feature > .eyebrow, .feature__body, .feature > .contents { grid-column: 1; grid-row: auto; }
  .feature > .eyebrow { margin-bottom: 0; }
}
.contents { background: var(--panel); border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; }
.contents__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--hairline); }
.contents__row:last-child { border-bottom: 0; }
.contents__row:hover { background: var(--panel-2); }
.contents__k { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 3px; }
.contents__t { font-weight: 650; font-size: 15px; }
.contents__arrow { color: var(--muted); font-weight: 700; }
.note { margin: 20px 0 0; font-size: 14px; color: var(--muted); max-width: 62ch; }

/* citation block */
.cite {
  margin-top: 26px; background: var(--panel); border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 18px 22px;
}
.cite__label { margin: 0 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cite__text { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--ink); }

/* ── numbered process ── */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding: 0 0 26px 54px; counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 4px; background: var(--navy); color: #fff;
  font-family: var(--sans); font-weight: 800; font-size: 13px; display: grid; place-items: center;
}
.steps li::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 1px; background: var(--hairline-2); }
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h3 { margin: 3px 0 6px; font-size: 17px; }
.steps p { margin: 0; font-size: 14.5px; color: var(--ink-soft); max-width: 64ch; }

/* ── limits: what the council does not do ── */
.limits { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.limits li { padding: 18px 0; border-bottom: 1px solid var(--hairline); display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.limits li::before { content: "\00D7"; color: var(--gold); font-weight: 800; font-size: 18px; line-height: 1.35; }
.limits strong { display: block; font-size: 15px; margin-bottom: 3px; }
.limits span { font-size: 14.5px; color: var(--ink-soft); }
.limits span b { color: var(--ink); font-weight: 800; }
.limits span a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--hairline-2); }
.limits span a:hover { text-decoration-color: var(--gold); }

/* ── product screens ── */
.shots { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; border-top: 1px solid var(--hairline); }
@media (max-width: 760px) { .shots { grid-template-columns: 1fr; } }
.shot { margin: 0; display: flex; flex-direction: column; }
/* Every box the same size regardless of the screenshot's own aspect ratio.
   The image is taken out of flow: in normal flow a tall screenshot's min-content
   height overrides aspect-ratio and the box grows to fit it. */
.shot__frame {
  position: relative; flex: 0 0 auto; aspect-ratio: 4 / 3;
  background: var(--panel-2); border: 1px solid var(--hairline-2); border-radius: 8px;
}
.band--panel .shot__frame { background: var(--canvas); }
.shot__frame img {
  position: absolute; inset: 18px; margin: auto; display: block;
  max-width: calc(100% - 36px); max-height: calc(100% - 36px); width: auto; height: auto;
  border-radius: 3px; box-shadow: 0 10px 26px -12px rgba(2, 37, 69, .45);
}

.shot figcaption { margin-top: 11px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.shot figcaption b { color: var(--ink); font-weight: 700; }

/* ── governance ── */
.leader { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 26px; align-items: start;
          background: var(--panel); border: 1px solid var(--hairline); border-radius: 8px; padding: 26px; margin-bottom: 22px; }
.leader__photo { width: 100%; height: auto; border-radius: 6px; display: block; }
.leader__role { margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.leader h3 { margin: 0 0 4px; font-size: 22px; }
.leader__sub { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.leader p.leader__bio { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-soft); max-width: 72ch; }
.leader__facts { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
.leader__facts li { font-size: 13.5px; color: var(--ink-soft); padding-left: 15px; position: relative; }
.leader__facts li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 1px; background: var(--gold); }
@media (max-width: 720px) {
  .leader { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .leader__photo { max-width: 150px; }
  .leader__facts { grid-template-columns: 1fr; }
}
.entity { margin: 0 0 28px; font-size: 13.5px; color: var(--ink-soft); }
.entity span {
  display: inline-block; margin-right: 12px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.disclosure { background: var(--panel-2); border: 1px solid var(--hairline-2); border-radius: 8px; padding: 22px 24px; margin-bottom: 34px; }
.disclosure h3 { margin: 0 0 8px; font-size: 17px; }
.disclosure p { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-soft); max-width: 74ch; }
.disclosure p:last-child { margin-bottom: 0; }

.seat { background: var(--panel); border: 1px solid var(--hairline); border-radius: 8px; padding: 22px; }
.seat__role { margin: 0 0 7px; font-size: 16px; }
.seat__desc { margin: 0 0 15px; font-size: 14px; color: var(--ink-soft); }
.tag { display: inline-block; font-family: var(--sans); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 3px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--hairline-2); }
.tag--open { background: var(--accent-soft); color: #6E5510; border-color: rgba(196, 157, 42, .45); }
.tag--pending { background: rgba(2, 37, 69, .07); color: var(--navy); border-color: rgba(2, 37, 69, .22); }

/* ── definition list ── */
.deflist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline); }
.deflist li { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.deflist strong { font-size: 15px; }
.deflist span { font-size: 14.5px; color: var(--ink-soft); }
@media (max-width: 640px) { .deflist li { grid-template-columns: 1fr; gap: 5px; } }

/* ── contact routes ── */
.routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 30px; }
@media (max-width: 820px) { .routes { grid-template-columns: 1fr; } }
.route { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--hairline); border-radius: 8px; padding: 22px; text-decoration: none; color: inherit; }
.route:hover { border-color: var(--hairline-2); background: var(--panel-2); }
.route h3 { margin: 0 0 8px; font-size: 17px; }
.route p { margin: 0 0 16px; font-size: 14px; color: var(--ink-soft); }
.route span { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--navy); }
.route span::after { content: " \2192"; }
.contact-line { margin: 0; font-size: 15px; color: var(--ink-soft); }
.contact-line a { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline-2); }
.contact-line a:hover { text-decoration-color: var(--gold); }

/* ── The contact form ──
   The three route cards are buttons now, not mailto links: a mailto does nothing at all in
   a browser with no mail handler set, which is how Michael's Chrome is configured, and the
   href published the council's address to every scraper on eight pages. Each card selects a
   topic and hands the reader to the form below it. */
.route { width: 100%; text-align: left; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.route:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.route[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }

.cform { margin: 0; }
.cform__intro { margin: 0 0 18px; font-size: 15px; color: var(--ink-soft); }
.cform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
@media (max-width: 700px) { .cform__grid { grid-template-columns: 1fr; } }
.cfield--wide { grid-column: 1 / -1; }
.cfield { display: flex; flex-direction: column; gap: 7px; }
.cfield > span { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.cfield > span em { font-style: normal; font-weight: 400; color: var(--ink-soft); }
/* 16px is the floor on iOS: anything smaller makes Safari zoom the page on focus. */
.cfield input, .cfield select, .cfield textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--panel);
  border: 1px solid var(--hairline-2); border-radius: 6px; padding: 11px 13px; width: 100%;
}
.cfield textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.cfield input:focus, .cfield select:focus, .cfield textarea:focus {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(2, 37, 69, .12);
}
.cfield input.is-bad, .cfield textarea.is-bad { border-color: #b3261e; }

/* Present in the DOM for a bot to fill, off-screen rather than display:none, which some
   scripts skip. Nothing a person can reach: aria-hidden, and out of the tab order. */
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cform__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.cform__msg { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.cform__msg.is-bad { color: #b3261e; }
.cform__msg.is-good { color: var(--navy); font-weight: 700; }
.cform button[disabled] { opacity: .55; cursor: default; }

/* ── footer ── */
.foot { background: var(--navy); color: var(--on-navy-soft); padding: 46px 0 52px; font-size: 13.5px; }
.foot__top { display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; align-items: flex-start; padding-bottom: 26px; border-bottom: 1px solid var(--on-navy-line); }
.foot__logo { height: 34px; width: auto; display: block; }
.foot__links { display: flex; flex-wrap: wrap; gap: 20px; }
.foot a { color: var(--on-navy); text-decoration: none; }
.foot a:hover { color: var(--gold); }
.foot__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 22px; font-size: 12.5px; color: rgba(244, 242, 237, .5); }

/* ── role walkthrough on the software page ── */
.role { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 30px; align-items: start;
        padding: 30px 0; border-top: 1px solid var(--hairline); }
.role:first-of-type { border-top: 0; padding-top: 8px; }
.role__text h3 { margin: 0 0 9px; font-size: 19px; }
.role__text p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.role__shots { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.dev--phone { background: #111; border-radius: 20px; padding: 6px; box-shadow: 0 8px 22px -10px rgba(2,37,69,.5); }
.dev--phone img { display: block; width: 132px; height: auto; border-radius: 15px; }
@media (max-width: 820px) {
  .role { grid-template-columns: 1fr; gap: 18px; }
  .dev--phone img { width: 116px; }
}

/* The adoption section's closing note: the two conformance claims, and what separates them. */
.adopt__note {
  margin: 22px auto 0; max-width: 86ch; padding: 16px 20px; font-size: 14.5px; line-height: 1.65;
  color: var(--ink-soft); background: var(--panel, #fff); border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold); border-radius: 10px;
}
.adopt__note b { color: var(--ink); font-weight: 700; }

/* The answer to the first gap: what a published standard can and cannot make uniform. */
.gaps__note {
  margin: 26px auto 0; max-width: 92ch; padding: 16px 20px; font-size: 14.5px; line-height: 1.68;
  color: var(--ink-soft); background: var(--panel, #fff); border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold); border-radius: 10px;
}
.gaps__note b { color: var(--ink); font-weight: 700; }

/* ── Seals ──────────────────────────────────────────────────────────────────
   Each seal is shown on both grounds at once, because the only question a host
   has is which one to take, and that is answered by seeing them side by side. */
.seal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
/* One seal, so the card is centered at a readable measure instead of stretching
   the full band. The two-column rule above is kept for a future second seal. */
.seal-grid--one { grid-template-columns: minmax(0, 520px); justify-content: center; }
.sealcard { background: var(--panel, #fff); border: 1px solid var(--hairline); border-radius: 14px; padding: 24px; }
.sealcard__head h2 { margin: 0 0 8px; font-family: var(--serif); font-size: 21px; font-weight: 700; }
.sealcard__head p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.sealcard__shows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 18px; }
.sealshow { display: grid; place-items: center; padding: 20px; border-radius: 10px; border: 1px solid var(--hairline); }
.sealshow--lt { background: #F7F5F1; }
.sealshow--dk { background: #022545; border-color: #022545; }
.sealshow img { width: 100%; max-width: 180px; height: auto; display: block; }
.sealcard__acts { display: flex; flex-direction: column; gap: 10px; }
.actrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.actrow__k { flex: 1 1 100%; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
             text-transform: uppercase; color: var(--muted); }
.btn--sm { padding: 7px 13px; font-size: 13px; border-radius: 7px; }
.actrow__embed { align-self: flex-start; margin-top: 4px; }
.sealmsg { margin: 18px 0 0; min-height: 20px; font-size: 13.5px; font-weight: 650; color: #1F6B3F; }
@media (max-width: 900px) {
  .seal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .sealcard__shows { grid-template-columns: 1fr; }
}

/* ── Get a seal: sits under the four conditions, where a host has just read what
   they would be committing to and needs somewhere to go next. ── */
.sealcta {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center;
  margin: 26px auto 0; max-width: 92ch; padding: 22px 26px;
  background: var(--panel, #fff); border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold); border-radius: 12px;
}
.sealcta__marks { display: flex; gap: 12px; }
.sealcta__marks img { width: 104px; height: 104px; display: block; }
.sealcta__text h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 19px; font-weight: 700; }
.sealcta__text p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
.sealcta__text p b { color: var(--ink); font-weight: 700; }
@media (max-width: 780px) {
  .sealcta { grid-template-columns: 1fr; gap: 18px; }
  .sealcta__marks img { width: 88px; height: 88px; }
}

/* A tile closing the bio card: the card is a summary, and this is where the rest lives. */
.biolink {
  display: flex; align-items: center; gap: 14px; margin: 20px 0 0; padding: 14px 18px;
  background: var(--panel, #fff); border: 1px solid var(--hairline); border-left: 3px solid var(--gold);
  border-radius: 10px; text-decoration: none; transition: border-color .13s ease, background .13s ease;
}
.biolink:hover { background: #FBF9F5; border-color: #D8D3CB; border-left-color: var(--gold); }
.biolink__t { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.biolink__d { flex: 1 1 auto; font-size: 13.5px; color: var(--muted); }
.biolink__go { font-size: 20px; color: var(--muted); line-height: 1; }
.biolink:hover .biolink__go { color: var(--ink); }
@media (max-width: 560px) {
  .biolink { flex-wrap: wrap; gap: 4px 12px; }
  .biolink__d { flex-basis: 100%; }
}

/* Each screen in its own cell: it reads as an object rather than a phone floating in a row,
   and in edit mode the cell is the drop target, so the boundary is visible before you let go. */
/* Each screen is a bare wrapper: no box in either mode, so four phones fit a row without
   wrapping. While editing, editor.js draws a dashed outline on each cell as the drop
   target; an outline is offset and costs no layout width, so it never pushes the fourth
   phone onto a second line. */
.devcell { display: grid; place-items: center; }