@font-face {
  font-family: "Quentin";
  src: url("fonts/Quentin.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --display: "Quentin", "EB Garamond", Georgia, serif;
  --paper: #f8f8f7;
  --ink: #1a0d0b;
  --ink-soft: #5c5450;
  --charcoal: #3b3b3b;
  --line: rgba(26, 13, 11, 0.14);
  --dark: #140705;
  --dark-ink: #f8f8f7;
  --dark-soft: #a8a29c;
  --serif: "EB Garamond", Georgia, serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --gutter: 16px;
  --radius: 14px;
  --bg: var(--paper);
  --fg: var(--ink);
  --soft: var(--ink-soft);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.7s ease, color 0.7s ease;
  overflow-x: hidden;
}
body.is-dark { --bg: var(--dark); --fg: var(--dark-ink); --soft: var(--dark-soft); --line: rgba(248, 248, 247, 0.14); }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ── Header ── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gutter);
  mix-blend-mode: difference; color: #fff;
}
.wordmark { font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: 0.16em; }
.menu-btn {
  width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 5px; align-items: flex-end;
}
.menu-btn span { display: block; width: 18px; height: 1.5px; background: #fff; transition: transform 0.35s ease; }
body.menu-open .menu-btn span:first-child { transform: translateY(3.25px) rotate(45deg); }
body.menu-open .menu-btn span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ── Menu overlay ── */
.menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--dark); color: var(--dark-ink);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 96px var(--gutter) 28px;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s cubic-bezier(0.77, 0, 0.18, 1);
}
body.menu-open .menu { clip-path: inset(0 0 0 0); }
.menu-links { list-style: none; margin: 0; padding: 0; }
.menu-links a {
  font-family: var(--serif); font-size: clamp(44px, 9vw, 112px); line-height: 1.05;
  display: inline-block; transition: opacity 0.25s, transform 0.35s;
}
.menu-links a:hover { opacity: 0.55; transform: translateX(10px); }
.menu-foot { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; color: var(--dark-soft); }
.menu-foot a:hover { color: var(--dark-ink); }

/* ── Shared ── */
section { padding-left: var(--gutter); padding-right: var(--gutter); }
.label { font-size: 14px; color: var(--soft); margin: 0 0 14px; }
.serif-lead {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -0.01em;
  margin: 0; max-width: 16ch;
}
.section-head { margin-bottom: clamp(40px, 6vw, 80px); }
.section-sub { color: var(--soft); margin: 18px 0 0; max-width: 42ch; }

/* ── Hero ── */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; position: relative; padding-top: 80px; padding-bottom: 32px;
}
.hero-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(34px, 5.2vw, 76px); line-height: 1; letter-spacing: -0.015em;
  margin: auto 0;
}
/* Handwritten line (handwriting.js). Images are 160px per em, so width in em keeps the old type size. */
.hw { position: relative; display: inline-block; line-height: 0; }
.hw-final { display: block; height: auto; }
.hw-wide { width: 15.33em; }
.hw-stacked { width: 8.08em; display: none; }
.hw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.will-write .hw-final, .hw.is-playing .hw-final { visibility: hidden; }
.will-write .hero-foot { opacity: 0; transform: translateY(16px); }
.hero-foot { transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hero.is-written .hero-foot { opacity: 1; transform: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero-foot { margin-top: 48px; }
.hero-kicker { font-size: 12px; color: var(--soft); margin: 0 0 18px; }
.laurels {
  list-style: none; margin: 0 auto; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; row-gap: 10px;
  font-size: 12px; color: var(--charcoal);
}
.laurels li { padding: 0 16px; line-height: 1; }
.laurels li + li { border-left: 1px solid var(--charcoal); }

/* ── Showcase ── */
.showcase { padding-top: 24px; padding-bottom: clamp(80px, 12vw, 180px); }
.showcase-card {
  width: 78%; margin: 0 auto; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 9; will-change: width;
}
.showcase-card img { width: 100%; height: 100%; object-fit: cover; }

/* ── Practice rows ── */
.practice { padding-bottom: clamp(100px, 14vw, 200px); }
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid; grid-template-columns: minmax(0, 37.5%) 1fr auto; align-items: center; gap: 16px;
  padding: 28px 0; border-bottom: 1px solid var(--line); cursor: default;
}
.row-title { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; transition: transform 0.4s ease; }
.row-desc { font-size: 15px; color: var(--soft); }
.row-arrow { opacity: 0; transform: translateX(-8px); transition: opacity 0.3s, transform 0.3s; }
.row:hover .row-title { transform: translateX(10px); }
.row:hover .row-arrow { opacity: 1; transform: none; }

/* ── Work (horizontal) ── */
.work { padding-left: 0; padding-right: 0; padding-bottom: clamp(80px, 10vw, 140px); }
.work .section-head { padding: 0 var(--gutter); }
.work-pin { overflow: hidden; }
.work-track { display: flex; gap: 16px; padding: 0 var(--gutter); width: max-content; }
.case { width: clamp(260px, 34vw, 480px); flex: none; display: block; }
.case-media { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: #2a1a17; }
.case-media img, .case-media video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.case:hover .case-media img, .case:hover .case-media video { transform: scale(1.045); }
.case-info { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; font-size: 14px; }
.case-info h3 { font-weight: 400; font-size: 15px; margin: 0; white-space: nowrap; }
.case-info p { margin: 0; color: var(--soft); text-align: right; }

/* ── Statement ── */
.statement { padding-top: clamp(80px, 10vw, 140px); padding-bottom: clamp(100px, 14vw, 200px); }
.statement-quote {
  font-family: var(--serif); font-size: clamp(38px, 6vw, 92px); line-height: 1.02;
  letter-spacing: -0.015em; margin: 0 0 clamp(48px, 7vw, 96px); max-width: 18ch;
}
.principles {
  list-style: none; margin: 0; padding: 0; counter-reset: p;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.principles li { counter-increment: p; border-top: 1px solid var(--line); padding-top: 14px; font-size: 15px; color: var(--soft); }
.principles li::before { content: counter(p, decimal-leading-zero); display: block; color: var(--fg); margin-bottom: 24px; font-size: 13px; }
.principles strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; color: var(--fg); margin-bottom: 12px; }
.principles em { display: block; font-style: normal; font-size: 13px; color: var(--fg); margin-top: 16px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--fg);
  background: var(--fg); color: var(--bg); font: 500 14px/1 var(--sans); cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--fg); }
.btn-ghost:hover { background: var(--fg); color: var(--bg); }
.btn-block { width: 100%; }
.btn-light { background: var(--dark-ink); color: var(--dark); border-color: var(--dark-ink); }
.hero-ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 0 40px; }
.wordmark-studio { opacity: 0.55; }
.showcase-caption { text-align: center; font-size: 13px; color: var(--soft); margin: 18px 0 0; }
.rows .row { color: inherit; }

/* "Your church could be next" card */
.case-next .case-media {
  background: transparent; border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between; padding: 28px;
}
.case-next-text { font-family: var(--serif); font-size: clamp(32px, 3.4vw, 48px); line-height: 1.04; }
.case-next-cta { font-size: 14px; color: var(--soft); transition: color 0.3s, transform 0.3s; }
.case-next:hover .case-next-cta { color: var(--fg); transform: translateX(6px); }

/* ── Packages: paper cards ── */
.packages { padding-top: clamp(100px, 12vw, 180px); padding-bottom: clamp(100px, 14vw, 200px); }
.pkg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 36px); align-items: stretch; padding: 12px 4px 0; }
.pkg {
  --tilt: 0deg;
  position: relative; display: flex; flex-direction: column;
  padding: clamp(26px, 2.4vw, 36px) clamp(22px, 2vw, 30px) 24px;
  background: #fdfbf6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border-radius: 3px 6px 4px 7px / 6px 3px 7px 4px;   /* slightly uneven, like cut paper */
  box-shadow:
    0 1px 1px rgba(70, 45, 25, 0.06),
    0 8px 16px -8px rgba(70, 45, 25, 0.18),
    0 26px 44px -26px rgba(70, 45, 25, 0.28);
  rotate: var(--tilt);
  transition: rotate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.6s ease;
}
.pkg:nth-child(1) { --tilt: -1.1deg; }
.pkg:nth-child(2) { --tilt: 0.7deg; }
.pkg:nth-child(3) { --tilt: -0.5deg; }
.pkg:nth-child(4) { --tilt: 1deg; }
.pkg:hover {
  rotate: 0deg; translate: 0 -6px;
  box-shadow:
    0 1px 1px rgba(70, 45, 25, 0.06),
    0 14px 24px -10px rgba(70, 45, 25, 0.22),
    0 40px 60px -30px rgba(70, 45, 25, 0.32);
}
.pkg-care { background-color: #f4ede1; }               /* a warmer, kraft-like sheet */
.pkg-note {
  position: absolute; top: -18px; right: 18px; margin: 0;
  font-family: var(--display); font-size: 30px; line-height: 1; color: var(--ink);
  rotate: -6deg; pointer-events: none;
}
.pkg-name { font-size: 14px; color: var(--soft); margin: 0 0 18px; }
.pkg-price { font-variant-numeric: lining-nums tabular-nums; font-family: var(--serif); font-size: clamp(44px, 4vw, 60px); line-height: 1; margin: 0 0 18px; letter-spacing: -0.01em; }
.pkg-price span { display: block; font-family: var(--sans); font-size: 12px; color: var(--soft); letter-spacing: 0; margin-bottom: 6px; }
.pkg-price small { font-family: var(--sans); font-size: 15px; color: var(--soft); letter-spacing: 0; }
.pkg-for { margin: 0 0 20px; font-size: 15px; line-height: 1.45; }
.pkg-list { list-style: none; margin: 0 0 28px; padding: 0; font-size: 14px; line-height: 1.5; color: var(--soft); flex: 1; }
.pkg-list li { padding: 3px 0 3px 16px; position: relative; }
.pkg-list li::before { content: "–"; position: absolute; left: 0; }
.pkg-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0;
  padding-top: 16px; border-top: 1px dashed rgba(70, 45, 25, 0.22); font-size: 13px;
}
.pkg-time { color: var(--soft); }
.pkg-cta { font-weight: 500; white-space: nowrap; }
.pkg-cta span { display: inline-block; transition: transform 0.3s ease; }
.pkg:hover .pkg-cta span { transform: translateX(4px); }

/* ── FAQ ── */
.faq { padding-bottom: clamp(100px, 14vw, 200px); display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 6vw, 96px); }
.faq .section-head { margin: 0; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 300; transition: transform 0.3s ease;
}
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details p { margin: 0 0 24px; color: var(--soft); max-width: 58ch; }

/* ── Artifacts ── */
.artifacts { padding-bottom: clamp(100px, 14vw, 200px); }
.art-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.art-grid figure { margin: 0; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; }
.art-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.art-grid figure:hover img { transform: scale(1.05); }
.art-grid figure:nth-child(4n+2) { transform: translateY(48px); }
.art-grid figure:nth-child(4n+4) { transform: translateY(24px); }

/* ── About ── */
.about {
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 6vw, 96px); align-items: end;
  padding-top: 40px; padding-bottom: clamp(100px, 14vw, 200px);
}
.about-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; }
.about-img img { width: 100%; height: 100%; object-fit: cover; }
.about-copy p:not(.label) { color: var(--soft); max-width: 52ch; margin: 18px 0 0; }
.about-copy .serif-lead { margin-bottom: 12px; }

/* ── Footer ── */
.site-footer {
  background: var(--dark); color: var(--dark-ink);
  padding: clamp(80px, 12vw, 160px) var(--gutter) 28px;
}
.site-footer .label { color: var(--dark-soft); }
.footer-cta {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 7vw, 112px); line-height: 1; letter-spacing: -0.015em;
  margin: 0 0 18px; max-width: 14ch;
}
.footer-sub { color: var(--dark-soft); margin: 0 0 clamp(40px, 6vw, 72px); }

