/* Site shell · fonts, base, type, nav, footer, Button, focus, skip link (docs/shell-spec.md). Needs tokens.css. */

/* ---------- Fonts (self-hosted, OFL-1.1) ---------- */
@font-face { font-family: "Funnel Display"; src: url("../fonts/funnel-display-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url("../fonts/funnel-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url("../fonts/funnel-sans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("../fonts/martian-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

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

html {
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

html, body { margin: 0; }

body {
  padding-bottom: var(--in-page-y); /* the page's own 32 under the footer */
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: "Funnel Sans", system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--type-body);
  line-height: 1.55;
}

[id] { scroll-margin-top: var(--nav-height); }

.nowrap { white-space: nowrap; }

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

/* ---------- Type (Site/* styles) ---------- */
.t-hero, .t-case-hero, .t-end, .t-chapter, .t-case-title, .t-card-title,
.t-bubble, .t-metric, .t-body-strong, .t-nav-name {
  font-family: "Funnel Display", system-ui, sans-serif;
  font-weight: 500;
}
.t-sub, .t-body, .t-caption, .t-nav-link {
  font-family: "Funnel Sans", system-ui, sans-serif;
  font-weight: 400;
}
.t-button, .t-nav-button {
  font-family: "Funnel Sans", system-ui, sans-serif;
  font-weight: 600;
}
.t-label, .t-caption-mono {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-weight: 400;
}

.t-hero        { font-size: var(--type-hero);        line-height: 0.95; letter-spacing: -0.05em; }
.t-case-hero   { font-size: var(--type-case-hero);   line-height: 0.98; letter-spacing: -0.045em; }
.t-end         { font-size: var(--type-end);         line-height: 0.90; letter-spacing: -0.06em; }
.t-chapter     { font-size: var(--type-chapter);     line-height: 1.02; letter-spacing: -0.045em; }
.t-case-title  { font-size: var(--type-case-title);  line-height: 1.02; letter-spacing: -0.04em; }
.t-card-title  { font-size: var(--type-card-title);  line-height: 1.12; letter-spacing: -0.03em; }
.t-bubble      { font-size: var(--type-bubble);      line-height: 1.15; letter-spacing: -0.025em; }
.t-metric      { font-size: var(--type-metric);      line-height: 1.00; letter-spacing: -0.04em; }
.t-body-strong { font-size: var(--type-body-strong); line-height: 1.40; letter-spacing: -0.01em; }
.t-sub         { font-size: var(--type-sub);         line-height: 1.45; letter-spacing: 0; }
.t-body        { font-size: var(--type-body);        line-height: 1.55; letter-spacing: 0; }
.t-caption     { font-size: var(--type-caption);     line-height: 1.50; letter-spacing: 0; }
.t-button      { font-size: var(--type-button);      line-height: 1.00; letter-spacing: 0; }
.t-label       { font-size: var(--type-label);       line-height: 1.60; letter-spacing: 0.08em; text-transform: uppercase; }
.t-caption-mono { font-size: var(--type-caption);    line-height: 1.50; letter-spacing: 0; }
.t-nav-name    { font-size: var(--type-nav-name);    line-height: 1.20; letter-spacing: -0.02em; }
.t-nav-link    { font-size: var(--type-nav-link);    line-height: 1.40; letter-spacing: 0; }
.t-nav-button  { font-size: var(--type-nav-button);  line-height: 1.00; letter-spacing: 0; }

/* ---------- Focus and skip link ---------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-line-exact);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: var(--space-8);
  left: var(--in-page-x);
  z-index: 100;
  padding: var(--in-s-y) var(--in-s-x);
  border-radius: var(--radius-pill);
  background: var(--color-bg-ink);
  color: var(--color-text-on-ink);
  font-family: "Funnel Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--type-button);
  line-height: 1;
  text-decoration: none;
}
.skip-link:not(:focus) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Hand circle mark (nav current + footer loop) ---------- */
.hand-circle {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}
.hand-circle path {
  fill: none;
  stroke-width: var(--stroke-exact);
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

/* ---------- Nav ---------- */
[data-shell="nav"] {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: var(--nav-height);
  padding: 0 var(--in-page-x);
  background: rgb(255 255 255 / 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.nav-name {
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
}
.nav-name__short { display: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--nav-link-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.nav-link {
  position: relative;
  display: inline-block;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.nav-link[aria-current="page"] { color: var(--color-text-primary); }

/* Figma: 92 × 55 around a 44 × 27 label */
.nav-mark {
  left: -24px;
  top: -14px;
  width: calc(100% + 48px);
  height: calc(100% + 28px);
}
.nav-mark path { stroke: var(--color-line-exact); } /* Update 8 Nov 2026 (Eden): the thread's line color */
.nav-link:not([aria-current="page"]) .nav-mark { display: none; }

@media (hover: hover) {
  .nav-link:hover { color: var(--color-text-primary); }
}

@media (max-width: 600px) {
  .nav-name__full { display: none; }
  .nav-name__short { display: inline; }

  /* Touch targets ≥ 44 × 44: only the hit area grows, never the visible size */
  .nav-link::after,
  .btn--nav::after {
    content: "";
    position: absolute;
  }
  .nav-link::after { inset: -9px -8px; } /* 27 + 18 = 45 tall */
  .btn--nav::after { inset: -8px; }      /* 39 + 16 = 55 tall */
}

/* ---------- Button (.btn) ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-primary);
  font-family: "Funnel Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--type-button);
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary,
.btn--secondary {
  transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.btn--primary {
  padding: var(--in-s-y) var(--in-s-x);
  background: var(--color-bg-ink);
  color: var(--color-text-on-ink);
}

/* Same padding as Primary, so it is always 38 tall. The line is a layer behind the label,
   not a real border, because Chrome rounds border widths and that changed the size. */
.btn--secondary {
  isolation: isolate;
  padding: var(--in-s-y) var(--in-s-x);
  background: transparent;
  color: var(--color-text-primary);
}
.btn--secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: var(--stroke-exact) solid var(--color-line-exact);
  border-radius: inherit;
  pointer-events: none;
}
/* Update 13 Nov 2026 (Eden): the footer's copy-email button is drawn by outline.js as one SVG stroke aligned to
   device pixels (story.css "Outlines"); this border stays as the no-JS fallback. Only this button. */
.footer-email__copy {
  --ol-w: var(--stroke-exact);
  --ol-line: var(--color-line-exact);
  --ol-fill: none;
}
.footer-email__copy.has-outline::before { content: none; }

.btn--nav {
  padding: var(--nav-pill-y) var(--nav-pill-x);
  font-size: var(--type-nav-button);
}

.btn--text {
  padding: 0 0 4px;
  border-radius: 0;
}
.btn--text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--stroke-exact);
  background: var(--color-line-exact);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s;
}
.btn--text:focus-visible::after { transform: scaleX(1); }

@media (hover: hover) {
  .btn--primary:hover,
  .btn--secondary:hover {
    transform: translateY(-2px) scale(1.05);
  }
  .btn--secondary:hover {
    background: var(--color-bg-ink);
    color: var(--color-text-on-ink);
  }
  .btn--text:hover::after { transform: scaleX(1); }
}

.btn--primary:active,
.btn--secondary:active {
  transform: scale(0.97);
}

/* Arrow: takes no space at rest; opens only on host hover or keyboard focus */
.btn__arrow {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  flex: none;
  width: 0;
  margin-left: 0;
  overflow: hidden;
  transition: width 0.45s cubic-bezier(0.5, 0, 0.2, 1), margin-left 0.45s cubic-bezier(0.5, 0, 0.2, 1);
}
.btn__arrow svg {
  display: block;
  flex: none;
  overflow: visible;
}
.btn__arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke-exact);
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-arrow-host]:focus-visible .btn__arrow,
[data-arrow-host]:has(:focus-visible) .btn__arrow,
.btn:focus-visible .btn__arrow {
  width: 13px;
  margin-left: 8px;
}
@media (hover: hover) {
  [data-arrow-host]:hover .btn__arrow,
  .btn:hover .btn__arrow {
    width: 13px;
    margin-left: 8px;
  }
}

/* ---------- Footer ---------- */
[data-shell="footer"] {
  display: flex;
  flex-direction: column;
  gap: var(--rh-block);
  padding: var(--rh-chapter) var(--in-page-x) 32px;
}
[data-shell="footer"] p,
[data-shell="footer"] ul { margin: 0; }

/* "Let’s talk." · two words in one row, gap from the token (not a space) */
.footer-talk__row {
  display: flex;
  gap: var(--type-end-word-space);
  white-space: nowrap;
}

/* Chrome applies the −0.06em tracking after the last letter too, so each word box is 0.06em
   short of Figma's. Give it back (Site/End tracking) so every box matches Figma.
   On "talk" it is padding, inside the box, so the loop sizes from the full box. */
.footer-talk__row > span:first-child,
.footer-talk__end { margin-inline-end: 0.06em; }

/* Loop around "talk" (not the period). Figma desktop: 394.3 × 208.8 around a 318 × 180 word */
.footer-talk__word {
  position: relative;
  display: inline-block;
  padding-inline-end: 0.06em;
}
.footer-talk__loop {
  left: 50%;
  top: 56%;
  width: 124%;
  height: 116%;
  transform: translate(-50%, -50%);
}
/* Drawn by the thread (task 9) through --loop-draw, 0 → 1.
   --loop-len is the on-screen length, set by shell.js; hidden until it is measured.
   The gap is 4px longer than the dash and the offset 2px past it, so at 0 even the round caps are hidden. */
.footer-talk__loop:not([data-loop-ready]) { visibility: hidden; }
.footer-talk__loop path {
  stroke: var(--color-line-exact);
  stroke-dasharray: var(--loop-len) calc(var(--loop-len) + 4px);
  stroke-dashoffset: calc((var(--loop-len) + 2px) * (1 - var(--loop-draw, 0)));
}

.footer-email {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-email__address {
  color: var(--color-text-secondary);
  text-decoration: none;
}

/* The button hugs the label it shows (111 at rest, like Figma); nothing sits after it, so nothing moves */
.footer-email__done { display: none; }
.footer-email__copy.is-copied .footer-email__rest { display: none; }
.footer-email__copy.is-copied .footer-email__done { display: inline; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--rh-section);
}
.footer-bottom__copyright { color: var(--color-text-secondary); }
/* Each Text link is 18 tall like Figma (14px, line-height 1, padding-bottom 4) */
.footer-bottom__links {
  display: flex;
  gap: 24px;
  padding: 0;
  list-style: none;
  line-height: 1;
}
.footer-bottom__links > li { display: flex; }

/* Footer hover: Copy email turns Primary, the email turns primary, the loop closes */
@media (hover: hover) {
  [data-shell="footer"]:hover { --loop-draw: 1; }
  [data-shell="footer"]:hover .footer-email__address { color: var(--color-text-primary); }
  [data-shell="footer"]:hover .footer-email__copy {
    background: var(--color-bg-ink);
    color: var(--color-text-on-ink);
    transform: translateY(-2px);
  }
  [data-shell="footer"]:hover .footer-email__copy:hover { transform: translateY(-2px) scale(1.05); }
  [data-shell="footer"]:hover .footer-email__copy:active { transform: scale(0.97); }
}

@media (max-width: 600px) {
  [data-shell="footer"] { padding-bottom: 64px; }
  .footer-email {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ---------- Reduced motion: no lift, no grow, no transitions; color changes stay ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::after,
  .btn__arrow {
    transition: none;
  }
  .btn--primary:hover,
  .btn--secondary:hover,
  .btn--primary:active,
  .btn--secondary:active,
  [data-shell="footer"]:hover .footer-email__copy,
  [data-shell="footer"]:hover .footer-email__copy:hover,
  [data-shell="footer"]:hover .footer-email__copy:active {
    transform: none;
  }
}