/* ═══════════════════════════════════════════════════════════════════
   Seriate. HOME PAGE ONLY.
   Loaded by / and by nothing else. Everything in this file belongs to
   one of the seven signatures on the masthead sheet: the specimen
   plate, the composing room, the ledger, the catalogue, the house
   rules, the plan entries and the closer.

   If you find yourself wanting a rule from this file on another page,
   move it to core.css rather than copying it.
   ═══════════════════════════════════════════════════════════════ */

/* ── I. masthead ──────────────────────────────────────────────────── */
.masthead{ padding-block:clamp(2.6rem,5vw,4.6rem) clamp(3rem,5vw,5rem); }
.mh-title{
  font-size:clamp(2.6rem,11.8vw,9.2rem);
  margin-block:clamp(1.4rem,2.6vw,2.4rem) 0;
}
.mh-title .l2{ display:block; text-indent:.12em; }
.mh-title em{ font-style:italic; font-weight:500; color:var(--violet); }
.mh-deck{
  font-size:clamp(1.06rem,1.35vw,1.4rem); line-height:1.5;
  max-width:34ch; margin:1.7rem 0 0; color:var(--ink);
}
.mh-deck b{ font-weight:600; }
.mh-margin{
  margin-top:2rem; padding-top:.85rem;
  border-top:1px solid var(--rule);
  font-size:.92rem; line-height:1.5; color:var(--ink-2);
  max-width:30ch;
}
.mh-margin strong{ color:var(--ink); font-weight:600; }
.mh-acts{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; align-items:center; }
.mh-fine{ font-family:var(--app); font-size:.74rem; letter-spacing:.06em; color:var(--ink-2); margin:.9rem 0 0; }

/* the specimen plate under the masthead */
.plate{
  margin-top:clamp(2.2rem,4vw,3.4rem);
  border-top:2px solid var(--ink);
  padding-top:.55rem;
  display:grid; gap:.5rem;
}
.plate-bars{ display:grid; grid-template-columns:repeat(48,1fr); gap:3px; height:clamp(46px,6vw,84px); align-items:end; }
.plate-bars i{
  display:block; background:var(--ink); opacity:.14;
  height:var(--h,30%); transform:scaleY(0); transform-origin:bottom;
  transition:transform .7s var(--mech) var(--bd,0s), opacity .5s linear var(--bd,0s);
}
.plate-bars i.v{ background:var(--violet); opacity:.9; }
.set .plate-bars i, .is-set .plate-bars i{ transform:none; }
.plate-cap{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* ── II. the composing room ───────────────────────────────────────── */
.room{ background:var(--paper-2); border-block:1px solid var(--rule); }
.jobs{
  list-style:none; margin:0 0 1.4rem; padding:0;
  display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:thin;
  border-bottom:1px solid var(--rule);
}
.jobs::-webkit-scrollbar{ height:3px; }
.job{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--app); font-size:.74rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2);
  padding:.6rem .75rem .55rem; position:relative; white-space:nowrap;
  transition:color .25s var(--settle);
}
.job em{ font-style:normal; font-variation-settings:"wdth" 70; opacity:.6; margin-right:.45rem; }
.job::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--violet); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--mech);
}
.job:hover{ color:var(--ink); }
.job[aria-selected="true"]{ color:var(--ink); }
.job[aria-selected="true"] em{ opacity:1; color:var(--violet); }
.job[aria-selected="true"]::after{ transform:none; }
.job[aria-selected="true"].timing::after{ animation:tick 5s linear forwards; }
@keyframes tick{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.stick{
  border:1px solid var(--rule); background:var(--paper-hi);
  display:grid; grid-template-rows:auto 1fr auto;
  min-height:clamp(300px,40vw,392px);
}
.stick-slug{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  padding:.6rem .95rem; border-bottom:1px solid var(--rule-soft);
  background:var(--paper);
}
.stick-slug .model{
  font-family:var(--app); font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--paper-hi); background:var(--violet);
  padding:.22rem .5rem;
}
.stick-slug .meta{ font-family:var(--app); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.stick-slug .meta.right{ margin-left:auto; }
.panel{ padding:clamp(1rem,2vw,1.6rem); display:none; }
.panel.on{ display:block; }
.line{ overflow:hidden; }
.line > span{
  display:block;
  transform:translateY(105%);
  transition:transform .62s var(--mech) calc(var(--i,0) * 55ms);
}
.panel.on .line > span{ transform:none; }
.prose-set{ font-size:1.02rem; line-height:1.62; max-width:34em; }
.prose-set .line{ margin:0; }
.prose-set .line > span{ padding-block:.02em; }
.codeset{
  font-family:var(--app); font-variation-settings:"wdth" 88;
  font-size:.86rem; line-height:1.75; color:var(--ink);
}
.codeset .k{ color:var(--violet); font-weight:600; }
.codeset .c{ color:var(--ink-2); }
.codeset .ln{ display:inline-block; width:2ch; color:var(--rule); }
.tscript{ display:grid; gap:.5rem; }
.tscript .t{ display:grid; grid-template-columns:5.2rem 1fr; gap:.8rem; align-items:baseline; }
.tscript .tc{ font-family:var(--app); font-size:.72rem; letter-spacing:.08em; color:var(--violet); font-variation-settings:"wdth" 78; }
/* a coarse halftone screen: dot size carries the value, as it would on press */
.halftone{
  display:grid; grid-template-columns:repeat(28,1fr); grid-template-rows:repeat(15,1fr);
  aspect-ratio:28/15; place-items:center;
}
.halftone i{
  display:block; width:100%; aspect-ratio:1; border-radius:50%;
  background:var(--ink);
  transform:scale(0); transition:transform .5s var(--mech) var(--hd,0s);
}
.panel.on .halftone i{ transform:scale(var(--s,1)); }
.stick-foot{
  border-top:1px solid var(--rule-soft); padding:.6rem .95rem;
  display:flex; gap:.8rem; flex-wrap:wrap; align-items:center;
  font-family:var(--app); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2);
}
.stick-foot .right{ margin-left:auto; }
.key{ margin-top:1.6rem; padding-top:.7rem; border-top:1px solid var(--rule); }
.key ul{ list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:.28rem; }
.key li{
  font-family:var(--display); font-weight:600; font-size:1.05rem;
  padding-left:1rem; position:relative;
}
.key li::before{ content:""; position:absolute; left:0; top:.62em; width:.5rem; height:1.5px; background:var(--violet); }
.key p{ margin:.9rem 0 0; font-size:.86rem; line-height:1.5; color:var(--ink-2); max-width:34ch; }
.room-note{ margin-top:1.1rem; }
.room-note p{ margin:.5rem 0 0; font-size:.88rem; line-height:1.5; color:var(--ink-2); max-width:46ch; }

