.story-22{--bg:#f6f0e5;--ink:#292727;--accent:#97325f;--panel:#e9dfcf}

.story{background:var(--bg);color:var(--ink);overflow:clip;font-family:"Yu Gothic UI",Meiryo,sans-serif;line-height:1.85}.story *{box-sizing:border-box}.story .wrap{width:min(1280px,90%);margin-inline:auto}.story h2,.story h3,.story p,.story figure{margin:0}.story .hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(24px,4vw,72px);min-height:min(780px,86svh);padding-block:clamp(46px,7vw,108px)}.story .pitch{position:relative;z-index:1}.story h1{font-size:clamp(.9rem,1.22vw,1.1rem);font-weight:650;line-height:1.7;margin:.9rem 0 1.5rem}.story .display{font-size:clamp(2.35rem,4.1vw,4.6rem);font-weight:730;line-height:1.33;letter-spacing:-.055em;line-break:strict;word-break:auto-phrase}.story .lead{margin:1.35rem 0;max-width:36em}.story .word{font:italic 400 clamp(1.25rem,2.2vw,2.3rem)/1.15 Georgia,serif;color:var(--accent)}.story .visual{min-width:0}.story .visual svg{display:block;width:100%;height:auto}.story figcaption{display:flex;justify-content:space-between;gap:10px;border-top:1px solid currentColor;padding-top:.55rem;margin-top:.7rem;color:var(--accent);font:500 .76rem/1.5 monospace}.story .cta{display:inline-flex;align-items:center;justify-content:space-between;gap:1.5em;background:var(--ink);color:var(--bg);font-weight:700;padding:.65em 1.25em;text-decoration:none;min-height:46px}.story .cta::after{content:'↗';font-family:Arial}.story .cta:hover{box-shadow:inset 0 -3px var(--accent)}.story .intro,.story .demo,.story .service,.story .closing{padding-block:clamp(52px,7vw,110px)}.story .intro{border-top:1px solid color-mix(in srgb,var(--ink) 32%,transparent)}.story .kicker{font:600 .79rem/1.4 monospace;letter-spacing:.1em;color:var(--accent);margin-bottom:1rem}.story h2{font-size:clamp(1.75rem,3.3vw,3.4rem);line-height:1.4;letter-spacing:-.04em;word-break:auto-phrase}.story h3{font-size:clamp(1.18rem,1.85vw,1.6rem);line-height:1.5}.story .intro .inner,.story .service .inner,.story .closing .inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(25px,5vw,80px);align-items:start}.story .demo{background:var(--panel)}.story .demo .note{margin:1rem 0 1.75rem;max-width:58em}.story .instrument{display:grid;grid-template-columns:minmax(225px,.72fr) minmax(0,1.28fr);gap:clamp(14px,3vw,44px);border-top:2px solid var(--accent);padding-top:1.5rem}.story .keys{display:flex;align-content:flex-start;align-items:flex-start;gap:9px;flex-wrap:wrap}.story .keys label{display:flex;align-items:center;gap:.4em;flex-wrap:wrap;font-weight:650}.story select,.story button{color:var(--ink);background:var(--bg);border:1px solid currentColor;padding:.55em .85em;min-height:44px;border-radius:3px;font-size:1rem;max-width:100%}.story option{background:var(--bg);color:var(--ink)}.story button:active{transform:translateY(1px)}.story button:hover,.story button[aria-pressed=true]{background:var(--ink);color:var(--bg)}.story .keys select{width:100%}.story .keys input{width:20px;height:20px}.story [data-reset]{background:transparent;text-decoration:underline}.story .output{padding:clamp(20px,3vw,46px);background:var(--bg);min-height:12rem;overflow-wrap:anywhere;border-left:3px solid var(--accent)}.story .output h3,.story .output h4{margin:.4em 0}.story .output article,.story .output aside{padding:.8em 0;border-top:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}.story .output article p{margin:.25em 0}.story .output small{font-weight:650;color:var(--accent)}.story .demo .cta{margin-top:1.7rem}.story .service article+article{border-top:1px solid var(--accent);margin-top:1.4em;padding-top:1.4em}.story .service h3,.story .closing h3{margin-bottom:.6rem}.story .closing{background:var(--panel)}.story details{border-block-start:1px solid currentColor;padding:.6em 0}.story summary{font-weight:700;padding:.65em 0;min-height:44px}.story details p{padding:.5em 0}.story .closing .cta{margin-top:1.2em}
@media(min-width:801px){.story .hero{position:relative}}
@media(max-width:800px){.story .hero,.story .instrument,.story .intro .inner,.story .service .inner,.story .closing .inner{grid-template-columns:1fr}.story .hero{min-height:0;gap:26px;padding-block:36px}.story .display{font-size:clamp(2.05rem,6vw,3.2rem)}.story .visual{width:min(100%,560px);margin:auto}.story .kicker{margin-bottom:.6rem}.story .intro,.story .demo,.story .service,.story .closing{padding-block:46px}.story .keys{align-items:center}.story .keys label{min-height:44px}.story h1{margin:.5rem 0 .9rem}.story .lead{margin:1em 0}}

