/* 플랜트미학 v3 — ART-DIRECTION.md / MOTION-SPEC.md */
:root{
  --plaster:#ECEAE4; --pebble:#F6F5F1; --moss:#1E2620; --moss-2:#2A332C; --leaf:#4A6B45;
  --glow:#F1E3C4; --ink:#1A1C19; --stone:#585B55; --line:rgba(26,28,25,.14); --line-d:rgba(246,245,241,.18);
  --serif:'Mihak Serif','Noto Serif KR','Nanum Myeongjo',serif;
  --sans:'Mihak Sans','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --gutter:clamp(20px,4.5vw,72px); --max:1560px; --gap:clamp(14px,2vw,32px);
  --header-h:76px;
  --ease-settle:cubic-bezier(.2,.75,.15,1); --ease-glide:cubic-bezier(.6,0,.2,1);
  --t-micro:220ms; --t-el:480ms; --t-scene:760ms; --t-route:620ms;
  color-scheme:light;
}
@media (max-width:899px){:root{--header-h:64px}}
*,*::before,*::after{box-sizing:border-box}
a,button{-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--plaster);color:var(--ink);font:400 17px/1.8 var(--sans);word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (max-width:899px){body{font-size:16px;line-height:1.75}}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{list-style:none;padding:0}
address{font-style:normal}
small{font-size:.78em}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--glow);border-radius:2px}
.on-dark :focus-visible,.scenes :focus-visible,.cta :focus-visible,.site-footer :focus-visible,.lightbox :focus-visible{outline-color:var(--pebble);box-shadow:0 0 0 6px rgba(241,227,196,.35)}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--pebble);padding:12px 18px;text-decoration:none;transition:top var(--t-micro)}
.skip:focus{top:12px}
@media (max-width:899px){.br-d{display:none}}

/* column guides — echo of the slat lights */
.guides{position:fixed;inset:0 0 0 0;z-index:0;pointer-events:none;display:grid;grid-template-columns:repeat(6,1fr);max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.guides i{border-left:1px solid rgba(26,28,25,.045)}
.guides i:first-child{border-left:0}
@media (max-width:899px){.guides{display:none}}
main,.site-footer,.site-header{position:relative;z-index:1}

/* ---------- type roles ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.04em;color:var(--stone);font-weight:500}
.dot{width:7px;height:7px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 4px rgba(74,107,69,.14)}
.sec-index{display:flex;align-items:baseline;gap:14px;font:500 13px/1.4 var(--sans);letter-spacing:.06em;color:var(--stone)}
.sec-index span{font-variant-numeric:tabular-nums;color:var(--ink)}
.scenes .sec-index,.cta .sec-index{color:rgba(246,245,241,.7)}
.scenes .sec-index span{color:var(--glow)}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.18}
.lines .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.lines .ln>span{display:inline-block}

/* ---------- buttons & links (vertical fill = the "rise" grammar) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:0 26px;font:500 15px/1 var(--sans);letter-spacing:.01em;text-decoration:none;color:var(--pebble);background:var(--moss);overflow:hidden;isolation:isolate;border-radius:1px;transition:color var(--t-micro) var(--ease-settle)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--leaf);clip-path:inset(100% 0 0 0);transition:clip-path var(--t-el) var(--ease-settle)}
.btn i{font-style:normal;transition:transform var(--t-micro) var(--ease-settle)}
.btn:hover::before,.btn:focus-visible::before{clip-path:inset(0 0 0 0)}
.btn:hover i,.btn:focus-visible i{transform:translateX(4px)}
.btn:active{transform:scale(.985)}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px}
.btn.on-dark{background:var(--glow);color:var(--moss)}
.btn.on-dark::before{background:var(--pebble)}
.link-line{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:44px;font:500 15px/1.3 var(--sans);text-decoration:none}
.link-line>span{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:4px}
.link-line>span::after{content:"";display:block}
.link-line i{font-style:normal;transition:transform var(--t-micro) var(--ease-settle)}
.link-line>span{position:relative}
.link-line>span::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--leaf);transform:scaleX(0);transform-origin:left;transition:transform var(--t-el) var(--ease-settle)}
.link-line:hover>span::before,.link-line:focus-visible>span::before,a:hover .link-line.as-label>span::before,a:focus-visible .link-line.as-label>span::before{transform:scaleX(1)}
.link-line:hover i,.link-line:focus-visible i,a:hover .as-label i,a:focus-visible .as-label i{transform:translateX(5px)}
.link-line.on-dark>span::before{background:var(--glow)}
.link-line.on-dark{color:var(--pebble)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);background:rgba(236,234,228,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color var(--t-el),background-color var(--t-el);view-transition-name:site-header}
.site-header.is-scrolled{background:rgba(236,234,228,.96);border-bottom-color:var(--line)}
.header-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;flex-direction:column;gap:2px;text-decoration:none;min-height:44px;justify-content:center}
.brand-name{font:600 21px/1.1 var(--serif);letter-spacing:-.01em}
.brand-sub{font-size:12px;line-height:1.3;color:var(--stone);letter-spacing:.02em}
.brand-sub b{font-weight:400;color:var(--leaf)}
.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px)}
.nav-link{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;text-decoration:none}
.nav-link::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t-el) var(--ease-settle)}
.nav-link:hover::after,.nav-link:focus-visible::after,.nav-link[aria-current=page]::after{transform:scaleX(1)}
.nav-link[aria-current=page]::after{background:var(--leaf);height:2px}
.menu-toggle{display:none;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 4px;font-size:14px;font-weight:500}
.menu-icon{position:relative;width:22px;height:12px}
.menu-icon i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform var(--t-el) var(--ease-glide),top var(--t-el) var(--ease-glide)}
.menu-icon i:first-child{top:0}.menu-icon i:last-child{top:10px}
.menu-open .menu-icon i:first-child{top:5px;transform:rotate(45deg)}
.menu-open .menu-icon i:last-child{top:5px;transform:rotate(-45deg)}
@media (max-width:899px){
  .nav{display:none}
  .menu-toggle{display:inline-flex}
  .brand-name{font-size:19px}
  .brand-sub{font-size:11px}
}

/* mobile menu — slats close down like blinds */
.mobile-menu{position:fixed;inset:var(--header-h) 0 0 0;z-index:49;visibility:hidden;pointer-events:none;transition:visibility 0s linear 640ms;color:var(--pebble)}
.menu-open .mobile-menu{visibility:visible;pointer-events:auto;transition-delay:0s}
.menu-slats{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}
.menu-slats i{background:var(--moss);transform:scaleY(0);transform-origin:top;transition:transform 520ms var(--ease-glide)}
.menu-slats i:nth-child(2){transition-delay:40ms}.menu-slats i:nth-child(3){transition-delay:80ms}.menu-slats i:nth-child(4){transition-delay:120ms}
.menu-open .menu-slats i{transform:scaleY(1)}
.menu-list{position:relative;padding:32px var(--gutter) 0;display:grid;gap:4px}
.menu-list a,.menu-list button{display:flex;align-items:baseline;gap:16px;width:100%;min-height:56px;padding:8px 0;font:500 clamp(26px,7.4vw,34px)/1.3 var(--serif);text-decoration:none;text-align:left;border-bottom:1px solid var(--line-d);opacity:0;transform:translateY(18px);transition:opacity 260ms,transform 260ms var(--ease-settle)}
.menu-list span{font:500 12px/1 var(--sans);color:var(--glow);letter-spacing:.06em;transition:transform var(--t-micro) var(--ease-settle)}
.menu-list a:hover span,.menu-list a:focus-visible span,.menu-list button:hover span,.menu-list button:focus-visible span{transform:translateX(6px)}
.menu-list [aria-current=page]{color:var(--glow)}
.menu-open .menu-list a,.menu-open .menu-list button{opacity:1;transform:none;transition:opacity 420ms var(--ease-settle),transform 520ms var(--ease-settle)}
.menu-open .menu-list li:nth-child(1) *{transition-delay:200ms}.menu-open .menu-list li:nth-child(2)>*{transition-delay:250ms}.menu-open .menu-list li:nth-child(3)>*{transition-delay:300ms}.menu-open .menu-list li:nth-child(4)>*{transition-delay:350ms}.menu-open .menu-list li:nth-child(5)>*{transition-delay:400ms}
.menu-open .menu-list li *>span{transition-delay:0s}
.menu-foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:max(24px,env(safe-area-inset-bottom));font-size:13px;color:rgba(246,245,241,.7);opacity:0;transition:opacity 260ms}
.menu-open .menu-foot{opacity:1;transition:opacity 400ms 420ms}
@media (min-width:900px){.mobile-menu{display:none}}

