/* ==========================================================================
   home.css — the landing page, to the designer's front-page comp
   --------------------------------------------------------------------------
   Last updated  2026-09-08
   Source        data-conductor/sample/front-page-design.png
   Assessment    docs/2026-09-08-front-page-design-assessment.md

   WHY THIS IS ITS OWN FILE, LOADED LAST
   -------------------------------------
   browse.css carries a section called "landing page: onto the design language"
   (browse.css:571-624) that re-skins #home — the headline colour, the primary
   button, the beta notice, the cards and the top bar. It is linked AFTER
   style.css, so landing rules written in style.css lose every tie at equal
   specificity and silently do nothing. That is exactly what happened on the
   first pass of this restyle: the headline stayed black because
   `browse.css:585` sets `color: var(--phid-text)`.

   So this file is linked after browse.css and is the last word on the landing
   page. Deleting its <link> in index.html restores the previous landing exactly.

   TYPEFACE
   --------
   Source Sans 3 throughout, which IS the design kit's face — the logo guideline
   specifies it on page 11, and the `designs` table in the `reference` database
   records the local()-first hosting decision of 2026-08-07. It is vendored here
   as a VARIABLE font covering weights 200-900 in one file
   (vendor/fonts/source-sans-3.css), so the comp's very light headline needs no
   new asset and no new download: weight 200 of the file already loaded.

   The comp's headline looks like a geometric face (Century Gothic and
   relatives). Following the kit rather than the comp is deliberate — one family
   across the whole site is the guideline's own rule, and Source Sans 3 at 200
   carries the same airiness at display size.

   COLOUR
   ------
   Brand values from phid-tokens.css §2: navy #264677, dawn #F3A366. That file
   is VENDORED from data-conductor and must not be edited here, so values it
   expresses no semantic token for are written literally, each with its measured
   WCAG ratio beside it.
   ========================================================================== */

/* ==========================================================================
   1. The page wash — one gradient behind everything
   --------------------------------------------------------------------------
   The comp has no top bar of its own: the mark and the navigation float on a
   single wash that darkens at the top of the page and fades to white further
   down. So the gradient goes on BODY, not on #home — a gradient on #home stops
   at the top of #home and leaves the bar painted in its own colour, which is
   what broke the "togetherness" of the first pass.

   :has() scopes it to the landing view. #home is toggled with .hidden by
   app.js:1018, so this reverts to the ordinary chrome on browse and viewer
   without a line of JavaScript. Supported everywhere the site already needs —
   phid-tokens.css relies on light-dark(), which is newer than :has().

   THE WASH IS THE DESIGNER'S, MEASURED FROM THE COMP
   --------------------------------------------------
   These stops are not estimated. They are colour-picker samples taken off the
   comp by the maintainer on 2026-09-08 — #CED3DD/#D2D7E0/#CED4DE beside the
   mark at the top, #E5E8EE through the middle, and #FEFFFF/#FCFCFD just above
   the Explore band. An earlier pass darkened the top to #8492A9 for contrast;
   that is reverted here at the maintainer's decision, having been raised.

   WHAT THAT COSTS, RECORDED RATHER THAN HIDDEN. A white headline over these
   grounds measures 1.50:1 at the top stop and 1.23:1 mid-page, against WCAG
   1.4.3's 3:1 for large text. The headline is therefore decorative in effect,
   and the <h1> is deliberately real text in the DOM (never an image, never a
   background) so a screen reader and a search engine both still receive the
   sentence. Two one-line alternatives if that is ever revisited:

       --hero-ground: #8492A9   white headline passes at 3.15:1
       .hero-title colour navy  #264677 on #CED3DD is 6.29:1

   STOPS IN PER CENT, NOT vh
   -------------------------
   Percentages resolve against body's own painting box — the whole page — so the
   fade keeps the same shape whatever the window height. The earlier vh stops
   moved the whole gradient when the window was resized taller, which is the
   behaviour the maintainer spotted.
   ========================================================================== */

