/* ==========================================================================
   深圳市初源科技有限公司 · OCPT — 网站新样式 (2026 redesign)
   Direction: 时尚 / 大方 — editorial luxury grid, airy spacing, thin display
   type, hairline rules, numbered sections, cinematic hero, dark bands.
   Markup hooks are grouped by component; each block lists the classes it
   styles so the HTML generator and this sheet stay in sync.
   ========================================================================== */

/* --- 1. tokens ------------------------------------------------------------ */
:root {
  --ink:        #101821;
  --ink-2:      #4C5560;
  --ink-3:      #8B939B;
  --paper:      #F7F6F2;
  --paper-2:    #EEECE4;
  --paper-3:    #E5E2D9;
  --card:       #FFFFFF;
  --line:       #DCE0E5;

  --brand:      #0F5CC9;
  --brand-deep: #08295E;
  --teal:       #1F7F6B;
  --sand:       #C6A469;
  --graphite:   #0D141C;
  --graphite-2: #16202A;

  --font: "PingFang SC", "HarmonyOS Sans SC", "MingYaHei", "MensYuHt",
          "Noto Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: Georgia, "Times New Roman", "PingFang SC", serif;

  --gut:     clamp(.9rem, 1.5vw, 26px);
  --pad:     clamp(1rem, 4.6vw, 66px);
  --sec:     clamp(2.8rem, 7.4vw, 108px);
  --wrap:    1420px;
  --measure: 74ch;

  /* fluid type ramp: px floors + px ceilings keep the design proportions
     identical whatever the browser's default font size is, so a large root
     size can never push type past the composition (page zoom still scales) */
  --h1:     clamp(30px, 3.3vw, 46px);
  --h2:     clamp(18px, 1.9vw, 26px);
  --h3:     clamp(15px, 1.3vw, 19px);
  --lead:   clamp(14px, 1.15vw, 17px);
  --body:   clamp(14px, 1.05vw, 16px);
  --kicker: clamp(10px, .8vw, 11px);
  --num:    clamp(17px, 1.5vw, 22px);

  --ease: cubic-bezier(.22, .61, .2, 1);
  --sh-s: 0 .2rem .5rem rgba(13, 20, 28, .10);
  --sh-m: 0 1.1rem 2.6rem rgba(13, 20, 28, .13);
  --sh-l: 0 2.4rem 5.4rem rgba(13, 20, 28, .18);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--body);
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
::selection { background: var(--brand); color: #fff; }

.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }

/* section modifiers */
.sec     { padding-block: var(--sec); }
.sec-top { padding-block: clamp(1.6rem, 3vw, 3.2rem) var(--sec); }
.tint    { background: var(--paper-2); }
.dark {
  background: var(--graphite);
  color: #F0EFE9;
  --line: rgba(244, 243, 238, .16);
  --ink-2: rgba(232, 236, 240, .74);
  --ink-3: rgba(232, 236, 240, .52);
}

/* --- 2. type -------------------------------------------------------------- */
.t-h1 { font-family: var(--display); font-size: var(--h1); font-weight: 300; line-height: 1.12; letter-spacing: .015em; }
.t-h2 { font-size: var(--h2); font-weight: 300; line-height: 1.3; letter-spacing: .05em; }
.t-h3 { font-size: var(--h3); font-weight: 500; letter-spacing: .03em; }
.t-lead { font-size: var(--lead); color: var(--ink-2); line-height: 1.72; }
.t-body { font-size: var(--body); color: var(--ink-2); line-height: 1.9; max-width: var(--measure); }
.t-kicker { font-family: var(--display); font-size: var(--kicker); letter-spacing: .26em; text-transform: uppercase; color: var(--sand); }
.t-num { font-family: var(--display); font-size: var(--kicker); letter-spacing: .16em; color: var(--ink-3); font-variant-numeric: lining-figures; }
.t-big { font-family: var(--display); font-size: var(--h2); font-weight: 300; letter-spacing: .03em; line-height: 1.25; }
.lite { font-family: var(--display); font-size: .62em; font-weight: 300; letter-spacing: .08em; color: rgba(244, 243, 238, .8); }

