/* =========================================================
   IO Portfolio — shared styles
   Values come from Figma file WaMO8ZmueTtRgINBCQCapp, page "포폴 io" (node 2087:7835).
   Variable names follow the Figma variable / text style names where they exist.
   ========================================================= */

:root {
  /* ---- Figma color variables ---- */
  --io-white: #ffffff;
  --io-gray: #8a8a93;
  --io-black: #000000;

  /* ---- Nav button colors (Header(고정)) ---- */
  --nav-archive: var(--io-red);
  --nav-conformity: #32ce57;
  --nav-bcpatch: #e8e232;
  --nav-bruisetrace: #377beb;
  --nav-about: #000000;

  /* ---- Neutrals used across pages ---- */
  --ink-0f: #0f0e0e;
  --ink-11: #111111;
  --ink-33: #333333;
  --ink-44: #444444;
  --ink-55: #555555;
  --ink-66: #666666;
  --line-label: #737373;
  --line-rule: #666666;
  --card-border: #d1d1d1;
  --muted-text: #9a9a9a;
  --surface-quote: #f2f3f5;
  --surface-action: #ebf3fc;
  --blue-action: #1364d5;      /* buttons, action text */
  --io-red: #f63b3b;           /* Figma: io-red */
  --io-yellow: #f1eb33;        /* Figma: io-yellow */
  --io-blue: #699ce3;          /* Figma: io-blue */
  --grays-gray: #8e8e93;       /* Figma: Grays/Gray */
  --io-blue-soft: #5c8bcc;     /* hero subtitle */
  --io-blue-light: #70a6f2;    /* closing sub text */
  --skin-swap-yellow: #ffff99;  /* Figma: skin swap yellow */
  --bc-paper: #f6f5f3;          /* BREAKING CONFORMITY page background */
  --figma-canvas: #3c3c3c;     /* Figma page canvas, visible through unfilled frames */
  --key-purple: #bd12d5;       /* Figma: key purple (버튼스타일) */

  /* ---- Effects ---- */
  /* 버튼그림자-공통 / 헤더버튼그림자-밝은 */
  --shadow-btn: drop-shadow(3px 3px 2.5px rgba(0, 0, 0, 0.23));
  --shadow-btn-light: drop-shadow(3px 3px 2.5px rgba(124, 124, 124, 0.25));

  /* ---- Fonts ---- */
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-ui: "Inter", system-ui, sans-serif;
  --font-hand: "Patrick Hand SC", "Comic Sans MS", cursive;
  --font-castoro: "Castoro", Georgia, serif;
  --font-baskerville: "Baskervville", Georgia, serif;

  /* ---- Layout ---- */
  --page-width: 1440px;
  --content-width: 1250px;
  --gutter: 95px;
  --header-h: 59px;   /* client 10/8: new header (Figma 'Header(컴포넌트))' 1440×59); phones 40 (below) */
  --section-pad-y: 50px;
  --section-gap: 40px;
}

/* ---------- "→" (QA 10/8) ----------
   Google Fonts' subsets of these families leave out U+2192, so every "→" on the site was drawn in a wider fallback
   font (3px wider per arrow than Figma). These faces add each font's own arrow, that one glyph only (unicode-range),
   to the same family names, so no font-family rule changes. "↺" is not in Plus Jakarta Sans or Playfair Display at all
   (it stays a fallback glyph, as in Figma). */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("../assets/fonts/plus-jakarta-sans-400-arrow.woff") format("woff"); unicode-range: U+2192; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url("../assets/fonts/plus-jakarta-sans-500-arrow.woff") format("woff"); unicode-range: U+2192; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("../assets/fonts/plus-jakarta-sans-600-arrow.woff") format("woff"); unicode-range: U+2192; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("../assets/fonts/plus-jakarta-sans-700-arrow.woff") format("woff"); unicode-range: U+2192; }
@font-face { font-family: "Playfair Display"; font-weight: 600; font-display: swap; src: url("../assets/fonts/playfair-display-600-arrow.woff") format("woff"); unicode-range: U+2192; }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter-400-arrow.woff") format("woff"); unicode-range: U+2192; }
/* client 10/10: BC PATCH's "→" and "&" are Crimson Text in Figma (2326:2553 / 2326:2554: → Regular, & SemiBold). Google's
   Crimson Text subsets leave → out (only ↑ ↓), so the two glyphs come from Google's text= subset as local woff files,
   used only for U+2192 and U+0026 in the BC PATCH flow line and body (.home-bcp__group …, .home-bcp__body) */
/* the flow line is SemiBold but its → is Regular, the body is Regular but its & is SemiBold — so the faces cross over */
@font-face { font-family: "Crimson Text IO"; font-weight: 600; font-display: swap; src: url("../assets/fonts/crimson-text-400-arrow-amp.woff") format("woff"); unicode-range: U+2192; }
@font-face { font-family: "Crimson Text IO"; font-weight: 400; font-display: swap; src: url("../assets/fonts/crimson-text-600-arrow-amp.woff") format("woff"); unicode-range: U+0026; }
/* 1010c: Figma sets "↺" in Playfair Display SemiBold, but Playfair has no U+21BA (checked with Google's text= subset), so
   Figma draws a fallback; the closest Google font to that drawing (an open thin ring, arrowhead top right) is Noto Sans
   Math (the only weight; the face covers 100–900 so no fake bold). Used for this one character only */
