/* ============================================================
   UNIQorn, about.css
   The 关于我 page. Current copy is authored in page-about.php.
   Seven sections: hero / services / name / past / style / voices /
   close (contact).

   Tokens come from foundation.css. Nothing here re-declares the
   palette. Indigo carries structure, mist carries atmosphere and rose
   is a graphic accent only (the water-drop), never a text colour.

   The reveal system
   -----------------
   Two states per revealed thing. The hidden state is authored only
   under `html.about-armed`, and that class is added by the script at
   the top of page-about.php, before this page's own markup is
   parsed. A visitor without JavaScript never gets the class, so the
   page is simply the finished state: no hidden text, and no fallback
   class anyone has to remember to keep in sync.

   Text wipes left to right with clip-path, and so do photographs, but
   photographs are uncovered from the bottom up. Body copy does neither:
   a paragraph is one unit and fades up whole. One displacement
   variable, --rise, moves everything; no element invents its own pixel
   value.
   ============================================================ */

.about {
  --rise: 7px;
  --reveal-dur: .78s;
  --reveal-ease: cubic-bezier(.25, .46, .45, .94);
  --state-dur: .2s;
  --state-ease: ease-out;

  /* Page aliases for the three site families in foundation.css. */
  --about-display: var(--font-display);
  --about-body: var(--font-body);
  --about-latin: var(--font-body);

  /* A step darker than --mist. Hairlines under links and the connectors
     of the name need more than --mist (1.80:1 on white) but less than
     --muted (7.2:1). 3.18:1 stays inside the indigo family. */
  --mist-deep: #7C93A8;

  background: var(--white);
  color: var(--fg-2);
}

/* ---------- the lock ----------

   The page is drawn once, at a design width of 1440px: a 1200px text
   column, 64px of gutter either side, and the rest is air. Everything
   below is authored at that width and is meant to stay there.

   Above the design width nothing changes at all — a wider window only
   buys more margin, which is what the page already did. Below it, the
   whole drawing is scaled down instead of being re-flowed: two columns
   stay two columns, the photographs stay where they were put, and no
   ratio between any two things on the page moves.

   `zoom` does the scaling, and it is the right tool for exactly one
   reason: it scales the layout along with the paint. The scaled layout
   is therefore precisely as wide as the viewport, so nothing ever
   scrolls sideways, and every measurement in the stylesheet keeps
   meaning what it was drawn to mean.

   --lock is the factor. It is 1 above the design width and below the
   1024px floor, where the stacked layout further down this file takes
   over. Between those two the page is scaled, never re-broken.

   One thing `zoom` does not scale: viewport units. They keep resolving
   against the real viewport, so a rule that divides them by --lock is
   asking for the value the drawing used. That is why every clamp() in
   this theme carries `calc(<n>vw * var(--boost, 1) / var(--lock, 1))`
   as its middle term.

   --boost is what makes the middle term resolve past its own maximum.
   Both factors are 1 outside the locked range, so the term is the plain
   vw and the phone layout breathes exactly as it did. Inside the range
   the two together multiply it by 1.25 x 1440 / 100, a constant, so
   every clamp settles on the value it was drawn with — the same number
   at 1920 as at 1024 — and the page stops having opinions about the
   window. 1.25 is the smallest round number that clears every clamp in
   the theme; the widest gap is 6vw against a 96px maximum, which needs
   1.12. */

@media (min-width: 1024px) {
  :root {
    --lock: min(1, calc(100vw / 1440px));
    --boost: 1.25;
    zoom: var(--lock);
  }
}

/* ---------- the reveal ---------- */

/*
 * A phrase that must not break inside itself. Headings are split at the
 * commas the copy already has, so a line never ends on 「因」 or 「局」.
 */
.about-nb {
  display: inline-block;
}

.about-u {
  display: inline-block;
}

html.about-armed .about-u {
  clip-path: inset(0 100% 0 0);
  transform: translateY(var(--rise));
  transition:
    clip-path var(--reveal-dur) var(--reveal-ease) var(--d, 0ms),
    transform var(--reveal-dur) var(--reveal-ease) var(--d, 0ms);
}

/* Controls arrive by fading, not wiping: a wipe across a pill reads as a
   rendering fault. */
