/* ==========================================================================
   Hedborg Design Company — Direction A, "The Log"
   Built to design/plan-a.md. Strings from design/copy-a.md.

   SPECIFICITY CONTRACT (plan-a.md, accessibility notes; taste §10)
   --------------------------------------------------------------
   The plan warns about the ".section vs .cta" collision where field classes
   and entry classes both set padding. It is prevented structurally here:

     * FIELD rules  (.page, .f-kalk, .f-encre, .loghdr, .footer backgrounds)
       set COLOUR ONLY — background-image, background-color, color.
     * LAYOUT rules (.wrap, .hero, .entry, .studio, .contact, .loghdr__row)
       set SPACING ONLY — padding, margin, gap, grid placement.

   The two families never target the same declaration, so they cannot cancel
   each other. The one place a block is both painted and padded is the mobile
   tier, where the seam turns and each register block must carry its own chalk
   ground: there both are set in a single rule, so there is nothing to collide
   with. There is no !important in this file except on [hidden], which is the
   standard guard against display:grid.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Fonts — self-hosted, variable axes only, font-display: swap.
      Both faces are SIL OFL. Files fetched from Google's own CDN and stored
      in assets/fonts/ so the site does not depend on a third party in 2032.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/ebgaramond-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/ebgaramond-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ebgaramond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ebgaramond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* --------------------------------------------------------------------------
   2. Tokens
      "Chalk limewash and blue-black ink, split down a seam, with Falu red
       used only to mark what's currently playing."
   -------------------------------------------------------------------------- */

:root {
  --kalk:      #E7E8E3;   /* register field, Swedish side */
  --encre:     #1C2124;   /* statement field, French side */
  --falu:      #78352A;   /* accent on Kalk */
  --falu-lift: #B4573F;   /* the same pigment, lifted for the dark field */
  --ink-60:    #5C6360;   /* secondary register text on Kalk — SOLID, never opacity */
  --paper-60:  #8A9296;   /* secondary / not-on-air text on Encre — SOLID */

  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Desktop grid: 12 columns, 24px gutters, max 1560, page padding 40.
     Seam sits in the gutter between column 4 and column 5. */
  --pad:     40px;
  --maxw:    1560px;
  --gutter:  24px;

  /* All three of these carry a raw `100%`, which resolves against the width of
     whatever element uses them. Every consumer (.page, .loghdr, .playhead,
     .wrap) is a full-width block inside the same containing block, so the seam
     lands on the same pixel in all of them. */
  --content: min(100% - (2 * var(--pad)), var(--maxw));
  --col:     calc((var(--content) - (11 * var(--gutter))) / 12);
  --edge:    max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  --seam-x:  calc(var(--edge) + (4 * var(--col)) + (3.5 * var(--gutter)));

  /* The entire motion budget of this site. */
  --segue: 240ms;
}


/* --------------------------------------------------------------------------
   3. Reset / base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-optical-sizing: auto;
  font-size: 13px;
  line-height: 1.5;
  color: var(--encre);
  background: var(--kalk);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }
dd { margin-inline-start: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Focus — visible on every interactive element, never removed.
   Falu on the chalk field, Falu-lift on the ink field. */
:focus-visible {
  outline: 2px solid var(--falu);
  outline-offset: 2px;
}
.f-encre :focus-visible,
.footer :focus-visible,
.loghdr__ink :focus-visible {
  outline-color: var(--falu-lift);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: none;
  text-decoration: none;
  padding: 12px 16px;
  background: var(--kalk);
  color: var(--encre);
}
.skip:focus {
  left: 0;
}


/* --------------------------------------------------------------------------
   4. Type scale — plan-a.md. Garamond speaks. Inter measures.
      All sizes px, exactly as specified.
   -------------------------------------------------------------------------- */

/* --- Garamond: statements only. Never a label, a button or a number. --- */

