@font-face{font-family:Pretendard;src:url('./assets/fonts/Pretendard-Regular.woff2?v=14f1dfb5') format('woff2');font-weight:400;font-display:swap;unicode-range:U+20,U+21,U+22,U+23,U+24,U+25,U+26,U+27,U+28,U+29,U+2A,U+2B,U+2C,U+2D,U+2E,U+2F,U+30,U+31,U+32,U+33,U+34,U+35,U+36,U+37,U+38,U+39,U+3A,U+3B,U+3C,U+3D,U+3E,U+3F,U+40,U+41,U+42,U+43,U+44,U+45,U+46,U+47,U+48,U+49,U+4A,U+4B,U+4C,U+4D,U+4E,U+4F,U+50,U+51,U+52,U+53,U+54,U+55,U+56,U+57,U+58,U+59,U+5A,U+5B,U+5C,U+5D,U+5E,U+5F,U+60,U+61,U+62,U+63,U+64,U+65,U+66,U+67,U+68,U+69,U+6A,U+6B,U+6C,U+6D,U+6E,U+6F,U+70,U+71,U+72,U+73,U+74,U+75,U+76,U+77,U+78,U+79,U+7A,U+7B,U+7C,U+7D,U+7E,U+A0,U+A9,U+B7,U+D7,U+2013,U+2014,U+201C,U+201D,U+2190,U+2191,U+2192,U+2193,U+2197,U+2212,U+AC00,U+AC01,U+AC04,U+AC08,U+AC10,U+AC11,U+AC12,U+AC14,U+AC19,U+AC1C,U+AC1D,U+AC31,U+AC40,U+AC70,U+AC74,U+AC78,U+AC80,U+AC83,U+AC8C,U+ACA9,U+ACAC,U+ACB0,U+ACBC,U+ACBD,U+ACC4,U+ACE0,U+ACE8,U+ACF1,U+ACF3,U+ACF5,U+ACFC,U+AD00,U+AD50,U+AD6C,U+AD6D,U+AD70,U+ADC0,U+ADDC,U+ADF8,U+ADFC,U+AE00,U+AE0B,U+AE30,U+AE34,U+AE38,U+AE40,U+AE4C,U+AED8,U+AF2D,U+AFB8,U+AFC9,U+AFD4,U+B00C,U+B014,U+B053,U+B05D,U+B07C,U+B098,U+B09C,U+B0A0,U+B0A8,U+B0B4,U+B0C8,U+B108,U+B10C,U+B110,U+B113,U+B118,U+B123,U+B124,U+B144,U+B150,U+B17C,U+B192,U+B193,U+B204,U+B208,U+B215,U+B220,U+B234,U+B274,U+B290,U+B294,U+B298,U+B2A5,U+B2C8,U+B2DD,U+B2E4,U+B2E8,U+B2EB,U+B2EC,U+B2F4,U+B2F5,U+B2F9,U+B300,U+B354,U+B358,U+B35C,U+B370,U+B378,U+B3C4,U+B3C5,U+B3CC,U+B3D9,U+B410,U+B418,U+B41C,U+B450,U+B458,U+B4A4,U+B4DC,U+B4DD,U+B4E0,U+B4E3,U+B4E4,U+B4EC,U+B4ED,U+B4F1,U+B514,U+B518,U+B529,U+B530,U+B54C,U+B5A4,U+B5BB,U+B77C,U+B77D,U+B78C,U+B798,U+B79C,U+B7C9,U+B7EC,U+B7FC,U+B808,U+B80C,U+B824,U+B825,U+B828,U+B82C,U+B835,U+B838,U+B840,U+B85C,U+B85D,U+B860,U+B864,U+B8B0,U+B8CC,U+B8E8,U+B958,U+B974,U+B978,U+B97C,U+B984,U+B985,U+B9AC,U+B9B4,U+B9BC,U+B9BD,U+B9C1,U+B9C8,U+B9C9,U+B9CC,U+B9DD,U+B9DE,U+B9E1,U+B9E4,U+B9E8,U+BA3C,U+BA54,U+BA70,U+BA74,U+BA85,U+BA87,U+BAA8,U+BAA9,U+BABB,U+BB36,U+BB38,U+BB3C,U+BBF8,U+BBFC,U+BC00,U+BC0B,U+BC14,U+BC15,U+BC16,U+BC18,U+BC1B,U+BC1C,U+BC25,U+BC29,U+BC30,U+BC31,U+BC84,U+BC88,U+BC94,U+BC95,U+BC97,U+BCA0,U+BCA1,U+BCA8,U+BCC0,U+BCC4,U+BCD1,U+BCF4,U+BCF5,U+BCF6,U+BCF8,U+BCFC,U+BD05,U+BD07,U+BD24,U+BD80,U+BD84,U+BD88,U+BE0C,U+BE14,U+BE44,U+BE45,U+BE48,U+BE4C,U+BFD0,U+C090,U+C0AC,U+C0AD,U+C0B0,U+C0B4,U+C0BC,U+C0BD,U+C0C1,U+C0C8,U+C0C9,U+C0D8,U+C0DD,U+C11C,U+C11D,U+C120,U+C124,U+C131,U+C138,U+C13C,U+C140,U+C158,U+C15C,U+C18C,U+C18D,U+C190,U+C1A1,U+C218,U+C21C,U+C220,U+C22B,U+C27D,U+C2A4,U+C2B5,U+C2B7,U+C2DC,U+C2DD,U+C2E0,U+C2E4,U+C2EC,U+C2F6,U+C313,U+C4F0,U+C4F4,U+C4F8,U+C529,U+C544,U+C545,U+C548,U+C54A,U+C54C,U+C558,U+C559,U+C55E,U+C560,U+C571,U+C57C,U+C57D,U+C591,U+C5B4,U+C5B8,U+C5BC,U+C5C5,U+C5C6,U+C5C8,U+C5D0,U+C5D4,U+C5EC,U+C5ED,U+C5F0,U+C5F4,U+C600,U+C601,U+C608,U+C624,U+C628,U+C62C,U+C640,U+C644,U+C678,U+C694,U+C6A9,U+C6B0,U+C6B4,U+C6C0,U+C6C3,U+C6D0,U+C6D4,U+C6F9,U+C704,U+C720,U+C728,U+C73C,U+C740,U+C744,U+C74C,U+C751,U+C758,U+C774,U+C775,U+C778,U+C77C,U+C77D,U+C784,U+C785,U+C788,U+C790,U+C791,U+C798,U+C7A1,U+C7A5,U+C7AC,U+C7AD,U+C800,U+C801,U+C804,U+C808,U+C810,U+C811,U+C815,U+C81C,U+C81D,U+C870,U+C871,U+C874,U+C885,U+C88B,U+C88C,U+C8FC,U+C900,U+C904,U+C90D,U+C911,U+C988,U+C989,U+C99D,U+C9C0,U+C9C1,U+C9C4,U+C9C8,U+C9D1,U+C9D5,U+C9DC,U+CC28,U+CC29,U+CC30,U+CC38,U+CC3D,U+CC3E,U+CC44,U+CC45,U+CC57,U+CC98,U+CC9C,U+CCAD,U+CCB4,U+CD08,U+CD18,U+CD1D,U+CD2C,U+CD5C,U+CD94,U+CD95,U+CD98,U+CD9C,U+CDA4,U+CDA9,U+CDB0,U+CDC4,U+CDE8,U+CE21,U+CE35,U+CE58,U+CE59,U+CE5C,U+CE68,U+CE74,U+CE90,U+CEE4,U+CEE8,U+CEEC,U+CEF4,U+CF13,U+CF20,U+CF30,U+CF54,U+CF5C,U+D06C,U+D070,U+D074,U+D0A4,U+D0AC,U+D0C0,U+D0D0,U+D0D5,U+D0DC,U+D0DD,U+D130,U+D134,U+D14C,U+D14D,U+D15C,U+D1A0,U+D1B5,U+D22C,U+D2B8,U+D2B9,U+D2C0,U+D2F0,U+D300,U+D305,U+D30C,U+D310,U+D314,U+D328,U+D398,U+D3B4,U+D3B8,U+D3C8,U+D3C9,U+D3EC,U+D3F0,U+D3F4,U+D45C,U+D488,U+D504,U+D50C,U+D53C,U+D53D,U+D544,U+D558,U+D559,U+D55C,U+D560,U+D568,U+D569,U+D56D,U+D574,U+D575,U+D588,U+D589,U+D5A5,U+D5D8,U+D604,U+D611,U+D615,U+D638,U+D648,U+D654,U+D655,U+D658,U+D65C,U+D669,U+D68C,U+D68D,U+D6A8,U+D6C4,U+D734,U+D750,U+D76C,U+D788,U+D799;}
@font-face{font-family:Pretendard;src:url('./assets/fonts/Pretendard-Bold.woff2?v=b22dfd3e') format('woff2');font-weight:700;font-display:swap;unicode-range:U+20,U+21,U+22,U+23,U+24,U+25,U+26,U+27,U+28,U+29,U+2A,U+2B,U+2C,U+2D,U+2E,U+2F,U+30,U+31,U+32,U+33,U+34,U+35,U+36,U+37,U+38,U+39,U+3A,U+3B,U+3C,U+3D,U+3E,U+3F,U+40,U+41,U+42,U+43,U+44,U+45,U+46,U+47,U+48,U+49,U+4A,U+4B,U+4C,U+4D,U+4E,U+4F,U+50,U+51,U+52,U+53,U+54,U+55,U+56,U+57,U+58,U+59,U+5A,U+5B,U+5C,U+5D,U+5E,U+5F,U+60,U+61,U+62,U+63,U+64,U+65,U+66,U+67,U+68,U+69,U+6A,U+6B,U+6C,U+6D,U+6E,U+6F,U+70,U+71,U+72,U+73,U+74,U+75,U+76,U+77,U+78,U+79,U+7A,U+7B,U+7C,U+7D,U+7E,U+A0,U+A9,U+B7,U+D7,U+2013,U+2014,U+201C,U+201D,U+2190,U+2191,U+2192,U+2193,U+2197,U+2212,U+AC00,U+AC01,U+AC04,U+AC08,U+AC10,U+AC11,U+AC12,U+AC14,U+AC19,U+AC1C,U+AC1D,U+AC31,U+AC40,U+AC70,U+AC74,U+AC78,U+AC80,U+AC83,U+AC8C,U+ACA9,U+ACAC,U+ACB0,U+ACBC,U+ACBD,U+ACC4,U+ACE0,U+ACE8,U+ACF1,U+ACF3,U+ACF5,U+ACFC,U+AD00,U+AD50,U+AD6C,U+AD6D,U+AD70,U+ADC0,U+ADDC,U+ADF8,U+ADFC,U+AE00,U+AE0B,U+AE30,U+AE34,U+AE38,U+AE40,U+AE4C,U+AED8,U+AF2D,U+AFB8,U+AFC9,U+AFD4,U+B00C,U+B014,U+B053,U+B05D,U+B07C,U+B098,U+B09C,U+B0A0,U+B0A8,U+B0B4,U+B0C8,U+B108,U+B10C,U+B110,U+B113,U+B118,U+B123,U+B124,U+B144,U+B150,U+B17C,U+B192,U+B193,U+B204,U+B208,U+B215,U+B220,U+B234,U+B274,U+B290,U+B294,U+B298,U+B2A5,U+B2C8,U+B2DD,U+B2E4,U+B2E8,U+B2EB,U+B2EC,U+B2F4,U+B2F5,U+B2F9,U+B300,U+B354,U+B358,U+B35C,U+B370,U+B378,U+B3C4,U+B3C5,U+B3CC,U+B3D9,U+B410,U+B418,U+B41C,U+B450,U+B458,U+B4A4,U+B4DC,U+B4DD,U+B4E0,U+B4E3,U+B4E4,U+B4EC,U+B4ED,U+B4F1,U+B514,U+B518,U+B529,U+B530,U+B54C,U+B5A4,U+B5BB,U+B77C,U+B77D,U+B78C,U+B798,U+B79C,U+B7C9,U+B7EC,U+B7FC,U+B808,U+B80C,U+B824,U+B825,U+B828,U+B82C,U+B835,U+B838,U+B840,U+B85C,U+B85D,U+B860,U+B864,U+B8B0,U+B8CC,U+B8E8,U+B958,U+B974,U+B978,U+B97C,U+B984,U+B985,U+B9AC,U+B9B4,U+B9BC,U+B9BD,U+B9C1,U+B9C8,U+B9C9,U+B9CC,U+B9DD,U+B9DE,U+B9E1,U+B9E4,U+B9E8,U+BA3C,U+BA54,U+BA70,U+BA74,U+BA85,U+BA87,U+BAA8,U+BAA9,U+BABB,U+BB36,U+BB38,U+BB3C,U+BBF8,U+BBFC,U+BC00,U+BC0B,U+BC14,U+BC15,U+BC16,U+BC18,U+BC1B,U+BC1C,U+BC25,U+BC29,U+BC30,U+BC31,U+BC84,U+BC88,U+BC94,U+BC95,U+BC97,U+BCA0,U+BCA1,U+BCA8,U+BCC0,U+BCC4,U+BCD1,U+BCF4,U+BCF5,U+BCF6,U+BCF8,U+BCFC,U+BD05,U+BD07,U+BD24,U+BD80,U+BD84,U+BD88,U+BE0C,U+BE14,U+BE44,U+BE45,U+BE48,U+BE4C,U+BFD0,U+C090,U+C0AC,U+C0AD,U+C0B0,U+C0B4,U+C0BC,U+C0BD,U+C0C1,U+C0C8,U+C0C9,U+C0D8,U+C0DD,U+C11C,U+C11D,U+C120,U+C124,U+C131,U+C138,U+C13C,U+C140,U+C158,U+C15C,U+C18C,U+C18D,U+C190,U+C1A1,U+C218,U+C21C,U+C220,U+C22B,U+C27D,U+C2A4,U+C2B5,U+C2B7,U+C2DC,U+C2DD,U+C2E0,U+C2E4,U+C2EC,U+C2F6,U+C313,U+C4F0,U+C4F4,U+C4F8,U+C529,U+C544,U+C545,U+C548,U+C54A,U+C54C,U+C558,U+C559,U+C55E,U+C560,U+C571,U+C57C,U+C57D,U+C591,U+C5B4,U+C5B8,U+C5BC,U+C5C5,U+C5C6,U+C5C8,U+C5D0,U+C5D4,U+C5EC,U+C5ED,U+C5F0,U+C5F4,U+C600,U+C601,U+C608,U+C624,U+C628,U+C62C,U+C640,U+C644,U+C678,U+C694,U+C6A9,U+C6B0,U+C6B4,U+C6C0,U+C6C3,U+C6D0,U+C6D4,U+C6F9,U+C704,U+C720,U+C728,U+C73C,U+C740,U+C744,U+C74C,U+C751,U+C758,U+C774,U+C775,U+C778,U+C77C,U+C77D,U+C784,U+C785,U+C788,U+C790,U+C791,U+C798,U+C7A1,U+C7A5,U+C7AC,U+C7AD,U+C800,U+C801,U+C804,U+C808,U+C810,U+C811,U+C815,U+C81C,U+C81D,U+C870,U+C871,U+C874,U+C885,U+C88B,U+C88C,U+C8FC,U+C900,U+C904,U+C90D,U+C911,U+C988,U+C989,U+C99D,U+C9C0,U+C9C1,U+C9C4,U+C9C8,U+C9D1,U+C9D5,U+C9DC,U+CC28,U+CC29,U+CC30,U+CC38,U+CC3D,U+CC3E,U+CC44,U+CC45,U+CC57,U+CC98,U+CC9C,U+CCAD,U+CCB4,U+CD08,U+CD18,U+CD1D,U+CD2C,U+CD5C,U+CD94,U+CD95,U+CD98,U+CD9C,U+CDA4,U+CDA9,U+CDB0,U+CDC4,U+CDE8,U+CE21,U+CE35,U+CE58,U+CE59,U+CE5C,U+CE68,U+CE74,U+CE90,U+CEE4,U+CEE8,U+CEEC,U+CEF4,U+CF13,U+CF20,U+CF30,U+CF54,U+CF5C,U+D06C,U+D070,U+D074,U+D0A4,U+D0AC,U+D0C0,U+D0D0,U+D0D5,U+D0DC,U+D0DD,U+D130,U+D134,U+D14C,U+D14D,U+D15C,U+D1A0,U+D1B5,U+D22C,U+D2B8,U+D2B9,U+D2C0,U+D2F0,U+D300,U+D305,U+D30C,U+D310,U+D314,U+D328,U+D398,U+D3B4,U+D3B8,U+D3C8,U+D3C9,U+D3EC,U+D3F0,U+D3F4,U+D45C,U+D488,U+D504,U+D50C,U+D53C,U+D53D,U+D544,U+D558,U+D559,U+D55C,U+D560,U+D568,U+D569,U+D56D,U+D574,U+D575,U+D588,U+D589,U+D5A5,U+D5D8,U+D604,U+D611,U+D615,U+D638,U+D648,U+D654,U+D655,U+D658,U+D65C,U+D669,U+D68C,U+D68D,U+D6A8,U+D6C4,U+D734,U+D750,U+D76C,U+D788,U+D799;}
:root { --paper: #fff; --ink: #191b1e; --muted: #60656b; --line: #d9dce0; --surface: #f5f6f7; --gutter: clamp(24px, 4.5vw, 64px); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 35px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Pretendard, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #e0e5eb; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; background: none; border: 0; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0 0 1.15em; line-height: 1.85; word-break: keep-all; overflow-wrap: break-word; }
h1, h2, h3 { margin: 0; line-height: 1.35; letter-spacing: -.035em; word-break: keep-all; overflow-wrap: break-word; }
.wrap { width: min(1360px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.muted, .scope { color: var(--muted); }
.eyebrow { font-size: 13px; color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: 20px; font-size: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
.text-link:hover { color: var(--muted); }
.skip-link { position: fixed; top: 0; left: 20px; padding: 12px 18px; color: #fff; background: var(--ink); z-index: 100; transform: translateY(-120%); }
.skip-link:focus { transform: translateY(0); }
.site-header { width: calc(min(1360px, 100%) - 2 * var(--gutter)); height: 84px; margin-inline: auto; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.wordmark { font-weight: 700; font-size: 20px; letter-spacing: -.035em; }
.site-nav { display: flex; gap: 32px; align-items: center; font-size: 14px; }
.site-nav a { padding-block: 10px; }
.site-nav a[aria-current=page], .site-nav a:hover { text-decoration: underline; text-underline-offset: 7px; }
.menu-toggle { display: none; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10%; align-items: center; padding-block: 88px 78px; }
.hero-role { font-size: 17px; margin-bottom: 16px; }
.hero-name { font-size: clamp(72px, 8.4vw, 112px); line-height: 1.08; letter-spacing: -.065em; font-weight: 700; }
.hero-name-en { display: block; font-size: 19px; font-weight: 400; letter-spacing: .015em; margin-top: 19px; }
.hero-intro { max-width: 570px; margin-top: 32px; margin-bottom: 25px; font-size: 17px; }
.hero-portrait { width: 244px; justify-self: center; }
.hero-portrait img { width: 100%; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 37px 28px; border-top: 1px solid var(--line); }
.section-heading h2 { font-size: 32px; }
.work-feature { display: grid; grid-template-columns: .86fr 1.14fr; gap: 60px; border-top: 1px solid var(--line); padding-block: 32px 48px; }
.work-copy { display: flex; flex-direction: column; align-items: flex-start; padding-block: 25px 15px; }
.work-number { color: var(--muted); font-size: 13px; margin-bottom: 28px; }
.work-copy h2, .work-copy h3 { font-size: clamp(35px, 3.8vw, 52px); letter-spacing: -.045em; margin-bottom: 14px; }
.work-subtitle { font-size: 20px; margin-bottom: 17px; line-height: 1.55; }
.work-description { font-size: 15px; max-width: 410px; color: var(--muted); }
.work-meta { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: auto; padding-top: 18px; }
.work-open { margin-top: 24px; }
.work-visual { min-width: 0; min-height: 370px; padding: 34px 25px 47px; background: var(--surface); position: relative; display: flex; align-items: center; justify-content: center; }
.dashboard-image { width: 100%; height: auto; border: 1px solid var(--line); }
.visual-label { position: absolute; bottom: 18px; left: 25px; font-size: 11px; color: var(--muted); }
.phone-stage { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; }
.phone-stage img { height: 330px; width: auto; max-width: 44%; object-fit: contain; object-position: center; border: 1px solid var(--line); }
.more-work { text-align: right; padding-block: 0 64px; }
.about-strip, .about-quote { display: grid; grid-template-columns: .65fr 1.35fr; gap: 70px; border-top: 1px solid var(--line); padding-block: 64px 76px; }
.about-strip h2, .about-quote h2 { font-size: 30px; }
.about-strip p, .about-quote p { font-size: 17px; max-width: 750px; }
.about-strip .text-link, .about-quote .text-link { margin-top: 10px; }
.contact-section { margin-top: 0; padding-block: 44px 28px; border-top: 1px solid var(--line); }
.contact-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 27px; }
.contact-top h2 { font-size: 22px; }
.contact-links { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.email-link { font-size: clamp(23px, 2.5vw, 34px); letter-spacing: -.025em; overflow-wrap: anywhere; }
.copy-button { width: 34px; height: 34px; font-size: 20px; border: 1px solid var(--line); }
.copy-button:hover { background: var(--surface); }
.copy-status { font-size: 12px; min-height: 18px; margin-top: 12px; color: var(--muted); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 36px; font-size: 12px; color: var(--muted); }
.page-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; align-items: end; padding-block: 73px 60px; }
.page-heading h1 { font-size: clamp(50px, 6vw, 78px); letter-spacing: -.06em; }
.page-heading p { max-width: 450px; justify-self: end; font-size: 16px; margin: 0; }
.minor-projects { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding-block: 48px 75px; border-top: 1px solid var(--line); }
.minor-project { min-width: 0; }
.minor-project h2 { font-size: 34px; margin-block: 19px 18px; }
.minor-project h3 { font-size: 19px; margin-bottom: 16px; }
.minor-project p { font-size: 15px; color: var(--muted); }
.data-list { display: grid; gap: 22px; }
.data-list strong { font-size: 17px; display: block; margin-bottom: 5px; }
.data-list p { font-size: 14px; margin: 0; }
.scope { margin-top: 18px; font-size: 12px !important; }
.project-hero { padding-top: 42px; }
.project-topline { display: flex; align-items: center; justify-content: space-between; gap: 25px; font-size: 13px; color: var(--muted); margin-bottom: 35px; }
.project-title { font-size: clamp(64px, 10.4vw, 140px); line-height: 1.05; letter-spacing: -.065em; }
.project-subtitle { font-size: 25px; margin-block: 20px 36px; }
.project-cover { display: flex; align-items: center; justify-content: center; min-height: 360px; padding: 35px; background: var(--surface); }
.project-cover .dashboard-image { max-width: 1000px; width: 90%; }
.gabolle-cover .phone-stage { gap: 55px; }
.gabolle-cover .phone-stage img { height: 450px; max-width: 42%; }
.image-caption { font-size: 12px; line-height: 1.75; color: var(--muted); margin-top: 12px; }
.project-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; padding-block: 66px; }
.project-summary h2 { font-size: 29px; }
.project-summary p { font-size: 16px; }
.project-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 30px; margin: 0 0 24px; }
.project-facts dt { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.project-facts dd { font-size: 14px; line-height: 1.75; margin: 0; }
.role-note { color: var(--muted); font-size: 13px !important; border-top: 1px solid var(--line); padding-top: 20px; }
.content-section { display: grid; grid-template-columns: .65fr 1.35fr; gap: 70px; padding-block: 63px; border-top: 1px solid var(--line); }
.section-side .eyebrow { margin-bottom: 20px; }
.section-side h2 { font-size: 30px; line-height: 1.45; }
.section-body { min-width: 0; }
.section-body > p { font-size: 17px; }
.feature-entry { padding-bottom: 29px; margin-bottom: 29px; border-bottom: 1px solid var(--line); }
.feature-entry:last-child { border: 0; margin-bottom: 0; padding-bottom: 0; }
.entry-number { display: none; }
.feature-entry h3, .case h3 { font-size: 23px; margin-bottom: 15px; }
.feature-entry p { font-size: 16px; }
.tech-line { font-size: 12px; color: var(--muted); margin-top: 14px; }
.flow-list { list-style: none; padding: 0; margin-block: 28px; display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.flow-list li { padding: 22px 15px; border-right: 1px solid var(--line); }
.flow-list li:first-child { padding-left: 0; }
.flow-list li:last-child { border: 0; }
.flow-list small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 13px; }
.flow-list strong { font-weight: 400; font-size: 14px; line-height: 1.7; }
.metric-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; border-block: 1px solid var(--line); padding-block: 24px; margin-block: 25px; }
.metric-pair > div { min-width: 0; }
.metric-number { font-size: clamp(29px, 3.2vw, 43px); letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.35; overflow-wrap: break-word; }
.metric-label { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 7px; }
.large-figure { margin-top: 30px; }
.large-figure img { width: 100%; height: auto; border: 1px solid var(--line); }
.case { margin-bottom: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.case:last-child { margin: 0; padding: 0; border: 0; }
.case-label { font-size: 12px; color: var(--muted); }
.case h3 { margin-top: 15px; }
.case p { font-size: 16px; }
.case-note { font-size: 13px !important; color: var(--muted); }
details { border-top: 1px solid var(--line); margin-top: 22px; }
summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; font-size: 14px; padding-block: 17px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-size: 22px; }
details[open] summary::after { content: '−'; }
.detail-body, .detail-body p { font-size: 13px; color: var(--muted); line-height: 1.8; }
.table-scroll { overflow-x: auto; }
.data-table { border-collapse: collapse; width: 100%; margin-bottom: 27px; font-size: 14px; }
.data-table th, .data-table td { padding: 14px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.75; }
.data-table th:first-child, .data-table td:first-child { padding-left: 0; }
.data-table th { font-weight: 700; }
.plain-list { font-size: 15px; line-height: 1.8; padding-left: 20px; }
.stage-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); margin-top: 27px; }
.stage-button { display: flex; gap: 12px; padding: 17px 14px; text-align: left; font-size: 14px; border-right: 1px solid var(--line); }
.stage-button:last-child { border-right: 0; }
.stage-button span { font-size: 11px; }
.stage-button[aria-pressed=true] { background: var(--ink); color: #fff; }
.stage-panel { padding: 28px; background: var(--surface); min-height: 215px; }
.stage-panel .eyebrow { margin-bottom: 15px; font-size: 12px; }
.stage-panel h3 { font-size: 22px; margin-bottom: 13px; }
.stage-panel p { font-size: 15px; margin: 0; }
.backend-map { display: grid; gap: 20px; max-width: 650px; margin-block: 29px; }
.map-node { border: 1px solid var(--line); padding: 18px 23px; position: relative; }
.map-node:not(:last-child)::after { content: '↓'; position: absolute; bottom: -24px; left: 50%; line-height: 24px; }
.map-node strong { font-size: 15px; display: block; margin-bottom: 6px; }
.map-node small { font-size: 12px; color: var(--muted); }
.map-caption { font-size: 13px !important; color: var(--muted); }
.next-project { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-block: 44px; }
.next-project .eyebrow { margin-bottom: 13px; }
.next-project h2 { font-size: 40px; letter-spacing: -.045em; }
.next-arrow { font-size: 40px; }
.about-hero { display: grid; grid-template-columns: 1fr 240px; align-items: center; gap: 100px; padding-block: 73px 65px; }
.about-hero h1 { font-size: 66px; margin-bottom: 33px; }
.about-lead { font-size: 21px !important; }
.about-hero p { font-size: 17px; max-width: 680px; }
.about-portrait { width: 210px; justify-self: center; }
.about-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; border-top: 1px solid var(--line); padding-block: 52px 66px; }
.about-blocks h2 { font-size: 28px; margin-bottom: 28px; }
.skill-row { display: grid; grid-template-columns: 1fr 1.25fr; gap: 20px; padding-block: 18px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.8; }
.skill-row p { font-size: 13px; color: var(--muted); margin: 0; }
.history-row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding-block: 18px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.8; }
.history-row time { font-size: 12px; color: var(--muted); }
.history-row small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.product-numbers { display: flex; gap: 48px; padding-block: 24px; border-block: 1px solid var(--line); margin-block: 25px 30px; }
.product-numbers strong { display: block; font-size: 37px; margin-bottom: 6px; font-weight: 700; letter-spacing: -.035em; }
.product-numbers small { display: block; font-size: 13px; color: var(--muted); line-height: 1.7; }
.reflection-entry + .reflection-entry { margin-top: 32px; }
.reflection-entry h3 { font-size: 22px; margin-bottom: 14px; }
.reflection-entry p { font-size: 16px; }
@media (max-width: 1050px) {
  .hero { grid-template-columns: minmax(0, 1fr) 220px; gap: 7%; }
  .hero-portrait { width: 205px; }
  .work-feature { gap: 35px; }
  .work-visual { min-height: 330px; padding-inline: 20px; }
  .phone-stage { gap: 17px; }
  .phone-stage img { height: 280px; }
  .content-section, .about-strip, .about-quote { grid-template-columns: .65fr 1.35fr; gap: 40px; }
  .section-side h2 { font-size: 27px; }
  .project-summary { gap: 50px; }
  .about-hero { gap: 50px; }
  .about-blocks { gap: 40px; }
  .skill-row { grid-template-columns: 1fr; gap: 5px; }
  .desktop-break { display: none; }
}
@media (max-width: 760px) {
  :root { --gutter: 24px; }
  .site-header { height: 72px; }
  .menu-toggle { display: block; font-size: 14px; padding: 12px 0 12px 20px; }
  .site-nav { display: none; position: absolute; top: 71px; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); padding: 20px var(--gutter) 25px; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; gap: 12px; font-size: 20px; }
  .site-nav.is-open { display: flex; }
  .hero { grid-template-columns: minmax(0, 1fr) 108px; gap: 20px; padding-block: 52px 48px; align-items: start; }
  .hero-name { font-size: clamp(53px, 9.5vw, 70px); letter-spacing: -.07em; white-space: nowrap; }
  .hero-name-en { font-size: 13px; letter-spacing: 0; margin-top: 13px; }
  .hero-role { font-size: 14px; margin-bottom: 14px; }
  .hero-portrait { width: 108px; margin-top: 38px; }
  .hero-intro { font-size: 15px; margin-top: 27px; width: calc(100vw - 2 * var(--gutter)); max-width: 540px; }
  .hero-copy > .text-link { font-size: 13px; }
  .section-heading { padding-block: 30px 24px; }
  .section-heading h2 { font-size: 28px; }
  .section-heading .text-link { font-size: 12px; }
  .work-feature { grid-template-columns: 1fr; gap: 0; padding-top: 20px; padding-bottom: 35px; }
  .work-visual { order: -1; min-height: 0; padding: 25px 16px 42px; }
  .work-copy { padding-block: 25px 0; }
  .work-number { margin-bottom: 17px; font-size: 12px; }
  .work-copy h2, .work-copy h3 { font-size: 37px; margin-bottom: 12px; }
  .work-subtitle { font-size: 19px; margin-bottom: 14px; }
  .work-description { font-size: 14px; max-width: none; }
  .work-meta { padding-top: 10px; font-size: 11px; }
  .work-open { margin-top: 20px; font-size: 13px; }
  .phone-stage { gap: 22px; }
  .phone-stage img { height: 290px; max-width: 43%; }
  .visual-label { left: 16px; bottom: 14px; font-size: 10px; }
  .more-work { padding-bottom: 42px; }
  .about-strip, .about-quote { grid-template-columns: 1fr; gap: 25px; padding-block: 40px 48px; }
  .about-strip h2, .about-quote h2 { font-size: 26px; }
  .about-strip p, .about-quote p { font-size: 15px; }
  .contact-section { padding-top: 31px; }
  .contact-top h2 { font-size: 20px; }
  .contact-top .text-link { font-size: 13px; }
  .footer-bottom { font-size: 11px; margin-top: 27px; }
  .page-heading { grid-template-columns: 1fr; gap: 25px; padding-block: 47px 37px; }
  .page-heading h1 { font-size: 47px; }
  .page-heading p { justify-self: start; font-size: 15px; }
  .minor-projects { grid-template-columns: 1fr; gap: 47px; padding-block: 35px 48px; }
  .minor-project h2 { font-size: 30px; }
  .project-hero { padding-top: 30px; }
  .project-topline { font-size: 11px; margin-bottom: 28px; }
  .project-title { font-size: clamp(50px, 12.8vw, 88px); letter-spacing: -.06em; }
  .project-subtitle { font-size: 20px; line-height: 1.6; margin-block: 16px 25px; }
  .project-cover { min-height: 0; padding: 18px; }
  .project-cover .dashboard-image { width: 100%; }
  .gabolle-cover { padding: 25px 15px; }
  .gabolle-cover .phone-stage { gap: 20px; }
  .gabolle-cover .phone-stage img { height: 330px; max-width: 43%; }
  .image-caption { font-size: 11px; }
  .project-summary { grid-template-columns: 1fr; gap: 25px; padding-block: 39px; }
  .project-summary h2 { font-size: 26px; }
  .project-summary p { font-size: 15px; }
  .project-facts { gap: 21px; }
  .project-facts dd { font-size: 13px; }
  .role-note { font-size: 12px !important; }
  .content-section { grid-template-columns: 1fr; gap: 28px; padding-block: 40px; }
  .section-side h2 { font-size: 27px; }
  .section-side .eyebrow { margin-bottom: 11px; }
  .section-side h2 br { display: none; }
  .section-body > p, .feature-entry p, .case p, .reflection-entry p { font-size: 15px; }
  .feature-entry h3, .case h3, .reflection-entry h3 { font-size: 21px; }
  .flow-list { grid-template-columns: 1fr 1fr; }
  .flow-list li { border-bottom: 1px solid var(--line); }
  .flow-list li:nth-child(2) { border-right: 0; }
  .flow-list li:nth-child(n+3) { border-bottom: 0; }
  .flow-list li:nth-child(3) { padding-left: 0; }
  .metric-pair { grid-template-columns: 1fr; gap: 23px; }
  .metric-number { font-size: 34px; }
  .data-table { font-size: 12px; }
  .data-table th, .data-table td { padding: 12px 8px; }
  .stage-tabs { grid-template-columns: 1fr 1fr; }
  .stage-button { border-bottom: 1px solid var(--line); }
  .stage-button:nth-child(2) { border-right: 0; }
  .stage-button:nth-child(n+3) { border-bottom: 0; }
  .stage-panel { padding: 24px 21px; min-height: 280px; }
  .stage-panel h3 { font-size: 21px; }
  .stage-panel p { font-size: 14px; }
  .next-project { padding-block: 33px; }
  .next-project h2 { font-size: 35px; }
  .next-arrow { font-size: 33px; }
  .about-hero { grid-template-columns: 1fr 110px; gap: 25px; padding-block: 47px 39px; align-items: start; }
  .about-hero h1 { font-size: 47px; margin-bottom: 27px; }
  .about-hero p { width: calc(100vw - 2 * var(--gutter)); max-width: 650px; font-size: 15px; }
  .about-lead { font-size: 18px !important; margin-bottom: 155px; }
  .about-portrait { width: 110px; margin-top: 90px; }
  .about-blocks { grid-template-columns: 1fr; gap: 40px; padding-block: 39px 43px; }
  .about-blocks h2 { font-size: 26px; margin-bottom: 23px; }
  .skill-row { grid-template-columns: 1fr 1.3fr; gap: 15px; font-size: 13px; }
  .skill-row p { font-size: 12px; }
  .history-row { grid-template-columns: 87px 1fr; font-size: 13px; }
  .history-row time { font-size: 11px; }
  .product-numbers { gap: 30px; }
  .product-numbers strong { font-size: 31px; }
  .product-numbers small { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.app-gallery {display:flex;justify-content:center;gap:35px;padding:30px 20px;margin-top:28px;background:var(--surface)}
.app-gallery>div{min-width:0;width:40%;max-width:245px}.app-gallery img{width:100%;height:auto;border:1px solid var(--line)}
@media(max-width:760px){.app-gallery{gap:20px;padding:23px 16px}.app-gallery>div{width:44%}.app-gallery .image-caption{font-size:10px}}
@media(max-width:760px){.hero-name{font-size:clamp(47px,9.5vw,70px)}.about-hero{grid-template-columns:1fr;gap:25px}.about-hero p{width:auto}.about-lead{margin-bottom:1.15em}.about-portrait{display:none}}
@media(max-width:760px){
  .hero{gap:0 20px;align-items:start}
  .hero-copy{display:contents}
  .hero-role{grid-column:1;grid-row:1}
  .hero-name{grid-column:1;grid-row:2}
  .hero-portrait{grid-column:2;grid-row:1 / 3;align-self:end;margin:0}
  .hero-intro{grid-column:1 / -1;grid-row:3;width:auto;margin-top:28px}
  .hero-copy>.text-link{grid-column:1 / -1;grid-row:4;justify-self:start}
}

/* Warm palette, restrained sculpture and current portfolio content. */
:root {
  --paper: #f1efe6;
  --ink: #252b24;
  --muted: #646a5e;
  --line: #c7c9bb;
  --surface: #e8e9dc;
  --sage: #b8c5a8;
  --lavender: #c4b7d4;
  --rust: #a65e4a;
  --ease: cubic-bezier(.22,.61,.36,1);
}
html { scroll-padding-top: 38px; }
::selection { background: var(--lavender); color: var(--ink); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: #8e4935; }
.reading-progress { position: fixed; inset: 0 0 auto; height: 3px; background: var(--rust); z-index: 100; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.site-header { height: 88px; }
.wordmark { font-size: 22px; }
.site-nav { gap: 38px; }
.text-link { border-color: currentColor; transition: color .25s; }
.text-link span { display: inline-block; transition: transform .35s var(--ease); }
.text-link:hover { color: #8e4935; }
.text-link:hover span { transform: translate(4px,-3px); }
.hero { min-height: min(770px, calc(100svh - 88px)); grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 4.5%; padding-block: 64px 76px; position: relative; overflow: clip; }
.hero-copy { position: relative; z-index: 2; }
.hero-role { font-size: 17px; max-width: 430px; line-height: 1.8; margin-bottom: 30px; padding-left: 17px; position: relative; }
.hero-role::before { content: ''; position: absolute; width: 6px; height: 6px; background: var(--rust); border-radius: 50%; left: 0; top: .72em; box-shadow: 0 0 0 4px #a65e4a12; }
.hero-name { font-size: clamp(90px, 10.3vw, 150px); line-height: 1.05; letter-spacing: -.075em; }
.hero-name-en { font-family: Pretendard,Arial,sans-serif; font-style: normal; font-size: clamp(30px, 3.15vw, 46px); letter-spacing: -.035em; margin-top: 18px; }
.hero-intro { font-size: 17px; max-width: 465px; margin-top: 37px; margin-bottom: 28px; }
.hero-art { min-width: 0; position: relative; width: 100%; height: 510px; isolation: isolate; }
.hero-sculpture, .sculpture-fallback { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.hero-sculpture { opacity: 0; transition: opacity .6s; }
.sculpture-ready .hero-sculpture { opacity: 1; }
.sculpture-ready .sculpture-fallback { visibility: hidden; }
.sculpture-ground { position: absolute; width: 62%; height: 7%; left: 22%; bottom: 6%; border-radius: 50%; background: #62735325; filter: blur(16px); }
.portrait-print { width: 43%; max-width: 242px; position: absolute; left: 30%; top: 18%; padding: 11px 11px 25px; background: #fafaf3; border: 1px solid #e8e8dc; transform: rotate(-2deg); box-shadow: 0 22px 50px #303b2420; z-index: 3; }
.portrait-print img { width: 100%; height: auto; }
.section-heading { padding-block: 47px 33px; }
.section-heading h2 { font-size: clamp(35px,4vw,54px); font-weight: 400; letter-spacing: -.055em; }
.work-feature { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 55px; padding-block: 29px 44px; align-items: stretch; }
.work-copy { padding-block: 24px 20px; }
.work-number { font-size: 13px; margin-bottom: 43px; }
.work-copy h2, .work-copy h3 { font-size: clamp(40px,4.4vw,65px); letter-spacing: -.065em; line-height: 1.08; margin-bottom: 20px; }
.work-subtitle { font-size: 21px; }
.work-description { font-size: 14px; }
.work-meta { font-size: 11px; }
.work-visual { min-height: 390px; padding: 43px 30px 62px; background: var(--sage); overflow: hidden; isolation: isolate; }
.work-feature.gabolle .work-visual { background: var(--lavender); }
.work-visual::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#ffffff28 1px,transparent 1px),linear-gradient(90deg,#ffffff28 1px,transparent 1px); background-size: 49px 49px; z-index: -1; }
.work-visual .dashboard-image { width: 95%; height: auto; object-fit: contain; border: 7px solid #f9f9f1; box-shadow: 0 24px 42px #28331f20; transform: rotate(-1.7deg); transition: transform .8s var(--ease),box-shadow .8s var(--ease); }
.work-feature:hover .work-visual .dashboard-image { transform: rotate(0deg) translateY(-5px); box-shadow: 0 30px 50px #28331f24; }
.work-visual::after { content: '↗'; position: absolute; top: 20px; right: 20px; width: 34px; height: 34px; border: 1px solid #252b2466; border-radius: 50%; display: grid; place-items: center; font-size: 21px; background: #f1efe615; transition: background .3s,color .3s; }
.work-feature:hover .work-visual::after { background: var(--ink); color: var(--paper); }
.visual-label { color: #394332; font-size: 10px; left: 28px; bottom: 21px; }
.about-strip, .about-quote { padding-block: 75px 85px; }
.about-strip h2, .about-quote h2 { font-size: clamp(30px,3.35vw,45px); font-weight: 400; line-height: 1.4; }
.about-strip p { font-size: 19px; }
.contact-section { width: 100%; padding-inline: max(var(--gutter),calc((100vw - 1360px)/2 + var(--gutter))); padding-block: 62px 32px; background: var(--ink); color: var(--paper); border-top: 0; }
.contact-top { margin-bottom: 35px; }
.contact-top h2 { font-size: clamp(35px,5vw,65px); font-weight: 400; letter-spacing: -.05em; }
.contact-section .text-link { color: var(--paper); }
.contact-section .text-link:hover { color: var(--sage); }
.email-link { font-size: clamp(25px,3.3vw,43px); border-bottom: 1px solid #f1efe66b; padding-bottom: 5px; }
.copy-button { border: 1px solid #f1efe66b; border-radius: 50%; }
.copy-button:hover { background: var(--sage); color: var(--ink); }
.copy-status, .footer-bottom { color: #c4c9ba; }
.footer-bottom { border-top: 1px solid #f1efe62c; padding-top: 24px; margin-top: 49px; }
.page-heading { padding-block: 88px 62px; }
.page-heading h1 { font-size: clamp(57px,7.7vw,100px); line-height: 1.1; font-weight: 400; }
.minor-projects { gap: 70px; padding-block: 58px 80px; }
.minor-project h2 { font-size: 42px; font-weight: 400; }
.data-list strong { color: var(--ink); }
.project-hero { padding-top: 52px; }
.project-title { font-size: clamp(68px,12.5vw,180px); letter-spacing: -.075em; line-height: .98; }
.project-subtitle { font-size: clamp(23px,2.7vw,37px); margin-block: 25px 45px; }
.project-cover { background: var(--sage); min-height: 340px; padding: clamp(24px,4vw,60px); }
.project-cover.gabolle-cover { background: var(--lavender); }
.project-cover .dashboard-image { width: 91%; height: auto; object-fit: contain; border: 8px solid #f8f8ef; box-shadow: 0 25px 50px #3038241c; }
.project-summary { padding-block: 77px; }
.project-summary h2 { font-size: 34px; font-weight: 400; }
.section-side h2 { font-weight: 400; }
.feature-entry .entry-number { color: #8e4935; }
.tech-line { color: #45523b; }
.flow-list { background: var(--line); gap: 1px; }
.flow-list li { background: var(--paper); border: 0; }
.metric-number { font-family: Pretendard,Arial,sans-serif; font-weight: 400; }
.data-table th { background: #e6e8db; }
.data-table th:first-child { padding-left: 12px; }
.data-table td:first-child { padding-left: 12px; }
.stage-panel { background: #e1e6d4; }
.stage-button { transition: background .3s,color .3s; }
.stage-button[aria-pressed=true] { background: var(--ink); color: var(--paper); }
.map-node { background: #f5f4eb; }
.next-project { padding-block: 55px; }
.next-project h2 { font-size: clamp(42px,5.6vw,76px); }
.next-arrow { transition: transform .35s var(--ease); }
.next-project:hover .next-arrow { transform: translateX(7px); }
.about-hero { grid-template-columns: minmax(0,1.3fr) minmax(180px,.7fr); gap: 8%; padding-block: 83px; }
.about-hero h1 { font-size: clamp(55px,6vw,86px); font-weight: 400; }
.about-portrait { width: 88%; max-width: 290px; padding: 24px 25px 18px; border: 1px solid #bcc7ab; background: var(--sage); transform: rotate(3deg); box-shadow: 12px 15px 0 #dce1d0; }
.about-blocks h2 { font-weight: 400; font-size: 31px; }
.product-numbers strong { font-size: clamp(34px,3.5vw,48px); }
.app-gallery { background: #e5e1e8; }
.app-gallery img { background: var(--paper); border-color: #bbb3c4; }
.motion-ready .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease),transform .8s var(--ease); }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }
@media (max-width:1050px) {
  .hero { min-height: 660px; gap: 3%; padding-block: 48px 62px; }
  .hero-art { height: 425px; }
  .hero-name { font-size: clamp(82px,10.5vw,110px); }
  .hero-name-en { font-size: 32px; }
  .hero-role, .hero-intro { font-size: 15px; }
  .hero-role { margin-bottom: 24px; }
  .hero-intro { margin-top: 29px; }
  .portrait-print { left: 28%; width: 49%; padding: 9px 9px 20px; }
  .work-feature { gap: 32px; }
  .work-visual { min-height: 340px; padding-inline: 22px; }
  .work-number { margin-bottom: 30px; }
  .about-hero { gap: 7%; }
  .about-portrait { width: 93%; padding: 18px 18px 13px; }
}
@media (max-width:760px) {
  :root { --gutter: 23px; }
  .site-header { height: 72px; }
  .wordmark { font-size: 20px; }
  .site-nav { background: var(--paper); border-color: var(--line); padding-block: 25px; box-shadow: 0 20px 30px #252b240b; }
  .hero { grid-template-columns: minmax(0,1fr); min-height: auto; gap: 0; padding-block: 38px 51px; }
  .hero-copy { display: contents; }
  .hero-role { grid-column: 1; grid-row: 1; max-width: 29ch; font-size: 14px; margin-bottom: 21px; }
  .hero-name { grid-column: 1; grid-row: 2; font-size: clamp(72px,21.2vw,108px); line-height: 1.03; white-space: normal; }
  .hero-name-en { font-size: 29px; margin-top: 12px; }
  .hero-art { grid-column: 1; grid-row: 3; width: min(350px,100%); height: 328px; margin: 17px auto 12px; }
  .hero-intro { grid-column: 1; grid-row: 4; width: auto; max-width: 540px; margin-top: 13px; margin-bottom: 25px; font-size: 15px; }
  .hero-copy>.text-link { grid-column: 1; grid-row: 5; justify-self: start; }
  .portrait-print { width: 42%; max-width: none; top: 15%; left: 30%; padding: 7px 7px 16px; }
  .section-heading { padding-block: 31px 25px; }
  .section-heading h2 { font-size: 34px; }
  .work-feature { grid-template-columns: minmax(0,1fr); gap: 0; padding-block: 21px 30px; }
  .work-visual { order: -1; width: 100%; min-height: 0; aspect-ratio: 1.18; padding: 30px 23px 52px; }
  .work-visual .dashboard-image { width: 96%; border-width: 5px; }
  .work-visual::after { width: 29px; height: 29px; top: 15px; right: 15px; font-size: 19px; }
  .visual-label { bottom: 17px; left: 21px; font-size: 9px; }
  .work-copy { padding-block: 28px 15px; }
  .work-number { margin-bottom: 20px; }
  .work-copy h2, .work-copy h3 { font-size: clamp(40px,12vw,58px); margin-bottom: 15px; }
  .work-subtitle { font-size: 19px; }
  .work-description { font-size: 14px; max-width: none; }
  .work-meta { font-size: 10px; }
  .about-strip, .about-quote { padding-block: 48px 57px; gap: 26px; }
  .about-strip h2, .about-quote h2 { font-size: 33px; }
  .about-strip p, .about-quote p { font-size: 15px; }
  .contact-section { padding-block: 45px 28px; }
  .contact-top h2 { font-size: 42px; }
  .email-link { font-size: clamp(23px,6.7vw,31px); }
  .footer-bottom { margin-top: 39px; font-size: 10px; }
  .page-heading { padding-block: 54px 44px; }
  .page-heading h1 { font-size: 63px; }
  .minor-projects { gap: 45px; padding-block: 40px 55px; }
  .minor-project h2 { font-size: 37px; }
  .project-hero { padding-top: 34px; }
  .project-title { font-size: clamp(52px,15.9vw,112px); }
  .project-subtitle { font-size: 22px; margin-block: 21px 29px; }
  .project-cover { min-height: 230px; padding: 25px 20px; }
  .project-cover .dashboard-image { width: 100%; border-width: 5px; }
  .project-summary { padding-block: 45px; gap: 35px; }
  .project-summary h2 { font-size: 29px; }
  .section-side h2 { font-size: 30px; }
  .metric-number { font-size: clamp(29px,9vw,43px); }
  .next-project { padding-block: 40px; }
  .next-project h2 { font-size: 42px; }
  .about-hero { grid-template-columns: minmax(0,1fr); padding-block: 48px 57px; gap: 25px; }
  .about-hero h1 { font-size: 56px; }
  .about-portrait { display: block; width: 180px; max-width: 60%; justify-self: center; margin: 10px 0 10px; padding: 16px 17px 10px; }
  .about-blocks h2 { font-size: 28px; }
  .product-numbers { gap: 34px; }
  .product-numbers strong { font-size: 33px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
  .motion-ready .reveal { opacity: 1; transform: none; }
  .hero-art { transform: none!important; }
}

/* A shared paper surface, actual project screens and a quieter introduction. */
body { background-image: url('assets/paper-grain.svg?v=g2'); }
.site-header { justify-content: flex-end; }
.site-nav { justify-content: flex-end; }
.hero { grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); gap: 8%; padding-block: 46px 72px; min-height: min(760px,calc(100svh - 88px)); overflow: visible; }
.hero-art { width: 100%; height: auto; aspect-ratio: 600/630; max-width: 590px; }
.editorial-art { width: 100%; height: 100%; display: block; }
.reference-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-copy { display: block; }
.hero-role { font-size: 16px; margin-bottom: 28px; padding: 0; }
.hero-role::before { content: none; }
.hero-name { font-size: clamp(86px,9.8vw,140px); line-height: 1.04; white-space: nowrap; letter-spacing: -.075em; }
.hero-name-en { font-size: clamp(25px,2.9vw,40px); margin-top: 19px; letter-spacing: -.035em; }
.hero-cta { margin-top: 50px; }
.motion-media { position: relative; width: 100%; min-width: 0; }
.motion-media img { display: block; width: 100%; height: auto; border: 0; }
.motion-toggle { position: absolute; right: 12px; bottom: 12px; padding: 8px 12px; border: 1px solid #f1efe680; border-radius: 30px; color: #f1efe6; background: #252b24e8; font-size: 11px; line-height: 1.3; z-index: 2; }
.motion-toggle[hidden] { display: none; }
.hero-motion .motion-toggle { right: 8px; bottom: 6px; background: #f1efe6e8; color: var(--ink); border-color: #252b2440; }
.motion-static-note { position: absolute; right: 12px; bottom: 12px; font-size: 11px; background: var(--paper); padding: 5px 8px; }
.intro-section { padding-block: 124px 140px; border-top: 1px solid var(--line); }
.intro-inner { max-width: 720px; margin-inline: auto; }
.intro-portrait { width: 232px; aspect-ratio: 320/435; border-radius: 26px; overflow: hidden; margin-bottom: 40px; background: #fff; box-shadow: 0 1px 2px rgba(37,43,36,.06), 0 18px 40px -24px rgba(37,43,36,.35); }
.intro-portrait img { width: 100%; height: 100%; object-fit: contain; transform: none; }
.intro-lead { font-size: 32px; font-weight: 500; line-height: 1.42; letter-spacing: -.035em; color: var(--ink); max-width: 700px; margin-bottom: 24px; }
.intro-body { font-size: 18px; line-height: 1.85; color: #858a80; max-width: 660px; margin-bottom: 38px; }
.intro-links { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.intro-links .pill-link { gap: 0; padding: 17px 28px; font-size: 16px; font-weight: 500; }
.pill-link.soft { background: rgba(37,43,36,.06); border-color: transparent; color: #6f746a; }
.pill-link.soft:hover { background: rgba(37,43,36,.11); color: var(--ink); }
.pill-link { display: inline-flex; gap: 30px; align-items: center; border: 1px solid var(--ink); border-radius: 40px; background: var(--ink); color: var(--paper); font-size: 14px; padding: 16px 23px; transition: background .2s; }
.pill-link:hover { background: #46513e; }
.work-visual,.project-cover,.app-gallery { background-image: url('assets/paper-grain.svg?v=g2'); background-blend-mode: multiply; }
.work-visual { padding: 49px 29px 66px; }
.work-visual::before,.work-visual::after { content: none; }
.browser-frame { min-width: 0; width: 100%; background: #30352e; border: 5px solid #30352e; border-top-width: 0; border-radius: 11px; overflow: hidden; box-shadow: 0 18px 29px -15px #252b2470,0 1px 2px #252b2440; }
.browser-chrome { height: 22px; display: flex; align-items: center; gap: 4px; padding-inline: 7px; }
.browser-chrome i { width: 4px; height: 4px; border-radius: 50%; background: #a2a79c; }
.browser-frame>img { display: block; width: 100%; height: auto; border: 0; }
.work-visual .browser-frame { transition: transform .55s var(--ease); }
.work-feature:hover .browser-frame { transform: translateY(-3px); }
.visual-label { font-size: 11px; color: #30382b; right: 29px; display: flex; justify-content: space-between; gap: 12px; line-height: 1.6; }
.visual-label:hover { text-decoration: underline; text-underline-offset: 3px; }
.project-cover .browser-frame { max-width: 1000px; }
.large-figure .browser-frame img { border: 0; }
.flyasia-photo { margin: 28px 0 35px; max-width: 440px; }
.flyasia-photo>img { width: 100%; height: auto; border-radius: 8px; }
.app-gallery { background-color: #dcd5e3; padding: 40px 28px 25px; align-items: flex-start; gap: 44px; }
.app-gallery>div { width: 42%; max-width: 245px; }
.phone-frame { width: 100%; aspect-ratio: 594/1248; padding: 2.86%; border-radius: 12.5% / 5.95%; overflow: hidden; background: #171c1d; box-shadow: 0 17px 26px -15px #252b2480,0 1px 2px #252b2445; }
.phone-frame img { width: 100%; height: 100%; object-fit: contain; border: 0; background: #fff; }
.phone-frame img { border-radius: 10.5% / 4.8%; }
.phone-baked img { background: transparent; }
.app-gallery .image-caption { font-size: 12px; text-align: center; margin-top: 17px; }
.skills { padding-block: 20px 100px; }
.skills-hint { color: var(--muted); font-size: 13px; margin: 0; }
.skills-inner { max-width: 920px; margin-inline: auto; }
.skill-panel { padding: 38px 40px 34px; border-bottom: 1px solid var(--line); }
.is-enhanced .skill-panel { min-height: 342px; padding-bottom: 25px; }
.skill-panel[hidden] { display: none; }
.skill-panel.is-entering { animation: panel-in .18s ease-out; }
.skill-index { font-size: 11px; color: var(--muted); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.skill-panel h3 { font-size: 43px; font-weight: 400; letter-spacing: -.045em; margin-bottom: 15px; }
.skill-lead { font-size: 18px; line-height: 1.65; margin-bottom: 16px; }
.skill-panel ul { font-size: 14px; line-height: 1.85; color: var(--muted); padding-left: 18px; margin: 0 0 20px; }
.skill-projects { display: flex; gap: 26px; flex-wrap: wrap; }
.skill-projects .text-link { font-size: 12px; padding-bottom: 3px; }
.skill-dock { display: none; }
.is-enhanced .skill-dock { display: block; padding-top: 30px; }
.skill-track { position: relative; height: 140px; overflow: hidden; touch-action: pan-y; cursor: grab; }
.skill-track:active { cursor: grabbing; }
.skill-tab { position: absolute; left: 0; top: 6px; width: 88px; height: 112px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 12px 7px; border: 1px solid transparent; border-radius: 16px; background: #e7e7db; transform-origin: 50% 50%; user-select: none; }
.skill-tab img { width: 48px; height: 48px; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.skill-tab span { font-size: 11px; white-space: nowrap; pointer-events: none; }
.skill-tab[aria-selected=true] { background: #d5dec9; border-color: #788d67; }
.skill-tab:hover { background: #dce4d3; }
.skill-tab:focus-visible { outline-offset: -3px; }
.skill-track.is-manual { display: flex; align-items: center; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-padding: 12px; padding-inline: 12px; scrollbar-width: thin; scrollbar-color: #89957c transparent; }
.skill-track.is-manual .skill-tab { position: relative; left: auto; top: auto; flex: 0 0 88px; transform: none!important; }
.skill-dock-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 15px; font-size: 11px; color: var(--muted); }
.skills-motion { font-size: 11px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 30px; white-space: nowrap; }
.skills-motion:hover { border-color: var(--muted); }
.about-hero { max-width: 900px; grid-template-columns: 1fr; gap: 30px; padding-block: 90px; }
.about-hero>div { order: 2; }
.about-hero h1 { font-size: 48px; margin-bottom: 28px; }
.about-portrait { justify-self: start; order: 1; width: 176px; max-width: none; padding: 0; border: 0; transform: none; box-shadow: none; margin: 0; }
.about-hero .about-lead { font-size: 28px!important; line-height: 1.55; margin-bottom: 23px; }
.about-hero p { max-width: 700px; }
@keyframes panel-in { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width:1050px) {
  .hero { gap: 5%; min-height: 600px; padding-block: 48px 65px; }
  .hero-name { font-size: clamp(78px,10vw,110px); }
  .hero-name-en { font-size: 30px; }
  .work-visual { padding-inline: 22px; }
}
@media (max-width:760px) {
  html:not(.portfolio-ready) .menu-toggle { display: none; }
  html:not(.portfolio-ready) .site-header { height: auto; min-height: 72px; flex-wrap: wrap; gap: 15px; padding-block: 20px; }
  html:not(.portfolio-ready) .site-nav { display: flex; position: static; flex-direction: row; flex-wrap: wrap; width: 100%; padding: 0; border: 0; box-shadow: none; font-size: 14px; gap: 24px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: auto; gap: 25px; padding-block: 45px 50px; }
  .hero-copy { order: 0; display: block; }
  .hero-art { order: 1; width: min(430px,100%); margin: 0 auto; height: auto; }
  .hero-name { font-size: clamp(75px,21vw,110px); line-height: 1.03; }
  .hero-name-en { font-size: 28px; margin-top: 13px; }
  .hero-role { font-size: 14px; margin-bottom: 20px; max-width: none; }
  .hero-copy>.hero-cta { margin-top: 29px; font-size: 13px; }
  .hero-motion .motion-toggle { right: 2px; bottom: 2px; }
  .intro-section { padding-block: 77px 83px; }
  .intro-portrait { width: 176px; border-radius: 22px; margin-bottom: 32px; }
  .intro-lead { font-size: 24px; line-height: 1.45; margin-bottom: 20px; }
  .intro-body { font-size: 16px; line-height: 1.9; margin-bottom: 29px; }
  .intro-links { gap: 10px; }
  .intro-links .pill-link { padding: 14px 22px; font-size: 14px; }
  .pill-link { font-size: 13px; padding: 14px 19px; gap: 20px; }
  .work-visual { aspect-ratio: 1.18; min-height: 0; padding: 35px 20px 55px; }
  .browser-frame { border-width: 4px; border-top-width: 0; border-radius: 8px; }
  .browser-chrome { height: 18px; gap: 3px; padding-inline: 5px; }
  .browser-chrome i { width: 3px; height: 3px; }
  .visual-label { left: 20px; right: 20px; bottom: 17px; font-size: 10px; }
  .motion-toggle { right: 7px; bottom: 7px; padding: 6px 9px; font-size: 10px; }
  .project-cover { min-height: 0; padding: 27px 20px; }
  .flyasia-photo { max-width: 400px; margin-block: 25px 30px; }
  .app-gallery { gap: 24px; padding: 30px 23px 20px; }
  .app-gallery>div { width: 44%; }
  .skills { padding-block: 15px 65px; }
  .skills .section-heading { flex-direction: column; align-items: flex-start; gap: 15px; }
  .skills-hint { font-size: 12px; }
  .skill-panel { padding: 25px 0 29px; }
  .is-enhanced .skill-panel { min-height: 350px; }
  .skill-panel h3 { font-size: 36px; }
  .skill-lead { font-size: 17px; }
  .skill-panel ul { font-size: 13px; }
  .skill-dock-footer { gap: 12px; align-items: flex-start; line-height: 1.7; }
  .skill-dock-footer>span { max-width: 145px; }
  .skills-motion { padding: 7px 10px; }
  .about-hero { padding-block: 50px 60px; gap: 28px; }
  .about-portrait { display: block; width: 144px; margin: 0; justify-self: start; }
  .about-hero h1 { font-size: 40px; }
  .about-hero .about-lead { font-size: 24px!important; }
}
@media (max-width:480px) {
  .app-gallery { flex-direction: column; align-items: center; gap: 35px; }
  .app-gallery>div { width: min(230px,100%); max-width: 230px; }
}
@media (prefers-reduced-motion:reduce) {
  .skill-panel.is-entering { animation: none; }
  .work-feature:hover .browser-frame { transform: none; }
}

/* Full-bleed hero: the artwork fills the left half edge to edge, as in the reference clip. */
.hero { width: 100%; max-width: none; padding: 0; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0; align-items: stretch; min-height: min(max(620px, calc(100svh - 88px)), 960px); }
.hero-art { max-width: none; height: auto; aspect-ratio: auto; align-self: stretch; overflow: hidden; }
.hero-art .editorial-art { position: absolute; inset: 0; }
.reference-ink { object-fit: cover; }
.hero-copy { align-self: center; padding: 60px var(--gutter) 60px clamp(40px,7vw,120px); }
@media (max-width:1050px) {
  .hero { padding: 0; gap: 0; min-height: min(max(560px, calc(100svh - 88px)), 860px); }
  .hero-copy { padding-left: 44px; }
}
@media (max-width:760px) {
  .hero { padding: 38px var(--gutter) 0; min-height: auto; gap: 30px; }
  .hero-copy { padding: 0; align-self: stretch; }
  .hero-art { width: auto; max-width: none; margin: 0 calc(-1 * var(--gutter)); aspect-ratio: 600/630; }
}

/* Thinner header on every page; on the home page it sits over the full-height hero. */
.site-header { height: 64px; }
.home .hero { min-height: min(max(640px, 100svh), 1000px); }
.home .hero-copy { padding-top: 84px; }
#intro { scroll-margin-top: -38px; }

/* Secondary intro button stays clearly clickable. */
.pill-link.outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.pill-link.outline:hover { background: var(--ink); color: var(--paper); }

/* Larger skill section. */
.skills-hint { font-size: 15px; }
.skills-inner { max-width: 1060px; }
.skill-panel { padding: 46px 48px 38px; }
.is-enhanced .skill-panel { min-height: 390px; }
.skill-index { font-size: 13px; margin-bottom: 16px; }
.skill-panel h3 { font-size: 54px; margin-bottom: 18px; }
.skill-lead { font-size: 21px; margin-bottom: 18px; }
.skill-panel ul { font-size: 16.5px; margin-bottom: 24px; }
.skill-projects .text-link { font-size: 14px; }
.skill-track { height: 180px; }
.skill-tab { top: 10px; width: 116px; height: 146px; gap: 14px; border-radius: 20px; }
.skill-tab img { width: 62px; height: 62px; }
.skill-tab span { font-size: 13.5px; }
.skill-track.is-manual { scrollbar-width: none; }
.skill-track.is-manual::-webkit-scrollbar { display: none; }
.skill-track.is-manual .skill-tab { flex-basis: 116px; }
.skill-dock-footer { font-size: 13px; }
@media (max-width:760px) {
  .site-header { height: 58px; }
  .home .hero { min-height: auto; }
  .home .hero-copy { padding-top: 44px; }
  .skill-panel { padding: 30px 0 30px; }
  .is-enhanced .skill-panel { min-height: 370px; }
  .skill-panel h3 { font-size: 42px; }
  .skill-lead { font-size: 18px; }
  .skill-panel ul { font-size: 15px; }
  .skill-track { height: 150px; }
  .skill-tab { top: 8px; width: 96px; height: 124px; gap: 11px; }
  .skill-tab img { width: 50px; height: 50px; }
  .skill-tab span { font-size: 12px; }
  .skill-track.is-manual .skill-tab { flex-basis: 96px; }
}

/* Intro fills one screen so the photo, text and both buttons are visible after "소개 보기". */
.intro-section { min-height: 100svh; display: flex; align-items: center; padding-block: 56px; }
.intro-inner { max-width: 820px; width: 100%; }
.intro-portrait { width: clamp(176px, 27svh, 264px); border-radius: 28px; margin-bottom: clamp(24px, 4svh, 40px); }
.intro-lead { font-size: 36px; max-width: 800px; margin-bottom: 22px; }
.intro-body { font-size: 19px; line-height: 1.8; max-width: 780px; margin-bottom: 14px; }
.intro-body + .intro-links { margin-top: 30px; }
.intro-links .pill-link { padding: 18px 32px; font-size: 17px; }
.about-hero .about-lead { font-size: 34px!important; }
.about-hero p { font-size: 19px; line-height: 1.85; max-width: 780px; }
.about-hero { max-width: 980px; }
.about-ways p { font-size: 17px; line-height: 1.9; color: var(--muted); margin-bottom: 16px; }
@media (max-width:760px) {
  .intro-section { min-height: auto; padding-block: 64px 72px; }
  .intro-portrait { width: 176px; border-radius: 22px; }
  .intro-lead { font-size: 26px; }
  .intro-body { font-size: 16.5px; }
  .intro-links .pill-link { padding: 15px 24px; font-size: 15px; }
  .about-hero .about-lead { font-size: 25px!important; }
  .about-hero p { font-size: 16.5px; }
  .about-ways p { font-size: 15.5px; }
}
.intro-section { padding-block: clamp(28px, 5svh, 56px); }
.intro-portrait { width: clamp(160px, 25svh, 264px); }
@media (min-width:761px) and (max-height:800px) {
  .intro-lead { font-size: 32px; margin-bottom: 16px; }
  .intro-body { font-size: 17.5px; line-height: 1.75; margin-bottom: 10px; }
  .intro-body + .intro-links { margin-top: 22px; }
}
@media (max-width:760px) {
  .intro-section { padding-block: 44px 64px; }
  .intro-portrait { width: 148px; margin-bottom: 22px; }
  .intro-lead { margin-bottom: 16px; }
  .intro-body { line-height: 1.75; margin-bottom: 10px; }
  .intro-body + .intro-links { margin-top: 22px; }
}


/* Hero photo stack: one rounded card at a time, neighbours peeking above and below. */
.hero-photos { position: relative; overflow: hidden; }
.hero-track { position: absolute; left: 14px; right: 14px; top: 0; will-change: transform; }
.hero-card { position: relative; height: var(--card-h, 80vh); margin: 0 0 10px; border-radius: 22px; overflow: hidden; background: #d9d8cc; }
.hero-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 26px 22px; color: #fff; font-size: 15px; letter-spacing: -.01em; background: linear-gradient(180deg, transparent, rgba(16,19,15,.58)); }

/* Project visuals: rounded photo card with a soft shadow; title blurs in on hover. */
.work-visual { padding: 0; min-height: 0; aspect-ratio: 16/10; border-radius: 22px; overflow: hidden; background: #2b302a; box-shadow: 0 1px 2px rgba(37,43,36,.1), 0 30px 60px -32px rgba(37,43,36,.6); align-self: center; }
.work-visual::before { display: none; }
.work-visual .browser-frame { position: absolute; inset: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.work-visual .browser-chrome { display: none; }
.work-visual .browser-frame > img, .work-visual .motion-media, .work-visual .motion-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.work-visual .browser-frame img { transition: transform .8s var(--ease); }
.work-visual:hover .browser-frame img { transform: scale(1.025); }
.visual-link { position: absolute; inset: 0; z-index: 3; }
.visual-link::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,19,15,.66) 0%, rgba(16,19,15,.2) 36%, transparent 58%); opacity: 0; transition: opacity .4s var(--ease); }
.visual-hover { position: absolute; top: 24px; left: 26px; right: 84px; display: flex; flex-direction: column; gap: 5px; color: #fff; opacity: 0; filter: blur(8px); transform: translateY(4px); transition: opacity .4s var(--ease), filter .4s var(--ease), transform .4s var(--ease); }
.visual-hover strong { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.visual-hover span { font-size: 14px; opacity: .86; }
.work-visual:hover .visual-link::before, .visual-link:focus-visible::before { opacity: 1; }
.work-visual:hover .visual-hover, .visual-link:focus-visible .visual-hover { opacity: 1; filter: blur(0); transform: none; }
.work-visual::after { z-index: 4; pointer-events: none; top: 20px; right: 20px; border: 0; background: rgba(255,255,255,.88); color: var(--ink); }
.work-feature:hover .work-visual::after { background: #fff; color: var(--ink); }

.contact-links .phone-link { flex-basis: 100%; width: fit-content; font-size: clamp(20px,2.4vw,30px); letter-spacing: -.02em; color: inherit; border-bottom: 1px solid #f1efe66b; padding-bottom: 4px; }
@media (max-width:760px) {
  .hero-photos { aspect-ratio: 4/5; }
  .hero-track { left: 10px; right: 10px; }
  .hero-card { border-radius: 18px; }
  .hero-card figcaption { font-size: 13px; padding: 50px 18px 16px; }
  .work-visual { border-radius: 16px; aspect-ratio: 16/10; padding: 0; }
  .visual-hover { display: none; }
}
.work-feature.bbiyong .work-visual { aspect-ratio: 860/484; }
.work-feature.gabolle .work-visual { aspect-ratio: 2360/1640; }
.work-visual .browser-frame > img, .work-visual .motion-media img { object-position: center; }

/* Detail pages: the team demo sits after the overview as a captioned rounded card. */
.project-hero { padding-bottom: 24px; }
.project-demo { padding-block: 10px 90px; }
.demo-label { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.demo-card { margin: 0; max-width: 980px; border-radius: 22px; overflow: hidden; background: #2b302a; box-shadow: 0 1px 2px rgba(37,43,36,.1), 0 30px 60px -32px rgba(37,43,36,.55); }
.demo-card img, .demo-card .motion-media, .demo-card .motion-media img { display: block; width: 100%; height: auto; }
.demo-caption { font-size: 14px; color: var(--muted); margin: 16px 0 0; max-width: 980px; }
@media (max-width:760px) {
  .project-demo { padding-block: 0 56px; }
  .demo-card { border-radius: 16px; }
}

/* App screens: two identical device frames on the paper, staggered, no colour block behind. */
.app-gallery { background: none; padding: 36px 0 70px; gap: clamp(28px, 6vw, 72px); justify-content: center; align-items: flex-start; }
.app-gallery > div { width: 40%; max-width: 270px; }
.app-gallery > div:nth-child(2) { margin-top: 56px; }
.phone-frame { aspect-ratio: 560/1214; padding: 9px; border-radius: 42px; background: #181b1c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 2px 4px rgba(37,43,36,.12), 0 40px 70px -34px rgba(37,43,36,.55); }
.phone-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 33px; background: #f5f5f7; }
.app-gallery .image-caption { font-size: 13px; color: var(--muted); text-align: center; margin-top: 20px; }
@media (max-width:760px) {
  .app-gallery { flex-direction: row; gap: 18px; padding: 24px 0 50px; }
  .app-gallery > div { width: 46%; }
  .app-gallery > div:nth-child(2) { margin-top: 36px; }
  .phone-frame { padding: 6px; border-radius: 28px; }
  .phone-frame img { border-radius: 22px; }
}

/* Screens (GIFs and captures) share one browser frame; real photos stay plain rounded cards. */
.work-visual, .work-feature.bbiyong .work-visual, .work-feature.gabolle .work-visual { aspect-ratio: auto; background: transparent; border-radius: 16px; }
.work-visual .browser-frame { position: relative; inset: auto; border: 6px solid #2f342d; border-top-width: 0; border-radius: 16px; background: #2f342d; box-shadow: none; }
.browser-frame { border: 6px solid #2f342d; border-top-width: 0; border-radius: 16px; background: #2f342d; }
.browser-chrome, .work-visual .browser-chrome, .demo-card .browser-chrome { display: flex; height: 30px; gap: 6px; padding-inline: 10px; }
.browser-chrome i { width: 7px; height: 7px; }
.work-visual .browser-frame > img, .work-visual .motion-media, .work-visual .motion-media img { height: auto; object-fit: initial; border-radius: 0 0 10px 10px; }
.visual-hover { top: 52px; }
.work-visual::after { top: 44px; }
.demo-card { border: 6px solid #2f342d; border-top-width: 0; border-radius: 16px; background: #2f342d; }
.demo-card img, .demo-card .motion-media img { border-radius: 0 0 10px 10px; }
.flyasia-photo img { border-radius: 18px; box-shadow: 0 30px 60px -34px rgba(37,43,36,.55); }
@media (max-width:760px) {
  .browser-frame, .work-visual .browser-frame, .demo-card { border-width: 4px; border-top-width: 0; border-radius: 12px; }
  .browser-chrome, .work-visual .browser-chrome, .demo-card .browser-chrome { height: 20px; gap: 4px; padding-inline: 7px; }
  .browser-chrome i { width: 5px; height: 5px; }
  .work-visual::after { top: 30px; }
}

/* Photo guide dots, vertically centred beside the stack. */
.hero-photos .hero-track { right: 46px; }
.hero-dots { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 2; }
.hero-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(37,43,36,.25); cursor: pointer; transition: height .45s var(--ease), background .3s; }
.hero-dots button:hover { background: rgba(37,43,36,.5); }
.hero-dots button[aria-current] { height: 28px; background: var(--ink); }
.hero-dots button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width:760px) {
  .hero-photos .hero-track { right: 32px; }
  .hero-dots { right: 10px; gap: 8px; }
  .hero-dots button { width: 7px; height: 7px; }
  .hero-dots button[aria-current] { height: 22px; }
}
.hero-card { border-radius: 10px; }
.flyasia-photo img { border-radius: 10px; }
@media (max-width:760px) { .hero-card { border-radius: 8px; } }

/* Tighter corners across photos and screen cards. */
.hero-card { border-radius: 6px; }
.flyasia-photo img { border-radius: 6px; }
.intro-portrait { border-radius: 12px; }
.browser-frame, .work-visual, .work-visual .browser-frame, .demo-card, .work-feature.bbiyong .work-visual, .work-feature.gabolle .work-visual { border-radius: 8px; }
.work-visual .browser-frame > img, .work-visual .motion-media img, .demo-card img, .demo-card .motion-media img { border-radius: 0 0 4px 4px; }
@media (max-width:760px) {
  .hero-card { border-radius: 5px; }
  .intro-portrait { border-radius: 10px; }
  .browser-frame, .work-visual .browser-frame, .demo-card { border-radius: 6px; }
}

/* Scroll rendering replaces the whole-section fade. */
.rv-ready .reveal, .rv-ready .motion-ready .reveal { opacity: 1 !important; transform: none !important; }
.motion-ready .work-feature.reveal.is-visible .browser-frame { animation: none; }
.rv-item { opacity: 0; translate: 0 18px; transition: opacity .28s cubic-bezier(.2,.7,.2,1), translate .4s cubic-bezier(.2,.7,.2,1); }
.rv-item.is-in { opacity: 1; translate: 0 0; }

/* Hero photos read as cut off by the top edge. */
.hero-card { border-radius: 0 0 6px 6px; }
.skill-track.is-manual { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
@media (max-width:760px) {
  .hero-card { border-radius: 0 0 5px 5px; }
  /* Phone hero mirrors the desktop: photo column on the left, name on the right. */
  .home .hero { display: grid; grid-template-columns: 44% minmax(0,1fr); gap: 0; padding: 0; min-height: 0; height: min(74svh, 600px); align-items: stretch; }
  .home .hero-art { order: 0; grid-column: 1; grid-row: 1; width: auto; height: 100%; margin: 0; aspect-ratio: auto; }
  .home .hero-photos .hero-track { left: 0; right: 18px; }
  .home .hero-dots { right: 5px; gap: 6px; }
  .home .hero-dots button { width: 5px; height: 5px; }
  .home .hero-dots button[aria-current] { height: 16px; }
  .home .hero-copy { display: block; order: 1; grid-column: 2; grid-row: 1; align-self: center; padding: 58px var(--gutter) 0 16px; }
  .home .hero-role { font-size: 13px; margin-bottom: 14px; }
  .home .hero-name { font-size: clamp(40px, 13vw, 58px); line-height: 1.05; white-space: nowrap; }
  .home .hero-name-en { font-size: clamp(15px, 4.6vw, 20px); margin-top: 8px; display: block; }
  .home .hero-cta { margin-top: 22px; font-size: 12px; }
  .hero-card figcaption { font-size: 11px; padding: 36px 10px 10px; }
  .rv-item { translate: 0 18px; transition-duration: .32s, .42s; }
}
.app-gallery > div:nth-child(2) { margin-top: 0; }
@media (max-width:760px) { .app-gallery > div:nth-child(2) { margin-top: 0; } }
.hero-card { border-radius: 6px; transition: border-radius .25s ease; }
.hero-card.is-front { border-radius: 0 0 6px 6px; }
@media (max-width:760px) { .hero-card { border-radius: 5px; } .hero-card.is-front { border-radius: 0 0 5px 5px; } }

/* Lighter photo stack (no permanent compositing layer) and a shorter phone hero. */
.hero-track { will-change: auto; }
.hero-card img { object-position: center 30%; }
@media (max-width:760px) {
  .home .hero { height: min(58svh, 470px); }
  .home .hero-art { margin-top: 0; }
  .home .hero-photos .hero-track { right: 16px; }
  .home .hero-name { font-size: clamp(38px, 12vw, 54px); }
}

/* Phone hero: name across the top, a wide photo row below that slides right to left. */
@media (max-width:760px) {
  .home .hero { display: flex; flex-direction: column; height: auto; padding: 0; gap: 0; }
  .home .hero-copy { order: 0; grid-column: auto; grid-row: auto; padding: 84px var(--gutter) 26px; align-self: stretch; }
  .home .hero-name { font-size: clamp(56px, 17vw, 76px); }
  .home .hero-name-en { font-size: clamp(20px, 6vw, 26px); margin-top: 10px; }
  .home .hero-art { order: 1; grid-column: auto; grid-row: auto; width: 100%; height: auto; aspect-ratio: 4/3; margin: 0; padding-bottom: 22px; }
  .home .hero-photos .hero-track { display: flex; top: 0; bottom: 22px; left: 0; right: auto; }
  .home .hero-card { flex: 0 0 var(--card-w, 84vw); height: 100%; margin: 0 10px 0 0; border-radius: 6px; }
  .home .hero-card.is-front { border-radius: 0 6px 6px 0; }
  .home .hero-dots { top: auto; bottom: 4px; right: auto; left: 50%; transform: translateX(-50%); flex-direction: row; gap: 7px; }
  .home .hero-dots button { width: 6px; height: 6px; transition: width .45s var(--ease), background .3s; }
  .home .hero-dots button[aria-current] { width: 20px; height: 6px; }
  .hero-card figcaption { font-size: 12px; padding: 44px 14px 12px; }
}
@media (max-width:760px) {
  .home .hero-photos { padding-inline: var(--gutter); }
  .home .hero-photos .hero-track { left: 0; }
  .home .hero-card { margin: 0 var(--card-gap, var(--gutter)) 0 0; }
  .home .hero-card, .home .hero-card.is-front { border-radius: 6px; }
}

/* AI section on the home page and its detail list. */
.ai-section { padding-block: 40px 70px; }
.ai-points { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 40px; border-top: 1px solid var(--line); }
.ai-points article { padding: 30px 0 8px; }
.ai-num { display: block; font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.ai-points h3 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin-bottom: 12px; }
.ai-points p { font-size: 16px; line-height: 1.8; color: var(--muted); margin: 0; }
.ai-test-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 24px; padding: 0; margin: 22px 0 34px; list-style: none; }
.ai-test-list li { font-size: 15px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.35); }
@media (max-width:760px) {
  .ai-points { grid-template-columns: 1fr; }
  .ai-points article { padding: 22px 0 6px; border-bottom: 1px solid var(--line); }
  .ai-points h3 { font-size: 19px; }
  .ai-test-list { grid-template-columns: 1fr; }
}

/* Soft colour field behind the whole page, measured from the reference: a sage glow upper left,
   a warm cream glow upper right, settling to the plain paper lower down. Static, like the reference. */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 60% at 8% 12%, rgba(184,205,160,.55), transparent 70%),
    radial-gradient(45% 55% at 92% 8%, rgba(236,226,190,.6), transparent 70%),
    radial-gradient(60% 50% at 70% 95%, rgba(196,183,212,.22), transparent 70%); }
body { isolation: isolate; }
.ai-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px, 46%); align-items: center; gap: 24px; }
.ai-object { display: block; width: 100%; aspect-ratio: 1/1; max-height: 520px; }
@media (max-width:760px) {
  .ai-hero-grid { grid-template-columns: 1fr; gap: 6px; }
  .ai-object { max-width: 360px; margin: 0 auto; }
}

/* The AI object may run behind the title text. */
.ai-hero-grid { position: relative; display: block; }
.ai-hero-grid > div { position: relative; z-index: 1; }
.ai-object { position: absolute; top: -140px; right: -6%; width: min(760px, 62vw); height: min(760px, 62vw); max-height: none; aspect-ratio: auto; z-index: 0; pointer-events: none; }
.project-hero:has(.ai-object) { min-height: min(560px, 62vw); }
@media (max-width:760px) {
  .ai-object { position: relative; top: auto; right: auto; width: 100%; height: 380px; margin: -40px auto -30px; }
  .project-hero:has(.ai-object) { min-height: 0; }
}

/* Photo stack can be dragged. */
.hero-photos { cursor: grab; touch-action: pan-x; user-select: none; -webkit-user-select: none; }
.hero-photos.is-dragging { cursor: grabbing; }
.hero-card img { -webkit-user-drag: none; pointer-events: none; }
@media (max-width:760px) { .hero-photos { touch-action: pan-y; } }
.ai-object { mix-blend-mode: multiply; }

/* Looping skill rail: horizontal drags are handled in script, vertical swipes still scroll the page. */
.skill-track, .skill-track.is-manual { touch-action: pan-y; overflow: hidden; }

/* Out-of-focus petal field: right half of the home hero and the top of the about page. */
.hero, .about-hero { position: relative; }
.petal-field { position: absolute; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(80% 90% at 75% 100%, #c6d2b6, #f1efe6 70%);
  -webkit-mask-image: radial-gradient(120% 95% at 70% 40%, #000 45%, transparent 100%); mask-image: radial-gradient(120% 95% at 70% 40%, #000 45%, transparent 100%); }
.petal-field canvas { display: block; width: 100%; height: 100%; }
.home .hero .petal-field { top: 0; bottom: 0; left: 50%; right: 0; }
.about-hero .petal-field { top: -64px; left: calc(50% - 50vw); right: calc(50% - 50vw); height: calc(100% + 120px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.home .hero-copy, .about-hero > :not(.petal-field) { position: relative; z-index: 1; }
@media (max-width:760px) {
  .home .hero .petal-field { left: 0; bottom: auto; height: 340px; -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
}

/* The petal field runs under the whole home hero; the photo stack sits on top of it. */
.home .hero .petal-field { left: 0; right: 0; top: 0; bottom: 0; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.home .hero-photos { background: transparent; }
@media (max-width:760px) {
  .home .hero .petal-field { height: auto; bottom: 0; -webkit-mask-image: linear-gradient(#000 85%, transparent); mask-image: linear-gradient(#000 85%, transparent); }
}
/* Photos float on the field: the stack is inset so the petals show around it. */
.home .hero-photos .hero-track { left: clamp(28px, 4vw, 64px); right: 74px; }
.home .hero-photos .hero-dots { right: 40px; }
.home .hero-card { box-shadow: 0 2px 4px rgba(37,43,36,.08), 0 30px 60px -30px rgba(37,43,36,.45); }
@media (max-width:760px) {
  .home .hero-photos .hero-track { left: 0; right: auto; }
  .home .hero-photos .hero-dots { right: auto; }
  .home .hero .petal-field { -webkit-mask-image: none; mask-image: none; }
  .home .hero-art { padding-bottom: 26px; }
}

.petal-field { background: #b7c6a4 url('assets/petal-light.webp') center / cover no-repeat; background-blend-mode: luminosity; }
.home .hero .petal-field { mask-image: linear-gradient(#000 76%,transparent); -webkit-mask-image: linear-gradient(#000 76%,transparent); }
.about-hero .petal-field { opacity: .64; left: calc(50% - var(--visual-viewport,100%) / 2); right: calc(50% - var(--visual-viewport,100%) / 2); }
.ai-hero-grid { isolation: isolate; }
.ai-hero-grid>div { max-width: 720px; }
.ai-hero-grid .project-subtitle { max-width: 620px; }
.ai-object { width: var(--visual-viewport,100%); height: 1120px; top: -70px; right: calc((100% - var(--visual-viewport,100%)) / 2); max-width: none; mix-blend-mode: normal; mask-image: linear-gradient(90deg,transparent,#000 18%,#000 98%,transparent); -webkit-mask-image: linear-gradient(90deg,transparent,#000 18%,#000 98%,transparent); }
.project-hero:has(.ai-object) { min-height: 1010px; }
.project-hero:has(.ai-object)+.project-summary { position: relative; z-index: 1; }
.ai-object:not(.is-live) { background: url('assets/ai-fibre-sage.webp') 80% center / auto 94% no-repeat; }
@media(max-width:1000px){
 .ai-hero-grid>div { max-width: none; }
 .ai-hero-grid .project-subtitle { max-width: 32ch; }
 .ai-object { position: relative; width: calc(100% + 2 * var(--gutter)); height: min(100vw,760px); top: auto; right: auto; margin: -55px calc(-1 * var(--gutter)) -65px; mask-image: linear-gradient(transparent,#000 10%,#000 94%,transparent); -webkit-mask-image: linear-gradient(transparent,#000 10%,#000 94%,transparent); }
 .project-hero:has(.ai-object) { min-height: 0; }
 .ai-object:not(.is-live) { background-position: center; background-size: contain; }
}

@media(max-width:760px){.ai-object{height:530px;}}

/* Keep the controls' visual dots small, with separate, comfortable tap targets. */
.home .hero-dots { gap: 0; padding: 8px; cursor: default; touch-action: pan-y; }
.home .hero-dots button,.home .hero-dots button[aria-current] { position: relative; width: 28px; height: 32px; padding: 0; background: transparent; border-radius: 0; cursor: pointer; }
.home .hero-dots button::before { content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 10px; background: #252b2440; transform: translate(-50%,-50%); transition: width .35s,height .35s,background .35s; }
.home .hero-dots button[aria-current]::before { height: 22px; background: var(--ink); }
@media(max-width:760px){
 .home .hero-art { padding-bottom: 48px; }
 .home .hero-photos .hero-track { bottom: 48px; }
 .home .hero-dots { bottom: 0; padding: 4px 10px; }
 .home .hero-dots button,.home .hero-dots button[aria-current] { width: 30px; height: 32px; }
 .home .hero-dots button[aria-current]::before { width: 20px; height: 6px; }
}

@view-transition { navigation: auto; }
:root[data-ai-entry]::view-transition-group(root) { animation-duration: .9s; }
:root[data-ai-entry]::view-transition-old(root) { animation: ai-page-out .22s ease-out both; }
:root[data-ai-entry]::view-transition-new(root) { animation: ai-page-open .9s cubic-bezier(.22,.72,.2,1) both; transform-origin: var(--ai-entry-x) var(--ai-entry-y); }
@keyframes ai-page-out { to { opacity: .25; transform: scale(.985); } }
@keyframes ai-page-open {
 from { clip-path: inset(var(--ai-entry-top) var(--ai-entry-right) var(--ai-entry-bottom) var(--ai-entry-left) round 24px); transform: scale(.96); }
 to { clip-path: inset(0 0 0 0 round 0); transform: scale(1); }
}
:root[data-ai-fallback="opening"] body { animation: ai-page-open .85s cubic-bezier(.22,.72,.2,1) both; transform-origin: var(--ai-entry-x) var(--ai-entry-y); }
@media(prefers-reduced-motion:reduce){:root[data-ai-entry]::view-transition-group(root),:root[data-ai-entry]::view-transition-old(root),:root[data-ai-entry]::view-transition-new(root){animation:none;}}
@media(prefers-reduced-motion:reduce){:root[data-ai-fallback] body{animation:none;}}

/* Sky study: retain the existing forms, photography and grain. */
:root{--paper:#fbfdff;--ink:#183247;--muted:#5c7384;--line:#d9e5ed;--surface:#edf5fa;--sage:#d3e6f3;--lavender:#e2edf6;--rust:#38759e;}
body::before{background:radial-gradient(55% 60% at 8% 12%,#d2e8f842,transparent 70%),radial-gradient(45% 55% at 92% 8%,#edf7ff66,transparent 70%),radial-gradient(60% 50% at 70% 95%,#d8e8f324,transparent 70%);}
.petal-field{background-color:#e7f2fa;}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:#386c94;}
.text-link:hover,.feature-entry .entry-number{color:#386c94;}
.tech-line,.visual-label{color:#4f6b80;}
.data-table th,.stage-panel{background:#deebf4;}
.app-gallery{background:#e1ebf4;}
.app-gallery img{border-color:#b7cbdb;}
.map-node{background:#f5f9fc;}
.about-portrait{border-color:#b6cede;box-shadow:12px 15px 0 #d9e6f0;}
.copy-status,.footer-bottom{color:#c3d3df;}
.work-visual::after{border-color:#21354466;background:#eef4f815;}
.ai-object:not(.is-live){filter:grayscale(1) sepia(.25) hue-rotate(165deg) saturate(1.5);}
.skill-use{padding-block:32px;border-top:1px solid var(--line);}
.skill-use:first-child{padding-top:0;border-top:0;}
.skill-use h3{font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-.045em;margin-bottom:16px;}
.skill-use .skill-file{font-size:12px;color:var(--muted);letter-spacing:.01em;margin-bottom:12px;}
.skill-use p{max-width:70ch;}
.skill-example{margin-top:22px;padding:22px 26px;background:#ffffff59;border-left:2px solid #8eb6d3;}
.skill-example .example-label{font-size:12px;color:var(--muted);margin-bottom:9px;}
.skill-example p{font-size:16px;line-height:1.85;margin-bottom:0;}
.skill-result{margin-top:18px;color:var(--muted);font-size:15px;}
@view-transition{navigation:auto;}
:root[data-page-entry]::view-transition-group(root){animation-duration:.9s;}
:root[data-page-entry]::view-transition-old(root){animation:page-out .22s ease-out both;}
:root[data-page-entry]::view-transition-new(root){animation:page-open .9s cubic-bezier(.22,.72,.2,1) both;transform-origin:var(--entry-x) var(--entry-y);}
@keyframes page-out{to{opacity:.25;transform:scale(.985);}}
@keyframes page-open{from{clip-path:inset(var(--entry-top) var(--entry-right) var(--entry-bottom) var(--entry-left) round 24px);transform:scale(.96);}to{clip-path:inset(0 0 0 0 round 0);transform:scale(1);}}
:root[data-page-fallback="opening"] body{animation:page-open .85s cubic-bezier(.22,.72,.2,1) both;transform-origin:var(--entry-x) var(--entry-y);}
@media(prefers-reduced-motion:reduce){:root[data-page-entry]::view-transition-group(root),:root[data-page-entry]::view-transition-old(root),:root[data-page-entry]::view-transition-new(root),:root[data-page-fallback] body{animation:none;}}
@media(max-width:760px){.skill-example{padding:18px 20px;}.skill-use{padding-block:26px;}}

/* White and pale-blue study: the motion is part of the typographic field. */
.petal-field canvas{opacity:.78;}
.project-hero:has(.ai-flow){position:relative;min-height:840px;padding-bottom:0;}
.ai-hero-grid:has(.ai-flow){min-height:650px;display:flex;align-items:center;isolation:isolate;}
.ai-hero-grid:has(.ai-flow)>div{max-width:770px;padding-bottom:80px;z-index:2;}
.ai-flow{position:absolute;z-index:0;pointer-events:none;width:var(--flow-width,100%);height:850px;max-width:none;left:calc((100% - var(--flow-width,100%))/2);top:-95px;background:radial-gradient(ellipse at 70% 55%,#80b4da,#edf7ff 65%,#fbfdff);}
.ai-hero-grid:has(.ai-flow)::after{content:"";position:absolute;z-index:1;inset:-95px -1px -105px;pointer-events:none;background:linear-gradient(90deg,#fbfdffb8 0%,#fbfdff70 30%,#fbfdff00 70%);}
.ai-hero-grid:has(.ai-flow) .project-title{font-size:clamp(80px,12.5vw,172px);font-weight:500;letter-spacing:-.075em;}
.ai-hero-grid:has(.ai-flow) .project-subtitle{max-width:27ch;font-size:clamp(21px,2.25vw,29px);line-height:1.6;letter-spacing:-.04em;margin-top:28px;text-wrap:balance;}
.project-hero:has(.ai-flow)+.project-summary{position:relative;z-index:1;}
@media(max-width:760px){
 .project-hero:has(.ai-flow){min-height:690px;}
 .ai-hero-grid:has(.ai-flow){min-height:530px;align-items:flex-start;padding-top:72px;}
 .ai-hero-grid:has(.ai-flow)>div{padding-bottom:0;}
 .ai-flow{top:-50px;height:650px;}
 .ai-hero-grid:has(.ai-flow)::after{inset:-50px -1px -70px;background:linear-gradient(180deg,#fbfdff99,#fbfdff40 55%,transparent);}
 .ai-hero-grid:has(.ai-flow) .project-title{font-size:clamp(76px,19vw,120px);}
 .ai-hero-grid:has(.ai-flow) .project-subtitle{font-size:21px;max-width:24ch;}
}

.project-hero:has(.ai-flow) .project-topline{position:relative;z-index:3;}

/* Direct footage study: keep the source motion, no translucent copy panel. */
:root{--sage:#b7ddff;--lavender:#d6eaff;--rust:#096be8;--ink:#092b4c;--muted:#477297;--line:#cfe4f5;}
body::before{background:radial-gradient(55% 60% at 8% 12%,#6bbdff24,transparent 70%),radial-gradient(45% 55% at 92% 8%,#c5e7ff40,transparent 70%),radial-gradient(60% 50% at 70% 95%,#b8dcff18,transparent 70%);}
.liquid-field{background:#f3f6fa;}
.liquid-video{width:100%;height:100%;display:block;object-fit:cover;object-position:center;}
.home .hero .petal-field.liquid-field,.about-hero .petal-field.liquid-field{background:none;mask-image:none;-webkit-mask-image:none;opacity:1;}
.home .hero .petal-field.liquid-field{z-index:0;}
.home .hero-copy{mix-blend-mode:difference;color:#fff;}
.home .hero-copy a,.home .hero-copy .hero-role{color:inherit;}
.home .hero-photos{z-index:1;}
.ai-hero-grid:has(.ai-flow)::after{content:none;}
.ai-hero-grid:has(.ai-flow)>div{mix-blend-mode:difference;color:#fff;}
.ai-hero-grid:has(.ai-flow) .project-subtitle{color:inherit;}
.ai-flow{background:none;overflow:hidden;}
.ai-flow .liquid-video{object-position:50% 50%;}
@media(max-width:760px){
 .home .hero .liquid-video{object-position:62% center;}
 .ai-flow .liquid-video{object-position:50% center;}
}

.home .hero-copy,.ai-hero-grid:has(.ai-flow)>div{mix-blend-mode:normal;color:#08274a;}
.liquid-contrast{transition:color .35s ease,text-shadow .35s ease;}
.liquid-contrast[data-tone="light"]{color:#fff!important;text-shadow:0 1px 16px #031d4b40;}
.liquid-contrast[data-tone="dark"]{color:#071c3a!important;text-shadow:0 1px 16px #ffffff40;}

/* Independent palette study; original blue and sage drafts are preserved. */
:root{--paper:#FFFDF9;--ink:#27282A;--muted:#77716A;--line:#E7DED4;--surface:#F8ECE0;--sage:#F2BB8C;--lavender:#F7DDC6;--rust:#F47732;}
body::before{background:radial-gradient(60% 60% at 5% 8%,#F2BB8C30,transparent 75%),radial-gradient(50% 50% at 95% 10%,#F7DDC630,transparent 70%);}
::selection{background:#F47732;color:#27282A;}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:#B54C19;}
.text-link:hover,.feature-entry .entry-number{color:#B54C19;}
.tech-line,.visual-label{color:#77716A;}
.data-table th,.stage-panel,.app-gallery{background:#F8ECE0;}
.app-gallery img{border-color:#E7DED4;}
.map-node{background:#FFFDF9;}
.about-portrait{border-color:#F2BB8C;box-shadow:12px 15px 0 #F8ECE0;}
.copy-status,.footer-bottom{color:#fff5e6b0;}
.work-visual::after{border-color:#27282A66;background:#FFFDF915;}
.skill-example{background:#F8ECE0;border-left-color:#F47732;}
.home .hero .petal-field.green-hero-field,.about-hero .petal-field.green-hero-field{background:linear-gradient(132deg,#fff5e6 0%,#fffdf9 48%,#fbd9bb 100%);mask-image:none;-webkit-mask-image:none;opacity:1;}
.home .hero .petal-field.green-hero-field{z-index:0;}
.home .hero-copy{color:var(--ink);mix-blend-mode:normal;}
.home .hero-copy a,.home .hero-copy .hero-role{color:inherit;}
.home .hero-cta span{color:#F47732;font-size:21px;}
.home .hero-cta{border-bottom-color:#F47732;}
.pill-link{background:#27282A;color:#FFFDF9;}
.pill-link.outline{background:transparent;color:#27282A;border-color:#E7DED4;}
.skill-tab[aria-selected="true"]{background:#F8ECE0;border-color:#F47732;}
.ai-hero-grid:has(.ai-flow)>div{color:#27282A;mix-blend-mode:normal;}
.ai-hero-grid:has(.ai-flow) .project-subtitle{color:inherit;}
.ai-hero-grid:has(.ai-flow)::after{content:none;}
.project-hero:has(.ai-flow) .project-topline{color:#7d4e30;}
.liquid-contrast,.liquid-contrast[data-tone]{color:inherit!important;transition:none;text-shadow:none;}
.footer{background:#27282a;color:#fff5e6;}
.return-nav{position:fixed;left:clamp(16px,2vw,28px);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;gap:4px;padding:5px;border:1px solid #dfd5cb;background:#fffaf6ed;border-radius:999px;box-shadow:0 6px 24px #27282a12;backdrop-filter:blur(12px);}
.return-nav a,.return-nav button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:999px;color:var(--ink);font-size:14px;line-height:1.4;text-decoration:none;transition:background .2s;}
.return-nav a:hover,.return-nav button:hover{background:#f8e8da;}
.return-nav a:focus-visible,.return-nav button:focus-visible{outline:2px solid #b54c19;outline-offset:1px;}
.return-nav svg{width:18px;height:18px;flex:none;}
.return-nav a{border-left:1px solid #e9ded4;}
.contact-section{padding-bottom:calc(94px + env(safe-area-inset-bottom,0px));}

.stage-tabs.has-stage-indicator{position:relative;isolation:isolate;}
.stage-tabs.has-stage-indicator::before{content:"";position:absolute;left:0;top:0;width:var(--stage-width);height:var(--stage-height);background:var(--ink);transform:translate3d(var(--stage-x),var(--stage-y),0);transition:transform .34s cubic-bezier(.22,.8,.3,1),width .34s,height .34s;pointer-events:none;z-index:0;}
.stage-tabs.has-stage-indicator .stage-button{position:relative;z-index:1;background:transparent;transition:color .22s ease;}
.stage-tabs.has-stage-indicator .stage-button[aria-pressed="true"]{background:transparent;}
@media(prefers-reduced-motion:reduce){.stage-tabs.has-stage-indicator::before,.stage-tabs.has-stage-indicator .stage-button{transition:none;}}
.skill-tab{background:#F8ECE0;}
.skill-tab:hover{background:#F2BB8C;}
.skill-tab[aria-selected="true"]{background:#F2BB8C;border-color:#B54C19;}
.contact-section{background:#27282a;color:#fff5e6;}
.contact-section .text-link{color:#fff5e6;}

/* Finished orange / charcoal theme. */
.skills.wrap{padding-inline:var(--gutter);}
.skills-inner{max-width:none;width:100%;}
.skill-panel{padding:34px 26px 30px;}
.skill-track{width:var(--page-width,100%);margin-left:calc((100% - var(--page-width,100%))/2);}
.skill-tab[data-visual-copy]{pointer-events:auto;}
.ai-page .ai-flow{top:var(--flow-top,-183px);height:var(--flow-height,938px);}
.ai-page .site-header{background:transparent;border-bottom-color:#27282a20;}
.skill-example{background:#f0eeea;border:1px solid #e3dfd9;border-left-width:1px;border-radius:10px;box-shadow:0 4px 14px #27282a06;color:#625f5b;padding:23px 26px;}
.skill-example .example-label{color:#7a756e;}
.skill-example p{color:#625f5b;}
.browser-frame,.work-visual .browser-frame{background:#2c2d30;border-color:#2c2d30;}
.browser-chrome{background:#2c2d30;}
.browser-chrome i{background:#97928b;}
.hero-card{background:#e9e4dc;}
.demo-card{background:#2c2d30;}
.skill-track.is-manual{scrollbar-color:#b4a99e transparent;}
.hero-dots button::before{background:#27282a40;}
.tech-tag,.skill-index,.entry-number{color:var(--muted);}
@media(max-width:760px){
 .skill-panel{padding:28px 0 24px;}
 .skill-example{padding:20px;}
}

/* Reading layout: section headings precede their content. */
:root{--paper:#fff;--surface:#fff6ef;--line:#e9e4df;--muted:#706a65;--gutter:clamp(24px,2.8vw,40px);--content-max:1200px;--intro-max:1360px;--layout-gap:clamp(28px,4vw,56px);--page-wash:linear-gradient(#fff,#fff);--section-wash:linear-gradient(110deg,#fff8f2,#fff3e9 60%,#ffeada);}
/* Text has a shared reading width; tinted section backgrounds extend beyond it. */
body{background-color:#fff;background-image:none;}
body::before{background:none;}
.wrap{width:min(var(--content-max),100%);}
.site-header{width:calc(min(var(--content-max),100%) - 2 * var(--gutter));}
.contact-section{width:100%;padding-inline:max(var(--gutter),calc((100% - var(--content-max))/2 + var(--gutter)));}
.section-tint{position:relative;isolation:isolate;}
.section-tint::before{content:"";position:absolute;inset-block:0;left:50%;width:var(--page-width,100%);transform:translateX(-50%);background:var(--section-wash);z-index:-1;pointer-events:none;}
.intro-section,.content-section:nth-of-type(even){background-image:none;}
/* Background spans the viewport; the introduction keeps a readable text width. */
.home{--intro-wash:var(--page-wash);}
.home .intro-section.wrap{width:100%;border-top:0;background:none;}
.home .hero .petal-field::after,.about-hero .petal-field::after,.ai-flow::after{content:"";position:absolute;inset:auto 0 0;height:clamp(100px,18svh,200px);background:var(--page-wash);mask-image:linear-gradient(transparent,#000);-webkit-mask-image:linear-gradient(transparent,#000);pointer-events:none;}
.home .hero .petal-field.green-hero-field,.about-hero .petal-field.green-hero-field{background:linear-gradient(132deg,#fff5ee 0%,#fff 48%,#ffe3ce 100%);}
.home .hero.wrap{width:100%;}
.home .hero .petal-field.green-hero-field{background:#ffd6b5;}
.home .hero .petal-field::before{content:"";position:absolute;inset:-4%;background:linear-gradient(90deg,#fff2e52e,#fff3e578),url('assets/hero-floral-reference.webp') center/cover no-repeat;filter:saturate(.7) contrast(.94);opacity:.86;animation:floral-drift 48s ease-in-out infinite alternate;will-change:transform;}
@keyframes floral-drift{from{transform:translate3d(-.6%,0,0) scale(1.025);}to{transform:translate3d(.6%,-.3%,0) scale(1.025);}}
.intro-section{min-height:auto;padding-block:clamp(64px,8vw,112px);}
.intro-inner{width:min(var(--intro-max),100%);max-width:none;display:grid;grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr);gap:clamp(36px,6vw,96px);align-items:center;}
.intro-inner .intro-portrait{width:min(100%,300px);justify-self:center;margin:0;}
.intro-inner .intro-portrait,.about-hero>.about-portrait{border-radius:12px;box-shadow:0 2px 4px #27282a08,0 18px 40px -24px #27282a40;}
.intro-copy .intro-lead{font-size:34px;line-height:1.45;}
.intro-copy .intro-body{font-size:19px;line-height:1.8;color:var(--muted);}
.about-hero.wrap{width:min(var(--intro-max),100%);max-width:none;grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr);gap:clamp(36px,6vw,96px);}
.about-hero>.about-portrait{order:1;width:min(100%,300px);max-width:300px;padding:0;border:0;margin:0;transform:none;justify-self:center;}
.about-hero>div:not(.petal-field){order:2;}
.work-feature,.project-summary,.about-blocks,.about-quote,.product-launch,.product-ui{column-gap:var(--layout-gap);}
.section-heading h2,.about-blocks h2,.about-quote h2{font-size:34px;font-weight:500;line-height:1.35;}
.content-section{display:block;padding-block:50px;}
.section-side{display:flex;align-items:baseline;gap:18px;margin-bottom:30px;}
.section-side .eyebrow{flex:0 0 auto;margin:0;font-size:13px;}
.section-side h2{font-size:34px;line-height:1.35;font-weight:500;letter-spacing:-.04em;}
.section-body{width:100%;}
.section-body p,.feature-entry p,.case p,.reflection-entry p,.skill-use p{font-size:19px;line-height:1.8;max-width:960px;}
.section-body>p{max-width:960px;}
.feature-entry h3,.case h3,.reflection-entry h3{font-size:27px;line-height:1.45;margin-bottom:16px;}
.skill-use h3{font-size:29px;line-height:1.4;margin-bottom:16px;}
.feature-entry{padding-bottom:32px;margin-bottom:32px;}
.case{padding-bottom:40px;margin-bottom:40px;}
.skill-use{padding-block:32px;}
.skill-use .skill-file{font-size:13px;margin-bottom:10px;}
.skill-example{margin-top:22px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink);}
.skill-example .example-label{font-size:14px;color:var(--muted);margin-bottom:8px;font-weight:400;}
.skill-example p{font-size:19px;line-height:1.8;color:var(--ink);max-width:960px;margin:0;}
.project-summary{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--layout-gap);padding-block:54px;}
.project-summary p{font-size:19px;line-height:1.8;}
.project-facts dt{font-size:14px;}
.project-facts dd{font-size:17px;line-height:1.7;}
.ai-overview{display:block;}
.ai-overview>div{max-width:1000px;}
.ai-overview h2{font-size:32px;margin-bottom:22px;}
.ai-overview .ai-context{font-size:15px;color:var(--muted);margin-top:22px;margin-bottom:0;}
.ai-context span{margin-right:18px;}
.tech-line{font-size:14px;line-height:1.7;}
.scope{font-size:14px;line-height:1.7;}
.section-body ul,.section-body ol{font-size:18px;line-height:1.8;}
.intro-body,.work-description,.about-ways p,.about-strip p,.about-quote p{font-size:19px;line-height:1.8;}
.skill-panel ul{font-size:18px;}
.ai-points p{font-size:18px;}
.test-tags li{font-size:16px;line-height:1.6;}
@media(max-width:760px){
 :root{--gutter:24px;}
 .intro-section{padding-block:56px 64px;}
 .intro-inner,.about-hero.wrap{grid-template-columns:1fr;gap:28px;}
 .intro-inner .intro-portrait,.about-hero>.about-portrait{width:176px;justify-self:start;}
 .intro-copy .intro-lead{font-size:26px;}
 .intro-copy .intro-body{font-size:17px;}
 .section-heading h2,.about-blocks h2,.about-quote h2{font-size:27px;}
 .content-section{padding-block:36px;}
 .section-side{gap:12px;margin-bottom:24px;}
 .section-side h2{font-size:27px;}
 .section-side .eyebrow{font-size:12px;margin:0;}
 .section-body p,.feature-entry p,.case p,.reflection-entry p,.skill-use p,.skill-example p,.project-summary p,.intro-body,.work-description,.about-ways p,.about-strip p,.about-quote p{font-size:17px;line-height:1.8;}
 .feature-entry h3,.case h3,.reflection-entry h3,.skill-use h3{font-size:23px;}
 .skill-example{padding:0;margin-top:20px;}
 .skill-example .example-label{font-size:13px;}
 .project-summary{grid-template-columns:1fr;gap:26px;padding-block:38px;}
 .ai-overview h2{font-size:27px;}
 .ai-overview .ai-context{font-size:14px;}
 .ai-context span{display:block;margin:0 0 5px;}
 .project-facts dd{font-size:16px;}
 .section-body ul,.section-body ol,.skill-panel ul,.ai-points p{font-size:17px;}
 .tech-line,.scope{font-size:13px;}
 .test-tags li{font-size:15px;}
}
@media(prefers-reduced-motion:reduce){.home .hero .petal-field::before{animation:none;}}

.ai-use-entry{padding-block:32px;border-top:1px solid var(--line);}
.ai-use-entry:first-child{padding-top:0;border-top:0;}
.ai-use-entry:last-child{padding-bottom:0;}
.ai-use-entry .skill-file{font-size:13px;color:var(--muted);margin-bottom:10px;}
.ai-use-entry h3{font-size:29px;font-weight:500;line-height:1.4;margin-bottom:18px;}
.ai-use-entry p:last-child{margin-bottom:0;}
.product-launch,.product-ui{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--layout-gap);align-items:center;}
.product-launch .flyasia-photo{width:min(100%,320px);margin:0;justify-self:center;}
.product-launch .reflection-entry,.product-ui .reflection-entry{margin:0;padding:0;border:0;}
.product-ui{margin-top:48px;padding-top:48px;border-top:1px solid var(--line);}
.product-ui .app-gallery{background:none;padding:0;margin:0;width:100%;gap:24px;border:0;box-shadow:none;}
.product-ui .app-gallery>div{width:min(44%,210px);display:flex;align-items:center;flex-direction:column;}
.product-ui .phone-frame{height:auto;width:100%;aspect-ratio:560/1214;}
.product-ui .phone-frame img{object-fit:contain;}
.product-ui .image-caption{font-size:14px!important;text-align:center;margin-top:12px;}
@media(max-width:760px){
 .ai-use-entry{padding-block:28px;}
 .ai-use-entry h3{font-size:23px;}
 .ai-use-entry .skill-file{font-size:12px;overflow-wrap:anywhere;}
 .product-launch,.product-ui{grid-template-columns:1fr;gap:28px;}
 .product-launch .flyasia-photo{width:min(100%,300px);}
 .product-ui{margin-top:32px;padding-top:32px;}
 .product-ui .app-gallery{gap:20px;}
 .product-ui .app-gallery>div{width:min(46%,180px);}
 .product-ui .image-caption{font-size:12px!important;}
}

/* Compact carousel controls retain the existing swipe exclusion area. */
.home .hero-photos .hero-dots{gap:0;justify-content:center;}
.home .hero-photos .hero-dots button,.home .hero-photos .hero-dots button[aria-current]{height:16px;width:28px;}
.home .hero-photos .hero-dots button[aria-current]::before{height:12px;}
.home #intro.intro-section{min-height:calc(100svh + 1px);box-sizing:border-box;scroll-margin-top:-38px;display:flex;align-items:center;}
.flow-list li:first-child,.flow-list li:nth-child(3){padding-left:15px;}
.media-feature{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:var(--layout-gap);}
.media-copy h2{font-size:32px;line-height:1.45;font-weight:500;letter-spacing:-.04em;margin:16px 0;}
.media-copy h3{font-size:27px;font-weight:500;line-height:1.45;margin:12px 0 16px;}
.media-copy p{font-size:18px;line-height:1.8;margin:0 0 16px;}
.media-copy .media-role{font-size:14px;color:var(--muted);margin-top:22px;}
.media-feature .demo-card,.media-feature .large-figure{width:100%;max-width:660px;margin:0;justify-self:center;}
.detection-demo{margin-top:40px;padding-top:32px;border-top:1px solid var(--line);grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);}
@media(max-width:760px){
 .home .hero-photos .hero-dots button,.home .hero-photos .hero-dots button[aria-current]{width:18px;height:32px;}
 .home .hero-photos .hero-dots button[aria-current]::before{height:6px;width:12px;}
 .media-feature,.detection-demo{grid-template-columns:1fr;gap:24px;}
 .media-copy h2{font-size:27px;} .media-copy h3{font-size:23px;}
 .media-copy p{font-size:17px;}
 .detection-demo{margin-top:30px;}
}

/* Reserve room for readable content before decorative media loads. */
.ai-flow{background-image:url(assets/study-liquid.webp);background-position:center;background-size:cover;}
.home .hero .petal-field::before{animation-play-state:paused;}
.home .hero .petal-field.is-background-visible::before{animation-play-state:running;}

/* Each original textured petal turns around the flower heart; the paper remains fixed. */
.home .hero .petal-field::before{content:none;animation:none;}
.petal-scene{position:absolute;inset:0;width:100%;height:100%;filter:saturate(.72) contrast(.94);}
.petal-piece{transform-box:view-box;transform-origin:1290px 880px;animation-play-state:paused;}
.petal-piece-upper{animation:petal-upper-turn 17s ease-in-out infinite alternate paused;}
.petal-piece-right{animation:petal-right-turn 21s ease-in-out infinite alternate paused;}
.petal-piece-left{animation:petal-left-turn 15s ease-in-out infinite alternate paused;}
.petal-piece-middle{animation:petal-middle-turn 19s ease-in-out infinite alternate paused;}
.is-background-visible .petal-piece{animation-play-state:running;}
@keyframes petal-upper-turn{from{transform:rotate(-1.5deg);}to{transform:rotate(1.5deg);}}
@keyframes petal-right-turn{from{transform:rotate(1.8deg);}to{transform:rotate(-1.2deg);}}
@keyframes petal-left-turn{from{transform:rotate(1deg);}to{transform:rotate(-2deg);}}
@keyframes petal-middle-turn{from{transform:rotate(-1.6deg);}to{transform:rotate(1deg);}}
@media(prefers-reduced-motion:reduce){.petal-piece{animation:none!important;transform:none!important;}}

/* Editorial hero: type on a quiet, continuous apricot field. */
:root{--section-wash:radial-gradient(ellipse at 88% 12%,#ffd8bcad 0%,#ffe9db18 48%,transparent 66%),radial-gradient(ellipse at 7% 80%,#ffd3b48a 0%,transparent 57%),radial-gradient(ellipse at 52% 46%,#fffdfa 0%,#fff9f4 60%,#fff3e9 100%);}
.content-section.section-tint::before{background:var(--section-wash);}
.home .hero .petal-field.green-hero-field{background:#f4e9dd;}
.home .hero .petal-field::before,.ai-flow::before{content:none;}
.home .hero .petal-field::after,.ai-flow::after{z-index:2;}
.petal-scene{opacity:.46;filter:saturate(.6) contrast(.9);}
.petal-piece{will-change:transform;}
.home .hero-copy{padding:44px 32px 44px clamp(36px,5vw,80px);}
.hero-identity{display:flex;flex-direction:column;align-items:flex-start;width:100%;max-width:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;}
.home .hero-name{font-size:clamp(92px,11.3vw,174px);font-weight:700;letter-spacing:-.075em;line-height:1.06;color:#27282a;}
.home .hero-name-en{font-size:clamp(21px,2.15vw,30px);font-weight:400;line-height:1.4;letter-spacing:.01em;margin-top:22px;color:#48423c;}
.home .hero-copy .hero-cta{display:inline-flex;align-items:center;justify-content:flex-start;gap:24px;min-height:48px;margin-top:54px;padding:0;border:0;border-radius:0;background:none;color:#27282a;font-size:16px;font-weight:400;line-height:1.5;box-shadow:none;transform:none;transition:gap .2s;}
.home .hero-copy .hero-cta span{display:grid;place-items:center;width:44px;height:44px;border:1px solid #27282a66;border-radius:50%;font-size:21px;font-weight:400;color:#27282a;background:none;transition:background .2s,color .2s,border-color .2s;}
.home .hero-copy .hero-cta:hover{color:#27282a;background:none;gap:30px;transform:none;}
.home .hero-copy .hero-cta:hover span{background:#27282a;border-color:#27282a;color:#fff5eb;}
.home .hero-copy .hero-cta:focus-visible{outline-offset:6px;}
.ai-flow{background:#f5e7dc;background-image:none;}
.ai-flow .liquid-video{opacity:.68;}
.data-table th,.stage-panel{background:#fbf0e6;}
.hero-pointer-light{position:absolute;left:-320px;top:-320px;width:640px;height:640px;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(closest-side,#fff5dfa6,#ffe3ba3d 48%,transparent 100%);transition:opacity .35s;will-change:transform;}
.hero-pointer-light.is-active{opacity:.3;}
@media(max-width:760px){
 .home .hero-copy{padding:92px var(--gutter) 34px;}
 .home .hero-name{font-size:clamp(72px,22vw,102px);}
 .home .hero-name-en{font-size:22px;margin-top:14px;}
 .home .hero-copy .hero-cta{margin-top:28px;font-size:15px;gap:20px;}
 .hero-pointer-light{display:none;}
}
/* Portrait crops have their own focus; a shared top crop hid the trekking photo's subject. */
.home .hero-card[data-photo="trek"] img{object-position:50% 92%;}
@media(max-width:760px){
 .home .hero-art.hero-photos{height:clamp(290px,88vw,380px);aspect-ratio:auto;padding-bottom:34px;}
 .home .hero-photos .hero-track{bottom:34px;}
 .home .hero-card[data-photo="trek"] img{object-position:50% 96%;}
 .menu-toggle{min-width:44px;min-height:44px;}
 .site-nav a{min-height:44px;display:flex;align-items:center;}
 .project-title{font-size:clamp(48px,13.8vw,88px);line-height:1.12;}
 .project-subtitle{font-size:20px;line-height:1.65;}
 .section-side{align-items:flex-start;}
 .section-side .eyebrow{margin-top:8px;margin-bottom:0;}
 .flow-list li{padding-block:18px;}
 .stage-tabs .stage-button{min-height:56px;}
 .stage-panel{min-height:0;}
 .media-feature .demo-card,.detection-demo .large-figure{max-width:100%;}
}
@media(max-width:380px){
 :root{--gutter:20px;}
 .hero-identity{padding:0;}
 .home .hero-copy{padding-top:84px;padding-bottom:30px;}
 .intro-copy .intro-lead{font-size:24px;}
 .section-side h2{font-size:25px;}
 .feature-entry h3,.case h3,.reflection-entry h3,.ai-use-entry h3{font-size:22px;}
 .project-facts{column-gap:16px;}
 .project-facts dd{font-size:15px;}
}
@media(min-width:761px) and (max-width:1000px){
 .media-feature,.detection-demo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;}
 .media-copy h2{font-size:27px;}
 .media-copy h3{font-size:25px;}
 .media-copy p{font-size:17px;}
}
/* A full-bleed rendered surface, followed by a manually browsed portrait gallery. */
.home:has(.hero-film) .site-header{color:#33271f;}
.home:has(.hero-film) .site-nav a{color:#33271f;}
.home:has(.hero-film) .menu-toggle{color:inherit;}
.home .hero.wrap:has(.hero-film){display:flex;align-items:center;isolation:isolate;width:100%;max-width:none;height:auto;min-height:100svh;margin:0;padding:110px var(--gutter) 80px;overflow:hidden;background:#efa273;}
.hero-film{position:absolute;inset:0;z-index:-2;overflow:hidden;}
.hero-film::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 18% 35%,#fff0d532,transparent 66%),radial-gradient(ellipse at 92% 75%,#ffbd7d20,transparent 60%);pointer-events:none;}
.home .hero-film .hero-folds-video{width:100%;height:100%;opacity:1;object-fit:cover;object-position:center;}
.home .hero:has(.hero-film) .hero-copy{width:min(1200px,100%);margin-inline:auto;padding:0;align-self:center;}
.home .hero:has(.hero-film) .hero-name{font-size:clamp(88px,12.5vw,180px);color:#33271f;line-height:1.08;letter-spacing:-.07em;text-shadow:none;}
.home .hero:has(.hero-film) .hero-name-en{color:#493427;font-size:clamp(21px,2.4vw,32px);font-weight:400;letter-spacing:.015em;margin-top:22px;}
.home .hero:has(.hero-film) .hero-cta{color:#33271f;font-size:17px;gap:24px;margin-top:40px;}
.home .hero:has(.hero-film) .hero-cta span{color:inherit;border-color:#33271f66;background:transparent;}
.home .hero:has(.hero-film) .hero-cta:hover span{background:#33271f;color:#fff5e9;}
.home #intro .intro-inner{grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr);gap:clamp(40px,7vw,108px);}
.intro-gallery{width:min(100%,360px);justify-self:center;outline-offset:10px;}
.intro-photo-stage{position:relative;width:100%;aspect-ratio:4/5;border:6px solid #fff;border-radius:12px;background:#f1ebe4;box-shadow:0 3px 8px #4f322510,0 24px 55px -22px #563b3b4a;overflow:hidden;touch-action:pan-y;transition:transform .5s cubic-bezier(.22,.72,.2,1),box-shadow .5s;}
.intro-photo-track{display:flex;width:100%;height:100%;transition:transform .48s cubic-bezier(.22,.72,.2,1);}
.intro-slide{flex:0 0 100%;min-width:0;width:100%;height:100%;margin:0;position:relative;inset:auto;overflow:hidden;}
.intro-slide[hidden]{display:none;}
.intro-slide img{position:absolute;inset:0;display:block;width:100%;max-width:none;height:100%;margin:0;padding:0;object-fit:cover;object-position:center;user-select:none;-webkit-user-drag:none;transition:transform .65s cubic-bezier(.22,.72,.2,1);}
.intro-slide[data-photo="trek"] img{object-position:50% 80%;}
.intro-slide:nth-child(4) img{object-position:54% center;}
.intro-slide:nth-child(5) img{object-position:57% center;}
@media(hover:hover) and (pointer:fine){.intro-photo-stage:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 8px 20px #4f322518,0 32px 64px -18px #563b3b55;}.intro-photo-stage:hover img{transform:scale(1.04);}}
.intro-slide figcaption{position:absolute;bottom:0;left:0;right:0;padding:32px 14px 12px;background:linear-gradient(transparent,#30271c8c);color:#fff;font-size:12px;line-height:1.4;letter-spacing:0;}
.intro-slide:first-child figcaption{display:none;}
.intro-photo-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px;}
.intro-photo-controls>button{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid #d6c5b7;background:transparent;color:#4e4035;border-radius:50%;font-size:21px;transition:background .2s;}
.intro-photo-controls>button:hover{background:#fff8f1;}
.intro-photo-dots{display:flex;align-items:center;gap:0;}
.intro-photo-dots button{display:grid;place-items:center;width:22px;min-height:44px;border:0;padding:0;background:transparent;}
.intro-photo-dots span{display:block;width:5px;height:5px;border-radius:8px;background:#cdb7a7;transition:width .25s,background .25s;}
.intro-photo-dots button[aria-current] span{width:14px;background:#8c4d31;}
.intro-photo-count{text-align:center;font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.12em;margin:0;color:#9d8c7e;}
.intro-photo-count span{color:#574637;}
.hero-disciplines{--role-height:1.4em;font-size:clamp(27px,3.2vw,44px);font-weight:500;line-height:1.4;height:var(--role-height);overflow:hidden;margin-top:34px;letter-spacing:-.035em;color:#33271f;perspective:600px;}
.discipline-reel{animation:discipline-roll 10.5s cubic-bezier(.76,0,.24,1) infinite;animation-play-state:paused;}
.hero-disciplines.is-running .discipline-reel{animation-play-state:running;}
.discipline-reel span{display:block;height:var(--role-height);white-space:nowrap;}
@keyframes discipline-roll{0%,23%{transform:translateY(0);}33.333%,56%{transform:translateY(-25%);}66.666%,89%{transform:translateY(-50%);}100%{transform:translateY(-75%);}}
@media(prefers-reduced-motion:reduce){.discipline-reel{animation:none;}.intro-photo-stage,.intro-photo-track,.intro-slide img{transition:none;}.intro-photo-stage:hover,.intro-photo-stage:hover img{transform:none;}}
@media(max-width:760px){
 .home .hero.wrap:has(.hero-film){min-height:100svh;padding:130px var(--gutter) 72px;}
 .home .hero:has(.hero-film) .hero-name{font-size:clamp(74px,22vw,128px);}
 .home .hero:has(.hero-film) .hero-name-en{font-size:22px;margin-top:18px;}
 .home .hero:has(.hero-film) .hero-cta{margin-top:40px;font-size:16px;}
 .home .hero:has(.hero-film) .hero-copy{padding:0;}
 .home .hero-film .hero-folds-video{object-position:left center;}
 .home #intro .intro-inner{grid-template-columns:1fr;gap:36px;}
 .intro-gallery{width:min(100%,310px);justify-self:start;}
 .intro-photo-stage{border-width:6px;}
 .intro-photo-controls{margin-top:12px;}
 .home:has(.hero-film) .site-nav.is-open{color:#27282a;background:#fff8f0;}
 .home:has(.hero-film) .site-nav.is-open a{color:#27282a;}
}
/* Minimal landing: a quiet text column with the moving surface kept to one side. */
.home .hero.wrap:has(.hero-film){background:#fff7ee;}
.home .hero .hero-film{inset:0 0 0 34%;opacity:.67;mask-image:radial-gradient(ellipse 92% 100% at 100% 48%,#000 36%,transparent 86%);-webkit-mask-image:radial-gradient(ellipse 92% 100% at 100% 48%,#000 36%,transparent 86%);}
.home .hero-film::after{background:radial-gradient(ellipse at 55% 20%,#fff2d936,transparent 70%);}
.home .hero:has(.hero-film) .hero-name{font-size:clamp(76px,8vw,112px);font-weight:500;letter-spacing:-.07em;}
.home .hero:has(.hero-film) .hero-name-en{font-size:18px;margin-top:18px;letter-spacing:.035em;}
.home .hero:has(.hero-film) .hero-disciplines{font-size:clamp(27px,3vw,38px);margin-top:40px;}
.home .hero:has(.hero-film) .hero-cta{margin-top:32px;font-size:15px;gap:16px;}
.home .hero:has(.hero-film) .hero-cta span{width:32px;height:32px;font-size:18px;border:0;}
@media(max-width:760px){
 .home .hero.wrap:has(.hero-film){justify-content:center;padding-block:120px 100px;}
 .home .hero .hero-film{inset:28% -15% 0 10%;opacity:.35;mask-image:radial-gradient(ellipse at 85% 85%,#000 12%,transparent 74%);-webkit-mask-image:radial-gradient(ellipse at 85% 85%,#000 12%,transparent 74%);}
 .home .hero:has(.hero-film) .hero-name{font-size:clamp(66px,19vw,90px);}
 .home .hero:has(.hero-film) .hero-name-en{font-size:17px;}
 .home .hero:has(.hero-film) .hero-disciplines{font-size:28px;margin-top:32px;}
}

/* Typography and media framing only. Colors come from the orange / charcoal palette. */
400;500;600&display=swap');
.home .hero:has(.hero-film) .hero-name-en,
.home .hero:has(.hero-film) .hero-cta{font-family:Pretendard,sans-serif;}
.section-heading h2,.project-title{font-weight:400;letter-spacing:-.035em;}
.section-heading h2{font-size:clamp(40px,4.2vw,58px);}
.work-feature .work-visual{background:var(--surface);border-radius:10px;padding:clamp(14px,1.8vw,26px);}
.work-visual .browser-frame{box-shadow:0 24px 50px -28px rgba(39,40,42,.5);}
@media(max-width:760px){.section-heading h2{font-size:36px;}}

/* Minimal landing: a quiet text column with the moving surface kept to one side. */
.home .hero.wrap:has(.hero-film){background:#fff7ee;}
.home .hero .hero-film{inset:0 0 0 34%;opacity:.67;mask-image:radial-gradient(ellipse 92% 100% at 100% 48%,#000 36%,transparent 86%);-webkit-mask-image:radial-gradient(ellipse 92% 100% at 100% 48%,#000 36%,transparent 86%);}
.home .hero-film::after{background:radial-gradient(ellipse at 55% 20%,#fff2d936,transparent 70%);}
.home .hero:has(.hero-film) .hero-name{font-size:clamp(76px,8vw,112px);font-weight:500;letter-spacing:-.07em;}
.home .hero:has(.hero-film) .hero-name-en{font-size:18px;margin-top:18px;letter-spacing:.035em;}
.home .hero:has(.hero-film) .hero-disciplines{font-size:clamp(27px,3vw,38px);margin-top:40px;}
.home .hero:has(.hero-film) .hero-cta{margin-top:32px;font-size:15px;gap:16px;}
.home .hero:has(.hero-film) .hero-cta span{width:32px;height:32px;font-size:18px;border:0;}
@media(max-width:760px){
 .home .hero.wrap:has(.hero-film){justify-content:center;padding-block:120px 100px;}
 .home .hero .hero-film{inset:28% -15% 0 10%;opacity:.35;mask-image:radial-gradient(ellipse at 85% 85%,#000 12%,transparent 74%);-webkit-mask-image:radial-gradient(ellipse at 85% 85%,#000 12%,transparent 74%);}
 .home .hero:has(.hero-film) .hero-name{font-size:clamp(66px,19vw,90px);}
 .home .hero:has(.hero-film) .hero-name-en{font-size:17px;}
 .home .hero:has(.hero-film) .hero-disciplines{font-size:28px;margin-top:32px;}
}

/* Keep the latest typography and navigation while applying the requested warm palette. */
:root{--paper:#fff;--surface:#fff6ef;--ink:#27282a;--muted:#706a65;--sage:#f2bb8c;--lavender:#f7ddc6;--rust:#f47732;--section-wash:radial-gradient(ellipse 80% 100% at 98% 34%,#ffbe9160,transparent 76%),radial-gradient(ellipse 65% 90% at 5% 76%,#ffdcac50,transparent 80%),linear-gradient(#fff1e6,#fff1e6);}
body{background-color:#fff;}
.ai-flow{filter:none;}
.home:has(.hero-film) .site-header,.home:has(.hero-film) .site-nav a,.home:has(.hero-film) .menu-toggle{color:#33271f;}
.home .hero:has(.hero-film) .hero-name{color:#33271f;}
.home .hero:has(.hero-film) .hero-name-en{color:#493427;}
.home .hero:has(.hero-film) .hero-disciplines,.home .hero:has(.hero-film) .discipline-reel span{color:#33271f;}
.home .hero:has(.hero-film) .hero-cta{color:#33271f;border-bottom:1px solid currentColor;padding-bottom:6px;min-height:0;gap:12px;font-weight:500;}
.home .hero-copy .hero-cta span,.home .hero:has(.hero-film) .hero-cta span{width:auto;height:auto;border:0;border-radius:0;background:none;color:inherit;}
.home .hero:has(.hero-film) .hero-cta:hover span{background:none;color:inherit;transform:translateY(3px);}
.photo-prev,.photo-next{border:0!important;background:none!important;box-shadow:none!important;}
.intro-photo-stage .intro-slide img{max-width:none;width:100%;height:100%;}
.return-nav,.return-nav a,.return-nav button{border:0!important;}
.site-header{border-bottom:0;}
.return-nav{left:auto;right:max(clamp(10px,1vw,16px),env(safe-area-inset-right,0px));display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;background:rgba(255,251,245,.9);box-shadow:0 4px 18px rgba(39,40,42,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.return-nav button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;}
.return-nav svg{width:18px;height:18px;}
.header-home{position:relative;display:inline-flex;align-items:center;min-width:44px;min-height:44px;padding-block:10px;margin-right:auto;font-size:14px;line-height:1.4;color:inherit;text-decoration:none;}
.header-home::before{content:"";position:absolute;inset:-8px;}
.header-home:hover{text-decoration:underline;text-underline-offset:7px;}

/* Keep the reading column independent from full-width section backgrounds. */
.about-hero .petal-field.green-hero-field{left:50%;right:auto;width:var(--page-width,100vw);max-width:none;transform:translateX(-50%);background:var(--section-wash);}
.section-tint{background:transparent;border-top-color:transparent;border-bottom-color:transparent;}
.section-tint::before{max-width:none;opacity:1;-webkit-mask-image:none;mask-image:none;}
/* Four broad gradient shapes share a filled warm base and restrained edge contrast. */
.section-tint:nth-of-type(4n){--section-wash:radial-gradient(ellipse 100% 64% at 48% 0%,#ffc78a45,transparent 84%),radial-gradient(ellipse 72% 65% at 78% 100%,#ffb79240,transparent 82%),linear-gradient(#fff1e6,#fff1e6);}
.section-tint:nth-of-type(4n+1){--section-wash:radial-gradient(ellipse 54% 78% at 48% 48%,#ffbe8b45,transparent 90%),radial-gradient(ellipse 45% 110% at 0% 70%,#ffdc9b38,transparent 85%),linear-gradient(#fff1e6,#fff1e6);}
.section-tint:nth-of-type(4n+2){--section-wash:radial-gradient(ellipse 110% 110% at 4% 105%,transparent 28%,#ffc49638 52%,transparent 78%),radial-gradient(ellipse 62% 90% at 100% 20%,#ffdaad38,transparent 85%),linear-gradient(#fff1e7,#fff1e7);}
.section-tint:nth-of-type(4n+3){--section-wash:radial-gradient(ellipse 105% 125% at 108% 88%,transparent 25%,#ffbd9240 51%,transparent 78%),radial-gradient(ellipse 78% 66% at 15% 100%,#ffda9340,transparent 86%),linear-gradient(#fff1e6,#fff1e6);}
.section-tint::before{-webkit-mask-image:none;mask-image:none;}
.home #selected-work{scroll-margin-top:-38px;}
.home .intro-links{display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px;}
.home .intro-links .text-link{display:inline-flex;align-items:center;gap:16px;font-size:16px;padding:0 0 7px;}
.home .intro-links .text-link span{font-size:18px;}
.about-hero h1.about-lead{font-size:34px;line-height:1.55;font-weight:400;letter-spacing:-.04em;margin:0 0 26px;}
.about-collaboration{padding-block:56px 28px;border-top:1px solid var(--line);}
.about-collaboration>h2,.about-learning>h2{font-size:34px;font-weight:500;line-height:1.4;letter-spacing:-.04em;}
.about-collaboration>h2{margin-bottom:34px;}
.collaboration-entry,.about-learning{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:clamp(28px,4vw,60px);}
.collaboration-entry{padding-block:32px;border-top:1px solid var(--line);}
.collaboration-entry h3{font-size:25px;font-weight:500;line-height:1.5;margin:0;letter-spacing:-.035em;}
.collaboration-entry p,.about-learning p{font-size:19px;line-height:1.85;}
.collaboration-entry .collaboration-context{font-size:14px;line-height:1.7;color:var(--muted);margin-bottom:12px;}
.collaboration-entry p:last-child,.about-learning p:last-child{margin-bottom:0;}
.collaboration-entry .text-link{font-size:15px;margin-top:8px;}
.about-learning{padding-block:56px 64px;border-top:1px solid var(--line);}
.ai-page .ai-flow{background:#fff9f2;}
.ai-page .ai-flow .liquid-video{opacity:1;}
.ai-page .ai-flow::after{content:none;}
.ai-page .ai-hero-grid:has(.ai-flow)>div{mix-blend-mode:normal;color:#292321;}
.ai-page .ai-hero-grid:has(.ai-flow) [data-video-tone="light"]{color:#fff9f4;text-shadow:0 2px 14px #20162440;}
.ai-page .ai-hero-grid:has(.ai-flow) [data-video-tone="dark"]{color:#292321;text-shadow:0 1px 12px #fff9f430;}
.ai-page .project-hero:has(.ai-flow) .project-topline{mix-blend-mode:difference;color:#fff;}
.ai-page .project-hero:has(.ai-flow) .project-topline a{color:inherit;}
@media(max-width:760px){
 .section-tint::before{-webkit-mask-image:none;mask-image:none;}
 .home .intro-links{gap:20px 28px;}
 .home .intro-links .text-link{font-size:15px;gap:12px;}
 .about-hero h1.about-lead{font-size:26px!important;line-height:1.5;}
 .about-collaboration{padding-block:38px 16px;}
 .about-collaboration>h2,.about-learning>h2{font-size:27px;}
 .about-collaboration>h2{margin-bottom:24px;}
 .collaboration-entry,.about-learning{grid-template-columns:1fr;gap:14px;}
 .collaboration-entry{padding-block:28px;}
 .collaboration-entry h3{font-size:23px;}
 .collaboration-entry p,.about-learning p{font-size:17px;line-height:1.85;}
 .collaboration-entry .collaboration-context{font-size:13px;}
 .about-learning{padding-block:38px 44px;}
 .about-hero .about-lead{font-size:26px!important;line-height:1.5;}
 .about-hero p,.about-ways p,.about-quote p{font-size:17px;line-height:1.8;}
 .section-side{align-items:flex-start;gap:12px;}
 .section-side .eyebrow{padding-top:7px;}
 .section-side h2{font-size:26px;line-height:1.4;}
 .section-body p,.ai-use-entry p{font-size:17px;line-height:1.8;}
 .project-facts dd,.history-row>div{overflow-wrap:anywhere;}
 .project-facts>div:nth-child(n+3){grid-column:1 / -1;}
 .project-facts dd{font-size:15px;word-break:keep-all;overflow-wrap:normal;}
 .project-facts>div:nth-child(n+3) dd{font-size:16px;}
 .ai-use-entry h3{font-size:23px;line-height:1.45;}
 .ai-use-entry .skill-file{font-size:12px;overflow-wrap:anywhere;}
 .data-table{font-size:14px;}
 .data-table th,.data-table td{padding:14px 10px;line-height:1.6;}
 .contact-section{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px));}
}
@media(max-width:360px){
 :root{--gutter:20px;}
 .project-title{font-size:clamp(42px,15vw,64px);}
 .section-side h2{font-size:24px;}
 .data-table{font-size:13px;}
 .data-table th,.data-table td{padding:12px 7px;}
 .contact-links .email-link{font-size:clamp(19px,6.5vw,28px);}
}

.learning-example{margin-top:28px;}
.learning-example h3{font-size:22px;font-weight:500;line-height:1.5;letter-spacing:-.03em;margin:0 0 12px;}
.about-learning .learning-followup{margin-top:28px;color:var(--muted);}
@media(max-width:760px){.learning-example{margin-top:24px;}.learning-example h3{font-size:21px;}}

/* Background changes mark a content chapter, spanning its individual sections. */
.chapter-band{position:relative;isolation:isolate;}
.chapter-band::before{content:"";position:absolute;inset-block:0;left:50%;width:var(--page-width,100%);transform:translateX(-50%);z-index:-1;pointer-events:none;background:var(--section-wash);}
.chapter-band--product{--section-wash:radial-gradient(ellipse 115% 110% at 105% 80%,transparent 25%,#ffbd9240 52%,transparent 80%),radial-gradient(ellipse 95% 70% at 10% 100%,#ffda9340,transparent 88%),linear-gradient(#fff1e6,#fff1e6);}
.chapter-band--tools{--section-wash:radial-gradient(ellipse 60% 90% at 48% 48%,#ffbe8b45,transparent 90%),radial-gradient(ellipse 70% 80% at 0% 80%,#ffdc9b38,transparent 86%),linear-gradient(#fff1e6,#fff1e6);}
.chapter-band--profile{--section-wash:radial-gradient(ellipse 110% 80% at 50% 0%,#ffc78a45,transparent 84%),radial-gradient(ellipse 80% 80% at 100% 100%,#ffb79240,transparent 84%),linear-gradient(#fff1e6,#fff1e6);}

.project-resource-links{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;}

/* Home belongs to the shared menu; keep the desktop and mobile trigger at the right. */
.site-header .site-nav{margin-left:auto;}
.site-nav .header-home{margin-right:0;min-width:44px;justify-content:center;}
.project-topline:has(>span:only-child){justify-content:flex-end;}
@media(max-width:760px){.site-header .menu-toggle{margin-left:auto;}.site-nav .header-home{font-size:inherit;justify-content:flex-start;}}

.analysis-case{padding-block:28px;border-top:1px solid var(--line);}
.analysis-case h3{font-size:25px;line-height:1.5;font-weight:500;letter-spacing:-.035em;margin:0 0 20px;}
.analysis-details{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:26px;margin:0;}
.analysis-details dt{font-size:13px;color:var(--muted);margin-bottom:10px;}
.analysis-details dd{font-size:18px;line-height:1.75;margin:0;word-break:keep-all;overflow-wrap:anywhere;}
.analysis-takeaway{padding-top:28px;}
@media(max-width:760px){.analysis-case h3{font-size:23px;}.analysis-details{grid-template-columns:1fr;gap:20px;}.analysis-details dd{font-size:17px;}.analysis-details dt{margin-bottom:6px;}}

@media(max-width:760px){.home:has(.hero-film) .site-header .site-nav.is-open{background:#fff;color:var(--ink);}}

/* A single viewport origin and height for every header, including the home page. */
:root{--header-height:64px;}
body:not(.home){padding-top:var(--header-height);}
body>.site-header{position:absolute;inset:0 0 auto;transform:none;width:calc(min(var(--content-max),100%) - 2 * var(--gutter));height:var(--header-height);margin:0 auto;padding:0;align-items:center;justify-content:flex-end;view-transition-name:portfolio-header;}
@media(min-width:761px){body>.site-header .site-nav{position:static;padding:0;margin:0;gap:38px;font-size:14px;line-height:1.2;align-items:center;justify-content:flex-end;}}
@media(max-width:760px){:root{--header-height:58px;}body>.site-header .site-nav{top:100%;}}
/* Keep the menu out of the content's page-entry scale animation. */
::view-transition-group(portfolio-header){animation-duration:0s;}
::view-transition-old(portfolio-header){display:none;}
::view-transition-new(portfolio-header){animation:none;mix-blend-mode:normal;}
:root[data-page-fallback="opening"] body{animation:none;}
:root[data-page-fallback="opening"] main{animation:page-open .85s cubic-bezier(.22,.72,.2,1) both;transform-origin:var(--entry-x) var(--entry-y);}
@media(prefers-reduced-motion:reduce){:root[data-page-fallback="opening"] main{animation:none;}}

/* Full-bleed motion, with a fixed, readable identity at its centre. */
.home .hero.wrap.sculpture-hero{min-height:100svh;padding:132px var(--gutter) 108px;background:#ffe5cf;justify-content:center;}
.home .sculpture-hero .hero-film{inset:0;opacity:1;mask-image:none;-webkit-mask-image:none;overflow:hidden;}
.home .sculpture-hero .hero-film::after{content:none;}
.home .sculpture-hero .hero-film .hero-folds-video{width:100%;height:100%;object-fit:cover;object-position:center;transform:none;filter:none;}
.home .hero.sculpture-hero:has(.hero-film) .hero-copy{position:relative;z-index:1;width:100%;max-width:none;padding:0;text-align:center;}
.sculpture-hero .hero-identity{width:100%;align-items:center;}
.home .hero.sculpture-hero:has(.hero-film) .hero-name{color:#292321;font-size:clamp(76px,8.3vw,120px);font-weight:700;line-height:1.08;letter-spacing:-.065em;}
.home .hero.sculpture-hero:has(.hero-film) .hero-name-en{color:#41332c;font-size:18px;font-weight:600;margin-top:20px;letter-spacing:.015em;}
.home .hero.sculpture-hero:has(.hero-film) .hero-disciplines{color:#292321;font-family:Pretendard,sans-serif;font-size:clamp(36px,5.3vw,76px);font-weight:700;letter-spacing:-.045em;margin-top:32px;width:100%;}
.home .hero.sculpture-hero:has(.hero-film) .hero-cta{color:#292321;font-size:15px;font-weight:600;margin-top:42px;padding:0 0 7px;border-bottom:1px solid #554137;}
.home .hero.sculpture-hero:has(.hero-film) .hero-cta span{display:inline-block;margin-left:12px;transition:transform .25s ease;}
.home .hero.sculpture-hero:has(.hero-film) .hero-cta:hover span{transform:translateY(4px);}
@media(min-width:1600px){.home .hero.sculpture-hero:has(.hero-film) .hero-disciplines{font-size:80px;}}
@media(max-width:760px){
 .home .hero.wrap.sculpture-hero{min-height:100svh;padding:120px 20px 100px;justify-content:center;}
 .home .hero.sculpture-hero:has(.hero-film) .hero-name{font-size:clamp(70px,20vw,112px);}
 .home .hero.sculpture-hero:has(.hero-film) .hero-name-en{font-size:16px;margin-top:16px;}
 .home .hero.sculpture-hero:has(.hero-film) .hero-disciplines{font-size:clamp(27px,7.7vw,46px);margin-top:30px;letter-spacing:-.04em;}
 .home .hero.sculpture-hero:has(.hero-film) .hero-cta{margin-top:34px;font-size:14px;}
}
@media(prefers-reduced-motion:reduce){.home .hero.sculpture-hero:has(.hero-film) .hero-cta span{transition:none;}}

/* Video demonstrations keep the same frame and aspect ratio as their posters. */
.motion-media .demo-video{display:block;width:100%;height:auto;object-fit:contain;}

.project-period{margin:12px 0 22px;color:#6f635b;font-size:15px;line-height:1.6;font-weight:400;letter-spacing:.01em}
.research-status{display:inline-flex;align-items:center;gap:7px;margin-left:12px;color:#9d431f;white-space:nowrap}
.research-status::before{content:"";width:6px;height:6px;border-radius:50%;background:#dc692e}
.work-feature.research .work-visual{padding:0;overflow:hidden;background:#f7ece3;border:1px solid #e9d7c9;border-radius:18px}
.work-feature.research .work-visual>img{display:block;width:100%;height:auto;object-fit:contain}
.work-feature.research .work-copy h2,.work-feature.research .work-copy h3{font-size:clamp(28px,3vw,44px);line-height:1.25;letter-spacing:-.045em;word-break:keep-all}
.research-detail .project-title{font-size:clamp(38px,6vw,80px);letter-spacing:-.055em;word-break:keep-all}
.research-detail .project-summary p{margin-top:26px;line-height:1.85}
.research-flow{margin-top:28px;margin-bottom:64px}
.research-flow img{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;background:#f7ece3;border-radius:20px}
.research-flow figcaption{font-size:13px;color:#786a60;margin-top:14px}
@media(max-width:600px){.project-period{font-size:14px;margin:10px 0 18px}.research-status{margin-left:8px}.research-detail .project-title{font-size:38px}.research-flow{margin-bottom:40px}.research-flow img{border-radius:12px}}

.work-feature.research .work-copy h2,.work-feature.research .work-copy h3{font-size:clamp(28px,2.5vw,36px);line-height:1.35}
.research-detail .project-title{max-width:1050px;font-size:clamp(36px,5vw,66px);line-height:1.25}
.pipeline-preview{padding:36px 28px 26px;background:radial-gradient(ellipse at 20% 15%,#fff8ee,transparent 70%),#f5e2d0}
.preview-label{display:block;margin-bottom:28px;color:#8a6248;font-size:10px;letter-spacing:.16em;font-weight:700}
.preview-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cooking-frame{min-width:0}
.cooking-frame img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:10px;background:#322d29}
.frame-label{display:flex;flex-direction:column;gap:6px;padding-top:12px;line-height:1.4}
.frame-label span{color:#8b7464;font-size:12px;font-variant-numeric:tabular-nums}
.frame-label strong{color:#40362e;font-size:15px;font-weight:700;word-break:keep-all}
.preview-frames .frame-label strong{font-size:12px}
.preview-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:32px;padding-top:20px;border-top:1px solid #d7bdab;color:#6c4e3b;font-size:13px}
.preview-bottom>span:last-child{font-size:23px}
.cooking-example{margin-top:24px;margin-bottom:52px}
.cooking-sequence{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cooking-example figcaption{margin-top:20px;color:#776d64;font-size:14px;line-height:1.7;word-break:keep-all}
.pipeline-overview{margin-bottom:60px}
.pipeline-overview ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:24px 0 0;margin:0;border-top:1px solid #decaba}
.pipeline-overview li>span{color:#bd683c;font-size:12px;font-variant-numeric:tabular-nums}
.pipeline-overview h2{font-size:18px;margin:12px 0;letter-spacing:-.03em}
.pipeline-overview p{font-size:15px;line-height:1.7;color:#716860;word-break:keep-all}
@media(max-width:700px){.pipeline-preview{padding:28px 20px 22px}.preview-frames{gap:8px}.preview-label{font-size:9px;letter-spacing:.1em;margin-bottom:22px}.preview-bottom{font-size:12px;margin-top:22px}.cooking-sequence{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}.cooking-frame img{border-radius:8px}.pipeline-overview ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}.pipeline-overview h2{font-size:17px}.pipeline-overview p{font-size:14px}.cooking-example{margin-bottom:36px}}