/* ═══════════════════════════════════════════════════════════════════
   Seriate. INNER PAGES.
   Loaded by /features, /about, /contact, /terms, /privacy, /cookies
   and /404.html. Not loaded by the home page.

   Same publication, calmer register. The chrome, type scale, palette,
   spacing rhythm, focus states and entrance motion all come from
   core.css. What is here is the long-form apparatus the home page has
   no use for: a page head at reading scale, a two-column document
   setting, the draft banner on the legal sheets, and the 404.

   Nothing on these pages animates beyond the shared reveal. No
   tablist, no odometer, no halftone. A privacy policy does not need a
   canvas.
   ═══════════════════════════════════════════════════════════════ */

/* ── the page head: the masthead at reading scale ─────────────────── */
.pagehead{ padding-block:clamp(2.2rem,4vw,3.6rem) clamp(2rem,3.4vw,3.2rem); }
.pg-title{
  font-size:clamp(2.3rem,7.2vw,5.4rem);
  margin-block:clamp(1.1rem,2.2vw,1.9rem) 0;
}
.pg-title em{ font-style:italic; font-weight:500; color:var(--violet); }
.pg-deck{
  font-size:clamp(1.04rem,1.25vw,1.28rem); line-height:1.55;
  max-width:38ch; margin:1.5rem 0 0; color:var(--ink);
}
.pg-deck b{ font-weight:600; }
.pg-margin{
  margin-top:1.7rem; padding-top:.8rem;
  border-top:1px solid var(--rule);
  font-size:.92rem; line-height:1.5; color:var(--ink-2);
  max-width:32ch;
}
.pg-margin strong{ color:var(--ink); font-weight:600; }
.pg-acts{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem; align-items:center; }

/* ── the draft banner on the legal sheets ─────────────────────────── */
.draft{
  background:var(--paper-2);
  border-top:2px solid var(--violet);
  border-bottom:1px solid var(--rule);
}
.draft-in{
  max-width:1560px; margin-inline:auto;
  padding:.95rem var(--gut);
  display:grid; gap:.55rem;
}
.draft-in p{ margin:0; font-size:.95rem; line-height:1.5; max-width:74ch; }
.draft-in strong{ font-weight:600; }

/* ── the document setting: heading left, text right ───────────────── */
.doc{ padding-block:0 clamp(3.2rem,6vw,6.5rem); counter-reset:sec; }
.doc-sec{ counter-increment:sec; padding-block:clamp(1.4rem,2.4vw,2.1rem); border-top:1px solid var(--rule-soft); }
.doc-sec:first-of-type{ border-top:2px solid var(--ink); }
.doc-h{ display:grid; gap:.3rem; align-content:start; }
.doc-h .folio::before{ content:counter(sec,decimal-leading-zero); }
.doc-h h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.3rem,2vw,1.72rem); line-height:1.15; letter-spacing:-.01em;
  text-wrap:balance;
}
.doc-t > *{ margin:0; }
.doc-t > * + *{ margin-top:.85rem; }
.doc-t p{ font-size:1rem; line-height:1.62; max-width:66ch; }
.doc-t strong{ font-weight:600; }
.doc-t em{ font-style:italic; }
/* buttons keep their own furniture: they are not prose links */
.doc-t a:not(.btn){ color:var(--violet-ink); text-decoration:underline; }
.doc-t a:not(.btn):hover{ color:var(--violet); }
.doc-t ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; max-width:64ch; }
.doc-t li{ padding-left:1.1rem; position:relative; font-size:1rem; line-height:1.5; }
.doc-t li::before{ content:""; position:absolute; left:0; top:.66em; width:.5rem; height:1.5px; background:var(--violet); }
.doc-t .lede{ font-size:1.06rem; }
.doc-note{
  margin-top:1.6rem; padding-top:.75rem; border-top:1px solid var(--rule);
  font-size:.88rem; line-height:1.5; color:var(--ink-2); max-width:60ch;
}

/* ── plain sections on the softer pages ───────────────────────────── */
.body-t{ display:grid; gap:.95rem; }
.body-t p{ margin:0; font-size:1.02rem; line-height:1.62; max-width:62ch; }
.body-t p.lede{ font-size:clamp(1.06rem,1.3vw,1.26rem); line-height:1.5; max-width:46ch; }
.body-t strong{ font-weight:600; }
.body-t a:not(.btn){ color:var(--violet-ink); text-decoration:underline; }
.body-t a:not(.btn):hover{ color:var(--violet); }

/* the verso leaf, for a section that should read as a different stock */
.leaf{ background:var(--paper-2); border-block:1px solid var(--rule); }