.thesis {
  font-family: var(--serif);
  font-size: clamp(40px, 5.2vw, 76px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.statement {
  font-family: var(--serif);
  font-size: clamp(26px, 2.4vw, 42px);
  font-weight: 400;
  line-height: 1.10;
  letter-spacing: -0.015em;
  max-width: 18em;
}

.statement--page {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.prose {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.50;
  letter-spacing: 0;
  max-width: 58ch;
}

.pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.30;
  letter-spacing: -0.01em;
}

/* --- Inter: the register. Never a headline. --- */

.reg-head {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
}

.reg-label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
}

.reg-data {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.mark {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
}

.caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.flink {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   5. The seam — two solid colour fields meeting at a hard edge.
      COLOUR ONLY in this block. No padding lives here.
   -------------------------------------------------------------------------- */

.page {
  position: relative;
  background-image: linear-gradient(
    90deg,
    var(--kalk) 0 var(--seam-x),
    var(--encre) var(--seam-x) 100%
  );
}

.f-kalk  { color: var(--encre); }
.f-encre { color: var(--kalk); }


/* --------------------------------------------------------------------------
   6. Layout primitives — SPACING ONLY.
   -------------------------------------------------------------------------- */

.wrap {
  width: var(--content);
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}


/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding-block: 72px 96px;
  grid-template-areas: "reg reg reg reg say say say say say say say say";
}

.hero__reg  { grid-area: reg; padding-right: 24px; }
.hero__say  { grid-area: say; padding-left: 24px; }

.hero__reg p { text-transform: none; }
.hero__reg p + p { margin-top: 6px; }
.hero__reg p:first-child { color: var(--encre); }
.hero__reg p:nth-child(2),
.hero__reg p:nth-child(3) { color: var(--ink-60); }

.hero__support { margin-top: 28px; color: var(--kalk); }


/* --------------------------------------------------------------------------
   8. Sticky log header — the only persistent chrome on the page.
      44px, functional table furniture.
   -------------------------------------------------------------------------- */

.loghdr {
  position: sticky;
  top: 0;
  z-index: 30;
  background-image: linear-gradient(
    90deg,
    var(--kalk) 0 var(--seam-x),
    var(--encre) var(--seam-x) 100%
  );
}

.loghdr__row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  min-height: 44px;
  align-items: center;
}

.loghdr__chalk {
  grid-column: 1 / 5;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-right: 24px;
  overflow: hidden;
}

.loghdr__ink {
  grid-column: 5 / 13;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding-left: 24px;
}

.loghdr__chalk .reg-head { color: var(--ink-60); white-space: nowrap; }
.loghdr__mobilelabel { display: none; }

.loghdr__spacer { flex: 1 1 auto; min-width: 8px; }

.loghdr__contact {
  color: var(--kalk);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.loghdr__contact:hover { color: var(--falu-lift); }

/* Filter group — the SOURCE column header is its accessible label. */
.filter {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.filter__btn {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;
  padding: 8px 6px 8px 8px;
  color: var(--paper-60);
  white-space: nowrap;
}
.filter__btn:hover { color: var(--kalk); }
.filter__btn[aria-pressed='true'] { color: var(--falu-lift); }

.loghdr__confirm {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: var(--paper-60);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
}
.loghdr__confirm .confirm__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.confirm__clear {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--kalk);
  white-space: nowrap;
}
.confirm__clear:hover { color: var(--falu-lift); }


/* --------------------------------------------------------------------------
   9. The log
   -------------------------------------------------------------------------- */

.nojs {
  padding-block: 20px;
  color: var(--ink-60);
}

.entry {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding-block: 64px;
  grid-template-areas:
    "reg  reg  reg  reg  say  say  say  say  say  say  say  say"
    "meta meta meta meta say  say  say  say  say  say  say  say"
    ".    .    .    work work work work work work work work work";
}

.entry__reg  { grid-area: reg;  padding-right: 24px; }
.entry__meta { grid-area: meta; padding-right: 24px; padding-top: 10px; }
.entry__say  { grid-area: say;  padding-left: 24px; }
.entry__work { grid-area: work; margin-top: 48px; }

/* Register block, stacked — date, name, then the source mark row. */
.entry__date { color: var(--ink-60); }

.entry__name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.entry__link {
  text-decoration: none;
  color: var(--encre);
}
.entry__link:hover { color: var(--falu); }

/* The role sits in the register on desktop and mobile (chalk), and runs in
   beneath the statement on tablet (ink). Two solid tokens, one per ground. */
.entry__role { color: var(--ink-60); }

.entry__srcrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

/* The source mark. AUTO is Falu at rest (plan type scale); the square dot is
   the on-air light and is the state the playhead changes. */
.mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-60);
  transition: color var(--segue) linear;
}
[data-source='AUTO'] .mark { color: var(--falu); }
.mark__dot {
  width: 6px;
  height: 6px;
  background: var(--ink-60);
  transition: background-color var(--segue) linear;
}

