/* cohesion-r5: this sheet is the "legacy" layer — site/shared/cohesion-r5.css (unlayered, loaded last) sets the shared
   rails, rhythm and type roles over it. */
@layer legacy{
/* =====================================================================================================================
   detail-polish r4 (imagegen-master-20261104/detail-polish-20261104/IMPLEMENTATION.md): the laurels (laurels-r4), the A FV
   callouts (callouts-r4) and A reason 02 (cycle-mobile-r4 / cycle-desktop-r4). Loaded last. Words, figures, links and
   scripts unchanged.
   ===================================================================================================================== */

/* ---- laurels: branch | words | branch, the branch keeping its own aspect ratio; a gap between, never a touch ---- */
.laurel{display:grid;grid-template-columns:auto auto auto;align-items:center;justify-content:center;column-gap:calc(3 * var(--u))}
.laurel .laurel-branch{display:block;width:auto;height:var(--lh,calc(72 * var(--u)));overflow:visible}
.laurel .laurel-branch--r{transform:scaleX(-1)}
.laurel-text{margin:0}
/* A FV: two pairs side by side with their own gap; no rule between them */
.a-laurels{display:flex;justify-content:center;align-items:center;column-gap:calc(12 * var(--u));margin:calc(8 * var(--u)) 0 0}
.a-laurels::before{display:none}
.a-fv .laurel{--lh:calc(72 * var(--u))}
.a-fv .laurel-text>.laurel-fig{display:flex;align-items:baseline;justify-content:center;gap:calc(1 * var(--u))}
.a-fv .laurel-fig em{font-size:calc(25 * var(--u))}
/* B FV: the same drawing, its words without the old negative margins */
.b-fv .laurel{--lh:calc(76 * var(--u));column-gap:calc(2 * var(--u))}
.b-fv .laurel-text{margin:0}
/* B-04 */
.b-about .laurel{--lh:calc(64 * var(--u));column-gap:calc(5 * var(--u))}

/* ---- A FV callouts: one closed outline (circle + tail) under the live words ---- */
.a-fv .bubble{background:none;box-shadow:none;border-radius:0;isolation:isolate}
.a-fv .bubble::after{display:none}
.bubble-shape{position:absolute;z-index:-1;left:calc(var(--pad) * -1%);top:calc(var(--pad) * -1%);width:calc(100% + var(--pad) * 2%);height:calc(100% + var(--pad) * 2%);overflow:visible;filter:drop-shadow(0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(20,60,70,.14))}
.bubble-shape path{fill:#fff;stroke:var(--teal);stroke-width:1.7;stroke-linejoin:round}
.a-fv .bubble>span,.a-fv .bubble>strong{position:relative}

/* ---- A reason 02: phones — label | media in three rows, a connector lane on the left for the way back ---- */
.r02-flow{position:relative;margin:calc(18 * var(--u)) 0 0;padding:0}
.r02-steps{position:relative;display:grid;row-gap:calc(24 * var(--u));margin:0;padding:0 0 0 calc(26 * var(--u));list-style:none}
.r02-step{position:relative;display:grid;grid-template-columns:calc(112 * var(--u)) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:calc(10 * var(--u));align-items:start}
.r02-label{grid-column:1;margin:0;font-size:calc(24 * var(--u));font-weight:900;line-height:1.15;letter-spacing:.01em;color:var(--ink);white-space:nowrap;font-feature-settings:'palt'}
.r02-label b{margin-right:calc(5 * var(--u));font-weight:900;color:var(--teal)}
.r02-sub{grid-column:1;margin:calc(6 * var(--u)) 0 0;font-size:calc(13.6 * var(--u));font-weight:800;line-height:1.45;color:var(--ink);white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
.r02-media{grid-column:2;grid-row:1 / span 3;position:relative;display:block;aspect-ratio:16 / 9;overflow:hidden;border-radius:calc(5 * var(--u));background:#fff;box-shadow:0 0 0 1px rgba(20,48,56,.09),0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(20,48,56,.12)}
.r02-media img{display:block;width:100%;height:100%;object-fit:cover}
.r02-media--make img{object-position:55% 50%}
.r02-media--chat{background:none;box-shadow:none}
.r02-chat{display:block;width:100%;height:100%}
.r02-note{grid-column:2;grid-row:4;margin-top:calc(4 * var(--u));font-size:max(10px,calc(10.5 * var(--u)));line-height:1.3;color:var(--muted)}
/* 01 → 02 → 03: a short arrow in the gap above each next label */
.r02-step+.r02-step::before{content:'';position:absolute;left:calc(14 * var(--u));top:calc(-19 * var(--u));width:2px;height:calc(11 * var(--u));background:var(--teal)}
.r02-step+.r02-step::after{content:'';position:absolute;left:calc(14 * var(--u) - 4px);top:calc(-9 * var(--u));border:5px solid transparent;border-top:7px solid var(--teal);border-bottom:0}
/* 03 → 01: the lane on the left, from under 03 back up into 01 */
.r02-steps::before{content:'';position:absolute;left:0;top:calc(12 * var(--u));bottom:calc(-14 * var(--u));width:calc(16 * var(--u));border:2px solid var(--teal);border-right:0;border-radius:calc(10 * var(--u)) 0 0 calc(10 * var(--u))}
.r02-steps::after{content:'';position:absolute;left:calc(16 * var(--u) - 1px);top:calc(12 * var(--u) - 5px);border:6px solid transparent;border-left:8px solid var(--teal);border-right:0}
.r02-return{display:block;width:calc(132 * var(--u));height:0;margin:calc(14 * var(--u) - 2px) 0 0 calc(14 * var(--u));border-top:2px solid var(--teal)}
.r02-result{margin:calc(22 * var(--u)) 0 0;text-align:center;font-size:calc(27 * var(--u));font-weight:900;line-height:1.3;letter-spacing:.01em;color:var(--ink);font-feature-settings:'palt'}
.r02-result::after{content:'';display:block;width:calc(64 * var(--u));height:calc(3 * var(--u));margin:calc(8 * var(--u)) auto 0;background:var(--teal)}

/* ---- A reason 02: wide screens — the heading over a full-width figure: three equal columns, → in the gaps, one U-shaped
   way back under the media, the result on its own row (cycle-desktop-r4) ---- */
@media (min-width:768px){
  .a-reasons>.reason--loop{max-width:min(100%,1080px)}
}
@media (min-width:768px) and (max-width:1039px){
  /* the 600–1039 reading column is ~600px: reason 02's three columns take the page width instead (24–32px from the edges) */
  .a-reasons>.reason--loop{max-width:none;margin-left:calc(28px - var(--pad));margin-right:calc(28px - var(--pad))}
}
@media (min-width:768px){
  .r02-flow{--g:clamp(48px,6vw,84px);margin-top:28px}
  .r02-steps{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);row-gap:0;padding:0}
  .r02-steps::before,.r02-steps::after{display:none}
  .r02-step{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;column-gap:0}
  .r02-label{font-size:clamp(22px,2.7vw,34px)}
  .r02-sub{margin-top:6px;font-size:clamp(14px,1.55vw,19px);white-space:nowrap}
  .r02-media{grid-column:1;grid-row:auto;margin-top:clamp(12px,1.6vw,20px);border-radius:6px}
  .r02-note{grid-column:1;grid-row:auto;margin-top:8px;text-align:center;font-size:12.5px}
  .r02-step+.r02-step::before{left:calc(var(--g) * -.8);top:calc(clamp(22px,2.7vw,34px) * .58);width:calc(var(--g) * .58 - 8px);height:2px}
  .r02-step+.r02-step::after{left:calc(var(--g) * -.22 - 9px);top:calc(clamp(22px,2.7vw,34px) * .58 - 5px);border:6px solid transparent;border-left:9px solid var(--teal);border-right:0}
  .r02-return{position:relative;width:auto;height:46px;margin:16px calc(100% / 6 - var(--g) / 3) 0;border:2px solid var(--teal);border-top:0;border-radius:0 0 30px 30px}
  .r02-return::before{content:'';position:absolute;left:-8px;top:-12px;border:7px solid transparent;border-bottom:11px solid var(--teal);border-top:0}
  .r02-result{margin-top:26px;font-size:clamp(26px,3.1vw,40px)}
  .r02-result::after{width:clamp(64px,7vw,96px);height:4px}
}
@media (min-width:1040px){
  /* the heading over the figure (IMPLEMENTATION.md: reason 02 alone may leave the heading-left / figure-right grid) */
  .a-reasons .reason--loop{display:block}
  .a-reasons .reason--loop>.r-top{margin-bottom:8px}
}

/* callouts: the words inside the circle's safe area with a margin (the widest line 約30,000人 included) — a slightly larger
   circle around the same centre, the block a little lower (optical centre), the figures a touch smaller */
.a-fv .bubble{width:calc(104 * var(--u));height:calc(104 * var(--u));padding:0 0 calc(3 * var(--u))}
.a-fv .bubble--n1{left:calc(10 * var(--u));top:calc(-2 * var(--u))}
.a-fv .bubble--h{left:calc(268 * var(--u));top:calc(25 * var(--u))}
.a-fv .bubble--n2{left:calc(128.3 * var(--u));top:calc(192.3 * var(--u));width:calc(98 * var(--u));height:calc(98 * var(--u))}
.a-fv .bubble>span{font-size:calc(12.4 * var(--u))}
.a-fv .bubble>span+span{font-size:calc(13 * var(--u))}
.a-fv .bubble strong{font-size:calc(13.6 * var(--u))}
.a-fv .bubble em{font-size:calc(19.6 * var(--u))}
.a-fv .bubble small{font-size:calc(12 * var(--u))}
.a-fv .bubble--h em{font-size:calc(16.4 * var(--u))}
.a-fv .bubble--n2>span+span{font-size:calc(10.8 * var(--u))}
.a-fv .bubble--n2 strong{font-size:calc(12.8 * var(--u))}
.a-fv .bubble--n2 em{font-size:calc(18.4 * var(--u))}

/* ---- after Codex's review of r4 ---- */
/* reason 02: the pale 02 clear of 学ぶ (its ink ran 3–7px into the heading's first glyph): a wider number column for this
   heading, 10–17px of air between them as in the drafts */
.a-reasons .reason--loop .r-top{grid-template-columns:calc(96 * var(--u)) minmax(0,1fr)}
/* reason 02, wide screens: rows sized by their content, so 01 (no note under its picture) lines up with 02 and 03 */
@media (min-width:768px){
  .r02-steps{align-items:start}
  .r02-step{align-content:start}
}
/* B FV laurel: A's hierarchy on one line — 1000 large in orange, 万人越え smaller in ink, upright, on one baseline */
.b-fv .laurel-text>.laurel-fig{display:flex;align-items:baseline;justify-content:center;gap:calc(1 * var(--u));margin-top:calc(3 * var(--u));font-size:calc(12.6 * var(--u));line-height:1.1;color:var(--ink);transform:none}
.b-fv .laurel-fig em{font-size:calc(22 * var(--u));letter-spacing:-.02em;color:var(--orange)}
}