@font-face{font-family:Prompt;src:url('fonts/prompt/Prompt-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Prompt;src:url('fonts/prompt/Prompt-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Prompt;src:url('fonts/prompt/Prompt-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Sriracha;src:url('fonts/sriracha/Sriracha-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--teal:#1F4C54;--green:#44BB46;--lime:#D8E60E;--cream:#FAFBEF;--ink:#1A2126;--page-gutter:clamp(36px,6.2vw,180px);color:var(--teal);background:var(--cream);font-family:Prompt,sans-serif;font-weight:400;word-break:keep-all;overflow-wrap:normal;letter-spacing:normal}
*{box-sizing:border-box;word-break:keep-all;letter-spacing:normal}
html{scroll-behavior:auto;scroll-padding-top:24px}
body{margin:0;min-width:280px}
img,video{display:block;max-width:100%}
img{height:auto}
figure,p,h1,h2:where(#pellet-heading){margin:0}
a{color:inherit;text-underline-offset:.2em}
a:focus-visible{outline:3px solid var(--teal);outline-offset:6px}
.skip-link{position:fixed;top:12px;left:16px;z-index:20;padding:12px 18px;background:var(--cream);transform:translateY(-180%)}
.skip-link:focus{transform:none}
.phrase,.keep{display:inline-block;white-space:nowrap}
.film-track{height:100svh;position:relative;background:#f7eedb}
.film-stage{position:sticky;top:0;width:100%;height:100svh;overflow:hidden;background:#f7eedb;isolation:isolate}
.film-fallback,.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.film-fallback{z-index:0}
.film{z-index:1}
.film-floor{position:absolute;z-index:2;inset:auto 0 -1px;height:clamp(44px,7vh,88px);background:linear-gradient(180deg,transparent 0%,#f7efdf50 30%,#f7efdf 100%);pointer-events:none}
html[data-motion=normal] .film-track{height:calc(100svh + clamp(1400px,220svh,2600px))}
html[data-motion=normal] .film-track[data-media=fallback]{height:100svh}
.pellets{position:relative;isolation:isolate;margin-top:-1px;padding-top:clamp(74px,8vw,140px);overflow:clip;background:var(--cream)}
.courtyard{position:absolute;top:calc(-1 * clamp(74px,8vw,140px));bottom:calc(-1 * clamp(35px,4vw,74px));left:50%;width:100vw;transform:translateX(-50%);z-index:-2;background:url('media/courtyard-wall.webp') center top/cover no-repeat #f7efdf}
.courtyard::after{content:"";position:absolute;inset:60% 0 0;background:linear-gradient(180deg,transparent,#f9efdb66)}
.pellets::before{content:"";position:absolute;z-index:3;top:0;left:0;right:0;height:clamp(40px,7vw,110px);background:linear-gradient(#f7efdf,transparent);pointer-events:none}
.editorial{position:relative;z-index:auto;max-width:2160px;margin:0 auto;padding:0 var(--page-gutter)}
.pellet-intro{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,24%);gap:clamp(12px,2vw,42px);align-items:end}
.eyebrow{font-size:clamp(16px,1.45vw,25px);margin-bottom:clamp(12px,1.5vw,24px)}
h1,h2:where(#pellet-heading){font-size:clamp(48px,6.25vw,110px);font-weight:700;line-height:1.2}
.line-window{display:block;padding-block:.24em;margin-block:-.24em;overflow:hidden}
.title-line{display:block;white-space:nowrap}
.pellet-description{font-size:clamp(14px,1.22vw,22px);line-height:1.75;margin-top:clamp(20px,2vw,36px)}
.handwritten{align-self:center;padding:28px 0 0 0;transform:rotate(-8deg);font:400 clamp(18px,1.75vw,30px)/1.6 Sriracha,cursive}
.note-arrow{display:block;width:100%;height:auto;max-height:52px;margin-top:2px}
/* The stone plane belongs to the samples, so image cover cannot move its horizon
   through a dish. This anchor also works without JS and with reduced motion. */
.sample-floor{position:relative;margin-top:clamp(35px,4vw,74px)}
.sample-floor::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:calc(-1 * clamp(24px,3vw,64px));bottom:-180px;left:50%;width:100vw;transform:translateX(-50%);background:url('media/courtyard-floor.webp') center top/100% 100% no-repeat #f7efdf;mask-image:linear-gradient(to bottom,transparent,#000 24px)}
.samples{position:relative;z-index:2;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(2px,.5vw,12px);margin:0 calc(-1 * clamp(14px,2vw,40px))}
.sample{min-width:0;text-align:center}
.sample-photo{display:block;width:100%;aspect-ratio:1;border:4px solid var(--cream);border-radius:50%;background:var(--cream);box-shadow:0 5px 16px #58452a18;overflow:hidden}
.sample img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;transform:scale(1);transition:transform 1.2s cubic-bezier(.18,.67,.2,1);transition-delay:var(--reveal-delay,0ms)}
/* PA4 owns the replay state and stagger; only the real photo zooms inside its fixed rim. */
.sample.prepared:not(.shown) img{transform:scale(1.08);transition:none}
@media (hover:hover) and (pointer:fine){.sample:hover img{transform:scale(1.04)}}
.sample figcaption{font:400 clamp(17px,1.7vw,28px)/1.5 Sriracha,cursive;margin-top:12px;position:relative;padding-bottom:4px}
.sample-details{position:relative;z-index:2;display:grid;grid-template-columns:32% minmax(0,1fr);align-items:start;gap:clamp(20px,3vw,64px);margin-top:clamp(14px,1.8vw,34px)}
.macro{position:relative;z-index:4;width:100%;max-width:430px;border:4px solid var(--cream);border-radius:50%;background:var(--cream);box-shadow:0 5px 16px #58452a13;aspect-ratio:1;overflow:hidden}
.macro-drift{width:100%;max-width:430px;transform:translate3d(0,0,0)}
.macro-photo{width:100%;height:100%;border-radius:50%;object-fit:cover}
.contact-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(12px,1.6vw,28px);padding-top:clamp(35px,5vw,100px)}
.button{min-height:56px;display:inline-flex;gap:12px;align-items:center;justify-content:center;padding:15px clamp(20px,2vw,38px);border:1.5px solid var(--teal);border-radius:10px;text-decoration:none;font-size:clamp(15px,1.4vw,24px);font-weight:400;line-height:1.5;white-space:nowrap;transition:background-color .18s ease,box-shadow .18s ease}
.button svg{width:24px;height:24px;flex:0 0 24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.button-label{display:block;white-space:pre}
.button-solid{color:var(--cream);background:var(--teal)}
.button-outline{color:var(--teal);background:#FAFBEFE8}
.button:hover{box-shadow:0 5px 15px #1f4c5422}
.button-solid:hover{background:#173d44}
.button-outline:hover{background:var(--cream)}
.export{position:relative;z-index:1;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);margin-top:clamp(-104px,-7vw,-45px)}
/* The existing stone continues beneath the transparent top. Reach cream
   before that stone layer ends; no new rectangular backdrop starts here. */
.export::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,#FAFBEF00,var(--cream) 220px)}
.export-photo{--export-fade-top:clamp(80px,7vw,120px);--export-fade-bottom:clamp(96px,9vw,160px);--export-fade-side:clamp(24px,6vw,144px);grid-area:1/1;width:100%;max-width:2497px;margin-inline:auto;height:clamp(480px,44vw,720px);object-fit:cover;object-position:50% 43%;mask-image:linear-gradient(to bottom,transparent,#000 var(--export-fade-top),#000 calc(100% - var(--export-fade-bottom)),transparent),linear-gradient(to right,transparent,#000 var(--export-fade-side),#000 calc(100% - var(--export-fade-side)),transparent);mask-composite:intersect}
/* Caption shares the photograph's grid cell. Its full-width cream wash has
   no box edge; text starts after the wash reaches at least 90% opacity. */
.export-caption{position:relative;z-index:2;grid-area:1/1;align-self:end;display:block;text-align:center;padding:64px var(--page-gutter) clamp(24px,2.2vw,38px);line-height:1.6;background:linear-gradient(to bottom,#FAFBEF00,#FAFBEFE6 48px,#FAFBEFF5 100%)}
.export-eyebrow{font-size:clamp(16px,1.25vw,22px)}
.export-heading{margin:8px auto 22px;max-width:1000px;font-size:clamp(26px,2.5vw,44px);font-weight:600;line-height:1.3;word-break:normal}
.export-cta .button-label{white-space:normal}
.cycle-edge{height:clamp(60px,7vw,110px);background:var(--teal);position:relative;clip-path:polygon(0 13%,1% 10%,2.4% 15%,4% 9%,6% 12%,7.4% 7%,9.6% 13%,12% 9%,15% 14%,18% 7%,20% 12%,23% 8%,26% 14%,28% 7%,31% 12%,34% 8%,37% 14%,40% 9%,43% 13%,46% 7%,49% 11%,52% 8%,55% 14%,58% 10%,61% 13%,64% 6%,67% 12%,70% 8%,73% 13%,76% 9%,79% 14%,82% 7%,85% 13%,88% 9%,91% 13%,94% 8%,97% 12%,100% 9%,100% 100%,0 100%)}
.cycle-edge::after{content:"";position:absolute;inset:0;background:url('media/courtyard.webp') 40% 80%/cover;mix-blend-mode:soft-light;opacity:.17}
.ficus{position:absolute;z-index:5;pointer-events:none;width:clamp(260px,28vw,480px);max-width:none;filter:blur(.35px);transform:translate3d(0,0,0)}
.ficus-left{top:-35px;left:clamp(-152px,-8.4vw,-84px)}
.ficus-right{top:24%;right:clamp(-160px,-9.5vw,-98px);transform:translate3d(0,0,0) scaleX(-1)}
.reveal{opacity:1}
.reveal.prepared:not(.shown){opacity:0;transform:translateY(34px);transition:none}
.reveal.prepared.from-top:not(.shown){transform:translateY(-34px)}
.title-line.prepared:not(.shown){transform:translateY(125%)}
.title-line.prepared.from-top:not(.shown){transform:translateY(-125%)}
.reveal.prepared{transition:opacity .7s ease,transform .9s cubic-bezier(.18,.67,.2,1);transition-delay:var(--reveal-delay,0ms)}
.handwritten.prepared{transform:rotate(-8deg)}
.handwritten.prepared:not(.shown){transform:translateY(24px) rotate(-8deg)}
.handwritten.prepared.from-top:not(.shown){transform:translateY(-24px) rotate(-8deg)}
/* Wide screens keep the PA1 pixel cap, with a broad side transition. */
@media (min-width:2498px){.export-photo{--export-fade-side:160px}}
@media (max-aspect-ratio:7/5){.film-fallback,.film{object-fit:contain;object-position:50% 80%}}
@media (max-width:1100px){
 .pellet-intro{grid-template-columns:minmax(0,1fr) 190px;gap:12px}
 h1,h2:where(#pellet-heading){font-size:clamp(48px,6.25vw,69px)}
 .handwritten{font-size:18px}
 .button{padding-inline:20px;gap:9px;font-size:15px}
 .contact-actions{gap:12px}
}
@media (max-width:1023px){.samples{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:700px){
 :root{--page-gutter:24px}
 .pellets{padding-top:52px}
 .courtyard{top:-52px;bottom:-22px}
 .pellet-intro{display:block}
 h1,h2:where(#pellet-heading){font-size:clamp(23px,7vw,43px);line-height:1.2}
 .eyebrow{font-size:14px;margin-bottom:14px}
 .pellet-description{font-size:13px;margin-top:20px}
 .pellet-description .phrase{white-space:normal}
 .handwritten{width:max-content;max-width:100%;font-size:19px;margin:24px 0 4px auto;padding:0}
 .note-arrow{height:32px}
 .sample-floor{margin-top:22px}
 .samples{gap:15px 0;margin:0 -12px}
 .sample figcaption{font-size:18px;margin-top:10px}
 .sample-details{grid-template-columns:1fr;gap:20px;margin-top:32px}
 .macro-drift{width:210px;justify-self:center;grid-row:2;margin-bottom:32px}
 .contact-actions{padding:0;flex-direction:column;align-items:stretch;gap:14px;grid-row:1}
 .button{min-height:52px;font-size:16px;width:100%}
 .export{margin-top:-62px}
 .export-photo{height:560px;object-position:48% 50%}
 .export-caption{padding:64px 24px 20px}
 .ficus{width:240px}
 .ficus-left{left:-94px;top:-20px}
 .ficus-right{right:-110px;top:36%}
 .cycle-edge{height:56px}
 html[data-motion=normal] .film-track{height:calc(100svh + 1200px)}
}
@media (prefers-reduced-motion:reduce){
 .sample img{transform:none!important;transition:none!important}
 .reveal.prepared{opacity:1!important;transform:none!important;transition:none!important}
 .handwritten.prepared{transform:rotate(-8deg)!important}
 .macro-drift,.ficus{transition:none}
 html[data-motion=normal] .film-track{height:100svh}
}
html[data-motion=reduced] .sample img{transform:none!important;transition:none!important}
html[data-motion=reduced] .reveal{opacity:1!important;transform:none!important;transition:none!important}
html[data-motion=reduced] .handwritten{transform:rotate(-8deg)!important}
html[data-motion=reduced] .macro-drift{transform:none}
html[data-motion=reduced] .ficus-left{transform:none}
html[data-motion=reduced] .ficus-right{transform:scaleX(-1)}
.motion-debug{position:fixed;right:12px;bottom:12px;z-index:50;max-width:calc(100vw - 24px);padding:10px 12px;border-radius:6px;background:#1F4C54;color:#FAFBEF;font:12px/1.5 monospace;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none}

/* FIX-PL1: keep the origin phrase together and give desktop two complete lines. */
.export-heading{max-width:1100px}
.export-heading .export-origin{display:inline-block;white-space:nowrap}
@media(min-width:1024px){
 .export-heading .export-heading-intro{display:block}
 .export-heading .export-heading-tail{display:inline-block;white-space:nowrap}
}