html.about-armed .about-u--soft {
  clip-path: none;
  opacity: 0;
  transform: translateY(var(--rise));
  transition:
    opacity var(--reveal-dur) var(--reveal-ease) var(--d, 0ms),
    transform var(--reveal-dur) var(--reveal-ease) var(--d, 0ms);
}

html.about-armed .about-block.is-in .about-u {
  clip-path: inset(0);
  transform: none;
}

html.about-armed .about-block.is-in .about-u--soft {
  clip-path: none;
  opacity: 1;
  transform: none;
}

/* Body copy arrives as a paragraph, not as a sentence.
   A sentence per inline-block broke between the blocks, so a three
   sentence paragraph printed as three one-line fragments. A paragraph
   is a block: it wraps where the column says, and the reveal moves the
   whole thing. No clip-path here, because a wipe across three lines at
   once scans the text instead of arriving with it. */
.about-p {
  display: block;
}

html.about-armed .about-p {
  opacity: 0;
  transform: translateY(var(--rise));
  transition:
    opacity var(--reveal-dur) var(--reveal-ease) var(--d, 0ms),
    transform var(--reveal-dur) var(--reveal-ease) var(--d, 0ms);
}

html.about-armed .about-block.is-in .about-p {
  opacity: 1;
  transform: none;
}

/* Photographs wipe upward: the frame is uncovered from its bottom edge
   toward its top. `inset(100% 0 0 0)` hides the box by pulling the
   visible rectangle down past the bottom, so releasing it to `inset(0)`
   grows the rectangle upward. The other order, `inset(0 0 100% 0)`,
   uncovers downward, which reads as a curtain dropping. */
html.about-armed .about-fig img {
  clip-path: inset(100% 0 0 0);
  transform: translateY(var(--rise));
  transition:
    clip-path var(--reveal-dur) var(--reveal-ease) var(--d, 0ms),
    transform var(--reveal-dur) var(--reveal-ease) var(--d, 0ms);
}

/* A photograph is either the revealed thing itself (hero) or one of a
   pair inside a revealed block (the past), so the figure and the block
   above it both count as the trigger. */
html.about-armed .about-fig.is-in > img,
html.about-armed .about-block.is-in .about-fig img {
  clip-path: inset(0);
  transform: none;
}

/* The pause line settles in without the left-to-right wipe the headings
   use: it is a held breath, not a title. */
html.about-armed .about-block--big .about-u {
  clip-path: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 1s cubic-bezier(.22, .61, .36, 1) 120ms,
              transform 1s cubic-bezier(.22, .61, .36, 1) 120ms;
}

html.about-armed .about-block--big.is-in .about-u {
  opacity: 1;
  transform: none;
}

/* The pairs fade instead of wiping, so the two frames of a scene do not
   open like curtains side by side. */
html.about-armed .about-duo .about-fig img {
  clip-path: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .82s cubic-bezier(.22, .61, .36, 1) var(--d, 0ms),
              transform .82s cubic-bezier(.22, .61, .36, 1) var(--d, 0ms);
}

