:root { --ground:#241c26; --ink:#fbf3ed; --sheet:#302632; --accent:#b9adf2; --rule:#8c818d; --page-gutter:clamp(24px,4.5vw,88px); font-family:'DM Sans',sans-serif; color-scheme:dark; }
* { box-sizing:border-box; }
body { margin:0; background:var(--ground); color:var(--ink); font-size:16px; line-height:1.5; }
html:has(.detail:modal) { overflow:hidden; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; cursor:pointer; border:0; background:transparent; border-radius:0; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin:0; }
[hidden] { display:none!important; }
:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.skip { position:fixed; top:12px; left:12px; z-index:50; padding:10px 15px; background:var(--ink); color:var(--ground); transform:translateY(-180%); }
.skip:focus { transform:none; }
.studio-shell { position:relative; z-index:1; width:min(100%,1800px); margin-inline:auto; min-height:100svh; padding:28px var(--page-gutter) 20px; display:flex; flex-direction:column; }
.studio-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.wordmark { display:block; font-size:clamp(72px,11.9vw,174px); font-weight:500; letter-spacing:-.085em; line-height:.84; margin-left:-.055em; }
.header-side { display:flex; gap:clamp(28px,3vw,48px); align-items:center; }
.header-side p { font-size:.875rem; line-height:1.4; }
.header-side nav { display:flex; gap:20px; }
.header-side button,.footer-button { padding:9px 0; min-height:44px; font-size:.875rem; line-height:1.4; }
.header-side button:hover,.header-side button[aria-expanded=true],.footer-button:hover,.footer-button[aria-expanded=true] { color:var(--accent); }
.studio-main { flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,7vw,128px); align-items:start; align-content:center; padding:40px 0 32px; }
.introduction { grid-column:1; grid-row:1; min-width:0; }
.introduction h1 { font-size:clamp(3rem,5.8vw,6.25rem); font-weight:400; line-height:1.02; letter-spacing:-.055em; overflow-wrap:anywhere; }
.introduction > p { max-width:430px; font-size:17px; line-height:1.5; margin-top:27px; }
.introduction .purpose { max-width:430px; margin-top:25px; font-size:.875rem; line-height:1.6; }
.studio-main.is-open .introduction { visibility:hidden; pointer-events:none; }
.areas { grid-column:2; grid-row:1; min-width:0; }
.studio-main.is-open .areas { grid-column:1; }
.areas h2 { font-size:.875rem; font-weight:400; margin:0 0 14px; }
.area-button { display:flex; justify-content:space-between; align-items:center; width:100%; gap:20px; text-align:left; padding:16px 0; min-height:72px; }
.area-name { display:block; min-width:0; font-size:clamp(1.5rem,2.45vw,2.25rem); line-height:1.16; letter-spacing:-.035em; overflow-wrap:anywhere; transition:transform 230ms cubic-bezier(.2,.85,.2,1); }
.row-action { display:block; flex:none; width:60px; height:24px; fill:none; stroke:var(--accent); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:transform 230ms cubic-bezier(.2,.85,.2,1); }
.area-button:hover .area-name,.area-button:focus-visible .area-name { transform:translateX(3px); }
.area-button:hover .row-action,.area-button:focus-visible .row-action { transform:translateX(4px); }
.area-button[aria-expanded=true] .area-name { color:var(--accent); }
.area-button[aria-expanded=true] .row-action { transform:rotate(180deg); }
.area-button[aria-expanded=true]:hover .row-action { transform:translateX(-4px) rotate(180deg); }
.contact-link { display:inline-flex; align-items:center; gap:20px; margin-top:24px; min-height:44px; font-size:.875rem; }
.contact-link span,.personal-link span,.detail-contact span { display:inline-block; transition:transform 200ms cubic-bezier(.2,.85,.2,1); }
.contact-link:hover span,.personal-link:hover span,.detail-contact:hover span { transform:translate(3px,-3px); }
.studio-footer { display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; justify-content:space-between; font-size:.875rem; padding-top:14px; }
.personal-link { min-height:44px; display:inline-flex; gap:10px; align-items:center; }
.motion-toggle { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:8px 0; font-size:.875rem; }
.contact-link:hover,.personal-link:hover,.motion-toggle:hover,.back:hover,.detail-contact:hover { color:var(--accent); }
.motion-options { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.motion-mark { font-size:22px; line-height:1; color:var(--accent); }
.detail { grid-column:2; grid-row:1; min-width:0; border:0; margin:0; padding:0; width:100%; max-width:none; color:var(--ink); background:transparent; overflow:visible; }
.detail:not([open]) { display:none; }
.detail[open]:not(:modal) { position:relative; display:block; }
.detail-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:26px; padding-bottom:10px; }
.back { padding:6px 0; font-size:.875rem; min-height:44px; text-align:left; }
.back span { display:inline-block; margin-right:9px; transition:transform 180ms; }
.back:hover span { transform:translateX(-4px); }
.line-icon { display:block; width:25px; height:25px; fill:none; stroke:var(--accent); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.detail-title { font-size:clamp(34px,3.65vw,53px); line-height:1.06; font-weight:400; letter-spacing:-.05em; margin-bottom:22px; overflow-wrap:anywhere; }
.detail-title:focus-visible { outline:0; box-shadow:-2px 0 0 var(--accent); padding-left:12px; margin-left:-14px; }
.detail-copy { font-size:16px; line-height:1.6; margin-top:18px; }
.studio-credit { margin-top:28px; font-size:.875rem; line-height:1.55; }
.scope { list-style:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 22px; font-size:.875rem; line-height:1.5; margin:26px 0 0; padding:0; }
.scope li { padding-left:13px; position:relative; }
.scope li::before { content:''; width:5px; height:1px; background:var(--accent); position:absolute; left:0; top:.75em; }
.detail-contact { display:inline-flex; align-items:center; gap:16px; min-height:44px; margin-top:21px; padding:7px 0; font-size:.875rem; }
.project-entry,.research-entry { margin-top:25px; padding-top:20px; border-top:1px solid var(--rule); }
.selected-work { margin-top:24px; }
.selected-work > h2 { font-size:.875rem; font-weight:400; }
.project-entry h3,.research-entry h2 { font-size:24px; line-height:1.15; font-weight:400; letter-spacing:-.035em; margin:8px 0 12px; }
.project-entry p,.research-entry p { font-size:14px; line-height:1.5; }
.project-entry img { width:100%; height:auto; display:block; margin-top:15px; }
.research-meta,.project-credit { font-size:.875rem!important; }
.pointer-layer { position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.pointer-trace { position:absolute; top:0; left:0; width:240px; height:170px; stroke:var(--accent); stroke-width:.8; opacity:0; transition:opacity 650ms ease; }
.pointer-trace[data-active=true] { opacity:.065; }
.noscript { padding:20px 4.5vw; }
@media(min-width:781px) and (max-height:760px) {
  .studio-shell { padding-top:21px; }
  .wordmark { font-size:clamp(72px,10.2vw,140px); }
  .studio-main { padding-top:20px; padding-bottom:17px; }
  .studio-footer { padding-top:10px; }
  .introduction h1 { font-size:clamp(3rem,5.8vw,5.125rem); }
  .introduction > p { font-size:16px; margin-top:21px; }
  .introduction .purpose { margin-top:18px; }
  .area-button { padding-block:12px; min-height:60px; }
  .detail-controls { margin-bottom:19px; }
  .detail-title { font-size:clamp(31px,3.3vw,43px); margin-bottom:18px; }
  .detail-copy { font-size:15px; margin-top:15px; }
  .scope { margin-top:20px; }
}
@media(max-width:1000px) { .header-side { gap:25px; } .header-side p { display:none; } .studio-main { gap:6%; } .row-action { width:48px; } }
@media(max-width:780px) {
  .studio-shell { padding:24px 6vw 18px; }
  .studio-header { align-items:center; }
  .wordmark { font-size:clamp(58px,13vw,100px); }
  .header-side nav { gap:15px; }
  .header-side button { min-height:44px; }
  .studio-main { grid-template-columns:minmax(0,1fr); align-items:start; align-content:start; gap:30px; padding:43px 0 32px; }
  .introduction { grid-column:1; grid-row:1; padding:0; }
  .introduction h1 { font-size:clamp(64px,12vw,96px); max-width:600px; }
  .introduction > p { font-size:16px; margin-top:25px; max-width:540px; }
  .introduction .purpose { margin-top:19px; }
  .studio-main.is-open .introduction { visibility:visible; }
  .areas,.studio-main.is-open .areas { grid-column:1; grid-row:2; }
  .area-button { gap:16px; padding-block:14px; min-height:66px; }
  .area-name { font-size:clamp(25px,4.5vw,35px); }
  .row-action { width:48px; }
  .areas h2 { margin-bottom:9px; }
  .contact-link { margin-top:20px; }
  .studio-footer { gap:4px 20px; justify-content:flex-start; }
  .detail:modal { position:fixed; inset:0; width:100%; max-width:none; max-height:100dvh; height:100dvh; margin:0; overflow-y:auto; overscroll-behavior:contain; padding:0 6vw 38px; background:var(--sheet); }
  .detail::backdrop { background:var(--ground); }
  .detail-controls { position:sticky; top:0; z-index:2; background:var(--sheet); padding:18px 0 15px; margin-bottom:22px; }
  .detail-title { font-size:clamp(38px,8vw,62px); }
  .detail-copy { font-size:16px; margin-top:20px; }
  .scope { margin-top:27px; }
  .detail-contact { margin-top:24px; }
  .pointer-trace { display:none; }
}
@media(max-width:560px) { .studio-header { flex-wrap:wrap; gap:16px; } .header-side { width:100%; } .header-side nav { gap:24px; } .wordmark { font-size:20vw; } }
@media(max-width:360px) { .introduction h1 { font-size:3.25rem; } .area-name { font-size:1.5rem; } .scope { grid-template-columns:1fr; } }
html[data-motion=reduce] *,html[data-motion=reduce] *::before,html[data-motion=reduce] *::after { transition:none!important; }
html[data-motion=reduce] .pointer-trace { display:none; }
@media(prefers-reduced-motion:reduce) { html:not([data-motion=full]) *,html:not([data-motion=full]) *::before,html:not([data-motion=full]) *::after { transition:none!important; } html:not([data-motion=full]) .pointer-trace { display:none; } }
@media(hover:none),(pointer:coarse),(forced-colors:active) { .pointer-trace { display:none; } }
@media(forced-colors:active) { .row-action,.line-icon { stroke:ButtonText; } .area-button[aria-expanded=true] .area-name { color:ButtonText; } :focus-visible { outline-color:Highlight; } .detail-title:focus-visible { outline:2px solid Highlight; box-shadow:none; } }

.inquiry-intro { font-size:15px; line-height:1.5; margin-bottom:18px; }
.inquiry-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
#inquiry-form label { display:block; font-size:.875rem; line-height:1.5; }
#inquiry-form input:not([type=hidden]),#inquiry-form textarea { display:block; width:100%; min-width:0; font:inherit; font-size:16px; line-height:1.5; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--rule); border-radius:0; padding:9px 0; min-height:44px; }
#inquiry-form textarea { resize:vertical; min-height:88px; }
#inquiry-form input::placeholder,#inquiry-form textarea::placeholder { color:inherit; }
.inquiry-message { margin-top:16px; }
.inquiry-actions { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:15px; }
.inquiry-submit { display:inline-flex; align-items:center; gap:18px; padding:8px 0; min-height:44px; font-size:.875rem; color:var(--accent); }
.inquiry-submit span { font-size:24px; line-height:1; }
.inquiry-submit:disabled { cursor:wait; }
.inquiry-email { min-height:44px; display:inline-flex; align-items:center; gap:10px; font-size:.875rem; }
.inquiry-email:hover { color:var(--accent); }
.inquiry-note { font-size:.8125rem; line-height:1.5; margin-top:12px; max-width:48ch; }
.inquiry-status { font-size:.875rem; line-height:1.5; margin-top:12px; }
.inquiry-status:empty { display:none; }
.inquiry-success h2 { font-size:28px; font-weight:400; line-height:1.15; letter-spacing:-.035em; }
.inquiry-success p { margin:18px 0; font-size:16px; }
.confirmation { flex:1; display:flex; align-items:center; padding:55px 0; }
.confirmation h1 { font-size:clamp(48px,7vw,88px); line-height:1; font-weight:400; letter-spacing:-.055em; }
.confirmation p { max-width:45ch; margin:28px 0 12px; }
@media(max-width:420px) { .inquiry-pair { grid-template-columns:minmax(0,1fr); gap:16px; } }
@media(forced-colors:active) { #inquiry-form input:not([type=hidden]),#inquiry-form textarea { color:FieldText; background:Field; border-bottom-color:FieldText; } .inquiry-submit { color:ButtonText; } }