/* ==========================================================================
   Krótkowzroczność w praktyce — mgr Anna Kania
   Styl: dokument obserwacyjny + pracownia optyczna
   Wszystkie klasy własne prefiksowane .prak-
   ========================================================================== */

:root {
  --prak-bg: #f2eee5;
  --prak-paper: #fffdf8;
  --prak-soft: #e8e1d4;
  --prak-ink: #1d2928;
  --prak-ink-2: #293a38;
  --prak-muted: #697370;
  --prak-line: rgba(29, 41, 40, .15);
  --prak-accent: #b75d3f;
  --prak-accent-2: #e4a66f;
  --prak-teal: #1d6764;
  --prak-teal-soft: #d9e9e5;
  --prak-white: #fffdf8;
  --prak-danger-soft: #fff0e9;
  --prak-radius: 28px;
  --prak-shadow: 0 24px 70px rgba(29, 41, 40, .10);
  --prak-max: 1240px;
}

.kz-skip-link {
  position: fixed;
  z-index: 9999;
  top: 10px;
  left: 10px;
  padding: 11px 16px;
  color: #fff;
  border-radius: 10px;
  background: #172220;
  transform: translateY(-160%);
  transition: transform .18s ease;
}

.kz-skip-link:focus {
  transform: translateY(0);
}

.prak-page {
  color: var(--prak-ink);
  background:
    radial-gradient(circle at 6% 3%, rgba(183, 93, 63, .08), transparent 25rem),
    linear-gradient(180deg, #f6f2ea 0%, var(--prak-bg) 100%);
  font-family: inherit;
  line-height: 1.7;
  overflow: clip;
}

.prak-page *,
.prak-page *::before,
.prak-page *::after {
  box-sizing: border-box;
}

.prak-page a { color: inherit; }

.prak-article {
  width: min(100%, 1600px);
  margin-inline: auto;
}

.prak-section,
.prak-toc {
  width: min(calc(100% - 32px), var(--prak-max));
  margin-inline: auto;
}

.prak-breadcrumbs {
  padding-block: 22px 18px;
}

.prak-breadcrumbs ol {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  color: #8b7a6d;
  font-size: 12px;
}

.prak-breadcrumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: #c4b4a7;
}

.prak-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.prak-breadcrumbs a:hover,
.prak-breadcrumbs a:focus-visible {
  color: var(--prak-accent);
}

.prak-hero {
  width: min(calc(100% - 32px), 1560px);
  min-height: min(890px, 82svh);
  margin-inline: auto;
  padding: clamp(40px, 4.7vw, 78px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .82fr);
  align-items: stretch;
  gap: clamp(32px, 4.5vw, 72px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: clamp(30px, 4vw, 58px);
  background:
    radial-gradient(circle at 83% 17%, rgba(228, 166, 111, .24), transparent 27rem),
    linear-gradient(118deg, #172220 0 46%, #263733 72%, #15201e 100%);
  box-shadow: 0 30px 80px -50px rgba(22, 31, 29, .78);
}

.prak-hero::before {
  content: "PRAKTYKA / DZIECKO";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(12px, 1.8vw, 28px);
  color: rgba(255, 253, 248, .17);
  font-size: clamp(11px, .95vw, 16px);
  font-weight: 850;
  letter-spacing: .19em;
  line-height: 1;
  writing-mode: vertical-rl;
  transform: translateY(-50%);
}

.prak-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -8%;
  bottom: -43%;
  width: min(54vw, 720px);
  aspect-ratio: 1;
  border: 1px solid rgba(228, 166, 111, .2);
  border-radius: 50%;
  box-shadow:
    0 0 0 38px rgba(228, 166, 111, .03),
    0 0 0 94px rgba(228, 166, 111, .018);
}

.prak-hero__content,
.prak-hero__visual {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.prak-hero__content {
  align-self: center;
}

.prak-eyebrow,
.prak-kicker,
.prak-data-label,
.prak-author__label {
  margin: 0;
  color: var(--prak-accent);
  font-size: .76rem;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.prak-section--ink .prak-data-label,
.prak-section--workbench .prak-data-label {
  color: #f0a17e;
}

.prak-hero h1 {
  max-width: 840px;
  margin: 18px 0 26px;
  color: #fffdf8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.75rem, 5.2vw, 5.35rem);
  line-height: .98;
  font-weight: 500;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.prak-hero__lead {
  max-width: 760px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 253, 248, .14);
  color: rgba(255, 253, 248, .72);
  font-size: clamp(1.08rem, 1.65vw, 1.32rem);
  line-height: 1.62;
}

.prak-author {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 15px;
  width: fit-content;
  max-width: 100%;
  padding: 10px 18px 10px 10px;
  border: 1px solid rgba(255, 253, 248, .16);
  border-radius: 999px;
  background: rgba(255, 253, 248, .055);
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}

.prak-author:hover,
.prak-author:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(228, 166, 111, .55);
  background: rgba(255, 253, 248, .09);
}

.prak-author__portrait {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--prak-accent-2), var(--prak-accent));
  box-shadow: 0 0 0 1px rgba(255, 253, 248, .2);
}

