/* css/sections.css: sections #familiar, #symptoms, #principles, #engineer, #about */

/* ---------------------------------------------------------------- sound familiar (§ 01)
   Five lines owners say, one drawing each, in one row on wide screens. Below them, a drawing of four
   small businesses beside twelve kinds we work with, each opening on a click. Drawings come from tools/iso.mjs. */
.familiar { padding-top: 72px; }
/* The row runs past the 1180px wrap, up to 1320px, so each drawing and line gets more room. */
.five-row {
  list-style: none; margin: 0 min(0px, calc((100% - min(1320px, 100vw - 56px)) / 2)); padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px;
}
.five-card {
  display: grid; grid-template-rows: auto 1fr; gap: 12px; padding: 14px 16px 20px;
  border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg);
  transition: translate .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.five-art { margin: 0; }
.five-art .iso { display: block; width: 100%; height: auto; overflow: visible; } /* the falling sheet starts above the frame */
.five-q { margin: 0; font: 600 1.08rem/1.38 var(--f-display); color: var(--ink); }
@media (hover: hover) {
  .five-card:hover { translate: 0 -4px; box-shadow: var(--shadow); border-color: color-mix(in oklab, var(--forest) 45%, var(--line-2)); }
}
.audience { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 64px; }
/* The drawing beside the list: one per kind of business, stacked in one cell, centred against the list. Only the
   current one shows; a swap fades and pops in about 180ms. js/site.js picks the current one (the bakery at rest). */
.who-art { margin: 0; display: grid; align-self: center; position: sticky; top: 110px; }
.who-pic { grid-area: 1 / 1; opacity: 0; visibility: hidden; scale: .96; transition: opacity .18s ease-out, scale .18s var(--ease-out), visibility 0s .18s; }
.who-pic.is-on { opacity: 1; visibility: visible; scale: 1; transition: opacity .18s ease-out, scale .18s var(--ease-out); }
.who-art .iso { display: block; width: 100%; height: auto; }
/* The ink lines (rails, ladders, handles, steam, the lens) sit on the dark floor in dark mode; lift them to the muted tone. */
html[data-theme="dark"] .who-art .iso :is(.handle, .scribble, .lens-ring, .lens-handle) { stroke: var(--muted); }
.who-copy h3 { margin: 0 0 10px; font: 600 clamp(1.5rem, 2.4vw, 1.9rem)/1.2 var(--f-display); }
.who-copy > p { margin: 0 0 18px; color: var(--muted); font-size: 1.05rem; }
/* Kinds of business we work with. A click or tap opens a block (.is-open): it grows downward (grid rows 0fr to
   1fr) to show a line about the work and the plus turns to a minus; a second click closes it. Pointing at a
   closed block pops a thought bubble, "Open this!", and shows that business in the drawing; pointing does not
   open it. Without the script every block stays open. */
