/* ==========================================================================
   HOUSE OF PRACHAR: components. Each block opens with its own tokens,
   mapped to the semantic layer in tokens.css.
   ========================================================================== */

/* ---------- nameplate: the card's blackletter, used only as the logotype ---------- */
.nameplate { font: 400 clamp(2.3rem, .9rem + 6vw, 6.25rem)/1 "Manufacturing Consent", var(--f-serif);
             letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.nameplate--big { font-size: clamp(2.6rem, .6rem + 8.4vw, 9rem); }

/* ---------- navbar: sticky, the hop mark on the left ---------- */
.navbar { --navbar-h: 60px; position: sticky; top: 0; z-index: var(--z-nav); background: var(--veil);
          backdrop-filter: blur(6px); border-block: 1px solid var(--rule); }
.navbar__in { display: flex; align-items: center; gap: var(--s-6); height: var(--navbar-h); }
.navbar__mark { flex: none; width: 38px; }
.navbar__mark img { height: 30px; width: auto; }
.navbar__nav { display: flex; gap: clamp(1rem, 2.4vw, 2.5rem); margin-inline: auto; font: 400 .9375rem/1 var(--f-sans); }
.navbar__nav a { text-decoration: none; padding-block: .4em; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1px no-repeat;
                 transition: background-size var(--d-base) var(--ease-out); }
.navbar__nav a:hover, .navbar__nav a:focus-visible, .navbar__nav a[aria-current] { background-size: 100% 1px; }
.navbar__cta { flex: none; padding: .5em .5em .5em 1.2em; font-size: .9375rem; }
.navbar__cta .btn__arrow { width: 1.8em; height: 1.8em; }
.navbar__menu { display: none; margin-left: auto; padding: .6em 1.3em; border: 1px solid var(--ink); border-radius: var(--r-pill);
                background: transparent; color: var(--ink); font: 500 var(--fs-ui)/1 var(--f-sans); cursor: pointer; }

/* ---------- mobile menu: full-screen ink ---------- */
.menu { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--ink); color: var(--sheet); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu__in { display: flex; flex-direction: column; min-height: 100%; padding-block: var(--s-4) var(--s-7); }
.menu__top { display: flex; justify-content: space-between; align-items: center; height: 56px; }
.menu__close { padding: .6em 1.3em; border: 1px solid var(--sheet); border-radius: var(--r-pill); background: transparent;
               color: var(--sheet); font: 500 var(--fs-ui)/1 var(--f-sans); cursor: pointer; }
.menu nav { display: grid; margin-block: auto; padding-block: var(--s-7); }
.menu nav a { font: 400 clamp(2.6rem, 1.5rem + 6vw, 4.5rem)/1.15 var(--f-serif); letter-spacing: var(--track-head);
              text-decoration: none; border-bottom: 1px solid var(--rule-on-dark); padding-block: var(--s-3); }
.menu nav a:hover, .menu nav a:focus-visible { font-style: italic; color: var(--fire); }
.menu__mail { font: 400 var(--fs-ui)/1.4 var(--f-sans); }

/* ---------- ticker: ink strip, Breaking tag, GSAP marquee (scrollable line without JS) ---------- */
.ticker { --ticker-bg: var(--ink); --ticker-fg: var(--sheet); display: flex; align-items: stretch;
          background: var(--ticker-bg); color: var(--ticker-fg); overflow: hidden; }
.ticker__tag { flex: none; display: grid; place-items: center; padding: 0 var(--s-5); background: var(--fire); color: var(--ink);
               font: 700 var(--fs-label)/1 var(--f-sans); letter-spacing: var(--track-label); text-transform: uppercase; }
.ticker__view { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
html.anim .ticker__view { overflow: hidden; }
.ticker__track { flex: none; display: flex; list-style: none; margin: 0; padding: 0; }
.ticker__track li { padding: .95rem 2.5rem .95rem 0; white-space: nowrap; font: 500 1rem/1 var(--f-sans); }
.ticker__track li::before { content: "\2726"; margin-right: 2.5rem; font-size: .8em; color: var(--fire); }
.ticker__track li:first-child::before { margin-left: 2rem; }

/* ---------- headline lines: each line is its own mask for the rise ---------- */
.line { display: block; overflow: clip; overflow-clip-margin: .35em; }
.line--r { text-align: right; }
.line > span { display: inline-block; }

/* ---------- editor's marks ---------- */
.pen { position: absolute; z-index: 3; white-space: nowrap; transform: rotate(-6deg); pointer-events: none; }
.ring { position: relative; display: inline-block; }
.ring::after { content: ""; position: absolute; inset: .02em .02em .04em -.08em; border: 2px solid var(--press);
               border-radius: 52% 48% 50% 46% / 58% 54% 46% 42%; transform: rotate(-2.5deg); pointer-events: none; }
.mark { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--fire) 45%, transparent) 62% 92%, transparent 92%); }
html.anim .mark[data-annotate] { background: none; }

