/* ==========================================================================
   HOUSE OF PRACHAR: home page sections (Newsroom).
   Rhythm: paper (hero, work) -> band (index) -> ink (the house) -> paper (journal) -> band (letters)
   ========================================================================== */

/* ---------- S3 hero: the front page ---------- */
/* Exactly one screen under the navbar (62px). The headline shrinks on short screens so the buttons never fall below
   the fold: its two lines (1.86 x font size) get whatever height the kicker, foot and spacing (--hero-rest) leave. */
.hero { --hero-rest: 22rem; display: grid; align-content: space-between; min-height: calc(100svh - 62px);
        padding-block: clamp(1rem, 3svh, 2rem) clamp(1.5rem, 5svh, 3rem); }
.hero__kicker { font: italic 400 var(--fs-lead)/1.2 var(--f-serif); }
.hero__h { position: relative; margin-block: clamp(1.5rem, 5svh, 3rem) clamp(.75rem, 2svh, 1.5rem); }
.hero__h .t-hero, .hero__h .t-whisper { font-size: min(var(--fs-hero), calc((100svh - 62px - var(--hero-rest)) / 1.86)); }
.hero__h .t-hero { color: var(--accent-type); }
.hero__arch { left: 1%; top: 58%; width: min(clamp(110px, 14vw, 210px), 24svh); }
.pen--stet   { right: 4%; top: -1.5em; }
.pen--louder { left: 36%; bottom: -1em; transform: rotate(-4deg); }
.hero__foot { display: flex; justify-content: flex-end; align-items: end; gap: var(--s-8); }
.hero__copy { display: grid; gap: var(--s-5); }
.hero__sub { max-width: 34ch; font: 400 1.125rem/1.5 var(--f-sans); }
.hero__stamp { margin-right: auto; margin-left: clamp(8rem, 20vw, 18rem); }

/* ---------- S4 work: headlines ---------- */
.work__grid { align-items: start; }
.work__side { display: grid; gap: var(--s-8); }
.story { position: relative; }
.story__link { display: block; text-decoration: none; }
.story__media { overflow: visible; }
.story--lead .story__media { aspect-ratio: 16 / 10; }
.work__side .t-shape--arch { aspect-ratio: 4 / 5; width: 78%; }
.work__side .t-shape--block { aspect-ratio: 4 / 3; }
.story__media img { transition: transform var(--d-slow) var(--ease-out), filter var(--d-slow) var(--ease-out); }
/* Hover develops the print into colour: client work is judged in colour (decision 7, docs/plans/2026-11-04-cms-and-work-design.md). */
.story__link:hover .story__media img, .story__link:focus-visible .story__media img { transform: scale(1.03); filter: grayscale(0) contrast(1.02); }
.brief__link { display: grid; gap: var(--s-3); align-content: start; text-decoration: none; }
.brief__link:hover .brief__h, .brief__link:focus-visible .brief__h { text-decoration: underline 1px; text-underline-offset: .15em; }
.work__foot { display: flex; justify-content: flex-end; margin-top: var(--s-7); }
.story__meta { display: flex; flex-wrap: wrap; gap: .4em 1.2em; margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--rule); color: var(--text-soft); }
.story__meta span:first-child { color: var(--text); }
.story__h { margin-top: var(--s-3); font: 400 var(--fs-h3)/1.12 var(--f-serif); letter-spacing: -.015em; }
.story--lead .story__h { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.5rem); max-width: 22ch; }
.story__h em { color: var(--press); }
.story__link:hover .story__h, .story__link:focus-visible .story__h { text-decoration: underline 1px; text-underline-offset: .15em; }