/* ---------- frames & slat reveal ---------- */
.frame{position:relative;overflow:hidden;background:var(--pebble) linear-gradient(90deg,transparent 0 calc(20% - 1px),rgba(26,28,25,.04) calc(20% - 1px) 20%) 0 0/100% 100%}
.frame img{width:100%;height:100%;object-fit:cover}
.slats{position:absolute;inset:0;z-index:2;display:grid;pointer-events:none}
.slats i{background:var(--plaster);transform-origin:top;transform:scaleY(1)}
.slats i::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--glow)}
.slats i{position:relative}
.slat-frame.is-open .slats i{transform:scaleY(0);transition:transform 900ms var(--ease-glide)}
.slat-frame.is-open img{transform:scale(1);transition:transform 1400ms var(--ease-settle)}
.slat-frame.is-pending img{transform:scale(1.06)}
.slat-frame.is-done .slats{display:none}
.scenes .slats i,.cta .slats i{background:var(--moss)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);min-height:calc(100svh - var(--header-h));padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(32px,4vw,56px)}
.hero-copy{grid-column:1/6;align-self:end;display:grid;gap:28px;padding-bottom:12px}
.hero h1{font-size:clamp(2.5rem,4.6vw,5.1rem);line-height:1.14}
.hero-lead{font-size:clamp(16px,1.25vw,19px);color:var(--stone);max-width:30em}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:6px}
.hero-figure{grid-column:6/13;display:grid;gap:14px}
.hero-figure .frame{height:clamp(480px,calc(100svh - var(--header-h) - 120px),900px)}
.hero-figure img{object-position:50% 38%}
figcaption{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;line-height:1.5;color:var(--stone)}
.cap-no{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500}
.cap-note{margin-left:auto}
@media (max-width:899px){
  .hero{display:flex;flex-direction:column;min-height:0;gap:32px;padding-top:28px}
  .hero-copy{gap:20px;padding:0}
  .hero h1{font-size:clamp(2.15rem,10.4vw,2.9rem)}
  .hero-figure .frame{height:auto;aspect-ratio:4/5}
  .cap-note{margin-left:0}
}

/* ---------- section heads ---------- */
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:20px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.sec-head .sec-index{grid-column:1/-1}
.sec-head h2{grid-column:1/7;font-size:clamp(2.1rem,3.8vw,4rem)}
.sec-lead{grid-column:8/12;font-size:16px}
@media (max-width:899px){.sec-head{display:flex;flex-direction:column;align-items:flex-start}}

