/* Misha Sumar, creative writing workshops.
   Warm paper and two inks, as in a small-press zine: warm black and marigold, the colour slightly off
   register with a riso grain, ink lines with a gentle hand-drawn wobble. Pictures from Misha's world:
   the log, doorways, chai, steps into water, a line that becomes a poem, a song and a movement.
   Fraunces for display (soft), Crimson Pro for text. */

:root {
  --paper: #f6efe1;
  --white: #fffaf0;
  --ink: #1d1813;
  --ink-2: #4a4037;
  --ink-3: #6b5f53;
  --line: #ddd0bb;
  --line-2: #cbbca4;
  --accent: #b0391e;
  --marigold: #e9a320;

  --display: "Fraunces", Georgia, serif;
  --text: "Crimson Pro", Georgia, "Times New Roman", serif;

  --fs-small: 1.0625rem;
  --fs-body: clamp(1.1875rem, 1.12rem + 0.25vw, 1.3125rem);
  --fs-lede: clamp(1.3125rem, 1.18rem + 0.5vw, 1.5625rem);
  --fs-h3: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);
  --fs-h2: clamp(2.375rem, 1.5rem + 2.9vw, 4rem);
  --fs-h1: clamp(2.625rem, 1.3rem + 4vw, 4.875rem);
  --fs-quote: clamp(1.875rem, 1.3rem + 2.2vw, 3.375rem);

  --wrap: 1180px;
  --gut: clamp(20px, 4vw, 44px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .1 0 0 0 0 .06 0 0 0 .2 -.075'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
p { margin: 0; }
a { color: inherit; }
h1, h2, h3 {
  margin: 0; font-family: var(--display); font-weight: 560; text-wrap: balance;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
em { font-style: italic; }
button { color: inherit; }
blockquote, figure { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper); }
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--paper); text-decoration: none; }
.skip:focus { top: 12px; }
.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; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  border: 1.5px solid var(--ink); border-radius: 2px; background: var(--ink); color: var(--paper);
  font: inherit; font-size: 1.125rem; font-weight: 500; line-height: 1.1; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.15s;
}
.btn:hover { background: var(--marigold); border-color: var(--ink); color: var(--ink); }
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.6; cursor: default; }

.link {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-small); color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.28em; text-decoration-color: var(--line-2);
  transition: color 0.2s, text-decoration-color 0.2s;
}
.link:hover { text-decoration-color: var(--marigold); text-decoration-thickness: 2px; }

/* ---------- navigation ---------- */

.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--paper) 94%, transparent); border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__in { display: flex; align-items: center; gap: 28px; height: 68px; }
.nav__name { display: inline-flex; white-space: nowrap; align-items: center; gap: 0.4em; font-family: var(--display); font-size: 1.4375rem; font-weight: 600; font-variation-settings: "SOFT" 100; text-decoration: none; }
/* the Heartwood mark, drawn bolder for small sizes (brand/heartwood-studio): rings round a marigold heart
   with writing spiralling out between them. On hover it turns a little, as in the footer. */
.mark { flex: none; width: 1.85em; height: 1.85em; transition: rotate 1.1s cubic-bezier(.3, .7, .2, 1); }
.nav__name:hover .mark { rotate: -24deg; }
.nav__links { display: flex; gap: 26px; margin-left: auto; }
.nav__links a { white-space: nowrap; color: var(--ink-2); font-size: var(--fs-small); text-decoration: none; transition: color 0.2s; }
.nav__links a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--marigold); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.nav__cta { white-space: nowrap; font-size: var(--fs-small); color: var(--accent); text-underline-offset: 0.28em; text-decoration-thickness: 1px; }
.nav__menu { display: none; margin-left: auto; padding: 8px 0; border: 0; background: none; font: inherit; font-size: var(--fs-small); cursor: pointer; }
.menu { display: grid; padding: 0 var(--gut) 18px; border-top: 1px solid var(--line); background: var(--paper); }
.menu[hidden] { display: none; }
.menu a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1.25rem; text-decoration: none; }
.menu a:last-child { color: var(--accent); border-bottom: 0; }
@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .nav__menu { display: inline-block; }
  .nav__in { height: 60px; }
}
/* the smallest phones: the studio name and Menu side by side without running past the edge */
@media (max-width: 380px) { .nav__name { font-size: 1.25rem; } .nav__in { gap: 16px; } }

/* ---------- hero: the rings ---------- */

