/* Shared presentation for the image-resource pages and the sixteen
   Selected Experience destinations. Single source of truth: this file replaces
   what were previously identical inline copies on 18 pages. */

/* Page-scoped presentation for the image resource pages. */
.media-figure{margin:0 0 clamp(38px,4.4vw,54px);}
.media-figure a{display:block;border:1px solid var(--rule);line-height:0;}
.media-figure a:hover{border-color:var(--label);}
.media-figure img{width:100%;height:auto;display:block;}
.media-figure figcaption{margin-top:14px;font-size:calc(var(--body-size) - 1px);line-height:var(--body-lh);color:var(--body-ink);}
.media-figure .media-spec{display:block;margin-top:8px;font-family:var(--font-ui);font-size:var(--t-micro);letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--muted);}
.media-figure .media-more{display:block;width:fit-content;
  /* .media-figure a above sets line-height:0 for the image anchor; this link is
     also an <a> inside .media-figure, so it must restore its own line box or the
     clickable area collapses to a few pixels. */
  line-height:1.5;
  margin-top:6px;padding:5px 0 3px;
  font-family:var(--font-ui);font-size:13px;font-weight:600;
  letter-spacing:var(--ls-ui);text-transform:uppercase;
  color:var(--label);text-decoration:none;
  /* .media-figure a also sets a 1px border on all four sides for the image
     frame; reset it here so this link reads as an underline, not a box. */
  border:0;border-bottom:1px solid currentColor;}
.media-figure .media-more:hover,.media-figure .media-more:focus-visible{color:var(--ink);}
.media-figure .media-more:focus-visible{outline:2px solid var(--label);outline-offset:3px;}
.media-links{list-style:none;margin:16px 0 0;padding:0;}
.media-links li{margin:0 0 10px;}

/* ---------------------------------------------------------------------------
   Korean Media page — typography aligned to the approved Korean homepage.

   This page is built on legal.css (the disclaimer stack), whose type scale is
   deliberately plainer than the homepage's: sans-serif body, no P052 section
   heading, a much looser H1 leading. That is why it reads as a different site.

   Every value below is the COMPUTED value measured from the approved Korean
   homepage at 1440 / 834 / 390, reproduced here. Nothing is invented and no
   new font family is introduced: Noto Serif KR, Noto Sans KR and IBM Plex Mono
   already load on this page, and P052 is the self-hosted face the homepage
   itself uses, declared below from the same woff2 the homepage serves.

   Layout, colour treatment, gallery order, captions, navigation and all
   approved image content are untouched. Only type and its own leading change.
   --------------------------------------------------------------------------- */

@font-face{
  font-family:'P052';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/p052-400.woff2') format('woff2');
}

/* --- base tier: matches the homepage at 390 --- */
/* This rule's only remaining live consumer is the Korean Media gallery's own
   label, 이미지 자료: the sixteen experience pages all override it below via
   body.experience-page. It carried the same defect they did - IBM Plex Mono
   leads the stack, every Hangul syllable falls through to the Korean face, but
   U+0020 does NOT, so the word space was set at the monospace advance (10.24px
   against a natural 5.12px) - compounded by 0.1em between every syllable.
   Corrected here at Mr. Kim's authorization: the Korean face leads and the
   tracking is restrained. Size, weight, leading, colour and margin are
   unchanged, so the label keeps its existing place in the hierarchy, and the
   English gallery is a different language and untouched. */
html[lang="ko"] .eyebrow{
  font-family:'Noto Serif KR',serif;
  font-size:15.5px; font-weight:600; line-height:1.94;
  letter-spacing:0.02em; color:#6b4e17;
}
html[lang="ko"] main h1{
  font-family:'Noto Serif KR',serif;
  font-size:clamp(32px,4.1vw,43px); font-weight:600;
  line-height:1.14; letter-spacing:-0.01em; color:#16233d;
}
html[lang="ko"] main h2{
  font-family:'Noto Serif KR',serif;
  font-size:26px; font-weight:600; line-height:1.48;
  letter-spacing:-0.025em; color:#16233d;
}
html[lang="ko"] main h3{
  font-family:'Noto Serif KR',serif;
  font-size:21px; font-weight:600; line-height:1.55;
  letter-spacing:normal; color:#16233d;
}
html[lang="ko"] main .intro{
  font-family:'Noto Serif KR',serif;
  font-size:19.5px; font-weight:400; line-height:1.85; color:#3a372f;
}
html[lang="ko"] main figcaption{
  font-family:'Noto Serif KR',serif;
  font-size:19px; font-weight:400; line-height:1.94; color:#16233d;
}
html[lang="ko"] main p:not(.intro){
  font-family:'Noto Serif KR',serif;
  font-size:19px; font-weight:400; line-height:1.94; color:#16233d;
}
/* The small technical specification line and the .meta line are deliberately
   NOT touched: they have no counterpart on the homepage, so there is no
   approved value to match them to, and changing them would be taste. */