.sec-head {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  align-items: center;
  gap: .9rem;
  margin-bottom: clamp(.9rem, 2.4vw, 2.2rem);
}
.sec-head .idx { font-family: var(--display); font-size: clamp(22px, 2.6vw, 32px); font-weight: 300; line-height: 1; color: var(--sand); }
.sec-head .ttl { display: flex; flex-direction: column; gap: .3rem; }
.sec-head .lab { font-size: var(--h3); font-weight: 300; letter-spacing: .08em; }
.sec-head .en { font-size: var(--kicker); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); }

/* --- 3. chrome: sticky header + nav -------------------------------------- */
.head {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  padding: clamp(.65rem, 1.3vw, 1.15rem) var(--pad);
  background: rgba(247, 246, 242, .80);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid rgba(16, 24, 33, .09);
}
.head .brand { display: flex; align-items: center; gap: 1rem; }
.head .bar { display: flex; align-items: center; gap: 1rem; }

/* hamburger — hidden by default; site.js + phone media query reveal it */
.burger {
  display: none;
  position: relative;
  width: 46px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(15, 92, 201, .16);
}
.burger span, .burger span::before, .burger span::after {
  content: "";
  position: absolute;
  left: 11px;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span { top: 19px; }
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
html.nav-open .burger span { background: transparent; }
html.nav-open .burger span::before { transform: translateY(7px) rotate(45deg); }
html.nav-open .burger span::after { transform: translateY(-7px) rotate(-45deg); }

.head .brand .logo { height: clamp(1.2rem, 1.9vw, 30px); width: auto; }
.head .brand .logo-a:hover { opacity: .82; }
.head .brand .word { font-size: var(--kicker); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }

.head .menu { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(.5rem, 1.5vw, 1.8rem); }
.head .menu > li { position: relative; padding-block: .4rem; font-weight: 500; font-size: clamp(12px, 1vw, 13px); letter-spacing: .1em; }
.head .menu > li.on { color: var(--brand); }
.head .menu > li > a { display: block; }
.head .menu > li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: .3rem;
  height: 1px;
  background: var(--brand);
  transition: right .45s var(--ease);
}
.head .menu > li:hover::after { right: 0; }
.head .menu > li.on::after { right: 0; }
.head .menu > li > a:hover { color: var(--brand); }

/* dropdown (desktop) */
.head .menu > li > .sub {
  position: absolute;
  left: 50%;
  top: 110%;
  transform: translate(-50%, -8%) scale(.95);
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 190px;
  padding: .8rem 1.15rem;
  background: var(--graphite-2);
  color: #F2F1EC;
  border-radius: .3rem;
  box-shadow: var(--sh-m);
  transition: opacity .24s var(--ease), transform .3s var(--ease);
}
.head .menu > li:hover > .sub,
.head .menu > li:focus > .sub { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.head .menu > li > .sub > li { font-size: clamp(12px, 1vw, 13px); font-weight: 400; letter-spacing: .06em; }
.head .menu > li > .sub > li > a:hover { color: var(--sand); }

/* tablet / phone chrome: slim bar + hamburger fold (site.js gated).
   Without JS the menu stays fully visible, just stacked. */
@media (max-width: 1023px) {
  .head { display: block; padding: .5rem var(--pad) .55rem; }
  .head .bar { justify-content: space-between; }
  .head .brand { gap: .7rem; }
  .head .brand .word { font-size: var(--kicker); letter-spacing: .22em; }
  .head .menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: .5rem;
  }
  .head .menu > li { font-size: clamp(14px, 3.8vw, 16px); padding-block: 0; }
  .head .menu > li > a { display: block; padding-block: .6rem; }
  .head .menu > li::after { display: none; }
  .head .menu > li > .sub {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .1rem .4rem;
    min-width: 0;
    padding: 0 0 .55rem;
    background: none;
    color: inherit;
    box-shadow: none;
    border-radius: 0;
  }
  .head .menu > li > .sub > li {
    font-size: clamp(12px, 3.1vw, 13px);
    letter-spacing: .04em;
    padding: .12rem .5rem .12rem 0;
  }
  /* JS present: fold the menu behind the hamburger */
  html.js .burger { display: inline-flex; align-items: center; justify-content: center; }
  html.js .head .menu { display: none; border-top: 1px solid var(--line); margin-top: .45rem; padding-top: .3rem; }
  html.js.nav-open .head .menu { display: flex; }
}

