/* V35 — About: the host feature (#kd).
   Built on the identity chapter's system: .i13 section rhythm and tokens (--i13-ink/-blue/-muted/-line, --bg),
   the internal type scale (--ui, --inside-card, --inside-label), the logo's own signal wave (19 bars, same
   gradient as assets/tsl-logo-v15.svg), the v8 icon grammar (32px line icons, 1.35 stroke, mini sine with
   hatch) and the pointer depth of [data-i13-depth] (--i13-x/--i13-y, data-i18-motion). author-kd-v35.js adds
   the one-open chapter carousel and the interactive wave. All motion runs only when the site's motion is on
   (body.tsl-motion / data-i18-motion=on) and never for reduced-motion visitors. Without JavaScript every
   chapter stays open. */

.internal-page .kd35 { border-top: 1px solid var(--i13-line); }

/* ---------- top: kicker, then headline + story left and the portrait right, anchored on the headline ---------- */
.kd35-top {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-areas: "kicker ." "title photo" "body photo";
  column-gap: clamp(40px, 6vw, 104px);
  align-items: start;
}
.kd35-kicker { grid-area: kicker; }
.kd35-title { grid-area: title; }
.kd35-body { grid-area: body; }
.kd35-portrait { grid-area: photo; }

.internal-page .kd35 .kd35-title {
  font: 600 clamp(34px, 3.9vw, 56px)/1.04 var(--ui);
  letter-spacing: -.045em;
  text-wrap: balance;
  color: var(--i13-ink);
}
.kd35-lead {
  font: 400 clamp(19px, 1.65vw, 22px)/1.55 var(--ui);
  letter-spacing: -.012em;
  color: var(--i13-ink);
  max-width: 40ch;
  margin-top: 30px !important;
}
.kd35-story { margin-top: 26px; max-width: 60ch; }
.kd35-story p { font: 400 17.5px/1.74 var(--ui); color: var(--i13-muted); }
.kd35-story p + p { margin-top: 16px !important; }
.kd35-story p:first-child::first-letter {
  float: left;
  font: 600 3.9em/.82 var(--ui);
  letter-spacing: -.04em;
  color: var(--i13-blue);
  margin: .07em .1em 0 -.02em;
}
.kd35-quote { color: var(--i13-ink); font-weight: 550; }

/* ---------- portrait: spans from the headline to the last paragraph ---------- */
.kd35-portrait {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 520px;
  min-height: 440px;
  justify-self: end;
  align-self: stretch;
  isolation: isolate;
  touch-action: pan-y;
}
.kd35-frame {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  overflow: hidden;
  background: #0b1d24;
  box-shadow: 0 34px 70px -38px #0d2b3770, 0 12px 24px -18px #0d2b3740;
  transform: translateZ(0);
  transition: transform .7s cubic-bezier(.2, .7, .25, 1);
}
.kd35-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
.kd35-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(70% 55% at calc(50% + var(--i13-x, 0) * 28%) calc(28% + var(--i13-y, 0) * 18%), #ffffff1c, transparent 70%);
  opacity: 0;
  transition: opacity .6s ease;
}
.kd35-portrait[data-i18-motion=on] .kd35-frame {
  transform: perspective(1100px) rotateY(calc(var(--i13-x, 0) * 2.6deg)) rotateX(calc(var(--i13-y, 0) * -2deg));
}
.kd35-portrait[data-i18-motion=on]:hover .kd35-frame::after { opacity: 1; }
.kd35-portrait figcaption {
  position: absolute;
  z-index: 3;
  left: 20px;
  top: 20px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid #ffffff22;
  background: color-mix(in srgb, #0b1d24 62%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #eaf3f5;
  font: 500 13px/1.3 var(--ui);
  letter-spacing: .01em;
}
[data-theme=dark] .kd35-frame { box-shadow: 0 0 0 1px #5b899d66, 0 34px 70px -38px #000c; }

/* the logo signal across the lower edge: breathes when idle, follows the pointer, ripples on a tap */
.kd35-wave {
  position: absolute;
  z-index: 1;
  left: 15%;
  bottom: 4.5%;
  width: 70%;
  height: 15%;
  transform: translate3d(calc(var(--i13-x, 0) * -10px), calc(var(--i13-y, 0) * -5px), 0);
  opacity: .9;
  mix-blend-mode: screen;
  overflow: visible;
  pointer-events: none;
  transition: transform .9s cubic-bezier(.2, .7, .25, 1);
}
.kd35-wave rect { transform-box: fill-box; transition: transform .22s ease-out; }
.kd35-wave .kd35-dn { transform-origin: 50% 0; }
.kd35-wave .kd35-up { transform-origin: 50% 100%; }
.kd35-wave .kd35-dot { transform-origin: 50% 50%; }
body.tsl-motion .kd35-portrait.is-visible:not(.kd35-live) .kd35-wave :is(.kd35-dn, .kd35-up) {
  animation: kd35-breathe 4.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.22s);
}
.kd35-portrait.kd35-live .kd35-wave :is(.kd35-dn, .kd35-up) { transform: scaleY(var(--lift, 1)); }
@keyframes kd35-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.56); } }