/* ---------- scenes (dark) ---------- */
.scenes{background:var(--moss);color:var(--pebble);padding:clamp(88px,10vw,160px) 0}
.scenes .sec-lead{color:rgba(246,245,241,.74)}
.scene-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
.scene-stage{grid-column:1/7;position:relative;height:clamp(480px,78vh,820px);overflow:hidden;background:var(--moss-2)}
.scene-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0)}
.scene-stage img[data-scene-img="0"]{object-position:50% 80%}
.scene-stage img.is-active,.scene-stage img.is-under{clip-path:inset(0 0 0 0)}
.scene-stage img.is-under{z-index:1}.scene-stage img.is-active{z-index:2}
.scene-count{position:absolute;z-index:3;left:18px;bottom:16px;display:flex;align-items:flex-end;gap:8px;font:500 14px/1 var(--sans);color:var(--pebble);font-variant-numeric:tabular-nums;padding:8px 12px;background:rgba(30,38,32,.6);backdrop-filter:blur(6px)}
.roll{display:block;height:1em;overflow:hidden}
.roll span{display:block;height:1em;transform:translateY(calc(var(--i,0) * -100%));transition:transform var(--t-scene) var(--ease-glide)}
.of{opacity:.6}
.scene-panel{grid-column:8/13;display:grid;gap:36px;align-content:start;padding-top:8px}
.scene-tabs{position:relative;display:grid;border-top:1px solid var(--line-d)}
.scene-tabs button{position:relative;display:grid;grid-template-columns:44px 1fr auto;align-items:center;min-height:72px;padding:12px 0 12px 22px;text-align:left;border-bottom:1px solid var(--line-d);color:rgba(246,245,241,.55);transition:color var(--t-el) var(--ease-settle)}
.scene-tabs .no{font:500 12px/1 var(--sans);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.scene-tabs .tt{font:500 clamp(20px,1.7vw,26px)/1.3 var(--serif);transition:transform var(--t-el) var(--ease-settle)}
.scene-tabs i{font-style:normal;opacity:0;transform:translateX(-8px);transition:opacity var(--t-micro),transform var(--t-el) var(--ease-settle)}
.scene-tabs button:hover,.scene-tabs button:focus-visible,.scene-tabs button[aria-selected=true]{color:var(--pebble)}
.scene-tabs button:hover .tt,.scene-tabs button:focus-visible .tt{transform:translateX(6px)}
.scene-tabs button[aria-selected=true] i,.scene-tabs button:hover i,.scene-tabs button:focus-visible i{opacity:1;transform:none}
.scene-tabs button[aria-selected=true] .no{color:var(--glow)}
.scene-tabs button:active .tt{transform:translateX(3px) scale(.99)}
.tab-mark{position:absolute;left:0;top:0;width:2px;height:calc(100% / 3);background:var(--glow);transform:translateY(calc(var(--i,0) * 100%));transition:transform var(--t-scene) var(--ease-glide);box-shadow:0 0 14px rgba(241,227,196,.55)}
.scene-panels{min-height:9.5em}
.scene-text{display:grid;gap:14px}
.scene-text p{color:rgba(246,245,241,.86);max-width:30em}
.scene-text .kicker{font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--glow)}
.scene-text.is-entering{animation:text-rise 520ms var(--ease-settle) both}
@keyframes text-rise{from{opacity:0;transform:translateY(14px)}}
.facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 36px;padding-top:22px;border-top:1px solid var(--line)}
.facts.on-dark{border-top-color:var(--line-d)}
.facts dt{font-size:12px;color:var(--stone);letter-spacing:.04em}
.facts.on-dark dt{color:rgba(246,245,241,.6)}
.facts dd{font-size:15px;font-weight:500}
.facts small{font-weight:400;color:var(--stone);margin-left:4px}
.facts.on-dark small{color:rgba(246,245,241,.6)}
@media (max-width:899px){
  .scene-grid{display:flex;flex-direction:column;gap:28px}
  .scene-stage{height:auto;aspect-ratio:4/5;width:100%}
  .scene-panel{gap:26px;width:100%}
  .scene-tabs button{min-height:60px;grid-template-columns:36px 1fr auto;padding-left:16px}
  .facts{grid-template-columns:repeat(2,auto);gap:10px 28px}
}

/* ---------- material ---------- */
.material{padding:clamp(88px,10vw,160px) 0 clamp(64px,8vw,120px)}
.material-figure .frame{height:clamp(300px,60vh,640px);width:100%}
.material-figure img{object-position:50% 88%}
.material-body{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);margin-top:28px}
.material-body h2{grid-column:1/4;font-family:var(--sans);letter-spacing:.06em}
.material-list{grid-column:4/13;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.material-list li{display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--line);position:relative}
.material-list li::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 900ms var(--ease-settle)}
.material-list.is-in li::before{transform:scaleX(1)}
.material-list.is-in li:nth-child(2)::before{transition-delay:120ms}.material-list.is-in li:nth-child(3)::before{transition-delay:240ms}
.material-list b{font:500 28px/1.2 var(--serif)}
.material-list span{font-size:15px;color:var(--stone)}
@media (max-width:899px){.material-body{display:flex;flex-direction:column;gap:20px}.material-list{grid-template-columns:1fr;gap:18px}.material-figure .frame{aspect-ratio:4/3;height:auto}}

/* ---------- approach ---------- */
.approach{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:56px;padding-bottom:clamp(88px,10vw,160px)}
.approach-head{grid-column:1/6;display:grid;gap:22px;align-content:start;position:sticky;top:calc(var(--header-h) + 40px);align-self:start}
.approach-head h2{font-size:clamp(2rem,3.2vw,3.4rem)}
.approach-list{grid-column:7/13;display:grid}
.approach-list li{display:grid;grid-template-columns:56px 1fr;column-gap:8px;row-gap:10px;padding:30px 0;border-top:1px solid var(--line)}
.approach-list .no{grid-row:span 2;font:500 13px/2.2 var(--sans);color:var(--leaf);font-variant-numeric:tabular-nums}
.approach-list h3{font:500 24px/1.35 var(--serif)}
.approach-list p{color:var(--stone)}
.scope{grid-column:7/13;padding:28px 30px;background:var(--pebble);display:grid;gap:14px}
.scope-label{font-size:13px;font-weight:600;letter-spacing:.04em}
.scope-label small{font-weight:400;color:var(--stone);margin-left:8px}
.scope ul{display:grid;gap:4px}
.scope li{font:500 19px/1.6 var(--serif)}
.scope-note{font-size:13px;color:var(--stone)}
@media (max-width:899px){.approach{display:flex;flex-direction:column;gap:32px}.approach-head{position:static}.approach-list li{grid-template-columns:44px 1fr;padding:24px 0}.approach-list h3{font-size:21px}.scope{padding:22px 20px}}