:root[data-landing] body {
  /* HEIGHT: AUTO IS LOAD-BEARING, NOT TIDYING.
     style.css:27 sets `html, body { height: 100% }`, which pins body's box to
     exactly one viewport. The wash below is painted on body, so it stopped at
     that line; and because `html` carries its own background (--bg, #FFF9F5)
     body's background does not propagate to the canvas, so the warm off-white
     showed through from the end of the body box down to the top of the blue
     Explore band — a pink strip that grew as the window got shorter, reported
     2026-09-11 and absent above roughly 1200px of window height.
     `height: auto` lets the box grow to the content, which both removes the
     strip and restores the per-cent stops below to spanning the whole page,
     as the note above them already claims they do. Scoped to the home view so
     the browse and viewer pages keep the viewport-tall body they rely on. */
  height: auto;

  --hero-ground:      #CED3DD;   /* sampled beside the mark */
  --hero-ground-mid:  #E5E8EE;   /* sampled mid-page */
  --hero-ground-late: #FCFDFE;   /* sampled just above the Explore band */
  --hero-ground-end:  #FFFFFF;

  background-color: var(--hero-ground-end);
  background-image: linear-gradient(180deg,
      var(--hero-ground)       0%,
      #DCE0E7                 28%,
      var(--hero-ground-mid)  56%,
      var(--hero-ground-late) 88%,
      var(--hero-ground-end) 100%);
  background-repeat: no-repeat;
  color: #1B2431;
}

/* #home paints nothing of its own — the wash shows through from body. */
:root[data-landing] #home {
  background: none;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   2. The floating top bar
   --------------------------------------------------------------------------
   On the landing view the bar has no surface and no rule under it: the mark and
   the navigation sit directly on the wash, which is what "floating on top of
   it" means in the comp. It stays sticky, so it keeps working as navigation.

   THE MARK GOES BACK TO GUIDELINE SIZE HERE, and that is a reversal worth
   naming. browse.css:691 sets it to 76px with a comment recording two
   deliberate departures from the logo guideline's 138px minimum (page 09) —
   100px on 2026-08-17, then 76px on 2026-09-06 when the bar was taken to 60px.
   Both were made to fit a compact bar. A floating bar has no such constraint,
   so on THIS VIEW ONLY the mark is 168px, which is above the minimum rather
   than below it. Every other view keeps the 60px bar and the 76px mark
   untouched, so neither earlier decision is overridden where it applies.
   ========================================================================== */

:root[data-landing] #topbar {
  background: none;
  border-bottom: 0;
  min-height: 0;
  padding: 18px 30px 8px;
  align-items: flex-start;
}
:root[data-landing] #topbar .brand-logo { width: 168px; }

/* Frosted once the page scrolls under the bar — see js/topbar-scrim.js for why
   this is not simply left transparent. Measured on the worst ground the bar can
   sit over, the navy Explore band: #1B2431 through this backdrop reads about
   7:1, and about 9:1 over the wash at the top. */
:root[data-landing] #topbar.scrolled {
  background: rgba(246, 248, 250, 0.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(38, 70, 119, 0.10);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

/* Navigation: black text on the wash, per the comp. The orange rule under the
   current item is an INDICATOR, not decoration — it follows the pointer on
   hover and marks the active view, which is what the comp's underlined "Home"
   is showing. Colour is dawn #F3A366; it is a 3px rule rather than text, so it
   carries no text-contrast requirement of its own. */
:root[data-landing] #topbar nav { gap: 26px; padding-top: 10px; }
:root[data-landing] #topbar nav a {
  color: #1B2431;                       /* 11.0:1 on the wash at bar height */
  font-size: 16px;
  font-weight: 700;
  padding: 2px 2px 7px;
  border-bottom: 3px solid transparent;
  transition: border-bottom-color 0.15s ease, color 0.15s ease;
}
:root[data-landing] #topbar nav a:hover,
:root[data-landing] #topbar nav a:focus-visible {
  color: #1B2431;
  border-bottom-color: #F3A366;
  text-decoration: none;
}
/* Every link is bold now, so weight no longer distinguishes the current view —
   the orange rule is the entire signal. */