/* --- tablet tier: matches the homepage at 834 --- */
@media (min-width:700px){
  html[lang="ko"] .eyebrow{font-size:17px;}
  html[lang="ko"] main .intro{font-size:21px;}
}

/* --- desktop tier: matches the homepage at 1440 --- */
@media (min-width:1120px){
  html[lang="ko"] .eyebrow{font-size:18.5px; color:#9b6a18;}
  html[lang="ko"] main h2{
    font-family:'P052','Noto Serif KR',serif;
    font-size:32px; line-height:1.48; letter-spacing:-0.015em; color:#101c35;
  }
  html[lang="ko"] main h3{font-size:25px;}
  html[lang="ko"] main .intro{font-size:23px;}
  html[lang="ko"] main figcaption,
  html[lang="ko"] main p:not(.intro){font-size:19.5738px;}
}

/* ===========================================================================
   English experience pages — typography taken from the approved English
   homepage (https://jskcounsel.com/).

   These pages are built on legal.css, whose scale is deliberately plain: it is
   the disclaimer stack. The homepage uses Noto Serif for headings, Source Serif 4
   for body, P052 for section headings at desktop, and IBM Plex Mono for labels,
   at sizes settled over many refinement rounds. Every value below is the
   COMPUTED value measured from the live approved homepage at 1440 / 834 / 390,
   reproduced at the same three tiers. Nothing here is invented.

   Scoped to body.experience-page so the English Media gallery, which shares this
   stylesheet, is not affected. Korean pages are untouched: they keep the
   html[lang="ko"] rules above, which Mr. Kim has accepted.

   Mapping, where the homepage has no exact counterpart:
     .intro      -> homepage .dek      (the hero lead paragraph)
     figcaption  -> homepage .about-copy p (running body copy)
     p           -> homepage .about-copy p
     h2          -> homepage .section-label
   .media-spec and .meta were falling back to Arial, which appears nowhere in
   the approved design system - every other glyph on these pages is Noto Serif,
   Source Serif 4, P052 or IBM Plex Mono. That is a fallback artifact, not a
   design choice, so both are mapped to the homepage's label face, IBM Plex
   Mono (as .docket-row, .stat-label and .lang-switch all are), at their
   existing size and colour. Scoped to the experience pages; the gallery keeps
   what it has.
   =========================================================================== */

/* --- base tier: matches the approved homepage at 390 --- */
html[lang="en"] body.experience-page .eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:18.5px; font-weight:600; line-height:1.8;
  letter-spacing:0.1em; color:#6b4e17; margin-bottom:30px;
}
html[lang="en"] body.experience-page main h1{
  font-family:'Noto Serif',serif;
  font-size:clamp(32px,4.6vw,50px); font-weight:600;
  line-height:1.14; letter-spacing:-0.01em; color:#16233d;
}
html[lang="en"] body.experience-page main h2{
  font-family:'Noto Serif',serif;
  font-size:27px; font-weight:500; line-height:1.3;
  letter-spacing:-0.02em; color:#16233d; margin-bottom:11px;
}
html[lang="en"] body.experience-page main h3{
  font-family:'Noto Serif',serif;
  font-size:24px; font-weight:500; line-height:1.35;
  letter-spacing:normal; color:#16233d; margin-bottom:14px;
}
html[lang="en"] body.experience-page main .intro{
  font-family:'Source Serif 4',serif;
  font-size:18.5px; font-weight:400; line-height:1.7; color:#3a372f;
}
html[lang="en"] body.experience-page main figcaption,
html[lang="en"] body.experience-page main p:not(.intro){
  font-family:'Source Serif 4',serif;
  font-size:18.5px; font-weight:400; line-height:1.74; color:#16233d;
}
html[lang="en"] body.experience-page main p:not(.intro){margin-bottom:18px;}