.prak-author__portrait img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  object-position: 50% 28%;
}

.prak-author > span:last-child {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.prak-author__label {
  color: rgba(255, 253, 248, .48);
  font-size: .58rem;
}

.prak-author__name {
  color: #fffdf8;
  font-size: .9rem;
  font-weight: 900;
}

.prak-author__roles,
.prak-author__place {
  color: rgba(255, 253, 248, .56);
  font-size: .69rem;
  line-height: 1.45;
}

.prak-hero__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.prak-button {
  min-height: 52px;
  padding: 13px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--prak-line);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 850;
  transition: transform .22s ease, border-color .22s ease, background-color .22s ease;
}

.prak-button:hover,
.prak-button:focus-visible { transform: translateY(-2px); }
.prak-hero .prak-button--primary {
  color: var(--prak-ink);
  background: #fffdf8;
  border-color: #fffdf8;
}

.prak-hero .prak-button--secondary {
  color: #fffdf8;
  border-color: rgba(255, 253, 248, .25);
  background: rgba(255, 253, 248, .04);
}

.prak-review-note {
  margin: 18px 0 0;
  color: rgba(255, 253, 248, .46);
  font-size: .82rem;
}

.prak-review-note code {
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(29,41,40,.06);
}

.prak-author-site-link {
  margin: 28px 0 34px;
}

.prak-author-site-link a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 19px;
  border: 1px solid rgba(239, 117, 67, 0.42);
  border-radius: 999px;
  background: rgba(239, 117, 67, 0.09);
  color: #1d2928;
  font-weight: 820;
  line-height: 1.3;
  text-decoration: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.prak-author-site-link a:hover,
.prak-author-site-link a:focus-visible {
  border-color: rgba(239, 117, 67, 0.78);
  background: rgba(239, 117, 67, 0.2);
  color: #111918;
  outline: none;
  transform: translateY(-2px);
}

.prak-author-site-link span {
  color: #f19168;
  font-size: 1.05em;
}

.prak-hero__visual {
  margin: 0;
  align-self: stretch;
  min-height: 100%;
  display: block;
}

.prak-hero__image-frame {
  width: 100%;
  min-height: 720px;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 248, .14);
  border-radius: clamp(24px, 3vw, 42px);
  box-shadow: 0 34px 80px -42px rgba(0, 0, 0, .94);
}

.prak-hero__visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 70%;
  transform: scale(1.18) translateY(-10%);
  transform-origin: 50% 72%;
}

.prak-hero__visual figcaption {
  width: calc(100% - 34px);
  margin: 0;
  padding: 15px 18px;
  position: absolute;
  z-index: 2;
  right: 17px;
  bottom: 17px;
  left: 17px;
  color: rgba(255, 253, 248, .7);
  border: 1px solid rgba(255, 253, 248, .13);
  border-radius: 18px;
  background: rgba(17, 27, 25, .86);
  box-shadow: 0 18px 44px -30px rgba(0, 0, 0, .9);
  backdrop-filter: blur(12px);
  font-size: .77rem;
  line-height: 1.5;
}

.prak-media-frame { margin: 0; }