/* --- 4. hero -------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(300px, 58vh, 560px);
  display: grid;
  padding: 0;
  background: var(--graphite);
  overflow: hidden;
  color: #F4F3EE;
}
.hero .stack { position: absolute; left: 0; top: 0; right: 0; bottom: 0; inset: 0; }
.hero .stack img {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0; inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenburns 32s linear infinite;
  transform-origin: 50% 45%;
}
.hero .stack img:nth-child(1) { animation-delay: 0s;  transform-origin: 42% 42%; }
.hero .stack img:nth-child(2) { animation-delay: 8s;  transform-origin: 66% 46%; }
.hero .stack img:nth-child(3) { animation-delay: 16s; transform-origin: 50% 54%; }
.hero .stack img:nth-child(4) { animation-delay: 24s; transform-origin: 60% 38%; }

@keyframes kenburns {
  0%   { opacity: 1; transform: scale(1.02); }
  21%  { opacity: 1; transform: scale(1.07); }
  25%  { opacity: 0; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.1); }
}

.hero .veil {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(178deg, rgba(6, 10, 16, .18) 0%, rgba(6, 10, 16, .04) 44%, rgba(6, 10, 16, .34) 98%);
}
.hero .cue {
  position: absolute;
  left: 50%;
  bottom: .9rem;
  width: 1px;
  height: clamp(26px, 4.5vh, 46px);
  background: rgba(244, 243, 238, .32);
  animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue { 0%, 100% { transform: scaleY(.35); opacity: .2; } 50% { transform: scaleY(1); opacity: .8; } }

/* statement band — sits under the slideshow, never over the photos */
.intro {
  position: relative;
  background:
    linear-gradient(178deg, var(--paper) 30%, var(--paper-2) 100%);
  color: var(--ink);
  padding-block: clamp(1.4rem, 3vw, 3rem) clamp(1.6rem, 3.4vw, 3.4rem);
}

/* two-column editorial band: display headline + numbered category index */
.intro .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(20rem, 60%) minmax(11rem, 26%);
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  border-inline-start: 3px solid var(--brand);
  padding-inline-start: var(--gut);
}
.intro .wrap::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg,
    transparent 0, transparent calc(100% / 6 - 1px),
    rgba(16, 24, 33, .05) calc(100% / 6 - 1px), rgba(16, 24, 33, .05) calc(100% / 6));
}
.intro .col-a { display: flex; flex-direction: column; gap: clamp(.6rem, 1.3vw, 1.3rem); }
.intro .col-b { display: flex; flex-direction: column; gap: clamp(.6rem, 1.3vw, 1.3rem); }

.intro .kicker {
  font-family: var(--display);
  font-size: var(--kicker);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--brand);
}
.intro .kicker::after { content: ""; display: inline-block; width: clamp(2rem, 4vw, 4rem); border-top: 1px solid var(--sand); vertical-align: .35em; opacity: .8; }

.intro .t-h1 { line-height: 1.2; letter-spacing: .02em; }
.intro .hl { font-size: 1.42em; font-weight: 500; letter-spacing: .02em; color: var(--ink); }
.intro .lite { font-family: var(--display); font-size: .74em; font-weight: 300; letter-spacing: .2em; color: var(--ink-2); }
.intro .sub-lite { font-size: .5em; letter-spacing: .34em; text-transform: uppercase; color: var(--sand); }