html.about-armed .about-duo.is-in .about-fig img {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Geometry is the finished page. Nothing plays. */
  html.about-armed .about-u,
  html.about-armed .about-u--soft,
  html.about-armed .about-p,
  html.about-armed .about-block--big .about-u,
  html.about-armed .about-duo .about-fig img,
  html.about-armed .about-fig--hero::after {
    clip-path: none;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .about-deliverable-card,
  .about-deliverable-action,
  .about-btn {
    transition: none;
  }

  .about-deliverable-card:hover,
  .about-deliverable-card:focus-visible,
  .about-deliverable-card:hover .about-deliverable-action,
  .about-deliverable-card:focus-visible .about-deliverable-action {
    transform: none;
  }
}

/* ---------- sections ---------- */

.about-sec {
  padding-block: clamp(56px, calc(7.4vw * var(--boost, 1) / var(--lock, 1)), 104px);
}

.about-sec--hero {
  padding-block: clamp(48px, calc(6.6vw * var(--boost, 1) / var(--lock, 1)), 96px) clamp(64px, calc(8.6vw * var(--boost, 1) / var(--lock, 1)), 124px);
}

.about-sec--close {
  padding-block: clamp(72px, calc(9.4vw * var(--boost, 1) / var(--lock, 1)), 136px) clamp(88px, calc(11.6vw * var(--boost, 1) / var(--lock, 1)), 168px);
}

/* ---------- type ---------- */

.about-h {
  margin: 0 0 clamp(26px, calc(3.4vw * var(--boost, 1) / var(--lock, 1)), 44px);
  font-family: var(--about-display);
  font-weight: 300;
  font-size: clamp(22px, calc(2.4vw * var(--boost, 1) / var(--lock, 1)), 32px);
  line-height: 1.6;
  letter-spacing: .01em;
  color: var(--indigo);
  text-wrap: balance;
}

.about-lede {
  margin: 0;
  max-width: 27em;
  font-family: var(--about-body);
  font-weight: 300;
  font-size: clamp(15px, calc(1.25vw * var(--boost, 1) / var(--lock, 1)), 16px);
  line-height: 2.05;
  color: var(--muted);
}

.about-body {
  max-width: 34em;
  font-family: var(--about-body);
  font-weight: 300;
  font-size: clamp(15px, calc(1.3vw * var(--boost, 1) / var(--lock, 1)), 16.5px);
  line-height: 2.05;
  letter-spacing: .015em;
  color: var(--fg-2);
}

.about-body p {
  margin: 0;
}

.about-body p + p {
  margin-top: 1em;
}

/* Bilingual labels make the page's purpose easy to scan while staying
   quieter than the section headings. */
.about-kicker {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 clamp(18px, calc(2.2vw * var(--boost, 1) / var(--lock, 1)), 28px);
  color: var(--meta);
  font-family: var(--about-latin);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: .12em;
}

.about-kicker span + span {
  font-family: var(--about-body);
  letter-spacing: .08em;
}

.about-fig {
  margin: 0;
}

.about-fig img {
  width: 100%;
  height: auto;
}

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

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(36px, calc(5vw * var(--boost, 1) / var(--lock, 1)), 80px);
}

.about-hero-copy {
  display: grid;
  align-content: start;
  gap: clamp(20px, calc(2.6vw * var(--boost, 1) / var(--lock, 1)), 34px);
}

.about-hero .about-kicker,
.about-hero .about-h {
  margin: 0;
}

.about-hero .about-h {
  max-width: 14em;
  font-weight: 300;
  font-size: clamp(30px, calc(4.2vw * var(--boost, 1) / var(--lock, 1)), 58px);
  line-height: 1.4;
  letter-spacing: .01em;
}

/* Name first, then the role beneath it. */
.about-byline {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.about-byline-name {
  font-family: var(--about-latin);
  font-weight: 300;
  font-size: clamp(26px, calc(2.6vw * var(--boost, 1) / var(--lock, 1)), 34px);
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--indigo);
}

.about-byline-role {
  font-family: var(--about-display);
  font-weight: 300;
  font-size: clamp(16px, calc(1.5vw * var(--boost, 1) / var(--lock, 1)), 19px);
  line-height: 1.7;
  color: var(--indigo);
}

/* Three facts on one hairline row; they wrap as whole facts. */
.about-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 0;
  margin: 0;
  padding-block: 14px;
  border-block: 1px solid var(--line);
  font-family: var(--about-body);
  font-size: 13.5px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--muted);
}

.about-facts span {
  padding-inline: 0 var(--space-4);
}

.about-facts span + span {
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--line);
}

/* The rose drop marks a visitor's own words. Organic, never a circle. */
.about-voice--lead::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 11px;
  border-radius: var(--radius-drop);
  background: radial-gradient(circle at 38% 36%, rgba(197, 139, 142, .45), var(--rose) 72%);
}

.about-voice blockquote {
  margin: 0;
}

.about-voice figcaption {
  margin-top: 6px;
  font-family: var(--about-body);
  font-size: var(--text-sm);
  letter-spacing: .06em;
  color: var(--meta);
}

.about-hero-jump {
  margin: 0;
}

.about-hero-jump a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-family: var(--about-body);
  font-size: var(--text-base);
  color: var(--indigo);
  text-decoration: none;
  border-bottom: 1px solid var(--mist-deep);
  transition: border-color var(--state-dur) var(--state-ease);
}

.about-hero-jump a:hover,
.about-hero-jump a:focus-visible {
  border-bottom-color: var(--indigo);
}

.about-hero-jump a:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
}

/* The portrait is a corner of the page: small, in the lower right, with
   the white above and beside it left empty. A pair of hairlines wraps
   its far corner and nothing else frames it. The portrait is tall
   (630 x 1200); it is held at 3:4 with the face and the card inside. */
