/* ==========================================================================
   LinkIT — marketing homepage.

   Loads after linkit.css and inherits its tokens, buttons, shell and browser
   surfaces. This file owns one structure: the ledger spread, and the specimen
   component that makes the right-hand column a real link page rather than a
   picture of one.

   The authored moment is the gutter. It is a hairline for the whole spread,
   and when the spread leaves, the generic column dissolves into it while the
   owned column survives. That is the page's argument, performed once.
   ========================================================================== */

.home {
  --gut: clamp(1.15rem, 4.5vw, 3rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --measure: 62ch;
}

/* --- masthead --------------------------------------------------------------- */

.mast {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 3vw, 2rem);
  padding: .55rem var(--gut);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--rule-soft);
}

.mast__mark { display: flex; flex: none; text-decoration: none; }
.mast__mark img { width: 62px; height: auto; }

.mast__nav { display: flex; gap: 1.25rem; margin-left: auto; }

.mast__nav a {
  position: relative;
  color: var(--ink-3);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  padding: .25rem 0;
  transition: color .2s var(--ease-out);
}
.mast__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.mast__nav a:hover { color: var(--ink); }
.mast__nav a:hover::after { transform: scaleX(1); }

.mast__cta { flex: none; }

/* ==========================================================================
   The specimen — a real link page, scaled down.

   Every colour here comes from a style attribute written by the PHP theme
   engine, so a specimen's inks are the same forced-contrast values a paying
   customer's page would compute.
   ========================================================================== */

.spec {
  --pad: 1.15em;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.6em var(--pad) 1.2em;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  overflow: hidden;
}

.spec__lede { display: flex; flex-direction: column; gap: .2em; padding-bottom: 1.1em; }

.spec__avatar {
  width: 2.9em;
  height: 2.9em;
  border-radius: var(--avatar-radius);
  margin-bottom: .55em;
  background:
    radial-gradient(120% 120% at 30% 25%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%),
    var(--sunk);
  box-shadow: 0 1px 0 var(--rule), 0 .5em 1.2em -.8em rgba(0, 0, 0, .55);
}

.spec__name {
  font-size: 1.7em;
  font-weight: var(--display-weight);
  letter-spacing: -.035em;
  line-height: 1.04;
  font-variation-settings: "wdth" 100;
}

.spec__tag { color: var(--ink-2); font-size: .95em; line-height: 1.3; }

.spec__links { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }

.spec__row {
  display: flex;
  align-items: center;
  gap: .7em;
  padding: .72em .15em;
  border-bottom: 1px solid var(--rule);
}
.spec__links > .spec__row:last-child { border-bottom: 0; }

.spec__ic { display: flex; color: var(--ink-3); flex: none; }
.spec__ic .ic { width: 1.15em; height: 1.15em; }

.spec__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.spec__label { font-size: 1.02em; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.spec__sub { color: var(--ink-3); font-size: .78em; line-height: 1.3; margin-top: .1em; }

.spec__go { display: flex; color: var(--ink-4); flex: none; }
.spec__go .ic { width: 1em; height: 1em; }

/* featured promotes to a filled plate, exactly as the product does */
.spec__row--featured {
  border-bottom: 0;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
  padding: .85em .8em;
  margin: .5em 0;
}
.spec__row--featured .spec__ic,
.spec__row--featured .spec__go { color: inherit; opacity: .85; }
.spec__row--featured .spec__sub { color: inherit; opacity: .8; }

/* layout variants, mirroring page.css */
.spec[data-layout="plates"] .spec__links { border-top: 0; gap: .4em; }
.spec[data-layout="plates"] .spec__row {
  border-bottom: 0;
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .7em .8em;
}
.spec[data-layout="plates"] .spec__row--featured { background: var(--accent); border-color: var(--accent); }

.spec[data-layout="tiles"] .spec__links {
  border-top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4em;
}
.spec[data-layout="tiles"] .spec__row {
  border-bottom: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: .3em;
  min-height: 4.6em;
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .6em;
}
.spec[data-layout="tiles"] .spec__row--featured { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; background: var(--accent); border-color: var(--accent); }
.spec[data-layout="tiles"] .spec__go { align-self: flex-end; margin-top: auto; }
.spec[data-layout="tiles"] .spec__sub { display: none; }

.spec[data-layout="marquee"] .spec__links { border-top: 0; gap: .15em; }
.spec[data-layout="marquee"] .spec__row { border-bottom: 0; padding: .2em .1em .45em; align-items: baseline; }
.spec[data-layout="marquee"] .spec__label { font-size: 1.75em; font-weight: var(--display-weight); letter-spacing: -.04em; line-height: 1.05; }
.spec[data-layout="marquee"] .spec__ic,
.spec[data-layout="marquee"] .spec__sub { display: none; }

/* ==========================================================================
   The generic page — drawn honestly, named by nobody.
   ========================================================================== */

.husk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  height: 100%;
  padding: 2rem 1.25rem 1.5rem;
  background: #ECECE8;
  border-radius: var(--radius);
}