.intro .t-lead {
  font-size: var(--lead);
  color: var(--ink-2);
  line-height: 1.95;
  max-width: 30em;
  text-align: justify;
}
.intro .t-lead::first-letter { font-size: 2.1em; font-weight: 600; color: var(--brand); float: left; margin-right: .28rem; line-height: 1; }
.intro .t-lead::first-line { color: var(--ink); letter-spacing: .02em; }

.intro .chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  gap: .35rem 1.1rem;
  counter-reset: chip;
}
.intro .chips span {
  counter-increment: chip;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .55rem;
  align-items: baseline;
  font-size: clamp(11px, .95vw, 13px);
  letter-spacing: .1em;
  color: var(--ink-2);
}
.intro .chips span::before {
  content: counter(chip, decimal-leading-zero);
  font-family: var(--display);
  font-size: .95em;
  color: var(--sand);
}
.intro .chips span:hover { color: var(--brand); }

@media (max-width: 900px) {
  .intro .wrap { grid-template-columns: 1fr; row-gap: 1.4rem; }
  .intro .chips { grid-template-columns: 1fr 1fr; }
  .intro .t-lead::first-letter { float: none; font-size: 1.6em; }
}

/* sub-page banner */
.page-hero {
  position: relative;
  min-height: clamp(200px, 26vw, 330px);
  display: grid;
  align-items: center;
  justify-items: start;
  padding: clamp(1.4rem, 3vw, 2.8rem) var(--pad) clamp(1.4rem, 3vw, 2.8rem);
  background: var(--graphite);
  overflow: hidden;
  color: #F4F3EE;
}
.page-hero .bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; inset: 0; background-size: cover; background-position: center; animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.1) translateY(-1%); } }
.page-hero .veil {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0; inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(6, 10, 16, .92) 4%, rgba(6, 10, 16, .62) 55%, rgba(6, 10, 16, .22) 100%);
}
.page-hero .copy { position: relative; display: flex; flex-direction: column; gap: clamp(.5rem, 1vw, 1rem); max-width: min(92%, 820px); }
.page-hero .copy .kicker { font-size: var(--kicker); letter-spacing: .3em; text-transform: uppercase; color: var(--sand); font-family: var(--display); }
.page-hero .copy .t-h1 { color: #F4F3EE; font-size: var(--h1); }
.page-hero .copy .t-lead { color: rgba(236, 240, 244, .8); font-size: var(--lead); max-width: 58ch; }

/* breadcrumb strip under product banners */
.crumb { padding-block: clamp(.8rem, 1.6vw, 1.3rem) 0; }
.crumb .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; font-size: clamp(11px, .95vw, 13px); letter-spacing: .1em; color: var(--ink-3); }
.crumb a { color: var(--ink-2); transition: color .3s var(--ease); }
.crumb a:hover { color: var(--brand); }
.crumb .sep { opacity: .55; }
.crumb .now { color: var(--ink); }

/* --- 5. category rail ----------------------------------------------------- */
.rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: clamp(1.4rem, 3vw, 3rem) 0;
}
.rail .cat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25rem;
  padding: .85rem 1.15rem;
  border-left: 1px solid var(--line);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .06em;
}
.rail .cat .nm { font-weight: 500; }
.rail .cat .n { font-family: var(--display); font-size: var(--num); font-weight: 300; color: var(--ink-3); }
.rail .cat:hover .n { color: var(--brand); }
.rail .cat:hover .nm { color: var(--brand); }

