/* The public document. Mobile first: one column, metadata above what it describes. From 960px the card's axes
   appear: metadata hangs on the outer axis, prose sits on the inner one, and exhibits and tags take the right. */

:root { --gutter: var(--s4); }
@media (min-width: 600px) { :root { --gutter: var(--s5); } }

.grid, .top {
  max-width: calc(1096px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid {
  display: grid;
  grid-template-columns: [meta-start content-start aside-start] minmax(0, 1fr) [meta-end content-end aside-end];
  align-items: first baseline;
}
@media (min-width: 960px) {
  .grid {
    grid-template-columns:
      [meta-start] minmax(104px, 136px) [meta-end] var(--s5)
      [content-start] minmax(0, 640px) [content-end] clamp(24px, 4vw, 48px)
      [aside-start] minmax(200px, 248px) [aside-end];
  }
}
.meta { grid-column: meta; }
.body { grid-column: content; }
.wide { grid-column: content-start / aside-end; }
.meta { margin-bottom: var(--s3); }
@media (min-width: 960px) { .meta { margin-bottom: 0; } }

/* ─── Top ─── */
.top { display: flex; justify-content: space-between; align-items: center; height: 76px; }
.seal { display: block; width: 28px; height: 28px; border-radius: 2px; }
.seal img { width: 28px; height: 28px; }
.top-link { font-size: 14px; font-weight: 500; text-decoration: none; padding: 12px 0; }
.top-link:hover { text-decoration: underline; }

/* ─── Type ─── */
.display {
  font-size: clamp(40px, 6vw, 76px); font-weight: 600; line-height: 1.0; letter-spacing: -0.035em;
  max-width: 13em; text-wrap: balance;
}
.headline {
  font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em;
  max-width: 18em; text-wrap: balance;
}
.lead { font-size: 20px; line-height: 1.45; letter-spacing: -0.011em; color: var(--ink-2); max-width: 30em; margin-top: var(--s5); text-wrap: pretty; }

/* ─── Hero: who, what, how to reach. ─── */
.hero { padding-block: var(--s8); }
@media (min-width: 960px) { .hero { padding-top: var(--s9); } }
.reach { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s6); font-size: 20px; letter-spacing: -0.011em; }
.email { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: text-decoration-thickness var(--micro) var(--ease-out); }
.email:hover { text-decoration-thickness: 2px; }

/* Copy: for visitors whose mail opens in a browser tab, where mailto: does nothing. The label changes in place;
   its box is wide enough for both words, so nothing moves. */
.copy {
  position: relative; border: 0; background: none; cursor: pointer;
  padding: 0; min-width: 7ch; text-align: left; color: var(--ink-3);
  transition: color var(--micro) var(--ease-out);
}
.copy::before { content: ""; position: absolute; inset: -14px -10px; } /* 44px target, not 16px */
.copy:hover, .copy.is-done { color: var(--ink); }

/* ─── Fliq: three claims beside one phone. The phone shows the evidence for whichever claim is mid-screen. ─── */
.fliq { margin-top: var(--s8); align-items: stretch; } /* the exhibit must span its rows for sticky to work */
.claim { grid-column: meta-start / content-end; display: grid; grid-template-columns: subgrid; align-items: first baseline; }
.claim:nth-of-type(1) { grid-row: 1; }
.claim:nth-of-type(2) { grid-row: 2; }
.claim:nth-of-type(3) { grid-row: 3; }
.claim:nth-of-type(4) { grid-row: 4; }
.claim + .claim { margin-top: var(--s9); }
/* On a phone a label and its value stack; from 600px they share a line, joined by a dotted leader. */
.evidence { margin-top: var(--s5); max-width: 640px; display: grid; gap: var(--s3); }
.evidence dd { margin: 0; color: var(--ink); }
@media (min-width: 600px) {
.evidence { gap: var(--s2); }
.evidence > div { display: flex; align-items: baseline; gap: var(--s2); }
.evidence dt { flex: none; }
.evidence dd { text-align: right; min-width: 0; order: 2; }
.evidence > div::after {
  content: ""; order: 1; flex: 1 1 var(--s5); height: 2px; min-width: var(--s5);
  background: radial-gradient(circle, var(--hairline) 0.9px, transparent 1.1px) 0 50% / 5px 2px repeat-x;
  position: relative; top: -0.3em;
}
}

.shot { margin-top: var(--s6); width: min(264px, 70vw); border-radius: 13% / 6%; outline: 1px solid rgb(29 27 26 / 0.12); outline-offset: -1px; }
.out { margin-top: var(--s5); }
.out a { color: var(--ink); text-decoration: none; }
.out a:hover { text-decoration: underline; }

.exhibit { display: none; }

@media (min-width: 960px) {
  .fliq { margin-top: 0; }
  .claim { min-height: 92svh; align-content: center; }
  .claim + .claim { margin-top: 0; }
  .claim .shot { display: none; }
  .proof { min-height: 0; padding-block: var(--s9); }
  /* Starts centred on the first claim, then holds the middle of the viewport until the third claim leaves. */
  .exhibit { display: block; grid-column: aside; grid-row: 1 / span 3; position: relative; padding-top: max(0px, calc(46svh - 270px)); }
  .phone {
    position: sticky;
    top: max(var(--s5), calc(50svh - min(270px, 50svh - var(--s5))));
    width: min(100%, calc((100svh - 2 * var(--s5)) * 0.4619));
    aspect-ratio: 528 / 1143;
    container-type: inline-size;
  }
  .phone img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border-radius: 13cqi; outline: 1px solid rgb(29 27 26 / 0.12); outline-offset: -1px;
    opacity: 0; transition: opacity var(--state) var(--ease-out);
  }
  .phone img.is-active { opacity: 1; }
}

