/* ==========================================================================
   ehyong.com  ·  Glass & Acrylic illustration system  ·  TRANSPARENT EDITION
   --------------------------------------------------------------------------
   Loaded by every public content page. Every selector is prefixed .ga- so it
   cannot reach into an existing component, and the file defines no element
   selectors and no global resets.

   THE DETAIL THAT DRIVES THIS FILE

   All 29 illustrations were SUPPLIED relit for black: RGB, no alpha, and a
   background measured at exactly rgb(0,0,0) on every edge of every file. The
   supplier's instruction was to present them on #000, with no white card, no
   frame, no backdrop blur and no blend mode.

   They no longer carry that background. Every AVIF, WebP and PNG in the set
   has been keyed to transparency and regraded, so the constraint the supplier
   was working around is gone and the artwork composites onto any colour.

   The set was supplied rendered on pure black, and this site is not #000:
   style.css paints #050505 and geo-page.css paints #070707. The original
   build solved that by feathering the image edges into the page with a mask,
   which dissolved the boundary without ever removing the black.

   THE ARTWORK NOW CARRIES A REAL ALPHA CHANNEL. The black was keyed out and
   the palette relit for a quieter, lighter read (see tools/glass_relight.py
   for how the matte was built and why a plain luminance key would have
   punched holes through the glass). So the page colour shows through the
   artwork properly, on any background, and the feather mask has been removed:
   it is now redundant on twenty-five of the masters and actively destructive
   on the other four, whose artwork reaches the frame edge.

   There is still no border, radius or shadow on the mount. Each of those
   would draw a rectangle around artwork that no longer has one.

   The masters are 1536x1024, exactly 3:2, so aspect-ratio:3/2 with
   object-fit:contain fits them edge to edge with no letterboxing. contain is
   still declared: it guarantees a future image of another ratio is fitted
   rather than cropped through the glass.

   ONE EXCEPTION — .ga-mount--paper
   The Smart Investor pencil illustration is a documentary asset on white
   magazine paper, not part of this set and not relit for black. It keeps the
   light mount it needs. See the press key visual at the end of this file.
   ========================================================================== */

.ga-scope,
:root {
  --ga-gap: clamp(2rem, 5vw, 4.5rem);
  --ga-feather: 2%;           /* unused since the set gained real alpha; kept
                                 declared so any stale reference still resolves */

  /* Retained for the press key visual only — the one image still on paper. */
  --ga-paper: #fefefe;
  --ga-paper-radius: 22px;
  --ga-paper-ring: rgba(255, 255, 255, .10);
  --ga-paper-shadow: 0 22px 64px rgba(0, 0, 0, .46);
}

/* ── The mount ───────────────────────────────────────────────────────────── */

.ga-mount {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;          /* reserves the box before the image loads */
  /* No background, border, radius or shadow. The artwork has a real alpha
     channel now, so any of those would draw a rectangle around a shape that
     does not have one. */
}

.ga-mount img,
.ga-mount picture {
  display: block;
  width: 100%;
  height: 100%;
}

.ga-mount img {
  object-fit: contain;          /* never crop or stretch the glass */
  object-position: center;

  /* THE EDGE FEATHER IS GONE, and removing it was required, not optional.
     It existed to dissolve the boundary of an opaque black rectangle into a
     near-black page. The set now carries a real alpha channel, so there is no
     rectangle to dissolve and the page colour already shows through exactly
     where it should.

     Left in place the mask would have started cutting the artwork itself.
     Measured on the relit masters: four of the twenty-nine have solid artwork
     inside the 2% band, reaching alpha 254 and 255. hero-style-lab is the
     clearest case, its outermost card sits against the frame, and the mask
     would have faded that card away to nothing.

     --ga-feather is kept declared so any sheet still referencing it resolves,
     but nothing consumes it now. */
}

/* The bloom that used to sit behind the mount is gone. It existed to stop a
   white panel looking pasted onto the dark page; behind black artwork that has
   been relit with its own internal reflections it would read as a halo, and
   the supplier's note rules out added glow effects. */
.ga-figure {
  position: relative;
  margin: 0;
}

.ga-figure figcaption {
  margin-top: 14px;
  color: var(--text-dim, var(--muted, rgba(248, 244, 238, .68)));
  font-size: .82rem;
  line-height: 1.6;
}