.husk__avatar { width: 54px; height: 54px; border-radius: 50%; background: #D3D3CD; flex: none; }
.husk__name   { width: 42%; height: 13px; border-radius: 3px; background: #C6C6BF; }
.husk__tag    { width: 62%; height: 9px;  border-radius: 3px; background: #D8D8D2; margin-bottom: .6rem; }

.husk__pill {
  width: 100%;
  height: 42px;
  border-radius: 999px;
  background: #DCDCD6;
  border: 1px solid #D0D0C9;
  flex: none;
}

.husk__mark { width: 30%; height: 7px; border-radius: 3px; background: #D8D8D2; margin-top: auto; }

/* ==========================================================================
   The spread
   ========================================================================== */

.spread {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gut) clamp(3rem, 7vw, 5.5rem);
  max-width: 88rem;
  margin: 0 auto;
}

/* the gutter: the page's spine, and the only furniture in the first viewport */
.spread__rule {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--rule);
  transform-origin: top;
}

.spread__head {
  position: relative;
  z-index: 1;
  font-size: clamp(2.5rem, 7.6vw, 5.6rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
  text-align: center;
  text-wrap: balance;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  font-variation-settings: "wdth" 100;
}

.spread__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 5vw, 4rem);
  align-items: start;
}

.col { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }

.col__head { display: flex; flex-direction: column; gap: .15rem; }

.col__what {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.col--yours .col__what { color: var(--accent); }

.col__url { font-size: .8125rem; color: var(--ink-2); word-break: break-all; }
.col--theirs .col__url { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; text-underline-offset: 2px; }

.col__note { font-size: .8125rem; color: var(--ink-3); line-height: 1.5; }
.col--yours .col__note { color: var(--ink-2); }

/* The husk and the specimen share one height so the comparison is honest. */

.spec-frame {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--rule), 0 2rem 3.5rem -2rem rgba(18, 18, 15, .35);
}

.spread__act {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: clamp(2rem, 5vw, 3.25rem);
}

.quiet { color: var(--ink-3); font-size: .875rem; text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; transition: color .2s var(--ease-out), border-color .2s var(--ease-out); }
.quiet:hover { color: var(--accent); border-color: var(--accent); }

.btn--lg { padding: .8rem 1.4rem; font-size: 1rem; }

/* --- THE authored moment ----------------------------------------------------
   As the spread scrolls away, the generic column collapses into the gutter and
   the owned one keeps its ground. Scroll-driven where supported; where it is
   not, both columns simply stay, which loses the flourish and nothing else.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 48rem) {
    .col--theirs {
      animation: husk-collapse linear both;
      animation-timeline: view();
      animation-range: exit 10% exit 85%;
      transform-origin: right center;
    }
    .spread__rule {
      animation: rule-thicken linear both;
      animation-timeline: view();
      animation-range: exit 10% exit 85%;
    }
  }
}

@keyframes husk-collapse {
  from { opacity: 1; transform: scaleX(1); filter: blur(0); }
  70%  { opacity: .12; }
  to   { opacity: 0; transform: scaleX(.02); filter: blur(6px); }
}

@keyframes rule-thicken {
  from { background: var(--rule); width: 1px; }
  to   { background: var(--accent); width: 2px; }
}

/* ==========================================================================
   The range
   ========================================================================== */

.range { padding: clamp(3.5rem, 9vw, 7rem) 0; border-top: 1px solid var(--rule); }

.h-big {
  font-size: clamp(1.9rem, 5.2vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.042em;
  text-wrap: balance;
  max-width: 20ch;
}

.lede {
  margin-top: 1.1rem;
  max-width: var(--measure);
  color: var(--ink-3);
  font-size: clamp(1rem, 1.7vw, 1.125rem);
  line-height: 1.6;
}

.sheet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.6rem, 1.4vw, 1.1rem);
  padding: clamp(1.75rem, 4vw, 3rem) var(--gut);
  max-width: 100rem;
  margin: 0 auto;
}