.who-copy .who-hint { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; font-size: .78rem; }
.who-hint-t { display: none; }
html:not(.js) .who-copy .who-hint { display: none; }
@media (hover: none) { .who-hint-h { display: none; } .who-hint-t { display: inline; } }
.who-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 10px; align-items: start;
}
.who-item {
  position: relative; display: grid; grid-template-rows: auto 0fr;
  border: 1px solid var(--line-2); border-radius: 4px; background: color-mix(in oklab, var(--forest) 7%, var(--bg));
  cursor: pointer;
  transition: grid-template-rows .34s var(--ease-out), translate .3s var(--ease-out), box-shadow .3s var(--ease-out),
    border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.who-q {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 11px 14px 11px 16px;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.who-q:focus-visible { outline: 2px solid var(--forest); outline-offset: -3px; border-radius: 4px; }
.who-name { font-size: .98rem; font-weight: 500; line-height: 1.35; }
.who-ic { flex: none; position: relative; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%; color: var(--forest); }
.who-ic::before, .who-ic::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; margin: -.75px 0 0 -4px;
  background: currentColor; border-radius: 1px; transition: transform .3s var(--ease-out);
}
.who-ic::after { transform: rotate(90deg); }
.who-more { overflow: hidden; min-height: 0; }
.who-more-in { margin: 0; padding: 0 14px 12px 16px; font-size: .92rem; line-height: 1.5; color: var(--muted); }
/* the business the drawing shows */
.who-item.is-cur { border-color: color-mix(in oklab, var(--forest) 60%, var(--line-2)); background-color: var(--bg); }
.who-item.is-open {
  grid-template-rows: auto 1fr; translate: 0 -2px; background-color: var(--bg); box-shadow: var(--shadow);
  border-color: color-mix(in oklab, var(--forest) 60%, var(--line-2));
}
html:not(.js) .who-item { grid-template-rows: auto 1fr; cursor: default; }
html:not(.js) .who-q { cursor: default; }
.who-item.is-open .who-ic::after, html:not(.js) .who-ic::after { transform: rotate(0deg); }
/* the thought bubble: a rounded cloud over the block's top right corner, two small dots trailing down to the
   plus. It springs in while the pointer is on a closed block or keyboard focus is on its button. */
.who-bubble {
  position: absolute; right: 6px; bottom: calc(100% - 4px); z-index: 3;
  padding: 7px 13px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font: 600 .8rem/1 var(--f-body); color: #ffffff; background: var(--accent-side);
  box-shadow: 0 6px 18px -8px var(--accent-side);
  opacity: 0; scale: .3; translate: 0 8px; transform-origin: 85% 130%;
  transition: opacity .18s ease, scale .45s var(--ease-spring), translate .45s var(--ease-spring);
}
.who-bubble::before, .who-bubble::after { content: ""; position: absolute; border-radius: 50%; background: var(--accent-side); }
.who-bubble::before { width: 9px; height: 9px; right: 24px; bottom: -8px; }
.who-bubble::after { width: 5px; height: 5px; right: 19px; bottom: -14px; }
html:not(.js) .who-bubble { display: none; }
.who-item:not(.is-open) .who-q:focus-visible .who-bubble { opacity: 1; scale: 1; translate: 0 0; }
@media (hover: hover) {
  .who-item:not(.is-open):hover .who-bubble { opacity: 1; scale: 1; translate: 0 0; }
}

/* ---------------------------------------------------------------- symptoms
   Each question is a box. js/site.js makes the question a toggle; opening it
   grows the box downward (grid rows 0fr to 1fr) to show the answer. Without
   the script every box stays open. */
.sym-hint { display: none; margin: -28px 0 22px; font-size: .78rem; color: var(--muted); }
.js .sym-hint { display: block; }
.sym-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: start; }
.sym {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg);
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.sym::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--forest);
  transform: scaleY(0); transform-origin: top; transition: transform .3s var(--ease-out);
}
.sym-h { margin: 0; font: inherit; }
.sym-q {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) 20px; gap: 12px; align-items: baseline;
  width: 100%; margin: 0; padding: 20px 20px 20px 18px; border: 0; background: none; cursor: pointer;
  text-align: left; color: var(--ink); font: 600 clamp(1.1rem, 1.5vw, 1.28rem)/1.3 var(--f-display);
}
.sym-q:focus-visible { outline: 2px solid var(--forest); outline-offset: -4px; border-radius: 4px; }
.sym-n { font-size: .78rem; font-weight: 500; color: var(--muted); }
.sym-plus { position: relative; width: 14px; height: 14px; align-self: center; }
.sym-plus::before, .sym-plus::after {
  content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 1px; background: var(--forest);
  transition: transform .35s var(--ease-spring);
}
.sym-plus::after { transform: rotate(90deg); }
.sym.is-open .sym-plus::after { transform: rotate(0deg); }
.sym-plus { display: none; }
.js .sym-plus { display: block; }
.sym-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s var(--ease-out); }
.sym-body > div { min-height: 0; overflow: hidden; }
.js .sym:not(.is-open) .sym-body { grid-template-rows: 0fr; }
.js .sym:not(.is-open) .sym-body > div { visibility: hidden; transition: visibility 0s .4s; }
.sym-a { margin: 0; padding: 0 20px 20px calc(18px + 2.2rem + 12px); color: var(--muted); font-size: 1.02rem; line-height: 1.45; }
.sym-a .mono { display: block; margin-bottom: 4px; font-size: .68rem; color: var(--forest); letter-spacing: .04em; }
.sym-a:has(+ .sym-more) { padding-bottom: 8px; }
.sym-more { margin: 0; padding: 0 20px 20px calc(18px + 2.2rem + 12px); color: var(--muted); font-size: .96rem; line-height: 1.55; max-width: 62ch; }
/* auto-cycle (js/site.js): the open box shows a thin bar along its foot that fills while it waits; when it ends, the next box opens */
.sym-dwell { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--forest); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.sym.is-auto .sym-dwell { animation: sym-dwell var(--dwell, 8s) linear .45s forwards; }
.sym-list.is-held .sym.is-auto .sym-dwell { animation-play-state: paused; }
@keyframes sym-dwell { to { transform: scaleX(1); } }
.sym.is-open { border-color: color-mix(in oklab, var(--forest) 55%, var(--line-2)); }
.sym.is-open::before { transform: scaleY(1); }
.sym.is-open .sym-a { color: var(--ink); }
@media (hover: hover) {
  .sym:hover { border-color: var(--forest); background: color-mix(in oklab, var(--forest) 4%, var(--bg)); }
  .sym:hover::before { transform: scaleY(1); }
}
.sym-close { margin: 28px 0 0; font-size: 1.12rem; color: var(--muted); }
.sym-close a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- principles
   Three rows, one per principle: the kanji and its drawn romaji on the left,
   the plain line and what it means for a client on the right. */