/* --- tablet tier: matches the approved homepage at 834 --- */
@media (min-width:700px){
  html[lang="en"] body.experience-page .eyebrow{font-size:20px; margin-bottom:32px;}
  html[lang="en"] body.experience-page main h2{font-size:30px;}
  html[lang="en"] body.experience-page main .intro{font-size:19.5px;}
  html[lang="en"] body.experience-page main figcaption,
  html[lang="en"] body.experience-page main p:not(.intro){font-size:19.5px;}
}

/* --- desktop tier: matches the approved homepage at 1440 --- */
@media (min-width:1120px){
  html[lang="en"] body.experience-page .eyebrow{
    font-size:23px; letter-spacing:0.05em; color:#9b6a18; margin-bottom:56px;
  }
  html[lang="en"] body.experience-page main h2{
    font-family:'P052','Noto Serif',serif;
    font-size:34.5px; line-height:1.3; letter-spacing:-0.015em; color:#101c35;
  }
  html[lang="en"] body.experience-page main h3{font-size:29px;}
  html[lang="en"] body.experience-page main .intro{font-size:22.75px; line-height:1.66;}
  html[lang="en"] body.experience-page main figcaption,
  html[lang="en"] body.experience-page main p:not(.intro){font-size:21.165px;}
}

/* The two small supporting labels: approved label face, existing size/colour. */
html[lang="en"] body.experience-page main .media-spec,
html[lang="en"] body.experience-page main .meta{
  font-family:'IBM Plex Mono',monospace;
}

/* ===========================================================================
   Refinement round - 2026-10-22. Four corrections Mr. Kim directed after
   reviewing the sixteen published pages. Each is scoped to
   body.experience-page: BOTH Media galleries use .eyebrow, .meta and
   .media-links too, and they are explicitly out of scope.

   1. SECTION LABEL (Selected Experience / 주요 경력)
      Too small, and sitting too close to the H1 while a band of empty space
      stood above it. The label keeps the approved label treatment - uppercase,
      brass, the homepage's own tracking convention - and is enlarged, then
      lifted by reducing main's top padding by the same amount the gap below it
      grows, so the H1 is displaced as little as possible.

   2. KOREAN HEADER NAVIGATION (한국어 사이트로 돌아가기)
      The gap between 한국어 and 사이트로 measured 10.24px against a natural
      Korean word space of 5.12px - exactly double. legal.css declares
      'IBM Plex Mono', 'Noto Sans KR' for this link: IBM Plex Mono carries no
      Hangul, so every syllable falls through to Noto Sans KR, but the ASCII
      space does NOT fall through - it is rendered at IBM Plex Mono's monospace
      advance. The fix is the font stack, not a negative word-spacing hack:
      Noto Sans KR leads, which is also what the approved Korean homepage sets
      its navigation in, at the homepage's own 0.035em.

   3. CREDENTIAL LINE (.meta) doubled at every width, per the directive, with
      the leading reopened so the larger type does not crowd its hairline.

   4. RELATED LINKS enlarged, with more separation between them. The Korean
      list was rendering in Noto Sans KR; it moves to Noto Serif KR, the face
      the approved Korean homepage sets its reading matter in. Colour,
      underline, alignment, wording and destinations are untouched, and the
      "Related" heading is deliberately left at its current size.
   =========================================================================== */

/* --- 1. the label is lifted; the gap below it absorbs what the padding loses */
body.experience-page main{padding-top:34px;}
@media (min-width:1120px){
  body.experience-page main{padding-top:44px;}
}

/* The Korean label: 주요 경력 carries the same monospace-space artifact as the
   header link above, plus 0.1em between every syllable, which broke it into
   four loose glyphs instead of two words. Noto Serif KR is the face the Korean
   homepage uses for its own Korean labels (.matter-cat), at the brass and
   weight already established here. Scoped, because the Korean gallery's
   .eyebrow is out of scope and keeps the rule above. */