/* --- 6. cards ------------------------------------------------------------- */
.feature { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--gut); }
@media (max-width: 1040px) { .feature { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .feature { grid-template-columns: 1fr; } }

.grid-cards { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: var(--gut); }
@media (max-width: 1240px) { .grid-cards { grid-template-columns: repeat(3, minmax(210px, 1fr)); } }
@media (max-width: 880px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grid-cards { grid-template-columns: 1fr; } }

a.card {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: .3rem;
  overflow: hidden;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
a.card:hover { transform: translateY(-.4rem); box-shadow: var(--sh-m); }
a.card .ph { display: block; overflow: hidden; aspect-ratio: 1 / .92; }
a.card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s var(--ease); }
a.card:hover .ph img { transform: scale(1.06); }
a.card .cap { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; padding: .85rem 1.1rem 1rem; border-top: 1px solid var(--line); }
a.card .cap .nm { font-size: clamp(13px, 1.05vw, 16px); font-weight: 500; letter-spacing: .04em; line-height: 1.5; }
a.card .cap .arw { font-family: var(--display); font-size: clamp(14px, 1.1vw, 16px); color: var(--brand); }
a.card:hover .cap .arw { color: var(--sand); }
a.card.big .ph { aspect-ratio: 1.5 / 1; }
a.card.big .cap .nm { font-size: clamp(14px, 1.2vw, 18px); }

.photo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gut); }
.photo-row .ph { aspect-ratio: 1 / .92; overflow: hidden; border-radius: .25rem; }
.photo-row .ph img { width: 100%; height: 100%; object-fit: cover; }

.doc-row { display: flex; justify-content: center; }
.doc-row .ph { max-width: 78%; overflow: hidden; }
.doc-row .ph img { width: 100%; height: auto; }

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--sand);
  border-radius: .25rem;
  padding: clamp(1.2rem, 2vw, 2rem);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .8rem 1.4rem;
  padding: clamp(1rem, 2vw, 2rem);
  border-top: 1px solid var(--line);
}
.cta .t-kicker { color: var(--ink-2); letter-spacing: .08em; text-transform: none; font-family: var(--font); font-size: var(--body); }
.cta .hd { color: var(--brand); font-weight: 500; }
.cta:hover .hd { color: var(--sand); }

/* --- 7. split / pull / tiles / strip -------------------------------------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--gut); align-items: center; }
.split .ph { min-height: clamp(180px, 24vw, 300px); overflow: hidden; border-radius: .3rem; }
.split .ph img { width: 100%; height: 100%; object-fit: cover; }
.split .txtblk { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 2rem); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split .ph { min-height: 190px; } }

.pull { font-size: clamp(15px, 1.5vw, 21px); font-weight: 300; line-height: 1.55; letter-spacing: .04em; color: var(--ink); border-left: 2px solid var(--sand); padding-left: 1.1rem; }
.more { font-family: var(--display); font-size: clamp(11px, .95vw, 13px); letter-spacing: .12em; color: var(--brand); }

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gut); }
@media (max-width: 760px) { .tiles { grid-template-columns: 1fr; } }
.tiles .t { background: var(--card); border: 1px solid var(--line); border-radius: .3rem; overflow: hidden; transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
.tiles .t:hover { transform: translateY(-.35rem); box-shadow: var(--sh-m); }
.tiles .t .ph { aspect-ratio: 800 / 560; overflow: hidden; }
.tiles .t .ph img { width: 100%; height: 100%; object-fit: cover; }
.tiles .t .cap { display: flex; align-items: baseline; gap: .9rem; padding: .9rem 1.15rem 1.1rem; border-top: 1px solid var(--line); }
.tiles .t .cap .no { font-family: var(--display); font-size: var(--num); color: var(--sand); }
.tiles .t .cap .nm { font-size: clamp(14px, 1.05vw, 15px); font-weight: 500; letter-spacing: .05em; }

.strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.5rem, 1.2vw, 1.4rem); align-items: center; }
@media (max-width: 1120px) { .strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .strip { grid-template-columns: repeat(2, 1fr); } }
.strip img { height: auto; width: 100%; object-fit: cover; aspect-ratio: 589 / 330; border-radius: .2rem; filter: grayscale(1) contrast(104%); opacity: .82; transition: filter .55s var(--ease), opacity .55s var(--ease); }
.strip img:hover { filter: none; opacity: 1; }

/* --- 8. timeline ---------------------------------------------------------- */
.course { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.course .node { display: grid; grid-template-columns: 3.4rem 1fr; gap: 1rem; align-items: start; border-top: 1px solid var(--line); padding-top: 1.15rem; }
.course .node .ico img { width: clamp(38px, 4.4vw, 56px); height: clamp(38px, 4.4vw, 56px); object-fit: contain; }
.course .node .txt { display: flex; flex-direction: column; gap: .4rem; }
.course .node .yr { font-family: var(--display); font-size: var(--num); font-weight: 300; color: var(--brand); letter-spacing: .04em; }
.course .node .hd { font-size: clamp(14px, 1.1vw, 15px); font-weight: 500; letter-spacing: .04em; }
.course .node .dt { font-size: var(--body); color: var(--ink-2); line-height: 1.75; }
.course .node:hover .yr { color: var(--sand); }
@media (max-width: 860px) { .course { grid-template-columns: 1fr; } }

/* --- 9. news + qa --------------------------------------------------------- */
.ed-feat { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--gut); align-items: center; margin: clamp(1rem, 2vw, 2rem) 0; }
.ed-feat .ph { min-height: clamp(150px, 19vw, 240px); overflow: hidden; border-radius: .3rem; }
.ed-feat .ph img { width: 100%; height: 100%; object-fit: cover; }
.ed-feat .txtblk { display: flex; flex-direction: column; gap: .8rem; }
@media (max-width: 900px) { .ed-feat { grid-template-columns: 1fr; } .ed-feat .ph { min-height: 150px; } }