.kp-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.kp {
  display: grid; grid-template-columns: 3rem minmax(0, 17rem) minmax(0, 1fr); gap: 0 32px; align-items: start;
  padding: 32px 0; border-bottom: 1px solid var(--line-2);
}
.kp-n { font-size: .78rem; color: var(--muted); padding-top: 10px; }
.kp-term { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.kp-jp { font: 500 clamp(2.4rem, 4vw, 3.1rem)/1 var(--f-jp); color: var(--ink); white-space: nowrap; }
.kp-term .kata-word { display: block; height: 15px; width: auto; color: var(--forest); }
.kp-mean { font-size: .74rem; color: var(--muted); letter-spacing: .02em; }
.kp-text h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 600; margin: 4px 0 10px; }
.kp-text p { margin: 0; max-width: 56ch; font-size: 1.08rem; line-height: 1.55; color: var(--muted); }

/* The drop (js/kp.js): pointing at a principle, or its "See it drawn" button, opens a panel under the row with an
   isometric drawing of rice terraces in brown and green (tools/iso.mjs terraces()). The caption sits under the term
   column and the drawing under the text column. On open the hillside assembles piece by piece; then js/kp.js puts
   b2, b3 and b4 on the svg, about 3.5 s apart, and the pieces marked kp-at2, kp-at3 or kp-at4 come in. */
.kp-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 11px;
  font: 500 .74rem/1 var(--f-mono); letter-spacing: .03em; color: var(--forest);
  background: none; border: 1px solid var(--line-2); border-radius: 4px; cursor: pointer;
  transition: border-color .25s, background-color .25s;
}
.kp-more:hover, .kp.is-open .kp-more { border-color: var(--forest); background: color-mix(in oklab, var(--forest) 6%, var(--bg)); }
.kp-more svg { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: rotate .5s cubic-bezier(.45, 0, .2, 1); }
.kp.is-open .kp-more svg { rotate: 180deg; }
.kp-drop { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .75s cubic-bezier(.45, 0, .2, 1); }
.kp.is-open .kp-drop { grid-template-rows: 1fr; }
.kp-drop > div { min-height: 0; overflow: hidden; }
.kp-drop-in {
  display: grid; grid-template-columns: 3rem minmax(0, 17rem) minmax(0, 1fr); gap: 0 32px; align-items: start;
  padding-top: 26px; opacity: 0; transition: opacity .3s;
}
.kp.is-open .kp-drop-in { opacity: 1; transition: opacity .5s .25s; }
.kp-cap { grid-column: 2; display: flex; flex-direction: column; gap: 10px; margin: 0; padding-top: 4px; }
.kp-cap b { font-size: .72rem; font-weight: 500; letter-spacing: .06em; color: var(--forest); }
.kp-cap span { font: 500 1.02rem/1.45 var(--f-body); color: var(--ink); min-height: 2.9em; }
.kp-art { grid-column: 3; margin: 0; max-width: 560px; padding: 10px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--bg); }
.kp-art svg { display: block; width: 100%; height: auto; }

/* Assembly: js/kp.js wraps each top-level piece in .kp-b, numbered --k, and adds .is-in on open. */
.kp-art.is-in .kp-b { animation: kp-build .5s var(--ease-out) both; animation-delay: calc(250ms + var(--k) * 55ms); }
@keyframes kp-build { from { opacity: 0; transform: translateY(-14px); } }

