/*
 * VP company site.
 *
 * A visual rebuild of the preserved website: same sections, same order, same
 * palette, same reading rhythm. The original placed every element at fixed
 * coordinates for four separate breakpoints; this replaces that with grid and
 * flow layout so the pages reflow instead of being re-pinned per screen size.
 *
 * Colour tokens are the values the original pages actually used.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: light;

  /* Brand greens, straight from the archived stylesheets. */
  --vp-header-bg: #010d05;
  --vp-nav-bg: rgba(2, 41, 7, 0.73);
  --vp-nav-link: #ffffff;
  --vp-nav-hover: #8ee317;
  --vp-nav-active: #15fa05;
  --vp-name: #03ff13;
  --vp-tagline: #05ff05;
  --vp-heading: #045207;
  --vp-section: #77b81e;
  --vp-button: #77b81e;
  --vp-button-hover: #5d8f18;
  --vp-pill: #0ea103;
  --vp-pill-hover: #009e67;
  --vp-pill-text: #fafa05;

  /* Accent inks used by individual passages. */
  --vp-magenta: #98346f;
  --vp-brown: #93846f;
  --vp-red: #fc0505;
  --vp-grey: #474747;
  --vp-olive: #707520;
  --vp-leaf: #45a63c;
  --vp-gold: #a8913b;

  /* Section grounds. */
  --vp-band-green: #d8f0da;
  --vp-band-cream: #f7f6f2;
  --vp-band-sand: #edecdf;
  --vp-band-mist: #e8f0f3;
  --vp-band-warm: #f5f3e9;
  --vp-footer-bg: #000000;

  --vp-ink: #173224;
  --vp-paper: #ffffff;

  --vp-shell: 1200px;
  --vp-gutter: clamp(16px, 4vw, 40px);

  /* The archived pages loaded five webfonts for what is mostly Chinese body
     copy. System faces render the same text faster and with better CJK
     coverage, which is what the live site already does. */
  --vp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans TC',
    'PingFang TC', 'Microsoft JhengHei', 'Hiragino Sans', sans-serif;
}

