:root {
  --paper: #e7f0f4;
  --sand: #d2e3eb;
  --white: #f1f8fa;
  --ink: #14242c;
  --muted: #435d69;
  --line: #acc4cf;
  --accent: #2f657e;
  --sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Heiti SC', system-ui, sans-serif;
  --display: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Heiti SC', sans-serif;
  --sky: radial-gradient(ellipse at 8% 106%, #e4f6ff 0%, #d2e9f4 27%, transparent 63%), radial-gradient(ellipse at 93% 6%, #6999ae 0%, #7eabbd 30%, transparent 72%), linear-gradient(130deg, #b9cad0, #a2bdca 58%, #a9bac1);
  --edge: clamp(24px, 4.45vw, 72px);
  --section: clamp(76px, 9vw, 144px);
  --gap: clamp(20px, 2.25vw, 32px);
  --radius: 13px;
  --header: 68px;
  --ease: cubic-bezier(.2, .75, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--sans); }
body, button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; width: 100%; object-fit: cover; }
picture { display: contents; }
svg { display: block; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
::selection { background: #b5d8e8; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
[hidden] { display: none !important; }
.frame { max-width: 1440px; width: 100%; padding-inline: var(--edge); margin-inline: auto; }
.section { padding-block: var(--section); }
.micro { font: 500 12px/1.5 var(--sans); letter-spacing: .095em; }
.skip-link { position: fixed; z-index: 50; top: 10px; left: 12px; padding: 10px 16px; background: var(--white); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 20; transition: background .25s; }
.site-header.scrolled, .case-page .site-header { background: rgb(231 240 244 / .91); backdrop-filter: blur(12px); }
.header-inner { height: var(--header); display: flex; justify-content: space-between; align-items: center; position: relative; }
.site-header.scrolled .header-inner::after, .case-page .header-inner::after { content: ''; position: absolute; inset: auto var(--edge) 0; border-bottom: 1px solid var(--line); pointer-events: none; }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 800 15px/1 var(--display); letter-spacing: .08em; }
.brand svg { width: 23px; height: 23px; }
.site-header nav { display: none; position: absolute; right: var(--edge); top: calc(var(--header) - 1px); width: min(300px, calc(100% - 2 * var(--edge))); padding: 13px 20px 20px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 16px 34px #193a4a21; }
.site-header nav.open { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.site-header nav a { position: relative; font-size: 13px; line-height: 1.35; font-weight: 650; letter-spacing: .055em; padding-block: 14px; border-bottom: 1px solid var(--line); }
.site-header nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; border-bottom: 1px solid currentColor; transform: scaleX(0); transform-origin: left; transition: transform .27s var(--ease); }
.site-header nav a:hover::after, .site-header nav a[aria-current]::after { transform: scaleX(1); }
.site-header nav a[aria-current] { color: var(--accent); }
.menu-toggle { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 12px 0 12px 12px; cursor: pointer; }
.menu-toggle i { width: 22px; height: 7px; border-block: 1px solid currentColor; }
.menu-toggle[aria-expanded='true'] i { color: var(--accent); }
.home .brand-label { font-size: 12px; font-weight: 600; }

@media (min-width: 691px) {
  .home .menu-toggle { display: none; }
  .home .site-header nav { position: static; display: flex; align-items: center; gap: 30px; width: auto; padding: 0; border: 0; background: none; box-shadow: none; }
  .home .site-header nav a { padding-block: 8px; border: 0; font-weight: 550; }
  .home .site-header nav a + a::before { content: ''; position: absolute; left: -15px; top: 50%; height: 11px; transform: translateY(-50%); border-left: 1px solid rgb(45 82 100 / .36); }
  .home .site-header nav a::after { bottom: 3px; }
}

.hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(to bottom, transparent 65%, var(--sand) 100%), var(--sky); }
.hero-inner { position: relative; display: flex; flex-direction: column; min-height: 100svh; }
.badge-exit { position: relative; z-index: 3; pointer-events: none; transform-origin: center top; }
.cursor-trail { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cursor-trail img { position: absolute; width: var(--trail-width); height: auto; aspect-ratio: 1.16; border: 2px solid #ebf6fa; box-shadow: 0 5px 18px #14242c35; object-fit: cover; }

.badge-rig { --badge-width: clamp(245px, 33svh, 294px); --badge-top: clamp(148px, 27.3svh, 300px); --badge-height: calc(var(--badge-width) * 1.33); position: relative; height: calc(var(--badge-top) + var(--badge-height)); z-index: 3; pointer-events: none; }
.lanyard { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.ribbon { fill: url(#ribbon); }
.ribbon-weave { fill: url(#weave); }
.ribbon-shadow { fill: #284552; opacity: .25; transform: translate(5px, 2px); filter: blur(5px); }
.ribbon-seam { stroke: #c0e0eb; opacity: .47; stroke-width: .65px; fill: none; stroke-dasharray: 1.7 1.7; }
.lanyard-type { fill: #0f2631; font: 750 10px var(--sans); letter-spacing: .12em; }
.badge-hint { position: absolute; top: calc(var(--badge-top) - 51px); left: calc(50% + 32px); display: flex; align-items: center; gap: 5px; color: #2b4e5d; font-size: 11px; letter-spacing: .07em; white-space: nowrap; }
.badge-hint svg { width: 15px; height: 15px; transform: rotate(180deg); }
.badge { position: absolute; top: var(--badge-top); left: calc(50% - var(--badge-width) / 2); width: var(--badge-width); height: var(--badge-height); display: flex; flex-direction: column; text-align: left; padding: 35px 18px 13px; border: 1px solid #5b8ca0; border-radius: var(--radius); background: radial-gradient(ellipse at 0 0, #c0e2ec99, transparent 55%), repeating-radial-gradient(ellipse at 106% 105%, transparent 0 16px, #21526618 17px 18px, transparent 19px 24px), linear-gradient(145deg, #7babbc 0%, #54899f 55%, #81abbc 100%); box-shadow: inset 0 1px 1px #e2f6ff91, inset -2px -2px 2px #1c4b6154, 0 2px 1px #37667a, 0 8px 17px #24495c36, 0 28px 45px -17px #18394b87; transform-origin: 50% 11px; cursor: grab; touch-action: none; pointer-events: auto; user-select: none; transform-style: preserve-3d; }
.badge.dragging { cursor: grabbing; box-shadow: inset 0 1px 1px #e2f6ff91, inset -2px -2px 2px #1c4b6154, 0 2px 1px #37667a, 0 12px 24px #24495c40, 0 32px 55px -15px #18394b87; }
.badge::after { content: ''; pointer-events: none; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, #fff0 3%, #fff4 14%, #fff0 28%, #fff0 83%, #c8f5ff2e 94%); }
.badge-ring { position: absolute; z-index: 2; top: -61px; left: calc(50% - 22px); width: 44px; height: 34px; border: 4px solid #78909b; border-top-color: #c6d6dc; border-right-color: #92a5ac; border-bottom-color: #475d68; border-radius: 12px 12px 15px 15px; box-shadow: inset 0 0 1px 1px #fffc, 1px 3px 3px #10253066; }
.badge-clasp { position: absolute; z-index: 2; top: -33px; left: calc(50% - 6px); width: 12px; height: 54px; border-radius: 3px 3px 8px 8px; background: linear-gradient(90deg, #566770, #d5e2e7 30%, #97a6ad 58%, #42525c); box-shadow: 1px 2px 1px #162e3b70; }
.badge-clasp::before { content: ''; position: absolute; top: 7px; left: -3px; right: -3px; height: 7px; border-radius: 2px; background: linear-gradient(#e2edf0, #5e737e); }
.badge-slot { position: absolute; top: 14px; left: calc(50% - 13px); width: 26px; height: 8px; border-radius: 4px; background: #376377; box-shadow: inset 0 2px 2px #183d50, 0 1px #c7e9f4; }
.badge-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; padding-bottom: 10px; font: 900 clamp(25px, 4svh, 37px)/1.02 var(--display); letter-spacing: -.065em; color: #122a35; }
.badge-name { display: inline-flex; align-items: baseline; gap: clamp(6px, .65vw, 9px); white-space: nowrap; }
.badge-name-en { font: 650 .47em/1 var(--sans); letter-spacing: .045em; }
.badge-id, .badge-bottom { font: 650 10px/1.35 var(--sans); letter-spacing: .08em; }
.badge-id { text-align: right; }
.badge-body { display: block; min-height: 0; flex: 1; margin-inline: 17px; }
.badge-body img { width: 100%; height: 100%; min-height: 0; border-radius: 4px; object-position: 52% 76%; box-shadow: 0 1px 1px #22455855; }
.badge-emblem { display: grid; place-items: center; width: 22px; height: 22px; color: #133e51; }
.badge-emblem svg { width: 21px; height: 21px; }
.badge-bottom { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding-top: 7px; border-top: 1px solid #133e5152; }
.barcode { width: 83px; height: 18px; margin-right: auto; background: repeating-linear-gradient(90deg,#173643 0 1px,transparent 1px 3px,#173643 3px 5px,transparent 5px 6px,#173643 6px 7px,transparent 7px 10px,#173643 10px 13px,transparent 13px 15px); }
.hero-copy { position: relative; z-index: 1; align-self: center; text-align: center; margin-top: -29px; padding-bottom: 14px; }
.hero h1 { font: 950 clamp(82px, 13.7svh, 124px)/1.01 var(--display); letter-spacing: -.105em; padding-right: .105em; color: #10222c; }
.hero-summary { display: grid; grid-template-columns: max-content minmax(0, 320px); align-items: baseline; gap: clamp(32px, 7vw, 105px); margin-top: 24px; text-align: left; }
.hero-role { font-size: 15px; font-weight: 600; text-wrap: balance; }
.hero-description { font-size: 14px; line-height: 1.8; text-wrap: balance; }
.hero-bottom { position: relative; z-index: 1; margin-top: auto; min-height: 62px; display: flex; align-items: center; justify-content: center; }
.scroll-link { display: flex; align-items: center; gap: 8px; padding: 10px; }
.scroll-link svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.scroll-link:hover svg { transform: translateY(3px); }

.section-index { margin-bottom: 22px; color: var(--muted); }
.section-index span { color: var(--accent); margin-right: 5px; }
.section h2 { font: 850 clamp(52px, 5.65vw, 80px)/1.08 var(--display); letter-spacing: -.065em; }
.works-heading, .split-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.works-heading p, .split-heading p { max-width: 264px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.filter-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 34px 0 26px; border-block: 1px solid var(--line); }
.filters { display: flex; flex-wrap: wrap; gap: 4px 23px; }
.filters button { position: relative; background: transparent; border: 0; padding: 14px 0; cursor: pointer; color: var(--muted); }
.filters button:hover, .filters button[aria-pressed='true'] { color: var(--ink); }
.filters button[aria-pressed='true']::after { content: ''; position: absolute; inset: auto 0 -1px; border-bottom: 2px solid var(--accent); }
.result-count { color: var(--muted); flex: none; }
.work-catalog { display: grid; gap: clamp(32px, 4.5vw, 64px); }
.work-category { min-width: 0; }
.work-category + .work-category { border-top: 1px solid var(--line); padding-top: clamp(22px, 3vw, 40px); }
.work-category-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 12px; }
.work-category-heading h3 { font: 800 clamp(21px, 3.1vw, 42px)/1.18 var(--display); letter-spacing: -.04em; }
.work-category:is([data-category='motion'], [data-category='photography']) .work-category-heading h3 { font-size: clamp(20px, 2.55vw, 34px); }
.work-category-heading p { margin-top: 5px; color: var(--muted); }
.work-category-number, .work-category-count { color: var(--accent); }
.work-category-description { margin: 15px 0 0; color: var(--muted); font-size: 14px; }
.work-pending { color: var(--muted); }
.work-category > .work-pending { margin: 16px 0 0; }
.project-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 4vw, 58px) var(--gap); align-items: start; margin-top: 22px; }
.project-card { grid-column: span 6; min-width: 0; }
.project-grid[data-layout='product'] .project-card:nth-child(odd) { grid-column: span 7; }
.project-grid[data-layout='product'] .project-card:nth-child(even) { grid-column: span 5; margin-top: clamp(26px, 4vw, 62px); }
.project-link { display: block; }
.project-image { position: relative; overflow: hidden; background: var(--sand); }
.project-image img { width: 100%; height: auto; transition: transform .65s var(--ease); }
.project-link:hover img, .project-link:focus-visible img { transform: scale(1.035); }
.project-image[data-device-cover] { display: flex; align-items: center; height: clamp(300px, 38vw, 520px); overflow: visible; background: transparent; }
.project-image[data-device-cover] img { width: 100%; height: 100%; object-fit: contain; }
.project-link:hover [data-device-cover] img, .project-link:focus-visible [data-device-cover] img { transform: translateY(-5px); }
.project-grid[data-layout='product'] .project-card:nth-child(2) { margin-top: clamp(12px, 2vw, 28px); }
.demo-project { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 58px); align-items: center; padding-top: clamp(24px, 3vw, 42px); border-top: 1px solid var(--line); }
.demo-cover { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; }
.demo-cover img { height: 100%; object-fit: contain; transition: transform .4s var(--ease); }
.demo-cover:hover img { transform: scale(1.015); }
.demo-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid rgb(241 248 250 / .75); border-radius: 50%; color: var(--white); background: rgb(20 36 44 / .7); transform: translate(-50%, -50%); font-size: 34px; }
.demo-copy { min-width: 0; }
.demo-copy .project-meta { margin-top: 0; }
.demo-copy h4 { margin: 10px 0 8px; font: 750 clamp(25px, 2.6vw, 37px)/1.2 var(--display); letter-spacing: -.04em; }
.demo-copy > p { margin-top: 14px; color: var(--muted); font-size: 14px; }
.demo-copy > p.micro { font-size: 11px; }
.demo-copy .demo-kind { margin-top: 5px; }
button.demo-action { border: 0; background: none; cursor: pointer; padding: 0; margin-top: 17px; min-height: 44px; }
.live-project { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--line); padding-top: clamp(28px, 4vw, 50px); scroll-margin-top: calc(var(--header) + 24px); }
.live-project-heading { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: start; margin-bottom: 26px; }
.live-project-heading .project-meta { margin-top: 0; }
.live-project h4 { margin: 10px 0 12px; font: 750 clamp(26px, 2.7vw, 38px)/1.25 var(--display); letter-spacing: -.045em; }
.live-english, .live-kind { color: var(--muted); overflow-wrap: anywhere; }
.live-kind { margin-top: 7px; }
.live-project-summary { min-width: 0; }
.live-project-summary > p { color: var(--muted); font-size: 14px; line-height: 1.85; }
.live-prototype-link { min-height: 44px; margin-top: 8px; }
.live-project-images { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: start; }
.live-project-images figure { min-width: 0; }
.live-project-images img { width: 100%; height: auto; object-fit: contain; }
.live-project-images figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 10px; color: var(--muted); }
.live-project-images figcaption span { opacity: .8; }
@media (max-width: 880px) {
  .live-project-heading { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .live-project-summary { max-width: 70ch; }
}
@media (max-width: 580px) {
  .live-project-images { grid-template-columns: minmax(0, 1fr); }
  .live-project-images { gap: 22px; }
  .live-project-images figcaption { font-size: 10px; }
}
.graphic-projects { margin-top: 22px; }
.graphic-project {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: var(--gap);
  align-items: start;
}
.graphic-project + .graphic-project {
  border-top: 1px solid var(--line);
  margin-top: clamp(28px, 5vw, 64px);
  padding-top: clamp(24px, 4vw, 48px);
}
.graphic-intro { position: sticky; top: calc(var(--header) + 22px); }
.graphic-intro h4 {
  margin: 8px 0 10px;
  font: 800 clamp(23px, 3vw, 38px)/1.15 var(--display);
  letter-spacing: -.045em;
}
.graphic-intro p { max-width: 28ch; color: var(--muted); }
.graphic-intro .micro { color: var(--muted); }
.graphic-intro p.micro { margin-top: 10px; }
.brand-stack { display: grid; margin-top: 22px; isolation: isolate; }
.brand-project + .brand-project { margin-top: clamp(28px, 5vw, 64px); }
.brand-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--gap);
  background: var(--paper);
}
.brand-project + .brand-project .brand-panel {
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 4vw, 48px);
}
.brand-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--gap); }
.brand-images img { height: auto; object-fit: contain; }
.brand-images figcaption { margin-top: 8px; color: var(--muted); }
.brand-images[data-brand-layout='campaign'] figure:first-child { grid-column: 1 / -1; width: min(100%, 620px); }
.brand-images[data-brand-layout='stickers'] img { width: auto; max-width: 100%; }
.brand-images[data-brand-layout='poster-series'] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(12px, 1.5vw, 22px); }
.brand-images[data-brand-layout='poster-series'] figure:first-child { grid-row: span 2; }
.brand-images[data-brand-layout='poster-series'] figure:last-child { padding-top: 10px; }
.brand-panel:has([data-brand-layout='poster-series']) h4 { text-wrap: balance; }
.brand-intro > .prototype-link { margin-top: 18px; min-height: 44px; }

.brand-panel[data-presentation='editorial'], .graphic-project[data-presentation='editorial'] {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}
[data-presentation='editorial'] > .graphic-intro { position: static; }
[data-presentation='editorial'] > .graphic-intro p { max-width: 70ch; }
.brand-panel[data-presentation='editorial'] .brand-images[data-brand-layout='campaign'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brand-panel[data-presentation='editorial'] .brand-images[data-brand-layout='campaign'] figure:first-child { grid-column: auto; width: 100%; }
.brand-panel[data-presentation='editorial'] .brand-images[data-brand-layout='stickers'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.graphic-project[data-presentation='editorial'] .graphic-viewport {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  overflow: visible;
  scroll-snap-type: none;
}
.graphic-project[data-presentation='editorial'] .graphic-viewport figure { width: auto; min-width: 0; }
.graphic-project[data-presentation='editorial'] .graphic-viewport figure:only-child { grid-column: 1 / -1; }
.graphic-project[data-presentation='editorial'] .graphic-gallery[data-graphic-layout='photos'] .graphic-viewport { grid-template-columns: minmax(0, .72fr) repeat(2, minmax(0, 1.14fr)); }
.graphic-project[data-presentation='editorial'] .graphic-gallery[data-graphic-layout='photos'] figure:first-child { grid-row: span 2; }

@media (min-width: 881px) and (prefers-reduced-motion: no-preference) {
  .brand-stack { --brand-overlap: clamp(110px, 24svh, 220px); }
  .brand-stack .brand-project:not(:last-child)::after {
    content: '';
    display: block;
    height: var(--brand-overlap);
  }
  .brand-stack .brand-project + .brand-project { margin-top: calc(-1 * var(--brand-overlap)); }
  .brand-stack[data-stack-ready] .brand-project:not(:last-child) .brand-panel {
    position: sticky;
    /* Keep the end of a tall panel in the viewport before pinning. */
    top: min(calc(var(--header) + 22px), calc(100dvh - var(--brand-height) - 24px));
    transform-origin: center bottom;
    transform: translateY(calc(var(--brand-covered, 0) * -7px)) scale(calc(1 - var(--brand-covered, 0) * .024));
  }
}
.graphic-gallery { min-width: 0; }
.graphic-gallery[data-graphic-layout='detail'] { max-width: 740px; }
.graphic-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 12px;
  margin-bottom: 8px;
  color: var(--muted);
}
.graphic-controls { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.graphic-controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}
.graphic-controls button:disabled { opacity: .4; cursor: default; }
.graphic-controls button:hover:not(:disabled) { color: var(--ink); }
.graphic-controls svg { width: 17px; height: 17px; }
.graphic-controls [data-board-step='1'] svg { transform: rotate(180deg); }
.graphic-viewport {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.graphic-viewport[data-board-viewport] { cursor: grab; }
.graphic-viewport:not([data-board-viewport]) { grid-auto-columns: 100%; }
.graphic-viewport.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.graphic-gallery[data-graphic-layout='campaign'] .graphic-viewport { grid-auto-columns: min(86%, 520px); }
.graphic-gallery[data-graphic-layout='detail'] .graphic-viewport { grid-auto-columns: min(89%, 460px); }
.graphic-gallery[data-graphic-layout='stickers'] .graphic-viewport { grid-auto-columns: min(82%, 410px); }
.graphic-viewport figure { min-width: 0; scroll-snap-align: start; }
.graphic-viewport figure:last-child { scroll-snap-align: end; }
.graphic-viewport figure:only-child { scroll-snap-align: start; }
.graphic-viewport img { height: auto; object-fit: contain; }
.graphic-viewport video { display: block; width: 100%; height: auto; object-fit: contain; cursor: default; }
.graphic-gallery[data-graphic-layout='photos'] { container-type: inline-size; }
.graphic-gallery[data-graphic-layout='photos'] .graphic-viewport { grid-auto-columns: max-content; }
.graphic-gallery[data-graphic-layout='photos'] figure {
  --photo-height: clamp(330px, 35vw, 480px);
  width: min(90cqw, calc(var(--photo-height) * var(--photo-ratio, 1)));
}
.graphic-gallery[data-graphic-layout='stickers'] img {
  height: clamp(260px, 43vw, 450px);
  object-fit: scale-down;
  object-position: left top;
}
.graphic-viewport figcaption { margin-top: 8px; color: var(--muted); }
.cover-placeholder { display: grid; align-content: center; justify-items: center; gap: 12px; min-height: 180px; aspect-ratio: 1.85; padding: clamp(16px, 3vw, 36px); text-align: center; background: #f2f1eb; }
.cover-placeholder strong { font-size: clamp(16px, 2.3vw, 30px); letter-spacing: -.035em; }
.cover-placeholder .work-pending { margin: 0; }
.cover-devices { background: linear-gradient(130deg, #d8e9ef, #bfd6e0); }
.device-diagram { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(7px, 2vw, 26px); width: min(100%, 430px); color: var(--accent); }
.device-diagram figure { display: grid; gap: 8px; place-items: center; align-content: end; }
.device-diagram svg { width: 100%; max-width: 120px; }
.device-diagram img { max-height: 175px; object-fit: contain; }
.device-diagram figcaption { font-size: clamp(10px, 1.05vw, 14px); }
.project-open { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 12px; background: var(--paper); padding: 10px 12px; transform: translateY(8px); opacity: 0; transition: transform .3s var(--ease), opacity .3s; }
.project-open svg { width: 16px; height: 16px; }
.project-link:hover .project-open, .project-link:focus-visible .project-open { opacity: 1; transform: none; }
.project-meta { display: flex; justify-content: space-between; gap: 6px; margin-top: 13px; color: var(--muted); }
.project-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
.project-title h4 { font: 700 clamp(23px, 2.5vw, 36px)/1.16 var(--display); letter-spacing: -.045em; margin: 0; }
.project-title svg { width: 20px; height: 20px; transition: transform .25s var(--ease), color .25s; }
.project-link:hover .project-title svg { transform: translate(3px, -3px); color: var(--accent); }
.project-link > p { color: var(--muted); font-size: 14px; margin-top: 5px; }
.work-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.work-tags li { border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; color: var(--muted); }


.about { background: var(--sand); padding-block: clamp(68px, 7.5vw, 112px); }
.about-grid { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); align-items: center; gap: clamp(36px, 8vw, 116px); }
.about-portrait > svg { width: 100%; height: auto; }
.about-portrait figcaption { margin-top: 12px; display: flex; justify-content: space-between; gap: 16px; color: var(--muted); }
.about-copy > p { margin-top: 16px; max-width: 470px; color: var(--muted); font-size: 15px; line-height: 1.8; text-wrap: pretty; }
.about-copy .about-lede { margin-top: clamp(18px, 2vw, 28px); max-width: 510px; color: var(--ink); font-size: clamp(20px, 2vw, 30px); font-weight: 650; line-height: 1.45; letter-spacing: -.025em; }
@media (prefers-reduced-motion: no-preference) {
  .badge-exit {
    opacity: calc(1 - var(--hero-exit, 0));
    transform: translateY(calc(var(--hero-exit, 0) * -26px)) scale(calc(1 - var(--hero-exit, 0) * .055));
  }
  .hero.is-exited .badge-exit:not(:has(.dragging, :focus-visible)) { visibility: hidden; }
  .hero-copy { opacity: calc(1 - var(--hero-exit, 0)); }
  .about > .frame > .section-index, .about-copy h2 { opacity: var(--about-title-enter, 1); }
  .about-portrait, .about-copy > :not(h2) {
    opacity: var(--about-body-enter, 1);
    transform: translateY(calc((1 - var(--about-body-enter, 1)) * 18px));
  }
}
.about .skills { max-width: 510px; margin-top: 27px; border-top: 1px solid var(--line); padding-top: 16px; }
.about .skills > span { color: var(--muted); }
.about .skills ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.about .skills li { border: 1px solid var(--line); border-radius: 6px; padding: 5px 11px; background: rgb(241 248 250 / .18); font-size: 13px; white-space: nowrap; transition: background .24s var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .about .skills li:hover { background: rgb(241 248 250 / .53); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .about-geometry { transform-box: fill-box; transform-origin: center; transition: transform 1.8s var(--ease); }
  .about-portrait > svg:hover .about-geometry { transform: rotate(7deg); }
}

.toolkit { margin-top: clamp(42px, 5.4vw, 76px); padding-top: clamp(21px, 2.5vw, 34px); border-top: 1px solid var(--line); }
.toolkit-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 13px; }
.toolkit-heading h3 { font: 760 clamp(22px, 2vw, 28px)/1.2 var(--display); letter-spacing: -.04em; }
.toolkit-heading span { color: var(--muted); text-transform: uppercase; }
.toolkit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 8px; margin-top: clamp(20px, 2.6vw, 34px); }
.toolkit-item { min-width: 0; display: grid; justify-items: center; align-content: start; gap: 9px; text-align: center; }
.toolkit-logo { width: clamp(35px, 3.2vw, 44px); height: clamp(35px, 3.2vw, 44px); object-fit: contain; }
.toolkit-name { color: var(--muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; text-wrap: balance; }

@media (min-width: 380px) {
  .toolkit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 691px) {
  .toolkit-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (min-width: 1160px) {
  .toolkit-grid { grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .toolkit-logo { transition: transform .25s var(--ease); }
  .toolkit-item:hover .toolkit-logo { transform: translateY(-2px) scale(1.07); }
}
.experience { --experience-time: minmax(160px, 1fr); padding-block: clamp(70px, 7.5vw, 110px); }
.experience-group { margin-top: clamp(26px, 3.2vw, 42px); }
.experience-group-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; margin-bottom: 13px; }
.experience-group-heading h3 { font: 700 clamp(17px, 1.55vw, 22px)/1.3 var(--display); }
.experience-group-heading .micro { color: var(--muted); text-transform: uppercase; }
.experience-labels, .experience-list li { display: grid; grid-template-columns: var(--experience-time) minmax(0, 2.25fr) minmax(0, 1.55fr) minmax(0, 2.65fr); gap: clamp(12px, 1.6vw, 23px); align-items: baseline; }
.experience-labels { padding-bottom: 9px; color: var(--muted); }
.experience-list { border-bottom: 1px solid var(--line); }
.experience-list li { border-top: 1px solid var(--line); padding-block: 14px; transition: background .23s; }
.experience-position { display: contents; }
.experience-period { color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .025em; white-space: nowrap; }
.experience h4 { margin: 0; font: 650 clamp(16px, 1.45vw, 19px)/1.35 var(--display); }
.experience-role, .experience-education li > p { font-size: 14px; }
.experience-description, .experience-campus p, .experience-school-en { color: var(--muted); font-size: 14px; }
.experience-education li { grid-template-columns: var(--experience-time) minmax(0, 2.25fr) minmax(0, 4.2fr); }
.experience-school-en { margin-top: 3px; font-size: 12px; }
.experience-campus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); border-block: 1px solid var(--line); }
.experience-campus li { padding-block: 14px; }
.experience-campus p { margin-top: 5px; }

@media (hover: hover) and (pointer: fine) {
  .experience-list li:hover { background: rgb(172 196 207 / .18); }
}
.faq { display: grid; grid-template-columns: 1fr 1.8fr; gap: var(--gap); }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: grid; grid-template-columns: 31px 1fr 20px; gap: 13px; align-items: center; min-height: 70px; padding-block: 14px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary strong { font-size: 17px; font-weight: 600; }
.faq summary .micro { color: var(--muted); }
.faq summary i { position: relative; width: 16px; height: 16px; color: var(--accent); }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; inset: 50% 0 auto; border-top: 1px solid currentColor; }
.faq summary i::after { transform: rotate(90deg); transition: transform .25s var(--ease); }
.faq details[open] i::after { transform: rotate(0); }
.faq details p { padding: 0 30px 23px 44px; color: var(--muted); font-size: 15px; }

.contact { background: var(--sky); }
.contact h2 { font-size: clamp(62px, 10vw, 145px); }
.contact-intro { max-width: 31em; margin-top: clamp(16px, 3vw, 35px); color: var(--muted); font-size: 16px; line-height: 1.8; }
.contact-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: start; gap: var(--gap); margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.contact-row > div > span.micro { display: block; color: var(--muted); margin-bottom: 7px; }
.contact-email { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.contact-secondary, .contact-availability { color: var(--muted); font-size: 14px; }
.contact-availability { margin-top: 8px; }
.contact-availability p { font: inherit; color: inherit; line-height: 1.7; }
.contact-availability p + p { margin-top: 3px; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.contact-action { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: var(--accent); font-size: 14px; text-underline-offset: 4px; }
button.contact-action { border: 0; background: none; padding: 0; cursor: pointer; }
.contact-email:hover, .contact-action:hover, .contact-action:focus-visible { text-decoration: underline; }
.contact-action svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.contact-action:hover svg { transform: translate(2px, -2px); }
.contact-copy-status { min-height: 1.5em; color: var(--accent); margin-top: 5px; }
.contact-mark svg { width: clamp(44px, 6vw, 90px); color: var(--accent); }
.site-footer { border-top: 1px solid var(--line); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; min-height: 73px; gap: 12px; }
.footer-edition, .footer-signature { color: var(--muted); }
.footer-signature + a { flex-shrink: 0; }
.footer-inner a { display: flex; align-items: center; gap: 7px; }
.footer-inner a:hover { color: var(--accent); }
.footer-inner svg { width: 14px; height: 14px; }

.case { padding-top: calc(var(--header) + 35px); padding-bottom: var(--section); }
.case-back { display: inline-flex; gap: 8px; align-items: center; padding-block: 7px; }
.case-back:hover { color: var(--accent); }
.case-back svg { width: 17px; height: 17px; }
.case-header { margin-block: 54px 24px; }
.case h1 { font: 850 clamp(52px, 8.5vw, 116px)/1.09 var(--display); letter-spacing: -.065em; }
.case-header p { margin-block: 14px 24px; font-size: clamp(17px, 2vw, 25px); color: var(--muted); }
.case-meta { display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); }
.case-image img { height: auto; max-height: 690px; object-fit: contain; background: var(--sand); }
[data-cover-crop="top"] img { aspect-ratio: 1.82; object-fit: cover; object-position: center top; }
.case-block { margin-block: clamp(30px, 5vw, 70px); padding-top: clamp(18px, 2.5vw, 32px); border-top: 1px solid var(--line); }
.case-block h2 { font: 800 clamp(27px, 3.4vw, 45px)/1.16 var(--display); letter-spacing: -.045em; margin-bottom: 12px; }
.case-block h3 { font: 700 clamp(16px, 1.8vw, 22px)/1.28 var(--display); }
.case-block > h3 { margin: 23px 0 8px; }
.case-block p { max-width: 66ch; color: var(--muted); }
.case-block .case-eyebrow { margin-bottom: 18px; }
.screen-group { border: 1px solid var(--line); background: rgb(241 248 250 / .35); padding: clamp(14px, 2.4vw, 30px); margin-block: 15px; }
.screen-group header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 13px; margin-bottom: 14px; }
.screen-group header span { color: var(--accent); }
.screen-group header p { flex-basis: 100%; font-size: 14px; }
.screen-group > .work-pending { background: var(--sand); padding: 14px; }
.case-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.case-media-grid > figure:only-child { grid-column: 1 / -1; }
.case-media-grid img { height: auto; object-fit: contain; }
.case-media-grid figcaption { margin-top: 6px; color: var(--muted); }
.visual-intro { margin-bottom: clamp(20px, 3vw, 40px); }
.case-media-grid[data-visual-layout='campaign'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-media-grid[data-visual-layout='detail'] { width: min(100%, 940px); margin-inline: auto; }
.case-media-grid[data-visual-layout='stickers'] { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.case-media-grid[data-visual-layout] figure a { display: block; cursor: zoom-in; }
.case-media-grid[data-visual-layout='stickers'] img { height: auto; aspect-ratio: 1; object-fit: contain; background: transparent; }
.screen-group:is([data-device='iphone'], [data-device='watch']) .case-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.screen-group:is([data-device='iphone'], [data-device='watch']) .case-media-grid > figure:only-child { grid-column: auto; }
.prototype-row { margin-top: 14px; }
.prototype-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 14px; text-underline-offset: 4px; }
.prototype-link svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.prototype-link:hover, .prototype-link:focus-visible { text-decoration: underline; }
.prototype-link:hover svg { transform: translate(2px, -2px); }
.board-gallery { width: min(100%, 720px); margin-inline: auto; }
.board-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; margin-bottom: 8px; }
.board-controls { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.board-controls button { width: 44px; height: 44px; border: 1px solid var(--line); color: var(--accent); background: none; cursor: pointer; }
.board-controls button:hover:not(:disabled) { background: var(--white); }
.board-controls button:disabled { opacity: .45; cursor: default; }
.board-toolbar a { min-height: 44px; }
.board-viewport { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; }
.board-viewport.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.board-viewport figure { min-width: 0; scroll-snap-align: start; }
.board-viewport img { width: 100%; height: auto; }
.board-viewport figcaption { margin-top: 8px; color: var(--muted); }
.process-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.process-list > div { border-bottom: 1px solid var(--line); padding-block: 8px 12px; }
.process-list p { margin-top: 5px; }
.case-block video { display: block; width: 100%; margin-top: var(--gap); background: var(--ink); }
.case-next { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-block: 1px solid var(--line); padding-block: 20px; }
.case-next span { display: block; color: var(--muted); }
.case-next strong { font: 700 clamp(28px, 5vw, 56px)/1.14 var(--display); letter-spacing: -.06em; }
.case-next svg { width: 30px; height: 30px; color: var(--accent); transition: transform .25s var(--ease); }
.case-next:hover svg { transform: translate(4px, -4px); }

.case-compact .case-header { max-width: 1100px; }
.case-compact .case-header .case-kind { font-size: clamp(13px, 1.35vw, 18px); letter-spacing: .01em; }
.case-compact .case-header .case-tools, .case-compact .case-header > p.micro { font-size: 12px; margin-block: 12px; }
.case-prose { max-width: 760px; }
.case-prose p { max-width: none; line-height: 1.9; }
.case-prose p + p { margin-top: 16px; }
.compact-showcase { max-width: 1120px; margin-inline: auto; }
.compact-showcase img { width: 100%; height: auto; object-fit: contain; }
.compact-showcase figcaption { max-width: 64ch; margin: 20px auto 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.compact-board { max-width: 900px; }
.image-enlarge { display: block; cursor: zoom-in; }
.case-return { min-height: 44px; }
.case-posters h1 { font-size: clamp(38px, 6vw, 82px); line-height: 1.25; }
.poster-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 58px) var(--gap); align-items: start; }
.poster-gallery figure:first-child { grid-column: 1 / -1; width: min(100%, 740px); margin-inline: auto; }
.poster-gallery img { width: 100%; height: auto; object-fit: contain; }
.poster-gallery figcaption { margin-top: 12px; color: var(--muted); }
.media-open { overflow: hidden; }
.media-dialog { padding: 0; border: 1px solid var(--line); color: var(--ink); background: var(--paper); width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); }
.media-dialog::backdrop { background: rgb(20 36 44 / .8); }
.media-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 16px; border-bottom: 1px solid var(--line); }
.media-toolbar h2, .media-toolbar p { min-width: 0; font-weight: 500; }
.media-toolbar button { min-width: 44px; min-height: 44px; border: 0; padding: 0 8px; background: none; cursor: pointer; white-space: nowrap; font-size: 13px; }
.media-toolbar button:hover { color: var(--accent); }
.media-toolbar button:disabled { opacity: .35; cursor: default; }
.media-controls { display: flex; flex-shrink: 0; }
.video-dialog video { display: block; width: 100%; max-height: calc(100dvh - 105px); aspect-ratio: 16 / 9; object-fit: contain; background: var(--ink); }
.media-error { margin: 12px 16px; }
.image-dialog { width: min(1300px, calc(100vw - 24px)); }
.lightbox-stage { overflow: auto; max-height: calc(100dvh - 150px); overscroll-behavior: contain; padding: 16px; }
.lightbox-stage button { display: block; width: 100%; padding: 0; background: none; border: 0; cursor: zoom-in; }
.lightbox-stage img { width: 100%; height: auto; max-height: calc(100dvh - 190px); object-fit: contain; }
.lightbox-stage.is-zoomed button { width: max(100%, min(var(--image-width), 1800px)); cursor: zoom-out; }
.lightbox-stage.is-zoomed img { max-height: none; }
.lightbox-hint { padding: 0 16px 12px; text-align: center; color: var(--muted); font-size: 11px; }

@media (max-width: 880px) {
  .about-grid { gap: 36px; }
  .brand-panel { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .brand-intro { position: static; }
  .brand-panel[data-presentation='editorial'] .brand-images[data-brand-layout='campaign'],
  .brand-panel[data-presentation='editorial'] .brand-images[data-brand-layout='stickers'],
  .graphic-project[data-presentation='editorial'] .graphic-viewport { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .graphic-project[data-presentation='editorial'] .graphic-gallery[data-graphic-layout='photos'] .graphic-viewport { grid-template-columns: minmax(0, .72fr) minmax(0, 1.14fr); }
}

@media (max-width: 690px) {
  :root { --header: 58px; --edge: 21px; }
  .badge-rig { --badge-width: clamp(198px, 57vw, 236px); --badge-top: clamp(110px, 21svh, 197px); }
  .badge-exit { transform: none; }
  .badge { padding: 31px 13px 11px; }
  .badge-heading { font-size: clamp(23px, 7vw, 30px); }
  .badge-body { margin-inline: 11px; }
  .hero-copy { margin-top: -13px; width: 100%; padding-bottom: 20px; }
  .hero h1 { font-size: clamp(69px, 19vw, 96px); }
  .hero-summary { display: block; margin-top: 13px; text-align: center; }
  .hero-role { font-size: 13px; }
  .hero-description { max-width: 320px; margin: 8px auto 0; font-size: 13px; }
  .hero-bottom { min-height: 58px; }
  .section h2 { font-size: clamp(42px, 10vw, 62px); }
  .section-index { margin-bottom: 17px; }
  .works-heading, .split-heading { display: grid; gap: 13px; }
  .filter-bar { margin-top: 24px; }
  .filters { gap: 0 13px; }
  .filters button { font-size: 10px; padding-block: 10px; }
  .graphic-project { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .graphic-intro { position: static; }
  .filter-bar { align-items: baseline; gap: 9px; }
  .result-count { font-size: 10px; }
  .work-category-heading { gap: 8px; }
  .work-category-heading p { font-size: 10px; }
  .project-grid { grid-template-columns: 1fr; row-gap: 28px; }
  .project-grid[data-layout] .project-card:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  .project-grid[data-layout] .project-card:nth-child(even) { margin-left: 8%; }
  .project-image[data-device-cover] { height: auto; }
  .project-image[data-device-cover] img { height: auto; }
  .demo-project { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .demo-copy h4 { font-size: 26px; }
  .poster-gallery { grid-template-columns: minmax(0, 1fr); }
  .media-toolbar { gap: 4px; padding-inline: 8px; }
  .media-toolbar p { font-size: 10px; letter-spacing: .02em; }
  .media-controls button { padding-inline: 4px; }
  .graphic-gallery[data-graphic-layout='photos'] figure { --photo-height: clamp(300px, 96vw, 440px); }
  .about-grid { grid-template-columns: 1fr; gap: 26px; }
  .about-portrait { max-width: min(100%, 365px); }
  .experience-labels { display: none; }
  .experience-list li { grid-template-columns: 1fr; gap: 5px; padding-block: 13px; }
  .experience-position { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; }
  .experience-role::before { content: '·'; margin-right: 7px; color: var(--accent); }
  .experience-period:empty { display: none; }
  .experience-campus { grid-template-columns: 1fr; gap: 0; }
  .experience-campus li + li { border-top: 1px solid var(--line); }
  .faq { grid-template-columns: 1fr; }
  .faq summary { grid-template-columns: 22px 1fr 16px; gap: 9px; }
  .faq details p { padding-left: 31px; }
  .contact h2 { font-size: clamp(41px, 10vw, 68px); }
  .contact-row { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .contact-mark, .footer-edition { display: none; }
  .case-header { margin-top: 35px; }
  .case-media-grid[data-visual-layout] { grid-template-columns: minmax(0, 1fr); }
  .case-media-grid[data-visual-layout='stickers'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen-group:is([data-device='iphone'], [data-device='watch']) .case-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen-group[data-device='macbook'] .case-media-grid { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  .brand-images { grid-template-columns: minmax(0, 1fr); }
  .brand-images[data-brand-layout='poster-series'] { grid-template-columns: minmax(0, 1fr); }
  .brand-images[data-brand-layout='poster-series'] figure:first-child { grid-row: auto; }
  .brand-images[data-brand-layout='poster-series'] figure:last-child { padding-top: 0; }
  .brand-panel[data-presentation='editorial'] .brand-images,
  .brand-panel[data-presentation='editorial'] .brand-images[data-brand-layout],
  .graphic-project[data-presentation='editorial'] .graphic-viewport,
  .graphic-project[data-presentation='editorial'] .graphic-gallery[data-graphic-layout='photos'] .graphic-viewport { grid-template-columns: minmax(0, 1fr); }
  .graphic-project[data-presentation='editorial'] .graphic-gallery[data-graphic-layout='photos'] figure:first-child { grid-row: auto; }
}

@media (max-width: 375px) {
  .home .brand { gap: 7px; letter-spacing: .025em; }
  .home .brand svg { width: 18px; height: 18px; }
  .home .brand-label { font-size: 11px; }
  .filters { gap: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .cursor-trail { display: none; }
}

.graphic-intro .project-subtitle { margin-top: 2px; color: var(--ink); font-size: clamp(18px, 2vw, 25px); font-weight: 550; line-height: 1.4; }
.graphic-intro .project-subtitle + p { margin-top: 10px; }
.case-header .visual-subtitle { color: var(--ink); font-size: clamp(20px, 2.4vw, 30px); }
.brand-images[data-brand-layout='clio-five'], .case-media-grid[data-visual-layout='clio-five'] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.brand-images[data-brand-layout='clio-five'] > figure, .case-media-grid[data-visual-layout='clio-five'] > figure { grid-column: span 2; }
.brand-images[data-brand-layout='clio-five'] > figure:nth-child(4), .case-media-grid[data-visual-layout='clio-five'] > figure:nth-child(4) { grid-column: 2 / span 2; }
.brand-images[data-brand-layout='clio-five'] > figure:nth-child(5), .case-media-grid[data-visual-layout='clio-five'] > figure:nth-child(5) { grid-column: 4 / span 2; }
.brand-images[data-brand-layout='clio-five'] img, .case-media-grid[data-visual-layout='clio-five'] img { width: 100%; height: auto; object-fit: contain; }

.brand-panel[data-presentation='ip-board'] { grid-template-columns: minmax(0, 28fr) minmax(0, 72fr); align-items: center; }
.ip-intro { min-width: 0; }
.ip-intro > .micro { color: var(--muted); }
.ip-intro h4 { margin: 8px 0 14px; font: 800 clamp(25px, 2.65vw, 38px)/1.25 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.ip-intro > p { color: var(--muted); font-size: 14px; line-height: 1.8; max-width: 60ch; }
.ip-character { width: min(100%, 330px); margin-top: 14px; }
.ip-character img { width: 100%; height: auto; object-fit: contain; }
.ip-stickers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 22px); align-items: center; }
.ip-stickers figure { min-width: 0; }
.ip-stickers img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.ip-stickers a { transition: transform .25s var(--ease); }

.taxmind-project { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3.2vw, 44px); border-top: 1px solid var(--line); padding-top: clamp(28px, 4vw, 50px); scroll-margin-top: calc(var(--header) + 24px); }
.taxmind-intro { min-width: 0; }
.taxmind-intro > .micro, .taxmind-intro > p { color: var(--muted); }
.taxmind-intro h4 { margin: 10px 0 12px; font: 750 clamp(25px, 2.1vw, 32px)/1.3 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.taxmind-intro > p { max-width: 104ch; margin-top: 16px; font-size: 14px; line-height: 1.85; }
.taxmind-intro > p.micro { font-size: 11px; margin-top: 8px; }
.taxmind-contributions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--line); margin-top: 24px; padding-top: 18px; }
.taxmind-contributions h5 { grid-column: 1 / -1; margin: 0 0 16px; font-size: 17px; font-weight: 650; }
.taxmind-contributions h5 span { display: block; margin-top: 3px; color: var(--muted); }
.taxmind-contributions h6 { margin: 0 0 7px; font-size: 14px; font-weight: 650; }
.taxmind-contributions p { font-size: 14px; line-height: 1.8; color: var(--muted); }
.taxmind-intro > .work-tags { margin-top: 22px; }
.taxmind-media { min-width: 0; }
.taxmind-screens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.taxmind-screens figure { min-width: 0; }
.taxmind-screens figcaption { min-height: 32px; padding-bottom: 10px; color: var(--muted); letter-spacing: .04em; }
.taxmind-screens .image-enlarge { display: grid; place-items: center; width: 100%; aspect-ratio: 942 / 2048; background: #fff; }
.taxmind-screens .image-enlarge picture { display: block; width: 100%; height: 100%; }
.taxmind-screens img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.taxmind-zoom-hint { margin-top: 12px; color: var(--muted); }
.experience-project-link { display: flex; align-items: center; gap: 5px; width: fit-content; min-height: 32px; color: var(--accent); font-size: 12px; text-underline-offset: 4px; }
.experience-project-link svg { width: 13px; height: 13px; }
.experience-project-link:hover { text-decoration: underline; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ip-stickers a:hover { transform: translateY(-3px); }
}

@media (max-width: 880px) {
  .brand-panel[data-presentation='ip-board'] { grid-template-columns: minmax(0, 1fr); }
  .ip-character { margin-inline: auto; max-width: 270px; }
  .ip-stickers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-images[data-brand-layout='clio-five'], .case-media-grid[data-visual-layout='clio-five'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-images[data-brand-layout='clio-five'] > figure:nth-child(n), .case-media-grid[data-visual-layout='clio-five'] > figure:nth-child(n) { grid-column: auto; }
  .taxmind-screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
  .brand-panel[data-presentation='editorial'] .brand-images[data-brand-layout='clio-five'], .case-media-grid[data-visual-layout='clio-five'] { grid-template-columns: minmax(0, 1fr); }
  .taxmind-screens { grid-template-columns: minmax(0, 1fr); }
  .taxmind-contributions { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .taxmind-contributions h5 { margin-bottom: 0; }
  .taxmind-screens .image-enlarge { aspect-ratio: auto; }
  .taxmind-screens img { height: auto; }
}