/* Layout concept: one long dig. Each section is a soil horizon, darker as you go down,
   until the taproot (her story). Contact returns to the surface. A root line grows as you scroll. */
:root {
  /* colour */
  --sky: #eceedf;        /* surface light, pale sage */
  --leaf: #3c6431;       /* leaf green */
  --leaf-deep: #27441f;
  --sun: #e2a842;        /* sun gold */
  --copper: #b65c2c;     /* braids copper, the accent */
  --ink: #20160f;        /* soil-black text */
  --cream: #f4ecdc;      /* text on soil */
  --cream-dim: #d9cbb2;
  --soil-1: #7b5535;     /* topsoil */
  --soil-2: #5c3d26;     /* subsoil */
  --soil-3: #452c1b;     /* rhizosphere */
  --soil-4: #332013;     /* parent material */
  --soil-5: #1f140c;     /* taproot */
  --rootline: #e7c79a;

  /* type */
  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem);
  --step-3: clamp(2.6rem, 1.9rem + 3.4vw, 5rem);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1120px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--cream); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 16px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.hand { font-family: var(--hand); font-weight: 500; }

/* ---------- layers ---------- */
.layer { position: relative; padding-block: clamp(72px, 10vw, 140px); }
.layer > .wrap { position: relative; z-index: 2; }
.layer:not(.layer--surface)::before {
  /* soil speckle texture */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,235,200,.10) 0 1.5px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.18) 0 2px, transparent 2.5px),
    radial-gradient(circle at 40% 80%, rgba(255,235,200,.07) 0 1px, transparent 1.5px),
    radial-gradient(ellipse at 85% 20%, rgba(0,0,0,.14) 0 4px, transparent 5px);
  background-size: 37px 41px, 53px 47px, 23px 29px, 131px 113px;
}
.layer:not(.layer--surface):not(.layer--seed)::after {
  /* wavy boundary into the next horizon */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 28px; z-index: 1;
  background: var(--next, transparent);
  -webkit-mask: radial-gradient(18px 14px at 50% 0, transparent 98%, #000) 0 0 / 46px 28px repeat-x;
          mask: radial-gradient(18px 14px at 50% 0, transparent 98%, #000) 0 0 / 46px 28px repeat-x;
}

.layer--topsoil { background: var(--soil-1); color: var(--cream); --next: var(--soil-2); }
.layer--subsoil { background: var(--soil-2); color: var(--cream); --next: var(--soil-3); }
.layer--rhizo   { background: var(--soil-3); color: var(--cream); --next: var(--soil-4); }
.layer--parent  { background: var(--soil-4); color: var(--cream); --next: var(--soil-5); }
.layer--root    { background: var(--soil-5); color: var(--cream); --next: var(--sky); }
.layer--seed    { background: var(--sky); color: var(--ink); padding-bottom: 32px; }
.layer.layer--seed::before { opacity: 0; }

.horizon {
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase;
  color: var(--copper); margin-bottom: 18px;
}
.layer:not(.layer--surface):not(.layer--seed) .horizon { color: var(--sun); }
.horizon b { font-weight: 500; font-size: 1.15em; letter-spacing: .1em; }
.roles { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.roles li { padding: 6px 14px; border-radius: 999px; background: rgba(60,100,49,.1); color: var(--leaf-deep); font-size: var(--step--1); font-weight: 600; }
.layer__title { font-size: var(--step-2); max-width: 20ch; }
.layer__intro { margin-top: 16px; max-width: 55ch; color: var(--cream-dim); font-size: var(--step-1); line-height: 1.45; }

/* ---------- nav ---------- */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 22px; position: relative; z-index: 3; }
.nav__name { font-family: var(--display); font-size: 1.5rem; text-decoration: none; }
.nav__name span { color: var(--copper); }
.nav__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: var(--step--1); font-weight: 500; }
.nav__links a { text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav__links a:hover { border-color: var(--copper); }

/* ---------- surface / hero ---------- */
.layer--surface {
  padding-block: 0;
  background:
    radial-gradient(circle at 88% 6%, rgba(226,168,66,.35), transparent 34%),
    var(--sky);
}
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 80px); align-items: center; padding-block: clamp(24px, 5vw, 56px) 0; position: relative; z-index: 2; }
.hero__text { min-width: 0; padding-bottom: 88px; }
.hero__hello { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); color: var(--leaf); margin-bottom: 6px; }
.hero__title { font-size: var(--step-3); letter-spacing: -.01em; }
.hero__title em { font-style: normal; color: var(--copper); position: relative; white-space: nowrap; }
.hero__title em::after {
  content: ""; position: absolute; left: 4%; right: 6%; bottom: -.12em; height: .2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 12 C40 4 70 18 100 10 S160 4 198 12 M60 13 C64 18 70 19 76 20 M140 9 C146 14 150 16 158 17' fill='none' stroke='%23b65c2c' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.hero__lead { margin-top: 24px; font-size: var(--step-1); line-height: 1.5; max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__hint { margin-top: 28px; font-family: var(--mono); font-size: var(--step--1); color: var(--leaf); display: flex; align-items: center; gap: 10px; }
.hero__hint::after { content: "\2193"; display: inline-block; animation: bob 1.8s ease-in-out infinite; }
/* the portrait is planted: its base sits in the grass, and it sinks a little as you scroll */
.hero__photo { margin: 0; position: relative; justify-self: end; align-self: end; max-width: 440px; width: 100%; }
.hero__photo picture { display: block; overflow: hidden; border-radius: 220px 220px 0 0; aspect-ratio: 4 / 5; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transform: translateY(var(--sink, 0px)) scale(1.06); transform-origin: 50% 0; }
.hero__photo figcaption { position: absolute; left: -40px; top: 22%; background: var(--sky); padding: 4px 14px; border-radius: 30px; font-size: 1.35rem; color: var(--leaf-deep); transform: rotate(-4deg); box-shadow: 0 6px 18px -8px rgba(0,0,0,.3); }

.grass {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 46px; z-index: 3;
  background: var(--soil-1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46V30 L6 18 L9 30 L14 10 L18 30 L24 22 L27 31 L33 14 L37 30 L42 24 L46 32 L52 8 L56 30 L61 20 L65 31 L71 16 L75 30 L80 24 L84 32 L90 12 L94 30 L99 22 L103 31 L109 15 L113 30 L117 24 L120 30 V46Z'/%3E%3C/svg%3E") 0 0 / 240px 46px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46V30 L6 18 L9 30 L14 10 L18 30 L24 22 L27 31 L33 14 L37 30 L42 24 L46 32 L52 8 L56 30 L61 20 L65 31 L71 16 L75 30 L80 24 L84 32 L90 12 L94 30 L99 22 L103 31 L109 15 L113 30 L117 24 L120 30 V46Z'/%3E%3C/svg%3E") 0 0 / 240px 46px repeat-x;
}
.grass::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 34px; background: var(--leaf); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px;
  font: 600 var(--step-0)/1 var(--body); text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: transform .2s ease, background-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--leaf { background: var(--leaf); color: var(--cream); }
.btn--leaf:hover { background: var(--leaf-deep); }
.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--sky); }
.btn--sun { background: var(--sun); color: var(--ink); }
.sprout { width: 14px; height: 16px; position: relative; display: inline-block; margin-left: -10px; opacity: 0; transition: margin .3s ease, opacity .3s ease; }
.btn:hover .sprout, .btn:focus-visible .sprout { margin-left: 0; opacity: 1; }
.sprout::before, .sprout::after { content: ""; position: absolute; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.sprout::before { left: 6px; bottom: 0; width: 2px; height: 10px; background: currentColor; border-radius: 2px; transform-origin: bottom; transform: scaleY(.5); }
.sprout::after { left: 7px; top: 0; width: 8px; height: 6px; border-radius: 8px 0; background: currentColor; transform-origin: 0 100%; transform: scale(0) rotate(-10deg); }
.btn:hover .sprout::before { transform: scaleY(1); }
.btn:hover .sprout::after { transform: scale(1) rotate(-10deg); }

/* ---------- topsoil ---------- */
.branches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; margin-top: 48px; }
.branch { min-width: 0; padding-top: 22px; border-top: 1px dashed rgba(244,236,220,.35); }
.branch__icon { width: 40px; height: 40px; color: var(--sun); margin-bottom: 14px; }
.branch h3 { font-size: var(--step-1); margin-bottom: 10px; }
.branch p { color: var(--cream-dim); }
.branch a { color: var(--sun); }
/* a wide window onto a tall photo: it pans from the treetops down to the path as you scroll */
.window { position: relative; margin: 64px 0 0; height: clamp(280px, 44vw, 500px); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.window picture, .window img { display: block; width: 100%; height: 100%; }
.window img { object-fit: cover; object-position: 50% var(--pan, 68%); }
.window figcaption { position: absolute; left: 18px; bottom: 16px; padding: 4px 16px; border-radius: 30px; background: rgba(32,22,15,.78); color: var(--sun); font-size: 1.45rem; transform: rotate(-2deg); }

/* ---------- quiz ---------- */
.quiz { margin-top: 64px; padding: clamp(22px, 4vw, 44px); border-radius: 18px; background: var(--cream); color: var(--ink); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.layer .quiz .horizon { color: var(--copper); margin-bottom: 12px; }
.quiz__title { font-size: var(--step-2); }
.quiz__sub { margin-top: 12px; color: #4b3a2c; max-width: 40ch; }
.quiz__body { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.quiz__step { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--leaf); display: flex; align-items: center; gap: 10px; }
.quiz__dots { display: inline-flex; gap: 6px; }
.quiz__dots i { width: 22px; height: 4px; border-radius: 4px; background: #d9caa9; }
.quiz__dots i.on { background: var(--leaf); }
.quiz__q { font-family: var(--display); font-size: var(--step-1); line-height: 1.25; }
.quiz__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quiz__opt {
  font: 500 var(--step-0)/1.35 var(--body); text-align: left; color: var(--ink); background: #fffaf0;
  border: 1.5px solid #d6c5a2; border-radius: 12px; padding: 14px 16px; cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.quiz__opt:hover { border-color: var(--leaf); transform: translateY(-2px); }
.quiz__opt:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }
.quiz__result { display: flex; flex-direction: column; gap: 12px; animation: grow .5s cubic-bezier(.3,1.4,.5,1); }
.quiz__plant { display: flex; align-items: center; gap: 14px; }
.quiz__plant svg { width: 56px; height: 56px; flex: none; color: var(--leaf); }
.quiz__plant small { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--copper); }
.quiz__plant strong { font-family: var(--display); font-weight: 400; font-size: var(--step-1); }
.quiz__result p { color: #4b3a2c; }
.quiz__result .quiz__need { color: var(--ink); font-weight: 500; }
.quiz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.quiz__again { background: none; border: 0; padding: 6px 0; font: 600 var(--step--1)/1 var(--body); color: var(--leaf); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@keyframes grow { from { transform: translateY(8px) scale(.98); } to { transform: none; } }

/* ---------- subsoil ---------- */
.works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.work { min-width: 0; padding: 26px; border-radius: 14px; background: rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 10px; }
.work--feature { grid-column: 1 / -1; background: var(--cream); color: var(--ink); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 0 36px; padding: 0; overflow: hidden; }
.work__body { display: flex; flex-direction: column; gap: 10px; padding: 32px 32px 32px 0; min-width: 0; }
.work--feature h3 { font-size: var(--step-2); }
.work__tag { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sun); }
.work--feature .work__tag { color: var(--copper); }
.work h3 { font-size: var(--step-1); }
.work p:not(.work__tag) { color: var(--cream-dim); }
.work--feature p:not(.work__tag) { color: #4b3a2c; max-width: 52ch; }
.work__link { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--sun); text-decoration: none; }
.work--feature .work__link { color: var(--leaf); }
.work__links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0 20px; }
.work__links .work__link { margin-top: 0; }
.work__link:hover { text-decoration: underline; }
/* the client site, recoloured in soil tones and set in a little browser window */
.work__shot { display: flex; align-items: center; align-self: stretch; padding: 28px; background: var(--soil-1); text-decoration: none; }
.browser { display: block; width: 100%; border-radius: 10px; overflow: hidden; background: var(--cream); box-shadow: 0 24px 40px -22px rgba(0,0,0,.7); transform: rotate(-1.5deg); transition: transform .4s ease; }
.work--feature:hover .browser { transform: rotate(0) translateY(-3px); }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--cream); border-bottom: 1px solid #ddcfb4; }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d4c3a0; }
.browser__bar i:first-child { background: var(--copper); }
.browser__url { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: #fffaf0; font-family: var(--mono); font-size: .7rem; color: #6b5a48; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.browser picture { display: block; aspect-ratio: 1200 / 553; }
.browser img { width: 100%; height: 100%; object-fit: cover; display: block; }
.more { margin-top: 28px; color: var(--cream-dim); }

/* ---------- testimonials ---------- */
.voices { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px 48px; align-items: end; }
.voices__title { grid-column: 1 / -1; font-size: var(--step-1); color: var(--sun); font-family: var(--hand); font-weight: 700; font-size: 1.8rem; }
.voice { margin: 0; display: flex; flex-direction: column; gap: 18px; padding-top: 20px; border-top: 1px dashed rgba(244,236,220,.35); min-width: 0; }
.voice blockquote { margin: 0; position: relative; }
.voice blockquote p { font-family: var(--display); font-size: var(--step-1); line-height: 1.4; color: var(--cream); }
.voice--big blockquote p { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.35; }
.voice blockquote::before { content: "\201C"; position: absolute; left: -.05em; top: -.42em; font-family: var(--display); font-size: 4.5rem; line-height: 1; color: var(--copper); opacity: .8; }
.voice blockquote p { padding-top: 1.6rem; }
.voice figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: var(--step--1); }
.voice figcaption strong { font-weight: 600; color: var(--cream); }
.voice figcaption span { font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sun); }
.more a { color: var(--sun); }

/* ---------- rhizosphere ---------- */
.mentor { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "text photo" "form photo"; gap: 56px clamp(32px, 6vw, 80px); align-items: start; }
.mentor__text { grid-area: text; }
.mentor .book { grid-area: form; margin-top: 0; }
.mentor__text { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mentor__text > p { max-width: 54ch; color: var(--cream-dim); }
.mentor__text > p:first-of-type { font-size: var(--step-1); color: var(--cream); line-height: 1.5; }
.facts { list-style: none; margin: 4px 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.facts li { padding: 14px 12px; border: 1px solid rgba(244,236,220,.25); border-radius: 12px; font-size: var(--step--1); color: var(--cream-dim); text-align: center; }
.facts strong { display: block; font-family: var(--display); font-weight: 400; font-size: var(--step-1); color: var(--sun); }
.mentor__topics .hand { font-size: 1.4rem; color: var(--sun); margin-right: 4px; }
.mentor__cred { font-size: var(--step--1); }
.mentor__photo { grid-area: photo; margin: 0; position: sticky; top: 40px; }
.mentor__photo img { border-radius: 14px 190px 14px 14px; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 30%; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.mentor__photo figcaption { margin-top: 14px; font-size: 1.4rem; color: var(--sun); transform: rotate(-2deg); }
.bubble {
  position: absolute; z-index: 2; top: 26%; left: -34px; padding: 8px 18px; border-radius: 22px;
  background: var(--cream); color: var(--ink); font-size: 1.5rem; line-height: 1.1; transform: rotate(-5deg);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); animation: nod 4s ease-in-out infinite;
}
.bubble::after { content: ""; position: absolute; right: 22px; bottom: -9px; border: 10px solid transparent; border-top-color: var(--cream); border-bottom: 0; transform: skewX(-20deg); }
@keyframes nod { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(-2deg) translateY(-3px); } }

.book { min-width: 0; padding: clamp(22px, 4vw, 40px); background: var(--cream); color: var(--ink); border-radius: 18px; display: flex; flex-direction: column; gap: 18px; }
.book__title { font-size: var(--step-2); }
.book__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-weight: 500; font-size: var(--step--1); }
.field--wide { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  font: 400 var(--step-0)/1.4 var(--body); color: var(--ink); background: #fffaf0;
  border: 1.5px solid #c9b896; border-radius: 10px; padding: 12px 14px; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--leaf); outline: 2px solid rgba(60,100,49,.25); outline-offset: 0; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--step--1); line-height: 1.5; }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--leaf); flex: none; }
.check a { color: var(--leaf); }
.book .btn { align-self: flex-start; }
.book__error { color: #a3361a; font-weight: 600; font-size: var(--step--1); min-height: 1px; }
.book__done { border-top: 1px dashed #c9b896; padding-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.book__done h4 { font-family: var(--display); font-weight: 400; font-size: var(--step-1); margin: 0; }
.book__done pre { white-space: pre-wrap; background: #fffaf0; border: 1px solid #e0d2b5; border-radius: 10px; padding: 14px; font: 400 .9rem/1.5 var(--mono); margin: 0; overflow-x: auto; }

/* ---------- parent material ---------- */
.rings { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; margin-top: 48px; }
.rings__art { width: 100%; max-width: 240px; }
.rings__art circle { fill: none; stroke: var(--sun); stroke-opacity: .55; stroke-width: 1.5; }
.rings__art circle:last-child { fill: var(--copper); stroke: none; }
.rings__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rings__list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid rgba(244,236,220,.14); }
.rings__list strong { font-weight: 600; }
.rings__list span { color: var(--cream-dim); font-size: var(--step--1); }

/* ---------- taproot ---------- */
.roots__place { font-size: var(--step-3); color: var(--sun); max-width: none; overflow-wrap: anywhere; }
.story { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; max-width: 62ch; }
.story p { color: var(--cream-dim); }
.story__lead { color: var(--cream) !important; font-size: var(--step-1); line-height: 1.5; }
.story--after { margin-top: 0; }
.story__quote { margin: 12px 0; padding-left: 20px; border-left: 3px solid var(--copper); font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem); line-height: 1.2; color: var(--cream); }

/* the city: one full-width moment that breaks the story in two */
.city { position: relative; z-index: 2; margin: clamp(48px, 7vw, 88px) 0; height: clamp(360px, 58vw, 680px); overflow: hidden; }
.city picture { display: block; height: 100%; }
.city img { width: 100%; height: 115%; object-fit: cover; object-position: 30% 50%; transform: translateY(var(--drift, -6%)); }
.city::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(31,20,12,.92) 0%, rgba(31,20,12,.35) 45%, rgba(31,20,12,0) 70%), linear-gradient(to bottom, rgba(31,20,12,.6), rgba(31,20,12,0) 18%); }
.city__words { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(24px, 5vw, 56px); max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-direction: column; gap: 6px; }
.city__big { font-family: var(--display); font-size: var(--step-3); line-height: 1.05; color: var(--cream); max-width: 14ch; text-wrap: balance; }
.city__small { font-size: clamp(1.4rem, 1.2rem + .8vw, 2rem); color: var(--sun); }

/* ---------- surface again ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 6vw, 80px); align-items: center; }
.contact__text { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.contact__text > p:not(.horizon) { font-size: var(--step-1); max-width: 36ch; }
.contact .horizon { margin-bottom: 0; }
.email { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.email__addr { font-family: var(--display); font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); color: var(--leaf-deep); overflow-wrap: anywhere; }
.email__copy { font: 600 var(--step--1)/1 var(--body); padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; }
.email__copy:hover { background: var(--ink); color: var(--sky); }
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; font-weight: 600; }
.links a { text-decoration: none; color: var(--copper); }
.links a:hover { text-decoration: underline; }
.contact { grid-template-columns: minmax(0, 1fr) 340px; }
.seed { margin: 0; position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; }
.seed img { position: absolute; inset: 13%; width: 74%; height: 74%; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.seed__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: turn 40s linear infinite; }
.seed__ring text { font-family: var(--mono); font-size: 12px; letter-spacing: 0; text-transform: uppercase; fill: var(--copper); }
@keyframes turn { to { transform: rotate(360deg); } }
.contact__text > p.clock { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: var(--step--1); color: #5d4c3c; }
.clock__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--leaf); flex: none; box-shadow: 0 0 0 0 rgba(60,100,49,.5); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(60,100,49,.45); } 70%, 100% { box-shadow: 0 0 0 10px rgba(60,100,49,0); } }
.foot { margin-top: 96px; padding-block: 24px; border-top: 1px solid rgba(32,22,15,.15); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: var(--step--1); color: #5d4c3c; }

/* ---------- root line + depth meter ---------- */
.root-line { position: absolute; top: 0; left: 0; width: 60px; z-index: 1; pointer-events: none; overflow: visible; }
.root-line path { fill: none; stroke: var(--rootline); stroke-linecap: round; opacity: .55; }
.depth {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  background: rgba(32,22,15,.88); color: var(--cream); font-family: var(--mono); font-size: .78rem;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.depth__arrow { color: var(--sun); transition: transform .3s ease; }
.depth.is-up .depth__arrow { transform: rotate(180deg); }
.depth__label { color: var(--cream); }

/* ---------- phone menu ---------- */
.menu-btn {
  display: none; position: fixed; z-index: 40; right: 14px; top: calc(14px + env(safe-area-inset-top, 0px));
  align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(32,22,15,.9); color: var(--cream); font: 600 .9rem/1 var(--body);
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.menu-btn__lines { position: relative; width: 16px; height: 2px; background: var(--sun); border-radius: 2px; transition: background .2s ease; }
.menu-btn__lines::before, .menu-btn__lines::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: var(--sun); border-radius: 2px; transition: transform .25s ease; }
.menu-btn__lines::before { top: -5px; }
.menu-btn__lines::after { top: 5px; }
.menu-btn[aria-expanded="true"] .menu-btn__lines { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__lines::before { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__lines::after { transform: translateY(-5px) rotate(-45deg); }
.sheet {
  position: fixed; inset: 0; z-index: 35; display: flex; flex-direction: column; justify-content: center; gap: 32px;
  padding: calc(80px + env(safe-area-inset-top, 0px)) 28px calc(40px + env(safe-area-inset-bottom, 0px));
  background: var(--soil-5); color: var(--cream); overflow-y: auto;
}
.sheet__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sheet__links a { display: block; padding: 8px 0; font-family: var(--display); font-size: clamp(1.9rem, 8vw, 2.6rem); line-height: 1.1; text-decoration: none; color: var(--cream); }
.sheet__links a:hover, .sheet__links a:focus-visible { color: var(--sun); }
.sheet__foot { font-size: 1.4rem; color: var(--sun); overflow-wrap: anywhere; }
body.menu-open { overflow: hidden; }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .branches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 8px; }
  .hero__text { padding-bottom: 8px; }
  .hero__photo { justify-self: center; max-width: 320px; }
  .hero__photo figcaption { left: -12px; top: 12%; }
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voices { grid-template-columns: minmax(0, 1fr); }
  .quiz { grid-template-columns: minmax(0, 1fr); }
  .mentor { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "photo" "form"; }
  .mentor__photo { position: relative; top: 0; max-width: 340px; margin-left: 24px; }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .seed { max-width: 280px; }
  .rings { grid-template-columns: 1fr; }
  .rings__art { max-width: 160px; }
  .root-line { display: none; }
}
@media (max-width: 720px) {
  .nav__links { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 620px) {
  .branches, .works { grid-template-columns: minmax(0, 1fr); }
  .work--feature { grid-template-columns: minmax(0, 1fr); }
  .work__shot { padding: 20px; }
  .work__body { padding: 24px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book__grid, .quiz__opts { grid-template-columns: minmax(0, 1fr); }
  .bubble { left: -12px; font-size: 1.3rem; }
  .hero__photo figcaption { font-size: 1.1rem; white-space: nowrap; left: -8px; max-width: calc(100% + 8px); }
}
@media (max-width: 380px) {
  .hero__photo figcaption { white-space: normal; font-size: 1.05rem; line-height: 1.15; }
  .roles li { font-size: .8rem; padding: 5px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* separators without dots */
.horizon b { margin-right: .9em; }
.foot__links { display: flex; gap: 18px; flex-wrap: wrap; }
.seed__ring text { white-space: pre; }