/* ---------- the three chapters: one open at a time. Phones and no-JS: stacked rows; computers and tablets:
   three tall panels side by side, the open one wide and the other two slim vertical strips (below). ---------- */
.kd35-chapters { margin-top: clamp(56px, 6vw, 96px); border-top: 1px solid var(--i13-line); }
.kd35-ch { border-bottom: 1px solid var(--i13-line); }
.internal-page .kd35 .kd35-ch-h { margin: 0; }
.kd35-ch-btn {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  grid-template-columns: 58px minmax(150px, .3fr) minmax(0, 1fr) 44px;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  width: 100%;
  margin: 0;
  padding: 22px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.kd35-ch-btn:focus-visible { outline: 3px solid var(--i13-blue); outline-offset: 4px; border-radius: 14px; }
.kd35-badge {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: var(--i13-blue);
  border: 1px solid color-mix(in srgb, var(--i13-blue) 30%, var(--i13-line));
  background: color-mix(in srgb, var(--i13-blue) 7%, transparent);
  transition: background-color .45s ease, color .45s ease, border-color .45s ease;
}
.kd35-ch.is-open .kd35-badge { background: var(--i13-blue); border-color: var(--i13-blue); color: var(--bg, #f7f8f5); }
.kd35-icon { width: 32px; height: 32px; overflow: visible; }
.kd35-icon .kd35-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
body.tsl-motion .kd35-ch.is-opening .kd35-draw { animation: kd35-draw 1.25s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes kd35-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.kd35-icon .kd35-hatch { transform-box: fill-box; transform-origin: 50% 50%; }
@media (hover: hover) {
  body.tsl-motion .kd35-ch-btn:hover .kd35-hatch { animation: kd35-hatch 1.4s ease-in-out infinite; }
  .kd35-ch:not(.is-open) .kd35-ch-btn:hover .kd35-ch-title { color: var(--i13-blue); }
  .kd35-ch:not(.is-open) .kd35-ch-btn:hover .kd35-ch-sign { border-color: var(--i13-blue); }
}
@keyframes kd35-hatch { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
.kd35-ch-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font: 500 var(--inside-label, 13px)/1.4 var(--ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--i13-muted);
}
.kd35-ch-num { color: var(--i13-blue); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.kd35-ch-title {
  font: 600 var(--inside-card, clamp(22px, 2.2vw, 28px))/1.18 var(--ui);
  letter-spacing: -.03em;
  color: var(--i13-ink);
  transition: color .3s ease;
}
.kd35-ch-sign {
  position: relative;
  justify-self: end;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--i13-line);
  transition: border-color .3s ease;
}
.kd35-ch-sign::before, .kd35-ch-sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--i13-blue);
  transform: translate(-50%, -50%);
  transition: transform .45s cubic-bezier(.2, .7, .25, 1);
}
.kd35-ch-sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.kd35-ch.is-open .kd35-ch-sign::after { transform: translate(-50%, -50%) rotate(0deg); }

.kd35-ch-body { display: grid; grid-template-rows: 1fr; }
[data-kd35-ready] .kd35-ch-body { grid-template-rows: 0fr; transition: grid-template-rows .65s cubic-bezier(.2, .7, .25, 1); }
[data-kd35-ready] .kd35-ch.is-open .kd35-ch-body { grid-template-rows: 1fr; }
.kd35-ch-inner { min-height: 0; overflow: hidden; }
.kd35-ch-text {
  columns: 2;
  column-gap: clamp(28px, 4vw, 64px);
  padding: 0 0 32px calc(58px + clamp(16px, 2vw, 32px));
}
.kd35-ch-text > p + p { margin-top: 14px !important; }
.internal-page .kd35 .kd35-ch-text p { font: 400 17px/1.72 var(--ui); color: var(--i13-muted); }
.kd35-cta { margin-top: 40px; }

/* ---------- computers and tablets: panels side by side across the full width ---------- */
@media (min-width: 900px) {
  .kd35-chapters[data-kd35-ready] {
    --kd35-strip: clamp(84px, 7.4vw, 108px);
    --kd35-pad: clamp(26px, 2.6vw, 38px);
    container-type: inline-size;
    display: flex;
    gap: 16px;
    border-top: 0;
  }
  .kd35-chapters[data-kd35-ready] .kd35-ch {
    position: relative;
    flex: 0 0 var(--kd35-strip);
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--i13-line);
    border-radius: 30px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--i13-blue) 6%, var(--bg, #f7f8f5)) 0%, var(--bg, #f7f8f5) 72%);
    transition: flex-grow .75s cubic-bezier(.2, .7, .25, 1), border-color .4s ease, background-color .4s ease;
  }
  .kd35-chapters[data-kd35-ready] .kd35-ch.is-open { flex-grow: 1; border-color: color-mix(in srgb, var(--i13-blue) 26%, var(--i13-line)); }
  .kd35-chapters[data-kd35-ready] .kd35-ch::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -1px;
    right: -1px;
    width: 150px;
    height: 104px;
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--i13-blue) 18%, transparent) 0 2px, transparent 2px 9px);
    -webkit-mask-image: linear-gradient(205deg, #000 10%, transparent 72%);
    mask-image: linear-gradient(205deg, #000 10%, transparent 72%);
    opacity: 0;
    transition: opacity .5s ease .25s;
  }
  .kd35-chapters[data-kd35-ready] .kd35-ch.is-open::before { opacity: .7; }
  /* every panel keeps the same header height, so the row never changes height when another chapter opens */
  .kd35-chapters[data-kd35-ready] .kd35-ch-h { height: 112px; }
  .kd35-chapters[data-kd35-ready] .kd35-ch.is-open .kd35-ch-btn {
    position: relative;
    z-index: 1;
    grid-template-columns: 58px max-content minmax(0, 1fr);
    height: 100%;
    padding: 0 var(--kd35-pad);
    cursor: default;
  }
  .kd35-chapters[data-kd35-ready] .kd35-ch.is-open .kd35-ch-sign { display: none; }
  /* a closed panel is one tall button: icon, number, the title running up the strip, and + */
  .kd35-chapters[data-kd35-ready] .kd35-ch:not(.is-open) .kd35-ch-btn {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 26px 0 24px;
  }
  .kd35-chapters[data-kd35-ready] .kd35-ch:not(.is-open) .kd35-ch-btn:focus-visible { outline-offset: -6px; border-radius: 26px; }
  .kd35-chapters[data-kd35-ready] .kd35-ch:not(.is-open) .kd35-ch-label { display: none; }
  .kd35-chapters[data-kd35-ready] .kd35-ch:not(.is-open) .kd35-ch-title {
    flex: 0 1 auto;
    min-height: 0;
    margin: auto 0;
    overflow: hidden;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: clamp(18px, 1.45vw, 22px);
    line-height: 1.12;
  }
  .kd35-chapters[data-kd35-ready] .kd35-ch:not(.is-open) :is(.kd35-badge, .kd35-ch-meta, .kd35-ch-sign) { flex: none; }
  @media (hover: hover) {
    .kd35-chapters[data-kd35-ready] .kd35-ch:not(.is-open):hover { border-color: color-mix(in srgb, var(--i13-blue) 34%, var(--i13-line)); background-color: color-mix(in srgb, var(--i13-blue) 5%, var(--bg, #f7f8f5)); }
  }
  /* the text keeps the open panel's width at all times: no reflow while a panel widens, and a constant row height */
  .kd35-chapters[data-kd35-ready] .kd35-ch-body { grid-template-rows: 1fr; transition: none; }
  .kd35-chapters[data-kd35-ready] .kd35-ch-text {
    box-sizing: border-box;
    width: calc(100cqw - 2 * var(--kd35-strip) - 32px - 2px);
    columns: 2;
    padding: 6px var(--kd35-pad) 34px calc(var(--kd35-pad) + 58px + clamp(16px, 2vw, 32px));
  }
  .kd35-chapters[data-kd35-ready] .kd35-ch:not(.is-open) .kd35-ch-body { visibility: hidden; opacity: 0; }
  .kd35-chapters[data-kd35-ready] .kd35-ch.is-open .kd35-ch-body { visibility: visible; opacity: 1; transition: opacity .45s ease .34s; }
  .kd35-chapters[data-kd35-ready] .kd35-ch:not(.is-open) :is(.kd35-ch-num, .kd35-ch-title, .kd35-badge, .kd35-ch-sign) { animation: kd35-fade-in .5s ease .3s both; }
}
@media (min-width: 900px) and (max-width: 1179px) {
  .kd35-chapters[data-kd35-ready] .kd35-ch-text { columns: 1; padding-left: var(--kd35-pad); }
}
@keyframes kd35-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* the first layout after the script runs is drawn directly in its final shape (no animation on load) */
.kd35-instant :is(.kd35-ch, .kd35-ch::before, .kd35-ch-body, .kd35-ch-num, .kd35-ch-title, .kd35-badge, .kd35-ch-sign) { transition: none !important; animation: none !important; }

/* ---------- responsive ---------- */
@media (max-width: 899px) {
  .kd35-top { grid-template-columns: 1fr; grid-template-areas: "kicker" "title" "photo" "body"; row-gap: 0; }
  .kd35-portrait { justify-self: start; align-self: auto; min-height: 0; aspect-ratio: 4 / 5; margin-top: 28px; }
  .kd35-lead { margin-top: 28px !important; }
  .kd35-ch-btn { grid-template-columns: 52px minmax(0, 1fr) 40px; grid-template-areas: "badge meta sign" "badge title sign"; row-gap: 4px; }
  .kd35-badge { grid-area: badge; width: 52px; height: 52px; }
  .kd35-ch-meta { grid-area: meta; flex-direction: row; gap: 10px; }
  .kd35-ch-title { grid-area: title; }
  .kd35-ch-sign { grid-area: sign; width: 40px; height: 40px; }
  .kd35-ch-text { columns: 1; padding: 0 0 26px; }
}
@media (max-width: 760px) {
  .kd35-frame { border-radius: 23px; }
  .kd35-portrait figcaption { left: 14px; top: 14px; font-size: 12px; padding: 8px 13px; }
  .kd35-story p { font-size: 17px; }
  .kd35-story p:first-child::first-letter { font-size: 3.6em; }
}
@media (prefers-reduced-motion: reduce) {
  .kd35-wave rect, .kd35-hatch, .kd35-draw { animation: none !important; }
  .kd35-frame, .kd35-wave, .kd35-wave rect, .kd35-ch, .kd35-ch::before, .kd35-ch-body, .kd35-ch-sign::before, .kd35-ch-sign::after { transition: none !important; }
  .kd35-ch :is(.kd35-ch-num, .kd35-ch-title, .kd35-badge, .kd35-ch-sign) { animation: none !important; }
  .kd35-frame, .kd35-wave { transform: none !important; }
}