/* ---------- teaser ---------- */
.teaser{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end;padding-bottom:clamp(88px,10vw,160px)}
.teaser-copy{grid-column:1/6;display:grid;gap:20px}
.teaser-copy h2{font-size:clamp(1.9rem,2.8vw,3rem)}
.teaser-copy p{color:var(--stone)}
.teaser-strip{grid-column:7/13;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);align-items:end}
.teaser-strip .frame{aspect-ratio:3/4}
.teaser-strip .frame:nth-child(2){transform:translateY(-48px)}
@media (max-width:899px){.teaser{display:flex;flex-direction:column;align-items:stretch;gap:36px}.teaser-strip .frame:nth-child(2){transform:translateY(-20px)}}

/* ---------- CTA ---------- */
.cta{background:var(--moss);color:var(--pebble);padding:clamp(88px,10vw,150px) 0}
.cta-in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:36px;align-items:end}
.cta h2{grid-column:1/8;font-size:clamp(2.1rem,4vw,4.4rem)}
.cta-side{grid-column:9/13;display:grid;gap:24px;justify-items:start}
.cta-side p{color:rgba(246,245,241,.78)}
@media (max-width:899px){.cta-in{display:flex;flex-direction:column;align-items:flex-start}}

/* ---------- footer ---------- */
.site-footer{background:var(--moss);color:rgba(246,245,241,.78);border-top:1px solid var(--line-d);padding:48px 0 calc(40px + env(safe-area-inset-bottom))}
.footer-in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:20px;font-size:14px}
.footer-in .brand-name{grid-column:1/4;color:var(--pebble);font-size:22px}
.footer-in address{grid-column:4/8}
.footer-links{grid-column:8/13;display:flex;flex-wrap:wrap;gap:4px 24px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;gap:6px}
.footer-links a:hover,.footer-links a:focus-visible{color:var(--glow)}
.footer-links i{font-style:normal}
.footer-note{grid-column:1/-1;font-size:12px;color:rgba(246,245,241,.6);padding-top:20px;border-top:1px solid var(--line-d)}
@media (max-width:899px){.footer-in{display:flex;flex-direction:column;gap:10px}}

/* ---------- dialog base (lightbox) ---------- */
dialog{border:0;padding:0;max-width:none;max-height:none;color:inherit}
.dialog-close{position:absolute;right:16px;top:16px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;font-size:14px}
.dialog-close i{font-style:normal;font-size:20px;transition:transform var(--t-el) var(--ease-settle)}
.dialog-close:hover i,.dialog-close:focus-visible i{transform:rotate(90deg)}

/* ---------- contact page ---------- */
.prep-sec{padding-bottom:clamp(72px,9vw,140px)}
.prep-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:28px}
.prep-list li{position:relative;display:grid;gap:10px;align-content:start;padding-top:20px}
.prep-list li::after{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 900ms var(--ease-settle)}
.prep-list.is-in li::after{transform:scaleX(1)}
.prep-list.is-in li:nth-child(2)::after{transition-delay:120ms}.prep-list.is-in li:nth-child(3)::after{transition-delay:240ms}
.prep-list .no{font:500 13px/1 var(--sans);color:var(--leaf);font-variant-numeric:tabular-nums}
.prep-list h3{font:500 clamp(1.3rem,1.8vw,1.7rem)/1.35 var(--serif)}
.prep-list p{color:var(--stone);font-size:16px}
@media (max-width:899px){.prep-list{grid-template-columns:1fr;gap:28px}}
.channels-sec{background:var(--moss);color:var(--pebble);padding:clamp(80px,9vw,140px) 0}
.channels-in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:40px;align-items:end}
.channel-figure{grid-column:1/5;display:grid;gap:12px}
.channel-figure .frame{aspect-ratio:3/4}
.channel-figure figcaption{color:rgba(246,245,241,.7)}
.channel-figure .cap-no{color:var(--glow)}
.channel-body{grid-column:6/13;display:grid;gap:32px}
.channel-body h2{font-size:clamp(2rem,3.6vw,3.8rem)}
.channel-list{border-top:1px solid var(--line-d)}
.channel{position:relative;display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:8px 20px;min-height:88px;padding:16px 20px 16px 0;text-decoration:none;border-bottom:1px solid var(--line-d);isolation:isolate;overflow:hidden;transition:color var(--t-el) var(--ease-settle),padding-left var(--t-el) var(--ease-settle)}
.channel::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--glow);clip-path:inset(100% 0 0 0);transition:clip-path var(--t-el) var(--ease-settle)}
.channel:hover,.channel:focus-visible{color:var(--moss);padding-left:20px}
.channel:hover::before,.channel:focus-visible::before{clip-path:inset(0 0 0 0)}
.channel:active{transform:scale(.99)}
.ch-k{font-size:13px;letter-spacing:.04em;opacity:.75}
.ch-t{font:500 clamp(1.25rem,2vw,1.8rem)/1.3 var(--serif)}
.channel i{font-style:normal;font-size:20px;transition:transform var(--t-micro) var(--ease-settle)}
.channel:hover i,.channel:focus-visible i{transform:translate(4px,-4px)}
.channel-note{font-size:14px;color:rgba(246,245,241,.7)}
@media (max-width:899px){.channels-in{display:flex;flex-direction:column-reverse;align-items:stretch}.channel-figure{width:72%}.channel{grid-template-columns:1fr auto;padding-right:8px}.ch-k{grid-column:1/-1}.ch-t{grid-row:2}.channel i{grid-row:2}}
.scope-sec{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(40px,4vw,64px) var(--gap);padding-top:clamp(80px,9vw,140px);padding-bottom:clamp(88px,10vw,160px)}
.scope-col{display:grid;gap:22px;align-content:start}
.scope-big li{font:500 clamp(1.2rem,1.6vw,1.45rem)/1.6 var(--serif);padding:6px 0}
.way-list li a{display:grid;grid-template-columns:36px 1fr auto;gap:8px;align-items:baseline;min-height:56px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none}
.way-list .no{font-size:12px;color:var(--leaf);font-variant-numeric:tabular-nums}
.way-list i{font-style:normal;transition:transform var(--t-micro) var(--ease-settle)}
.way-list a>span:nth-child(2){background:linear-gradient(var(--leaf),var(--leaf)) 0 100%/0 1px no-repeat;transition:background-size var(--t-el) var(--ease-settle)}
.way-list a:hover>span:nth-child(2),.way-list a:focus-visible>span:nth-child(2){background-size:100% 1px}
.way-list a:hover i,.way-list a:focus-visible i{transform:translateX(5px)}
.addr{font:500 clamp(1.2rem,1.6vw,1.45rem)/1.6 var(--serif)}
@media (max-width:899px){.scope-sec{grid-template-columns:1fr}}