.prak-media-frame picture,
.prak-media-frame img {
  display: block;
  width: 100%;
}

.prak-media-frame img {
  height: auto;
  border-radius: var(--prak-radius);
  box-shadow: var(--prak-shadow);
}

.prak-media-frame figcaption {
  margin-top: 12px;
  color: var(--prak-muted);
  font-size: .86rem;
}

.prak-video-link {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--prak-ink);
}

.prak-video-link img,
.prak-video-link picture {
  display: block;
  width: 100%;
}

.prak-video-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.prak-play-badge {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  color: white;
  background: rgba(29,41,40,.78);
  box-shadow: 0 12px 32px rgba(0,0,0,.24);
  font-size: 1.35rem;
}

.prak-video-link:hover .prak-play-badge,
.prak-video-link:focus-visible .prak-play-badge {
  background: var(--prak-accent);
}


.prak-toc {
  margin-bottom: 24px;
  padding: 18px 22px;
  display: flex;
  gap: 24px;
  align-items: center;
  border: 1px solid var(--prak-line);
  border-radius: 20px;
  background: rgba(255,253,248,.78);
  overflow-x: auto;
  scrollbar-width: thin;
}

.prak-toc__title { margin: 0; flex: 0 0 auto; font-weight: 900; }
.prak-toc ol { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }
.prak-toc a { white-space: nowrap; color: var(--prak-muted); text-decoration: none; font-size: .89rem; }
.prak-toc a:hover,
.prak-toc a:focus-visible { color: var(--prak-accent); }

.prak-section {
  padding: clamp(70px, 9vw, 126px) clamp(0px, 1vw, 10px);
  scroll-margin-top: 110px;
}

.prak-section--ink,
.prak-section--quote {
  width: 100%;
  max-width: none;
  padding-inline: max(16px, calc((100% - var(--prak-max)) / 2));
  color: var(--prak-white);
  background:
    radial-gradient(circle at 88% 12%, rgba(228,166,111,.15), transparent 28rem),
    linear-gradient(145deg, var(--prak-ink), var(--prak-ink-2));
}

.prak-section--soft {
  width: min(calc(100% - 32px), calc(var(--prak-max) + 80px));
  padding-inline: clamp(24px, 4vw, 64px);
  border-radius: var(--prak-radius);
  background: var(--prak-soft);
}

.prak-section--workbench {
  width: 100%;
  max-width: none;
  padding-inline: max(16px, calc((100% - var(--prak-max)) / 2));
  color: var(--prak-white);
  background:
    radial-gradient(circle at 82% 18%, rgba(228, 166, 111, .13), transparent 30rem),
    linear-gradient(140deg, #172522 0%, #22322f 58%, #192723 100%);
}

.prak-parent-voices {
  width: min(calc(100% - 32px), calc(var(--prak-max) + 90px));
  margin-block: clamp(34px, 5vw, 70px);
  padding: clamp(42px, 6vw, 82px) clamp(24px, 5vw, 76px);
  border: 1px solid rgba(183, 93, 63, .20);
  border-radius: var(--prak-radius);
  background:
    radial-gradient(circle at 93% 5%, rgba(228, 166, 111, .26), transparent 24rem),
    linear-gradient(135deg, #fffaf2 0%, #f3e6d8 100%);
  box-shadow: var(--prak-shadow);
}

.prak-parent-voices__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  column-gap: clamp(32px, 6vw, 90px);
  align-items: end;
  padding-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid rgba(29, 41, 40, .16);
}

.prak-parent-voices__heading .prak-kicker {
  grid-column: 1 / -1;
}

.prak-parent-voices__heading h2 {
  margin: 10px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 4.6vw, 4.25rem);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.prak-parent-voices__heading > p:last-child {
  margin: 0 0 4px;
  color: #5f625e;
  font-size: clamp(.98rem, 1.3vw, 1.1rem);
}

.prak-parent-voices blockquote {
  margin: 0;
}

.prak-parent-voices__lead {
  position: relative;
  padding: clamp(38px, 5vw, 66px) clamp(4px, 2vw, 24px) clamp(34px, 4vw, 52px)
           clamp(40px, 6vw, 88px);
}

.prak-parent-voices__lead::before {
  content: "„";
  position: absolute;
  top: clamp(18px, 3vw, 34px);
  left: 0;
  color: var(--prak-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4.8rem, 9vw, 8.5rem);
  line-height: 1;
  opacity: .28;
}

.prak-parent-voices__lead > p {
  max-width: 1050px;
  margin: 0;
  color: #253432;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 3vw, 2.75rem);
  line-height: 1.28;
  letter-spacing: -.025em;
}

.prak-parent-voices footer {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 22px;
  color: #5e675f;
  font-size: .84rem;
}

.prak-parent-voices footer strong {
  color: var(--prak-ink);
}

.prak-parent-voices__echoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid rgba(29, 41, 40, .16);
}

