/* Yiyi Apparel v3: multi-route additions and corrections. Loaded after styles.css. */
:root{--blue-ink:#1746ff;--gutter:clamp(20px,4vw,72px);--max:1560px;--pad:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)))}
body{overflow-x:clip}
#app{max-width:100vw;overflow-x:clip}
.site-header{height:76px;padding:0 var(--pad);grid-template-columns:auto 1fr auto;column-gap:28px}
.site-header nav{justify-self:center;gap:clamp(16px,2vw,30px);letter-spacing:.01em;white-space:nowrap}
.site-header nav a.active:after{right:0}
.site-header nav a:focus-visible,.header-cta:focus-visible,.brand:focus-visible,.menu:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.header-cta span,.range-number{color:var(--blue-ink)}
.footer-brand span{background:var(--blue)}
.brand span{flex:0 0 auto}
main{display:block;min-height:40vh}
.section,.hero,.page-hero,.band,.cta-band{padding-left:var(--pad);padding-right:var(--pad)}
.hero{max-width:none;margin:0;min-height:auto;grid-template-columns:minmax(320px,1fr) auto;gap:clamp(30px,5vw,90px);padding-top:clamp(84px,8vw,112px);padding-bottom:clamp(48px,7vw,104px)}
.hero:before{left:var(--pad);top:36px}
.hero h1{font-size:clamp(50px,6.4vw,104px)}
.hero-media{display:grid;grid-template-columns:auto auto;gap:clamp(18px,2.4vw,36px);align-items:end;justify-content:end}
.hero-frame{transform:none;padding:10px;box-shadow:14px 14px 0 var(--blue);width:max-content;max-width:100%}
.hero-frame.tall{transform:rotate(-1.2deg)}
.hero-frame.tall video,.hero-frame.tall img.poster{display:block;height:clamp(380px,52vh,600px);width:auto;aspect-ratio:37/80;object-fit:cover;background:#ddd}
.hero-frame.still{transform:rotate(1.4deg);align-self:end;margin-bottom:34px}
.hero-frame.still img{display:block;height:clamp(300px,40vh,470px);width:auto;aspect-ratio:2/3;object-fit:cover;min-height:0;max-height:none}
.hero-frame .tape{right:-22px;top:28px}
.hero-facts{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:38px;font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.hero-facts span{padding:8px 0;border-top:1px solid var(--line)}
.side-note{right:calc(var(--pad) - 60px)}
.page-hero{position:relative;padding-top:clamp(48px,6vw,90px);padding-bottom:clamp(36px,4vw,60px);border-bottom:1px solid var(--ink);display:grid;grid-template-columns:.6fr 1.4fr;gap:clamp(24px,4vw,64px);align-items:end}
.page-hero:before{content:"";position:absolute;left:var(--pad);top:26px;width:70px;height:18px;background:var(--acid);transform:rotate(-2deg)}
.page-hero h1{margin:14px 0 0;font-size:clamp(46px,6vw,96px);line-height:.9;letter-spacing:-.06em}
.page-hero .lede{max-width:640px;font-size:clamp(16px,1.3vw,20px);line-height:1.5;margin:0}
.eyebrow,.page-hero .eyebrow{font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;margin:0}
.section-head{max-width:none;margin-bottom:clamp(36px,4vw,64px)}
.section-head h2{font-size:clamp(40px,5vw,84px)}
.section-head .note{grid-column:2;max-width:680px;margin:18px 0 0;line-height:1.6;font-size:16px}
.section.tight{padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(56px,7vw,110px)}
.section.ink{background:var(--ink);color:var(--paper)}
.section.paper2{background:#fff}
.section.acid{background:var(--acid);color:var(--ink)}
.tabs,.range-board,.service-grid,.studio,.catalog,.wall,.facts,.cards,.steps,.faq,.contact-grid,.people,.spec-table,.family-head,.text-cols,.brands,.figure-row,.cert-grid,.link-row{max-width:none}
.range-board{margin-top:22px}
.range-visual{min-height:0;aspect-ratio:3/2;display:grid;place-items:center;background:#f7f5f0}
.range-visual img{width:100%;height:100%;object-fit:contain;padding:0}
.range-visual.portrait img{object-fit:contain}
.range-copy .spec{font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.7;letter-spacing:.04em;margin:0 0 6px;color:var(--ink)}
.tab:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}
/* catalog */
.family-head{display:grid;grid-template-columns:.6fr 1.4fr;gap:clamp(20px,3vw,48px);align-items:end;border-top:1px solid var(--ink);padding-top:26px;margin-bottom:28px}
.family-head h2{margin:0;font-size:clamp(38px,4.6vw,72px);letter-spacing:-.05em;line-height:.9}
.family-head .spec{font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.8;letter-spacing:.04em;margin:0}
.family-head p.intro{margin:0 0 14px;line-height:1.6;font-size:16px;max-width:680px}
.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px 18px;margin-bottom:clamp(56px,7vw,110px)}
.catalog .item{margin:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ink);padding:8px 8px 14px;box-shadow:6px 6px 0 rgba(17,16,13,.14);transition:transform .25s,box-shadow .25s}
.catalog .item .ph{display:block;width:100%;aspect-ratio:2/3;overflow:hidden;background:#f2f0ea}
.catalog .item .ph.ar-34{aspect-ratio:3/4}
.catalog .item .ph.ar-11{aspect-ratio:1/1}
.catalog .item .ph.ar-wide{aspect-ratio:1491/1600}
.catalog .item .ph.ar-mid{aspect-ratio:1357/1600}
.catalog .item img{display:block;width:100%;height:100%;object-fit:cover}
.catalog .item figcaption{padding-top:10px;display:flex;flex-direction:column;gap:5px}
.catalog .item b{font-size:14px;line-height:1.3;letter-spacing:-.01em}
.catalog .item small{font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-ink)}
.catalog .item .src{font-size:11px;line-height:1.4;opacity:.78}
@media(hover:hover){.catalog .item:hover{transform:translateY(-4px);box-shadow:10px 10px 0 var(--blue)}}
.family-note{font-size:13px;line-height:1.6;max-width:760px;margin:-30px 0 60px;opacity:.85}
.strip{margin:0 0 clamp(56px,7vw,110px);border:1px solid var(--ink);background:#fff;padding:8px}
.strip img{display:block;width:100%;height:auto;aspect-ratio:1440/300}
.strip figcaption{padding:10px 4px 2px;font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
/* facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border:1px solid currentColor}
.facts div{padding:26px 22px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;display:flex;flex-direction:column;gap:8px;min-height:180px}
.facts b{font-size:clamp(30px,3vw,46px);letter-spacing:-.05em;line-height:1}
.facts span{font-size:14px;line-height:1.5}
.facts small{margin-top:auto;font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
/* cards & steps */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.cards article{border:1px solid var(--ink);padding:28px 26px 30px;background:#fff;display:flex;flex-direction:column;gap:14px;min-height:260px}
.cards article span{font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--blue-ink)}
.cards article h3{margin:auto 0 0;font-size:clamp(24px,2.2vw,34px);letter-spacing:-.04em;line-height:1}
.cards article p{margin:0;line-height:1.6;font-size:15px}
.cards article ul{margin:0;padding-left:18px;line-height:1.6;font-size:15px}
.section.ink .cards article{background:transparent;border-color:rgba(255,255,255,.34);color:var(--paper)}
.section.ink .cards article span{color:var(--acid)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;counter-reset:step}
.steps div{position:relative;padding:34px 22px 30px 0;border-top:2px solid currentColor;margin-right:22px}
.steps div:before{counter-increment:step;content:counter(step,decimal-leading-zero);font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;position:absolute;top:12px;left:0}
.steps h3{margin:0 0 10px;font-size:22px;letter-spacing:-.03em}
.steps p{margin:0;line-height:1.6;font-size:15px}
.steps small{display:block;margin-top:10px;font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
/* text columns and lists */
.text-cols{display:grid;grid-template-columns:.6fr 1.4fr;gap:clamp(24px,4vw,64px)}
.text-cols h2{margin:0;font-size:clamp(36px,4.4vw,70px);letter-spacing:-.05em;line-height:.92}
.text-cols .body p{margin:0 0 18px;line-height:1.7;font-size:17px;max-width:720px}
.text-cols .body blockquote{margin:0 0 18px;padding:18px 22px;border-left:3px solid var(--blue);background:#fff;font-size:16px;line-height:1.65;max-width:720px}
.text-cols .body blockquote cite{display:block;margin-top:10px;font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;font-style:normal;opacity:.75}
.section.ink .text-cols .body blockquote{background:rgba(255,255,255,.06);border-left-color:var(--acid)}
.brands{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.brands li{border:1px solid currentColor;padding:10px 14px;font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase}
.spec-table{width:100%;border-collapse:collapse;font-size:15px}
.spec-table th,.spec-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.spec-table th{font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;width:26%}
.spec-table td small{display:block;margin-top:4px;font-size:11px;opacity:.7}
.table-wrap{overflow-x:auto}
/* photo wall */
.wall{column-count:3;column-gap:20px}
.wall figure{break-inside:avoid;margin:0 0 20px;background:#fff;border:1px solid var(--ink);padding:8px 8px 12px;box-shadow:6px 6px 0 rgba(17,16,13,.14)}
.wall img{display:block;width:100%;height:auto}
.wall figcaption{padding-top:9px;font-size:12px;line-height:1.5}
.wall figcaption small{display:block;font:500 9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;margin-top:4px;opacity:.7}
.figure-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.figure-row figure{margin:0;border:1px solid var(--ink);background:#fff;padding:8px}
.figure-row img{display:block;width:100%;height:auto}
.figure-row figcaption{padding:10px 4px 2px;font-size:13px;line-height:1.5}
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:30px}
.cert-grid figure{margin:0;border:1px solid var(--ink);background:#fff;padding:8px}
.cert-grid img{display:block;width:100%;height:auto}
.cert-grid figcaption{padding:10px 4px 2px;font-size:12px;line-height:1.5}
.caveat{border:1px solid var(--ink);background:var(--acid);padding:18px 22px;font-size:15px;line-height:1.6;max-width:820px;margin-top:26px}
/* video panel */
.video-panel{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.video-panel .hero-frame.tall{transform:none}
.text-cols.one{grid-template-columns:1fr}
.text-cols h2.sub{margin:14px 0 22px}
/* faq */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--ink)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.02em;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font:400 26px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--blue-ink)}
.faq details[open] summary:after{content:"\2212"}
.faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.faq .a{padding:0 0 24px;max-width:760px;line-height:1.7;font-size:16px}
.faq .a p{margin:0 0 12px}
.faq .a small{display:block;font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
/* articles */
.articles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.articles article{border:1px solid var(--ink);background:#fff;padding:0 0 26px;display:flex;flex-direction:column}
.articles .ph{aspect-ratio:3/2;overflow:hidden;border-bottom:1px solid var(--ink);background:#f2f0ea}
.articles .ph img{display:block;width:100%;height:100%;object-fit:cover}
.articles .ph.tall{aspect-ratio:2/3}
.articles .ph.tall34{aspect-ratio:3/4}
.articles .ph.ar43{aspect-ratio:4/3}
.articles .ph.cert{aspect-ratio:1060/683}
.articles .ph.square{aspect-ratio:1/1}
.articles{align-items:start}
.articles h3{margin:22px 24px 12px;font-size:clamp(22px,2vw,30px);letter-spacing:-.04em;line-height:1.05}
.articles p{margin:0 24px 12px;line-height:1.65;font-size:15px}
.articles small{margin:auto 24px 0;font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.7;padding-top:14px}
/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px)}
.people{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.5)}
.people div{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.5);display:grid;grid-template-columns:1fr 1.4fr;gap:12px;font-size:15px;line-height:1.6}
.people b{display:block;font-size:18px;letter-spacing:-.02em}
.people small{display:block;font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.people a{text-decoration:underline;text-underline-offset:3px}
.link-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.link-row a{border:1px solid currentColor;padding:12px 16px;font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.brief{gap:clamp(40px,6vw,110px)}
.brief form{align-self:start}
.brief .form-note{opacity:.85}
.brief input::placeholder,.brief textarea::placeholder{color:rgba(255,255,255,.72)}
.brief input:focus-visible,.brief select:focus-visible,.brief textarea:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.contact-photo{margin:40px 0 0;border:1px solid #fff;padding:8px;background:transparent;max-width:520px}
.contact-photo img{display:block;width:100%;height:auto}
.contact-photo figcaption{padding:10px 4px 2px;font-size:12px;line-height:1.5}
/* cta band */
.cta-band{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,64px);align-items:center;background:var(--tomato);color:var(--ink);padding-top:clamp(48px,6vw,90px);padding-bottom:clamp(48px,6vw,90px)}
.cta-band h2{margin:0;font-size:clamp(38px,5vw,84px);letter-spacing:-.06em;line-height:.9}
.cta-band p{margin:14px 0 0;font-size:17px;line-height:1.6;max-width:600px}
.cta-band .actions{display:flex;flex-direction:column;gap:12px;justify-self:end;width:100%;max-width:380px}
.cta-band .actions a{display:flex;justify-content:space-between;border:1px solid var(--ink);padding:18px 20px;font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;background:var(--paper)}
.cta-band .actions a.dark{background:var(--ink);color:var(--paper)}
/* footer */
footer{grid-template-columns:1.2fr .6fr 1.2fr auto;gap:36px;padding:56px var(--pad) 46px;align-items:start}
footer .foot-brand p{margin:18px 0 0;max-width:420px;font-size:13px;line-height:1.6;opacity:.8}
footer .foot-nav{display:flex;flex-direction:column;gap:10px;font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase}
footer .foot-note{max-width:460px;font-size:12px;line-height:1.6;opacity:.7;margin:0}
footer .foot-top{font:500 11px ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}
.reveal.visible{opacity:1;transform:none}
/* responsive */
@media(max-width:1150px){.site-header{grid-template-columns:1fr auto;height:68px}.site-header nav,.header-cta{display:none}.site-header nav.open{position:absolute;top:68px;left:0;right:0;display:flex;flex-direction:column;background:var(--paper);padding:22px var(--pad) 26px;border-bottom:1px solid;gap:18px}.menu{display:flex;width:42px;height:42px;border:1px solid;align-items:center;justify-content:center;flex-direction:column;gap:6px;background:none}.menu i{width:17px;height:1px;background:currentColor}}
@media(max-width:1000px){.hero{grid-template-columns:minmax(0,1fr)}.hero-copy{min-width:0}.hero-media{justify-content:start}.page-hero,.family-head,.text-cols,.section-head{grid-template-columns:1fr}.section-head .note{grid-column:1}.wall{column-count:2}.contact-grid{grid-template-columns:1fr}.video-panel{grid-template-columns:1fr}.cta-band{grid-template-columns:1fr}.cta-band .actions{justify-self:start}footer{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.hero-frame .tape{right:0;top:-14px}.hero-media{grid-template-columns:minmax(0,1fr);justify-items:start;max-width:100%}.hero-frame{width:auto;max-width:100%}.hero-frame.still{margin-bottom:0;width:min(100%,340px)}.hero-frame.tall{width:max-content}.hero-frame.tall video,.hero-frame.tall img.poster{height:min(70vh,520px);max-width:calc(100vw - var(--gutter)*2 - 40px)}.hero-frame.still img{height:auto;width:100%;aspect-ratio:2/3}.hero h1{font-size:50px}.page-hero h1{font-size:44px}.wall{column-count:1}.figure-row{grid-template-columns:1fr}.people div{grid-template-columns:1fr}.catalog{grid-template-columns:repeat(2,1fr);gap:14px 10px}.catalog .item{padding:6px 6px 10px}footer{grid-template-columns:1fr}.side-note{display:none}.tabs{margin-left:0;margin-right:0;border-left:1px solid var(--ink);border-right:1px solid var(--ink)}.range-board{margin-left:0;margin-right:0;border-left:1px solid var(--ink);border-right:1px solid var(--ink)}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.catalog .item,.hero-frame{transition:none}}