/* ---------- archive ---------- */
.page-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:24px;padding-top:clamp(48px,7vw,110px);padding-bottom:clamp(48px,6vw,96px)}
.page-head .sec-index{grid-column:1/-1}
.page-head h1{grid-column:1/8;font-size:clamp(2.5rem,5vw,5.4rem)}
.page-lead{grid-column:8/13;align-self:end;color:var(--stone)}
@media (max-width:899px){.page-head{display:flex;flex-direction:column}}
.label-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font:600 14px/1.4 var(--sans);letter-spacing:.04em;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.label-row .count{font-weight:400;color:var(--stone);font-variant-numeric:tabular-nums}
.cases{padding-bottom:clamp(72px,9vw,140px)}
.case-card{margin-top:28px}
.case-link{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:24px;text-decoration:none;align-items:end}
.case-link .frame{grid-column:1/7;aspect-ratio:4/5}
.case-link .frame img{object-position:50% 40%;transition:transform 900ms var(--ease-settle)}
.case-link:hover .frame img,.case-link:focus-visible .frame img{transform:scale(1.035)}
.case-link:active .frame{transform:scale(.992)}
.card-body{grid-column:8/13;display:grid;gap:18px;padding-bottom:8px}
.case-no{font-size:13px;color:var(--leaf);font-weight:500;letter-spacing:.04em}
.card-body h3{font:500 clamp(1.7rem,2.6vw,2.6rem)/1.25 var(--serif);letter-spacing:-.015em}
.case-desc{color:var(--stone)}
.card-body .facts{grid-template-columns:repeat(2,auto)}
@media (max-width:899px){.case-link{display:flex;flex-direction:column;align-items:stretch}.case-link .frame{aspect-ratio:4/5}}
/* five cases: lead card + two-column grid */
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(48px,6vw,96px) var(--gap);margin-top:clamp(64px,8vw,120px)}
.case-grid .case-link{display:grid;grid-template-columns:1fr;row-gap:20px;align-items:start}
.case-grid .case-link .frame{grid-column:auto;aspect-ratio:4/5}
.case-grid .card-body{grid-column:auto;gap:14px}
.case-grid .card-body h3{font-size:clamp(1.4rem,1.9vw,1.9rem)}
.case-grid .case-card:nth-child(even){margin-top:clamp(0px,8vw,120px)}
.case-card.is-native .frame{aspect-ratio:616/412;background:var(--moss-2)}
.case-card.is-native .frame img{object-fit:contain;max-width:616px;margin-inline:auto}
@media (max-width:899px){.case-grid{grid-template-columns:1fr;gap:56px}.case-grid .case-card:nth-child(even){margin-top:0}}
.photo.pano{grid-column:1/-1!important;margin-top:0!important}
.photo.pano .frame{aspect-ratio:auto}
.photo.pano .frame img{height:auto}
.pair .photo.pano{grid-column:1/-1}
.case-hero.is-native .frame,.case-hero.is-native .hero-photo{height:auto;width:min(100%,616px);aspect-ratio:616/412;margin-inline:auto}
.case-hero.is-native .hero-photo .frame{width:100%}
.case-hero.is-native img{object-fit:contain}
.case-hero .hero-photo{display:block}
.case-hero.is-native .frame{animation:none!important}
.pending{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.pending li{display:grid;grid-template-columns:72px 1fr auto auto;align-items:center;gap:16px;min-height:64px;border-bottom:1px solid var(--line);font-size:15px}
.p-no{font-size:12px;color:var(--stone);letter-spacing:.06em}
.p-title b{font-weight:500;font-variant-numeric:tabular-nums}
.p-state{font-size:13px;color:var(--stone)}
.pending a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font-size:14px;font-weight:500;text-decoration:none}
.pending a i{font-style:normal;transition:transform var(--t-micro) var(--ease-settle)}
.pending a:hover i,.pending a:focus-visible i{transform:translate(3px,-3px)}
.pending-note{margin-top:16px;font-size:13px;color:var(--stone)}
@media (max-width:899px){.pending li{grid-template-columns:1fr auto;gap:2px 12px;padding:10px 0}.p-no{display:none}.p-state{grid-row:2;grid-column:1}.pending a{grid-row:1/3;grid-column:2}}

