/* SOUND FRAME — WORK page + Case / Artwork / Viewer overlays
   Section rhythm (symmetric vertical gutters): Hero → local nav → WEB (ink) → RELEASE ARTWORK (ivory) → SNS DESIGN ARTWORK (charcoal) → DESIGN KITS (ivory) → closing image → footer */
/* ---------------- hero (type left, image right, vertically centred; local nav stays in the first viewport) ---------------- */
.wk-intro { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; padding: var(--section-space-sm) var(--gutter) var(--section-space-md); }
.wk-intro h1 { font-weight: 300; font-size: clamp(28px, 3.5vw, 54px); line-height: 1.16; letter-spacing: -.03em; }
.wk-intro h1 span { display: block; }
.wk-intro h1 span:nth-child(2) { padding-left: clamp(0px, 4vw, 64px); }
.wk-intro h1 span:nth-child(3) { padding-left: clamp(0px, 1.6vw, 24px); color: var(--muted); }
.wk-intro__pic img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%; background: var(--graphite); }
@media (min-width: 900px) {
.wk-intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.wk-intro__pic img { aspect-ratio: 16 / 9; max-height: calc(100svh - var(--hdr) - var(--lnav) - 64px); }
}
/* ---------------- sections ---------------- */
.wk-sec { padding: var(--sec-v) 0; }
#web { padding-top: var(--section-space-md); }
.wk-lab { padding-inline: var(--gutter); margin-bottom: clamp(24px, 3.4vw, 48px); }
.wk-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-inline: var(--gutter); margin-bottom: clamp(20px, 3vw, 40px); }
.wk-sec--ivory { background: var(--ivory); color: var(--ink); }
.wk-sec--ivory .wk-lab, .wk-sec--ivory .meta, .wk-sec--ivory .label { color: var(--muted-dark); }
.wk-sec--dark { background: var(--charcoal); }
/* ---------------- web experiences: ONE compact stage + rail directly under it (selection changes the stage in place; no re-scroll) ---------------- */
.fs { padding-inline: var(--gutter); display: grid; gap: clamp(20px, 3vw, 48px); align-items: center; }
.fs__dev { cursor: pointer; min-width: 0; }
.fs__dev .dev--desk { width: 78%; }
.fs__dev .dev__scr img { transition: opacity .3s ease; }
.fs__dev.is-swap .dev__scr img { opacity: 0; }
.fs__meta { min-width: 0; transition: opacity .3s; }
.ln { display: block; }
.fs__meta .meta { margin: 0 0 8px; }
.fs__meta h3 { margin: 0; font-weight: 300; font-size: clamp(26px, 3vw, 46px); line-height: 1.1; letter-spacing: -.03em; }
.fs__d { margin-top: 14px; max-width: none; font-size: clamp(14px, 1.08vw, 16px); line-height: 1.75; color: rgba(244, 239, 231, .84); }
.fs__d:empty { display: none; }
.fs__links { margin-top: clamp(14px, 1.8vw, 22px); display: flex; gap: 6px 26px; flex-wrap: wrap; }
.fs__links .lnk { color: var(--ivory); }
.fs__links .lnk::after { right: 0; opacity: .38; transition: opacity .3s; }
.fs__links .lnk:hover::after, .fs__links .lnk:focus-visible::after { opacity: 1; }
.fs.is-swap .fs__meta { opacity: 0; }
@media (min-width: 900px) {
.fs { grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr); column-gap: clamp(40px, 5.2vw, 100px); }
.fs__dev { max-width: max(440px, calc((100svh - 430px) * 1.82)); }
}
.rail-wrap { margin-top: clamp(28px, 3.4vw, 48px); }
.rail { display: flex; gap: clamp(10px, 1.2vw, 16px); overflow-x: auto; padding: 8px var(--gutter) 18px; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); cursor: grab; }
.rail::-webkit-scrollbar { display: none; }
.rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.rail.is-drag button { pointer-events: none; }
.rail > li, .rail__grp ul > li { flex: 0 0 clamp(150px, 15vw, 224px); scroll-snap-align: start; }
.rail__b { display: block; width: 100%; text-align: left; opacity: .55; transition: opacity .25s; position: relative; }
.rail__b img { width: 100%; aspect-ratio: 1425 / 891; object-fit: cover; object-position: top; background: var(--graphite); -webkit-user-drag: none; }
.rail__t { display: block; margin-top: 10px; }
.rail__t strong { display: block; font-size: 13px; font-weight: 500; letter-spacing: -.005em; }
.rail__t em { display: block; margin-top: 2px; font-style: normal; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rail__b::after { content: ""; position: absolute; left: 0; right: 0; top: calc(clamp(150px, 15vw, 224px) * .625 + 4px); height: 1px; background: var(--ivory); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.rail__b:hover, .rail__b:focus-visible, .rail__b[aria-pressed="true"] { opacity: 1; }
.rail__b[aria-pressed="true"]::after { transform: scaleX(1); }
.rail__grp { flex: none; scroll-snap-align: start; border-left: 1px solid var(--line); padding-left: clamp(10px, 1.2vw, 16px); }
.rail__grp ul { display: flex; gap: clamp(10px, 1.2vw, 16px); }
.rail__gcap { margin-top: 10px; }
/* ---------------- release artwork: featured 4 × 2 + archive rail ---------------- */
.aw { padding-inline: var(--gutter); }
.aw__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 36px) clamp(10px, 1.4vw, 20px); }
.aw__b { display: block; width: 100%; text-align: left; }
.aw__b img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #e2dcd1; transition: transform .6s var(--ease); }
.aw__f { overflow: hidden; display: block; }
@media (hover: hover) {
.aw__b:hover img { transform: scale(1.035); }
}
.aw__t { display: block; margin-top: 12px; }
.aw__t strong { display: block; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.aw__t em { display: block; margin-top: 3px; font-style: normal; font-size: 14px; color: var(--muted-dark); }
.aw__t small { display: block; margin-top: 4px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-dark); }
.aw__arch { margin-top: clamp(56px, 7vw, 104px); }
.aw__ah { margin-bottom: 22px; }
.aw__rail { display: flex; gap: clamp(10px, 1.2vw, 16px); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; cursor: grab; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; }
.aw__rail::-webkit-scrollbar { display: none; }
.aw__rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.aw__rail.is-drag button { pointer-events: none; }
.aw__rail > li { flex: 0 0 clamp(150px, 17vw, 240px); scroll-snap-align: start; }
@media (min-width: 900px) {
.aw__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aw__grid > li:nth-child(4n + 2), .aw__grid > li:nth-child(4n + 4) { margin-top: clamp(28px, 4vw, 64px); }
}
/* ---------------- SNS design artwork: horizontal slider (scroll-snap, controls, partial next card, progress) ---------------- */
.sa { min-width: 0; }
.sa__track { display: flex; gap: clamp(14px, 1.8vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 16px var(--gutter) 28px; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; cursor: grab; }
.sa__track::-webkit-scrollbar { display: none; }
.sa__track:focus-visible { outline-offset: -2px; }
.sa__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.sa__track.is-drag button { pointer-events: none; }
.sa__c { flex: 0 0 clamp(228px, 25vw, 360px); scroll-snap-align: start; }
.sa__b { display: block; width: 100%; text-align: left; transition: transform .6s var(--ease); }
.sa__f { display: block; overflow: hidden; background: var(--graphite); transition: box-shadow .6s var(--ease); }
.sa__f img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (hover: hover) {
.sa__b:hover { transform: translateY(-4px) scale(1.03); }
.sa__b:hover .sa__f { box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .9); }
}
.sa__t { display: block; margin-top: 14px; }
.sa__t strong { display: block; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.sa__t em { display: block; margin-top: 2px; font-style: normal; font-size: 14px; color: rgba(244, 239, 231, .86); }
@media (max-width: 640px) {
.sa__c { flex-basis: 64%; }
}
/* ---------------- design kits (paper ivory): hierarchy = lead image → supporting → info → concept previews ---------------- */
#design-kits .kit { padding-bottom: var(--section-space-lg); }
#design-kits { padding-bottom: var(--section-space-lg); }
#design-kits .kit:last-child { padding-bottom: 0; }
.kit__t { font-size: clamp(22px, 2vw, 30px); font-weight: 400; letter-spacing: -.02em; }
.kit__l { margin-top: 14px; max-width: 34ch; font-size: 15px; line-height: 1.75; color: rgba(244, 239, 231, .82); }
@media (min-width: 900px) {
.kit--rev { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.kit--rev .recv__side { order: 2; }
/* Release kit mirrors the SNS kit: text column at one end, visuals pushed to the opposite end (same column tokens and gap) */
.kit:not(.kit--rev) .proof--kit { margin-left: auto; }
}
.wk-sec--ivory .kit__t, .wk-sec--ivory .recv__side h2 { color: var(--ink); }
.wk-sec--ivory .kit__l { color: #3f3a33; }
.wk-sec--ivory .recv__tabs { border-top-color: rgba(8, 8, 8, .22); }
.wk-sec--ivory .recv__tabs button { color: var(--muted-dark); border-bottom-color: rgba(8, 8, 8, .22); }
.wk-sec--ivory .recv__tabs button:hover, .wk-sec--ivory .recv__tabs button:focus-visible { color: var(--ink); border-bottom-color: rgba(8, 8, 8, .5); }
.wk-sec--ivory .recv__tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); box-shadow: none; }
.wk-sec--ivory .recv__tabs button[aria-selected="true"]::after { color: var(--muted-dark); }
.wk-sec--ivory .recv__hint { color: var(--muted-dark); }
.wk-sec--ivory .spec { border-top-color: rgba(8, 8, 8, .25); }
.wk-sec--ivory .spec dt { color: var(--muted-dark); }
.wk-sec--ivory .spec dd { color: var(--ink); }
.wk-sec--ivory .spec > div { border-bottom-color: rgba(8, 8, 8, .18); }
.wk-sec--ivory .addon { border-top-color: rgba(8, 8, 8, .25); }
.wk-sec--ivory .addon .meta { color: var(--ink); }
.wk-sec--ivory .addon .meta span { color: var(--muted-dark); }
.wk-sec--ivory .pf img, .wk-sec--ivory .addon__row img { background: #e2dcd1; }
/* concept previews live inside each artist's panel — clearly separate from the final deliverables above */
.cp__b { display: block; width: 100%; text-align: left; }
.cp__f { display: block; overflow: hidden; background: var(--graphite); }
.cp__f img { width: 100%; height: auto; transition: transform .6s var(--ease); }
@media (hover: hover) {
.cp__b:hover .cp__f img { transform: scale(1.03); }
}
.wk-sec--ivory .cp__f { background: #e2dcd1; }
/* ---------------- closing: full-bleed image, one sentence, no CTA, directly above the footer ---------------- */
.wk-closing { position: relative; isolation: isolate; min-height: clamp(380px, 50vw, 680px); display: grid; place-items: center; text-align: center; overflow: hidden; background: var(--ink); }
.wk-closing__pic { position: absolute; inset: 0; z-index: -2; }
.wk-closing__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; background: var(--graphite); }
.wk-closing::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, rgba(8, 8, 8, .74) 0, rgba(8, 8, 8, .52) 55%, rgba(8, 8, 8, .68) 100%); }
.wk-closing__t { padding: var(--sec-v) var(--gutter); max-width: 1500px; font-weight: 300; font-size: clamp(24px, 3.2vw, 50px); line-height: 1.26; letter-spacing: -.03em; }
.wk-closing__t span { display: inline-block; }
@media (max-width: 520px) {
.wk-closing { min-height: clamp(340px, 96vw, 460px); }
.wk-closing__pic img { object-position: 60% 50%; }
}
/* ---------------- overlays ---------------- */
/* ---- shared phone shell (case overlay) ---- */
/* ---- artwork overlay: visual identity file ---- */
.ao { padding: clamp(8px, 2vw, 24px) var(--gutter) clamp(48px, 6vw, 96px); }
.ao__top { display: grid; gap: clamp(24px, 3vw, 40px); }
.ao__img img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--graphite); }
.ao__meta h2 { font-weight: 300; font-size: clamp(30px, 4.4vw, 72px); line-height: 1.08; letter-spacing: -.03em; margin-top: 14px; }
.ao__meta dl { margin: clamp(22px, 3vw, 40px) 0 0; display: grid; max-width: 440px; }
.ao__meta dl div { display: grid; grid-template-columns: 110px 1fr; padding: 12px 0; border-top: 1px solid var(--line); }
.ao__meta dl div:last-child { border-bottom: 1px solid var(--line); }
.ao__meta dt { font-size: 11px; letter-spacing: .2em; color: var(--muted); padding-top: 2px; }
.ao__meta dd { margin: 0; font-size: 15px; }
.ao__meta p.d { margin-top: 18px; max-width: 46ch; font-size: 15px; line-height: 1.75; color: rgba(244, 239, 231, .82); }
.ao__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 24px; }
.ao__strip { margin-top: clamp(32px, 4vw, 64px); display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; cursor: grab; padding-bottom: 8px; }
.ao__strip::-webkit-scrollbar { display: none; }
.ao__strip.is-drag { cursor: grabbing; }
.ao__strip.is-drag button { pointer-events: none; }
.ao__strip li { flex: 0 0 clamp(64px, 8vw, 96px); }
.ao__strip button { display: block; width: 100%; opacity: .45; position: relative; transition: opacity .25s; }
.ao__strip button[aria-current="true"], .ao__strip button:hover, .ao__strip button:focus-visible { opacity: 1; }
.ao__strip button[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--ivory); }
.ao__strip img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--graphite); -webkit-user-drag: none; }
.ao__mods { margin-top: clamp(48px, 6vw, 96px); display: grid; gap: clamp(20px, 3vw, 40px); border-top: 1px solid var(--line); padding-top: clamp(28px, 3vw, 48px); }
.ao__mod .meta { margin-bottom: 14px; }
.ao__mod img { width: 100%; height: auto; background: var(--graphite); }
@media (min-width: 900px) {
.ao__top { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 72px); align-items: end; }
.ao__img img { max-height: min(calc(100vh - 330px), 860px); width: auto; max-width: 100%; }
.ao__mods { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
/* viewers (SNS + Concept) */
.vw { padding: clamp(8px, 2vw, 24px) var(--gutter) clamp(48px, 6vw, 96px); }
.vw__top { display: grid; gap: clamp(24px, 3vw, 40px); }
.vw__img { margin: 0; }
.vw__img img { width: 100%; height: auto; background: var(--graphite); }
.vw__img figcaption { margin-top: 12px; }
.vw__meta h2 { font-weight: 300; font-size: clamp(30px, 4vw, 64px); line-height: 1.1; letter-spacing: -.03em; margin-top: 14px; }
.vw__meta dl { margin: clamp(20px, 2.6vw, 36px) 0 0; max-width: 440px; }
.vw__meta dl div { display: grid; grid-template-columns: 120px 1fr; padding: 12px 0; border-top: 1px solid var(--line); }
.vw__meta dl div:last-child { border-bottom: 1px solid var(--line); }
.vw__meta dt { font-size: 11px; letter-spacing: .2em; color: var(--muted); padding-top: 2px; }
.vw__meta dd { margin: 0; font-size: 15px; }
.vw__strip { margin-top: clamp(20px, 2.6vw, 32px); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; }
.vw__strip::-webkit-scrollbar { display: none; }
.vw__strip li { flex: 0 0 clamp(54px, 6vw, 72px); }
.vw__strip button { display: block; width: 100%; opacity: .45; position: relative; transition: opacity .25s; }
.vw__strip button img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--graphite); }
.vw__strip button[aria-current="true"], .vw__strip button:hover, .vw__strip button:focus-visible { opacity: 1; }
.vw__strip button[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--ivory); }
.vw__strip button.is-final img { outline: 1px solid var(--line); outline-offset: -1px; }
.vw__ctl { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ao__ctl .vw__txt:first-child, .vw__ctl .vw__txt:first-child { margin-left: -6px; }
.vw__txt { font-size: 11px; letter-spacing: .18em; padding: 12px 6px; color: var(--muted); transition: color .25s; }
.vw__txt:hover, .vw__txt:focus-visible { color: var(--ivory); }
.vw__add { margin-top: clamp(40px, 5vw, 80px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); }
.vw__addn { margin-top: 8px; max-width: 56ch; font-size: 13.5px; line-height: 1.7; color: rgba(244, 239, 231, .84); }
.vw__stories { margin-top: 24px; display: flex; gap: clamp(12px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 12px; overscroll-behavior-x: contain; }
.vw__stories::-webkit-scrollbar { display: none; }
/* Story Design examples are viewed like Release Artwork slides: large, original 9:16 kept (width follows the capped height; never stretched or cropped) */
.vw__stories img { flex: none; scroll-snap-align: start; width: min(86vw, calc(min(76svh, 780px) * .5625)); height: auto; aspect-ratio: 1080 / 1920; background: var(--graphite); }
@media (min-width: 900px) {
.vw__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
.vw__img img { max-height: calc(100vh - 150px); width: auto; max-width: 100%; }
.vw__img--po img { max-height: calc(100vh - 200px); }
}
@media (max-width: 899px) {
.vw__img--po img { max-height: 76svh; width: auto; margin-inline: auto; }
}
/* artwork modal: concept exploration — always expanded (no accordion, no extra click) */
.ao__cx { margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); }
.ao__cxh { display: grid; gap: 6px; margin-bottom: clamp(16px, 2vw, 24px); }
.ao__cxh .meta { color: var(--ivory); letter-spacing: .2em; }
.ao__cxn span { display: block; }
.ao__cxn { max-width: 80ch; font-size: 11.5px; line-height: 1.7; letter-spacing: .08em; color: var(--muted); }
.ao__cxl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 24px); }
.ao__cxl--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ao__cxl--1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.ao__cxl figure { margin: 0; }
.ao__cxl img { width: 100%; height: auto; object-fit: contain; background: var(--graphite); }
.ao__cxl figcaption { margin-top: 8px; }
@media (max-width: 599px) {
.ao__cxl, .ao__cxl--2 { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
}

/* ---------------- editorial transitions (type only: no card, border or decorative image; spacing uses the shared section tokens) ---------------- */
.wk-tr { padding: var(--section-space-sm) var(--gutter) calc(var(--section-space-sm) * 1.25); min-height: clamp(220px, 32vh, 380px); display: flex; align-items: center; background: var(--ink, #080808); }
.wk-tr__in { width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.wk-tr__in > * { grid-column: 1 / -1; }
.wk-tr__t { font-size: clamp(30px, 4.4vw, 68px); font-weight: 300; line-height: 1.12; letter-spacing: -.03em; color: var(--ivory); }
.wk-tr__t span { display: block; }
.wk-tr__t span:nth-child(2) { color: var(--muted); }   /* same two-tone hierarchy as the HOME statement */
.wk-tr__s { margin-top: clamp(14px, 1.6vw, 24px); font-size: clamp(14px, 1.1vw, 16px); line-height: 1.7; color: var(--ivory-soft); }
.wk-tr__m { display: block; margin-top: clamp(20px, 2.4vw, 36px); }
.wk-tr__m { width: 40px; height: 2px; background: var(--sf-signal); }
@media (min-width: 900px) {
/* block flush with the right edge of the content grid (same gutter as the Design Kits below); every line, the sub copy and the blue line share that edge */
.wk-tr--b .wk-tr__in > * { text-align: right; }
.wk-tr--b .wk-tr__m { margin-left: auto; }
}

/* Design Kits use the HOME Visual System gallery (concept previews / story examples inside the image area); ivory-section colours */
.wk-sec--ivory .kit2__l, .wk-sec--ivory .proof--sns2 .sk__sl { color: var(--muted-dark); }
.wk-sec--ivory .proof--sns2 .sk__sl span { color: var(--ink); }
.wk-sec--ivory .proof--kit2 .pf, .wk-sec--ivory .proof--sns2 .pf { background: #e2dcd1; }

/* ---------------- Patch 04: colour hierarchy ---------------- */
.wk-tr__t span:nth-child(1) { color: var(--text-primary-white); }   /* White → Gray → Off-white */
.wk-tr__t span:nth-child(2) { color: var(--muted); }
.wk-tr__s { color: var(--ivory); }                                    /* size/weight unchanged, stays smaller than the 2nd English line */
.fs__meta h3, .ao__meta h2, .vw__meta h2 { color: var(--text-primary-white); }   /* top-level info titles on black */

/* ---------------- Patch 05: WORK hero reads White → Gray → Off-white (left aligned, copy unchanged) ---------------- */
.wk-intro h1 span:nth-child(1) { color: var(--text-primary-white); }
.wk-intro h1 span:nth-child(2) { color: var(--muted); }
.wk-intro h1 span:nth-child(3) { color: var(--ivory); }

/* ---------------- Patch 05: Release / SNS modals — info block shares the image's top line, one width on tablet/mobile ---------------- */
@media (min-width: 900px) { .ao__top, .vw__top { align-items: start; } }
@media (max-width: 899px) { .ao__meta dl, .vw__meta dl, .ao__meta p.d { max-width: none; } }
.vw__addn { max-width: none; }

/* ---------------- Patch 05: DESIGN KITS — both info columns share one wider track; the sub line is not capped by ch ---------------- */
.kit__l { max-width: none; text-wrap: pretty; }
@media (min-width: 900px) {
  #design-kits .kit { grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr); }
  #design-kits .kit--rev { grid-template-columns: minmax(0, 6.8fr) minmax(0, 5.2fr); }
  #design-kits .kit__l { padding-right: clamp(0px, 1.6vw, 28px); }
}
/* tablet / mobile: image and info block share one width (the thumb strip no longer widens the grid track; portrait images are not height-capped narrower than the info) */
.ao__top, .vw__top { grid-template-columns: minmax(0, 1fr); }
.ao__top > *, .vw__top > * { min-width: 0; }
@media (max-width: 899px) { .vw__img--po img { max-height: none; width: 100%; margin-inline: 0; } }
@media (min-width: 900px) { .ao__top { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .vw__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
/* Patch 05: gallery-to-gallery boundary (Release Artwork → SNS Design Artwork) ~10% more; Editorial Transition paddings are untouched */
#release-artwork { padding-bottom: calc(var(--sec-v) * 1.1); }
#sns-design-artwork { padding-top: calc(var(--sec-v) * 1.1); }

/* ---------------- Patch 06 ---------------- */
/* WORK Web Experiences list: image column untouched; only the info block sits further right on the content grid, with clear air to the image */
@media (min-width: 900px) {
  .fs__meta { padding-left: clamp(16px, 3.2vw, 80px); }
  .fs__d { max-width: none; }
}
/* Release Artwork modal: wider right detail column, description on one line on desktop (images/gallery untouched) */
@media (min-width: 900px) {
  .ao__top { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .ao__meta dl { max-width: 560px; }
  .ao__meta p.d { max-width: none; }
}
@media (min-width: 1200px) { .ao__meta p.d { white-space: nowrap; } }
/* Editorial Transition 01/02: real adjacent-section gap — top (previous content → headline) equals bottom (marker → next content) */
.wk-tr { padding-bottom: var(--section-space-sm); }

/* ---------------- Patch 07 ---------------- */
/* Release modal: no forced nowrap — text wraps inside the info column; dividers (dl rows) and description share the column's full width */
@media (min-width: 1200px) { .ao__meta p.d { white-space: normal; } }
.ao__meta { min-width: 0; }
.ao__meta dl, .ao__meta p.d { max-width: none; width: 100%; }
.ao__meta p.d, .ao__meta dd, .ao__meta h2 { word-break: keep-all; overflow-wrap: anywhere; }
/* Patch 07: artist rail under PREV/NEXT ARTIST — thumbs are 4:5 feed covers, comfortable touch size */
.vw__artists { margin-top: 20px; }
.vw__artists img { aspect-ratio: 4 / 5; }
@media (max-width: 899px) { .vw__artists li { flex-basis: clamp(64px, 17vw, 84px); } }
/* Editorial Transition 01/02: same outer breathing as the HOME statement (measured: HOME gaps ≈ 363/349 @1920, 309/294 @1440, 232/215 @1024, 204/186 @390); symmetric top/bottom */
.wk-tr { padding-top: calc(var(--section-space-sm) + var(--sec-v) * .62); padding-bottom: calc(var(--section-space-sm) + var(--sec-v) * .62); }

/* Patch 10: first local-nav target (WEB EXPERIENCES) — 20px of air above it so the anchor jump lands with the local nav already stuck, exactly like the other sections */
#web { margin-top: 20px; }