/* ==========================================================================
   TESORIN — About page (page-owned)

   Layout comes from the shared ms- layer (assets/css/marketing-sections.css),
   which loads AFTER this file. Every override below therefore carries more
   specificity than the ms- rule it adjusts; source order alone won't win.

   Sections: origin story (the pencil film) → hero split (photo) → guiding
   principles (sketch cards) → "TESORIN means to treasure…" (definition +
   photo) → FAQ preview → CTA.

   Note: assets/css/sketches.css (imported by surface-system.css) still carries
   the old About hero/story sketches behind body:has(.about-reveal) and
   .story-grid. This page no longer uses those classes, so nothing from
   there renders here; keep it that way.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Hero: eyebrow + H1 + lede beside an editorial photo
   -------------------------------------------------------------------------- */
.about-hero .ms-split {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
}

.about-hero .ms-split__text {
  max-width: 640px;
}

.about-hero .ms-split__text h1 {
  max-width: 18ch;
  font-size: var(--text-title);
  line-height: var(--text-title-leading);
  letter-spacing: -.028em;
}

.about-hero .ms-split__text > p:not(.ms-eyebrow) {
  max-width: 52ch;
  margin-top: clamp(22px, 2.2vw, 30px);
  font-size: var(--text-lede);
  line-height: var(--text-lede-leading);
  letter-spacing: -.008em;
}

.about-hero__photo {
  --ms-photo-ratio: 1 / 1;
  --ms-photo-position: 70% 50%;
}

/* Narrow two-column range: a slightly landscape crop keeps the photo
   level with the text block instead of towering over it. */
@media (min-width: 901px) and (max-width: 1180px) {
  .about-hero__photo { --ms-photo-ratio: 5 / 4; }
}

/* Stack earlier than the shared 760px split so the headline keeps a
   comfortable measure on tablets. */
@media (max-width: 900px) {
  .about-hero .ms-split {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 7vw, 56px);
  }

  .about-hero__photo { --ms-photo-ratio: 16 / 10; }
}

@media (max-width: 560px) {
  .about-hero__photo { --ms-photo-ratio: 4 / 3; }
}


/* --------------------------------------------------------------------------
   Guiding principles: slightly larger sketches than the shared default.
   (The shared 561–860px rule still sizes them beside the text there.)
   -------------------------------------------------------------------------- */
.about-principles .ms-card__art {
  height: clamp(96px, 8.4vw, 118px);
  margin-bottom: 28px;
}


/* --------------------------------------------------------------------------
   "TESORIN means to treasure…": dictionary entry set between hairlines
   -------------------------------------------------------------------------- */
/* Two classes so this outranks `.ms-definition { margin: 0 }`, which loads
   later; otherwise the top hairline sits flush against the H2. */
.about-meaning .about-definition {
  margin-top: clamp(28px, 3vw, 40px);
  padding-block: clamp(22px, 2.4vw, 30px);
  border-top: 1px solid var(--ms-rule, var(--hair-2));
  border-bottom: 1px solid var(--ms-rule, var(--hair-2));
}

.about-definition .ms-definition__say {
  margin: 0;
}

.about-definition .ms-definition__meaning {
  margin-top: 14px;
}

/* The shared terracotta (#BD6038) is 4.29:1 on white and 4.40:1 on #111,
   just short of AA for the meaning line below 24px. These tones keep the
   accent and clear 4.5:1: 5.33:1 on white, 6.03:1 on #111. */
.about-definition .ms-definition__meaning em {
  color: #A8532F;
}

html[data-theme="dark"] .about-definition .ms-definition__meaning em {
  color: #D9774F;
}

.about-meaning .ms-split__text > .about-meaning__note {
  max-width: 44ch;
  margin-top: clamp(24px, 2.6vw, 32px);
  font-size: var(--text-sub);
  line-height: var(--text-sub-leading);
  color: var(--ink);
}

/* The notebook, its folded note and pen, cut out of their photo so they sit
   straight on the page, with a soft shadow under them. (The other About
   photos keep their rounded cards.) */
.about-meaning__art {
  margin: 0;
}