/* Duration bar — rendered by log.js only when durationMonths exists.
   The hairline beside it is the one hairline the plan permits: it is inside
   the register's own columns, where a table genuinely needs one. */
.dur {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  border-left: 1px solid var(--ink-60);
  padding-left: 12px;
}
.dur__bar {
  display: block;
  height: 1px;
  background: var(--falu);
}

/* Statement — the playhead's only text target.
   Two SOLID tokens. Never opacity: blended greys fail contrast silently. */
.entry__say .statement {
  color: var(--paper-60);
  transition: color var(--segue) linear;
}
.entry.is-onair .statement { color: var(--kalk); }
.entry.is-onair .mark { color: var(--falu); }
.entry.is-onair .mark__dot { background: var(--falu); }

/* Work plate — the only element permitted to cross the seam.
   No image exists yet (TODO(axel) 12); the slot is a chalk plate at the real
   proportion of the image that belongs here, laid across the ink field. */
.plate {
  background: var(--kalk);
  aspect-ratio: 16 / 9;
}
.plate-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}

/* Filter empty state — an invitation, not an apology. */
.entry--empty .entry__say .statement { color: var(--kalk); }
.empty__label { color: var(--ink-60); }
.empty__cta {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--falu);
  margin-top: 16px;
  display: inline-block;
}


/* --------------------------------------------------------------------------
   10. Studio + Contact
   -------------------------------------------------------------------------- */

.studio,
.contact {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding-block: 64px;
  grid-template-areas: "reg reg reg reg say say say say say say say say";
}

.studio__reg,
.contact__reg { grid-area: reg; padding-right: 24px; }
.studio__say,
.contact__say { grid-area: say; padding-left: 24px; }

.studio__label,
.contact__label { color: var(--ink-60); }

.regblock { margin-top: 28px; }
.regblock__row + .regblock__row { margin-top: 18px; }
.regblock dt { color: var(--ink-60); }
.regblock dd { color: var(--encre); margin-top: 4px; }
.regblock a { color: var(--encre); }

.studio__say .prose + .prose { margin-top: 20px; }

.contact__say .statement { color: var(--kalk); }

.contact__actions { margin-top: 28px; }
.contact__email {
  display: inline-block;
  color: var(--encre);
  text-decoration: none;
  border-bottom: 1px solid var(--falu);
  padding-bottom: 1px;
}
.contact__email:hover { color: var(--falu); }
.contact__copy {
  display: block;
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--falu);
}
.contact__status {
  display: block;
  margin-top: 10px;
  max-width: 34ch;
  color: var(--ink-60);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
}
.contact__status:empty { margin-top: 0; }


/* --------------------------------------------------------------------------
   11. Footer — full-width Encre. The page began in light and ends in ink.
   -------------------------------------------------------------------------- */

.footer {
  background: var(--encre);
  color: var(--kalk);
}

.footer__inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: 40px;
  padding-block: 72px 40px;
}

.footer__group { grid-column: span 4; }
.footer__group h2 { color: var(--paper-60); margin-bottom: 16px; }
.footer__group li + li { margin-top: 4px; }
.footer__group a { color: var(--kalk); }
.footer__group a:hover { color: var(--falu-lift); }
.footer__availability {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.5;
  color: var(--paper-60);
  margin-top: 14px;
}

.footer__end {
  grid-column: 1 / 13;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 40px;
  color: var(--paper-60);
}
.footer__endmark { color: var(--falu-lift); }


/* --------------------------------------------------------------------------
   12. The Playhead — the signature, and the whole motion budget.
       One fixed hairline at 42% of viewport height, crossing the seam.
   -------------------------------------------------------------------------- */

