/* ============================================================================
   Shared design system, Shenzhen entity sites.
   Editorial, not "document with a stylesheet".

   Three decisions drive everything below:
   1. A serif display face against a neutral grotesque. The contrast is what
      makes a page look art-directed rather than generated.
   2. An asymmetric grid. Centred-everything is the tell of a default layout,
      so the measure sits left and margin notes hang right.
   3. Fluid type via clamp(). One scale from 360px to 2400px, no breakpoint
      jumps in the headline.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- tokens ---------- */
:root {
  /* Ink and paper. Sampled toward the blue-hour hero: near-black is warm-cool
     neutral, not pure #000, so photographs sit on it without a seam. */
  --ink:        #0b0f16;
  --ink-2:      #131923;
  --paper:      #fbfaf7;
  --paper-2:    #f2efe9;

  --fg:         #11161f;
  --fg-soft:    #566073;
  --fg-faint:   #8c95a6;
  --rule:       #e3e0d9;

  --accent:     #b3742a;   /* amber, from the horizon gradient */
  --accent-ink: #8a5719;
  --link:       #1b4fa0;

  --u:          1rem;
  --measure:    38rem;
  --gutter:     clamp(1.25rem, 4vw, 3.5rem);

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid scale. Ratio ~1.28 at the small end opening to ~1.42 at the large. */
  --t-eyebrow: 0.72rem;
  --t-micro:   clamp(0.80rem, 0.78rem + 0.10vw, 0.88rem);
  --t-body:    clamp(1.02rem, 0.98rem + 0.22vw, 1.16rem);
  --t-lede:    clamp(1.22rem, 1.10rem + 0.62vw, 1.62rem);
  --t-h3:      clamp(1.16rem, 1.08rem + 0.40vw, 1.38rem);
  --t-h2:      clamp(1.62rem, 1.34rem + 1.30vw, 2.55rem);
  --t-h1:      clamp(2.60rem, 1.70rem + 4.20vw, 6.20rem);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #0b0f16;
    --paper-2: #131923;
    --fg:      #eceae4;
    --fg-soft: #a3abbb;
    --fg-faint:#6f7889;
    --rule:    #232b38;
    --accent:  #d69a4e;
    --link:    #7fb0f2;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
}

/* ---------- layout ----------
   Named grid columns. Body copy sits in [measure]; asides hang in [note].
   On narrow screens the note column collapses and asides fall inline. */
/* A centred measure with a full-bleed escape hatch.
   An earlier version reserved a right-hand margin column for source notes, but
   children of <main> are not grid items of .shell, so that column could never
   be filled and simply rendered as a void at 1440px and up. Centring the
   measure and letting data break out of it does the same job honestly. */
.shell {
  display: grid;
  grid-template-columns:
    [full-start] 1fr
    [measure-start] min(var(--measure), calc(100% - 2 * var(--gutter)))
    [measure-end] 1fr
    [full-end];
}
.shell > * { grid-column: measure; }
.shell > .full, .shell > .hero, .shell > .masthead, .shell > .colophon { grid-column: full; }

/* Rhythm comes from data breaking the measure, not from a dead column.
   Clamped so it can never exceed the viewport on a narrow screen. */
.bleed {
  width: auto;
  margin-inline: calc(-1 * clamp(0rem, 5vw, 5.5rem));
}
@media (max-width: 52rem) { .bleed { margin-inline: 0; } }

/* ---------- masthead ---------- */
.masthead {
  grid-column: full;
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.15rem var(--gutter);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 3;
}
.masthead .wordmark {
  font-family: var(--serif);
  font-size: 1.34rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: inherit;
}
.masthead nav { margin-left: auto; display: flex; gap: 1.35rem; flex-wrap: wrap; }
.masthead nav a {
  font-size: var(--t-micro);
  color: var(--fg-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.masthead nav a:hover { color: var(--fg); border-bottom-color: var(--accent); }

/* ---------- hero ----------
   Full-bleed image with the headline overlaid. The scrim is a two-stop
   gradient rather than a flat tint so the skyline stays readable at the
   bottom while the type stays legible at the top. */
.hero {
  grid-column: full;
  position: relative;
  isolation: isolate;
  min-height: clamp(30rem, 62vh, 46rem);
  display: grid;
  align-content: end;
  padding: clamp(3rem, 9vw, 8rem) var(--gutter) clamp(2.25rem, 5vw, 4rem);
  background: var(--ink);
  overflow: hidden;
}
.hero > .bg { position: absolute; inset: 0; z-index: -2; display: block; }
.hero > .bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Sources are portrait-ish from the gateway, so cover does the cropping.
     Anchor low: the skyline sits in the bottom third of the frame. */
  object-position: 50% 72%;
  /* The art is deliberately low-contrast so type can sit on it. */
  filter: saturate(0.92);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(6,9,14,.90) 0%, rgba(6,9,14,.62) 34%, rgba(6,9,14,.18) 68%, rgba(6,9,14,.34) 100%);
}
.hero .inner { max-width: 52rem; }
.hero h1 { color: #fff; }
.hero .lede { color: rgba(255,255,255,.86); max-width: 40rem; }
.hero .eyebrow { color: var(--accent); }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 1.1rem;
  display: block;
}
@media (prefers-color-scheme: dark) { .eyebrow { color: var(--accent); } }

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: 0.98;
  letter-spacing: -0.018em;
  margin: 0 0 clamp(1rem, 2vw, 1.6rem);
  text-wrap: balance;
}
h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: clamp(3.2rem, 7vw, 5.5rem) 0 1rem;
  text-wrap: balance;
}
h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-h3);
  letter-spacing: -0.006em;
  margin: 2.4rem 0 0.6rem;
}