html[lang="ko"] body.experience-page .eyebrow{
  font-family:'Noto Serif KR',serif;
  font-size:18.5px; font-weight:600; line-height:1.7;
  letter-spacing:0.02em; margin-bottom:30px;
}
@media (min-width:700px){
  html[lang="ko"] body.experience-page .eyebrow{font-size:20px; margin-bottom:32px;}
}
@media (min-width:1120px){
  html[lang="ko"] body.experience-page .eyebrow{font-size:23px; margin-bottom:56px;}
}

/* --- 2. Korean header navigation: the stack, so the space is a Korean space
   Unscoped as of 2026-10-22, at Mr. Kim's authorization, so the Korean Media
   gallery's identical header link is covered too. This REPLACES the
   body.experience-page version rather than adding a second rule: the
   declarations are the same, so the sixteen experience pages compute exactly
   what they computed before and only the gallery changes. Only the nine
   lang="ko" files that load this stylesheet can be reached - the English
   gallery is a different language, and no homepage loads this file at all.
   Size, colour, alignment, wording, destination and behaviour are untouched;
   only the family order and the tracking change. */
html[lang="ko"] .return-link{
  font-family:'Noto Sans KR',sans-serif;
  letter-spacing:0.035em;
}

/* --- 3. credential line: 200% of its previous computed size at every width */
html[lang="en"] body.experience-page main .meta{
  font-size:21px;          /* was 10.5px */
  line-height:1.5;
  padding-bottom:34px;
}
html[lang="ko"] body.experience-page main .meta{
  font-size:23px;          /* was 11.5px */
  line-height:1.55;
  padding-bottom:34px;
}

/* --- 4. Related links --------------------------------------------------- */
body.experience-page main .media-links{margin-top:18px;}
/* sized on the li, not only the a, so the list item's own line box matches the
   link it contains and the 14px separation is measured between equal boxes */
body.experience-page main .media-links li{margin-bottom:14px;}
html[lang="en"] body.experience-page main .media-links li,
html[lang="en"] body.experience-page main .media-links li a{
  font-family:'Source Serif 4',serif;
  font-size:19px; line-height:1.7;
}
html[lang="ko"] body.experience-page main .media-links li,
html[lang="ko"] body.experience-page main .media-links li a{
  font-family:'Noto Serif KR',serif;
  font-size:19px; line-height:1.8; letter-spacing:normal;
}

/* ===========================================================================
   Professional position line - 2026-10-22, second pass.

   The line beneath the introduction (General Counsel, a Carlyle Group
   portfolio company / 칼라일 포트폴리오 기업 최고법무책임자(General Counsel))
   was inheriting legal.css's UI-label treatment: a monospace face, 0.12em
   tracking and text-transform:uppercase. At the enlarged size that reads as a
   machine label rather than as part of an editorial page.

   BENCHMARK. The approved homepages carry an exact counterpart for a
   standalone credential line - .credential-school and .credential-distinction
   ("UCLA School of Law", "American Jurisprudence Award", "UCLA 로스쿨"):

     English  Source Serif 4  weight 400  letter-spacing normal  no transform
     Korean   Noto Serif KR   weight 400  letter-spacing normal  no transform

   That treatment is adopted here. Size and colour are deliberately NOT
   changed: 21px / 23px are the sizes Mr. Kim set, and the muted ink is this
   element's approved colour. (The homepage also has .entity-name - the same
   serif at weight 600 in brass - if a more emphatic treatment is ever wanted.)

   CASING. The uppercase was a CSS transform only; the HTML has always been
   authored in proper case. Removing the transform changes no wording and
   restores two things the transform was destroying: the brand casing of
   "SK hynix", and the parenthetical "(General Counsel)" inside the Korean
   lines, both of which were being flattened to full capitals.

   SPACING. New gap = existing gap + 0.5 x the computed position-line size.
   The existing gap is .intro's 12px bottom margin. Adjacent sibling margins
   COLLAPSE to the larger of the two, so a margin on .meta would add nothing;
   padding does not collapse, so the increment is applied as padding-top and
   the gap becomes exactly 12 + 10.5 = 22.5px (English) and 12 + 11.5 = 23.5px
   (Korean). The spacing below the line and above the image is untouched.
   =========================================================================== */