:root[data-landing] #topbar nav a.active {
  color: #1B2431;
  border-bottom-color: #F3A366;
}

/* ==========================================================================
   3. Hero — one centred layer, the headline behind the structure
   ========================================================================== */

#home .home-inner { max-width: 1100px; margin: 0 auto; padding: 6px 24px 64px; }

#home .hero { display: block; text-align: center; }

#home .hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(300px, 44vw, 620px);
}

/* IN FRONT OF THE CANVAS, at the maintainer's request of 2026-09-08 - the comp
   has the structure crossing over the headline, but the sentence is the page's
   first message and reads better unoccluded. Stacking is done by z-index, never
   by DOM order, so the <h1> stays the document's first heading either way;
   moving it back behind is z-index: 1 again.

   POINTER-EVENTS: NONE IS NOT OPTIONAL HERE. The headline spans the full width
   across the middle of the stage, which is exactly where a reader grabs the
   model. In front and hit-testable, it would swallow the drag and the structure
   would appear frozen wherever the text covers it - a bug that looks like a
   broken viewer rather than a CSS mistake. The h1 is not interactive, so it
   gives up hit-testing and every pointer event passes through to the canvas. */
#home .hero-title {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  left: 0; right: 0;
  top: 46%;
  transform: translateY(-50%);
  margin: 0;
  font-family: var(--phid-font-sans);
  font-weight: 200;                     /* the variable font covers 200-900 */
  font-size: clamp(34px, 8.4vw, 118px);
  line-height: 1;
  letter-spacing: 0.005em;
  color: #FFFFFF;                       /* 1.50:1 on the wash — see the note above */
  text-wrap: nowrap;
  white-space: nowrap;
}

#home .hero-stage canvas {
  position: relative;
  z-index: 2;
  width: 100%;
  height: clamp(300px, 44vw, 620px);
  display: block;
  background: transparent;              /* no card, no frame — the comp has neither */
  cursor: grab;
  touch-action: none;
}
#home .hero-stage canvas:active { cursor: grabbing; }

/* ---- Chips: a centred row under the structure, not overlaid on it ---- */
#home .hero-chips {
  display: flex; justify-content: center; align-items: center;
  gap: 14px; flex-wrap: wrap;
  margin: 6px 0 0;
}
#home .hero-chips .hint,
#home .hero-chips .id {
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12.5px;
  line-height: 1.2;
}
/* Transparent rather than a white pill, so the wash reads through it — the chip
   is a hint about the structure, not a label on the page. Navy on the wash where
   the chips sit measures 5.9:1 at its darkest point, 9.4:1 where it has faded
   to white, so it passes across the whole gradient. */
#home .hero-chips .hint {
  background: transparent;
  color: #264677;
  border: 1px solid rgba(38, 70, 119, 0.55);
  font-weight: 600;
}
#home .hero-chips .id {
  background: #FFFFFF;
  color: #1B2431;                       /* 15.6:1 on white */
  font-weight: 700;
  border: 1px solid rgba(38, 70, 119, 0.14);
  font-family: var(--phid-font-sans);   /* not mono — browse.css:600 sets mono
                                           on .stage .meta .id, which these
                                           chips are no longer inside */
  letter-spacing: 0.01em;
}
#home .hero-chips .legend {
  background: none; border: 0; padding: 0;
  color: #1B2431;
  font-size: 12px;
  gap: 9px;
}
#home .hero-chips .legend .bar { width: 96px; height: 9px; }