/* The lede is the answer to the heading. It gets the optical weight to match. */
.lede {
  font-family: var(--serif);
  font-size: var(--t-lede);
  line-height: 1.34;
  color: var(--fg-soft);
  margin: 0 0 1.8rem;
  text-wrap: pretty;
}
main .lede { color: var(--fg); }

p { margin: 0 0 1.15rem; text-wrap: pretty; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

.dateline {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--fg-faint);
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule);
}

/* ---------- facts: the entity unit ----------
   One attribute, one value, machine-legible and visually scannable.
   Hairline rows rather than a boxed card: less decoration, more authority. */
.facts {
  margin: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 2px solid var(--fg);
}
.facts div {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) 1fr;
  gap: 0.4rem 2rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.facts dt {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--fg-faint);
  text-transform: uppercase;
}
.facts dd { margin: 0; }
@media (max-width: 34rem) {
  .facts div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ---------- data ---------- */
.scroll { overflow-x: auto; margin: 2rem 0; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-micro); }
thead th {
  font-family: var(--mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  text-align: left;
  padding: 0 0.9rem 0.7rem 0;
  border-bottom: 1.5px solid var(--fg);
}
tbody td {
  padding: 0.8rem 0.9rem 0.8rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
tbody tr:hover { background: color-mix(in oklab, var(--accent) 6%, transparent); }
td.num, .tabular { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- quote ---------- */
blockquote {
  margin: clamp(2rem, 5vw, 3rem) 0;
  padding-left: clamp(1.1rem, 3vw, 2rem);
  border-left: 2px solid var(--accent);
  font-family: var(--serif);
  font-size: var(--t-lede);
  line-height: 1.36;
  font-style: italic;
  color: var(--fg);
}
blockquote cite {
  display: block;
  margin-top: 0.9rem;
  font: 500 var(--t-micro)/1.5 var(--sans);
  font-style: normal;
  color: var(--fg-faint);
}

/* ---------- source note ----------
   Hangs in the margin column on wide screens, inline on narrow.
   Claim and citation stay in the same block either way. */
.src {
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--fg-faint);
  padding-top: 0.55rem;
  border-top: 1px solid var(--rule);
  margin: 1.4rem 0 2rem;
}
.src a { color: var(--fg-soft); }

/* ---------- callout ---------- */
.callout {
  background: var(--paper-2);
  border-left: 2px solid var(--accent);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  margin: clamp(2rem, 5vw, 3rem) 0;
}
.callout > :last-child { margin-bottom: 0; }
.callout .eyebrow { margin-bottom: 0.7rem; }

/* ---------- figure ---------- */
figure { margin: clamp(2.5rem, 6vw, 4rem) 0; }
figure img { width: 100%; height: auto; display: block; border-radius: 2px; }
figcaption {
  font-size: var(--t-micro);
  color: var(--fg-faint);
  margin-top: 0.75rem;
  padding-left: 1rem;
  border-left: 1px solid var(--rule);
}

/* ---------- footer ---------- */
.colophon {
  grid-column: full;
  margin-top: clamp(4rem, 10vw, 8rem);
  padding: 2.5rem var(--gutter) 4rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  font-size: var(--t-micro);
  color: var(--fg-faint);
}
.colophon p { margin: 0 0 0.5rem; max-width: 44rem; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: .45; transform: translateY(12px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
  .reveal.in { opacity: 1; transform: none; }
}

::selection { background: var(--accent); color: #fff; }

@media print {
  .hero { min-height: auto; background: none; }
  .hero > img.bg, .hero::after { display: none; }
  .hero h1, .hero .lede { color: #000; }
}