/* ── III. the ledger ──────────────────────────────────────────────── */
.ledger{ display:grid; gap:0; }
.lrow{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:baseline; gap:.5rem;
  padding:.72rem 0; border-bottom:1px solid var(--rule-soft);
  cursor:pointer; position:relative;
  transition:opacity .35s var(--settle);
}
.lrow input{ position:absolute; opacity:0; width:1px; height:1px; }
.lrow .quad{
  width:1.05rem; height:1.05rem; border:1.5px solid var(--ink);
  display:inline-block; position:relative; flex:0 0 auto; align-self:center;
  transition:background .25s var(--mech), border-color .25s var(--mech);
}
.lrow .quad::after{
  content:""; position:absolute; inset:2px; background:var(--violet);
  transform:scale(1); transition:transform .25s var(--mech);
}
.lrow input:not(:checked) ~ .quad::after{ transform:scale(0); }
.lrow input:focus-visible ~ .quad{ outline:2px solid var(--violet); outline-offset:3px; }
.lrow .lname{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .7rem; position:relative; }
.lrow .lname b{ font-weight:600; font-size:1.02rem; }
.lrow .lname s{ text-decoration:none; }
.lrow .lname em{ font-style:normal; font-family:var(--app); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); }
.lrow .lamt{
  font-family:var(--display); font-size:1.3rem; font-weight:600;
  font-variant-numeric:lining-nums tabular-nums;
}
/* the strike: a rule drawn through a cancelled line */
.lrow .strike{
  position:absolute; left:0; right:0; top:.62em; height:1.5px; background:var(--ink);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--mech);
}
.lrow input:not(:checked) ~ .lname .strike{ transform:none; }
.lrow:has(input:not(:checked)){ opacity:.42; }
.lrow:hover .quad{ border-color:var(--violet); }

