/* ============================================================
   BK bio - JEJU page (V3). Loads AFTER bk-elevated.css.
   Reuses its tokens, topnav, mast, band, seam, creds, proof,
   cta-final, foot, .btn*, .ml, .rv, .grain.
   Adds page-specific blocks only:
     · raw-material library (asymmetric photo grid + typographic
       placeholder cards for the two materials with no photo yet)
     · "origin meets process" deep reason panel
     · facility spec table beside the facility photo
   English page is English-only; KO twin swaps copy only.
   No SKU / per-item reference codes anywhere.
   ============================================================ */

/* ---------- page-local palette additions ----------
   Ocean-teal for the harvest Gantt (owner: too much orange/green;
   wants a distinct color set that evokes Jeju's sea). */
:root{
  --teal-d:#2E6F7E; --teal:#57A0A6; --teal-soft:#AAD0D0;
}

/* ---------- masthead: coordinates sit opposite the eyebrow ---------- */
.j-coord{font-family:var(--ff-m);}

/* ---------- IMAGE BAND override: a touch shorter, photo-led hero ---------- */
.j-band{height:56vh;min-height:380px;}
/* headline sits on a clean 2 lines (owner: was wrapping to 3); the explicit
   <br> sets the split, the wider cap keeps each line from re-wrapping */
.j-band .bc h2{max-width:30ch;font-size:clamp(28px,3.3vw,50px);}
:lang(ko) .j-band .bc h2{max-width:24ch;}
/* one highlighted phrase per heading; on this dark photo band the em is warm light-orange (dark-bg highlight) */
.j-band .bc h2 em{font-style:italic;color:var(--accent-l);font-weight:500;}
:lang(ko) .j-band .bc h2 em{font-style:normal;}

/* ============================================================
   RAW-MATERIAL LIBRARY (light) - asymmetric photo grid.
   Composes the .house header; the grid itself is bespoke so the
   thumbnails read as a curated plate set, never 3 equal cards.
   ============================================================ */
.j-lib{padding:clamp(64px,8vh,110px) 56px;}
.j-lib .house-h{margin-bottom:0;}

/* Equal plate set: one calm, intentional 3-across x 2-row grid (owner:
   the mixed wide/narrow plates read cheap). Every plate is the same
   size with one shared aspect ratio. */
.j-libgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:26px;}
.j-mat{background:var(--paper);position:relative;display:flex;flex-direction:column;
  transition:transform .18s,box-shadow .18s;}
.j-mat:hover{transform:translateY(-3px);box-shadow:0 18px 34px -26px rgba(22,20,18,.55);z-index:2;}

/* photo / placeholder plate - uniform 3:2 across all six */
.j-plate{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--bg-2);}
.j-plate img{width:100%;height:100%;object-fit:cover;filter:saturate(1.03) contrast(1.02);}
.j-plate .pl{position:absolute;left:14px;top:14px;z-index:2;font-family:var(--ff-m);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(9,26,18,.55);padding:5px 9px;}

/* typographic placeholder for materials with no verified photo yet.
   Deliberately NOT a wrong photo: a calm botanical-key card, clearly a plate. */
.j-plate.j-gap{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--pine) 0%,var(--pine-dd) 100%);}
.j-plate.j-gap::after{content:'';position:absolute;inset:0;opacity:.5;mix-blend-mode:soft-light;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");}
.j-gaplab{position:relative;z-index:1;text-align:center;padding:18px;}
.j-gaplab .gl-sci{font-family:var(--ff-d);font-style:italic;font-weight:500;font-size:19px;color:#fff;letter-spacing:-.01em;}
.j-gaplab .gl-note{display:block;margin-top:9px;font-family:var(--ff-m);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);}
/* image attribution for the two externally-licensed Jeju plates */
.j-credit{margin:18px 0 0;font-family:var(--ff-m);font-size:11px;line-height:1.5;letter-spacing:.01em;color:var(--ink-4);}

/* card body */
.j-mat .j-body{padding:18px 20px 22px;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;flex:1 1 auto;}
.j-mat .j-cls{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d);}
.j-mat h3{font-family:var(--ff-d);font-weight:600;font-size:21px;letter-spacing:-.015em;margin:8px 0 0;line-height:1.1;}
.j-mat h3 .sci{font-style:italic;font-weight:500;color:var(--ink-3);font-size:.62em;letter-spacing:0;}
.j-mat .kr{font-family:var(--ff-kr-d);font-weight:500;font-size:13px;color:var(--ink-3);display:block;margin-top:5px;}
.j-mat p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:12px 0 0;}
.j-mat p b{color:var(--ink);font-weight:600;}

