/* about.css — about.html only ("Between the heavens and earth"): the emblem story. Reuses
site.css's tokens, .wrap/.eyebrow/.serif/.section wherever they already fit; adds only the page
head and the stroke-by-stroke rows below it. Square corners, no gradients, no box-shadow, same
as the rest of the site. */
/* ---- Header, off the hero: static, bordered, the small lockup always shown -------------------
site.css's header is written for the homepage hero (absolute, overlaying the hero image; the
lockup hidden until motion-hero.css's scroll trigger reveals it). This page has no hero, same as
shop.html/placemat.html, so it gets the same static treatment those pages use (shop.css), copied
here rather than loading shop.css itself for a page it otherwise has nothing to do with. */
.site-header{position:static;background:var(--paper);border-bottom:1px solid var(--line)}
.header-mark{visibility:visible}
@media (max-width:680px){
.site-header{flex-wrap:wrap;row-gap:16px;padding-block:20px}
.site-header nav{width:100%;flex-wrap:wrap;justify-content:space-between;row-gap:12px}
}
/* ---- Page head: a small category label, a serif display line, a lede -------------------------
Centred, like the homepage hero (.hero's text-align:center in site.css) and its intro/notify
sections (.intro, .notify) — text-align here does the inline centring, margin-inline:auto pulls
each measured block (the title, the lede) into the middle of its own box. */
.about-head{padding-top:clamp(24px,3vw,40px);padding-bottom:8px;text-align:center}
.about-head > .eyebrow{display:block;margin-bottom:10px;color:var(--ash)}
.about-title{
font-family:'Source Serif 4',Georgia,serif;font-weight:400;
font-size:clamp(30px,3.6vw,46px);line-height:1.15;letter-spacing:-.01em;max-width:32ch;
margin-inline:auto;
}
.about-lede{margin-top:22px;max-width:52ch;margin-inline:auto}
/* ---- Horizon: the homepage hero's mountain ridges, opening this page too ---------------------
Markup is the homepage's .horizon div, copied byte-for-byte (see about.html) — same three
svg.ridge.ridge-N lines. This page doesn't load motion-hero.css, so the draw/depth rules are
restated here rather than pulling in the whole hero file. site.css already sizes/positions
.horizon for the hero (absolute, pinned to the hero's bottom edge); here it sits in normal
flow as its own full-width band between the lede and the first stroke row, so the position is
reset to static and the hero's own height clamp is kept (same band height as the homepage). */
.about-horizon-wrap{padding-block:8px 12px}
.about-horizon-wrap .horizon{position:relative;left:auto;right:auto;bottom:auto}
/* Draw: identical reveal to the homepage hero — left to right via clip-path, same duration,
easing and per-ridge delays. */
.horizon .ridge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
clip-path:inset(-12px 100% -12px 0);
animation:about-ridge-draw 3s cubic-bezier(.45,.05,.35,1) both}
.horizon .ridge-1{animation-delay:1.7s}
.horizon .ridge-2{animation-delay:2s}
.horizon .ridge-3{animation-delay:2.3s}
@keyframes about-ridge-draw{to{clip-path:inset(-12px 0 -12px 0)}}
/* Depth: on the homepage the ridges rise with the whole document's scroll (scroll(root)),
because the hero sits pinned at the very top. Here the horizon is partway down the page, so a
view() timeline on the ridges themselves drives the rise as the band passes through the
viewport, rather than tracking scroll position from the top of the document. */
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.horizon .ridge{
animation:about-ridge-draw 3s cubic-bezier(.45,.05,.35,1) both, about-ridge-depth linear both;
animation-timeline:auto, view();
animation-range:normal, cover;
}
.horizon .ridge-1{animation-delay:1.7s, 0s;--ridge-rise:-10px}
.horizon .ridge-2{animation-delay:2s, 0s;--ridge-rise:-30px}
.horizon .ridge-3{animation-delay:2.3s, 0s;--ridge-rise:-56px}
@keyframes about-ridge-depth{to{transform:translateY(var(--ridge-rise))}}
}
}
/* Reduced motion: drawn and still, same as the homepage hero. */
@media (prefers-reduced-motion:reduce){
.horizon .ridge{clip-path:none;transform:none;animation:none}
}
/* ---- Rows: a stroke diagram on the left, a label/title/paragraph on the right, each row one
block within a centred column -----------------------------------------------------------------
Per the owner's note ("make the symbol on the left and the description on the right, not all
stacked"): .about-rows is the centred column (margin-inline:auto, same device as
.notify-form/.makers-text in site.css) and carries the hairline rules — the top border and each
row's bottom border inherit the column's width, so they sit under it rather than running
full-bleed to the page edges. Each .about-row is itself a two-column flex composition: the
diagram fixed-size and top-aligned at the left, the text block left-aligned at the right,
filling the remainder up to a readable measure. Side by side at every width, including phones —
only the sizes and gap shrink there (media query below). */
.about-rows-wrap{padding-block:12px var(--section)}
.about-rows{max-width:760px;margin-inline:auto;border-top:1px solid var(--line)}
.about-row{
display:flex;align-items:flex-start;text-align:left;
gap:48px;padding:44px 0;border-bottom:1px solid var(--line);
}
.about-diagram{flex:0 0 120px;display:block;width:120px;height:120px}
/* The hidden holder for the shared outline and the five clipPaths — never rendered
itself, exactly like the handoff's own width:0;height:0 SVG. */
.about-defs{position:absolute;width:0;height:0}
/* Highlight colour maps to the site's own ink; the handoff's muted pale grey maps to the site's
existing hairline tone (--line) — the two were already close in value. Both