/* ==========================================================================
   ABOUT — about.css (page layout only; tokens and parts live in base.css)
   A00 hero (script mark + slogan) → 01 name (BENCH) → 02 MojoTeam (STAGE)
   → 03 design (BENCH) → 04 giving (STAGE) → 05 closing links (BENCH).
   Desktop spreads from 1280px (12 columns); below that every section stacks.
   ========================================================================== */

:where(.ab-main) figure { margin: 0; }
.ab-sec { padding-block: var(--section); overflow-x: clip; }

/* shared section head: 「01」 + 24px rule, then a small Japanese label */
.ab-head__no { display: flex; align-items: center; gap: 12px; margin: 0; }
.ab-head__no::after { content: ""; width: 24px; height: 1px; background: var(--fg2); }
.ab-head__no .t-index { line-height: 1; }
.ab-head__label { margin: 20px 0 0; font-family: var(--f-jp); font-weight: 500; font-size: 13px; line-height: 1.6; letter-spacing: 0.12em; color: var(--fg2); }
.ab-q { margin: 0; word-break: keep-all; word-break: auto-phrase; overflow-wrap: anywhere; }
.ab-a .t-body { margin: 0; }
.ab-a .t-body + .t-body { margin-top: var(--s3); }

/* ---------- A00 HERO ---------- */
.ab-hero { position: relative; overflow: clip; }
.ab-hero__grid {
  min-height: max(100svh, 640px); padding-top: calc(var(--header-h) + clamp(32px, 8svh, 96px)); padding-bottom: clamp(40px, 8svh, 96px);
  grid-template-rows: auto 1fr; row-gap: clamp(32px, 6svh, 64px);
}
.ab-hero__mark { grid-column: 1 / span 4; grid-row: 1; width: clamp(200px, 36svh, 360px); }
.ab-hero__mark img { width: 100%; height: auto; }
.ab-hero__slogan { grid-column: 1 / span 8; grid-row: 2; margin: 0; font-size: clamp(80px, min(10.4vw, 16svh), 176px); align-self: end; }
.ab-hero__slogan .line:nth-child(2) > span { padding-left: calc(2 * (var(--col) + var(--g))); }
.ab-hero__title { grid-column: 9 / span 4; grid-row: 2; align-self: end; margin: 0 0 0.3em; word-break: keep-all; word-break: auto-phrase; }
.ab-hero__slogan .line:nth-child(1) { --li: 0; } .ab-hero__slogan .line:nth-child(2) { --li: 1; } .ab-hero__slogan .line:nth-child(3) { --li: 2; }

/* ---------- A01 NAME ---------- */
.ab-name__grid { row-gap: var(--s8); align-items: start; }
.ab-name__head { grid-column: 1 / span 3; grid-row: 1; }
.ab-name__word {
  grid-column: 4 / -1; grid-row: 1; margin: 0; justify-self: end;
  font-family: var(--f-display); font-weight: 700; font-size: clamp(112px, 15vw, 260px); line-height: 0.8; letter-spacing: -0.01em; color: var(--paper-rule);
}
.ab-name__q { grid-column: 1 / span 5; grid-row: 2; }
.ab-name__a { grid-column: 7 / span 5; grid-row: 2; padding-top: 10px; }

/* ---------- A02 MOJOTEAM ---------- */
.ab-team__grid { row-gap: var(--s6); align-items: start; grid-template-rows: auto auto 1fr; }   /* the photo's extra height goes below the text */
.ab-team__head { grid-column: 1 / span 6; grid-row: 1; }
.ab-team__title { margin: 20px 0 0; }
.ab-team__title .t-h2 { display: block; white-space: nowrap; }
.ab-team__q { grid-column: 1 / span 5; grid-row: 2; }
.ab-team__a { grid-column: 1 / span 5; grid-row: 3; }
.ab-team__fig { grid-column: 7 / span 6; grid-row: 2 / span 2; align-self: start; }
/* m30-model-si (2:3 studio portrait) framed 1:1: head to thighs, both hands, the headstock — a crop distinct from m30.html's 4:5 */
.ab-team__img { aspect-ratio: 1 / 1; }
.ab-team__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* ---------- A03 DESIGN ---------- */
.ab-design__grid { row-gap: var(--s6); align-items: start; }
.ab-design__head { grid-column: 1 / span 3; grid-row: 1; }
.ab-design__q { grid-column: 1 / span 5; grid-row: 2; }
.ab-design__a { grid-column: 7 / span 5; grid-row: 2; padding-top: 10px; }
.ab-design__more { margin: var(--s4) 0 0; }
.ab-design__fig { width: min(84vw, 1520px); margin: var(--s16) auto 0; }
.ab-design__img { aspect-ratio: 3887 / 1286; overflow: visible; }
.ab-design__img img { object-fit: contain; }

