/* ==========================================================================
   Linh Hua: About ("the Handbook": the written voice of the studio).
   About-only. Everything is scoped under body.about so the shared kit
   (styles.css: header, footer, buttons, tokens, focus rings) stays as is;
   the shared .page-hero is not used here. Studio surfaces, mark ink and
   the ease-out mirror the approved homepage (home.css) and Courses.
   ========================================================================== */

body.about {
  --a-ease: cubic-bezier(0.23, 1, 0.32, 1);           /* home.css --ease-out */
  --a-field: #f8f8fd;                                 /* home.css --home-hero-field-1 */
  --a-paper: #f6f7fb;                                 /* --paper */
  --a-sheet: #fbfbfe;                                 /* home.css --hh-panel */
  --a-edge: rgba(74, 56, 176, 0.13);                  /* the sheet's hairline edge */
  --a-rule: rgba(74, 56, 176, 0.16);                  /* head rule, measure bracket */
  --a-grid: rgba(74, 56, 176, 0.07);
  --a-mark: rgba(74, 56, 176, 0.42);                  /* trim and registration marks */
  --a-shaft: rgba(124, 111, 255, 0.14);
  --a-head: rgba(20, 22, 31, 0.72);                   /* running head */
  --a-text-muted: #565c70;                            /* home.css --home-hero-text-muted */
  --a-sheet-shadow: none;
  --a-step: 97px;
  background: var(--a-paper);
}

:root[data-theme="dark"] body.about {
  --a-field: #131833;
  --a-paper: #0d111d;
  --a-sheet: #10152a;                                 /* home.css dark --hh-panel */
  --a-edge: rgba(160, 148, 255, 0.16);
  --a-rule: rgba(176, 164, 255, 0.22);
  --a-grid: rgba(160, 148, 255, 0.07);
  --a-mark: rgba(186, 176, 255, 0.58);                /* a little brighter on navy */
  --a-shaft: rgba(124, 111, 255, 0.2);
  --a-head: rgba(255, 255, 255, 0.78);
  --a-text-muted: var(--muted);
  --a-sheet-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* The shared ambient layers (styles.css: the fixed film grain on html, and
   the glow + pattern behind the first 900px of body) sit under every
   transparent section but not under the opaque opening sheet, so they would
   draw a seam where the hero ends. About draws its own studio surfaces
   instead, continuous from the hero into the preface. */
html:has(> body.about)::before,
body.about::before,
body.about::after { display: none; }

body.about ::selection { background: rgba(91, 77, 251, 0.22); }
:root[data-theme="dark"] body.about ::selection { background: rgba(160, 148, 255, 0.32); }

/* ---------- Motion: the shared .reveal, visible by default (the shared one
   hides content without JS) and on the homepage curve: a 10px rise over
   420ms, once, only when motion is allowed. ---------- */
body.about .reveal { opacity: 1; transform: none; transition: none; }
html.motion-ok body.about .reveal {
  transition: opacity 420ms var(--a-ease), transform 420ms var(--a-ease);
}
html.motion-ok body.about .reveal:not(.visible) { opacity: 0; transform: translateY(10px); }

/* ==========================================================================
   Opening sheet (hero)
   ========================================================================== */
.about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 56px 0 72px;
  background:
    radial-gradient(900px 600px at 8% -10%, var(--a-shaft), transparent 62%),
    linear-gradient(180deg, var(--a-field), var(--a-paper));
}

/* The studio table under the sheet: the drafting grid, quieter than Courses. */
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--a-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--a-grid) 1px, transparent 1px);
  background-size: var(--a-step) var(--a-step);
  background-position: 0 calc(var(--a-step) / 2), max(24px, calc(50% - 556px)) 0;
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 90% at 50% 40%, #000 40%, transparent 100%);
}

/* The sheet: a typeset page lying on the studio table. Its top edge is
   where the bookmark folds over, so the edge itself is drawn, not implied. */
.about-sheet {
  --pad-x: 72px;
  --pad-top: 40px;
  --bm-w: 120px;                                      /* bookmark image box width */
  position: relative;
  padding: var(--pad-top) var(--pad-x) 80px;
  background: var(--a-sheet);
  border: 1px solid var(--a-edge);
  box-shadow: var(--a-sheet-shadow);
}

/* Printer's trim marks: short rules outside each corner, off the sheet. */
.about-trim {
  position: absolute;
  inset: -1px;
  pointer-events: none;
}
.about-trim::before,
.about-trim::after {
  content: "";
  position: absolute;
  inset: -22px;
  --m: var(--a-mark);
  background:
    linear-gradient(var(--m), var(--m)) left 22px top 0 / 1px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) left 0 top 22px / 14px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) left 22px bottom 0 / 1px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) left 0 bottom 22px / 14px 1px no-repeat;
}
.about-trim::after { transform: scaleX(-1); }       /* the right-hand pair, mirrored */