/* ---- Subtitle and call to action, centred below the stage ---- */
#home .hero-subtitle {
  margin: 46px auto 0;
  /* ONE LINE ON A FULL-WIDTH WINDOW, at the maintainer's request 2026-09-11.
     62ch is roughly 558px at this size, which broke the 116-character sentence
     after "dynamic" and set it as two lines. `none` hands the limit back to
     .home-inner (1100px less 48px of padding = 1052px of text column); the
     sentence measures about 990px at the 18px cap and less below it, so it
     sits on one line wherever the window is at least ~1100px wide and wraps
     naturally under that. Not `white-space: nowrap` — that would hold the line
     together past the point where it fits and push it out of the page. */
  max-width: none;
  text-align: center;
  color: #000000;                       /* black, per the maintainer 2026-09-08;
                                           browse.css:589 makes this muted grey */
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.65;
}
/* 2026-09-11: the subtitle's <b> around "PHi-C" came out at the maintainer's
   request — the line reads as one sentence with nothing lifted out of it. This
   rule is kept, unused, because browse.css:589 still styles the subtitle and a
   <b> reintroduced there without it would inherit that rule's muted grey rather
   than the black the maintainer set above. Delete both together or neither. */
#home .hero-subtitle b { color: #000000; font-weight: 700; }

#home .ctas { justify-content: center; margin-top: 30px; }

/* Dawn, and a full pill. browse.css:591 paints this navy with a 4px radius —
   the comp's button is orange and fully rounded, so both are overridden. */
#home .btn.primary {
  padding: 17px 44px;
  font-size: 19px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #1B2431;                       /* 7.62:1 on #F3A366 — measured */
  background: linear-gradient(180deg, #F6B482, #F3A366);
  box-shadow: 0 10px 24px rgba(38, 70, 119, 0.18);
}
#home .btn.primary:hover {
  background: linear-gradient(180deg, #F8C39A, #F5AF78);
  border-color: transparent;
  transform: translateY(-2px);
}

/* ==========================================================================
   4. Explainer and beta notice
   ========================================================================== */

#home .explain {
  margin: 56px 0 0;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  text-align: left;
  color: #000000;
}
#home .explain p { font-size: 14.5px; line-height: 1.75; color: #000000; }
/* style.css:373 sets margin:0 on these, which was right when the explainer was
   a single paragraph. It now has two, so they need a gap or they run together. */
#home .explain p + p { margin-top: 14px; }
#home .explain .key { font-weight: 800; color: #264677; }

/* A quiet grey bar with near-black text and square corners. browse.css:606
   treats the notice as a WARN state — blue wash, blue border, blue text. The
   comp treats it as a plain notice, which is also the truer reading: a beta
   label is a fact about the site, not a warning about an operation. */
/* The "News" label above the notice. The three values are the top bar's nav
   links on this page (home.css: #topbar nav a — 16px, weight 700, #1B2431), so
   the label reads as the same kind of text as Data and About. Centred over the
   notice, which is centred itself, at the maintainer's request 2026-09-11. */
#home .news-title {
  margin: 40px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #1B2431;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}
/* The notice already carries margin-top: 26px for the case where it follows the
   explainer directly. Under the label that reads as a gap between a heading and
   the thing it heads, so it is tightened here and only here. */
#home .news-title + .beta-note { margin-top: 10px; }

#home .beta-note {
  margin: 26px 0 0;
  background: #CFD6E1;                  /* #1B2431 on it = 11.0:1 */
  border: 0;
  border-radius: 2px;
  padding: 13px 22px;
  text-align: center;
  color: #1B2431;
}
#home .beta-note p { font-size: 14px; color: #000000; font-weight: 700; }
/* A linked item (#55) keeps the bar's black, underlined: the site's teal link
   colour on #CFD6E1 is 2.3:1, too faint to read. */
#home .beta-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   5. Explore — a full-bleed navy band with white cards
   --------------------------------------------------------------------------
   #home is full-width and the readable column is .home-inner, which is what
   lets this band reach both edges without 100vw arithmetic — 100vw counts the
   scrollbar and overflows horizontally the moment the page scrolls.
   ========================================================================== */

#home .explore { margin-top: 0; background: #264677; padding: 40px 0 56px; }
#home .explore .explore-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
#home .explore .section-title {
  margin: 0 0 26px;
  text-align: center;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.94);     /* 9.44:1 on the navy band */
}
#home .explore .card-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
#home .explore .link-card {
  background: #FFFFFF;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 22px;
  align-items: center;
  align-content: center;
}
#home .explore .link-card:hover {
  border: 0;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}