.ltotal{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:1rem;
  padding-top:1rem; margin-top:.2rem;
  border-top:2px solid var(--ink);
}
.ltotal .lbl{ font-family:var(--app); font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); max-width:22ch; }
.ledger-note{ font-size:.88rem; color:var(--ink-2); margin:1rem 0 0; max-width:46ch; }

/* the digit reels: only the ledger total and the plan figure roll */
.reels{ display:inline-flex; align-items:center; }
.dr{ display:inline-block; overflow:hidden; height:1.06em; width:1ch; }
.dr-col{
  display:block;
  transform:translateY(calc(var(--n,0) * -1.06em));
  transition:transform .82s var(--mech) calc(var(--p,0) * 55ms);
}
.dr-col span{ display:block; height:1.06em; line-height:1.06em; text-align:center; }
.dr.blank{ width:0; }

.answer{
  background:var(--violet); color:var(--paper-hi);
  padding:clamp(1.3rem,2.4vw,2rem);
  display:grid; gap:.7rem;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .9s var(--mech) .25s;
}
.is-set .answer{ clip-path:inset(0 0 0 0); }
.answer .app{ color:color-mix(in srgb, var(--paper-hi) 74%, var(--violet)); }
.answer .figure{ font-size:clamp(3.2rem,6.6vw,5.2rem); }
.answer p{ margin:0; font-size:1rem; line-height:1.5; color:color-mix(in srgb,var(--paper-hi) 90%, var(--violet)); max-width:38ch; }
.answer .btn{ border-color:var(--paper-hi); color:var(--paper-hi); justify-self:start; margin-top:.3rem; }
.answer .btn::after{ background:var(--paper-hi); }
.answer .btn:hover{ color:var(--violet-ink); border-color:var(--paper-hi); }

/* ── IV. the catalogue ────────────────────────────────────────────── */
/* .spec-no, .spec-cap, .cat and .cat-item are shared: see core.css.
   Only their placement on this sheet lives here, in the grid block. */

/* ── V. house rules ───────────────────────────────────────────────── */
.rules-lede{
  font-size:clamp(1.05rem,1.3vw,1.28rem); line-height:1.55;
  hyphens:auto; text-align:justify; margin:0;
}
.rules-lede::first-letter{
  font-family:var(--display); font-size:3.3em; line-height:.8; font-weight:700;
  float:left; padding:.02em .1em 0 0; color:var(--violet);
}
.nots{ list-style:none; margin:0; padding:0; counter-reset:n; }
.nots li{
  counter-increment:n; position:relative;
  padding:.78rem 0 .78rem 2.4rem; border-bottom:1px solid var(--rule-soft);
  font-size:1.02rem; line-height:1.45;
}
.nots li::before{
  content:counter(n,decimal-leading-zero);
  position:absolute; left:0; top:.95rem;
  font-family:var(--app); font-size:.66rem; font-weight:700; letter-spacing:.1em;
  color:var(--violet); font-variation-settings:"wdth" 70;
}
/* the strikes land one at a time, like a proof being marked up */
.nots li span{
  opacity:.8;
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
  text-decoration-color:transparent;
  transition:text-decoration-color .12s linear calc(var(--i,0) * 95ms + .25s);
}
.is-set .nots li span{ text-decoration-color:currentColor; }

/* ── VI. subscription: the term toggle, home only ─────────────────── */
.entry-top{ display:flex; justify-content:space-between; align-items:center; gap:.9rem 1.2rem; flex-wrap:wrap; }
.term{
  display:inline-flex; border:1.5px solid var(--ink); align-self:start;
  font-family:var(--app); font-size:.72rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
.term button{
  appearance:none; border:0; background:none; cursor:pointer; color:var(--ink-2);
  padding:.5rem .85rem; font:inherit; letter-spacing:inherit; text-transform:inherit;
  transition:color .25s var(--settle), background .25s var(--mech);
}
.term button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }

/* ── VII. closer ──────────────────────────────────────────────────── */
.closer{ border-top:1px solid var(--rule); }
.closer .display{ font-size:clamp(2.6rem,8.4vw,7rem); }
.closer .display em{ font-style:italic; font-weight:500; color:var(--violet); }
.closer-side{ display:grid; gap:1rem; align-content:end; }