body.experience-page main .meta{
  letter-spacing:normal;
  text-transform:none;
  /* At 390 the natural-case line wraps, and the default greedy break split the
     brand name - "Global Legal Team Leader, SK / hynix" - and, in Korean,
     "최고법무책임자(General / Counsel)". Balancing the lines breaks at the
     comma instead and keeps "SK hynix" and "(General Counsel)" whole. It is a
     presentation property only: no markup and no wording changes, and a
     browser that does not support it simply keeps the greedy break. */
  text-wrap:balance;
}
html[lang="en"] body.experience-page main .meta{
  font-family:'Source Serif 4',serif;
  font-weight:400;
  padding-top:10.5px;      /* 0.5 x 21px */
}
html[lang="ko"] body.experience-page main .meta{
  font-family:'Noto Serif KR',serif;
  font-weight:400;
  padding-top:11.5px;      /* 0.5 x 23px */
}

/* ===========================================================================
   Media galleries - 2026-10-23. Two corrections Mr. Kim directed after
   reviewing both Media pages.

   SCOPING. The two galleries are the only pages that load this stylesheet
   without the experience-page hook, so body:not(.experience-page) addresses
   them exactly, with no markup change and no risk to the sixteen
   destinations. Colour, underline, hover and focus all come from legal.css
   (main a / main a:hover / a:focus-visible) and are deliberately NOT
   redeclared here, so every affordance survives untouched.

   1. KOREAN GALLERY - the eight links under 법률사무소 안내
      They were set in Noto Sans KR at 16.5px, which is the sans UI face and
      is inconsistent with the serif reading matter around them. They take the
      treatment already approved for exactly this element on the sixteen
      Korean destinations: Noto Serif KR, 19px, weight 400, normal tracking,
      14px apart. The stack leads with Source Serif 4 so the Latin words in
      the first link ("Law Office of John S. Kim — 홈") are set in the
      approved English serif while every Hangul syllable falls through to
      Noto Serif KR.

   2. ENGLISH GALLERY - the descriptive body text
      It was 18px (paragraphs) and 16px (figure descriptions), flat at every
      width, against Korean counterparts of 23/21/19.5 and 19.57/19/19. The
      English sizes below are NOT newly invented: they are the approved
      English counterparts to those exact Korean values, already shipping on
      the sixteen destinations, derived in turn from the English homepage.
      Headings, the technical specification labels, the gallery links and the
      Explore-this-experience links are all deliberately left alone - this is
      the descriptive narrative only.
   =========================================================================== */

/* --- 1. Korean gallery links -------------------------------------------- */
html[lang="ko"] body:not(.experience-page) main .media-links li,
html[lang="ko"] body:not(.experience-page) main .media-links li a{
  font-family:'Noto Serif KR',serif;
  font-size:19px; font-weight:400; line-height:1.8; letter-spacing:normal;
}
/* Source Serif 4 is applied to the FIRST link only, which is the one with
   English words in it ("Law Office of John S. Kim — 홈"). It must not lead
   the stack for the whole list: U+0020 is present in Source Serif 4, so it
   would supply the word space for the seven Korean-only links too, at 4.50px
   against Noto Serif KR's natural 5.89px. That is the same defect class as
   the monospace spacing corrected earlier, in the tight direction, and it
   would also put these links out of step with the sixteen Korean
   destinations, which measure 5.89px. */
html[lang="ko"] body:not(.experience-page) main .media-links li:first-child a{
  font-family:'Source Serif 4','Noto Serif KR',serif;
}
html[lang="ko"] body:not(.experience-page) main .media-links li{margin-bottom:14px;}
/* the underline is legal.css's; only its weight is refined so it does not
   thicken under the larger serif */
html[lang="ko"] body:not(.experience-page) main .media-links li a{
  text-decoration-thickness:1px;
}

/* --- 2. English gallery descriptive text -------------------------------- */
/* The page has two kinds of descriptive paragraph, and the Korean page scales
   them differently: its lead paragraphs run at 23/21/19.5 and its running
   paragraph under 법률사무소 안내 at 19.57/19/19, the same as its figure
   descriptions. The English side mirrors that split rather than flattening
   both to one size - lead paragraphs on the lead scale, the running paragraph
   and the figure descriptions on the body scale. Colours are untouched. */
