/* A shared radius family for framed artwork, from carousel to scroll story. */
:root { --art-radius-small:8px; --art-radius-large:14px; }
.project__picture,.project-card-transition__face--front { border-radius:var(--art-radius-small); }
.project__trigger:focus-visible { border-radius:var(--art-radius-small); }
/* Content comes first. Motion is an enhancement; the unenhanced page is complete. */
.studio-icon { width:28px; height:28px; flex:none; fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }
.studio-story { scroll-margin-top:8rem; margin:clamp(4rem,8vw,8rem) var(--page-edge) 0; }
.studio-story__intro { display:flex; align-items:end; justify-content:space-between; gap:2rem; padding-block:0 2.5rem; border-bottom:1px solid var(--line); }
.studio-story__intro h2 { max-width:15ch; margin:.8rem 0 0; font-size:clamp(2.4rem,4.6vw,4.6rem); font-weight:550; letter-spacing:-.045em; line-height:1.08; text-wrap:balance; }
.studio-story__intro>p { max-width:30ch; margin:0; font-size:.88rem; line-height:1.7; color:var(--reading); }
.story-frame { display:none; }
.story-step { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:clamp(2rem,7vw,7rem); padding-block:3rem; }
.story-inline { margin:0; overflow:hidden; border-radius:var(--art-radius-large); background:#eee8df; }
.story-inline img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.story-inline--portrait img { filter:grayscale(1); object-position:47% 45%; }
.story-inline--digital img { object-fit:contain; }
.story-inline--editorial img { object-fit:contain; background:#bbb8b3; }
.story-label { display:flex; align-items:center; gap:.8rem; margin:0 0 1.8rem; font-size:.76rem; font-weight:600; letter-spacing:.015em; }
.story-label .studio-icon { width:32px; height:32px; }
.story-copy h3 { max-width:13ch; margin:0 0 1.5rem; font-size:clamp(2.6rem,4.1vw,4.3rem); font-weight:550; letter-spacing:-.045em; line-height:1.08; text-wrap:balance; }
.story-copy h3 span { color:var(--muted); }
.story-copy>p:not(.story-label) { max-width:38ch; margin:0 0 1.2rem; color:var(--reading); font-size:1rem; line-height:1.75; }
.story-copy>p.story-note { max-width:42ch; font-size:.8rem; line-height:1.65; color:var(--muted); }
.story-link { display:inline-flex; align-items:center; gap:1.1rem; min-height:48px; margin-top:.3rem; font-size:.85rem; font-weight:600; line-height:1.5; text-decoration:none; }
.story-link .studio-icon { width:28px; height:28px; padding:4px; border:1px solid var(--line); border-radius:50%; box-sizing:content-box; }
.story-link:hover { text-decoration:underline; text-underline-offset:5px; }
.story-link:focus-visible { outline:2px solid var(--ink); outline-offset:5px; border-radius:2px; }
.uiux-number .studio-icon { width:27px; height:27px; color:var(--ink); }
.shooting-steps .studio-icon { display:block; margin-bottom:1.3rem; width:32px; height:32px; }
.design-service-list dt { display:flex; align-items:center; gap:.8rem; }
.design-service-list dt .studio-icon { width:25px; height:25px; }
.shooting-page h2,.shooting-page h3 { text-wrap:balance; }
.shooting-page .shooting-hero h1 { font-weight:550; line-height:1.06; }
.shooting-page .shooting-intro { line-height:1.5; }
.uiux-page .uiux-service-grid h3 { font-weight:550; }
.uiux-page .uiux-service-grid .uiux-service-description { max-width:51ch; }
.shooting-steps h3 { max-width:22ch; line-height:1.3; }
.design-work-image,.shooting-hero__image { overflow:hidden; }

@media(prefers-reduced-motion:no-preference) {
 .story-link .studio-icon { transition:transform .25s ease,background .25s ease; }
 .story-link:hover .studio-icon { transform:translateX(3px); background:color-mix(in srgb,var(--ink) 5%,var(--paper)); }
 .is-scroll-story .story-sequence { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(2rem,7vw,7rem); align-items:start; position:relative; }
 .is-scroll-story .story-frame { display:block; position:sticky; top:clamp(7rem,18svh,12rem); margin:0; padding-block:1.5rem; min-width:0; width:min(100%,80svh,720px); justify-self:center; z-index:2; }
 .story-frame__window { position:relative; aspect-ratio:4/3; overflow:visible; border-radius:var(--art-radius-large); background:transparent; isolation:isolate; perspective:1000px; }
 .story-layer { position:absolute; inset:0; margin:0; overflow:hidden; border-radius:var(--art-radius-large); background:#eee8df; transform-origin:50% 60%; backface-visibility:hidden; box-shadow:0 12px 35px rgb(0 0 0 / .09); }
 .is-springing .story-layer { will-change:transform,opacity; }
 .story-layer:nth-child(1) { z-index:3; }
 .story-layer:nth-child(2) { z-index:2; }
 .story-layer:nth-child(3) { z-index:1; }
 .story-layer img { width:100%; height:100%; display:block; object-fit:cover; }
 .story-layer.story-inline--digital img { object-fit:contain; background:#eee8df; }
 .story-layer.story-inline--editorial img { object-fit:contain; background:#bbb8b3; }
 .story-frame__caption { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:1rem; color:var(--muted); font-size:.69rem; line-height:1.5; }
 .story-frame__caption span:first-child { color:var(--ink); font-weight:600; }
 .story-track { display:flex; gap:5px; width:60px; flex:none; }
 .story-track i { height:2px; flex:1; border-radius:2px; background:var(--line); }
 .story-track i.is-current { background:var(--ink); }
 .is-scroll-story .story-step { display:flex; min-height:82svh; padding-block:4rem; box-sizing:border-box; }
 .is-scroll-story .story-inline { display:none; }
 .is-scroll-story .story-copy { min-width:0; }
 @supports (animation-timeline:view()) and (animation-range:entry 0% entry 100%) {
  [data-scroll-image] img { animation:studio-image linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
  @keyframes studio-image { from { transform:scale(1.045); } to { transform:scale(1); } }
 }
}

@media(prefers-reduced-motion:no-preference) {
 [data-scroll-reveal] { transition:opacity .75s cubic-bezier(.22,1,.36,1),translate .9s cubic-bezier(.22,1,.36,1); transition-delay:var(--reveal-delay,0ms); }
 [data-scroll-reveal][data-reveal-state="pending"] { opacity:0; translate:0 22px; }
 .reference-contributions [data-scroll-reveal]:nth-child(2),.shooting-steps [data-scroll-reveal]:nth-child(2) { --reveal-delay:70ms; }
 .reference-contributions [data-scroll-reveal]:nth-child(3),.shooting-steps [data-scroll-reveal]:nth-child(3) { --reveal-delay:140ms; }
 .reference-card .reference-cover img { transition:transform .8s cubic-bezier(.22,1,.36,1); }
 .reference-card a:hover .reference-cover img { transform:scale(1.025); }
}
@media(max-width:800px) { [data-scroll-reveal] { --reveal-delay:0ms!important; } }
@media(prefers-reduced-motion:reduce),print { [data-scroll-reveal] { opacity:1!important; translate:none!important; transition:none!important; } }

@media(max-width:760px) {
 :root { --art-radius-small:7px; --art-radius-large:11px; }
 .studio-story { margin-top:4.5rem; }
 .studio-story__intro { display:block; padding-bottom:2rem; }
 .studio-story__intro h2 { font-size:clamp(2.4rem,8.8vw,3.5rem); }
 .studio-story__intro>p { max-width:36ch; margin-top:1.3rem; font-size:.84rem; }
 .story-step { display:block; padding-block:2rem; }
 .story-inline { margin-bottom:2rem; }
 .story-copy h3 { font-size:clamp(2.3rem,8.2vw,3.2rem); max-width:14ch; margin-bottom:1.2rem; }
 .story-copy>p:not(.story-label) { font-size:.94rem; line-height:1.7; max-width:39ch; }
 .story-copy>p.story-note { font-size:.76rem; }
 .story-label { margin-bottom:1.1rem; font-size:.72rem; }
 .story-label .studio-icon { width:28px; height:28px; }
 .story-link { font-size:.8rem; }
 .story-link .studio-icon { width:24px; height:24px; }
}
@media(max-width:760px) and (prefers-reduced-motion:no-preference) {
 .is-scroll-story .story-sequence { display:block; }
 .is-scroll-story .story-frame { top:6.9rem; width:calc(100% + 2 * var(--page-edge)); justify-self:stretch; box-sizing:border-box; padding:.65rem 0 .85rem; margin:0 calc(-1 * var(--page-edge)); padding-inline:var(--page-edge); background:var(--paper); }
 .story-frame__window { height:clamp(175px,26svh,250px); aspect-ratio:auto; }
 .story-frame__caption { padding-top:.65rem; font-size:.65rem; }
 .is-scroll-story .story-step { min-height:65svh; padding:2.4rem 0 4.5rem; align-items:flex-start; }
}
@media(prefers-reduced-motion:reduce) {
 [data-scroll-reveal],[data-scroll-image] img,.story-layer { animation:none!important; transform:none!important; clip-path:none!important; opacity:1!important; }
 .story-link .studio-icon { transition:none; }
}
@media(forced-colors:active) {
 .story-track i { background:GrayText; }
 .story-track i.is-current { background:CanvasText; }
 .story-link .studio-icon { border-color:CanvasText; }
}
/* Restrained letter-shaped light: the solid glyph remains untouched.
   Two shadows below the text, no background wash or filter on the heading. */
.headline-glow { text-shadow:none; }
:root[data-theme="dark"] .headline-glow {
 text-shadow:0 0 .22em rgb(250 246 234 / .2),0 0 .65em rgb(232 237 248 / .12);
}
.headline-glow>span { text-shadow:inherit; }
@media(prefers-contrast:more),(forced-colors:active) {
 :root[data-theme="dark"] .headline-glow { text-shadow:none; }
}
@media print {
 :root[data-theme="dark"] .headline-glow { text-shadow:none; }
}