/* Mindrise about — on the Classical system (classical.css) and the landing
   page's rhythm (landing.css, which this file loads after and depends on for the
   nav lockup, .kicker, the .plate grade and the footer trust row).

   Everything is scoped to .arete-about, the body class, so nothing here can
   reach the landing, the checkout or the 404.

   Mobile-first at a 390px reference, per CLAUDE.md. The one >=880px block at the
   end only stops the column running to full width; desktop is a later phase. */

/* ══ page frame ══════════════════════════════════════════════════════════ */

/* Nav, content, footer — and the footer pinned to the bottom on a screen taller
   than the page, so a short page doesn't leave the imprint floating mid-window.
   Same construction as the 404: min-height rather than height, svh rather than
   vh (the mobile URL bar collapsing must not move anything), and the admin bar
   subtracted because it is fixed above the document rather than in it. */
/* A wider margin on the phone (client, 2026-08-03). --edge is the page's side
   padding, clamp(20px, 5vw, 72px) at source; only its floor moves here, 20px to
   26px. That is a mobile-only change by arithmetic rather than by media query:
   5vw passes 26px at a 520px viewport, so every width above that is already
   taking the vw term and lands on exactly the number it did before. The cap is
   untouched for the same reason — desktop is a later phase (CLAUDE.md).

   Set on the body element, so it reaches both .arete-wrap and .nav — the nav
   computes its own padding from --edge, and moving the content in without the
   wordmark would leave the lockup hanging outside the column it heads.

   Scoped to .arete-about, not changed at source: the landing page's edge is
   signed off, and the product rail was drawn against it. */
.arete-about { --edge: clamp(26px, 5vw, 72px);
  min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
  display: flex; flex-direction: column; }
.arete-about .arete-wrap { flex: 1; display: flex; flex-direction: column; width: 100%; }
.arete-about .about { flex: 1; padding: calc(0.5 * var(--leading)) 0 0; }

/* Nothing to scroll past on this page, so the nav loses its stickiness and the
   blur behind it. Its 10svh floor goes too: that exists to compose the landing
   hero's 10 + 90, and there is no hero here. */
.arete-about .nav { position: static; min-height: 0; backdrop-filter: none;
  background: transparent; }
/* landing.css hides every .nav a below 640px (the section anchors). The wordmark
   is an <a> here and is the way back, so it is put back. */
.arete-about .nav a.nav-brand { display: flex; margin-right: auto; }

/* ══ heading ═════════════════════════════════════════════════════════════ */

/* Centred over the photograph's axis, like the maker section's heading and for
   the same reason: a display line standing alone above a full-width rectangle
   hangs off the left edge if it isn't. */
.arete-about .about-head { text-align: center; }

/* The landing's display setting: Cormorant at the normal cut, never the semibold
   classical.css gives interface headings. Same clamp as the 404 title and the
   checkout's, so the pages all open at one size.

   The top margin is a plain 0.75 leading, not the page's usual
   `calc(0.75 * var(--leading) - 1cap)` — that subtraction removes the half-leading
   above the cap of text that is *not* cap-trimmed, and this heading is trimmed
   (text-box below), so subtracting a second cap would pull the line into the
   kicker. */
.arete-about .about-title {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(34px, 9.5vw, 48px); line-height: 1.12; letter-spacing: -0.01em;
  margin: calc(0.75 * var(--leading)) 0 0; text-box: trim-both cap alphabetic;
  text-wrap: balance;
}

/* The kicker above it, moved onto the display face (2026-08-02, client).
   .kicker in landing.css sets everything but a family, so it inherited Lora from
   body — which is the right call on the 404, where the kicker sits above Lora
   body copy and nothing else. Here it sits directly above a Cormorant title, and
   two serifs a line apart read as an accident rather than a pairing.

   Scoped to .arete-about rather than changed at source: the 404's "ERROR 404"
   and the checkout's kickers are signed off as they are, and one page's fix is
   not a reason to restyle three.

   Tracking opens from 0.08em to 0.16em and the weight goes to 500 — Cormorant's
   uppercase is narrower and lighter than Lora's at the same size, so the label
   needs both to hold the same presence it had. */
.arete-about .kicker {
  font-family: var(--font-heading); font-weight: 500;
  letter-spacing: 0.16em;
}

/* ══ the workshop set ════════════════════════════════════════════════════ */