.ed-list { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(1.4rem, 3vw, 3rem); }
.ed-list .item { display: grid; grid-template-columns: 6rem 1fr; gap: 1.3rem; align-items: baseline; border-top: 1px solid var(--line); padding-top: 1rem; }
.ed-list .item .date { font-family: var(--display); font-size: clamp(11px, .95vw, 13px); letter-spacing: .1em; color: var(--ink-3); }
.ed-list .item .col { display: flex; flex-direction: column; gap: .4rem; }
.ed-list .item .hd { font-size: clamp(14px, 1.25vw, 20px); font-weight: 400; line-height: 1.45; letter-spacing: .03em; }
.ed-list .item .sub { font-size: var(--body); color: var(--ink-2); line-height: 1.7; }
.ed-list .item:hover .hd { color: var(--brand); }

.qa { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: var(--gut); }
.qa .q { display: flex; flex-direction: column; gap: .5rem; padding: clamp(1rem, 2vw, 2rem); border-left: 2px solid var(--brand); }
.qa .q .t-num { color: var(--sand); }
.qa .q .hd { font-size: clamp(15px, 1.25vw, 19px); font-weight: 500; color: var(--ink); }
.qa .q .t-body { color: var(--ink-2); }
@media (max-width: 760px) { .qa { grid-template-columns: 1fr; } }

/* --- 10. articles + tables ------------------------------------------------ */
.article { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.8rem); }
.article .hd { display: flex; flex-direction: column; gap: .5rem; }
.article .body { max-width: var(--measure); font-size: var(--body); line-height: 1.92; color: var(--ink); }
.article .body p { margin: 0 0 clamp(.5rem, 1vw, 1rem); }
.article .body .fig { display: block; margin: 0 auto; max-width: 76%; background: var(--card); border: 1px solid var(--line); padding: .35rem; border-radius: .25rem; }
.article .body .fig img { width: 100%; height: auto; }

table.tbl { width: 100%; border-collapse: collapse; font-size: clamp(11px, .95vw, 13px); line-height: 1.55; }
table.tbl th { background: var(--graphite); color: #F2F1EC; font-size: clamp(10px, .85vw, 12px); letter-spacing: .1em; padding: .55rem .7rem; border: 1px solid var(--line); text-align: left; }
table.tbl td { padding: .6rem .7rem; border: 1px solid var(--line); vertical-align: top; }
table.tbl tbody tr:nth-child(2n) { background: var(--paper-2); }

/* --- 11. facts / contact / downloads -------------------------------------- */
.facts { display: flex; flex-direction: column; }
.facts .row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.2rem; align-items: center; padding-block: .7rem; border-top: 1px solid var(--line); }
.facts .row .k { font-size: var(--kicker); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); }
.facts .row .v { font-size: clamp(14px, 1.1vw, 16px); letter-spacing: .03em; }
.facts .row .v a:hover { color: var(--brand); }
.facts .row:hover { background: rgba(15, 92, 201, .05); }
.facts .row.free { grid-template-columns: 1fr; }
.facts .row.free .v { font-size: clamp(14px, 1.2vw, 17px); }