.story-22 .hero{grid-template-columns:1.13fr .87fr}.story-22 .pitch{grid-column:2;grid-row:1}.story-22 .visual{grid-column:1;grid-row:1}.story-22 .visual svg{animation:galleryShift .8s ease-out;box-shadow:-14px 14px #dbd2c2}.story-22 .display,.story-22 .intro h2{font-family:Yu Mincho,serif}.story-22 .exhibit{width:min(100%,300px);height:140px;background:repeating-radial-gradient(ellipse at 100% 90%,#f5d0ba 0 4px,#ae456f 5px 14px)}.story-22 .piece1{background:repeating-radial-gradient(ellipse at 19% 80%,#f4d5a7 0 8px,#925c43 9px 15px)}.story-22 [data-view=dense] .output{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}.story-22 .output.changed .exhibit{animation:galleryShift .5s ease-out}
@keyframes galleryShift{from{transform:translate(12px,-14px) rotate(2deg)}}
@media(max-width:800px){.story .hero,.story .instrument,.story .pitch{display:block}.story .visual{margin:20px auto 0;transform:none}.story .visual svg{height:auto;max-height:285px}.story .output{margin-top:1.2rem}.story .hero{padding-block:30px}.story .intro .inner,.story .service .inner,.story .closing .inner{grid-template-columns:minmax(0,1fr)}.story .keys select{width:100%}.story .keys label{flex:1 1 10rem}.story .visual figcaption{font-size:.73rem}}

.story-22 .gallery-window{min-width:0;overflow:hidden;border:1px solid #b9a995;background:#f8efe3}.story-22 .gallery-mat{height:clamp(98px,12vw,160px);background:#d4c8af;position:relative;overflow:hidden;perspective:660px;transition:height .55s}
.story-22 .gallery-mat i{position:absolute;top:17%;left:32%;height:69%;width:35%;box-shadow:3px 5px 10px #503a222a;border:5px solid #fffbf5;transition:transform .72s cubic-bezier(.24,.8,.32,1),opacity .65s}
.story-22 .gallery-mat i:nth-child(1){background:repeating-radial-gradient(ellipse at 0 100%,#8c4c3a 0 2px,#e6b190 3px 6px);transform:translateX(-94%) rotateY(18deg)}
.story-22 .gallery-mat i:nth-child(2){background:radial-gradient(ellipse at 50% 50%,#d2b26b 0 32%,transparent 33%),repeating-conic-gradient(from 27deg,#503d39 0 23deg,#995d4c 25deg 55deg);transform:rotate(-4deg)}
.story-22 .gallery-mat i:nth-child(3){background:repeating-linear-gradient(36deg,#ebce96 0 6px,#a9754b 8px 10px,#d8a877 12px 20px);transform:translateX(94%) rotateY(-18deg)}
.story-22 [data-gallery=screen] .gallery-mat i{opacity:.12;transform:scale(.54)}
.story-22 [data-gallery=screen][data-piece="0"] .gallery-mat i:nth-child(1),.story-22 [data-gallery=screen][data-piece="1"] .gallery-mat i:nth-child(3){opacity:1;transform:translateX(0) rotateY(0) scale(3.1);z-index:1}
.story-22 .gallery-chrome{display:flex;align-items:center;gap:3px;background:#fffaf3;padding:4px 12px;font-size:.72rem;color:#42372d;overflow:hidden;max-height:0;opacity:0;transition:max-height .5s,opacity .4s}
.story-22 .gallery-chrome i{width:5px;height:5px;border-radius:50%;background:#917d6e}.story-22 .gallery-chrome span{margin-left:10px}
.story-22 [data-gallery=screen] .gallery-chrome{max-height:2.2rem;opacity:1}.story-22 .gallery-window .output{margin:0;border:0}
@media(prefers-reduced-motion:reduce){.story-22 .gallery-window *{transition:none!important}}html[data-motion=reduced] .story-22 .gallery-window *{transition:none!important}

.hero .display { overflow-wrap: normal; line-break: strict; text-wrap: balance; }
.hero .display > [data-wrap-group] { display: inline-block; white-space: nowrap; }


/* Individual project walk-throughs */
.hp-feature, .hp-handoff {box-sizing:border-box;max-width:100%;width:min(1180px,90%);margin-inline:auto;grid-column:1/-1;overflow-wrap:break-word;}
.hp-feature {padding-block:clamp(38px,6.2vw,90px);}
.hp-feature .hp-heading,.hp-handoff h2{font-size:clamp(1.65rem,3.8vw,3.45rem);line-height:1.28;letter-spacing:-.045em;max-width:22em;text-wrap:balance}
.hp-feature p,.hp-handoff p{line-height:1.9;max-width:46em}
.hp-feature h3,.hp-handoff h3 {line-height:1.45;letter-spacing:-.02em}
.hp-feature .hp-intro,.hp-handoff .hp-intro{margin:1rem 0 2rem;}
.hp-feature details,.hp-handoff details{margin:0;border-block-end:1px solid currentColor;}
.hp-feature summary,.hp-handoff summary{padding:14px 5px;cursor:pointer;font-weight:bold;min-height:44px;}
.hp-feature details>p,.hp-handoff details>p {padding:0 5px 20px;}
.hp-feature summary:focus-visible,.hp-handoff summary:focus-visible,.hp-feature label:focus-within {outline:3px solid currentColor;outline-offset:3px;}
.hp-handoff {padding:clamp(32px,5vw,72px) 0}
.hp-handoff dl{margin:1.55rem 0 0;display:grid;grid-template-columns:minmax(10em,.43fr) minmax(0,1fr);border-top:1px solid currentColor;}
.hp-handoff dt,.hp-handoff dd{margin:0;padding:1.1rem 0;border-bottom:1px solid currentColor;}
.hp-handoff dt{font-weight:750}.hp-handoff dd{padding-inline-start:1.2rem;line-height:1.85;}
@media(max-width:620px){.hp-handoff dl{display:block}.hp-handoff dt{border:0;padding-bottom:.12rem}.hp-handoff dd{padding:.15rem 0 1rem}.hp-feature,.hp-handoff{width:90%;}}
@media (prefers-reduced-motion:reduce){.hp-feature *,.hp-feature *::before,.hp-feature *::after,.hp-handoff *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}
html[data-motion="reduced"] :is(.hp-feature,.hp-handoff) *,html[data-motion="reduced"] .hp-feature *::before,html[data-motion="reduced"] .hp-feature *::after {animation:none!important;transition:none!important;}
.gallery-hang{border-block:1px solid #9b8470}.gallery-hang header{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,6vw,80px)}.gallery-hang .hp-heading{flex:1.02;font-family:"Yu Mincho",serif}.gallery-hang .hp-intro{flex:1;margin:0}.gallery-hanging{margin-top:2.5rem;display:grid;grid-template-columns:1.05fr .77fr 1fr;gap:clamp(12px,2.7vw,38px);align-items:start}.gallery-hanging figure:nth-child(2){margin-top:15%}.gallery-hanging figure:nth-child(3){margin-top:7%}.print{position:relative;isolation:isolate;aspect-ratio:.96;overflow:hidden;box-shadow:4px 6px 0 #8d806644;border:7px solid #fff7e8;outline:1px solid #c8b9a7}.print i{display:block;position:absolute}.print-a{background:#d85547}.print-a i:first-child{width:116%;height:61%;left:-12%;top:19%;border-radius:50%;border:clamp(15px,3vw,44px) solid #f6cf80;transform:rotate(-45deg)}.print-a i+i{width:30%;height:100%;background:#33314a;left:53%;top:42%;transform:rotate(37deg)}.print-b{background:#475f58;aspect-ratio:.75}.print-b i{inset:-15%;background:repeating-linear-gradient(118deg,#c8c391 0 17px,#263e39 18px 32px,#9b7e54 33px 35px);clip-path:ellipse(43% 38% at 48% 51%)}.print-c{background:#eab699}.print-c i:first-child{background:#6a3155;width:75%;height:65%;left:-5%;bottom:-7%;border-radius:100% 0 0}.print-c i+i{background:#f5da87;width:60%;aspect-ratio:1;top:13%;right:-8%;border-radius:50%;box-shadow:-18px 18px 0 #ba605a}.gallery-hanging summary{font-family:"Yu Mincho",serif;font-size:1.1rem}.gallery-hanging details p{font-size:.9rem}.gallery-hang[data-seen=true] .print{animation:hang-print .95s both;transform-origin:50% 0}.gallery-hang[data-seen=true] figure:nth-child(2) .print{animation-delay:.12s}.gallery-hang[data-seen=true] figure:nth-child(3) .print{animation-delay:.24s}@keyframes hang-print{from{transform:rotate(-2.5deg) translateY(-8px)}}
.gallery-list{display:grid;grid-template-columns:.84fr 1.16fr;gap:1.4rem clamp(22px,6vw,90px)}.gallery-list .hp-intro{grid-column:1;margin:0}.gallery-list .gallery-index{grid-column:2;grid-row:1/3;border-top:1px solid #796a58}.gallery-index summary{color:#843050;font-size:clamp(1.06rem,1.8vw,1.3rem)}
@media(max-width:700px){.gallery-list,.gallery-hang header{display:block}.gallery-hang .hp-intro,.gallery-list .hp-intro{margin:1rem 0}.gallery-hanging{gap:1.2rem;grid-template-columns:1fr}.gallery-hanging figure,.gallery-hanging figure:nth-child(2),.gallery-hanging figure:nth-child(3){display:grid;grid-template-columns:38% 1fr;align-items:start;gap:1rem;margin:0}.gallery-hanging figure:nth-child(2){grid-template-columns:1fr 38%}.gallery-hanging figure:nth-child(2) .print{grid-column:2}.gallery-hanging figure:nth-child(2) details{grid-row:1;grid-column:1}.gallery-hanging .print{aspect-ratio:1.1}.gallery-hanging details p{font-size:.85rem}}

.gallery-hanging { --hanging: clamp(0, calc((var(--cg-progress, .82) - .12) * 1.57), 1); }
.gallery-hang .gallery-hanging .print { animation: none; }
.gallery-hang .print-a {
  transform-origin: 50% 8%; transform: translateY(calc(13px - 19px * var(--hanging))) rotate(calc(-4deg + 5deg * var(--hanging)));
}
.gallery-hang .print-b {
  transform-origin: 50% 10%; transform: translateY(calc(-15px + 23px * var(--hanging))) rotate(calc(3deg - 4deg * var(--hanging)));
}
.gallery-hang .print-c { background: #fff5e2; }
.edition-art {
  position: absolute; overflow: hidden; inset: 0 0 21%; background: #eab699; z-index: 1;
  transform-origin: 50% 0;
  transform: translateY(calc(1% + 3% * var(--hanging))) scale(calc(1.03 - .22 * var(--hanging)));
}
.edition-label {
  position: absolute; z-index: 2; inset: auto 5% 2%; padding: .17em .28em; color: #332e29; background: #fff5e2; line-height: 1.4;
  transform: translateX(calc(12px - 12px * var(--hanging)));
}
.edition-label small, .edition-label b, .edition-enquiry { display: block; }
.edition-enquiry::after { content: ''; position: absolute; inset: 0; }
.edition-label:focus-within { outline: 3px solid #914114; outline-offset: -1px; }
.edition-label small { font-size: clamp(.58rem, .95vw, .78rem); color: #66394b; }
.edition-label b { font: 700 clamp(.82rem, 1.65vw, 1.45rem)/1.4 "Yu Mincho", serif; }
.edition-enquiry { padding-block: .25em; color: #502944; font-weight: 700; font-size: clamp(.6rem, .94vw, .79rem); text-decoration: underline; text-underline-offset: .2em; }
.story-22 .gallery-next { display: inline-block; padding-block: .7em .1em; color: #782c50; text-underline-offset: .3em; }
@media (max-width: 680px) {
  .gallery-hanging figure:last-child { display: block; }
  .gallery-hanging figure:last-child .print-c { width: 100%; aspect-ratio: 2.15; }
  .gallery-hanging .edition-art {
    inset: 0 auto 0 0; width: 52%; transform-origin: 50% 50%;
    transform: translateX(calc(11% - 14% * var(--hanging))) scale(calc(.98 - .12 * var(--hanging)));
  }
  .gallery-hanging .edition-label { inset: 23% 2% auto 55%; }
  .gallery-hanging .edition-label b { font-size: clamp(.88rem, 3.7vw, 1.13rem); }
  .gallery-hanging .edition-label small, .gallery-hanging .edition-enquiry { font-size: .72rem; }
}
@keyframes exhibit-hang-mat {
  0%, 100% { transform: translate(-3px, 8px) rotate(-2deg); }
  53% { transform: translate(13px, -11px) rotate(2deg); }
}
@keyframes exhibit-hang-seal {
  0%, 100% { transform: translate(13px, -7px) rotate(2deg); }
  53% { transform: translate(-17px, 8px) rotate(-3deg); }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="normal"] .story-22 .exhibit-mat { transform-origin: 435px 34px; animation: exhibit-hang-mat 7.2s ease-in-out -2.4s infinite; }
  html[data-motion="normal"] .story-22 .exhibit-seal { transform-origin: 468px 240px; animation: exhibit-hang-seal 7.2s ease-in-out -2.4s infinite; }
}