/* ═══════════════════════════════════════════════════════════════
   THE LETTERPRESS CUT · second impression
   One continuous sheet of cream paper, set left like a book page.
   Ink & navy, brick used once per section at most. Engraved line
   art carries the systems that have no screenshots.
   Type: Cormorant Garamond (display) · Lora (text) · Jost (UI)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --paper: #f7f2e7;
  --mist: #eef0ea;
  --ink: #29241c;
  --soft: #675f4f;
  --navy: #29486b;
  --navy-deep: #1e3550;
  --brick: #b3543f;
  --line: rgba(41, 36, 28, 0.16);
  --hair: rgba(41, 36, 28, 0.1);
  --serif: "Cormorant Garamond", Georgia, serif;
  --body: "Lora", Georgia, serif;
  --ui: "Jost", "Futura", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.04rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* a whisper of paper grain, over everything including images */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }

::selection { background: rgba(179, 84, 63, 0.18); }
:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; }

.page {
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: clamp(1.4rem, 6vw, 5rem);
}
.measure { max-width: 38rem; }

/* ── reveals ─────────────────────────────────────────────────── */
.js .r { opacity: 0; translate: 0 14px; }
.js .r.in {
  opacity: 1; translate: 0 0;
  transition: opacity 0.65s ease, translate 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);
  transition-delay: calc(var(--d, 0) * 110ms);
}

/* ── nav ─────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem clamp(1.4rem, 6vw, 5rem);
  background: rgba(247, 242, 231, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-name {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.3rem; color: var(--ink); text-decoration: none;
  letter-spacing: 0.01em;
}
.nav-links { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem); }
.nav-links a {
  font-family: var(--ui); font-weight: 500; font-size: 0.82rem;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--soft); text-decoration: none;
}
.nav-links a:hover { color: var(--ink); }

/* ── buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--ui); font-weight: 500; font-size: 0.85rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.7rem;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, translate 0.25s ease;
}
.nav-cta {
  border: 1.5px solid var(--brick);
  border-radius: 2px;
  padding: 0.5rem 1rem !important;
  color: var(--brick) !important;
}
.nav-cta:hover { background: var(--brick); color: var(--paper) !important; }
.btn--brick { color: var(--brick); box-shadow: 2px 2px 0 rgba(179, 84, 63, 0.35); }
.btn--brick:hover { background: var(--brick); color: var(--paper); box-shadow: 1px 1px 0 rgba(179, 84, 63, 0.35); translate: 1px 1px; }
.btn--cream { color: var(--paper); box-shadow: 2px 2px 0 rgba(247, 242, 231, 0.28); }
.btn--cream:hover { background: var(--paper); color: var(--navy-deep); box-shadow: 1px 1px 0 rgba(247, 242, 231, 0.28); translate: 1px 1px; }
.btn-note { margin-top: 0.85rem; font-size: 0.88rem; font-style: italic; color: var(--soft); }
.btn-note--light { color: rgba(247, 242, 231, 0.72); }

/* ── type ────────────────────────────────────────────────────── */
h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.7rem, 6vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: 0.002em;
  max-width: 17ch;
  text-wrap: balance;
}
h1 em, h2 em { font-style: italic; color: var(--navy); }

h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  max-width: 24ch;
  text-wrap: balance;
}

/* ── hero ────────────────────────────────────────────────────── */
.hero { padding: clamp(4rem, 11vh, 7.5rem) 0 0; }
.hero-sub {
  margin: 1.7rem 0 2.4rem;
  max-width: 36rem;
  color: var(--soft);
  font-size: 1.08rem;
}
.swell { width: 100%; height: auto; margin-top: clamp(2.5rem, 6vh, 4.5rem); display: block; }
.sw-main { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; }
.sw-hair { fill: none; stroke: var(--navy); stroke-width: 1; opacity: 0.3; }
.sw-boat path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.sw-boat path:first-child { fill: var(--ink); }
.js .swell .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .swell.in .draw { animation: draw 1.8s ease-out 0.5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ── passages: one sheet, ruled ──────────────────────────────── */
.passage { padding: clamp(3.6rem, 9vh, 6rem) 0; }
.passage .page > h2 { margin-bottom: 0.4rem; }
.passage:not(.hero) .page > :first-child { border-top: 0; }
.passage + .passage .page,
.passage .page { position: relative; }
main .passage:not(.passage--mist):not(.passage--navy) + .passage:not(.passage--mist):not(.passage--navy) > .page::before {
  content: "";
  position: absolute; top: calc(-1 * clamp(3.6rem, 9vh, 6rem));
  left: clamp(1.4rem, 6vw, 5rem); right: clamp(1.4rem, 6vw, 5rem);
  height: 1px; background: var(--line);
}
.passage--mist { background: var(--mist); }
.passage--navy {
  background: linear-gradient(174deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--paper);
  text-align: center;
}

.measure h2 + p { margin-top: 1.3rem; }
.measure p + p { margin-top: 1.1rem; }
.turn {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.35rem, 2.3vw, 1.7rem);
  line-height: 1.4;
}
.section-lede { margin-top: 1rem; max-width: 34rem; color: var(--soft); font-style: italic; }

/* ── the practice ────────────────────────────────────────────── */
.practice {
  margin-top: 2.6rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.entry h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.45rem; line-height: 1.25;
  margin-bottom: 0.7rem;
}
.entry p { font-size: 0.98rem; color: var(--soft); }

/* ── work you can visit ──────────────────────────────────────── */
.piece--feature { margin-top: 2.6rem; }
.pieces {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
}
.frame {
  background: #fdfbf4;
  border: 1px solid var(--line);
  padding: 8px;
  box-shadow: 0 1px 2px rgba(41, 36, 28, 0.08), 0 10px 22px -12px rgba(41, 36, 28, 0.28);
  transition: translate 0.3s ease, box-shadow 0.3s ease;
}
.piece:hover .frame {
  translate: 0 -5px;
  box-shadow: 0 2px 3px rgba(41, 36, 28, 0.07), 0 20px 34px -14px rgba(41, 36, 28, 0.34);
}
.cap {
  margin-top: 0.75rem;
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--soft);
}
.cap strong { font-style: normal; font-weight: 500; color: var(--ink); }
.cap a { color: var(--brick); text-decoration: none; white-space: nowrap; font-style: normal; }
.cap a:hover { text-decoration: underline; }
.cap-note { font-size: 0.8rem; }

/* ── systems you can't screenshot ────────────────────────────── */
.story {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(3rem, 7vh, 4.5rem);
}
.story:nth-of-type(even) .story-text { order: 2; }
.story:nth-of-type(even) .eng { order: 1; }
.story-text { max-width: 34rem; }
.story h3 {
  font-family: var(--serif); font-weight: 600; font-style: italic;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  line-height: 1.3;
  margin-bottom: 0.8rem;
}
.story p { color: var(--soft); font-size: 0.99rem; }

.eng { width: min(100%, 24rem); justify-self: center; height: auto; }
.eng-line { fill: none; stroke: var(--navy); stroke-width: 1.7; stroke-linecap: round; }
.eng-fine { fill: none; stroke: var(--navy); stroke-width: 1.1; stroke-linecap: round; opacity: 0.75; }
.eng-hair { fill: none; stroke: var(--navy); stroke-width: 0.8; opacity: 0.38; }
.eng-hairer { fill: none; stroke: var(--navy); stroke-width: 0.8; opacity: 0.22; }
.eng-dash { fill: none; stroke: var(--navy); stroke-width: 1.1; stroke-dasharray: 6 5; opacity: 0.65; }
.eng-dot { fill: var(--navy); }
.eng-accent circle { fill: var(--brick); }

/* ── how we work + proof ─────────────────────────────────────── */
.proof {
  margin-top: clamp(2.6rem, 6vh, 3.8rem);
  padding: 1.8rem 0 0 1.6rem;
  border-top: 1px solid var(--line);
  border-left: 2px solid var(--brick);
}
.proof p:first-child {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 1.3rem; line-height: 1.5;
  text-indent: -0.45em;
}
.proof cite {
  display: block; margin-top: 0.9rem;
  font-style: normal; font-size: 0.86rem;
  color: var(--soft);
}
.proof-note { margin-top: 1.1rem; font-size: 0.94rem; color: var(--soft); }

/* ── close ───────────────────────────────────────────────────── */
.stakes { max-width: 30rem; margin-inline: auto; color: rgba(247, 242, 231, 0.78); font-style: italic; }
.close-line {
  position: relative;
  display: inline-block;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 1.15;
  margin: 1.4rem auto 2.4rem;
}
.close-line em { font-style: italic; color: #f0c9a8; }
.flourish {
  position: absolute; left: 4%; right: -2%; bottom: -0.34em;
  width: 98%; height: 0.42em;
}
.flourish path { stroke: var(--brick); stroke-width: 3; stroke-linecap: round; }
.js .flourish .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .in .flourish .draw { animation: draw 0.9s ease-out 0.9s forwards; }

/* ── footer ──────────────────────────────────────────────────── */
.foot {
  text-align: center;
  padding: clamp(2.5rem, 6vh, 4rem) 0;
}
.foot-name { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; }
.foot-line { margin-top: 0.3rem; font-size: 0.92rem; font-style: italic; color: var(--soft); }
.foot-links { display: flex; justify-content: center; gap: 1.8rem; margin-top: 1rem; }
.foot-links a {
  font-family: var(--ui); font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--soft); text-decoration: none;
}
.foot-links a:hover { color: var(--brick); }
.foot-note { margin-top: 1.1rem; font-size: 0.82rem; font-style: italic; color: rgba(41, 36, 28, 0.5); }

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width: 66rem) {
  .practice { grid-template-columns: 1fr; gap: 1.8rem; max-width: 38rem; }
}
@media (max-width: 56rem) {
  .story { grid-template-columns: 1fr; gap: 1.6rem; }
  .story:nth-of-type(even) .story-text { order: 1; }
  .story:nth-of-type(even) .eng { order: 2; }
  .eng { width: min(72%, 19rem); justify-self: start; }
  .pieces { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) {
  .nav-links a:not(.nav-cta) { display: none; }
  .nav-name { font-size: 1.05rem; white-space: nowrap; }
  .nav-cta { font-size: 0.72rem; padding: 0.45rem 0.75rem !important; white-space: nowrap; }
  .pieces { grid-template-columns: 1fr; max-width: 26rem; }
}

/* ── reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .r { opacity: 1; translate: 0 0; transition: none; }
  .js .swell .draw, .js .flourish .draw { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .frame, .piece:hover .frame { transition: none; translate: 0 0; }
  .btn, .btn:hover { translate: 0 0; }
}