/* ==========================================================================
   London Filipino Centre — site stylesheet
   Language: white paper, black ink, quiet greys. yellow is the accent,
   cocoa is the script. No cards, no radius, hairlines only. The people
   in the photographs and the script itself carry the heritage.
   ========================================================================== */

@font-face{ font-family:"BaybayinGLOKAL"; src:url("../fonts/BaybayinGlokal2020.woff2") format("woff2"); font-display:block; }

:root{
  --bg:#ffffff;
  --bg-2:#f4f4f3;         /* neutral grey band */
  --cream:#fff6d2;        /* palest yellow, for tinted bands */
  --ink:#121316;          /* near-black, neutral */
  --ink-2:#3d3f45;
  --mute:#6f7178;
  --faint:#b3b5bb;
  --rule:#e6e6e8;
  --rule-2:#121316;
  --gold:#ffd23f;         /* LFC yellow: sun, flat fill only, never text */
  --gold-2:#ffc400;       /* amber, for the big decorative numerals */
  --gold-3:#ffe27a;       /* light sun, gradient bloom */
  --brown:#8a5a2b;        /* cocoa: the Baybayin script's own colour */
  --brown-2:#5e3c1c;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Bricolage Grotesque",var(--sans);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1280px;
  --gutter:24px;
  --pad:112px;
}
@media (max-width:720px){ :root{ --gutter:16px; --pad:72px; } }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; overflow-x:hidden; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  font-feature-settings:"cv11","ss01","tnum"; -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--gold); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
p{ margin:0 0 1.1em; max-width:64ch; }
h1,h2,h3,h4{ margin:0; font-weight:500; letter-spacing:-0.02em; line-height:1.1; }
h1,h2,.display{ font-family:var(--display); font-weight:500; font-optical-sizing:auto; }
img{ max-width:100%; display:block; }
figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:-999px; top:8px; background:#000; color:#fff; padding:8px 12px; z-index:100; }
.skip:focus{ left:8px; }

/* Baybayin face ---------------------------------------------------------- */
.bb{ font-family:"BaybayinGLOKAL"; font-weight:400; line-height:1; letter-spacing:0; color:var(--brown); }
/* The script always keeps its own face. Some rules set a font on an ancestor
   (.facts strong, the heading scale), which would otherwise win and drop the
   glyphs into whatever Baybayin face the visitor’s device happens to have.
   The doubled class raises specificity above those rules. */
.bb.bb{ font-family:"BaybayinGLOKAL"; }
.plate-dark .bb{ color:var(--gold); }
.plate-yellow .bb{ color:var(--ink); }

/* Layout ------------------------------------------------------------------ */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.section{ padding:var(--pad) 0; border-top:1px solid var(--rule); }
.section.tight{ padding:64px 0; }
.section.flush{ border-top:0; }
.section.tint{ background:var(--bg-2); border-top:0; }
.section.cream{ background:var(--cream); border-top:0; }
.cols{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gutter); row-gap:32px; }
.c3{ grid-column:span 3; } .c4{ grid-column:span 4; } .c5{ grid-column:span 5; }
.c6{ grid-column:span 6; } .c7{ grid-column:span 7; } .c8{ grid-column:span 8; } .c9{ grid-column:span 9; } .c12{ grid-column:span 12; }
.off3{ grid-column:4 / span 9; } .off3-8{ grid-column:4 / span 8; } .off4-8{ grid-column:5 / span 8; }
.cols > *,.row > *{ min-width:0; }
@media (max-width:900px){
  .cols{ row-gap:24px; }
  .c3,.c4,.c5,.c6,.c7,.c8,.c9,.off3,.off3-8,.off4-8{ grid-column:span 12; }
}