/* Both marks are height-constrained rather than width-constrained, because the
   two are different shapes: the PHi-D lockup is landscape (420x207) and the
   PHi-C mark is nearly square (540x451). Matching their WIDTHS would make the
   PHi-C card twice as tall as the other; matching their optical height is what
   the comp shows and what keeps the two cards the same size. */
#home .explore .card-mark { display: grid; place-items: center; }
#home .explore .card-mark img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 96px;
  height: auto;
}
#home .explore .card-title { font-size: 15px; font-weight: 700; margin: 0 0 6px; color: #1B2431; }
#home .explore .card-text { font-size: 14px; line-height: 1.6; color: #1B2431; font-weight: 700; }

/* ==========================================================================
   6. Narrow screens
   --------------------------------------------------------------------------
   The headline cannot hold one line below roughly 900px, so nowrap comes off
   and it breaks the way the previous landing did. The stage shortens with it so
   the structure does not push the subtitle below the fold, and the floating bar
   gives back some of its padding.
   ========================================================================== */

@media (max-width: 900px) {
  #home .hero-title {
    position: static;
    transform: none;
    white-space: normal;
    text-wrap: balance;
    font-size: clamp(30px, 9vw, 54px);
    margin: 0 0 10px;
  }
  #home .hero-stage { min-height: 0; display: block; }
  #home .hero-stage canvas { height: clamp(260px, 74vw, 420px); }
  #home .hero-subtitle { margin-top: 30px; }
  #home .explore .link-card { grid-template-columns: 1fr; gap: 14px; }
  #home .explore .card-mark { max-width: 220px; margin: 0 auto; }

  :root[data-landing] #topbar { padding: 12px 18px 6px; }
  :root[data-landing] #topbar .brand-logo { width: 124px; }
  :root[data-landing] #topbar nav { gap: 16px; }
}

/* ==========================================================================
   7. About — the landing language, applied to a page of prose
   --------------------------------------------------------------------------
   About left the workspace on 2026-09-11 and became a top-level view beside
   #home and #browse. It takes the same ground and the same floating bar, which
   it gets from `:root[data-landing]` above; what it needs of its own is a
   readable column and the landing's type.

   WHY THE MEASURE IS NARROWER THAN THE HOME COLUMN. .home-inner is 1100px
   because it carries a full-bleed band and a two-card grid. This page is four
   paragraphs of prose, and 1100px of 15px text is roughly 150 characters a
   line — about twice the comfortable measure. 760px holds it near 80.

   style.css:344 already sets `.about { padding: 20px 28px; max-width: 760px }`
   for the ordinary cream page, and that rule stays: it is what About looks like
   with ?ide=0 and on any view that is not landing. These rules sit on top of it
   and only while the attribute is set.
   ========================================================================== */

/* THE DATA PAGE ON THE LANDING GROUND — 2026-09-28. The finder paints its own
   opaque page colour (browse.css), which would sit as a flat slab over the
   wash; on the landing ground it is transparent so the gradient shows through,
   as it does behind Home and About. Its cards and fields keep their own
   surfaces. */
:root[data-landing] #browse { background: transparent; min-height: 0; }

:root[data-landing] #about {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 88px;
  color: #1B2431;
}

/* The mark, centred and on its own line. The <picture> is an inline element, so
   the block context comes from the wrapper rather than from the image. */
:root[data-landing] #about picture {
  display: block;
  text-align: center;
  margin: 0 0 28px;
}
:root[data-landing] #about .about-logo {
  width: 168px;               /* the floating bar's size, so the two agree */
  height: auto;
  display: inline-block;
}

/* Centred, and at the weight the Explore band's heading uses rather than the
   heavy default — this page is quiet, and the mark above it is already loud. */
:root[data-landing] #about h2 {
  margin: 0 0 26px;
  text-align: center;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #1B2431;
}

