/* =====================================================================
   ClinicOS — Chapter 05「經營」

   Page-scoped under .mg, plus the Website V2 navigation scoped to

/* --- Type ------------------------------------------------------------ */
.mg .mg-h1 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(3rem, 1.8rem + 5.4vw, 6.5rem);
  line-height: 1.16;
  letter-spacing: 0.16em;
  color: var(--mg-ink);
}
.mg .mg-h3 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  line-height: 1.4;
  color: var(--mg-ink);
}
.mg .mg-lead {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.95;
  color: var(--mg-ink-soft);
  text-wrap: pretty;
}
.mg .mg-body {
  font-size: clamp(0.9375rem, 0.9rem + 0.24vw, 1rem);
  line-height: 1.9;
  color: var(--mg-body);
  text-wrap: pretty;
}
.mg .eyebrow { color: var(--mg-mute); }

.mg .media--screen {
  border-radius: 6px;
  background: var(--c-paper-raised);
  box-shadow:
    0 1px 1px rgba(26, 59, 50, 0.04),
    0 8px 20px -12px rgba(26, 59, 50, 0.16),
    0 24px 60px -28px rgba(26, 59, 50, 0.20),
    inset 0 0 0 1px var(--mg-line-soft);
}

/* --- Navigation (fifth copy; see file header) ------------------------- */

/* --- Hero ------------------------------------------------------------- */
.mg-hero {
  padding-top: calc(var(--header-h) + clamp(2rem, 1.2rem + 3.2vw, 4rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.mg-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  align-items: center;
}
.mg-hero__copy { grid-column: 1 / -1; }
.mg-hero__figure { grid-column: 1 / -1; }
.mg-hero__title { margin-top: clamp(1rem, 0.8rem + 1vw, 1.75rem); }
.mg-hero__claim {
  margin-top: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1.5;
  color: var(--mg-ink);
}
.mg-hero__lead { margin-top: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); max-width: 18em; }
@media (min-width: 1000px) {
  .mg-hero__copy { grid-column: 1 / 6; }
  .mg-hero__figure { grid-column: 6 / 13; margin-right: calc(var(--grid-gutter) * -1); }
}

/* ---------------------------------------------------------------------
   The run of six — a magazine rhythm, not a grid of six equal tiles.

     01  full-width plate + the sentence set large
     02  two columns, on beige
     03
     04  full-bleed plate, the widest thing on the page
     05  two columns, back on paper
     06
     收束

   Big, small, big, small, close. The runtime is the subject throughout;
   what changes is how much room it is given and how loud the words next
   to it are.
   --------------------------------------------------------------------- */

/* Shared item furniture ------------------------------------------------ */
.mg-item__num {
  font-family: var(--ff-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.24em;
  color: var(--mg-mute);
}
.mg-item__title { margin-top: clamp(0.6rem, 0.5rem + 0.5vw, 1rem); }
.mg-item__line { margin-top: clamp(0.7rem, 0.6rem + 0.6vw, 1.1rem); max-width: 26em; }

/* 01 — the opening spread --------------------------------------------- */
.mg-open { padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem) clamp(4.5rem, 3rem + 6vw, 9rem); }
.mg-open__head { max-width: 28em; }
.mg-open__title {
  margin-top: clamp(0.6rem, 0.5rem + 0.5vw, 1rem);
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  line-height: 1.28;
}
.mg-open__figure { margin-top: clamp(2rem, 1.5rem + 2.4vw, 3.5rem); }
.mg-open__figure .media { aspect-ratio: 16 / 10; }
/* the sentence is the pull-quote of the chapter, not a caption */
.mg-open__say {
  margin-top: clamp(2.5rem, 1.8rem + 3.4vw, 4.5rem);
  font-family: var(--ff-brand-slogan);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
  line-height: 1.6;
  color: var(--mg-ink);
  max-width: 20em;
}
@media (min-width: 1000px) { .mg-open__say { margin-left: 16.666%; } }

/* 02+03 and 05+06 — the two-column spreads ---------------------------- */
.mg-pair { padding-block: clamp(4rem, 2.6rem + 5vw, 7.5rem); }
.mg-pair--beige { background: var(--c-paper-sunken); }
.mg-pair__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 2rem + 4vw, 5rem) clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
}
@media (min-width: 900px) { .mg-pair__grid { grid-template-columns: 1fr 1fr; } }
.mg-item__figure { margin-top: clamp(1.25rem, 1rem + 1.2vw, 2rem); }
.mg-item__figure .media { aspect-ratio: 16 / 10; }
/* the second column drops a little, so the spread reads as a spread
   rather than as two tiles stamped side by side */