@media(max-width:900px){
  .j-libgrid{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .j-lib{padding:46px 22px;}
  .j-libgrid{grid-template-columns:1fr;}
}

/* ============================================================
   ORIGIN MEETS PROCESS (deepest) - why fresh needs cold.
   Built from the proof/spine deep idiom (pine-dd, glow, grain).
   ============================================================ */
.j-why{position:relative;background:var(--pine-dd);color:#EFEADE;
  padding:clamp(44px,5.5vh,68px) 56px;overflow:hidden;
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center;}
.j-why .glow{position:absolute;left:24%;top:-30%;width:46%;height:120%;
  background:radial-gradient(circle,rgba(44,106,72,.4),transparent 70%);pointer-events:none;}
.j-why>*{position:relative;z-index:2;}
.j-why .ml{color:rgba(239,234,222,.62);}
.j-why .ml .dot{background:var(--accent-l);}
.j-why h2{font-family:var(--ff-d);font-weight:600;font-size:clamp(28px,3.2vw,46px);
  letter-spacing:-.022em;line-height:1.05;margin:14px 0 0;color:#fff;max-width:none;}
.j-why h2 em{font-style:italic;color:var(--accent-l);font-weight:500;}
.j-why p{font-size:15.5px;line-height:1.62;color:rgba(239,234,222,.86);margin:0;max-width:52ch;}
.j-why p b{color:#fff;font-weight:600;}
.j-why .j-why-foot{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;}
@media(max-width:820px){.j-why{grid-template-columns:1fr;gap:22px;}.j-why h2{max-width:none;}}
@media(max-width:560px){.j-why{padding:44px 22px;}}

/* ============================================================
   THE FACILITY (tinted light) - spec table beside the photo.
   Reuses the .creds tint; spec rows are bespoke tabular numbers.
   ============================================================ */
.j-fac{background:var(--bg-2);padding:clamp(60px,8vh,100px) 56px;}
.j-fac .creds-h{border-bottom:1px solid var(--ink);}
.j-fac-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(36px,5vw,64px);
  align-items:center;margin-top:32px;}

/* Spec table: enlarged so the values carry the row (owner: type too small). */
.j-spec{border-top:2px solid var(--ink);}
.j-srow{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px 22px;
  padding:18px 0;border-bottom:1px solid var(--rule);}
.j-srow .sk{font-family:var(--ff-m);font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.j-srow .sv{font-family:var(--ff-d);font-weight:600;font-size:27px;letter-spacing:-.014em;color:var(--ink);
  text-align:right;line-height:1.05;font-variant-numeric:tabular-nums lining-nums;}
.j-srow .sv small{font-family:var(--ff-m);font-size:.5em;font-weight:400;color:var(--ink-3);letter-spacing:.02em;}

/* facility photo with caption plate */
.j-facphoto{position:relative;overflow:hidden;background:var(--bg-2);
  box-shadow:0 30px 56px -34px rgba(9,26,18,.5);}
.j-facphoto img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  filter:saturate(1.04) contrast(1.03);}
.j-facphoto .pl{position:absolute;left:16px;top:16px;z-index:2;font-family:var(--ff-m);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(9,26,18,.55);padding:5px 9px;}
.j-facphoto .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:34px 18px 14px;color:#fff;
  background:linear-gradient(0deg,rgba(9,26,18,.82),transparent);}
.j-facphoto .cap .l{display:block;font-family:var(--ff-d);font-weight:600;font-size:15px;letter-spacing:-.01em;}
.j-facphoto .cap .t{display:block;font-family:var(--ff-m);font-size:10px;letter-spacing:.06em;
  color:rgba(239,234,222,.78);margin-top:4px;}

@media(max-width:820px){.j-fac-grid{grid-template-columns:1fr;gap:30px;}}
@media(max-width:560px){.j-fac{padding:46px 22px;}}

/* ============================================================
   EQUIPMENT INVENTORY (light): repeated machine records.
   ============================================================ */
.j-equip{padding:clamp(60px,8vh,100px) 56px;background:var(--bg);}
.j-equip .house-h{border-bottom:1px solid var(--ink);}
.j-equip-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px;}
.j-equip-card{background:var(--paper);border:1px solid var(--rule);display:grid;
  grid-template-columns:minmax(170px,.42fr) 1fr;min-width:0;box-shadow:0 18px 36px -34px rgba(22,20,18,.5);
  transition:transform .18s,box-shadow .18s;}