.index{padding-bottom:clamp(88px,10vw,160px)}
.index-head{display:grid;gap:20px;margin-bottom:32px}
.index-lead{color:var(--stone);max-width:36em}
.filters{position:relative;display:flex;flex-wrap:wrap;gap:8px}
.filters button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;font-size:14px;font-weight:500;border:1px solid var(--line);border-radius:999px;transition:color var(--t-el) var(--ease-settle),border-color var(--t-el)}
.filters button small{font-size:12px;color:var(--stone);transition:color var(--t-el)}
.filters button:hover,.filters button:focus-visible{border-color:var(--ink)}
.filters button[aria-pressed=true]{color:var(--pebble);border-color:transparent}
.filters button[aria-pressed=true] small{color:var(--glow)}
.filters button:active{transform:scale(.97)}
.filter-mark{position:absolute;z-index:0;left:0;top:0;border-radius:999px;background:var(--moss);width:var(--w,0);height:var(--h,0);transform:translate(var(--x,0),var(--y,0));transition:transform var(--t-scene) var(--ease-glide),width var(--t-scene) var(--ease-glide),height var(--t-scene) var(--ease-glide)}
.no-mark .filters button[aria-pressed=true]{background:var(--moss)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);align-items:start}
.tile[hidden]{display:none}
.tile.t-wide{grid-column:span 2}
.tile a{display:grid;gap:12px;text-decoration:none}
.tile .frame{aspect-ratio:3/4}
.tile.t-wide .frame{aspect-ratio:auto;height:100%}
.tile.t-wide a{grid-template-rows:1fr auto;height:100%}
.tile .frame img{transition:transform 900ms var(--ease-settle)}
.tile a:hover .frame img,.tile a:focus-visible .frame img{transform:scale(1.04)}
.tile a:active .frame{transform:scale(.985)}
.tile p{display:flex;gap:10px;font-size:14px;line-height:1.4;font-weight:500;position:relative;padding-bottom:6px}
.tile p::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--leaf);transform:scaleX(0);transform-origin:left;transition:transform var(--t-el) var(--ease-settle)}
.tile a:hover p::after,.tile a:focus-visible p::after{transform:scaleX(1)}
.tile p span{font-weight:400;color:var(--leaf);font-size:12px;padding-top:2px}
.tile a:focus-visible{outline-offset:6px}
.tile{view-transition-class:tile}
.index-note{margin-top:28px;font-size:13px;color:var(--stone)}
@media (max-width:899px){.tiles{grid-template-columns:repeat(2,1fr);gap:22px 12px}.tile.t-wide .frame{aspect-ratio:3/2;height:auto}.tile p{font-size:13px}}
.tile.is-in{animation:tile-in 640ms var(--ease-settle) both}
@keyframes tile-in{from{opacity:0;transform:translateY(24px)}}