/* Type scale -------------------------------------------------------------- */
.eyebrow{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mute); font-weight:500; }
.eyebrow b{ color:var(--ink); font-weight:500; }
.eyebrow .bb{ font-size:1.25em; vertical-align:-0.12em; margin:0 0.35em; letter-spacing:0; }
.num{ font-variant-numeric:tabular-nums; color:var(--faint); }
.h-display{ font-family:var(--display); font-size:clamp(44px,7.2vw,112px); letter-spacing:-0.03em; line-height:0.96; font-weight:500; }
.h-1{ font-family:var(--display); font-size:clamp(34px,4.6vw,64px); letter-spacing:-0.025em; }
.h-2{ font-family:var(--display); font-size:clamp(26px,3vw,40px); letter-spacing:-0.02em; }
.h-3{ font-size:clamp(20px,2vw,26px); letter-spacing:-0.015em; font-weight:500; }
.lead{ font-size:clamp(19px,2vw,24px); line-height:1.4; letter-spacing:-0.01em; color:var(--ink); max-width:36ch; }
.body{ color:var(--ink-2); }
.small{ font-size:14px; line-height:1.55; color:var(--mute); }
.mono{ font-family:var(--mono); font-size:0.88em; }
.brown{ color:var(--brown); }
.gold{ color:var(--gold-2); }
.hl{ background:linear-gradient(transparent 58%, var(--gold) 58%, var(--gold) 92%, transparent 92%); padding:0 0.06em; }
.mute{ color:var(--mute); }
.mt-1{ margin-top:12px; } .mt-2{ margin-top:24px; } .mt-3{ margin-top:40px; } .mt-4{ margin-top:64px; }

.link{ border-bottom:1px solid var(--ink); padding-bottom:1px; transition:border-color .15s,color .15s; }
.link:hover{ border-color:var(--gold-2); border-bottom-width:2px; }
.arrow::after{ content:" \2192"; }
.plate .link{ border-color:rgba(255,255,255,.5); }
.plate .link:hover{ color:#fff; border-color:#fff; }

/* Buttons: rectangular, hairline or solid ------------------------------- */
.btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border:1px solid var(--ink);
      font-size:13px; letter-spacing:0.1em; text-transform:uppercase; font-weight:500; line-height:1; transition:background .15s,color .15s,border-color .15s; white-space:nowrap; }