.playhead {
  position: fixed;
  left: 0;
  width: 100%;
  top: var(--playhead-top, 42vh);
  height: 1px;
  z-index: 20;
  pointer-events: none;
  /* Blended over the seam gutter so a scrollbar-width difference between the
     fixed layer and the page can never show as a misaligned join. */
  background-image: linear-gradient(
    90deg,
    var(--falu) 0 calc(var(--seam-x) - 12px),
    var(--falu-lift) calc(var(--seam-x) + 12px) 100%
  );
}


/* --------------------------------------------------------------------------
   13. Entry pages
   -------------------------------------------------------------------------- */

.epage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding-block: 72px 64px;
  grid-template-areas:
    "reg reg reg reg say say say say say say say say";
}
.epage__reg { grid-area: reg; padding-right: 24px; }
.epage__say { grid-area: say; padding-left: 24px; }

.epage__say .statement { color: var(--kalk); }
.epage__say .prose { color: var(--kalk); margin-top: 32px; }
.epage__say .prose + .prose { margin-top: 20px; }

.ework {
  padding-bottom: 96px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}
.ework__slot { grid-column: 4 / 13; }

.eback a {
  color: var(--encre);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  white-space: nowrap;
}
.eback a:hover { color: var(--falu); }


/* ==========================================================================
   14. TABLET — 640px to 1023px.
       Seam persists and tightens to ~25% (column 2 of 8). Register truncates;
       role runs in beneath the statement. Images still cross the seam.
   ========================================================================== */

@media (max-width: 1023px) {
  :root {
    --gutter: 20px;
    --col:    calc((var(--content) - (7 * var(--gutter))) / 8);
    --seam-x: calc(var(--edge) + (2 * var(--col)) + (1.5 * var(--gutter)));
  }

  .thesis__br { display: none; }

  .grid,
  .hero,
  .loghdr__row,
  .entry,
  .studio,
  .contact,
  .epage,
  .ework,
  .footer__inner {
    grid-template-columns: repeat(8, 1fr);
  }

  .hero {
    grid-template-areas: "reg reg say say say say say say";
    padding-block: 56px 72px;
  }

  .loghdr__chalk { grid-column: 1 / 3; }
  .loghdr__ink   { grid-column: 3 / 9; }
  /* Specificity note: .loghdr__mobilelabel also carries .reg-head, so the
     un-nested rule below would lose to `.loghdr__chalk .reg-head` above and
     the LOG label would silently vanish. Matched selector weight on purpose —
     this is precisely the collision the quality floor warns about. */
  .loghdr__chalk .reg-head { display: none; }
  .loghdr__chalk .loghdr__mobilelabel { display: block; }

  .entry {
    grid-template-areas:
      "reg  reg  say  say  say  say  say  say"
      "reg  reg  meta meta meta meta meta meta"
      ".    work work work work work work work";
    padding-block: 52px;
  }
  .entry__meta { padding-right: 0; padding-left: 24px; padding-top: 18px; }
  .entry__role { color: var(--paper-60); font-size: 12px; letter-spacing: 0.01em; }
  .entry__name { margin-top: 2px; }

  .studio,
  .contact { grid-template-areas: "reg reg say say say say say say"; }

  .epage  { grid-template-areas: "reg reg say say say say say say"; }
  .ework__slot { grid-column: 2 / 9; }

  .footer__group { grid-column: span 4; }
  .footer__end   { grid-column: 1 / 9; }
}


/* ==========================================================================
   15. MOBILE — below 640px. The seam does not disappear; it turns.
       Every entry becomes a chalk register block sitting directly on an ink
       statement block, so the boundary between the two papers is horizontal
       and appears on every single row. The work is still the only element
       with no side padding.
   ========================================================================== */

