/* =====================================================================
   River Tech — about.css (About page layout, dark surface)
   Primitives (label, marquee, tuck, reveal, btn-ring, link) come from base.css.
   Rhythm mirrors the reference About page:
   142 title -> 64 -> catch 24/16 -> 56 columns -> 80 statement marquee (reference 180; SP 120) -> tuck (-28)
   -> 24 label -> 80 cards -> 240 chapter (SP 180) -> 80 company facts -> 260 bottom (SP 240: the reference's 160
   page padding plus the 100 / 80 padding under its last card list).
   The statement gap is shorter than the reference's because our JP body is 15px (A15) instead of 12px, so the
   columns run ~170px taller; 80 keeps the giant statement caps rising at the foot of the 1440x900 first view.
   Three chapters like the reference (About / Profile / Service): Philosophy, Why River Tech (the tucked
   card pair), Company (the facts on the reference Profile's two-column grid).
   ===================================================================== */

.about {
  /* The reference's About rules (statement tuck, chapter labels) are #868686, the marquee's own grey,
     so the letters read as sinking behind the line; the footer rule stays #454545. */
  --line: var(--c-mute-dark);
  --about-col: 45%;
  --about-col-max: 462px;
  --about-chapter: 240px;
  --about-label-gap: 80px;
  --about-statement-gap: var(--space-80);
  --about-bottom: 260px;
  /* Reference About chips: 1px #C2C2C2 ring and white text on ink (base.css dims both on dark surfaces) */
  --chip-line: var(--c-line);
  /* Same ↗ geometry as works.css (.work-meta__link) so the glyph matches across pages; one token in base.css is
     requested in the round report (components.md section 16). */
  --icon-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 8.5 8.5 1.5M3 1.5h5.5V7' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  position: relative;
  padding-bottom: var(--about-bottom);
}

/* Japanese line breaking (as works.css / home.css): Chromium 119+ breaks at phrase boundaries (auto-phrase).
   Safari and Firefox drop that value and keep keep-all: they break only at spaces, after 、。 and at the <wbr>
   phrase marks in the HTML; overflow-wrap is the safety net for a run that still does not fit. line-break: strict
   keeps ー and small kana off line starts. text-wrap-style (the longhand) avoids one-glyph last lines without
   undoing white-space: nowrap on .about-nobr and the chips. */
.about :is(p, h1, h2, h3, dt, dd, li) {
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  line-break: strict;
  text-wrap-style: pretty;
}
/* Phrases kept whole: ones the segmenter still splits (取りの／ぞきます, 生まれが／ちです, つくる／こと, なったり／すると,
   ご相談／いただけます, ひと／つずつ), a modifier with its noun (小さなつかえが, そのつかえを, 必要な情報が, 必要な人の, その全体を,
   AIの活用を, 動画の配信, 制作と運営も, （中古車輸出）の運営), a short sentence (案内が見つからない。), "A sign-up", the name, the street */
.about-nobr { white-space: nowrap; }

/* Page label (h1) ------------------------------------------------------- */
.about-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 20px;
  padding-top: 142px;
}
.about-title__ja {
  font-family: var(--ff-jp);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: var(--ls-jp);
  color: var(--fg-mute);
}

/* ( 01 ) Philosophy ------------------------------------------------------ */
.about-intro { margin-top: 64px; }
.about-intro__catch { margin-top: 24px; }
.about-intro__ja { font-weight: 600; line-height: 1.4; } /* Hiragino W6 matches the reference catch's stroke weight */
.about-intro__en { margin-top: 16px; }
.about-cols {
  display: flex;
  justify-content: space-between;
  margin-top: 56px;
}
.about-cols__ja,
.about-cols__en {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: var(--about-col);
  max-width: var(--about-col-max);
}
/* 15px is the A15 floor for JP body (the reference sets 12px); 1.75 keeps the column compact enough for the
   statement marquee to reach the first view at 1440x900. */
.about-cols__ja p { font-size: .9375rem; line-height: 1.75; }
.about-cols__en p {
  font-family: var(--ff-latin);
  font-size: var(--fs-small);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--fg-mute);
}

/* Statement marquee: 80 s, grey on ink; the next block is tucked under its baseline.
   At 128px Bodoni Moda's automatic optical size (96) draws near-invisible hairlines; the small
   text cut ("opsz" 11) has the stroke contrast of the reference's Didot italic. */
.about-statement {
  margin-top: var(--about-statement-gap);
  color: var(--fg-mute);
}
.about-statement .accent-word { font-variation-settings: "opsz" 11; }

/* ( 02 ) Why River Tech (tucked) ------------------------------------------
   Measured on the reference: the rule hides the lowest ~.06em of the caps (8px of 92 at 1440,
   4px at 390). The default tuck (28/16) hides .07em, so the pull-up is eased by .01em. */
.about-why {
  margin-top: calc(var(--tuck) * -1 + .01 * var(--fs-banner));
  padding-top: var(--space-24);
}
/* Cards on the reference's About service grid: 460px cards, 100px apart, text column 90% / 314px.
   The two cards stretch to one height and the ring buttons sit on one line at the foot. */