/* ═══ the press grid arrives ═══════════════════════════════════════ */
@media (min-width:901px){
  .mh-title{ grid-column:1 / 12; }
  .mh-deck{ grid-column:1 / 6; margin-top:2.4rem; }
  .mh-margin{ grid-column:7 / 11; margin-top:2.4rem; }
  .mh-acts{ grid-column:1 / 6; }
  .mh-fine{ grid-column:7 / 11; margin-top:2.05rem; }
  .plate{ grid-column:1 / 13; }

  .room-jobs{ grid-column:1 / 4; }
  .room-body{ grid-column:4 / 10; }
  .room-note{ grid-column:10 / 13; align-self:start; margin-top:2.6rem;
              border-top:1px solid var(--rule); padding-top:.7rem; }
  .jobs{ flex-direction:column; border-bottom:0; border-right:1px solid var(--rule); overflow:visible; gap:0; }
  .job{ text-align:left; padding:.7rem 1rem .7rem 0; }
  .job::after{ left:auto; right:-1px; bottom:0; top:0; width:2px; height:auto;
    transform:scaleY(0); transform-origin:top; }
  .job[aria-selected="true"]::after{ transform:none; }
  .job[aria-selected="true"].timing::after{ animation:tickv 5s linear forwards; }
  @keyframes tickv{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

  .led-head{ grid-column:1 / 5; align-self:start; position:sticky; top:6rem; }
  .ledger{ grid-column:6 / 13; }
  .ledger-note{ grid-column:6 / 13; }
  .answer{ grid-column:6 / 13; margin-top:2.2rem; }

  .spec{ grid-column:1 / 4; align-self:start; position:sticky; top:7rem; }
  .cat{ grid-column:5 / 13; columns:2; column-gap:clamp(1.6rem,3vw,3.2rem); column-rule:1px solid var(--rule-soft); }

  .rules-lede{ grid-column:1 / 6; }
  .nots{ grid-column:7 / 13; }

  .sub-head{ grid-column:1 / 8; }
  .entry-free{ grid-column:1 / 5; }
  .entry-main{ grid-column:6 / 13; }

  .closer-title{ grid-column:1 / 10; }
  .closer-side{ grid-column:10 / 13; align-self:end; padding-bottom:.6rem; }
}

@media (max-width:900px){
  .mh-title{ font-size:clamp(2.35rem,12.1vw,4.4rem); }
  /* the job ticket: a 2 by 2 block, marked on the left like the desktop stick */
  .jobs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; gap:0;
         border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
  .job{ padding:.66rem .7rem; text-align:left; }
  .job + .job + .job{ border-top:1px solid var(--rule-soft); }
  .job::after{ left:0; right:auto; top:.25rem; bottom:.25rem; width:2px; height:auto;
               transform:scaleY(0); transform-origin:top; }
  .job[aria-selected="true"]::after{ transform:none; }
  .job[aria-selected="true"].timing::after{ animation:tickv 5s linear forwards; }
  @keyframes tickv{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
  .stick{ min-height:0; }
  .ltotal{ grid-template-columns:1fr; }
  .ltotal .figure{ justify-self:start; }
  .answer{ margin-top:1.6rem; }
  .entry-main{ margin-top:2.2rem; }
  /* a narrow measure cannot be justified without rivers */
  .rules-lede{ margin-bottom:2rem; text-align:left; hyphens:manual; }
  /* a one-column sheet has no gutter to separate stacked blocks, so the
     blocks that sit side by side on the press grid need their own leading */
  .spec{ margin-bottom:1.6rem; }
  .closer-side{ margin-top:2.2rem; }
}

@media (max-width:470px){
  .mh-acts .btn{ flex:1 1 auto; }
  .lrow .lname b{ font-size:.96rem; }
  .stick-slug .meta.right{ margin-left:0; }
}

/* ── the settled state ────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .plate-bars i{ transform:none !important; transition:none !important; }
  .panel .line > span{ transform:none !important; transition:none !important; }
  .halftone i{ transform:scale(var(--s,1)) !important; transition:none !important; }
  .answer{ clip-path:none !important; transition:none !important; }
  .nots li span{ text-decoration-color:currentColor !important; transition:none !important; }
  .dr-col{ transition:none !important; }
  .job::after{ animation:none !important; }
}