/* ── pairs: a label and a value, set as a slip ────────────────────── */
.pairs{ margin:0; padding:0; }
.pairs div{ padding:.95rem 0; border-top:1px solid var(--rule-soft); }
.pairs div:first-child{ border-top:2px solid var(--ink); }
.pairs dt{
  font-family:var(--app); font-variation-settings:"wdth" 88;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:.35rem;
}
.pairs dd{ margin:0; font-size:1.02rem; line-height:1.5; max-width:50ch; }
.pairs dd a{ color:var(--violet-ink); text-decoration:underline; }
.pairs dd a:hover{ color:var(--violet); }
.pairs .addr{
  font-family:var(--display); font-weight:700; font-size:clamp(1.15rem,2.2vw,1.7rem);
  letter-spacing:-.01em; word-break:break-word;
}
/* a gloss under a pair. Sentence case: a full sentence in uppercase
   apparatus type is a label pretending to be prose, and it reads badly. */
.pairs dd.note{
  margin-top:.35rem; font-size:.88rem; line-height:1.5;
  color:var(--ink-2); max-width:46ch;
}

/* ── 404 ──────────────────────────────────────────────────────────── */
.nf{ padding-block:clamp(3.4rem,8vw,7rem); }
.nf-fig{ line-height:.82; }
.nf-links{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:1.6rem; }
.nf-links a{
  font-family:var(--app); font-size:.72rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-2);
  border-bottom:1.5px solid var(--rule); padding-bottom:.15rem;
  transition:color .25s var(--settle), border-color .25s var(--settle);
}
.nf-links a:hover{ color:var(--violet); border-color:var(--violet); }

/* ═══ the press grid arrives ═══════════════════════════════════════ */
/* Every placement rule below is scoped to a direct child of a sheet or a
   doc section. An unscoped `grid-column` matches inside any grid it is
   nested in, including .body-t, where it silently creates implicit
   columns and lays a stack of paragraphs out side by side. */
@media (min-width:901px){
  .sheet > .pg-title{ grid-column:1 / 11; }
  .sheet > .pg-deck{ grid-column:1 / 6; margin-top:2.1rem; }
  .sheet > .pg-margin{ grid-column:7 / 11; margin-top:2.1rem; }
  .sheet > .pg-acts{ grid-column:1 / 7; }

  .draft-in{ padding-inline:var(--gut); }

  .sheet > .doc-sec{
    grid-column:1 / 13;
    display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--col-gap);
  }
  .doc-sec > .doc-h{ grid-column:1 / 4; }
  .doc-sec > .doc-t{ grid-column:5 / 11; }
  .sheet > .doc-note{ grid-column:5 / 11; }

  /* placement helpers: the press grid, named once */
  .sheet > .set-full{ grid-column:1 / 13; }
  .sheet > .set-left{ grid-column:1 / 4; }
  /* a heading held in the left columns with its text beside it, the way
     the ledger is set on the home page */
  .sheet > .set-head{ grid-column:1 / 5; }
  .sheet > .set-body{ grid-column:6 / 13; }
  .sheet > .set-mid{ grid-column:1 / 8; }
  .sheet > .set-right{ grid-column:5 / 13; }
  .sheet > .set-far{ grid-column:8 / 13; }
  .sheet > .hold{ align-self:start; position:sticky; top:7rem; }

  .cat.two{ columns:2; column-gap:clamp(1.6rem,3vw,3.2rem); column-rule:1px solid var(--rule-soft); }

  .sheet > .entry.col-a{ grid-column:1 / 5; }
  .sheet > .entry.col-b{ grid-column:6 / 13; }

  .sheet > .nf-fig{ grid-column:1 / 5; }
  .sheet > .nf-body{ grid-column:6 / 12; align-self:end; }
}

@media (min-width:1180px){
  /* the draft banner sits inside the running head's measure, so it needs
     the same rail indent the sheet gets */
  .draft-in{ padding-left:calc(var(--gut) + var(--rail)); }
}

@media (max-width:470px){
  /* the same full-bleed stack the masthead actions use on the home page */
  .pg-acts .btn{ flex:1 1 auto; }
}

@media (max-width:900px){
  /* a one-column sheet has no gutter, so blocks that sit side by side on
     the press grid need their own leading */
  .doc-h{ margin-bottom:.7rem; }
  .set-far{ margin-top:2.2rem; }
  .spec{ margin-bottom:1.6rem; }
  .entry.col-b{ margin-top:2.2rem; }
  .nf-body{ margin-top:1.6rem; }
}