:root { --mono: "DM Sans", sans-serif; --body: "DM Sans", sans-serif; --film-gutter: clamp(28px, 6vw, 112px); }
body { font-family: var(--body); }
h1, h2, h3 { font-family: var(--display); }
.skip-link { position: fixed; z-index: 1001; top: 16px; left: 16px; padding: 12px 20px; border-radius: 20px; background: var(--ink); color: var(--paper); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.eyebrow, .skill-number, .hobby-number, .link-arrow { display: none; }
.button, .text-link, .quiet-link, .copy-email, .end-links, .art-credit { font-family: var(--body); }
.quiet-link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; font-size: 16px; font-weight: 500; border-bottom: 1px solid currentColor; transition: opacity .2s, border-color .2s; }
.quiet-link:hover { opacity: .65; }
.scene-links { display: flex; flex-wrap: wrap; gap: 28px; }
.scroll-film { overflow: clip; }
.scene-stage { position: relative; min-height: 100svh; padding: 80px var(--film-gutter) 110px; isolation: isolate; overflow: hidden; }
.scroll-film .scene-stage::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 18% 42%, color-mix(in srgb, var(--scene-hue, #a896d7) 13%, transparent), transparent 56%), radial-gradient(ellipse at 76% 75%, color-mix(in srgb, var(--scene-hue-alt, #8eae76) 8%, transparent), transparent 60%); }
.intro-stage { --scene-hue: #9680dd; --scene-hue-alt: #859a6f; }
.work-stage { --scene-hue: #e9dbff; --scene-hue-alt: #e5fbb0; }
.conveyor-stage { --scene-hue: #a3ae7b; --scene-hue-alt: #b997bd; }
.quote-stage { --scene-hue: #9a8977; --scene-hue-alt: #bca5ca; }
.train-stage { --scene-hue: #849f90; --scene-hue-alt: #a99bce; }
.end-stage { --scene-hue: #9d7297; --scene-hue-alt: #bb9d81; }
.scene-stage h2 { margin: 0; font: 600 clamp(56px, 7.4vw, 140px)/.95 var(--display); letter-spacing: -.055em; }
.scene-stage h2 em { font: 400 1.12em/1 var(--serif); }
.scene-ghost { position: absolute; z-index: -1; left: -4vw; bottom: -5vw; pointer-events: none; white-space: nowrap; font: 600 28vw/.8 var(--display); letter-spacing: -.065em; opacity: .045; }
.art-credit { position: absolute; z-index: 8; font-size: 11px; opacity: .6; min-height: 28px; display: flex; align-items: center; }
.ink-image { display: block; height: auto; filter: invert(1); mix-blend-mode: screen; }
html[data-theme="light"] .ink-image { filter: none; mix-blend-mode: multiply; }

/* Colour washes sit behind the ink; the opening moves toward the drawn eye. */
.scroll-film { --wash-violet: #9f86de52; --wash-gold: #caa94e3d; --wash-blue: #5c91c54a; }
html[data-theme="light"] .scroll-film { --wash-violet: #9c80d440; --wash-gold: #dfb84f40; --wash-blue: #72a1d63d; }
.scroll-film .intro-stage::before { background: radial-gradient(ellipse 36vw 50vh at -8vw 8vh, var(--wash-violet), transparent), radial-gradient(ellipse 24vw 40vh at 101vw -12vh, var(--wash-gold), transparent), radial-gradient(ellipse 28vw 40vh at 107vw 105vh, var(--wash-blue), transparent); }
.scroll-film .train-stage::before { background: radial-gradient(ellipse 40vw 60vh at -15vw 60vh, var(--wash-violet), transparent); }
.scroll-film .end-stage::before { background: radial-gradient(ellipse 44vw 54vh at -10vw 100vh, var(--wash-blue), transparent), radial-gradient(ellipse 45vw 50vh at 110vw -10vh, var(--wash-violet), transparent); }
.intro-stage { min-height: 100svh; display: flex; align-items: center; background: var(--page-bg); }
.intro-type { position: relative; z-index: 5; width: 75%; padding-bottom: 4vh; }
.intro-type h1 { margin: 0 0 5vh; font: 600 clamp(108px, 13.8vw, 260px)/.82 var(--display); letter-spacing: -.065em; }
.intro-type h1 em { display: inline-block; padding-top: .05em; font: 400 1.1em/.9 var(--serif); letter-spacing: -.045em; color: var(--violet); }
.intro-type p { margin: 0; font-size: clamp(18px, 1.6vw, 25px); line-height: 1.6; }
.portrait-plane { position: absolute; width: 58vw; aspect-ratio: 3373 / 3867; left: 42vw; top: calc(50% - 33.25vw); }
.intro-portrait { width: 100%; height: 100%; opacity: .34; mask-image: linear-gradient(90deg, transparent, #000 24%, #000 85%, transparent), linear-gradient(transparent, #000 14%, #000 87%, transparent); mask-composite: intersect; }
.intro-credit { bottom: 100px; right: var(--film-gutter); }
.intro-ghost { top: 9vh; bottom: auto; font-size: 23vw; opacity: .03; }
.portal-frame { position: absolute; z-index: 20; transform: translate3d(var(--portal-x, 0px), var(--portal-y, 0px), 0) scale(var(--portal-scale, 1)); }
.portal-aperture { width: 100%; height: 100%; overflow: hidden; }
.portal-caption { position: absolute; z-index: 30; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; color: var(--ink); }
.portal-caption span { font: 600 clamp(80px, 16vw, 240px)/.9 var(--display); letter-spacing: -.055em; }
.scroll-film:not(.is-scene-motion) .portal-caption, .scroll-film .eye-portal, .scroll-film .train-car, .scroll-film .window-landscape { display: none; }

/* Both featured projects occupy the same scene. */
.work-stage { display: flex; flex-direction: column; justify-content: center; background: #b3a2ff; color: #201c27; }
.work-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: clamp(26px, 4vh, 56px); }
.work-heading h2 { font-size: clamp(56px, 6.7vw, 126px); }
.featured-projects { display: grid; grid-template-columns: 1.12fr 1fr; gap: clamp(28px, 4vw, 70px); }
.featured-project { display: block; min-width: 0; }
.featured-media { position: relative; height: clamp(240px, 32vh, 390px); display: grid; place-items: center; isolation: isolate; }
.featured-media > img { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; max-height: 100%; object-fit: contain; filter: drop-shadow(0 14px 16px #30234726); transform: rotate(-2deg); transition: transform .6s var(--ease), filter .6s; }
.portfolio-print { background: #d5f29d; color: #20241a; overflow: hidden; border-radius: 4px; transform: rotate(2deg); transition: transform .6s var(--ease); }
.portfolio-print > span { position: relative; z-index: 2; font: 600 clamp(140px, 17vw, 320px)/.8 var(--display); letter-spacing: -.12em; padding-right: .13em; }
.portfolio-print em { font: 400 1.08em var(--serif); }
.portfolio-print::after { content: ""; position: absolute; width: 24%; height: 110%; background: #ef9b85; right: 3%; top: 15%; transform: rotate(35deg); z-index: 0; }
.featured-copy { padding-top: 22px; display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: start; }
.featured-copy h3 { margin: 0 0 9px; font: 600 clamp(26px, 2.5vw, 44px)/1.05 var(--display); letter-spacing: -.045em; }
.featured-copy p { grid-column: 1; max-width: 440px; margin: 0; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.5; }
.project-link-label { grid-column: 2; grid-row: 2; align-self: baseline; padding-bottom: 5px; border-bottom: 1px solid #201c2759; font-size: 13px; }
.featured-copy p { align-self: baseline; }
.work-ghost { bottom: -1vw; font-size: 23vw; opacity: .07; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .featured-project:hover .featured-media img, .featured-project:focus-visible .featured-media img { transform: rotate(0) scale(1.035); filter: drop-shadow(0 18px 20px #30234738); }
  .featured-project:hover .portfolio-print, .featured-project:focus-visible .portfolio-print { transform: rotate(0) scale(1.035); }
}

/* A scroll-driven factory. The belt and rollers only move with scroll. */
.conveyor-stage { background: color-mix(in srgb, #312522 70%, var(--page-bg)); color: #f0e7de; }
html[data-theme="light"] .conveyor-stage { background: #ece3d7; color: #312522; }
.tools-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; }
.tools-heading h2 em { color: #efab87; }
html[data-theme="light"] .tools-heading h2 em { color: #9b5736; }
.conveyor { position: static; }
.belt { position: absolute; top: 66%; left: 26%; width: 90%; height: 82px; border: 2px solid #b8b9a4; border-radius: 41px; background: linear-gradient(#30392f, #222a24); box-shadow: inset 0 0 0 7px #64705e, inset 0 10px 0 8px #9fa58b, 0 9px 0 -4px #11191255; z-index: 1; }
.belt::after { content: ""; position: absolute; inset: 31px 84px 20px; border-block: 1px solid #b8b9a424; background: repeating-linear-gradient(90deg, transparent 0 48px, #a7af9633 48px 49px); }
.belt-tread { position: absolute; top: -5px; height: 9px; left: 39px; right: 39px; border-block: 1px solid #d6d0b8; background: repeating-linear-gradient(90deg, #c6c3aa 0 24px, #687462 24px 29px); background-position: var(--belt-offset, 0px) 0; box-shadow: 0 3px 0 #19241c; }
.belt-wheel { position: absolute; top: 12px; height: 54px; width: 54px; border: 8px solid #979e8e; border-radius: 50%; background: conic-gradient(#cac7b7 0deg 70deg, #383c36 70deg 90deg, #cac7b7 90deg 160deg, #383c36 160deg 180deg, #cac7b7 180deg 250deg, #383c36 250deg 270deg, #cac7b7 270deg 340deg, #383c36 340deg); transform: rotate(calc(var(--progress, 0)*1080deg)); }
.wheel-left { left: 13px; }.wheel-right { right: 13px; }
.belt-legs { position: absolute; top: 78px; height: 64px; left: 30%; width: 45%; display: flex; justify-content: space-between; }
.belt-stand { position: relative; width: 72px; height: 100%; }
.belt-stand::before { content: ""; position: absolute; inset: 0 6px 5px; background: linear-gradient(90deg, #576151, #a1aa96 25%, #7f8a74 72%, #465040); clip-path: polygon(19% 0, 81% 0, 100% 100%, 78% 100%, 66% 33%, 34% 33%, 22% 100%, 0 100%); }
.belt-stand::after { content: ""; position: absolute; bottom: 0; width: 100%; height: 7px; border: 1px solid #374031; border-radius: 3px; background: linear-gradient(#a9b09d, #66715c); box-shadow: 0 3px 0 #141c1740; }
.machine { position: absolute; z-index: 5; left: 8%; top: calc(66% - 257px); width: 22%; max-width: 360px; height: 330px; }
.machine-body { position: relative; height: 290px; border-radius: 28px 28px 9px 9px; background: linear-gradient(115deg, #dfd8bf, #c6c5ab 74%); border: 2px solid #253227; box-shadow: inset -18px 0 #a5ad95, inset 8px 0 #f0e8cf, inset 0 3px #f4edd9, 6px 10px 24px #11191220; color: #293025; }
.machine-body::before { content: ""; position: absolute; width: 42%; height: 38px; left: 25%; top: -36px; background: #8e9d8a; border: 2px solid #20251d; border-radius: 8px 8px 0 0; }
.machine-mark { position: absolute; top: 24px; left: 24px; font: 400 clamp(48px, 5vw, 78px)/1 var(--serif); letter-spacing: -.08em; }
.machine-vents { position: absolute; top: 43px; right: 35px; width: 42px; height: 36px; background: repeating-linear-gradient(#54604a 0 2px, #f1ecd043 2px 3px, transparent 3px 7px); border-radius: 2px; }
.machine-slot { position: absolute; width: 36px; right: -4px; bottom: 30px; height: 178px; background: #171d18; border: 7px solid #8e9d8a; border-right-width: 2px; border-radius: 16px 0 0 16px; }
.machine-slot::after { content: ""; position: absolute; inset: 12px 6px; background: #b9a6f7; box-shadow: 0 0 25px #b9a6f76b; }
.machine-drum { position: absolute; bottom: 24px; left: 24px; width: clamp(126px, 12vw, 180px); height: clamp(100px, 9vw, 138px); object-fit: contain; opacity: .7; mix-blend-mode: multiply; }
.machine-foot { position: absolute; height: 38px; bottom: 4px; left: -4%; right: -4%; background: #8e9d8a; border: 2px solid #20251d; border-radius: 4px; }
.conveyor-output { position: absolute; left: 28%; top: 66%; }
.tool-package { position: absolute; z-index: 3; left: 0; top: 0; width: 140px; height: 155px; border: 1px solid #24271c; border-radius: 12px 12px 3px 3px; background: var(--tool-colour); color: #20221c; box-shadow: inset -8px 0 #00000010; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transform: translate3d(var(--tool-x, 0px), var(--tool-y, 0px), 0); opacity: var(--tool-opacity, 1); }
.tool-package::before { content: ""; position: absolute; top: 0; right: 13px; width: 22px; height: 22px; background: #ffffff40; border: 1px solid #24271c35; border-top: 0; }
.tool-package .brand-logo { width: 57px; height: 57px; background: none; border: 0; padding: 0; box-shadow: none; }
.tool-package .brand-logo svg { width: 100%; height: 100%; }
.tool-package strong { font: 600 15px/1.2 var(--body); text-align: center; max-width: 116px; }
.tools-bottom { position: absolute; left: var(--film-gutter); bottom: 115px; right: var(--film-gutter); display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.tools-bottom p { margin: 0; font-size: clamp(17px, 1.6vw, 25px); }
.tools-ghost { top: 34%; bottom: auto; font-size: 31vw; opacity: .055; }

/* The co-chair's words stay intact. */
.quote-stage { background: #eae3d5; color: #342b25; display: flex; align-items: center; }
.quote-content { width: 100%; position: relative; z-index: 2; }
.quote-content h2 { font-size: clamp(38px, 4vw, 64px); margin-bottom: 6vh; }
.quote-content blockquote { margin: 0; }
.quote-content blockquote p { margin: 0; font: 400 clamp(30px, 3vw, 60px)/1.3 var(--serif); letter-spacing: -.015em; }
@media (min-width: 1000px) {
  .quote-line { display: block; }
}
.quote-credit { margin-top: 5vh; display: flex; justify-content: space-between; align-items: end; gap: 28px; }
.quote-credit p { margin: 0; font-size: 16px; line-height: 1.5; }
.quote-ghost { left: -8%; bottom: 8%; font: italic 400 33vw/.8 var(--serif); opacity: .035; }

/* An ink drawing in a coloured screen opens into the closing scene. */
.train-stage { color: #eee7f3; background: #191820; display: flex; align-items: center; }
html[data-theme="light"] .train-stage { background: #f3f0ea; color: #30273e; }
.after-copy { position: relative; z-index: 10; width: 43%; }
.after-copy h2 { font-size: clamp(78px, 8.2vw, 152px); }
.after-copy h2 em { color: #baa9eb; }
html[data-theme="light"] .after-copy h2 em { color: #796294; }
.after-copy p { margin: 45px 0 25px; font-size: clamp(17px, 1.4vw, 23px); line-height: 1.7; }
.train-window { width: 47vw; height: 55vh; right: 3vw; top: 21vh; padding: 12px; border: 1px solid #c2b8d65c; border-radius: 52px; background: #51495c; }
.train-window .portal-aperture { border-radius: 40px; background: #181820; position: relative; isolation: isolate; }
html[data-theme="light"] .train-window .portal-aperture { background: #f4efe7; }
.train-window .portal-aperture::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: calc(1 - var(--drawing-fade, 0)); background: radial-gradient(ellipse 55% 65% at -15% 110%, var(--wash-gold), transparent), radial-gradient(ellipse 60% 55% at 110% -15%, var(--wash-blue), transparent); }
.contact-caption { color: #f3e8e9; }
.contact-caption span { font-size: clamp(64px, 12vw, 190px); }
html[data-theme="light"] .contact-caption { color: #452e38; }
.window-drawing { position: absolute; width: 118%; left: -10%; top: -27%; opacity: .74; z-index: 2; }
.window-sill { position: absolute; bottom: -15px; height: 12px; left: -6px; right: -6px; border-radius: 6px; background: #867b93; }
.after-ghost { font-size: 24vw; bottom: 1%; opacity: .04; }
.after-credit { right: var(--film-gutter); bottom: 112px; }

.end-stage { background: #181820; color: #f3e8e9; display: flex; align-items: center; min-height: 110svh; }
html[data-theme="light"] .end-stage { background: #f4efe7; color: #452e38; }
.end-content { position: relative; z-index: 5; width: 100%; }
.end-content h2 { font-size: clamp(64px, 9vw, 180px); }
.end-content h2 em { color: #e5b49f; }
html[data-theme="light"] .end-content h2 em { color: #a46562; }
.end-content > p { margin: 6vh 0 3vh; font-size: clamp(17px, 1.5vw, 24px); }
.end-content > .end-email { margin: 0; font: 500 clamp(23px, 3.6vw, 63px)/1.35 var(--body); }
.end-email { display: inline-block; font: 500 clamp(23px, 3.6vw, 63px)/1.35 var(--body); letter-spacing: -.05em; border-bottom: 1px solid #f3e8e947; padding-bottom: 14px; overflow-wrap: anywhere; }
html[data-theme="light"] .end-email { border-color: #452e3847; }
.end-links { display: flex; gap: 35px; flex-wrap: wrap; align-items: center; margin-top: 30px; font-size: 16px; }
.end-links a, .end-links button { min-height: 44px; display: flex; align-items: center; }
.end-links button { padding: 0; border: 0; background: none; cursor: pointer; font-size: 16px; }
.end-links a:hover, .end-links button:hover { color: var(--coral); }
.end-portrait { position: absolute; z-index: 1; width: 48vw; right: -1%; top: 29%; }
.end-portrait img { width: 100%; opacity: .22; mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.end-credit { bottom: 106px; left: var(--film-gutter); }
.end-ghost { font-size: 25vw; bottom: 2%; opacity: .03; }

/* Diagonal shutters preserve the page-change motion from the first experiment. */
.page-wipe, body.wipe-reverse .page-wipe, body.is-leaving .page-wipe, body.is-entering:not(.wipe-reverse) .page-wipe, body.is-entering.wipe-reverse .page-wipe { transform: none; background: none; transition: none; }
.page-wipe span, .page-wipe i { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; left: 0; top: 0; border: 0; border-radius: 0; transition: transform .5s cubic-bezier(.77, 0, .175, 1); animation: none !important; }
.page-wipe span { background: var(--wipe); clip-path: polygon(0 0, 100% 0, 100% 35%, 0 65%); transform: translateY(-105%); }
.page-wipe i { background: #22202b; clip-path: polygon(0 64.9%, 100% 34.9%, 100% 100%, 0 100%); transform: translateY(105%); }
.page-wipe b { display: none; }
body.is-leaving .page-wipe span, body.is-leaving .page-wipe i { transform: translateY(0); }
body.is-entering .page-wipe span { transform: translateY(-105%); }body.is-entering .page-wipe i { transform: translateY(105%); }
body.wipe-reset .page-wipe span, body.wipe-reset .page-wipe i { transition: none; }

/* Supporting pages use open rows and the same type and controls. */
body:not([data-page="home"]) main { padding-bottom: 110px; }
.page-shell { width: min(1600px, calc(100% - var(--film-gutter)*2)); }
.page-intro { min-height: 440px; padding-block: 90px 85px; align-items: end; border-bottom-color: var(--line); }
.page-intro h1 { font-size: clamp(62px, 7.5vw, 140px); }
.page-intro > p:last-child { font: 400 clamp(17px, 1.4vw, 22px)/1.6 var(--body); }
.case-card { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 7vw; }
.case-copy h2 { font-size: clamp(40px, 4.7vw, 90px); }
.case-copy li { font-size: 15px; }
.case-visual { min-height: 420px; border-radius: 6px; border: 0; }
.visual-cisa { min-height: 0; height: auto; aspect-ratio: 8 / 5; background: #122644; }
.visual-cisa img { position: static; width: 100%; height: 100%; object-fit: contain; }
.visual-cisa .floating-chip { display: none; }
.skills-grid { display: flex; flex-direction: column; gap: 0; padding-top: 35px; }
.skill-card { min-height: 132px; padding: 30px 5px; background: none !important; color: var(--ink) !important; border: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 86px minmax(0, .85fr) minmax(0, 2.1fr); gap: 26px; align-items: center; }
.skill-card, .tool-card, .hobby-card { --ink: inherit; --paper: inherit; --line: inherit; }
.skill-card .skill-icon { width: 100%; height: auto; aspect-ratio: 1; margin: 0; }
.skill-card .logo-plate { width: min(100%, 78px); height: auto; aspect-ratio: 1; }
.skill-card .logo-plate svg { width: 72%; height: 72%; }
.skill-card h2 { margin: 0; font-size: clamp(27px, 2.6vw, 43px); }.skill-card p { margin: 0; font-size: 17px; }
.skill-details { min-width: 0; }
.skill-details .tool-level { display: inline-block; margin-top: 10px; }
.testimonials-page h1 { font-size: clamp(2rem, 11vw, 7rem); }
.skill-card .tag-row { margin: 0; justify-content: end; }.tag-row span { border: 0; padding: 0; font-size: 12px; }
.solution-statement { display: none; }
.tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 50px; }
.tool-card { background: none !important; color: var(--ink) !important; min-height: 170px; border: 0; border-bottom: 1px solid var(--line); padding: 28px 0; }
.tool-level { font-size: 13px; }.tool-card h3 { font-size: 25px; }.tool-card p { font-size: 16px; }
.hobbies-grid { gap: 50px; }.hobby-card { padding: 35px 0; align-items: center; text-align: center; background: none !important; color: var(--ink) !important; border: 0; border-bottom: 1px solid var(--line); }
.hobby-card:hover { transform: none; box-shadow: none; }
.hobby-card h2 { margin: 0 0 12px; font-size: 48px; }.hobby-card p { font-size: 18px; }
.hobby-art { width: 100%; margin: 18px 0 28px; height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 10px; }
.hobby-art .ink-image { width: 100%; height: 246px; object-fit: contain; opacity: .7; }
.hobby-games .ink-image, .hobby-anime .ink-image, .hobby-drawing .ink-image, .hobby-badminton .ink-image { filter: url("/assets/ink-filter.svg#paper") invert(1); mix-blend-mode: normal; }
html[data-theme="light"] :is(.hobby-games, .hobby-anime, .hobby-drawing, .hobby-badminton) .ink-image { filter: url("/assets/ink-filter.svg#paper"); }
.hobby-anime .hobby-art .ink-image { object-fit: cover; object-position: 50% 25%; width: 90%; mask-image: linear-gradient(transparent, #000 16%, #000 78%, transparent); }
.hobby-art figcaption { font: 400 10px/1.4 var(--body); opacity: .65; }
.hobby-art figcaption a { display: flex; align-items: center; justify-content: center; min-height: 24px; }
.hobby-music .hobby-icon { height: 280px; margin: 18px 0 28px; justify-content: center; gap: 12px; }
.hobby-music .wave-icon i { width: 11px; height: 57px; }
.hobby-music .wave-icon i:nth-child(2) { height: 114px; }
.hobby-music .wave-icon i:nth-child(3) { height: 156px; }
.hobby-music .wave-icon i:nth-child(4) { height: 96px; }
.hobby-music .wave-icon i:nth-child(5) { height: 68px; }
.next-page { border-color: var(--line); }.next-page a { min-height: 70px; }
.next-page a { justify-content: start; gap: 26px; }
.next-page-arrow { width: clamp(48px, 7vw, 92px); height: clamp(48px, 7vw, 92px); flex: 0 0 auto; margin-left: auto; transition: transform .3s var(--ease); }
.next-page a:hover .next-page-arrow, .next-page a:focus-visible .next-page-arrow { transform: translate(6px, -6px); }
.contact-github { padding-top: 0; }
.github-feature { border-color: var(--line); border-radius: 0; transform: none; transition: border-color .2s ease, box-shadow .2s ease; }
.github-feature:focus-within { border-color: var(--ink); box-shadow: 10px 10px 0 var(--coral); }
@media (hover: hover) and (pointer: fine) {
  .github-feature:hover { border-color: var(--ink); box-shadow: 10px 10px 0 var(--coral); }
}
.github-feature-copy strong { font-family: var(--display); }
.github-feature-copy em { font-family: var(--body); font-size: 15px; }
.github-feature-mark::before, .github-feature-mark i, .github-feature-mark b { animation-play-state: paused; }
.github-feature.is-orbit-visible .github-feature-mark::before, .github-feature.is-orbit-visible .github-feature-mark i, .github-feature.is-orbit-visible .github-feature-mark b { animation-play-state: running; }
.social-button, .end-links .copy-email, .contact-copy .copy-email { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 21px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: 500 15px/1.2 var(--body); text-decoration: none; transition: background .2s, color .2s; }
.social-button:hover { background: var(--ink); color: var(--page-bg); }
.end-links .social-button:hover { background: #f3e8e9; color: #261a20; }
html[data-theme="light"] .end-links .social-button:hover { background: #452e38; color: #f5e5dc; }
.end-links { gap: 12px; }
.contact-copy .scene-links { align-items: center; gap: 12px; margin-top: 22px; }
.contact-copy .copy-email { margin: 0; }
.contact-copy .email-link { margin: 0; }
.case-visual.channel-video { display: block; min-height: 0; aspect-ratio: auto; padding-block: 24px; overflow: hidden; isolation: isolate; background: #0c0d10; }
.channel-video::before, .channel-video::after { content: ""; position: absolute; left: 10px; right: 10px; height: 12px; background: repeating-linear-gradient(90deg, #777082 0 12px, transparent 12px 25px); border-radius: 2px; opacity: .75; pointer-events: none; }
.channel-video::before { top: 6px; }.channel-video::after { bottom: 6px; }
.channel-video iframe { display: block; width: 100%; min-height: 200px; aspect-ratio: 16 / 9; border: 0; }
.case-visual.channel-video > iframe, .case-visual.channel-video:hover > iframe { transform: none; transition: none; }
.languages-strip > div > span { display: none; }
.languages-strip { gap: 16px; border: 0; }
.languages-strip > div { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 160px; padding: clamp(22px, 2.4vw, 36px); border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--page-bg) 88%, #b9a6ef); }
.languages-strip > div:nth-child(2) { background: color-mix(in srgb, var(--page-bg) 88%, #a8cbb9); }
.languages-strip > div:nth-child(3) { background: color-mix(in srgb, var(--page-bg) 88%, #e7be9b); }
.languages-strip > div:last-child { border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.languages-strip strong { font: 600 clamp(28px, 3vw, 46px)/1.1 var(--display); letter-spacing: -.045em; }
.languages-strip small { font: 500 14px/1.4 var(--body); opacity: .72; }
.hobby-badminton .hobby-art .ink-image { transform: scale(.72); }

@media (min-width: 1000px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  .is-scene-motion .intro-scene { height: 210svh; }
  .is-scene-motion .work-scene { height: 210svh; }
  .is-scene-motion .tools-scene { height: calc(480svh + (var(--tool-count, 8) - 8)*45svh); }
  .is-scene-motion .quote-scene { height: 170svh; }
  .is-scene-motion .train-scene { height: 210svh; }
  .is-scene-motion .contact-scene { height: 150svh; }
  .is-scene-motion .scene-stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
  .is-scene-motion .scene-ghost { transform: translateX(var(--ghost-x, 0px)); }
  .is-scene-motion .scene-content { transform: translate3d(0, calc((1 - var(--enter, 1))*80px), 0); }
  .is-scene-motion .featured-cisa { transform: translate3d(calc((1 - var(--enter, 1))*-100px), 0, 0) rotate(calc((1 - var(--enter, 1))*-8deg)); }
  .is-scene-motion .featured-portfolio { transform: translate3d(calc((1 - var(--enter, 1))*100px), 0, 0) rotate(calc((1 - var(--enter, 1))*8deg)); }
  .is-scene-motion .intro-type { transform: translate3d(calc(var(--progress, 0)*-35px), calc(var(--progress, 0)*-20px), 0); }
  .is-scene-motion .portrait-plane { transform: translate3d(var(--portrait-x, 0px), var(--portrait-y, 0px), 0) scale(var(--portrait-scale, 1)); transform-origin: 68.9% 56.9%; }
  .is-scene-motion .intro-portrait { opacity: calc((.34 + var(--progress, 0)*.18)*(1 - var(--portrait-fade, 0)*.75)); }
  .is-scene-motion .intro-scene [data-fade-on-portal] { opacity: calc(1 - var(--intro-fade, 0)); }
  .is-scene-motion .intro-ghost { opacity: calc(.03*(1 - var(--intro-fade, 0))); }
  .is-scene-motion .train-scene [data-fade-on-portal] { opacity: calc(1 - var(--screen-fade, 0)); }
  .is-scene-motion .window-drawing { opacity: calc(.74*(1 - var(--drawing-fade, 0))); }
  .is-scene-motion .window-sill { opacity: calc(1 - var(--portal-open, 0)); }
  .is-scene-motion .intro-scene .portal-caption { opacity: var(--work-reveal, 0); transform: translate3d(0, calc((1 - var(--work-reveal, 0))*24px), 0); }
  .is-scene-motion .train-scene .portal-caption { opacity: var(--hello-reveal, 0); transform: translate3d(0, calc((1 - var(--hello-reveal, 0))*16px), 0); }
}

@media (max-width: 999px), (max-height: 679px), (hover: none), (pointer: coarse) {
  .scene-stage { min-height: 0; padding-block: 90px 100px; }
  .intro-stage { min-height: 90svh; padding-top: 100px; }
  .intro-type { width: 100%; }.intro-type h1 { font-size: clamp(96px, 17vw, 180px); }
  .portrait-plane { width: 70vw; left: 30vw; top: calc(48% - 40vw); }.intro-portrait { opacity: .24; }
  .intro-credit { bottom: 32px; font-size: 10px; }
  .featured-projects { gap: 28px; }.featured-media { height: 28vw; }
  .featured-copy { grid-template-columns: 1fr; }.project-link-label { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 16px; }
  .conveyor { position: relative; margin-top: 60px; }.machine, .belt, .conveyor-output { display: none; }
  .tool-packages { display: flex; gap: 18px; overflow-x: auto; padding: 12px 0 22px; scrollbar-width: thin; }
  .tool-package { position: relative; flex: 0 0 125px; width: 125px; height: 150px; transform: none; opacity: 1; }
  .tools-bottom { position: static; margin-top: 40px; }.tools-ghost { top: 22%; }
  .quote-content blockquote p { font-size: clamp(40px, 6.5vw, 70px); }
  .train-stage { min-height: 90svh; align-items: start; padding-bottom: 90px; display: block; }
  .after-copy { width: 60%; }.train-window { position: relative; width: 65vw; height: 43vw; right: auto; top: auto; margin: 28px -2vw 70px auto; }
  .after-credit { bottom: 32px; }
  .end-stage { min-height: 90svh; }.end-portrait { width: 65vw; top: 36%; right: -8%; }.end-credit { bottom: 28px; }
  .case-card { grid-template-columns: 1fr; }.case-reverse .case-copy { order: 0; }.case-reverse .case-visual { order: 1; }
  .case-visual { min-height: 380px; }.visual-cisa { min-height: 0; }
  .skill-card { grid-template-columns: 64px 1fr; gap: 18px; }.skill-card h2 { font-size: 32px; }.skill-card > p, .skill-card > .skill-details { grid-column: 2; }
}
@media (max-width: 600px) {
  :root { --film-gutter: 24px; }
  .scene-stage { padding-block: 65px 95px; }.scene-stage h2 { font-size: 56px; }
  .intro-stage { min-height: 84svh; padding-top: 60px; }.intro-type { padding-bottom: 70px; }.intro-type h1 { font-size: 24vw; margin-bottom: 35px; }.intro-type p { font-size: 17px; }
  .portrait-plane { width: 97vw; left: 16vw; top: 20%; }.intro-portrait { opacity: .2; }.intro-ghost { top: 12%; }
  .intro-credit { right: 24px; bottom: 32px; }
  .work-heading { align-items: start; flex-direction: column; gap: 12px; margin-bottom: 32px; }.work-heading h2 { font-size: 54px; }.work-heading .quiet-link { font-size: 14px; }
  .featured-projects { grid-template-columns: 1fr; gap: 44px; }.featured-media { height: auto; aspect-ratio: 8 / 5; }.featured-copy h3 { font-size: 28px; }.featured-copy p { font-size: 16px; }.featured-copy { padding-top: 18px; }.portfolio-print > span { font-size: 47vw; }.project-link-label { margin-top: 14px; }
  .tools-heading { flex-direction: column; align-items: start; gap: 15px; }.conveyor { margin-top: 26px; }.tools-bottom { flex-direction: column; align-items: start; gap: 12px; }.tools-bottom p { font-size: 18px; }
  .quote-content h2 { font-size: 38px; margin-bottom: 36px; }.quote-content blockquote p { font-size: 40px; }.quote-credit { flex-direction: column; align-items: start; margin-top: 30px; gap: 18px; }.quote-credit p { font-size: 14px; }
  .after-copy { width: 100%; }.after-copy h2 { font-size: 70px; }.after-copy p { font-size: 17px; margin-top: 30px; }.after-copy .scene-links { gap: 24px; }
  .train-window { width: 85vw; height: 65vw; margin: 32px -12px 30px auto; padding: 8px; border-radius: 30px; }.train-window .portal-aperture { border-radius: 22px; }.after-credit { bottom: 24px; font-size: 10px; }
  .end-stage { padding-bottom: 165px; }
  .end-content h2 { font-size: 14vw; }.end-content > p { margin: 38px 0 24px; font-size: 17px; }.end-email { font-size: 6vw; }.end-links { gap: 25px; font-size: 14px; }.end-links button { font-size: 14px; }.end-portrait { width: 85vw; right: -22%; top: 46%; }.end-credit { font-size: 10px; bottom: 94px; }
  .end-content > .end-email { margin: 0; font-size: 6vw; }
  .end-links { gap: 10px; }.social-button, .end-links .copy-email { padding-inline: 17px; font-size: 14px; }
  .next-page a { gap: 16px; padding-right: 0; }
  .next-page a span { font-size: clamp(40px, 11vw, 58px); }.next-page-arrow { width: 40px; height: 40px; }
  .page-intro { min-height: 0; padding-block: 65px 55px; display: block; }.page-intro h1 { font-size: 17vw; }.page-intro > p:last-child { margin-top: 28px; font-size: 17px; }
  .section-space { padding-block: 55px; }.section-heading { gap: 24px; align-items: start; flex-direction: column; }.section-heading h2 { font-size: 40px; }
  .case-card { gap: 28px; }.case-copy h2 { font-size: 44px; }.case-visual { min-height: 270px; }.visual-cisa { min-height: 0; }.tool-grid { grid-template-columns: 1fr; }.hobbies-grid { grid-template-columns: 1fr; gap: 25px; }.hobby-card h2 { font-size: 36px; }
  .skill-card { grid-template-columns: 52px 1fr; padding-block: 24px; }.skill-card h2 { font-size: 30px; }.skill-card p { font-size: 16px; }.tag-row { gap: 12px; }.tool-card { min-height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-stage { position: relative !important; height: auto !important; }.scene-ghost, .portal-frame, .scene-content, .intro-type, .featured-project { transform: none !important; }
  .page-wipe { display: none; }.scroll-film * { animation: none !important; transition: none !important; }
  .conveyor { position: relative; margin-top: 60px; }.machine, .belt, .conveyor-output { display: none; }.tool-packages { display: flex; gap: 20px; padding-bottom: 20px; overflow-x: auto; }.tool-package { position: relative; flex: 0 0 140px; transform: none; opacity: 1; }.tools-bottom { position: relative; left: auto; right: auto; bottom: auto; margin-top: 40px; }
}
@media (max-width: 359px) {
  .social-button, .end-links .copy-email, .contact-copy .copy-email { padding-inline: 13px; font-size: 13px; }
  .end-links, .contact-copy .scene-links { gap: 8px; }
}
.scroll-film:not(.is-scene-motion) .conveyor { position: relative; margin-top: 55px; }
.scroll-film:not(.is-scene-motion) .machine, .scroll-film:not(.is-scene-motion) .belt, .scroll-film:not(.is-scene-motion) .conveyor-output { display: none; }
.scroll-film:not(.is-scene-motion) .tool-packages { display: flex; gap: 18px; overflow-x: auto; padding: 12px 0 22px; scrollbar-width: thin; }
.scroll-film:not(.is-scene-motion) .tool-package { position: relative; flex: 0 0 140px; transform: none; opacity: 1; }
.scroll-film:not(.is-scene-motion) .tools-bottom { position: static; margin-top: 38px; }
body[data-page="contact"] .contact-hero { grid-template-columns: 1fr; min-height: 85svh; padding-block: 90px 80px; }
body[data-page="contact"] .contact-copy { max-width: 1100px; }
.case-visual { min-width: 0; width: 100%; }
.case-visual.portfolio-print { min-height: 0; aspect-ratio: 8 / 5; height: auto; }
.visual-cisa img { --preview-center: 0px; }
.end-links .copy-email { margin: 0; }
@media (min-width: 1000px) and (min-height: 680px) and (max-height: 800px) {
  .is-scene-motion .belt, .is-scene-motion .conveyor-output { top: 62%; }
  .is-scene-motion .machine { top: calc(62% - 215px); height: 285px; }
  .is-scene-motion .machine-body { height: 245px; }
  .is-scene-motion .machine-slot { height: 150px; }
  .is-scene-motion .belt-legs { height: 30px; }
  .is-scene-motion .tools-bottom { bottom: 95px; }
}

/* Social controls, unframed project artwork, and contact orbits. */
.action-icon { width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.action-icon.brand-glyph { fill: currentColor; stroke: none; }
.social-button { gap: 10px; }
.social-button.copy-email { margin: 0; gap: 10px; }
.social-button.copy-email.copied { color: #20241a; background: var(--lime); }
.intro-social { display: flex; gap: 12px; margin-top: 26px; }
.social-circle { width: 48px; height: 48px; min-height: 48px; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; }
.social-circle .action-icon { width: 22px; height: 22px; }
.end-links { margin-top: 26px; margin-bottom: 36px; align-items: center; }
.end-links .copy-email { gap: 10px; }
.end-links .contact-details-link { margin-left: 8px; }
.end-content { padding-bottom: 20px; }
.end-credit { bottom: 64px; }
.contact-copy .email-link { border-top: 0; }
.featured-media { height: clamp(240px, 36vh, 410px); overflow: visible; }
.cisa-crop { position: relative; width: 100%; max-width: calc(clamp(240px, 36vh, 410px)*1.875); aspect-ratio: 1440 / 764; overflow: hidden; outline: 1px solid transparent; backface-visibility: hidden; box-shadow: 12px 12px 0 var(--graphic-ink, #171717); transform: rotate(-2deg); transition: transform .6s var(--ease); }
.cisa-crop > img, .visual-cisa .cisa-crop > img { display: block; position: static; width: 100%; height: auto; min-height: 0; max-height: none; margin-top: -9.444444%; border: 0; box-shadow: none; filter: none; transform: none; object-fit: contain; }
.visual-cisa { background: none; overflow: visible; aspect-ratio: 1440 / 764; }
.visual-cisa .cisa-crop { max-width: none; }
.portfolio-print { position: relative; display: grid; place-items: center; width: 88%; height: 82%; box-shadow: 14px 14px 0 var(--graphic-ink, #171717); border-radius: 0; }
.portfolio-print > span { font-size: clamp(100px, 12vw, 240px); line-height: 1.12; padding: 0 .13em .04em 0; }
.portfolio-preview { display: grid; place-items: center; min-height: 0; aspect-ratio: 1440 / 768; background: none; overflow: visible; }
.portfolio-preview .portfolio-print { height: 86%; }
body:not([data-page="home"]) main { padding-bottom: 0; }
.site-copyright { position: absolute; z-index: 10; left: var(--film-gutter); right: var(--film-gutter); bottom: max(2px, env(safe-area-inset-bottom)); margin: 0; padding: 0; min-height: 0; font: 500 9px/1 var(--body); opacity: .65; pointer-events: none; }
.github-feature { gap: 28px; }
.github-feature-copy { flex: 1 1 54%; }
.github-feature-copy h2 { margin: 0 0 28px; font: 600 clamp(40px, 4.7vw, 86px)/1 var(--display); letter-spacing: -.055em; }
.github-feature-copy p { max-width: 640px; margin: 0; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.7; }
.contact-system { position: relative; flex: 0 0 380px; height: 320px; isolation: isolate; }
.contact-planet.social-button { position: absolute; display: flex; flex-direction: column; gap: 9px; padding: 0; border: 0; border-radius: 50%; color: #20241a; font-size: 13px; font-weight: 600; }
.contact-planet .action-icon { width: 35%; height: 35%; flex: 0 0 auto; }
.contact-planet.planet-github { z-index: 3; width: 160px; height: 160px; left: 158px; top: 26px; background: #c8e6b0; }
.contact-planet.planet-email { z-index: 2; width: 108px; height: 108px; left: 98px; top: 182px; background: #c0b5ee; }
.contact-planet.planet-linkedin { z-index: 4; width: 80px; height: 80px; left: 274px; top: 214px; background: #f4c694; font-size: 11px; }
.contact-planet.planet-email.copied { background: #c0b5ee; }
.contact-planet.planet-email.copied span { font-size: 11px; }
.contact-planet::before { content: ""; position: absolute; inset: -12px; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 50%; pointer-events: none; }
.contact-planet i, .contact-planet b { position: absolute; width: 12px; height: 12px; margin: -6px; left: 50%; top: 50%; border-radius: 50%; background: var(--coral); pointer-events: none; animation: planet-orbit 14s linear infinite; animation-play-state: paused; --orbit-radius: 92px; }
.contact-planet b { width: 8px; height: 8px; margin: -4px; background: var(--violet); animation-duration: 22s; animation-direction: reverse; }
.planet-email i, .planet-email b { --orbit-radius: 66px; animation-duration: 17s; background: var(--lime); }
.planet-email b { animation-duration: 27s; background: var(--coral); }
.planet-linkedin i, .planet-linkedin b { --orbit-radius: 52px; animation-duration: 19s; background: var(--violet); }
.planet-linkedin b { animation-duration: 29s; background: var(--lime); }
.system-orbit { position: absolute; z-index: -1; left: 36px; top: -10px; width: 342px; height: 342px; border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 50%; pointer-events: none; animation: slow-spin 38s linear infinite; animation-play-state: paused; }
.system-orbit i, .system-orbit b { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--coral); top: calc(50% - 7px); left: -7px; }
.system-orbit b { background: var(--lime); left: auto; right: -7px; }
.js .github-feature.is-orbit-visible .contact-planet i, .js .github-feature.is-orbit-visible .contact-planet b, .js .github-feature.is-orbit-visible .system-orbit { animation-play-state: running; }
body.is-hidden .github-feature * { animation-play-state: paused !important; }
.contact-planet:hover, .contact-planet:focus-visible { box-shadow: 0 0 0 4px var(--page-bg), 0 0 0 6px var(--violet); }
@keyframes planet-orbit { from { transform: rotate(0) translateX(var(--orbit-radius)); } to { transform: rotate(360deg) translateX(var(--orbit-radius)); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .featured-project:hover .featured-media img, .featured-project:focus-visible .featured-media img { transform: none; filter: none; }
  .featured-project:hover .cisa-crop, .featured-project:focus-visible .cisa-crop { transform: rotate(0); }
}
@media (max-width: 1100px) {
  .github-feature { padding: 34px; }
  .contact-system { flex-basis: 340px; transform: scale(.86); transform-origin: center; margin-inline: -20px; }
}
@media (max-width: 999px), (max-height: 679px), (hover: none), (pointer: coarse) {
  .featured-media { height: clamp(190px, 28vw, 340px); }
  .cisa-crop { max-width: calc(clamp(190px, 28vw, 340px)*1.875); }
  .github-feature { flex-wrap: wrap; }
  .github-feature-copy { flex-basis: 100%; }
  .contact-system { flex-basis: 380px; margin: 0 auto; transform: none; }
}
@media (max-width: 600px) {
  .intro-social { margin-top: 20px; gap: 10px; }
  .social-circle { width: 44px; height: 44px; min-height: 44px; }
  .portfolio-print > span { font-size: clamp(90px, 28vw, 160px); }
  .end-content { padding-bottom: 0; }
  .end-links { gap: 10px; margin-top: 22px; margin-bottom: 0; }
  .end-links .social-button, .contact-copy .social-button { padding: 10px 14px; font-size: 14px; }
  .end-links .contact-details-link { margin-left: 0; }
  .end-credit { bottom: 110px; }
  .github-feature { padding: 28px 22px; overflow: hidden; gap: 10px; }
  .github-feature-copy h2 { font-size: clamp(34px, 9vw, 48px); }
  .contact-system { flex: 0 0 auto; width: 380px; left: 50%; margin-left: -190px; margin-right: 0; transform: scale(.76); transform-origin: top center; height: 250px; }
  .contact-github { padding-bottom: 35px; }
  body:not([data-page="home"]) main { padding-bottom: 94px; }
}
@media (max-width: 360px) { .contact-system { transform: scale(.63); height: 210px; } }
@media (min-width: 1000px) and (min-height: 680px) and (hover: hover) and (pointer: fine) {
  .end-content { align-self: stretch; display: flex; flex-direction: column; padding: 4vh 0 0; }
  .end-content > :not(.end-links) { flex-shrink: 0; }
  .end-content > .end-email { align-self: flex-start; max-width: 100%; }
  .end-links { flex: 1; min-height: 78px; margin-block: 0; }
}
@media (prefers-reduced-motion: reduce) { .contact-system *, .contact-system *::before { animation: none !important; } }

/* Composite the cropped screenshot and its hard shadow as one smooth plane. */
.cisa-crop, .visual-cisa .cisa-crop { transform: rotate(-2deg) translateZ(0); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .featured-project:hover .cisa-crop, .featured-project:focus-visible .cisa-crop, .visual-cisa:hover .cisa-crop { transform: rotate(0) translateZ(0); }
}
.is-scene-motion .machine { opacity: var(--machine-reveal, 0); }