/* Running head: plain text on the head rule at the top of the sheet. */
.about-runhead {
  margin: 0 0 96px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--a-rule);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0.01em;
  color: var(--a-head);
  /* The head rule stops short of the bookmark's column. */
  margin-right: calc(var(--bm-w) * 0.9);
}

.about-title {
  margin: 0;
  max-width: 11.5ch;
  font-size: clamp(2.35rem, 6.1vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: var(--text);
  text-wrap: balance;
}

/* The title is set as two deliberate lines. Each line keeps itself whole, so
   the fallback font and the web font break it the same way and nothing
   below shifts when the font arrives. */
.about-title-line { display: block; white-space: nowrap; }

/* The supporting sentence, set on a measured column to the right of the
   title's start: a short measure bracket shows the measure it sits on. */
.about-lede {
  position: relative;
  margin: 64px 0 0 41.5%;
  max-width: 34ch;
  padding-top: 22px;
  font-size: 1.2rem;
  line-height: 32px;
  color: var(--a-text-muted);
  text-wrap: pretty;
}
.about-lede::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 9px;
  pointer-events: none;
  background:
    linear-gradient(var(--a-rule), var(--a-rule)) left 0 top 4px / 100% 1px no-repeat,
    linear-gradient(var(--a-mark), var(--a-mark)) left top / 1px 9px no-repeat,
    linear-gradient(var(--a-mark), var(--a-mark)) right top / 1px 9px no-repeat;
}

/* ==========================================================================
   The bookmark: one satin ribbon tucked under the sheet's top edge and
   folded over it. The file carries alignment: the sheet edge sits at 7.15%
   of the image height, so the box is lifted by that much to meet the edge.
   ========================================================================== */
.about-bookmark {
  position: absolute;
  right: calc(var(--pad-x) * 0.5);
  top: calc(var(--bm-w) * 3.75 * -0.0715);
  width: var(--bm-w);
  aspect-ratio: 640 / 2400;
  pointer-events: none;
  user-select: none;
}
.about-art { position: absolute; inset: 0; }
.about-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.about-art img:not([src]) { visibility: hidden; }
.about-art .art-dark { opacity: 0; transition: opacity 240ms var(--a-ease); }
.about-art[data-art="dark"] .art-dark,
.about-art[data-art="both"] .art-dark { opacity: 1; }
.about-art[data-art="dark"] .art-light { opacity: 0; }
/* The bookmark fades in once when its file is ready, so it never pops in. */
html.motion-ok .about-art { transition: opacity 300ms var(--a-ease); }
html.motion-ok .about-art:not(.is-ready) { opacity: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .about-sheet { --pad-x: 56px; --bm-w: 104px; }
  .about-runhead { margin-bottom: 80px; }
  .about-lede { margin-left: 36%; }
}

@media (max-width: 1023px) {
  .about-hero { padding: 48px 0 64px; }
  .about-sheet { --pad-x: 48px; --bm-w: 96px; padding-bottom: 64px; }
  .about-runhead { margin-bottom: 72px; }
  .about-title { max-width: calc(100% - var(--bm-w) * 0.75); }
  .about-lede { margin-left: 24%; font-size: 1.12rem; line-height: 30px; }
}

@media (max-width: 819px) {
  .about-sheet { --pad-x: 36px; --bm-w: 72px; padding-bottom: 56px; }
  .about-runhead { margin-bottom: 64px; }
  /* The title keeps clear of the bookmark's column and stays the dominant element. */
  .about-title { max-width: calc(100% - var(--bm-w) * 0.75); font-size: clamp(2.4rem, 7vw, 3.2rem); }
  .about-lede { margin: 48px 0 0 14%; }
}

/* Phones: the screen is the page. The sheet runs edge to edge, the trim
   marks keep only the left pair (the bookmark tab owns the top-right
   corner), and the bookmark becomes a short tab entering from the top edge:
   the same file, its top half (the fold) cropped away. */