/* Beats. A piece waits hidden until its beat, then comes in after its own --d. */
.kp-at2, .kp-at3, .kp-at4 {
  opacity: 0;
  transition: opacity .45s ease-out var(--d, 0ms), transform .6s cubic-bezier(.2, .8, .3, 1) var(--d, 0ms),
    stroke-dashoffset .9s cubic-bezier(.45, 0, .2, 1) var(--d, 0ms);
}
.kp-pop { transform: translateY(-9px); }
.kp-pour { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); }
.kp-ring { stroke-dasharray: 1; stroke-dashoffset: 1; }
.iso .kp-ring { fill: none; stroke: var(--c-bark); stroke-width: 2.2; stroke-linecap: round; }
.b2 .kp-at2, .b3 .kp-at3, .b4 .kp-at4 { opacity: 1; transform: none; stroke-dashoffset: 0; }
.kp-lift { transition: transform .9s cubic-bezier(.45, 0, .2, 1); }
.b2 .kp-lift { transform: translateY(-13px); }

/* The figure in 現場 walks to the lip of the top terrace, steps down, and stops halfway along the second (beat 2),
   then walks on to the gate (beat 3) and stays there (beat 4). --ax/--ay and the rest come from tools/iso.mjs. */
.b2 .kp-walk { animation: kp-walk-a 2.6s ease-in-out forwards; }
.b3 .kp-walk { animation: kp-walk-b 1.8s ease-in-out forwards; }
.b4 .kp-walk { animation: none; transform: translate(var(--cx), var(--cy)); }
@keyframes kp-walk-a {
  0% { transform: translate(0, 0); }
  62% { transform: translate(var(--ax), var(--ay)); }
  80% { transform: translate(var(--bx), var(--by)); }
  100% { transform: translate(var(--mx), var(--my)); }
}
@keyframes kp-walk-b {
  from { transform: translate(var(--mx), var(--my)); }
  to { transform: translate(var(--cx), var(--cy)); }
}
.b2 .kp-bob { animation: kp-bob .325s ease-in-out 8; }
.b3 .kp-bob { animation: kp-bob-b .3s ease-in-out 6; }
.b4 .kp-bob { animation: none; }
@keyframes kp-bob { 50% { transform: translateY(-1.6px); } }
@keyframes kp-bob-b { 50% { transform: translateY(-1.6px); } }

/* Pieces of the hillside. The water has no blue: paddy water takes the sky's gray and the rice's green, and reads as
   water through its recess, glints and rings (tools/iso.mjs terraces()). */
.kp-w0 { stop-color: color-mix(in oklab, var(--c-forest) 34%, color-mix(in oklab, var(--c-ocean), white 46%)); }
.kp-w1 { stop-color: color-mix(in oklab, var(--c-moss) 24%, color-mix(in oklab, var(--c-ocean), white 68%)); }
.kp-w2 { stop-color: color-mix(in oklab, var(--c-paper), white 60%); }
.iso .kp-water { fill: color-mix(in oklab, var(--c-moss) 16%, color-mix(in oklab, var(--c-ocean), white 62%)); }
.iso .kp-bank-l { fill: color-mix(in oklab, var(--c-sand), var(--c-bark) 35%); stroke: none; }
.iso .kp-bank-r { fill: color-mix(in oklab, var(--c-sand), var(--c-bark) 65%); stroke: none; }
.iso .kp-sheen { fill: white; stroke: none; opacity: .75; }
.kp-art.is-in .kp-sheen { animation: kp-glint 3.4s ease-in-out infinite alternate; animation-delay: calc(var(--j) * -1.7s); }
@keyframes kp-glint { from { opacity: .3; } to { opacity: .85; } }
.iso .kp-fall { fill: color-mix(in oklab, var(--c-moss) 12%, color-mix(in oklab, var(--c-ocean), white 56%)); }
.iso .kp-blade { fill: none; stroke: var(--c-forest); stroke-width: 1.3; stroke-linecap: round; }
.iso .kp-blade--lt { stroke: var(--c-moss); }
.iso .kp-rip { fill: none; stroke: color-mix(in oklab, var(--c-forest) 40%, var(--c-ocean)); stroke-width: 1; opacity: .5; transform-box: fill-box; transform-origin: center; }
.kp-art.is-in .kp-rip { animation: kp-rip 4.2s ease-out infinite; }
.iso .kp-rip2 { transform: scale(.55); }
.kp-art.is-in .kp-rip2 { animation-delay: -2.1s; }
@keyframes kp-rip { from { transform: scale(.2); opacity: .95; } to { transform: scale(1.3); opacity: 0; } }
.iso .kp-streak { stroke: white; stroke-width: 1; stroke-dasharray: 2.5 4.5; opacity: .9; }
.kp-art.is-in .kp-streak { animation: kp-flow .9s linear infinite; }
@keyframes kp-flow { to { stroke-dashoffset: -7; } }
.iso .kp-crack { stroke: var(--c-bark); stroke-width: 1.1; }
.iso .kp-zero { fill: var(--c-paper); stroke: var(--c-bark); stroke-width: .9; stroke-dasharray: 2 1.6; }
.iso .kp-shadow { fill: var(--c-ink); stroke: none; opacity: .2; }
.iso .kp-head { fill: var(--c-ink); }
.iso .note--kp .note-txt { font-size: 11px; }

