/* Art direction and motion layers. All content is usable without this enhancement. */
:root { --header-height:126px; }
.section { scroll-margin-top:0; }
.hero { isolation:isolate; padding-top:64px; background:radial-gradient(ellipse at 76% 35%,#ded5a455,transparent 52%); }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.16; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23857b56' opacity='.2' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
.hero-copy { pointer-events:none; }
.hero-copy a { pointer-events:auto; }
.hero h1 { font-size:clamp(80px,10.8vw,165px); max-width:8ch; position:relative; }
.hero-period { color:var(--red); }
.hero-intro { max-width:43ch; font-size:17px; }
.hero .eyebrow { display:flex; align-items:center; gap:12px; }
.eyebrow-line { width:30px; height:1px; background:var(--red); flex-shrink:0; }
.hero-orbit { position:absolute; width:55vw; height:55vw; border:1px solid var(--line); border-radius:50%; right:-15vw; top:-10vw; opacity:.35; pointer-events:none; }
.hero-portal { position:absolute; top:64px; right:10%; width:31%; max-width:470px; z-index:0; }
.hero-portal>a { display:block; position:relative; height:clamp(370px,37vw,540px); border-radius:50% 50% 3px 3px; overflow:hidden; background:var(--forest); }
.hero-portal>a::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 35%,#14110ed9); pointer-events:none; }
.hero-portal img { width:100%; height:100%; object-fit:cover; object-position:57% center; display:block; }
.portal-caption { position:absolute; left:28px; right:28px; bottom:30px; z-index:1; color:var(--paper); font-family:var(--display); font-size:clamp(22px,2.1vw,32px); line-height:1.3; }
.portal-caption em { font-weight:400; }
.portal-arrow { position:absolute; right:0; bottom:0; font-family:var(--body); font-size:28px; }
.portal-note { display:block; font-size:9px; letter-spacing:.14em; margin-top:17px; text-align:center; }
.hero .bough { width:53%; right:-12%; top:-55px; z-index:2; }
.hero .bough svg { transform-origin:80% 30%; }
.story-invitation { align-items:center; font-size:12px; gap:14px; }
.scroll-cue { display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; height:44px; width:44px; font-size:19px; color:var(--red); }
.visit-strip { margin-top:54px; }
.button span { transition:transform .25s; }
.button:hover span { transform:translate(3px,-3px); }
.reading-progress { position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--red); transform:scaleX(0); transform-origin:left; pointer-events:none; }
.motion-toggle { position:fixed; z-index:36; bottom:20px; right:22px; padding:9px 15px; min-height:40px; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:24px; font-size:11px; box-shadow:0 2px 12px #14110e12; }
.motion-toggle::before { content:"◌"; font-size:16px; margin-right:6px; vertical-align:-1px; }
.motion-toggle:disabled { opacity:1; cursor:default; }
.arrival { position:relative; background:var(--paper); padding:35px 0 0; scroll-margin-top:var(--header-height); }
.arrival-stage { position:relative; min-height:680px; height:calc(100svh - var(--header-height)); color:var(--paper); overflow:hidden; isolation:isolate; background:var(--night); }
.arrival-image,.arrival-shade { position:absolute; inset:0; z-index:-1; }
.arrival-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 58%; }
.arrival-shade { background:linear-gradient(90deg,#14110eae,transparent 95%),linear-gradient(0deg,#14110eba,transparent 80%); }
.arrival-copy { padding-top:clamp(150px,22vh,280px); padding-bottom:120px; }
.arrival-copy h2 { font-size:clamp(52px,7.4vw,108px); max-width:12ch; text-transform:none; }
.arrival-copy .eyebrow { color:var(--paper); }
.arrival-copy p:not(.eyebrow) { margin-top:28px; font-size:17px; line-height:1.8; }
.arrival-link { display:inline-flex; gap:40px; margin-top:24px; align-items:center; padding:12px 0; font-size:13px; text-decoration:none; border-bottom:1px solid #f8e8c577; }
.arrival-caption { position:absolute; bottom:30px; left:var(--gutter); right:var(--gutter); display:flex; justify-content:space-between; font-size:10px; letter-spacing:.12em; }
body[data-page=home] .origin-section .wide-photo { display:none; }
body[data-page=home] .origin-section { padding-top:30px; }
.farm-section { padding-block:clamp(100px,13vw,180px); }
.farm-section .roots { width:86%; max-width:380px; }
.story-chapters { counter-reset:chapter; }
.story-chapters summary { padding-left:46px; }
.story-chapters summary::before { counter-increment:chapter; content:"0" counter(chapter); position:absolute; left:0; top:24px; font-family:var(--display); font-style:italic; font-weight:400; font-size:20px; color:var(--red); }
.story-chapters details>div { padding-left:46px; }
.sisters-section { overflow:clip; background:linear-gradient(130deg,var(--paper-deep),#e5d9b0); }
.sisters-art { position:relative; }
.sisters-art::before { content:""; position:absolute; inset:7% -12%; border:1px solid var(--line); border-radius:50%; transform:rotate(-15deg); pointer-events:none; }
.kitchen-section { overflow:hidden; }
.kitchen-section .bao-art { position:relative; }
.kitchen-section .bao-art::before { content:""; position:absolute; inset:-15%; border-radius:50%; background:radial-gradient(#85693938,transparent 65%); }
.tasting-section { background:#283629; overflow:hidden; padding-block:72px 80px; }
.tasting-heading { display:grid; grid-template-columns:1.25fr .75fr; column-gap:80px; align-items:end; }
.tasting-heading .eyebrow { grid-column:1/-1; color:#e8bc88; }
.tasting-heading h2 { text-transform:none; font-size:clamp(48px,4.8vw,70px); }
.tasting-heading>p:last-child { max-width:31ch; padding-bottom:10px; }
.tasting-choices { display:flex; margin-top:30px; border-top:1px solid #f8e8c540; border-bottom:1px solid #f8e8c540; }
.tasting-choices button { position:relative; flex:1; padding:18px 12px; font-family:var(--display); font-size:clamp(18px,2vw,28px); text-align:left; color:var(--paper); background:none; border:0; }
.tasting-choices button+button { border-left:1px solid #f8e8c540; padding-left:28px; }
.tasting-choices button span { font-family:var(--body); font-size:10px; display:inline-block; margin-right:16px; vertical-align:middle; opacity:.7; }
.tasting-choices button::after { content:""; position:absolute; bottom:-1px; height:3px; background:#e8bc88; left:0; right:0; transform:scaleX(0); transform-origin:left; transition:transform .35s; }
.tasting-choices button[aria-pressed=true]::after,.tasting-choices button:hover::after { transform:scaleX(1); }
.tasting-panel { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; min-height:420px; padding-top:30px; }
.tasting-panel+.tasting-panel { margin-top:30px; }
.tasting-copy h3 { font-size:clamp(42px,4.5vw,64px); line-height:1.08; letter-spacing:-.035em; }
.tasting-copy h3 em { font-weight:400; }
.tasting-copy>p:not(.eyebrow) { margin-top:24px; max-width:40ch; font-size:15px; line-height:1.85; }
.tasting-copy .button { margin-top:30px; border-color:#f8e8c580; color:var(--paper); }
.tasting-copy .button:hover { background:var(--paper); color:var(--forest); }
.tasting-art { position:relative; isolation:isolate; min-height:380px; display:grid; place-items:center; color:var(--ink); }
.plate-rings { position:absolute; z-index:-1; width:94%; aspect-ratio:1; max-width:380px; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 12px #e1cfab,inset 0 0 0 14px #bdac8966,inset 0 0 0 28px var(--paper),inset 0 0 0 29px #bdac8980,0 30px 60px #0003; }
.tasting-drawing { width:86%; transform:rotate(-7deg); }
.tasting-drawing svg { display:block; width:100%; height:auto; max-height:300px; }
.tasting-panel[data-tasting-panel=qin] .tasting-drawing { width:62%; transform:rotate(3deg); }
.tasting-panel[data-tasting-panel=sweet] .tasting-drawing { width:65%; transform:rotate(-12deg); }
.dish-note { position:absolute; bottom:-12px; right:5%; font-family:var(--display); font-style:italic; color:var(--paper); font-size:19px; transform:rotate(-6deg); }
.gallery-section { background:var(--night); color:var(--paper); overflow:hidden; }
.gallery-section .eyebrow { color:#efaa8b; }
.gallery-section .section-heading>p { color:var(--pale); }
.gallery-section .photo-grid { display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory; padding:12px 0 24px; scrollbar-width:thin; scrollbar-color:#cba255 #302b22; scroll-behavior:smooth; counter-reset:photo; }
.gallery-section .photo-card { flex:0 0 66%; scroll-snap-align:start; }
.gallery-section .photo-card:nth-child(even) { flex-basis:40%; }
.gallery-section .photo-card img,.gallery-section .photo-card:first-child img { height:clamp(310px,39vw,550px); width:100%; }
.gallery-section .photo-card figcaption { font-family:var(--display); font-size:22px; padding-top:20px; display:flex; gap:18px; align-items:baseline; }
.gallery-section .photo-card figcaption::before { counter-increment:photo; content:"0" counter(photo); font-family:var(--body); font-size:10px; color:#e8bc88; }
.gallery-section .photo-card a::after { border:1px solid #f8e8c577; background:#14110ec9; right:24px; bottom:24px; padding:12px 18px; }
.gallery-controls { display:flex; justify-content:space-between; align-items:center; margin-top:12px; gap:25px; }
.gallery-controls p { font-size:12px; color:var(--pale); }
.gallery-controls>div { display:flex; gap:10px; }
.gallery-controls button { width:48px; height:48px; border:1px solid #f8e8c566; border-radius:50%; background:none; color:var(--paper); font-size:22px; }
.gallery-controls button:disabled { opacity:.3; cursor:default; }
.gallery-controls button:not(:disabled):hover { background:var(--paper); color:var(--ink); }
.gallery-section .video-tour { border-color:#f8e8c540; margin-top:64px; }
.gallery-section .video-tour summary { font-size:clamp(26px,3vw,42px); padding-block:30px; }
.gallery-section .video-tour summary span,.gallery-section .video-tour p { color:var(--pale); }
.gallery-section .video-tour summary::after { top:30px; }
.gallery-section :focus-visible { outline-color:var(--paper); }
.photo-dialog[open] { animation:dialog-arrive .35s ease-out; }
.order-section { overflow:hidden; }
.order-section::after { content:""; position:absolute; pointer-events:none; width:600px; height:600px; border:1px solid #f8e8c522; border-radius:50%; bottom:-370px; left:-250px; }
@media(min-width:981px) {
 html[data-motion=on] .arrival { height:165svh; }
 html[data-motion=on] .arrival-stage { position:sticky; top:var(--header-height); }
 .story-grid>div:first-child { position:sticky; top:155px; align-self:start; }
}
@media(min-width:981px) and (max-width:1200px) { .hero-portal { right:8%; width:33%; } .hero-intro { max-width:35ch; } .hero .eyebrow { max-width:40ch; } }
@media(max-width:980px) {
 .hero { padding-top:38px; }
 .hero-portal { right:6%; top:95px; width:35%; }
 .hero-portal>a { height:380px; }
 .hero .bough { opacity:1; width:70%; top:-50px; right:-24%; }
 .hero-copy { padding-right:0; }
 .hero-intro { max-width:34ch; }
 .hero-intro br { display:none; }
 .hero h1 { font-size:clamp(74px,11vw,110px); }
 .hero .eyebrow { max-width:45ch; }
 .portal-caption { font-size:24px; left:22px; right:22px; }
 .portal-arrow { display:none; }
 .portal-note { font-size:8px; letter-spacing:.05em; }
 .arrival-stage { min-height:620px; }
 .arrival-copy { padding-top:140px; }
 .tasting-heading { gap:35px; }
 .tasting-panel { gap:30px; min-height:380px; }
 .tasting-art { min-height:330px; }
 .dish-note { bottom:0; }
 .tasting-copy .eyebrow { font-size:10px; }
 .gallery-section .photo-card { flex-basis:80%; }
 .gallery-section .photo-card:nth-child(even) { flex-basis:60%; }
}
@media(max-width:640px) {
 :root { --header-height:136px; }
 .hero { padding-top:32px; }
 .hero h1 { font-size:clamp(76px,17vw,106px); max-width:8ch; }
 .hero .eyebrow { font-size:10px; max-width:35ch; gap:8px; margin-bottom:28px; }
 .eyebrow-line { width:18px; }
 .hero-intro { max-width:35ch; font-size:15px; margin-top:28px; }
 .hero .bough { width:100%; right:-56%; top:-87px; opacity:.4; }
 .hero .bough svg { opacity:.72; }
 .hero-portal { position:relative; top:auto; right:auto; width:calc(100% - var(--gutter)*2); max-width:none; margin:40px auto 0; order:2; }
 .hero-portal>a { height:340px; border-radius:48% 48% 3px 3px; }
 .hero-portal img { object-position:center 58%; }
 .hero-portal .portal-caption { font-size:30px; }
 .portal-arrow { display:block; }
 .portal-note { font-size:8px; margin-top:12px; }
 .hero-copy { order:1; }
 .visit-strip { order:3; margin-top:28px; }
 .hero-orbit { width:110vw; height:110vw; right:-60vw; top:-40vw; }
 .story-invitation { margin-top:20px; }
 .hero .actions { gap:10px; }
 .hero .button { font-size:12px; padding:12px 16px; }
 .arrival { padding-top:0; }
 .arrival-stage { min-height:580px; height:80svh; max-height:780px; }
 .arrival-image img { object-position:58% center; }
 .arrival-copy { padding-top:var(--header-height); padding-bottom:110px; }
 .arrival-copy h2 { font-size:clamp(47px,11vw,70px); }
 .arrival-copy p:not(.eyebrow) { font-size:14px; max-width:30ch; }
 .arrival-copy br:not(h2 br) { display:none; }
 .arrival-caption { font-size:8px; gap:20px; bottom:25px; }
 .farm-section { padding-block:80px; }
 .tasting-heading { grid-template-columns:1fr; gap:0; }
 .tasting-heading h2 { font-size:clamp(44px,11vw,65px); }
 .tasting-heading>p:last-child { margin-top:22px; font-size:14px; }
 .tasting-choices { margin-top:30px; }
 .tasting-choices button { font-size:16px; padding:15px 7px; line-height:1.3; }
 .tasting-choices button+button { padding-left:12px; }
 .tasting-choices button span { display:block; margin-bottom:9px; }
 .tasting-panel { grid-template-columns:1fr; gap:32px; padding-top:30px; }
 .tasting-art { grid-row:1; min-height:300px; width:100%; max-width:340px; justify-self:center; }
 .plate-rings { max-width:285px; }
 .tasting-drawing { max-width:280px; }
 .tasting-drawing svg { max-height:230px; }
 .dish-note { bottom:-10px; font-size:17px; }
 .tasting-copy { padding-top:10px; }
 .tasting-copy h3 { font-size:43px; }
 .tasting-copy .eyebrow { font-size:10px; }
 .tasting-section { padding-bottom:70px; }
 .gallery-section .photo-card,.gallery-section .photo-card:nth-child(even) { flex-basis:90%; }
 .gallery-section .photo-card img,.gallery-section .photo-card:first-child img { height:360px; }
 .gallery-section .photo-card figcaption { font-size:20px; }
 .gallery-section .photo-grid { gap:18px; }
 .gallery-controls { gap:15px; }
 .gallery-controls p { max-width:20ch; }
 .motion-toggle { bottom:69px; right:12px; padding:6px 12px; min-height:36px; font-size:10px; }
}
@keyframes hero-enter { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
@keyframes orchard-reveal { from { clip-path:inset(0 0 100% 0); transform:rotate(-3deg); } to { clip-path:inset(0); transform:none; } }
@keyframes dialog-arrive { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:no-preference) {
 html[data-motion=on] .hero h1 { animation:hero-enter 1s .1s both; }
 html[data-motion=on] .hero-intro,html[data-motion=on] .hero .actions { animation:hero-enter 1s .3s both; }
 html[data-motion=on] .hero-portal { animation:hero-enter 1.2s .15s both; }
 html[data-motion=on] .bough { animation:orchard-reveal 1.6s ease-out both; }
 .bough .ln,.bough .tint { animation:none; }
}
html[data-motion=off] { scroll-behavior:auto; }
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
@media(prefers-reduced-motion:reduce) { .gallery-section .photo-grid { scroll-behavior:auto; } }
@media print { .motion-toggle,.reading-progress,.gallery-controls { display:none!important; } }