.brief { margin-top: var(--s-6); border-top: 3px double var(--ink); padding-top: var(--s-4); }
.brief__list { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.brief__list li { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-2) var(--gutter) var(--s-4); border-left: 1px solid var(--rule); }
.brief__list li:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.brief__list li:nth-child(n+4) { padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.brief__no { font: italic 400 1.5rem/1 var(--f-serif); color: var(--press); }  /* 24 px: press is large-type only (3.85:1) */
.brief__h { font: 400 1.375rem/1.25 var(--f-serif); }
.brief__list .t-label { color: var(--text-soft); }

/* ---------- S5 services: the index ---------- */
.services { position: relative; }
.index { list-style: none; padding: 0; margin: 0; }
.index__row { position: relative; transition: opacity var(--d-base) var(--ease-out); }
.index__row::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--rule); transform: scaleX(var(--draw, 1)); transform-origin: left; }
.index__row:last-child { border-bottom: 1px solid var(--rule); }
.index summary { display: grid; grid-template-columns: 3rem minmax(0, 1.2fr) minmax(0, 1fr) 2.75rem; gap: var(--gutter); align-items: center;
                 padding-block: var(--s-5); cursor: pointer; list-style: none; transition: padding var(--d-base) var(--ease-out); }
.index summary::-webkit-details-marker { display: none; }
.index__num { font: 400 .9375rem/1 var(--f-sans); color: var(--text-soft); }
.index__name { font: 400 clamp(2rem, 1rem + 3.4vw, 4.25rem)/1 var(--f-serif); letter-spacing: var(--track-head); transition: color var(--d-base) var(--ease-out); }
.index__desc { font: 400 1.0625rem/1.45 var(--f-sans); color: var(--text-soft); max-width: 32ch; }
.index__go { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--ink);
             font: 300 1.5rem/1 var(--f-sans); transition: background var(--d-base), border-color var(--d-base), transform var(--d-base) var(--ease-out); }
.index summary:hover, .index summary:focus-visible { padding-left: var(--s-3); }
.index summary:hover .index__name, .index summary:focus-visible .index__name, .index details[open] .index__name { color: var(--press); font-style: italic; }
.index summary:hover .index__go, .index summary:focus-visible .index__go { background: var(--fire); border-color: var(--fire); }
.index details[open] .index__go { transform: rotate(45deg); background: var(--ink); color: var(--sheet); }
.index__more { list-style: none; margin: 0; padding: 0 0 var(--s-6) calc(3rem + var(--gutter)); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.index__more li { padding: .45em 1em; border: 1px solid var(--rule); border-radius: var(--r-pill); font: 400 var(--fs-small)/1.3 var(--f-sans); }

.classifieds { display: grid; gap: var(--s-4); align-content: start; padding-left: var(--gutter); border-left: 1px solid var(--rule); }
.classified { padding: var(--s-4); border: 1px solid var(--ink); font: 400 1.0625rem/1.4 var(--f-serif); }
.classified b { font: 700 var(--fs-label)/1 var(--f-sans); letter-spacing: var(--track-label); text-transform: uppercase; display: block; margin-bottom: var(--s-2); }

/* ---------- S6 the house: manifesto + editorial board (the one dark band) ---------- */
.house .kicker { margin-bottom: var(--s-8); }
.house .kicker::after { background: var(--rule-on-dark); }
.house__manifesto { max-width: 22em; margin-inline: auto; text-align: center; }
.house__pen { position: static; display: block; text-align: center; margin-top: var(--s-6); color: var(--fire); transform: rotate(-3deg); }
.board { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-7) var(--gutter); margin-top: var(--s-10); align-items: start; }
.board__head { grid-column: 1 / -1; }
.board__head .kicker { margin-bottom: var(--s-4); }
.board__h em { color: var(--fire); }

/* A13 desk: one business card. Pick a name in the list and the card changes hands (lib/desk.js); its HTML back
   carries no phone numbers (those stay on paper). Face B sits behind A, turned on Y (or on X for the coin toss).
   A10: the fire arch behind is a WebGL canvas when the device can afford it, this flat CSS arch when it can't. */
.desk { position: relative; aspect-ratio: 3 / 2; align-self: center; }
.desk__fire { --bleed: 15%; position: absolute; right: 2%; bottom: 4%; width: 36%; height: 96%;
              background: var(--fire); border-radius: 999px 999px 0 0; }