/* base tier */
html[lang="en"] body:not(.experience-page) main > p.intro{
  font-size:18.5px; line-height:1.7;
}
html[lang="en"] body:not(.experience-page) main > p:not(.intro),
html[lang="en"] body:not(.experience-page) main figcaption{
  font-size:18.5px; line-height:1.74;
}
@media (min-width:700px){
  html[lang="en"] body:not(.experience-page) main > p.intro{font-size:19.5px;}
  html[lang="en"] body:not(.experience-page) main > p:not(.intro),
  html[lang="en"] body:not(.experience-page) main figcaption{font-size:19.5px;}
}
@media (min-width:1120px){
  html[lang="en"] body:not(.experience-page) main > p.intro{font-size:22.75px; line-height:1.66;}
  html[lang="en"] body:not(.experience-page) main > p:not(.intro),
  html[lang="en"] body:not(.experience-page) main figcaption{font-size:21.165px;}
}

/* ===========================================================================
   Media galleries, second pass - 2026-10-23. Six refinements Mr. Kim approved
   after reviewing both live pages. Same fence as the block above:
   body:not(.experience-page) reaches the two galleries and nothing else.

   The 200% figures below are computed from the live values, not guessed:
     English identity line   10.5px -> 21px     (--t-micro, English)
     Korean  identity line   11.5px -> 23px     (--t-micro, Korean)
     Explore this experience 13px   -> 26px     both languages
   Colour, underline, wording, the arrow and every destination are untouched,
   and the Korean bottom navigation corrected in the previous release is left
   exactly as it is.
   =========================================================================== */

/* --- A. the section label lifts, and its gap to the H1 opens slightly ----- */
body:not(.experience-page) main{padding-top:36px;}
body:not(.experience-page) main .eyebrow{margin-bottom:24px;}
@media (min-width:1120px){
  body:not(.experience-page) main{padding-top:48px;}
  body:not(.experience-page) main .eyebrow{margin-bottom:26px;}
}

/* --- B. the firm identity line, at 200% ---------------------------------- */
/* padding, not margin: .intro's 12px bottom margin would collapse against a
   margin here and the separation would not grow at all */
body:not(.experience-page) main .meta{padding-top:12px; line-height:1.5;}
html[lang="en"] body:not(.experience-page) main .meta{font-size:21px;}
html[lang="ko"] body:not(.experience-page) main .meta{font-size:23px; line-height:1.55;}

/* --- C. the eight card links, at 200% ------------------------------------ */
/* 2026-10-23, corrected: 26px (the 200% step) read as oversized on mobile.
   Only the size changes - family, weight, colour, tracking, underline and
   arrow are all left exactly as they are.

   The English label is 25 uppercase characters at 0.12em tracking, so its
   rendered width is fixed by the English styling we preserve and size is the
   only lever on whether it holds one line. These widths were measured in a
   real browser against real Arial, NOT in the build sandbox: the sandbox has
   no Arial and substitutes a narrower face, which made 18.5px look as though
   it fitted at 390 when it does not.

     column at 320 = 261px, 360 = 301px, 390 = 331px, 430 = 371px
     label width   17.5px -> 321px   18px -> 330px   18.5px -> 339px

   So 18px clears 390 by 1.1px, which is close enough to the edge that any
   rounding or a different Arial build would wrap it. 17.5px clears it by
   10px and is the size used. 360 would need 16px and 320 does not fit at any
   size above ~15px, both of which would drop the link below the body text, so
   those two widths keep two lines - unobtrusive at this size.

   Korean is 20px in Noto Serif KR and holds one line at every width, its
   widest card measuring 154.5px. */
html[lang="en"] body:not(.experience-page) .media-figure .media-more{font-size:17.5px;}
html[lang="ko"] body:not(.experience-page) .media-figure .media-more{font-size:20px;}
/* Korean also moves off the sans UI face onto the approved Korean serif, at a
   restrained weight with natural Hangul spacing */
html[lang="ko"] body:not(.experience-page) .media-figure .media-more{
  font-family:'Noto Serif KR',serif;
  font-weight:400;
  letter-spacing:normal;
}

/* --- D. English bottom navigation, benchmarked to the Korean 19px serif --- */
html[lang="en"] body:not(.experience-page) main .media-links li,
html[lang="en"] body:not(.experience-page) main .media-links li a{
  font-size:19px; line-height:1.8;
}
html[lang="en"] body:not(.experience-page) main .media-links li{margin-bottom:14px;}
html[lang="en"] body:not(.experience-page) main .media-links li a{
  text-decoration-thickness:1px;
}