@media (min-width: 900px) {
  .mg-pair__grid > .mg-item:nth-child(2) { margin-top: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); }
}

/* 04 — the full-bleed plate ------------------------------------------- */
.mg-plate {
  background: #E7EDE9;
  padding-block: clamp(4rem, 2.6rem + 5vw, 7.5rem);
  overflow: hidden;
}
.mg-plate__head { max-width: 30em; }
.mg-plate__title {
  margin-top: clamp(0.6rem, 0.5rem + 0.5vw, 1rem);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  line-height: 1.3;
}
.mg-plate__line { margin-top: clamp(0.8rem, 0.7rem + 0.7vw, 1.25rem); max-width: 30em; }
/* wider than the text column: the plate runs past the page gutter */
.mg-plate__figure {
  margin-top: clamp(2.5rem, 1.8rem + 3.4vw, 4.5rem);
  padding-inline: clamp(12px, 2.4vw, 40px);
}
.mg-plate__figure .media { aspect-ratio: 16 / 10; }
@media (min-width: 1200px) {
  .mg-plate__figure { padding-inline: clamp(40px, 6vw, 110px); }
}

/* --- Ending ----------------------------------------------------------- */
.mg-end {
  background: var(--c-paper-sunken);
  padding-block: clamp(3.5rem, 2.4rem + 4.4vw, 6rem);
}
.mg-end--beige { background: var(--c-paper-sunken); }
.mg-end__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  align-items: center;
}
@media (min-width: 900px) { .mg-end__grid { grid-template-columns: 1.1fr 1fr auto; } }
.mg-end__line {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.625rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1.45;
  color: var(--mg-ink);
}
.mg-end__note { max-width: 22em; }
@media (max-width: 599px) { .mg-end__grid .btn { width: 100%; } }

/* --- Source note ------------------------------------------------------ */
.mg-source { padding-block: clamp(2.5rem, 1.8rem + 2.6vw, 4rem); }
.mg-source__text {
  max-width: 40em;
  font-size: var(--fs-meta);
  line-height: 1.9;
  color: var(--mg-mute);
  padding-top: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  border-top: 1px solid var(--mg-line-soft);
}

/* --- Phones ----------------------------------------------------------- */
@media (max-width: 599px) {
  /* crop instead of scaling, so the numbers stay readable — the same
     treatment chapters 02–04 use */
  .mg-cell__figure .media { aspect-ratio: 1 / 1; --media-pos: 8% center; }
}

/* --- Motion ----------------------------------------------------------- */
.mg [data-reveal] .media > picture > img {
  transform: scale(1.012);
  transition: transform 1400ms var(--ease-editorial);
}
.mg [data-reveal].is-in .media > picture > img { transform: scale(1); }
.no-js .mg [data-reveal] .media > picture > img { transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .mg [data-reveal] .media > picture > img,
  .mg [data-reveal].is-in .media > picture > img { transform: none; transition: none; }
}

/* =====================================================================
   PACK 2-D — hero

   Words on the left of a narrow column, then a single real runtime that
   runs off the right edge of the page. No device mockup: the evidence is
   the screen itself, cropped by the window rather than framed by a
   laptop. Deliberately not the home page's band, and not a 50/50 split.
   ===================================================================== */
.mg-hero { overflow-x: clip; padding-block: calc(var(--header-h) + clamp(2rem, 1.2rem + 3.2vw, 4rem)) 0; min-height: 0; display: block; }
.mg-hero__grid { display: block; }
.mg-hero__copy { max-width: 32em; }
.mg-hero__proof {
  margin: clamp(2.5rem, 1.8rem + 3.4vw, 4.5rem) 0 0 auto;
  width: min(96%, 1180px);
  padding-left: var(--grid-gutter);
}
.mg-hero__proof .media { aspect-ratio: 16 / 10; border-radius: 6px 0 0 6px; }
@media (min-width: 1000px) {
  .mg-hero__copy { padding-left: 0; }
  /* the frame leaves the page on the right, so it reads as a window on
     something larger rather than as a picture placed on a slide */
  .mg-hero__proof { width: min(78%, 1180px); margin-right: calc(var(--grid-gutter) * -1); }
}
@media (max-width: 599px) {
  .mg-hero__proof { width: 100%; padding-left: 0; }
  .mg-hero__proof .media { aspect-ratio: 1 / 1; --media-pos: 8% center; border-radius: 6px; }
}