.j-equip-card:hover{transform:translateY(-2px);box-shadow:0 24px 44px -34px rgba(22,20,18,.62);}
.j-equip-photo{position:relative;margin:0;min-width:0;background:var(--bg-2);overflow:hidden;}
.j-equip-photo img{width:100%;height:100%;min-height:100%;object-fit:cover;aspect-ratio:5/4;filter:saturate(1.02) contrast(1.02);}
.j-equip-photo figcaption{position:absolute;left:12px;top:12px;font-family:var(--ff-m);font-size:9px;letter-spacing:.12em;
  color:#fff;background:rgba(9,26,18,.62);padding:5px 8px;}
.j-equip-body{padding:20px 20px 22px;min-width:0;}
.j-equip-body h3{font-family:var(--ff-d);font-weight:600;font-size:22px;line-height:1.08;letter-spacing:0;margin:0 0 14px;
  overflow-wrap:anywhere;}
:lang(ko) .j-equip-body h3{font-family:var(--ff-kr-d);font-weight:600;}
.j-equip-meta{margin:0;border-top:1px solid var(--rule);}
.j-equip-meta>div{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--rule);}
.j-equip-meta dt{font-family:var(--ff-m);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-d);}
.j-equip-meta dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere;}
.j-equip-meta ul{margin:0;padding-left:16px;}
.j-equip-meta li+li{margin-top:5px;}

