/* Mindrise legal pages — 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 and the whole footer).

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

   These are the only pages on the site whose content is written in the WordPress
   editor, so this file styles *element* selectors inside .legal-prose rather
   than classes: whatever the client types — a heading, a list, a link, a bold
   run — has to land looking like the rest of the site without anyone adding a
   class to it. The block-editor stylesheets are dequeued here as they are on the
   landing page (inc/arete-seo.php), so these rules are not fighting theme.json.

   Mobile-first at a 390px reference, per CLAUDE.md. The one >=880px block at the
   end only keeps the measure honest on a wide screen; desktop is a later phase. */

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

/* Nav, document, footer — in the flow, no composition to hold. The footer sits
   after however much policy there is, which on these pages is several screens. */
.arete-legal { min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
  display: flex; flex-direction: column; }
.arete-legal .arete-wrap { flex: 1; display: flex; flex-direction: column; width: 100%; }
.arete-legal .legal { flex: 1; }

/* The landing nav is sticky and stands 10svh tall to compose the hero's 10 + 90.
   There is no hero here and nothing worth pinning a tenth of a phone screen to,
   so the bar goes static and gives the height back to the document. */
.arete-legal .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-legal .nav a.nav-brand { display: flex; margin-right: auto; }

/* ══ the document's head ═════════════════════════════════════════════════ */

.arete-legal .legal-head { padding: calc(0.5 * var(--leading)) 0 0; }

/* The 404's title setting, which is the checkout's: Cormorant at the normal cut,
   never the semibold classical.css gives interface headings, so the three pages
   open at one size. Cap-trimmed, so the top margin is a plain 0.5 leading rather
   than the page's usual leading-minus-1cap. */
.arete-legal .legal-title {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(32px, 8.5vw, 44px); line-height: 1.12; letter-spacing: -0.01em;
  margin: 0; text-box: trim-both cap alphabetic;
  max-width: 18ch;
}

/* The date, in the kicker's voice — tracked, small, accent — because that is how
   this page says "this is a label, not a sentence". tnum so the figures set on
   the same numerals as the prices. */
.arete-legal .legal-updated {
  margin: calc(0.75 * var(--leading)) 0 0;
  font-size: 12.5px; line-height: var(--leading);
  letter-spacing: 0.14em; text-transform: uppercase;
  font-feature-settings: "tnum" 1;
  color: var(--color-accent-700);
}

/* ══ the prose ═══════════════════════════════════════════════════════════ */

/* 62ch rather than the page's 58: a policy is read straight through rather than
   scanned, and the extra couple of words a line is what keeps a numbered clause
   from breaking every third word. Below ~700px this does nothing — the gutters
   are the whole margin. */
.arete-legal .legal-prose {
  max-width: 62ch;
  font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 88%, transparent);
}

/* Ragged right, not justified. The system asks for justified body text and the
   landing page sets none: at 390px with words like "personally identifiable" in
   them, justification opens rivers wide enough to read as a defect. */
.arete-legal .legal-prose p { margin: var(--leading) 0 0; text-wrap: pretty; }

/* Section heads. Each carries the hairline above it, which is the system's one
   divider and the only structure a long document needs — the first one doubles
   as the rule under the page title, which is why the head above prints none. */
.arete-legal .legal-prose h2 {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(24px, 6.2vw, 28px); line-height: 1.2; letter-spacing: -0.005em;
  margin: calc(1.5 * var(--leading)) 0 0;
  padding-top: calc(1.5 * var(--leading));
  border-top: 1px solid var(--color-divider);
  text-box: trim-both cap alphabetic;
  scroll-margin-top: var(--leading);
}
/* Sub-heads inside a section are set in the body face, not the display one: at
   17px Cormorant is lighter than the text it introduces and reads as a caption
   rather than a heading. Lora semibold is the interface weight for exactly this. */
.arete-legal .legal-prose h3 {
  font-family: var(--font-body); font-weight: 600;
  font-size: 15.5px; line-height: var(--leading); letter-spacing: 0.01em;
  margin: var(--leading) 0 0;
  scroll-margin-top: var(--leading);
}

.arete-legal .legal-prose ul,
.arete-legal .legal-prose ol { margin: calc(0.5 * var(--leading)) 0 0; padding-left: 1.35em; }
.arete-legal .legal-prose li { margin-top: calc(0.5 * var(--leading)); }
/* Color as stroke, per the system: the marker is the one place a list can take
   the accent without becoming a fill. */
.arete-legal .legal-prose li::marker { color: var(--color-accent); }
.arete-legal .legal-prose ol { font-feature-settings: "tnum" 1; }

/* Links inside the document are underlined — everywhere else on the site a link
   is identified by the accent alone, but a policy is dense enough that color on
   its own stops being noticeable. The offset keeps the rule off the descenders. */
.arete-legal .legal-prose a {
  color: var(--color-accent-700);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.arete-legal .legal-prose a:hover { color: var(--color-accent);
  text-decoration-color: currentColor; }

.arete-legal .legal-prose strong { font-weight: 600; }
/* An address block — the contact line at the foot of each policy — is prose, not
   a machine record, so the browser's italic default is turned off. */
.arete-legal .legal-prose address { font-style: normal; }

/* The footer already carries its own top rule (.footer-imprint), so the prose
   closes on air rather than on a second hairline. */
.arete-legal .arete-footer { margin-top: calc(2 * var(--leading)); }

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

/* Desktop is a later phase (CLAUDE.md). This block does one thing: the wrap opens
   to 1320px there, and a policy set across 1176px would be unreadable — so the
   column keeps its measure and sits at the start of the wrap, where every other
   section's content starts. */
@media (min-width: 880px) {
  .arete-legal .legal-head { padding-top: var(--leading); }
  .arete-legal .legal-title { font-size: 52px; }
  .arete-legal .legal-prose { font-size: 16.5px; }
}