.hero { padding: clamp(28px, 5vw, 72px) 0 clamp(48px, 6vw, 88px); overflow: clip; }
.hero__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.hero h1 { max-width: 10em; font-size: var(--fs-h1); font-weight: 600; line-height: 0.98; letter-spacing: -0.028em; }
.hero h1 em { display: block; font-weight: 420; letter-spacing: -0.02em; }
.nowrap { white-space: nowrap; }
/* two lines beside it: 3.2em tall, reaching 0.2em into the leading above and below (2.8em in the flow, under two 1.45em lines) */
.lede__me { float: left; width: 3.2em; height: 3.2em; margin: -0.2em 0.6em -0.2em 0; border: 1.5px solid var(--ink); border-radius: 50%; }
.lede { max-width: 28em; margin-top: 28px; color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.45; text-wrap: balance; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 34px; }
.hero__cred { margin-top: 30px; color: var(--ink-3); font-size: var(--fs-small); font-style: italic; }
.hero__plate { justify-self: center; width: min(100%, 620px); }
.rings { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 50%; will-change: transform; }
.rings .ring { fill: none; stroke: var(--ink); stroke-linejoin: round; }
.rings .band-fill { stroke: none; }
.rings .crack { fill: var(--ink); }
.rings text { font-family: var(--text); font-style: italic; font-size: 17px; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 7px; stroke-linejoin: round; }
.rings .core-label { font-family: var(--display); font-style: italic; font-size: 21px; font-weight: 500; }
.rings .tick { fill: var(--ink); }
.js .rings .ring { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); transition-delay: calc(var(--i) * 55ms); }
.js .rings .band-fill, .js .rings .crack, .js .rings .core, .js .rings .lbl { opacity: 0; transition: opacity 0.9s ease; transition-delay: calc(0.5s + var(--i, 0) * 90ms); }
.rings.is-drawn .ring { stroke-dashoffset: 0; }
.rings.is-drawn .band-fill, .rings.is-drawn .crack, .rings.is-drawn .core, .rings.is-drawn .lbl { opacity: 1; }

/* ---------- the band of prompts ---------- */

.band { padding: 20px 0; overflow: hidden; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.band__track { display: flex; width: max-content; animation: band 110s linear infinite; }
.band:hover .band__track, .band:focus-within .band__track { animation-play-state: paused; }
.band__item {
  display: inline-flex; align-items: baseline; gap: 34px; padding: 0 34px 0 0; border: 0; background: none; cursor: pointer;
  font-family: var(--display); font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); font-style: italic; font-weight: 400;
  font-variation-settings: "SOFT" 100; color: var(--ink); white-space: nowrap;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.18em; text-decoration-thickness: 1.5px;
  transition: text-decoration-color 0.2s;
}
.band__item:hover { text-decoration-color: var(--ink); }
.band__item::after { content: "*"; color: var(--ink-3); font-style: normal; }
@keyframes band { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */

.section { padding-block: clamp(80px, 10vw, 140px); }
.section + .section, .hero + .section { border-top: 1px solid var(--line); }
.head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.head h2, .about h2, .contact h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.025em; }
.head p { max-width: 32em; margin-top: 18px; color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.45; }

/* ---------- write without stopping ---------- */