/* Five making-of photographs as one mosaic (2026-08-03, client), in place of the
   single café shot. Each takes the closing section's treatment
   (.close-figure/.close-photo in landing.css), restated here rather than
   borrowed, because this page must not inherit a later change made for the
   bottom of the landing page: full measure, no rule, no radius, no shadow, the
   .plate grade. The frames in these photos are on a bench, not cut out, so a
   drop-shadow would be a shadow cast by a rectangle.

   A contact-sheet gutter rather than the page's leading: the five are one
   picture of one bench, and a 28px trench between them would read as five
   unrelated plates.

   The set is in two figures, not one — .about-figure-lead above the copy and
   .about-figure-set below it (2026-08-03, client). Everything here is written on
   .about-figure so both halves take it and the four below the copy sit on the
   same gutter and the same edges as the one above. */
.arete-about .about-figure {
  --making-gap: 8px;
  margin: calc(1.25 * var(--leading)) 0 0; width: 100%;
  display: flex; flex-direction: column; gap: var(--making-gap);
}

/* The hairline the whole system draws with — --color-divider is ink at 16%, the
   same stroke as .hr and the swatches, so the photographs are edged rather than
   framed. Safe against the flex maths below because *{box-sizing:border-box} is
   set globally: aspect-ratio then governs the border box, so two pictures in a
   row still resolve to the same height with the border counted in. */
.arete-about .making-photo {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--color-divider);
  filter: var(--plate-grade);
}

/* aspect-ratio holds each box's height before the lazy file lands, and — in the
   two-up rows below — is what converts a flexed width into a height. It must
   match the encode: 1200×900 and 900×675 are both 4:3, 750×1000 is 3:4. */
.arete-about .making-photo.is-landscape { aspect-ratio: 4 / 3; }
.arete-about .making-photo.is-portrait  { aspect-ratio: 3 / 4; }

/* The lead runs the full measure and is cropped to a letterbox: at 4:3 across a
   390px screen it is 268px of mostly empty bench and brick, and the set has four
   more pictures to get through. The crop is held low (58%) because the subject —
   the stacked frames, the one being assembled, the sander — sits below the
   photograph's centre line.

   Written with .is-landscape in the selector, not on .making-lead alone: the
   class it has to beat is `.arete-about .making-photo.is-landscape`, and a
   two-class selector loses to a three-class one however far down the file it
   sits. The symptom is silent — the lead simply renders at 4:3. */
.arete-about .making-photo.is-landscape.making-lead {
  aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 58%;
}

/* Two pictures side by side, at one height, neither cropped.
   flex-basis is 0 and flex-grow is each picture's own aspect ratio, so the row's
   width is shared in proportion to how wide the pictures are — which means every
   picture in the row resolves to the same height (width ÷ aspect is constant).
   That is what lets the portrait sit beside a landscape without being cut down
   to a square. Change an encode's shape and its grow value has to change with
   it. min-width:0 because a flex item's automatic minimum is its content size,
   and an image's content size is its intrinsic width — without it the row
   refuses to go narrower than 1950px. */
.arete-about .making-row { display: flex; align-items: flex-start; gap: var(--making-gap); }
.arete-about .making-row .making-photo { min-width: 0; flex-basis: 0; }
.arete-about .making-row .is-landscape { flex-grow: 1.3333; }
.arete-about .making-row .is-portrait  { flex-grow: 0.75; }

/* ══ the paragraph ═══════════════════════════════════════════════════════ */

/* Justified with hyphenation — the design handoff's own body setting, down to
   the hyphenate-limit-chars (6 3 3: never break a word under six letters, never
   leave under three either side). The three go together: justified text without
   hyphens opens rivers at a phone's measure, where a line holds barely eight
   words, and hyphens without the limit break "wanted" into "want-ed". Held to
   --measure and centred, so on a wide window the column stays a column.

   1.5rem — 24px — is the client's call (2026-08-03), up from the 15.5px the rest
   of the page's body voice uses (the buy card's lede, the 404's). It is a large
   setting for a phone: at this measure a line holds about five words, which is
   why hyphenation matters more here than anywhere else on the site, and why the
   one desktop step below is gone — 24px is already past the size that step
   existed to reach.

   The leading goes with it. var(--leading) alone is 28px, which is 1.17 against
   24px type and sets the lines almost touching; 1.25 units is 35px, a ratio of
   1.46, and still a whole multiple of the page's 28px rhythm.

   The `- 1cap` on the first margin is the usual trim: this text is not
   cap-trimmed, so the half-leading above its cap is taken back to measure the
   gap from the ink of the picture edge. */