/* Inquiry form (Netlify Forms) */
.inquiry {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 16px;
  max-width: 1100px; margin-bottom: clamp(64px, 10vw, 140px);
}
.inquiry label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--dark-soft); }
.inquiry-wide { grid-column: 1 / -1; }
.inquiry input, .inquiry select, .inquiry textarea {
  font: 16px/1.4 var(--sans); color: var(--dark-ink);
  background: rgba(248, 248, 247, 0.06); border: 1px solid rgba(248, 248, 247, 0.18);
  border-radius: 10px; padding: 12px 14px; width: 100%;
  transition: border-color 0.25s, background-color 0.25s;
}
.inquiry select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.inquiry select option { color: var(--ink); }
.inquiry input:focus, .inquiry select:focus, .inquiry textarea:focus { outline: none; border-color: var(--dark-ink); background-color: rgba(248, 248, 247, 0.1); }
.inquiry textarea { resize: vertical; }
.inquiry .btn { justify-self: start; min-width: 160px; }
.hp { position: absolute; left: -9999px; }
.footer-row {
  display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 14px; color: var(--dark-soft);
  border-top: 1px solid rgba(248, 248, 247, 0.14); padding-top: 20px;
}
.footer-row a:hover { color: var(--dark-ink); }
.footer-row span { margin-left: auto; }

/* ── Reveal ── */
.reveal { opacity: 0; transform: translateY(28px); }