.about-fig--hero {
  position: relative;
  isolation: isolate;
  align-self: end;
  justify-self: end;
  width: min(100%, 300px);
}

.about-fig--hero::after {
  content: '';
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 62%;
  height: 52%;
  z-index: -1;
  border-right: 1px solid rgba(30, 58, 95, .42);
  border-bottom: 1px solid rgba(30, 58, 95, .42);
  pointer-events: none;
}

html.about-armed .about-fig--hero::after {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.25, 1, .5, 1) var(--d, 160ms);
}

html.about-armed .about-fig--hero.is-in::after {
  opacity: 1;
}

.about-fig--hero img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 20%;
}

/* ---------- services ---------- */
.about-deliverables-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, calc(2.4vw * var(--boost, 1) / var(--lock, 1)), 36px);
  margin-top: clamp(24px, calc(3vw * var(--boost, 1) / var(--lock, 1)), 40px);
}

.about-deliverable-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, calc(3vw * var(--boost, 1) / var(--lock, 1)), 36px) clamp(20px, calc(2.5vw * var(--boost, 1) / var(--lock, 1)), 30px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.about-deliverable-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--mist-deep);
  outline: 2px solid var(--indigo);
  outline-offset: 4px;
}

.about-deliverable-photo {
  display: block;
  margin-bottom: var(--space-5);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.about-deliverable-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.about-deliverable-tag {
  display: inline-block;
  font-family: var(--about-latin);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--meta);
  margin-bottom: 14px;
}

.about-deliverable-name {
  font-family: var(--about-display);
  font-size: clamp(18px, calc(1.8vw * var(--boost, 1) / var(--lock, 1)), 21px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg-1);
  margin: 0 0 var(--space-3) 0;
}

.about-deliverable-desc {
  margin: 0 0 clamp(20px, calc(2.2vw * var(--boost, 1) / var(--lock, 1)), 28px);
  font-family: var(--about-body);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--fg-2);
  flex-grow: 1;
}

.about-deliverable-foot {
  display: grid;
  align-items: start;
  gap: var(--space-3);
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-family: var(--about-latin);
  font-size: var(--text-sm);
  color: var(--meta);
  letter-spacing: 0.02em;
  grid-template-columns: minmax(0, 1fr) auto;
}

.about-deliverable-venue {
  color: var(--meta);
  min-width: 0;
}

.about-deliverable-action {
  color: var(--indigo);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: transform 0.2s ease, color 0.2s ease;
}

.about-deliverable-card:focus-visible .about-deliverable-action {
  transform: translateX(4px);
  color: var(--indigo);
}

@media (hover: hover) and (pointer: fine) {
  .about-deliverable-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--mist-deep);
  }

  .about-deliverable-card:hover .about-deliverable-action {
    transform: translateX(4px);
    color: var(--indigo);
  }
}

.about-deliverables-header {
  margin-bottom: clamp(20px, calc(2.4vw * var(--boost, 1) / var(--lock, 1)), 32px);
}

.about-deliverables-header .about-h {
  margin-bottom: var(--space-2);
  font-size: clamp(22px, calc(2.2vw * var(--boost, 1) / var(--lock, 1)), 30px);
}

.about-deliverables-header .about-p {
  color: var(--fg-2);
  font-size: 14.5px;
  line-height: 1.8;
  max-width: 38em;
  margin: 0;
}

/* ---------- the name ---------- */

/* One typographic composition, left aligned:
     独立角 + drop      the origin, small
     unique / unicorn   two words on one letter grid
     the lockup         the owner's logo, the result
   The pair is set on a fixed column grid (--cell), so column n of unique
   sits directly over column n of unicorn: u-n-i line up, q over c, and the
   tail of unicorn (orn) lands under the tail of unique (ue). The letters
   UNIQorn is made of are ink; the rest is mist. Read as plain type with no
   motion at all; about-motion.js only moves the letters. */
.about-name-mark {
  --cell: .6em;
  position: relative;
  display: grid;
  justify-items: start;
  gap: clamp(20px, calc(2.6vw * var(--boost, 1) / var(--lock, 1)), 38px);
  width: fit-content;
  max-width: 100%;
  margin: 0;
  color: var(--indigo);
}

.about-name-mark p {
  margin: 0;
}