.arete-about .about-body {
  max-width: var(--measure); margin: calc(1.25 * var(--leading) - 1cap) auto 0;
  text-align: justify; hyphens: auto; hyphenate-limit-chars: 6 3 3;
  font-size: 1.5rem; line-height: calc(1.25 * var(--leading));
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.arete-about .about-body p { margin: 0; }
.arete-about .about-body p + p { margin-top: var(--leading); }

/* ══ action ══════════════════════════════════════════════════════════════ */

/* One button, the only thing to press on the page. Not full-width like the 404's
   pair — that page *is* its two buttons, and this one is a paragraph with a way
   onward beneath it — but still on the 52px touch floor. Centred on the same axis
   as the heading and the picture. */
.arete-about .about-actions { display: flex; justify-content: center;
  margin-top: calc(1.5 * var(--leading)); }
.arete-about .about-actions .btn { min-height: 52px; font-size: 17px;
  padding-inline: calc(1.5 * var(--leading)); }
.arete-about .about-actions .btn-primary:focus-visible { outline-offset: 6px; }

/* ══ entrance ════════════════════════════════════════════════════════════ */

/* The page settles in on load: each block fades up a few pixels, one after the
   next, top to bottom.

   Deliberately the dumbest mechanism that produces the effect — a plain CSS
   @keyframes on five elements, started by the page existing. No script, no
   IntersectionObserver, no class toggled from JS. Those are how an entrance
   animation turns into a bug: if the observer never fires, or the script fails
   to load, or the element is already past the fold at first paint, the content
   stays at opacity 0 and the page is simply blank. Here there is nothing to
   fail — the animation is declarative, it runs once, and its end state is the
   element's normal state, so the worst case is that it plays offscreen and the
   visitor scrolls to find everything where it belongs.

   Which is also why nothing below the fold waits to be scrolled to: the whole
   sequence is over in about a second, and by the time anyone reaches the second
   half of the mosaic it has long since finished.

   `both` holds the opening frame through the delay, so a block doesn't flash in
   at full opacity before its turn. Translation is 10px and no more: this is a
   page of photographs, and a large movement under a picture reads as the layout
   settling wrongly rather than as an entrance. */
@keyframes arete-about-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.arete-about .about-head,
.arete-about .about-figure-lead,
.arete-about .about-body,
.arete-about .about-figure-set,
.arete-about .about-actions {
  animation: arete-about-rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.arete-about .about-figure-lead { animation-delay: 90ms; }
.arete-about .about-body        { animation-delay: 180ms; }
.arete-about .about-figure-set  { animation-delay: 270ms; }
.arete-about .about-actions     { animation-delay: 360ms; }

/* The system's standing rule (CLAUDE.md): motion is opt-out, and opting out
   means no motion at all, not a shorter one. animation:none drops the keyframes
   and the elements render in their end state, which is their normal state. */
@media (prefers-reduced-motion: reduce) {
  .arete-about .about-head,
  .arete-about .about-figure-lead,
  .arete-about .about-body,
  .arete-about .about-figure-set,
  .arete-about .about-actions { animation: none; }
}

/* ══ footer ══════════════════════════════════════════════════════════════ */

/* The trust row's own padding is written for the end of a long page; here it is
   closing a short one — the same reduction the 404 makes. */
.arete-about .arete-footer { padding: calc(1.5 * var(--leading)) 0 calc(1.25 * var(--leading)); }

/* ══ >=880px ═════════════════════════════════════════════════════════════ */

@media (min-width: 880px) {
  /* Only enough to keep the page from stretching across a desktop window.
     Desktop is a later phase — see CLAUDE.md. */
  /* No body step here any more. The landing page and the 404 take one because
     15.5px is a phone size; this page is set at 24px on the phone already, and a
     step up from there would make the paragraphs bigger than the heading is
     against them. Leaving the old 17.5px in place would have been worse than
     removing it — desktop would have read *smaller* than mobile. */
  /* The workshop set is the one element that would run to the full 1320px cap,
     and at that width the lead is a billboard. Held to the text column's own
     rough width so the pictures and the paragraph share an axis and an edge.
     The gutter opens with it — 8px is a phone's hairline, and at 900px across it
     reads as a printing fault rather than a gap. */
  .arete-about .about-figure { max-width: 900px; margin-inline: auto; --making-gap: 12px; }
}