@media(max-width:1100px){
  .j-equip-grid{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .j-equip{padding:46px 22px;}
  .j-equip-card{grid-template-columns:1fr;}
  .j-equip-photo img{height:auto;min-height:0;}
  .j-equip-meta>div{grid-template-columns:1fr;gap:4px;}
}

/* ============================================================
   CLOSER (page-scoped) - the standard orange Request band (owner:
   match every other page's .cta-final). Inherits the full-orange
   .cta-final ground from bk-elevated.css; we only re-style the
   page-local lead block (eyebrow + headline) for the orange field:
   white type, with the highlight em in dark pine for high contrast
   (mirrors how .cta-final em is handled).
   ============================================================ */
.j-cta{align-items:center;}
.j-cta .glow{position:absolute;left:-8%;top:-40%;width:40%;height:140%;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);pointer-events:none;}
.j-cta .j-cta-lead{max-width:none;}
.j-cta .ml{color:rgba(255,255,255,.78);}
.j-cta .ml .dot{background:#fff;}
.j-cta h2{color:#fff;margin-top:12px;max-width:34ch;}
.j-cta h2 em{font-style:italic;color:var(--em-orange);font-weight:600;}
@media(max-width:760px){.j-cta{padding-left:22px;padding-right:22px;}}

/* ============================================================
   CERTIFICATION BADGE (M67) - the Baranul / Jeju Water certified
   brand mark. It is a LOGO, not a seascape: rendered as a small
   white badge chip on the lava-mineral-water plate, never full-bleed.
   ============================================================ */
.j-certbadge{position:absolute;right:12px;bottom:12px;z-index:3;
  display:flex;align-items:center;gap:10px;max-width:166px;
  padding:7px 12px 7px 9px;background:rgba(255,255,255,.96);
  border:1px solid var(--rule);border-radius:3px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 12px 24px -12px rgba(9,26,18,.7);}
/* thin gold keyline separates the cert mark from its label,
   tying it to the page's gold certification language. */
.j-certbadge img{display:block;width:auto;height:34px;flex:none;
  padding-right:10px;border-right:1px solid var(--gold-soft);}
.j-certbadge .cl{font-family:var(--ff-m);font-size:8.5px;line-height:1.35;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.j-certbadge .cl b{display:block;color:var(--ink);font-weight:600;letter-spacing:.06em;}
@media(max-width:560px){.j-certbadge{max-width:146px;}.j-certbadge img{height:30px;}}

/* ============================================================
   HARVEST CALENDAR (M68, elevated) - raw materials by harvest
   season, now VISUALIZED as a 12-month Gantt strip (owner: tables
   alone read flat). A single paper plate holds a Jan-Dec header
   rail and one row per material; each material's harvest window is
   a gold->orange bar laid across the months it is picked. Rows are
   grouped by season with a serif season label. The familiar month
   text stays at the row end. Tokens only.
   ============================================================ */
.j-harvest{padding:clamp(60px,8vh,100px) 56px;background:var(--bg-2);}
.j-harvest .house-h{border-bottom:2px solid var(--ink);}

/* the chart plate */
.j-cal{margin-top:30px;background:var(--paper);border:1px solid var(--rule);
  box-shadow:0 26px 50px -36px rgba(22,20,18,.5);overflow:hidden;}

/* shared 3-track row: [material label] [12-month track] [window text].
   --m is set on .j-calbar via grid-column for the highlighted span. */
.j-calhead,.j-calrow{display:grid;
  grid-template-columns:minmax(168px,1.35fr) minmax(0,5fr) minmax(78px,auto);
  align-items:center;gap:0 18px;padding:0 24px;}

/* month header rail: 12 equal cells, mono initials, hairline base */
.j-calhead{padding-top:16px;padding-bottom:12px;border-bottom:1px solid var(--ink);
  position:sticky;top:0;background:var(--paper);z-index:3;}
.j-calhead .ch-lab{font-family:var(--ff-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);}
.j-calhead .ch-end{font-family:var(--ff-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);text-align:right;}
.j-months{display:grid;grid-template-columns:repeat(12,1fr);}
.j-months span{font-family:var(--ff-m);font-size:9.5px;letter-spacing:-.01em;color:var(--ink-3);
  text-align:center;font-variant-numeric:tabular-nums lining-nums;}
/* KO numeric labels are short — let them breathe a little wider */
:lang(ko) .j-months span{font-size:11px;letter-spacing:.02em;}
/* quarter ticks: subtly stress Mar/Jun/Sep boundaries */
.j-months span:nth-child(3n){color:var(--ink-2);}

/* season group label band */
.j-calgroup{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:18px 24px 9px;background:linear-gradient(180deg,var(--bg-2),transparent);}
.j-calgroup .cg-k{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-d);}
.j-calgroup .cg-t{font-family:var(--ff-d);font-weight:600;font-size:18px;letter-spacing:-.012em;color:var(--ink);}
:lang(ko) .j-calgroup .cg-t{font-family:var(--ff-kr-d);}
.j-calgroup .cg-t .arr{color:var(--gold-d);font-weight:400;margin:0 .08em;}

/* material row */
.j-calrow{padding-top:10px;padding-bottom:10px;border-top:1px solid var(--rule);
  transition:background .16s;}
.j-calrow:hover{background:var(--bg);}
.j-calrow .hm{font-family:var(--ff-d);font-weight:600;font-size:16.5px;letter-spacing:-.01em;
  color:var(--ink);line-height:1.12;}
:lang(ko) .j-calrow .hm{font-family:var(--ff-kr-d);}
.j-calrow .hm .sci{font-family:var(--ff-m);display:block;font-size:9.5px;font-weight:400;
  letter-spacing:.06em;color:var(--ink-3);margin-top:2px;}
.j-calrow .hs{font-family:var(--ff-m);font-size:12.5px;letter-spacing:.02em;color:var(--accent-d);
  white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums lining-nums;}

/* the 12-cell track with faint guide columns the bar sits over */
.j-track{position:relative;display:grid;grid-template-columns:repeat(12,1fr);
  height:18px;align-items:center;
  background-image:repeating-linear-gradient(90deg,var(--rule-2) 0 1px,transparent 1px calc(100%/12));}
/* the highlighted harvest window: ocean-teal bar (evokes Jeju's sea),
   soft depth, legible on the warm paper plate */
.j-calbar{grid-row:1;height:11px;border-radius:6px;
  background:linear-gradient(90deg,var(--teal-d) 0%,var(--teal) 100%);
  box-shadow:0 1px 2px rgba(22,20,18,.18),0 0 0 1px rgba(46,111,126,.28);
  transition:transform .16s;transform-origin:left center;}
.j-calrow:hover .j-calbar{transform:scaleY(1.18);}
/* a year-round bar reads calmer (light-teal wash) so it doesn't shout */
.j-calbar.full{background:linear-gradient(90deg,var(--teal-soft),var(--teal));
  box-shadow:0 1px 2px rgba(22,20,18,.14),0 0 0 1px rgba(46,111,126,.2);opacity:.95;}

.j-harvest .j-hnote{margin:22px 0 0;font-family:var(--ff-m);font-size:11px;line-height:1.5;
  letter-spacing:.01em;color:var(--ink-4);}

/* tablet: keep the chart, tighten the side columns */
@media(max-width:860px){
  .j-calhead,.j-calrow{grid-template-columns:minmax(120px,1.2fr) minmax(0,4fr) minmax(66px,auto);gap:0 12px;}
}
/* phone: drop the inline month text; the bar + sticky rail carry it.
   Material label sits above its own full-width track so nothing crowds. */
@media(max-width:560px){
  .j-harvest{padding:46px 18px;}
  .j-cal{overflow-x:hidden;}
  .j-calhead{grid-template-columns:1fr;padding:14px 16px 10px;}
  .j-calhead .ch-lab,.j-calhead .ch-end{display:none;}
  .j-calrow{grid-template-columns:1fr;gap:7px 0;padding:12px 16px;}
  .j-calrow .hm{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
  .j-calrow .hm .sci{margin-top:0;}
  .j-calrow .hs{text-align:left;color:var(--accent-d);}
  .j-calgroup{padding:16px 16px 8px;}
}

/* ============================================================
   PRODUCTION-SYSTEM FLOW (M70, elevated) - the five production
   stages rebuilt in the site's "five stages on a single chain"
   idiom (index .flow/.frail/.fphoto): real equipment photos set
   in circular gold-ringed medallions, strung on ONE continuous
   gold hairline, with a mono stage number + serif name + body.
   Verticalised to ride the facility column beside the spec table.
   Tokens only; the application-tag strip keeps its chip idiom.
   ============================================================ */
.j-flow{display:flex;flex-direction:column;align-self:stretch;}
.j-flow .j-flow-lab{font-family:var(--ff-m);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-d);margin-bottom:20px;}

/* the chain: nodes joined by one gold line through the medallion centres */
.j-flowchain{position:relative;display:flex;flex-direction:column;gap:clamp(18px,2.4vh,26px);}
.j-flowchain::before{content:'';position:absolute;left:38px;top:22px;bottom:22px;width:1.5px;z-index:0;
  background:linear-gradient(180deg,transparent,var(--gold) 7%,var(--gold) 93%,transparent);}
.j-fstep{position:relative;z-index:1;display:grid;grid-template-columns:76px 1fr;align-items:center;
  gap:0 22px;}
.j-fstep .fnode{position:relative;width:76px;height:76px;border-radius:50%;overflow:hidden;
  background:var(--bg-2);
  box-shadow:0 0 0 4px var(--bg-2),0 0 0 5.5px var(--gold),0 16px 30px -16px rgba(9,26,18,.6);}
.j-fstep .fnode img{width:100%;height:100%;object-fit:cover;filter:saturate(1.06) contrast(1.06);}
.j-fstep .ftext{min-width:0;}
.j-fstep .fn{font-family:var(--ff-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-d);font-variant-numeric:tabular-nums lining-nums;}
.j-fstep h3{font-family:var(--ff-d);font-weight:600;font-size:21px;letter-spacing:-.014em;
  color:var(--ink);margin:4px 0 0;line-height:1.08;}
:lang(ko) .j-fstep h3{font-family:var(--ff-kr-d);}
.j-fstep p{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin:5px 0 0;}

.j-flow-apps{margin-top:28px;padding-top:24px;border-top:1px solid var(--rule);}
.j-flow-apps .al{display:block;font-family:var(--ff-m);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;}
.j-flow-tags{display:flex;flex-wrap:wrap;gap:8px;}
.j-flow-tags .tag{font-family:var(--ff-m);font-size:11px;letter-spacing:.04em;
  color:var(--pine);border:1px solid var(--rule);background:var(--paper);padding:6px 11px;
  transition:border-color .16s,color .16s;}
.j-flow-tags .tag:hover{border-color:var(--gold);color:var(--ink);}
/* BK bio's own registered mark: a clean, intentional brand chip, NOT an
   error/alert chip. Same neutral tag shape as its neighbours; ownership is
   marked subtly by a full gold keyline, a faint warm paper fill and a gold
   (R), tying it to the page's certificate/gold language. No side-stripe. */
.j-flow-tags .tag.own{color:var(--ink);border-color:var(--gold);
  background:linear-gradient(0deg,rgba(200,162,78,.07),rgba(200,162,78,.07)),var(--paper);}
.j-flow-tags .tag.own sup{color:var(--gold-d);font-weight:600;}
.j-flow-tags .tag.own:hover{border-color:var(--gold-d);color:var(--ink);}
@media(max-width:560px){
  .j-flowchain::before{left:32px;}
  .j-fstep{grid-template-columns:64px 1fr;gap:0 18px;}
  .j-fstep .fnode{width:64px;height:64px;}
  .j-fstep h3{font-size:19px;}
}

/* ============================================================
   UNESCO TRIPLE CROWN (M62/M63) - closing context above the
   Request band. Typographic badges only (M63: no external logos).
   LIGHT editorial band: this breaks the dark proof -> [LIGHT] -> dark
   CTA rhythm so the page foot is no longer one green slab. Cream
   ground, dark ink, gold + orange accents; the three designations
   are premium light cards with the page's certificate craft.
   ============================================================ */
.j-unesco{position:relative;background:var(--bg);color:var(--ink);
  padding:clamp(58px,7vh,92px) 56px;overflow:hidden;
  border-top:4px solid var(--gold);}
/* a faint warm gold wash echoes the certificate language without flattening */
.j-unesco::before{content:'';position:absolute;left:0;right:0;top:0;height:46%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--gold-soft) 0%,transparent 100%);opacity:.16;}
.j-unesco .glow{display:none;}
.j-unesco>*{position:relative;z-index:2;}
.j-unesco .ml{color:var(--ink-3);}
.j-unesco .ml .dot{background:var(--accent);}
.j-unesco .u-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;
  gap:14px 28px;border-bottom:2px solid var(--ink);padding-bottom:20px;}