.about-name-drop {
  display: inline-block;
  flex: 0 0 auto;
  border-radius: var(--radius-drop);
  background: radial-gradient(circle at 38% 36%, rgba(197, 139, 142, .45), var(--rose) 72%);
}

.about-name-src {
  display: flex;
  align-items: center;
  gap: .7em;
  font-family: var(--about-display);
  font-weight: 300;
  font-size: clamp(15px, calc(1.5vw * var(--boost, 1) / var(--lock, 1)), 19px);
  line-height: 1.2;
  letter-spacing: .38em;
  color: var(--indigo);
}

.about-name-src [data-about-glyph] {
  display: inline-block;
}

.about-name-drop--src {
  width: 9px;
  height: 10px;
}

.about-name-pair {
  display: grid;
  gap: .08em;
  font-family: var(--about-latin);
  font-weight: 300;
  font-size: clamp(38px, calc(5.4vw * var(--boost, 1) / var(--lock, 1)), 72px);
  line-height: 1.1;
}

.about-name-word {
  display: flex;
}

.about-name-letter {
  display: block;
  flex: 0 0 var(--cell);
  width: var(--cell);
  line-height: 1.1;
  text-align: center;
  color: var(--indigo);
}

.about-name-letter:not([data-keep]) {
  color: var(--mist);
}

/* The owner's lockup closes the composition. Its width is what the typed
   letters land on, so it is sized with the same clamp rhythm as the pair. */
.about-name-lock {
  position: relative;
  width: clamp(300px, calc(40vw * var(--boost, 1) / var(--lock, 1)), 600px);
  max-width: 100%;
  margin-top: clamp(8px, calc(1.2vw * var(--boost, 1) / var(--lock, 1)), 18px);
}

.about-name-logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.about-name-body {
  display: grid;
  gap: clamp(20px, calc(2.6vw * var(--boost, 1) / var(--lock, 1)), 34px);
  margin-top: clamp(40px, calc(5.6vw * var(--boost, 1) / var(--lock, 1)), 80px);
  margin-inline-start: clamp(0px, calc(22vw * var(--boost, 1) / var(--lock, 1)), 320px);
}

.about-name-line {
  margin: 0;
  max-width: 20em;
  font-family: var(--about-display);
  font-weight: 300;
  font-size: clamp(22px, calc(2.4vw * var(--boost, 1) / var(--lock, 1)), 32px);
  line-height: 1.6;
  color: var(--indigo);
}

/* ---------- the past ---------- */

/* Each scene is a pair of real photographs and the passage they belong
   to. The second mirrors the first, so the eye zigzags down the years
   instead of reading a column of tiles. The last has no photograph. */
.about-scene {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, calc(4.4vw * var(--boost, 1) / var(--lock, 1)), 64px);
  align-items: center;
}

.about-scene + .about-scene {
  margin-top: clamp(48px, calc(6vw * var(--boost, 1) / var(--lock, 1)), 88px);
}

.about-scene--flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.about-scene--flip > .about-duo {
  order: 2;
}

.about-scene-copy {
  display: grid;
  gap: clamp(18px, calc(2.2vw * var(--boost, 1) / var(--lock, 1)), 28px);
}

/* The one line of a scene that carries its weight. */
.about-scene-line {
  margin: 0;
  max-width: 20em;
  font-family: var(--about-display);
  font-weight: 300;
  font-size: clamp(19px, calc(2vw * var(--boost, 1) / var(--lock, 1)), 26px);
  line-height: 1.7;
  color: var(--indigo);
}

/* Two frames staggered, the second lifted, overlapping by a sliver. */
.about-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  align-items: end;
}

.about-duo .about-fig:first-child {
  z-index: 1;
}

.about-duo .about-fig + .about-fig {
  margin-inline-start: clamp(-28px, calc(-1.8vw * var(--boost, 1) / var(--lock, 1)), -14px);
  margin-bottom: clamp(24px, calc(3.4vw * var(--boost, 1) / var(--lock, 1)), 52px);
}

.about-duo img {
  display: block;
  object-fit: cover;
  border-radius: var(--radius-xs);
}

.about-fig--skate img { aspect-ratio: 3 / 4; object-position: 50% 30%; }
.about-fig--students img { aspect-ratio: 3 / 4; object-position: 50% 35%; }
.about-fig--stage img { aspect-ratio: 4 / 3; }
.about-fig--backstage img { aspect-ratio: 3 / 4; object-position: 50% 25%; }

