@charset "UTF-8";

:root {
  --experience-bg: #17372f;
  --experience-text: #fff8ec;
  --experience-muted: #d6dfda;
  --experience-accent: #e5bd76;
}

html[data-theme="dark"] {
  --experience-bg: #17231f;
  --experience-text: #f6f1e8;
  --experience-muted: #c2ccc6;
  --experience-accent: #e6ba70;
}

.experience-panel {
  background: var(--experience-bg);
  color: var(--experience-text);
}
.experience-panel h2,
.experience-item strong { color: var(--experience-text); }
.experience-panel .eyebrow,
.experience-item .tick { color: var(--experience-accent); }
.experience-panel .lead,
.experience-panel > div > p,
.experience-item span { color: var(--experience-muted); }
.experience-item .tick { background: color-mix(in srgb, var(--experience-accent) 17%, transparent); }

/* The illustrated reader screens stay paper-light in both themes, so their
   text uses a dedicated high-contrast ink palette rather than site theme text. */
.device-screen {
  background: #f7f0e4;
  color: #17241e;
}
.device-screen .mini-label {
  color: #8b5418;
}
.device-screen h4 {
  color: #15221c;
}
.device-screen p,
.experience-panel .device-screen p {
  color: #3f4b45;
  opacity: 1;
  font-weight: 500;
}
.device-tablet {
  background: #f7f0e4;
  color: #17241e;
}
.device-phone {
  background: #fbf6ed;
  color: #17241e;
}

h1 { max-width: 760px; font-size: clamp(3.2rem, 6vw, 6.2rem); }
.section-heading { max-width: 760px; }
.value-card { min-height: 230px; }
.value-card p { font-size: .98rem; }
.release-copy h3 { font-size: clamp(1.8rem, 3vw, 2.65rem); }

@media (max-width: 1000px) {
  .hero-grid { gap: 42px; }
  .experience-panel { gap: 34px; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .shell,
  .nav,
  .footer-grid { width: min(calc(100% - 30px), var(--content)); }

  .nav { min-height: 66px; }
  .nav-actions { gap: 10px; }
  .brand { gap: 9px; }
  .brand span { font-size: .9rem; }
  .brand img { width: 34px; height: 34px; }

  .home-hero { padding: 56px 0 42px; }
  .hero-grid { gap: 34px; }
  h1 { font-size: clamp(2.75rem, 12vw, 4.25rem); line-height: .98; letter-spacing: -.045em; }
  h2 { font-size: clamp(2rem, 9vw, 3.15rem); line-height: 1.03; }
  .lead { margin-top: 20px; font-size: 1rem; line-height: 1.68; }
  .hero-actions { margin-top: 26px; }
  .hero-actions .button { width: 100%; }
  .hero-note,
  .hero-proof { display: grid; gap: 9px; }

  .library-visual { min-height: 360px; border-radius: 26px; }
  .library-visual::before { inset: 17px; border-radius: 19px; }
  .library-mark { left: 22px; top: 21px; gap: 9px; font-size: .62rem; }
  .library-mark img { width: 32px; height: 32px; }
  .library-stack { inset: 82px 20px 28px; gap: 7px; }
  .visual-book { min-height: 205px; padding: 14px 9px; border-radius: 6px 12px 12px 6px; }
  .visual-book:nth-child(1) { min-height: 238px; }
  .visual-book:nth-child(3) { min-height: 220px; }
  .visual-book small { font-size: .46rem; }
  .visual-book strong { font-size: .72rem; }

  .section { padding: 50px 0; }
  .section.compact { padding: 38px 0; }
  .section-heading p:last-child { font-size: 1rem; }
  .category-grid,
  .value-grid,
  .format-grid,
  .process-grid { grid-template-columns: 1fr; gap: 14px; }
  .category-card,
  .value-card,
  .process-card { min-height: auto; padding: 23px; }

  .experience-panel {
    display: block;
    padding: 28px 18px;
    border-radius: 26px;
  }
  .experience-list { margin-top: 24px; }
  .device-stage {
    min-height: 285px;
    margin-top: 30px;
    overflow: hidden;
  }
  .device-tablet {
    position: relative;
    width: min(100%, 280px);
    height: 280px;
    right: auto;
    top: auto;
    margin: 0 auto;
    padding: 20px;
    border-width: 8px;
    border-radius: 22px;
    transform: none;
  }
  .device-tablet h4 { font-size: 1.02rem; }
  .device-tablet p { font-size: .73rem; line-height: 1.5; }
  .device-phone { display: none; }

  .release-card {
    grid-template-columns: 105px minmax(0, 1fr);
    gap: 18px;
    padding: 20px;
    border-radius: 26px;
  }
  .release-cover { padding: 15px 10px; }
  .release-cover strong { font-size: .78rem; }
  .release-copy h3 { font-size: 1.42rem; }
  .release-copy p { font-size: .92rem; }
  .release-card > .button { grid-column: 1 / -1; width: 100%; }

  .book-page { padding: 40px 0 64px; }
  .book-layout { grid-template-columns: 1fr; gap: 38px; }
  .book-cover { position: relative; top: auto; width: min(78%, 310px); margin-inline: auto; }
  .book-copy h1 { font-size: clamp(2.65rem, 12vw, 4.4rem); }
  .book-section { margin-top: 44px; padding-top: 32px; }
}

@media (max-width: 430px) {
  .shell,
  .nav,
  .footer-grid { width: min(calc(100% - 24px), var(--content)); }
  .brand span { font-size: .84rem; }
  .theme-switch { width: 56px; }
  .theme-switch__icon--sun { left: 7px; }
  .theme-switch__icon--moon { right: 7px; }
  h1 { font-size: clamp(2.55rem, 12.5vw, 3.55rem); }
  .library-visual { min-height: 330px; }
  .library-stack { inset: 78px 15px 26px; }
  .visual-book { min-height: 185px; }
  .visual-book:nth-child(1) { min-height: 215px; }
  .visual-book:nth-child(3) { min-height: 200px; }
  .experience-panel { padding: 25px 16px; }
  .device-stage { min-height: 255px; }
  .device-tablet { height: 250px; }
  .release-card { grid-template-columns: 88px minmax(0, 1fr); padding: 17px; }
  .release-copy h3 { font-size: 1.22rem; }
  .footer-brand span { display: none; }
}