/* ---------- project ---------- */
.progress{position:fixed;left:0;right:0;top:var(--header-h);height:2px;z-index:51;pointer-events:none}
.progress i{display:block;height:100%;background:var(--leaf);transform-origin:left;transform:scaleX(0)}
@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){.progress i{animation:progress linear both;animation-timeline:scroll(root)}}}
@keyframes progress{to{transform:scaleX(1)}}
.case-head{display:grid;gap:22px;padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(32px,4vw,56px)}
.back-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;font-weight:500;text-decoration:none;justify-self:start}
.back-link i{font-style:normal;transition:transform var(--t-micro) var(--ease-settle)}
.back-link:hover i,.back-link:focus-visible i{transform:translateX(-5px)}
.back-link span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--t-el) var(--ease-settle)}
.back-link:hover span,.back-link:focus-visible span{background-size:100% 1px}
.case-head h1{font-size:clamp(2.3rem,5vw,5.2rem)}
.case-hero .frame{height:clamp(380px,74vh,780px)}
.case-hero img{object-position:50% 36%}
.case-facts{grid-template-columns:repeat(5,auto);gap:10px 48px;margin-top:22px;border-top:0;padding-top:0}
@media (max-width:899px){.case-hero .frame{height:auto;aspect-ratio:4/5}.case-facts{grid-template-columns:repeat(2,auto);gap:12px 28px}}
.case-body{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);padding-top:clamp(64px,8vw,120px)}
.chapters{grid-column:1/3;position:sticky;top:calc(var(--header-h) + 36px);align-self:start;display:grid;border-left:1px solid var(--line);padding-left:0}
.chapters a{position:relative;display:flex;gap:12px;align-items:center;min-height:44px;padding-left:18px;font-size:14px;font-weight:500;text-decoration:none;color:var(--stone);transition:color var(--t-el),transform var(--t-el) var(--ease-settle)}
.chapters a span{font-size:12px;font-variant-numeric:tabular-nums}
.chapters a:hover,.chapters a:focus-visible{color:var(--ink);transform:translateX(4px)}
.chapters a[aria-current=true]{color:var(--ink)}
.ch-mark{position:absolute;left:-1px;top:0;width:2px;height:44px;background:var(--leaf);transform:translateY(calc(var(--i,0) * 44px));transition:transform var(--t-scene) var(--ease-glide)}
.case-flow{grid-column:4/13;display:grid;gap:clamp(96px,11vw,170px)}
.case-intro{display:grid;grid-template-columns:repeat(9,1fr);column-gap:var(--gap);row-gap:22px}
.case-intro h2{grid-column:1/6;font-size:clamp(1.8rem,2.6vw,2.6rem)}
.case-intro p{grid-column:5/10}
.chapter{display:grid;gap:clamp(32px,4vw,52px)}
.ch-text{display:grid;grid-template-columns:repeat(9,1fr);column-gap:var(--gap);row-gap:16px;align-items:end}
.ch-no{grid-column:1/-1;font-size:13px;font-weight:500;color:var(--leaf);letter-spacing:.04em}
.ch-text h2{grid-column:1/6;font-size:clamp(1.8rem,2.8vw,2.9rem)}
.ch-text p:last-child{grid-column:6/10;color:var(--stone);font-size:16px}
.ch-photos{display:grid;grid-template-columns:repeat(9,1fr);column-gap:var(--gap);row-gap:var(--gap);align-items:start}
.photo{position:relative;display:block;width:100%;text-align:left;cursor:zoom-in}
.photo .frame{aspect-ratio:3/4}
.photo .frame img{transition:transform 900ms var(--ease-settle)}
.photo:hover .frame img,.photo:focus-visible .frame img{transform:scale(1.035)}
.photo:active .frame{transform:scale(.99)}
.photo .zoom{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(246,245,241,.86);font-size:18px;opacity:0;transform:translateY(8px) rotate(-45deg);transition:opacity var(--t-micro),transform var(--t-el) var(--ease-settle)}
.photo:hover .zoom,.photo:focus-visible .zoom{opacity:1;transform:none}
@media (hover:none){.photo .zoom{opacity:1;transform:none}}
.pair .photo:nth-child(1){grid-column:1/5}
.pair .photo:nth-child(2){grid-column:5/10;margin-top:clamp(40px,8vw,120px)}
.pair .photo.wide{grid-column:2/10}
.photo.wide .frame{aspect-ratio:3/2}
.single .photo{grid-column:2/8}
.single.small .photo{grid-column:4/8}
.source-note{display:grid;gap:8px;padding:24px 0;border-top:1px solid var(--line);font-size:14px;color:var(--stone)}
.source-note a{color:var(--ink);text-underline-offset:3px}
.case-end{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);padding-top:clamp(72px,9vw,140px);padding-bottom:clamp(72px,9vw,140px)}
.end-link{display:grid;gap:8px;align-content:start;min-height:120px;padding:22px 0;border-top:1px solid var(--ink);text-decoration:none;text-align:left;transition:border-color var(--t-el)}
.end-k{font-size:13px;color:var(--stone);transition:transform var(--t-el) var(--ease-settle)}
.end-t{font:500 clamp(1.4rem,2vw,1.9rem)/1.3 var(--serif)}
a.end-link:hover .end-k,a.end-link:focus-visible .end-k,button.end-link:hover .end-k,button.end-link:focus-visible .end-k{transform:translateX(6px)}
a.end-link:hover,button.end-link:hover{border-top-color:var(--leaf)}
.end-link.is-muted{border-top-color:var(--line);color:var(--stone)}
.end-link.is-muted .end-t{font-size:clamp(1.1rem,1.5vw,1.3rem)}
@media (max-width:899px){
  .case-body{display:block}
  .chapters{display:none}
  .case-flow{gap:88px}
  .case-intro,.ch-text,.ch-photos{display:flex;flex-direction:column;align-items:stretch}
  .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .pair .photo:nth-child(1),.pair .photo:nth-child(2){grid-column:auto}
  .pair .photo:nth-child(2){margin-top:36px}
  .pair .photo.wide{grid-column:1/-1}
  .single .photo,.single.small .photo{width:100%}
  .single.small .photo{width:72%}
  .case-end{grid-template-columns:1fr;gap:0}
  .end-link{min-height:88px}
}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;width:100%;height:100%;background:transparent;overflow:hidden}
.lightbox::backdrop{background:rgba(20,24,21,.94)}
.lightbox[open]{display:grid;grid-template-rows:1fr auto}
.lb-stage{position:relative;display:grid;place-items:center;padding:clamp(12px,3vw,40px);min-height:0;touch-action:pan-y}
.lb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:0 0;background:var(--moss-2)}
.lb-bar{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;padding:12px clamp(16px,3vw,40px) max(16px,env(safe-area-inset-bottom));color:var(--pebble);font-size:14px}
.lb-cap{color:rgba(246,245,241,.8)}
.lb-count{font-variant-numeric:tabular-nums;color:var(--glow)}
.lb-ctrl{display:flex;gap:4px}
.lb-ctrl button{min-width:44px;min-height:44px;padding:0 12px;font-size:16px;border:1px solid var(--line-d);transition:background-color var(--t-micro),color var(--t-micro)}
.lb-ctrl button:hover,.lb-ctrl button:focus-visible{background:var(--pebble);color:var(--moss)}
@media (max-width:899px){.lb-bar{grid-template-columns:1fr auto;}.lb-cap{grid-column:1/-1;font-size:13px}}

/* ---------- reveal states (only with JS + motion allowed) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .lines:not(.is-in) .ln>span{transform:translateY(108%)}
  .js .lines .ln>span{transition:transform 900ms var(--ease-settle)}
  .js .lines .ln:nth-child(2)>span{transition-delay:90ms}
  .js .lines .ln:nth-child(3)>span{transition-delay:180ms}
  .js.seen .hero .lines .ln>span{transition:none}
  .js .rv:not(.is-in){opacity:0;transform:translateY(28px)}
  .js .rv{transition:opacity 700ms var(--ease-settle),transform 900ms var(--ease-settle)}
  /* archive index: first entry only — tiles rise in rows of four (not replayed on Back) */
  .js .tiles:not(.is-in) .tile{opacity:0;transform:translateY(28px)}
  .js .tiles.is-in .tile{transition:opacity 640ms var(--ease-settle),transform 820ms var(--ease-settle)}
  .js .tiles.is-in .tile:nth-child(4n+2){transition-delay:70ms}.js .tiles.is-in .tile:nth-child(4n+3){transition-delay:140ms}.js .tiles.is-in .tile:nth-child(4n){transition-delay:210ms}
  .js .tiles.is-settled .tile{transition:none}
  @supports (animation-timeline:view()){
    .hero-figure img,.material-figure img{animation:drift linear both;animation-timeline:view();animation-range:exit-crossing 0% exit-crossing 100%}
    .material-figure img{animation-name:drift-mat;animation-range:cover 0% cover 100%}
    /* detail hero: side margins close as the photo scrolls toward the top (scroll-linked morph, no hijack) */
    .case-hero .frame{animation:hero-widen linear both;animation-timeline:view();animation-range:cover 30% cover 62%}
  }
  @view-transition{navigation:auto}
}
@keyframes hero-widen{from{clip-path:inset(0 4% 0 4%)}to{clip-path:inset(0 0 0 0)}}
@keyframes drift{to{transform:translateY(6%) scale(1.04)}}
@keyframes drift-mat{from{transform:translateY(-3%) scale(1.07)}to{transform:translateY(3%) scale(1.07)}}