.about-scene--flip .about-duo {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .7fr);
}

/* The pause: white space, a rose drop, one long line. */
.about-scene--pause {
  display: block;
  padding-block: clamp(48px, calc(8vw * var(--boost, 1) / var(--lock, 1)), 120px) 0;
}

.about-pause-drop {
  display: block;
  width: 12px;
  height: 13px;
  margin-bottom: clamp(20px, calc(2.6vw * var(--boost, 1) / var(--lock, 1)), 32px);
  border-radius: var(--radius-drop);
  background: radial-gradient(circle at 38% 36%, rgba(197, 139, 142, .45), var(--rose) 72%);
}

.about-big {
  margin: 0;
  max-width: 21em;
  font-family: var(--about-display);
  font-weight: 300;
  font-size: clamp(25px, calc(3.2vw * var(--boost, 1) / var(--lock, 1)), 42px);
  line-height: 1.55;
  letter-spacing: .005em;
  color: var(--indigo);
  text-wrap: balance;
}

.about-block--big {
  margin-bottom: clamp(36px, calc(5vw * var(--boost, 1) / var(--lock, 1)), 72px);
}

.about-scene--pause .about-body {
  margin-inline-start: clamp(0px, calc(22vw * var(--boost, 1) / var(--lock, 1)), 320px);
}

/* ---------- style ---------- */

.about-sec--style .about-h {
  margin-bottom: clamp(18px, calc(2.4vw * var(--boost, 1) / var(--lock, 1)), 28px);
}

/* Four cards laid left to right on a table. The table is a wash of mist
   with a hairline edge; the cards sit on it at slightly different angles.
   `rotate` is its own property so the motion layer's transform never
   has to know about the resting tilt. */
.about-table {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, calc(2vw * var(--boost, 1) / var(--lock, 1)), 28px);
  margin-top: clamp(36px, calc(4.4vw * var(--boost, 1) / var(--lock, 1)), 64px);
  padding: clamp(28px, calc(3.4vw * var(--boost, 1) / var(--lock, 1)), 48px) clamp(16px, calc(2.4vw * var(--boost, 1) / var(--lock, 1)), 32px);
}

.about-table::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse 70% 80% at 50% 45%, rgba(175, 196, 211, .26), rgba(175, 196, 211, .08) 60%, transparent 82%);
  pointer-events: none;
}

.about-card {
  position: relative;
  aspect-ratio: var(--card-ratio);
  border: 1px solid rgba(30, 58, 95, .3);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  rotate: var(--tilt, 0deg);
}

.about-card:nth-child(1) { --tilt: -1.6deg; }
.about-card:nth-child(2) { --tilt: 1deg; margin-top: 18px; }
.about-card:nth-child(3) { --tilt: -.8deg; margin-top: 6px; }
.about-card:nth-child(4) { --tilt: 1.8deg; margin-top: 22px; }

/* Inner hairline frame, the way a printed card has one. */
.about-card::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  pointer-events: none;
}

.about-card-front {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  height: 100%;
  text-align: center;
  padding: clamp(20px, calc(2vw * var(--boost, 1) / var(--lock, 1)), 26px) clamp(16px, calc(1.8vw * var(--boost, 1) / var(--lock, 1)), 22px) 40px;
}

.about-card-title {
  margin: 0;
  font-family: var(--about-display);
  font-weight: 400;
  font-size: clamp(17px, calc(1.5vw * var(--boost, 1) / var(--lock, 1)), 20px);
  line-height: 1.55;
  color: var(--indigo);
  text-wrap: balance;
}

.about-card-text {
  margin: 0;
  font-family: var(--about-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.85;
  color: var(--fg-2);
}

/* A small rose drop closes each face, the same mark the back carries. */
.about-card-front::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 8px;
  height: 9px;
  margin-left: -4px;
  border-radius: var(--radius-drop);
  background: radial-gradient(circle at 38% 36%, rgba(197, 139, 142, .45), var(--rose) 72%);
}

/* The face turned down: a rose water-drop on a mist wash. Hidden until
   round 3 turns the cards over. */
.about-card-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  visibility: hidden;
  border-radius: var(--radius-md);
  background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(175, 196, 211, .5), rgba(175, 196, 211, .2) 70%);
}

.about-card-drop {
  width: 26px;
  height: 29px;
  border-radius: var(--radius-drop);
  background: radial-gradient(circle at 38% 36%, rgba(197, 139, 142, .45), var(--rose) 72%);
}

