/* ==========================================================================
   ehyong.com — Press feature section
   Loaded only by index.html and zh/index.html.

   Design note that drives most of what follows: the artwork is a pencil
   illustration on white magazine paper. Dropped straight onto a #050505 page
   it reads as a broken image — a white rectangle nobody meant to be there.
   So it is mounted: a cream board, a hairline gold rule, a deep shadow. That
   is how a framed print behaves in a dark room, and it tells the visitor the
   white is deliberate.

   Everything else is the site's existing vocabulary — the same tokens, the
   same eyebrow, the same button — because a press section that introduces a
   new visual language reads as a widget bolted on rather than as part of the
   argument the page is making.
   ========================================================================== */

.press-feature {
  background:
    radial-gradient(circle at 12% 18%, rgba(214, 174, 103, .10), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(214, 174, 103, .06), transparent 38%);
  border-block: 1px solid var(--line-soft);
  overflow: hidden;
}

.press-head { max-width: 760px; margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.press-head h2 { margin: 0 0 var(--s-3); }

.press-lede {
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.6vw, 1.08rem);
  line-height: 1.72;
  max-width: 68ch;
}

/* ── layout ─────────────────────────────────────────────────────────────── */

.press-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: start;
}

/* ── the mounted illustration ───────────────────────────────────────────── */

.press-art { margin: 0; }

.press-art-mount {
  display: block;
  background: var(--cream);
  border: 1px solid rgba(214, 174, 103, .38);
  border-radius: var(--r-md);
  padding: clamp(14px, 2vw, 22px);
  box-shadow: var(--shadow-md);
}

.press-art-mount img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.press-art figcaption {
  margin-top: 14px;
  color: var(--text-dim);
  font-size: .82rem;
  line-height: 1.6;
}

.press-art figcaption b { color: var(--text-muted); font-weight: 600; }

/* ── masthead: cover thumbnail + publication line ───────────────────────── */

.press-masthead {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.press-cover {
  display: block;
  width: 74px;
  height: auto;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--shadow-sm);
}

.press-pub {
  margin: 0 0 4px;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.18rem, 2.4vw, 1.5rem);
  line-height: 1.2;
  color: var(--text);
}

.press-pub span { color: var(--text-dim); font-weight: 600; }

/* Playfair Display has no CJK coverage and no true italic for it either, so
   the browser synthesises an oblique by shearing the glyphs. Sheared Chinese
   looks like a rendering fault, not emphasis. The Chinese masthead therefore
   sets upright in a CJK serif; the Latin half inside .press-pub-latin keeps
   the real italic. */
:lang(zh) .press-pub {
  font-family: "Noto Serif SC", "Noto Sans SC", "Songti SC", serif;
  font-style: normal;
  font-weight: 700;
  font-synthesis: none;
}

:lang(zh) .press-pub .press-pub-latin {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
}

.press-issue {
  margin: 0;
  color: var(--gold);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.5;
}

/* Chinese does not carry uppercase or wide tracking well — the ZH page keeps
   the colour and the weight but drops the letter-spacing treatment. */
:lang(zh) .press-issue { text-transform: none; letter-spacing: .04em; font-size: .85rem; }

/* ── pull quote ─────────────────────────────────────────────────────────── */

.press-quote {
  margin: 0 0 var(--s-4);
  padding: 0 0 0 clamp(18px, 2.4vw, 26px);
  border-left: 2px solid var(--gold);
}

.press-quote p {
  margin: 0 0 12px;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.12rem, 2.2vw, 1.42rem);
  line-height: 1.58;
  color: var(--text);
  text-wrap: pretty;
}

/* The Chinese quote is the author's original wording, so it is set in the
   Chinese face rather than an italic serif that has no italic to give. */
:lang(zh) .press-quote p {
  font-family: "Noto Serif SC", "Noto Sans SC", Inter, serif;
  font-style: normal;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .01em;
}

.press-quote cite {
  display: block;
  font-style: normal;
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--text-dim);
}

.press-bridge {
  margin: 0 0 var(--s-5);
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 62ch;
}

.press-bridge strong { color: var(--text); font-weight: 600; }

/* ── the career arc ─────────────────────────────────────────────────────── */

.press-arc {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.press-arc li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  font-size: .86rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.press-arc li:last-child {
  border-color: var(--gold);
  color: var(--text);
  background: var(--gold-faint);
  font-weight: 600;
}

.press-arc li i {
  font-style: normal;
  color: var(--gold);
  font-size: .72rem;
  letter-spacing: .08em;
  font-weight: 700;
}

/* ── actions ────────────────────────────────────────────────────────────── */

.press-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

.press-note {
  margin: 0;
  color: var(--text-dim);
  font-size: .82rem;
  line-height: 1.6;
}

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .press-grid { grid-template-columns: 1fr; gap: 2.2rem; }

  /* The illustration is a tall 4:7 portrait. At full width on a phone it
     would push the actual argument a full screen down the page, so it is
     capped and centred — present, but no longer the whole viewport. */
  .press-art { max-width: 380px; margin-inline: auto; }
}

@media (max-width: 560px) {
  .press-masthead { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; }
  .press-cover { width: 58px; }
  .press-art { max-width: 300px; }
  .press-arc { gap: 7px; }
  .press-arc li { padding: 7px 12px; font-size: .8rem; }

  /* Tap target: the PDF link is the one conversion on this section, and a
     wrapped two-line button with a short hit area is how it gets missed. */
  .press-actions .btn { width: 100%; justify-content: center; min-height: 48px; }
  .press-actions { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .press-art-mount, .press-actions .btn { transition: none; }
}