/* ── Responsive ── */
@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 768px) and (max-width: 1100px) {
  .pkg-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .principles { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .inquiry { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .hero-title { font-size: 10.5vw; }
  .hw-wide { display: none; }
  .hw-stacked { display: block; }
  .showcase-card { width: 100%; }
  .row { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .row-arrow { display: none; }
  .work-pin { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .work-pin::-webkit-scrollbar { display: none; }
  .case { width: 78vw; scroll-snap-align: start; }
  .work-track { padding-right: var(--gutter); }
  .principles { grid-template-columns: 1fr; gap: 32px; }
  .pkg-grid { grid-template-columns: 1fr; gap: 28px; }
  .pkg:nth-child(n) { --tilt: 0deg; }
  .pkg:nth-child(odd) { --tilt: -0.6deg; }
  .pkg:nth-child(even) { --tilt: 0.5deg; }
  .faq { grid-template-columns: 1fr; }
  .inquiry { grid-template-columns: 1fr; }
  .hero-ctas { margin-bottom: 32px; }
  .hero-kicker span { display: block; }
  .hero-kicker .kicker-sep { display: none; }
  .art-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .art-grid figure:nth-child(n) { transform: none; }
  .art-grid figure:nth-child(even) { transform: translateY(32px); }
  .about { grid-template-columns: 1fr; }
  .footer-row span { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* Two-line headline + subheader (What I do) */
.serif-lead.lead-wide { max-width: 19em; text-wrap: balance; }
.section-sub.sub-wide { max-width: 46em; text-wrap: balance; }

/* Pinned work section: headline and cards share one screen, so nothing peeks out from under the header */
@media (min-width: 768px) and (min-height: 560px) {
  .work { min-height: 100vh; padding-top: 96px; display: flex; flex-direction: column; justify-content: center; }
  .work .section-head { margin-bottom: clamp(24px, 4vh, 56px); }
  .work .serif-lead { max-width: 24ch; text-wrap: balance; }
  .case { width: min(34vw, 480px, 40vh); }
}
@media (min-width: 768px) and (min-height: 560px) {
  .case-info { flex-direction: column; gap: 2px; }
  .case-info p { text-align: left; }
}

/* Process step numbers in a soft circle */
.principles li::before {
  content: counter(p);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  color: var(--fg); font-size: 14px; font-weight: 500; line-height: 1;
  margin-bottom: 24px;
}

/* ── Showcase: full-bleed pinned slideshow ── */
.showcase-card { position: relative; background: #2a1a17; }
.sc-slide { position: absolute; inset: 0; margin: 0; overflow: hidden; opacity: 0; }
.sc-slide:first-child { opacity: 1; }
.sc-slide img { width: 100%; height: 100%; object-fit: cover; }
/* Pinned mode (set by collins.js): the section is one screen tall and the card grows to fill it */
.sc-pinned .showcase { height: 100vh; height: 100svh; padding: 0; display: flex; align-items: center; justify-content: center; }
.sc-pinned .showcase-card { width: 78vw; aspect-ratio: auto; flex: none; }
.sc-pinned .practice { padding-top: clamp(96px, 12vw, 180px); }

/* Form fields: no stroke; focus shows as a lighter fill */
.inquiry input, .inquiry select, .inquiry textarea { border-color: transparent; background-color: rgba(248, 248, 247, 0.07); }
.inquiry input:focus, .inquiry select:focus, .inquiry textarea:focus { border-color: transparent; background-color: rgba(248, 248, 247, 0.14); }

/* Rotating hero line: never wider than the screen */
.hw-final { max-width: 92vw; }


/* Header fades out on scroll down, back in on scroll up */
.site-header { transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.site-header.is-hidden { opacity: 0; transform: translateY(-12px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .site-header.is-hidden { transform: none; } }

/* Slide titles: centered serif line over each photo, crossfades with it */
.sc-title {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  padding: 0 var(--gutter); text-align: center; text-wrap: balance;
  font-family: var(--serif); font-size: clamp(28px, 3.6vw, 56px); line-height: 1.1; letter-spacing: -0.005em;
  color: #f8f8f7; text-shadow: 0 1px 2px rgba(20, 7, 5, 0.35), 0 2px 28px rgba(20, 7, 5, 0.45);
}

/* ── Responsive pass ── */

/* Big screens: keep content in a ~1560px column with generous margins; larger hero line */
@media (min-width: 1440px) {
  :root { --gutter: max(40px, calc((100vw - 1560px) / 2)); }
  .hero-title { font-size: clamp(76px, 5vw, 104px); }
}

/* Short desktop screens (laptops, small windows): the pinned work section still fits */
@media (min-width: 768px) and (min-height: 560px) and (max-height: 820px) {
  .work { padding-top: 72px; }
  .work .serif-lead { font-size: clamp(30px, 6.4vh, 56px); }
  .work .section-head { margin-bottom: 2.4vh; }
  .case { width: min(34vw, 480px, 34vh); }
}

/* Landscape phones and very short screens: swipe the work cards like on phones */
@media (min-width: 768px) and (max-height: 559px) {
  .work-pin { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .work-pin::-webkit-scrollbar { display: none; }
  .case { width: min(42vw, 300px, 46vh); scroll-snap-align: start; }
  .case-info { flex-direction: column; gap: 2px; }
  .case-info p { text-align: left; }
  .work { padding-top: 64px; }
  .work .section-head { margin-bottom: 16px; }
  .work .serif-lead { font-size: clamp(28px, 7vh, 40px); max-width: 24ch; }
}

/* Inquiry form: balanced rows at every width */
.inquiry { grid-template-columns: repeat(6, 1fr); }
.inquiry > label { grid-column: span 2; }
.inquiry > label:nth-of-type(4), .inquiry > label:nth-of-type(5) { grid-column: span 3; }
.inquiry > label.inquiry-wide { grid-column: 1 / -1; }
@media (min-width: 768px) and (max-width: 1100px) {
  .inquiry { grid-template-columns: 1fr 1fr; }
  .inquiry > label, .inquiry > label:nth-of-type(4) { grid-column: span 1; }
  .inquiry > label:nth-of-type(5) { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .inquiry { grid-template-columns: 1fr; }
  .inquiry > label, .inquiry > label:nth-of-type(n) { grid-column: 1 / -1; }
  .inquiry .btn { width: 100%; }
  .pkg-grid { gap: 52px; }
}

/* Swipeable work row: snap leaves the page margin instead of hugging the edge */
.work-pin { scroll-padding-left: var(--gutter); }

/* ── Light / dark switch ── */
.header-actions { display: flex; align-items: center; gap: 14px; }
.theme-btn {
  width: 32px; height: 32px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.theme-btn:hover { transform: rotate(-12deg) scale(1.08); }
.theme-btn:active { transform: scale(0.9); }
.theme-btn svg { overflow: visible; }
.theme-core, .theme-bite, .theme-rays { transform-box: fill-box; transform-origin: center; transition: transform 0.7s cubic-bezier(0.5, 1.6, 0.4, 1), opacity 0.4s ease; }
html[data-theme="dark"] .theme-core { transform: scale(1.55); }
html[data-theme="dark"] .theme-bite { transform: translate(-8px, 5px); }
html[data-theme="dark"] .theme-rays { transform: rotate(90deg) scale(0.4); opacity: 0; }

/* Dark theme: the whole page uses the dark palette */
html[data-theme="dark"] body { --bg: var(--dark); --fg: var(--dark-ink); --soft: var(--dark-soft); --line: rgba(248, 248, 247, 0.14); }
html[data-theme="dark"] .hw { filter: brightness(0) invert(0.96); }          /* light ink handwriting */
html[data-theme="dark"] .site-footer { border-top: 1px solid rgba(248, 248, 247, 0.08); }
/* Paper cards stay paper on the dark table */
.pkg { --fg: var(--ink); --soft: var(--ink-soft); color: var(--fg); }
html[data-theme="dark"] .pkg {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 10px 20px -8px rgba(0, 0, 0, 0.55), 0 30px 50px -26px rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] .pkg-note { top: -36px; color: var(--dark-ink); }

/* Theme sweep: a circle grows from the switch (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-switching :not(.theme-btn):not(.theme-btn *), html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }

/* Services rows: one thin vertical rule between titles and descriptions, no lines between items */
.practice .rows { position: relative; }
.practice .row { border-bottom: 0; }
@media (min-width: 768px) {
  .practice .rows::before {
    content: ""; position: absolute; top: 28px; bottom: 28px; left: calc(37.5% - 20px);
    width: 1px; background: var(--line); pointer-events: none;
  }
  .practice .row-desc { padding-left: 4px; }
}

/* Services rows: highlight the one being pointed at or focused.
   The others fade back, and the divider lights up beside the active row. */
.practice .row { position: relative; }
.practice .row-title, .practice .row-desc { transition: color 0.35s ease, opacity 0.35s ease, transform 0.4s ease; }
/* (fade the row's children: the scroll reveal leaves an inline opacity on the row itself) */
@media (hover: hover) {
  .practice .rows:hover .row:not(:hover) > :not(.row-arrow) { opacity: 0.35; }
}
.practice .rows:focus-within .row:not(:focus-visible) > :not(.row-arrow) { opacity: 0.35; }
.practice .row:hover .row-desc, .practice .row:focus-visible .row-desc { color: var(--fg); }
.practice .row:focus-visible { outline: none; }
@media (min-width: 768px) {
  .practice .row::before {
    content: ""; position: absolute; top: 24px; bottom: 24px; left: calc(37.5% - 20.5px);
    width: 2px; border-radius: 2px; background: var(--fg);
    transform: scaleY(0); transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .practice .row:hover::before, .practice .row:focus-visible::before { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .practice .row::before { transition: none; } }

/* Film grain over the photos (slideshow, work cards, portrait) */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.sc-slide::after, .case-media::after, .about-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--grain); background-size: 220px 220px;
  mix-blend-mode: overlay; opacity: 0.32;
}
.case-media, .about-img { position: relative; }

/* Sketchbook playground embedded from lab.html */
.playground { padding: clamp(40px, 6vw, 90px) 0 0; }
.playground-frame { display: block; width: 100%; height: 1500px; border: 0; background: transparent; color-scheme: dark; }
.playground-stick { position: sticky; top: 0; }

/* Phones: no Sketchbook playground (section and its menu link) */
@media (max-width: 767px) {
  .playground, .menu a[href="#playground"], li:has(> a[href="#playground"]) { display: none; }
}