/* ============================================================
   BK bio · APPLICATIONS page (V3). Loads AFTER bk-elevated.css.
   Reuses its tokens, topnav, mast, seam, band, cta-final, foot,
   .btn*, .ml, .rv, .grain, .atag idiom.
   Adds page-specific blocks only:
     · chain thread (mirrors Products .p-thread)
     · four detailed application blocks (asymmetric, alternating
       deep/light, photo + body + spec table of brands/formats/certs)
     · typographic gap card for the Cosmetics reshoot slot
     · application -> branded-ingredient cross-reference matrix
   Composes from existing tokens only. No SKU codes. No inline styles.
   ============================================================ */

/* ---------- HERO HEADLINE (page override) ----------
   The shared .mast h1 caps at max-width:24ch with text-wrap:balance. This page's
   English headline is long ("...with innovative ingredients and technology."), so the
   24ch box + balance re-break it into ~4 ragged lines. Widen the box and let the
   explicit <br> in the markup own the break so each half stays on ONE line at desktop
   (1440 + 1024). Scoped to the EN document; the KO twin keeps its own sizing/breaks. */
/* reset the inherited text-wrap:balance (it re-breaks even with white-space:nowrap),
   then nowrap each <br>-half so the markup break alone defines the two lines */
:lang(en) .mast h1{max-width:none;text-wrap:nowrap;white-space:nowrap;
  font-size:clamp(30px,3.2vw,46px);}
/* below the point where the long second half would overflow, wrap gracefully */
@media(max-width:1000px){
  :lang(en) .mast h1{white-space:normal;text-wrap:pretty;max-width:30ch;}
}

/* ---------- CHAIN THREAD (slim tinted bar, matches Products) ---------- */
.a-thread{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 56px;background:var(--bg-2);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.a-thread .tl{font-family:var(--ff-m);font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);padding-right:14px;border-right:1px solid var(--rule);}
.a-thread .ti{font-family:var(--ff-m);font-size:13px;letter-spacing:.03em;color:var(--ink);}
.a-thread .ti.strong{color:var(--green);font-weight:500;}
.a-thread .ta{font-family:var(--ff-m);font-size:13px;color:var(--accent);}
@media(max-width:680px){.a-thread{padding:12px 22px;gap:10px;}}

/* ---------- THE FOUR APPLICATIONS (alternating deep/light rows) ----------
   Each .app is a full-width band. Odd rows light (paper-on-bg), even rows
   deep (pine). The grid alternates photo/body sides for an asymmetric rhythm.
   Numbers stay tabular via the shared .num rule in bk-elevated.css. */
.apps{padding:0;}
.app{padding:clamp(48px,7vh,92px) 56px;position:relative;overflow:hidden;
  border-bottom:1px solid var(--rule);}
.app-in{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,4vw,64px);align-items:center;max-width:1440px;margin:0 auto;}
/* alternate which column the media sits in */
.app:nth-child(even) .app-media{order:2;}

/* deep variant (even rows) */
.app.deep{background:var(--pine-d);color:#EFEADE;border-bottom:none;}
.app.deep .aglow{position:absolute;left:44%;top:-40%;width:46%;height:120%;
  background:radial-gradient(circle,rgba(44,106,72,.4),transparent 70%);pointer-events:none;z-index:0;}
.app.deep>*{position:relative;z-index:2;}

/* media column */
.app-media{position:relative;}
.app-photo{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--bg-2);}
.app-photo picture,.app-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.app-photo img{filter:saturate(1.03) contrast(1.02);}
.app.deep .app-photo{background:var(--pine-dd);}
.app-photo .pl{position:absolute;left:14px;top:14px;z-index:2;
  font-family:var(--ff-m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(9,26,18,.62);padding:6px 10px;backdrop-filter:none;}

/* duo plate (HFF 01): two product boxes share ONE app-photo footprint, so this
   section stays the exact height of the single-photo 02/03/04 rows. The pair is
   laid in-flow as a 2-col grid (not the absolute single-image idiom); the 1px
   gap shows the plate background as a hairline rule between the two boxes. */
.app-photo--duo{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:100%;gap:1px;}
.app-photo--duo picture{position:static;display:block;min-width:0;height:100%;}
.app-photo--duo img{position:static;width:100%;height:100%;display:block;object-fit:cover;}

/* typographic GAP card (Cosmetics reshoot pending): no wrong photo, clearly a placeholder.
   Uses the same aspect box; tasteful, on-palette, swappable. No glassmorphism, no colored stripe. */
.app-gap{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--pine);color:#EFEADE;
  display:flex;flex-direction:column;justify-content:flex-end;padding:26px;}