.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--gut); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.qr-box { display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: clamp(1rem, 2vw, 2rem); background: var(--card); border: 1px solid var(--line); border-radius: .3rem; }
.qr-box img { width: clamp(84px, 11vw, 150px); }
.qr-box .cap { font-size: var(--kicker); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }

.link-block { margin-top: clamp(1.6rem, 3vw, 3rem); }
.link-block h4 { font-size: var(--kicker); letter-spacing: .28em; text-transform: uppercase; color: var(--sand); }
.link-block ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem 1.4rem; }
.link-block li { font-size: var(--body); color: var(--ink-2); }
.link-block li a:hover { color: var(--brand); }

.dl-list { display: flex; flex-direction: column; margin: clamp(1.2rem, 2vw, 2rem) 0; }
.dl-list .row { display: grid; grid-template-columns: 1fr 8rem auto; gap: 1.2rem; align-items: center; border-top: 1px solid var(--line); padding-block: .95rem; }
.dl-list .row .fn { font-size: clamp(14px, 1.2vw, 18px); font-weight: 500; letter-spacing: .04em; }
.dl-list .row .dt { font-family: var(--display); font-size: clamp(11px, .95vw, 13px); letter-spacing: .08em; color: var(--ink-3); }
.dl-list .row:hover .fn { color: var(--brand); }

/* file download button — solid plate, arrow + label, real tap target */
.dl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .5rem 1.05rem;
  background: var(--brand);
  color: #F7F6F2;
  font-size: clamp(12px, .95vw, 14px);
  letter-spacing: .14em;
  border-radius: .2rem;
  box-shadow: 0 .3rem .5rem rgba(15, 92, 201, .28);
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.dl-btn::before { content: "↓"; font-family: var(--display); font-size: 1.3em; line-height: 1; margin-inline-end: .3rem; }
.dl-btn:hover, .dl-btn:active { background: var(--brand-deep); box-shadow: 0 .15rem .3rem rgba(15, 92, 201, .34); }
.dl-btn:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