/* ------------------------------------------------------------------ base */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  color: var(--vp-ink);
  background: var(--vp-paper);
  font-family: var(--vp-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
ul {
  margin: 0;
}

.shell {
  width: 100%;
  max-width: var(--vp-shell);
  margin-inline: auto;
  padding-inline: var(--vp-gutter);
}

.skip-link {
  position: absolute;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  color: #fff;
  background: var(--vp-header-bg);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

:where(a, button, summary):focus-visible {
  outline: 3px solid var(--vp-nav-active);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: relative;
  color: #fff;
  background: var(--vp-header-bg);
  isolation: isolate;
}

/* The original header sat on a photographic backdrop. image-set lets the
   browser pick WebP where it can without a second request. */
.site-header::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: image-set(
    url('/img/header-backdrop-768.webp') type('image/webp'),
    url('/img/header-backdrop-768.jpg') type('image/jpeg')
  );
  background-position: center top;
  background-size: cover;
  content: '';
}

@media (min-width: 768px) {
  .site-header::before {
    background-image: image-set(
      url('/img/header-backdrop-1280.webp') type('image/webp'),
      url('/img/header-backdrop-1280.jpg') type('image/jpeg')
    );
  }
}

@media (min-width: 1400px) {
  .site-header::before {
    background-image: image-set(
      url('/img/header-backdrop-1920.webp') type('image/webp'),
      url('/img/header-backdrop-1920.jpg') type('image/jpeg')
    );
  }
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  padding-block: clamp(14px, 3vw, 34px);
}

.site-header__logo {
  width: clamp(56px, 8vw, 95px);
  height: auto;
  flex: none;
}

.site-header__name {
  color: var(--vp-name);
  font-size: clamp(17px, 3.1vw, 30px);
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.25;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.site-nav {
  background: var(--vp-nav-bg);
}

/* Only the block axis is reset here. The shorthand forms would also wipe the
   inline margin and padding this element inherits from .shell, unpinning the
   nav from the centred column on screens wider than the shell. */
.site-nav__list {
  display: flex;
  justify-content: center;
  padding-block: 0;
  margin-block: 0;
  gap: clamp(2px, 1.5vw, 10px);
  list-style: none;
}

.site-nav__link {
  display: block;
  padding: 16px clamp(12px, 2.4vw, 24px);
  color: var(--vp-nav-link);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 700;
  text-decoration: none;
  transition: color 150ms ease;
}

.site-nav__link:hover {
  color: var(--vp-nav-hover);
}

.site-nav__link[aria-current='page'] {
  color: var(--vp-nav-active);
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  display: grid;
  min-height: clamp(320px, 62vw, 840px);
  align-items: center;
  isolation: isolate;
}

.hero__slides {
  position: absolute;
  z-index: -1;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms ease;
}

.hero__slide[data-active] {
  opacity: 1;
}

/* <picture> is the img's parent, so it has to be stretched too — otherwise
   height:100% on the img has no resolved height to measure against and the
   slide falls back to the image's intrinsic ratio. */
.hero__slide picture,
.hero__slide img {
  width: 100%;
  height: 100%;
}

.hero__slide img {
  object-fit: cover;
}

.hero__tagline {
  color: var(--vp-tagline);
  font-size: clamp(22px, 3.9vw, 43px);
  font-style: italic;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.6);
}

/* The three knowledge-issue links sat over the top-left of the slideshow —
   left of the content column, not of the screen. Pinning them to the viewport
   edge would strand them far from everything else on a wide monitor. */
.hero__links {
  position: absolute;
  z-index: 1;
  top: clamp(12px, 2.5vw, 30px);
  left: 50%;
  display: grid;
  width: 100%;
  max-width: var(--vp-shell);
  gap: 10px;
  padding-inline: var(--vp-gutter);
  justify-items: start;
  transform: translateX(-50%);
}

.pill {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 100px;
  color: var(--vp-pill-text);
  background: var(--vp-pill);
  font-size: clamp(11px, 1.15vw, 13px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.pill:hover {
  color: #f9f9f9;
  background: var(--vp-pill-hover);
}

/* ----------------------------------------------------------- feature row */

.band {
  padding-block: clamp(36px, 6vw, 76px);
}

.band--green {
  background: var(--vp-band-green);
}

.band--cream {
  background: var(--vp-band-cream);
}

.band--sand {
  background: var(--vp-band-sand);
}

.band--mist {
  background: var(--vp-band-mist);
}

.band--warm {
  background: var(--vp-band-warm);
}

.feature {
  display: grid;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

@media (min-width: 900px) {
  .feature {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Which side the picture takes, matching the original page order. */
  .feature--image-end .feature__media {
    order: 2;
  }
}

.feature__media img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.feature__body {
  display: grid;
  gap: 14px;
}

.feature__heading {
  color: var(--vp-heading);
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.24;
}

.feature__heading--section {
  color: var(--vp-section);
  font-size: clamp(24px, 3.4vw, 40px);
}

.is-centered {
  justify-items: center;
  text-align: center;
}

/* ------------------------------------------------------------ prose tones */

.prose {
  display: grid;
  gap: 6px;
  font-size: clamp(15px, 1.45vw, 18px);
  line-height: 1.62;
}

.prose--compact {
  gap: 2px;
  line-height: 1.7;
}

.prose--grey {
  color: var(--vp-grey);
}

.prose--olive {
  color: var(--vp-olive);
}

.prose--leaf {
  color: var(--vp-leaf);
}

.prose--gold {
  color: var(--vp-gold);
}

.prose--strong {
  font-weight: 700;
}

.prose__gap {
  height: 0.75em;
}

.prose__subheading {
  color: inherit;
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.35;
}

/* The 十八界 rows: label, then six terms, with the sight term in red. */
.realms {
  display: grid;
  gap: 10px;
  color: var(--vp-brown);
  font-size: clamp(14px, 1.45vw, 18px);
  font-weight: 700;
  line-height: 1.62;
}

.realms__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}

.realms__label {
  margin-inline-end: 4px;
}

.realms em {
  color: var(--vp-red);
  font-style: normal;
}

/* The three "human cannot see" statements. */
/* Nested .wb-stl-highlight in the original beat the outer inline magenta, so
   these read gold at 22px on the live site. */
.claims {
  display: grid;
  gap: 6px;
  color: var(--vp-gold);
  font-size: clamp(15px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- button */

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  border-radius: 6px;
  color: #fff;
  background: var(--vp-button);
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.button:hover {
  background: var(--vp-button-hover);
}

/* --------------------------------------------------------------- pillars */

.pillars {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  padding-block: clamp(40px, 6vw, 82px);
}

@media (min-width: 780px) {
  .pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pillar {
  display: grid;
  gap: 16px;
  text-align: center;
}

/* Diagrams, not photographs: cropping them to a uniform box would cut labels
   off, so each keeps its own ratio and the column heights differ slightly. */
.pillar img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.pillar picture {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.pillar__heading {
  color: var(--vp-section);
  font-size: clamp(22px, 2.9vw, 34px);
  font-weight: 800;
  line-height: 1.3;
}

.pillar__lines {
  display: grid;
  gap: 2px;
  color: var(--vp-grey);
  font-size: clamp(13px, 1.2vw, 14px);
  line-height: 1.72;
}

.pillar__lines .is-highlight {
  color: var(--vp-gold);
  font-size: clamp(15px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.5;
}

/* --------------------------------------------------------------- contact */

.contact {
  display: grid;
  gap: clamp(20px, 3vw, 30px);
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(23, 50, 36, 0.12);
  border-radius: 22px;
  background: linear-gradient(145deg, #fff 0%, #f7faf4 100%);
  box-shadow: 0 16px 38px rgba(20, 43, 29, 0.1);
}

.contact__eyebrow {
  color: #19733a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.contact__heading {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.2;
}

.contact__intro {
  color: #52645a;
  font-size: 15px;
}

.contact__methods {
  display: grid;
  gap: 12px;
}

@media (min-width: 720px) {
  .contact__methods {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.contact__method {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(23, 50, 36, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.contact__method:hover {
  border-color: rgba(25, 115, 58, 0.35);
  box-shadow: 0 9px 20px rgba(20, 43, 29, 0.08);
  transform: translateY(-1px);
}

.contact__method span {
  color: #758178;
  font-size: 12px;
  font-weight: 700;
}

.contact__method strong {
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.45;
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contact__button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border: 1px solid rgba(25, 115, 58, 0.28);
  border-radius: 999px;
  color: #19733a;
  font-weight: 800;
  text-decoration: none;
}

.contact__button--primary {
  border-color: #19733a;
  color: #fff;
  background: #19733a;
}

.map-note {
  padding: clamp(22px, 4vw, 34px);
  border: 1px dashed rgba(23, 50, 36, 0.22);
  border-radius: 18px;
  color: var(--vp-ink);
  background: #f7faf4;
  text-align: center;
}

.map-note strong {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
}

/* ------------------------------------------------------------- knowledge */

.knowledge-intro {
  display: grid;
  gap: 10px;
  padding-block: clamp(28px, 4vw, 50px);
  text-align: center;
}

.knowledge-intro__title {
  color: var(--vp-heading);
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 800;
}

.knowledge-intro__subject {
  color: var(--vp-section);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.scans {
  display: grid;
  gap: 14px;
  padding-bottom: clamp(40px, 6vw, 80px);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.scan {
  display: block;
  padding: 0;
  border: 1px solid rgba(23, 50, 36, 0.12);
  border-radius: 10px;
  background: #fff;
  cursor: zoom-in;
  overflow: hidden;
}

.scan img {
  width: 100%;
  height: auto;
}

.issue-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding-bottom: clamp(40px, 6vw, 70px);
}

/* Lightbox for the scanned pages, replacing PhotoSwipe. */
.lightbox {
  padding: 0;
  border: 0;
  background: transparent;
}

.lightbox::backdrop {
  background: rgba(6, 12, 8, 0.92);
}

.lightbox[open] {
  position: fixed;
  display: grid;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  align-content: center;
  inset: 0;
}

.lightbox img {
  width: auto;
  max-width: 96vw;
  height: auto;
  max-height: 86dvh;
  margin-inline: auto;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  gap: 14px;
  color: #fff;
}

.lightbox__button {
  min-width: 46px;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 18px;
  cursor: pointer;
}

.lightbox__button:hover {
  background: rgba(255, 255, 255, 0.18);
}

.lightbox__count {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  position: relative;
  padding-block: clamp(34px, 5vw, 58px);
  color: #fff;
  background: var(--vp-footer-bg);
  isolation: isolate;
}

.site-footer::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: image-set(
    url('/img/footer-backdrop-768.webp') type('image/webp'),
    url('/img/footer-backdrop-768.jpg') type('image/jpeg')
  );
  background-position: center center;
  background-size: cover;
  opacity: 0.5;
  content: '';
}

@media (min-width: 768px) {
  .site-footer::before {
    background-image: image-set(
      url('/img/footer-backdrop-1280.webp') type('image/webp'),
      url('/img/footer-backdrop-1280.jpg') type('image/jpeg')
    );
  }
}

.site-footer__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
}

@media (min-width: 760px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

.site-footer__brand-en {
  font-size: clamp(18px, 2.2vw, 24px);
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.site-footer__brand-zh {
  margin-top: 6px;
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 700;
}

.site-footer__person {
  margin-bottom: 18px;
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 700;
}

.site-footer__list {
  display: grid;
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-footer__item {
  display: grid;
  align-items: start;
  gap: 12px;
  grid-template-columns: 24px minmax(0, 1fr);
  font-size: clamp(14px, 1.25vw, 15px);
  line-height: 1.6;
}

.site-footer__item svg {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  fill: currentColor;
}

.site-footer__item a {
  text-decoration: none;
}

.site-footer__item a:hover {
  text-decoration: underline;
}

.site-footer__legal {
  margin-top: clamp(26px, 4vw, 44px);
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

/* -------------------------------------------------------------- not found */

.notfound {
  display: grid;
  gap: 18px;
  padding-block: clamp(60px, 12vw, 140px);
  justify-items: center;
  text-align: center;
}

.notfound__code {
  color: var(--vp-section);
  font-size: clamp(48px, 10vw, 96px);
  font-weight: 800;
  line-height: 1;
}

.notfound__title {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
}

.notfound__text {
  max-width: 46ch;
  color: #52645a;
}