/* ---------- stamp: the press's rubber stamp. Text is 700 and 19px+, so press passes as large type ---------- */
.stamp { --stamp-c: var(--press); display: inline-grid; place-items: center; gap: .1em; padding: .55em 1.1em .6em;
         border: 3px double var(--stamp-c); border-radius: 10px; color: var(--stamp-c); transform: rotate(-8deg);
         font: 700 1.25rem/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; }
.stamp span { font-size: 1.2rem; font-weight: 700; letter-spacing: .1em; }

/* ---------- photo shapes: black and white, one flat fire shape ---------- */
.arch { position: absolute; aspect-ratio: 3 / 4; z-index: 2; }
.arch::before { content: ""; position: absolute; inset: 0; translate: 14% 9%; background: var(--fire); border-radius: var(--r-arch);
                scale: var(--shape, 1); transform-origin: 50% 100%; }
.arch img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-arch); filter: grayscale(1) contrast(1.15); }
.t-shape--block, .t-shape--arch { position: relative; }
.t-shape--block::before { content: ""; position: absolute; left: -4%; bottom: -6%; width: 42%; height: 58%; background: var(--fire);
                          scale: var(--shape, 1); transform-origin: 0 100%; }
.t-shape--arch::before { content: ""; position: absolute; inset: 0; translate: 8% 6%; background: var(--fire); border-radius: var(--r-arch);
                         scale: var(--shape, 1); transform-origin: 50% 100%; }
.t-shape--arch img { border-radius: var(--r-arch); }
.t-shape--block img, .t-shape--arch img { position: relative; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12); }

/* ---------- placeholder tag: impossible to miss, impossible to ship by accident ---------- */
.tag-placeholder { display: inline-block; margin-top: var(--s-3); padding: .35em .8em; border: 1px dashed var(--ink-soft); border-radius: var(--r-pill);
                   font: 500 var(--fs-label)/1.2 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- form fields: hairline inputs, serif answers ---------- */
.field { display: grid; gap: var(--s-2); align-content: start; }
.field label { font: 500 var(--fs-ui)/1.3 var(--f-sans); }
.field input, .field textarea, .field select {
  width: 100%; font: 400 1.25rem/1.4 var(--f-serif); color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: .45em 0; }
.field textarea { resize: vertical; min-height: 6.5em; }
.field select { appearance: none; cursor: pointer; padding-right: 1.5em;
  background: linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 9px) 55% / 6px 6px no-repeat,
              linear-gradient(-45deg, transparent 50%, var(--ink) 50%) calc(100% - 3px) 55% / 6px 6px no-repeat; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom: 2px solid var(--press); padding-bottom: calc(.45em - 1px); }
.field small { font: 400 var(--fs-small)/1.4 var(--f-sans); color: var(--text-soft); }
.field [aria-invalid="true"] { border-bottom: 2px solid var(--press); }
.field .field__err { color: var(--ink); font-weight: 500; }
.field .field__err::before { content: "\2715  "; color: var(--press); }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- scroll progress: 2px fire line ---------- */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: var(--z-progress); background: var(--fire);
            transform: scaleX(0); transform-origin: left; pointer-events: none; }
html:not(.anim) .progress { display: none; }

/* ---------- preloader: "Going to press". Only on a first visit, only with motion ---------- */
.loader { position: fixed; inset: 0; z-index: var(--z-loader); display: none; background: var(--ink); color: var(--sheet);
          grid-template-rows: 1fr auto auto; padding: var(--margin); }
html.js.is-loading .loader { display: grid; }
html.js.is-loading body { overflow: hidden; }
.loader__plate { align-self: center; justify-self: center; display: grid; gap: var(--s-4); width: min(100%, 72rem); }
.loader__rules { height: 7px; border-top: 2px solid var(--sheet); border-bottom: 1px solid var(--sheet); transform-origin: left; }
.loader__rules--b { border-width: 1px 0 2px; transform-origin: right; }
.loader__meta { display: flex; justify-content: space-between; gap: var(--s-4); opacity: .7; }
.loader__name { justify-self: center; font-size: clamp(2.4rem, 10vw, 10rem); line-height: 1.05; }
.loader__line { font: italic 400 var(--fs-lead)/1.2 var(--f-serif); }
.loader__count { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s-4);
                 padding-top: var(--s-3); border-top: 1px solid var(--rule-on-dark);
                 font: 500 var(--fs-label)/1 var(--f-sans); letter-spacing: var(--track-label); text-transform: uppercase; }