@media (max-width: 639px) {
  :root {
    --pad: 20px;
    --gutter: 0px;
  }

  /* The vertical seam is retired; the page ground becomes ink and every
     chalk block is painted explicitly. COLOUR ONLY. */
  .page,
  .loghdr {
    background-image: none;
    background-color: var(--encre);
  }
  .playhead {
    background-image: none;
    background-color: var(--falu-lift);
  }

  .grid,
  .hero,
  .loghdr__row,
  .entry,
  .studio,
  .contact,
  .epage,
  .ework,
  .footer__inner {
    display: block;
  }

  /* --- hero: chalk block, then ink block --- */
  .hero { padding-block: 0 0; }
  .hero__reg {
    background: var(--kalk);
    padding: 28px var(--pad) 28px;
    margin-inline: calc(-1 * var(--pad));
  }
  .hero__say {
    padding: 32px 0 40px;
  }

  /* --- sticky header: a chalk band of its own --- */
  .loghdr__row {
    min-height: 44px;
    padding-block: 0;
  }
  .loghdr__chalk,
  .loghdr__ink {
    background: var(--kalk);
    padding: 0;
  }
  .loghdr__chalk {
    padding: 10px var(--pad) 0;
    margin-inline: calc(-1 * var(--pad));
  }
  .loghdr__ink {
    padding: 6px var(--pad) 10px;
    margin-inline: calc(-1 * var(--pad));
    flex-wrap: wrap;
    gap: 10px;
    color: var(--encre);
  }
  .loghdr__ink :focus-visible { outline-color: var(--falu); }
  .loghdr__mobilelabel { color: var(--ink-60); }
  .loghdr__contact { color: var(--encre); }
  .loghdr__contact:hover { color: var(--falu); }
  .filter__btn { color: var(--ink-60); padding: 6px 6px 6px 0; }
  .filter__btn:hover { color: var(--encre); }
  .filter__btn[aria-pressed='true'] { color: var(--falu); }
  .loghdr__confirm {
    background: var(--kalk);
    color: var(--ink-60);
    padding: 0 var(--pad) 12px;
    margin-inline: calc(-1 * var(--pad));
  }
  .confirm__clear { color: var(--falu); }
  .loghdr__spacer { display: none; }

  /* --- entries: the seam, turned --- */
  .entry { padding-block: 0; }
  .entry__reg,
  .entry__meta {
    background: var(--kalk);
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
  }
  .entry__reg  { padding-block: 26px 26px; }
  .entry__reg:has(+ .entry__meta) { padding-block-end: 0; }
  .entry__meta { padding-block: 8px 26px; }
  .entry__role { color: var(--ink-60); font-size: 13px; letter-spacing: 0; }
  .entry__say  { padding: 28px 0 32px; }
  /* Full-bleed, the only element on mobile with no side padding. The bottom
     margin lets the ink ground show between this entry's work and the next
     entry's chalk register, so two chalk blocks never fuse into one. */
  .entry__work {
    margin-top: 0;
    margin-inline: calc(-1 * var(--pad));
    margin-bottom: 44px;
  }
  .plate-pair { grid-template-columns: 1fr; gap: 2px; }

  .statement { max-width: none; }

  /* --- studio + contact: same turn --- */
  .studio,
  .contact { padding-block: 0; }
  .studio__reg,
  .contact__reg {
    background: var(--kalk);
    margin-inline: calc(-1 * var(--pad));
    padding: 32px var(--pad);
  }
  .studio__say,
  .contact__say { padding: 32px 0 40px; }

  /* --- entry pages --- */
  .epage { padding-block: 0; }
  .epage__reg {
    background: var(--kalk);
    margin-inline: calc(-1 * var(--pad));
    padding: 32px var(--pad);
  }
  .epage__say { padding: 32px 0 36px; }
  .ework { padding-bottom: 56px; }
  .ework__slot { margin-inline: calc(-1 * var(--pad)); }
  .eback { padding: 0; }
  .eback a { color: var(--encre); }

  /* --- footer --- */
  .footer__inner { padding-block: 56px 32px; }
  .footer__group + .footer__group { margin-top: 36px; }
  .footer__end { padding-top: 40px; margin-top: 36px; }
}


/* ==========================================================================
   16. prefers-reduced-motion — a first-class render, not a fallback.
       The crossfade goes to zero, every statement renders permanently at full
       --kalk, and the playhead stays as a static positional rule.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root { --segue: 0ms; }

  .entry__say .statement { color: var(--kalk); }

  .mark,
  .mark__dot,
  .entry__say .statement {
    transition: none;
  }
}