:root{--page:#ececec;--ink:#242424;--muted:#a7a7a7;--page-gutter:clamp(24px,8.333333vw,160px);--body-width:min(1366px,100%);--wide-width:min(1710px,100%);--hero-height:calc(min(1710px,100vw - var(--page-gutter)*2)*9/16);--title-size:30px;--title-line:36px;--copy-size:16px;--copy-line:28px;--caption-size:14px;--caption-line:22px;--workflow-inset:clamp(80px,calc(7.857142857vw - 33.14285714px),168px);--chapter-gap:180px}
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--page);color:var(--ink);font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}h1,h2,p,figure{margin:0}h1,h2{font-weight:400}button{font-family:inherit}img,video{display:block}button,a{-webkit-tap-highlight-color:transparent}
.case-main{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--chapter-gap);width:100%;padding:0 var(--page-gutter) 240px}
.hero-section{display:flex;justify-content:center;width:100%;padding-top:max(64px,calc((100svh - var(--hero-height))/2),calc(100svh - var(--hero-height) - 180px))}.hero-media{width:var(--wide-width)}
.media{position:relative;aspect-ratio:16/9;overflow:hidden;min-width:0;background:var(--page)}.media>img,.media>video{width:100%;height:100%;object-fit:contain;aspect-ratio:16/9}.video-frame{cursor:pointer}.case-section>.media{width:100%}
.intro-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:var(--wide-width);gap:168px;padding:0 20px}.intro-stack{display:flex;flex-direction:column;gap:48px;min-width:0}.intro-block{display:flex;flex-direction:column;gap:24px}.intro-label,.section-title{font-size:var(--title-size);line-height:var(--title-line)}.intro-copy,.section-copy{font-size:var(--copy-size);line-height:var(--copy-line);color:var(--muted);overflow-wrap:break-word}.emphasis{color:#7a7a7a}
.case-section{display:flex;flex-direction:column;gap:48px;width:var(--body-width);min-width:0}.section-intro{display:grid;grid-template-columns:minmax(0,1fr) 600px;gap:126px;align-items:start;width:100%;min-width:0}.section-intro>*{min-width:0}
.workflow{width:min(1030px,calc(100% - var(--workflow-inset)*2));max-width:100%;align-self:center;position:relative;min-width:0}.workflow-artwork{display:flex;flex-direction:column;width:1030px;transform:scale(var(--workflow-scale,1));transform-origin:top left}.path-labels{display:grid;grid-template-columns:1fr 1fr;gap:32px;font-size:var(--caption-size);line-height:var(--caption-line);color:#7a7a7a;margin-bottom:12px}.flow-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}.flow-node{border:1px solid #c6c6c6;background:transparent;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 12px 6px;height:84px;text-align:center}.flow-node>p{font-family:Arial,"Noto Sans SC",sans-serif;font-size:16px;line-height:28px;color:#000}.flow-node>small{font-size:var(--caption-size);line-height:var(--caption-line);color:#a7a7a7}.flow-connect,.flow-merge{display:block;width:100%;flex:none;object-fit:fill}.flow-connect{height:24px}.flow-merge{height:40px}
/* Hiking Web 2: a 2160px composition, with alternating 397px text insets. */
.feature-row{--feature-width:min(2160px,calc(100vw - var(--page-gutter)*2));width:var(--feature-width);flex-direction:row;gap:calc(var(--feature-width)*323/2160);padding-right:calc(var(--feature-width)*397/2160);align-items:center;justify-content:space-between}
.feature-row>.media{width:calc(var(--feature-width)*900/2160);flex:none}
.feature-copy{display:flex;flex-direction:column;gap:24px;width:calc(var(--feature-width)/4);flex:none;min-width:0}
#saved.feature-row{padding-left:calc(var(--feature-width)*397/2160);padding-right:0}
.js-motion .reveal-text,.js-motion [data-slot],.js-motion .workflow{opacity:0}.js-motion .is-visible{opacity:1}
.gleec-line-fragment{opacity:0}.clou-fluid-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:0;mix-blend-mode:plus-lighter}.clou-fluid-canvas[hidden]{display:none}
.clou-hover-cursor{position:fixed;left:0;top:0;z-index:11000;pointer-events:none}.clou-hover-cursor span{position:absolute;left:0;top:0;width:calc(clamp(14px,1vw,38px)*2.2);height:calc(clamp(14px,1vw,38px)*2.2);border:1.5px solid #212121;border-radius:50%}.clou-hover-cursor[hidden]{display:none}.has-clou-cursor,.has-clou-cursor *{cursor:none!important}
.video-control{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:6.25%;min-width:44px;aspect-ratio:1;border:0;padding:0;background:transparent;color:#111;cursor:pointer;border-radius:50%;pointer-events:none;z-index:30;opacity:0}.control-disc{position:absolute;inset:0;border-radius:50%;background:#f2f2f2;transform:scale(0);transition:transform 260ms cubic-bezier(.16,1,.3,1)}.control-glyph{position:absolute;inset:33%;display:grid;place-items:center;opacity:0}.control-glyph svg{width:100%;height:100%;fill:currentColor;display:block}.video-control.is-visible{opacity:1;pointer-events:auto}.video-control.is-visible .control-disc{transform:scale(1)}.video-control.is-visible .control-glyph{animation:glyph-in 220ms cubic-bezier(.16,1,.3,1) 340ms both}.video-control:focus-visible,.video-frame:focus-visible{outline:2px solid #777;outline-offset:6px}@keyframes glyph-in{from{opacity:0;transform:translateX(-65%) scaleX(1.45)}to{opacity:1;transform:translateX(0) scaleX(1)}}
/* Reflow the case study instead of shrinking a desktop composition. */
@media(max-width:1600px){
 .case-main{padding-bottom:clamp(96px,15vw,240px)}
 .hero-section{padding-top:clamp(48px,7.5vw,120px)}
 .intro-columns{gap:clamp(40px,6vw,96px);padding:0}
 .section-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(84px,6vw,96px)}
}
@media(max-width:900px){
 .case-main{padding-bottom:96px}
 .hero-section{padding-top:48px}
 .case-section{gap:48px}
 .section-intro{grid-template-columns:1fr;gap:24px}
 .section-intro>.section-copy{max-width:none}
 .feature-row,#saved.feature-row{flex-direction:column;align-items:stretch;gap:48px;padding:0}
 .feature-copy{width:100%;flex:none;max-width:none;gap:24px;order:0}
 .feature-row>.media{width:100%;flex:none;order:1}
 .intro-columns{gap:40px}
 .intro-stack{gap:48px}
}
@media(max-width:680px){
 :root{--page-gutter:32px}
 .case-main{padding-bottom:96px}
 .hero-section{padding-top:24px}
 .intro-columns{grid-template-columns:1fr;gap:32px}
 .intro-stack{gap:48px}
 .intro-copy p[aria-hidden]{display:none}
}
/* Wardrobe typography and spacing; Hiking layout thresholds and column geometry stay authored. */
@media(max-width:1440px){:root{--chapter-gap:clamp(120px,calc(14.423076923vw - 27.69230769px),180px);--workflow-inset:calc(3.846153846vw + 24.61538462px)}}
@media(max-width:1024px){:root{--chapter-gap:120px;--workflow-inset:clamp(0px,calc(25vw - 192px),64px)}}
@media(max-width:768px){:root{--chapter-gap:96px;--title-size:24px;--title-line:30px;--copy-size:14px;--copy-line:24px;--caption-size:12px;--caption-line:20px;--workflow-inset:0px}}
/* A diagram is one fixed artwork: its annotations scale with its nodes. */
.workflow-artwork{--caption-size:14px;--caption-line:22px}
@media(max-width:360px){:root{--page-gutter:24px}}
@media(prefers-reduced-motion:reduce){.js-motion .reveal-text,.js-motion [data-slot],.js-motion .workflow,.gleec-line-fragment{opacity:1}.clou-fluid-canvas{display:none}.control-disc{transition:none}.video-control.is-visible .control-glyph{animation:none;opacity:1}}