/* Fonts, colors, and spacing live here. Content lives in content/. */
@font-face {font-family: Gowun; src:url('/assets/fonts/gowun-regular.ttf'); font-weight:400; font-display:swap}
@font-face {font-family: Gowun; src:url('/assets/fonts/gowun-bold.ttf'); font-weight:700; font-display:swap}
@font-face {font-family: Blur; src:url('/assets/fonts/blur-medium.ttf'); font-weight:500; font-display:swap}
@font-face {font-family: Blur; src:url('/assets/fonts/blur-light.ttf'); font-weight:300; font-display:swap}
@font-face {font-family: Spirit; src:url('/assets/fonts/new-spirit-light.otf'); font-weight:300; font-display:swap}
@font-face {font-family: SourceSerif; src:url('/assets/fonts/source-serif-light.ttf'); font-weight:300; font-display:swap}
:root {color-scheme:light; --ink:#000; --paper:#fff; --body-size:24px; --body-leading:42px}
* {box-sizing:border-box}
html {scroll-behavior:smooth; scroll-padding-top:30px}
body {margin:0; background:var(--paper); color:var(--ink); font-family:Gowun,Georgia,serif}
.cursor-trail {position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.home .garden-index {position:relative; z-index:1}
a {color:inherit; text-decoration-thickness:1px; text-underline-offset:5px}
button {font:inherit; color:inherit; cursor:pointer}
a:focus-visible,button:focus-visible,video:focus-visible {outline:2px solid #555; outline-offset:7px}
.skip-link {position:fixed; top:12px; left:12px; transform:translateY(-180%); z-index:20; background:white; padding:10px}
.skip-link:focus {transform:none}
.site-header {display:flex; justify-content:space-between; align-items:center; padding:60px 6.25% 0 3.69%; height:92px; font:300 24px SourceSerif,Georgia,serif}
.site-header a {text-decoration:none; display:inline-flex; align-items:center}
.site-header img {display:block}
.site-header a:hover {text-decoration:underline}
.garden-index {padding-top:clamp(100px,25svh,178px); min-height:100svh; text-align:center}
.garden-index h1 {margin:0 auto; width:285px; max-width:75%}
.garden-index h1 img {display:block; max-width:100%; height:auto}
#thoughts {margin:70px auto 100px; padding:0 24px; scroll-margin-top:90px}
#thoughts h2 {font:300 22px Spirit,Georgia,serif; color:#808080; position:relative; width:max-content; margin:0 auto}
.essay-list {padding:0; margin:22px auto 0; list-style:none; width:fit-content; max-width:100%}
.essay-list li + li {margin-top:28px}
.essay-list a {display:flex; align-items:center; gap:32px; text-align:left; text-decoration:none; font:300 22px/1.5 Spirit,Georgia,serif}
.essay-list a img {flex:none}
.essay-list a:hover span {text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px}
.essay-layout {width:76%; max-width:1149px; margin:105px auto 0}
.drawing-space {height:191.1px; margin-left:5px; margin-bottom:96px}
.drawing {width:377px; height:280px; position:relative; transform:scale(.7); transform-origin:top left}
.drawing > span {display:block; position:absolute}
.drawing svg {display:block}
/* Draw, hold, then run the same drawing backward before the next loop. */
.drawn-path {stroke-dashoffset:0; animation:figma-draw 2s linear infinite alternate}
@keyframes figma-draw {0% {animation-timing-function:ease-out; stroke-dasharray:0 1; visibility:hidden} 50.522%,100% {stroke-dasharray:1 1; visibility:visible}}
.essay {font-size:var(--body-size); line-height:var(--body-leading); position:relative}
.essay h1 {font:500 48px/1.22 Blur,Arial,sans-serif; text-transform:uppercase; max-width:700px; margin:0 0 52px; padding:0 8px}
.essay > p,.essay > h2,.essay > h3,.essay > ul,.essay > blockquote,.essay > hr {max-width:949px}
.essay p {margin:0 0 42px}
.essay h2 {font:700 36px/42px Gowun,Georgia,serif; margin:0 0 42px}
.essay h3 {font-size:28px; line-height:1.35}
.essay blockquote {margin:42px 0; padding-left:24px; border-left:1px solid}
.essay-image {margin:60px 0; max-width:949px}
.essay-image img {max-width:100%; height:auto}
/* Fixed stroke thickness and texture; the inline box can break at any space.
   clone restarts the stroke on each line instead of stretching one big image. */
.marked-phrase {
  background-image:url('/assets/sketch-underline.svg');
  background-repeat:repeat-x;
  background-position:left bottom;
  background-size:120px 6px;
  padding-bottom:5px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.image-section {display:grid; grid-template-columns:minmax(0,513fr) minmax(0,502fr); gap:110px; margin:90px 0 65px; align-items:start}
.references {padding-top:0; min-width:0}
.reference {margin:0 0 80px; position:relative}
.reference-image {display:block; width:100%; height:auto; border-radius:31px; background:#eee}
.reference-0 .reference-image {transform:rotate(5.33deg)}
.reference-1 .reference-image {transform:rotate(-7.7deg)}
.reference figcaption {font:300 24px/1.25 Blur,Arial,sans-serif; max-width:260px; margin-top:85px; padding-left:14px}
.reference-1 figcaption {margin-top:65px}
.reference-arrow {position:absolute; bottom:68px; left:12px; height:60px; width:50px}
.reference-arrow img:first-child {position:absolute; left:0; top:8px}
.reference-arrow img:last-child {position:absolute; left:27px; top:0}
.side-prose h2 {margin-top:0}
.side-prose p:last-child {margin-bottom:0}
.scrolly {display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:clamp(24px,4vw,56px); margin:100px 0 100px; position:relative}
.video-column {min-width:0}
.video-stage {position:sticky; top:calc(50svh - 185px); margin:0; width:100%}
.video-stage video {display:block; width:100%; height:auto; background:transparent; border-radius:18px}
.video-caption {display:flex; justify-content:space-between; align-items:baseline; gap:12px; font:300 15px/1.4 SourceSerif,Georgia,serif; margin-top:18px; color:#555}
.video-mode {border:0; border-bottom:1px solid #bbb; background:none; padding:0; font:inherit; white-space:nowrap}
.video-mode:hover {color:#000; border-color:#000}
.video-error {font-size:16px; line-height:1.5; margin-top:15px}
.story-step {min-height:85svh; display:flex; align-items:center}
.story-step:last-child {min-height:85svh}
.story-step p {margin:0; padding:40px 0}
/* Notes stay beside the paragraph they annotate, including on phones. */
.annotated-block {display:grid; grid-template-columns:minmax(0,1fr) minmax(104px,25%); gap:clamp(16px,3vw,44px); align-items:start; margin:0 0 42px}
.annotated-prose {min-width:0}
.essay .annotated-prose > p {margin:0}
.margin-note {font:300 clamp(18px,1.75vw,24px)/1.4 Blur,Arial,sans-serif; margin:6px 0 0; min-width:0; overflow-wrap:anywhere}
.essay .margin-note p {margin:0}
.essay .margin-note p + p {margin-top:24px}
.essay-footer {padding:80px 0 0; margin-bottom:75px}
.essay-footer a {display:inline-block}
.essay-footer img {display:block; max-width:100%; height:auto}
.footer-curve {height:254px; overflow:hidden; position:relative; width:100%}
.footer-curve img {display:block; position:absolute; left:50%; transform:translateX(-50%); top:0}
@media (max-width:1450px) {
  .image-section {gap:7.3vw}
}
@media (max-width:900px) {
  :root {--body-size:21px; --body-leading:36px}
  .essay-layout {width:86%}
  .essay h1 {font-size:40px}
  .essay h2 {font-size:30px; line-height:1.35}
  .image-section {gap:45px}
  .reference figcaption {font-size:20px}
  .video-caption {flex-wrap:wrap; gap:5px}
}
@media (max-width:640px) {
  :root {--body-size:19px; --body-leading:32px}
  html {scroll-padding-top:20px}
  .site-header {padding:28px 24px 0; height:58px; font-size:20px}
  .garden-index {padding-top:clamp(90px,20svh,130px); min-height:100svh}
  .garden-index h1 {width:250px}
  #thoughts {margin-top:56px; padding:0 25px}
  .essay-list {margin-top:24px}
  .essay-list a {font-size:21px; gap:20px; align-items:baseline}
  .essay-layout {width:auto; margin:75px 25px 0}
  .drawing-space {height:147px; margin-left:0; margin-bottom:55px}
  .drawing {transform:scale(.525)}
  .essay h1 {font-size:32px; padding:0; margin-bottom:36px; max-width:100%}
  .essay h2 {font-size:28px; line-height:1.35; margin-bottom:28px}
  .essay p {margin-bottom:32px}
  .image-section {display:flex; flex-direction:column; gap:50px; margin:70px 0 50px}
  .references {width:100%; display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:0 7px}
  .reference {margin:0}
  .reference-1 {padding-top:36px}
  .reference-image {border-radius:14px}
  .reference figcaption,.reference-1 figcaption {font-size:16px; margin-top:26px; padding-left:0}
  .reference-arrow {display:none}
  .scrolly {display:block; margin:65px 0; isolation:isolate}
  .video-column {position:sticky; top:0; z-index:2; background:white; padding:14px 0 10px; margin:0 -1px}
  .video-stage {position:static}
  .video-stage video {max-height:34svh; object-fit:contain; border-radius:12px}
  .video-caption {font-size:14px; margin-top:9px; flex-wrap:nowrap}
  .story-step {min-height:70svh; align-items:center}
  .story-step:last-child {min-height:70svh}
  .story-step p {margin:0; padding:28px 0}
  .annotated-block {grid-template-columns:minmax(0,1fr) minmax(92px,29%); gap:16px; margin-bottom:32px}
  .margin-note {font-size:16px; margin-top:5px}
  .essay-footer {padding-top:45px; margin-bottom:55px}
  .essay-footer img {max-width:250px}
  .footer-curve {height:140px}
  .footer-curve img {transform:translateX(-50%) scale(.6); transform-origin:top center}
}
@media (prefers-reduced-motion:reduce) {
  .cursor-trail {display:none}
  html {scroll-behavior:auto}
  .drawn-path {animation:none; stroke-dasharray:none; visibility:visible}
  .story-step {min-height:auto; padding:35px 0}
}
@media print {
  .cursor-trail {display:none}
  .site-header,.video-caption,.footer-curve {display:none}
  .essay-layout {width:100%; margin:0}
  .drawing-space {display:none}
  .drawn-path {animation:none}
  .story-step {min-height:0; display:block}
  .video-stage,.video-column {position:static}
  .scrolly,.image-section {display:block}
  .references {display:flex; gap:40px}
  .reference {width:40%}
}

/* Poser sketchbook collage: photographed pages retain Figma's crops and angles. */
.drawing-footer {margin-top:28px; overflow:hidden}
.drawing-collage {position:relative; width:100%; max-width:1512px; aspect-ratio:1512 / 810.24; margin:0 auto; isolation:isolate}
.collage-home {position:absolute; left:11.897%; top:17.568%; width:19.55%; z-index:4; display:block}
.collage-home img {display:block; max-width:100%; height:auto}
.collage-line {position:absolute; left:-2.829%; top:36.272%; width:105.659%; z-index:1; pointer-events:none}
.collage-line img {display:block; width:100%; height:auto}
.drawing-slot {position:absolute; left:var(--x); top:var(--y); width:var(--w); aspect-ratio:var(--ratio); margin:0; display:grid; place-items:center; z-index:2}
.drawing-paper {position:relative; width:var(--paper-w); height:var(--paper-h); transform:rotate(var(--rotation)); overflow:hidden}
.drawing-paper img {position:absolute; width:var(--image-w); height:var(--image-h); left:var(--image-x); top:var(--image-y); max-width:none}
.raised-leg-study,.seated-study {z-index:3}
.raised-leg-study .drawing-paper {box-shadow:0 1.8px 15.6px -2.7px #0000001a}
@media (max-width:640px) {
  .drawing-footer {margin-top:28px}
  .drawing-collage {aspect-ratio:390 / 680}
  .collage-home {left:6.4%; top:3.5%; width:54%}
  .collage-line {left:-49%; top:49%; width:200%}
  .back-study {left:6%; top:19%; width:49%}
  .curled-study {left:53%; top:12%; width:44%}
  .reclining-study {left:2%; top:48%; width:54%}
  .raised-leg-study {left:48%; top:65%; width:51%}
  .seated-study {left:42%; top:37%; width:41%}
}
@media print {
  .drawing-footer {break-inside:avoid}
}

/* Each selected image stays with its own Markdown section. Keep the original
   image width, rotation, caption spacing and hand-drawn arrows. */
.image-section-single + .image-section-single {margin-top:0}
@media screen and (min-width:641px) {
  .image-section-single .references {position:sticky; top:32px}
  .image-section-single .reference {margin-bottom:0}
}