/* ── Hero: text and artwork side by side ─────────────────────────────────── */

.ga-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: var(--ga-gap);
  align-items: center;
}

/* The template sizes its H1 at clamp(2.5rem, 7vw, 5.8rem) — correct for a
   full-bleed hero, far too large once the copy occupies half the width. Left
   alone, "Turn AI adoption into a usable team workflow." breaks over six lines
   and the hero reads as broken rather than bold. This re-scales the display
   type to the column it now lives in, and only inside a split hero, so the
   full-width heroes elsewhere on the site are untouched. */
.ga-hero-grid h1 {
  font-size: clamp(2.05rem, 4.3vw, 4.05rem);
  max-width: none;
}

.ga-hero-grid .lede { max-width: 54ch; }

/* Chinese sets denser and without word spaces, so it tolerates — and needs —
   slightly more size at the same measure. */
html[lang^="zh"] .ga-hero-grid h1 { font-size: clamp(1.95rem, 3.9vw, 3.7rem); }

/* Same reasoning one level down: a section H2 beside an illustration has about
   a third of the page, not all of it. */
.ga-band-copy h2 { font-size: clamp(1.6rem, 2.9vw, 2.6rem); }
.ga-mark-copy h2 { font-size: clamp(1.45rem, 2.5vw, 2.2rem); }

/* Text stays first in the DOM. That keeps the reading and tab order right,
   and means the mobile stack below needs no order juggling. */
.ga-hero-grid > .ga-figure { align-self: center; }

/* ── Section band: one illustration leading a group of cards ─────────────── */

