/* ═══════════════════════════════════════════════════════════════════
   BEREE / INNER PAGE SHELL
   Loaded by every page except index.html. This is the calmer register
   of the same publication: identical chrome, type scale, palette,
   spacing rhythm and focus states as the home page, with none of the
   signature interactions. A privacy policy does not need a canvas.

   Anything only one inner page needs lives in its own file
   (features.css, contact.css) and is loaded after this one.
   ═══════════════════════════════════════════════════════════════════ */

/* ── masthead ───────────────────────────────────────────────────── */
.page-head{ padding-top:clamp(2.4rem,5vw,4.2rem); padding-bottom:clamp(2.4rem,5vw,4rem); }
.page-head .stamp{ margin-bottom:clamp(1.6rem,4vw,2.8rem); }
/* start-aligned: the meta list is usually taller than the lede, and
   end-alignment left a hole under short headlines on the legal pages. */
.page-grid{ row-gap:clamp(1.6rem,3.5vw,2.6rem); align-items:start; }
.page-grid .page-lede,.page-grid .page-meta{ margin-top:clamp(1rem,2.5vw,2rem); }
.page-title{ grid-column:1/-1; }
@media (min-width:900px){ .page-title{ grid-column:1/10; } }
.page-lede{ grid-column:1/-1; }
@media (min-width:900px){ .page-lede{ grid-column:1/7; } }
.page-meta{ grid-column:1/-1; align-self:end; }
@media (min-width:900px){ .page-meta{ grid-column:9/13; } }

/* the spec list: the hero note's language, promoted for reuse */
.spec{ margin:0; border-top:1px solid var(--rule); }
.spec > div{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.2rem 1rem;
             padding:.6rem 0; border-bottom:1px solid var(--rule); }
.spec dt{ font-family:var(--f-m); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
          color:var(--dimmer); white-space:nowrap; }
.spec dd{ margin:0; font-family:var(--f-m); font-size:11px; letter-spacing:.06em; color:var(--bone);
          text-align:right; }

/* ── document layout: sticky contents beside long-form prose ────── */
.doc{ row-gap:clamp(2rem,4vw,3rem); align-items:start; }
.doc-nav{ grid-column:1/-1; }
@media (min-width:980px){
  .doc-nav{ grid-column:1/4; position:sticky; top:88px; }
}
.doc-nav p{ font-family:var(--f-m); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
            color:var(--dimmer); padding-bottom:.7rem; border-bottom:1px solid var(--rule); }
.doc-nav ol{ counter-reset:doc; }
.doc-nav li{ counter-increment:doc; border-bottom:1px solid var(--rule); }
.doc-nav a{
  display:grid; grid-template-columns:2.4em 1fr; gap:.4rem; align-items:baseline;
  padding:.6rem 0; font-family:var(--f-m); font-size:11.5px; letter-spacing:.03em;
  color:var(--dim); text-decoration:none; transition:color .22s var(--e-out);
}
.doc-nav a::before{ content:counter(doc,decimal-leading-zero); color:var(--dimmer); }
.doc-nav a:hover{ color:var(--coral); }
.doc-nav a:hover::before{ color:var(--coral); }
.doc-body{ grid-column:1/-1; }
@media (min-width:980px){ .doc-body{ grid-column:5/13; } }

/* heading on the left, its answer on the right: the home page's
   section rhythm, reused wherever an inner page runs several of them */
.qa{ row-gap:clamp(1.8rem,4vw,2.8rem); }
.qa > .qa-k,.qa > .qa-v{ grid-column:1/-1; }
@media (min-width:900px){
  .qa > .qa-k{ grid-column:1/5; }
  .qa > .qa-v{ grid-column:5/13; }
}
.qa-k{ align-self:start; }

/* two unequal columns, for a pulled fact beside a run of text */
.split{ row-gap:clamp(1.6rem,3.5vw,2.4rem); }
.split > *{ grid-column:1/-1; }
@media (min-width:900px){
  .split > .split-a{ grid-column:1/6; }
  .split > .split-b{ grid-column:7/13; }
}

/* ── long-form prose ────────────────────────────────────────────── */
.prose{ max-width:min(68ch,100%); }
.prose > * + *{ margin-top:1.05rem; }
.prose h2{
  font-family:var(--f-d); text-transform:uppercase; font-variation-settings:'wdth' 90,'wght' 700;
  font-size:clamp(1.3rem,2.5vw,1.9rem); line-height:1; letter-spacing:-.014em; color:var(--bone);
  margin-top:clamp(2.4rem,5vw,3.4rem); padding-top:1.3rem; border-top:1px solid var(--rule);
  scroll-margin-top:84px;
}
.prose h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.prose h3{
  font-family:var(--f-m); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--coral); margin-top:1.7rem;
}
.prose p{ color:var(--dim); line-height:1.62; }
.prose strong{ color:var(--bone); font-variation-settings:'wdth' 100,'wght' 600; }
.prose em{ font-style:normal; color:var(--bone); }
.prose a{ color:var(--bone); text-decoration:underline; text-underline-offset:.22em;
          text-decoration-color:var(--coral); text-decoration-thickness:1px; }
.prose a:hover{ color:var(--coral); }
.prose ul{ display:grid; gap:.5rem; }
.prose ul li{ position:relative; padding-left:1.4rem; color:var(--dim); line-height:1.55; }
.prose ul li::before{ content:'/'; position:absolute; left:0; top:0; color:var(--coral); font-family:var(--f-m); }
.prose code, .prose .wire{
  font-family:var(--f-m); font-size:.86em; letter-spacing:.02em; color:var(--bone);
  background:var(--ink-2); border:1px solid var(--rule); padding:.1em .4em;
}
.prose .mark{ color:var(--coral); font-family:var(--f-m); font-size:.82em; font-weight:700;
              letter-spacing:.1em; text-transform:uppercase; }