/* ===========================================================================
   English Media card link - 2026-10-23. Typography only; the sizes Mr. Kim
   approved are kept exactly as they are.

   REFERENCE, measured live on the English homepage, not in the sandbox:

     >= 1120   "How can we help?"    Bodoni Moda 22px w600, style normal,
                                     line-height 26.4 (1.2), letter-spacing
                                     0.22px (0.01em), text-transform none,
                                     rgb(107,78,23), underline, offset 3px
     700-1119  "Discuss Your Needs"  Arial 19.5px w700 uppercase 0.12em
     < 700     "Discuss Your Needs"  Arial 18.5px w700 uppercase 0.08em

   So the homepage's own mobile and tablet CTA is the Arial uppercase one, and
   only the desktop band carries Option 26. Mr. Kim asked for the Option 26
   character AND sentence case on mobile as well, at the Media page's existing
   sizes - so Bodoni Moda is applied to the mobile and desktop bands here, and
   the 700-1119 band is left strictly alone because he approved both tablets
   as they are. That is why the two rules below are bounded at 699 and 1120
   rather than written once unscoped.

   The size is restated in each band so neither can drift: 17.5px, unchanged.
   Sentence case needs no wording change - the HTML has always read "Explore
   this experience"; only the inherited text-transform:uppercase is switched
   off. Colour, the border-bottom underline, hover, focus, the arrow and all
   eight destinations are inherited from the rules above and not redeclared.
   =========================================================================== */
@media (max-width:699px){
  html[lang="en"] body:not(.experience-page) .media-figure .media-more{
    font-family:'Bodoni Moda',serif;
    font-size:17.5px; font-weight:600; font-style:normal;
    line-height:1.2; letter-spacing:0.01em; text-transform:none;
  }
}
@media (min-width:1120px){
  html[lang="en"] body:not(.experience-page) .media-figure .media-more{
    font-family:'Bodoni Moda',serif;
    font-size:17.5px; font-weight:600; font-style:normal;
    line-height:1.2; letter-spacing:0.01em; text-transform:none;
  }
}

/* ===========================================================================
   Media pages - 2026-10-24. Approved Option 11 identity line, the desktop
   English link size, Korean link visibility, and the homepage arrow motion.

   FONT LICENSING. jsk-nimbus-roman-regular.otf is URW Nimbus Roman, AGPL-3
   WITH the URW Font exception. That exception covers embedding the font in a
   PostScript or PDF document; it does NOT cover serving the font program
   itself as a webfont, so this @font-face is a plain AGPL-3 distribution of
   an unmodified font. Compliance therefore rests on retaining the notices and
   making the source available, both of which are satisfied: the complete
   upstream copyright and licence text ships beside the font as
   /assets/fonts/licenses/URW-Base35-Nimbus-Roman-COPYRIGHT.txt
   (with the shared AGPL v3 text in URW-Base35-P052-COPYING.txt beside it), the bytes are unmodified
   (sha256 fd41669443616a7ae890c42e53a58f47fa24a940fd1e367acaff665cf5b6e9d8,
   matching the approved package), and upstream source is public at
   https://github.com/ArtifexSoftware/urw-base35-fonts. The site's own HTML
   and CSS are not derived from the font program and are unaffected.
   =========================================================================== */