.btn:hover{ background:var(--ink); color:#fff; }
.btn.fill{ background:var(--ink); color:#fff; }
.btn.fill:hover{ background:#2a2a2a; }
.btn.blue{ border-color:var(--ink); background:var(--ink); color:#fff; }
.btn.blue:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.btn.gold{ border-color:var(--gold); background:var(--gold); color:var(--ink); }
.btn.gold:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn.ghost{ border-color:rgba(255,255,255,.6); color:#fff; }
.btn.ghost:hover{ background:#fff; color:#000; border-color:#fff; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* Nav --------------------------------------------------------------------- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--rule); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:66px; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:500; letter-spacing:-0.01em; font-size:15px; line-height:1.15; }
.brand img{ width:36px; height:36px; }
.brand small{ display:block; white-space:nowrap; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mute); font-weight:500; margin-top:2px; }
.brand small .bb{ font-size:1.25em; vertical-align:-0.1em; margin:0 0.4em; letter-spacing:0; }
.nav-links{ display:flex; align-items:center; gap:28px; font-size:14px; }
.nav-links a{ position:relative; padding:6px 0; color:var(--ink-2); }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.on{ color:var(--ink); }
.nav-links a.on::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--gold); }
.nav-links .btn{ padding:11px 16px; font-size:12px; margin-left:8px; }
.nav-links .btn.blue{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.nav-links .btn.blue:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.nav-toggle{ display:none; width:40px; height:40px; align-items:center; justify-content:center; }
.nav-toggle i{ display:block; width:20px; height:1.5px; background:var(--ink); position:relative; transition:background .15s; }
.nav-toggle i::before,.nav-toggle i::after{ content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--ink); transition:transform .2s,top .2s; }
.nav-toggle i::before{ top:-6px; } .nav-toggle i::after{ top:6px; }
.nav.open .nav-toggle i{ background:transparent; }
.nav.open .nav-toggle i::before{ top:0; transform:rotate(45deg); }
.nav.open .nav-toggle i::after{ top:0; transform:rotate(-45deg); }
@media (max-width:860px){
  .nav-links{ display:none; position:absolute; left:0; right:0; top:66px; background:#fff; border-bottom:1px solid var(--rule); flex-direction:column; align-items:stretch; gap:0; padding:8px var(--gutter) 20px; }
  .nav-links a{ padding:14px 0; border-top:1px solid var(--rule); font-size:16px; }
  .nav-links a.on::after{ display:none; }
  .nav-links .btn{ margin:16px 0 0; justify-content:center; padding:14px; }
  .nav.open .nav-links{ display:flex; }
  .nav-toggle{ display:flex; }
}

/* Announcement strip ------------------------------------------------------ */
.strip{ background:var(--ink); color:#fff; font-size:13px; }
/* The strip carries the season. js/site.js reads the date and sets
   data-season (winter/spring/summer/autumn) and data-phase (early/peak/late).
   Each season is a three-stop gradient and the phase slides along it, so the
   bar drifts through the year and each season ends on the next one’s first
   colour — autumn cools into winter, winter warms into spring. Every stop is
   a deep near-black, so white text stays legible all year. */
.strip[data-season]{ background-image:linear-gradient(100deg,var(--sa),var(--sb),var(--sc)); background-size:220% 100%; transition:background-position .8s ease; }
.strip[data-phase="early"]{ background-position:0% 0; }
.strip[data-phase="peak"]{ background-position:50% 0; }
.strip[data-phase="late"]{ background-position:100% 0; }
.strip[data-season="autumn"]{            /* harvest: ember over deep cocoa, cooling at the end */
  --sa:#2a1206; --sb:#4a1c0c; --sc:#17202b;
  --m1:#d2601c4f; --m2:#a32f1e43; --m3:#e39a2c28;
  --s-ink:#ffffff; --s-label:#ffd23f; --s-rule:rgba(255,255,255,.42);
}
.strip[data-season="winter"]{            /* the cold months: teal and indigo, almost night */
  --sa:#17202b; --sb:#0d131b; --sc:#0f2018;
  --m1:#2f6a8663; --m2:#414f9a54; --m3:#8fb6d032;
  --s-ink:#ffffff; --s-label:#cfe3ee; --s-rule:rgba(255,255,255,.42);
}
.strip[data-season="spring"]{            /* new leaf: the bar turns light, the ink turns dark */
  --sa:#e9f4cd; --sb:#d5eaa8; --sc:#f3eca4;
  --m1:#9ecd5cbf; --m2:#7cb642a2; --m3:#f7f4c460;
  --s-ink:#121316; --s-label:#2f5417; --s-rule:rgba(18,19,22,.38);
}
.strip[data-season="summer"]{            /* full sun: LFC gold at its brightest */
  --sa:#ffe28f; --sb:#ffca41; --sc:#fff0b4;
  --m1:#ffb01fbf; --m2:#f2861ca2; --m3:#fff7d460;
  --s-ink:#121316; --s-label:#7a3c08; --s-rule:rgba(18,19,22,.38);
}
.strip[data-season]{ color:var(--s-ink); }
.strip[data-season] b{ color:var(--s-label); }
.strip[data-season] a.link{ color:var(--s-ink); border-color:var(--s-rule); }
.strip[data-season] a.link:hover{ border-color:var(--s-ink); }
/* The season as a gradient field, not a flat band: three pools of colour on a
   pseudo-element, drifting slowly across the base. Autumn and winter are deep
   and carry white text; spring and summer turn the bar light and the text to
   ink, so the top of the site changes character twice a year. Transform moves
   the pools, which the browser composites without repainting the bar. */
.strip[data-season]{ position:relative; isolation:isolate; overflow:hidden; }
.strip[data-season]::before{
  content:""; position:absolute; inset:-150% -30%; z-index:0; pointer-events:none;
  background:
    linear-gradient(105deg, transparent 34%, rgba(255,255,255,.06) 50%, transparent 66%),
    radial-gradient(44% 130% at 14% 42%, var(--m1), transparent 70%),
    radial-gradient(40% 135% at 50% 64%, var(--m2), transparent 68%),
    radial-gradient(36% 125% at 86% 36%, var(--m3), transparent 72%);
  animation:strip-drift 46s ease-in-out infinite alternate; will-change:transform;
}
@keyframes strip-drift{ from{ transform:translate3d(-7%,0,0) scale(1.06); } to{ transform:translate3d(7%,0,0) scale(1.16); } }
@media (prefers-reduced-motion:reduce){ .strip[data-season]::before{ animation:none; } }
@media (prefers-reduced-motion:reduce){ .strip[data-season]{ transition:none; } }
.strip .wrap{ position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px; min-height:40px; padding-top:8px; padding-bottom:8px; }
.strip a.link{ white-space:nowrap; }
.strip b{ color:var(--gold); font-weight:500; letter-spacing:0.1em; text-transform:uppercase; font-size:11px; margin-right:12px; }
.strip a.link{ border-color:rgba(255,255,255,.4); color:#fff; }
.strip a.link:hover{ border-color:#fff; }
.strip:empty{ display:none; }

/* Hero -------------------------------------------------------------------- */
.hero{ padding:80px 0 0; }
.hero .h-display{ max-width:13ch; }

.hero .lead{ margin-top:32px; }
.hero .btn-row{ margin-top:36px; }
.hero-strip{ margin-top:64px; border-bottom:1px solid var(--rule-2); }
.hero-strip img{ width:100%; height:auto; }
@media (max-width:720px){
  .hero{ padding-top:56px; }
  .hero-strip{ margin-top:44px; overflow:hidden; }
  .hero-strip img{ width:180%; max-width:none; margin-left:-40%; }
}

.hero .fig.wide{ margin-bottom:64px; }

/* Salita ng araw: one Filipino word a day, under the facts row ----------- */
.salita{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gutter); row-gap:20px; padding:40px 0 48px; border-bottom:1px solid var(--rule); align-items:end; }
.salita .s-head{ grid-column:span 12; }
.salita .s-word{ grid-column:span 7; }
.salita .s-gloss{ grid-column:span 5; }
.s-tl{ font-size:clamp(48px,7.2vw,112px); letter-spacing:-0.035em; line-height:0.95; font-weight:500; overflow-wrap:anywhere; }
.s-bb{ font-size:clamp(26px,3.2vw,44px); margin-top:14px; word-spacing:0.25em; }
.s-en{ font-size:clamp(20px,2vw,26px); line-height:1.3; letter-spacing:-0.01em; }
.s-en::before{ content:"\2014\00a0"; color:var(--faint); }
.s-say{ font-size:13px; color:var(--mute); letter-spacing:0.06em; margin-top:6px; }
.s-gloss .small{ margin:14px 0 0; max-width:38ch; }
.s-next{ display:inline-block; margin-top:18px; font-size:13px; letter-spacing:0.06em; }
.salita.swap .s-word,.salita.swap .s-gloss{ opacity:0; transform:translateY(6px); }
.salita .s-word,.salita .s-gloss{ transition:opacity .35s ease, transform .35s ease; }
@media (prefers-reduced-motion:reduce){ .salita .s-word,.salita .s-gloss{ transition:none; } }
@media (max-width:900px){
  .salita{ padding:32px 0 40px; row-gap:16px; align-items:start; }
  .salita .s-word,.salita .s-gloss{ grid-column:span 12; }
  .s-bb{ margin-top:10px; }
}

/* Ticker of facts under the hero ----------------------------------------- */
.facts{ display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--ink); }
.facts div{ padding:28px 24px 28px 0; border-right:1px solid var(--ink); }
.facts div:last-child{ border-right:0; }
.facts div + div{ padding-left:24px; }
.facts strong{ display:block; font-family:var(--display); font-size:clamp(34px,4vw,56px); font-weight:500; letter-spacing:-0.035em; line-height:1; font-variant-numeric:tabular-nums; }
.facts strong .bb{ font-size:0.9em; }
.facts span{ display:block; margin-top:10px; font-size:13px; color:var(--mute); line-height:1.4; }
@media (max-width:900px){
  .facts{ grid-template-columns:repeat(2,1fr); }
  .facts div:nth-child(2){ border-right:0; }
  .facts div:nth-child(3){ padding-left:0; border-top:1px solid var(--ink); }
  .facts div:nth-child(4){ border-top:1px solid var(--ink); }
}

/* Rows: hairline lists (replaces cards everywhere) ------------------------ */
.rows{ border-top:1px solid var(--rule-2); }
.row{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gutter); padding:32px 0; border-bottom:1px solid var(--rule); align-items:start; }
.row .r-num{ grid-column:span 1; font-variant-numeric:tabular-nums; color:var(--faint); font-size:14px; padding-top:6px; }
.row .r-title{ grid-column:span 4; }
.row .r-title .h-3{ margin-bottom:6px; }
.row .r-title .eyebrow{ margin-top:8px; }
.row .r-body{ grid-column:span 5; color:var(--ink-2); }
.row .r-body p:last-child{ margin-bottom:0; }
.row .r-meta{ grid-column:span 2; font-size:14px; color:var(--ink-2); }
.row .r-meta dt{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mute); margin:0 0 3px; font-weight:500; }
.row .r-meta dd{ margin:0 0 14px; }
.row .r-meta dd:last-child{ margin-bottom:0; }
.row .r-meta dl{ margin:0; }
.row .r-cta{ grid-column:span 12; margin-top:8px; }
@media (max-width:900px){
  .row .r-num,.row .r-title,.row .r-body,.row .r-meta{ grid-column:span 12; }
  .row{ row-gap:12px; padding:24px 0; }
  .row .r-meta dl{ display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; }
  .row .r-meta dd{ margin-bottom:0; }
}
.row.link-row{ padding:0; }
.row.link-row > a{ grid-column:span 12; display:grid; grid-template-columns:subgrid; padding:24px 0; transition:background .15s; }
.row.link-row > a:hover{ background:var(--bg-2); }

/* Class list on the home page: photo + text rows ------------------------- */
.prog{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gutter); padding:40px 0; border-bottom:1px solid var(--ink); align-items:start; }
.prog .p-num{ grid-column:span 1; font-variant-numeric:tabular-nums; color:var(--faint); font-size:14px; padding-top:6px; }
.prog .p-img{ grid-column:span 4; }
.prog .p-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.prog .p-text{ grid-column:span 7; }
.prog .p-text .h-2{ margin:6px 0 16px; }
.prog .p-text .meta{ display:flex; flex-wrap:wrap; gap:6px 28px; font-size:13px; color:var(--mute); margin:18px 0 22px; }
.prog .p-text .meta b{ color:var(--ink); font-weight:500; }
@media (max-width:900px){
  .prog .p-num{ display:none; }
  .prog .p-img,.prog .p-text{ grid-column:span 12; }
  .prog{ row-gap:20px; padding:28px 0; }
}

.start-line{ margin:22px 0 18px; font-family:var(--display); font-size:clamp(20px,2vw,26px); font-weight:500; letter-spacing:-0.01em; }
.spec{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px 24px; margin:0 0 26px; padding-top:18px; border-top:1px solid var(--ink); }
.spec dt{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mute); font-weight:500; margin-bottom:4px; }
.spec dd{ margin:0; font-size:15px; line-height:1.45; color:var(--ink-2); }
.spec dd.strong{ color:var(--ink); font-weight:600; }
@media (max-width:560px){ .spec{ grid-template-columns:1fr 1fr; } }

/* Statement / quote ------------------------------------------------------- */
.statement{ font-family:var(--display); font-size:clamp(26px,3.6vw,48px); letter-spacing:-0.02em; line-height:1.15; font-weight:500; max-width:24ch; }
.quote{ font-family:var(--display); font-size:clamp(22px,2.6vw,34px); letter-spacing:-0.015em; line-height:1.25; font-weight:400; max-width:30ch; }
.quote + .cite{ margin-top:20px; }
.cite{ font-size:13px; color:var(--mute); letter-spacing:0.02em; }
.cite b{ color:var(--ink); font-weight:500; }
.plate .cite,.plate .cite b{ color:rgba(255,255,255,.75); }

/* Plates: the only gradients on the site --------------------------------- */
.plate{ position:relative; color:#fff; overflow:hidden; }
.plate .eyebrow{ color:rgba(255,255,255,.7); }
.plate .sub{ color:rgba(255,255,255,.7); }
.plate-yellow .sub{ color:rgba(18,19,22,.65); }
.plate .eyebrow b{ color:#fff; }

.plate p{ color:rgba(255,255,255,.85); }
.plate .lead{ color:#fff; }
.plate .wrap{ position:relative; }
.plate-yellow{ background:var(--gold); color:var(--ink); }
.plate-yellow.grad{ background:
  radial-gradient(55% 50% at 100% 0%, rgba(255,246,210,.9) 0%, rgba(255,246,210,0) 65%),
  radial-gradient(50% 55% at 0% 100%, #ffb300 0%, rgba(255,179,0,0) 65%),
  linear-gradient(160deg,#ffd23f 0%, #ffc93a 55%, #ffde6e 100%); }
.plate-yellow p{ color:var(--ink); }
.plate-yellow .lead{ color:var(--ink); }
.plate-yellow .eyebrow{ color:rgba(14,18,32,.6); }
.plate-yellow .eyebrow b{ color:var(--ink); }
.plate-yellow .eyebrow .bb{ color:var(--ink); }
.plate-yellow .link{ border-color:rgba(14,18,32,.4); color:var(--ink); }
.plate-yellow .link:hover{ border-color:var(--ink); }
.plate-yellow .btn{ border-color:var(--ink); color:var(--ink); }
.plate-yellow .btn:hover{ background:var(--ink); color:#fff; }
.plate-yellow .btn.fill{ background:var(--ink); color:#fff; }
.plate-yellow .btn.fill:hover{ background:#fff; border-color:#fff; color:var(--ink); }
.plate-dark{ background:
  radial-gradient(50% 45% at 100% 100%, rgba(255,210,63,.18) 0%, rgba(255,210,63,0) 65%),
  linear-gradient(180deg,#121316 0%, #1c1c1f 100%); }
.plate .btn.ghost{ border-color:rgba(255,255,255,.6); }

/* Term callout on the plate ---------------------------------------------- */
.term{ padding:var(--pad) 0; }
.term .big{ font-family:var(--display); font-size:clamp(56px,11vw,180px); letter-spacing:-0.04em; line-height:0.9; font-weight:500; }
.term .big em{ font-style:normal; color:var(--gold); }
.plate-yellow.term .big em{ color:transparent; -webkit-text-stroke:2px var(--ink); paint-order:stroke; }
@media (max-width:720px){ .plate-yellow.term .big em{ -webkit-text-stroke-width:1.5px; } }
.term-list{ border-top:1px solid rgba(255,255,255,.3); margin-top:48px; }
.term-list .row{ border-bottom-color:rgba(255,255,255,.3); }
.term-list .r-num{ color:rgba(255,255,255,.5); }
.term-list .r-body{ color:rgba(255,255,255,.85); }
.term-list .r-meta{ color:rgba(255,255,255,.9); }
.term-list .r-meta dt{ color:rgba(255,255,255,.55); }
.term-list .r-title .eyebrow{ color:var(--gold); }
.term-list .row .r-body{ grid-column:span 4; }
.term-list .row .r-meta{ grid-column:span 3; }
@media (max-width:900px){ .term-list .row .r-body,.term-list .row .r-meta{ grid-column:span 12; } }
.plate-yellow .term-list{ border-top-color:var(--ink); }
.plate-yellow .term-list .row{ border-bottom-color:var(--ink); }
.plate-yellow .term-list .r-num{ color:rgba(18,19,22,.5); }
.plate-yellow .term-list .r-body{ color:rgba(18,19,22,.85); }
.plate-yellow .term-list .r-meta{ color:var(--ink); }
.plate-yellow .term-list .r-meta dt{ color:rgba(18,19,22,.55); }
.plate-yellow .term-list .r-title .eyebrow{ color:rgba(18,19,22,.6); }
.plate-yellow .term-list .start{ color:var(--ink); border-bottom:2px solid var(--ink); padding-bottom:2px; }
.term-list .start{ font-size:13px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); font-weight:500; }

/* Glyph line: Baybayin rendered large and unapologetic -------------------- */
.glyphline{ font-size:clamp(34px,5.4vw,84px); line-height:1.15; letter-spacing:0.02em; margin:16px 0 12px; word-spacing:0.25em; }
.glyph-key{ display:flex; flex-wrap:wrap; gap:8px 32px; font-size:13px; color:var(--mute); }
.glyph-key b{ color:var(--ink); font-weight:500; }
.glyph-key .bb{ font-size:1.6em; vertical-align:-0.2em; margin-right:6px; }

/* Voices carousel: cross-fading quotes ---------------------------------- */
.voice-stage{ position:relative; min-height:11em; }
.voice{ position:absolute; inset:0; opacity:0; transform:translateY(8px); transition:opacity .7s ease, transform .7s ease; pointer-events:none; }
.voice.on{ opacity:1; transform:none; pointer-events:auto; position:relative; }
.voice .quote{ max-width:34ch; }
.voice-nav{ display:flex; align-items:center; gap:14px; margin-top:28px; }
.voice-btn{ width:40px; height:40px; border:1px solid var(--ink); display:grid; place-items:center; font-size:16px; transition:background .15s,color .15s; }
.voice-btn:hover{ background:var(--ink); color:#fff; }
.voice-count{ font-size:12px; color:var(--mute); letter-spacing:0.08em; min-width:5.5em; text-align:center; }
.voice-dots{ display:flex; gap:8px; margin-left:8px; }
.voice-dots button{ width:8px; height:8px; border:1px solid var(--ink); background:transparent; padding:0; }
.voice-dots button.on{ background:var(--ink); }
@media (prefers-reduced-motion:reduce){ .voice{ transition:none; } }

/* Photo grid: hairline cells, no cards ------------------------------------ */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px var(--gutter); }
.grid figure{ padding:0; margin:0; }
.grid figure a,.grid figure > div{ display:block; }
.grid img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.grid figcaption{ padding:12px 0 0; font-size:13px; color:var(--mute); line-height:1.45; }
.grid figcaption b{ display:block; color:var(--ink); font-weight:500; }
.grid.two{ grid-template-columns:repeat(2,1fr); }
.grid.four{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid,.grid.four{ grid-template-columns:repeat(2,1fr); gap:24px 16px; } }
@media (max-width:560px){ .grid,.grid.two,.grid.four{ grid-template-columns:1fr; } }
.grid figure a:hover img{ opacity:.9; }

/* Split photo + text ------------------------------------------------------ */
.fig{ position:relative; }
.fig img{ width:100%; height:auto; }
.fig figcaption{ margin-top:10px; font-size:13px; color:var(--mute); }
.fig.cover img{ aspect-ratio:4/3; object-fit:cover; }
.fig.tall img{ aspect-ratio:3/4; object-fit:cover; }
.fig.wide img{ aspect-ratio:16/7; object-fit:cover; }

/* Timeline ---------------------------------------------------------------- */
.timeline{ border-top:1px solid var(--rule-2); }
.tl{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gutter); padding:26px 0; border-bottom:1px solid var(--ink); }
.tl time{ grid-column:span 3; font-family:var(--display); font-size:clamp(22px,2.6vw,34px); letter-spacing:-0.03em; font-weight:500; line-height:1.1; font-variant-numeric:tabular-nums; }
.tl time small{ display:block; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mute); font-weight:500; margin-top:6px; }
.tl .t-title{ grid-column:span 3; font-weight:500; }
.tl .t-body{ grid-column:span 6; color:var(--ink-2); }
.tl .t-body p:last-child{ margin:0; }
.tl.mark{ background:var(--cream); margin:0 calc(-1 * var(--gutter)); padding-left:var(--gutter); padding-right:var(--gutter); }
@media (max-width:900px){ .tl time,.tl .t-title,.tl .t-body{ grid-column:span 12; } .tl{ row-gap:6px; } }

/* Values ------------------------------------------------------------------ */
.values{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gutter); }
.values div{ background:var(--cream); padding:28px 24px 32px; }
.values .bb{ font-size:clamp(30px,2.6vw,40px); line-height:1.15; display:block; margin-bottom:22px; min-height:2.3em; }
.values b{ display:block; font-family:var(--display); font-weight:500; font-size:20px; letter-spacing:-0.01em; }
.values i{ display:block; font-style:normal; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mute); margin:4px 0 14px; font-weight:500; }
.values p{ font-size:15px; color:var(--ink-2); margin:0; }
@media (max-width:900px){ .values{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .values{ grid-template-columns:1fr; } }

/* Award band -------------------------------------------------------------- */
.award{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gutter); row-gap:32px; align-items:end; }
.award .a-year{ grid-column:span 5; font-family:var(--display); font-size:clamp(96px,14vw,200px); line-height:0.85; letter-spacing:-0.05em; font-weight:500; color:var(--gold-2); font-variant-numeric:tabular-nums; }
.award .a-text{ grid-column:span 7; }
@media (max-width:900px){ .award .a-year,.award .a-text{ grid-column:span 12; } }

/* Contact ----------------------------------------------------------------- */
.contact-rows{ border-top:1px solid var(--rule-2); }
.contact-rows a,.contact-rows div.cr{ display:grid; grid-template-columns:140px 1fr auto; column-gap:24px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--ink); transition:background .15s; }
.contact-rows a:hover{ background:var(--bg-2); }
.contact-rows .k{ font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mute); font-weight:500; }
.contact-rows .v{ font-size:clamp(17px,1.6vw,21px); letter-spacing:-0.015em; word-break:break-word; }
.contact-rows .v small{ display:block; font-size:13px; letter-spacing:0; color:var(--mute); margin-top:4px; }
.contact-rows .ar{ color:var(--faint); font-size:20px; }
.contact-rows a:hover .ar{ color:var(--ink); }
@media (max-width:640px){ .contact-rows a,.contact-rows div.cr{ grid-template-columns:1fr auto; } .contact-rows .k{ grid-column:1 / -1; } }

/* Form: hairline fields, no boxes ----------------------------------------- */
.form{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--gutter); row-gap:28px; }
.form .full{ grid-column:1 / -1; }
.form label{ display:block; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mute); font-weight:500; margin-bottom:8px; }
.form input,.form select,.form textarea{ width:100%; font:inherit; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--rule-2); border-radius:0; padding:10px 0; outline:0; -webkit-appearance:none; appearance:none; }
.form select{ background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 14px) 50%,calc(100% - 8px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-right:28px; }
.form textarea{ min-height:120px; resize:vertical; }
.form input:focus,.form select:focus,.form textarea:focus{ border-bottom-color:var(--gold-2); border-bottom-width:2px; }
.form .actions{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:16px 24px; align-items:center; }
.form .note{ font-size:13px; color:var(--mute); margin:0; max-width:48ch; }
@media (max-width:640px){ .form{ grid-template-columns:1fr; } }

/* Lightbox ---------------------------------------------------------------- */
dialog.lb{ border:0; padding:0; background:#000; max-width:min(96vw,1400px); max-height:96vh; color:#fff; }
dialog.lb::backdrop{ background:rgba(0,0,0,.85); }
dialog.lb img{ max-width:min(96vw,1400px); max-height:86vh; width:auto; height:auto; object-fit:contain; margin:0 auto; }
dialog.lb figcaption{ padding:12px 16px 14px; font-size:13px; color:rgba(255,255,255,.75); display:flex; justify-content:space-between; gap:16px; }
dialog.lb button{ color:#fff; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; }

/* Footer ------------------------------------------------------------------ */
.footer{ border-top:1px solid var(--rule-2); padding:64px 0 40px; font-size:14px; }
.footer .cols{ row-gap:40px; }
.footer h4{ font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mute); font-weight:500; margin-bottom:16px; }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ padding:6px 0; border-top:1px solid var(--rule); }
.footer li:first-child{ border-top:0; padding-top:0; }
.footer li a{ color:var(--ink-2); }
.footer li a:hover{ color:var(--brown); }
.footer .brand{ margin-bottom:24px; flex-direction:column; align-items:flex-start; gap:18px; font-size:18px; }
.footer .brand img{ width:120px; height:120px; }
.footer .bb{ font-size:28px; display:block; margin:8px 0 14px; word-spacing:0.2em; }
.footer .brand small .bb{ display:inline; font-size:1.25em; margin:0 0.4em; word-spacing:normal; }
.footer .legal{ margin-top:56px; padding-top:20px; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; font-size:13px; color:var(--mute); }

/* Reveal ------------------------------------------------------------------ */
.rv{ opacity:0; transform:translateY(12px); transition:opacity .45s ease,transform .45s ease; }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }