/* /terms-and-conditions: the plain legal page. Loaded after /css/service.css on this
   page only. service.css sets the plain head and the .legal__body type.

   Blocks 1–3 are the shared legal pattern, copied from /css/pages/privacy.css as it
   stood on Sept 22, 19:23 (another agent was still editing that file, so this page
   does not load it). When the .legal rules move into service.css, delete blocks
   1–3 here. Block 4 onward is what a 25-section terms page adds (and overrides:
   block 4 re-spaces the "Section N" label, which is a sibling of the head here).  */

/* 1 · The text column and the contents list: stacked on phones and tablets; beside
   the text and sticky on desktop, where it is the reader's position cue (a legal
   page has no chapter bar). */
.legal__grid { display: grid; gap: var(--sc-7); }
@media (min-width: 1080px) {
  .legal__grid { grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); column-gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  .legal__body { grid-column: 1; grid-row: 1; }
  .legal__toc { grid-column: 2; grid-row: 1; position: sticky; top: var(--sc-6); max-height: calc(100vh - 2 * var(--sc-6)); overflow-y: auto; }
}
.legal__toc-h { margin: 0 0 var(--sc-3); color: var(--sc-ink-soft); }
.legal__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-top: 1px solid var(--sc-hairline); }
.legal__toc li { counter-increment: toc; border-bottom: 1px solid var(--sc-hairline); break-inside: avoid; }
.legal__toc a {
  display: grid; grid-template-columns: 1.5em minmax(0, 1fr); gap: var(--sc-3); align-items: baseline;
  padding: 0.6em 0 0.6em 0.7em; border-inline-start: 2px solid transparent;
  font-size: var(--sc-t-sm); line-height: 1.35; color: var(--sc-ink-soft); text-decoration: none; text-wrap: pretty;
  transition: color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
/* numbered 1–25 as the terms number themselves ("Section 25"), right-aligned */
.legal__toc a::before { content: counter(toc); justify-self: end; font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.legal__toc a[aria-current] { color: var(--sc-ink); border-inline-start-color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) { .legal__toc a:hover { color: var(--sc-ink); } }
@media (min-width: 640px) and (max-width: 1079px) { .legal__toc ol { columns: 2; column-gap: var(--sc-6); } .legal__toc li:first-child { border-top: 0; } }
@media (max-width: 860px) { .legal__toc a { min-height: 44px; align-items: center; padding-left: 0; } }

/* 1b · The ground's light falls off over the first screen and a half, so the long
   section doesn't grey toward the end. */
.legal { --wedge: linear-gradient(168deg, rgb(var(--sun) / 0.5) 0, rgb(var(--sun) / 0.15) 70vh, rgb(var(--sun) / 0) 140vh); }

/* 2 · The text: each section opens on a "Section N" label standing on a rule (the
   chapter eyebrow idiom), so the sections are easy to tell apart when scrolling
   and "Section 25 (Contact Us)" lands on a visible 25. */
.legal__body { font-size: var(--sc-t-base); line-height: 1.7; }
.legal__kicker { color: var(--sc-ink-soft); }
.legal__body h2 { text-wrap: balance; scroll-margin-top: var(--sc-5); }
.legal__eyebrow { display: block; margin: 0 0 var(--sc-5); padding-bottom: 0.95em; border-bottom: 1px solid var(--sc-hairline-strong); color: var(--sc-ink-soft); line-height: 1.4; }
.legal__body a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.legal__body li::marker { color: var(--sc-ink-soft); }
/* the all-caps paragraph: a ruled note, a size down so the caps don't shout */
.legal__caps { font-size: var(--sc-t-sm); line-height: 1.75; letter-spacing: 0.02em; padding-inline-start: var(--sc-5); border-inline-start: 2px solid var(--sc-hairline-strong); }
.legal__address { font-style: normal; display: grid; gap: 0.1em; padding-inline-start: var(--sc-5); border-inline-start: 2px solid var(--sc-hairline-strong); }
.legal__address a[href^="mailto:"] { overflow-wrap: anywhere; }

/* 3 · The footer on the forest ground it is drawn for (cream wordmark). */
.legal-foot { padding-block: var(--sc-8) var(--sc-7); }
.legal-foot .foot { margin-top: 0; padding-top: 0; border-top: 0; }

/* 4 · Section heads: the live page sets them in capitals. A step smaller than the
   privacy page's title-case heads and lightly tracked, so a two-line head
   ("Use of the Website – Submitted Content …") reads as a head, not a shout. */
.terms .legal__body h2 { font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.26; letter-spacing: 0.02em; }
/* The "Section N" label is the head's sibling, not inside the h2 (inside, the
   heading text ran the two numbers together: "Section 1010. DISCLAIMER"). It
   takes the head's top margin, and the head sits the same 1.5rem under its rule as
   before (grid gap 1rem + 0.5rem). It can't be selected, so a copied section starts
   "11. EXCLUSION OF LIABILITY", as on live. A jump to a head lands with its label
   1.5rem from the top: label box = 1.4 line + 0.95em padding + 1px rule. */
.terms .legal__body > .legal__eyebrow { margin: var(--sc-7) 0 0; color: var(--sc-ink-soft); -webkit-user-select: none; user-select: none; }
.terms .legal__body > .legal__eyebrow + h2 { margin-top: calc(var(--sc-5) - var(--sc-4)); scroll-margin-top: calc(2 * var(--sc-5) + 2.35 * var(--label-size) + 1px); }
/* Section 6's head: the defined term never splits across lines ("SUBMITTED
   CONTENT"), and the clause after the dash is one inline block, so it drops to the
   second line whole ("USE OF THE WEBSITE – / SUBMITTED CONTENT AND WAIVER OF MORAL
   RIGHTS") and only wraps inside itself where the column is too narrow for it. */
.terms .nw { white-space: nowrap; }
.terms .hd-clause { display: inline-block; }

/* 4b · The reading measure. The column is 68ch of the text face (778px at 1440,
   about 85 characters a line, up to 93); the running text is held to 42rem (about
   72–75 at 18px) and the heads and their rules keep the full column. Phones and
   1080px are narrower than this already. */
.terms .legal__body > :is(p, ul, ol, address):not(.legal__eyebrow) { max-width: 42rem; }

/* 5 · The (i), (ii) … runs: hanging numerals in their own column, as the live page
   sets them, so each clause starts on the same line. */
.terms .legal__roman { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); }
.terms .legal__roman > li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); column-gap: 0.5em; }
.terms .legal__roman--long > li { grid-template-columns: 3em minmax(0, 1fr); }
/* phones: the numeral column only as wide as "(iii)" / "(viii)" need, so the clause
   keeps the measure */
@media (max-width: 639px) {
  .terms .legal__roman > li { grid-template-columns: 1.85em minmax(0, 1fr); column-gap: 0.45em; }
  .terms .legal__roman--long > li { grid-template-columns: 2.3em minmax(0, 1fr); }
}
.terms .legal__rn { color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.terms .legal__roman li > div { display: grid; gap: var(--sc-2); }

/* 6 · "You acknowledge and agree to the following": the five clauses a little apart,
   and the first, the emergency notice, set as a ruled note (the page's device for
   a caps notice that must not be skimmed, as the "PLEASE READ…" paragraph), with a
   full-ink rule and at body size, not a size down: caps read slowest when small.
   Still the first item of the list; the bullet gives way to the rule, which stands
   on the column edge like the caps note's. */
.terms .legal__agree { gap: var(--sc-3); }
.terms .legal__agree > .legal__urgent {
  list-style: none; margin-inline-start: -1.2em; margin-block-end: var(--sc-2); padding-inline-start: var(--sc-5);
  border-inline-start: 2px solid var(--sc-ink);
  font-size: var(--sc-t-base); line-height: 1.6; letter-spacing: 0.02em; font-weight: 600;
}
.terms .legal__caps-run { letter-spacing: 0.015em; }

/* 7 · Contents. Desktop: open and sticky beside the text; rows a little tighter than
   the privacy page's so all 25 fit a 900px-tall window; on a shorter window the
   list scrolls itself to keep the current entry in view (page script) and fades
   at the edge that has more. Phones and tablets: a closed disclosure, so the
   text starts on the first screen. */
.terms .legal__toc-box > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  min-height: 44px; padding-block: var(--sc-2); border-block: 1px solid var(--sc-hairline-strong);
}
.terms .legal__toc-box > summary::-webkit-details-marker { display: none; }
.terms .legal__toc-box > summary .legal__toc-h { margin: 0; color: var(--sc-ink); }
.terms .legal__toc-count { display: inline-flex; align-items: center; gap: 0.75em; font-size: var(--sc-t-xs); letter-spacing: 0.08em; color: var(--sc-ink-soft); }
.terms .legal__toc-count::after {
  content: ''; width: 0.5em; height: 0.5em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-20%) rotate(45deg); transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.terms .legal__toc-box[open] .legal__toc-count::after { transform: translateY(20%) rotate(-135deg); }