@media (max-width: 599px) {
  .about-hero { padding: 0 0 48px; background: var(--a-sheet); }
  .about-hero::before { display: none; }
  .about-hero > .container { padding: 0; }
  .about-sheet {
    --pad-x: 24px;
    --bm-w: 64px;
    --pad-top: 28px;
    padding: var(--pad-top) var(--pad-x) 32px;
    border: 0;
    border-bottom: 1px solid var(--a-edge);
    box-shadow: none;
  }
  .about-trim { inset: 12px 12px auto 12px; height: 14px; }
  .about-trim::before { inset: 0; background:
    linear-gradient(var(--a-mark), var(--a-mark)) left top / 1px 14px no-repeat,
    linear-gradient(var(--a-mark), var(--a-mark)) left top / 14px 1px no-repeat; }
  .about-trim::after { display: none; }
  .about-runhead { margin: 0 0 72px; margin-right: calc(var(--bm-w) * 0.95); }
  .about-title { max-width: none; font-size: clamp(2.35rem, 10.6vw, 3rem); line-height: 1.02; }
  .about-lede { margin: 40px 0 0; max-width: 34ch; font-size: 1.06rem; line-height: 28px; padding-top: 18px; }
  .about-bookmark {
    right: 20px;
    top: 0;
    height: calc(var(--bm-w) * 3.75 * 0.5);
    aspect-ratio: auto;
    overflow: hidden;
  }
  .about-art { inset: auto 0 0 0; height: calc(var(--bm-w) * 3.75); }
}

@media (max-width: 400px) {
  .about-sheet { --bm-w: 56px; }
  .about-bookmark { right: 16px; }
}

@media (max-width: 359px) {
  .about-trim { display: none; }
  .about-title-line { display: inline; white-space: normal; }
}

/* ==========================================================================
   Preface ("Our story"): the next page after the opening sheet. No sheet,
   no card: it sits on the same studio paper. The heading takes the margin
   column under the title's left edge; the text takes the column the hero's
   supporting sentence sits on, so both pages share one measure.
   ========================================================================== */
.about-preface { padding: 56px 0 112px; }

.about-preface-inner {
  --pad-x: 72px;                                      /* the opening sheet's side padding */
  --col: 41.5%;                                       /* the hero lede's column start */
  display: grid;
  grid-template-columns: var(--col) minmax(0, 1fr);
  align-items: start;
  margin: 0 calc(var(--pad-x) + 1px);
  padding-top: 40px;
  border-top: 1px solid var(--a-rule);
}

.about-preface-title {
  margin: 0;
  padding-top: 6px;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--text);
}

.about-preface-text p {
  margin: 0;
  max-width: 31.5rem;
  font-size: 1.075rem;
  line-height: 1.72;
  color: var(--a-text-muted);
  text-wrap: pretty;
}
.about-preface-text .about-preface-lead {
  max-width: 37.5rem;
  margin-bottom: 36px;
  font-size: 1.3rem;
  line-height: 1.62;
  letter-spacing: -0.005em;
  color: var(--text);
}

@media (max-width: 1100px) {
  .about-preface-inner { --pad-x: 56px; --col: 36%; }
  .about-preface-text .about-preface-lead { font-size: 1.24rem; }
}

/* Tablet: the heading moves above the text and the column eases toward
   the centre, keeping the measure. */
@media (max-width: 1023px) {
  .about-preface { padding: 48px 0 96px; }
  .about-preface-inner { --pad-x: 48px; grid-template-columns: minmax(0, 1fr); padding-top: 36px; }
  .about-preface-title { padding: 0; margin-bottom: 28px; }
  .about-preface-text { margin-left: 12%; }
}

@media (max-width: 819px) {
  .about-preface-inner { --pad-x: 36px; }
  .about-preface-text { margin-left: 0; }
  .about-preface-text .about-preface-lead { font-size: 1.2rem; margin-bottom: 32px; }
}

/* Phones: a near full-width reading column on the sheet's 24px gutter. */
@media (max-width: 599px) {
  /* The screen is the page: the preface continues on the sheet, and the
     sheet's bottom rule above is the page turn (no second rule). */
  .about-preface { padding: 8px 0 72px; background: var(--a-sheet); }
  .about-preface-inner { margin: 0; padding-top: 0; border-top: 0; }
  .about-preface-title { font-size: 1.45rem; margin-bottom: 20px; }
  .about-preface-text p { font-size: 1.0625rem; line-height: 1.7; }
  .about-preface-text .about-preface-lead { font-size: 1.15rem; line-height: 1.6; margin-bottom: 26px; }
}

@media (max-width: 359px) {
  .about-preface-text .about-preface-lead { font-size: 1.1rem; }
}

/* ==========================================================================
   Chapters: the two principles as a paired editorial spread, after the
   preface. One shared top rule over both, a single hairline in the gutter,
   no boxes. Same structure on both sides whatever their length.
   ========================================================================== */
.about-chapters { padding: 0 0 120px; }

.about-chapters-inner {
  --pad-x: 72px;                                      /* the opening sheet's side padding */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 112px;
  margin: 0 calc(var(--pad-x) + 1px);
  padding-top: 44px;
  border-top: 1px solid var(--a-rule);
}
/* The gutter rule: a hairline between the two chapters, inset from the top rule. */
.about-chapters-inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44px;
  bottom: 4px;
  width: 1px;
  background: var(--a-rule);
  pointer-events: none;
}