.app-gap .gg{position:absolute;left:-10%;top:-30%;width:60%;height:120%;
  background:radial-gradient(circle,rgba(44,106,72,.5),transparent 68%);pointer-events:none;}
.app-gap>*{position:relative;z-index:2;}
.app-gap .gk{font-family:var(--ff-m);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-l);}
.app-gap .gt{font-family:var(--ff-d);font-weight:600;font-size:clamp(20px,2vw,26px);letter-spacing:-.015em;color:#fff;margin:10px 0 0;line-height:1.12;}
.app-gap .gn{font-family:var(--ff-m);font-size:10px;letter-spacing:.06em;color:rgba(239,234,222,.6);margin-top:12px;}

/* body column */
.app-body .ai{font-family:var(--ff-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-d);}
.app.deep .app-body .ai{color:var(--accent-l);}
.app-body h2{font-family:var(--ff-d);font-weight:600;font-size:clamp(26px,3vw,40px);
  letter-spacing:-.022em;margin:12px 0 0;line-height:1.04;}
.app.deep .app-body h2{color:#fff;}
.app-body h2 em{font-style:italic;color:var(--green);font-weight:500;}
.app.deep .app-body h2 em{color:var(--accent-l);}
/* small secondary line under a heading (Korean gloss on EN was dropped;
   on KO this carries the short Latin acronym in the mono face, not the KR serif) */
.app-body h2 .kr,.app-body h2 .en{display:block;margin-top:8px;font-weight:500;font-size:13px;color:var(--ink-3);}
.app-body h2 .kr{font-family:var(--ff-kr-d);font-size:14px;}
.app-body h2 .en{font-family:var(--ff-m);letter-spacing:.04em;}
.app.deep .app-body h2 .kr,.app.deep .app-body h2 .en{color:rgba(239,234,222,.6);}
.app-body .lead{font-size:clamp(14.5px,1.1vw,16px);line-height:1.62;color:var(--ink-2);margin:18px 0 0;max-width:54ch;}
.app.deep .app-body .lead{color:rgba(239,234,222,.84);}
.app-body .lead b{color:var(--ink);font-weight:600;}
.app.deep .app-body .lead b{color:#fff;}

/* spec table inside each application: brands · formats · certs */
.app-spec{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:26px;
  border-top:1px solid var(--ink);}
.app.deep .app-spec{border-top:1px solid rgba(200,162,78,.55);}
.app-spec .col{padding:16px 20px 0 0;border-right:1px solid var(--rule);}
.app.deep .app-spec .col{border-right:1px solid rgba(255,255,255,.1);}
.app-spec .col:last-child{border-right:none;padding-left:20px;padding-right:0;}
.app-spec .col:nth-child(2){padding-left:20px;}
.app-spec .ck{font-family:var(--ff-m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;}
.app.deep .app-spec .ck{color:rgba(239,234,222,.6);}
.app-spec .cv{font-size:14px;line-height:1.55;color:var(--ink-2);}
.app.deep .app-spec .cv{color:rgba(239,234,222,.82);}
/* branded-ingredient names: Spectral display, set as a clean stacked list */
.app-spec .brand{font-family:var(--ff-d);font-weight:600;font-size:14.5px;letter-spacing:-.01em;color:var(--ink);display:block;padding:2px 0;}
.app.deep .app-spec .brand{color:#fff;}
.app-spec .brand sup{font-size:.42em;vertical-align:super;color:var(--ink-3);}
.app.deep .app-spec .brand sup{color:rgba(239,234,222,.6);}
.app-spec .base{font-size:12.5px;color:var(--ink-2);display:block;padding:2px 0;}
.app.deep .app-spec .base{color:rgba(239,234,222,.8);}
/* certs as tabular mono rows */
.app-spec .cert{font-family:var(--ff-m);font-size:11px;letter-spacing:.02em;color:var(--green);display:block;padding:3px 0;}
.app.deep .app-spec .cert{color:var(--green-l);}

@media(max-width:880px){
  .app-in{grid-template-columns:1fr;gap:28px;}
  .app:nth-child(even) .app-media,.app-media{order:0;}
  .app-body .lead{max-width:60ch;}
}
@media(max-width:680px){
  .app{padding:40px 22px;}
  .app-spec{grid-template-columns:1fr;border-top:none;}
  .app-spec .col,.app-spec .col:last-child,.app-spec .col:nth-child(2){
    border-right:none;border-top:1px solid var(--rule);padding:16px 0 0;}
  .app.deep .app-spec .col,.app.deep .app-spec .col:last-child,.app.deep .app-spec .col:nth-child(2){
    border-top:1px solid rgba(255,255,255,.1);}
  .app-spec .col:first-child{border-top:none;padding-top:0;}
}

/* ---------- APPLICATION -> BRANDED-INGREDIENT MATRIX (light) ----------
   Mirrors the Products brand table, transposed: read down an ingredient,
   across the four applications, and see where it serves. Dots, not prose. */
.matrix{padding:clamp(60px,8vh,100px) 56px;}
.matrix-h{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;
  border-bottom:2px solid var(--ink);padding-bottom:20px;}
.matrix-h h2{font-family:var(--ff-d);font-weight:600;font-size:clamp(28px,3.2vw,46px);
  letter-spacing:-.022em;margin:12px 0 0;line-height:1.04;}
.matrix-h h2 em{font-style:italic;color:var(--green);font-weight:500;}
.matrix-intro{font-size:14px;line-height:1.6;color:var(--ink-2);max-width:62ch;margin:20px 0 0;}

/* The lead (name) column carries the editorial weight; the four application columns
   only carry a serve dot, so they are kept tight — a wide 1fr column left a 9px dot
   stranded in a sea of empty paper. Narrowing them + a denser, larger dot makes every
   cell read intentional. The grain (1px gap on a --rule background) gives crisp rules. */
.mx{margin-top:26px;border:1px solid var(--rule);background:var(--rule);
  display:grid;gap:1px;grid-template-columns:minmax(220px,2.1fr) repeat(4,minmax(96px,1fr));overflow:hidden;}
.mx .mh,.mx .mc,.mx .mr{background:var(--paper);}
/* header row — a touch tighter, with the application labels carrying real weight */
.mx .mh{padding:13px 18px;font-family:var(--ff-m);font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.mx .mh.lead-cell{color:var(--ink);}
.mx .mh.app-col{text-align:center;color:var(--ink-2);background:var(--bg-2);}
/* ingredient name cell — compact rows; name + gloss sit together, no dead space */
.mx .mr{padding:13px 18px;display:flex;flex-direction:column;justify-content:center;}
.mx .mr .nm{font-family:var(--ff-d);font-weight:600;font-size:17px;letter-spacing:-.012em;color:var(--ink);line-height:1.15;}
.mx .mr .nm sup{font-size:.42em;vertical-align:super;color:var(--ink-3);}
.mx .mr .sb{font-family:var(--ff-m);font-size:11.5px;letter-spacing:.02em;color:var(--ink-3);margin-top:3px;}
/* data cell with serve dot — larger, with a wider soft halo so it owns the cell */
.mx .mc{display:flex;align-items:center;justify-content:center;padding:13px 8px;}
.mx .mc .yes{width:11px;height:11px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 5px rgba(206,74,24,.13),0 1px 3px rgba(206,74,24,.3);}
.mx .mc .no{width:16px;height:1px;background:var(--rule);}
.mx .mc .yes-l{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* row affordance: served cells get a faint warm wash so the diagonal of dots reads;
   the whole row lifts on hover so the table feels alive, not a static print-out */
.mx .mc:has(.yes){background:rgba(206,74,24,.045);}
@media(hover:hover){
  .mx .mr:hover,.mx .mr:hover + .mc,
  .mx .mr:hover + .mc + .mc,.mx .mr:hover + .mc + .mc + .mc,
  .mx .mr:hover + .mc + .mc + .mc + .mc{background:var(--bg-2);}
}
@media(max-width:760px){
  .matrix{padding:48px 0;}
  .matrix-h,.matrix-intro{padding-left:22px;padding-right:22px;}
  /* horizontal scroll keeps the grid legible without cramming on phones */
  .mx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 22px;}
  .mx{min-width:600px;}
}

/* ---------- closing note line under the matrix ---------- */
.mx-note{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.04em;color:var(--ink-3);
  margin-top:18px;line-height:1.6;}
@media(max-width:760px){.mx-note{padding:0 22px;}}