/* The explainer's type, which is what the rest of the landing reads in:
   14.5px at 1.75, black, with a real gap between paragraphs rather than the
   browser's default margin collapse. */
:root[data-landing] #about p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: #000000;
}
:root[data-landing] #about p + p { margin-top: 14px; }

/* 2026-09-28, to the designer's Figma About frame: the prose is JUSTIFIED, and
   the section headings are navy, semibold and one step up from the body — 24px
   against 20px in the frame, kept at that 1.2 ratio against this page's 14.5px.
   The spacing keeps the frame's proportions too: 20px under a heading and 56px
   between sections there, scaled the same way.
   Justification is on the prose paragraphs only. The credit names are single
   lines, where it would do nothing, and are set left explicitly below. */
:root[data-landing] #about > p { text-align: justify; }
:root[data-landing] #about h3 {
  margin: 40px 0 14px;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.2;
  color: #264677;
}
:root[data-landing] #about > h3:first-of-type { margin-top: 0; }  /* `>`: the Credits h3 is first-of-type in its own wrapper */

/* Credits, 2026-09-28. The heading's 40px comes from the h3 rule above, so the
   .credits-head wrapper's own 40px padding would double it here. The figures
   follow the frame: roles 20px and names 24px there, so 14.5px and 17.5px
   here, both regular weight and in the text's own case.
   THE ROLE GREY IS DARKER THAN THE FRAME'S #808080: that reads about 3:1 on
   this wash, below the 4.5:1 small text needs, so it takes the #4A5565 this
   page already uses for quiet text. */
:root[data-landing] #about .credits-head { padding-top: 0; margin-bottom: 0; }
:root[data-landing] #about .credit-role { font-size: 14.5px; color: #4A5565; }
:root[data-landing] #about .credit-name {
  font-size: 17.5px;
  line-height: 1.5;
  text-align: left;
  color: #000000;
}
:root[data-landing] #about .credit-name + .credit-name { margin-top: 0; }

/* Releases, 2026-10-05: below Credits. Body text size and colour; the version
   in the headings' navy. From 2026-10-23 (#70) each release is a dated line
   with its changes bulleted below it. */
:root[data-landing] #about .release-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  line-height: 1.75;
  color: #000000;
}
:root[data-landing] #about .release-ver {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #264677;
}
:root[data-landing] #about .release-date {
  font-variant-numeric: tabular-nums;
}
/* list-style is inherited, so the outer list's none is undone here. */
:root[data-landing] #about .release-changes {
  margin: 0 0 0.75em;
  padding-left: 1.4em;
  list-style: disc;
}

/* strong and em carry the paragraph's colour; the default muted grey would drop
   the emphasis below the surrounding text rather than lifting it. */
:root[data-landing] #about strong { font-weight: 700; color: #000000; }
:root[data-landing] #about em { font-style: italic; }

/* Links take the navy the landing uses for the PHi-C / PHi-D keys, not the
   teal accent of the cream pages — 9.44:1 on this ground. */
:root[data-landing] #about a {
  color: #264677;
  text-decoration: underline;
  text-underline-offset: 2px;
}
:root[data-landing] #about a:hover { color: #1B2431; }

/* The credit line closes the page: separated by a rule, centred, and quiet.
   It is .muted, whose grey is set for the cream ground; restated here because
   this ground is lighter and the default reads washed out on it. */
:root[data-landing] #about p.muted {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(38, 70, 119, 0.18);
  text-align: center;
  font-size: 13px;
  color: #4A5565;
}

@media (max-width: 900px) {
  :root[data-landing] #about { padding: 28px 20px 64px; }
  :root[data-landing] #about .about-logo { width: 132px; }
}

/* The About mark swaps between a 540 x 392 PNG and a 405 x 295 GIF on hover
   (index.html, 2026-09-28). The two ratios differ by 0.3%, which would shift
   the page by half a pixel on every swap, so the box holds the still's ratio
   and the GIF is fitted inside it. */
:root[data-landing] #about .about-logo { aspect-ratio: 540 / 392; object-fit: contain; }