/* cross-document + filter view transitions (MOTION-SPEC v4 §2)
   The incoming page is opaque and opens over the outgoing one in five vertical slats,
   so the old page is never drawn semi-transparently on top of the new one. */
@property --vt-p{syntax:'<number>';inherits:false;initial-value:1}
::view-transition-group(*){animation-duration:var(--t-route);animation-timing-function:var(--ease-glide)}
::view-transition-old(root){animation:vt-dim 680ms var(--ease-glide) both}
::view-transition-new(root){
  --s:calc(var(--vt-p) * 132%);
  -webkit-mask-image:linear-gradient(to top,#000 clamp(0%,var(--s),100%),transparent 0),linear-gradient(to top,#000 clamp(0%,calc(var(--s) - 8%),100%),transparent 0),linear-gradient(to top,#000 clamp(0%,calc(var(--s) - 16%),100%),transparent 0),linear-gradient(to top,#000 clamp(0%,calc(var(--s) - 24%),100%),transparent 0),linear-gradient(to top,#000 clamp(0%,calc(var(--s) - 32%),100%),transparent 0);
  mask-image:linear-gradient(to top,#000 clamp(0%,var(--s),100%),transparent 0),linear-gradient(to top,#000 clamp(0%,calc(var(--s) - 8%),100%),transparent 0),linear-gradient(to top,#000 clamp(0%,calc(var(--s) - 16%),100%),transparent 0),linear-gradient(to top,#000 clamp(0%,calc(var(--s) - 24%),100%),transparent 0),linear-gradient(to top,#000 clamp(0%,calc(var(--s) - 32%),100%),transparent 0);
  -webkit-mask-size:20.5% 100%;mask-size:20.5% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 0,25% 0,50% 0,75% 0,100% 0;mask-position:0 0,25% 0,50% 0,75% 0,100% 0;
  animation:vt-open 680ms var(--ease-glide) both
}
html:active-view-transition-type(back)::view-transition-new(root){
  -webkit-mask-image:linear-gradient(to bottom,#000 clamp(0%,calc(var(--s) - 32%),100%),transparent 0),linear-gradient(to bottom,#000 clamp(0%,calc(var(--s) - 24%),100%),transparent 0),linear-gradient(to bottom,#000 clamp(0%,calc(var(--s) - 16%),100%),transparent 0),linear-gradient(to bottom,#000 clamp(0%,calc(var(--s) - 8%),100%),transparent 0),linear-gradient(to bottom,#000 clamp(0%,var(--s),100%),transparent 0);
  mask-image:linear-gradient(to bottom,#000 clamp(0%,calc(var(--s) - 32%),100%),transparent 0),linear-gradient(to bottom,#000 clamp(0%,calc(var(--s) - 24%),100%),transparent 0),linear-gradient(to bottom,#000 clamp(0%,calc(var(--s) - 16%),100%),transparent 0),linear-gradient(to bottom,#000 clamp(0%,calc(var(--s) - 8%),100%),transparent 0),linear-gradient(to bottom,#000 clamp(0%,var(--s),100%),transparent 0)
}
@keyframes vt-open{from{--vt-p:0}to{--vt-p:1}}
@keyframes vt-dim{to{filter:brightness(.86)}}
::view-transition-group(site-header){animation:none;z-index:20}
::view-transition-old(site-header){animation:none;opacity:0}
::view-transition-new(site-header){animation:none}
::view-transition-old(case-photo),::view-transition-new(case-photo){height:100%;width:100%;object-fit:cover;overflow:hidden;mix-blend-mode:normal}
::view-transition-group(case-photo){animation-duration:720ms;z-index:10}
::view-transition-new(case-photo){animation:vt-fade-in 320ms ease both}
::view-transition-old(case-photo){animation:vt-fade-out 300ms ease 300ms both}
::view-transition-old(case-photo):only-child{animation:vt-fade-out 160ms ease both}
::view-transition-new(case-photo):only-child{animation:vt-fade-in 240ms ease 420ms both}
@keyframes vt-fade-in{from{opacity:0}}
@keyframes vt-fade-out{to{opacity:0}}
::view-transition-group(.tile){animation-duration:var(--t-scene)}
::view-transition-new(.tile):only-child{animation:tile-in 560ms var(--ease-settle) 120ms both}
::view-transition-old(.tile):only-child{animation:tile-out 260ms ease both}
@keyframes tile-out{to{opacity:0;transform:translateY(8px) scale(.98)}}
::view-transition-group(filter-mark){animation-duration:var(--t-scene)}
html.vt-filter::view-transition-old(root),html.vt-filter::view-transition-new(root){animation:none;-webkit-mask-image:none;mask-image:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .slats{display:none!important}
}
.prep-list .src{display:block;margin-top:6px;font-size:12px;color:var(--leaf)}