/* ─── Other work: one line each, numbered on from Fliq. ─── */
.work { margin-top: var(--s8); }
.row { grid-template-areas: "meta tag" "body body"; grid-template-columns: auto 1fr; padding-block: var(--s5); }
.row::before { content: ""; grid-column: 1 / -1; grid-row: 1; align-self: start; margin-top: calc(-1 * var(--s5)); border-top: 1px solid var(--hairline); }
.row .meta { grid-area: meta; margin-bottom: var(--s2); }
.row .tag { grid-area: tag; justify-self: end; text-align: right; }
.row .body { grid-area: body; }
.row h2 { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.row p:not(.mono) { font-size: 17px; line-height: 1.5; color: var(--ink-2); margin-top: var(--s1); max-width: 34em; }
@media (min-width: 960px) {
  .work { margin-top: 0; }
  .row { grid-template-areas: none; grid-template-columns:
      [meta-start] minmax(104px, 136px) [meta-end] var(--s5)
      [content-start] minmax(0, 640px) [content-end] clamp(24px, 4vw, 48px)
      [aside-start] minmax(200px, 248px) [aside-end]; }
  /* All in row 1, which the rule (::before) also holds; auto-placement would push the text down to row 2. */
  .row .meta { grid-area: 1 / meta; margin-bottom: 0; }
  .row .body { grid-area: 1 / content; }
  .row .tag { grid-area: 1 / aside; justify-self: start; text-align: left; }
  .row::before { grid-column: content-start / aside-end; }
  .row h2 { font-size: 24px; }
}

/* ─── Contact: the one action, as the last word on the page. ─── */
.contact { padding-block: var(--s9) var(--s10); }
.sign { font-size: clamp(26px, 7.2vw, 72px); font-weight: 600; line-height: 1.05; letter-spacing: -0.035em; }
.email-xl { text-decoration-line: underline; text-decoration-thickness: 0.04em; text-underline-offset: 0.12em; }
.email-xl:hover { text-decoration-thickness: 0.08em; }
.after { display: flex; gap: var(--s6); align-items: baseline; margin-top: var(--s5); }
.after a { color: var(--ink); text-decoration: none; }
.after a:hover { text-decoration: underline; }