/* Skibastack Field Guide — sage palette, refined stones, scroll motion */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..900;1,8..60,300..900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Caveat:wght@400;500;600;700&family=Kalam:wght@300;400;700&display=swap');

:root {
  --paper: #F5F2EC;
  --paper-2: #EDE8DC;
  --paper-3: #E5DFCE;
  --ink: #1A1A1A;
  --ink-2: #3A3733;
  --ink-3: #6B6660;
  --rule: #1A1A1A;
  --accent: #5C7A5A;
  --accent-2: #8FA889;
  --accent-soft: rgba(92,122,90,0.10);
  --accent-strong: #3F5A3D;
  --sand: #C4A878;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --hand: "Caveat", cursive;
  --hand-tight: "Kalam", "Caveat", cursive;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-image: radial-gradient(rgba(26,26,26,0.045) 1px, transparent 1px);
  background-size: 22px 22px;
}

p { line-height: 1.55; }
h1, h2, h3, h4 { margin: 0; }

img, svg { max-width: 100%; }

/* ---------- shell ---------- */
.wf {
  max-width: 1240px; margin: 0 auto;
  padding: 40px 32px 120px;
  position: relative;
}

.placeholder-img {
  border: 1.5px solid var(--ink);
  background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(26,26,26,0.07) 8px 9px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.16em;
  text-align: center; padding: 12px;
  white-space: pre-line;
}

.label {
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-3);
}

.eyebrow {
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--accent); margin-bottom: 16px;
}

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink); border: 1px solid var(--ink);
  padding: 4px 8px; border-radius: 2px;
  background: var(--paper);
}
.tag.accent { border-color: var(--accent); color: var(--accent); }
.tag.filled { background: var(--ink); color: var(--paper); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.16em;
  border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper);
  border-radius: 3px; cursor: pointer; text-decoration: none;
  transition: transform 200ms ease, background 200ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--paper); }

.rule { border: none; border-top: 1.5px solid var(--ink); margin: 32px 0; }
.rule.dashed { border-top-style: dashed; }
.rule.thin { border-top-width: 1px; }

.under-hand {
  background-image: linear-gradient(transparent calc(100% - 5px), var(--accent) calc(100% - 5px));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0 4px;
}

.hl {
  background: linear-gradient(180deg, transparent 50%, rgba(196,168,120,0.45) 50%);
  padding: 0 6px;
}

.section-head {
  display: flex; align-items: baseline; gap: 16px;
  border-top: 1.5px solid var(--ink);
  padding-top: 16px; margin-top: 88px; margin-bottom: 28px;
}
.section-head .num {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.2em; color: var(--ink-3);
}
.section-head h2 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 36px; letter-spacing: -0.012em;
}
.section-head .right {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--ink-3);
}

.wf-footer {
  margin-top: 80px; padding-top: 24px;
  border-top: 1px dashed rgba(26,26,26,0.25);
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-3);
}

.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }
.hand { font-family: var(--hand); }

/* density variants */
[data-density="airy"] .wf { padding-top: 64px; }
[data-density="airy"] .section-head { margin-top: 120px; }
[data-density="dense"] .wf { padding-top: 24px; }
[data-density="dense"] .section-head { margin-top: 56px; padding-top: 12px; }

/* palette swap */
[data-accent="warm"] {
  --accent: #C8553D;
  --accent-2: #D88671;
  --accent-soft: rgba(200,85,61,0.10);
  --accent-strong: #9A3C28;
}
[data-accent="ink"] {
  --accent: #1A1A1A;
  --accent-2: #3A3733;
  --accent-soft: rgba(26,26,26,0.06);
  --accent-strong: #000000;
}

/* ---------- header / nav ---------- */
.wf-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0 56px;
  flex-wrap: wrap; gap: 16px;
}
.wf-nav { display: flex; gap: 28px; flex-wrap: wrap; }
.wf-nav a {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.wf-nav a:hover { color: var(--accent-strong); }

/* ---------- hero ---------- */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  padding-bottom: 96px;
}
.hero-headline {
  font-family: var(--serif);
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: 400; line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 8px 0 28px;
}
.hero-headline em { color: var(--accent-strong); font-style: italic; }
.hero-lede {
  font-size: 18px; line-height: 1.6;
  color: var(--ink-2);
  max-width: 480px; margin: 0;
}
.hero-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero-pills {
  margin-top: 36px;
  display: flex; gap: 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-stones-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}