.terms .legal__toc-box[open] > summary { border-bottom-color: transparent; }
.terms .legal__toc-box > summary:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 4px; }
/* the position bar's "Contents" lands the list clear of the top edge */
.terms .legal__toc-box { scroll-margin-top: var(--sc-5); }
@media (hover: hover) and (pointer: fine) { .terms .legal__toc-box > summary:hover .legal__toc-count { color: var(--sc-ink); } }

@media (min-width: 1080px) {
  .terms .legal__toc-box > summary { cursor: default; pointer-events: none; min-height: 0; padding-block: 0 var(--sc-3); border-block: 0; }
  .terms .legal__toc-box > summary .legal__toc-h { color: var(--sc-ink-soft); }
  .terms .legal__toc-count::after { display: none; }
  .terms .legal__toc a { padding-block: 0.32em; }
  .terms .legal__toc { scrollbar-width: thin; }
  .terms .legal__toc.is-more-below { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent); }
  .terms .legal__toc.is-more-above { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3rem); mask-image: linear-gradient(to bottom, transparent, #000 3rem); }
  .terms .legal__toc.is-more-above.is-more-below { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to bottom, transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
}

/* 8 · Phones and tablets (< 1080px): the position bar. Below 1080 the contents list
   is a disclosure at the top, and 33 screens down nothing said which section you
   were in or took you back to it (desktop's sticky list does both). Once the list
   has gone above the window, a small bar at the bottom right shows where you are,
   in two rows: "SECTION 7 OF 25" in label caps (the same words as the label on the
   rule above the head), then the section's Contents title in the text face, as the
   list sets it; beside it, a square olive "Contents" button like the chapter bar's
   "Book". The whole bar is one link to the list, which the page script opens.
   Hidden over the footer. */
.legal__where { display: none; }
@media (max-width: 1079px) {
  .legal__where {
    display: block; position: fixed; z-index: var(--sc-z-chrome);
    /* Sept 23: docked full width, on a solid ground with a hairline above, not a
       translucent card floating over the text. Floating, the lines scrolling under
       it showed on all four sides of it and read as copy cut through; docked, the
       text simply runs under the chrome edge, as it does under the masthead. */
    left: 0; right: 0; bottom: 0;
    padding: var(--sc-2) var(--sc-gutter) calc(var(--sc-2) + env(safe-area-inset-bottom, 0px));
    background: var(--cream); box-shadow: 0 -1px 0 var(--sc-hairline-strong);
    visibility: hidden; opacity: 0; transform: translateY(100%);
    transition: opacity var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-base) var(--sc-ease-out), visibility 0s linear var(--sc-d-base);
  }
  .legal__where.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) { .legal__where { transform: none; } }
@media print { .legal__where { display: none !important; } }
/* the docked bar is ~64px: focus and in-page jumps stop above it, not under it */
@media (max-width: 1079px) { html { scroll-padding-bottom: 5rem; } }
.legal__where-a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4); min-height: 48px; padding: 0;
  color: var(--sc-ink); text-decoration: none; font-family: var(--sc-font-text);
}
.legal__where-a:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }
.legal__where-at { display: grid; gap: 0.15rem; min-width: 0; }
.legal__where-c { color: var(--sc-ink-soft); line-height: 1.2; white-space: nowrap; }
.legal__where-t { min-width: 0; font-size: var(--sc-t-sm); font-weight: 500; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* before section 1 (the preamble) there is no section to show: just the button */
.legal__where:not(.is-sec) .legal__where-at { display: none; }
.legal__where:not(.is-sec) .legal__where-a { justify-content: flex-end; }
.legal__where-go {
  flex: none; display: inline-flex; align-items: center; gap: 0.55em; align-self: stretch; padding: 0 0.85em;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-size: var(--label-size); font-weight: 500; letter-spacing: var(--label-track); text-transform: uppercase;
}
/* an up-chevron: the list is above you */
.legal__where-go::after {
  content: ''; width: 0.45em; height: 0.45em; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: translateY(0.15em) rotate(45deg);
}
@media (hover: hover) and (pointer: fine) { .legal__where-a:hover .legal__where-go { background: color-mix(in oklab, var(--sc-accent) 84%, var(--sc-ink)); } }