.prak-parent-voices__echoes blockquote {
  min-width: 0;
  padding: clamp(28px, 3.4vw, 46px);
}

.prak-parent-voices__echoes blockquote + blockquote {
  border-left: 1px solid rgba(29, 41, 40, .16);
}

.prak-parent-voices__echoes p {
  margin: 0;
  color: #33403e;
  font-size: clamp(.98rem, 1.4vw, 1.11rem);
  line-height: 1.72;
}

.prak-parent-voices__source {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding-top: clamp(26px, 4vw, 42px);
}

.prak-parent-voices__source > div {
  display: grid;
  gap: 2px;
}

.prak-parent-voices__source strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
}

.prak-parent-voices__source span {
  color: #6e706c;
  font-size: .79rem;
}

.prak-parent-voices__source a {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  border: 1px solid rgba(29, 41, 40, .22);
  border-radius: 999px;
  color: var(--prak-ink);
  background: rgba(255, 253, 248, .64);
  font-weight: 850;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.prak-parent-voices__source a:hover,
.prak-parent-voices__source a:focus-visible {
  color: #fff;
  border-color: var(--prak-accent);
  background: var(--prak-accent);
  transform: translateY(-2px);
}

.prak-parent-voices__source a span {
  color: inherit;
  font-size: 1rem;
}

.prak-parent-voices__disclaimer {
  max-width: 920px;
  margin: 24px 0 0;
  padding-left: 16px;
  border-left: 2px solid rgba(183, 93, 63, .45);
  color: #74736e;
  font-size: .78rem;
  line-height: 1.62;
}

.prak-section--collaboration {
  width: min(calc(100% - 32px), calc(var(--prak-max) + 90px));
  padding-inline: clamp(24px, 4vw, 66px);
  border-radius: var(--prak-radius);
  background: var(--prak-teal-soft);
}

.prak-section--next {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 86px);
  align-items: start;
}

.prak-section--references {
  padding-top: 54px;
  border-top: 1px solid var(--prak-line);
}

.prak-section__heading { max-width: 970px; margin-bottom: 38px; }

.prak-section__heading h2,
.prak-section--next h2 {
  margin: 12px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 5vw, 4.65rem);
  line-height: 1.03;
  font-weight: 500;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.prak-section--ink .prak-section__heading h2,
.prak-section--workbench .prak-section__heading h2,
.prak-section--quote .prak-section__heading h2 {
  color: #fffdf8;
}

.prak-page .prak-section--ink :is(h2, h3, h4),
.prak-page .prak-section--workbench :is(h2, h3, h4),
.prak-page .prak-section--quote :is(h2, h3, h4) {
  color: #fffdf8;
}

.prak-section--ink .prak-kicker,
.prak-section--workbench .prak-kicker,
.prak-section--quote .prak-kicker {
  color: var(--prak-accent-2);
}

.prak-prose { max-width: 880px; font-size: clamp(1.02rem, 1.48vw, 1.18rem); }
.prak-prose--large { font-size: clamp(1.08rem, 1.7vw, 1.28rem); }
.prak-prose--wide { max-width: 1040px; }
.prak-prose--light { color: rgba(255,253,248,.83); }
.prak-prose p { margin: 0 0 1.18em; }

.prak-citation a { color: var(--prak-accent-2); font-size: .75em; text-decoration: none; }
.prak-section:not(.prak-section--ink):not(.prak-section--workbench):not(.prak-section--quote) .prak-citation a { color: var(--prak-accent); }