/* Hand-drawn tagline annotation, sage caveat font + small curvy arrow.
   Positioned to the upper-RIGHT of the stones, just above the top sage
   stone (no big gap). Reveal fades it in AFTER the rocks finish loading
   (delay set on the Reveal component). Visible on mobile too. */
.hero-tagline {
  position: absolute;
  top: 200px;
  right: 12px;
  max-width: 250px;
  pointer-events: none;
  z-index: 2;
  text-align: right;
}
.hero-tagline-text {
  font-family: var(--hand);
  color: var(--accent-strong);
  font-size: 19px;
  line-height: 1.1;
  transform: rotate(-2deg);
  transform-origin: right top;
}
.hero-tagline-arrow {
  margin-top: 4px;
  margin-left: auto;
  display: block;
}

/* ---------- problem strip ---------- */
.problem-strip {
  background: var(--ink);
  color: var(--paper);
  margin: 0 -32px;
  padding: 64px 32px;
}
.problem-inner { max-width: 1240px; margin: 0 auto; }
.problem-leadin {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.6; margin-bottom: 16px;
}
.problem-leadin span { color: var(--accent-2); }
.problem-quote {
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 48px);
  font-weight: 400; line-height: 1.18; font-style: italic;
  max-width: 920px; margin: 0;
  letter-spacing: -0.012em;
}
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}
.problem-cell {
  border-top: 1px solid rgba(245,242,236,0.3);
  padding-top: 14px;
}
.problem-num {
  font-size: 11px; letter-spacing: 0.18em;
  opacity: 0.55; margin-bottom: 6px;
}
.problem-title { font-family: var(--serif); font-size: 19px; margin-bottom: 4px; }
.problem-desc { font-size: 13px; opacity: 0.7; font-style: italic; }

/* ---------- method section ---------- */
.method-section { margin-top: 96px; }
.method-lede-quote {
  font-family: var(--serif); font-size: 22px; line-height: 1.5;
  font-style: italic; color: var(--ink-2);
  max-width: 760px; margin: 0 0 12px;
}
.method-lede {
  font-size: 16px; line-height: 1.7; color: var(--ink-2);
  max-width: 720px; margin: 0 0 48px;
}
.horizontal-stones-wrap { margin: 0 0 48px; }

.layer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
}
.layer-cell {
  padding: 24px;
  border-right: 1px solid var(--ink);
}
.layer-cell:last-child { border-right: none; }
.layer-cell.accent { background: var(--accent-soft); }
.layer-num { font-size: 11px; letter-spacing: 0.18em; color: var(--ink-3); margin-bottom: 12px; }
.layer-title { font-family: var(--serif); font-size: 22px; font-style: italic; margin-bottom: 10px; letter-spacing: -0.01em; }
.layer-desc { font-size: 13px; line-height: 1.6; color: var(--ink-2); margin: 0 0 16px; }
.layer-brain { border-top: 1px dashed rgba(26,26,26,0.25); padding-top: 12px; }
.layer-brain-eyebrow { font-size: 9.5px; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 6px; text-transform: uppercase; }
.layer-brain-text { font-size: 12px; line-height: 1.55; color: var(--ink-2); margin: 0; font-style: italic; }

