@font-face{font-family:'Source Serif 4';src:url('/assets/source-serif-4-italic.ttf') format('truetype');font-weight:200 900;font-style:italic;font-display:swap}
body:has(.case-story){background:#590c1a}
.case-story{--case-header:88px;--case-open:1;--case-shift:0%;--case-angle:-178deg;--case-shadow:0;--case-hint:0;--case-edge-gap:1cm;--folder-width:min(calc((100vw - 2 * var(--case-edge-gap))/2.18),calc((100dvh - var(--case-header) - 2 * var(--case-edge-gap))*.73/1.065));color:#30140c;background:#590c1a}
.case-stage{position:relative;min-height:calc(100dvh - var(--case-header));height:calc(100dvh - var(--case-header));perspective:1800px;overflow:hidden}
.case-enhanced .case-story{height:calc(100dvh - var(--case-header) + var(--case-distance,900px))}
.case-enhanced .case-stage{position:sticky;top:var(--case-header)}
.case-stage:focus-visible{outline:1px solid #9dc2d1;outline-offset:-3px}
.case-back{position:absolute;left:clamp(24px,4vw,64px);top:0;color:#fffbf2;font-size:12px;letter-spacing:.01em;z-index:5;padding-block:10px}
.case-back:hover{text-decoration:underline;text-underline-offset:5px}
.case-back:focus-visible{outline-color:#fffbf2}
.case-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.case-folder{position:absolute;left:50%;top:50%;width:var(--folder-width);aspect-ratio:.73;transform:translate3d(var(--case-shift),-50%,0);transform-style:preserve-3d;container-type:inline-size}
.case-enhanced:not(.case-ready) .case-folder{visibility:hidden}
/* The flat chapter navigation is only used in the static reading layout. */
.case-chapters{display:none;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:2px;z-index:5}
.case-chapter{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 2px 8px;border:1px solid #30140c55;border-bottom:0;border-radius:7px 7px 0 0;background:var(--chapter-color) url('/assets/project-folder/paper-grain.svg');color:var(--chapter-ink,#30140c);font:400 clamp(9px,1vw,12px)/1.2 'Manrope',sans-serif;text-decoration:none;box-shadow:1px -2px 3px #30140c18}
.case-chapter--project{--chapter-color:#30140c;--chapter-ink:#fffbf2}
.case-chapter--context{--chapter-color:#9dc2d1}
.case-chapter--character{--chapter-color:#f2ebdd}
.case-chapter--packaging{--chapter-color:#590c1a;--chapter-ink:#fffbf2;border-color:#fffbf266}
.case-chapter:hover{text-decoration:underline;text-underline-offset:4px}
.case-chapter[aria-current]{font-weight:700;text-decoration:underline;text-underline-offset:4px}
.case-chapter:focus-visible{outline:2px solid #fffbf2;outline-offset:3px;box-shadow:0 0 0 5px #30140c;z-index:1}
/* Each tab belongs to its chapter's sheet, including its readable reverse. */
.case-page-tab{position:absolute;left:var(--tab-position);bottom:calc(100% - 1.63cqw);width:24.5%;height:10.23cqw;min-height:0;font-size:2.79cqw;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform-style:preserve-3d}
.case-page-tab.case-chapter--project{--tab-position:0%}
.case-page-tab.case-chapter--context{--tab-position:25.15%}
.case-page-tab.case-chapter--character{--tab-position:50.3%}
.case-page-tab.case-chapter--packaging{--tab-position:75.5%}
.case-page-tab__front,.case-page-tab__back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:.47cqw .47cqw 1.63cqw;background:var(--chapter-color) url('/assets/project-folder/paper-grain.svg');border:1px solid #30140c55;border-radius:6px 6px 1px 1px;box-shadow:1px -1px 2px #30140c22,inset 0 -7px 0 #30140c12;backface-visibility:hidden;-webkit-backface-visibility:hidden;text-decoration:inherit;text-underline-offset:4px}
.case-page-tab__front{transform:translateZ(.3px)}
.case-page-tab__back{transform:rotateY(180deg) translateZ(.3px)}
.case-page-tab.case-chapter--packaging>span{border-color:#fffbf266}
.case-board,.case-sheet,.case-cover,.case-cover__face{position:absolute;inset:0}
/* Cardboard shell based on the supplied closed/open folder references. */
.case-board{inset:-.4% -1.7% -.6% -.5%;background:#cec7b5 url('/assets/project-folder/paper-grain.svg');border:1px solid #b6af9d;border-radius:3px 7px 6px 2px;box-shadow:1px 2px 2px #12080028,8px 16px 26px #1d000029;transform:translateZ(-7px)}
.case-board::after{content:'';position:absolute;left:calc(100% - 1px);top:35%;width:6%;height:33%;background:#cbc4b2 url('/assets/project-folder/paper-grain.svg');clip-path:polygon(0 0,88% 4%,100% 7%,94% 94%,78% 97%,0 100%)}
.case-sheet{background:#f3f4f8 url('/assets/project-folder/paper-grain.svg');border:1px solid #d9dbe0;box-shadow:1px 2px 2px #30271c26;border-radius:1px 2px 1px 0}
.case-sheet--rear{inset:0 3% -1.9% 6%;transform:translate3d(0,-.5%,-4px) rotate(-1.6deg)}
.case-sheet--middle{inset:-1.7% 2% -.5% 3%;transform:translate3d(0,0,-2px) rotate(.7deg)}
.case-cover{transform-origin:0 50%;transform:translateZ(5px) rotateY(var(--case-angle));transform-style:preserve-3d}
.case-cover__face{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px 9px 8px 2px}
.case-cover__front{transform:translateZ(1px);filter:drop-shadow(1px 2px 1px #2927214d)}
.case-cover__front::before{content:'';position:absolute;inset:0;background-image:url('/assets/project-folder/paper-grain.svg'),radial-gradient(ellipse at 12% 5%,#ddd9ce80,transparent 45%),linear-gradient(115deg,#cbc8bd 0%,#c5c3b9 43%,#b9b9b0 100%);border:1px solid #c3c0b7;border-radius:inherit;clip-path:polygon(0 0,12% .15%,96% 2.1%,99% 2.3%,100% 3.5%,99.1% 97.5%,98.5% 99.2%,96.8% 100%,0 100%)}
.case-cover__front::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#ffffef18,transparent 12%,transparent 94%,#6464570a);border-radius:inherit}
.case-cover__back{transform:rotateY(180deg) translateZ(1px);background-image:url('/assets/project-folder/paper-grain.svg'),linear-gradient(105deg,#cfc7b5,#ccc3af 80%,#bfb59f);border:1px solid #b7ae99;clip-path:polygon(100% 0,3% 0,3% 1%,0 2.5%,0 33%,1% 34%,5% 35.5%,5% 65%,4% 66%,0 67%,0 97.5%,3% 99%,3% 100%,100% 100%)}
.case-cover__back::after{content:'';position:absolute;inset:0 0 0 auto;width:2.3%;background:linear-gradient(270deg,#a89c7d60,#f5edd138,transparent)}
.case-cover__crease{position:absolute;left:3.6%;top:.1%;bottom:.1%;width:4.6%;border-left:1px solid #a9a69988;border-right:1px solid #aaa69888;box-shadow:inset 1px 0 1px #eeeade99,1px 0 1px #eeeade88;transform:rotate(.45deg);transform-origin:top}
.case-cover__logo{position:absolute;left:18%;top:28%;width:38%;height:auto;transform:translateY(-50%)}
.case-cover__caption{position:absolute;left:18%;right:8%;bottom:10%;font:400 2.8cqw/1.5 'Manrope',sans-serif;text-align:left;letter-spacing:.01em}
.case-cover__binder{position:absolute;right:-2.6%;top:38.7%;width:24%;height:auto;transform:rotate(-1deg);filter:drop-shadow(1px 3px 2px #241c1666)}
.case-scroll-hint{position:absolute;bottom:8px;left:0;right:0;margin:0;color:#fffbf2;text-align:center;font-size:11px;letter-spacing:.06em;opacity:var(--case-hint);pointer-events:none}
.case-scroll-hint span{display:inline-block;margin-left:8px;font-size:16px}
@media(max-width:760px){
 .case-story{--case-header:116px;--folder-width:min(calc((100vw - 32px)/1.1),calc((100dvh - var(--case-header) - 2 * var(--case-edge-gap))*.73/1.065))}
 .case-folder{transform:translate3d(-50%,-50%,0)}
 .case-back{top:0;left:24px;font-size:11px}
 .case-stage{perspective:1000px}
 .case-scroll-hint{bottom:8px}
}
/* Loose sheets: the centre travels through space; no edge is bound to the folder. */
.case-leaf{position:absolute;inset:3% 2.5%;transform-origin:50% 50%;transform-style:preserve-3d;transform:translate3d(var(--page-x,0%),calc(var(--page-y,0%) + var(--page-fit-y,0px)),var(--page-depth,0px)) rotateZ(var(--page-roll,0deg)) rotateX(var(--page-pitch,0deg)) rotateY(var(--page-angle,0deg)) scale(var(--page-fit,1))}
.case-leaf__front,.case-leaf__back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid #ded8cc;background:#fffbf2 url('/assets/project-folder/paper-grain.svg');box-shadow:1px 2px 4px #30271c30}
.case-leaf__front{transform:translateZ(.2px)}
.case-leaf__front::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#1b2413b0,#1b241300 70%);opacity:var(--case-shadow)}
.case-leaf__back{transform:rotateY(180deg) translateZ(.2px);background-image:url('/assets/project-folder/paper-grain.svg'),linear-gradient(115deg,#f5f0e5,#fffbf2 60%,#eae4d7);box-shadow:1px 4px 9px #24140735}
.case-page-content{position:relative;height:100%;padding:6.5%;font:400 2.35cqw/1.48 'Manrope',sans-serif;color:#30140c;display:flex;flex-direction:column;gap:4%}
.case-page-content p{margin:0 0 1em}
.case-page-content p:last-child{margin-bottom:0}
.case-page-title{margin:0;font:italic 400 3.7cqw/1.2 'Source Serif 4',Georgia,serif;text-align:right}
.case-copy{display:grid;gap:1em}
.case-copy p{margin:0}
.case-page-top{display:grid;grid-template-columns:1.05fr 1fr;align-items:start;gap:8%;min-height:34%}
.case-page-top .case-page-title{padding-top:8%}
.case-page-top--reverse{grid-template-columns:1fr 1.2fr;min-height:29%}
.case-page-top--reverse .case-page-title{text-align:left}
.case-photo{position:relative;margin:0;padding:7% 7% 10%;background:#f9f5e9;box-shadow:0 2px 5px #30140c26;transform:rotate(-3deg);align-self:start}
.case-photo>img{display:block;width:100%;height:100%;max-height:100%;object-fit:contain}
/* Each clip straddles the sheet edge and reaches down over the upper photo. */
.case-page-clip{position:absolute;left:var(--clip-left,25%);top:-.9cqw;width:3.6cqw;height:13cqw;object-fit:fill;z-index:1;pointer-events:none;transform:rotate(-2deg);transform-origin:50% 10%}
.case-page-content--profile{--clip-left:80%}
.case-page-content--characters{--clip-left:79%}
.case-page-content--development{--clip-left:22%}
.case-page-top--reverse .case-photo{transform:rotate(3deg)}
.case-landscape{position:relative;aspect-ratio:.9;background:linear-gradient(#c2e9f8,#e8f8ff);overflow:hidden}
.case-landscape::before{content:'';position:absolute;left:-20%;right:-10%;height:36%;bottom:-10%;border-radius:50%;background:#94ac00;box-shadow:-20px -12px #c5de83}
.case-landscape span{position:absolute;top:24%;left:20%;width:57%;height:15%;background:white;border-radius:50px}
.case-landscape span::before,.case-landscape span::after{content:'';position:absolute;background:white;border-radius:50%;width:48%;aspect-ratio:1;bottom:0;left:10%}
.case-landscape span::after{width:40%;left:50%}
.case-profile-top{display:grid;grid-template-columns:1.1fr 1fr;gap:12%;height:39%}
.case-profile-top>div{display:flex;flex-direction:column;justify-content:space-between}
.case-studio{width:51%;height:auto}
.case-photo--mark{height:90%;transform:rotate(4deg);padding:15%}
.case-facts,.case-fields{margin:0;border:1px solid #695f4a66}
.case-facts>div,.case-fields>div{padding:4% 5%;border-bottom:1px solid #695f4a44}
.case-facts>div:last-child,.case-fields>div:last-child{border:0}
.case-facts dt,.case-fields dt{font:italic 400 1.05em/1.2 'Source Serif 4',Georgia,serif}
.case-facts dd,.case-fields dd{margin:3% 0 0}
.case-facts dd{font:italic 400 1.1em/1.3 'Source Serif 4',Georgia,serif}
.case-categories{display:flex;align-items:center;justify-content:space-between;margin:2% 0;font-size:.9em;gap:3%}
.case-categories .is-selected{padding:2% 4%;border:1px solid #30140c;border-radius:50%;transform:rotate(-5deg);white-space:nowrap}
.case-fields{font-size:.95em}
.case-fields>div{padding:3% 4%}
.case-fields dd{margin-top:1.5%}
.case-character-middle{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center}
.case-character-middle .case-photo{transform:rotate(-4deg)}
.case-character-middle p{font-size:.97em}
.case-page-content--characters{gap:3%;font-size:2.23cqw}
.case-packaging-top{display:grid;grid-template-columns:.72fr 1.4fr;gap:6% 9%;margin-bottom:4%}
.case-packaging-top .case-page-title{margin-bottom:18%}
.case-packaging-top .case-photo:first-child{height:100%;max-height:49cqw}
.case-page-content--development{font-size:2.2cqw;gap:3%}
.case-page-content--system{gap:4%;font-size:2.25cqw}
.case-page-content--system .case-page-top{min-height:29%;grid-template-columns:1.1fr 1fr}
.case-photo--duo{padding:9%;background:#e8d1ba}
.case-photo--duo .case-packshots{grid-template-columns:1fr 1fr;gap:8%}
.case-photo--duo .case-packshots img:last-child{transform:translateY(10%) rotate(4deg)}
.case-system-grid{display:grid;grid-template-columns:.95fr 1.2fr;gap:6% 10%;flex:1;align-items:center;padding-bottom:4%}
.case-system-grid h3{font:italic 400 1.25em/1.2 'Source Serif 4',Georgia,serif;margin:0 0 .6em}
.case-system-grid p{font-size:.96em}
.case-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.case-swatches span{aspect-ratio:1;border-radius:50%;background:var(--swatch)}
.case-swatches span:nth-child(3){grid-column:3/9;width:16.66%}
.case-type-samples{text-align:right;display:grid;gap:1em;line-height:1.1}
.case-type-samples strong{font-weight:800;font-size:.9em;overflow-wrap:anywhere}
.case-type-samples span{font-family:Georgia,serif;font-size:1.15em;font-weight:bold}
.case-packshots{display:grid;grid-template-columns:repeat(4,1fr);gap:5%;align-items:end}
.case-packshots img{width:100%;height:auto;max-height:25cqw;object-fit:contain}
.case-page-content--range .case-page-title{margin-bottom:3%}
.case-range-hero{height:52%;width:100%;object-fit:contain}
.case-packshots--range{gap:8% 6%;padding:0 12%;flex:1;align-content:center}
.case-packshots--range img{max-height:19cqw}
.case-page-controls{position:absolute;bottom:4px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:24px;color:#fffbf2;font-size:11px;z-index:5}
.case-page-controls[hidden]{display:none}
.case-page-count{font-variant-numeric:tabular-nums}
.case-enlarge,.case-reader button{font:inherit;color:inherit;background:none;border:0;padding:8px 0;cursor:pointer}
.case-enlarge:hover,.case-reader button:hover{text-decoration:underline;text-underline-offset:4px}
.case-enlarge:focus-visible,.case-reader button:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.case-reader{width:min(100vw,900px);max-width:100vw;height:100dvh;max-height:100dvh;margin:auto;padding:0 16px 32px;border:0;color:#fffbf2;background:#30140c;overscroll-behavior:contain}
.case-reader::backdrop{background:#190b09cc}
.case-reader form{position:sticky;top:0;margin:0;display:flex;justify-content:flex-end;padding:12px;background:#30140c;z-index:2}
.case-reader button{padding:8px;font-size:13px}
.case-reader button span{margin-left:12px}
.case-reader__content{container-type:inline-size;background:#fffbf2 url('/assets/project-folder/paper-grain.svg');color:#30140c}
.case-reader .case-page-content{height:auto;min-height:125cqw;font-size:max(14px,2.35cqw);gap:28px}
.case-reader .case-page-top{min-height:0}
.case-reader .case-range-hero{height:65cqw}
.case-reader .case-profile-top{height:48cqw}
.case-reader .case-photo--mark{height:100%}
.case-reader .case-packaging-top{row-gap:24px}
.case-reader .case-system-grid{row-gap:28px}
html:has(.case-reader[open]){overflow:hidden}
/* Real text remains readable in normal document flow without motion or JavaScript. */
html:not(.case-enhanced) .case-story,html.case-static .case-story{height:auto}
html:not(.case-enhanced) .case-stage,html.case-static .case-stage{position:relative;top:0;height:auto;min-height:0;overflow:visible;padding:95px 20px 40px;perspective:none}
html:not(.case-enhanced) .case-folder,html.case-static .case-folder{position:relative;left:auto;top:auto;width:min(100%,780px);margin:auto;aspect-ratio:auto;transform:none;visibility:visible}
html:not(.case-enhanced) .case-chapters,html.case-static .case-chapters{display:grid;position:sticky;left:auto;top:calc(var(--case-header) + 8px);width:min(100%,780px);margin:0 auto 24px;transform:none;visibility:visible}
html:not(.case-enhanced) .case-page-tab,html.case-static .case-page-tab{display:none}
html:not(.case-enhanced) .case-chapter,html.case-static .case-chapter{font-size:clamp(10px,2.5vw,14px)}
html:not(.case-enhanced) .case-leaf,html.case-static .case-leaf{scroll-margin-top:calc(var(--case-header) + 90px)}
html:not(.case-enhanced) .case-leaf,html.case-static .case-leaf{position:relative;inset:auto;transform:none;margin:0 0 40px}
html:not(.case-enhanced) .case-leaf__front,html.case-static .case-leaf__front{position:relative;transform:none}
html:not(.case-enhanced) .case-page-content,html.case-static .case-page-content{height:auto;min-height:125cqw;font-size:max(14px,2.35cqw);gap:28px}
html:not(.case-enhanced) .case-range-hero,html.case-static .case-range-hero{height:65cqw}
html:not(.case-enhanced) :is(.case-board,.case-sheet,.case-cover,.case-leaf__back,.case-scroll-hint,.case-page-controls),html.case-static :is(.case-board,.case-sheet,.case-cover,.case-leaf__back,.case-scroll-hint,.case-page-controls){display:none}
html:not(.case-enhanced) .case-leaf__front::after,html.case-static .case-leaf__front::after{display:none}
@media(max-width:600px){
 .case-reader .case-page-title{font-size:22px}
 .case-reader :is(.case-page-top,.case-character-middle,.case-packaging-top,.case-system-grid){grid-template-columns:1fr;gap:24px}
 .case-reader .case-photo{max-width:70%;margin:auto}
 .case-reader .case-page-top .case-page-title{padding:0}
 .case-reader .case-page-top--reverse .case-photo{order:-1}
 .case-reader .case-page-content--characters{--clip-left:65%}
 .case-reader .case-packaging-top .case-photo:first-child{height:65cqw;max-height:none}
 .case-reader .case-packaging-top .case-page-title{margin-bottom:24px}
 .case-reader .case-profile-top{height:auto;min-height:60cqw}
 .case-reader .case-photo--mark{height:50cqw;max-width:100%}
 .case-reader .case-system-grid>.case-packshots{max-width:80%;margin:auto}
}
@media(max-width:600px){
 html:not(.case-enhanced) .case-page-title,html.case-static .case-page-title{font-size:22px}
 html:not(.case-enhanced) .case-page-top--reverse .case-photo,html.case-static .case-page-top--reverse .case-photo{order:-1}
 html:not(.case-enhanced) .case-page-content--characters,html.case-static .case-page-content--characters{--clip-left:65%}
 html:not(.case-enhanced) :is(.case-page-top,.case-character-middle,.case-packaging-top,.case-system-grid),html.case-static :is(.case-page-top,.case-character-middle,.case-packaging-top,.case-system-grid){grid-template-columns:1fr;gap:24px}
 html:not(.case-enhanced) .case-photo,html.case-static .case-photo{max-width:70%;margin:auto}
 html:not(.case-enhanced) .case-packaging-top .case-photo:first-child,html.case-static .case-packaging-top .case-photo:first-child{height:65cqw;max-height:none}
 html:not(.case-enhanced) .case-profile-top,html.case-static .case-profile-top{height:auto;min-height:60cqw}
 html:not(.case-enhanced) .case-photo--mark,html.case-static .case-photo--mark{height:50cqw;max-width:100%}
}