@font-face { font-family: "IO Turn"; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/noto-sans-math-21ba.woff") format("woff"); unicode-range: U+21BA; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }   /* 1011b: also body and !important, so an in-app browser's text size (written on body) does not enlarge the words */
body {
  font-family: var(--font-sans);
  color: var(--io-black);
  background: var(--io-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--blue-action); outline-offset: 3px; }

/* =========================================================
   Header (client 10/8) — Figma 'Header(컴포넌트))' 1440×59, white. [IO 43] then the five buttons spread to x 1341.
   Buttons (Figma '헤더버튼'): default = key colour 70%, 37 tall, 8·12 padding, black words (ABOUT IO white);
   selected = key colour 100%, 43 tall, 12·16 (black 12·14), 1.5px rgba(0,0,0,.2) edge (not on black), drop shadow,
   white words on red / blue / black. The page you are on is selected (home: IO); hover (mouse) and keyboard focus
   show the selected look. The selected look grows in place (a pseudo layer), so no neighbour moves.
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: #fff;
  transform: translateZ(0);   /* its own layer: phone browsers keep it in place while scrolling */
}
.site-nav {
  position: absolute;
  /* above 1440px the background stays full width; IO + buttons line up with the centred 1440 page (95 / 99 in) */
  left: max(var(--gutter), calc(50% - 625px));
  right: max(99px, calc(50% - 621px));
  top: 7px;
  height: 43px;
  display: flex;
  align-items: center;
  gap: 65px;   /* IO x 95–138, buttons from x 203 */
}
.site-logo {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  padding: 0 0 1px 1.5px;   /* Figma's IO sits 1.5px right, 0.7px up of the circle's centre */
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #000;
  font-weight: 800;
  font-size: 29px;
  line-height: 0.9;
  letter-spacing: -0.58px;
  text-transform: uppercase;
  color: #000;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.site-logo > span { display: block; text-box: trim-both cap alphabetic; }
.site-logo[aria-current="page"] { background: #000; color: #fff; }
.site-nav__list { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; }
.site-header .nav-btn {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 37px;
  padding: 0 12px;
  border-radius: 999px;
  background: none;
  filter: none;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: 0.34px;
  white-space: nowrap;
  color: var(--kfg);   /* client 10/9: the key colours at 100% at rest too (was 70% with black words) */
  transition: color 0.18s ease;
}
.site-header .nav-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 0 solid rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  background: var(--k);
  transition: inset 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.site-header .nav-btn--archive { --k: #f63b3b; --kfg: #fff; }
.site-header .nav-btn--conformity { --k: #32ce57; --kfg: #000; }
.site-header .nav-btn--bcpatch { --k: #e8e232; --kfg: #000; }
.site-header .nav-btn--bruisetrace { --k: #377beb; --kfg: #fff; }
.site-header .nav-btn--about { --k: #000; --kfg: #fff; color: #fff; }
/* .is-section: on the home page, the button of the section in view (assets/js/nav-follow.js) */
.site-header .nav-btn:is([aria-current="page"], .is-section) { color: var(--kfg); }
.site-header .nav-btn:is([aria-current="page"], .is-section)::before {
  inset: -3px -4px;
  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.2);   /* QA 10/8: a 1.5px border is drawn 1px by the browsers; the inset shadow keeps 1.5 */
  background: var(--k);
  filter: drop-shadow(3px 3px 3.5px rgba(0, 0, 0, 0.34));
}
.site-header .nav-btn--about:is([aria-current="page"], .is-section)::before { inset: -3px -2px; box-shadow: inset 0 0 0 1.5px #737373; }   /* client 10/10, Figma '헤더버튼' Black 선택=1: 1.5px #737373 */
/* home page, below the top video: IO goes back to its default look (it stays the page you are on for screen readers) */
html.nav-follow .site-logo[aria-current="page"]:not(.is-section):not(:hover):not(:focus-visible) { background: #fff; color: #000; }
/* mouse (devices that hover) and keyboard focus: the selected look; never left stuck on a touch screen */
@media (hover: hover) {
  .site-header .nav-btn:hover { color: var(--kfg); }
  .site-header .nav-btn:hover::before { inset: -3px -4px; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.2); background: var(--k); filter: drop-shadow(3px 3px 3.5px rgba(0, 0, 0, 0.34)); }
  .site-header .nav-btn--about:hover::before { inset: -3px -2px; box-shadow: inset 0 0 0 1.5px #737373; }   /* client 10/10, Figma '헤더버튼' Black 선택=1: 1.5px #737373 */
  .site-logo:hover { background: #000; color: #fff; }
}
.site-header .nav-btn:focus-visible { color: var(--kfg); }
.site-header .nav-btn:focus-visible::before { inset: -3px -4px; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.2); background: var(--k); filter: drop-shadow(3px 3px 3.5px rgba(0, 0, 0, 0.34)); }
.site-header .nav-btn--about:focus-visible::before { inset: -3px -2px; box-shadow: inset 0 0 0 1.5px #737373; }   /* client 10/10, Figma '헤더버튼' Black 선택=1: 1.5px #737373 */
.site-logo:focus-visible { background: #000; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-btn, .site-header .nav-btn::before, .site-logo { transition: none; }
}
.nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 43px;
  padding: 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.8;
  letter-spacing: 0.34px;
  white-space: nowrap;
  filter: var(--shadow-btn);
}
.nav-btn--archive { background: var(--nav-archive); color: #fff; min-width: 179px; justify-content: flex-start; }
.nav-btn--conformity { background: var(--nav-conformity); color: #000; }
.nav-btn--bcpatch { background: var(--nav-bcpatch); color: #000; filter: var(--shadow-btn-light); }
.nav-btn--bruisetrace { background: var(--nav-bruisetrace); color: #fff; }
.nav-btn--about { background: var(--nav-about); color: #fff; }

/* =========================================================
   섹션시작 라인 — 1440×20
   ========================================================= */
.section-line {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 20px;
  padding-inline: var(--gutter);
  overflow: hidden;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.84px;
  color: var(--line-label);
  white-space: nowrap;
}
.section-line::before {
  content: "";
  order: 1;
  flex: 1 0 0;
  height: 1px;
  background: var(--line-rule);
}
.section-line__no { order: 0; }
.section-line__label { order: 2; text-transform: uppercase; }
/* some instances override the label to Plus Jakarta Sans / io-gray */
.section-line--alt .section-line__label { font-family: var(--font-sans); color: var(--io-gray); }

/* =========================================================
   Shared section scaffolding
   ========================================================= */
.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-gap);
  padding-block: var(--section-pad-y);
  background: var(--io-white);
}
.section > .section-line { align-self: stretch; }
/* fixed Figma frame heights where the frame is taller/shorter than its auto-layout content */
@media (min-width: 1280px) {
  .section--h1689 { height: 1689px; }   /* BC PATCH / 01-RESEARCH 2221:27494 */
  .section--h1179 { height: 1179px; }   /* BC PATCH / 02-KEY FINDINGS 2283:1430 */
  .section--h1179 .ss-findings { gap: 50px; }      /* 2283:1432: title / cards / photos 50 apart */
  .section--h851 { height: 830px; }     /* BruiseTrace / 04-feedback 2326:1521: 830 with the 130 cards (was 851) */
  .section--h851 .bt-feedback { gap: 50px; margin-bottom: 0; }      /* 2283:1321: statement 50 under the intro */
  .section--h851 .feedback-col { gap: 5px; }      /* 2283:1330: card / arrow / action card 5 apart */
  /* display headings at Figma 2266's 71.4px lines (.t-display): the heading boxes and the space under them as in Figma */
  .bt-convo .t-display { min-height: 222px; }                       /* 2266:1260 box 222 (3 lines + 8) */
  /* client 10/7 (Figma 2283:1230): paragraph and steps 60 apart (was 77) */
  .bt-how .bt-how__left { gap: 60px; }
  /* client 10/7 (Figma 2283:1267): the intro sits 4.5px lower; the paragraph box is x 785, 560 wide */
  .bt-convo .two-col-intro { position: relative; top: 4.5px; gap: 65px; }
  .bt-convo .two-col-intro > :last-child { flex-basis: 560px; }
  .section .bt-insights { gap: 49.6px; margin-bottom: 11px; }                 /* client 10/7 (2283:1288): cards 50 under the heading box (71), 61 above the section end */
  .ss-findings__title .t-display { min-height: 74px; }              /* 2266:1425 box 74 */
  .bt-feedback .two-col-intro .t-display { height: 213px; }         /* 2266:1315 / 2266:1479 boxes 213 (3 lines) */
  .bt-feedback { margin-bottom: 2px; }                               /* SKIN SWAP 2283:1485 ends 52 above the section end */
  .ss-hero__meta { margin-top: -5px; }
  .home-q__quote { min-height: 92px; }                               /* Figma 2266:1061… boxes 92 (2 × 45.6 rounded): blocks 214 apart */                               /* 2266:1362: the meta follows the title group with no gap (the 5px is kicker→title only) */
}
.container { width: var(--content-width); max-width: 100%; }

.t-display {
  font-weight: 800;
  font-size: 68px;        /* Figma 2266 text style "Plus Jakarta Sans 68 ExtraBold": 68 / 1.05 / −2% */
  line-height: 71.4px;
  letter-spacing: -1.36px;
}
.t-serif-body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 31px;      /* 22 × 1.43, rounded as in Figma */
  letter-spacing: -0.22px;
  color: var(--ink-55);
}

/* Two Column Intro (heading 625 / text 527, gap 98) */
.two-col-intro { display: flex; gap: 98px; align-items: flex-start; }
.two-col-intro > :first-child { flex: 0 0 625px; }
.two-col-intro > :last-child { flex: 0 0 527px; }

/* 버튼스타일 2221:28013 (View Paper / OPEN BRUISETRACE): square, key purple. Client 10/5: no blue stroke
   (it came from a colour change in Figma); hover grows 1.05× in 0.2s; the keyboard focus ring stays */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  height: 44px;          /* client 10/10, Figma 버튼스타일 2326:2391: 44 tall, padding 12 / 30 (was 50, 15 / 32) */
  padding: 12px 30px;
  background: var(--key-purple);
  border: 0;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.08));
  color: var(--io-white);
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: pre;
  transition: transform 0.2s ease;
}
.btn-primary:hover { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .btn-primary { transition: none; } }
.btn-primary__icon { width: 10px; height: 10px; position: relative; }
.btn-primary__icon img { position: absolute; inset: -7.5%; width: 115%; height: 115%; }

/* Insight cards (KEY INSIGHTS / KEY FINDINGS) */
.insight-grid { display: flex; gap: 24px; align-items: flex-start; }
.insight-card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 8px 12px 23px;   /* 24 incl. the 1px inside stroke */
  border-left: 1px solid var(--card-border);
}
.insight-card__icon { width: 46px; height: 46px; }
.insight-card__icon img { margin-top: 2.5px; max-width: none; }
.insight-card--h328 { height: 328px; }
.insight-card__copy { display: flex; flex-direction: column; gap: 12px; }
.insight-card__title {
  font-weight: 700;
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.28px;
  color: var(--io-black);
}
.insight-card__text {
  font-weight: 600;
  font-size: 23px;
  line-height: 32px;
  letter-spacing: -0.46px;
  color: var(--muted-text);
}

/* Feedback → action cards */
.feedback-block { display: flex; flex-direction: column; gap: 21px; }
.feedback-statement {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 25px;
  line-height: 38px;
  color: var(--io-gray);
}
.feedback-grid { display: flex; gap: 10px; align-items: flex-start; }
.feedback-col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.feedback-card,
.action-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  border-radius: 12px;   /* Feedback Card / Action Card 2221:27439 */
  text-align: center;
}
.feedback-card { height: 130px; background: var(--surface-quote); }   /* client 10/10, Figma Feedback Card 410×130 (was 150), phones too */
.action-card { height: 180px; background: var(--surface-action); }
.feedback-card p { font-weight: 600; font-size: 27px; line-height: normal; color: var(--ink-33); }
.action-card p { font-weight: 600; font-size: 23px; line-height: 32px; letter-spacing: -0.46px; color: #377beb; }   /* Figma 2266:1328… (BruiseTrace); SKIN SWAP's yellow cards are black */
.feedback-arrow { height: 28.5px; display: flex; justify-content: center; }
.feedback-arrow img { margin-top: -1.25px; }

/* =========================================================
   BruiseTrace
   ========================================================= */

/* ---- Hero 2221:27293 (512) ---- */
/* The Figma hero/page frames have no fill, so the canvas colour (#3C3C3C) shows through the
   not-quite-opaque end of left-gradient-overlay between the image edge (1194px) and 1441px. */
.bt-hero {
  position: relative;
  height: 482px;   /* client 10/7 (Figma 2283:1207): the 512px photo is cut at 482 */
  overflow: hidden;
  /* client 10/5: no grey block / seam on the right (Figma shows its dark canvas through the frame there) */
  background: var(--io-white);
  container-type: inline-size;   /* calc(100cqw * var(--cqfix, 1)) = hero width, used to size the curved words with the photo */
}
/* the photo is 1195px wide at 1440 and grows with the window above that (its right edge stays 475px right of
   centre), so it always reaches the left edge; the crop is the Figma one (cover, 36.6% from the top) */
.bt-hero__bg {
  position: absolute;
  left: -1px;
  top: 0;
  width: max(1195px, calc(50% + 475px));
  height: 512px;
  overflow: hidden;
}
.bt-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 36.6%;
  max-width: none;
}
.bt-hero__overlay { position: absolute; left: -1px; top: 0; width: max(1441px, calc(50% + 721px)); height: 541px; }
/* the curved words ride on the photo: sized and placed against the photo width W (= the .bt-hero__bg width),
   so they stay on the cheek when the photo grows. viewBox = the old 1440 user space (origin 173,132),
   300×160 around the words; at W = 1195 this is exactly the Figma position */
.bt-hero__curves {
  --w: max(1195px, calc(50cqw * var(--cqfix, 1)) + 475px);
  position: absolute;
  left: calc(var(--w) * 0.1113);
  top: calc(163.4px + var(--w) * 0.05406);   /* client 10/7: 24px higher with the hero text */
  width: calc(var(--w) * 0.25105);
  height: calc(var(--w) * 0.13389);
  overflow: visible;
}
.bt-hero__curves text {
  font-family: var(--font-hand);
  font-size: 15px;
  fill: #fff;
}
.bt-hero__text {
  position: absolute;
  left: calc(50% + 66px);   /* 786px at 1440 (Figma 2283:1214) */
  top: 103px;
  width: 576px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.bt-hero__head { display: flex; flex-direction: column; gap: 43px; }
.bt-hero__titles { display: flex; flex-direction: column; gap: 13px; }
.bt-hero__title-group { display: flex; flex-direction: column; gap: 10px; }
.bt-hero__kicker {
  width: 462px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-55);
}
.bt-hero__title {
  height: 58px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: var(--ink-0f);
  font-weight: 800;
  font-size: 68px;        /* Figma 2266:1191: BRUISE 68 / 1.05 / −1.36, Trace 70 / 1.35 (no letter spacing) */
  line-height: 1.05;
  letter-spacing: -1.36px;
}
.bt-hero__title .gap { font-size: 68px; letter-spacing: -7.48px; white-space: pre; }   /* Figma's space span (2266:1191); pre: in the flex title a lone space would otherwise collapse */
.bt-hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 70px;
  letter-spacing: 0;
  line-height: 1.35;
}
.bt-hero__meta {
  font-weight: 500;
  font-size: 21px;
  line-height: 27px;
  letter-spacing: -0.21px;
  color: var(--io-blue-soft);
}
.bt-hero__lead {
  width: 566px;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.28;
  color: var(--ink-33);
}
.bt-hero__body { width: 541px; color: var(--ink-33); }

/* ---- 01 HOW IT WORKS 2221:27311 (793; the 810 inner frame is clipped) ---- */
.bt-how { height: 760px; overflow: hidden; }   /* Figma 2283:1225: 760 */
.bt-how > * { flex-shrink: 0; }   /* the row overhangs the fixed height (hidden): keep the line 20 and the row at +60 */
.bt-how__row { position: relative; height: 650px; display: flex; align-items: flex-start; }
.bt-how__left {
  flex: 0 0 611px;
  height: 600px;
  display: flex;
  flex-direction: column;
  gap: 77px;
}
.bt-how__intro { display: flex; flex-direction: column; gap: 20px; }
.bt-how__intro .t-display { color: var(--ink-11); }
.bt-how__flow {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.28;
  color: var(--ink-44);
  white-space: nowrap;   /* one line in Figma */
}
.bt-steps { display: flex; gap: 10.796px; height: 202px; align-items: flex-start; }
.bt-step { width: 117.681px; display: flex; flex-direction: column; align-items: center; gap: 10.796px; text-align: center; }
.bt-step__media {
  position: relative;
  flex: none;
  width: 117.681px;
  height: 117.681px;
  overflow: hidden;
  background: #f0ebe3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bt-step__media img { flex: none; width: 120px; height: 120px; object-fit: cover; }
/* step 1 and 4 frames are 120px wide inside the 117.68px column (Figma x -1.16) */
.bt-step__media--wide { width: 120px; height: 120px; }
.bt-step__media--wide img { width: 124.159px; height: 124.159px; }
.bt-step__media--crop { border: 1px solid #939393; }
.bt-step__crop { position: relative; flex: none; width: 120px; height: 120px; overflow: hidden; border: 3px solid #000; }
.bt-step__crop img {
  position: absolute;
  width: 306.29%;
  height: 307%;
  left: -80.06%;
  top: -40.89%;
  max-width: none;
}
.bt-step__media--result {
  background: #eaf0ff;
  border: 1.08px solid #155dfc;
  padding-right: 1.08px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 11.876px;
  line-height: 15.115px;
  letter-spacing: -0.1188px;
  color: #155dfc;
  flex-direction: column;
}
.bt-step__title { width: 117.681px; font-weight: 700; font-size: 16px; line-height: 1.15; letter-spacing: -0.32px; color: var(--ink-11); }
.bt-step__desc { width: 117.681px; font-weight: 500; font-size: 12px; line-height: 1.2; letter-spacing: -0.24px; color: var(--ink-66); }
.bt-step-arrow {
  width: 24.832px;
  height: 117.681px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 24.832px;
  color: #939393;
}

/* BruiseTrace-video 2221:27351: 543 wide at x 674 of the row; button 8px above the row bottom */
.bt-how__right {
  position: absolute;
  left: 674px;
  top: 0;
  width: 543px;
  height: 650px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.bt-how__right .btn-primary { position: absolute; right: 0; bottom: 8px; }
/* Figma 2283:1357 (client 10/7: the same app screen as the homepage): a 556×545 box with a 5px rgba(232,232,232,.4)
   stroke outside it, square, no shadow, at x 784 / y 124 in the section */
.bt-how__right { left: 684px; width: 566px; }
.bt-how .browser { width: 566px; margin-top: 9.5px; border: 5px solid rgba(232, 232, 232, 0.4); border-radius: 0; background: none; filter: none; }
.bt-how .browser__bar { display: none; }
.bt-how .browser__screen { position: relative; width: 556px; height: 545px; aspect-ratio: auto; margin: 0; border: 0; border-radius: 0; }

/* Browser mockup (app 2221:27352) — 10px corners (Figma) */
.browser {
  width: 522px;
  border-radius: 10px;
  background: #f0f0f0;
  border: 1px solid #d0d0d0;
  border-bottom: 0;
  filter: drop-shadow(2px 4px 3.55px rgba(0, 0, 0, 0.12));
}
.browser__bar { display: flex; align-items: center; gap: 6px; height: 44px; padding: 10px 12px 8px; }
.browser__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.browser__dot--close { background: #ff5f57; }
.browser__dot--min { background: #ffbd2e; }
.browser__dot--max { background: #28ca41; }
.browser__nav { display: flex; gap: 4px; padding-left: 10px; }
.browser__nav span {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 12px;
  color: #888;
}
.browser__nav span + span { color: #bbb; }
.browser__url {
  flex: 1 0 0;
  min-width: 0;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 6px;   /* 2221:27362 */
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-55);
}
.browser__tools { display: flex; align-items: center; gap: 6px; }
.browser__screen {
  margin: 0 -1px;
  width: 522px;
  aspect-ratio: 1080 / 1082;
  border: 1px solid #d0d0d0;
  border-radius: 0 0 10px 10px;   /* BruiseTrace_web_1440 4 2221:27371 */
  overflow: hidden;
  background: #fff;
}
.browser__screen img, .browser__screen video { width: 100%; height: 100%; object-fit: cover; }

/* ---- 02 Conversations (832) ---- */
.bt-convo-cards { display: flex; gap: 10px; }
.convo-card {
  position: relative;
  width: 410px;
  height: 410px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  isolation: isolate;
}
.convo-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.convo-card::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.54); z-index: -1; }
.convo-card__icon { width: 130px; height: 130px; object-fit: cover; }
.convo-card__text { width: 100%; display: flex; flex-direction: column; gap: 8px; font-weight: 700; line-height: 1.15; }
.convo-card__title { font-size: 28px; letter-spacing: -0.56px; color: #fff; }
.convo-card__sub { font-size: 23px; letter-spacing: -0.46px; color: rgba(255, 255, 255, 0.7); }

/* ---- 03 Key insights (678) ---- */
.bt-insights { display: flex; flex-direction: column; gap: 116px; }

/* ---- 04 Feedback (873) ---- */
.bt-feedback { display: flex; flex-direction: column; gap: 48px; }
.bt-feedback .t-display,
.bt-insights .t-display { color: var(--io-black); }
.bt-convo .t-display { color: var(--ink-11); }

/* ---- 05 Closing (545) ---- */
.bt-closing {
  position: relative;
  height: 495px;   /* client 10/7 (Figma 2283:1351) */
  overflow: hidden;
  background-image:
    linear-gradient(270deg, rgba(63, 25, 52, 0.61) 0%, rgba(85, 18, 66, 0.61) 43.75%, rgba(85, 18, 66, 0.238) 100%),
    linear-gradient(270deg, rgba(0, 0, 0, 0.701) 0%, rgba(37, 37, 37, 0.438) 56.462%, rgba(102, 102, 102, 0.438) 99.375%),
    linear-gradient(90deg, #61184d 0%, #61184d 100%);
}
.bt-closing__media { position: absolute; left: 0; top: 0; bottom: 0; aspect-ratio: 654 / 545; }
.bt-closing__media img { width: 100%; height: 100%; object-fit: cover; }
.bt-closing__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(55, 33, 49, 0.37) 53.937%, rgba(41, 18, 34, 0.48) 77.535%, rgba(71, 20, 57, 0.84) 96.185%, #2c0f23 108.36%);
}
.bt-closing__content {
  position: absolute;
  left: calc(50% - 120px);  /* 600px at 1440 */
  top: 86px;
  width: 745px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 31px;
  text-align: right;
  font-weight: 700;
}
.bt-closing__quote { font-size: 48px; line-height: 54px; color: #fff; }
.bt-closing__sub { font-size: 28px; line-height: 38px; letter-spacing: -0.28px; color: var(--io-blue-light); }

/* ---- Shared modifiers added for SKIN SWAP ---- */
.action-card--yellow { background: var(--skin-swap-yellow); }
.action-card--yellow p { color: #000; }
.feedback-grid--h414 .feedback-col { height: 414px; }
@media (min-width: 1280px) { .feedback-grid--h414 .feedback-col { height: 384px; } }   /* client 10/7: SKIN SWAP 03-feedback 2283:1495 columns are 384 */

/* =========================================================
   BC PATCH → SKIN SWAP
   ========================================================= */

/* ---- Hero (579) ---- */
.ss-hero { position: relative; height: 579px; overflow: hidden; background: var(--io-white); }
.ss-hero__img { position: absolute; top: 0; overflow: hidden; }
.ss-hero__img img { position: absolute; max-width: none; }
.ss-hero__img--left { left: calc(50% - 720px); width: 581px; height: 581px; }
.ss-hero__img--left img { left: 0.02%; top: -1.63%; width: 101.7%; height: 101.7%; }
.ss-hero__img--right { left: calc(50% + 244px); top: -3.15px; width: 581.89px; height: 581.89px; transform: scaleX(-1); }
.ss-hero__img--right img { left: 7.66%; top: -0.25%; width: 99.09%; height: 100.99%; }
.ss-hero__fade {
  position: absolute;
  inset: 0 0 auto 0;
  height: 579px;
  /* Figma stops (11.124 / 26.951 / 32.536 / 69.538 / 74.774 / 88.651 % of 1440) written from the centre */
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.1) calc(50% - 559.8px), rgba(255, 255, 255, 0.9) calc(50% - 331.9px), #fff calc(50% - 251.5px), #fff calc(50% + 281.3px), rgba(255, 255, 255, 0.9) calc(50% + 356.7px), rgba(255, 255, 255, 0.1) calc(50% + 556.6px));
}
.ss-hero__text {
  position: absolute;
  left: calc(50% - 347px);  /* 373px at 1440 */
  top: 133px;
  width: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 31px;
  text-align: center;
}
.ss-hero__head { width: 688px; display: flex; flex-direction: column; gap: 24px; }
.ss-hero__titles { height: 151px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ss-hero__kicker {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-55);
  white-space: nowrap;
}
.ss-hero__title-row { width: 684px; height: 87px; display: flex; align-items: flex-start; }
.ss-hero__title-line { display: flex; align-items: center; gap: 8px; }
.ss-hero__title {
  font-weight: 800;
  font-size: 68px;        /* Figma 2266:1365: BC 68 / 1.05 / −1.36, Patch 68 */
  line-height: 1.05;
  letter-spacing: -1.36px;
  color: var(--ink-0f);
  white-space: nowrap;
  text-transform: uppercase;
}
.ss-hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 68px;
  letter-spacing: 0;      /* "Patch" has no letter spacing of its own in Figma */
  text-transform: none;
}
.ss-hero__arrow { width: 90px; height: 36.82px; overflow: hidden; position: relative; flex: none; }
.ss-hero__arrow img { position: absolute; left: -4.55%; top: -0.15%; width: 109.85%; height: 100.31%; max-width: none; }
.ss-hero__logo { flex: none; }
.ss-hero__meta {
  font-weight: 500;
  font-size: 21px;
  line-height: 27px;
  letter-spacing: -0.21px;
  color: var(--io-blue-soft);
  white-space: nowrap;
}
.ss-hero__lead { width: 684px; font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.12px; color: var(--ink-33); }
.ss-hero__body { width: 701px; color: var(--ink-33); }

/* ---- 01 Research (1689) ---- */
/* Frame 2147236650: intro (337) and media stacked with a 58px gap; View Paper sits at x right 0, y 285 */
.ss-research { display: flex; flex-direction: column; gap: 58px; }
.ss-research__top { position: relative; }
.ss-research__top .btn-primary { position: absolute; right: 0; top: 285px; }
.ss-research__intro { display: flex; align-items: center; gap: 98px; }
.ss-research__left { display: flex; flex-direction: column; gap: 10px; }
.ss-research__heading-group { display: flex; flex-direction: column; gap: 24px; }
.ss-research__heading { width: 625px; height: 210px; font-weight: 800; font-size: 68px; letter-spacing: -1.36px; color: var(--ink-0f); }   /* Figma 2266:1385 */
.ss-research__heading > span { display: block; line-height: 72px; }
.ss-research__heading > span + span { line-height: 65px; }   /* RESEARCH: Figma line 141.5 from the top (73.5 + 68) */
.ss-research__heading em { font-family: var(--font-serif); font-style: italic; font-weight: 600; }
@media (min-width: 1280px) {
  .ss-research__heading em { letter-spacing: 0; }                   /* Patch / RESEARCH: no letter spacing of their own in Figma 2266:1385 */
  .ss-research__heading .sp { font-size: 70px; letter-spacing: 0; } /* Figma's two spaces before Patch are a 70px run */
}
.ss-meta {
  width: 522px;
  font-weight: 500;
  font-size: 21px;
  line-height: 27px;
  letter-spacing: -0.21px;
  color: var(--io-blue-soft);
}
.ss-lead { width: 522px; font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.12px; color: var(--ink-33); }
.ss-research__right { width: 527px; align-self: flex-start; margin-top: 38px; }
.ss-research .btn-primary { width: 199px; }   /* Figma 2326:1632 (View Paper) */
.ss-research__media { display: flex; flex-direction: column; gap: 10px; }
.ss-media-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.ss-media-card { width: 410px; display: flex; flex-direction: column; gap: 10px; }
.ss-media-card__img { position: relative; width: 410px; height: 410px; overflow: hidden; }
.ss-media-card__img img { position: absolute; max-width: none; left: 0; top: 0; width: 100%; height: 100%; }
.ss-media-card__img--ointment img { left: -3.83%; top: -1.98%; width: 109%; height: 109%; }
.ss-media-card__img--response img { left: -32.82%; top: 0.1%; width: 139.77%; height: 111.86%; }
.ss-media-card--video .ss-media-card__img { height: 523px; }
.ss-media-card__img video { width: 100%; height: 100%; object-fit: cover; }
/* same crop as the Figma Video Card poster: the card shows x 359–769 of the 1822px-wide (2x) frame */
.ss-media-card--video video { object-position: 35.83% 50%; }
.ss-media-card__copy { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.ss-media-card__title { font-weight: 700; font-size: 28px; line-height: 38px; letter-spacing: -0.28px; color: #000; }
.ss-media-card__sub { font-weight: 600; font-size: 23px; line-height: 32px; letter-spacing: -0.46px; color: #888; }

/* ---- 02 Key findings (1207) ---- */
.ss-findings { display: flex; flex-direction: column; align-items: flex-end; gap: 65px; }
.ss-findings__title { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.ss-findings__title .t-display { color: var(--io-black); }
.ss-findings__sub { font-family: var(--font-serif); font-size: 22px; line-height: 36px; letter-spacing: -0.22px; color: #000; }
.ss-findings__sub strong { font-weight: 600; font-size: 23px; letter-spacing: -0.23px; }
.ss-findings .insight-grid { width: 100%; }
.ss-findings__media { width: 1249px; height: 399px; display: flex; gap: 11px; align-items: flex-start; }
.ss-crop { position: relative; height: 400px; overflow: hidden; flex: none; }
.ss-crop img { position: absolute; max-width: none; }
.ss-crop--jar { width: 310px; }
.ss-crop--jar img { left: -0.12%; top: -10.87%; width: 128%; height: 124.07%; }
.ss-crop--pantone { width: 607px; }
.ss-crop--pantone img { left: -1.95%; top: -5.14%; width: 104%; height: 105.21%; }
.ss-similarity {
  flex: none;
  width: 310px;
  height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--io-white);
  border: 1px solid var(--card-border);
}
.ss-similarity__result {
  height: 176px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 24px 16px 30px;
  background: var(--skin-swap-yellow);
  overflow: hidden;
}
.ss-similarity__score { font-family: var(--font-ui); font-weight: 800; font-size: 57px; line-height: 0.99; letter-spacing: -1.14px; color: #000; }
.ss-similarity__summary { font-weight: 700; font-size: 23px; line-height: 28px; letter-spacing: -0.46px; color: #000; }
.ss-similarity__method { font-family: var(--font-ui); font-weight: 600; font-size: 15px; line-height: 1; color: #565861; }
.ss-similarity__range {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 18px 16px 10px;
  background: #f4f5f7;
  overflow: hidden;
  color: #565861;
}
.ss-similarity__range-title { height: 38px; font-weight: 600; font-size: 16px; line-height: 20px; }
.ss-tones { display: flex; justify-content: space-between; height: 41px; align-items: center; }
.ss-similarity__note { font-weight: 500; font-size: 15px; line-height: 20px; letter-spacing: -0.225px; }

/* ---- 04 SKIN SWAP (2480) ---- */
.ss-swap { position: relative; height: 2410px; overflow: hidden; background: #0966b1; }

.ss-swap__stage { position: relative; width: 1440px; height: 100%; margin-inline: auto; }
.ss-swap__portrait { position: absolute; left: 0; top: 0; width: 1440px; height: 960px; max-width: none; }
.ss-story { position: absolute; z-index: 1; left: 0; top: 960px; width: 1440px; height: 544px; color: var(--skin-swap-yellow); }
.ss-story__logo {
  position: absolute;
  left: 95px;
  top: 29px;
  display: flex;
  align-items: flex-end;
  font-style: italic;
  line-height: 1.08;
  white-space: nowrap;
}
.ss-story__logo img { display: block; width: 410px; max-width: none; height: auto; }   /* client 10/8: Figma 2300:1759 outlines (skin / swap on one baseline), exported as SVG */
.ss-story__text {
  position: absolute;
  left: 732px;
  top: 53px;
  width: 624px;
  font-weight: 600;
  font-size: 27px;
  line-height: normal;
}
.ss-story__stars { position: absolute; left: 65px; top: -47px; width: 915.27px; height: 480.17px; transform: rotate(180deg); max-width: none; }
.ss-story__star37 {
  position: absolute;
  left: 317.88px;
  top: 132.88px;
  width: 90.69px;
  height: 90.69px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ss-story__star37 span { position: relative; width: 71.82px; height: 71.82px; transform: rotate(-108.24deg); flex: none; }
.ss-story__star37 img { position: absolute; left: 6.1%; top: 5.51%; width: 93.37%; height: 89.58%; max-width: none; }
.ss-info { position: absolute; left: 95px; top: 506px; width: 1253px; display: flex; gap: 57px; align-items: flex-start; }
.ss-info__card { display: flex; flex-direction: column; gap: 12px; width: 380px; }
.ss-info__card:last-child { width: 378px; }
.ss-info__title { font-weight: 700; font-size: 28px; line-height: 38px; letter-spacing: -0.28px; }
.ss-info__text { width: 390px; font-weight: 500; font-size: 21px; line-height: 27px; letter-spacing: -0.21px; }

.ss-gallery {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1440px;
  height: 747px;
  background: linear-gradient(180deg, #0966b1 9.473%, #2b84cc 100%);
}
.ss-gallery__applied { position: absolute; left: 0; top: 64px; width: 683px; height: 683px; object-fit: cover; max-width: none; }
.ss-gallery__packs { position: absolute; left: 760px; top: 120px; width: 599px; height: 554px; }
/* client 10/5: above 1440 the hero photos and the SKIN SWAP portrait reach both edges (no white / blue gaps) */
@media (min-width: 1441px) {
  .ss-hero__img--left { left: 0; width: calc(50% - 139px); height: 581px; }
  .ss-hero__img--right { left: calc(50% + 244px); width: calc(50% - 244px); }
  .ss-hero__img--left img, .ss-hero__img--right img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
  /* portrait: full width at its own ratio (3:2); everything under it moves down by the extra height */
  .ss-swap { height: calc(2410px - 960px + calc(66.6667 * var(--vw, 1vw))); }
  .ss-swap__portrait { left: calc(720px - calc(50 * var(--vw, 1vw))); width: calc(100 * var(--vw, 1vw)); height: calc(66.6667 * var(--vw, 1vw)); }
  .ss-story { top: calc(66.6667 * var(--vw, 1vw)); }
  .ss-gallery { isolation: isolate; background: none; }
  .ss-gallery::before { content: ""; position: absolute; inset: 0 calc(720px - calc(50 * var(--vw, 1vw))); z-index: -1; background: linear-gradient(180deg, #0966b1 9.473%, #2b84cc 100%); }
  .ss-gallery__applied { left: calc(720px - calc(50 * var(--vw, 1vw))); }   /* flush with the left edge, as at 1440 */
}.ss-pack { position: absolute; overflow: hidden; }
.ss-pack img { position: absolute; max-width: none; }
.ss-pack--film {
  left: 0.09px;
  top: 171px;
  width: 199.8px;
  height: 331.52px;
  border: 1px solid rgba(89, 152, 202, 0.78);
  border-radius: 11px;   /* 패키지-필름 2221:27650 */
  box-shadow: -12px 15px 18.4px -12px rgba(11, 26, 38, 0.22);
  transform: rotate(180deg);
}
.ss-pack--film img { left: -12.39%; top: -4.08%; width: 124.78%; height: 106.03%; }
.ss-pack--yellow {
  left: 329.7px;
  top: 0;
  width: 269.29px;
  height: 389.67px;
  box-shadow: -9px 19px 19.9px -3px rgba(18, 66, 104, 0.47);
  overflow: visible;
}
.ss-pack--yellow .ss-pack__clip, .ss-pack--blue .ss-pack__clip { position: absolute; inset: 0; overflow: hidden; }
.ss-pack--yellow img { left: -23.41%; top: -2.67%; width: 142.83%; height: 104.63%; }
.ss-pack--blue {
  left: 149.49px;
  top: 74.16px;
  width: 231.08px;
  height: 376.1px;
  box-shadow: -9px 19px 19.9px -3px rgba(18, 66, 104, 0.47);
  overflow: visible;
}
/* the exported asset is already cropped (squashed to a square); stretch it back like Figma does */
.ss-pack--blue img { inset: 0; width: 100%; height: 100%; }
.ss-gallery__credit {
  position: absolute;
  left: 276px;
  top: 489px;
  width: 312px;
  height: 68px;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.84px;
  color: rgba(255, 255, 255, 0.75);
  text-align: right;
}

/* ---- 05 Closing (612) ---- */
.ss-closing {
  position: relative;
  height: 612px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 75px 85px 78px 100px;
  background: #693a12;
}
.ss-closing__media { position: absolute; left: 0; top: 0; bottom: 0; aspect-ratio: 654 / 545; width: auto; height: 100%; object-fit: cover; max-width: none; }
.ss-closing::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(270deg, #562b06 0%, #7e4b1f 55.822%, rgba(126, 75, 31, 0.77) 61.357%, rgba(126, 75, 31, 0.38) 65.59%, rgba(126, 75, 31, 0) 100%);
  z-index: 1;
}
.ss-closing__content { position: relative; z-index: 2; width: 952px; text-align: right; font-weight: 700; font-size: 48px; line-height: 54px; color: #fff; }
.ss-closing__content p + p { margin-top: 54px; }

/* =========================================================
   Responsive — stack only, no redesign
   ========================================================= */
@media (max-width: 1279px) {
  :root { --gutter: 40px; }
  .t-display { line-height: 1.06; letter-spacing: -0.7px; }   /* 52px and below: unchanged */
  .container { width: auto; align-self: stretch; margin-inline: var(--gutter); }

  /* client 10/7: IO stays put at the left, only the tab row scrolls sideways; 10/8 buttons as on desktop.
     The row's padding leaves room for a selected button's growth and shadow (the negative margins keep its place) */
  .site-header { overflow: hidden; }
  .site-nav { left: var(--gutter); right: 0; gap: 24px; }
  .site-nav__list { flex: 1 1 auto; min-width: 0; justify-content: flex-start; gap: 16px; overflow-x: auto; padding: 6px var(--gutter) 10px 8px; margin: -6px 0 -10px; scrollbar-width: none; }
  .site-nav__list::-webkit-scrollbar { display: none; }

  .t-display { font-size: 52px; }
  .two-col-intro { flex-direction: column; gap: 24px; }
  .two-col-intro > :first-child,
  .two-col-intro > :last-child { flex: none; max-width: 100%; }

  .insight-grid { flex-wrap: wrap; row-gap: 32px; }
  .insight-card { flex: 1 1 calc(50% - 12px); }
  .insight-card--h328 { height: auto; }
  /* client 10/6 pm: question + ↓ + answer read as one group — tight inside, wide between groups */
  .feedback-grid { flex-direction: column; gap: 56px; }
  .feedback-col { width: 100%; gap: 6px; }

  /* hero */
  .bt-hero { height: auto; padding: 484px var(--gutter) 48px; background: var(--io-white); }
  .bt-hero__bg { left: 0; top: 0; width: 100%; height: 460px; }
  .bt-hero__bg img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
  .bt-hero__overlay { display: none; }
  /* the curved words sit on the cheek under the bruised eye, sized with the photo as on PC (25% of the photo
     width). Photo 1672×941, cover, 30% 40%: below 817px wide the 460px height decides the scale (0.4888) */
  .bt-hero__curves { left: max(0px, calc(0.3 * calc(100 * var(--vw, 1vw)) - 126.4px)); top: 212.6px; width: 204.8px; height: 109.2px; }
  .bt-hero__text { position: static; width: auto; }
  .bt-hero__kicker, .bt-hero__body, .bt-hero__lead { width: auto; }

  .bt-how { height: auto; }
  .bt-how__row { height: auto; flex-direction: column; gap: 48px; }
  .bt-how__left { flex: none; height: auto; }
  .bt-how__flow { white-space: normal; }
  .bt-how__right { position: static; width: auto; height: auto; align-self: stretch; align-items: stretch; gap: 24px; }
  .bt-how__right .btn-primary { position: static; align-self: flex-end; }
  .browser, .browser__screen { width: 100%; }
  .bt-how .browser { margin-top: 0; }
  .bt-how .browser__screen { height: auto; aspect-ratio: 556 / 545; }

  .bt-convo-cards { flex-direction: column; align-items: center; }
  .convo-card { width: 100%; max-width: 410px; height: auto; aspect-ratio: 1; }

  .bt-closing { height: auto; padding: 0 var(--gutter) 48px; display: flex; flex-direction: column; }
  .bt-closing__media { position: relative; height: 320px; margin-inline: calc(var(--gutter) * -1); align-self: stretch; aspect-ratio: auto; }
  .bt-closing__content { position: static; width: auto; margin-top: 40px; }
}

@media (max-width: 767px) {
  :root { --gutter: 15px; }   /* client 10/10 evening: one side line for the whole phone site — IO, ☰, titles, text, lists, footer (Figma 15; was 16) */
  .t-display { font-size: min(38px, calc(9.6 * var(--vw, 1vw))); }   /* long single words (CONVERSATIONS) fit 320px */
  .t-serif-body { font-size: 18px; line-height: 1.43; }


  .insight-card { flex-basis: 100%; }
  .insight-card__title { font-size: 24px; line-height: 1.35; }
  .insight-card__text, .action-card p { font-size: 19px; line-height: 1.37; }
  .feedback-card p { font-size: 22px; }
  .feedback-statement { font-size: 20px; line-height: 1.5; }

  .bt-hero { padding-top: 384px; }
  .bt-hero__bg { height: 360px; }
  /* phone: 360px tall photo, scale 0.3826 below 640px wide, the width decides above that */
  /* client 10/6: at least 11px words on phones (15 × 220/300); kept centred on the same spot of the cheek, a little
     lower so the larger words stay clear of the eye */
  .bt-hero__curves { left: max(-15px, calc(0.3 * calc(100 * var(--vw, 1vw)) - 124.4px)); top: 150.8px; width: 220px; height: 117.3px; }   /* words start ≥ 8px in */

  /* client 10/9 (1009f): always one row — [number] [rule] [label]. The rule takes what is left, 32px at the least; a label
     that does not fit folds inside its own column (right-aligned), and the number and the rule stay on its first line */
  .section-line { height: auto; align-items: baseline; font-size: 12px; letter-spacing: 0.6px; }
  .section-line::before { flex: 1 0 32px; align-self: flex-start; margin-top: calc(0.5lh - 0.5px); }
  .section-line__label { flex: 0 1 auto; white-space: normal; text-align: right; text-wrap: balance; }   /* 1009g: two even lines, never one word alone */
  /* client 10/10 (1009g): the seven numbered sections use one set of gaps on phones — the desktop ones (1440: line →
     title 40, title → content 35.5 middle value, content → next line 100) at about half: A 20, B 24, C 52 (4px steps;
     B goes one step up from 16 so that A < B < C). They replace 40 / 16–116 / 100 */
  .section { gap: 20px; padding-block: 26px; }
  .bt-how__intro, .bt-insights, .ss-findings__title { gap: 24px; }
  .bt-hero__title { font-size: min(52px, calc(13.5 * var(--vw, 1vw))); height: auto; line-height: 1.06; letter-spacing: -0.7px; }   /* fits 320px */
  .bt-hero__title em { font-size: 1em; }
  .bt-hero__title .gap { font-size: min(50px, calc(13 * var(--vw, 1vw))); }
  .bt-hero__meta { font-size: 18px; line-height: 1.28; }
  .bt-hero__lead { font-size: 20px; line-height: 1.35; }

  .bt-steps { display: grid; grid-template-columns: repeat(2, 120px); justify-items: center; justify-content: center; gap: 24px 40px; height: auto; }
  .bt-step-arrow { display: none; }
  /* client 10/7: the 2×2 pictures as wide as the paragraph above (columns = (width − 16) / 2; everything inside
     scales with the column, the 120px Figma frame being the 1×) */
  .bt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: stretch; gap: 24px 16px; container-type: inline-size; }
  .bt-step, .bt-step__title, .bt-step__desc { width: auto; }
  .bt-step__media, .bt-step__media--wide { width: 100%; height: auto; aspect-ratio: 1; }
  .bt-step__media > img { width: 101.97%; height: 101.97%; }
  .bt-step__media--wide > img { width: 103.47%; height: 103.47%; }
  .bt-step__crop { width: 101.97%; height: 101.97%; border-width: calc(calc(1.25cqw * var(--cqfix-b, 1)) - 0.2px); }
  .bt-step__media--result { font-size: calc(calc(4.948cqw * var(--cqfix, 1)) - 0.79px); line-height: 1.273; letter-spacing: -0.01em; }

  .convo-card__title { font-size: 24px; }
  .convo-card__sub { font-size: 19px; }

  .bt-closing__quote { font-size: 30px; line-height: 1.12; }
  .bt-closing__sub { font-size: 20px; line-height: 1.35; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- SKIN SWAP responsive ---- */
@media (max-width: 1279px) {
  .ss-hero { height: auto; padding: 120px var(--gutter) 56px; }
  .ss-hero__fade { left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.86); }
  .ss-hero__img--left { left: 0; }
  .ss-hero__img--right { left: auto; right: -142px; }
  .ss-hero__text { position: relative; left: auto; top: auto; width: auto; }
  .ss-hero__head, .ss-hero__lead, .ss-hero__body, .ss-hero__title-row { width: auto; max-width: 700px; }
  .ss-hero__titles { height: auto; }
  .ss-hero__title-row { height: auto; justify-content: center; }
  .ss-hero__title-line { flex-wrap: wrap; justify-content: center; }
  .ss-hero__kicker, .ss-hero__meta { white-space: normal; }

  .ss-research__intro { flex-direction: column; align-items: stretch; gap: 24px; }
  .ss-research__top { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; }
  .ss-research__top .btn-primary { position: static; }
  .ss-research__right { margin-top: 0; }
  .ss-research__heading, .ss-meta, .ss-lead, .ss-research__right { width: auto; height: auto; }
  .ss-research__heading { font-size: 52px; letter-spacing: -0.7px; }
  .ss-research__heading > span, .ss-research__heading > span + span { line-height: 1.05; }
  .ss-media-card { width: calc(50% - 5px); }
  .ss-media-card__img, .ss-media-card--video .ss-media-card__img { width: 100%; height: auto; aspect-ratio: 1; }
  .ss-media-card--video .ss-media-card__img { aspect-ratio: 410 / 523; }

  .ss-findings__media { width: 100%; height: auto; flex-wrap: wrap; }
  .ss-crop--jar { width: calc(50% - 6px); height: auto; aspect-ratio: 310 / 400; }
  .ss-similarity { width: calc(50% - 6px); }
  .ss-crop--pantone { width: 100%; height: auto; aspect-ratio: 607 / 400; }

  .feedback-grid--h414 .feedback-col { height: auto; }

  .ss-swap { height: auto; }
  .ss-swap__stage { width: auto; }
  .ss-swap__portrait { position: static; width: 100%; height: auto; }
  .ss-story { position: static; width: auto; height: auto; padding: 32px var(--gutter) 48px; display: flex; flex-direction: column; gap: 24px; }
  .ss-story__logo, .ss-story__text, .ss-info { position: static; width: auto; }
  .ss-story__logo img { width: 307.5px; }   /* the old 72 / 80px words: 0.75 of 1440 */
  /* client 10/6 pm: the stars are patches falling off the portrait — right under the photo, above the logo */
  .ss-story__stars { position: static; width: 100%; height: auto; order: -1; margin-top: -16px; }
  .ss-story__star37 { display: none; }
  .ss-info { flex-direction: column; gap: 32px; order: 2; }
  .ss-info__card, .ss-info__card:last-child, .ss-info__text { width: auto; }
  .ss-gallery { position: static; width: auto; height: auto; padding-bottom: 48px; }
  .ss-gallery__applied { position: static; width: 100%; max-width: 683px; height: auto; aspect-ratio: 1; }
  .ss-gallery__packs { position: relative; left: auto; top: auto; margin: 48px auto 0; }

  .ss-closing { height: auto; padding: 0 var(--gutter) 48px; align-items: stretch; }
  .ss-closing__media { position: relative; width: calc(100% + var(--gutter) * 2); height: 320px; margin-inline: calc(var(--gutter) * -1); aspect-ratio: auto; }
  .ss-closing::before { display: none; }
  .ss-closing__content { width: auto; margin-top: 40px; font-size: 36px; line-height: 1.12; }
  .ss-closing__content p + p { margin-top: 1.12em; }
}

@media (max-width: 767px) {
  .ss-hero__title { font-size: 48px; line-height: 1.05; letter-spacing: -1.44px; }
  .ss-hero__title em { font-size: 50px; letter-spacing: -1.44px; }
  .ss-hero__logo { width: 210px; height: auto; }
  /* client 10/6: two lines "BC Patch" / "→ skinswap", both starting at the same left edge (the pair is centred) */
  .ss-hero__title-line { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 8px; row-gap: 6px; }
  .ss-hero__title { grid-column: 1 / -1; justify-self: start; }
  .ss-hero__arrow { width: 60px; height: 24.5px; }
  /* client 10/10, Figma phone 'BC PATCH → SKIN SWAP' 2326:2728: 17 / 1.28 for the date and the lead, the body Playfair
     Medium 15 / 1.47 (1010b: skin-swap.html asks Google for 500 too — the same variable file as 400 / 600, so no extra download) */
  .ss-hero__meta { font-size: 17px; line-height: 1.28; letter-spacing: -0.17px; }
  .ss-hero__lead { font-size: 17px; line-height: 1.28; letter-spacing: -0.17px; }
  .ss-hero__body { font-size: 15px; font-weight: 500; line-height: 1.47; letter-spacing: -0.15px; }
  .ss-hero__img--left { left: -200px; }   /* (≤767) */
  .ss-hero__img--right { right: -360px; }

  .ss-research__heading { font-size: 38px; }
  .ss-meta { font-size: 18px; line-height: 1.28; }
  .ss-lead { font-size: 20px; line-height: 1.35; }
  .ss-media-card { width: 100%; }
  .ss-media-card__title { font-size: 24px; line-height: 1.35; }
  .ss-media-card__sub { font-size: 19px; line-height: 1.37; }

  .ss-findings__sub { font-size: 18px; line-height: 1.43; }
  .ss-crop--jar, .ss-similarity { width: 100%; }
  .ss-crop--jar { height: auto; aspect-ratio: 310 / 400; }
  /* client 10/7 (Figma 2283:1586): title · MATERIAL | ACCURACY · jar photo | 99.5% card · VISIBILITY | INCLUSIVITY ·
     the face/patch grid (3 pairs × 3 rows). Same markup: the card list and the media row melt into one 2-column grid */
  .ss-findings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; row-gap: 32px; align-items: start; }
  .ss-findings__title { grid-column: 1 / -1; }
  .ss-findings .insight-grid, .ss-findings__media { display: contents; }
  .ss-findings .insight-card:nth-child(1) { grid-area: 2 / 1; }
  .ss-findings .insight-card:nth-child(2) { grid-area: 2 / 2; }
  .ss-findings .ss-crop--jar { grid-area: 3 / 1; width: auto; }
  .ss-findings .ss-similarity { grid-area: 3 / 2; width: auto; }
  .ss-findings .insight-card:nth-child(3) { grid-area: 4 / 1; }
  .ss-findings .insight-card:nth-child(4) { grid-area: 4 / 2; }
  .ss-findings .ss-crop--pantone { grid-area: 5 / 1 / auto / -1; width: auto; }
  .ss-findings .insight-card { padding: 4px 0 8px 12px; gap: 12px; }
  .ss-findings .insight-card__copy { gap: 8px; }
  .ss-findings .insight-card__title { font-size: min(24px, calc(5.2 * var(--vw, 1vw))); line-height: 1.35; overflow-wrap: anywhere; }
  .ss-findings .insight-card__text { font-size: min(19px, calc(4.3 * var(--vw, 1vw))); line-height: 1.37; letter-spacing: -0.02em; }
  /* the 99.5% card keeps its 310×400 design, scaled to its half column (sizes in % of the card width) */
  .ss-findings .ss-similarity { height: auto; aspect-ratio: 310 / 400; container-type: inline-size; }
  .ss-similarity__result { height: calc(56.77cqw * var(--cqfix, 1)); gap: calc(2.9cqw * var(--cqfix-g, 1)); padding: calc(5.16cqw * var(--cqfix, 1)) calc(7.74cqw * var(--cqfix, 1)) calc(5.16cqw * var(--cqfix, 1)) calc(9.68cqw * var(--cqfix, 1)); }
  .ss-similarity__score { font-size: calc(18.39cqw * var(--cqfix, 1)); letter-spacing: calc(-0.37cqw * var(--cqfix, 1)); }
  .ss-similarity__summary { font-size: calc(7.42cqw * var(--cqfix, 1)); line-height: calc(9.03cqw * var(--cqfix, 1)); letter-spacing: calc(-0.15cqw * var(--cqfix, 1)); }
  .ss-similarity__method { font-size: calc(4.84cqw * var(--cqfix, 1)); }
  .ss-similarity__range { gap: calc(4.84cqw * var(--cqfix-g, 1)); padding: calc(5.81cqw * var(--cqfix, 1)) calc(5.16cqw * var(--cqfix, 1)) calc(3.23cqw * var(--cqfix, 1)); }
  .ss-similarity__range-title { height: calc(12.26cqw * var(--cqfix, 1)); font-size: calc(5.16cqw * var(--cqfix, 1)); line-height: calc(6.45cqw * var(--cqfix, 1)); }
  .ss-tones { height: calc(13.23cqw * var(--cqfix, 1)); }
  .ss-tones img { width: calc(13.23cqw * var(--cqfix, 1)); height: calc(13.23cqw * var(--cqfix, 1)); }
  .ss-similarity__note { font-size: calc(4.84cqw * var(--cqfix, 1)); line-height: calc(6.45cqw * var(--cqfix, 1)); letter-spacing: calc(-0.07cqw * var(--cqfix, 1)); }

  .ss-story__logo img { width: 239px; }     /* the old 56 / 62px words */
  .ss-story__text { font-size: 20px; }
  .ss-info__title { font-size: 24px; line-height: 1.35; }
  .ss-info__text { font-size: 18px; line-height: 1.28; }
  .ss-gallery__packs { zoom: 0.58; }

  .ss-closing__content { font-size: 28px; }
}
/* below 367px the credit (inside the 0.58-zoomed packs, 347px wide) reached the screen edge: its right edge is
   put on the text column's (gutter from the edge). Lengths here are zoomed too, hence the / 0.58 */
@media (max-width: 366px) {
  .ss-gallery__credit { left: auto; right: calc((max(0px, (calc(100 * var(--vw, 1vw)) - 347.42px) / 2) + 347.42px - calc(100 * var(--vw, 1vw)) + var(--gutter)) / 0.58); }
}

/* =========================================================
   Frame cycling (hard cut, 1.5s per frame, infinite) — client approved
   Every frame starts hidden; frame i shows during [(i-1)·1.5s, i·1.5s) of each n·1.5s loop.
   ========================================================= */
.cycle > img { opacity: 0; animation: var(--cycle-name) calc(var(--n) * 1.5s) step-end infinite; }
.cycle > img:nth-child(1) { animation-delay: 0s; }
.cycle > img:nth-child(2) { animation-delay: 1.5s; }
.cycle > img:nth-child(3) { animation-delay: 3s; }
.cycle > img:nth-child(4) { animation-delay: 4.5s; }
.cycle > img:nth-child(5) { animation-delay: 6s; }
.cycle > img:nth-child(6) { animation-delay: 7.5s; }
.cycle > img:nth-child(7) { animation-delay: 9s; }
.cycle > img:nth-child(8) { animation-delay: 10.5s; }
.cycle--4 { --n: 4; --cycle-name: cycle-4; }
.cycle--7 { --n: 7; --cycle-name: cycle-7; }
.cycle--8 { --n: 8; --cycle-name: cycle-8; }
@keyframes cycle-4 { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes cycle-7 { 0% { opacity: 1; } 14.2857%, 100% { opacity: 0; } }
@keyframes cycle-8 { 0% { opacity: 1; } 12.5%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cycle > img { animation: none; }
  .cycle > img:first-child { opacity: 1; }
}

/* =========================================================
   BREAKING CONFORMITY / Full Page 2221:27273
   ========================================================= */
.page-bc { background: var(--bc-paper); }
/* Hero / title and navigation 2221:27276 (343) */
.bc-hero { position: relative; height: 343px; overflow: hidden; background: var(--bc-paper); }
.bc-hero__inner {
  position: absolute;
  /* above 1440px it lines up with the centred 1440 page, like the header */
  left: max(var(--gutter), calc(50% - 625px));
  top: 108px;
  width: 1252px;
  display: flex;
  gap: 63px;
  align-items: flex-start;
}
.bc-hero__titles { width: 567px; display: flex; flex-direction: column; gap: 10px; }
.bc-hero__title {
  width: 631px;
  font-weight: 800;
  font-size: 68px;        /* Figma 2266:1168: 68 / 1.05 / −1.36, "conformity" lowercase */
  line-height: 1.05;
  letter-spacing: -1.36px;
  color: var(--ink-0f);
}
.bc-hero__title span { display: block; white-space: pre; }
.bc-hero__meta { width: 600px; height: 27px; font-weight: 600; font-size: 21px; line-height: 1.28; letter-spacing: -0.21px; color: var(--io-black); }
.bc-hero__desc {
  position: absolute;
  left: 630px;
  top: 0;
  width: 622px;
  font-weight: 500;
  font-size: 18px;
  line-height: 33px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-0f);
}
/* 섹션시작 라인 instance 2221:27283 without number; its label is an invisible zero-width space */
.bc-rule { display: flex; align-items: center; height: 20px; margin-bottom: -2px; padding-left: 106px; }
.bc-rule::before { content: ""; width: 1234px; height: 1px; background: var(--line-rule); }

/* Gallery / Hermes description overlay 2221:27284 — BREAKING CONFORMITY-갤러리 2221:27865 */
.bc-gallery { position: relative; width: 1440px; max-width: 100%; margin-inline: auto; padding: 50px 92px 92px var(--gutter); }
.bc-gallery__stage { width: 1253px; display: flex; flex-direction: column; gap: 130px; }
.bc-row { display: flex; justify-content: space-between; align-items: flex-start; }
.bc-work { background: #fff; display: flex; flex-direction: column; }
.bc-work__img { display: block; width: 100%; object-fit: cover; }
.bc-work figcaption {
  height: 118px;
  display: flex;
  flex-direction: column;
  gap: 21px;
  padding: 10px 0;
  background: #fff;
  color: #000;
  text-align: center;
}
.bc-work__title { font-weight: 700; font-size: 16px; line-height: 1.8; letter-spacing: -0.16px; }
.bc-work__meta { font-weight: 500; font-size: 13px; line-height: 16px; }
.bc-gallery__stage { min-height: 8279px; }   /* client 10/7: the gallery component 2283:1203 is 8279 tall */
@media (min-width: 1280px) { .bc-row:nth-child(6), .bc-row:nth-child(9), .bc-row:nth-child(10) { height: 732px; } }   /* Figma rows 05, 07, 08 are 732 (their 733 work overflows by 1) */
/* Not Like Us video 2248:29199: teaser 615×463 + WATCH FULL FILM under it (210, 492 inside the 617 column) */
.bc-teaser { position: relative; height: 581px; }
.bc-teaser__video { display: block; width: 615px; max-width: 100%; height: 463px; object-fit: cover; background: #1a1a1a; }
.bc-teaser__watch { position: absolute; left: 210px; top: 492px; }

/* Description flip (client 10/6): a work with a Description frame turns the card next to it over (Y axis, 0.6s);
   the back is the Figma "Description / …" frame — #F6F5F3, 13px/19px centred in a 402px column, same size as the card */
.bc-work { perspective: 1800px; }
.bc-work[data-desc] { cursor: pointer; }
.bc-work:not([data-desc]) { -webkit-tap-highlight-color: transparent; }   /* client 10/10: works without a description do not react to a tap */
.bc-card { position: relative; transform-style: preserve-3d; transition: transform 0.6s ease; }
.bc-card__front, .bc-card__back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* client 10/9: the caption is part of the card again (it turns over with the picture). It sits beside the front, not
   in it, so its text is drawn exactly as before. Where the turn is drawn flat (WebKit without 3D compositing —
   Playwright's WebKit drew the back over every picture), the stacking order shows the right side: picture and caption
   above the back while closed, the back above them while open */
.bc-card__front { position: relative; z-index: 2; }   /* above the caption, as before (the picture's last pixel row) */
.bc-card > figcaption { position: relative; z-index: 1; }
.bc-work.is-flipped :is(.bc-card__front, .bc-card > figcaption) { z-index: 0; }
.bc-work.is-flipped .bc-card__back { z-index: 3; }
.bc-card__back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  background: #f6f5f3;
  /* QA 10/8: not a scroll container while closed (Chromium sent the wheel to the turned-away back of every card, and
     overscroll-behavior: contain kept it from the page). Only an open description longer than its picture scrolls
     (.is-long, bc-desc.js), and at its ends the wheel / finger goes on to the page */
  overflow: hidden;
  cursor: pointer;
}
.bc-card__back > * { margin-block: auto; }
.bc-work.is-flipped .bc-card__back.is-long { overflow-y: auto; }   /* a description longer than the card scrolls inside it (client 10/7) */   /* centred when it fits, from the top when it scrolls */
.bc-work.is-flipped .bc-card { transform: rotateY(180deg); }
.bc-desc { width: 402px; max-width: calc(100% - 32px); font-weight: 500; font-size: 13px; line-height: 19px; text-align: center; color: #000; }
.bc-desc__gap { height: 19px; }
/* client 10/7: on tablets and phones the card keeps its size and the words get a little smaller so even the longest
   description (Hermes) fits without scrolling; PC keeps Figma's 13/19 */
@media (max-width: 1279px) {
  .bc-desc { font-size: 12px; line-height: 17px; }
  .bc-desc__gap { height: 17px; }
}
@media (max-width: 374px) {   /* 320–374: the card is shorter still */
  .bc-desc { font-size: 10.5px; line-height: 14px; max-width: calc(100% - 24px); }
  .bc-desc__gap { height: 14px; }
}
@media (prefers-reduced-motion: reduce) {   /* no turning: the description fades in over the card */
  .bc-card { transition: none; }
  .bc-work.is-flipped .bc-card { transform: none; }
  .bc-card__back { transform: none; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s; }
  .bc-work.is-flipped .bc-card__back { opacity: 1; visibility: visible; }
}

/* Loop works (client request): same slot as the single image, images pre-cut to one size */
.bc-loop { position: relative; overflow: hidden; background: #fff; }
.bc-loop img { position: absolute; left: 0; width: 100%; object-fit: cover; }
/* Luminosity-all 2221:27971 — CSS crossfade, 10s: 1 (2s) → 2 → 3 → 4 (1s each) → 4 (2s) → 3 → 2 → 1 (1s each) */
.bc-loop--lum img { top: 0; height: 100%; }
.bc-loop--lum img:nth-child(2) { animation: bc-lum-2 10s linear infinite; }
.bc-loop--lum img:nth-child(3) { animation: bc-lum-3 10s linear infinite; }
.bc-loop--lum img:nth-child(4) { animation: bc-lum-4 10s linear infinite; }
@keyframes bc-lum-2 { 0%, 20% { opacity: 0; } 30%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bc-lum-3 { 0%, 30% { opacity: 0; } 40%, 80% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes bc-lum-4 { 0%, 40% { opacity: 0; } 50%, 70% { opacity: 1; } 80%, 100% { opacity: 0; } }
/* Severance of Identities-all 2221:27977 — 753×613 frames in the 753×615 slot, hard cut 1.5s each */
.bc-loop--sev img { top: 0.1626%; height: 99.6748%; }
@media (prefers-reduced-motion: reduce) {
  .bc-loop--lum img:not(:first-child) { animation: none; opacity: 0; }
}

@media (max-width: 1279px) {   /* the gallery rows are 1253px wide: stack at 1279 and below (1280–1439 shows the 1440 layout scaled, fit-1440.js) */
  .bc-hero { height: auto; padding: 120px var(--gutter) 40px; }
  .bc-hero__inner { position: static; width: auto; flex-direction: column; gap: 32px; }
  .bc-hero__titles, .bc-hero__title, .bc-hero__meta, .bc-hero__desc { width: auto; height: auto; }
  .bc-hero__desc { position: static; }
  .bc-hero__title { font-size: 56px; line-height: 1.03; letter-spacing: -1.44px; }
  .bc-rule { padding-inline: var(--gutter); margin-bottom: 0; }
  .bc-rule::before { flex: 1; width: auto; }
  .bc-gallery { width: auto; padding: 48px var(--gutter) 80px; display: flex; flex-direction: column; gap: 56px; }
  .bc-gallery__stage { display: contents; }
  .bc-gallery__stage { min-height: 0; }
  /* tablet: two works side by side */
  .bc-row { gap: 24px; }
  .bc-work, .bc-teaser { flex: 1 1 0; min-width: 0; width: auto !important; }
  .bc-teaser { height: auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .bc-teaser__video { width: 100%; height: auto; aspect-ratio: 615 / 463; }
  .bc-teaser__watch { position: static; }
  .bc-work__img { height: auto !important; }
  .bc-loop { height: auto !important; }
  .bc-loop--lum { aspect-ratio: 626 / 525; }
  .bc-loop--sev { aspect-ratio: 626 / 511; }
  .bc-work figcaption { height: auto; gap: 12px; }
}
@media (max-width: 767px) {
  .bc-row { flex-direction: column; gap: 56px; }
  .bc-work, .bc-teaser { flex: none; width: 100% !important; }
  .bc-hero__title { font-size: 40px; }
  .bc-hero__meta { font-size: 18px; }
  .bc-hero__desc { font-size: 15px; line-height: 1.7; }
}

/* =========================================================
   FOOTER 2221:28009 — 1440×225, gradient per page (Figma instance fills)
   ========================================================= */
html { scroll-padding-top: var(--header-h); }
.site-footer {
  display: flex;
  align-items: flex-end;
  height: 225px;
  padding: 25px max(93px, calc((100% - 1254px) / 2));
  font-weight: 500;
  text-transform: uppercase;
  color: var(--io-white);
  background-image: linear-gradient(to right, #7a481c, #582d07);   /* base: SKIN SWAP 2221:27241 */
}
.site-footer--gray { background-image: linear-gradient(to left, #959595 0%, #717171 44.096%, #060606 100%); }   /* homepage / BC / About */
.site-footer--rust { background-image: linear-gradient(to left, #2c1515 0%, #41311a 44.096%, #570806 100%); }   /* ARCHIVE OF SKIN gallery */
.site-footer--purple { background-image: linear-gradient(to right, #682456, #210319); }                        /* BruiseTrace */
.site-footer__inner { width: 1254px; max-width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.site-footer__nav { width: 248px; flex: none; font-size: 18px; line-height: 35px; }
.site-footer a { text-decoration: underline; text-decoration-thickness: from-font; text-decoration-thickness: max(1px, 0.04em); text-underline-position: from-font; text-decoration-skip-ink: none; }
.site-footer__info { width: 395px; font-style: normal; text-align: right; letter-spacing: 1px; font-size: 18px; line-height: 33px; }
.site-footer__email { font-weight: 600; font-size: 20px; text-transform: none; }   /* 1017d: iokim.application@gmail.com, lowercase as Figma writes it (FOOTER 2411:3070) */

@media (max-width: 767px) {
  .site-footer { height: auto; padding: 40px var(--gutter) 25px; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__nav { font-size: 15px; line-height: 30px; }
  .site-footer__info { width: auto; text-align: left; font-size: 14px; line-height: 26px; }
  .site-footer__email { font-size: 17px; }
}

/* =========================================================
   Bars (VIEW THE SERIES / EXPLORE THE PROJECT) — 1440×47
   ========================================================= */
.home-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 47px;
  padding-right: 32px;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.28;
  letter-spacing: -0.21px;
  color: #000;
}
.home-bar--red { background: var(--nav-archive); font-size: 22px; line-height: 1; letter-spacing: 0.44px; }
.home-bar--green { background: var(--nav-conformity); }
.home-bar--yellow { background: var(--nav-bcpatch); }
.home-bar--blue { background: var(--nav-bruisetrace); }

/* =========================================================
   HOME (homepage-대문 2221:27040, 1440×7269)
   ========================================================= */

/* ---- HERO 2221:27041 (954) ---- */
.home-hero { position: relative; height: 800px; background: #fff; }   /* 2248:28385: video + WATCH FULL FILM fit one 1440×810 screen */
.home-statement {
  position: absolute;
  left: 0;
  top: var(--header-h);
  width: 100%;
  padding: 35px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  --u: 1px;              /* 1 Figma px; scaled below 1100px */
  background: #fff;
  color: var(--ink-11);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  white-space: pre;
}
/* the five lines are separate boxes, each trimmed to cap height–baseline (Figma trims the same way: line 1's caps start
   at 35 = the frame padding). The spaces between them are set one by one from Figma statement-container 2266:935,
   baseline of one line to the cap top of the next: 24.6 / 27.8 / 23.2 / 13.9 (the mixed 58px italic makes a browser
   line box differ from Figma's, so line heights are not used). Ink gaps then read 24.2 / 27.3 / 23.0 / 13.3 as in Figma */
.home-statement > .home-statement__a, .home-statement > .home-statement__c { display: contents; }
.home-statement__line, .home-statement > .home-statement__b { display: block; line-height: 1; text-box: trim-both cap alphabetic; }
.home-statement__a > .home-statement__line + .home-statement__line { margin-top: calc(24.6 * var(--u)); }
.home-statement > .home-statement__b { margin-top: calc(27.8 * var(--u)); }
.home-statement__c > .home-statement__line:first-child { margin-top: calc(23.2 * var(--u)); }
.home-statement__c > .home-statement__line + .home-statement__line { margin-top: calc(13.9 * var(--u)); }
.home-statement__a { font-size: 37px; }
.home-statement__a em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 58px;
  line-height: 0;        /* the italic never changes its line's box: it may stick out above and below */
  letter-spacing: 0.58px;
  text-transform: none;
  text-decoration: underline;
  /* Figma "auto" underline = the font's own (post table) thickness and position. max(1px, …) repeats the post value
     (Playfair 0.020, Plus Jakarta Sans 0.040, Baskervville 0.035 em) with a 1px floor: from-font alone gives WebKit on
     2× screens a 0.5px line for small sizes */
  text-decoration-thickness: from-font; text-decoration-thickness: max(1px, 0.02em);
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}
.home-statement__b { font-size: 64px; letter-spacing: -1.28px; white-space: nowrap; }   /* the trailing space collapses: centred without it, as in Figma */
.home-statement__c { font-size: 37px; }
/* no text-box support: trim with Plus Jakarta Sans 800 metrics (ascent 1.04, descent 0.22, cap 0.745 em):
   at line-height 1 the cap top sits 0.165em below the line top and the baseline 0.09em above its bottom */
@supports not (text-box: trim-both cap alphabetic) {
  .home-statement__line, .home-statement > .home-statement__b { margin-block: -0.165em -0.09em; }
  .home-statement__a > .home-statement__line + .home-statement__line { margin-top: calc(24.6 * var(--u) - 0.165em); }
  .home-statement > .home-statement__b { margin-top: calc(27.8 * var(--u) - 0.165em); }
  .home-statement__c > .home-statement__line:first-child { margin-top: calc(23.2 * var(--u) - 0.165em); }
  .home-statement__c > .home-statement__line + .home-statement__line { margin-top: calc(13.9 * var(--u) - 0.165em); }
}
/* Hero Section 2248:28394 — the landing video fills the 1440×419 box (cover); square corners */
.home-hero__media { position: absolute; left: 0; top: 381px; width: 100%; height: 419px; overflow: hidden; background: #2a1410; }
.home-hero__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 버튼스타일 "WATCH FULL FILM": right edge on the centred 1440 page (1344), 40px above the bottom */
.home-hero__watch { position: absolute; right: max(96px, calc(50% - 624px)); bottom: 40px; }
/* Full film lightbox: black over everything, the film as large as fits (16:9) with a little margin, X top right */
.film-lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #000; opacity: 0; transition: opacity 0.25s ease; }
.film-lightbox[hidden] { display: none; }
.film-lightbox.is-open { opacity: 1; }
.film-lightbox__frame { width: min(calc(calc(100 * var(--vw, 1vw)) - 96px), calc((100vh - 96px) * 16 / 9)); width: min(calc(calc(100 * var(--vw, 1vw)) - 96px), calc((var(--vh100, 100svh) - 96px) * 16 / 9)); aspect-ratio: 16 / 9; }
.film-lightbox__video { display: block; width: 100%; height: 100%; background: #000; }
.film-lightbox__close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; background: none; color: #fff; cursor: pointer; }
html.film-open { overflow: hidden; }
/* Not Like Us film is 4:3 */
.film-lightbox__frame--4x3 { width: min(calc(calc(100 * var(--vw, 1vw)) - 96px), calc((100vh - 96px) * 4 / 3)); width: min(calc(calc(100 * var(--vw, 1vw)) - 96px), calc((var(--vh100, 100svh) - 96px) * 4 / 3)); aspect-ratio: 4 / 3; }
@media (max-width: 767px) { .film-lightbox__frame { width: calc(100 * var(--vw, 1vw)); } }   /* phones: the film fills the width */
@media (prefers-reduced-motion: reduce) { .film-lightbox { transition: none; } }
/* sound on/off (not in Figma): bottom-left corner, 44×44 tap area, small round icon */
.home-hero__sound {
  position: absolute;
  left: max(var(--gutter), calc(50% - 625px));
  bottom: 43px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.home-hero__sound::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); }
.home-hero__sound svg { position: relative; }
.home-hero__sound-on, .home-hero__sound[aria-pressed="true"] .home-hero__sound-off { display: none; }
.home-hero__sound[aria-pressed="true"] .home-hero__sound-on { display: block; }

/* ---- ARCHIVE OF SKIN 2221:27053 (1350 + bar 47) ---- */
.home-archive { position: relative; height: 1350px; overflow: hidden; background: #050505; }
.home-archive .as-stage { position: relative; width: 1440px; height: 100%; margin-inline: auto; }
.home-archive__head { position: absolute; left: 93px; top: 85px; width: 1251px; display: flex; gap: 132px; align-items: flex-start; }
.home-archive__titles { width: 600px; display: flex; flex-direction: column; gap: 10px; }
.home-archive__title { font-weight: 800; font-size: 68px; line-height: 1.05; letter-spacing: -1.36px; color: var(--io-red); }
.home-archive__meta { height: 27px; font-weight: 500; font-size: 21px; line-height: 1.28; letter-spacing: -0.21px; color: var(--io-white); }
.home-archive__desc { width: 518px; font-size: 14px; line-height: 1.36; letter-spacing: -0.14px; color: #fff; opacity: 0.9; }
.home-archive__statement {
  position: absolute;
  left: 432px;
  top: 792px;
  width: 632px;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.12;
  text-align: center;
  color: #fff;
  white-space: pre;
  pointer-events: none;
}

/* Works: photos only, each a link to its work in archive-of-skin.html.
   Box = the Figma layer box. Multi-angle works stack equal-size frames (.as-piece__canvas) and cycle.
   Hover / keyboard focus: that work pauses and grows to 120% (Figma 2221:27242 is the 120% reference);
   transform-origin is set per work so the enlarged work stays inside the 1440×1350 section. */
.as-piece { position: absolute; display: block; }
.as-piece__canvas { position: absolute; display: block; pointer-events: none; }
.as-piece__canvas img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform-origin: var(--ox) var(--oy); scale: var(--rs, 1); transition: scale 0.25s ease; }   /* --rs: a cut drawn a little smaller at rest (below) */
.as-piece--box { overflow: hidden; transform-origin: var(--ox) var(--oy); transition: scale 0.25s ease; }
.as-piece--box img { position: absolute; max-width: none; }
.as-piece:is(:hover, :focus-visible) { z-index: 5; }
.as-piece:is(:hover, :focus-visible) img { animation-play-state: paused; }
.as-piece:is(:hover, :focus-visible) .as-piece__canvas img,
.as-piece--box:is(:hover, :focus-visible) { scale: calc(var(--rs, 1) * var(--hs, 1.2)); }   /* --hs: a lower scale for the few works that need it (QA 10/8, below) */
@media (prefers-reduced-motion: reduce) {
  .as-piece__canvas img, .as-piece--box { transition: none; }
}

/* canvas boxes: left/top/width/height relative to the Figma layer box (frame 1 = the Figma image) */
.as-piece--dress { left: 1045px; top: 486px; width: 337px; height: 795px; }
.as-piece--dress .as-piece__canvas { left: -124.16px; top: 0.32px; width: 584.66px; height: 795.93px; --ox: 49.46%; --oy: 67.18%; }
/* frame 4 (leg raised) runs 12px past the 1440 edge: moved 14px left; its origin keeps the 120% state inside */
.as-piece--dress .as-piece__canvas img:nth-child(4) { translate: -14px 0; --ox: 89.12%; }
.as-piece--abraxas { left: 235px; top: 230px; width: 393px; height: 512px; }
.as-piece--abraxas .as-piece__canvas { inset: 0; --ox: 8.91%; --oy: 23.44%; }
.as-piece--archive { left: 248px; top: 1086px; width: 283px; height: 206px; }
.as-piece--archive .as-piece__canvas { left: -8.03px; top: -14.57px; width: 307.44px; height: 220.82px; --ox: 2.61%; --oy: 6.6%; }
.as-piece--boundary { left: 666px; top: 1011px; width: 244px; height: 295px; }
.as-piece--boundary .as-piece__canvas { left: 8.95px; top: 11.92px; width: 230px; height: 282.93px; --ox: -32.15%; --oy: 22.3%; }
.as-piece--rubiks { left: 585px; top: 486px; width: 258px; height: 263px; }
.as-piece--rubiks .as-piece__canvas { left: -29.94px; top: -6px; width: 305.57px; height: 268.27px; --ox: -6.56%; --oy: 20.87%; }
.as-piece--voodoo { left: 142px; top: 729px; width: 238px; height: 307px; }
.as-piece--voodoo .as-piece__canvas { left: 6.63px; top: -49.61px; width: 218.53px; height: 400.05px; --ox: -85.4%; --oy: 37.4%; }
/* Hair Norigae: single cutout (the other angles are photos with a concrete background) — static.
   Figma's top-left origin would push the 120% state 34px below the section; origin moved down to 17.5%. */
.as-piece--norigae { left: 16px; top: 206px; width: 236px; height: 982px; --ox: 0%; --oy: 17.5%; }
.as-piece--norigae img { left: -167.18%; top: 0; width: 419.85%; height: 100%; }
/* client 10/8 (Figma '08-Hair Norigae / Bottom fade'): the hair fades out at the bottom — opaque to 78%, half at 90%,
   gone at the end (every width) */
.as-piece--norigae { -webkit-mask-image: linear-gradient(#000 78%, rgba(0, 0, 0, 0.5) 90%, transparent); mask-image: linear-gradient(#000 78%, rgba(0, 0, 0, 0.5) 90%, transparent); }
/* Ecdysis Animation 2088:7852 — 4 angles, object-fit: cover (source 722×759 vs box 361×379) */
.as-piece--ecdysis { left: 817px; top: 253px; width: 361px; height: 379px; --ox: 30.47%; --oy: 85.75%; }
.as-piece--ecdysis img { inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- BREAKING CONFORMITY with marquees 2221:27072 (804) ---- */
.home-bc { position: relative; height: 804px; overflow: hidden; background: #fff; }
.home-bc::before { content: ""; position: absolute; left: 0; top: 0; width: 1280px; height: 1px; background: rgba(0, 0, 0, 0.05); z-index: 1; }
.marquee { position: relative; height: 265px; overflow: hidden; }
.marquee__track { position: absolute; top: 0; display: flex; gap: 5px; will-change: translate; }
.marquee__track--left { left: -584.86px; align-items: flex-start; animation: marquee-left 29.2659s linear infinite; }
.marquee__track--right { left: -7335px; align-items: flex-end; animation: marquee-right 27.0147s linear infinite; }
.marquee__item { flex: none; position: relative; overflow: hidden; display: block; cursor: pointer; }   /* each work links to its place on breaking-conformity.html */
.marquee__item img { width: 100%; height: 100%; object-fit: cover; }
.marquee__item--crop img { position: absolute; max-width: none; left: -2.61%; top: -9.23%; width: 106.6%; height: 116.12%; }
/* Each track holds 3 identical sets of 19 works. One set + its gaps = 4389.889px
   (sum of item widths 4294.889 + 19 × 5px gap), so moving exactly that far lands on an identical frame.
   Speed kept from the previous build (client request): left 150px/s (4389.889 / 150 = 29.2659s),
   right 162.5px/s (4389.889 / 162.5 = 27.0147s). Not reverted to the Figma prototype values (120 / 130). */
@keyframes marquee-left { from { translate: 0 0; } to { translate: -4389.889px 0; } }
@keyframes marquee-right { from { translate: 0 0; } to { translate: 4389.889px 0; } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}
.home-bc__text { position: relative; height: 227px; background: #fff; }
.home-bc__row {
  position: absolute;
  left: 131px;
  top: 20px;
  width: 1213px;
  height: 180px;
  display: flex;
  align-items: center;
  gap: 62px;
}
.home-bc__meta { width: 310px; flex: none; font-weight: 500; font-size: 21px; line-height: 1.28; letter-spacing: -0.21px; text-align: right; color: #000; }
.home-bc__title { width: 421px; flex: none; font-weight: 800; font-size: 68px; line-height: 1.05; letter-spacing: -1.36px; text-align: center; color: var(--ink-0f); }
.home-bc__title span { display: block; }
.home-bc__title span:first-child { text-transform: uppercase; }
.home-bc__desc { width: 396px; flex: none; font-size: 14px; line-height: 1.36; letter-spacing: -0.14px; color: #000; }

/* ---- QUESTION 2221:27162 (1254) ---- */
/* 1012c: the band grows with its words. It was 1254 high with the words placed 75 from the top: on an iPad (1280+ page
   zoom, where iPadOS draws text at its unzoomed size) the BruiseTrace question took three lines and '-BruiseTrace' was
   cut off at the bottom. Now the words are in the flow, 75 above them, and 1254 is the least height (Figma's 1254 =
   75 + 1106 + 73): where the words fit (Chrome, Mac) it is the same band as before. 60 under them, not 73: under the
   1280–1439 zoom the same words take 1103–1109 (1109 at 1366), so the band stays 1254 there too and grows only with
   words that come out taller */
.home-question { position: relative; min-height: 1254px; padding: 75px 0 60px; overflow: hidden; background: #e5e5e5; text-align: center; }
.home-question__inner {
  position: relative;
  left: calc(50% - 450px);   /* 270px at 1440 */
  width: 894px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.home-question__head { width: 952px; flex: none; display: flex; flex-direction: column; gap: 20px; color: #2d2d4e; text-transform: uppercase; }
.home-question__title { font-weight: 800; font-size: 60px; line-height: 62px; white-space: pre-wrap; }
.home-question__title span { display: block; }
.home-question__sub { font-weight: 600; font-size: 30px; line-height: 48px; letter-spacing: -1px; }
.home-question__list { width: 862px; display: flex; flex-direction: column; align-items: center; gap: 50px; }
.home-q { width: 900px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.home-q__year { font-weight: 600; font-size: 22px; line-height: 1; letter-spacing: 0.44px; color: #676768; opacity: 0.55; }
.home-q__quote { font-family: var(--font-serif); font-weight: 600; font-size: 38px; line-height: 1.2; letter-spacing: -0.38px; color: #1a1a2e; }
.home-q__source { font-weight: 600; font-size: 27px; line-height: normal; color: var(--blue-action); opacity: 0.65; white-space: nowrap; }
.home-q__source--bold { font-weight: 700; }
/* 1018d: the four blue source words underline under the mouse — the footer's underline (.site-footer a) in their own blue
   (no colour set: currentColor); devices that hover only, so a tap never leaves it on a phone. No animation, nothing moves */
@media (hover: hover) {
  .home-q__source a:hover { text-decoration: underline; text-decoration-thickness: from-font; text-decoration-thickness: max(1px, 0.04em); text-underline-position: from-font; text-decoration-skip-ink: none; }
}

/* ---- BC PATCH → SKIN SWAP 2221:27184 (998; Figma leaves 3px under the 47px bar) ---- */
.home-project { padding-top: 42px; overflow: hidden; background: #fff; }
.home-project--bcp { height: 998px; }
.home-project--bt { height: 986px; }   /* client 10/7 (Figma 2283:1128): 42 + 304 + 593, then the 47px bar like the other bars (client: not covered by the band) */
.home-bcp__text { height: 476px; overflow: hidden; display: flex; gap: 34px; padding-inline: var(--gutter); }
.home-bcp__group { display: flex; flex-direction: column; gap: 40px; width: 617px; flex: none; overflow: hidden; }
.home-bcp__group--swap { position: relative; width: 600px; height: 424px; }
.home-bcp__titles { display: flex; flex-direction: column; gap: 10px; }
.home-bcp__title-row { position: relative; width: 617px; }
.home-bcp__title { width: 653px; font-weight: 800; font-size: 68px; line-height: 1.05; letter-spacing: -1.36px; text-transform: uppercase; color: var(--ink-0f); white-space: pre-wrap; }
.home-bcp__title em { font-family: var(--font-serif); font-style: italic; font-weight: 600; line-height: 1; text-transform: none; }
.home-bcp__body { width: 600px; }
/* Figma: → in Crimson Text Regular, & in Crimson Text SemiBold (the faces above cover only those two characters) */
.home-bcp__group .home-sub__flow, .home-body.home-bcp__body { font-family: "Crimson Text IO", "IO Turn", var(--font-serif); }
.home-bt__heads p { font-family: "Crimson Text IO", "IO Turn", var(--font-serif); }   /* "Revise ↺"; 1010e: → in Crimson Text like BC PATCH (client: "BRUISE Trace 본문에서는 화살표 수정이 안된것같아요") */
.home-bcp__title--swap { width: 100%; }
.home-bcp__arrow { position: absolute; left: 485px; top: 5px; width: 132px; height: 54px; overflow: hidden; }
.home-bcp__arrow img { position: absolute; max-width: none; left: -4.55%; top: -0.15%; width: 109.85%; height: 100.31%; }
.home-sub { display: flex; flex-direction: column; gap: 6px; }
.home-sub__meta { font-weight: 500; font-size: 21px; line-height: 1.28; letter-spacing: -0.21px; color: var(--grays-gray); }
.home-sub__flow {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.2px;
  color: #377beb;          /* client 10/7: no underline, blue (Figma 2283:1114 / 2283:1121) */
}
.home-body { font-family: var(--font-serif); font-size: 18px; line-height: 1.58; letter-spacing: -0.18px; color: #202020; }
.home-bcp__group--swap .home-body { position: absolute; left: 0; bottom: 0; width: 600px; }
.home-bcp__images { height: 430px; display: flex; gap: 30px; overflow: hidden; }
.home-bcp__img { position: relative; flex: 1 0 0; aspect-ratio: 705 / 430; overflow: hidden; display: block; }   /* links: pantone → skin-swap #bc-patch, applying → #skinswap */
.home-bcp__img img { position: absolute; max-width: none; }
/* same framing as Figma (pantone: slight top crop; applying: window from 26% down) without stretching */
.home-bcp__img--pantone img, .home-bcp__img--applying img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-bcp__img--pantone img { inset: auto; left: -0.146%; top: -4.396%; width: 101.96%; height: 103%; object-fit: fill; }   /* QA 10/8: Figma 2300:1323's crop (98.08% × 97.09% of the photo from 0.14% / 4.27%) — the whole grid and its labels */
.home-bcp__img--applying img { object-position: 50% 41%; }

/* ---- BRUISE TRACE 2221:27207 (1014) ---- */
.home-bt__text { position: relative; height: 304px; overflow: hidden; padding-inline: var(--gutter); }
.home-bt__titles { display: flex; flex-direction: column; gap: 12px; }
.home-bt__title { width: 416px; height: 58px; display: flex; align-items: center; font-weight: 800; font-size: 68px; line-height: 1.05; letter-spacing: -1.36px; color: var(--ink-0f); white-space: pre; }   /* Figma 2266:1101 "BRUISE " 68 / 1.05 / −1.36 */
.home-bt__title em { font-family: var(--font-serif); font-style: italic; font-weight: 600; line-height: 1; letter-spacing: 0; }   /* "Trace": no letter spacing in Figma */
.home-bt__row { position: absolute; left: var(--gutter); top: 131px; width: 1250px; height: 140px; }   /* Figma 2283:1133 / 2283:1135: both start 131 into the text block */
.home-bt__desc { position: absolute; left: 651px; top: 0; width: 596px; }   /* x 746 at 1440 */
.home-bt__heads { position: absolute; left: -2px; top: 0; width: 638px; font-family: var(--font-serif); font-size: 21px; line-height: 1.35; }
.home-bt__heads h3 { font-size: inherit; font-weight: 700; letter-spacing: -0.21px; text-transform: uppercase; color: #000; }
.home-bt__heads p { white-space: nowrap; font-size: 20px; font-weight: 600; letter-spacing: -0.2px; color: #377beb; }   /* Figma 2283:1138 / 2283:1141: Playfair SemiBold 20 / 1.35, blue, no underline */
.home-bt__heads p.gap-line { height: 1.35em; }
@media (min-width: 1280px) {
  .home-bt__heads p.gap-line { height: 30px; }   /* Figma 2283:1135: the two heads 30 apart */
}
.home-bt__closing {
  position: relative;
  height: 593px;
  overflow: hidden;
  background-image:
    linear-gradient(270deg, #4e1b40 0%, #4e1b40 43.101%, #4e1b40 48.195%, rgba(78, 27, 64, 0.7) 53.459%),
    linear-gradient(90deg, #4e1b40 0%, #4e1b40 100%);
}
.home-bt__bruises { position: absolute; left: 0; top: 0; bottom: 0; aspect-ratio: 654 / 545; }
.home-bt__bruises img { width: 100%; height: 100%; object-fit: cover; }
.home-bt__bruises::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(78, 27, 64, 0.2) 20.339%, rgba(78, 27, 64, 0.5) 67.846%, rgba(78, 27, 64, 0.8) 85.492%, #4e1b40 100.01%); }
.home-bt__preview { position: absolute; left: 460px; top: 24px; width: 861px; height: 545px; }   /* Figma 2283:1146 App Preview: video at x 765, the case count + button 40px left of it */
.home-bt__cta {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 260px;
  height: 170px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 25px;
}
.home-bt__cases { text-align: center; color: #fff; font-weight: 600; font-size: 22px; line-height: 1.26; letter-spacing: 0.44px; white-space: nowrap; }
.home-bt__cases strong { font-weight: 700; font-size: 30px; }
/* BruiseTrace-video 2221:27228 — 5px stroke, square corners */
.home-bt__app {
  position: absolute;
  right: 0;
  top: 0;
  width: 556px;
  height: 545px;
  overflow: hidden;
  border: 5px solid rgba(232, 232, 232, 0.4);
  background: #fff;
}
.home-bt__app { border: 0; outline: 5px solid rgba(232, 232, 232, 0.4); }   /* Figma 2283:1150: the 5px stroke is drawn outside the 556×545 video and shows the purple behind it */
/* Figma fills the box with the recording and cuts the navy logo bar: the 694×680 part from (11, 33) of the 720×720 frame */
.home-bt__app video, .bt-how .browser__screen video { position: absolute; left: -1.585%; top: -4.853%; width: 103.746%; height: 105.882%; max-width: none; object-fit: fill; }
/* phones (client 10/9, iPhone capture): the 566px BruiseTrace-page frame ran past the screen and cut the recording's
   left and right (file names, last column). On phones both frames keep Figma's 556:545 and fit the column; the
   recording keeps its full width (nothing cut left or right) and only its height is cut, top:bottom 33:7 as in Figma */
@media (max-width: 767px) {
  .bt-how .browser { width: 100%; }
  .bt-how .browser__screen { width: 100%; height: auto; aspect-ratio: 556 / 545; }
  .home-bt__app video, .bt-how .browser__screen video { left: 0; top: -1.665%; width: 100%; height: 102.018%; }
}

/* ---- ABOUT IO 2221:27231 (848) ---- */
.home-about { position: relative; height: 725px; overflow: hidden; background: #fff; }   /* ABOUT IO 2248:28574 */
.home-about__stage { position: relative; width: 1440px; height: 100%; margin-inline: auto; }
.home-about__paper { position: absolute; left: -39px; top: 0; width: 1525px; height: 725px; object-fit: cover; max-width: none; }
.home-about__text {
  position: absolute;
  left: 150px;   /* Text Content 2248:28576: 1163 wide at 150, 116 */
  top: 116px;
  width: 1163px;
  font-weight: 800;
  font-size: 60px;
  line-height: 62px;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  color: #000;
  white-space: pre-wrap;
  text-box: trim-both cap alphabetic;
}
.home-about__text > span { display: block; }
.home-about__text .mid { font-size: 40px; line-height: 61px; margin-top: 7.5px; }   /* Figma 2266:1125: the 40px lines are 61px apart (the 60px lines' 62px made each line 1px lower) */
.home-about__text .mid span { font-weight: 600; letter-spacing: -0.4px; }
.home-about__text .mid em {
  font-family: var(--font-baskerville);
  font-style: italic;
  font-weight: 700;
  font-size: 39px;
  letter-spacing: -0.39px;
  text-decoration: underline;
  text-decoration-thickness: from-font; text-decoration-thickness: max(1px, 0.035em);
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
@media (min-width: 1280px) {
  .home-about__text .mid em { line-height: 62px; }   /* Figma 2266:1125: the OVERLOOKED / OPPORTUNITIES lines are 62 apart, the others 61 */
}
.home-about__text .last { line-height: 74px; margin-top: -4px; }
.home-about__btn { position: absolute; left: 665px; top: 590px; white-space: pre; }
.home-about__btn span { width: 110px; text-align: center; }

@media (max-width: 1279px) {
  .home-hero { height: auto; display: flex; flex-direction: column; padding-top: var(--header-h); }
  /* client 10/6 pm: the statement keeps Figma's line breaks and size ratios, scaled to the width as one block
     (--u = 1 Figma px: the widest line is 906px at 1440) */
  .home-statement { --u: min(1px, calc((calc(100 * var(--vw, 1vw)) - 2 * var(--gutter)) / 906)); position: static; padding: calc(35 * var(--u)) var(--gutter); }
  .home-statement__a, .home-statement__c { font-size: calc(37 * var(--u)); }
  .home-statement__a em { font-size: calc(58 * var(--u)); }
  .home-statement__b { font-size: calc(64 * var(--u)); letter-spacing: -0.02em; }
  .home-hero__media { position: relative; top: auto; height: auto; aspect-ratio: 1440 / 419; }
  .home-hero__watch { right: var(--gutter); bottom: 24px; }
  .home-hero__sound { left: calc(var(--gutter) - 4px); bottom: 27px; }

  .home-archive { height: auto; }
  .home-archive .as-stage { width: auto; padding: 120px var(--gutter) 64px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: center; }
  .home-archive__head { position: static; width: 100%; flex-direction: column; gap: 24px; order: -1; }
  .home-archive__titles, .home-archive__desc { width: auto; }
  .home-archive__title { font-size: 56px; }
  .home-archive__meta { height: auto; }
  .home-archive__statement { position: static; width: 100%; white-space: normal; font-size: 32px; order: 1; }
  .as-piece { position: relative; left: auto !important; top: auto !important; width: calc(33.333% - 16px) !important; height: auto !important; }
  .as-piece__canvas { position: absolute; }
  .as-piece--dress { aspect-ratio: 337 / 795; }
  .as-piece--abraxas { aspect-ratio: 393 / 512; }
  .as-piece--archive { aspect-ratio: 283 / 206; }
  .as-piece--boundary { aspect-ratio: 244 / 295; }
  .as-piece--rubiks { aspect-ratio: 258 / 263; }
  .as-piece--norigae { aspect-ratio: 236 / 982; }
  .as-piece--voodoo { aspect-ratio: 238 / 307; }
  .as-piece--ecdysis { aspect-ratio: 361 / 379; }
  /* canvases re-expressed as % of the box so they scale with it */
  .as-piece--dress .as-piece__canvas { left: -36.84%; top: 0.04%; width: 173.49%; height: 100.12%; }
  .as-piece--archive .as-piece__canvas { left: -2.84%; top: -7.07%; width: 108.64%; height: 107.19%; }
  .as-piece--boundary .as-piece__canvas { left: 3.67%; top: 4.04%; width: 94.26%; height: 95.91%; }
  .as-piece--rubiks .as-piece__canvas { left: -11.6%; top: -2.28%; width: 118.44%; height: 102%; }
  .as-piece--voodoo .as-piece__canvas { left: 2.79%; top: -16.16%; width: 91.82%; height: 130.31%; }
  .as-piece--dress .as-piece__canvas img:nth-child(4) { translate: 0 0; }

  .marquee { height: 200px; }
  .marquee__track { zoom: 0.755; }
  .home-bc { height: auto; }
  .home-bc__text { height: auto; padding: 32px var(--gutter); }
  .home-bc__row { position: static; width: auto; height: auto; flex-direction: column; gap: 16px; text-align: center; }
  .home-bc__meta, .home-bc__title, .home-bc__desc { width: auto; max-width: 600px; text-align: center; }
  .home-bc__title { font-size: 56px; }
  .home-bc::before { width: 100%; }

  .home-question { min-height: 0; padding: 80px var(--gutter); }
  .home-question__inner { position: static; width: auto; gap: 64px; }
  .home-question__head, .home-question__list, .home-q { width: auto; max-width: 100%; }
  .home-question__title { font-size: 48px; line-height: 1.05; }
  .home-question__sub { font-size: 24px; line-height: 1.4; }
  .home-q__quote { font-size: 30px; }
  .home-q__source { font-size: 21px; white-space: normal; }

  .home-project--bcp, .home-project--bt { height: auto; }
  .home-bcp__text { height: auto; flex-direction: column; gap: 48px; padding-bottom: 48px; }
  .home-bcp__group, .home-bcp__group--swap, .home-bcp__title-row, .home-bcp__title { width: auto; height: auto; }
  .home-bcp__group--swap .home-body, .home-bcp__body { position: static; width: auto; }
  .home-bcp__title { font-size: 52px; }
  .home-bcp__arrow { display: none; }
  .home-bcp__images { height: auto; padding-inline: var(--gutter); }
  .home-bcp__img { aspect-ratio: 705 / 430; }

  .home-bt__text { height: auto; padding-bottom: 48px; }
  .home-bt__title { width: auto; }
  .home-bt__row { position: static; width: auto; height: auto; display: flex; flex-direction: column-reverse; gap: 32px; margin-top: 32px; }
  .home-bt__desc, .home-bt__heads { position: static; width: auto; }
  .home-bt__heads p { white-space: normal; }
  .home-bt__closing { height: auto; padding: 40px var(--gutter); }
  .home-bt__bruises { inset: 0; aspect-ratio: auto; width: 100%; }
  .home-bt__preview { position: relative; left: auto; top: auto; width: 100%; max-width: 640px; margin-inline: auto; height: auto; display: flex; flex-direction: column-reverse; gap: 24px; }
  .home-bt__cta { position: static; width: 100%; height: auto; align-items: center; }
  .home-bt__app { position: relative; width: 100%; height: auto; aspect-ratio: 556 / 545; }

  .home-about { height: auto; }
  .home-about__stage { width: auto; padding: 80px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 32px; }
  .home-about__paper { left: 50%; translate: -50% 0; width: auto; height: 100%; top: 0; }
  /* client 10/6 pm: Figma ratios — big lines 1.5× the body (60/40), OVERLOOKED / OPPORTUNITIES 0.975× (39/40),
     Figma line heights (62/60, 61/40, 74/60); the paragraph wraps naturally */
  .home-about__text { --m: min(40px, calc(5.2 * var(--vw, 1vw))); position: relative; left: auto; top: auto; width: auto; max-width: 900px; font-size: calc(var(--m) * 1.5); line-height: 1.033; letter-spacing: 0; white-space: normal; }
  .home-about__text .mid { font-size: var(--m); line-height: 1.525; margin-top: calc(var(--m) * 0.2); }
  .home-about__text .mid { white-space: pre-wrap; }   /* keeps Figma's double spaces (SURFACE.  THROUGH, OVERLOOKED  dETAILS …) */
  .home-about__text .mid .tail { white-space: normal; }   /* the space after FOR A drops at the line end, so the last line stays centred */
  .home-about__text .mid span { letter-spacing: -0.01em; }
  .home-about__text .mid em { font-size: 0.975em; letter-spacing: -0.01em; }
  .home-about__text .last { line-height: 1.233; margin-top: 0; }
  .home-about__btn { position: relative; left: auto; top: auto; }
}
/* 768–1279 (client 10/6 late): the tall hair ornament made the second row as tall as itself, so Voodoo and the face
   sat in a third row under it with a big black hole beside it. Same three columns and rows, but the ornament spans
   rows 3–4 and Voodoo / the face go straight under Anatomical Atlas / Rubik's Cube */
@media (min-width: 768px) and (max-width: 1279px) {
  .home-archive .as-stage { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto 1fr auto; column-gap: 24px; row-gap: 24px; align-items: start; }
  .home-archive .as-piece { width: auto !important; }
  .home-archive__head { grid-column: 1 / -1; grid-row: 1; }
  .as-piece--dress { grid-column: 1; grid-row: 2; }
  .as-piece--abraxas { grid-column: 2; grid-row: 2; }
  .as-piece--archive { grid-column: 3; grid-row: 2; }
  .as-piece--boundary { grid-column: 1; grid-row: 3; }
  .as-piece--rubiks { grid-column: 2; grid-row: 3; }
  .as-piece--norigae { grid-column: 3; grid-row: 2 / span 3; --ox: 100%; --oy: 100%; }   /* 120% grows up and left: stays inside the section */
  /* client 10/7: no empty space above the hair ornament — it starts right under Archive of Skin (same 24px gap):
     margin = that piece's height (206/283 of the column width; % margins follow the column width) + the row gap */
  .as-piece--norigae { margin-top: calc(72.792% + 24px); }
  .as-piece--voodoo { grid-column: 1; grid-row: 4; }
  .as-piece--ecdysis { grid-column: 2; grid-row: 4; }
  .home-archive__statement { grid-column: 1 / -1; grid-row: 5; }
  /* client 10/7: the words sit 24px under the lowest thing you actually see. The voodoo doll's frames hang below its
     box (feet + stand, up to 16.7% of the column width), so its row reaches that far; the words move down, no work moves.
     The 3px makes the 24 count from the first line's top. Its 120% grows up from the feet, never over the words */
  .as-piece--voodoo { margin-bottom: 16.7%; }
  .as-piece--voodoo .as-piece__canvas { --oy: 100%; }
  .home-archive__statement { margin-top: 3px; }
}
/* below 1100px the statement scales with --u (1 Figma px): line 2 (730px wide at Figma size) keeps the gutter
   (≥16px) plus 4px on each side, up to Figma size. 768px and up keep Figma's four spaces (above), scaled */
@media (max-width: 1099px) {
  .home-statement { --u: min(1px, calc((calc(100 * var(--vw, 1vw)) - 2 * var(--gutter) - 8px) / 730)); }
}
/* phones (client 10/6 night): every space is the same, 21.5 Figma px = 0.58 × the small line size (Figma's own
   line 1–2 gap, which the questions italic needs: its t rises ~17 above the caps of its line) */
@media (max-width: 767px) {
  .home-statement__a > .home-statement__line + .home-statement__line,
  .home-statement > .home-statement__b,
  .home-statement__c > .home-statement__line:first-child,
  .home-statement__c > .home-statement__line + .home-statement__line { margin-top: calc(21.5 * var(--u)); }
}
@supports not (text-box: trim-both cap alphabetic) {
  @media (max-width: 767px) {
    .home-statement__a > .home-statement__line + .home-statement__line,
    .home-statement > .home-statement__b,
    .home-statement__c > .home-statement__line:first-child,
    .home-statement__c > .home-statement__line + .home-statement__line { margin-top: calc(21.5 * var(--u) - 0.165em); }
  }
}
@media (max-width: 767px) {
  /* client 10/5: phone first screen — taller video (crop OK'd), smaller VIEW, less black space below.
     CSS only; re-tune when the new landing video arrives */
  .home-hero__media { aspect-ratio: 4 / 3; }
  /* client 10/6 night: OVERLOOKED / OPPORTUNITIES read a little larger than the text around them — their caps are
     1.2 × the body caps (Baskervville italic cap 0.713em vs Plus Jakarta Sans 0.745em → 1.255em; the client found
     1.6 × too big). line-height 1 keeps the taller words inside the line's own height */
  .home-about__text .mid em { font-size: 1.255em; line-height: 1; }
  .home-hero__video { object-position: 48% 30%; }   /* the heart (where the fibres knot) stays in the middle */
  .home-hero__watch { right: var(--gutter); bottom: 16px; height: 36px; padding: 8px 14px; gap: 8px; font-size: 13px; letter-spacing: 0.5px; }
  .home-hero__watch::after { content: ""; position: absolute; inset: -4px; }   /* 44px tall tap area, same look */
  .home-hero__sound { left: calc(var(--gutter) - 6px); bottom: 12px; }
  .home-archive .as-stage { padding-top: 56px; }
  .home-archive__title { font-size: 40px; }
  .home-archive__statement { font-size: 24px; }
  .as-piece { width: calc(50% - 12px) !important; }
  /* client 10/6: no big black hole beside the tall hair ornament — two columns, Rubik's Cube, Voodoo and the face
     stack on the left next to it (nothing overlaps) */
  .home-archive .as-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .home-archive__head, .home-archive__statement { grid-column: 1 / -1; }
  .home-archive .as-piece { width: auto !important; }
  /* explicit rows (10/6): Hands On spans two rows beside Abraxas + Anatomical Atlas, then the small works stack on
     the left beside the tall hair ornament — no row is sized by a much taller neighbour, so no black gaps */
  .home-archive__head { grid-row: 1; }
  .as-piece--dress { grid-column: 1; grid-row: 2 / span 2; }
  .as-piece--abraxas { grid-column: 2; grid-row: 2; }
  .as-piece--boundary { grid-column: 2; grid-row: 3; }
  .as-piece--archive { grid-column: 1; grid-row: 4; }
  .as-piece--rubiks { grid-column: 1; grid-row: 5; }
  .as-piece--voodoo { grid-column: 1; grid-row: 6; }
  .as-piece--ecdysis { grid-column: 1; grid-row: 7; }
  .as-piece--norigae { grid-column: 2; grid-row: 4 / span 4; --ox: 100%; --oy: 100%; }   /* client 10/7: the 120% grows up and left, never down over the words */
  .home-archive__statement { grid-row: 8; position: relative; inset: auto; z-index: 2; }   /* client 10/7: the words always show above the works */
  .marquee { height: 150px; }
  .marquee__track { zoom: 0.566; }
  .home-bc__title, .home-bcp__title { font-size: 40px; }
  .home-question__title { font-size: 34px; }
  .home-question__sub { font-size: 18px; }
  .home-q__quote { font-size: 22px; }
  .home-q__source { font-size: 17px; }
  .home-bcp__images { flex-direction: column; gap: 16px; }
  /* client 10/6: on phones each text is followed by its own picture — BC Patch text → skin-tone grid →
     SKIN SWAP text → star-patch portrait (the PC two-column layout is unchanged) */
  .home-project--bcp { display: flex; flex-direction: column; }
  .home-bcp__text, .home-bcp__images { display: contents; }
  .home-bcp__group { padding-inline: var(--gutter); }
  .home-bcp__group:first-child { order: 1; }
  .home-bcp__img--pantone { order: 2; flex: none; width: calc(100% - 2 * var(--gutter)); margin: 32px var(--gutter) 48px; }
  .home-bcp__group--swap { order: 3; }
  .home-bcp__img--applying { order: 4; flex: none; width: calc(100% - 2 * var(--gutter)); margin: 32px var(--gutter) 0; }   /* client 10/7: the colour bar sits right under the photo */
  .home-project--bcp > .home-bar { order: 5; }
  .home-bt__title { font-size: 52px; line-height: 1; letter-spacing: -1.44px; }
  /* client 10/10, Figma phone 'BRUISE Trace' 2326:2558: the heads and their lines are one type — Playfair SemiBold 16 / 1.35,
     −0.16 (heads black, lines blue), 22 between the two groups */
  .home-bt__heads, .home-bt__heads h3, .home-bt__heads p { font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -0.16px; }
  .home-bt__heads p.gap-line { height: 22px; }
  /* client 10/10, Figma '핸드폰 -섹션분리' 2326:2760: every colour bar on phones is 30 tall, SemiBold 14, 14px from the right */
  .home-bar, .home-bar--red { height: 30px; padding-right: 14px; font-size: 14px; line-height: normal; letter-spacing: 0; }
}
/* short phone screens (in-app browsers ~600px tall): a flatter video so WATCH FULL FILM fits the first screen */
@media (max-width: 767px) and (max-height: 640px) {
  .home-hero__media { aspect-ratio: 16 / 10; }
}

/* =========================================================
   ARCHIVE OF SKIN gallery (2221:27261, 1440×810)
   A full-screen sticky view inside a long section: the page scroll drives the thumbnail rail
   (assets/js/archive-gallery.js sets the section height = one screen + 5 laps of thumbnails).
   Motion values come from the client-approved prototype (_reference/archive-of-skin-varied.html).
   ========================================================= */
.aos { position: relative; height: 100vh; height: var(--vh100, 100svh); background: #fff; }
/* var(--vh100, 100svh) = the visible height with browser toolbars shown (Safari, in-app browsers), so nothing hides under them */
.aos__sticky { position: sticky; top: 0; height: 100vh; height: var(--vh100, 100svh); overflow: hidden; }
.aos__stage { position: relative; width: 1440px; max-width: 100%; height: 100%; margin-inline: auto; }
/* ARCHIVE OF SKIN-왼쪽 작은 그림들 2221:27765 — thumbnails slide under the translucent header like the Figma frame */
.aos__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 210px; overflow: hidden; }
/* thumbnails disappear at the header's bottom edge instead of sliding behind the IO logo (positions and motion unchanged) */
.aos__rail { clip-path: inset(var(--header-h) 0 0 0); }
.aos__track { position: absolute; inset: 0; }
.aos__slot { position: absolute; left: 17px; top: 0; will-change: transform; }
.aos__thumb { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; transition: transform 0.35s cubic-bezier(0.77, 0, 0.175, 1); }
.aos__thumb:hover { transform: scale(1.14); }
.aos__thumb img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; user-select: none; pointer-events: none; }
/* without JS the rail is a plain column */
.aos__track > .aos__thumb { position: relative; left: 17px; width: auto; height: auto; margin-bottom: 15px; }
/* centre: ARCHIVE OF SKIN-gallery-…+text — 1000 × (600 + 106) at x 298, y 79 on a 1440×810 screen.
   On other screen heights the work keeps that column and grows/shrinks to the largest size that fits. */
.aos__center {
  position: absolute;
  left: 20.6944%;
  width: 69.4444%;
  top: 79px;
  bottom: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.aos__work { width: min(100%, calc((100vh - 234px) * 5 / 3)); width: min(100%, calc((var(--vh100, 100svh) - 234px) * 5 / 3)); }   /* 79 top + 25 bottom + 24 dots + 106 caption */
.aos__work[hidden] { display: none; }
.aos__viewport { position: relative; }
.aos__views { position: relative; display: flex; aspect-ratio: 1000 / 600; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.aos__views::-webkit-scrollbar { display: none; }
/* sideways slides (touch and mouse) are handled by the script (see addSwipe), vertical pans stay with the page */
.aos__views { touch-action: pan-y; }
.aos__views--drag { scroll-snap-type: none; }
.aos__view { flex: 0 0 100%; scroll-snap-align: start; background: var(--aos-ph) center / auto 45% no-repeat; }   /* thumbnail stand-in while the photo loads */
.aos__view { container-type: size; }
.aos__view img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; translate: 0 calc(var(--drop, 0) * min(calc(100cqh * var(--cqfix-t, 1)), calc(60cqw * var(--cqfix-t, 1)))); }
/* client 10/7: each photo stands on the bottom of the picture box (never cropped). The panel files are photos on
   white, centred; --drop = the white below the photo (fraction of the 2000×1200 panel, never more than the white above) */
.aos__view img[data-src$="/aos-01-1.webp"] { --drop: 0.1217; }
/* 1016d: 01-2 and 02-1 re-made after Figma 'ARCHIVE-gallery' 2400:2048 (the old panels cut the photos at the sides):
   01-2 now has 0.0108 white below / 0.0083 above (was none), 02-1 0.0042 / 0.0025 (was 0.0717 / 0.0717) */
.aos__view img[data-src$="/aos-01-2.webp"] { --drop: 0.0083; }
.aos__view img[data-src$="/aos-02-1.webp"] { --drop: 0.0025; }
.aos__view img[data-src$="/aos-05.webp"] { --drop: 0.0917; }
.aos__view img[data-src$="/aos-06.webp"] { --drop: 0.1183; }
.aos__view img[data-src$="/aos-07-2.webp"] { --drop: 0.0817; }
.aos__view img[data-src$="/aos-08.webp"] { --drop: 0.1; }
.aos__view img[data-src$="/aos-10.webp"] { --drop: 0.1833; }
.aos__view img:not([src]) { visibility: hidden; }   /* not requested yet: no alt text, the thumbnail stand-in shows */
/* second view (01, 02, 07): Figma has a second panel beside the first. Client 10/5: no arrows — two dots
   between the photo and the title (current one dark), each a 44×44 button; slide the photo to turn */
/* client 10/7: standard carousel dots — 8px dots 8px apart, current black, the others light grey; each dot a 24×24
   tap area (neighbours overlap by 8px). Every work keeps a 24px dot row (empty for one-view works) so the caption
   box (Figma ARCHIVE OF SKIN-gallery-…-text, 106px) sits at the same place for all works */
.aos__dots { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; height: 24px; }
.aos__dot { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin: 0 -4px; padding: 0; border: 0; background: none; cursor: pointer; }
.aos__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--io-black); opacity: 0.2; transition: opacity 0.2s; }
.aos__dot[aria-current="true"]::before { opacity: 1; }
.aos__views img { -webkit-user-drag: none; user-select: none; }
.aos__row { display: none; }   /* phones only (below) */
/* ARCHIVE OF SKIN-gallery-text 2221:27776 */
.aos__caption { height: 106px; padding: 10px 0; text-align: center; color: #000; }
.aos__viewport + .aos__caption { margin-top: 24px; }   /* one-view works: the empty dot row */
.aos__title { font-weight: 800; font-size: 19px; line-height: 16px; letter-spacing: -0.19px; }
.aos__details { font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: -0.13px; white-space: pre-wrap; }
/* ARCHIVE of Skin 세로글씨 2221:27272 — rotated -90°, box y 232–526 on the 810 frame (centre 26px above the
   frame centre), so it stays at the right middle on any screen height */
.aos__vlabel {
  position: absolute;
  left: 96.25%;   /* 1386px at 1440 */
  top: calc(50% - 173px);
  width: 19px;
  height: 294px;
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-weight: 700;
  font-size: 15px;
  line-height: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--io-red);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .aos__thumb { transition: none; }
}
@media (max-width: 1099px) {
  .aos__center { left: 190px; right: 56px; width: auto; }
  .aos__work { width: min(100%, calc((100vh - 234px) * 5 / 3)); width: min(100%, calc((var(--vh100, 100svh) - 234px) * 5 / 3)); }   /* 79 top + 25 bottom + 24 dots + 106 caption */
  .aos__vlabel { left: auto; right: 18px; top: 50%; translate: 0 -50%; }
}
@media (max-width: 767px) {
  .aos__stage { display: flex; flex-direction: column; padding-top: calc(var(--header-h) + 16px); }   /* 16 under the header */
  .aos__vlabel { position: static; order: -1; flex: none; width: auto; height: auto; writing-mode: horizontal-tb; rotate: none; translate: none; text-align: center; margin-bottom: 8px; }
  /* the work uses the full width; the script sizes it to the space left between the label and the rail */
  .aos__center { position: static; flex: none; min-height: 0; padding-inline: 0; }
  .aos__center { overflow: hidden; }                 /* never spill over the rail */
  .aos__work { width: 100%; }
  .aos__viewport { width: min(100%, calc((100vh - 380px) * 5 / 3)); width: min(100%, calc((var(--vh100, 100svh) - 380px) * 5 / 3)); margin-inline: auto; }
  .aos__caption { height: auto; padding: 10px var(--gutter) 12px; }
  .aos__center { justify-content: flex-start; }   /* client 10/7: picture, dots, caption and strip packed under the header; spare height below the strip */
  /* thumbnails become a horizontal strip under the work: swipe sideways on it, or scroll the page.
     Thumbnails are 80px tall here; rail = 12 bottom + 80 + 43 bulge + room for the 1.14 hover, plus the home-bar inset */
  .aos__rail { position: relative; flex: none; order: 2; width: 100%; height: calc(150px + env(safe-area-inset-bottom, 0px)); touch-action: pan-y; clip-path: none; }
  /* client 10/6 night: all photos in one row the browser scrolls sideways (one per swipe, stops at both ends);
     the script moves the views here and sets the row height. Vertical moves on it scroll the page */
  .aos__work .aos__viewport { display: none; }
  .aos__row { display: flex; flex: none; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .aos__row::-webkit-scrollbar { display: none; }
  .aos__row > .aos__view { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .aos__row img { -webkit-user-drag: none; user-select: none; }
  .aos__slot { left: 0; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
/* short screens (phone in landscape, 200% zoom): the decorative label gives its row to the work */
@media (max-width: 767px) {
  .aos__vlabel { display: none; }   /* client 10/7: the red title repeats the header tab on phones (the PC vertical label stays) */
}

/* =========================================================
   About IO — 1016a, Figma 'About IO / 수정' 2400:1777 (1440×2678; client 10/16, narrowed from 'Full Page' 2400:1763):
   one column, 800 wide in the middle (x 320 at 1440), 96 under the 59 header and 96 above the footer. In it, from the
   top: Title ExtraBold 68 / 1.05 (−1.36), 45 under it the Description Medium 18 / 32 upper case #0f0e0e (774 wide, its
   paragraphs one empty 32 line apart), the line (721 × 0.5 black, x 31, y 729), AWARDS, HONORS & EXHIBITIONS (Bold 27,
   +1%, x 4, y 830.5) with its list beside it (x 344, 387 wide: names Bold 18 / 24, details Medium 17 / 27 −0.5, title
   case), then the contact block (SemiBold 20 / 1.43 #0073d8, x 344, y 2042) and VIEW CV (버튼스타일, 29 under it).
   Everything is in the flow, no fixed height (1012c: words that come out bigger on an iPad push what follows instead of
   being cut). Places across the column are fractions of its 800 (x 4, 31, 344), so 768–1279 keeps the 1440
   arrangement in a narrower column with the words at their size
   ========================================================= */
.about { position: relative; background: #fff; padding: 96px var(--gutter); }
.about__col { max-width: 800px; margin-inline: auto; }
.about__title {
  font-weight: 800;
  font-size: 68px;        /* Figma 2400:1785: 68 / 1.05 / −1.36 */
  line-height: 1.05;
  letter-spacing: -1.36px;
  white-space: pre-wrap;  /* Figma's two spaces in ABOUT  IO */
  color: var(--io-black);
}
.about__intro { max-width: 774px; margin-top: 45px; font-weight: 500; font-size: 18px; line-height: 32px; text-transform: uppercase; color: var(--ink-0f); }
.about__intro p + p { margin-top: 32px; }   /* Figma's empty line between paragraphs */
/* Line 6 2400:1793: 721 × 0.5 black at x 31. Figma draws it as one grey px (128) at 1×; a 1px line of 50% black is that in
   both engines (a 0.5px black band was not drawn at all by WebKit at 1×) */
.about__rule { display: block; height: 1px; margin: 68.5px 6% 0 3.875%; background: rgba(0, 0, 0, 0.5); }
.about__awards { display: flex; align-items: flex-start; margin-top: 101px; padding-left: 0.5%; }   /* x 4; the title takes 340 of the 796 left (42.7136%), so the list starts at x 344 */
.about__awards-title { flex: 0 0 42.7136%; font-weight: 700; font-size: 27px; line-height: normal; letter-spacing: 0.27px; color: #000; }
/* the list 2400:1792, placed by its ink as Figma draws it (measured on Figma's render, 1×): the first name's capitals at
   y 830.5 (Figma trims the list box to them: −7 here), each 27 line of details 3 lower under its 24 name than a browser
   puts it (the 1010b 'CV text' finding), one empty 24 line between entries — 20 after YoungArts (its empty line is set
   at 18 where the others are 17, and Figma draws it 4 shorter) */
.aw { flex: 0 1 387px; min-width: 0; margin-top: -7px; list-style: none; color: #000; text-transform: capitalize; }
.aw h3 { font-weight: 700; font-size: 18px; line-height: 24px; }
.aw p { margin-top: 3px; font-weight: 500; font-size: 17px; line-height: 27px; letter-spacing: -0.5px; }
.aw li + li { margin-top: 24px; }
.aw li.aw--g18 + li { margin-top: 20px; }
/* the contact block: 'IO KIM' 64 under the last line of the list (ink, Figma 2141 → 2205), at x 344 (43%). A grid whose
   first column is at most 43%: where the column is too narrow for the school line (768: 'MA' went to a line of its own)
   the block starts further left instead of breaking it; at 1440 it is at 344 */
.about__contact-block { display: grid; grid-template-columns: minmax(0, 43%) max-content; justify-items: start; margin-top: 37px; }
.about__contact-block > * { grid-column: 2; }
.about__contact { font-weight: 600; font-size: 20px; line-height: 1.43; color: #0073d8; }
.about__contact a { text-decoration: underline; text-decoration-thickness: from-font; text-decoration-thickness: max(1px, 0.04em); text-underline-position: from-font; text-decoration-skip-ink: none; }
.about__cv-btn { margin-top: 30px; }   /* Figma: the button 116 under the block's top (its 3 lines 85.8 + 30) */
@media (max-width: 1279px) {
  .about { padding: 120px var(--gutter) 80px; }   /* as before at 768–1279 (the title 120 from the top, the header in it) */
}
/* phones: one column on the 15px side lines, the words at the phone sizes of the site's components — title as the
   other detail pages (ExtraBold 44 / 1.06), text '핸드폰 텍스트' (Medium 15 / 1.47, −1%), the section heading as the
   old CV headings (21), the list 16 / 15, the contact 17 (client 10/6) and the phone purple button */
@media (max-width: 767px) {
  .about { padding: 87px var(--gutter) 80px; }
  .about__title { font-size: 44px; line-height: 1.06; letter-spacing: -0.7px; }
  .about__intro { margin-top: 24px; font-size: 15px; line-height: 1.47; letter-spacing: -0.15px; }
  .about__intro p + p { margin-top: 22px; }
  .about__rule { margin: 40px 0 0; }
  .about__awards { display: block; margin-top: 40px; padding-left: 0; }
  .about__awards-title { font-size: 21px; letter-spacing: 0.21px; }
  .aw { margin-top: 24px; }
  .aw h3 { font-size: 16px; line-height: 22px; }
  .aw p { margin-top: 2px; font-size: 15px; line-height: 22px; letter-spacing: -0.44px; }
  .aw li + li, .aw li.aw--g18 + li { margin-top: 22px; }
  .about__contact-block { display: block; margin-top: 48px; }
  .about__contact { font-size: min(17px, calc(3.9 * var(--vw, 1vw))); }   /* client 10/6: the school line stays inside the 16px side margins */
  .about__cv-btn { margin-top: 24px; }
}
.as-piece--ecdysis .cycle { position: absolute; inset: 0; display: block; }
.home-about__btn span { display: block; }
/* BruiseTrace curved words where the photo width decides the scale (see .bt-hero__curves above) */
@media (min-width: 640px) and (max-width: 767px) {
  .bt-hero__curves { left: calc(0.2518 * calc(100 * var(--vw, 1vw)) - 93.5px); top: calc(66.8px + 0.1322 * calc(100 * var(--vw, 1vw))); width: 220px; height: 117.3px; }   /* 11px minimum */
}
@media (min-width: 817px) and (max-width: 1279px) {
  .bt-hero__curves { left: calc(0.1453 * calc(100 * var(--vw, 1vw))); top: calc(184px + 0.03505 * calc(100 * var(--vw, 1vw))); width: calc(0.2506 * calc(100 * var(--vw, 1vw))); height: calc(0.1337 * calc(100 * var(--vw, 1vw))); }
}

/* =========================================================
   Phone header (client 10/10, Figma '핸드폰 헤더 예시'): [IO 28] [● ●] [current pill] [● ●] [☰ 18×14], 375×37 — the
   five pages all show (assets/js/nav-phone.js keeps the states; each page's HTML already holds its own).
   ☰ opens the five pages (assets/js/nav-menu.js): ×, Esc or a tap outside closes it; the page under it does not scroll.
   ========================================================= */
.nav-phone, .nav-menu-btn { display: none; }
.nav-menu { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 99; padding: 8px var(--gutter) 16px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); }
.nav-menu[hidden] { display: none; }
/* ☰ turns into × while the list is open, and the page under it does not scroll */
.nav-menu-btn .i-close, .nav-menu-btn[aria-expanded="true"] .i-menu { display: none; }
.nav-menu-btn[aria-expanded="true"] .i-close { display: inline; }
html.nav-open { overflow: hidden; }
.nav-menu a { display: flex; align-items: center; min-height: 48px; font-weight: 700; font-size: 18px; letter-spacing: 0.34px; color: var(--io-black); border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.nav-menu a[aria-current]::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: currentColor; }   /* the page you are on */
@media (max-width: 767px) {
  /* client 10/11 final (Figma '핸드폰 헤더 컴포넌트' 2350:3265 / '핸드폰 해더' 2350:3215, 375×37): IO 28 and ☰ 18×14 on
     the page's side margins (15px), the row centred between them. Section states: pill 156×28 (12px words), two 20px
     dots each side (6 apart, 8 from the pill — Figma 8.5 / 7.5, made even). Landing (home page top): six 28px dots, 18
     apart. Each item is placed by data-slot (assets/js/nav-phone.js); moving between slots is the animation */
  :root { --header-h: 37px; }
  .site-header { overflow: visible; }   /* the pill's shadow may hang below the header (the ≤1279 rule clips the tab row) */
  .site-nav { inset: 4px var(--gutter) 5px var(--gutter); height: auto; gap: 0; }
  .site-logo { flex: none; width: 28px; height: 28px; padding: 0 0 0.7px 1px; font-size: 17px; letter-spacing: -0.34px; }
  .site-nav__list { display: none; }
  .nav-phone { display: block; position: relative; flex: 1 1 auto; min-width: 0; height: 28px; container-type: inline-size; touch-action: none; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1); }
  .nav-phone.is-dragging { transition: none; }
  .nav-phone { clip-path: inset(-12px 0 -12px 0); }   /* items leaving / entering the row are cut at its sides (not above or below: the pill's shadow stays) */
  /* 1011c: --x goes into transform, so its cqw is multiplied by --cqfix-t (assets/js/fit-1440.js measures each kind of
     property per container: iOS WebKit draws cqw in a zoomed page right in transforms but too big in widths) */
  .np {
    --pw: min(156px, calc(calc(100cqw * var(--cqfix, 1)) - 124px));   /* nav-phone.js PILL_W / PILL_ROOM */
    --g: min(18px, calc((calc(100cqw * var(--cqfix, 1)) - 184px) / 5));
    --pw-t: min(156px, calc(calc(100cqw * var(--cqfix-t, 1)) - 124px));   /* the same two inside --x (a transform) */
    --g-t: min(18px, calc((calc(100cqw * var(--cqfix-t, 1)) - 184px) / 5));
    --x: calc(calc(50cqw * var(--cqfix-t, 1)) - 10px);
    position: absolute; left: 0; top: 50%;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    width: 20px; height: 20px; border-radius: 999px;
    background: var(--k); color: var(--kfg);
    transform: translate(var(--x), -50%);
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), width 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), height 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    -webkit-user-drag: none; user-select: none; -webkit-tap-highlight-color: transparent;
  }
  .np--jump { transition: none; }
  .np__label { flex: none; font-weight: 600; font-size: 12px; line-height: 1.8; letter-spacing: -0.12px; white-space: nowrap; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
  .np__label--measure { position: absolute; visibility: hidden; opacity: 0; }
  .np[data-slot="pill"] { --x: calc(calc(50cqw * var(--cqfix-t, 1)) - var(--pw-t) / 2); width: var(--pw); height: 28px; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.2), 3px 3px 7px rgba(0, 0, 0, 0.34); }
  .np[data-slot="pill"] .np__label { opacity: 1; transition-delay: 0.1s; }
  .np--about[data-slot="pill"] { box-shadow: inset 0 0 0 1.5px #8a8a93, 3px 3px 7px rgba(0, 0, 0, 0.34); }
  .np--conformity .np__label { letter-spacing: -0.36px; }   /* Figma: −3% on the longest name only */
  .np[data-slot="l1"] { --x: calc(calc(50cqw * var(--cqfix-t, 1)) - var(--pw-t) / 2 - 28px); }
  .np[data-slot="l2"] { --x: calc(calc(50cqw * var(--cqfix-t, 1)) - var(--pw-t) / 2 - 54px); }
  .np[data-slot="r1"] { --x: calc(calc(50cqw * var(--cqfix-t, 1)) + var(--pw-t) / 2 + 8px); }
  .np[data-slot="r2"] { --x: calc(calc(50cqw * var(--cqfix-t, 1)) + var(--pw-t) / 2 + 34px); }
  .np[data-slot="offl"] { --x: calc(calc(50cqw * var(--cqfix-t, 1)) - var(--pw-t) / 2 - 80px); opacity: 0; }
  .np[data-slot="offr"] { --x: calc(calc(50cqw * var(--cqfix-t, 1)) + var(--pw-t) / 2 + 60px); opacity: 0; }
  .np[data-slot="hide"] { opacity: 0; width: 8px; height: 8px; --x: calc(calc(50cqw * var(--cqfix-t, 1)) - 4px); }
  .np:is([data-slot="hide"], [data-slot="offl"], [data-slot="offr"]) { pointer-events: none; }   /* 1010f: the hidden grey dot sat under the middle of the pill and took its taps */
  .np.is-preview[data-slot="pill"] { box-shadow: none; }   /* HEADER_MODE 'preview': a looked-through page is the plain pill (only the page itself looks selected) */
  .np[data-slot^="b"] { width: 28px; height: 28px; }
  .np[data-slot="b0"] { --x: calc(calc(50cqw * var(--cqfix-t, 1)) - (168px + 5 * var(--g-t)) / 2); }
  .np[data-slot="b1"] { --x: calc(calc(50cqw * var(--cqfix-t, 1)) - (168px + 5 * var(--g-t)) / 2 + 28px + var(--g-t)); }
  .np[data-slot="b2"] { --x: calc(calc(50cqw * var(--cqfix-t, 1)) - (168px + 5 * var(--g-t)) / 2 + 2 * (28px + var(--g-t))); }
  .np[data-slot="b3"] { --x: calc(calc(50cqw * var(--cqfix-t, 1)) - (168px + 5 * var(--g-t)) / 2 + 3 * (28px + var(--g-t))); }
  .np[data-slot="b4"] { --x: calc(calc(50cqw * var(--cqfix-t, 1)) - (168px + 5 * var(--g-t)) / 2 + 4 * (28px + var(--g-t))); }
  .np[data-slot="b5"] { --x: calc(calc(50cqw * var(--cqfix-t, 1)) - (168px + 5 * var(--g-t)) / 2 + 5 * (28px + var(--g-t))); }
  @media (prefers-reduced-motion: reduce) { .np, .np__label, .nav-phone { transition: none; } }
  .nav-menu-btn { position: relative; display: block; flex: none; width: 18px; height: 14px; padding: 0; border: 0; background: none; color: var(--io-black); cursor: pointer; }
  .nav-menu-btn { margin-right: -1px; }   /* 1011c: Figma '핸드폰 해더' 2362:3239 puts ☰ at 343–361 of 375 (14px from the right); the row between IO and ☰ is then centred where Figma's is (pill 115–271) */
  .nav-menu-btn svg { display: block; }
  .nav-menu-btn::after { content: ""; position: absolute; inset: -15px -13px; }   /* a 44px tap area around the 18×14 icon */
}
.np--archive { --k: #f63b3b; --kfg: #fff; }
.np--conformity { --k: #32ce57; --kfg: #000; }
.np--bcpatch { --k: #e8e232; --kfg: #000; }
.np--bruisetrace { --k: #377beb; --kfg: #fff; }
.np--about { --k: #000; --kfg: #fff; }
.np--question { --k: #d9d9d9; --kfg: #000; }   /* the QUESTION pill (Figma key gray) */
.np--question[data-slot^="b"] { --k: #e5e5e5; }   /* the landing row's grey dot */
.np--bcpatch[data-slot^="b"] { --k: #ece86d; }    /* the landing row's yellow dot is lighter (Figma) */
/* 1010f, phones: the header goes, the page follows (assets/js/nav-phone.js).
   Home page: a section that the header goes to stops with its top just under the header.
   Detail pages: sliding the header to the next page slides the new page in from that side (finger to the left: the
   new page comes from the right) while the header stays (assets/js/page-slide.js keeps this to header slides). A
   browser without cross-document View Transitions just changes page; with reduced motion there is no slide. */
@media (max-width: 767px) {
  .home-hero, .home-bc, .home-question, .home-project, .home-about, section[aria-labelledby="home-as-title"] { scroll-margin-top: var(--header-h); }
}
/* the opt-in (@view-transition) is written by assets/js/page-slide.js at the top of each page; only a header slide (a
   phone) ever keeps the transition */
@media (prefers-reduced-motion: no-preference) {
  .site-header { view-transition-name: io-header; }
  ::view-transition-group(io-header) { animation: none; }
  ::view-transition-old(io-header) { display: none; }
  ::view-transition-new(io-header) { animation: none; }
  ::view-transition-group(root) { animation-duration: 0.34s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  html:active-view-transition-type(slide-next)::view-transition-old(root) { animation: 0.34s cubic-bezier(0.2, 0.7, 0.3, 1) both io-slide-to-left; }
  html:active-view-transition-type(slide-next)::view-transition-new(root) { animation: 0.34s cubic-bezier(0.2, 0.7, 0.3, 1) both io-slide-from-right; }
  html:active-view-transition-type(slide-prev)::view-transition-old(root) { animation: 0.34s cubic-bezier(0.2, 0.7, 0.3, 1) both io-slide-to-right; }
  html:active-view-transition-type(slide-prev)::view-transition-new(root) { animation: 0.34s cubic-bezier(0.2, 0.7, 0.3, 1) both io-slide-from-left; }
}
@keyframes io-slide-to-left { to { transform: translateX(-100%); } }
@keyframes io-slide-from-right { from { transform: translateX(100%); } }
@keyframes io-slide-to-right { to { transform: translateX(100%); } }
@keyframes io-slide-from-left { from { transform: translateX(-100%); } }
/* wherever the tab row scrolls (1279px and below, all three sites): its ends fade into the header instead of cutting
   the tabs off. The script (nav-centre.js) sets the widths: 32px, none at an end the row is scrolled to, never over
   the current tab */
@media (max-width: 1279px) {
  .site-nav__list {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
  }
}
/* client 10/8: in Figma the SKIN SWAP and About pages now start under the 59px header (frames 7619 / 3496) */
@media (min-width: 1280px) {
  .ss-hero, .about { margin-top: var(--header-h); }
}

/* First paint (assets/js/fit-1440.js keeps html.io-preload until the page has loaded): no transition or animation on the
   header and on links, so nothing fades from the browser's default link blue (Safari) or slides in (phone Chrome) */
html.io-preload :is(.site-header, .site-header *, .nav-menu, .nav-menu *, a),
html.io-preload :is(.site-header *, a)::before, html.io-preload :is(.site-header *, a)::after { transition: none !important; animation: none !important; }

/* =========================================================
   1280–1439 (QA 10/8): assets/js/fit-1440.js shows the 1440 layout scaled to the window (html zoom = width / 1440).
   The zoom does not scale vw/vh, so the rules that size things from the window use --zvw / --zvh (the window
   measured in the scaled page's px) while html.z1440 is set. Nothing here applies at 1440+ or 1279-.
   ========================================================= */
html.z1440 .aos, html.z1440 .aos__sticky { height: var(--zvh); }
html.z1440 .aos__work { width: min(100%, calc((var(--zvh) - 234px) * 5 / 3)); }
html.z1440 .film-lightbox__frame { width: min(calc(var(--zvw) - 96px), calc((var(--zvh) - 96px) * 16 / 9)); }
html.z1440 .film-lightbox__frame--4x3 { width: min(calc(var(--zvw) - 96px), calc((var(--zvh) - 96px) * 4 / 3)); }

/* =========================================================
   Home ARCHIVE collage, hover 120% (client 10/5 "grow from the bottom, inside the collage"; QA 10/8 #10–11).
   768 and up: every work grows from its bottom edge (--oy 100%); --ox keeps every cut inside the collage and the
   screen, and no visible pixel of a grown work lands on the SKIN. THE FIRST GATEWAY… letters (checked per cut with
   the images' alpha, ~/Desktop/io-check/1008b). Phones keep their values (rules above).
   - Anatomical Atlas (1280+): sits just under the words and grows upward, so it grows to 114%.
   - Hands On cut 4 (seated, 1280+): already touches the S of PASSAGE at 100%, so no origin or scale keeps it off
     the letters; it grows the least allowed (112%) from its bottom right (stays on screen) and the words stay
     drawn above it, so they remain readable. Needs a client decision (smaller/recropped cut) — see the 1008b report.
   ========================================================= */
@media (min-width: 1280px) {
  .home-archive .as-piece__canvas, .home-archive .as-piece--box { --ox: 50%; --oy: 100%; }
  .as-piece--dress .as-piece__canvas img:nth-child(4) { --ox: 92%; --hs: 1.12; }
  .as-piece--boundary { --hs: 1.14; }
  .as-piece--boundary .as-piece__canvas { --oy: 89%; }   /* the torso's base (the canvas has empty space under it) */
  .home-archive__statement { z-index: 6; }
  /* QA 10/8 (1008e): grown works keep off their neighbours (overlap ≤ 4px where the Figma places allow; the origins stay
     inside each work). Per cut where the cuts differ. Figma places unchanged */
  .as-piece--dress .as-piece__canvas img:nth-child(3) { --ox: 25%; --hs: 1.12; }   /* the close crop: off the Ecdysis head */
  .as-piece--rubiks .as-piece__canvas img:nth-child(1) { --ox: 20%; }               /* off Ecdysis-Abraxas */
  .as-piece--voodoo .as-piece__canvas img:nth-child(1) { --ox: 0%; --hs: 1.16; }    /* Voodoo touches the hair ornament */
  .as-piece--voodoo .as-piece__canvas img:nth-child(2) { --ox: 65%; }               /* in Figma, so a few px of overlap */
  .as-piece--voodoo .as-piece__canvas img:nth-child(4) { --ox: 0%; }                /* remain while grown (reported) */
  .as-piece--norigae { --ox: 85%; }
  /* Hands On cut 4 (seated): 3.5% smaller at rest from its bottom right and 2px further right (all the room there is
     before the screen edge), so the boot clears the S of PASSAGE */
  .as-piece--dress .as-piece__canvas img:nth-child(4) { --rs: 0.965; translate: -12px 0; }
  /* QA 10/9 #11: grown from its bottom right, the boot still reached US / WORLD. (1003–1269 letter px). It now grows
     from its right edge 10% down: the boot moves left under the words' last line instead of up into them, the right
     edge stays on screen and the feet stay in the section (0 px on the letters, 1280–1920, both engines; 0% put the
     feet 8px under the section, 20% touched WORLD.). It is drawn at 96.5% at rest from that point too, so it moves by
     (1 − 0.965) × (old point − new point) to stay where it was — and 1px more left: its right edge was 0.6px past the screen */
  .as-piece--dress .as-piece__canvas img:nth-child(4) { --ox: 100%; --oy: 10%; translate: calc(-13px + 0.035 * (92% - var(--ox))) calc(0.035 * (100% - var(--oy))); }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .home-archive .as-piece__canvas, .home-archive .as-piece--box { --ox: 50%; --oy: 100%; }
  .as-piece--dress .as-piece__canvas { --ox: 30%; }                        /* cut 3 would pass the left edge from 50% */
  .as-piece--dress .as-piece__canvas img:nth-child(4) { --ox: -50%; }      /* cut 4 starts at the left edge: grows right */
  .as-piece--archive .as-piece__canvas { --ox: 80%; }                      /* cut 2 would pass the right edge from 50% */
  /* QA 10/8 (1008e): less overlap with the neighbours while grown (the stacked works grow up into the work above;
     clearing that fully needs 50–90px more space — left as a choice for the client, see the 1008e report) */
  .as-piece--dress .as-piece__canvas img:nth-child(3) { --ox: 40%; --hs: 1.14; }
  .as-piece--dress .as-piece__canvas img:nth-child(4) { --ox: -80%; --hs: 1.12; }
  /* QA 10/9 #10: at rest the boot's tip was 19–66px past the left edge of the screen (it grows with the window) */
  .as-piece--dress .as-piece__canvas img:nth-child(4) { translate: calc(calc(9.22 * var(--vw, 1vw)) - 50px) 0; }
  .as-piece--abraxas .as-piece__canvas img:nth-child(4) { --ox: 45%; --hs: 1.18; }
  .as-piece--voodoo .as-piece__canvas img:nth-child(2), .as-piece--voodoo .as-piece__canvas img:nth-child(3) { --ox: 100%; --hs: 1.12; }
  .as-piece--voodoo .as-piece__canvas img:nth-child(4) { --ox: 90%; --hs: 1.12; }
  .as-piece--norigae { --hs: 1.14; }
  /* Voodoo at least 8px under Anatomical Atlas at rest (the 24px row gap was not enough for its hair at wide tablets) */
  .as-piece--voodoo { margin-top: max(0px, calc(8.8% - 18.8px)); }
}
/* phones (QA 10/8, 1008e): the Ecdysis head sits under Voodoo; grown (mouse on a narrow window, or a tap on iPhone) it
   reached the doll's feet — it comes down just enough to stay 8px away. Voodoo keeps 8px under Rubik's Cube */
@media (max-width: 767px) {
  .as-piece--ecdysis { margin-top: calc(16.6% - 13px); }
  .as-piece--voodoo { margin-top: max(0px, calc(8% - 16px)); }
  /* grown, these three reached their neighbours (Tethered → Atlas / Archive, Rubik's ↔ Voodoo): they grow from another
     corner instead, Tethered and Voodoo a little less */
  .as-piece--norigae { --ox: 100%; --oy: 30%; --hs: 1.16; }
  .as-piece--rubiks .as-piece__canvas { --ox: 0%; --oy: 100%; }
  .as-piece--voodoo .as-piece__canvas img { --ox: 30%; --oy: 10%; --hs: 1.12; }
  /* QA 10/9 #10: Hands On cut 4's boot was 21–83px past the left edge of the screen at rest and 59–187px grown. It sits
     that much further right and grows from its left edge */
  .as-piece--dress .as-piece__canvas img:nth-child(4) { --ox: 0%; translate: calc(calc(14.1 * var(--vw, 1vw)) - 23px) 0; }
}

/* client 10/10, Figma '핸드폰 -버튼' 2326:2762 (174×30): every purple button on phones — 30 tall, padding 10 / 18,
   14px, no letter spacing, no arrow, no shadow; a 44px tap area around it */
@media (max-width: 767px) {
  .btn-primary, .home-hero__watch { height: 30px; padding: 10px 18px; gap: 13px; font-size: 14px; letter-spacing: 0; filter: none; }
  .btn-primary__icon { display: none; }
  .ss-research .btn-primary { width: auto; }
  .btn-primary:not(.home-hero__watch) { position: relative; inset: auto; }   /* in the flow (the desktop offsets do not apply); the hero button stays absolute */
  .btn-primary::after { content: ""; position: absolute; inset: -7px -4px; }
}
/* client 10/10, Figma phone 'SKIN SWAP' 2326:2791: on phones the product mock-ups (and the credit) come first and the
   photo of the two models closes the blue section, edge to edge (1440 already matches Figma) */
@media (max-width: 767px) {
  .ss-gallery { display: flex; flex-direction: column; padding-bottom: 0; }
  .ss-gallery__packs { order: -1; margin: 48px auto; }
  .ss-gallery__applied { max-width: none; }
}
/* client 10/10, Figma phone 'BREAKING conformity' (1010d: 2343:2486): the words at Figma's sizes (date SemiBold 17 / 1.28,
   title ExtraBold 36 / 1.05, text 12 / 1.36 at 90%; date → title 10, title → text 15 + 17).
   1010d: no longer squeezed into one 667 screen (1010a's 19px text padding is gone). The pictures are Figma's (a raster
   mock-up): above, works up to 144 tall (265 × 0.543 — Figma's shows 108–144 tall), below up to 129 (× 0.487).
   White space by ink: Figma 46 above the date, 43 under the text — both are 46 here (the larger): ~42 padding + the
   4px between each text box edge and its ink */
@media (max-width: 767px) {
  .home-bc .marquee { height: 144px; }
  .home-bc .marquee__track { zoom: 0.5434; }   /* 265px works → 144 */
  .home-bc .home-bc__text + .marquee { height: 129px; }
  .home-bc .home-bc__text + .marquee .marquee__track { zoom: 0.4868; }   /* 265 → 129 */
  .home-bc__text { padding: 41.5px var(--gutter) 42.5px; }   /* WebKit draws text ~1px lower than Chromium in its box: the half pixel keeps both within 1px of even */
  .home-bc__row { gap: 10px; }
  .home-bc__desc { margin-top: 21px; }   /* Figma: the date + title group is a fixed 146 tall (17 under the title) + 15 → text: ink 30 */
  .home-bc__meta { font-weight: 600; font-size: 17px; line-height: 1.28; letter-spacing: -0.17px; }
  .home-bc__title { font-size: 36px; line-height: 1.05; letter-spacing: -0.72px; }
  .home-bc__desc { max-width: 339px; margin-inline: auto; font-size: 12px; line-height: 1.36; letter-spacing: -0.12px; opacity: 0.9; }
}

/* =========================================================
   client 10/10 (1010b), Figma phone '헤더+ARCHIVE OF SKIN' 2326:2508 / 'ARCHIVE OF SKIN' 2326:2511 (375 × 1941):
   the words on top (Header Block 18 / 36, 339 wide), the eight works at Figma's places and sizes, the statement under
   them (14 / 1804). 375 is the reference; every width scales the works with the window: they share one grid cell and
   are placed by margins in % of the width (so the vertical places scale too). The cell starts at Figma y 306 (Rubik's
   Cube), 19 under the words, and ends at the bottom of Abraxas (y 1780); the statement follows 24 below.
   Each box is the Figma instance box, which is the work's component frame — so the picture fills it (Hands On's
   pictures are a little wider than its frame: they keep their own shape, centred). Where boxes overlap only their empty
   parts do, so the smaller boxes sit on top: a tap on a picture always goes to that work (Figma's order would let Hands
   On's empty corners take the taps meant for Rubik's Cube and the hair ornament; the look is the same)
   Moving: every work turns through its Figma variants (1010c, below). Hair Norigae is one picture: it only grows (hover / tap).
   ========================================================= */
@media (max-width: 767px) {
  .home-archive .as-stage { display: grid; grid-template-columns: 100%; grid-template-rows: auto auto auto; gap: 0; padding: 36px 0 37px; }
  .home-archive__head { grid-row: 1; grid-column: 1; width: auto; margin: 0 var(--gutter) 19px; gap: 31px; }   /* 1010d: on the phone side line (Figma 18) */
  .home-archive__titles { gap: 10px; }
  .home-archive__title { font-size: 36px; line-height: 1.05; letter-spacing: -0.72px; }
  .home-archive__meta { font-weight: 600; font-size: 17px; line-height: 1.28; letter-spacing: -0.17px; }
  .home-archive__desc { font-size: 12px; line-height: 1.36; letter-spacing: -0.12px; }
  .home-archive__statement { grid-row: 3; grid-column: 1; justify-self: center; width: auto; margin-top: 24px; font-size: min(22px, calc(5.87 * var(--vw, 1vw))); line-height: 1.12; white-space: pre; }
  .home-archive .as-piece { grid-row: 2; grid-column: 1; align-self: start; justify-self: start; height: auto !important; }
  .home-archive .as-piece--dress { width: 77.600% !important; aspect-ratio: 291 / 424; margin: 21.867% 0 0 17.867%; z-index: 3; }
  .home-archive .as-piece--rubiks { width: 49.867% !important; aspect-ratio: 187 / 164; margin: 0% 0 0 4.800%; z-index: 5; }
  .home-archive .as-piece--norigae { width: 42.933% !important; aspect-ratio: 161 / 669; margin: 102.933% 0 0 4.800%; z-index: 4; }
  .home-archive .as-piece--ecdysis { width: 56.800% !important; aspect-ratio: 213 / 223; margin: 137.867% 0 0 40.800%; z-index: 1; }
  .home-archive .as-piece--archive { width: 52.267% !important; aspect-ratio: 196 / 141; margin: 202.133% 0 0 47.733%; z-index: 8; }
  .home-archive .as-piece--voodoo { width: 34.933% !important; aspect-ratio: 131 / 239; margin: 246.933% 0 0 54.667%; z-index: 6; }
  .home-archive .as-piece--boundary { width: 40.267% !important; aspect-ratio: 151 / 186; margin: 284.533% 0 0 9.333%; z-index: 7; }
  .home-archive .as-piece--abraxas { width: 54.133% !important; aspect-ratio: 203 / 264; margin: 322.667% 0 0 29.600%; z-index: 2; }
  .home-archive .as-piece__canvas { inset: 0; left: 0; top: 0; width: 100%; height: 100%; }
  .home-archive .as-piece--dress .as-piece__canvas { left: -3.52%; width: 107.04%; }   /* the pictures are 0.7346 wide to 1 tall, the frame 291 × 424 */
  .home-archive .as-piece--dress .as-piece__canvas img:nth-child(4) { translate: 0 0; }
  .home-archive .as-piece:is(:hover, :focus-visible) { z-index: 20; }
  /* grow (120%, a little less where noted) from a point that keeps the work on the screen and off the words */
  .home-archive .as-piece--rubiks .as-piece__canvas { --ox: 0%; --oy: 0%; }
  .home-archive .as-piece--dress .as-piece__canvas, .home-archive .as-piece--dress .as-piece__canvas img:nth-child(4) { --ox: 100%; --oy: 50%; --rs: 1; }
  .home-archive .as-piece--norigae { --ox: 0%; --oy: 30%; }
  .home-archive .as-piece--ecdysis { --ox: 100%; --oy: 50%; }
  .home-archive .as-piece--archive .as-piece__canvas { --ox: 100%; --oy: 50%; }
  .home-archive .as-piece--voodoo .as-piece__canvas img { --ox: 50%; --oy: 50%; }
  .home-archive .as-piece--boundary .as-piece__canvas { --ox: 0%; --oy: 50%; }
  .home-archive .as-piece--abraxas .as-piece__canvas img { --ox: 50%; --oy: 100%; }
  /* 1010c: every work turns through its Figma variants only (the instances in 2326:2508 / 대문루핑 컴포넌트 2326:1879), in
     number order 1 → 2 → 3 → 4, 1.5s each as on desktop. All variants are cuts the site already has (matched to the Figma
     renders): Hands On −1 / −2 = home-dress-1 / home-dress-4-1008 (2 pictures), Anatomical Atlas = boundary-1…4 (of 8),
     Abraxas 1…4 and Voodoo 1…4 (the HTML holds them as 2 3 4 1 and 4 1 2 3 for the desktop order), Archive, Rubik's Cube
     and Ecdysis 1…4 as they are. The hair ornament is one picture (it only grows) */
  .home-archive .as-piece--dress .cycle { --n: 2; --cycle-name: cycle-2; }
  .home-archive .as-piece--dress .cycle > img:is(:nth-child(2), :nth-child(3)) { display: none; }
  .home-archive .as-piece--dress .cycle > img:nth-child(4) { --i: 1; }
  .home-archive .as-piece--boundary .cycle { --n: 4; --cycle-name: cycle-4; }
  .home-archive .as-piece--boundary .cycle > img:nth-child(n+5) { display: none; }
  .home-archive .as-piece--abraxas .cycle > img:nth-child(4) { --i: 0; }
  .home-archive .as-piece--abraxas .cycle > img:nth-child(1) { --i: 1; }
  .home-archive .as-piece--abraxas .cycle > img:nth-child(2) { --i: 2; }
  .home-archive .as-piece--abraxas .cycle > img:nth-child(3) { --i: 3; }
  .home-archive .as-piece--voodoo .cycle > img:nth-child(2) { --i: 0; }
  .home-archive .as-piece--voodoo .cycle > img:nth-child(3) { --i: 1; }
  .home-archive .as-piece--voodoo .cycle > img:nth-child(4) { --i: 2; }
  .home-archive .as-piece--voodoo .cycle > img:nth-child(1) { --i: 3; }
}
@keyframes cycle-2 { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* 1010d (client): every home collage work makes one full turn in the same time, whatever its number of cuts — one cut
   lasts loop ÷ cuts. The loop is LOOP_MS at the top of assets/js/collage-cycle.js (it sets --cycle-loop; 6s here only
   if the script does not run). --i = the cut's place in the turn (the phone rules above reorder / skip cuts with it).
   The BREAKING page's own loop (.bc-loop) keeps its 1.5s per cut */
.home-archive .cycle > img { animation-duration: var(--cycle-loop, 6s); animation-delay: calc(var(--i, 0) * var(--cycle-loop, 6s) / var(--n)); }
.home-archive .cycle > img:nth-child(1) { --i: 0; }
.home-archive .cycle > img:nth-child(2) { --i: 1; }
.home-archive .cycle > img:nth-child(3) { --i: 2; }
.home-archive .cycle > img:nth-child(4) { --i: 3; }
.home-archive .cycle > img:nth-child(5) { --i: 4; }
.home-archive .cycle > img:nth-child(6) { --i: 5; }
.home-archive .cycle > img:nth-child(7) { --i: 6; }
.home-archive .cycle > img:nth-child(8) { --i: 7; }
/* =========================================================
   client 10/10 (1010b), Figma 'ARCHIVE OF SKIN-gallery-06-1' 2326:2710 and the 'ARCHIVE-gallery-핸폰' component
   2326:2050 (375 wide): header + 20 → picture frame 375×239 (the script: 239/375 of the width) → 10 → dot row 12
   (kept empty for one-picture works) → 10 → caption box 100 (title ExtraBold 15 / 16, details Medium 10 / 13, 14 apart)
   → 20 → thumbnail strip 138. Every picture is as large as fits its frame, centred, never cut.
   ========================================================= */
@media (max-width: 767px) {
  .aos__stage { padding-top: calc(var(--header-h) + 20px); }
  .aos__row .aos__view img { object-position: 50% 50%; translate: none; }
  .aos__dots { height: 12px; margin: 10px 0; }
  .aos__dot { width: 14px; height: 12px; margin: 0; }
  .aos__dot::before { width: 6px; height: 6px; }
  .aos__viewport + .aos__caption { margin-top: 32px; }   /* one-picture works: the empty dot row (10 + 12 + 10) */
  .aos__caption { height: 100px; padding: 3px var(--gutter); overflow: hidden; }
  .aos__title { font-size: 15px; line-height: 16px; letter-spacing: -0.15px; }
  .aos__details { margin-top: 14px; font-size: 10px; line-height: 13px; letter-spacing: -0.1px; }
  .aos__rail { height: calc(138px + env(safe-area-inset-bottom, 0px)); margin-top: 20px; }
  /* the photos are 5:3 panels with white space round the work, each scaled and moved about the frame centre.
     1016d (client 10/17: phone photos had less white than Figma and looked cut at the sides): the panel is placed as
     Figma 'ARCHIVE-gallery-핸폰' 2400:1990 places it — the desktop variant (1000×637, 2400:2048) × 0.375 in the 375×239
     frame (scale = the panel's own 637/600 fit, translate in io-check/1016d/data/phone-transform-new.json); the white round the
     work is Figma's, nothing cut. Was: scaled until the work filled the frame (01-2 1.071, 02-1 1.171, 10 1.042 …) */
  .aos__row > .aos__view { overflow: hidden; }
  .aos__row .aos__view img[data-src$="/aos-01-1.webp"] { transform: translate(-0.00%, 0.12%) scale(1.001); }
  .aos__row .aos__view img[data-src$="/aos-01-2.webp"] { transform: none; object-fit: contain; }   /* 1016d: Figma's phone variant places these photos differently from the desktop one: own 375×239 phone files (data-src-phone, 1125/750w) drawn whole */
  .aos__row .aos__view img[data-src$="/aos-02-1.webp"] { transform: translate(0.00%, -0.03%) scale(1.000); }
  .aos__row .aos__view img[data-src$="/aos-02-2.webp"] { transform: none; object-fit: contain; }   /* 1016d: Figma's phone variant places these photos differently from the desktop one: own 375×239 phone files (data-src-phone, 1125/750w) drawn whole */
  .aos__row .aos__view img[data-src$="/aos-03.webp"] { transform: translate(-0.05%, 0.02%) scale(1.061); }
  .aos__row .aos__view img[data-src$="/aos-04.webp"] { transform: translate(-0.10%, -0.01%) scale(1.062); }
  .aos__row .aos__view img[data-src$="/aos-05.webp"] { transform: translate(0.00%, -2.92%) scale(1.000); }
  .aos__row .aos__view img[data-src$="/aos-06.webp"] { transform: translate(-0.01%, -0.11%) scale(1.000); }
  .aos__row .aos__view img[data-src$="/aos-07-1.webp"] { transform: translate(0.02%, -0.03%) scale(1.055); }   /* 1016d: from Figma (was translate(-0.16%, 0) scale(1.062)). 1011c: was -3.51% (13px left of centre at 375, the right side 31–37px empty); the picture spans 0.079–0.924 of the file, Figma 06 centres it */
  .aos__row .aos__view img[data-src$="/aos-07-2.webp"] { transform: translate(0.03%, -0.09%) scale(1.000); }
  .aos__row .aos__view img[data-src$="/aos-08.webp"] { transform: translate(0.00%, 0.03%) scale(1.000); }
  /* 1010e (QA: the photo lost 10–13px top and bottom): Anatomical Atlas uses its trimmed phone file (the 1720 × 1200
     photo without the white side bands, data-src-phone) drawn whole: 239 high, 342.6 wide at 375 — 1.2px short of each
     15px side line, nothing cut */
  .aos__row .aos__view img[data-src$="/aos-09.webp"] { transform: none; object-fit: contain; }
  .aos__row .aos__view img[data-src$="/aos-10.webp"] { transform: translate(0.05%, -0.15%) scale(1.001); }
}
/* client 10/10 (1010b), Figma phone frames 'BACTERIAL CELLULOSE Patch' 2326:2550 and 'BRUISE Trace' 2326:2770: the home
   section titles are ExtraBold 36 / 1.05, −0.72, their italic word Playfair SemiBold 37 (was 40 and 52). At 36 "BRUISE
   Trace" fits 320 (the 1009d shrink below 375 is gone) */
@media (max-width: 767px) {
  .home-bcp__title, .home-bt__title { font-size: 36px; line-height: 1.05; letter-spacing: -0.72px; }
  .home-bcp__title em, .home-bt__title em { font-size: 1.028em; line-height: 1; letter-spacing: 0; }
  .home-bt__title { height: auto; }
}
/* 1010b, Figma 'BC PATCH → SKIN SWAP / Full Page' 2326:1560 (1440):
   - hero-text 2326:1567 starts 84 under the hero top (was 133); the lead sits 36 under the title group (2326:1586 at
     y 187 of a 151 group) and the body 35 under the lead block (2326:1587 at y 286 of a 251 block)
   - 03-feedback 2326:1686 is 846 tall: its card row 2326:1697 is 364 tall and the 384 columns hang 20 below it (was 866) */
@media (min-width: 1280px) {
  .ss-hero__text { top: 84px; gap: 35px; }
  .ss-hero__head { gap: 36px; }
  .ss-hero__titles { gap: 0; }
  .ss-hero__title-row { flex: none; margin-top: 17px; }   /* kicker → title group 17 (2326:1573 at y 36), the date right under it (y 123) */
  .ss-hero__meta { margin-top: 0; }
  .feedback-grid--h414 { height: 364px; }
  .home-bcp__title em { letter-spacing: 0; }   /* home 'Patch': no letter spacing of its own (Figma home 1440: 7px longer than the site's) */
}
/* client 10/10 (1010b), Figma phone 'BruiseTrace-클로징' 2326:2839: the bruise photo band 375×250 (its own gradient), then
   the 260-tall closing block (#601e4e): the quote Bold 26 / 29 and the line SemiBold 18 / 1.25 #70a6f2, 340 wide, left,
   14 apart, centred in the block. FOOTER-컴포넌트 (all pages): 13px Medium / 25, upper case and underlined, from 17 / 21,
   the address block 10 under the links, 23 at the bottom */
@media (max-width: 767px) {
  .bt-closing { padding: 0; background: #601e4e; }
  .bt-closing__media { height: auto; min-height: 0; margin-inline: 0; aspect-ratio: 375 / 250; overflow: hidden; }
  .bt-closing__media img { object-position: 50% 100%; }   /* Figma shows the lower 80% of the photo (top −25.2%, height 125.2%) */
  .bt-closing__media::after { background-image: linear-gradient(180deg, rgba(74, 31, 62, 0.3) 18.972%, rgba(87, 36, 73, 0.45) 57.566%, rgba(96, 30, 78, 0.98)); }
  .bt-closing__content { width: auto; min-height: 260px; margin: 0 var(--gutter); justify-content: center; align-items: flex-start; gap: 14px; text-align: left; }
  .bt-closing__quote { font-size: 26px; line-height: 29px; letter-spacing: -0.26px; }
  .bt-closing__sub { font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -0.36px; color: #70a6f2; }
  .site-footer { padding: 21px var(--gutter) 23px; }   /* 1010d: on the phone side line (Figma 17) */
  .site-footer__inner { gap: 10px; }
  .site-footer__nav, .site-footer__info { font-weight: 500; font-size: 13px; line-height: 25px; letter-spacing: 0; text-transform: uppercase; }
  .site-footer__email { font-weight: 500; font-size: 13px; text-transform: none; }   /* 1017d: lowercase as the phone FOOTER 2411:3510 writes it; the menu and copyright stay uppercase */
}
/* 1010c: on phones the home flow lines (BC PATCH and SKIN SWAP) are Playfair SemiBold 16 / 1.35 as in Figma (2326:2553),
   like BruiseTrace's "Clinician Feedback → Test → Revise ↺" (was 20) */
@media (max-width: 767px) {
  .home-sub__flow { font-size: 16px; line-height: 1.35; letter-spacing: -0.16px; }
}
/* =========================================================
   1010d (client 10/10 evening): one start line and one end line on phones — the 15px side margins (--gutter) carry
   the header's IO and ☰, titles, subtitles, text, lists and the footer; only words Figma centres stay centred.
   - lists (About): the bullet sits on the line, the words after it, wrapped lines under the words
   - Figma's revision of 'BREAKING conformity-상세' (2343:2460) moves the title up under the header (74 → 43 in the
     2nd-check scale, everything below it moves with it): the detail pages that open with a title under the header
     (BREAKING CONFORMITY, About) start it 33px higher (padding 120 → 87)
   ========================================================= */
@media (max-width: 767px) {
  .bc-hero { padding-top: 87px; }
}
/* 1010d: dates at the end of a subtitle never break inside (2025–Present stays whole; it moves to the next line as a
   whole when the line is full). Where Figma's phone frames put the date on a line of its own, phones do too: the
   home ARCHIVE line keeps its "·" at the end of the first line (Figma 2343:2463), SKIN SWAP's hero drops it (Figma
   2343:2567 "Research to Product Development / 2025–Present") */
.date { white-space: nowrap; }
.br-phone { display: none; }
@media (max-width: 767px) {
  .home-archive__meta .date, .ss-hero__meta .date { display: block; }
  .ss-hero__meta .date-sep { display: none; }
  .br-phone { display: inline; }
}
/* =========================================================
   1010d, Figma phone 'BC PATCH → SKIN SWAP' 2343:2540 (hero 375×571 under the header): the petri-dish photo on top
   (375:284, Figma's crop), the star photo below it (375:305, mirrored, held to the bottom), a white band across the
   middle; the words in one centred column on the side margins — kicker Medium 13 (6 above and below), "BC Patch →"
   on one row and the skinswap logo (179 wide) under it, the date on its own line, then 38 to the lead and 21 to the body
   ========================================================= */
@media (max-width: 767px) {
  .ss-hero { height: auto; min-height: calc(571 / 375 * calc(100 * var(--vw, 1vw))); margin-top: var(--header-h); padding: 48px var(--gutter) 80px; overflow: hidden; }   /* the hero starts under the header (Figma) */
  .ss-hero .ss-hero__img--left { left: 0; right: auto; top: 0; width: 100%; height: auto; aspect-ratio: 375 / 284; }
  .ss-hero .ss-hero__img--left img { left: 0.02%; top: -2.15%; width: 101.7%; height: 134.28%; }
  .ss-hero .ss-hero__img--right { left: 0; right: auto; top: auto; bottom: 0; width: 100%; height: auto; aspect-ratio: 375 / 305; }
  .ss-hero .ss-hero__img--right img { left: -8.94%; top: -36.56%; width: 116.75%; height: 146.31%; }
  .ss-hero .ss-hero__fade { inset: 0; width: auto; height: auto; background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 2.37%, rgba(255, 255, 255, 0.7) 14.153%, #fff 29.867%, #fff 67.897%, rgba(255, 255, 255, 0.7) 83.297%, rgba(255, 255, 255, 0.25) 95.356%); }
  .ss-hero .ss-hero__text { position: relative; inset: auto; width: auto; gap: 21px; }
  .ss-hero .ss-hero__head { gap: 38px; }
  .ss-hero .ss-hero__titles { height: auto; gap: 0; }
  .ss-hero .ss-hero__kicker { padding: 6px 0; font-weight: 500; font-size: 13px; line-height: normal; letter-spacing: 0.26px; color: #000; }
  .ss-hero .ss-hero__title-row { margin-top: 6px; }
  .ss-hero .ss-hero__title-line { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 9px; row-gap: 9px; }
  .ss-hero .ss-hero__title { grid-column: 1; justify-self: end; font-size: 36px; line-height: 1.05; letter-spacing: -0.72px; }
  .ss-hero .ss-hero__title em { font-size: 37px; letter-spacing: 0; }
  .ss-hero .ss-hero__arrow { grid-column: 2; width: 38px; height: 20px; margin-top: 6px; }
  .ss-hero .ss-hero__logo { grid-column: 1 / -1; justify-self: center; width: 179px; height: auto; }
  .ss-hero .ss-hero__meta { margin-top: 8px; font-weight: 600; color: #5c8bcc; }
}
/* =========================================================
   1010d, Figma phone 'BRUISE Trace' > 'closing-section' 2343:2514 (375×514): the bruise photos only at the bottom
   (375:312), fading upward into the purple (#4e1b40, solid over the top half); the app video 31 from the top (5px
   frame), 22 under it the "200+ / BRUISE CASES" block (Bold 28 / SemiBold 16, 1.26, 0.44 apart, BRUISE CASES on one
   line) and the button 11 below; 30 at the bottom. Desktop keeps its layout (the client's change is the phone frame)
   ========================================================= */
.br-desk { display: inline; }
@media (max-width: 767px) {
  .br-desk { display: none; }
  .home-bt__closing { height: auto; padding: 31px var(--gutter) 30px; background: #4e1b40; }
  .home-bt__bruises { inset: auto 0 0 0; width: 100%; height: auto; aspect-ratio: 375 / 312; }
  .home-bt__bruises::after { background-image: linear-gradient(0deg, rgba(78, 27, 64, 0.2) 0%, rgba(78, 27, 64, 0.5) 27.644%, rgba(78, 27, 64, 0.8) 41.466%, #4e1b40 52.524%); }
  .home-bt__preview { gap: 22px; }
  .home-bt__cta { gap: 9px; }   /* Figma group 94 = text 53 + 11 + 30; our text box is 55 (line-height 1.26), so 9 keeps the group at 94 */
  .home-bt__cases { font-weight: 600; font-size: 16px; line-height: 1.26; letter-spacing: 0.44px; }
  .home-bt__cases strong { font-weight: 700; font-size: 28px; }
}

/* =========================================================
   1010e — phone SKIN SWAP from the blue section down (client 10/11, Figma 3rd column 'SKIN SWAP' 2350:3160, 375 wide).
   Figma's photos there are phone screenshots, so their places were measured on the frame's picture; the site keeps its
   own files (portrait, logo, packs, the two models). Text starts on the phone's 15px line (Figma 18: 1010d rule).
   Order: portrait (248) → falling stars → skinswap → the intro (17 / 1.28) → three columns stacked (title 17 / 1.28,
   text 12 / 1.36) → product mock-ups (the 1440 group at 0.5715) with the credit (Inter 9) → the two models (375×412,
   cut from the square photo) → brown closing #955420, left (Bold 26 / 29) → footer #6b3a0e. The petri dishes are
   not in the phone frame.
   ========================================================= */
.ss-story__stars-phone { display: none; }
@media (max-width: 767px) {
  .ss-swap { background: #0966b1; }
  .ss-swap__portrait { display: block; width: 100%; height: auto; aspect-ratio: 375 / 248 !important; object-fit: cover; object-position: 50% 0; }
  .ss-story { position: relative; inset: auto; display: flow-root; padding: 0 var(--gutter); }
  .ss-story__stars { display: none; }
  .ss-story__stars-phone { display: block; position: absolute; left: 22.4%; top: -8px; width: 69.867%; height: auto; max-width: none; pointer-events: none; }   /* Figma Group 48: 84,277 262 wide */
  .ss-story__logo { position: relative; inset: auto; display: block; margin: 56.8px 0 0 -1.4px; }   /* ink 17.5 / 351.5 in the frame, 205 wide */
  .ss-story__logo img { width: 206.3px; }
  .ss-story__text { position: relative; inset: auto; width: auto; max-width: 340px; margin-top: 24.8px; font-weight: 600; font-size: 17px; line-height: 1.28; letter-spacing: -0.17px; }
  .ss-info { position: relative; inset: auto; width: auto; max-width: 342px; display: flex; flex-direction: column; gap: 32px; margin-top: 47px; }
  .ss-info__card { gap: 12px; }
  .ss-info__title { font-weight: 600; font-size: 17px; line-height: 1.28; letter-spacing: -0.17px; }
  .ss-info__text { font-weight: 400; font-size: 12px; line-height: 1.36; letter-spacing: -0.12px; }
  .ss-gallery { position: relative; inset: auto; display: flex; flex-direction: column; align-items: flex-start; height: auto; padding: 42px 0 0; background: none; }   /* mock-ups first (order -1, above), then the models */
  /* the 1440 group (599 × 502.5) in % of a 342-wide box at x 23 (Figma: film 23,1217 · yellow 211,1119 · blue 108,1160),
     so it follows the screen width; shadows and corners stay as in Figma */
  .ss-gallery__packs { position: relative; zoom: 1; left: auto; top: auto; width: 91.2%; height: auto; aspect-ratio: 599 / 502.5; margin: 0 0 0 6.133%; }
  .ss-pack--film { left: 0.015%; top: 34.03%; width: 33.36%; height: 65.97%; }
  .ss-pack--yellow { left: 55.04%; top: 0; width: 44.96%; height: 77.55%; }
  .ss-pack--blue { left: 24.96%; top: 14.76%; width: 38.58%; height: 74.85%; }
  .ss-gallery__credit { left: 48.54%; right: auto; top: 96.8%; width: 47.95%; height: auto; font-size: 9px; line-height: normal; letter-spacing: -0.09px; z-index: 2; }   /* Figma 189..353 × 1397, Inter Medium 9, right */
  .ss-gallery__applied { position: relative; inset: auto; z-index: 1; display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 375 / 412 !important; object-fit: contain; object-position: 50% 100%; margin-top: 21.8px; }   /* Figma 1428..1840: the square photo full width at the bottom, blue above */
  .ss-closing { height: auto; display: block; padding: 34.5px var(--gutter) 33.5px; background: #955420; }
  .ss-closing__media, .ss-closing::before { display: none; }
  .ss-closing__content { width: auto; max-width: 340px; margin: 0; text-align: left; font-weight: 700; font-size: 26px; line-height: 29px; letter-spacing: -0.26px; }
  .ss-closing__content p + p { margin-top: 29px; }
  body:has(.ss-swap) .site-footer { background: #6b3a0e; }
}
/* 1010e: phone footer as the FOOTER component (2350:3445): every line is underlined, the copyright too */
@media (max-width: 767px) {
  .site-footer__info p:last-child { text-decoration: underline; text-decoration-thickness: max(1px, 0.04em); text-underline-position: from-font; text-decoration-skip-ink: none; }
}
/* 1010e: phone BruiseTrace footer as Figma 'BruiseTrace-클로징' 2350:3214 (its top fill is solid #4c163d) */
@media (max-width: 767px) {
  .site-footer--purple { background: #4c163d; }
}
/* 1010e: phone home BC PATCH / BRUISE Trace words as Figma 3rd column ('BACTERIAL CELLULOSE Patch' 2350:3088, 'BRUISE Trace'
   2350:3099 / '핸드폰 텍스트' 2350:3425): meta SemiBold 17 / 1.28 black, text Playfair Medium 15 / 1.47 (−1%), title 14 under
   the section top (the component; the BC frame starts its title right at the top — the same 14 is used for both),
   title → meta 16, meta → flow 6, flow → text 41 (BC), meta → HOW IT WORKS 27, REVISION → text 29 (BT). The home
   SKIN SWAP group (no phone frame of its own) follows BC PATCH. */
@media (max-width: 767px) {
  .home-project { padding-top: 14px; }
  .home-sub__meta { font-weight: 600; font-size: 17px; line-height: 1.28; letter-spacing: -0.17px; color: #000; }
  .home-body { font-weight: 500; font-size: 15px; line-height: 1.47; letter-spacing: -0.15px; color: #202020; }
  .home-bcp__titles { gap: 16px; }
  .home-bcp__group { gap: 41px; }
  .home-bcp__img--pantone { margin: 22px var(--gutter) 48px; }
  .home-bt__titles { gap: 16px; }
  .home-bt__row { gap: 33.5px; margin-top: 27px; }   /* Figma line boxes are 22.3 high (site 21.6): text at 317 as in Figma */
  .home-bt__text { padding-bottom: 19px; }
}
/* 1010e: Figma's BC PATCH text box is 347 wide (x 14), 2px more than the 15px lines give: the same line breaks */
@media (max-width: 767px) {
  .home-bcp__body { margin-right: -2px; }
}
/* 1010e: phone ABOUT IO (client 10/11 "바탕 종이랑 글씨랑 버튼 베리언트 적용해서 좀 정리했습니다", Figma 2350:3441 paper 3442,
   main-quote 3443, button 3444, FOOTER 3449): 375×558 of paper (Figma's own paper, torn top, assets/img/home-paper-phone),
   the words 337 wide from y 80 (I'M IO… ExtraBold 30 / 37 −2%, the rest SemiBold 21 / 1.44 −1%, OVERLOOKED / OPPORTUNITIES
   Baskervville Bold Italic 23 / 33 −2%, DIFFERENT WAY OF SEEING. Bold 30 / 37 −1%, following "FOR A" on its line), the
   ABOUT IO button ('핸폰-red BT' black: 156×28 at rest, the pressed look is its mouse-on variant 146×26, flat), black footer */
@media (max-width: 767px) {
  .home-about { height: auto; }
  .home-about__stage { display: block; position: relative; height: 558px; padding: 80px 0 0; }
  .home-about__paper { inset: 0; left: 0; translate: none; width: 100%; height: 100%; object-fit: fill; }
  .home-about__text { position: relative; width: min(337px, calc(100% - 38px)); max-width: none; margin: 0 auto; font-weight: 600; font-size: 21px; line-height: 30.24px; letter-spacing: -0.21px; text-box: none; }   /* the base is the 21px words, so their lines are 30.24 apart */
  .home-about__text .first { display: block; font-weight: 800; font-size: 30px; line-height: 37px; letter-spacing: -0.6px; }
  .home-about__text .mid, .home-about__text .last { display: inline; }
  .home-about__text .mid { font-size: 21px; line-height: 30.24px; margin: 0; }
  .home-about__text .mid span { letter-spacing: -0.21px; }
  .home-about__text .mid em { font-size: 23px; line-height: 33px; letter-spacing: -0.46px; }
  .home-about__text .last { font-weight: 700; font-size: 30px; line-height: 37px; letter-spacing: -0.3px; margin: 0; }
  .home-about__btn { position: absolute; left: 50%; top: 497px; translate: -50% 0; display: flex; align-items: center; justify-content: center; width: 156px; height: 28px; padding: 0; border-radius: 999px; background: #000; color: #fff; filter: none; box-shadow: inset 0 0 0 1.5px #737373, 3px 3px 7px rgba(0, 0, 0, 0.34); font-weight: 600; font-size: 12px; line-height: 1.8; letter-spacing: -0.12px; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
  .home-about__btn span { width: auto; }
  .home-about__btn:active { width: 146px; height: 26px; top: 498px; box-shadow: none; }
  body:has(.home-about) .site-footer { background: #000; }   /* Figma 3449: the home page ends black */
}
/* 1010e: phone QUESTION (client: two title lines, Figma 3rd column 'QUESTION' 2350:3072 — a screen capture of the site on
   a 430 phone shown 375 wide: every size there is 375/430 of the site's). The block is drawn at 0.8721 with the 430
   phone's 400px column, so the title is "WHAT DO WE SEE–AND / WHAT DO WE ASSUME?" and every line breaks as in Figma. */
@media (max-width: 767px) {
  .home-question { padding: 69.8px calc(var(--gutter) - 1.9px); }
  .home-question__inner { zoom: 0.8721; }
}

/* =========================================================
   1010e — home ARCHIVE collage (client 10/11: "그 자리안에서만 그림만 바뀌면 될것같아요", "노리개만 맨뒤레이어에 위치하고
   안변합니다", phones: no enlarging, a tap goes straight to the work; desktop: "중심에서 커질수있으면").
   Every work has one fixed box (the Figma instance box: desktop 2350:1655, phone 2350:3054) and only the picture in it
   changes; each cut is the component variant ('대문루핑 컴포넌트' 2350:2338) drawn to that box, so the box never moves
   (assets/img/collage/). Cuts: Hands On 2, the hair ornament 1 (at the back, never changes), the rest 4. One turn =
   LOOP_MS (assets/js/collage-cycle.js), one cut = turn ÷ cuts. The turn never stops (hover included).
   Desktop hover: the whole work grows from its centre, to 1.2 — less where a bigger one would leave the screen or touch
   the words (measured on every cut's pixels at 1440, ~/Desktop/io-check/1010e/5-collage): Hands On 1.13, Abraxas
   1.06, the hair ornament 1.05, Archive of Skin 1.0 (it touches the right edge). Phones: no growing.
   ========================================================= */
.home-archive .as-piece { position: absolute; display: block; overflow: visible; scale: 1; transform-origin: 50% 50%; transition: scale 0.25s ease; -webkit-mask-image: none; mask-image: none; --hs: 1.2; }
.home-archive .as-piece__canvas { position: absolute; inset: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none; }
.home-archive .as-piece__canvas img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; translate: none !important; scale: none !important; transition: none; }
.home-archive .as-piece:is(:hover, :focus-visible) .cycle > img { animation-play-state: running; }
.home-archive .as-piece--norigae { z-index: 0; }   /* the hair ornament: always at the back */
.home-archive .as-piece:not(.as-piece--norigae) { z-index: 1; }
.home-archive .as-piece:focus-visible { z-index: 5; }
@media (hover: hover) { .home-archive .as-piece:hover { z-index: 5; } }
/* desktop boxes (1440 × 1350 section; 1280–1439 is the same, scaled by fit-1440.js) */
.home-archive .as-piece--dress { left: 928px; top: 270px; width: 446px; height: 729px; --hs: 1.13; }
.home-archive .as-piece--ecdysis { left: 649px; top: 294px; width: 342px; height: 360px; }
.home-archive .as-piece--rubiks { left: 719px; top: 982px; width: 304px; height: 267px; }
.home-archive .as-piece--archive { left: 1082px; top: 1050px; width: 358px; height: 257px; --hs: 1; }
.home-archive .as-piece--norigae { left: 42px; top: 193px; width: 242px; height: 1007px; --hs: 1.05; }
.home-archive .as-piece--voodoo { left: 152px; top: 770px; width: 232px; height: 424px; }
.home-archive .as-piece--boundary { left: 423px; top: 1031px; width: 251px; height: 309px; }
.home-archive .as-piece--abraxas { left: 259px; top: 282px; width: 375px; height: 488px; --hs: 1.06; }
@media (min-width: 1280px) {
  .home-archive__statement { left: 449px; top: 739px; width: 624px; z-index: 6; }   /* Figma 'editorial-statement' 449,739 624 */
}
@media (hover: hover) and (min-width: 768px) {
  .home-archive .as-piece:is(:hover, :focus-visible) { scale: var(--hs); }
}
@media (prefers-reduced-motion: reduce) {
  .home-archive .as-piece { transition: none; }
}
/* 768–1279 (the stacked grid, unchanged): the boxes keep the new Figma proportions */
@media (min-width: 768px) and (max-width: 1279px) {
  .home-archive .as-piece { position: relative; left: auto !important; top: auto !important; height: auto !important; }
  .home-archive .as-piece--dress { aspect-ratio: 446 / 729; }
  .home-archive .as-piece--ecdysis { aspect-ratio: 342 / 360; }
  .home-archive .as-piece--rubiks { aspect-ratio: 304 / 267; }
  .home-archive .as-piece--archive { aspect-ratio: 358 / 257; }
  .home-archive .as-piece--norigae { aspect-ratio: 242 / 1007; }
  .home-archive .as-piece--voodoo { aspect-ratio: 232 / 424; }
  .home-archive .as-piece--boundary { aspect-ratio: 251 / 309; }
  .home-archive .as-piece--abraxas { aspect-ratio: 375 / 488; }
}
/* phones: Figma 2350:3054 (375 wide), boxes in % of the width from the first work's top (Rubik's Cube, y 306) */
@media (max-width: 767px) {
  .home-archive .as-piece { position: relative; left: auto !important; top: auto !important; grid-row: 2; grid-column: 1; align-self: start; justify-self: start; height: auto !important; scale: 1 !important; transition: none; }
  .home-archive .as-piece--rubiks { width: 49.867% !important; aspect-ratio: 187 / 164; margin: 0 0 0 4.8%; }
  .home-archive .as-piece--dress { width: 77.6% !important; aspect-ratio: 291 / 424; margin: 10.4% 0 0 22.4%; }
  .home-archive .as-piece--norigae { width: 42.933% !important; aspect-ratio: 161 / 669; margin: 88% 0 0 3.733%; }
  .home-archive .as-piece--ecdysis { width: 58.4% !important; aspect-ratio: 219 / 229; margin: 131.733% 0 0 29.867%; }
  .home-archive .as-piece--archive { width: 52.267% !important; aspect-ratio: 196 / 141; margin: 201.067% 0 0 47.733%; }
  .home-archive .as-piece--voodoo { width: 34.933% !important; aspect-ratio: 131 / 239; margin: 252.533% 0 0 54.667%; }
  .home-archive .as-piece--boundary { width: 40.267% !important; aspect-ratio: 151 / 186; margin: 258.4% 0 0 9.6%; }
  .home-archive .as-piece--abraxas { width: 60% !important; aspect-ratio: 225 / 293; margin: 310.933% 0 0 17.6%; }
  /* Hands On: Figma stretches the variant across its 291 × 424 phone box; the site keeps the picture's own shape
     (496 : 810 → 259.6 × 424) on the box's left edge, where Figma's picture starts */
  .home-archive .as-piece--dress .as-piece__canvas { width: 89.21% !important; }
  .home-archive__statement { margin-top: 31px; }   /* Figma: the words at 1796, the last work ends at 1765 */
  .home-archive .as-stage { padding-bottom: 45px; }  /* Figma: 45 from the words' box to the red bar */
  .home-archive__desc { max-width: 339px; }        /* Figma 'Description' 339 wide: the same 8 lines */
}
/* every work: its cuts only, in Figma's order (the HTML holds them in that order) */
.home-archive .as-stage .cycle > img { display: block !important; }   /* older phone rules hid some cuts */
.home-archive .as-stage .cycle > img:nth-child(1) { --i: 0; }
.home-archive .as-stage .cycle > img:nth-child(2) { --i: 1; }
.home-archive .as-stage .cycle > img:nth-child(3) { --i: 2; }
.home-archive .as-stage .cycle > img:nth-child(4) { --i: 3; }
.home-archive .as-stage .cycle--2 { --n: 2; --cycle-name: cycle-2; }
.home-archive .as-stage .cycle--4 { --n: 4; --cycle-name: cycle-4; }
/* 1010e: desktop ABOUT IO paper — the new paper of Figma '종이' 2350:1832 (1302 × 728 at 69, −1.5 in the 725 section; the
   picture is Figma's own render of it, assets/img/home-paper-1011) */
@media (min-width: 1280px) {
  .home-about__paper { left: 69px; top: -1.5px; width: 1302px; height: 728px; object-fit: fill; }
}

/* =========================================================
   1010e — desktop, from Figma 2343 → 2350 (client: "약간 간격이나 줄바꿈 거슬리는것들만 피그마에 몇개 해놨어요")
   ========================================================= */
/* header buttons: SemiBold 17, letter spacing 2% → 0 (Figma 'Header(컴포넌트))' 2350:3217, every page) */
.site-header .nav-btn, .nav-btn { letter-spacing: 0; }
/* footer: the copyright line Medium 18 / 32 with no letter spacing; the e-mail keeps SemiBold 20, 1px (FOOTER 2350:3001) */
@media (min-width: 768px) {
  .site-footer__info { line-height: 32px; }
  .site-footer__info p:last-child { letter-spacing: 0; }
}
/* BREAKING top (client: "제목이랑 설명 폰트 약간 수정했습니다. 이 윗부분만요..", "여기 행간 조절 조금"; Figma 2350:1857):
   title → date 10 → 20, date line 567 wide, description Medium 18 / 32 with no letter spacing (6 lines, 192) */
@media (min-width: 1280px) {
  .bc-hero__titles { gap: 20px; }
  .bc-hero__meta { width: 567px; }
  .bc-hero__desc { line-height: 32px; letter-spacing: 0; }
}
/* SKIN SWAP blue section (client: "이 설명 줄바꿈 수정했습니다. 정렬하면서 제가 위에 패치제품 목업도 조금 움직인것같아요";
   Figma 2350:2200): the mock-ups 760,120 599×554 → 749,120 610×563 (each 1.0187 larger, same arrangement), the credit
   284,489 in four lines (Inter Medium 14, 6%, right) */
@media (min-width: 768px) {
  .ss-gallery__packs { left: 749px; width: 610px; height: 563px; }
  .ss-pack--film { left: -0.2px; top: 174.2px; width: 203.56px; height: 337.77px; }
  .ss-pack--yellow { left: 335.63px; top: 0; width: 274.37px; height: 397.02px; }
  .ss-pack--blue { left: 152.01px; top: 75.56px; width: 235.43px; height: 383.19px; }
  .ss-gallery__credit { left: 284px; }
}
/* home ABOUT IO button: Figma 'Black Button / Selectable' 선택=2 (flat) at rest */
@media (min-width: 768px) {
  .home-about__btn { filter: none; }
}
/* 1010e (item 7): 768–1279, the SKIN SWAP gallery (two models + mock-ups + credit) is the 1440 picture scaled to the width
   (cqw of the gallery), not stacked; below 768 the phone layout takes over. The three columns above keep their own
   readable sizes; the credit never goes below 10px. */
@media (min-width: 768px) and (max-width: 1279px) {
  .ss-gallery { position: relative; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 1440 / 747; padding: 0; container-type: inline-size; background: linear-gradient(180deg, #0966b1 9.473%, #2b84cc 100%); }
  .ss-gallery__applied { position: absolute; left: 0; top: calc(4.444cqw * var(--cqfix, 1)); width: calc(47.43cqw * var(--cqfix, 1)); height: calc(47.43cqw * var(--cqfix, 1)); max-width: none; margin: 0; aspect-ratio: auto !important; }
  .ss-gallery__packs { position: absolute; left: calc(52.01cqw * var(--cqfix, 1)); top: calc(8.333cqw * var(--cqfix, 1)); width: calc(42.36cqw * var(--cqfix, 1)); height: auto; aspect-ratio: 610 / 512; margin: 0; zoom: 1; }
  .ss-pack--film { left: -0.033%; top: 34.02%; width: 33.37%; height: 65.97%; }
  .ss-pack--yellow { left: 55.02%; top: 0; width: 44.98%; height: 77.54%; }
  .ss-pack--blue { left: 24.92%; top: 14.76%; width: 38.6%; height: 74.84%; }
  .ss-gallery__credit { left: auto; right: 2.3%; top: 95.51%; width: max-content; height: auto; font-size: max(10px, calc(0.9722cqw * var(--cqfix, 1))); letter-spacing: 0.06em; line-height: normal; white-space: nowrap; }   /* right edge as at 1440 (284 + 312 of 610); at 10px the lines grow to the left */
}
/* 1010e: phone buttons and colour bars — Figma '핸드폰 -버튼' 2350:3421 is now SemiBold 14 / 17 with 1px letter spacing
   (174 → 189 wide for OPEN BRUISETRACE); the bars ('핸드폰 -섹션분리') use the same component */
@media (max-width: 767px) {
  .btn-primary, .home-hero__watch, .home-bar { letter-spacing: 1px; }
}
/* 1010e: the details start with a line break in the HTML (white-space: pre-wrap keeps it as an empty first line), so
   "2025" sat one line (13px) under Figma's 361; on phones the box moves up by that line */
@media (max-width: 767px) {
  .aos__details { margin-top: 1px; }
}
/* =========================================================
   1010g — Figma 2362 (client 10/11, "데스크탑용 … 전체적으로 폰트들을 다시좀 정리했어요"). Desktop and the
   768–1279 middle widths take the new type; phones keep theirs (the phone frames did not change), except the ARCHIVE
   gallery captions, whose phone frames did (at the end)
   ========================================================= */
@media (min-width: 768px) {
  /* 대문 'questions,' (2362:1672): 58 → 53, 1%; line 1 → line 2 is 4 less (the other gaps stay) */
  .home-statement__a em { font-size: calc(53 * var(--u)); letter-spacing: calc(0.53 * var(--u)); }
  .home-statement__a > .home-statement__line + .home-statement__line { margin-top: calc(20.6 * var(--u)); }
  /* section bars (1696·1785·1831·1847): one style, SemiBold 21 / 1.28 / 0 (the blue one keeps −1% in Figma: made the
     same as the other three, "섹션분리바 안에 폰트들 다 같음") */
  .home-bar, .home-bar--red { font-size: 21px; line-height: 1.28; letter-spacing: 0; }
  /* question list (1796·1800): SemiBold like the other two */
  .home-q__source--bold { font-weight: 600; }
  /* BT / SS hero kicker (1904·2055): 16, 1px */
  .bt-hero__kicker, .ss-hero__kicker { font-size: 16px; line-height: 20px; letter-spacing: 1px; }   /* Figma box 20 */
  /* BT hero title (1905): Trace 70 / 1.35 → 68 / 1 */
  .bt-hero__title em { font-size: 68px; line-height: 1; }
  /* BT hero lead (1907): 21 / 1.28 → 24 / 1.35 */
  .bt-hero__lead { font-size: 24px; line-height: 1.35; }
  /* BT HOW IT WORKS flow (1919): 20 → 21, two lines (Figma's own break before "→ Analyze", br.br-desk) */
  .bt-how__flow { font-size: 21px; }
  /* numbered section lines (공통소스들 Section Header 3022·3024): Inter 14, 6% → 2%; BT 03·04 now Inter too */
  .section-line { letter-spacing: 0.28px; }
  .section-line--alt .section-line__label { font-family: var(--font-ui); }
  /* BT CONVERSATIONS card titles: −2% → −1% */
  .convo-card__title { letter-spacing: -0.28px; }
  /* Bold 28 card titles and the BT closing second line: line height 38 → 115% */
  .insight-card__title, .ss-media-card__title, .ss-info__title, .bt-closing__sub { line-height: 1.15; }
  /* SS hero lead (2069): 133% / −0.5% → 135% / 0 */
  .ss-hero__lead { line-height: 1.35; letter-spacing: 0; }
  /* SS RESEARCH subtitle (2082): 24 / 32 / −0.5% → 21 / 1.28 / 0 */
  .ss-lead { font-size: 21px; line-height: 1.28; letter-spacing: 0; }
  /* SS blue section credit (2228): 6% → 2% */
  .ss-gallery__credit { letter-spacing: 0.02em; }
}
/* middle widths: the larger subtitles left one word alone on their last line at 768 ("bruises.", "tones.") */
@media (min-width: 768px) and (max-width: 1279px) {
  .bt-hero__lead, .ss-lead { text-wrap: balance; }
}
@media (min-width: 1280px) {
  .ss-lead { width: 577px; }   /* Figma 2082: 577 wide */
}
/* phone ARCHIVE gallery captions (Figma 3134·3143 → ARCHIVE OF SKIN-gallery-text 2362:2447): the desktop sizes now,
   title ExtraBold 19 / 16, details Medium 13 / 16 (Figma's line breaks as before). The details' empty first line is
   16 now: "2025" at Figma's 361 = title box end + 14 */
@media (max-width: 767px) {
  .aos__title { font-size: 19px; line-height: 16px; letter-spacing: -0.19px; }
  .aos__details { margin-top: -2px; font-size: 13px; line-height: 16px; letter-spacing: -0.13px; }
}
/* below 375 (no zoom there) the caption scales with its box (345 at 375), so Figma's lines stay lines and nothing is
   cut by the thumbnail row (320: 13 → 10.9px) */
@media (max-width: 374px) {
  .aos__title { font-size: calc((100 * var(--vw, 1vw) - 30px) * 19 / 345); line-height: calc((100 * var(--vw, 1vw) - 30px) * 16 / 345); }
  .aos__details { font-size: calc((100 * var(--vw, 1vw) - 30px) * 13 / 345); line-height: calc((100 * var(--vw, 1vw) - 30px) * 16 / 345); }
}

/* =========================================================
   1010h — 768–1279
   ========================================================= */
/* header (client: at ~850px the buttons did not fit; 'BREAKING CONFORMITY' was cut and faded at the left). 1010i (client:
   "이거 줄어들땐 줄어들더라도 끝단 맞춰서 줄어들게 할 수 있나?"): the 1440 header row — IO's left edge to ABOUT IO's right
   edge, 1246 wide (x 95–1341) — is drawn as one picture from the page's start line to its end line (the side margins,
   40px), so IO starts where the text starts and ABOUT IO ends where it ends. Factor --hzh = (window − 2 × 40) / 1246;
   IO, the buttons, their words and gaps and the white bar keep the 1440 proportions. --hz = window / 1440
   (assets/js/fit-1440.js, before the first paint; the fallback is the 768 one). The header height, and with it
   scroll-padding-top and everything placed under the header, follows (--header-h). No sideways scroll, no fading ends.
   (1010h scaled by --hz itself, which also shrank 1440's 95 / 99px side margins: IO and ABOUT IO sat inside the lines) */
@media (min-width: 768px) and (max-width: 1279px) {
  /* 1011b: scaled with transform (not zoom: iPad WebKit drew the words unscaled), every number from fit-1440.js (the
     fallbacks are the 768 ones): the header is --hw header px wide (the window / --hzh) and IO … ABOUT IO sit --hnl /
     --hnr from its ends (40px on screen) */
  :root { --hzh: 0.552167; --header-h: 32.578px; }
  .site-header { right: auto; width: var(--hw, 1390.88px); height: 59px; transform: translateZ(0) scale(var(--hzh, 0.552167)); transform-origin: 0 0; overflow: visible; }
  .site-nav { left: var(--hnl, 72.442px); right: var(--hnr, 72.442px); gap: 65px; }
  .site-nav__list { justify-content: space-between; gap: 0; overflow: visible; padding: 0; margin: 0; -webkit-mask-image: none; mask-image: none; }
}
/* edges (client: "일케 중간사이즈 정도로 봤을 때 끝단 안맞는것들이 있음. 늘리던가 하자", "여기도 마찬가지"). The side margins
   (40px) are the line. One picture / video / box: kept in proportion and widened to both margins. Things that sit side
   by side at 1440: that 1440 arrangement drawn as one picture, scaled to the margins (or, for full-width bands, to the
   window: --hz) — as the SKIN SWAP blue section (10/11 1:05). Body text keeps its size; words inside a scaled picture
   are at least 10px. 767 and below and 1280 and up are untouched. */
.as-collage { display: contents; }   /* index.html: the works + words box; a box of its own only at 768–1279 */
@media (min-width: 1280px) {
  .home-archive__head { z-index: 1; }   /* the head now comes before the works in the HTML: still drawn over the hair ornament */
}
@media (min-width: 768px) and (max-width: 1279px) {
  /* home ARCHIVE (1010e list 1, the sparse 3-column grid): the title and paragraph stay as they are; under them the works
     and the words are the 1440 picture (y 193–1350 of the 1440×1350 section) scaled to the window, 40px under the
     paragraph. Each work keeps its 1440 box and its hover (grows from its centre) */
  .home-archive .as-stage { display: block; padding: 120px 0 0; }
  .home-archive__head { margin-inline: var(--gutter); width: auto; }
  .home-archive .as-stage { display: flow-root; }   /* 1011b: the collage's negative bottom margin stays inside */
  .home-archive .as-collage { display: block; position: relative; width: 1440px; height: 1350px; margin-top: var(--as-mt, -62.933px); margin-bottom: var(--as-mb, -630px); transform: scale(var(--hz, 0.533333)); transform-origin: 0 0; }
  .home-archive .as-collage .as-piece { position: absolute; margin: 0; aspect-ratio: auto; grid-area: auto; }
  .home-archive .as-collage .as-piece--dress { left: 928px !important; top: 270px !important; width: 446px !important; height: 729px !important; }
  .home-archive .as-collage .as-piece--ecdysis { left: 649px !important; top: 294px !important; width: 342px !important; height: 360px !important; }
  .home-archive .as-collage .as-piece--rubiks { left: 719px !important; top: 982px !important; width: 304px !important; height: 267px !important; }
  .home-archive .as-collage .as-piece--archive { left: 1082px !important; top: 1050px !important; width: 358px !important; height: 257px !important; }
  .home-archive .as-collage .as-piece--norigae { left: 42px !important; top: 193px !important; width: 242px !important; height: 1007px !important; }
  .home-archive .as-collage .as-piece--voodoo { left: 152px !important; top: 770px !important; width: 232px !important; height: 424px !important; }
  .home-archive .as-collage .as-piece--boundary { left: 423px !important; top: 1031px !important; width: 251px !important; height: 309px !important; }
  .home-archive .as-collage .as-piece--abraxas { left: 259px !important; top: 282px !important; width: 375px !important; height: 488px !important; }
  .home-archive .as-collage .home-archive__statement { position: absolute; left: 449px; top: 739px; width: 624px; margin: 0; grid-area: auto; z-index: 6; font-size: 48px; line-height: 1.12; white-space: pre; }

  /* home BRUISE Trace (1010e list 2: the app video tall in the middle, 200+ and the button under it): the 1440 band
     (1440×593: bruise photos, the app, 200+ and the button left of it) scaled to the window. The button's words ≥ 10px */
  .home-bt__closing { width: 1440px; height: 593px; padding: 0; margin-bottom: var(--hbt-mb, -316.267px); transform: scale(var(--hz, 0.533333)); transform-origin: 0 0; }
  .home-bt__bruises { inset: 0 auto 0 0; width: auto; aspect-ratio: 654 / 545; }
  .home-bt__preview { position: absolute; left: 460px; top: 24px; width: 861px; height: 545px; max-width: none; margin: 0; display: block; }
  .home-bt__cta { position: absolute; left: 0; bottom: 0; width: 260px; height: 170px; align-items: flex-end; }
  .home-bt__app { position: absolute; right: 0; top: 0; width: 556px; height: 545px; aspect-ratio: auto; }
  .home-bt__cta .btn-primary { font-size: var(--hbt-fs, 18.75px); }

  /* BruiseTrace HOW IT WORKS: the app screen (one box) from the left margin to the right one, 556:545 kept */
  .bt-how .browser { width: 100%; }
  .bt-how .browser__screen { width: 100%; height: auto; aspect-ratio: 556 / 545; }
  /* the four steps (side by side at 1440, 612.32 wide with the outer pictures' 1.16 overhang): scaled so the first and
     last pictures sit on the margins */
  .bt-steps { flex: none; width: var(--st-w, 611.16px); margin-left: var(--st-ml, 1.303371px); margin-bottom: var(--st-mb, 24.966px); transform: scale(var(--st-s, 1.123596)); transform-origin: 0 0; }

  /* BruiseTrace CONVERSATIONS (1010e list 3: one card per row, narrow, in the middle): the three 410px cards in a row,
     as at 1440 (1250 wide), scaled to the margins; their words ≥ 10px (12.7px at 768) */
  .bt-convo-cards { flex-direction: row; align-items: stretch; width: 1250px; max-width: none; margin: 0 auto var(--cc-mb, -184.336px) var(--gutter); transform: scale(var(--cc-s, 0.5504)); transform-origin: 0 0; }
  .convo-card { width: 410px; max-width: none; height: 410px; aspect-ratio: auto; flex: none; }
  .convo-card__title { font-size: 28px; }
  .convo-card__sub { font-size: 23px; }

  /* BruiseTrace closing: the 1440 band (1440×495: bruise photos left, the words right) scaled to the window, as the
     SKIN SWAP closing below */
  main:has(> .bt-closing, > .ss-closing) { display: flow-root; }   /* 1011b: the band's negative bottom margin stays inside main */
  .bt-closing { display: block; width: 1440px; height: 495px; padding: 0; margin-bottom: var(--btc-mb, -231px); transform: scale(var(--hz, 0.533333)); transform-origin: 0 0; }
  .bt-closing__media { position: absolute; left: 0; top: 0; bottom: 0; height: auto; margin: 0; aspect-ratio: 654 / 545; }
  .bt-closing__content { position: absolute; left: calc(50% - 120px); top: 86px; width: 745px; margin: 0; }
  .bt-closing__quote { font-size: 48px; line-height: 54px; }
  .bt-closing__sub { font-size: 28px; }

  /* SKIN SWAP findings (1010e list 4): the jar photo and the 99.5% card side by side at 1440 (310×400 each): the card
     is its 1440 self scaled to its half (so it ends where the photo ends); the Pantone picture already spans the margins */
  .ss-findings__media .ss-similarity { flex: none; width: 310px; height: 400px; margin: 0 var(--sim-mr, 28px) var(--sim-mb, 36.129px) 0; transform: scale(var(--sim-s, 1.090323)); transform-origin: 0 0; }

  /* SKIN SWAP closing (1010e list 4: the petri photo on top, the words under it): the 1440 band (1440×612) scaled to
     the window */
  .ss-closing { width: 1440px; height: 612px; padding: 75px 85px 78px 100px; align-items: flex-end; margin-bottom: var(--ssc-mb, -285.6px); transform: scale(var(--hz, 0.533333)); transform-origin: 0 0; }
  .ss-closing__media { position: absolute; left: 0; top: 0; bottom: 0; width: auto; height: 100%; margin: 0; aspect-ratio: 654 / 545; }
  .ss-closing::before { display: block; }
  .ss-closing__content { width: 952px; margin-top: 0; font-size: 48px; line-height: 54px; }
  .ss-closing__content p + p { margin-top: 54px; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  /* footer: the links and the e-mail on the side margins (they kept 1440's 93px; at 768 the © line then broke in two) */
  .site-footer { padding-inline: var(--gutter); }
}
/* 1010h: the phone header can be dragged with a mouse (assets/js/nav-phone.js): no text selection, no link picture dragged out */
@media (max-width: 767px) {
  .nav-phone, .nav-phone .np { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
}

/* =========================================================
   1011a — open-day QA
   ========================================================= */
/* phone ABOUT IO below 375 (QA 1011: at 320–360 the words ran past the 558px paper; ABOUT IO covered 'OPPORTUNITIES' and
   'SEEING.' was cut): the 375 section (Figma 2362 phone About: closing 3461, main-quote, the button, FOOTER 3469) drawn
   as one picture scaled by width / 375 — paper, words, line breaks and button keep the 375 places (320: × 0.853, the
   21px words 17.9px). 375 and up are untouched */
@media (max-width: 374px) {
  .home-about { --u: calc(var(--vw, 1vw) * 100 / 375); }
  .home-about__stage { height: calc(558 * var(--u)); padding-top: calc(80 * var(--u)); }
  .home-about__text { width: calc(337 * var(--u)); font-size: calc(21 * var(--u)); line-height: calc(30.24 * var(--u)); letter-spacing: calc(-0.21 * var(--u)); }
  .home-about__text .first { font-size: calc(30 * var(--u)); line-height: calc(37 * var(--u)); letter-spacing: calc(-0.6 * var(--u)); }
  .home-about__text .mid { font-size: calc(21 * var(--u)); line-height: calc(30.24 * var(--u)); }
  .home-about__text .mid span { letter-spacing: calc(-0.21 * var(--u)); }
  .home-about__text .mid em { font-size: calc(23 * var(--u)); line-height: calc(33 * var(--u)); letter-spacing: calc(-0.46 * var(--u)); }
  .home-about__text .last { font-size: calc(30 * var(--u)); line-height: calc(37 * var(--u)); letter-spacing: calc(-0.3 * var(--u)); }
  .home-about__btn { top: calc(497 * var(--u)); width: calc(156 * var(--u)); height: calc(28 * var(--u)); font-size: calc(12 * var(--u)); letter-spacing: calc(-0.12 * var(--u)); box-shadow: inset 0 0 0 calc(1.5 * var(--u)) #737373, calc(3 * var(--u)) calc(3 * var(--u)) calc(7 * var(--u)) rgba(0, 0, 0, 0.34); }
  .home-about__btn:active { width: calc(146 * var(--u)); height: calc(26 * var(--u)); top: calc(498 * var(--u)); box-shadow: none; }
}
/* phone ARCHIVE gallery on a short screen (QA 1011: at 375×553, iPhone SE / 8 with Safari's bars, the thumbnail strip was
   cut by 20px): assets/js/archive-gallery.js makes the picture frame lower so the strip and the caption fit, and marks
   the row is-short. Each picture is then the 375:239 picture (its own place and size in the frame, as above) scaled
   down in the middle of the frame: smaller, never cut. Screens tall enough are untouched */
@media (max-width: 767px) {
  .aos__row.is-short > .aos__view { display: flex; }
  .aos__row.is-short .aos__view img { flex: none; width: min(100%, calc(100cqh * var(--cqfix, 1) * 375 / 239)); height: min(100%, calc(100cqw * var(--cqfix, 1) * 239 / 375)); margin: auto; }
}
/* 768–1279 section bars (QA 1011: VIEW THE SERIES / EXPLORE THE PROJECT ended 32px from the window edge, 8px outside the
   40px line the header and the text keep): the words end on the right margin line. Phones and 1280 up are untouched */
@media (min-width: 768px) and (max-width: 1279px) {
  .home-bar { padding-right: var(--gutter); }
  .home-bar, .home-bar--red { height: auto; min-height: 47px; }   /* 1011b: words drawn bigger than asked (an app's text size) make the bar taller instead of being cut */
}
/* 404.html (Netlify shows it for any address it does not have): the header and the grey footer of the other pages, and in
   the middle only "404" (the About title: ExtraBold 68 / 1.05, phones 44 / 1.06), "PAGE NOT FOUND" (the section bars'
   SemiBold 21 / 1.28, phones the home meta 17 / 1.28) and the purple button to the home page. The page fills the
   window, so the footer stays at the bottom */
body:has(.not-found) { display: flex; flex-direction: column; min-height: var(--vh100, 100svh); }
body:has(.not-found) > main { flex: 1 0 auto; display: flex; }
.not-found { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: calc(var(--header-h) + 120px) var(--gutter) 120px; text-align: center; background: #fff; color: var(--io-black); }
.not-found__title { font-weight: 800; font-size: 68px; line-height: 1.05; letter-spacing: -1.36px; }
.not-found__text { font-weight: 600; font-size: 21px; line-height: 1.28; letter-spacing: 0; }
.not-found__btn { margin-top: 24px; }
@media (max-width: 767px) {
  .not-found { padding: calc(var(--header-h) + 87px) var(--gutter) 80px; }
  .not-found__title { font-size: 44px; line-height: 1.06; letter-spacing: -0.7px; }
  .not-found__text { font-size: 17px; }
}
/* 1012b: windows wider than 1440 — the parts that stayed on the window's edges are placed on the centred 1440 page
   (io-check/1012a REPORT 1: at 1920 IO started at 335 but the number line at 95). Each value is the 1440 value plus the
   centred page's offset (50% − 720px), so it equals the 1440 value at 1440; the photos and colour fields beside them
   still reach the window's edges. Last in the file so it wins over each part's own rule. compare/ds-compare.css sets the
   same values for html.dsk-wide in the comparison build: the same value twice, nothing added twice. 1012c: the VIEW THE
   SERIES / EXPLORE THE PROJECT bar words too (they stayed 32px from the window's edge): the bar still fills the width,
   its words end where the 1440 page has them (1408 at 1440), as compare/ds-compare.css has it */
@media (min-width: 1441px) {
  .section-line { padding-inline: max(var(--gutter), calc(50% - 625px)); }                /* 01 ──── LABEL number lines */
  .bc-rule { padding-left: calc(50% - 720px + 106px); }                                   /* BREAKING CONFORMITY hero rule */
  .home-bc__row { left: calc(50% - 720px + 131px); }                                      /* home BREAKING: meta · title · text */
  .home-bcp__text { padding-inline: max(var(--gutter), calc(50% - 625px)); }              /* home BC PATCH / SKIN SWAP words */
  .home-bt__text { padding-inline: max(var(--gutter), calc(50% - 625px)); }               /* home BRUISE TRACE words, */
  .home-bt__row { left: max(var(--gutter), calc(50% - 625px)); }                           /* … its row, */
  .home-bt__preview { left: calc(50% - 720px + 460px); }                                   /* … case count, button and app video */
  .ss-closing { padding-right: calc(50% - 720px + 85px); }                                /* SKIN SWAP closing words */
  .home-bar { padding-right: calc(50% - 720px + 32px); }                                   /* VIEW THE SERIES / EXPLORE THE PROJECT bar words */
}
/* 1012c: 1280 and up, boxes of words that had a fixed height grow with their words instead of cutting them. On an iPad
   (iPadOS draws text inside the 1280+ page zoom at its unzoomed size, 1011b) the words came out taller / wider than
   the box: io-check/1012c REPORT lists each place and what the simulator showed. Each height is now the least height
   (same value), and a line too long for its box wraps inside it; where the words fit (Chrome, Mac) every box is as
   before. Below 1280 nothing changes (the 768–1279 parts are scaled with transform, 1011b) */
@media (min-width: 1280px) {
  /* home BC PATCH: the title wraps inside its 617px column ('Patch' was cut at the right), the text block grows
     (the last line of the words was cut at the bottom) */
  .home-bcp__text { height: auto; min-height: 476px; }
  .home-project--bcp { height: auto; min-height: 998px; }   /* … and its section (overflow hidden: the bar under it was cut once the words grew) */
  .home-project--bt { height: auto; min-height: 986px; }
  .home-bcp__title { max-width: 100%; }
  /* home BRUISE TRACE words: the row is in the flow, 131 from the block's top as before (a first grid row of at least 131
     holds the titles; a margin under the titles would land on a fraction of a px: their height is 96.9), the HOW IT
     WORKS lines and the words beside it side by side (left −2 / 651, as Figma), 30 under the row: the block is 304 where
     they fit and grows where they do not (the last line was cut; 'Review Results' ran into the words beside it, it now
     wraps). The row's left comes from the block's padding (the 1441+ rule and compare/ds-compare.css set the same value
     as a left: it is not added a second time) */
  .home-project--bt .home-bt__text { height: auto; min-height: 304px; padding-bottom: 30px; display: grid; grid-template-rows: minmax(131px, auto) auto; align-content: start; align-items: start; }   /* align-content: the rows keep their sizes (the 0.8 left over is not shared out) */
  .home-project--bt .home-bt__text > .home-bt__row { position: relative; left: auto; top: auto; width: auto; height: auto; min-height: 140px; display: grid; grid-template-columns: 651px 596px; align-items: start; }
  .home-project--bt .home-bt__row > .home-bt__heads { position: relative; left: -2px; top: auto; grid-area: 1 / 1; }
  .home-project--bt .home-bt__row > .home-bt__desc { position: relative; left: auto; top: auto; grid-area: 1 / 2; }
  .home-project--bt .home-bt__heads p { white-space: normal; }
  /* SKIN SWAP: the 99.5% card and its yellow part ('score' was cut). (The RESEARCH heading above them, which took a
     third line and ran over 'Research · 2025', stays 210 here: with an auto height, even where it came out 210, WebKit
     (Safari) drew every photo of the page a little differently at 1280×1080. assets/js/fit-1440.js lets it grow where
     its words come out taller, guardWords) */
  .ss-similarity { height: auto; min-height: 400px; }
  .ss-similarity__result { height: auto; min-height: 176px; padding-bottom: 13px; }   /* its words take 177 of the 176 (the last px of the 16 under them, hidden): 3 less under them, so it is 176 wherever they fit and grows only past that */
  /* … the photo row under them is 399 with 400 high pictures in it (Figma): its height follows the pictures, 1px given
     back under it, so the card's words that grow push what follows instead of running under it; the two sections around
     these (1689, 1179: their content takes 1646 / 1171) are least heights too */
  .ss-findings__media { height: auto; min-height: 399px; margin-bottom: -1px; }
  .section--h1689 { height: auto; min-height: 1689px; }
  .section--h1179 { height: auto; min-height: 1179px; }
  /* BRUISE TRACE: the four steps' captions and the 328 insight cards (their last line went under the box) */
  .bt-steps { height: auto; min-height: 202px; }
  /* FROM FEEDBACK TO THE NEXT ITERATION / … STEP (213: three 71.4 lines, 214.2 (Chrome 214.22, WebKit 214.19), the
     last 1.2 under the box): it took a fourth line and ran over the words under it. Its height follows its lines with
     2px given back, and the row around it is at least 213, so three lines sit as before in both engines and four push
     the words under it. The BRUISE TRACE section around it stays 830 here: its content takes 830.5 and the 04 line
     (20, overflow hidden) gives up the 0.5, which a least height would not do (under the 1280–1439 zoom that is not a
     whole 0.5 either). Where its content comes out taller, assets/js/fit-1440.js lets it grow (guardWords) */
  .bt-feedback .two-col-intro { min-height: 213px; }
  .bt-feedback .two-col-intro .t-display { height: auto; margin-bottom: -2px; }
  .bt-how__left { height: auto; min-height: 600px; }
  /* home ABOUT IO: the paragraph took one more line and the ABOUT IO button (placed at 590) covered 'WAY'. The paragraph
     and the button are in a grid: the first row is at least 590 (116 above the paragraph, 49 under it: 541 + 49), so the
     button is at 590 where the paragraph fits and goes down with it where it does not; the section and the paper
     picture grow with it (725 where it fits: 590 + 43 + 92) */
  .home-about { height: auto; min-height: 725px; }
  .home-about .home-about__stage { height: auto; min-height: 725px; display: grid; grid-template-rows: minmax(590px, auto) auto; align-content: start; align-items: start; justify-items: start; padding-bottom: 92px; }
  .home-about .home-about__paper { height: max(728px, calc(100% + 2px)); }   /* 728 from −1.5 at 725, as the 1280+ rule above has it; with the section where it grows */
  .home-about .home-about__stage > .home-about__text { position: relative; left: auto; top: auto; grid-area: 1 / 1; margin: 116px 0 48px 150px; }   /* 48: its lines take 541.2 in Chrome, 1px given back so the row is 590 */
  .home-about .home-about__stage > .home-about__btn { position: relative; left: auto; top: auto; grid-area: 2 / 1; margin-left: 665px; }   /* (its content takes 592; the HOW IT WORKS section around it stays 760: its row overhangs by design) */
  .insight-card--h328 { height: auto; min-height: 328px; }
}
/* =========================================================
   1017a — 대문 HERO, Figma 2408:1330 (client 10/17 "최종": smaller words, a taller film, the hero stays as tall).
   1440: header 59, words 59–339 (280), film 339–800 (461). Desktop and the 768–1279 middle widths take the new type
   (the middle widths keep their scaling, --u); phones keep theirs (no phone frame in Figma for this)
   ========================================================= */
/* 'questions,' Playfair SemiBold Italic 44, no underline (was 53, 1%, underlined). Figma's ',' is 45 with 1%: the 0.45px
   is left out (under 1px) */
@media (min-width: 768px) {
  .home-statement__a em { font-size: calc(44 * var(--u)); letter-spacing: 0; text-decoration: none; }
}
/* 1280 and up: 33 / 50 / 33 (was 37 / 64 / 37); line 1's caps at 101 (42 under the header), the film 339–800 */
@media (min-width: 1280px) {
  .home-statement { padding-block: 42px; }
  .home-statement__a, .home-statement__c { font-size: 33px; }
  .home-statement__b { font-size: 50px; letter-spacing: -1px; }
  /* baseline of one line to the cap top of the next, from 2408:1333: 41.44 − 24.6 (line 2 is as tall as Figma's 37px
     space at 112%), 13.7 to SKIN (its caps at 180.8–218.0), 17.0 to BETWEEN (cap top 235), 37.29 − 24.6 */
  .home-statement__a > .home-statement__line + .home-statement__line { margin-top: 16.85px; }
  .home-statement > .home-statement__b { margin-top: 13.7px; }
  .home-statement__c > .home-statement__line:first-child { margin-top: 17px; }
  .home-statement__c > .home-statement__line + .home-statement__line { margin-top: 12.7px; }
  .home-hero__media { top: 339px; height: 461px; }
  /* WATCH FULL FILM 34 above the bottom (722–766, was 40), and the sound button with it (3 higher than the button's
     bottom, as before: 43 → 37) */
  .home-hero__watch { bottom: 34px; }
  .home-hero__sound { bottom: 37px; }
}
@supports not (text-box: trim-both cap alphabetic) {
  @media (min-width: 1280px) {
    .home-statement__a > .home-statement__line + .home-statement__line { margin-top: calc(16.85px - 0.165em); }
    .home-statement > .home-statement__b { margin-top: calc(13.7px - 0.165em); }
    .home-statement__c > .home-statement__line:first-child { margin-top: calc(17px - 0.165em); }
    .home-statement__c > .home-statement__line + .home-statement__line { margin-top: calc(12.7px - 0.165em); }
  }
}
/* 768–1279: the hero keeps exactly the height it had, so nothing under it moves (a height worked out from the new
   sizes misses by 1/64px: Chrome and WebKit round the caps of a line differently). So the lines and the film keep
   their old boxes, and only what is drawn changes:
   - each line keeps its old size and spaces (the trim follows the line's own size); its words (.home-statement__t) are
     drawn at the new size, moved to the new places: the baselines of the new words (paddings 42, spaces 16.85 / 13.7
     / 17 / 12.7, caps 0.745 em) less those of the old ones (paddings 35, spaces 20.6 / 27.8 / 23.2 / 13.9), in Figma px
   - the film's box stays where it was (1440 / 419 under the old words), the film reaches up out of it by what the words
     gave back: 313.44 − 279.84 = 33.6 */
@media (min-width: 768px) and (max-width: 1279px) {
  .home-statement__t { position: relative; }
  .home-statement__a .home-statement__t, .home-statement__c .home-statement__t { font-size: calc(33 * var(--u)); }
  .home-statement__b .home-statement__t { font-size: calc(50 * var(--u)); letter-spacing: -0.02em; }
  .home-statement__a > .home-statement__line:first-child .home-statement__t { top: calc(4.02 * var(--u)); }
  .home-statement__a > .home-statement__line + .home-statement__line .home-statement__t { top: calc(-2.71 * var(--u)); }
  .home-statement__b .home-statement__t { top: calc(-27.24 * var(--u)); }
  .home-statement__c > .home-statement__line:first-child .home-statement__t { top: calc(-36.42 * var(--u)); }
  .home-statement__c > .home-statement__line + .home-statement__line .home-statement__t { top: calc(-40.6 * var(--u)); }
  .home-hero__media { overflow: visible; }
  .home-hero__video { position: absolute; left: 0; bottom: 0; top: auto; width: 100%; height: calc(100% + 33.6 * var(--u)); }   /* a film's height is not stretched by top + bottom: set */
  /* --u is set on .home-statement (its sibling): the same two rules here (1100–1279, then below 1100) */
  .home-hero__media { --u: min(1px, calc((calc(100 * var(--vw, 1vw)) - 2 * var(--gutter)) / 906)); }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .home-hero__media { --u: min(1px, calc((calc(100 * var(--vw, 1vw)) - 2 * var(--gutter) - 8px) / 730)); }
}