/* ---------- A04 GIVING ---------- */
.ab-give__grid { align-items: center; row-gap: var(--s8); }
.ab-give__fig { grid-column: 1 / span 7; grid-row: 1; }
.ab-give__img {
  aspect-ratio: 3218 / 2475;
  -webkit-mask-image: linear-gradient(to right, #000 78%, transparent 100%), linear-gradient(to bottom, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 78%, transparent 100%), linear-gradient(to bottom, #000 80%, transparent 100%); mask-composite: intersect;
}
.ab-give__text { grid-column: 9 / span 4; grid-row: 1; }
.ab-give__text .ab-q { margin-top: var(--s6); }
.ab-give__text .ab-a { margin-top: var(--s4); }
.ab-give__line { margin: var(--s6) 0 0; padding-top: var(--s3); border-top: 1px solid var(--rule); }

/* ---------- A05 CLOSING ---------- */
.ab-end__grid { row-gap: var(--s8); align-items: end; }
.ab-end__q { grid-column: 1 / span 6; grid-row: 1; margin: 0; word-break: keep-all; word-break: auto-phrase; }
.ab-end__links { grid-column: 1 / span 7; grid-row: 2; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ab-end__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; column-gap: var(--s3);
  min-height: 96px; padding-inline: 4px; border-bottom: 1px solid var(--rule); transition: background-color var(--d-micro) linear;
}
.ab-end__name { font-family: var(--f-display); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: 0.02em; }
.ab-end__links li:first-child .ab-end__name { font-family: var(--f-jp); font-weight: 700; font-size: 28px; letter-spacing: 0.06em; font-feature-settings: "palt"; }
.ab-end__note { font-size: 13px; line-height: 1.6; letter-spacing: 0.04em; color: var(--fg2); text-align: right; }
.ab-end__arrow { font-family: var(--f-display); font-size: 22px; text-align: right; transition: transform var(--d-short) var(--ease-out); }
.ab-end__row:hover, .ab-end__row:focus-visible { background: var(--paper-hover); }
.ab-end__row:hover .ab-end__arrow, .ab-end__row:focus-visible .ab-end__arrow { transform: translateX(6px); }
.ab-end__buy { grid-column: 9 / span 4; grid-row: 2; display: grid; justify-items: start; gap: var(--s3); }
.ab-end__buy .t-body { margin: 0; }
.ab-end__social { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s3); margin: var(--s2) 0 0; }
.ab-end__social .t-small { margin-right: 4px; }

/* ---------- tablet (8 columns) ---------- */
@media (max-width: 1279px) {
  .ab-hero__grid { grid-template-rows: auto 1fr auto; }
  .ab-hero__mark { grid-column: 1 / span 3; width: clamp(180px, 28svh, 280px); }
  .ab-hero__slogan { grid-column: 1 / -1; font-size: clamp(72px, min(10vw, 12svh), 128px); }
  .ab-hero__title { grid-column: 4 / -1; grid-row: 3; margin: 0; }
  .ab-name__head { grid-column: 1 / span 3; }
  .ab-name__word { grid-column: 3 / -1; }
  .ab-name__q, .ab-design__q { grid-column: 1 / -1; }
  .ab-name__a, .ab-design__a { grid-column: 1 / span 6; grid-row: 3; padding-top: 0; }
  .ab-team__head, .ab-team__q, .ab-team__a { grid-column: 1 / span 6; }
  .ab-team__fig { grid-column: 3 / -1; grid-row: 4; margin-top: var(--s6); }
  .ab-give__fig { grid-column: 1 / -1; }
  .ab-give__text { grid-column: 1 / span 6; grid-row: 2; }
  .ab-end__q { grid-column: 1 / -1; }
  .ab-end__links { grid-column: 1 / -1; }
  .ab-end__buy { grid-column: 1 / span 6; grid-row: 3; }
}

/* ---------- phone (4 columns) ---------- */
@media (max-width: 767px) {
  .ab-hero__grid { min-height: max(100svh, 600px); padding-top: calc(var(--header-h) + var(--s8)); padding-bottom: var(--s8); row-gap: var(--s6); }
  .ab-hero__mark { grid-column: 1 / span 3; width: min(100%, 220px); }
  .ab-hero__slogan { font-size: 14vw; }
  .ab-hero__slogan .line:nth-child(2) > span { padding-left: 0; }
  .ab-hero__title { grid-column: 1 / -1; }
  .ab-name__head, .ab-name__a, .ab-design__a, .ab-team__head, .ab-team__q, .ab-team__a, .ab-give__text, .ab-end__buy { grid-column: 1 / -1; }
  .ab-name__word { grid-column: 1 / -1; grid-row: 2; justify-self: start; font-size: 25vw; }
  .ab-name__q { grid-row: 3; }
  .ab-name__a { grid-row: 4; }
  .ab-name__grid, .ab-design__grid, .ab-team__grid { row-gap: var(--s4); }
  .ab-team__fig { grid-column: 1 / -1; }
  .ab-design__fig { width: auto; margin: var(--s8) var(--m) 0; }
  .ab-give__grid { row-gap: var(--s6); }
  .ab-give__img { -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }
  .ab-end__row { grid-template-columns: minmax(0, 1fr) 24px; row-gap: 2px; min-height: 80px; padding-block: 14px; }
  .ab-end__name { font-size: 32px; }
  .ab-end__links li:first-child .ab-end__name { font-size: 22px; }
  .ab-end__note { grid-column: 1; grid-row: 2; text-align: left; font-size: 12px; }
  .ab-end__arrow { grid-column: 2; grid-row: 1 / span 2; }
  .ab-end__buy .btn { width: 100%; justify-content: space-between; }
}