.loader__count b { font: 400 clamp(3rem, 2rem + 5vw, 7rem)/.9 var(--f-serif); letter-spacing: -.04em; text-transform: none; }
.loader__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--fire); transform: scaleX(0); transform-origin: left; }

/* ---------- A15 cursor: a labelled disc over data-cursor targets, desktop pointers only ---------- */
.cursor { --cursor-bg: var(--ink); --cursor-fg: var(--sheet); position: fixed; left: 0; top: 0; z-index: var(--z-cursor);
          display: grid; place-items: center; width: 5.25rem; height: 5.25rem; border-radius: 50%; pointer-events: none;
          background: var(--cursor-bg); color: var(--cursor-fg); font: 600 var(--fs-label)/1 var(--f-sans);
          letter-spacing: var(--track-label); text-transform: uppercase; }
.cursor--on-dark { --cursor-bg: var(--fire); --cursor-fg: var(--ink); }
html.has-cursor [data-cursor], html.has-cursor [data-cursor] * { cursor: none; }

/* ---------- A12 + A18 page transitions: native cross-document View Transitions. Browsers without them just navigate.
   The new page comes up off the press from below; the navbar stays put; a work photo morphs into the case-study header. */
@view-transition { navigation: auto; }
.navbar { view-transition-name: navbar; }
::view-transition-old(root) { animation: vt-sink .6s var(--ease-press) both; }
::view-transition-new(root) { animation: vt-press .6s var(--ease-press) both; }
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: var(--ease-press); }
@keyframes vt-sink  { to { transform: translateY(-4%); opacity: .4; } }
@keyframes vt-press { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- colophon ---------- */
.colophon { padding-block: var(--s-8) var(--s-6); }
.colophon__rules { height: 7px; border-top: 1px solid var(--ink); border-bottom: 2px solid var(--ink); transform-origin: left; }
.colophon__top { display: flex; justify-content: space-between; align-items: end; gap: var(--s-6); flex-wrap: wrap; padding-block: var(--s-6); border-bottom: 1px solid var(--rule); }
.colophon__nav { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.colophon__nav a { text-decoration: none; }
.colophon__nav a:hover { text-decoration: underline; }
.colophon__base { display: flex; justify-content: space-between; align-items: end; gap: var(--s-6); padding-top: var(--s-5);
                  font: 400 var(--fs-small)/1.5 var(--f-sans); color: var(--text-soft); }
.colophon__top-link { flex: none; color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .navbar__nav { gap: var(--s-5); }
}
@media (max-width: 900px) {
  .navbar__cta { display: none; }
  html.js .navbar__nav { display: none; }
  html.js .navbar__menu { display: block; }
  html:not(.js) .navbar__nav { overflow-x: auto; margin-inline: 0; }
}
@media (max-width: 640px) {
  .nameplate--big { font-size: 13vw; }
  .loader__name { font-size: 12.5vw; }
  .loader__meta { flex-direction: column; align-items: center; gap: var(--s-1); }
  .colophon__base { flex-direction: column; align-items: start; }
}

/* ---------- 2026-11-04: a cover with no fire shape; and the "full colour covers" setting (Settings → Work covers) ---------- */
.t-shape--none { position: relative; }
.t-shape--none img { position: relative; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12); }
[data-covers="colour"] .t-shape--block img, [data-covers="colour"] .t-shape--arch img, [data-covers="colour"] .t-shape--none img { filter: none; }

/* ---------- admin preview: a reminder ribbon, and click-to-edit outlines inside the admin's live preview ---------- */
.preview-ribbon { position: fixed; left: 50%; bottom: var(--s-4); z-index: var(--z-cursor); translate: -50% 0; padding: .6em 1.2em;
                  border-radius: var(--r-pill); background: var(--ink); color: var(--sheet); box-shadow: var(--shadow-lift);
                  font: 500 .8125rem/1.2 var(--f-sans); white-space: nowrap; }
.preview-ribbon a { color: var(--fire); }
.edit-wrap { display: contents; }
html.is-editing .edit-wrap { display: block; }
html.is-editing [data-edit] { cursor: pointer; }
html.is-editing [data-edit]:hover { outline: 2px dashed var(--fire); outline-offset: 4px; }
html.is-editing [data-edit].is-edit-target { outline: 2px solid var(--press); outline-offset: 4px; }