/* --- 12. footer ----------------------------------------------------------- */
.foot {
  background: var(--graphite);
  color: #F0EFE9;
  padding-block: clamp(3rem, 6vw, 6rem) clamp(1.4rem, 2vw, 2rem);
  --line: rgba(244, 243, 238, .16);
  --ink-2: rgba(232, 236, 240, .72);
  --ink-3: rgba(232, 236, 240, .5);
}
.foot-grid { display: grid; grid-template-columns: 1.15fr 1fr 1.05fr; gap: clamp(1.2rem, 3vw, 3.2rem); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr; row-gap: 2.2rem; } }
.foot .col .big { margin-bottom: .8rem; color: #F4F3EE; }
.foot h4 { font-size: var(--kicker); letter-spacing: .28em; text-transform: uppercase; color: var(--sand); }
.foot ul { display: flex; flex-direction: column; gap: .45rem; }
.foot li { font-size: var(--body); color: var(--ink-2); }
.foot a:hover { color: var(--sand); }

.cop { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: clamp(10px, .85vw, 12px); letter-spacing: .08em; color: rgba(232, 236, 240, .62); border-top: 1px solid var(--line); padding-top: 1.2rem; }
.cop a:hover { color: var(--sand); }

/* --- 13. reveal (JS-gated) -------------------------------------------------
   site.js adds class "js" to <html> and "in" once a section scrolls in.
   Without JS everything stays visible. ------------------------------------- */
html.js .anim { opacity: 0; transform: translateY(1.6rem); transition: opacity .95s var(--ease), transform .95s var(--ease); }
html.js .anim.in { opacity: 1; transform: none; }
html.js .anim.d1 { transition-delay: .1s; }
html.js .anim.d2 { transition-delay: .2s; }
html.js .anim.d3 { transition-delay: .3s; }

/* --- 14. small screens ---------------------------------------------------- */
@media (max-width: 620px) {
  .sec-head { grid-template-columns: 2.6rem 1fr; gap: .9rem; }
  .sec-head .idx { font-size: clamp(18px, 3.2vw, 20px); }
  .rail { flex-direction: column; align-items: start; }
  .rail .cat { padding: .45rem .9rem; }
  .facts .row { grid-template-columns: 1fr; row-gap: .2rem; }
  .ed-list .item { grid-template-columns: 1fr; row-gap: .2rem; }
  .intro { padding-block: 1.1rem 1.6rem; }
  .intro .chips span:first-child { border-left: 0; padding-left: 0; }
  .intro .chips { gap: .2rem .7rem; }
}

/* --- 14b. touch feedback: coarse pointers get press states ------------------ */
a, button { -webkit-tap-highlight-color: rgba(15, 92, 201, .16); }
@media (hover: none) {
  a.card, a.cat, a.hd, .dl-btn, .burger { transition: transform .12s ease, background-color .12s ease, color .12s ease; }
  a.card:active, a.cat:active { transform: scale(.975); background-color: var(--paper-2); }
  .dl-btn:active { transform: scale(.955); }
  a.hd:active { color: var(--brand-deep); }
  .burger:active span, .burger:active span::before, .burger:active span::after { background: var(--brand); }
  /* hover color on decorative chips would stick on touch: neutralize it */
  .intro .chips span:hover { color: var(--ink-2); }
}

/* --- 15. mobile compatibility ---------------------------------------------- */
/* the 7-column firewall table is unreadable below ~900px: stack rows and
   relabel each cell from the header via data-label (generator-emitted) */
@media (max-width: 900px) {
  table.tbl, table.tbl tbody, table.tbl tr { display: block; width: 100%; }
  table.tbl thead { display: none; }
  table.tbl tr {
    border: 1px solid var(--line);
    border-radius: .25rem;
    padding: .5rem .7rem;
    margin-block: .7rem;
  }
  table.tbl th, table.tbl td { display: block; border: 0; padding: .1rem .2rem; }
  table.tbl td:not(:first-child) { display: flex; justify-content: space-between; gap: .5rem; }
  table.tbl td::before { content: attr(data-label); font-size: var(--kicker); letter-spacing: .12em; color: var(--ink-3); }
  table.tbl td:first-child::before { content: ""; }
  table.tbl td:first-child { font-weight: 500; }
  table.tbl tbody tr:nth-child(2n) { background: none; }
}

@media (max-width: 720px) {
  .dl-list .row { grid-template-columns: 1fr; row-gap: .15rem; }
  .photo-row { grid-template-columns: 1fr 1fr; }
  .doc-row .ph { max-width: 92%; }
  .qa .q { padding: .8rem 1rem; }
  .qr-box img { width: clamp(76px, 22vw, 120px); }
  .facts .row { padding-block: .5rem; }
}

/* phones narrower than a card column: keep the swipe targets roomy */
@media (max-width: 420px) {
  .grid-cards { grid-template-columns: 1fr; }
  .rail { flex-direction: column; align-items: start; }
  .rail .cat { padding: .5rem .8rem; }
  .strip { grid-template-columns: 1fr 1fr; }
  .intro .chips { grid-template-columns: 1fr 1fr; }
  .hero .stack img { object-position: 58% 42%; }
}

/* phones: slimmer slideshow/banner so content stays above the fold */
@media (max-width: 760px) {
  .hero { min-height: clamp(240px, 42vh, 340px); }
  .page-hero { min-height: clamp(150px, 40vw, 220px); }
}

@supports not (backdrop-filter: blur(2px)) {
  .head { background: rgba(247, 246, 242, .96); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero .stack img { opacity: 0; }
  .hero .stack img:nth-child(1) { opacity: 1; }
  html.js .anim { opacity: 1; transform: none; }
}