/* Both chapters share the title row, so their sentences start level even
   when one title wraps and the other does not. */
.about-chapter { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; }

.about-chapter-title {
  margin: 0 0 18px;
  align-self: end;
  max-width: 14ch;
  font-size: clamp(1.85rem, 2.6vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--text);
  text-wrap: balance;
}
.about-chapter p {
  margin: 0;
  max-width: 30rem;
  font-size: 1.075rem;
  line-height: 1.72;
  color: var(--a-text-muted);
  text-wrap: pretty;
}

@media (max-width: 1100px) {
  .about-chapters-inner { --pad-x: 56px; column-gap: 96px; }
}

/* Tablet down: the chapters stack deliberately; a quiet horizontal rule
   takes the place of the gutter rule. */
@media (max-width: 1023px) {
  .about-chapters { padding-bottom: 96px; }
  .about-chapters-inner { --pad-x: 48px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-top: 36px; }
  .about-chapter { display: block; grid-row: auto; }
  .about-chapters-inner::before { display: none; }
  .about-chapter + .about-chapter { margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--a-rule); }
  .about-chapter-title { max-width: none; }
  .about-chapter p { max-width: 31.5rem; }
}

@media (max-width: 819px) {
  .about-chapters-inner { --pad-x: 36px; }
}

/* Phones: still on the sheet, full readable width. */
@media (max-width: 599px) {
  .about-chapters { padding-bottom: 72px; background: var(--a-sheet); }
  .about-chapters-inner { margin: 0; padding-top: 28px; }
  .about-chapter-title { font-size: 1.6rem; margin-bottom: 14px; }
  .about-chapter p { font-size: 1.0625rem; line-height: 1.7; }
  .about-chapter + .about-chapter { margin-top: 28px; padding-top: 28px; }
}

/* ==========================================================================
   Closing endpaper: the last sheet of the handbook. A slightly denser,
   violet-tinted surface (deepest navy in dark) that ends the reading
   sequence quietly. Same grid as the preface: the heading in the margin
   column, the sentence and the button on the text column.
   ========================================================================== */
body.about { --a-end: #eeedf9; --a-end-edge: transparent; }
:root[data-theme="dark"] body.about { --a-end: #0a0e20; --a-end-edge: rgba(160, 148, 255, 0.14); }

.about-close {
  padding: 96px 0 104px;
  background: var(--a-end);
  /* In dark the endpaper and the shared footer are both near-black: one
     hairline keeps the page's end deliberate instead of a merge. */
  border-bottom: 1px solid var(--a-end-edge);
}

.about-close-inner {
  --pad-x: 72px;                                      /* the opening sheet's side padding */
  --col: 41.5%;                                       /* the preface's text column */
  position: relative;
  display: grid;
  grid-template-columns: var(--col) minmax(0, 1fr);
  align-items: start;
  margin: 0 calc(var(--pad-x) + 1px);
}
/* Registration ticks at the endpaper's top corners, the hero's trim marks echoed once. */
.about-close-inner::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -40px;
  height: 14px;
  pointer-events: none;
  --m: var(--a-mark);
  background:
    linear-gradient(var(--m), var(--m)) left top / 14px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) left top / 1px 14px no-repeat,
    linear-gradient(var(--m), var(--m)) right top / 14px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) right top / 1px 14px no-repeat;
}

.about-close-title {
  margin: 0;
  padding-right: 32px;
  font-size: clamp(1.9rem, 2.9vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--text);
  text-wrap: balance;
}

.about-close-body p {
  margin: 0 0 28px;
  max-width: 31.5rem;
  font-size: 1.075rem;
  line-height: 1.72;
  color: var(--a-text-muted);
  text-wrap: pretty;
}

@media (max-width: 1100px) {
  .about-close-inner { --pad-x: 56px; --col: 36%; }
}

/* Tablet down: stacked, left-aligned, the text indented as in the preface. */
@media (max-width: 1023px) {
  .about-close { padding: 80px 0 88px; }
  .about-close-inner { --pad-x: 48px; grid-template-columns: minmax(0, 1fr); }
  .about-close-title { max-width: none; padding-right: 0; margin-bottom: 20px; }
  .about-close-body { margin-left: 12%; }
}

@media (max-width: 819px) {
  .about-close-inner { --pad-x: 36px; }
  .about-close-body { margin-left: 0; }
}

/* Phones: no registration ticks; full readable width on the 24px gutter. */
@media (max-width: 599px) {
  .about-close { padding: 56px 0 64px; }
  .about-close-inner { margin: 0; }
  .about-close-inner::before { display: none; }
  .about-close-title { font-size: 1.75rem; margin-bottom: 14px; }
  .about-close-body p { font-size: 1.0625rem; line-height: 1.7; margin-bottom: 24px; }
}