/* ==========================================================================
   ASIA WEB DIGITAL — base.css
   Design tokens, reset, type scale, grid primitives, utilities.
   Direction: Hong Kong wayfinding / signage. English only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Single committed visual world — every colour is painted explicitly so the
   page holds on any host background. No dark-mode inversion.
   -------------------------------------------------------------------------- */
:root {
  /* Ground + ink */
  --ink:        #0B120F;   /* green-black */
  --ink-80:     #2A332E;
  --ink-60:     #4A544E;
  --mist:       #E6EBE7;   /* cool pale ground (deliberately not warm cream) */
  --mist-deep:  #D6DED8;
  --paper:      #F6F8F6;   /* raised surface */
  --white:      #FFFFFF;

  /* Brand */
  --jade:       #0A6B50;   /* from the letterhead */
  --jade-deep:  #053B2C;
  --jade-lift:  #0E8A66;
  --jade-wash:  #E2EDE8;

  /* Interaction accent — HK neon. Interaction states only. */
  --neon:       #FF3E7F;
  --neon-ink:   #C41E5C;   /* darkened for small text on light grounds */
  --neon-soft:  #FF689B;   /* lifted for small text on jade/ink grounds */
  --focus:      #C41E5C;   /* focus ring on light grounds; lifted on dark below */

  /* Neutral, biased toward jade */
  --slate:      #55625C;   /* 5.4:1 on --mist */
  --slate-lt:   #5E6B65;   /* 4.6:1 on --mist */

  /* Rules */
  --rule:       rgba(11, 18, 15, 0.14);
  --rule-soft:  rgba(11, 18, 15, 0.08);
  --rule-light: rgba(255, 255, 255, 0.18);
  --rule-light-soft: rgba(255, 255, 255, 0.10);

  /* Type families */
  --f-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-body:    'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono:    'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale */
  --fs-mega:  clamp(3.25rem, 11.5vw, 10rem);
  --fs-d1:    clamp(2.75rem, 8vw, 6.5rem);
  --fs-d2:    clamp(2.25rem, 5.6vw, 4.25rem);
  --fs-h2:    clamp(1.875rem, 4vw, 3.125rem);
  --fs-h3:    clamp(1.375rem, 2.3vw, 2rem);
  --fs-h4:    clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-lead:  clamp(1.0625rem, 1.35vw, 1.3125rem);
  --fs-body:  1rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;
  --fs-label: 0.6875rem;

  /* Spacing */
  --s-1:  0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5:  1.5rem;   --s-6: 2rem;     --s-7: 2.75rem;  --s-8: 3.5rem;
  --s-9:  5rem;     --s-10: 7rem;    --s-11: 9.5rem;

  /* Section rhythm */
  --pad-block: clamp(4.5rem, 9vw, 9rem);
  --gutter:    clamp(1.25rem, 4vw, 4rem);
  --maxw:      1560px;
  --rail:      clamp(0px, 9vw, 9.5rem);

  /* Motion */
  --e-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --e-in:   cubic-bezier(0.64, 0, 0.78, 0);
  --e-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.22s;
  --t-med:  0.42s;
  --t-slow: 0.75s;

  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

::selection { background: var(--neon); color: var(--white); }

/* Visible keyboard focus everywhere. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 999;
  background: var(--ink);
  color: var(--white);
  padding: var(--s-3) var(--s-5);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: top var(--t-fast) var(--e-out);
}
.skip-link:focus { top: var(--s-4); }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   Display = Archivo, set wide + heavy with tight tracking (signage).
   -------------------------------------------------------------------------- */
.display,
.d1, .d2, .h2, .h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

.display { font-size: var(--fs-mega); font-stretch: 122%; letter-spacing: -0.042em; }
.d1      { font-size: var(--fs-d1); }
.d2      { font-size: var(--fs-d2); }
.h2      { font-size: var(--fs-h2); line-height: 0.98; letter-spacing: -0.025em; }
.h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  font-stretch: 108%;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.h4 {
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  font-stretch: 105%;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0;
}

/* Outline word — used once or twice per page, never as decoration filler. */
.is-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
  paint-order: stroke fill;
}
.on-dark .is-outline { -webkit-text-stroke-color: rgba(255,255,255,0.62); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-80);
  max-width: 46ch;
}
.on-dark .lead { color: rgba(255,255,255,0.78); }

.body-text { max-width: 66ch; color: var(--ink-80); }
.body-text p + p { margin-top: 1.1em; }
.on-dark .body-text { color: rgba(255,255,255,0.76); }

.muted { color: var(--slate); }
.on-dark .muted { color: rgba(255,255,255,0.6); }

/* Mono utility role: eyebrows, indices, data, timestamps. */
.mono {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jade);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  flex: none;
}
.on-dark .eyebrow { color: var(--white); }

.num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--pad-block); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--flush-top { padding-top: 0; }

/* Signage blades: full-bleed colour panels. */
.panel-jade { background: var(--jade); color: var(--white); }
.panel-deep { background: var(--jade-deep); color: var(--white); }
.panel-ink  { background: var(--ink); color: var(--white); }
/* Dark grounds lift the focus ring so it stays legible against them.
   Magenta reads well on ink and deep jade but not on mid jade, which takes
   a white ring instead — including the components that turn jade on hover. */
.on-dark, .panel-deep, .panel-ink { --focus: #FF3E7F; }
.panel-jade { --focus: #FFFFFF; }
.panel-paper{ background: var(--paper); }
.panel-wash { background: var(--jade-wash); }

/* The metadata rail: signage panel numbering down the left edge. */
.railed {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 var(--s-6);
  align-items: start;
}
.rail {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  display: none;
  flex-direction: column;
  gap: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  padding-top: 0.5rem;
}
.on-dark .rail { color: rgba(255,255,255,0.5); }
.rail-idx {
  font-size: 1.375rem;
  letter-spacing: 0;
  color: var(--jade);
  font-variant-numeric: tabular-nums;
}
.on-dark .rail-idx { color: var(--white); }
.rail-line { width: 100%; height: 1px; background: currentColor; opacity: 0.35; }

/* 12-column grid */
.g12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
}

.stack   { display: flex; flex-direction: column; }
.stack-2 { gap: var(--s-2); }  .stack-3 { gap: var(--s-3); }
.stack-4 { gap: var(--s-4); }  .stack-5 { gap: var(--s-5); }
.stack-6 { gap: var(--s-6); }  .stack-7 { gap: var(--s-7); }
.stack-8 { gap: var(--s-8); }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.row-between { display: flex; flex-wrap: wrap; gap: var(--s-5); justify-content: space-between; align-items: flex-end; }

/* Vertical signage spine. */
.spine {
  writing-mode: vertical-rl;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  user-select: none;
}
.on-dark .spine { color: rgba(255,255,255,0.55); }
.spine::after {
  content: "";
  width: 1px;
  height: clamp(3rem, 9vw, 7rem);
  background: currentColor;
  opacity: 0.4;
}

.hide-sm { display: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Fine grain, sits above grounds and below content. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: multiply;
  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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}
.panel-jade.grain::after,
.panel-deep.grain::after,
.panel-ink.grain::after { mix-blend-mode: overlay; opacity: 0.22; }

/* --------------------------------------------------------------------------
   5. BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  .hide-sm { display: revert; }
}

@media (min-width: 1024px) {
  .rail { display: flex; }
}

@media (max-width: 1023px) {
  .railed { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   6. MOTION PREFERENCE
   One switch that genuinely stops everything.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}