.room { position: relative; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--white); }
.room__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 32px; align-items: start; padding: clamp(22px, 3.5vw, 38px) clamp(20px, 4vw, 44px) 20px; border-bottom: 1px solid var(--line); }
.room__prompt { max-width: 24em; min-height: 2.4em; font-family: var(--display); font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem); font-weight: 450; font-variation-settings: "SOFT" 100; line-height: 1.18; letter-spacing: -0.015em; text-wrap: balance; transition: opacity 0.25s; }
.room__prompt.is-swapping { opacity: 0; }
.room__controls { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin-top: 18px; }
.minutes { display: inline-flex; align-items: baseline; gap: 2px; color: var(--ink-3); font-size: var(--fs-small); }
.minutes button { min-width: 2em; padding: 2px 6px; border: 0; border-bottom: 1.5px solid transparent; background: none; cursor: pointer; font: inherit; font-variant-numeric: lining-nums; color: var(--ink-3); }
.minutes button[aria-checked="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.minutes button:disabled { cursor: default; }
.minutes span { margin-left: 4px; }
.clock { display: grid; justify-items: center; gap: 6px; width: clamp(76px, 9vw, 104px); }
.clock svg { width: 100%; height: auto; }
.clock__face { fill: var(--white); stroke: var(--ink); stroke-width: 2.2; }
.clock line { stroke: var(--ink); stroke-linecap: round; }
.clock__wedge { fill: var(--marigold); mix-blend-mode: multiply; }
.clock__pin { fill: var(--ink); }
.clock__time { font-family: var(--display); font-size: 1.375rem; font-weight: 500; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.room textarea {
  display: block; width: 100%; min-height: 240px; padding: clamp(20px, 3vw, 30px) clamp(20px, 4vw, 44px);
  border: 0; outline: none; resize: none; overflow: hidden; background: transparent;
  font: inherit; font-size: var(--fs-lede); line-height: 1.65; color: var(--ink); caret-color: var(--accent);
}
.room textarea::placeholder { color: var(--ink-3); }
.room__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding: 14px clamp(20px, 4vw, 44px); border-top: 1px solid var(--line); }
.room__nudge { flex: 1 1 220px; min-height: 1.4em; color: var(--ink-2); font-style: italic; opacity: 0; transition: opacity 0.4s; }
.room__nudge.is-on { opacity: 1; }
.room__count { color: var(--ink-3); font-size: var(--fs-small); font-variant-numeric: lining-nums; }
.room__bar .btn { margin-left: auto; }
@media (max-width: 600px) {
  .room__top { grid-template-columns: minmax(0, 1fr); }
  .clock { grid-template-columns: 64px auto; align-items: center; justify-items: start; width: auto; gap: 14px; }
  .room__bar { display: grid; grid-template-columns: 1fr auto; }
  .room__nudge { grid-column: 1 / -1; order: 3; }
  .room__bar .btn { grid-column: 1 / -1; order: 4; margin-left: 0; }
}
.room__privacy { margin-top: 14px; color: var(--ink-3); font-size: var(--fs-small); }
.after { padding: clamp(24px, 3.5vw, 38px) clamp(20px, 4vw, 44px); border-top: 1px solid var(--line); }
.after__done { font-family: var(--display); font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; outline: none; }
.after__grid { display: grid; gap: 28px; margin-top: 24px; }
@media (min-width: 760px) {
  .after__grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .after__grid > div:first-child { padding-right: 34px; }
  .after__grid > div + div { padding-left: 34px; border-left: 1px solid var(--line); }
}
.after__label { color: var(--ink-3); font-size: var(--fs-small); }
.after__text { margin: 6px 0 14px; font-size: var(--fs-lede); line-height: 1.4; }
.after__keep { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 26px; }
.after__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.after__cta p { max-width: 26em; font-size: var(--fs-lede); line-height: 1.4; }

/* ---------- the method, in plates ---------- */

.thread { display: grid; gap: 28px clamp(36px, 6vw, 96px); align-items: center; padding-block: clamp(40px, 5vw, 72px); }
.thread + .thread { border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .thread { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .thread:nth-of-type(even) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .thread:nth-of-type(even) .thread__text { order: -1; }
}
.thread h3 { font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -0.02em; }
.thread h3 em { font-weight: 420; }
.thread__text p { max-width: 30em; margin-top: 16px; color: var(--ink-2); }

.plate svg { display: block; width: 100%; height: auto; overflow: visible; }
.plate text { font-family: var(--display); font-style: italic; font-size: 17px; font-weight: 400; font-variation-settings: "SOFT" 100; fill: var(--ink); }
.plate .label { font-size: 19px; font-weight: 500; }
.plate .label.big { font-size: 25px; }
.plate .note { font-size: 16px; fill: var(--ink-2); }
.plate .halo { paint-order: stroke; stroke: var(--paper); stroke-width: 7px; stroke-linejoin: round; }
.plate .onink { fill: var(--paper); }
.plate .grid path { fill: none; stroke: var(--line); stroke-width: 1; }
.plate .axis text { font-family: var(--text); font-style: normal; font-size: 14px; fill: var(--ink-3); }
.plate .legend text { font-size: 15px; fill: var(--ink-2); }
.plate .ink { filter: url(#f-ink); }
.plate .riso { mask: url(#m-riso); mix-blend-mode: multiply; }
.plate .riso > * { fill: var(--marigold); }
.plate .riso.lift { mix-blend-mode: normal; }
.plate .fixed { fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-dasharray: 5 6; }
.plate .bold { fill: none; stroke: var(--ink); stroke-width: 3.6; stroke-linecap: round; }
.plate .stops circle { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.plate .stops .open { stroke-dasharray: 3 3.2; }
.plate .line { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.plate .line.thin { stroke-width: 1.4; }
.plate .paperfill { fill: var(--white); stroke: var(--ink); stroke-width: 2.2; }
.plate .dark, .plate .deep { fill: var(--ink); }
.plate .leaf { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.plate .ground { stroke: none; }
.plate .solidpaper { fill: var(--paper); }
.plate .path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-dasharray: 1 7; stroke-linecap: round; }
.plate .waves { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; }
.plate .wob { filter: url(#f-ink); }
.plate .steam { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.plate .wave path { fill: none; stroke: var(--ink); stroke-width: 3.6; stroke-linecap: round; }
.plate .stanza { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.plate .staff { fill: none; stroke: var(--ink-3); stroke-width: 1.1; }
.plate .riso .swash { fill: none; stroke: var(--marigold); stroke-width: 11; stroke-linecap: round; }
.plate .line.onink { stroke: var(--paper); }
.plate .facets { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.plate .lit > * { fill: var(--marigold); }
.plate .lit .rays { fill: none; stroke: var(--marigold); stroke-width: 2.2; stroke-linecap: round; }

.plate .narrow { display: none; }
@media (max-width: 600px) {
  .plate .wide { display: none; }
  .plate .narrow { display: inline; }
  .plate text { font-size: 20px; }
  .plate .label { font-size: 22px; }
  .plate .note { font-size: 19px; }
  .plate .axis text { font-size: 16px; }
}

/* Plates draw themselves and settle into place as you scroll down, and undraw as you scroll back up,
   like the log. Every part keeps its own delay, duration and easing on a plate timeline --T long;
   site.js sets --p on each plate (0 as it comes up from the bottom of the screen, 1 when it reaches
   the middle) and the paused animations are held at p × T. Without JS, or with reduced motion,
   there are no animations and everything shows finished. */
.js .rv, .js .plate, .js .pict { --p: 0; }
.plate { --T: 1.85s; }
.js .plate { animation: settle 1.3s var(--ease) both paused; animation-delay: calc(var(--p) * var(--T) * -1); }
.js .plate .draw { stroke-dasharray: 1 1; animation: draw var(--t, 1.6s) var(--ease) both paused; animation-delay: calc(var(--d, 0.25s) - var(--p) * var(--T)); }
.js .plate .fill { animation: fade 0.8s ease both paused; animation-delay: calc(var(--d, 0.6s) - var(--p) * var(--T)); }
.js .plate .wave path { transform-box: fill-box; transform-origin: center; animation: grow 0.9s var(--spring) both paused; animation-delay: calc(0.9s - var(--p) * var(--T)); }
@keyframes settle { from { transform: scale(0.94); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes grow { from { transform: scaleY(0); } }

/* Once a plate has drawn and is on screen (.is-live), a small part of it keeps moving: glints,
   a shade that comes and goes, or something cute. Each loop starts and ends at rest, so it picks up
   where the drawing left off. */
.plate .beat, .plate .pulse, .pict .pulse, .plate .sway, .plate .spin, .plate .drift, .pict .beat, .pict .seats circle { transform-box: fill-box; transform-origin: center; }
.js .is-live .beat { animation: beat 3s ease-in-out calc(var(--i, 0) * 0.7s) infinite; }
.js .is-live .pulse { animation: pulse 3.2s ease-in-out calc(var(--i, 0) * 0.42s) infinite; }
.js .is-live .bob { animation: bob 1.9s ease-in-out calc(var(--i, 0) * 0.16s) infinite; }
.js .is-live .sway { animation: sway 5s ease-in-out calc(var(--i, 0) * 0.6s) infinite; }
.js .is-live .spin { animation: spin 6s linear infinite; }
.js .is-live .drift { animation: drift 4s ease-in-out infinite; }
.js .is-live .march { animation: march 1.1s linear infinite; }
.js .is-live .wave path { animation: level 0.9s ease-in-out calc(var(--i, 0) * -0.29s) infinite; }
@keyframes beat { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.45; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 var(--bob, -8px); } }
@keyframes sway { 0%, 100% { rotate: 0deg; } 30% { rotate: calc(var(--sw, 1.6deg) * -1); } 70% { rotate: var(--sw, 1.6deg); } }
.plate .glint > *, .pict .glint > *, .plate .hop { transform-box: fill-box; transform-origin: center; }
.js .is-live .glint > * { animation: glint 2.6s ease-in-out calc(0.3s + var(--i, 0) * 0.7s) infinite; }
.js .is-live .hop { animation: hop 3.8s ease-in-out 1s infinite; }
@keyframes glint { 0%, 100% { scale: 1; rotate: 0deg; } 50% { scale: 0.5; rotate: 40deg; } }
@keyframes hop { 0%, 58%, 74%, 100% { translate: 0 0; } 64% { translate: 0 -5px; } 69% { translate: 0 0; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: -7.5px 0; } }
@keyframes march { to { stroke-dashoffset: var(--m, -12.4); } }
@keyframes level { 0%, 100% { transform: none; } 50% { transform: scaleY(0.25); } }
.js .is-live .glow { animation: glow 3s ease-in-out 0.4s infinite; }
@keyframes glow { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: 0.7; scale: 1.1; } }
/* the doors creak a little further open and back; the moon rocks; small stars spin; the poem's
   marigold mark is struck again; a dancer runs along the movement ribbon; seeds glisten */
.plate .creak * { vector-effect: non-scaling-stroke; }
.js .is-live .creak { animation: creak 5s ease-in-out calc(var(--i, 0) * 0.9s) infinite; }
.js .is-live .rock { animation: rock 5s ease-in-out infinite; }
.js .is-live .spark { animation: spark 2.4s ease-in-out 0.5s infinite; }
.js .is-live .sweep { animation: sweep 4.5s var(--ease) 0.6s infinite; }
.plate .spark, .plate .sweep { transform-box: fill-box; transform-origin: center; }
.plate .sweep { transform-origin: 0 50%; }
.plate .dancer { fill: none; stroke: var(--ink); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 0.001 2; opacity: 0; }
.js .is-live .dancer { opacity: 1; animation: dance 3.6s ease-in-out infinite alternate; }
.js .is-live .seeds > :nth-child(6n+2) { animation: glisten 2.4s ease-in-out calc(var(--i) * 0.11s) infinite; }
@keyframes glisten { 0%, 100% { scale: 1; } 50% { scale: 1.28; } }
@keyframes creak { 0%, 100% { scale: 1 1; } 50% { scale: 0.55 1; } }
@keyframes rock { 0%, 100% { rotate: 0deg; } 50% { rotate: -10deg; } }
@keyframes spark { 0%, 100% { scale: 1; rotate: 0deg; } 50% { scale: 0.45; rotate: 50deg; } }
@keyframes sweep { 0%, 58%, 100% { scale: 1 1; } 66% { scale: 0 1; } }
@keyframes dance { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }

/* ---------- how the workshops feel ---------- */
.feel { padding-block: clamp(32px, 6vw, 48px); }
.feel:first-child { padding-top: 0; }
.feel + .feel { border-top: 1px solid var(--line); }
@media (min-width: 760px) {
  .feels { display: grid; grid-template-columns: 1fr 1fr; }
  .feel { padding: clamp(36px, 4.5vw, 64px); }
  .feel + .feel { border-top: 0; }
  .feel:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--line); }
  .feel:nth-child(even) { padding-right: 0; }
  .feel:nth-child(-n+2) { padding-top: 0; border-bottom: 1px solid var(--line); }
  .feel:nth-child(n+3) { padding-bottom: 0; }
}
.feel .plate { width: min(100%, 500px); }
@media (min-width: 760px) and (max-width: 1100px) { .feel .plate .note { font-size: 19px; } }
.feel h3 { margin-top: clamp(18px, 2.5vw, 28px); font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -0.02em; }
.feel p { max-width: 30em; margin-top: 12px; color: var(--ink-2); }
.plate .hand { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plate .hand.thin { stroke-width: 1.1; }
.plate .scrib { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plate .stanza.thin { stroke-width: 2.2; }
.plate .pith { fill: var(--white); }
.plate .shine { fill: none; stroke: var(--paper); stroke-width: 2.4; stroke-linecap: round; }
.plate .seed { fill: none; stroke: var(--ink); stroke-width: 1.1; }
.plate .membrane { fill: none; stroke: var(--white); stroke-width: 6; stroke-linecap: round; }
.plate .seeds > * { transform-box: fill-box; transform-origin: center; }
.js .plate .seeds > * { animation: pop 0.5s var(--spring) both paused; animation-delay: calc(0.7s + var(--i) * 16ms - var(--p) * var(--T)); }
@keyframes pop { from { scale: 0; } }
.plate .drop { transform-box: fill-box; transform-origin: 50% 0; }
.js .is-live .drop { animation: drip 2.8s cubic-bezier(0.5, 0, 0.9, 0.5) 0.4s infinite; }
@keyframes drip {
  0% { translate: 0 0; scale: 0.4; opacity: 0; }
  18% { translate: 0 0; scale: 1; opacity: 1; }
  62% { translate: 0 0; }
  86% { translate: 0 25px; opacity: 1; }
  100% { translate: 0 27px; opacity: 0; }
}
.plate .twinkle > *, .pict .twinkle > * { transform-box: fill-box; transform-origin: center; }
.js .is-live .twinkle > * { animation: twinkle 2.4s ease-in-out 0.6s infinite; }
.js .is-live .twinkle > :nth-child(2) { animation-delay: 1.4s; }
.js .is-live .twinkle > :nth-child(3) { animation-delay: 2s; }
.js .is-live .twinkle > :nth-child(4) { animation-delay: 0.9s; }
@keyframes twinkle { 0%, 100% { scale: 1; } 50% { scale: 0.4; } }
.plate .pg { transform-box: fill-box; transform-origin: 50% 0; }
.js .plate .pg { animation: swing 2.6s var(--ease) both paused; animation-delay: calc(0.6s + var(--i) * 0.12s - var(--p) * var(--T)); }
.js .is-live .pg { animation: sway 5.5s ease-in-out calc(var(--i) * -1.3s) infinite; }
@keyframes swing { 0% { rotate: 0deg; } 18% { rotate: -7deg; } 40% { rotate: 5deg; } 62% { rotate: -2.5deg; } 82% { rotate: 1deg; } 100% { rotate: 0deg; } }

/* ---------- what students say ---------- */
.voices { padding-block: clamp(64px, 8vw, 110px); }
.voices__grid { display: grid; gap: clamp(40px, 6vw, 72px); }
/* three voices: two side by side, the third centred under them */
@media (min-width: 960px) {
  .voices__grid { grid-template-columns: 1fr 1fr; }
  .voice:nth-child(3):last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - clamp(40px, 6vw, 72px)) / 2); }
}
.voice { display: grid; grid-template-columns: clamp(112px, 17vw, 210px) minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); align-items: center; margin: 0; }
.voice blockquote { margin: 0; }
.voice blockquote p { font-family: var(--display); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); font-style: italic; font-weight: 380; font-variation-settings: "SOFT" 100; line-height: 1.22; letter-spacing: -0.015em; text-wrap: balance; }
.voice figcaption { margin-top: 14px; color: var(--ink-3); font-size: var(--fs-small); }
.plate .float { transform-box: fill-box; }
.js .is-live .float { animation: float 3.6s ease-in-out 0.4s infinite; }
@keyframes float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -9px; rotate: -5deg; } }
/* the newest growth ring round the third student, in marigold, breathes out and in */
.plate .riso .band { fill: none; stroke: var(--marigold); stroke-width: 5; stroke-linecap: round; }
.plate .breathe { transform-box: fill-box; transform-origin: center; }
.js .is-live .breathe { animation: breathe 4.4s ease-in-out 0.6s infinite; }
@keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: 1.05 1.14; } }

/* ---------- workshops and prices ---------- */

.offers { display: grid; border: 1.5px solid var(--ink); background: var(--white); }
.offer { display: grid; align-content: start; padding: clamp(24px, 2.6vw, 34px); }
.offer + .offer { border-top: 1.5px solid var(--ink); }
@media (min-width: 900px) {
  .offers { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); }
  .offer { grid-row: span 5; grid-template-rows: subgrid; }
  .offer + .offer { border-top: 0; border-left: 1.5px solid var(--ink); }
}
.pict { width: 150px; height: auto; margin-bottom: 18px; overflow: visible; }
.pict .ring { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.pict .ring.thin { stroke-width: 1.4; stroke-linecap: round; }
.pict .riso-c { fill: var(--marigold); mix-blend-mode: multiply; }
.pict .seats circle { fill: var(--white); stroke: var(--ink); stroke-width: 2; }
.pict .seats .solid, .pict .solid { fill: var(--ink); stroke: var(--ink); }
.pict .hands { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.pict { --T: 1.33s; }
.js .pict .seats circle { animation: seat 0.5s var(--spring) both paused; animation-delay: calc(0.2s + var(--i, 0) * 70ms - var(--p) * var(--T)); }
@keyframes seat { from { transform: scale(0); } }
.js .pict.is-live .seats circle { animation: seat-turn 5s ease-in-out calc(var(--i, 0) * 0.5s) infinite; }
@keyframes seat-turn { 0%, 14%, 100% { transform: none; } 7% { transform: scale(1.4); } }
.offer h3 { font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -0.02em; }
.offer__desc { max-width: 24em; margin-top: 12px; color: var(--ink-2); }
.tariff { align-self: start; margin: 26px 0 0; border-top: 1.5px solid var(--ink); }
.tariff div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.tariff dt { color: var(--ink-2); }
.tariff dd { margin: 0; font-family: var(--display); font-size: 1.875rem; font-weight: 500; font-variation-settings: "SOFT" 100; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.offer .btn { align-self: end; justify-self: stretch; margin-top: 28px; }
.btn--ghost { background: transparent; color: var(--ink); }
.offers__note { max-width: 46em; margin-top: 22px; color: var(--ink-3); font-size: var(--fs-small); }
.tariff dt { white-space: nowrap; }
.tariff .tariff__when { font-size: 1.375rem; text-align: right; }
.tariff__yours { display: block; margin-top: 4px; font-family: var(--text); font-size: var(--fs-small); font-style: italic; color: var(--ink-3); }
/* Sessions for festivals, teams and community spaces run across the foot of the table, tinted. */
.offer--wide { background: color-mix(in srgb, var(--marigold) 13%, var(--white)); }
.offer--wide .pict { width: 176px; }
@media (min-width: 900px) {
  .offers .offer--wide { grid-column: 1 / -1; grid-row: auto; grid-template-rows: none; grid-template-columns: 196px minmax(0, 1fr) auto; align-items: center; column-gap: clamp(24px, 3.4vw, 48px); border-left: 0; border-top: 1.5px solid var(--ink); }
  .offer--wide .pict { margin-bottom: 0; }
  .offer--wide .offer__desc { max-width: 30em; }
  .offers .offer--wide .btn { align-self: center; margin-top: 0; }
}

/* ---------- about ---------- */

.about { display: grid; gap: clamp(36px, 6vw, 96px); align-items: center; }
@media (min-width: 900px) { .about { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.about__photo { width: min(100%, 440px); }
.about__photo img { display: block; width: 100%; height: auto; }
.about__text p { max-width: 32em; margin-top: 18px; color: var(--ink-2); }
.about__text .about__bio { margin-top: 26px; color: var(--ink); font-size: var(--fs-lede); line-height: 1.45; }
.about__text .about__bio + .about__bio { margin-top: 18px; }

/* ---------- why I teach ---------- */

.why__fig { max-width: 1000px; margin-inline: auto; text-align: center; }
.why__fig p { font-family: var(--display); font-size: var(--fs-quote); font-style: italic; font-weight: 380; font-variation-settings: "SOFT" 100; line-height: 1.14; letter-spacing: -0.022em; text-wrap: balance; }
.why__fig figcaption { margin-top: 26px; color: var(--ink-3); font-size: var(--fs-small); }

/* ---------- questions ---------- */

.faq { display: grid; gap: 8px; }
@media (min-width: 960px) { .faq { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 60px; } }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list details:first-child { border-top: 1.5px solid var(--ink); }
.faq__list summary { position: relative; padding: 18px 44px 18px 0; list-style: none; cursor: pointer; font-family: var(--display); font-size: 1.375rem; font-weight: 450; font-variation-settings: "SOFT" 100; line-height: 1.3; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::before, .faq__list summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 2px; background: var(--ink); transition: rotate 0.25s var(--ease); }
.faq__list summary::after { rotate: 90deg; }
.faq__list details[open] summary::after { rotate: 0deg; }
.faq__list details p { max-width: 34em; padding: 0 0 22px; color: var(--ink-2); }

.faq__list .link { font: inherit; color: var(--ink); }

/* ---------- the book: her published writing ---------- */
html:has(.book[open]) { overflow: hidden; }
.book { width: min(980px, calc(100vw - 32px)); height: min(680px, calc(100dvh - 32px)); max-width: none; max-height: none; padding: 0; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--white); color: var(--ink); overflow: hidden; }
.book[open] { display: grid; grid-template-rows: 1fr auto; }
.book::backdrop { background: rgb(29 24 19 / 0.6); }
.book__pages { position: relative; display: grid; min-height: 0; }
@media (min-width: 760px) {
  .book__pages { grid-template-columns: 1fr 1fr; }
  .book__pages::before { content: ""; position: absolute; top: 0; left: calc(50% + 26px); z-index: 1; width: 13px; height: 72px; background: var(--marigold); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); }
  .book__pages::after { content: ""; position: absolute; inset: 0 auto 0 50%; width: 36px; translate: -50% 0; background: linear-gradient(90deg, transparent, rgb(29 24 19 / 0.07) 50%, transparent); pointer-events: none; }
}
.book__page { min-height: 0; overflow: hidden; padding: clamp(28px, 5vw, 56px) clamp(24px, 4.5vw, 52px) 20px; font-size: 1.125rem; line-height: 1.6; }
.book__page[hidden] { display: none !important; }
.book__page p + p { text-indent: 1.4em; }
.book__page p.cont { text-indent: 0; }
.book__title { display: grid; align-content: center; justify-items: center; gap: 14px; text-align: center; }
.book__title h2 { font-size: clamp(2.6rem, 2rem + 2.5vw, 4rem); font-style: italic; font-weight: 420; letter-spacing: -0.02em; }
.book__by { font-family: var(--display); font-size: 1.25rem; font-variation-settings: "SOFT" 100; }
.book__title .book__mark { flex: none; width: 30px; height: 30px; margin-block: 10px; overflow: visible; }
/* her crescent moon on the book's title page, printed in two inks slightly off register */
.book__mark .mark__riso { fill: var(--marigold); mix-blend-mode: multiply; }
.book__mark .mark__ink { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.book__note, .book__soon { color: var(--ink-3); font-size: var(--fs-small); }
.book__soon { display: grid; align-content: center; gap: 14px; height: 100%; max-width: 22em; margin-inline: auto; text-align: center; }
.book__soon a, .book__note a { color: var(--ink); }
.book__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 14px clamp(20px, 4vw, 40px) 18px; border-top: 1px solid var(--line); }
.book__bar [data-book-prev] { justify-self: start; }
.book__bar [data-book-next] { justify-self: end; }
.book__bar button[disabled] { visibility: hidden; }
.book__count { color: var(--ink-3); font-size: var(--fs-small); font-style: italic; }
.book__close { position: absolute; top: 14px; right: 18px; z-index: 1; padding: 6px 4px; border: 0; background: none; font: inherit; font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.book__page.turn { animation: turn 0.5s var(--ease); }
@keyframes turn { from { opacity: 0; translate: 10px 0; } }

/* ---------- contact ---------- */

.contact { display: grid; gap: clamp(36px, 5vw, 72px); align-items: start; }
@media (min-width: 960px) { .contact { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.contact__text p { max-width: 24em; margin-top: 18px; color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.45; }
.plate--letter { width: min(100%, 320px); margin-top: 40px; }
.plate--letter .label { font-size: 21px; }
.plate--letter { --T: 1.7s; }
.js .plate--letter .letter { animation: slide 1.2s var(--spring) both paused; animation-delay: calc(0.5s - var(--p) * var(--T)); }
@keyframes slide { from { translate: 0 34px; } }
.js .plate--letter.is-live .letter { animation: peek 3.8s ease-in-out 0.3s infinite; }
@keyframes peek { 0%, 100% { translate: 0 0; } 35% { translate: 0 -14px; } 50% { translate: 0 -11px; } 65% { translate: 0 -14px; } }
.contact__mail a { color: var(--ink); text-underline-offset: 0.25em; text-decoration-color: var(--line-2); }
.form { position: relative; display: grid; gap: 26px; padding: clamp(24px, 3.5vw, 38px); border: 1.5px solid var(--ink); border-radius: 2px; background: var(--white); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.picks { display: grid; gap: 2px 24px; min-width: 0; margin: 0; padding: 0; border: 0; }
@media (min-width: 560px) { .picks { grid-template-columns: 1fr 1fr; } }
.picks legend { margin-bottom: 8px; padding: 0; color: var(--ink-3); font-size: var(--fs-small); }
.picks label { position: relative; display: flex; }
.picks input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.picks span { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 1.1875rem; color: var(--ink-2); cursor: pointer; }
.picks span::before { content: ""; flex: none; width: 15px; height: 15px; border: 1.5px solid var(--ink); border-radius: 50%; transition: box-shadow 0.15s; }
.picks input:checked + span { color: var(--ink); }
.picks input:checked + span::before { box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 8px var(--ink); }
.picks input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.picks__hint { margin-top: -10px; padding: 12px 16px; border-radius: 2px; background: color-mix(in srgb, var(--marigold) 16%, var(--white)); color: var(--ink-2); font-size: var(--fs-small); font-style: italic; line-height: 1.45; }
.js .picks__hint:not([hidden]) { animation: hint-in 0.35s var(--ease) both; }
@keyframes hint-in { from { opacity: 0; translate: 0 -6px; } }
.fields { display: grid; gap: 26px; }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 2px; }
.field > span { color: var(--ink-3); font-size: var(--fs-small); }
.field input, .field textarea {
  width: 100%; padding: 6px 0 8px; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; outline: none; background: transparent;
  font: inherit; font-size: 1.25rem; color: var(--ink); caret-color: var(--accent); transition: border-color 0.2s;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field [aria-invalid="true"] { border-bottom-color: var(--ink); }
.field [aria-invalid="true"] { border-bottom-color: var(--accent); }
.form__error { color: var(--accent); }
.form__send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.form__note { color: var(--ink-3); font-size: var(--fs-small); }
.form__done { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(24px, 3.5vw, 38px); background: var(--white); outline: none; }
.form__done.has-fallback { position: static; padding: 0; }
.form__done-h { font-family: var(--display); font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; }
.form__done > p:not([class]) { color: var(--ink-2); }
.form.is-fallback > :not(.form__done) { display: none; }
.form__fallback { display: grid; gap: 16px; margin-top: 6px; }
.form__fallback-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

/* ---------- footer and the phone bar ---------- */

.foot { padding: 36px 0 calc(44px + env(safe-area-inset-bottom)); border-top: 3px solid var(--ink); }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; color: var(--ink-3); font-size: var(--fs-small); }
/* the full Heartwood mark, its writing spiralling out from the heart; on hover it turns a little, the way
   you turn a page to read writing that goes round */
.foot__name { display: flex; align-items: center; gap: 18px; margin: 0; font-family: var(--display); font-size: 1.25rem; font-weight: 600; font-variation-settings: "SOFT" 100; color: var(--ink); }
.foot__mark { flex: none; width: clamp(96px, 11vw, 132px); height: auto; transition: rotate 1.1s cubic-bezier(.3, .7, .2, 1); }
.foot__name:hover .foot__mark { rotate: -24deg; }
.foot__links { display: flex; gap: 20px; }
.foot__links a { color: var(--ink-2); text-underline-offset: 0.25em; text-decoration-color: var(--line-2); }
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  border-top: 1.5px solid var(--ink); background: color-mix(in srgb, var(--paper) 96%, transparent);
  translate: 0 110%; transition: translate 0.35s var(--ease);
}
.bar.is-on { translate: 0 0; }
body.is-writing .bar { translate: 0 110%; }
.bar p { font-family: var(--display); font-size: 1.1875rem; font-weight: 500; }
.bar .btn { min-height: 44px; padding: 0 18px; }
@media (min-width: 1081px) { .bar { display: none; } }

/* ---------- arrival ---------- */

.js .rv { animation: rise 0.9s var(--ease) both paused; animation-delay: calc(var(--p) * -0.9s); }
@keyframes rise { from { translate: 0 14px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .band__track { flex-wrap: wrap; width: auto; row-gap: 10px; padding: 0 var(--gut); }
  .band__item[aria-hidden="true"] { display: none; }
}