/* Restarting the story snaps every piece back at once; calm (reduced motion or ?static) shows the last beat, still. */
.kp-art.kp-instant * { animation: none !important; transition: none !important; }
.kp-art.is-calm * { animation: none !important; transition: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- engineer */
.eng { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.eng-head { max-width: none; margin: 0; }
/* The founder's photo sits beside the heading. */
.eng-id { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; }
.eng-id h2 { margin: 0; }
.eng-photo {
  flex: none; width: 108px; aspect-ratio: 4 / 5; margin: 0; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
}
.eng-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eng-lead { font-size: clamp(1.2rem, 1.6vw, 1.38rem); line-height: 1.5; color: var(--ink); margin: 0 0 22px; }
.eng-lead strong { font-weight: 700; }
.eng-more { font-size: .8rem; color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
.eng-facts { margin: 0; border-top: 2px solid var(--ink); }
.eng-facts > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line-2); }
.eng-facts dt { font-size: .72rem; color: var(--forest); letter-spacing: .04em; }
.eng-facts dt small { display: block; margin-top: 3px; font-size: .66rem; color: var(--muted); letter-spacing: .02em; }
.eng-facts dd { margin: 0; font-size: 1.1rem; line-height: 1.35; }

/* ---------------------------------------------------------------- about */
.me { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 64px; align-items: start; }
.me-photo { margin: 0; position: sticky; top: 110px; }
.me-frame {
  aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid var(--line); background: #fff; border-radius: 4px;
}
.me-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.me-text .section-head { margin-bottom: 26px; }
.me-p { font-size: 1.15rem; line-height: 1.6; margin: 0 0 30px; max-width: 64ch; }
.me-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); max-width: 64ch; }
.me-list li { position: relative; padding: 13px 0 13px 24px; border-bottom: 1px solid var(--line-2); line-height: 1.45; }
.me-list li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 7px; height: 7px; background: var(--forest); }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 1100px) {
  .five-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .five-card { grid-column: span 2; }
  .five-card:nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 960px) {
  .audience { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }
  .who-art { max-width: 400px; position: static; }
  .eng { grid-template-columns: 1fr; gap: 40px; }
  .me { grid-template-columns: 1fr; gap: 36px; }
  .me-photo { position: static; max-width: 280px; }
}
@media (max-width: 640px) {
  .familiar { padding-top: 56px; }
  .five-row { grid-template-columns: 1fr; gap: 10px; }
  .five-card, .five-card:nth-child(4) { grid-column: auto; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: none; align-items: center; gap: 12px; padding: 10px 14px 10px 8px; }
  .five-q { font-size: .98rem; }
  .sym-list { grid-template-columns: 1fr; gap: 10px; }
  .sym-q { grid-template-columns: 1.8rem minmax(0, 1fr) 16px; gap: 10px; padding: 16px 14px; }
  .sym-a { padding: 0 14px 16px calc(14px + 1.8rem + 10px); font-size: 1rem; }
  .sym-more { padding: 0 14px 16px calc(14px + 1.8rem + 10px); font-size: .94rem; }
  .kp { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 26px 0; }
  .kp-n { display: none; }
  .kp-drop-in { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 18px; }
  .kp-cap, .kp-art { grid-column: 1; }
  .kp-cap span { min-height: 0; }
  .eng-facts > div { grid-template-columns: 5.2rem minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .five-card { transition: none; }
  .who-item, .who-ic::before, .who-ic::after, .who-pic, .who-pic.is-on, .who-bubble { transition: none; }
  .who-item { translate: none !important; }
  .sym, .sym::before, .sym-body, .sym-plus::before, .sym-plus::after { transition: none; }
  .kp-more, .kp-more svg, .kp-drop, .kp-drop-in, .kp.is-open .kp-drop-in { transition: none; }
}
.static .who-item, .static .who-ic::before, .static .who-ic::after, .static .who-pic, .static .who-pic.is-on, .static .who-bubble { transition: none; }
.static .kp-more, .static .kp-more svg, .static .kp-drop, .static .kp-drop-in, .static .kp.is-open .kp-drop-in { transition: none; }