.about-meaning__art img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 18px rgba(11, 11, 11, .14));
}

html[data-theme="dark"] .about-meaning__art img {
  filter: brightness(.93) drop-shadow(0 16px 18px rgba(0, 0, 0, .45));
}


/* --------------------------------------------------------------------------
   Focus: a clear ring on page buttons (the CTA band keeps its own light ring)
   -------------------------------------------------------------------------- */
.about-page .btn:focus-visible {
  outline: 2px solid var(--accent-olive, #737C47);
  outline-offset: 3px;
}

/* Envelope photo under the principles: a wide, shallow band. */
.about-principles .about-principles__photo {
  --ms-photo-ratio: 21 / 8;
  max-width: 1120px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  --ms-photo-position: 50% 58%;
}

@media (max-width: 760px) {
  .about-principles .about-principles__photo {
    --ms-photo-ratio: 4 / 3;
  }
}


/* --------------------------------------------------------------------------
   Origin story: "The Tally Trade", a pencil film above Why TESORIN exists.
   assets/tally-trade-film.js draws it into the canvas. The film keeps its own
   paper in both themes, like a lit screen. It starts by itself when it comes
   into view; the only control on it is sound. The film itself is a button:
   a tap pauses, plays or replays it. A round button replays it from the end;
   with reduced motion the same button waits on a still frame instead.
   -------------------------------------------------------------------------- */
.about-film .ms-head:not(:last-child) {
  margin-bottom: clamp(28px, 3.6vw, 48px);
}

.about-film__player {
  max-width: 1080px;
  margin-inline: auto;
}

.about-film__frame {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-xl, 32px);
  background: #F3F3EE;
  box-shadow: 0 30px 68px -52px rgba(11, 11, 11, .4);
}

.about-film__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--ms-photo-line, rgba(11, 11, 11, .06));
  pointer-events: none;
}

.about-film__surface {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.about-film__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Sound is the one control: a paper disc in the corner. */
.about-film__sound {
  position: absolute;
  right: clamp(12px, 2vw, 20px);
  bottom: clamp(12px, 2vw, 20px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(243, 243, 238, .94);
  color: #0B0B0B;
  cursor: pointer;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .55);
  transition: background .2s ease, transform .2s ease;
}

.about-film__sound:hover {
  background: #FFFFFF;
  transform: scale(1.05);
}

.about-film__sound svg {
  width: 20px;
  height: 20px;
}

.about-film__sound[aria-pressed="false"] .i-sound,
.about-film__sound[aria-pressed="true"] .i-muted {
  display: none;
}

/* A round paper disc: replay once the film has ended, and play on the still
   frame that reduced motion waits on. */
.about-film__play {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  display: none;
  place-items: center;
  width: clamp(52px, 6vw, 64px);
  height: clamp(52px, 6vw, 64px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(243, 243, 238, .95);
  color: #0B0B0B;
  cursor: pointer;
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, .7);
  transition: background .2s ease, transform .2s ease;
}

.about-film__play:hover {
  background: #FFFFFF;
  transform: translate(-50%, -50%) scale(1.05);
}

.about-film__player.is-still .about-film__play,
.about-film__player.is-ended .about-film__play {
  display: grid;
}

.about-film__play svg {
  width: 44%;
  height: 44%;
}

.about-film__player.is-ended .about-film__play .i-play,
.about-film__player:not(.is-ended) .about-film__play .i-replay {
  display: none;
}

.about-film__surface:focus-visible,
.about-film__sound:focus-visible,
.about-film__play:focus-visible {
  outline: 2px solid var(--accent-olive, #737C47);
  outline-offset: 3px;
}

.about-film__surface:focus-visible {
  outline-offset: -4px;
  border-radius: inherit;
}

@media (max-width: 560px) {
  .about-film__frame { border-radius: var(--r-lg, 24px); }

  .about-film__sound {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-film__sound,
  .about-film__sound:hover {
    transition: none;
    transform: none;
  }

  .about-film__play,
  .about-film__play:hover {
    transition: none;
    transform: translate(-50%, -50%);
  }
}