/* The canvas overhangs the arch box by --bleed on each side (fire.js BLEED), so the edge can swell past it. */
.desk__fire canvas { position: absolute; left: calc(-1 * var(--bleed)); top: calc(-1 * var(--bleed));
                     width: calc(100% + 2 * var(--bleed)); height: calc(100% + 2 * var(--bleed)); }
.desk__fire.is-live { background: none; }
.desk__card { position: absolute; left: 6%; top: 20%; width: 78%; aspect-ratio: 1400 / 724; container-type: inline-size;
              perspective: 1400px; rotate: -3deg; }
.desk__inner { position: relative; height: 100%; transform-style: preserve-3d; }
.desk__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: var(--shadow-lift); }
.desk__face img { display: block; width: 100%; height: 100%; }
.desk__face--b { transform: rotateY(180deg); }
.desk__card.is-x .desk__face--b { transform: rotateX(180deg); }
.desk__back { display: grid; align-content: center; justify-items: center; height: 100%; padding: 4cqw 3.3cqw;
              background: var(--sheet); color: #333; text-align: center; }
.desk__rule { justify-self: stretch; height: 1px; background: currentColor; opacity: .8; }
.desk__name { margin-top: 3cqw; font: 400 7.2cqw/1 "Manufacturing Consent", var(--f-serif); }
.desk__role { margin: 1.6cqw 0 3cqw; font: 400 3.4cqw/1 var(--f-serif); letter-spacing: .02em; text-transform: uppercase; }
.desk__foot { justify-self: stretch; display: grid; grid-template-columns: 1fr 1fr; align-items: start; padding-top: 5cqw; text-align: left;
              font: 400 2.6cqw/1.2 var(--f-serif); }
.desk__contact { padding-left: 4cqw; border-left: 1px solid currentColor; font: 600 1.6cqw/1.8 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; }
.desk__note { position: absolute; left: 6%; bottom: 2%; color: var(--fire); transform: rotate(-4deg); }
html:not(.js) .desk__note { display: none; }
.board__list { list-style: none; padding: 0; margin: 0; }
.board__list li { border-top: 1px solid var(--rule-on-dark); }
.board__list li:last-child { border-bottom: 1px solid var(--rule-on-dark); }
.board__pick { display: grid; gap: var(--s-1); width: 100%; padding: var(--s-4) 0; border: 0; background: none; color: inherit;
               text-align: left; cursor: pointer; transition: padding var(--d-base) var(--ease-out); }
.board__pick:hover, .board__pick[aria-pressed="true"] { padding-left: var(--s-4); }
.board__pick[aria-pressed="true"] .board__name { text-decoration: underline 1px; text-underline-offset: .15em; }
.board__pick:focus-visible { outline-offset: 4px; }
.board__name { font: 400 clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem)/1.1 var(--f-serif); }
.board__role { font: 400 1.5rem/1 var(--f-pen); color: var(--fire); }
.board__facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7); padding-top: var(--s-4); opacity: .8; }

/* ---------- S7 journal ---------- */
.journal__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 3px double var(--ink); }
.lead-article { grid-column: 1 / -1; display: grid; grid-template-columns: 8fr 4fr; gap: var(--s-4) var(--gutter); align-items: end;
                padding-block: var(--s-6) var(--s-7); border-bottom: 1px solid var(--rule); }
.lead-article > .t-label:first-child { grid-column: 1 / -1; }
.lead-article__h { font: 400 var(--fs-h2)/1.02 var(--f-serif); letter-spacing: var(--track-head); }
.lead-article__h em { color: var(--press); }
.lead-article__stand { font: italic 400 var(--fs-lead)/1.35 var(--f-serif); color: var(--text-soft); }
.lead-article .byline { grid-column: 1 / -1; }
.journal a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
             transition: background-size var(--d-slow) var(--ease-out); }