.prak-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
  gap: clamp(30px, 5vw, 78px);
  align-items: start;
}
.prak-story-grid--reverse > :first-child { order: 2; }
.prak-documentary-frame { margin: 0; position: sticky; top: 110px; }

.prak-truth-box,
.prak-collaboration-note,
.prak-legal-note,
.prak-status-note {
  margin-top: 30px;
  padding: 22px 24px;
  border-left: 4px solid var(--prak-accent);
  border-radius: 0 18px 18px 0;
  background: var(--prak-danger-soft);
}
.prak-truth-box { max-width: 980px; }
.prak-truth-box p,
.prak-collaboration-note p,
.prak-status-note { margin-bottom: 0; }

.prak-grid { display: grid; gap: clamp(28px, 5vw, 72px); }
.prak-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.prak-grid--evidence { align-items: start; }

.prak-compare { display: grid; gap: 14px; }
.prak-compare article {
  padding: 24px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  background: rgba(255,255,255,.045);
}
.prak-compare article:last-child { border-color: rgba(228,166,111,.4); }
.prak-compare span { color: var(--prak-accent-2); font-size: .72rem; font-weight: 900; letter-spacing: .13em; }
.prak-compare h3 { margin: 20px 0 10px; color: #fffdf8; }
.prak-compare ul { margin: 0; padding-left: 1.1rem; color: rgba(255,255,255,.70); }

.prak-pathway {
  margin-top: 50px;
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--prak-radius);
  background: rgba(255,255,255,.045);
}
.prak-pathway__head h3 {
  margin: 7px 0 0;
  color: #fffdf8;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}
.prak-pathway__steps { margin-top: 28px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.prak-pathway__steps button {
  min-height: 74px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  color: rgba(255,255,255,.72);
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.prak-pathway__steps button span { display: block; color: var(--prak-accent-2); font-size: .72rem; }
.prak-pathway__steps button[aria-selected="true"] { color: var(--prak-ink); background: var(--prak-accent-2); border-color: var(--prak-accent-2); }
.prak-pathway__steps button[aria-selected="true"] span { color: var(--prak-ink); }
.prak-pathway__panels { margin-top: 22px; min-height: 125px; padding: 24px; border-radius: 18px; color: var(--prak-ink); background: var(--prak-paper); }
.prak-pathway__panels h4 {
  margin: 0 0 8px;
  color: var(--prak-ink);
  font-size: 1.2rem;
}
.prak-page .prak-section--ink .prak-pathway__panels h4 {
  color: var(--prak-ink);
}
.prak-pathway__panels p { margin: 0; color: var(--prak-muted); }

.prak-child-grid-card {
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--prak-line);
  border-radius: var(--prak-radius);
  background: var(--prak-paper);
  box-shadow: var(--prak-shadow);
}
.prak-child-grid-card > strong { display: block; margin-top: 8px; font-size: clamp(3.2rem, 7vw, 6rem); line-height: .95; color: var(--prak-teal); }
.prak-child-grid-card > span { display: block; margin-top: 10px; color: var(--prak-muted); }
.prak-child-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; }
.prak-child-dot { aspect-ratio: 1; border-radius: 50%; background: rgba(29,41,40,.11); }
.prak-child-dot.is-myopic { background: var(--prak-accent); transform: scale(1.05); }
.prak-chart-note { margin: 16px 0 0; color: var(--prak-muted); font-size: .84rem; }
.prak-child-grid-card details { margin-top: 22px; border-top: 1px solid var(--prak-line); padding-top: 16px; }
.prak-child-grid-card summary { cursor: pointer; font-weight: 850; }
.prak-child-grid-card table { width: 100%; margin-top: 12px; border-collapse: collapse; }
.prak-child-grid-card th,
.prak-child-grid-card td { padding: 9px 10px; border-bottom: 1px solid var(--prak-line); text-align: left; }

.prak-text-link { display: inline-flex; gap: 8px; align-items: center; color: var(--prak-accent); font-weight: 850; text-decoration: none; }

.prak-loop {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 10px;
}
.prak-loop article { padding: 18px; border: 1px solid var(--prak-line); border-radius: 18px; background: rgba(255,253,248,.66); }
.prak-loop span { color: var(--prak-accent); font-size: .72rem; font-weight: 900; }
.prak-loop strong,
.prak-loop p { display: block; }
.prak-loop strong { margin-top: 18px; }
.prak-loop p { margin: 5px 0 0; color: var(--prak-muted); font-size: .82rem; }
.prak-loop > i { align-self: center; color: var(--prak-accent); font-style: normal; font-size: 1.25rem; }

.prak-professions {
  margin-top: 44px;
  border: 1px solid var(--prak-line);
  border-radius: var(--prak-radius);
  background: var(--prak-paper);
  box-shadow: var(--prak-shadow);
  overflow: hidden;
}
.prak-professions__tabs { padding: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: var(--prak-soft); }
.prak-professions__tabs button { min-height: 52px; border: 0; border-radius: 15px; color: var(--prak-muted); background: transparent; font: inherit; font-weight: 850; cursor: pointer; }
.prak-professions__tabs button[aria-selected="true"] { color: white; background: var(--prak-ink); }
.prak-professions__panels { padding: clamp(24px, 4vw, 44px); }
.prak-professions__panels h3 { margin: 7px 0 28px; font-size: clamp(1.7rem, 3vw, 2.7rem); }
.prak-profession-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.prak-profession-grid div { padding: 20px; border: 1px solid var(--prak-line); border-radius: 18px; }
.prak-profession-grid strong { color: var(--prak-accent); }
.prak-profession-grid p { margin: 8px 0 0; color: var(--prak-muted); font-size: .92rem; }
.prak-legal-note { color: #604235; }

.prak-fit-lab {
  padding: 26px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--prak-radius);
  background: rgba(255,255,255,.055);
}
.prak-fit-lab h3 {
  margin: 7px 0 12px;
  color: #fffdf8;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
}
.prak-fit-visual { width: 100%; max-height: 390px; }
.prak-optical-field {
  fill: rgba(8, 17, 15, .24);
  stroke: rgba(255, 253, 248, .13);
  stroke-width: 1.5;
}
.prak-optical-axis {
  stroke: rgba(228, 166, 111, .48);
  stroke-width: 2;
  stroke-dasharray: 10 9;
}
.prak-optical-center {
  stroke: rgba(255, 253, 248, .18);
  stroke-width: 1.5;
  stroke-dasharray: 5 7;
}
.prak-eye-dot { fill: var(--prak-accent-2); }
.prak-eye-ring {
  fill: none;
  stroke: rgba(228, 166, 111, .36);
  stroke-width: 2;
}
.prak-glasses {
  fill: rgba(29, 103, 100, .16);
  stroke: var(--prak-white);
  stroke-width: 6;
  transition: transform .22s ease;
  transform-origin: 360px 180px;
}
.prak-center-line {
  stroke: var(--prak-accent-2);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}
.prak-optical-caption {
  fill: rgba(255, 253, 248, .45);
  font: 800 11px/1 inherit;
  letter-spacing: .14em;
}
.prak-fit-lab label:not(.prak-switch) { display: flex; justify-content: space-between; gap: 14px; font-weight: 850; }
.prak-fit-lab output { color: var(--prak-accent-2); }
.prak-fit-lab input[type="range"] { width: 100%; margin: 16px 0 22px; accent-color: var(--prak-accent-2); }
.prak-switch { display: flex; gap: 10px; align-items: center; color: rgba(255,255,255,.78); }
.prak-switch input { accent-color: var(--prak-accent-2); }
.prak-section--workbench .prak-chart-note { color: rgba(255,255,255,.58); }

.prak-therapy-media {
  max-width: 720px;
  margin: 42px auto 0;
}

.prak-video-link--local {
  border-radius: var(--prak-radius);
}

.prak-video-link--local img {
  max-height: 720px;
  object-fit: cover;
  object-position: center;
}

.prak-social-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: start;
}