.j-unesco .u-head .u-hl{flex:1 1 auto;min-width:min(100%,420px);}
.j-unesco h2{font-family:var(--ff-d);font-weight:600;font-size:clamp(27px,2.9vw,42px);
  letter-spacing:-.022em;line-height:1.06;margin:14px 0 0;color:var(--ink);max-width:34ch;}
.j-unesco h2 em{font-style:italic;color:var(--accent-d);font-weight:500;}
.j-crowns{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px;}
/* each designation reads as a raised paper plate: hairline border,
   a thin gold top-rail, layered shadow + hover lift (Company cert craft). */
.j-crown{position:relative;background:var(--paper);border:1px solid var(--rule);
  border-top:3px solid var(--gold);overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 22px 44px -34px rgba(22,20,18,.55);
  transition:transform .2s,box-shadow .2s,border-color .2s;}
.j-crown:hover{transform:translateY(-4px);border-color:var(--gold-d);
  box-shadow:0 30px 54px -34px rgba(22,20,18,.6);}
/* a real Jeju landscape caps each card under the gold rail (owner: use the
   Jeju photos, not the protected UNESCO emblem). Text sits BELOW the photo,
   so there is no scrim / text-over-photo legibility risk. */
.j-crown .cph{display:block;margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2);line-height:0;}
.j-crown .cph img{width:100%;height:100%;object-fit:cover;filter:saturate(1.03) contrast(1.02);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);}
.j-crown:hover .cph img{transform:scale(1.045);}
.j-crown .cbody{display:flex;flex-direction:column;flex:1 1 auto;padding:24px 26px 26px;}
/* serif year in ink, with a gold rule tick under it */
.j-crown .cy{display:block;font-family:var(--ff-d);font-weight:600;font-size:34px;letter-spacing:-.012em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;}
.j-crown .cy::after{content:'';display:block;width:30px;height:2px;margin-top:14px;
  background:var(--gold-d);}
.j-crown h3{font-family:var(--ff-d);font-weight:600;font-size:22px;letter-spacing:-.014em;
  color:var(--ink);margin:14px 0 0;line-height:1.12;}
:lang(ko) .j-crown h3{font-family:var(--ff-kr-d);}
/* agency eyebrow pinned to the card foot so the cards align */
.j-crown .ck{display:block;margin-top:auto;padding-top:14px;font-family:var(--ff-m);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d);}
@media(max-width:760px){.j-crowns{grid-template-columns:1fr;}.j-unesco h2{max-width:none;}}
@media(max-width:560px){.j-unesco{padding:46px 22px;}
  .j-crown .cbody{padding:22px 22px 24px;}.j-crown .cy{font-size:32px;}}