/* ---------- state transition: pile → arrow → brain ---------- */
.state-transition {
  margin-top: 72px;
  display: grid;
  grid-template-columns: 0.85fr 0.55fr 1.4fr;
  gap: 16px;
  align-items: center;
}
.state-col {
  display: flex; flex-direction: column; align-items: center;
}
.state-before { padding-bottom: 8px; }
.state-arrow { align-self: center; }
.state-after { padding-bottom: 8px; }
.state-label {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.state-label-after {
  font-size: 30px;
  letter-spacing: 0;
  color: var(--accent-strong);
  text-transform: none;
  margin-top: 2px;
}

/* TransitionArrow internals — Logo above the arrow shaft */
.transition-arrow {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.transition-arrow-logo { display: flex; align-items: center; }
.transition-arrow-svg { max-width: 220px; }
.transition-arrow-svg-mobile { display: none; }

/* ---------- work cards ---------- */
.work-card {
  position: relative;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), box-shadow 320ms ease;
  cursor: pointer;
}
.work-card:hover {
  transform: translateY(-4px);
  box-shadow: 8px 8px 0 var(--accent);
}
.work-card .work-card-img {
  width: 100%; height: 180px;
  border: none; border-bottom: 1.5px solid var(--ink);
  transition: filter 320ms ease;
}
.work-card:hover .work-card-img { filter: contrast(1.05) brightness(0.98); }
/* Illustrated cards: drop placeholder padding/text so the SVG fills the
   slot, with the cross-stitch hatching still visible behind the line art. */
.work-card-img.has-illustration { padding: 0; }
.work-card-img.has-illustration > svg { width: 100%; height: 100%; display: block; }
.work-card-body { padding: 22px; }
.work-card-meta {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px; margin-bottom: 14px;
}
.work-card-status {
  font-size: 9.5px; color: var(--ink-3);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.work-card-title {
  font-family: var(--serif); font-size: 21px; line-height: 1.25;
  margin: 0 0 18px; letter-spacing: -0.01em;
}
.work-card-foot {
  border-top: 1px solid var(--ink);
  padding-top: 14px;
  display: flex; align-items: baseline; gap: 12px;
}
.work-card-stat {
  font-family: var(--serif); font-size: 36px; font-style: italic;
  color: var(--accent-strong); letter-spacing: -0.02em; line-height: 1;
  transition: color 320ms ease, transform 320ms ease;
  white-space: nowrap; /* keep "0 → 1" / "$14M" / "1.9%" on one line */
}
.work-card:hover .work-card-stat { transform: translateX(4px); }
.work-card-stat-label {
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.3;
}

/* carousel */
.carousel {
  display: flex; gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scroll-padding-left: 0;
  scrollbar-width: thin;
}
.carousel > * { scroll-snap-align: start; flex: 0 0 360px; }
.carousel::-webkit-scrollbar { height: 6px; }
.carousel::-webkit-scrollbar-thumb { background: rgba(26,26,26,0.2); border-radius: 3px; }
.carousel-bar {
  display: flex; align-items: center; margin-top: 18px;
}
.carousel-label {
  font-size: 10.5px; letter-spacing: 0.16em;
  color: var(--ink-3); text-transform: uppercase;
}
.carousel-controls { display: flex; gap: 8px; }
.carousel-btn {
  width: 36px; height: 36px;
  border: 1.5px solid var(--ink); background: var(--paper);
  font-family: var(--mono); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 180ms ease, color 180ms ease;
}
.carousel-btn:hover { background: var(--ink); color: var(--paper); }

/* ---------- practice ---------- */
.practice-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: start;
}
.practice-portrait {
  width: 100%; height: 360px;
  object-fit: cover; object-position: center top;
  display: block;
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
}
.practice-name {
  font-size: 11px; letter-spacing: 0.16em;
  color: var(--ink-3); margin-top: 14px;
  text-transform: uppercase;
}
.practice-hand { font-size: 19px; color: var(--accent-strong); margin-top: 10px; }
.practice-lede {
  font-family: var(--serif); font-size: 22px; line-height: 1.5;
  margin: 0; letter-spacing: -0.005em;
}
.arc-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1.5px solid var(--ink);
}
.arc-cell {
  padding: 22px;
  border-right: 1px solid var(--ink);
}
.arc-cell:last-child { border-right: none; }
.arc-cell.accent { background: var(--accent-soft); }
.arc-week {
  font-size: 10px; letter-spacing: 0.16em;
  color: var(--accent-strong); margin-bottom: 8px;
  text-transform: uppercase;
}
.arc-phase { font-family: var(--serif); font-size: 19px; font-style: italic; margin-bottom: 8px; }
.arc-body { font-size: 12px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.practice-tags-block { margin-top: 28px; }
.practice-tags-eyebrow {
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--ink-3); text-transform: uppercase;
  margin-bottom: 10px;
}
.practice-tags { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- CTA ---------- */
.cta-block {
  margin-top: 96px;
  border: 1.5px solid var(--ink);
  padding: 48px 40px;
  background: var(--ink);
  color: var(--paper);
}
.cta-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.cta-eyebrow {
  font-size: 11px; letter-spacing: 0.2em;
  opacity: 0.6; margin-bottom: 12px;
}
.cta-headline {
  font-family: var(--serif); font-size: 44px;
  font-weight: 400; letter-spacing: -0.02em;
  line-height: 1.05; font-style: italic;
}
.cta-body { margin-top: 14px; opacity: 0.8; max-width: 560px; }
.cta-btn { background: var(--accent); border-color: var(--accent); }

/* ============================================================
   MOBILE — single-column collapse for all grids.
   Targets phones (< 720px) and tightens type/spacing.
   ============================================================ */
@media (max-width: 720px) {
  .wf { padding: 24px 18px 80px; }

  .wf-header { padding-bottom: 32px; }
  .wf-nav { gap: 16px; }
  .wf-nav a { font-size: 10px; letter-spacing: 0.14em; }

  /* hero — stack */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 56px;
  }
  .hero-headline { font-size: clamp(36px, 9vw, 52px); }
  .hero-lede { font-size: 16px; }
  .hero-stones-wrap { order: -1; }
  .hero-stones-wrap > div {
    width: min(100%, 360px) !important;
    height: auto !important;
  }
  .hero-stones-wrap svg {
    width: 100% !important;
    height: auto !important;
    max-height: 360px;
  }
  /* Tagline stays visible on mobile — repositioned tighter to the
     scaled-down rocks. */
  .hero-tagline {
    top: 110px;
    right: 6px;
    max-width: 180px;
  }
  .hero-tagline-text { font-size: 15px; }
  .hero-tagline-arrow-desktop { display: none !important; }

  /* problem strip — single column */
  .problem-strip { margin: 0 -18px; padding: 48px 18px; }
  .problem-quote { font-size: clamp(22px, 5.6vw, 28px); }
  .problem-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }

  /* method section */
  .method-section { margin-top: 64px; }
  .section-head { margin-top: 56px; }
  .section-head h2 { font-size: 28px; }
  .section-head .right { display: none; }

  /* layer grid → stacked rows with row-borders */
  .layer-grid { grid-template-columns: 1fr; }
  .layer-cell { border-right: none; border-bottom: 1px solid var(--ink); }
  .layer-cell:last-child { border-bottom: none; }

  /* state-transition stacks vertically. The build arrow becomes its
     own centered object instead of a rotated desktop arrow. */
  .state-transition {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 48px;
  }
  .state-col { padding: 8px 0; }
  /* Visual separator between the three state objects */
  .state-before, .state-arrow {
    border-bottom: 1px dashed rgba(26,26,26,0.2);
    padding-bottom: 24px;
  }
  .state-arrow { align-self: center; }
  .transition-arrow {
    width: 160px;
    margin: 0 auto;
    gap: 8px;
  }
  .transition-arrow-svg { display: none !important; }
  .transition-arrow-svg-mobile {
    display: block !important;
    margin: 0 auto;
  }
  .state-label-after { font-size: 26px; }

  /* work cards — narrower on phones; ~85% of viewport so card edges
     hint at the next/prev card without overflowing. Tighter inner pad. */
  .carousel > * { flex-basis: clamp(260px, 85vw, 320px); }
  .work-card-body { padding: 18px; }
  .work-card-title { font-size: 19px; margin-bottom: 14px; }
  .work-card .work-card-img { height: 150px; }
  .work-card-stat { font-size: 30px; }

  /* practice — stack */
  .practice-grid { grid-template-columns: 1fr; gap: 32px; }
  .practice-portrait { height: 280px; }

  /* arc → stacked */
  .arc-grid { grid-template-columns: 1fr; }
  .arc-cell { border-right: none; border-bottom: 1px solid var(--ink); }
  .arc-cell:last-child { border-bottom: none; }

  /* cta — stack */
  .cta-block { padding: 32px 22px; margin-top: 64px; }
  .cta-grid { grid-template-columns: 1fr; gap: 20px; }
  .cta-headline { font-size: 32px; }

  /* footer — wraps */
  .wf-footer { flex-wrap: wrap; gap: 8px; }
}

/* tablet */
@media (min-width: 721px) and (max-width: 980px) {
  .hero-grid { gap: 40px; }
  .practice-grid { grid-template-columns: 240px 1fr; gap: 36px; }
  .problem-grid { gap: 24px; }
}

/* honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}