.tile { margin: 0; display: flex; flex-direction: column; gap: .5rem; }

.tile__in {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  transition: border-color .3s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}

/* superseded by the z-axis lift in the Dimension section */

.tile figcaption { font-size: .6875rem; color: var(--ink-3); letter-spacing: .02em; }

.note-rule {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  max-width: var(--measure);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: .9375rem;
  line-height: 1.6;
}
.note-rule strong { color: var(--ink); font-weight: 600; }
.note-rule .ic { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: .2rem; }

/* ==========================================================================
   The address
   ========================================================================== */

.domain { padding: clamp(3.5rem, 9vw, 7rem) 0; border-top: 1px solid var(--rule); }

.swap {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin: clamp(1.75rem, 4vw, 2.75rem) 0;
  font-size: clamp(1.1rem, 4.6vw, 3.6rem);
  letter-spacing: -.03em;
  line-height: 1.15;
}

.swap__was { color: var(--ink-4); position: relative; width: max-content; max-width: 100%; }

/* The strike is drawn, not a text-decoration, so it can be timed. */
.swap__was::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 52%;
  height: 2px;
  background: var(--ink-4);
  transform: scaleX(0);
  transform-origin: left;
}

.swap__is { color: var(--accent); font-weight: 500; width: max-content; max-width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .swap__was::after {
      animation: strike linear both;
      animation-timeline: view();
      animation-range: entry 40% entry 90%;
    }
  }
}
@keyframes strike { to { transform: scaleX(1); } }

/* Without scroll-driven support the strike still needs to exist. */
@supports not (animation-timeline: view()) {
  .swap__was::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .swap__was::after { transform: scaleX(1); }
}

.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.two .lede { margin-top: 0; }

code.mono { background: var(--paper-sunk); padding: .1em .35em; border-radius: 3px; font-size: .9em; }

/* ==========================================================================
   What you get — a ledger, not a card grid
   ========================================================================== */

.does { padding: clamp(3.5rem, 9vw, 7rem) 0; border-top: 1px solid var(--rule); }

.ledger { margin-top: clamp(1.75rem, 4vw, 2.75rem); border-top: 1px solid var(--rule); }

.ledger__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(.9rem, 2.5vw, 2rem);
  padding: clamp(1.1rem, 2.5vw, 1.7rem) .2rem;
  border-bottom: 1px solid var(--rule);
}

.ledger__ic { display: flex; color: var(--ink-4); flex: none; padding-top: .15rem; transition: color .3s var(--ease-out); }
.ledger__ic .ic { width: 22px; height: 22px; }

.ledger__body { display: grid; gap: .3rem; min-width: 0; }