.about-consult-scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 720px;
  margin-top: clamp(48px, calc(6vw * var(--boost, 1) / var(--lock, 1)), 88px);
}

.about-consult-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
  align-items: start;
  gap: clamp(14px, calc(2vw * var(--boost, 1) / var(--lock, 1)), 28px);
}

.about-fig--consult img,
.about-fig--hands img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.about-fig--hands {
  margin-top: clamp(24px, calc(4vw * var(--boost, 1) / var(--lock, 1)), 56px);
}

.about-fig-caption {
  margin-top: 10px;
  font-family: var(--about-body);
  font-size: var(--text-sm);
  letter-spacing: .02em;
  color: var(--meta);
  line-height: 1.65;
}

.about-voice {
  margin: 0;
}

.about-voice--lead {
  position: relative;
  max-width: 760px;
  padding-inline-start: 30px;
  margin-bottom: clamp(40px, calc(5vw * var(--boost, 1) / var(--lock, 1)), 64px);
}

.about-voice--lead::before {
  top: .7em;
  width: 13px;
  height: 14px;
}

.about-voice--lead p {
  margin: 0;
  font-family: var(--about-display);
  font-weight: 300;
  font-size: clamp(20px, calc(2.2vw * var(--boost, 1) / var(--lock, 1)), 28px);
  line-height: 1.7;
  color: var(--indigo);
}

.about-voices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, calc(3.4vw * var(--boost, 1) / var(--lock, 1)), 48px) clamp(28px, calc(4vw * var(--boost, 1) / var(--lock, 1)), 56px);
}

.about-voices .about-voice {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.about-voices .about-voice p {
  margin: 0;
  font-family: var(--about-body);
  font-weight: 300;
  font-size: clamp(15px, calc(1.3vw * var(--boost, 1) / var(--lock, 1)), 16.5px);
  line-height: 1.95;
  color: var(--fg-1);
}

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

.about-guidance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, calc(2.8vw * var(--boost, 1) / var(--lock, 1)), 40px);
  margin: clamp(32px, calc(4vw * var(--boost, 1) / var(--lock, 1)), 52px) 0 clamp(28px, calc(3.4vw * var(--boost, 1) / var(--lock, 1)), 44px);
}

.about-guidance-card {
  padding: clamp(22px, calc(2.6vw * var(--boost, 1) / var(--lock, 1)), 32px);
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.about-guidance-tag {
  display: block;
  font-family: var(--about-display);
  font-size: clamp(15px, calc(1.5vw * var(--boost, 1) / var(--lock, 1)), 17px);
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 10px;
}

.about-guidance-text {
  margin: 0;
  font-family: var(--about-body);
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--fg-2);
}

.about-sec--close .about-lede {
  max-width: 36em;
}

.about-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, calc(1.8vw * var(--boost, 1) / var(--lock, 1)), 22px);
  margin-top: clamp(20px, calc(2.6vw * var(--boost, 1) / var(--lock, 1)), 32px);
}

/* Declared after .about-u on purpose: a row of controls is a flex
   line, not an inline-block. */
.about-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--about-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  transition:
    background var(--state-dur) var(--state-ease),
    color var(--state-dur) var(--state-ease),
    border-color var(--state-dur) var(--state-ease),
    box-shadow .32s cubic-bezier(.25, 1, .5, 1);
}

.about-btn--primary {
  background: var(--indigo);
  color: var(--white);
  border: 1px solid var(--indigo);
}

.about-btn--primary:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 6px 20px rgba(30, 58, 95, .14),
              0 0 26px rgba(175, 196, 211, .36);
}

@media (hover: hover) and (pointer: fine) {
  .about-btn--primary:hover {
    background: var(--ink);
    border-color: var(--ink);
    box-shadow: 0 6px 20px rgba(30, 58, 95, .14),
                0 0 26px rgba(175, 196, 211, .36);
  }
}

/* Keyboard focus needs a visible ring beyond the colour shift. The ring
   is the page's word for "you are here". */
.about-btn:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
}

/* The secondary button is a hairline pill: one primary only. */
.about-btn--wa {
  border: 1px solid rgba(30, 58, 95, .4);
  color: var(--indigo);
}

.about-btn--wa:hover,
.about-btn--wa:focus-visible {
  border-color: var(--indigo);
  background: var(--tag-bg-faint);
}