.journal a:hover, .journal a:focus-visible { background-size: 100% 1px; }
.brief-article { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5) var(--gutter) var(--s-6); border-left: 1px solid var(--rule); }
.brief-article:nth-child(2) { padding-left: 0; border-left: 0; }
.brief-article__h { font: 400 clamp(1.4rem, 1.1rem + .9vw, 1.9rem)/1.15 var(--f-serif); }
.byline { display: flex; gap: var(--s-5); color: var(--text-soft); }
.journal__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); }
.journal__foot .tag-placeholder { margin: 0; }

/* ---------- S8 letters to the editor ---------- */
.letters__intro { display: grid; gap: var(--s-5); align-content: start; position: relative; }
.letters__h { font-size: var(--fs-h1); }
.letters__h em { color: var(--press); }
.letters__mail { font: 400 var(--fs-lead)/1.3 var(--f-sans); }
.letters__pen { position: static; transform: rotate(-4deg); margin-top: var(--s-4); }
.letter { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--gutter); align-content: start;
          padding: clamp(1.5rem, 1rem + 2vw, 3rem); background: var(--sheet); outline: 1px solid var(--rule); }
.field--wide, .letter__foot { grid-column: 1 / -1; }
.letter__foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-5); }
.letter__status { font: 400 var(--fs-ui)/1.4 var(--f-sans); }
.letter__stamp { position: absolute; right: 6%; bottom: 14%; opacity: 0; pointer-events: none; }
.letter.is-sent .letter__stamp { opacity: 1; }

/* ---------- motion: initial states only when JS and motion are allowed ---------- */
html.anim .hero__kicker, html.anim .hero__copy { opacity: 0; }
html.anim .hero .line > span { transform: translateY(135%); }
html.anim .hero__arch, html.anim .hero .pen, html.anim .hero__stamp { opacity: 0; }
html.anim .hero .ring::after { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease-out); }
html.anim .hero .ring.is-on::after { clip-path: inset(0 0 0 0); }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .index summary { grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem; gap: var(--s-2) var(--s-4); }
  .index__desc { grid-column: 2; grid-row: 2; }
  .index__go { grid-column: 3; grid-row: 1; }
  .index__more { padding-left: calc(2.6rem + var(--s-4)); }
}
@media (max-width: 900px) {
  .hero__foot { flex-direction: column-reverse; align-items: start; gap: var(--s-6); }
  .hero__stamp { margin: 0 0 0 auto; }
  .work__side { grid-template-columns: 1fr 1fr; gap: var(--gutter); }
  .work__side .t-shape--arch { width: 100%; }
  .brief__list { grid-template-columns: 1fr; }
  .brief__list li { padding: var(--s-4) 0; border-left: 0; border-top: 1px solid var(--rule); }
  .classifieds { padding-left: 0; border-left: 0; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .classifieds > .t-label { grid-column: 1 / -1; }
  .board { grid-template-columns: 1fr; }
  .desk { margin-bottom: var(--s-4); }
  .desk__card { left: 4%; width: 84%; }
  /* Names in a 2 × 2 grid so the card stays on screen while you tap them */
  .board__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
  .board__list li:nth-last-child(2) { border-bottom: 1px solid var(--rule-on-dark); }
  .board__pick { padding-block: var(--s-3); }
  .board__pick:hover, .board__pick[aria-pressed="true"] { padding-left: 0; }
  .board__name { font-size: 1.35rem; }
  .board__role { font-size: 1.15rem; }
  .journal__grid { grid-template-columns: 1fr; }
  .lead-article { grid-template-columns: 1fr; }
  .brief-article, .brief-article:nth-child(2) { padding: var(--s-5) 0; border-left: 0; border-top: 1px solid var(--rule); }
  .brief-article:nth-child(2) { border-top: 0; }
  .letter { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero .t-hero { font-size: 21vw; }
  .hero__arch { position: relative; left: auto; top: auto; width: 120px; margin: var(--s-4) 0 0 var(--s-2); }
  .pen--louder { display: none; }
  .pen--stet { top: -1.7em; }
  .work__side { grid-template-columns: 1fr; gap: var(--s-8); }
  .work__side .t-shape--arch { width: 78%; }
}