/* ============================================================
   compose.css — composure: frame, rhythm, measure
   29 Aug 2026

   Brief: "more sections, white space and elegance" — the
   qualities of the Watchtower site, not its skin. The palette,
   the faces and the ivory ground all stay exactly as they are.

   What was actually wrong, measured rather than guessed:

   1. THE FRAME WAS TOO WIDE. --max was 1560px. Nothing else in
      the design was built for a 1560px column, so lines ran long
      and the page read as sprawl rather than composure. The
      reference sits at 1280px. 1400 keeps this site's scale
      while pulling the edges in.

   2. THE RHYTHM WAS LUMPY, NOT GENEROUS. --bay was tied to vh
      (17vh), so section padding changed with window HEIGHT — a
      short laptop collapsed it to ~104px, a tall monitor blew it
      to 250px. Worse, adjacent sections were 3x apart: .thesis
      ran to 275px while .band sat at 86px. Air is only felt as
      elegance when it is even. Retied to vw and capped.

   3. ALMOST NOTHING HAD A MEASURE. Thirteen ch-caps on the whole
      homepage. Everything else ran the full container, which at
      1560px is well over 120 characters — roughly double what is
      comfortable. The single biggest lever here: a wide frame
      holding a NARROW column.

   4. THE LABEL RHYTHM WAS AD HOC. Every eyebrow sat a different
      distance from its heading. One interval, used everywhere,
      is most of what reads as "considered".

   Loaded last. Delete the <link> to revert entirely.
   ============================================================ */

/* ------------------------------------------------------------
   1 · FRAME
   ------------------------------------------------------------ */
:root{
  --max: 1400px;
  --gut: clamp(24px, 4.6vw, 76px);

  /* rhythm, tied to width not height, and capped */
  --bay:   clamp(92px, 9.2vw, 136px);   /* the default section */
  --bay-s: clamp(58px, 5.6vw, 82px);    /* evidence / marquee bands */
  --bay-l: clamp(116px, 12vw, 176px);   /* the two or three that carry weight */

  /* one interval, used everywhere */
  --step-label: 15px;   /* eyebrow  → heading */
  --step-lede:  24px;   /* heading  → lede     */
  --step-act:   42px;   /* lede     → action   */

  --hair: rgba(22,21,19,.085);
  --ease-c: cubic-bezier(.22,1,.36,1);
}

/* ------------------------------------------------------------
   2 · RHYTHM
   Every section on one scale. The exceptions are deliberate and
   few: the two dark argument bands get --bay-l, the evidence
   band stays tight so it reads as a footnote, not a chapter.
   ------------------------------------------------------------ */
.thesis, .enq{ padding: var(--bay-l) 0; }
.adv, .shell, .index{ padding: var(--bay) 0; }
.between, .her{ padding: 0 0 var(--bay); }
.band{ padding: var(--bay-s) 0; }

/* inner pages inherit the same scale */
.sec, .phead, .rooms, .method-band, .closing, .sec.dark, .sec.plum, .sec.bone{
  padding-top: var(--bay);
  padding-bottom: var(--bay);
}
.phead{ padding-top: clamp(150px, 17vh, 210px); }

/* ------------------------------------------------------------
   3 · MEASURE
   A wide frame around a narrow column. Nothing runs the
   container. These caps are the difference between "airy" and
   "unfinished".
   ------------------------------------------------------------ */
.lede, .prose p, p.body, .thesis p, .shell p, .adv p,
.between p, .her p, .arrive .line, .cell p, .diag p{
  max-width: 64ch;
}
.lede, .arrive .line, .close .body{ max-width: 58ch; }
.thesis p, .enq p{ max-width: 54ch; }
.cell p, .oc p, .spec p, .expect p{ max-width: 42ch; }
.lw-note{ max-width: 62ch; }

/* headings break where they should, rather than where the
   container happens to end */
.thesis h2{ max-width: 15ch; }
.shell h2, .adv h2, .enq h2{ max-width: 17ch; }
.head-row h2{ max-width: 18ch; }
h2.display{ max-width: 19ch; }

/* ------------------------------------------------------------
   4 · THE LABEL → HEADING → LEDE INTERVAL
   One rhythm, applied everywhere, is most of what separates a
   considered page from a template.
   ------------------------------------------------------------ */
.label, .dn{
  display: block;
  margin-bottom: var(--step-label);
}
/* .band .meta carries the marquee and keeps its own larger drop */
.band .meta{ margin-bottom: clamp(30px,3.4vw,44px); }
.head-row h2 + p,
.phead h1 + .lede,
.lede{ margin-top: var(--step-lede); }
.cta-row, .acts, .btn-row{ margin-top: var(--step-act); }

/* the eyebrow itself, opened up. Note: NO padding-left here —
   that trick only applies to centred wide-tracked text, where the
   trailing letter-space pushes the line off-axis. On left-aligned
   labels it would break them off the margin instead. */
.label, .meta{
  letter-spacing: .28em;
  font-size: .68rem;
}
/* centred labels get the optical compensation */
.quote .label, .close .label, [style*="text-align:center"] > .label{
  padding-left: .28em;
}

/* ------------------------------------------------------------
   5 · WEIGHT
   Cormorant at 300 goes spindly between 2rem and 4rem — the
   sizes most headings actually sit at. It holds at 300 only
   when it is very large. Lift the middle of the scale to 400
   and leave the hero alone.
   ------------------------------------------------------------ */
.shell h2, .adv h2, .head-row h2, h2.display, .enq h2,
.mich h2, .between h2, .her h2, .cy, .rname, .ctitle{
  font-weight: 400;
  letter-spacing: -.018em;
}
.arrive h1, .thesis h2{ font-weight: 300; }   /* the very large ones stay light */

/* ------------------------------------------------------------
   6 · HAIRLINES
   Three weights were in play. One, used consistently, reads as
   a system; three read as accretion.
   ------------------------------------------------------------ */
.bordered, .bordered .cell, .grid-3 .cell, .drow, .arow, .stratum{
  border-color: var(--hair) !important;
}
/* the logo wall is deliberately unruled — see about.html */

/* single-pixel grid rules with no doubling — the gap IS the rule */
.grid-3.bordered{
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.grid-3.bordered .cell{ border: 0; background: var(--paper); }

/* ------------------------------------------------------------
   7 · RADIUS
   Nothing rounder than 3px. Soft corners at this scale read as
   software; sharp ones read as print.
   ------------------------------------------------------------ */
.btn, .field, input, textarea, select, .cell, .tile, .card, .spec, .diag{
  border-radius: 3px;
}

/* ------------------------------------------------------------
   8 · MOTION, RESTRAINED
   craft.css moved reveals 34px over 1.35s, which at this page
   length reads as a slideshow. A 14px rise over .55s is felt
   without being watched.
   ------------------------------------------------------------ */
.rv{
  transform: translateY(14px);
  transition: opacity .55s var(--ease-c), transform .55s var(--ease-c);
}
.rv.in{ transform: none; }
.rv.d1{ transition-delay: .05s }
.rv.d2{ transition-delay: .10s }
.rv.d3{ transition-delay: .15s }

@media (prefers-reduced-motion: reduce){
  .rv{ transform: none; transition: opacity .2s linear; }
}

/* ------------------------------------------------------------
   9 · MOBILE
   The reference gets MORE generous as it narrows, not less.
   ------------------------------------------------------------ */
@media (max-width: 760px){
  :root{ --gut: 24px; }
  .lede, .prose p, p.body, .arrive .line{ max-width: none; }
}