/* Web: scale and rhythm for pages that scroll and resize.
   Requires core/tokens.css. Not shared with slide/, which is a fixed canvas. */

:root {
  /* Fluid type scale */
  --fs-display:  clamp(42px, 7vw, 84px);
  --fs-headline: clamp(26px, 3.4vw, 40px);
  --fs-quote:    clamp(24px, 3vw, 34px);
  --fs-lede:     clamp(18px, 2vw, 23px);
  --fs-body:     19px;
  --fs-small:    17px;
  --fs-micro:    15px;
  --fs-mono:     14px;

  --lh-display:  1.0;
  --lh-headline: 1.1;
  --lh-quote:    1.2;
  --lh-lede:     1.45;
  --lh-body:     1.55;

  /* Grid */
  --container:   1080px;
  --gutter:      40px;
  --gutter-sm:   24px;
  --grid-cols:   1fr 1.9fr;
  --grid-gap:    72px;
  --grid-gap-sm: 28px;

  /* Section rhythm */
  --space-section: 96px;
  --space-block:   72px;
  --space-item:    28px;
  --space-tight:   14px;

  /* Maximum line lengths */
  --measure-body: 56ch;
  --measure-lede: 52ch;

  --bp: 760px;
}

.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.row       { display: grid; grid-template-columns: var(--grid-cols); gap: var(--grid-gap); align-items: start; }

.t-display  { font-family: var(--ff-display); font-weight: 400; font-variation-settings: 'opsz' 72; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
.t-headline { font-family: var(--ff-display); font-weight: 400; font-variation-settings: 'opsz' 48; font-size: var(--fs-headline); line-height: var(--lh-headline); margin: 0; }
.t-quote    { font-family: var(--ff-display); font-style: italic; font-size: var(--fs-quote); line-height: var(--lh-quote); text-wrap: balance; margin: 0; }
.t-lede     { font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--inkSoft); max-width: var(--measure-lede); text-wrap: pretty; margin: 0; }
.t-body     { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure-body); text-wrap: pretty; margin: 0; }
.t-eyebrow  { font-weight: 500; font-size: var(--fs-micro); color: var(--accent); }
.t-num      { font-family: var(--ff-mono); font-size: var(--fs-mono); font-variant-numeric: tabular-nums; color: var(--inkMute); }

@media (max-width: 760px) {
  .container { padding-left: var(--gutter-sm); padding-right: var(--gutter-sm); }
  .row       { grid-template-columns: 1fr; gap: var(--grid-gap-sm); }
}