/* The number is plain text so it can be selected and copied. */
.about-contact-num {
  margin: 0;
  font-family: var(--about-latin);
  font-weight: 300;
  font-size: var(--text-lg);
  letter-spacing: .06em;
  color: var(--indigo);
  -webkit-user-select: text;
  user-select: text;
}

.about-contact-ig {
  margin: 0;
}

.about-contact-ig a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--about-body);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--mist-deep);
  transition: color var(--state-dur) var(--state-ease),
              border-color var(--state-dur) var(--state-ease);
}

.about-contact-ig a:hover,
.about-contact-ig a:focus-visible {
  color: var(--indigo);
  border-bottom-color: var(--indigo);
}

.about-contact-ig a:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
}

/* The watercolour bloom behind the contact heading and buttons. What is
   authored here is the dried stain: a faint mist centre, a wash rim, a
   rose hint at one edge, as an asymmetric pool. about-motion.js
   plays the bloom itself; with no JS the stain is simply there. It sits
   behind the text and stays well under any contrast-relevant strength. */
.about-contact-wrap {
  position: relative;
  isolation: isolate;
}

/* The bloom may reach past the column; it must never widen the page. */
.about-sec--close {
  overflow-x: clip;
}

.about-bloom {
  position: absolute;
  z-index: -1;
  inset: -9% -7% -6% -9%;
  pointer-events: none;
  opacity: .35;
}

/* An off-centre pool, not a frame: densest behind the heading at the
   upper left, a smaller lobe lower in, feathering to nothing on the other
   sides. No continuous rim. The one rose hint sits at the left edge. */
.about-bloom-body {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 12% 14% at 7% 52%, rgba(197, 139, 142, .12), rgba(197, 139, 142, 0) 75%),
    radial-gradient(ellipse 22% 24% at 22% 26%, rgba(120, 154, 203, .20), rgba(120, 154, 203, .08) 55%, rgba(120, 154, 203, 0) 100%),
    radial-gradient(ellipse 40% 44% at 27% 31%, rgba(175, 196, 211, .16), rgba(175, 196, 211, .08) 55%, rgba(175, 196, 211, 0) 100%),
    radial-gradient(ellipse 26% 22% at 46% 58%, rgba(175, 196, 211, .10), rgba(175, 196, 211, 0) 100%);
}

/* ---------- responsive ---------- */

@media (min-width: 1024px) {
  .about-deliverable-name {
    min-height: 2.8em;
  }
}

@media (max-width: 1023px) {
  .about-hero,
  .about-scene,
  .about-scene--flip,
  .about-consult-scene {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-fig--hero {
    width: min(62%, 260px);
    margin-right: var(--space-5);
  }

  .about-scene--flip > .about-duo {
    order: 0;
  }

  .about-duo {
    max-width: 560px;
  }

  .about-deliverables-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-name-body,
  .about-scene--pause .about-body {
    margin-inline-start: 0;
  }

  /* Two by two: the cards stay card-sized and the text stays readable. */
  .about-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-6);
  }

  .about-consult-gallery {
    max-width: 560px;
  }
}

@media (max-width: 640px) {
  .about-deliverables-grid,
  .about-guidance-grid,
  .about-voices {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-deliverable-desc,
  .about-guidance-text {
    font-size: var(--text-base);
  }

  .about-fig-caption {
    letter-spacing: 0;
  }

  /* Title and studio on their own lines: a phone otherwise starts the
     second line with the separator. */
  .about-byline-sep {
    display: none;
  }

  .about-byline-org {
    display: block;
  }

  .about-facts span,
  .about-facts span + span {
    padding-inline: 0;
    border: 0;
  }

  .about-facts {
    flex-direction: column;
    gap: var(--space-1);
  }

  .about-table {
    gap: 14px;
    padding-inline: 10px;
  }

  .about-card:nth-child(n) { margin-top: 0; }

  .about-card-front {
    gap: var(--space-2);
    padding: var(--space-4) var(--space-3) var(--space-8);
  }

  .about-card-title {
    font-size: var(--text-base);
  }

  .about-card-text {
    font-size: 12.5px;
    line-height: 1.7;
  }

  .about-actions-row {
    gap: var(--space-3);
  }

  .about-btn {
    min-height: 46px;
    padding: 0 var(--space-5);
  }
}