.ga-band {
  display: grid;
  /* The section lead is secondary to the copy it introduces: roughly a third
     of the row, not the half that .82fr gave it. At the previous ratio a short
     Chinese heading like 团队将学会什么 was dwarfed by the picture beside it. */
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.ga-band.ga-band--flip { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
.ga-band.ga-band--flip > .ga-figure { order: 2; }

.ga-band-copy > :first-child { margin-top: 0; }
.ga-band-copy > :last-child { margin-bottom: 0; }

/* ── Mark: a small illustration beside a section heading ─────────────────── */
/* For sections where a full picture would be too much — an FAQ block, say.
   The brief is explicit that a large image must not appear beside every FAQ
   answer, and this is the size that lets such a section carry artwork at all. */

.ga-mark {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 26px);
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.ga-mark .ga-figure { flex: 0 0 clamp(108px, 16vw, 164px); }
/* No radius or drop shadow here either. Both were set when this mount held an
   opaque rectangle. Against a transparent PNG a box-shadow paints a hard
   rectangular shadow around empty space, which is worse than no shadow at all. */
.ga-mark .ga-mount { border-radius: 0; box-shadow: none; }
.ga-mark .ga-mark-copy > :first-child { margin-top: 0; }
.ga-mark .ga-mark-copy > :last-child { margin-bottom: 0; }
.ga-mark .ga-figure::before { inset: -18% -14% -22%; }

/* ── Plate: one illustration opening a section, above its heading ───────── */
/* Used where a section already runs its own two-column split, so dropping a
   band in beside the heading would fight the layout that is already there. */

.ga-plate {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  max-width: 720px;              /* a page's assigned illustration, given room */
}

/* A section lead rather than a page hero. Deliberately modest: a 3:2 image at
   full container width stands over 500px tall, which would push the heading it
   is introducing most of the way down the viewport. */
.ga-plate.ga-plate--sm { max-width: 460px; }

/* Centred, for a section whose copy is itself centred. */
.ga-plate.ga-plate--center { margin-inline: auto; }

/* Mark-sized plate: used where a section already runs its own CSS grid, so the
   illustration is inserted before that grid rather than inside it. Dropping a
   figure into .method-grid / .legacy-home-grid / .faq-container would make it
   a grid ITEM and silently break a two-column layout into three. */
.ga-plate.ga-plate--mark { max-width: 180px; }
.ga-plate.ga-plate--mark .ga-mount { border-radius: 0; box-shadow: none; }

@media (max-width: 900px) {
  .ga-plate,
  .ga-plate.ga-plate--sm { max-width: 520px; margin-inline: auto; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .ga-hero-grid,
  .ga-band,
  .ga-band.ga-band--flip {
    grid-template-columns: 1fr;
    gap: clamp(1.6rem, 6vw, 2.4rem);
  }

  /* Order is reset so the flipped variant does not leave the picture above the
     copy on a phone. The message and its CTA come first; the illustration
     follows. An oversized image block at the top of a small screen pushes the
     point of the page below the fold, which is the failure this guards. */
  .ga-band.ga-band--flip > .ga-figure { order: 0; }

  .ga-hero-grid > .ga-figure,
  .ga-band > .ga-figure {
    max-width: 520px;
    width: 100%;
  }
}

@media (max-width: 560px) {
  /* The phone breakpoint used to add a radius and a drop shadow, on the theory
     that a small opaque rectangle needs an edge to sit on. The artwork is
     transparent now, so both would frame empty space. The paper mount below
     keeps its own, because that one really is a card. */

  /* Below this width a side-by-side mark leaves roughly 40% of a line for the
     heading, which wraps it to four or five lines. It stacks instead. */
  .ga-mark { display: block; }
  .ga-mark .ga-figure {
    width: clamp(112px, 34vw, 150px);
    margin-bottom: 18px;
  }
}

/* ── Preferences ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ga-mount, .ga-figure { transition: none; }
}

@media print {
  .ga-figure::before { display: none; }
  .ga-mount { box-shadow: none; border-color: rgba(0, 0, 0, .18); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Press key visual — the Smart Investor pencil illustration
   ══════════════════════════════════════════════════════════════════════════
   The same mount idiom as the glass artwork, and for the same reason: this is
   a pencil drawing on white magazine paper, so it needs a white surface under
   it or it reads as a broken image on the near-black page. Because it came
   from a magazine rather than from this studio, it carries a visible credit
   line — in the figcaption, not only in alt text, so the attribution is
   readable by a person looking at the page and survives being screenshotted.
   ========================================================================== */

/* The paper mount. The ONLY image on the site that still uses it is the
   Smart Investor pencil illustration: a documentary asset, drawn on white
   magazine paper, supplied by the magazine and not relit for black. It keeps
   the white panel, the hairline and the shadow — without them a white scan on
   a near-black page reads as a broken image.

   It also explicitly re-declares the mask as none, so it cannot inherit the
   edge feathering that the black artwork depends on. Feathering a white
   rectangle would fade its corners into the dark page and make the drawing
   look torn. */
.ga-mount--paper {
  background: var(--ga-paper);
  border: 1px solid var(--ga-paper-ring);
  border-radius: var(--ga-paper-radius);
  box-shadow: var(--ga-paper-shadow);
  overflow: hidden;
}

.ga-mount--paper img {
  -webkit-mask-image: none;
  mask-image: none;
}

.ga-mount--portrait {
  aspect-ratio: 1000 / 1300;     /* the drawing's own proportion */
}

/* The homepage #about band is the site's one CREAM section (#f7f2ea), and it
   is the only place a black illustration would land on a light surface. It
   keeps the WHITE edition of hero-home on a paper mount instead — which is
   what "black background only" means in practice: swap the artwork where the
   backdrop is black, and leave it where the backdrop is not.

   A #FEFEFE panel on #f7f2ea is a seven-value difference, so the hairline and
   shadow do the work here: the result reads as a deliberate white card resting
   on cream, not as a mismatched fill. */
.ga-mount--paper.ga-mount--wide { aspect-ratio: 3 / 2; }

.ga-keyvisual {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.ga-keyvisual-art { max-width: 340px; }

.ga-keyvisual-copy > :first-child { margin-top: 0; }
.ga-keyvisual-copy h2 { font-size: clamp(1.6rem, 2.9vw, 2.6rem); }

.ga-credit {
  margin: 0 0 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line, rgba(214, 174, 103, .22));
  color: var(--text-dim, var(--muted, rgba(248, 244, 238, .68)));
  font-size: .84rem;
  line-height: 1.65;
}

.ga-credit strong { color: var(--text, #f8f4ee); font-weight: 600; }

@media (max-width: 900px) {
  .ga-keyvisual { grid-template-columns: 1fr; gap: 2rem; }
  .ga-keyvisual-art { max-width: 280px; margin-inline: auto; }
}