/* ==========================================================================
   theSimetria — main stylesheet
   Palette: navy #0B0D3A · klein #1534FF · vermilion #FF5A1F · cream #F3EEE4
   Breakpoints: 860px (layout), 1100px (expertise rows)
   ========================================================================== */

/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
html, body {
  margin: 0;
  background: #0B0D3A;
  color: #F3EEE4;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: #FF5A1F; }
::selection { background: #FF5A1F; color: #0B0D3A; }
:focus-visible { outline: 2px solid #FF5A1F; outline-offset: 3px; border-radius: 4px; }

.serif, .page em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.page { position: relative; overflow-x: clip; background: #0B0D3A; color: #F3EEE4; }
.main { position: relative; z-index: 1; }

.label { font-size: 15px; font-weight: 500; display: flex; gap: 12px; align-items: center; }
.label::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #FF5A1F; }

.media img { width: 100%; height: 100%; object-fit: cover; }

/* Scroll reveal — JS sets opacity:1 / transform:none when in view */
.reveal    { opacity: 0; transform: translateY(32px); transition: opacity 900ms cubic-bezier(0.2,0,0,1), transform 900ms cubic-bezier(0.2,0,0,1); }
.reveal-lg { opacity: 0; transform: translateY(48px); transition: opacity 1000ms cubic-bezier(0.2,0,0,1), transform 1000ms cubic-bezier(0.2,0,0,1); }
.reveal-xl { opacity: 0; transform: translateY(56px); transition: opacity 1000ms cubic-bezier(0.2,0,0,1), transform 1000ms cubic-bezier(0.2,0,0,1); }
.no-js .reveal, .no-js .reveal-lg, .no-js .reveal-xl { opacity: 1; transform: none; }

/* ---------- WebGL field + intro ---------- */
.gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; background: #0B0D3A; }
.svgdefs { position: absolute; width: 0; height: 0; overflow: hidden; }

.curtain { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.curtain__t, .curtain__b { position: absolute; left: 0; right: 0; height: 50.2%; background: #0B0D3A; }
.curtain__t { top: 0; }
.curtain__b { bottom: 0; }
.curtain__l { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #F3EEE4; transform: scaleX(0); }
.no-js .curtain { display: none; }

/* ---------- Header ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 160; mix-blend-mode: difference; color: #FFFFFF; pointer-events: none; }
.hdr__in { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px clamp(20px,3vw,40px); }
.logo, .logo:hover { pointer-events: auto; font-weight: 600; font-size: 22px; letter-spacing: -0.04em; color: #FFFFFF; }
.logo em { letter-spacing: 0; }
.hdr__tag { font-size: 14px; letter-spacing: -0.01em; color: #FFFFFF; }
.hdr__tag em { font-size: 17px; }

.menu-btn { pointer-events: auto; position: relative; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.menu-btn__border { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); }
.menu-btn__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#FFFFFF 0%, transparent 0%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
}
.menu-btn__label { position: relative; font-size: 13px; font-weight: 600; letter-spacing: 0; }

/* ---------- Menu overlay ---------- */
.menu {
  position: fixed; inset: 0; z-index: 150;
  background: #1534FF; color: #F3EEE4;
  clip-path: circle(0% at calc(100% - 72px) 50px);
  transition: clip-path 900ms cubic-bezier(0.7,0,0.2,1), visibility 0s linear 900ms;
  visibility: hidden; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 120px clamp(20px,4vw,64px) 36px; overflow: auto;
}
.menu.is-open { clip-path: circle(150% at calc(100% - 72px) 50px); visibility: visible; pointer-events: auto; transition: clip-path 900ms cubic-bezier(0.7,0,0.2,1), visibility 0s; }
.menu__nav { display: flex; flex-direction: column; }
.menu__link, .menu__link:hover { display: flex; align-items: baseline; gap: clamp(12px,2vw,28px); font-size: clamp(52px,10vw,160px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.98; color: #F3EEE4; transition: transform 500ms cubic-bezier(0.2,0,0,1); }
.menu__link:hover { transform: translateX(28px); }
.menu__link em { font-size: 0.3em; letter-spacing: 0; color: #FFC9B5; }
.menu__foot { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; font-size: 16px; }
.menu__mail, .menu__mail:hover { font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(28px,3vw,44px); color: #F3EEE4; }
.socials { display: flex; gap: 24px; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; }
.hero__inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 6vh; }
.hero__line { overflow: hidden; padding: 0.04em 1vw 0; }
.word { margin: 0; display: flex; font-size: clamp(68px,13vw,260px); font-weight: 300; letter-spacing: -0.05em; line-height: 0.92; color: #F3EEE4; white-space: nowrap; }
.word > span { display: inline-block; transform: translateY(110%); font-variation-settings: 'wght' 300; }
.word > .s { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: #FF5A1F; padding: 0 0.04em; font-variation-settings: normal; }
.no-js .word > span { transform: none; }
.hero__refl {
  overflow: hidden; padding: 0 1vw 0.04em; margin-top: -0.01em;
  transform: scaleY(-1); opacity: 0.42; filter: url(#ts-ripple); pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 35%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 35%, #000 100%);
}
.hero__foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 clamp(20px,3vw,40px) clamp(24px,4vh,40px); display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 20px 32px; align-items: end; }
.hero__intro { max-width: 380px; font-size: 17px; line-height: 1.45; color: #F3EEE4; text-wrap: pretty; }
.hero__scroll { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; color: #F3EEE4; }
.hero__scroll::after { content: ''; width: 1px; height: 48px; background: #F3EEE4; opacity: 0.6; }
.hero__tag { justify-self: end; text-align: right; font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(26px,2.6vw,40px); line-height: 1.05; color: #F3EEE4; transition-delay: 120ms; }

/* ---------- Approach / manifesto ---------- */
.manifesto { position: relative; height: 260vh; background: #F3EEE4; color: #0B0D3A; }
.manifesto__in { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(20px,5vw,80px); gap: 40px; }
.manifesto__text { max-width: 1320px; font-size: clamp(34px,4.9vw,84px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; }
.wd { display: inline-block; margin-right: 0.24em; opacity: 0.12; font-weight: 500; letter-spacing: -0.035em; color: #0B0D3A; }
.wd.wd--it { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: #1534FF; }
.no-js .wd { opacity: 1; }

/* ---------- Selected work ---------- */
.work { position: relative; background: #0B0D3A; }
.work__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.track { display: flex; flex-direction: row; align-items: center; gap: clamp(48px,6vw,120px); padding: 0 8vw 0 6vw; will-change: transform; }
.work__intro { flex: none; width: min(34vw,520px); display: flex; flex-direction: column; gap: 28px; }
.work__title { font-size: clamp(64px,9vw,168px); font-weight: 600; letter-spacing: -0.055em; line-height: 0.88; }
.work__title em { letter-spacing: -0.02em; color: #FF5A1F; }
.work__lead { max-width: 340px; font-size: 17px; line-height: 1.45; color: #C9C4E6; text-wrap: pretty; }
.work__hint { display: flex; align-items: center; gap: 14px; font-size: 14px; color: #F3EEE4; }
.work__hint em { font-size: 28px; }
.work__hint .touch { display: none; }

.proj { flex: none; width: min(60vw,1080px); display: flex; flex-direction: column; gap: 22px; }
.panel { position: relative; height: 62vh; border-radius: 20px; overflow: hidden; background: var(--bg); cursor: pointer; }
.panel__art { position: absolute; inset: -8%; will-change: transform; }
.panel__image { width: 100%; min-height: 100%; object-fit: cover; }
.blob { position: absolute; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, var(--c) 0%, var(--c) 30%, transparent 70%); filter: blur(24px); }
.glyphs { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Instrument Serif', serif; font-style: italic; font-size: min(56vh,46vw); line-height: 1; color: var(--glyph); }
.glyphs > span { display: inline-block; transform: translateX(0.06em); }
.glyphs > span + span { transform: scaleX(-1) translateX(0.06em); }
.panel__axis { position: absolute; left: 50%; top: 12%; bottom: 12%; width: 1px; background: var(--glyph); opacity: 0.5; }
.panel__meta { position: absolute; left: 0; right: 0; top: 0; padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink); pointer-events: none; }
.pill { font-size: 13px; font-weight: 500; padding: 7px 12px; border: 1px solid var(--ink); border-radius: 999px; }
.panel__year { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 24px; }
.proj__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.proj__cap-l { display: flex; align-items: baseline; gap: 18px; min-width: 0; }
.proj__num { font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(28px,2.4vw,40px); color: #FF5A1F; }
.proj__name { font-size: clamp(30px,3.6vw,62px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.proj__tags { font-size: 15px; color: #C9C4E6; }

.work__end { flex: none; width: min(34vw,520px); display: flex; flex-direction: column; gap: 24px; }
.work__end-title { font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(40px,4.6vw,80px); line-height: 1; letter-spacing: -0.02em; }
.btn-pill, .btn-pill:hover { display: inline-flex; align-self: flex-start; align-items: center; gap: 12px; height: 56px; padding: 0 26px; border-radius: 999px; background: #F3EEE4; color: #0B0D3A; font-size: 16px; font-weight: 600; transition: background 200ms; }
.btn-pill:hover { background: #FF5A1F; }

/* ---------- Marquee band ---------- */
.band-wrap { position: relative; background: #0B0D3A; overflow: hidden; padding: clamp(40px,6vw,96px) 0; }
.band { background: #FF5A1F; color: #0B0D3A; transform: rotate(-2.5deg) scale(1.06); padding: clamp(14px,1.6vw,24px) 0; overflow: hidden; }
.marquee { display: flex; width: max-content; will-change: transform; }
.mgroup { display: flex; align-items: center; gap: clamp(24px,3vw,48px); padding-right: clamp(24px,3vw,48px); font-size: clamp(36px,5vw,84px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; }
.mgroup em { letter-spacing: -0.01em; }
.dot { width: 0.28em; height: 0.28em; border-radius: 50%; background: #0B0D3A; }

/* ---------- About ---------- */
.about { position: relative; background: #1534FF; color: #F3EEE4; }
.about__in { max-width: 1560px; margin: 0 auto; padding: clamp(80px,11vw,180px) clamp(20px,5vw,80px); display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); gap: clamp(48px,6vw,120px); align-items: start; }
.about__portrait { position: sticky; top: 120px; }
.portrait { position: relative; aspect-ratio: 4/5; width: 100%; max-width: 540px; border-radius: 999px 999px 28px 28px; overflow: hidden; background: #0F2BD9; }
.about__col { display: flex; flex-direction: column; gap: clamp(48px,6vw,96px); }
.about__head { display: flex; flex-direction: column; gap: 32px; }
.about__stmt { font-size: clamp(30px,3.4vw,58px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.06; text-wrap: pretty; }
.about__stmt em { letter-spacing: -0.01em; }
.count-row { display: flex; align-items: flex-end; gap: clamp(16px,2vw,32px); flex-wrap: wrap; }
.count { display: flex; align-items: flex-start; font-size: clamp(140px,20vw,340px); font-weight: 700; letter-spacing: -0.07em; line-height: 0.78; font-variant-numeric: tabular-nums; }
.count em { font-size: 0.5em; color: #FF5A1F; letter-spacing: 0; }
.count-cap { font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(26px,2.4vw,40px); line-height: 1.05; padding-bottom: 0.2em; }
.principles { display: flex; flex-direction: column; }
.principle { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 8px 20px; padding: 26px 0; border-top: 1px solid rgba(243,238,228,0.35); }
.principle__num { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 28px; line-height: 1; color: #FFC9B5; }
.principle__body { display: flex; flex-direction: column; gap: 8px; }
.principle__title { font-size: clamp(22px,1.8vw,28px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.principle__text { font-size: 17px; line-height: 1.45; color: #DCE0FF; }

/* ---------- Expertise ---------- */
.exp { position: relative; background: #F3EEE4; color: #0B0D3A; }
.exp__in { max-width: 1560px; margin: 0 auto; padding: clamp(80px,11vw,180px) clamp(20px,5vw,80px); display: flex; flex-direction: column; gap: clamp(48px,6vw,96px); }
.exp__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.exp__title { font-size: clamp(56px,8vw,150px); font-weight: 600; letter-spacing: -0.055em; line-height: 0.9; }
.exp__title em { letter-spacing: -0.02em; color: #1534FF; }
.exp__lead { max-width: 360px; font-size: 17px; line-height: 1.45; color: #3A3C66; text-wrap: pretty; }
.exp__list { display: flex; flex-direction: column; border-bottom: 1.5px solid #0B0D3A; }
.row { position: relative; overflow: hidden; border-top: 1.5px solid #0B0D3A; }
.row__fill { position: absolute; inset: 0; background: #FF5A1F; clip-path: inset(0 100% 0 0); transition: clip-path 700ms cubic-bezier(0.7,0,0.2,1); }
.row__grid { position: relative; display: grid; grid-template-columns: clamp(48px,6vw,96px) minmax(0,1fr) minmax(0,300px); align-items: center; gap: 12px clamp(16px,3vw,48px); padding: clamp(22px,2.6vw,40px) clamp(0px,1vw,16px); }
.row__num { font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(24px,2.2vw,36px); line-height: 1; }
.row__title { display: block; overflow: hidden; height: 1.08em; font-size: clamp(34px,5vw,124px); line-height: 1.08; margin: 0; font-weight: inherit; }
.row__roll { display: block; transform: translateY(0%); transition: transform 700ms cubic-bezier(0.7,0,0.2,1); }
.row__roll > span { display: block; height: 1.08em; white-space: nowrap; }
.row__a { font-weight: 600; letter-spacing: -0.05em; }
.row__b { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.row__desc { font-size: 17px; line-height: 1.45; max-width: 340px; opacity: 0; transform: translateX(-24px); transition: opacity 500ms cubic-bezier(0.2,0,0,1), transform 700ms cubic-bezier(0.2,0,0,1); text-wrap: pretty; }
.row.is-active .row__fill { clip-path: inset(0 0 0 0); }
.row.is-active .row__roll { transform: translateY(-50%); }
.row.is-active .row__desc { opacity: 1; transform: translateX(0px); }

/* ---------- Contact ---------- */
.contact { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; padding: clamp(120px,14vw,200px) clamp(20px,5vw,80px) 32px; }
.contact__top { display: flex; flex-direction: column; gap: clamp(40px,5vw,72px); }
.contact__title { font-size: clamp(56px,9.4vw,180px); font-weight: 600; letter-spacing: -0.055em; line-height: 0.9; }
.contact__title em { letter-spacing: -0.02em; color: #FF5A1F; }
.contact__row { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.contact__mail { font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(34px,4.6vw,84px); line-height: 1; color: #F3EEE4; border-bottom: 2px solid rgba(243,238,228,0.4); padding-bottom: 8px; transition: color 200ms, border-color 200ms; }
.contact__mail:hover { color: #FF5A1F; border-color: #FF5A1F; }
.circle-btn, .circle-btn:hover { flex: none; width: clamp(150px,14vw,210px); height: clamp(150px,14vw,210px); border-radius: 50%; background: #F3EEE4; color: #0B0D3A; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; transition: background 300ms; }
.circle-btn:hover { background: #FF5A1F; }
.footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(243,238,228,0.3); font-size: 15px; }
.footer .socials { flex-wrap: wrap; }
.copy { color: #C9C4E6; }

/* ---------- Case study overlay ---------- */
.case { position: fixed; inset: 0; z-index: 170; background: #0B0D3A; color: #F3EEE4; overflow-y: auto; overscroll-behavior: contain; transition: clip-path 850ms cubic-bezier(0.7,0,0.2,1); }
.case[hidden] { display: none; }
.case__close { position: fixed; top: 18px; right: clamp(20px,3vw,40px); z-index: 5; height: 56px; padding: 0 24px; border-radius: 999px; background: #F3EEE4; color: #0B0D3A; font-size: 15px; font-weight: 600; transition: background 200ms; }
.case__close:hover { background: #FF5A1F; }
.case__hero { position: relative; height: 88vh; min-height: 520px; overflow: hidden; background: var(--bg); }
.case__hero .blob { filter: blur(30px); }
.case__hero .glyphs { font-size: min(80vh,60vw); }
.case__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case__hero-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px,4vw,56px); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; color: var(--ink); }
.case__name { font-size: clamp(56px,10vw,190px); font-weight: 600; letter-spacing: -0.055em; line-height: 0.88; }
.case__idx { font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(24px,2.4vw,40px); }
.case__body { max-width: 1560px; margin: 0 auto; padding: clamp(56px,8vw,120px) clamp(20px,5vw,80px); display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); gap: 48px clamp(40px,6vw,120px); }
.case__lede { font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(32px,3.6vw,60px); line-height: 1.05; letter-spacing: -0.01em; text-wrap: pretty; }
.case__info { display: flex; flex-direction: column; gap: 32px; }
.case__meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; border-top: 1px solid rgba(243,238,228,0.3); padding-top: 20px; }
.case__meta > div { display: flex; flex-direction: column; gap: 6px; }
.case__k { font-size: 13px; color: #C9C4E6; }
.case__v { font-size: 17px; font-weight: 500; }
.case__p { font-size: 18px; line-height: 1.55; color: #DCDAF0; text-wrap: pretty; }
.case__gallery { padding: 0 clamp(20px,5vw,80px); max-width: 1720px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(16px,2vw,28px); }
.case__pair { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(16px,2vw,28px); }
.case__img { position: relative; aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; background: #151850; }
.case__img--wide { aspect-ratio: 16/8; }
.case__next { display: block; width: 100%; text-align: left; margin-top: clamp(56px,8vw,120px); padding: clamp(48px,7vw,110px) clamp(20px,5vw,80px); background: var(--nbg); color: var(--nink); }
.case__next-k { display: block; font-family: 'Instrument Serif', serif; font-style: italic; font-size: clamp(24px,2.2vw,36px); }
.case__next-v { display: block; font-size: clamp(56px,10vw,190px); font-weight: 600; letter-spacing: -0.055em; line-height: 0.9; }

/* ---------- Responsive ---------- */
@media (max-width: 1099.98px) {
  .row__grid { grid-template-columns: 44px minmax(0,1fr); }
  .row__desc { grid-column: 2 / -1; opacity: 1; transform: translateX(0px); }
}
@media (max-width: 859.98px) {
  .hdr__tag { display: none; }
  .hero__foot { grid-template-columns: minmax(0,1fr); }
  .hero__scroll { display: none; }
  .hero__tag { justify-self: start; text-align: left; }
  .work__sticky { position: relative; height: auto; }
  .track { flex-direction: column; align-items: stretch; padding: 96px 20px 64px; }
  .work__intro, .work__end, .proj { width: 100%; }
  .work__hint .fine { display: none; }
  .work__hint .touch { display: inline; }
  .about__in { grid-template-columns: minmax(0,1fr); }
  .about__portrait { position: relative; top: auto; }
  .case__body { grid-template-columns: minmax(0,1fr); }
  .case__pair { grid-template-columns: minmax(0,1fr); }
}