/* ── draft banner: legal pages only ─────────────────────────────── */
.draft{
  grid-column:1/-1; border:2px solid var(--coral); background:var(--ink-2);
  padding:clamp(1rem,2.4vw,1.4rem) clamp(1rem,2.4vw,1.6rem);
  display:grid; gap:.6rem; margin-bottom:clamp(2rem,4vw,3rem);
}
.draft .tag{
  font-family:var(--f-m); font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--coral);
  display:flex; align-items:center; gap:.6rem;
}
.draft .tag::before{ content:''; width:9px; height:9px; background:var(--coral); flex:none; }
@media (min-width:900px){
  /* the notice fills its box instead of leaving half of it empty */
  .draft{ grid-template-columns:minmax(0,13rem) minmax(0,1fr); column-gap:clamp(1.5rem,3vw,2.6rem); }
  .draft .tag{ grid-column:1; align-items:flex-start; }
  .draft p{ grid-column:2; }
}
.draft p{ font-family:var(--f-m); font-size:11.5px; line-height:1.7; color:var(--dim);
          letter-spacing:.02em; max-width:min(76ch,100%); }
.draft p b{ color:var(--bone); font-weight:700; }
.draft a{ color:var(--bone); text-decoration:underline; text-underline-offset:.22em;
          text-decoration-color:var(--coral); text-decoration-thickness:1px; }
.draft a:hover{ color:var(--coral); }

/* ── numbered rows: the commitments language, calmer ────────────── */
.rows{ border-top:1px solid var(--rule); }
/* Placement is explicit in both directions. Auto-placement stacked the
   key into the wide column on narrow screens and read as right-aligned. */
.rows li{
  display:grid; grid-template-columns:2.6rem minmax(0,1fr);
  gap:.45rem clamp(1rem,3vw,2.4rem);
  padding:clamp(.9rem,2vw,1.4rem) 0; border-bottom:1px solid var(--rule);
}
.rows .r-no{ grid-column:1; grid-row:1; }
.rows .r-k{ grid-column:2; grid-row:1; }
.rows .r-v{ grid-column:2; grid-row:2; }
@media (min-width:820px){
  .rows li{ grid-template-columns:2.6rem minmax(0,1fr) minmax(0,1.6fr); align-items:baseline; }
  .rows .r-v{ grid-column:3; grid-row:1; }
}
.rows .r-no{ font-family:var(--f-m); font-size:10.5px; letter-spacing:.14em; color:var(--dimmer);
             padding-top:.3rem; }
.rows .r-k{ font-family:var(--f-d); text-transform:uppercase;
            font-variation-settings:'wdth' 90,'wght' 700; letter-spacing:-.01em;
            font-size:clamp(1.05rem,2vw,1.45rem); line-height:1.02; }
.rows .r-v{ color:var(--dim); font-size:clamp(.95rem,1.1vw,1.05rem); line-height:1.55;
            max-width:min(62ch,100%); }
.rows .r-v b{ color:var(--bone); font-variation-settings:'wdth' 100,'wght' 600; }
.rows .r-v a{ color:var(--bone); text-decoration:underline; text-underline-offset:.22em;
              text-decoration-color:var(--coral); text-decoration-thickness:1px; }
.rows .r-v a:hover{ color:var(--coral); }
.rows li:hover .r-k{ color:var(--coral); }

/* ── callout: one fact, pulled out of the run of text ───────────── */
.callout{
  border-left:2px solid var(--coral); background:var(--ink-2);
  padding:clamp(1.1rem,2.4vw,1.5rem) clamp(1.1rem,2.4vw,1.7rem);
  display:grid; gap:.55rem;
}
.callout .k{ font-family:var(--f-m); font-size:10.5px; font-weight:700; letter-spacing:.16em;
             text-transform:uppercase; color:var(--coral); }
.callout .n{ font-family:var(--f-d); font-variation-settings:'wdth' 78,'wght' 800;
             font-size:clamp(2.4rem,6vw,4.2rem); line-height:.86; letter-spacing:-.03em; }
.callout .n sub{ font-family:var(--f-m); font-size:11px; font-weight:700; letter-spacing:.14em;
                 text-transform:uppercase; color:var(--dim); vertical-align:baseline; bottom:0;
                 margin-left:.5rem; }
.callout p{ color:var(--dim); max-width:min(58ch,100%); line-height:1.55; }
.callout p b{ color:var(--bone); font-variation-settings:'wdth' 100,'wght' 600; }

/* ── inner-page closer ──────────────────────────────────────────── */
.tail{ border-top:2px solid var(--coral); padding-block:clamp(3rem,7vw,5.5rem); }
.tail h2{ margin-top:1rem; }
.tail-loc{ font-family:var(--f-m); font-size:clamp(11px,1.15vw,13px); letter-spacing:.12em;
           text-transform:uppercase; color:var(--dimmer); }
.tail-loc b{ color:var(--coral); font-weight:700; }
.tail-row{ display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:center;
           margin-top:clamp(1.8rem,3.5vw,2.6rem); border-top:1px solid var(--rule); padding-top:1.5rem; }
.tail-row p{ font-family:var(--f-m); font-size:11px; letter-spacing:.06em; color:var(--dim);
             max-width:min(46ch,100%); }

/* ── fine print ─────────────────────────────────────────────────── */
.fine{ font-family:var(--f-m); font-size:11px; line-height:1.7; color:var(--dimmer);
       letter-spacing:.03em; max-width:min(76ch,100%); }
.fine a{ color:var(--dim); text-decoration:underline; text-underline-offset:.22em;
         text-decoration-color:var(--rule); }
.fine a:hover{ color:var(--coral); text-decoration-color:var(--coral); }