@font-face{
  font-family:'JSK Media Roman';
  src:url('/assets/fonts/jsk-nimbus-roman-regular.otf') format('opentype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

/* --- Option 11, both Media pages, every width ---------------------------- */
/* The .jsk-media-identity class exists only on the two Media pages, so this
   cannot reach the sixteen Selected Experience destinations. The language
   prefix is present to out-specify the .meta sizing rules above, which are
   written as html[lang=...] body:not(.experience-page) main .meta. */
html[lang="en"] body:not(.experience-page) main .meta.jsk-media-identity,
html[lang="ko"] body:not(.experience-page) main .meta.jsk-media-identity{
  font-family:'JSK Media Roman','Times New Roman',serif;
  font-size:19px;
  font-weight:400;
  font-style:normal;
  font-variant:normal;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:#5d594f;
  line-height:1.45;
}
html[lang="en"] body:not(.experience-page) main .meta.jsk-media-identity .sep,
html[lang="ko"] body:not(.experience-page) main .meta.jsk-media-identity .sep{
  padding:0 0.30em;
}

/* --- English desktop card link: match the paragraph above it ------------- */
/* Measured live on production: the descriptive paragraph (figcaption) above
   each card computes to 21.165px at 1120, 1440 and 1920. The link takes that
   exact size at the desktop band only. Mobile (<700) keeps the approved
   17.5px Bodoni setting and the tablet band (700-1119) is untouched. Colour
   and weight are deliberately unchanged - see the note below. */
@media (min-width:1120px){
  html[lang="en"] body:not(.experience-page) .media-figure .media-more{
    font-size:21.165px;
  }
}

/* --- Korean card link: visibility ---------------------------------------- */
/* The brief asked for a stronger brass. Measured against the page background
   rgb(246,244,238), the colour already in use is the strongest brass the
   palette has:
     #6b4e17 (current)  7.00:1      #955f00  4.88:1
     #5d594f            6.35:1      #8a6a2f  4.56:1
                                    #9b6a18  4.27:1
   Every other brass REDUCES contrast, so changing the hue would work against
   the goal, and inventing one is not authorised. The colour therefore stays
   at 7.00:1 (above WCAG AAA for body text) and the brief's sanctioned
   alternative is used instead: Noto Serif KR 400 -> 500, a medium, which
   lifts presence without weight that reads as bold. Size, tracking, word
   spacing, underline, arrow and destinations are untouched. */
html[lang="ko"] body:not(.experience-page) .media-figure .media-more{
  font-weight:500;
}

/* --- Approved arrow motion, both pages ----------------------------------- */
/* Reproduced from the homepage's own .area-link-arrow rules in restore.css:
   4px of rightward travel, transform .18s ease-out, returning on blur. The
   homepage moves an inline SVG; these links carry a text arrow, so it is
   wrapped in its own span and only that span moves - the label and the layout
   stay still. Gated on a genuine hover-capable, fine pointer so a touch
   screen's compatibility hover cannot leave the arrow stuck, and dropped
   entirely under prefers-reduced-motion, exactly as the homepage does. */
body:not(.experience-page) .media-figure .media-more .media-more-arrow{
  display:inline-block;
}
@media (hover:hover) and (pointer:fine){
  body:not(.experience-page) .media-figure .media-more .media-more-arrow{
    transition:transform .18s ease-out;
  }
  body:not(.experience-page) .media-figure .media-more:hover .media-more-arrow,
  body:not(.experience-page) .media-figure .media-more:focus-visible .media-more-arrow{
    transform:translateX(4px);
  }
}
@media (prefers-reduced-motion:reduce){
  body:not(.experience-page) .media-figure .media-more .media-more-arrow{
    transition:none;
  }
  body:not(.experience-page) .media-figure .media-more:hover .media-more-arrow,
  body:not(.experience-page) .media-figure .media-more:focus-visible .media-more-arrow{
    transform:none;
  }
}

/* --- Option 11, desktop refinement 2026-10-24 ---------------------------- */
/* Mr. Kim reviewed the live desktop rendering and asked for a slightly larger,
   slightly darker identity line on desktop only. Scoped to the existing
   >=1120 band, so tablet and mobile keep exactly what they have.

   Size 19px -> 19.5px. Colour #5d594f -> #4d493f, verified against the actual
   page background rgb(246,244,238): 6.35:1 -> 8.16:1, so the line gains
   presence and contrast together.

   Weight stays 400 because that is the only weight the approved font has:
   jsk-nimbus-roman-regular.otf is a static CFF face with usWeightClass 400
   and no fvar table, so any heavier setting would be synthetic emboldening,
   which the brief rules out. Face, uppercase, 0.10em tracking, the middle-dot
   separator and its 0.30em padding, the 1.45 line height and all surrounding
   spacing are untouched. */
@media (min-width:1120px){
  html[lang="en"] body:not(.experience-page) main .meta.jsk-media-identity,
  html[lang="ko"] body:not(.experience-page) main .meta.jsk-media-identity{
    font-size:19.5px;
    color:#4d493f;
  }
}