.about-why__list {
  display: flex;
  gap: 100px;
  margin-top: var(--about-label-gap);
}
.about-why__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: calc(50% - 50px);
  max-width: 460px;
}
/* Weight 500: the reference title (Neue Haas Unica regular) draws ~5px stems at 40px; Inter Tight 400 draws 3-4px */
.about-why__en { margin-top: var(--space-40); font-weight: 500; }
/* JP title one step down from 18px: the reference card drops from the 40px EN title to a small JP line
   (13px); 15/13 keeps that scale contrast at a readable size for a real heading. */
.about-why__ja {
  margin-top: 14px;
  font-size: var(--fs-kicker);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: var(--ls-jp);
}
/* The reference text column (314px at 12px) holds about 26 characters a line; 26em keeps that measure
   at our 16px body instead of squeezing it to 19 characters. */
.about-why__text {
  width: 90%;
  max-width: 26em;
  margin-top: 32px; /* full white like the reference card text; hierarchy comes from size alone */
}
/* Reference card: tag chips 32px under the text. JP-safe chip size (A15) as .svc-chip / .home-svc__chip:
   13/12 instead of the chip's 11/10, one line each. */
.about-why__chips { margin-top: 32px; margin-bottom: var(--space-40); }
.about-chip {
  padding: 10px 12px;
  font-size: var(--fs-small);
  line-height: 1.3;
  letter-spacing: var(--ls-jp);
  white-space: nowrap;
  color: var(--fg);
}
/* The mini ring stays 40px; the link box grows to 44px so the whole control is a full touch target (WCAG 2.5.5) */
.about-why__link { min-height: 44px; margin-top: auto; }
.about-why__link .visually-hidden { text-transform: none; } /* the JP hint keeps "Japan JDM" in its own case for screen readers (A14) */

/* Chapter ( 03 ) ------------------------------------------------------------ */
.about-chapter { margin-top: var(--about-chapter); }
.about-chapter__body { margin-top: var(--about-label-gap); }

/* ( 03 ) Company: two lists on the reference Profile grid (photo 45% | detail 45%, max 462, space-between),
   the same columns as the Philosophy text, so no half of the chapter stands empty. Each list is the reference
   meta table (as on the work detail page: rows 36px apart, no rules), with the key column widened from 72px
   to 96px for Japanese keys (6 characters). */
.about-company__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.about-meta {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: var(--about-col);
  max-width: var(--about-col-max);
}
.about-meta__row {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.about-meta dt {
  flex: none;
  width: 96px;
  font-size: var(--fs-label);
  line-height: 1.4;
  color: var(--fg-mute);
}
.about-meta dd {
  min-width: 0;
  font-size: var(--fs-kicker);
  line-height: 1.65;
}
.about-meta__sub {
  display: block;
  font-family: var(--ff-latin);
  font-size: var(--fs-small);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--fg-mute);
}
.about-meta__num { font-family: var(--ff-latin); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-ui); }
.about-meta__list { display: flex; flex-direction: column; }
.about-meta__contact { font-family: var(--ff-latin); letter-spacing: var(--ls-ui); }
.about-ext { display: inline-flex; align-items: center; gap: 6px; }
.about-ext::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background-color: currentColor;
  -webkit-mask: var(--icon-ext) center / contain no-repeat;
  mask: var(--icon-ext) center / contain no-repeat;
  transition: transform var(--d-fast) var(--ease-cubic);
}
/* The arrow steps out toward the new tab, as on the work-detail meta link */
.about-ext:focus-visible::after { transform: translate(2px, -2px); }
.about-meta .link:active { color: var(--accent); } /* touch press feedback (hover is pointer-fine only) */
@media (hover: hover) and (pointer: fine) {
  .about-ext:hover::after { transform: translate(2px, -2px); }
}

/* Touch targets (WCAG 2.5.5): on phones and coarse pointers each meta link (one per row) gets a 44px-high box. The
   negative block margins give the extra height back, so the table rhythm does not move; the boxes reach 11px into
   the 36px row gaps and never overlap. Fine pointers keep the text-sized links, rows 36px apart (WCAG 2.5.8). */
@media (max-width: 768px), (pointer: coarse) {
  .about-tap {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: calc((44px - 1lh) / -2);
  }
}

/* SP ------------------------------------------------------------------- */
@media (max-width: 768px) {
  .about { --about-chapter: 180px; --about-statement-gap: 120px; --about-bottom: 240px; }
  /* One SP gutter for the whole page: base.css narrows .container--s to 85% here (29px at 390, 24 at 320), which
     put the body 9px inside the page label, the header logo and the footer (20 / 16). */
  .about .container--s { width: 90%; }
  .about-cols { display: block; }
  /* Measure caps instead of a tablet breakpoint: at 768 the stacked columns would run ~43 characters a line. */
  .about-cols__ja,
  .about-cols__en { gap: 8px; width: 100%; max-width: 34em; }
  .about-cols__en { margin-top: 28px; }
  .about-why__list { flex-direction: column; gap: 88px; }
  .about-why__item { width: 100%; max-width: none; }
  .about-why__en { margin-top: var(--space-24); }
  .about-why__text { width: 100%; max-width: 34em; margin-top: 24px; }
  .about-why__chips { margin-top: 24px; }
  /* one list on the phone: the second continues the first at the row gap */
  .about-company__body { display: block; }
  .about-meta { width: 100%; max-width: none; }
  .about-meta + .about-meta { margin-top: 36px; }
}

@media (forced-colors: active) {
  .about-ext::after { forced-color-adjust: none; background-color: CanvasText; }
}