.prak-social-photo {
  position: sticky;
  top: 110px;
}

.prak-collaboration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.prak-expert-card { border: 1px solid rgba(29,41,40,.12); border-radius: var(--prak-radius); background: var(--prak-paper); overflow: hidden; }
.prak-expert-card figure { margin: 0; }
.prak-expert-card .prak-video-link { border-radius: 0; }
.prak-expert-card--text { display: flex; align-items: stretch; }
.prak-expert-card > div { padding: clamp(24px, 4vw, 38px); }
.prak-expert-card h3 { margin: 7px 0 20px; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.prak-expert-card p { color: #53615e; }
.prak-status-note { color: #604235 !important; font-size: .86rem; }
.prak-collaboration-note { max-width: 1040px; background: rgba(255,253,248,.65); }

.prak-monitoring { display: grid; gap: 12px; }
.prak-monitoring article { padding: 22px; position: relative; border: 1px solid var(--prak-line); border-radius: 20px; background: var(--prak-paper); }
.prak-monitoring article:not(:last-child)::after { content: "↓"; position: absolute; left: 50%; bottom: -22px; z-index: 2; color: var(--prak-accent); }
.prak-monitoring span { color: var(--prak-accent); font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.prak-monitoring h3 { margin: 16px 0 7px; }
.prak-monitoring p { margin: 0; color: var(--prak-muted); font-size: .9rem; }

.prak-quote-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.prak-quote-layout blockquote { margin: 0; padding: clamp(28px, 5vw, 58px); border: 1px solid rgba(255,255,255,.14); border-radius: var(--prak-radius); background: rgba(255,255,255,.045); }
.prak-quote-layout blockquote p { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem, 4vw, 4rem); line-height: 1.14; }
.prak-quote-layout blockquote footer { margin-top: 24px; color: rgba(255,255,255,.58); }

.prak-letter { max-width: 950px; margin-inline: auto; padding: clamp(28px, 5vw, 62px); border: 1px solid var(--prak-line); border-radius: var(--prak-radius); background: var(--prak-paper); box-shadow: var(--prak-shadow); font-size: clamp(1.05rem, 1.65vw, 1.25rem); }
.prak-letter p { margin: 0 0 1.2em; }
.prak-letter footer { margin-top: 34px; padding-top: 24px; display: flex; flex-direction: column; border-top: 1px solid var(--prak-line); }
.prak-letter footer span { color: var(--prak-muted); font-size: .9rem; }

.prak-next-links { display: grid; gap: 10px; }
.prak-next-links a { padding: 20px 22px; display: grid; grid-template-columns: 155px 1fr auto; align-items: center; gap: 15px; border: 1px solid var(--prak-line); border-radius: 18px; background: var(--prak-paper); text-decoration: none; transition: transform .22s ease, border-color .22s ease; }
.prak-next-links a:hover,
.prak-next-links a:focus-visible { transform: translateX(5px); border-color: var(--prak-accent); }
.prak-next-links span { color: var(--prak-accent); font-size: .74rem; font-weight: 850; text-transform: uppercase; }
.prak-next-links i { color: var(--prak-accent); font-style: normal; }

.prak-source-intro { max-width: 900px; color: var(--prak-muted); }
.prak-references { padding-left: 1.25rem; }
.prak-references li { margin-bottom: 16px; padding-left: 8px; color: #4d5956; }
.prak-references a { color: var(--prak-accent); font-weight: 850; }

.prak-article-footer { width: min(calc(100% - 32px), var(--prak-max)); margin: 0 auto; padding: 26px 0 60px; border-top: 1px solid var(--prak-line); color: var(--prak-muted); font-size: .86rem; }

.prak-reveal { opacity: 0; transform: translateY(26px); transition: opacity .72s ease, transform .72s ease; }
.prak-reveal.is-visible { opacity: 1; transform: none; }

.evidence-back-to-top {
  position: fixed;
  z-index: 90;
  right: clamp(16px, 2.5vw, 34px);
  bottom: clamp(16px, 2.5vw, 34px);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(42, 34, 26, .13);
  border-radius: 50%;
  color: #2a221a;
  background: rgba(255, 250, 242, .92);
  box-shadow:
    0 10px 24px -14px rgba(42, 27, 18, .72),
    inset 0 0 0 1px rgba(255, 255, 255, .55);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(12px) scale(.92);
  pointer-events: none;
  cursor: pointer;
  transition:
    opacity .2s ease,
    transform .2s ease,
    background-color .2s ease,
    color .2s ease;
}

.evidence-back-to-top span {
  display: block;
  width: 9px;
  height: 9px;
  border-top: 1.75px solid currentColor;
  border-left: 1.75px solid currentColor;
  transform: translateY(2px) rotate(45deg);
  transition: transform .2s ease;
}

.evidence-back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.evidence-back-to-top:hover {
  color: #fff;
  background: var(--prak-accent);
  transform: translateY(-2px) scale(1);
}

.evidence-back-to-top:hover span {
  transform: translateY(-1px) rotate(45deg);
}

.evidence-back-to-top:focus-visible {
  outline: 3px solid rgba(183, 93, 63, .32);
  outline-offset: 3px;
}

.prak-page :focus-visible { outline: 3px solid var(--prak-accent-2); outline-offset: 4px; }

@media (max-width: 1080px) {
  .prak-hero {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr);
    gap: 30px;
  }
  .prak-loop { grid-template-columns: 1fr; }
  .prak-loop > i { justify-self: center; transform: rotate(90deg); }
  .prak-section--next { grid-template-columns: 1fr; }
  .prak-pathway__steps { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .prak-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: clamp(34px, 7vw, 56px);
  }
  .prak-hero__image-frame {
    min-height: 0;
    height: clamp(420px, 104vw, 680px);
  }
  .prak-hero__visual img {
    object-position: 50% 68%;
    transform: scale(1.12) translateY(-6%);
    transform-origin: 50% 70%;
  }
  .prak-grid--2,
  .prak-story-grid,
  .prak-collaboration-grid,
  .prak-quote-layout,
  .prak-social-grid { grid-template-columns: 1fr; }
  .prak-story-grid--reverse > :first-child { order: initial; }
  .prak-documentary-frame,
  .prak-social-photo { position: static; }
  .prak-parent-voices__heading { grid-template-columns: 1fr; gap: 20px; }
  .prak-parent-voices__echoes { grid-template-columns: 1fr; }
  .prak-parent-voices__echoes blockquote + blockquote {
    border-top: 1px solid rgba(29, 41, 40, .16);
    border-left: 0;
  }
  .prak-parent-voices__source { align-items: flex-start; flex-direction: column; }
  .prak-profession-grid { grid-template-columns: 1fr; }
  .prak-professions__tabs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .kz-footer__brand {
    max-width: 100%;
    flex-wrap: wrap;
  }
  .prak-section,
  .prak-toc { width: min(calc(100% - 22px), var(--prak-max)); }
  .prak-parent-voices { width: min(calc(100% - 22px), calc(var(--prak-max) + 90px)); padding-inline: 18px; }
  .prak-parent-voices__lead { padding-left: 34px; }
  .prak-parent-voices__source a { width: 100%; }
  .prak-hero {
    width: min(calc(100% - 22px), 1560px);
    padding: 32px 18px 26px;
    border-radius: 28px;
  }
  .prak-hero h1 {
    font-size: clamp(2.05rem, 10.2vw, 2.65rem);
    overflow-wrap: break-word;
  }
  .prak-author {
    width: 100%;
    align-items: flex-start;
    border-radius: 24px;
  }
  .prak-author__portrait {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }
  .prak-hero__actions {
    display: grid;
  }
  .prak-hero__image-frame { height: min(132vw, 590px); }
  .prak-hero::before { display: none; }
  .prak-toc { align-items: flex-start; flex-direction: column; }
  .prak-pathway__steps { grid-template-columns: repeat(2, 1fr); }
  .prak-professions__tabs { grid-template-columns: 1fr; }
  .prak-next-links a { grid-template-columns: 1fr auto; }
  .prak-next-links a span { grid-column: 1 / -1; }
  .prak-child-grid { gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .prak-reveal { opacity: 1; transform: none; transition: none; }
  .prak-button,
  .prak-next-links a,
  .prak-glasses,
  .evidence-back-to-top,
  .evidence-back-to-top span { transition: none; }
}