.ledger__title {
  font-size: clamp(1.1rem, 4.4vw, 1.32rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.25;
  font-variation-settings: "wdth" 100;
  transition: font-variation-settings .45s var(--ease-out);
}

.ledger__text { color: var(--ink-3); font-size: .9375rem; line-height: 1.6; max-width: 58ch; }

.ledger__row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s var(--ease-out);
}
.ledger__row:hover::after { transform: scaleX(1); }
.ledger__row:hover .ledger__ic { color: var(--accent); }
.ledger__row:hover .ledger__title { font-variation-settings: "wdth" 106; }

/* ==========================================================================
   Proof + action + footer
   ========================================================================== */

.pages { padding: clamp(3.5rem, 9vw, 7rem) 0; border-top: 1px solid var(--rule); }
.pages .units { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* A client without a public address is still a row, just not a link. It keeps
   the anchor's grid so the column of names stays true, and drops the hover
   affordances so nothing invites a click that goes nowhere. */
.pages .unit__in {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.4rem .2rem;
}
.pages .unit:not(:has(> a))::after { display: none; }
.pages .unit:hover .unit__in .unit__name { font-variation-settings: "wdth" 100; }

@media (max-width: 40rem) {
  .pages .unit__in { grid-template-columns: 1fr auto; row-gap: .4rem; }
}

.act { padding: clamp(4rem, 10vw, 8rem) 0; border-top: 1px solid var(--rule); background: var(--paper-sunk); }
.act__in { display: flex; flex-direction: column; align-items: flex-start; }
.act__row { margin-top: 1.75rem; }

.foot { border-top: 1px solid var(--rule); padding: 1.5rem 0 2.5rem; font-size: .8125rem; color: var(--ink-3); }
.foot__in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.foot a { text-decoration: none; transition: color .2s var(--ease-out); }
.foot a:hover { color: var(--accent); }
.foot strong { color: var(--ink-2); font-weight: 600; }
.foot nav { display: flex; gap: 1.25rem; }

/* ==========================================================================
   Narrow
   ========================================================================== */

@media (max-width: 60rem) {
  .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 48rem) {
  .mast__nav { display: none; }
  .mast__cta { margin-left: auto; }

  /* The gutter becomes a horizontal rule between the two columns: the spread
     still reads as a comparison, stacked instead of faced. */
  .spread__rule { display: none; }
  .spread__cols { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .col--yours { padding-top: 2rem; border-top: 2px solid var(--accent); }
  .spread__head { text-align: left; }
  .spread__act { justify-content: flex-start; }
}

@media (max-width: 30rem) {
  .sheet { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .tile__in { aspect-ratio: 3 / 3.4; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .ledger__row:hover .ledger__title { font-variation-settings: "wdth" 100; }
  .tile:hover .tile__in { transform: none; }
}

@media print {
  .mast, .spread__act, .act__row { display: none; }
  .spread__rule::after { display: none; }
}

/* The masthead is sticky, so anchored sections must clear it. */
html { scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ==========================================================================
   Batched fixes from the first inspection round
   ========================================================================== */

/* 1. A link page is a narrow column. Rendered at full column width it reads as
      a website, which is the one thing it is not — and it left most of the
      frame empty. The specimen now scales to its frame rather than to the
      viewport, so the same component is honest at 400px and at 240px. */
.spec-frame, .tile__in { container-type: inline-size; }

.spec {
  container-type: normal;
  font-size: clamp(8px, 3.6cqw, 15px);
}

.spread__cols .husk,
.spread__cols .spec-frame {
  width: 100%;
  max-width: 25rem;
  margin-inline: auto;
  aspect-ratio: 3 / 4.15;
}

/* The husk is a fixed-scale drawing, so it needs its own shrink rule. */
.spread__cols .husk { padding: 1.6rem 1rem 1.2rem; gap: .6rem; }
.spread__cols .husk__pill { height: clamp(30px, 9cqw, 42px); }

/* 2. Marquee labels were sized for a full page and clipped inside a tile. */
.sheet .spec[data-layout="marquee"] .spec__label { font-size: 1.5em; }

/* 3. The ledger icons sat on --ink-4, which is the disabled tone. */
.ledger__ic { color: var(--ink-3); }

/* 4. On a phone the payoff was a full screen below the fold. Both artifacts
      shrink so the comparison lands inside the first scroll. */
@media (max-width: 48rem) {
  .spread__cols .husk,
  .spread__cols .spec-frame { max-width: 20rem; aspect-ratio: 3 / 3.6; }
  .spread { padding-top: clamp(1.75rem, 5vw, 3rem); }
}

/* 5. The address section's two columns were reading as cramped at mid widths. */
.two { gap: clamp(1.5rem, 5vw, 4.5rem); }
.two .lede { max-width: 46ch; }

/* Second round. The artifacts were taller than their content, which read as
   unfinished rather than as a page with room to breathe. */
.spread__cols .husk,
.spread__cols .spec-frame { aspect-ratio: 3 / 3.6; }
.tile__in { aspect-ratio: 3 / 3.4; }

@media (max-width: 48rem) {
  .spread__cols .husk,
  .spread__cols .spec-frame { aspect-ratio: 3 / 3.3; }
}

/* The rule thickened to accent and then stayed, leaving a stray blue tick at
   the section boundary. It now finishes the moment by going out with the
   column it absorbed. */
@keyframes rule-thicken {
  from { background: var(--rule); width: 1px; opacity: 1; }
  70%  { background: var(--accent); width: 2px; opacity: 1; }
  to   { background: var(--accent); width: 2px; opacity: 0; }
}

/* On a phone the eight specimens stacked into a 7,500px page — most of it one
   section. As a snapping filmstrip the whole range stays scannable and the page
   comes down to 4,400px. A contact sheet is read laterally anyway. */
@media (max-width: 48rem) {
  .sheet {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: .7rem;
    padding-inline: var(--gut);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .sheet::-webkit-scrollbar { display: none; }

  .tile { flex: 0 0 66%; scroll-snap-align: center; }
  .tile__in { aspect-ratio: 3 / 4; }
}

@media (max-width: 30rem) {
  .sheet { grid-template-columns: none; }
  .tile { flex: 0 0 74%; }
}

/* ==========================================================================
   Finish-review fixes
   ========================================================================== */

/* FIX 2 — the generic page now carries the same name and the same four labels,
   set in its own flat treatment, so template, domain and brand are the only
   variables on screen. */
.husk { justify-content: flex-start; text-align: center; }

.husk__name {
  width: auto;
  height: auto;
  background: none;
  color: #7C7C74;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.husk__tag {
  width: auto;
  height: auto;
  background: none;
  color: #8B8B83;
  font-size: .8125rem;
  margin-bottom: .4rem;
}

.husk__pill {
  display: grid;
  place-items: center;
  height: auto;
  min-height: 42px;
  padding: .55rem .9rem;
  color: #6E6E66;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

/* FIX 1 + 5 — the artifacts now hug the gutter instead of floating centred in
   their columns. This puts the primary action on the owned side where FIRST
   VIEWPORT promised it, and it lets the collapse actually arrive at the rule:
   scaling the column from its right edge now carries the generic page into the
   gutter rather than shrinking it in place two-thirds of the way away. */
.spread__cols .husk       { margin-inline: auto 0; }
.spread__cols .spec-frame { margin-inline: 0 auto; }

.spread__act {
  justify-content: flex-start;
  width: 50%;
  margin-inline-start: auto;
  padding-left: clamp(.6rem, 2.5vw, 2rem);
}

/* FIX 4 — "hairline rules as the only furniture" is OWN-WORLD's own rule, and a
   drop shadow only the owned side receives makes ownership read as decoration. */
.spec-frame { box-shadow: none; }

/* The contract promised exactly one authored moment. The struck-through URL was
   a second scroll-driven one; it is now simply drawn, which keeps the meaning
   and costs nothing. */
.swap__was::after { transform: scaleX(1); animation: none; }

/* FIX 8 — the filmstrip needs a keyboard route in and a visible cue. */
.sheet:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }

.sheet__cue { display: none; }

@media (max-width: 48rem) {
  .sheet__cue {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .75rem 0 0;
    padding-inline: var(--gut);
    color: var(--ink-3);
    font-size: .75rem;
  }
  .sheet__cue .ic { width: 15px; height: 15px; }
}

/* Stacked layout puts both artifacts against their shared accent rule instead. */
@media (max-width: 48rem) {
  .spread__cols .husk,
  .spread__cols .spec-frame { margin-inline: auto; }
  .spread__act { width: auto; margin-inline-start: 0; padding-left: 0; }
}

/* FIX 1, second half — FIRST VIEWPORT names the action as part of the first
   screen. Tightening the spread's vertical rhythm brings it above the fold on a
   1440x950 laptop without shrinking the artifacts that carry the argument. */
.spread { padding-top: clamp(1.25rem, 3vw, 2.25rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.spread__head { margin-bottom: clamp(1.1rem, 2.6vw, 1.9rem); }
.spread__act  { margin-top: clamp(1.1rem, 2.6vw, 1.75rem); }
.spread__cols .husk,
.spread__cols .spec-frame { aspect-ratio: 3 / 3.35; }

/* The artifacts are sized from viewport height rather than column width, so the
   first viewport holds headline, both pages and the action on any laptop. The
   specimen scales by container width, so a height-driven frame keeps its
   content in proportion instead of clipping it. */
@media (min-width: 48rem) {
  .spread__cols .husk,
  .spread__cols .spec-frame {
    width: auto;
    height: clamp(290px, 44vh, 540px);
    height: clamp(290px, 44svh, 540px);
    aspect-ratio: 3 / 3.35;
    max-width: 25rem;
  }
  .spread__cols .husk { margin-inline: auto 0; }
  .spread__cols .spec-frame { margin-inline: 0 auto; }
}

/* A short laptop (1366x768 is still common) needs the display size to give a
   little back so the action stays on the first screen. */
@media (min-width: 48rem) and (max-height: 820px) {
  .spread__head { font-size: clamp(2.5rem, 5.6vw, 3.6rem); margin-bottom: clamp(.9rem, 2vw, 1.4rem); }
  .spread__cols .husk,
  .spread__cols .spec-frame { height: clamp(270px, 40svh, 460px); }
  .spread__act { margin-top: clamp(.9rem, 2vw, 1.3rem); }
}

/* FIX 5, properly — the collapse was converging on the column's right edge,
   which is half a grid gap short of the rule, so it narrowed in place and never
   arrived. Naming the gap as a token lets the keyframe carry the column the
   remaining half-gap, landing the sliver exactly on the gutter. */
.spread__cols { --col-gap: clamp(1.25rem, 5vw, 4rem); gap: var(--col-gap); }

@keyframes husk-collapse {
  from { opacity: 1; transform: translateX(0) scaleX(1); filter: blur(0); }
  70%  { opacity: .12; }
  to   { opacity: 0; transform: translateX(calc(var(--col-gap) / 2)) scaleX(.02); filter: blur(6px); }
}

/* The height-driven artifacts derived a width wider than their column at tablet
   sizes, pushing the document 4px sideways. The column is the hard limit. */
@media (min-width: 48rem) {
  .spread__cols .husk,
  .spread__cols .spec-frame { max-width: min(25rem, 100%); }
}

/* ==========================================================================
   Dimension

   A ledger spread is a folded sheet, so the page behaves like one. Three
   expressions of a single idea — the owned page is a physical object, the
   generic one is a leaf that turns away on the fold — rather than three
   separate effects.
   ========================================================================== */

:root { --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1); }

.spread__cols { perspective: 1800px; perspective-origin: 50% 42%; }
.col--theirs   { transform-style: preserve-3d; transform-origin: right center; will-change: transform, opacity; }
.col--yours    { transform-style: preserve-3d; }

/* The authored moment, now in three dimensions: the generic page hinges on the
   gutter and turns away, the way a leaf does. Same scroll range, same single
   moment — it simply became the thing the composition always implied. */
@keyframes husk-collapse {
  from {
    opacity: 1;
    transform: translateX(0) rotateY(0deg);
    filter: brightness(1);
  }
  70% { opacity: .18; }
  to {
    opacity: 0;
    transform: translateX(calc(var(--col-gap) / 2)) rotateY(-72deg);
    filter: brightness(.86);
  }
}

/* The owned page is an object: it holds a little depth at rest and takes the
   pointer's angle. The generic page never does — that asymmetry is the
   argument, not decoration. */
.spec-frame {
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 140ms var(--ease-out-strong);
}

@media (hover: hover) and (pointer: fine) {
  .spec-frame.is-idle { transition: transform 520ms var(--ease-out-strong); }
}

/* The specimen sheet gains real depth rather than a flat lift: cards sit on a
   shared 3D plane and come forward on the z-axis, so all eight stay scannable. */
.sheet { perspective: 1400px; }
.tile__in {
  transform: translateZ(0);
  transition:
    transform 320ms var(--ease-out-strong),
    box-shadow 320ms var(--ease-out-strong),
    border-color 200ms var(--ease-out-strong);
}

@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile__in,
  .tile:focus-within .tile__in {
    transform: translateZ(46px);
    box-shadow: 0 2rem 3rem -1.75rem rgba(18, 18, 15, .34);
    border-color: var(--rule-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spec-frame { transform: none !important; transition: none; }
  .tile:hover .tile__in,
  .tile:focus-within .tile__in { transform: none; box-shadow: none; }
  @keyframes husk-collapse {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
}

/* ==========================================================================
   The mark, in three dimensions

   Sits behind the headline on the gutter's axis — the spine of the spread
   made into the object the brand already is. Purely decorative, so it is
   aria-hidden and the page is complete without it: the canvas only appears
   once the renderer has actually started.
   ========================================================================== */

.mark3d {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(62rem, 108%);
  height: clamp(320px, 52vh, 620px);
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.23, 1, 0.32, 1);
}
.mark3d[data-ready] { opacity: 1; }
.mark3d canvas { display: block; width: 100% !important; height: 100% !important; }

/* The headline and the action must stay above it and stay legible. */
.spread__head,
.spread__cols,
.spread__act { position: relative; z-index: 1; }

@media (max-width: 48rem) {
  .mark3d { height: clamp(240px, 38vh, 360px); width: 130%; }
}

/* The mark sat centred behind the headline, where it crossed the type — bad for
   the setting and worse for contrast, since a rotating object moves its own
   mass under the words. It now threads the gutter below the headline: visible
   in the spine and above the two pages, occluded by them as it passes behind.
   Nothing reads over it, so nothing it does can hurt legibility. */
.mark3d {
  top: clamp(230px, 29vh, 330px);
  width: min(44rem, 92%);
  height: clamp(300px, 42vh, 480px);
}

@media (max-width: 48rem) {
  .mark3d { top: clamp(150px, 20vh, 230px); width: 118%; height: clamp(220px, 30vh, 320px); }
}

/* Third placement, and the right one. Behind the headline it crossed the type;
   threaded through the gutter the two pages occluded it almost completely. It
   now leads the hero in its own band — in normal flow, nothing over it, nothing
   in front of it. The sticky masthead keeps "Talk to us" on screen throughout,
   so the in-hero action moving down a little costs nothing. */
.mark3d {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: min(54rem, 100%);
  height: clamp(210px, 30vh, 360px);
  margin: 0 auto clamp(-1rem, -1vw, -.5rem);
}

@media (max-width: 48rem) {
  .mark3d { width: 116%; max-width: none; margin-inline: -8%; height: clamp(180px, 24vh, 250px); }
}

/* The phone rule bled the canvas past the viewport with a negative margin for
   the sake of a slightly larger object. Not worth a sideways scroll. */
@media (max-width: 48rem) {
  .mark3d {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    height: clamp(170px, 23vh, 240px);
  }
}