:root {
  color-scheme: light;
  --paper: #f7eedb;
  --paper-light: #fffaf0;
  --paper-aged: #ead6b5;
  --ink: #2f251e;
  --ink-soft: #625b4f;
  --blue: #225878;
  --blue-deep: #173b50;
  --terracotta: #d9550b;
  --terracotta-deep: #9f360a;
  --sage: #657a3d;
  --sage-pale: #dfe3c4;
  --gold: #d49a38;
  --line: #c8ad83;
  --line-soft: rgba(92, 67, 42, .2);
  --white: #fffdf7;
  --focus: #075c8c;
  --font-display: "Arial Narrow", "Avenir Next Condensed", "Aptos Display", "Helvetica Neue Condensed", sans-serif;
  --font-body: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --shell: 78rem;
  --header-height: 5rem;
  --shadow-book: 1.15rem 1.35rem 2.2rem rgba(46, 30, 18, .24), .28rem .22rem 0 rgba(60, 39, 23, .18);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  min-width: 20rem;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 22% 8%, rgba(218, 160, 61, .08), transparent 22rem),
    repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(72, 49, 29, .012) 3px, rgba(72, 49, 29, .012) 4px),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.68;
  text-rendering: optimizeLegibility;
}

body.menu-open,
body.dialog-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--terracotta-deep);
  text-decoration-color: rgba(159, 54, 10, .5);
  text-decoration-thickness: .09em;
  text-underline-offset: .2em;
}

a:hover {
  color: var(--terracotta);
}

:focus-visible {
  outline: .2rem solid var(--focus);
  outline-offset: .22rem;
}

h1,
h2,
h3,
p,
blockquote,
figure {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--ink);
  font-family: var(--font-display);
  font-stretch: condensed;
  font-weight: 900;
  line-height: .98;
}

h1 {
  font-size: clamp(4.2rem, 8vw, 7.7rem);
  letter-spacing: -.045em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  letter-spacing: -.035em;
}

h3 {
  font-size: clamp(1.45rem, 2vw, 2.1rem);
}

.shell {
  width: min(var(--shell), calc(100% - 3.5rem));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: .65rem;
  left: .65rem;
  padding: .75rem 1rem;
  transform: translateY(-160%);
  border: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
}

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

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  min-height: var(--header-height);
  border-bottom: 1px solid rgba(82, 57, 32, .25);
  background: rgba(255, 250, 240, .96);
}

.header-inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: .72rem;
  color: var(--ink);
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
}

.brand-book {
  width: auto;
  height: 3.55rem;
  aspect-ratio: 714 / 1280;
  object-fit: contain;
  border-radius: .08rem;
  box-shadow: .2rem .25rem .55rem rgba(49, 29, 15, .2);
  transform: rotate(-2deg);
}

.brand-name {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: .95;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  gap: clamp(1.25rem, 2.8vw, 2.8rem);
}

.site-nav a {
  position: relative;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a::after {
  content: "";
  width: 0;
  height: .16rem;
  position: absolute;
  right: 0;
  bottom: -.42rem;
  background: var(--terracotta);
  transition: width .2s ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  width: 100%;
  right: auto;
  left: 0;
}

.language-link {
  min-width: 2.75rem;
  min-height: 2.55rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--blue);
  background: var(--paper-light);
  color: var(--blue-deep);
  font-size: .77rem;
  font-weight: 900;
  text-decoration: none;
  transform: rotate(1.5deg);
}

.header-inner > .language-link:last-child {
  margin-left: auto;
}

.language-link:hover {
  background: var(--blue);
  color: var(--white);
}

.menu-button {
  min-height: 2.75rem;
  display: none;
  align-items: center;
  gap: .6rem;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}

.menu-lines,
.menu-lines::before,
.menu-lines::after {
  width: 1.3rem;
  height: .13rem;
  display: block;
  border-radius: 1rem;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

.menu-lines {
  position: relative;
}

.menu-lines::before,
.menu-lines::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-lines::before { top: -.4rem; }
.menu-lines::after { top: .4rem; }
.menu-button[aria-expanded="true"] .menu-lines { background: transparent; }
.menu-button[aria-expanded="true"] .menu-lines::before { top: 0; transform: rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-lines::after { top: 0; transform: rotate(-45deg); }

.hero {
  min-height: calc(100svh - var(--header-height));
  display: grid;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}

.hero::before {
  content: "";
  width: 70vw;
  height: 70vw;
  position: absolute;
  z-index: -1;
  top: -48vw;
  right: -16vw;
  border: 1px solid rgba(217, 85, 11, .2);
  border-radius: 50%;
  box-shadow: 0 0 0 6vw rgba(217, 85, 11, .025), 0 0 0 13vw rgba(34, 88, 120, .025);
}

.hero::after {
  content: "";
  width: .22rem;
  height: 8rem;
  position: absolute;
  z-index: 2;
  bottom: -1rem;
  left: 50%;
  background: var(--terracotta);
  transform: rotate(8deg);
}

.hero-inner {
  min-height: inherit;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(32rem, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  padding-block: clamp(3.8rem, 8vw, 7rem);
}

.hero-copy {
  position: relative;
  z-index: 3;
}

.hero h1 {
  max-width: 9ch;
  margin-bottom: 1rem;
  color: var(--ink);
}

.hero-text {
  max-width: 34rem;
  margin-bottom: 1.75rem;
  color: var(--terracotta-deep);
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.32;
}

.eyebrow {
  margin-bottom: .8rem;
  color: var(--blue);
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero-note {
  max-width: 33rem;
  margin: 1.55rem 0 0;
  padding: .9rem 0 .9rem 1.2rem;
  border-left: .18rem solid var(--sage);
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: .92rem;
  font-style: italic;
}

.hero-stage {
  min-height: 38rem;
  position: relative;
}

.hero-visual-frame {
  width: 92%;
  position: absolute;
  top: 4%;
  right: -4%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-light);
  box-shadow: 1.1rem 1.25rem 2.4rem rgba(66, 43, 23, .12);
  transform: rotate(1.3deg);
}

.hero-visual-frame::before,
.map-figure::before {
  content: "";
  width: 5.8rem;
  height: 1.25rem;
  position: absolute;
  z-index: 2;
  top: .25rem;
  left: 50%;
  background: rgba(235, 214, 165, .72);
  transform: translateX(-50%) rotate(-2deg);
  box-shadow: 0 .05rem .2rem rgba(77, 50, 24, .16);
}

.hero-image {
  width: 100%;
  height: auto;
}

.hero-book {
  width: clamp(13.5rem, 18vw, 17.8rem);
  height: auto;
  aspect-ratio: 714 / 1280;
  position: absolute;
  z-index: 3;
  right: 8%;
  bottom: -4%;
  object-fit: contain;
  box-shadow: var(--shadow-book);
  transform: rotate(3.5deg);
  transition: transform .35s ease;
}

.hero-stage:hover .hero-book {
  transform: rotate(1deg) translateY(-.5rem);
}

.hero-caption {
  max-width: 14rem;
  position: absolute;
  z-index: 4;
  right: 35%;
  bottom: 3%;
  margin: 0;
  padding: .7rem .9rem;
  background: var(--sage-pale);
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: .84rem;
  font-style: italic;
  line-height: 1.35;
  transform: rotate(-3deg);
  box-shadow: .25rem .35rem .8rem rgba(45, 34, 21, .12);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.button {
  min-height: 3.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .76rem 1.2rem;
  border: 2px solid transparent;
  border-radius: .16rem;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.button:hover {
  transform: translateY(-.16rem);
}

.button-primary {
  border-color: var(--terracotta-deep);
  background: var(--terracotta);
  color: var(--white);
  box-shadow: .25rem .3rem 0 var(--terracotta-deep);
}

.button-primary:hover {
  background: var(--terracotta-deep);
  color: var(--white);
}

.button-outline,
.button-quiet,
.button-light {
  border-color: var(--blue);
  background: transparent;
  color: var(--blue-deep);
}

.button-outline:hover,
.button-quiet:hover,
.button-light:hover {
  background: var(--blue);
  color: var(--white);
}

.stat-band {
  position: relative;
  z-index: 4;
  border-bottom: 1px solid var(--line);
  background: var(--paper-aged);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat {
  min-height: 7.6rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.2rem clamp(.8rem, 2vw, 1.5rem);
  border-right: 1px solid var(--line);
}

.stat:first-child { border-left: 1px solid var(--line); }
.stat strong {
  color: var(--terracotta-deep);
  font-family: var(--font-serif);
  font-size: 2.45rem;
  line-height: 1;
}

.stat span {
  max-width: 11rem;
  color: var(--ink-soft);
  font-size: .83rem;
  font-weight: 700;
  line-height: 1.35;
}

.section {
  padding-block: clamp(5.5rem, 10vw, 10rem);
}

.section-heading {
  max-width: 51rem;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  text-align: center;
}

.section-heading.left {
  margin-inline: 0;
  text-align: left;
}

.section-heading h2 {
  margin-bottom: 1.1rem;
}

.story-heading h2,
.route-heading h2,
.heading-row h2,
.works-layout .section-heading h2,
.author-card h2 {
  font-family: var(--font-serif);
  font-size: clamp(2.55rem, 4.5vw, 4.65rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.04;
}

.help-panel h2,
.resource-heading h2,
.contact-layout .section-heading h2 {
  font-family: var(--font-body);
  font-size: clamp(2.35rem, 3.8vw, 3.75rem);
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: 1.04;
}

.heading-row h2 {
  font-size: clamp(3rem, 5vw, 5rem);
}

.works-layout .section-heading h2,
.author-card h2 {
  font-size: clamp(2.8rem, 4.2vw, 4.35rem);
}

.section-heading > p:last-child,
.section-heading > div > p:last-child {
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
}

.start-section {
  position: relative;
  background:
    linear-gradient(90deg, transparent 49.92%, rgba(217, 85, 11, .15) 50%, transparent 50.08%),
    var(--paper-light);
}

.story-heading {
  max-width: 65rem;
  margin-left: 0;
  text-align: left;
}

.story-heading h2 {
  max-width: 13ch;
}

.start-grid {
  display: grid;
  grid-template-columns: 1.02fr .95fr 1.08fr;
  align-items: start;
  gap: clamp(1.4rem, 3vw, 3rem);
}

.start-card {
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 2rem 1.6rem 1.5rem;
  border-top: .32rem solid var(--terracotta);
  background: rgba(255, 250, 240, .92);
  box-shadow: .45rem .6rem 1.2rem rgba(58, 40, 23, .11);
}

.start-card:nth-child(1) { transform: rotate(-1.2deg); }
.start-card:nth-child(2) { margin-top: 3rem; border-color: var(--blue); transform: rotate(.8deg); }
.start-card:nth-child(3) { margin-top: -1.5rem; border-color: var(--sage); transform: rotate(-.5deg); }

.start-card::before {
  content: "";
  width: 4.8rem;
  height: 1.1rem;
  position: absolute;
  top: -.72rem;
  left: 50%;
  background: rgba(232, 210, 161, .72);
  transform: translateX(-50%) rotate(-2deg);
}

.card-number {
  margin-bottom: auto;
  color: var(--terracotta-deep);
  font-family: var(--font-serif);
  font-size: 2.8rem;
  line-height: 1;
}

.start-card h3 {
  margin: 2.4rem 0 .75rem;
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.15;
}

.start-card p {
  color: var(--ink-soft);
}

.text-link,
.resource-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--terracotta-deep);
  font-weight: 850;
}

.text-link::after,
.resource-link::after {
  content: "";
  width: .48rem;
  height: .48rem;
  border-top: .13rem solid currentColor;
  border-right: .13rem solid currentColor;
  transform: rotate(45deg);
}

.map-section {
  position: relative;
  overflow: hidden;
  background: var(--blue-deep);
  color: #eef0df;
}

.map-section::before {
  content: "";
  width: 31rem;
  height: 31rem;
  position: absolute;
  top: -18rem;
  left: -8rem;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgba(255, 255, 255, .018), 0 0 0 10rem rgba(255, 255, 255, .018);
}

.map-layout {
  display: grid;
  grid-template-columns: minmax(19rem, .76fr) minmax(0, 1.24fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 7.5rem);
}

.map-copy {
  position: relative;
  z-index: 2;
}

.map-copy h2 {
  margin-bottom: 1.7rem;
  color: var(--white);
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4.5vw, 4.6rem);
  line-height: 1.04;
}

.map-copy .eyebrow {
  color: #f1bf6d;
}

.map-copy blockquote {
  margin: 0 0 1.2rem;
  padding-left: 1rem;
  border-left: .2rem solid var(--terracotta);
  color: var(--paper-aged);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
}

.map-copy > p:not(.eyebrow) {
  color: #d9ded0;
}

.map-directions {
  margin-top: 2.1rem;
  border-top: 1px solid rgba(255, 255, 255, .25);
}

.map-direction {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: .9rem;
  padding: 1rem .2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  color: var(--white);
  text-decoration: none;
  transition: padding-left .18s ease, background-color .18s ease;
}

.map-direction:hover {
  padding-left: .55rem;
  background: rgba(255, 255, 255, .045);
  color: var(--white);
}

.map-direction-number {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--terracotta);
  border-radius: 50%;
  color: #f6c77e;
  font-family: var(--font-serif);
  font-weight: 800;
}

.map-direction strong,
.map-direction span span {
  display: block;
}

.map-direction strong {
  margin-bottom: .15rem;
  font-family: var(--font-serif);
  font-size: 1.08rem;
}

.map-direction span span {
  color: #c8d0c5;
  font-size: .84rem;
  line-height: 1.45;
}

.map-figure {
  position: relative;
  margin: 0;
  padding: 1rem;
  background: var(--paper-light);
  box-shadow: 1.2rem 1.3rem 2.6rem rgba(0, 0, 0, .25);
  transform: rotate(1deg);
}

.map-open {
  display: block;
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: zoom-in;
}

.map-open img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.map-open span {
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  padding: .55rem .75rem;
  background: rgba(255, 250, 240, .95);
  color: var(--blue-deep);
  font-size: .76rem;
  font-weight: 850;
  box-shadow: .18rem .25rem .7rem rgba(34, 24, 15, .16);
}

.map-figure figcaption {
  margin-top: .8rem;
  color: var(--ink-soft);
  font-family: var(--font-serif);
  font-size: .82rem;
  font-style: italic;
  line-height: 1.4;
}

.book-section {
  position: relative;
  overflow: hidden;
  background: var(--paper-aged);
}

.book-section::after {
  content: "";
  width: 46%;
  height: 2px;
  position: absolute;
  right: -5%;
  bottom: 5rem;
  background: var(--terracotta);
  transform: rotate(-5deg);
}

.book-layout {
  display: grid;
  grid-template-columns: minmax(18rem, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(3.5rem, 9vw, 8rem);
}

.book-cover-wrap {
  width: min(100%, 18.5rem);
  position: relative;
  margin-inline: auto;
  isolation: isolate;
}

.book-cover-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4% -11% -5% 10%;
  border: 1px solid rgba(88, 55, 24, .25);
  background: rgba(255, 250, 240, .55);
  transform: rotate(4deg);
}

.book-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 714 / 1280;
  object-fit: contain;
  box-shadow: var(--shadow-book);
  transform: rotate(-2deg);
}

.book-copy {
  max-width: 43rem;
  position: relative;
  z-index: 2;
}

.book-copy h2 {
  max-width: 11ch;
  margin-bottom: .8rem;
}

.book-subtitle {
  max-width: 38rem;
  color: var(--terracotta-deep);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 700;
  line-height: 1.35;
}

.fact-list {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.25rem;
  margin: 1.6rem 0 2rem;
  padding: 1rem 0;
  border-block: 1px solid rgba(80, 55, 30, .28);
  list-style: none;
}

.fact-list li {
  position: relative;
  padding-left: 1rem;
  color: var(--blue-deep);
  font-size: .82rem;
  font-weight: 800;
}

.fact-list li::before {
  content: "";
  width: .4rem;
  height: .4rem;
  position: absolute;
  top: .54rem;
  left: 0;
  border-radius: 50%;
  background: var(--sage);
}

.chapters-section {
  position: relative;
  overflow: hidden;
  background: var(--paper-light);
}

.route-heading {
  position: relative;
}

.route-heading::after {
  content: "";
  width: .75rem;
  height: .75rem;
  display: block;
  margin: 2rem auto -5.25rem;
  border: .22rem solid var(--paper-light);
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 0 .15rem var(--terracotta);
}

.chapter-list {
  display: grid;
  position: relative;
  gap: 2rem;
  padding-top: 2rem;
}

.chapter-list::before {
  content: "";
  width: .18rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - .09rem);
  background: repeating-linear-gradient(to bottom, var(--terracotta) 0, var(--terracotta) .7rem, transparent .7rem, transparent 1.25rem);
}

.chapter-card {
  width: calc(50% - 2.7rem);
  position: relative;
  border: 1px solid var(--line);
  background: rgba(247, 238, 219, .66);
  transition: background-color .18s ease, box-shadow .18s ease;
}

.chapter-card:nth-child(even) {
  justify-self: end;
}

.chapter-card:nth-child(3n) {
  transform: rotate(.35deg);
}

.chapter-card:nth-child(3n + 1) {
  transform: rotate(-.25deg);
}

.chapter-card::after {
  content: "";
  width: 2.7rem;
  height: 1px;
  position: absolute;
  top: 3.5rem;
  right: -2.7rem;
  background: var(--terracotta);
}

.chapter-card:nth-child(even)::after {
  right: auto;
  left: -2.7rem;
}

.chapter-card[open] {
  background: var(--white);
  box-shadow: .5rem .65rem 1.4rem rgba(59, 40, 23, .1);
}

.chapter-card summary {
  min-height: 7rem;
  display: grid;
  grid-template-columns: 3.35rem minmax(0, 1fr) 5.2rem 2.2rem;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1rem;
  list-style: none;
  cursor: pointer;
}

.chapter-card summary::-webkit-details-marker { display: none; }
.chapter-number {
  color: var(--terracotta-deep);
  font-family: var(--font-serif);
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.chapter-title {
  margin: 0 0 .25rem;
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: clamp(1.12rem, 1.7vw, 1.55rem);
  line-height: 1.15;
}

.chapter-subtitle {
  margin: 0;
  color: var(--ink-soft);
  font-size: .82rem;
  line-height: 1.4;
}

.chapter-thumb {
  width: 5.2rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-light);
  transform: rotate(2deg);
}

.chapter-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chapter-toggle {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid var(--blue);
  border-radius: 50%;
}

.chapter-toggle::before,
.chapter-toggle::after {
  content: "";
  width: .72rem;
  height: .1rem;
  position: absolute;
  background: var(--blue);
}

.chapter-toggle::after {
  transform: rotate(90deg);
  transition: transform .18s ease;
}

.chapter-card[open] .chapter-toggle::after { transform: rotate(0); }

.chapter-body {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 1.2rem;
  padding: 0 1.2rem 1.4rem 4.35rem;
}

.chapter-topics {
  margin: 0;
  padding-left: 1rem;
  color: var(--ink-soft);
  font-size: .88rem;
}

.chapter-topics li + li { margin-top: .35rem; }

.chapter-action {
  padding: .9rem 1rem;
  border-left: .2rem solid var(--sage);
  background: var(--sage-pale);
}

.chapter-action strong {
  display: block;
  margin-bottom: .25rem;
  color: var(--blue-deep);
  font-size: .69rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.chapter-action p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: .88rem;
  line-height: 1.45;
}

.help-section {
  position: relative;
  padding-block: 0;
  overflow: hidden;
  background: var(--paper-aged);
}

.help-layout {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(26rem, .92fr);
  align-items: stretch;
  gap: 0;
}

.help-image-wrap {
  min-height: 48rem;
  overflow: hidden;
}

.help-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.help-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 7vw, 7rem) max(2rem, calc((100vw - var(--shell)) / 2));
  background: var(--blue-deep);
  color: #e7ecdf;
}

.help-panel .eyebrow { color: #f2bd69; }
.help-panel h2 { color: var(--white); }
.help-panel > p:not(.eyebrow) { color: #d2dacd; }

.field-label,
.filter-control label,
.resource-tools label,
.contact-form label:not(.check-label) {
  display: block;
  margin-bottom: .35rem;
  color: inherit;
  font-size: .76rem;
  font-weight: 850;
}

.select,
.text-input {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper-light);
  color: var(--ink);
}

.help-panel .select {
  border: 2px solid #d9c08d;
}

.scenario {
  margin-top: 1.2rem;
  padding: 1.25rem;
  border-left: .25rem solid var(--terracotta);
  background: rgba(255, 250, 240, .09);
}

.scenario ol {
  margin: 0;
  padding-left: 1.35rem;
}

.scenario li + li { margin-top: .55rem; }
.scenario-note {
  margin: 1rem 0 0;
  padding-top: .85rem;
  border-top: 1px solid rgba(255, 255, 255, .24);
  color: #f0ca8a;
  font-family: var(--font-serif);
  font-style: italic;
}

.gallery-section {
  position: relative;
  background: #263943;
  color: #e7ede8;
}

.gallery-section::before {
  content: "";
  height: .2rem;
  position: absolute;
  top: 4rem;
  right: 0;
  left: 0;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 8vw, rgba(217, 85, 11, .6) 8vw, rgba(217, 85, 11, .6) calc(8vw + .8rem));
}

.heading-row {
  max-width: none;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 3rem;
  text-align: left;
}

.heading-row > div:first-child {
  max-width: 50rem;
}

.gallery-section h2 { color: var(--white); }
.gallery-section .eyebrow { color: #efb661; }
.gallery-section .section-heading > div > p:last-child { color: #cdd6d2; }

.filter-control {
  width: min(18rem, 100%);
  flex: 0 0 auto;
}

.filter-control label { color: #eef2eb; }
.filter-control .select { border-color: #96a4a5; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(.75rem, 1.5vw, 1.35rem);
}

.guide-card {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--paper-light);
  color: var(--ink);
  text-align: left;
  cursor: zoom-in;
  box-shadow: .5rem .65rem 1.35rem rgba(0, 0, 0, .22);
  transition: transform .22s ease, box-shadow .22s ease;
}

.guide-card-1,
.guide-card-6 { transform: rotate(1deg); }
.guide-card-3,
.guide-card-7 { transform: rotate(-.7deg); }
.guide-card-featured { grid-column: span 6; }
.guide-card-2,
.guide-card-7 { grid-column: span 4; }
.guide-card-3,
.guide-card-6 { grid-column: span 2; }

.guide-card:hover {
  z-index: 2;
  transform: translateY(-.35rem) rotate(0);
  box-shadow: .75rem 1rem 1.8rem rgba(0, 0, 0, .3);
}

.guide-image {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #eee3ce;
}

.guide-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.guide-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .25rem;
  padding: .8rem .9rem 1rem;
  border-top: 1px solid var(--line-soft);
}

.guide-kicker {
  color: var(--terracotta-deep);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.guide-title {
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.24;
}

.guide-card-featured .guide-title {
  font-size: 1.22rem;
}

.guide-origin {
  margin-top: auto;
  color: var(--ink-soft);
  font-size: .68rem;
}

.center {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.gallery-section .button-outline {
  border-color: #d5dfdc;
  color: var(--white);
}

.gallery-section .button-outline:hover {
  background: var(--white);
  color: var(--blue-deep);
}

.resources-section {
  position: relative;
  background: var(--paper-aged);
}

.resources-shell {
  display: grid;
  grid-template-columns: minmax(18rem, .62fr) minmax(0, 1.38fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 8rem);
}

.resource-heading {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  margin: 0;
  text-align: left;
}

.resource-heading h2 {
  max-width: 7ch;
}

.resource-tools,
.resource-grid,
.empty-state {
  grid-column: 2;
}

.resource-tools {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--ink);
}

.resource-grid {
  display: grid;
}

.resource-group {
  border-bottom: 1px solid var(--line);
}

.resource-group summary {
  min-height: 4.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem .25rem;
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.resource-group summary::-webkit-details-marker { display: none; }
.resource-count {
  color: var(--terracotta-deep);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .05em;
}

.resource-list {
  border-top: 1px solid var(--line-soft);
}

.resource-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1.2rem .25rem;
  border-bottom: 1px dotted rgba(82, 57, 32, .35);
}

.resource-card:last-child { border-bottom: 0; }
.resource-card h3 {
  margin-bottom: .25rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.3;
}

.resource-card p {
  margin-bottom: .35rem;
  color: var(--ink-soft);
  font-size: .85rem;
  line-height: 1.45;
}

.resource-link {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: .78rem;
}

.tag {
  display: inline-block;
  padding: .12rem .4rem;
  border: 1px solid rgba(101, 122, 61, .5);
  color: #45542c;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.empty-state {
  margin: 1rem 0 0;
  padding: 1.4rem;
  border-left: .2rem solid var(--terracotta);
  background: rgba(255, 250, 240, .65);
}

.works-section {
  overflow: hidden;
  background: var(--paper-light);
}

.works-layout {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: start;
  gap: clamp(3rem, 7vw, 7rem);
}

.works-image-wrap {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  margin-left: -8vw;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: .9rem 1rem 2rem rgba(59, 40, 23, .12);
  transform: rotate(-1deg);
}

.works-image-wrap img {
  width: 100%;
  height: auto;
}

.works-list {
  display: grid;
  gap: 0;
  border-top: 2px solid var(--ink);
}

.work-card {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  padding: 1.7rem .2rem;
  border-bottom: 1px solid var(--line);
}

.work-card-2 { margin-left: 2.5rem; }
.work-card-3 { margin-left: .7rem; }
.work-number {
  grid-row: 1 / span 4;
  color: var(--terracotta-deep);
  font-family: var(--font-serif);
  font-size: 1.3rem;
}

.work-label {
  margin-bottom: .35rem;
  color: var(--sage);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.work-card h3 {
  margin-bottom: .45rem;
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: 1.8rem;
  line-height: 1.1;
}

.work-card p {
  color: var(--ink-soft);
}

.author-section {
  position: relative;
  background:
    linear-gradient(90deg, rgba(101, 122, 61, .12), transparent 45%),
    var(--sage-pale);
}

.author-section::before {
  content: "";
  width: .2rem;
  height: 11rem;
  position: absolute;
  top: -2rem;
  left: 50%;
  background: var(--terracotta);
  transform: rotate(-7deg);
}

.author-card {
  max-width: 68rem;
  display: grid;
  grid-template-columns: minmax(14rem, 20rem) 1fr;
  align-items: center;
  gap: clamp(3rem, 8vw, 7rem);
}

.author-portrait {
  position: relative;
  padding: .8rem .8rem 2.4rem;
  background: var(--paper-light);
  box-shadow: .75rem .9rem 1.6rem rgba(52, 40, 24, .14);
  transform: rotate(-1.5deg);
}

.author-photo {
  width: 100%;
  max-width: 20rem;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center 42%;
  filter: grayscale(1) contrast(1.03);
}

.author-portrait span {
  position: absolute;
  right: 1rem;
  bottom: .45rem;
  color: var(--terracotta-deep);
  font-family: var(--font-serif);
  font-size: .88rem;
  font-style: italic;
}

.author-card h2 {
  margin-bottom: .5rem;
}

.author-role {
  color: var(--terracotta-deep);
  font-weight: 800;
}

.author-card blockquote {
  margin: 1.6rem 0;
  padding-left: 1.3rem;
  border-left: .2rem solid var(--terracotta);
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-style: italic;
  line-height: 1.42;
}

.contact-section {
  background: var(--paper);
}

.contact-layout {
  display: grid;
  grid-template-columns: .72fr 1fr;
  align-items: start;
  gap: clamp(3rem, 8vw, 7rem);
}

.direct-email {
  margin-top: 2rem;
  font-weight: 750;
}

.contact-form {
  display: grid;
  gap: 1rem;
  position: relative;
  padding: clamp(1.7rem, 4vw, 2.7rem);
  border-top: .3rem solid var(--blue);
  background: var(--paper-light);
  box-shadow: .65rem .8rem 1.6rem rgba(58, 40, 23, .11);
  transform: rotate(.25deg);
}

.contact-form::before {
  content: "";
  width: 5.5rem;
  height: 1.1rem;
  position: absolute;
  top: -.7rem;
  left: 50%;
  background: rgba(230, 207, 156, .75);
  transform: translateX(-50%) rotate(-2deg);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.check-label {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  align-items: start;
  gap: .65rem;
  color: var(--ink-soft);
  font-size: .84rem;
  cursor: pointer;
}

.check-label input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .2rem;
  accent-color: var(--terracotta-deep);
}

.form-note,
.form-status {
  margin: 0;
  font-size: .82rem;
}

.form-status:not(:empty) {
  padding: .8rem;
  border-left: .2rem solid var(--sage);
  background: var(--sage-pale);
}

.contact-form .button { justify-self: start; }

.site-footer {
  padding-block: 4.7rem 1.5rem;
  border-top: .28rem solid var(--terracotta);
  background: #2e2119;
  color: #d9d5ca;
}

.site-footer a { color: #f6f0e4; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr .75fr .9fr;
  gap: 3rem;
}

.footer-grid > div:first-child p {
  max-width: 23rem;
  margin-top: 1.2rem;
  font-family: var(--font-serif);
  font-style: italic;
}

.footer-grid h2 {
  margin: 0 0 .9rem;
  color: var(--paper-aged);
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-grid > div:not(:first-child) a {
  display: block;
  width: fit-content;
  margin-bottom: .55rem;
}

.footer-brand,
.footer-brand:hover,
.footer-brand .brand-name { color: var(--white); }
.footer-brand .brand-book { height: 4.7rem; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: #aaa59c;
  font-size: .76rem;
}

.footer-bottom p { margin: 0; }

.image-dialog {
  width: min(72rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  background: var(--paper-light);
  color: var(--ink);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .42);
}

.image-dialog::backdrop {
  background: rgba(20, 29, 32, .82);
}

.dialog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  z-index: 2;
  top: 0;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 250, 240, .97);
}

.dialog-bar p {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
}

.dialog-close {
  min-height: 2.5rem;
  padding: .45rem .8rem;
  border: 1px solid var(--blue);
  background: transparent;
  color: var(--blue-deep);
  font-weight: 800;
  cursor: pointer;
}

.image-dialog > img {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 9rem);
  object-fit: contain;
  background: #e7dbc5;
}

.dialog-note {
  margin: 0;
  padding: .75rem 1rem 1rem;
  color: var(--ink-soft);
  font-size: .78rem;
}

.legal-main {
  min-height: 72vh;
  padding-block: clamp(4rem, 8vw, 8rem);
}

.legal-article {
  max-width: 56rem;
}

.legal-article h1 {
  max-width: 12ch;
  margin-bottom: 1.5rem;
}

.legal-article h2 {
  margin: 2.5rem 0 .7rem;
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  letter-spacing: 0;
}

.legal-updated {
  color: var(--ink-soft);
  font-size: .86rem;
}

.reveal {
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity .65s ease, transform .65s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 68rem) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero-copy { max-width: 47rem; }
  .hero-stage {
    width: min(100%, 52rem);
    min-height: 35rem;
    margin-inline: auto;
  }

  .map-layout,
  .book-layout,
  .works-layout,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .map-copy,
  .book-copy { max-width: 50rem; }
  .map-figure { transform: none; }
  .book-cover-wrap { width: min(78vw, 17.5rem); }

  .resources-shell {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .resource-heading {
    position: static;
  }

  .resource-heading h2 { max-width: 12ch; }
  .resource-tools,
  .resource-grid,
  .empty-state { grid-column: auto; }
  .works-image-wrap {
    position: relative;
    top: auto;
    width: 112%;
    margin-left: -6%;
  }
}

@media (max-width: 60rem) {
  :root { --header-height: 4.55rem; }
  .header-inner { position: relative; }
  .brand-book { height: 3.2rem; }
  .menu-button { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    z-index: 10;
    top: 100%;
    right: 0;
    left: 0;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: .45rem 1rem 1rem;
    border-bottom: 2px solid var(--terracotta);
    background: var(--paper-light);
    box-shadow: 0 1rem 2rem rgba(49, 32, 18, .15);
  }

  .site-nav.open { display: flex; }
  .site-nav a {
    padding: .8rem 0;
    border-bottom: 1px solid var(--line);
    font-size: .94rem;
  }
  .site-nav a::after { display: none; }

  .start-grid {
    grid-template-columns: 1fr;
    max-width: 43rem;
    margin-inline: auto;
  }
  .start-card,
  .start-card:nth-child(2),
  .start-card:nth-child(3) {
    min-height: 0;
    margin-top: 0;
    transform: none;
  }
  .card-number { margin-bottom: 1.5rem; }
  .start-card h3 { margin-top: 0; }

  .chapter-list::before { left: .8rem; }
  .chapter-card,
  .chapter-card:nth-child(even) {
    width: calc(100% - 3rem);
    justify-self: end;
    transform: none;
  }
  .chapter-card::after,
  .chapter-card:nth-child(even)::after {
    width: 2.2rem;
    right: auto;
    left: -2.2rem;
  }

  .help-layout {
    grid-template-columns: 1fr;
  }
  .help-image-wrap { min-height: 0; }
  .help-image-wrap img {
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .help-panel { padding: 4.5rem max(2rem, calc((100vw - var(--shell)) / 2)); }

  .gallery-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .guide-card,
  .guide-card-2,
  .guide-card-7 { grid-column: span 3; }
  .guide-card-featured { grid-column: span 6; }
  .guide-card-3,
  .guide-card-6 { grid-column: span 2; }
}

@media (max-width: 44rem) {
  .shell { width: min(var(--shell), calc(100% - 2rem)); }
  .brand-name { display: none; }
  .menu-button [data-menu-label] { display: none; }
  .hero { min-height: auto; }
  .hero-inner { padding-block: 3.5rem 5rem; }
  .hero h1 {
    max-width: 8ch;
    font-size: clamp(3.65rem, 18vw, 5.8rem);
  }
  .hero-text { font-size: 1.28rem; }
  .hero-stage {
    min-height: 26rem;
    margin-top: 1rem;
  }
  .hero-visual-frame {
    width: 108%;
    right: -8%;
  }
  .hero-book {
    width: min(40vw, 10.8rem);
    right: 4%;
    bottom: -2%;
  }
  .hero-caption {
    right: auto;
    bottom: 0;
    left: 2%;
  }
  .button-row .button { width: 100%; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat { min-height: 6.3rem; border-bottom: 1px solid var(--line); }
  .stat:nth-child(odd) { border-left: 1px solid var(--line); }
  .stat strong { font-size: 2rem; }
  .stat span { font-size: .75rem; }
  .section { padding-block: 5.5rem; }
  .story-heading h2 { font-size: clamp(2.75rem, 13vw, 4rem); }
  .map-layout { gap: 2.5rem; }
  .map-figure { margin-inline: -.45rem; padding: .55rem; }
  .map-open span { position: static; display: block; margin-top: .55rem; }
  .book-layout { gap: 4rem; }

  .chapter-card summary {
    grid-template-columns: 2.6rem minmax(0, 1fr) 2rem;
    padding: .8rem;
  }
  .chapter-thumb { display: none; }
  .chapter-number { font-size: 1.6rem; }
  .chapter-body {
    grid-template-columns: 1fr;
    padding: 0 1rem 1rem 3.4rem;
  }

  .heading-row {
    align-items: stretch;
    flex-direction: column;
    gap: 1.4rem;
  }
  .filter-control { width: 100%; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .guide-card,
  .guide-card-2,
  .guide-card-3,
  .guide-card-6,
  .guide-card-7,
  .guide-card-featured { grid-column: span 1; transform: none; }
  .guide-card-featured { grid-column: span 2; }
  .guide-copy { padding: .65rem; }
  .guide-title { font-size: .86rem; }
  .guide-card-featured .guide-title { font-size: 1rem; }
  .guide-origin { display: none; }

  .resource-tools,
  .form-grid { grid-template-columns: 1fr; }
  .resource-card {
    grid-template-columns: 1fr;
    gap: .6rem;
  }
  .resource-link { white-space: normal; }
  .work-card-2,
  .work-card-3 { margin-left: 0; }
  .author-section::before { left: 1.2rem; }
  .author-card { grid-template-columns: 1fr; gap: 3rem; }
  .author-portrait { width: min(100%, 19rem); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: .45rem; }
}

@media (max-width: 25rem) {
  .gallery-grid,
  .footer-grid { grid-template-columns: 1fr; }
  .guide-card-featured { grid-column: span 1; }
  .footer-grid > div:first-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* UI, image integrity and accessibility revision */

html {
  scroll-padding-top: calc(var(--header-height) + 1.5rem);
}

body {
  font-size: 1.0625rem;
}

main > section,
main > section[id],
.legal-main,
[id] {
  scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

img {
  height: auto;
}

p,
li,
blockquote,
.section-heading > p:last-child {
  overflow-wrap: break-word;
}

.section-heading > p:last-child,
.book-copy > p,
.map-copy > p,
.help-panel > p,
.together-heading > p,
.resource-heading > p,
.works-layout .section-heading > p,
.author-card > div:last-child > p,
.contact-layout .section-heading > p {
  max-width: 65ch;
}

.eyebrow,
.site-nav a,
.field-label,
.filter-control label,
.resource-tools label,
.contact-form label:not(.check-label),
.guide-kicker,
.guide-open-cue,
.work-label,
.fact-list li,
.chapter-subtitle,
.chapter-action strong,
.map-direction span span,
.map-open span,
.map-footer figcaption [data-map-note],
.gallery-origin-note,
.extras-kind-stamp,
.extras-duration,
.extras-sheet h4,
.extras-counter,
.extras-remember,
.extras-reset,
.extras-storage-status,
.together-settings-heading p,
.together-setting legend,
.together-setting-choices span,
.together-path-label,
.together-path-node > span:last-child,
.together-mission-counter,
.together-role-token > p,
.together-role-token strong,
.together-role-token > div > span:last-child > span,
.together-step > span:last-child,
.together-progress,
.together-memory,
.together-storage-status,
.resource-search-tool label,
.resource-tab strong,
.resource-tab > span > span,
.atlas-counter,
.atlas-guide span,
.site-mini-browser,
.site-mini-body strong,
.site-mini-body > span:nth-child(2) > span,
.site-mini-cue,
.atlas-navigation .button,
.resource-search-result > p,
.resource-link,
.resource-card p,
.tag,
.form-note,
.form-status,
.check-label,
.footer-bottom,
.dialog-note {
  font-size: max(.875rem, 1em);
  line-height: 1.45;
}

.eyebrow,
.guide-kicker,
.work-label,
.together-mission-counter,
.atlas-counter,
.resource-search-result > p {
  font-size: .875rem;
}

.button,
.select,
.text-input,
.menu-button,
.language-link,
.dialog-close,
.extras-choice,
.extras-related,
.extras-reset,
.together-rotate,
.together-related,
.together-memory button,
.resource-search-row button,
.atlas-navigation .button,
.contact-form input,
.contact-form select,
.contact-form textarea {
  min-height: 2.75rem;
}

.check-label,
.extras-remember,
.together-memory label,
.together-setting-choices label {
  min-height: 2.75rem;
  align-items: center;
}

.check-label input,
.extras-remember input,
.together-memory input,
.together-step input {
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
}

.site-header {
  isolation: isolate;
}

.skip-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  border-radius: .45rem;
  box-shadow: 0 .25rem .8rem rgba(0, 0, 0, .25);
}

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

.help-section {
  padding-block: clamp(4.5rem, 8vw, 7rem);
  overflow: clip;
  background:
    radial-gradient(circle at 7% 12%, rgba(34, 88, 120, .12), transparent 22rem),
    var(--paper-aged);
}

.help-layout {
  width: min(var(--shell), calc(100% - 3.5rem));
  max-width: var(--shell);
  grid-template-columns: minmax(24rem, 1fr) minmax(24rem, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.help-image-wrap {
  min-height: 0;
  overflow: hidden;
  border: .45rem solid var(--paper-light);
  border-radius: 3rem .65rem 2.2rem .8rem;
  background: var(--paper-light);
  box-shadow: .75rem .9rem 0 rgba(101, 122, 61, .24), 1rem 1.2rem 2rem rgba(58, 40, 23, .14);
  transform: rotate(-.4deg);
}

.help-image-wrap img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: center;
}

.help-panel {
  min-width: 0;
  justify-content: flex-start;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: .75rem 3rem 1rem 2.3rem;
  box-shadow: .7rem .85rem 0 rgba(217, 85, 11, .2);
}

.help-panel h2 {
  max-width: 11ch;
}

.help-panel > p:not(.eyebrow) {
  color: #f0f1e8;
}

.help-panel .select {
  font-size: 1rem;
}

.scenario {
  font-size: 1rem;
  line-height: 1.6;
}

.together-hero {
  grid-template-columns: minmax(24rem, 1fr) minmax(28rem, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.together-heading {
  align-self: center;
}

.together-heading h2 {
  max-width: 10ch;
  font-size: clamp(3rem, 5.5vw, 5.5rem);
}

.together-heading > p:last-child {
  max-width: 60ch;
  font-size: 1.08rem;
}

.together-visual {
  width: 100%;
  max-width: 44rem;
  justify-self: end;
  padding: .55rem .55rem 2.8rem;
}

.together-visual img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 1693 / 929;
  object-fit: contain;
}

.together-settings {
  grid-template-columns: minmax(15rem, .28fr) minmax(0, .72fr);
}

.together-settings-scroll {
  grid-template-columns: repeat(5, minmax(8.5rem, 1fr));
}

.together-setting-choices span {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  padding: .55rem .7rem;
}

.together-path-node {
  flex-basis: 9rem;
  min-height: 5.8rem;
}

.together-role-token {
  padding: 1rem;
}

.together-step {
  min-height: 3.25rem;
  align-items: center;
}

.resources-section {
  overflow: hidden;
}

.resource-intro {
  grid-template-columns: minmax(24rem, 1fr) minmax(24rem, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}

.resource-collage {
  min-height: clamp(17rem, 27vw, 22rem);
}

.resource-collage img {
  width: min(58%, 25rem);
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.resource-tab {
  flex-basis: 10rem;
  min-height: 0;
  padding: .45rem;
}

.resource-tab img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.resource-tab > span {
  min-height: 3.7rem;
  align-items: center;
}

.atlas-spread {
  grid-template-columns: minmax(20rem, .82fr) minmax(24rem, 1.18fr);
  align-items: start;
}

.atlas-guide {
  position: static;
  width: 100%;
  max-width: 32rem;
  justify-self: center;
}

.atlas-guide img {
  width: 100%;
  height: auto !important;
  aspect-ratio: auto;
  object-fit: contain;
}

.atlas-copy {
  max-width: 43rem;
}

.site-miniature {
  min-height: 4.75rem;
}

.site-mini-browser {
  min-height: 2rem;
}

.site-mini-body {
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: .9rem;
  padding: .85rem;
}

.site-mini-mark {
  width: 2.65rem;
}

.image-dialog > img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.works-image-wrap {
  position: static;
  top: auto;
  margin-left: 0;
}

.works-image-wrap img,
.hero-image,
.map-artifact img,
.book-cover,
.author-photo {
  height: auto !important;
}

@media (max-width: 72rem) {
  .menu-button { display: inline-flex; }

  .site-nav {
    display: none;
    position: absolute;
    z-index: 10;
    top: 100%;
    right: 0;
    left: 0;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: .45rem 1rem 1rem;
    border-bottom: 2px solid var(--terracotta);
    background: var(--paper-light);
    box-shadow: 0 1rem 2rem rgba(49, 32, 18, .15);
  }

  .site-nav.open { display: flex; }
  .site-nav a {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    padding: .65rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
  }
  .site-nav a::after { display: none; }

  .help-layout,
  .together-hero,
  .resource-intro,
  .atlas-spread {
    grid-template-columns: 1fr;
  }

  .help-image-wrap,
  .help-panel,
  .together-heading,
  .together-visual,
  .resource-heading,
  .resource-collage,
  .atlas-copy {
    width: min(100%, 48rem);
    margin-inline: auto;
  }

  .together-visual { justify-self: center; }
  .together-settings { grid-template-columns: 1fr; }
  .together-settings-scroll { grid-template-columns: repeat(3, minmax(9rem, 1fr)); }
  .resource-collage { min-height: 25rem; }
}

@media (max-width: 44rem) {
  .shell,
  .help-layout {
    width: min(var(--shell), calc(100% - 2rem));
  }

  h1 { font-size: clamp(3.25rem, 16vw, 5rem); }
  h2 { font-size: clamp(2.35rem, 12vw, 4rem); }

  .help-section { padding-block: 4rem; }
  .help-panel { padding: 1.65rem 1rem 1.8rem; border-radius: .55rem 2rem .7rem 1.5rem; }
  .help-image-wrap { border-width: .3rem; border-radius: 2rem .45rem 1.5rem .55rem; }

  .together-hero { gap: 2rem; }
  .together-visual {
    padding: .35rem .35rem 2.7rem;
    border-radius: 1.8rem .4rem 1.4rem .5rem;
  }
  .together-visual img { border-radius: 1.45rem .25rem 1rem .3rem; }

  .together-settings {
    width: 100%;
    margin-inline: 0;
    padding: 1rem;
  }
  .together-settings-scroll {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
  .together-setting { width: 100%; }
  .together-setting-choices { display: grid; grid-template-columns: 1fr 1fr; }

  .together-role-strip {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
  .together-role-token { width: 100%; }

  .resource-intro { gap: 2rem; }
  .resource-collage { min-height: 18rem; }
  .resource-ribbon { width: 100%; margin-inline: 0; padding-inline: .25rem; }
  .atlas-spread,
  .resource-results {
    width: 100%;
    margin-inline: 0;
  }
  .site-mini-body { grid-template-columns: 2.65rem minmax(0, 1fr); }
  .site-mini-cue { grid-column: 2; white-space: normal; }

  .chapter-card summary { min-height: 5.5rem; }
  .chapter-title { font-size: 1.2rem; }
  .gallery-grid { padding: .75rem; }
  .guide-card,
  .guide-card-0,
  .guide-card-1,
  .guide-card-2,
  .guide-card-3,
  .guide-card-4,
  .guide-card-featured { width: 100%; }
  .guide-title,
  .guide-card-featured .guide-title { font-size: 1.05rem; }
}

@media (max-width: 25rem) {
  .together-setting-choices,
  .form-grid,
  .stat-grid {
    grid-template-columns: 1fr;
  }
  .stat:nth-child(n) { border-left: 1px solid var(--line); }
  .resource-collage { min-height: 15rem; }
}

@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; }
  .button,
  .language-link,
  .select,
  .text-input,
  .chapter-card,
  .help-panel,
  .extras-choice,
  .together-setting,
  .together-setting-choices span,
  .together-path-node,
  .together-step,
  .resource-tab,
  .atlas-guide,
  .site-miniature,
  .contact-form {
    border: 2px solid CanvasText;
    box-shadow: none;
  }
  .button-primary,
  .extras-choice[aria-pressed="true"],
  .together-setting-choices input:checked + span,
  .together-path-node[aria-selected="true"],
  .resource-tab[aria-selected="true"] {
    background: Highlight;
    color: HighlightText;
  }
  .reading-progress { display: none; }
}

/* Learning platform: compass, passport, practice labs and trust */
.install-button {
  min-width: 3.6rem;
  min-height: 2.75rem;
  padding: .48rem .7rem;
  border: 2px solid var(--sage);
  border-radius: .75rem .45rem .8rem .5rem;
  background: var(--paper-light);
  color: var(--ink);
  font-size: .76rem;
  font-weight: 900;
  cursor: pointer;
}

.pwa-notice {
  position: fixed;
  z-index: 140;
  right: 1rem;
  bottom: 1rem;
  max-width: min(30rem, calc(100% - 2rem));
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1rem;
  border: 2px solid var(--blue);
  border-radius: .7rem 1.3rem .65rem 1.15rem;
  background: var(--paper-light);
  box-shadow: .45rem .55rem 0 rgba(34, 88, 120, .18);
  color: var(--ink);
  font-size: .88rem;
}

.pwa-notice[hidden] { display: none !important; }

.pwa-notice button {
  min-height: 2.75rem;
  padding: .45rem .7rem;
  border: 1px solid var(--blue);
  background: transparent;
  color: var(--blue-deep);
  font-weight: 900;
  cursor: pointer;
}

.learning-section {
  position: relative;
  overflow: clip;
  padding-block: clamp(5rem, 9vw, 8rem);
  border-block: 3px solid var(--terracotta);
  background:
    linear-gradient(90deg, rgba(34, 88, 120, .045) 1px, transparent 1px) 0 0 / 2rem 2rem,
    linear-gradient(rgba(34, 88, 120, .045) 1px, transparent 1px) 0 0 / 2rem 2rem,
    var(--paper-light);
}

.learning-section::before {
  content: "";
  position: absolute;
  width: 22rem;
  height: 22rem;
  top: -9rem;
  right: -7rem;
  border: 4rem double rgba(101, 122, 61, .14);
  border-radius: 50%;
  transform: rotate(12deg);
}

.learning-shell { position: relative; }

.learning-heading {
  max-width: 58rem;
  margin-bottom: 2.2rem;
}

.learning-heading h2,
.practice-heading h2 {
  max-width: 15ch;
  color: var(--blue-deep);
}

.learning-heading > p:last-child,
.practice-heading > p:last-child {
  max-width: 48rem;
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
}

.learning-route {
  width: min(48rem, 92%);
  display: flex;
  align-items: center;
  margin: 0 0 1.8rem 2.2rem;
  color: var(--paper-light);
}

.learning-route span {
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 3px solid var(--blue-deep);
  border-radius: 50% 44% 52% 46%;
  background: var(--terracotta);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  transform: rotate(-3deg);
}

.learning-route span:nth-of-type(even) { background: var(--sage); transform: rotate(4deg); }
.learning-route i { height: 0; flex: 1 1 auto; border-top: 3px dashed var(--terracotta); }

.learning-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(20rem, .8fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.compass-panel {
  position: relative;
  padding: clamp(1.3rem, 3vw, 2.6rem);
  border: 2px solid var(--blue);
  border-radius: 1.1rem 2.6rem 1.25rem 2rem;
  background: var(--paper-light);
  box-shadow: .85rem 1rem 0 rgba(34, 88, 120, .13);
}

.compass-panel::before {
  content: "BUSSOLA  /  COMPASS";
  position: absolute;
  top: -.85rem;
  right: 2rem;
  padding: .2rem .8rem;
  transform: rotate(2deg);
  background: #ead6a4;
  color: var(--ink);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.compass-form label {
  display: block;
  margin-bottom: .65rem;
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 700;
}

.compass-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .7rem;
}

.compass-input-row input {
  min-height: 3.4rem;
  width: 100%;
  padding: .72rem 1rem;
  border: 2px solid var(--line);
  border-radius: .55rem .9rem .65rem .8rem;
  background: #fffdf8;
  color: var(--ink);
  font-size: 1rem;
}

.compass-suggestion-wrap { margin-block: 1.25rem 1.7rem; }
.compass-suggestion-wrap > p { margin-bottom: .55rem; font-size: .78rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.compass-suggestions { display: flex; flex-wrap: wrap; gap: .55rem; }
.compass-suggestion {
  min-height: 2.75rem;
  padding: .55rem .75rem;
  border: 1px dashed var(--sage);
  border-radius: .65rem .35rem .72rem .4rem;
  background: rgba(223, 227, 196, .45);
  color: var(--ink);
  font-size: .86rem;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}
.compass-suggestion:hover { transform: translateY(-2px) rotate(-.4deg); background: var(--sage-pale); }

.compass-results { display: grid; gap: 1rem; }
.compass-route {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: .9rem;
  padding: 1rem 1rem 1.1rem .7rem;
  border-top: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(217, 85, 11, .055), transparent 62%);
}
.compass-route:nth-child(even) { transform: rotate(.25deg); }
.compass-route-number {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  margin-top: .15rem;
  border: 2px solid var(--terracotta);
  border-radius: 50%;
  color: var(--terracotta-deep);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 900;
}
.compass-route h3 { margin-bottom: .5rem; color: var(--blue-deep); font-family: var(--font-serif); font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.12; }
.compass-route p { margin-bottom: .55rem; }
.compass-route-meta { color: var(--terracotta-deep); font-size: .75rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.compass-route-why { color: var(--ink-soft); font-size: .9rem; }
.compass-route-tags { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin: .7rem 0; }
.compass-route-tags div { display: flex; gap: .35rem; }
.compass-route-tags dt { font-weight: 900; }
.compass-route-tags dd { margin: 0; }
.compass-empty { padding: 1.1rem; border-left: 4px solid var(--gold); background: rgba(212, 154, 56, .1); }

.skills-passport {
  position: sticky;
  top: calc(var(--header-height) + 1.5rem);
  padding: 2rem 1.35rem 1.5rem 2rem;
  border: 2px solid var(--terracotta-deep);
  border-radius: .8rem 2.2rem .9rem 1.6rem;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 1.72rem, rgba(34, 88, 120, .1) 1.72rem, rgba(34, 88, 120, .1) 1.78rem),
    #fffaf0;
  box-shadow: .75rem .9rem 0 rgba(159, 54, 10, .14);
}
.skills-passport::after {
  content: "";
  position: absolute;
  width: 6.5rem;
  height: 1.5rem;
  top: -.55rem;
  left: 40%;
  transform: rotate(-2deg);
  background: rgba(234, 214, 164, .76);
}
.skills-passport h3 { color: var(--terracotta-deep); }
.skills-passport > p:not(.eyebrow, .passport-status) { font-size: .9rem; }
.passport-skill-list { display: grid; gap: .65rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.passport-skill-disclosure > summary { display: none; }
.passport-skill-disclosure[open] > .passport-skill-list { display: grid; }
.passport-skill-heading { display: flex; justify-content: space-between; gap: .7rem; font-size: .78rem; }
.passport-skill-heading span { color: var(--ink-soft); text-align: right; }
.passport-skill progress { width: 100%; height: .65rem; accent-color: var(--sage); }
.passport-next { margin: 1.3rem -.25rem 1.2rem; padding: .9rem 1rem; border: 1px solid var(--sage); border-radius: .5rem 1.1rem .55rem .8rem; background: rgba(223, 227, 196, .64); }
.passport-next h4 { margin: 0 0 .45rem; color: var(--blue-deep); font-family: var(--font-serif); }
.passport-next p { margin-bottom: .45rem; font-size: .85rem; }
.passport-memory { min-height: 2.75rem; display: flex; align-items: flex-start; gap: .55rem; font-size: .86rem; font-weight: 750; }
.passport-memory input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--blue); }
.passport-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.passport-actions button { min-height: 2.75rem; padding: .5rem .65rem; border: 1px solid var(--line); background: var(--paper-light); color: var(--ink); font-size: .78rem; font-weight: 850; cursor: pointer; }
.passport-status { margin: .75rem 0 0; color: var(--ink-soft); font-size: .78rem; }

.practice-section {
  position: relative;
  padding-block: clamp(5rem, 9vw, 8rem);
  background:
    radial-gradient(circle at 85% 10%, rgba(212, 154, 56, .18), transparent 22rem),
    var(--blue-deep);
  color: var(--paper-light);
}
.practice-section h2,
.practice-section h3,
.practice-section h4 { color: inherit; }
.practice-heading { max-width: 57rem; }
.practice-heading h2 { color: var(--paper-light); }
.practice-heading .eyebrow { color: #f5b55f; }
.practice-privacy { max-width: 54rem; padding-left: 1rem; border-left: 4px solid #f5b55f; color: #fff2d8; }
.practice-tabs-wrap { margin-top: 2rem; }
.practice-tabs-wrap > p { color: #f5b55f; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.practice-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.practice-tab {
  min-height: 8rem;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .7rem;
  border: 2px solid rgba(255, 250, 240, .42);
  border-radius: .8rem 1.5rem .65rem 1.15rem;
  background: rgba(255, 250, 240, .09);
  color: var(--paper-light);
  text-align: left;
  cursor: pointer;
}
.practice-tab img { width: 7.5rem; aspect-ratio: 16 / 9; border-radius: .45rem .8rem .45rem .7rem; object-fit: cover; }
.practice-tab span { display: grid; gap: .35rem; }
.practice-tab strong { font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.15; }
.practice-tab small { color: #ecd8b4; }
.practice-tab[aria-selected="true"] { border-color: #f5b55f; background: var(--paper-light); color: var(--blue-deep); box-shadow: .4rem .55rem 0 rgba(217, 85, 11, .8); transform: translateY(-.25rem) rotate(-.4deg); }
.practice-tab[aria-selected="true"] small { color: var(--terracotta-deep); }

.simulation-player {
  position: relative;
  min-height: 29rem;
  margin-top: 2rem;
  padding: clamp(1.4rem, 4vw, 3.4rem);
  border: 3px solid #dfc48f;
  border-radius: 1rem 3rem 1.25rem 2.4rem;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 2.15rem, rgba(34, 88, 120, .09) 2.15rem, rgba(34, 88, 120, .09) 2.2rem),
    var(--paper-light);
  box-shadow: 1rem 1.15rem 0 rgba(101, 122, 61, .56);
  color: var(--ink);
}
.simulation-player::before { content: ""; position: absolute; width: 8rem; height: 1.8rem; top: -.7rem; right: 13%; transform: rotate(1.5deg); background: rgba(234, 214, 164, .82); }
.simulation-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--terracotta); }
.simulation-header h3 { margin: 0; color: var(--blue-deep); font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3.5rem); }
.simulation-meta { margin: 0; color: var(--terracotta-deep); font-weight: 900; white-space: nowrap; }
.simulation-intro { max-width: 48rem; padding-block: 2rem; font-size: 1.08rem; }
.simulation-privacy { padding: .8rem 1rem; border-left: 4px solid var(--sage); background: rgba(223, 227, 196, .55); font-size: .92rem; }
.simulation-step { max-width: 62rem; padding-top: 1.6rem; }
.simulation-step-counter { color: var(--terracotta-deep); font-size: .8rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.simulation-step h4 { margin-bottom: .65rem; color: var(--blue-deep); font-family: var(--font-serif); font-size: clamp(1.65rem, 3vw, 2.5rem); line-height: 1.08; }
.simulation-prompt { max-width: 50rem; font-size: 1.1rem; }
.simulation-choices { display: grid; gap: .75rem; margin: 1.5rem 0 0; padding: 1rem 0 0; border: 0; border-top: 1px dashed var(--line); }
.simulation-choices legend { padding-right: .7rem; color: var(--ink-soft); font-weight: 900; }
.simulation-choice { min-height: 3.2rem; padding: .75rem 1rem; border: 2px solid var(--blue); border-radius: .55rem 1.2rem .6rem .95rem; background: #fffdf8; color: var(--blue-deep); font-weight: 850; text-align: left; cursor: pointer; }
.simulation-choice:hover { border-color: var(--terracotta); transform: translateX(.25rem); }
.simulation-feedback { max-width: 50rem; margin: 1.4rem 0; padding: 1rem 1.2rem; border: 2px solid var(--sage); border-radius: .6rem 1.2rem .65rem 1rem; background: rgba(223, 227, 196, .68); }
.simulation-feedback.quality-low { border-color: var(--gold); background: rgba(212, 154, 56, .13); }
.simulation-feedback strong { display: block; margin-bottom: .35rem; color: var(--blue-deep); font-family: var(--font-serif); font-size: 1.15rem; }
.simulation-feedback p { margin: 0; }
.simulation-restart { min-height: 2.75rem; margin-top: 1.25rem; border: 0; background: transparent; cursor: pointer; }
.simulation-complete { max-width: 50rem; padding-top: 2rem; }
.simulation-complete h4 { color: var(--blue-deep); font-family: var(--font-serif); font-size: 1.4rem; }
.simulation-score { display: inline-block; margin-bottom: 1rem; padding: .45rem .8rem; border: 2px solid var(--sage); color: var(--sage); transform: rotate(-1deg); }

.trust-explainer {
  max-width: 53rem;
  margin: 1.4rem 0 1.8rem auto;
  padding: 1rem 1.2rem;
  border-left: 5px solid var(--sage);
  border-radius: 0 1.2rem 1rem 0;
  background: rgba(223, 227, 196, .5);
}
.trust-explainer h3 { margin-bottom: .35rem; color: var(--blue-deep); font-family: var(--font-serif); font-size: 1.25rem; }
.trust-explainer p { margin: 0; }
.resource-trust { display: flex; flex-wrap: wrap; gap: .35rem .7rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--line); color: var(--ink-soft); font-size: .72rem; }
.resource-trust strong { color: var(--blue-deep); }
.resource-trust-official strong { color: #174d32; }
.resource-trust-independent strong { color: #624574; }
.resource-trust-commercial strong { color: #765000; }
.resource-trust.is-stale { padding: .7rem; border: 2px solid var(--terracotta-deep); background: #fff3e5; color: var(--ink); }
.resource-trust-warning { flex-basis: 100%; font-weight: 750; }

@media (max-width: 72rem) {
  .learning-workbench { grid-template-columns: 1fr; }
  .skills-passport { position: relative; top: auto; max-width: 48rem; margin-inline: auto; }
  .practice-tab { grid-template-columns: 5rem minmax(0, 1fr); }
  .practice-tab img { width: 5rem; }
}

@media (max-width: 52rem) {
  .practice-tabs { grid-template-columns: 1fr; }
  .practice-tab { min-height: 5.8rem; grid-template-columns: 7.5rem minmax(0, 1fr); }
  .practice-tab img { width: 7.5rem; }
  .simulation-header { align-items: flex-start; flex-direction: column-reverse; }
}

@media (max-width: 44rem) {
  .learning-section,
  .practice-section { padding-block: 4rem; }
  .learning-route { width: 100%; margin-left: 0; }
  .learning-route span { width: 2.6rem; height: 2.6rem; }
  .compass-input-row { grid-template-columns: 1fr; }
  .compass-input-row .button { width: 100%; }
  .compass-route { grid-template-columns: 2.8rem minmax(0, 1fr); padding-inline: .2rem; }
  .compass-route-number { width: 2.5rem; height: 2.5rem; }
  .skills-passport { padding-left: 1.35rem; }
  .passport-skill-disclosure { margin-block: 1rem; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
  .passport-skill-disclosure > summary {
    min-height: 3.2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    padding: .7rem .2rem;
    color: var(--blue-deep);
    font-weight: 900;
    cursor: pointer;
  }
  .passport-skill-disclosure > summary strong { color: var(--ink-soft); font-size: .72rem; text-align: right; }
  .passport-skill-disclosure > .passport-skill-list { margin-block: .5rem 1rem; }
  .practice-tab { grid-template-columns: 5rem minmax(0, 1fr); }
  .practice-tab img { width: 5rem; }
  .simulation-player { min-height: 25rem; padding-inline: 1.1rem; border-radius: .8rem 1.5rem .9rem 1.25rem; }
  .simulation-choice { width: 100%; }
  .pwa-notice { align-items: stretch; flex-direction: column; }
}

@media (max-width: 25rem) {
  .learning-route i { min-width: .35rem; }
  .practice-tab { grid-template-columns: 4.4rem minmax(0, 1fr); padding: .55rem; }
  .practice-tab img { width: 4.4rem; }
  .passport-skill-heading { align-items: flex-start; flex-direction: column; gap: .1rem; }
  .passport-skill-disclosure > summary { grid-template-columns: 1fr; gap: .1rem; }
  .passport-skill-disclosure > summary strong { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .compass-suggestion:hover,
  .practice-tab[aria-selected="true"],
  .simulation-choice:hover { transform: none; }
}

@media (forced-colors: active) {
  .learning-section,
  .practice-section,
  .compass-panel,
  .skills-passport,
  .simulation-player { background: Canvas; color: CanvasText; }
  .practice-heading h2,
  .practice-section h2,
  .practice-section h3,
  .practice-section h4 { color: CanvasText; }
  .practice-tab[aria-selected="true"],
  .simulation-feedback,
  .passport-next { border: 3px solid Highlight; background: Canvas; color: CanvasText; }
}

@media print {
  .install-button,
  .pwa-notice,
  .compass-form,
  .compass-suggestions,
  .passport-actions,
  .passport-memory,
  .practice-tabs,
  .simulation-player { display: none !important; }
  .skills-passport { position: static; box-shadow: none; }
}

@media print {
  .site-header,
  .button,
  .site-footer,
  .image-dialog { display: none !important; }
  .section { padding-block: 2rem; }
  .hero { min-height: 0; }
  .hero-stage { display: none; }
  .chapter-list::before { display: none; }
  .chapter-card,
  .chapter-card:nth-child(even) { width: 100%; }
}

/* Living scrapbook refinement */
.reading-progress {
  height: .28rem;
  position: fixed;
  z-index: 220;
  top: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

.reading-progress span {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0 1rem 1rem 0;
  background: var(--terracotta);
  box-shadow: 0 .08rem .35rem rgba(159, 54, 10, .35);
  transform: scaleX(0);
  transform-origin: left center;
}

.site-header {
  border-bottom-color: rgba(82, 57, 32, .18);
  box-shadow: 0 .25rem 0 rgba(212, 154, 56, .08);
}

.language-link {
  border-radius: 1rem .35rem 1.1rem .45rem;
  box-shadow: .16rem .2rem 0 rgba(34, 88, 120, .22);
  transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.language-link:hover,
.language-link:focus-visible {
  transform: rotate(0) translateY(-.15rem);
  box-shadow: .28rem .35rem 0 rgba(34, 88, 120, .26);
}

.hero-visual-frame {
  border-radius: 3.8rem .8rem 3rem 1.1rem;
  transform-origin: 52% 48%;
}

.hero-visual-frame::after {
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 1.1rem;
  bottom: 1rem;
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: -1.55rem .25rem 0 var(--sage), -2.85rem -.15rem 0 var(--gold);
}

.hero-book {
  border-radius: .12rem .55rem .35rem .1rem;
  transform-origin: center 62%;
}

.hero-caption {
  border-radius: .4rem 1.5rem .45rem 1.2rem;
}

.motion-ready .hero-copy .eyebrow,
.motion-ready .hero-copy h1,
.motion-ready .hero-copy .hero-text,
.motion-ready .hero-copy .button-row,
.motion-ready .hero-copy .hero-note {
  opacity: 0;
  animation: scrapbook-enter .72s cubic-bezier(.2, .75, .24, 1) forwards;
}

.motion-ready .hero-copy .eyebrow { animation-delay: .08s; }
.motion-ready .hero-copy h1 { animation-delay: .2s; }
.motion-ready .hero-copy .hero-text { animation-delay: .34s; }
.motion-ready .hero-copy .button-row { animation-delay: .48s; }
.motion-ready .hero-copy .hero-note { animation-delay: .62s; }

.motion-ready .hero-visual-frame {
  opacity: 0;
  animation:
    hero-fade .85s .38s ease forwards,
    hero-sheet-float 7.8s 1.2s ease-in-out infinite alternate;
}

.motion-ready .hero-book {
  opacity: 0;
  animation:
    hero-fade .75s .72s ease forwards,
    hero-book-float 6.4s 1.3s ease-in-out infinite alternate;
}

.motion-ready .hero-caption {
  opacity: 0;
  animation:
    hero-fade .6s .92s ease forwards,
    hero-caption-float 5.6s 1.4s ease-in-out infinite alternate;
}

.hero-motion-paused .hero-visual-frame,
.hero-motion-paused .hero-book,
.hero-motion-paused .hero-caption {
  animation-play-state: paused;
}

@keyframes scrapbook-enter {
  from { opacity: 0; transform: translateY(1.25rem) rotate(-.45deg); }
  to { opacity: 1; transform: none; }
}

@keyframes hero-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hero-sheet-float {
  from { transform: translate3d(0, 0, 0) rotate(1.3deg); }
  to { transform: translate3d(-.3rem, -.65rem, 0) rotate(.45deg); }
}

@keyframes hero-book-float {
  from { transform: translate3d(0, 0, 0) rotate(3.5deg); }
  to { transform: translate3d(.2rem, -.85rem, 0) rotate(1.8deg); }
}

@keyframes hero-caption-float {
  from { transform: translate3d(0, 0, 0) rotate(-3deg); }
  to { transform: translate3d(-.2rem, -.35rem, 0) rotate(-1.8deg); }
}

.button {
  position: relative;
  border-radius: 1.1rem .42rem 1.2rem .55rem;
  isolation: isolate;
}

.button::after {
  content: "";
  height: .14rem;
  position: absolute;
  right: 1rem;
  bottom: .48rem;
  left: 1rem;
  border-radius: 1rem;
  background: currentColor;
  opacity: .28;
  transform: scaleX(.25);
  transform-origin: left;
  transition: transform .22s ease;
}

.button:hover::after,
.button:focus-visible::after { transform: scaleX(1); }
.button:active { transform: translateY(.12rem) scale(.985); box-shadow: none; }

.start-section {
  overflow: hidden;
  border-radius: 0 0 5rem 1.3rem;
}

.start-section::after {
  content: "";
  width: 7rem;
  height: 7rem;
  position: absolute;
  right: 4vw;
  bottom: -4rem;
  border: 1px solid rgba(217, 85, 11, .22);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5rem rgba(101, 122, 61, .045);
}

.start-card {
  border: 1px solid rgba(92, 67, 42, .2);
  border-top: .32rem solid var(--terracotta);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease;
}

.start-card:nth-child(1) {
  border-radius: 2.8rem .65rem 2rem .85rem;
  background: #fff8e9;
}

.start-card:nth-child(2) {
  border-radius: .65rem 2.7rem 2.7rem 2.7rem;
  background: #f4f5e6;
}

.start-card:nth-child(2)::after {
  content: "";
  width: 1.35rem;
  height: 1.35rem;
  position: absolute;
  right: 2.2rem;
  bottom: -.75rem;
  border-right: 1px solid rgba(92, 67, 42, .2);
  border-bottom: 1px solid rgba(92, 67, 42, .2);
  background: #f4f5e6;
  transform: rotate(45deg);
}

.start-card:nth-child(3) {
  border: .45rem double rgba(101, 122, 61, .48);
  border-radius: 1rem 3rem .75rem 2.2rem;
  background:
    linear-gradient(135deg, transparent 0 88%, rgba(101, 122, 61, .12) 88% 100%),
    #fffaf0;
}

.start-card:hover,
.start-card:focus-within {
  z-index: 2;
  transform: translateY(-.55rem) rotate(0);
  box-shadow: .8rem 1rem 1.7rem rgba(58, 40, 23, .16);
}

.text-link,
.resource-link {
  transition: gap .2s ease, color .2s ease, transform .2s ease;
}

.text-link:hover,
.text-link:focus-visible,
.resource-link:hover,
.resource-link:focus-visible {
  gap: .82rem;
  transform: translateX(.12rem);
}

.map-section {
  border-radius: 3rem 1rem 0 0;
}

.map-figure {
  padding: 1.15rem 1.15rem 1.35rem;
  border: .12rem solid rgba(235, 214, 165, .8);
  border-radius: 4.2rem 1rem 3.25rem .75rem;
  isolation: isolate;
}

.map-figure::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1rem -1rem -1.05rem 1.15rem;
  border-radius: 3.5rem .8rem 3rem 1.2rem;
  background: var(--sage);
  transform: rotate(1.5deg);
}

.map-open img { border-radius: 2.8rem .45rem 2.1rem .4rem; }
.map-open span { border-radius: 1rem .35rem 1rem .4rem; }
.map-direction { border-radius: 1.2rem .35rem 1.2rem .4rem; }
.map-direction:hover,
.map-direction:focus-visible { padding-left: .7rem; }

.book-section::before {
  content: "";
  width: 110%;
  height: 2.7rem;
  position: absolute;
  z-index: 0;
  top: -.9rem;
  left: -5%;
  border-radius: 50% 48% 0 0 / 100% 100% 0 0;
  background: rgba(255, 250, 240, .36);
}

.book-cover-wrap::before {
  border-radius: 2.6rem .75rem 2rem .65rem;
  background: rgba(255, 250, 240, .72);
  box-shadow: .4rem .5rem 0 rgba(101, 122, 61, .22);
}

.fact-list {
  border-radius: .7rem 1.8rem .7rem 1.5rem;
  padding-inline: 1rem;
  background: rgba(255, 250, 240, .38);
}

.chapter-list::before {
  transform: translateX(0);
  transform-origin: top;
}

.chapter-card {
  border-radius: 2rem .45rem 1.45rem .65rem;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), background-color .2s ease, box-shadow .2s ease;
}

.chapter-card:nth-child(even) { border-radius: .5rem 2.2rem .75rem 1.7rem; }
.chapter-card:nth-child(3n) { margin-right: 1.1rem; }
.chapter-card:nth-child(4n) { margin-left: 1.35rem; }

.chapter-card::before {
  content: "";
  width: .72rem;
  height: .72rem;
  position: absolute;
  z-index: 2;
  top: 3.15rem;
  right: -3.14rem;
  border: .16rem solid var(--paper-light);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 .12rem var(--terracotta);
  transform: scale(.72);
  transition: transform .35s ease, background-color .35s ease;
}

.chapter-card:nth-child(even)::before {
  right: auto;
  left: -3.14rem;
}

.chapter-card.route-active::before {
  background: var(--terracotta);
  transform: scale(1.22);
}

.chapter-card:hover,
.chapter-card:focus-within,
.chapter-card[open] {
  transform: translateY(-.25rem) rotate(0);
}

.chapter-thumb { border-radius: .3rem 1rem .35rem .8rem; }
.chapter-action { border-radius: .35rem 1.25rem .4rem 1rem; }

.scenario {
  border-radius: .45rem 2rem .55rem 1.65rem;
  transition: opacity .2s ease, transform .2s ease;
}

.gallery-section {
  overflow: hidden;
  background:
    linear-gradient(177deg, #263943 0 24rem, var(--sage-pale) 24.05rem 100%);
  color: var(--ink);
}

.gallery-section::before {
  height: .34rem;
  top: 3.5rem;
  border-radius: 50%;
  transform: rotate(-.6deg) scaleX(.96);
}

.gallery-section::after {
  content: "";
  width: 13rem;
  height: 13rem;
  position: absolute;
  top: 18rem;
  right: -5rem;
  border: 1px solid rgba(34, 88, 120, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 2.5rem rgba(217, 85, 11, .04);
}

.heading-row {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(2.4rem, 5vw, 4.2rem);
}

.gallery-origin-note {
  width: fit-content;
  margin: 1.2rem 0 0;
  padding: .5rem .8rem;
  border: 1px solid rgba(255, 250, 240, .35);
  border-radius: 1.1rem .35rem 1.1rem .4rem;
  background: rgba(255, 250, 240, .1);
  color: #f2d8af !important;
  font-family: var(--font-serif);
  font-size: .78rem !important;
  font-style: italic;
}

.gallery-grid {
  grid-auto-flow: dense;
  align-items: start;
  position: relative;
  z-index: 2;
  margin-inline: -1.3rem;
  padding: clamp(1.1rem, 2.5vw, 2.2rem);
  border: 1px solid rgba(49, 61, 44, .16);
  border-radius: 4.5rem 1rem 3.7rem .8rem;
  background:
    radial-gradient(circle at 7% 6%, rgba(212, 154, 56, .18) 0 .35rem, transparent .4rem),
    radial-gradient(circle at 95% 12%, rgba(217, 85, 11, .15) 0 .45rem, transparent .5rem),
    rgba(244, 239, 214, .92);
  box-shadow: .8rem 1rem 0 rgba(34, 88, 120, .13);
  transition: opacity .18s ease, transform .18s ease;
}

.gallery-grid.is-filtering,
.resource-grid.is-filtering {
  opacity: 0;
  transform: translateY(.35rem) scale(.992);
}

.guide-card,
.guide-card-0,
.guide-card-1,
.guide-card-2,
.guide-card-3,
.guide-card-4 {
  --paper-rotation: 0deg;
  --card-back: rgba(101, 122, 61, .5);
  grid-column: span 3;
  align-self: start;
  overflow: visible;
  border: 1px solid rgba(81, 58, 35, .18);
  border-radius: 2.8rem .7rem 2.2rem 1rem;
  background: var(--paper-light);
  box-shadow: .45rem .52rem 0 var(--card-back), .55rem .72rem 1.15rem rgba(39, 48, 37, .17);
  transform: rotate(var(--paper-rotation));
  transform-origin: center 65%;
  transition: transform .26s cubic-bezier(.2, .8, .2, 1), box-shadow .26s ease;
}

.guide-card::before {
  content: "";
  width: 3.1rem;
  height: .72rem;
  position: absolute;
  z-index: 2;
  top: -.4rem;
  left: 1.35rem;
  border-radius: .6rem .22rem .55rem .2rem;
  background: var(--card-back);
  opacity: .78;
  transform: rotate(-2deg);
  transition: transform .26s ease, opacity .26s ease;
}

.guide-card-0 { --paper-rotation: -.75deg; border-radius: 2.8rem .7rem 2.2rem 1rem; }
.guide-card-1 { --paper-rotation: .65deg; grid-column: span 4; border-radius: 3.5rem 3.5rem .65rem .65rem; }
.guide-card-2 { --paper-rotation: -.35deg; border-radius: .65rem 2.8rem .75rem 2rem; }
.guide-card-3 { --paper-rotation: .85deg; border-radius: 1.1rem .55rem 3rem .7rem; }
.guide-card-4 { --paper-rotation: -.55deg; grid-column: span 4; border-radius: .55rem 2.6rem 1.8rem .7rem; }
.guide-card-2,
.guide-card-4 { --card-back: rgba(217, 85, 11, .32); }
.guide-card-3 { --card-back: rgba(34, 88, 120, .3); }

.guide-card-featured {
  grid-column: span 6;
  border-radius: 3.8rem .75rem 2.8rem 1rem;
}

.guide-card-2::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: -.08rem;
  right: -.08rem;
  border-top: 1.8rem solid var(--paper-aged);
  border-left: 1.8rem solid transparent;
}

.guide-card:hover,
.guide-card:focus-visible {
  z-index: 4;
  transform: translateY(-.55rem) rotate(0);
  box-shadow: .68rem .76rem 0 var(--card-back), .75rem .95rem 1.5rem rgba(39, 48, 37, .24);
}

.guide-card:hover::before,
.guide-card:focus-visible::before {
  opacity: 1;
  transform: translate(.3rem, -.08rem) rotate(1deg);
}

.guide-image {
  aspect-ratio: auto;
  margin: .68rem .68rem 0;
  overflow: hidden;
  border: 1px solid rgba(95, 70, 44, .15);
  border-radius: .08rem;
  background: #eee3ce;
}

.guide-image img {
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform .28s ease;
}

.guide-card:hover .guide-image img,
.guide-card:focus-visible .guide-image img { transform: scale(1.012); }

.guide-copy {
  display: block;
  flex: none;
  padding: .78rem .9rem .9rem;
  border-top: 0;
}

.guide-kicker,
.guide-title,
.guide-open-cue { display: block; }

.guide-title {
  margin-top: .2rem;
  font-size: 1.02rem;
}

.guide-card-featured .guide-title { font-size: 1.24rem; }

.guide-open-cue {
  width: fit-content;
  margin-top: .62rem;
  color: var(--terracotta-deep);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .72;
  transform: translateX(-.22rem);
  transition: opacity .2s ease, transform .2s ease;
}

.guide-open-cue::after {
  content: "";
  width: .42rem;
  height: .42rem;
  display: inline-block;
  margin-left: .48rem;
  border-top: .12rem solid currentColor;
  border-right: .12rem solid currentColor;
  transform: rotate(45deg);
}

.guide-card:hover .guide-open-cue,
.guide-card:focus-visible .guide-open-cue {
  opacity: 1;
  transform: translateX(.18rem);
}

.gallery-section .center { position: relative; z-index: 2; }
.gallery-section .button-outline { border-color: var(--blue-deep); background: var(--paper-light); color: var(--blue-deep); }

.select,
.text-input {
  border-radius: .8rem .3rem .9rem .4rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.select:focus,
.text-input:focus {
  border-color: var(--blue);
  box-shadow: .2rem .25rem 0 rgba(34, 88, 120, .16);
}

.resource-grid { transition: opacity .17s ease, transform .17s ease; }
.resource-group { border-radius: .5rem 1.25rem .4rem 1rem; }
.resource-group + .resource-group { margin-top: .2rem; }
.resource-group[open] { padding-inline: .8rem; background: rgba(255, 250, 240, .34); }
.resource-count { display: inline-flex; align-items: center; gap: .75rem; }
.resource-count::after {
  content: "";
  width: .55rem;
  height: .55rem;
  border-right: .13rem solid currentColor;
  border-bottom: .13rem solid currentColor;
  transform: rotate(45deg) translateY(-.12rem);
  transition: transform .22s ease;
}
.resource-group[open] .resource-count::after { transform: rotate(225deg) translate(-.08rem, -.08rem); }

.works-image-wrap { border-radius: 3.5rem .7rem 2.6rem 1rem; }
.work-card {
  border-radius: .45rem 1.4rem .4rem 1.1rem;
  transition: transform .22s ease, background-color .22s ease, padding-inline .22s ease;
}
.work-card:hover,
.work-card:focus-within {
  padding-inline: .85rem;
  background: rgba(223, 227, 196, .48);
  transform: translateX(.22rem) rotate(-.15deg);
}

.author-section { border-radius: 4.5rem 1rem 0 0; }
.author-portrait { border-radius: 2.5rem .7rem 1.8rem .6rem; }
.author-portrait::before {
  content: "";
  width: 4.7rem;
  height: 1rem;
  position: absolute;
  z-index: 2;
  top: -.45rem;
  left: 50%;
  background: rgba(232, 210, 161, .76);
  transform: translateX(-50%) rotate(2deg);
}
.author-photo { border-radius: 1.8rem .35rem 1.2rem .3rem; }
.author-card .text-link:hover,
.author-card .text-link:focus-visible { color: var(--blue-deep); transform: translateX(.35rem) rotate(-.2deg); }

.contact-form { border-radius: 2.7rem .55rem 2rem .75rem; }

.image-dialog {
  border-radius: 2.2rem .55rem 1.7rem .65rem;
  opacity: 0;
  transform: scale(.97) translateY(.45rem);
  transition: opacity .18s ease, transform .18s ease, display .18s allow-discrete, overlay .18s allow-discrete;
}

.image-dialog[open] { opacity: 1; transform: none; }
.image-dialog.is-closing { opacity: 0; transform: scale(.975) translateY(.35rem); }
.image-dialog::backdrop { opacity: 0; transition: opacity .18s ease, display .18s allow-discrete, overlay .18s allow-discrete; }
.image-dialog[open]::backdrop { opacity: 1; }

@starting-style {
  .image-dialog[open] { opacity: 0; transform: scale(.97) translateY(.45rem); }
  .image-dialog[open]::backdrop { opacity: 0; }
}

.dialog-close { border-radius: .75rem .25rem .8rem .3rem; transition: transform .18s ease, background-color .18s ease, color .18s ease; }
.dialog-close:hover,
.dialog-close:focus-visible { background: var(--blue); color: var(--white); transform: rotate(-1deg); }

.reveal {
  opacity: 1;
  transform: none;
  transition: opacity .62s ease var(--reveal-delay, 0ms), transform .62s cubic-bezier(.2, .75, .25, 1) var(--reveal-delay, 0ms);
}

.motion-ready .reveal {
  opacity: 0;
  transform: translateY(1.35rem) rotate(-.3deg);
}

.motion-ready .reveal.visible { opacity: 1; transform: none; }

.motion-ready .guide-card.reveal {
  opacity: 0;
  transform: translateY(1.35rem) rotate(calc(var(--paper-rotation) - .7deg)) scale(.985);
}

.motion-ready .guide-card.reveal.visible {
  opacity: 1;
  transform: rotate(var(--paper-rotation));
}

.motion-ready .guide-card.reveal.visible:hover,
.motion-ready .guide-card.reveal.visible:focus-visible { transform: translateY(-.55rem) rotate(0); }

@media (max-width: 68rem) {
  .gallery-section { background: linear-gradient(177deg, #263943 0 27rem, var(--sage-pale) 27.05rem 100%); }
  .gallery-grid { margin-inline: 0; }
  .chapter-card:nth-child(3n),
  .chapter-card:nth-child(4n) { margin-right: 0; margin-left: 0; }
}

@media (max-width: 60rem) {
  .start-card,
  .start-card:nth-child(2),
  .start-card:nth-child(3) { transform: rotate(var(--mobile-card-rotation, 0deg)); }
  .start-card:nth-child(1) { --mobile-card-rotation: -.45deg; }
  .start-card:nth-child(2) { --mobile-card-rotation: .35deg; }
  .start-card:nth-child(3) { --mobile-card-rotation: -.25deg; }
  .chapter-card::before,
  .chapter-card:nth-child(even)::before { right: auto; left: -2.56rem; }
  .gallery-section { background: linear-gradient(177deg, #263943 0 30rem, var(--sage-pale) 30.05rem 100%); }
  .guide-card,
  .guide-card-0,
  .guide-card-1,
  .guide-card-2,
  .guide-card-3,
  .guide-card-4 { grid-column: span 3; }
  .guide-card-featured { grid-column: span 6; }
}

@media (max-width: 44rem) {
  .section { padding-block: 5rem; }
  .hero-visual-frame { border-radius: 2.2rem .45rem 1.8rem .55rem; }
  .start-section { border-radius: 0 0 2.8rem .7rem; }
  .map-section { border-radius: 2rem .5rem 0 0; }
  .map-figure { border-radius: 2.2rem .5rem 1.7rem .45rem; }
  .map-open img { border-radius: 1.45rem .2rem 1.1rem .2rem; }
  .chapter-card { border-radius: 1.4rem .35rem 1.1rem .4rem; }
  .gallery-section { background: linear-gradient(177deg, #263943 0 35rem, var(--sage-pale) 35.05rem 100%); }
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1.15rem;
    margin-inline: 0;
    padding: .9rem;
    border-radius: 2.6rem .55rem 2.1rem .45rem;
    box-shadow: .42rem .55rem 0 rgba(34, 88, 120, .13);
  }
  .guide-card,
  .guide-card-0,
  .guide-card-1,
  .guide-card-2,
  .guide-card-3,
  .guide-card-4,
  .guide-card-featured {
    grid-column: 1;
    width: calc(100% - .55rem);
    justify-self: start;
  }
  .guide-card:nth-child(even) { justify-self: end; }
  .guide-card-0 { --paper-rotation: -.45deg; }
  .guide-card-1 { --paper-rotation: .38deg; }
  .guide-card-2 { --paper-rotation: -.25deg; }
  .guide-card-3 { --paper-rotation: .45deg; }
  .guide-card-4 { --paper-rotation: -.32deg; }
  .guide-title,
  .guide-card-featured .guide-title { font-size: 1rem; }
  .works-image-wrap { border-radius: 2.3rem .45rem 1.8rem .55rem; }
  .author-section { border-radius: 2.8rem .55rem 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .hero-copy .eyebrow,
  .motion-ready .hero-copy h1,
  .motion-ready .hero-copy .hero-text,
  .motion-ready .hero-copy .button-row,
  .motion-ready .hero-copy .hero-note,
  .motion-ready .hero-visual-frame,
  .motion-ready .hero-book,
  .motion-ready .hero-caption {
    opacity: 1;
    animation: none;
  }
  .reveal,
  .guide-card.reveal,
  .reveal.visible,
  .guide-card.reveal.visible {
    opacity: 1;
    transform: none;
  }
  .gallery-grid.is-filtering,
  .resource-grid.is-filtering { opacity: 1; transform: none; }
}

@media print {
  .reading-progress { display: none !important; }
}

/* Static, useful fallback when scripting is unavailable */
.noscript-page {
  min-height: 100vh;
  padding-block: clamp(3rem, 7vw, 6rem);
  background: var(--paper);
}

.noscript-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
  align-items: center;
  gap: clamp(2.5rem, 8vw, 7rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

.noscript-hero h1 {
  max-width: 9ch;
  margin-bottom: 1rem;
}

.noscript-lead {
  max-width: 38rem;
  color: var(--terracotta-deep);
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
  font-weight: 700;
  line-height: 1.35;
}

.noscript-hero > img {
  width: min(100%, 17rem);
  height: auto;
  aspect-ratio: 714 / 1280;
  justify-self: center;
  border-radius: .15rem .6rem .45rem .15rem;
  object-fit: contain;
  box-shadow: var(--shadow-book);
  transform: rotate(2deg);
}

.noscript-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  padding-block: 1.25rem;
  border-block: 1px solid var(--line);
}

.noscript-nav a {
  padding: .55rem .85rem;
  border: 1px solid var(--blue);
  border-radius: 1rem .35rem 1.1rem .4rem;
  background: var(--paper-light);
  color: var(--blue-deep);
  font-size: .82rem;
  font-weight: 850;
  text-decoration: none;
}

.noscript-section {
  padding-block: clamp(4rem, 8vw, 7rem);
}

.noscript-section h2 {
  max-width: 13ch;
  margin-bottom: 1rem;
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 4.7rem);
  line-height: 1.04;
}

.noscript-chapters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: fallback-chapter;
}

.noscript-chapters li {
  min-height: 6.5rem;
  display: grid;
  grid-template-columns: 2.3rem 1fr;
  align-content: center;
  gap: .1rem .8rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1.6rem .4rem 1.25rem .5rem;
  background: var(--paper-light);
  counter-increment: fallback-chapter;
}

.noscript-chapters li:nth-child(even) { border-radius: .4rem 1.7rem .55rem 1.3rem; }
.noscript-chapters li::before {
  content: counter(fallback-chapter, decimal-leading-zero);
  grid-row: 1 / span 2;
  color: var(--terracotta-deep);
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: 1.2;
}
.noscript-chapters strong { color: var(--blue-deep); font-family: var(--font-serif); font-size: 1.1rem; }
.noscript-chapters span { color: var(--ink-soft); font-size: .84rem; line-height: 1.45; }

.noscript-guides-section {
  width: 100%;
  border-radius: 4rem 1rem 4rem .8rem;
  background: var(--sage-pale);
}

.noscript-guides {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 1.3rem;
  margin-top: 2.5rem;
}

.noscript-guides a {
  display: block;
  padding: .65rem .65rem 1rem;
  border: 1px solid rgba(81, 58, 35, .18);
  border-radius: 2rem .45rem 1.6rem .55rem;
  background: var(--paper-light);
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-weight: 700;
  text-decoration: none;
  box-shadow: .4rem .45rem 0 rgba(101, 122, 61, .42);
}

.noscript-guides a:nth-child(3n + 2) { border-radius: .45rem 2.1rem .55rem 1.65rem; box-shadow: .4rem .45rem 0 rgba(217, 85, 11, .25); }
.noscript-guides img { width: 100%; height: auto; margin-bottom: .7rem; border: 1px solid var(--line-soft); }

.noscript-mission {
  box-sizing: border-box;
  width: min(100%, 46rem);
  max-width: 100%;
  margin-top: 1.25rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid rgba(45, 97, 127, .35);
  border-radius: 2.2rem .65rem 1.7rem .8rem;
  background: var(--paper-light);
  box-shadow: .45rem .55rem 0 rgba(101, 122, 61, .25);
}

.noscript-mission:nth-of-type(even) {
  margin-left: clamp(0rem, 8vw, 6rem);
  border-radius: .65rem 2.2rem .8rem 1.7rem;
  box-shadow: .45rem .55rem 0 rgba(217, 85, 11, .18);
}

.noscript-mission h3 {
  margin-bottom: .65rem;
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
}

.noscript-mission a { font-weight: 850; }

.noscript-resources {
  columns: 2;
  gap: 2.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.noscript-resources li {
  break-inside: avoid;
  padding: .8rem 0;
  border-bottom: 1px dotted rgba(82, 57, 32, .35);
}
.noscript-resources a { display: block; font-weight: 850; }
.noscript-resources span { color: var(--ink-soft); font-size: .84rem; }

.noscript-resources > .noscript-resource-category {
  margin: 0 0 1.25rem;
  padding: 1.15rem;
  border: 1px solid rgba(81, 58, 35, .18);
  border-radius: 1.55rem .45rem 1.25rem .55rem;
  background: var(--paper-light);
  box-shadow: .28rem .35rem 0 rgba(45, 97, 127, .14);
}

.noscript-resources > .noscript-resource-category:nth-child(even) {
  border-radius: .45rem 1.55rem .55rem 1.25rem;
  box-shadow: .28rem .35rem 0 rgba(217, 85, 11, .13);
}

.noscript-resource-category > strong {
  display: block;
  margin-bottom: .25rem;
  color: var(--terracotta-deep);
  font-family: var(--font-serif);
  font-size: 1.35rem;
}

.noscript-resource-category > span { display: block; line-height: 1.45; }

.noscript-resource-category ul {
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}

.noscript-resource-category ul li:last-child { border-bottom: 0; }
.noscript-contact { border-top: 2px solid var(--terracotta); }

.sr-only {
  width: 1px !important;
  height: 1px !important;
  position: absolute !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

@media (max-width: 60rem) {
  .noscript-guides { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 44rem) {
  .noscript-hero { grid-template-columns: 1fr; }
  .noscript-hero > img { width: min(65vw, 14rem); }
  .noscript-chapters,
  .noscript-guides { grid-template-columns: 1fr; }
  .noscript-mission:nth-of-type(even) { margin-left: 0; }
  .noscript-resources { columns: 1; }
  .noscript-guides-section { border-radius: 2.6rem .5rem 2.4rem .45rem; }
}

/* The map as an original artifact */
.map-figure {
  padding: clamp(.48rem, 1vw, .72rem);
  border: 1px solid rgba(235, 214, 165, .9);
  border-radius: 1.45rem .38rem 1.15rem .42rem;
  background: var(--paper-light);
  box-shadow: .9rem 1.05rem 2.2rem rgba(0, 0, 0, .24);
  transform: rotate(.24deg);
}

.map-figure::after { display: none; }

.map-figure::before {
  width: 4.7rem;
  height: .92rem;
  top: -.42rem;
  background: rgba(235, 214, 165, .78);
  transform: translateX(-50%) rotate(-1.4deg);
}

.map-artifact {
  overflow: visible;
  background: #dcc397;
}

.map-artifact img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.map-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem;
  padding: .9rem .3rem .2rem;
}

.map-figure .map-footer figcaption {
  display: grid;
  gap: .16rem;
  margin: 0;
  color: var(--blue-deep);
  font-size: .84rem;
  line-height: 1.45;
}

.map-footer figcaption [data-map-note] {
  color: var(--terracotta-deep);
  font-family: var(--font-body);
  font-size: .72rem;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .025em;
}

.map-open,
.map-open.button {
  width: auto;
  min-height: 2.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .65rem .9rem;
  border: 1px solid var(--blue-deep);
  border-radius: .9rem .28rem .8rem .32rem;
  background: var(--blue-deep);
  color: var(--paper-light);
  cursor: zoom-in;
  box-shadow: .2rem .25rem 0 rgba(217, 85, 11, .35);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.map-open span {
  position: static;
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: .75rem;
  box-shadow: none;
}

.map-open:hover,
.map-open:focus-visible {
  background: var(--terracotta-deep);
  color: var(--white);
  transform: translateY(-.12rem) rotate(-.35deg);
  box-shadow: .3rem .36rem 0 rgba(212, 154, 56, .42);
}

/* Online extras activity table */
.extras-section {
  position: relative;
  overflow: hidden;
  padding-top: clamp(7rem, 12vw, 11rem);
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 250, 240, .42) 0 .42rem, transparent .48rem),
    radial-gradient(circle at 92% 76%, rgba(23, 59, 80, .13) 0 .55rem, transparent .62rem),
    repeating-linear-gradient(2deg, transparent 0 4px, rgba(91, 56, 27, .018) 4px 5px),
    #efbd79;
}

.extras-section::before {
  content: "";
  width: 112%;
  height: 5rem;
  position: absolute;
  top: -2.7rem;
  left: -6%;
  border-radius: 0 0 50% 48% / 0 0 100% 100%;
  background: var(--sage-pale);
  transform: rotate(-.8deg);
}

.extras-section::after {
  content: "";
  width: 18rem;
  height: 18rem;
  position: absolute;
  right: -10rem;
  bottom: 8rem;
  border: 1px solid rgba(23, 59, 80, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 3.2rem rgba(255, 250, 240, .08), 0 0 0 6.4rem rgba(101, 122, 61, .05);
}

.extras-shell { position: relative; z-index: 1; }

.extras-heading {
  max-width: 56rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
  text-align: center;
}

.extras-heading h2 {
  max-width: none;
  margin-bottom: 1rem;
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: clamp(3rem, 6vw, 6rem);
  letter-spacing: -.045em;
  text-transform: none;
}

.extras-heading .eyebrow { color: var(--terracotta-deep); }
.extras-heading > p:last-child { max-width: 46rem; margin-inline: auto; color: #4e3b2c; font-size: 1.08rem; }

.extras-lab {
  width: min(100%, 66rem);
  margin-inline: auto;
  padding: clamp(1.1rem, 3vw, 2.4rem);
  border: 1px solid rgba(85, 58, 32, .18);
  border-radius: 4.2rem .8rem 3.4rem 1.1rem;
  background:
    linear-gradient(118deg, rgba(255, 250, 240, .74), rgba(223, 227, 196, .86)),
    var(--paper-light);
  box-shadow: 1rem 1.15rem 0 rgba(23, 59, 80, .16), 1.2rem 1.4rem 2.4rem rgba(80, 52, 26, .14);
}

.extras-pickers {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(1rem, 3vw, 2.8rem);
  position: relative;
  z-index: 5;
}

.extras-selector {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.extras-selector legend {
  margin-bottom: .65rem;
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: .98rem;
  font-weight: 800;
}

.extras-choice-row {
  display: flex;
  gap: .55rem;
}

.extras-choice {
  min-height: 2.8rem;
  flex: 1 1 0;
  padding: .55rem .8rem;
  border: 1px solid rgba(23, 59, 80, .38);
  border-radius: 1.2rem .32rem 1rem .38rem;
  background: rgba(255, 250, 240, .72);
  color: var(--blue-deep);
  font-size: .78rem;
  font-weight: 850;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

.extras-choice:nth-child(2) { border-radius: .35rem 1.15rem .4rem 1rem; }
.extras-choice:nth-child(3) { border-radius: 1rem .42rem 1.2rem .36rem; }

.extras-choice:hover { transform: translateY(-.12rem) rotate(-.25deg); }
.extras-choice[aria-pressed="true"] {
  border-color: var(--blue-deep);
  background: var(--blue-deep);
  color: var(--white);
  box-shadow: .24rem .28rem 0 rgba(217, 85, 11, .5);
  transform: translateY(-.12rem);
}

.extras-kind-selector .extras-choice[aria-pressed="true"] {
  border-color: var(--terracotta-deep);
  background: var(--terracotta-deep);
  box-shadow: .24rem .28rem 0 rgba(34, 88, 120, .38);
}

.extras-deck {
  width: min(100%, 51rem);
  min-height: 35rem;
  display: grid;
  place-items: stretch;
  position: relative;
  margin: clamp(3.3rem, 7vw, 5.6rem) auto 2.5rem;
}

.extras-sheet,
.extras-sheet-back {
  grid-area: 1 / 1;
  border: 1px solid rgba(84, 58, 31, .2);
}

.extras-sheet-back {
  pointer-events: none;
  border-radius: 3.3rem .65rem 2.7rem .75rem;
  transform-origin: 50% 85%;
}

.extras-sheet-back-one {
  background: #d7dfb2;
  transform: translate(.65rem, .55rem) rotate(2.6deg);
}

.extras-sheet-back-two {
  background: #e89c67;
  transform: translate(-.55rem, .45rem) rotate(-2.2deg);
}

.extras-sheet {
  min-height: 35rem;
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 4vw, 3.4rem);
  border-radius: 3.6rem .62rem 2.8rem .78rem;
  background:
    radial-gradient(circle at 91% 9%, rgba(212, 154, 56, .13) 0 .4rem, transparent .46rem),
    repeating-linear-gradient(0deg, transparent 0 2.18rem, rgba(34, 88, 120, .07) 2.18rem 2.22rem),
    var(--paper-light);
  box-shadow: .55rem .7rem 1.45rem rgba(63, 43, 25, .18);
  transform: rotate(-.2deg);
  transition: opacity .14s ease, transform .14s ease;
}

.extras-sheet::before {
  content: "";
  width: 5.4rem;
  height: 1.05rem;
  position: absolute;
  top: -.48rem;
  left: 50%;
  background: rgba(225, 196, 132, .75);
  box-shadow: 0 .08rem .18rem rgba(74, 48, 25, .13);
  transform: translateX(-50%) rotate(1.2deg);
}

.extras-sheet[data-kind="trick"] { transform: rotate(.18deg); }
.extras-sheet[data-kind="challenge"] { transform: rotate(-.28deg); }
.extras-sheet.is-swapping { opacity: 0; transform: translateY(.65rem) rotate(1deg); }

.extras-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.3rem);
}

.extras-kind-stamp {
  display: inline-block;
  padding: .35rem .7rem;
  border: .12rem solid currentColor;
  border-radius: .75rem .22rem .7rem .25rem;
  color: var(--terracotta-deep);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

.extras-sheet[data-kind="trick"] .extras-kind-stamp { color: var(--blue); transform: rotate(.8deg); }
.extras-sheet[data-kind="challenge"] .extras-kind-stamp { color: var(--sage); }

.extras-duration { color: var(--ink-soft); font-size: .78rem; }
.extras-duration strong { color: var(--ink); }

.extras-sheet h3 {
  max-width: 17ch;
  margin-bottom: .8rem;
  color: var(--blue-deep);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  letter-spacing: -.035em;
  line-height: .98;
}

.extras-purpose {
  max-width: 46rem;
  margin-bottom: 1.6rem;
  color: #4f493e;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-style: italic;
  line-height: 1.5;
}

.extras-sheet h4 {
  margin: 0 0 .7rem;
  color: var(--terracotta-deep);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.extras-steps {
  display: grid;
  gap: .65rem;
  margin: 0;
  padding-left: 1.5rem;
}

.extras-steps[hidden],
.extras-complete-mark[hidden] {
  display: none;
}

.extras-steps li { padding-left: .35rem; }
.extras-steps li::marker { color: var(--terracotta-deep); font-family: var(--font-serif); font-weight: 800; }

.extras-related {
  width: fit-content;
  margin-top: 1.7rem;
  padding: .2rem 0;
  border: 0;
  background: transparent;
  color: var(--terracotta-deep);
  text-align: left;
  cursor: pointer;
}

.extras-challenge { margin-top: .3rem; }

.extras-checkpoints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  position: relative;
}

.extras-checkpoints::before {
  content: "";
  height: .16rem;
  position: absolute;
  z-index: -1;
  top: 1.38rem;
  right: 12%;
  left: 12%;
  background: repeating-linear-gradient(90deg, var(--terracotta) 0 .55rem, transparent .55rem .9rem);
}

.extras-checkpoint {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .45rem .55rem;
  align-content: start;
  padding: .75rem;
  border: 1px solid rgba(87, 63, 38, .19);
  border-radius: 1.15rem .3rem 1rem .36rem;
  background: rgba(255, 250, 240, .92);
  color: var(--ink);
  cursor: pointer;
}

.extras-checkpoint:nth-child(2) { border-radius: .3rem 1.1rem .36rem .95rem; transform: translateY(.55rem); }
.extras-checkpoint:nth-child(3) { border-radius: .95rem .32rem 1.15rem .35rem; }
.extras-checkpoint input { width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--sage); }
.extras-checkpoint-number { color: var(--terracotta-deep); font-family: var(--font-serif); font-weight: 800; }
.extras-checkpoint > span:last-child { grid-column: 1 / -1; font-size: .78rem; line-height: 1.4; }
.extras-checkpoint:has(input:checked) { border-width: 2px; border-color: var(--sage); background: #eef0d8; }

.extras-progress-row {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) auto;
  align-items: center;
  gap: .5rem 1rem;
  margin-top: 1.4rem;
  color: var(--ink-soft);
  font-size: .78rem;
}

.extras-progress-row progress {
  width: 100%;
  height: .65rem;
  accent-color: var(--sage);
}

.extras-progress-row > span { text-align: right; }

.extras-complete-mark {
  grid-column: 1 / -1;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .65rem;
  border: 2px solid var(--sage);
  border-radius: .65rem .2rem .6rem .24rem;
  color: #425526;
  font-size: .78rem;
  letter-spacing: .03em;
}

.extras-complete-mark::before {
  content: "";
  width: .65rem;
  height: .65rem;
  border: .14rem solid currentColor;
  border-radius: 50%;
  background: var(--sage-pale);
}

.extras-navigation {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .8rem;
}

.extras-navigation .button { min-height: 3rem; padding-inline: 1rem; }
.extras-prev { justify-self: end; }
.extras-next { justify-self: start; }
.extras-surprise { border-radius: 1.4rem .4rem 1.2rem .45rem; transform: rotate(-.4deg); }
.extras-counter { margin: .75rem 0 0; color: var(--ink-soft); font-family: var(--font-serif); font-size: .8rem; text-align: center; }

.extras-memory {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px dashed rgba(59, 63, 45, .3);
}

.extras-remember { display: inline-flex; align-items: center; gap: .6rem; color: #46513a; font-size: .8rem; font-weight: 750; cursor: pointer; }
.extras-remember input { width: 1.08rem; height: 1.08rem; margin: 0; accent-color: var(--sage); }
.extras-reset { padding: .25rem 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--terracotta-deep); font-size: .78rem; font-weight: 800; cursor: pointer; }
.extras-reset:disabled { color: var(--ink-soft); cursor: not-allowed; opacity: .5; }
.extras-storage-status { min-height: 1.4em; margin: .65rem auto 0; color: var(--ink-soft); font-size: .7rem; text-align: center; }

@media (max-width: 68rem) {
  .map-figure { transform: rotate(.18deg); }
  .extras-lab { width: min(100%, 58rem); }
}

@media (max-width: 52rem) {
  .extras-pickers { grid-template-columns: 1fr; }
  .extras-deck { min-height: 37rem; }
}

@media (max-width: 44rem) {
  .map-figure { margin-inline: 0; padding: .42rem; border-radius: .9rem .25rem .82rem .28rem; }
  .map-artifact img { border-radius: 0; }
  .map-footer { grid-template-columns: 1fr; gap: .8rem; padding: .8rem .35rem .25rem; }
  .map-open,
  .map-open.button { width: 100%; }

  .extras-section { padding-top: 7rem; }
  .extras-heading { text-align: left; }
  .extras-heading h2 { font-size: clamp(2.8rem, 14vw, 4.5rem); }
  .extras-heading > p:last-child { font-size: 1rem; }
  .extras-lab {
    padding: 1rem .8rem 1.2rem;
    border-radius: 2.7rem .48rem 2.25rem .6rem;
    box-shadow: .48rem .62rem 0 rgba(23, 59, 80, .16);
  }
  .extras-selector legend { padding-inline: .15rem; }
  .extras-choice-row {
    width: calc(100% + 1.6rem);
    margin-inline: -.8rem;
    padding: .2rem .8rem .55rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-padding-inline: .8rem;
  }
  .extras-choice { min-width: 8.7rem; flex: 0 0 auto; }
  .extras-deck { min-height: 0; margin-block: 3.2rem 2rem; }
  .extras-sheet,
  .extras-sheet-back { min-height: 0; }
  .extras-sheet { padding: 1.4rem 1.05rem 1.6rem; border-radius: 2.4rem .42rem 2rem .52rem; }
  .extras-sheet-back { border-radius: 2.2rem .42rem 1.9rem .5rem; }
  .extras-card-meta { align-items: flex-start; margin-bottom: 1.3rem; }
  .extras-sheet h3 { font-size: clamp(2rem, 11vw, 3.2rem); }
  .extras-checkpoints { grid-template-columns: 1fr; gap: .65rem; }
  .extras-checkpoints::before { width: .14rem; height: auto; top: 1rem; bottom: 1rem; right: auto; left: 1.45rem; background: repeating-linear-gradient(180deg, var(--terracotta) 0 .5rem, transparent .5rem .85rem); }
  .extras-checkpoint,
  .extras-checkpoint:nth-child(2),
  .extras-checkpoint:nth-child(3) { grid-template-columns: auto auto 1fr; align-items: start; transform: none; }
  .extras-checkpoint > span:last-child { grid-column: auto; }
  .extras-progress-row { grid-template-columns: 1fr; }
  .extras-progress-row > span { text-align: left; }
  .extras-navigation { grid-template-columns: 1fr 1fr; }
  .extras-surprise { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .extras-prev { justify-self: stretch; }
  .extras-next { justify-self: stretch; }
  .extras-memory { align-items: flex-start; flex-direction: column; }
  .extras-storage-status { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .map-open,
  .extras-choice,
  .extras-sheet { transition: none; }
  .map-open:hover,
  .map-open:focus-visible,
  .extras-choice:hover,
  .extras-choice[aria-pressed="true"],
  .extras-sheet,
  .extras-sheet[data-kind="trick"],
  .extras-sheet[data-kind="challenge"],
  .extras-sheet.is-swapping { transform: none; }
  .extras-sheet.is-swapping { opacity: 1; }
}

/* Intergenerational workshop and visual resource atlas */
.extras-together-invitation {
  width: min(100%, 47rem);
  margin: 1.5rem auto 0;
  padding: 1rem 1.25rem;
  border: 1px dashed rgba(23, 59, 80, .45);
  border-radius: 1.5rem .45rem 1.25rem .55rem;
  background: rgba(255, 250, 240, .72);
  text-align: left;
  transform: rotate(-.25deg);
}
.extras-together-invitation[hidden] { display: none; }
.extras-together-invitation p { margin-bottom: .35rem; color: var(--blue-deep); font-family: var(--font-serif); }

.together-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(circle at 12% 18%, rgba(217, 85, 11, .13), transparent 21rem),
    radial-gradient(circle at 92% 28%, rgba(101, 122, 61, .19), transparent 24rem),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(47, 37, 30, .018) 5px 6px),
    #f6ebd4;
}
.together-section::before,
.together-section::after {
  position: absolute;
  z-index: -1;
  width: 14rem;
  height: 5rem;
  background: rgba(34, 88, 120, .08);
  content: "";
  transform: rotate(-8deg);
}
.together-section::before { top: 7rem; left: -3rem; border-radius: 58% 42% 63% 37%; }
.together-section::after { right: -2rem; bottom: 14rem; background: rgba(217, 85, 11, .09); transform: rotate(11deg); border-radius: 40% 60% 38% 62%; }
.together-shell { position: relative; }
.together-hero {
  display: grid;
  grid-template-columns: minmax(18rem, .78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 6vw, 6.4rem);
  align-items: center;
  margin-bottom: 4rem;
}
.together-heading { position: relative; z-index: 1; margin: 0; }
.together-heading h2 { max-width: 8ch; margin-bottom: .55rem; color: var(--blue-deep); }
.together-heading .eyebrow { color: var(--terracotta-deep); }
.together-heading > p:last-child { max-width: 35rem; }
.together-subtitle { margin-bottom: .8rem; color: var(--terracotta-deep); font-family: var(--font-serif); font-size: clamp(1.25rem, 2vw, 1.8rem); font-style: italic; font-weight: 700; }
.together-visual {
  position: relative;
  margin: 0;
  padding: .65rem .65rem 2.8rem;
  border: 2px solid rgba(45, 97, 127, .34);
  border-radius: 3.2rem .65rem 2.4rem .85rem;
  background: var(--paper-light);
  box-shadow: 1rem 1.2rem 0 rgba(101, 122, 61, .38), 1.5rem 1.7rem 2.6rem rgba(47, 37, 30, .16);
  transform: rotate(.55deg);
}
.together-visual::before {
  position: absolute;
  top: -.8rem;
  left: 42%;
  width: 8.5rem;
  height: 2.2rem;
  background: rgba(236, 212, 157, .72);
  box-shadow: 0 .18rem .35rem rgba(47, 37, 30, .09);
  content: "";
  transform: rotate(-2deg);
}
.together-visual img { width: 100%; border-radius: 2.65rem .35rem 1.7rem .45rem; }
.together-visual figcaption { position: absolute; right: 1.2rem; bottom: .55rem; left: 1.2rem; color: var(--sage); font-family: var(--font-serif); font-size: .88rem; font-style: italic; }

.together-settings {
  display: grid;
  grid-template-columns: minmax(14rem, .28fr) minmax(0, .72fr);
  gap: 1.5rem;
  align-items: center;
  margin: 0 0 3.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: .55rem 2.2rem .7rem 1.65rem;
  background: rgba(255, 250, 240, .84);
  box-shadow: .55rem .7rem 0 rgba(217, 85, 11, .12);
  transform: rotate(-.15deg);
}
.together-settings-heading h3 { margin-bottom: .35rem; color: var(--blue-deep); font-family: var(--font-serif); font-size: 1.35rem; }
.together-settings-heading p { margin: 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.45; }
.together-settings-scroll { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; min-width: 0; padding: .25rem; }
.together-setting { min-width: 0; margin: 0; padding: .7rem; border: 1px dashed rgba(101, 122, 61, .48); border-radius: 1.15rem .35rem .95rem .45rem; }
.together-setting:nth-child(even) { border-radius: .4rem 1.2rem .5rem 1rem; }
.together-setting legend { padding-inline: .3rem; color: var(--terracotta-deep); font-size: .69rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.together-setting-choices { display: flex; flex-wrap: wrap; gap: .35rem; }
.together-setting-choices label { cursor: pointer; }
.together-setting-choices input { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; }
.together-setting-choices span { display: block; padding: .34rem .55rem; border: 1px solid var(--line-soft); border-radius: .7rem .25rem .6rem .3rem; background: var(--paper-light); color: var(--ink-soft); font-size: .7rem; font-weight: 750; line-height: 1.2; transition: transform .16s ease, background .16s ease, color .16s ease; }
.together-setting-choices input:checked + span { border-color: var(--blue); background: var(--blue-deep); color: var(--white); transform: translateY(-.08rem) rotate(-.45deg); }
.together-setting-choices input:focus-visible + span { outline: .2rem solid var(--focus); outline-offset: .12rem; }

.together-path-wrap { margin-bottom: 2.5rem; }
.together-path-label { margin: 0 0 1rem; color: var(--blue-deep); font-size: .75rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.together-path {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: center;
  min-width: 0;
  padding: 1.4rem .8rem 1.7rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 1rem;
  scrollbar-width: thin;
}
.together-path::before { position: absolute; top: 50%; right: 1rem; left: 1rem; height: .22rem; background: repeating-linear-gradient(90deg, var(--terracotta) 0 .8rem, transparent .8rem 1.25rem); content: ""; transform: translateY(-50%) rotate(-.6deg); }
.together-path-node { position: relative; z-index: 1; display: grid; flex: 0 0 8.2rem; gap: .2rem; place-items: center; min-height: 5.2rem; padding: .55rem; border: 2px solid var(--blue); border-radius: 53% 47% 55% 45%; background: var(--paper-light); color: var(--blue-deep); cursor: pointer; box-shadow: .25rem .3rem 0 rgba(23, 59, 80, .18); transform: translateY(.75rem) rotate(-1deg); transition: transform .18s ease, background .18s ease, color .18s ease; }
.together-path-node:nth-child(even) { transform: translateY(-.75rem) rotate(1deg); }
.together-path-node > span:first-child { color: var(--terracotta-deep); font-family: var(--font-serif); font-size: 1.2rem; font-weight: 900; }
.together-path-node > span:last-child { max-width: 8ch; font-size: .65rem; font-weight: 850; line-height: 1.15; text-align: center; }
.together-path-node:hover,
.together-path-node:focus-visible { transform: translateY(-.25rem) rotate(0); }
.together-path-node[aria-selected="true"] { border-color: var(--terracotta); background: var(--terracotta); color: var(--white); transform: translateY(-.35rem) rotate(-1deg) scale(1.07); }
.together-path-node[aria-selected="true"] > span:first-child { color: var(--white); }

.together-sheet {
  position: relative;
  width: min(100%, 68rem);
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 3.4rem);
  border: 2px solid rgba(34, 88, 120, .48);
  border-radius: 3.1rem .65rem 2.5rem .85rem;
  background:
    linear-gradient(90deg, transparent 0 3.5rem, rgba(217, 85, 11, .12) 3.5rem 3.62rem, transparent 3.62rem),
    repeating-linear-gradient(0deg, transparent 0 2rem, rgba(34, 88, 120, .07) 2rem 2.08rem),
    #fffaf0;
  box-shadow: .9rem 1.1rem 0 rgba(34, 88, 120, .16), 1.2rem 1.5rem 2.4rem rgba(47, 37, 30, .12);
  transform: rotate(.12deg);
}
.together-sheet::before { position: absolute; top: -1rem; right: 14%; width: 9rem; height: 2.2rem; background: rgba(220, 198, 143, .72); content: ""; transform: rotate(2deg); }
.together-sheet-header { max-width: 50rem; margin-bottom: 2rem; }
.together-mission-counter { margin: 0 0 .5rem; color: var(--terracotta-deep); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.together-sheet h3 { max-width: 18ch; margin-bottom: .65rem; color: var(--blue-deep); font-family: var(--font-serif); font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: .98; }
.together-purpose { margin: 0; color: var(--ink-soft); font-size: 1.05rem; }
.together-section-line { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.together-sheet h4 { margin: 0; color: var(--terracotta-deep); font-family: var(--font-serif); font-size: 1.05rem; }
.together-rotate { border: 0; background: transparent; cursor: pointer; }
.together-role-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-bottom: 2.3rem; }
.together-role-token { min-width: 0; padding: .8rem; border: 1px solid rgba(34, 88, 120, .32); border-radius: 1.15rem .32rem .9rem .4rem; background: rgba(247, 238, 219, .82); box-shadow: .18rem .22rem 0 rgba(23, 59, 80, .1); }
.together-role-token:nth-child(even) { border-radius: .35rem 1.1rem .42rem .95rem; transform: translateY(.35rem); }
.together-role-token > p { margin: 0 0 .45rem; color: var(--ink-soft); font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.together-role-token > div { display: grid; grid-template-columns: 2.1rem 1fr; gap: .55rem; align-items: start; }
.together-role-token > div + div { margin-top: .65rem; }
.role-mark { display: grid; place-items: center; width: 2rem; aspect-ratio: 1; border-radius: 50% 42% 55% 45%; background: var(--blue); color: var(--white); font-family: var(--font-serif); font-weight: 900; }
.role-mark-reader { background: var(--terracotta); border-radius: 30% 70% 35% 65%; }
.role-mark-checker { background: var(--sage); border-radius: 52% 48% 28% 72%; }
.role-mark-reporter { background: var(--gold); color: var(--ink); border-radius: 70% 30% 62% 38%; }
.together-role-token strong,
.together-role-token > div > span:last-child > span { display: block; }
.together-role-token strong { color: var(--blue-deep); font-size: .78rem; }
.together-role-token > div > span:last-child > span { color: var(--ink-soft); font-size: .64rem; line-height: 1.35; }
.together-work > h4 { margin-bottom: .8rem; }
.together-steps { display: grid; gap: .65rem; }
.together-step { display: grid; grid-template-columns: auto 2rem 1fr; gap: .75rem; align-items: start; padding: .8rem 1rem; border: 1px solid rgba(101, 122, 61, .35); border-radius: .45rem 1.25rem .55rem 1rem; background: rgba(255, 253, 247, .82); cursor: pointer; }
.together-step:nth-child(even) { border-radius: 1.2rem .4rem 1rem .5rem; }
.together-step input { width: 1.15rem; height: 1.15rem; margin-top: .12rem; accent-color: var(--sage); }
.together-step > span:nth-child(2) { color: var(--terracotta-deep); font-family: var(--font-serif); font-weight: 900; }
.together-step > span:last-child { font-size: .85rem; line-height: 1.48; }
.together-step.is-complete { border-color: var(--sage); background: rgba(223, 227, 196, .58); }
.together-step.is-complete > span:last-child { text-decoration: line-through; text-decoration-color: rgba(101, 122, 61, .45); }
.together-progress { display: grid; grid-template-columns: minmax(8rem, 1fr) auto auto; gap: .8rem; align-items: center; margin-top: 1.2rem; color: var(--ink-soft); font-size: .75rem; }
.together-progress progress { width: 100%; height: .75rem; accent-color: var(--sage); }
.together-progress strong { color: var(--sage); font-family: var(--font-serif); }
.together-reflection { margin: 1.6rem 0 .8rem; padding: 1rem 1.25rem; border-left: .25rem solid var(--terracotta); background: rgba(217, 85, 11, .07); }
.together-reflection[hidden] { display: none; }
.together-reflection p { margin: .35rem 0 0; color: var(--blue-deep); font-family: var(--font-serif); font-size: 1.08rem; font-style: italic; }
.together-related { margin-top: 1rem; border: 0; background: transparent; cursor: pointer; }
.together-navigation { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; width: min(100%, 54rem); margin: 2rem auto 0; }
.together-navigation .button:first-child { justify-self: end; }
.together-navigation .button:last-child { justify-self: start; }
.together-memory { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1.4rem; color: var(--ink-soft); font-size: .76rem; }
.together-memory label { display: flex; gap: .5rem; align-items: center; cursor: pointer; }
.together-memory input { width: 1.05rem; height: 1.05rem; accent-color: var(--sage); }
.together-memory button { padding: .2rem 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--terracotta-deep); cursor: pointer; font-weight: 800; }
.together-storage-status { min-height: 1.35em; margin: .55rem 0 0; color: var(--ink-soft); font-size: .69rem; text-align: center; }

.resources-section {
  position: relative;
  padding-block: clamp(6rem, 9vw, 9rem);
  overflow: clip;
  background:
    radial-gradient(circle at 12% 10%, rgba(217, 85, 11, .16), transparent 23rem),
    radial-gradient(circle at 92% 42%, rgba(101, 122, 61, .22), transparent 26rem),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(255, 250, 240, .018) 5px 6px),
    var(--blue-deep);
}
.resources-shell { display: block; }
.resource-intro { display: grid; grid-template-columns: minmax(18rem, .9fr) minmax(22rem, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; margin-bottom: 4rem; }
.resource-heading { position: relative; top: auto; width: auto; margin: 0; text-align: left; }
.resource-heading h2 { max-width: 10ch; color: var(--paper-light); }
.resource-heading .eyebrow { color: #ffb27c; }
.resource-heading > p:last-child { max-width: 34rem; color: #d8e1dd; font-size: 1.05rem; }
.resource-collage { position: relative; min-height: clamp(18rem, 34vw, 27rem); margin: 0; }
.resource-collage::before { position: absolute; top: 8%; right: 4%; bottom: 0; left: 5%; border-radius: 3rem .6rem 2.5rem .8rem; background: var(--sage); content: ""; transform: rotate(2.5deg); }
.resource-collage img { position: absolute; width: 61%; border: .45rem solid var(--paper-light); border-radius: 1.8rem .35rem 1.35rem .45rem; box-shadow: .75rem .9rem 1.5rem rgba(0, 0, 0, .24); }
.resource-collage img:nth-child(1) { top: 3%; left: 0; transform: rotate(-5deg); }
.resource-collage img:nth-child(2) { top: 18%; right: 0; transform: rotate(5deg); }
.resource-collage img:nth-child(3) { bottom: 0; left: 17%; transform: rotate(-1deg); }
.resource-search-tool { display: block; width: min(100%, 50rem); margin: 0 auto 2rem; }
.resource-search-tool label { display: block; margin-bottom: .45rem; color: var(--paper-light); font-size: .75rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.resource-search-row { display: grid; grid-template-columns: 1fr auto; gap: .55rem; }
.resource-search-row .text-input { min-width: 0; border-color: rgba(255, 250, 240, .42); background: rgba(255, 250, 240, .96); }
.resource-search-row button { padding: .5rem .85rem; border: 1px solid #ffd1ad; border-radius: .8rem .25rem .7rem .3rem; background: transparent; color: #ffd1ad; cursor: pointer; }
.resource-search-row button[hidden] { display: none; }
.resource-atlas,
.resource-results { width: min(100%, 72rem); margin-inline: auto; }
.resource-ribbon { display: flex; gap: .8rem; min-width: 0; padding: 1rem .8rem 2.2rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 1rem; scrollbar-color: rgba(255, 250, 240, .42) transparent; }
.resource-tab { flex: 0 0 8.6rem; min-height: 8.8rem; padding: .35rem; overflow: hidden; border: 2px solid rgba(255, 250, 240, .32); border-radius: 1.5rem .3rem 1.15rem .42rem; background: var(--paper-light); color: var(--blue-deep); cursor: pointer; box-shadow: .35rem .45rem 0 rgba(0, 0, 0, .16); transform: translateY(.75rem) rotate(-1deg); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.resource-tab:nth-child(even) { border-radius: .35rem 1.45rem .45rem 1.15rem; transform: translateY(.4rem) rotate(1deg); }
.resource-tab img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1.1rem .18rem .75rem .22rem; }
.resource-tab > span { display: grid; grid-template-columns: 1fr auto; gap: .3rem; align-items: end; padding: .55rem .35rem .3rem; text-align: left; }
.resource-tab strong { font-size: .67rem; line-height: 1.1; }
.resource-tab > span > span { color: var(--category-accent); font-family: var(--font-serif); font-size: .8rem; font-weight: 900; }
.resource-tab:hover,
.resource-tab:focus-visible { transform: translateY(0) rotate(0); }
.resource-tab[aria-selected="true"] { border-color: var(--category-accent); box-shadow: .45rem .55rem 0 var(--category-accent); transform: translateY(-.45rem) rotate(-.8deg) scale(1.06); }
.atlas-spread {
  display: grid;
  grid-template-columns: minmax(17rem, .78fr) minmax(0, 1.22fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: start;
  padding: clamp(1rem, 3vw, 2.6rem);
  border: 2px solid color-mix(in srgb, var(--category-accent) 75%, white);
  border-radius: 3rem .65rem 2.4rem .85rem;
  background: var(--paper-light);
  box-shadow: 1rem 1.15rem 0 color-mix(in srgb, var(--category-accent) 42%, transparent), 1.4rem 1.7rem 2.5rem rgba(0, 0, 0, .22);
}
.atlas-guide { position: sticky; top: calc(var(--header-height) + 1rem); display: block; padding: .55rem .55rem 1rem; border: 1px solid var(--line); border-radius: 2.1rem .4rem 1.65rem .55rem; background: #efe1c4; cursor: pointer; box-shadow: .5rem .65rem 0 rgba(47, 37, 30, .13); transform: rotate(-1.2deg); transition: transform .18s ease; }
.atlas-guide:hover,
.atlas-guide:focus-visible { transform: rotate(0) translateY(-.2rem); }
.atlas-guide img { width: 100%; border-radius: 1.65rem .2rem 1.1rem .3rem; }
.atlas-guide span { display: block; padding-top: .7rem; color: var(--terracotta-deep); font-family: var(--font-serif); font-size: .78rem; font-style: italic; font-weight: 700; }
.atlas-copy { min-width: 0; }
.atlas-counter { margin: 0 0 .5rem; color: var(--category-accent); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.atlas-copy h3 { max-width: 18ch; margin-bottom: .55rem; color: var(--blue-deep); font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3.65rem); }
.atlas-when { margin-bottom: 1.35rem; padding-left: 1rem; border-left: .24rem solid var(--category-accent); color: var(--ink-soft); }
.site-miniatures { display: grid; gap: .75rem; }
.site-miniature { display: block; overflow: hidden; border: 1px solid color-mix(in srgb, var(--category-accent) 38%, var(--line)); border-radius: .7rem 1.35rem .8rem 1.05rem; background: #fffdf7; color: var(--ink); text-decoration: none; box-shadow: .22rem .28rem 0 color-mix(in srgb, var(--category-accent) 12%, transparent); transition: transform .17s ease, box-shadow .17s ease; }
.site-miniature:nth-child(even) { border-radius: 1.25rem .65rem 1rem .75rem; }
.site-miniature:hover,
.site-miniature:focus-visible { color: var(--ink); transform: translateX(.3rem) rotate(-.12deg); box-shadow: .35rem .4rem 0 color-mix(in srgb, var(--category-accent) 24%, transparent); }
.site-mini-browser { display: flex; gap: .65rem; align-items: center; padding: .34rem .65rem; border-bottom: 1px solid var(--line-soft); background: color-mix(in srgb, var(--category-accent) 9%, white); color: var(--ink-soft); font-family: ui-monospace, monospace; font-size: .58rem; }
.site-mini-dots { width: 2.15rem; height: .48rem; background: radial-gradient(circle, var(--category-accent) 0 .17rem, transparent .18rem) 0 center / .72rem .5rem repeat-x; opacity: .75; }
.site-mini-body { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .68rem .75rem; }
.site-mini-mark { display: grid; place-items: center; width: 2.35rem; aspect-ratio: 1; border-radius: .65rem .2rem .55rem .25rem; background: var(--category-accent); color: var(--white); font-family: var(--font-serif); font-weight: 900; }
.site-mini-body > span:nth-child(2) { min-width: 0; }
.site-mini-body strong,
.site-mini-body > span:nth-child(2) > span { display: block; }
.site-mini-body strong { margin-bottom: .12rem; color: var(--blue-deep); font-size: .78rem; line-height: 1.2; }
.site-mini-body > span:nth-child(2) > span { color: var(--ink-soft); font-size: .63rem; line-height: 1.35; }
.site-mini-cue { color: var(--category-accent); font-size: .63rem; font-weight: 850; white-space: nowrap; }
.site-mini-cue::after { content: "  ↗"; }
.atlas-navigation { display: flex; gap: .7rem; justify-content: space-between; margin-top: 1.3rem; }
.atlas-navigation .button { padding: .65rem .85rem; font-size: .7rem; }
.resource-results { padding: clamp(1rem, 3vw, 2.5rem); border-radius: 2.2rem .5rem 1.8rem .65rem; background: var(--paper-light); box-shadow: .75rem .9rem 0 rgba(217, 85, 11, .25); }
.resource-results[hidden] { display: none; }
.resource-results > h3 { margin-bottom: 1.3rem; color: var(--blue-deep); font-family: var(--font-serif); font-size: 2rem; }
.resource-results-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.resource-search-result > p { margin: 0 0 .35rem; color: var(--terracotta-deep); font-size: .63rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.resource-empty { padding: 1rem 0; text-align: center; }
.resource-empty[hidden] { display: none; }
.resource-empty p { color: var(--ink-soft); }

@media (max-width: 68rem) {
  .together-hero,
  .resource-intro { grid-template-columns: 1fr; }
  .together-heading h2,
  .resource-heading h2 { max-width: 12ch; }
  .together-visual,
  .resource-collage { width: min(100%, 54rem); margin-inline: auto; }
  .resource-collage { min-height: 30rem; }
  .together-settings { grid-template-columns: 1fr; }
  .together-settings-scroll { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .together-role-strip { grid-template-columns: 1fr 1fr; }
  .site-nav { gap: .7rem; }
  .site-nav a { font-size: .67rem; }
}

@media (max-width: 52rem) {
  .atlas-spread { grid-template-columns: 1fr; }
  .atlas-guide { position: static; width: min(100%, 34rem); margin-inline: auto; }
  .resource-results-list { grid-template-columns: 1fr; }
}

@media (max-width: 44rem) {
  .together-section,
  .resources-section { padding-block: 5.5rem; }
  .together-hero { gap: 2.5rem; margin-bottom: 3rem; }
  .together-heading h2,
  .resource-heading h2 { font-size: clamp(2.8rem, 14vw, 4.6rem); }
  .together-visual { padding: .4rem .4rem 3.25rem; border-radius: 2.2rem .4rem 1.8rem .5rem; box-shadow: .55rem .75rem 0 rgba(101, 122, 61, .34); transform: none; }
  .together-visual img { border-radius: 1.85rem .25rem 1.3rem .35rem; }
  .together-visual figcaption { font-size: .74rem; line-height: 1.3; }
  .together-settings { width: calc(100% + 1rem); margin-inline: -.5rem; padding: 1rem .75rem; }
  .together-settings-scroll { display: flex; width: calc(100% + 1.5rem); margin-inline: -.75rem; padding: .25rem .75rem .75rem; overflow-x: auto; scroll-padding-inline: .75rem; scrollbar-color: var(--terracotta) rgba(34, 88, 120, .12); }
  .together-setting { flex: 0 0 13rem; }
  .together-path { width: calc(100% + 2rem); margin-inline: -1rem; padding-inline: 1rem; }
  .together-path-node { flex-basis: 7.4rem; }
  .together-sheet { width: calc(100% + .5rem); margin-inline: -.25rem; padding: 1.5rem .95rem 1.7rem; border-radius: 2.3rem .4rem 1.9rem .5rem; box-shadow: .5rem .7rem 0 rgba(34, 88, 120, .16); background: repeating-linear-gradient(0deg, transparent 0 2rem, rgba(34, 88, 120, .07) 2rem 2.08rem), #fffaf0; }
  .together-sheet h3 { font-size: clamp(2.2rem, 12vw, 3.5rem); }
  .together-role-strip { display: flex; width: calc(100% + 1.9rem); margin-inline: -.95rem; padding: .2rem .95rem .8rem; overflow-x: auto; scroll-padding-inline: .95rem; }
  .together-role-token { flex: 0 0 13rem; }
  .together-role-token:nth-child(even) { transform: none; }
  .together-step { grid-template-columns: auto 1.7rem 1fr; padding: .75rem .7rem; }
  .together-progress { grid-template-columns: 1fr; }
  .together-navigation { grid-template-columns: 1fr 1fr; }
  .together-navigation .button:nth-child(2) { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .together-navigation .button:first-child,
  .together-navigation .button:last-child { justify-self: stretch; padding-inline: .65rem; }
  .together-memory { align-items: flex-start; flex-direction: column; }
  .together-storage-status { text-align: left; }
  .resource-intro { margin-bottom: 3rem; }
  .resource-collage { min-height: 21rem; }
  .resource-search-tool { margin-bottom: 1.25rem; }
  .resource-ribbon { width: calc(100% + 2rem); margin-inline: -1rem; padding-inline: 1rem; }
  .resource-tab { flex-basis: 7.7rem; min-height: 8rem; }
  .atlas-spread { width: calc(100% + .5rem); margin-inline: -.25rem; padding: .8rem; border-radius: 2.2rem .4rem 1.8rem .5rem; box-shadow: .55rem .75rem 0 color-mix(in srgb, var(--category-accent) 32%, transparent); }
  .atlas-copy h3 { font-size: clamp(2rem, 11vw, 3.2rem); }
  .site-mini-body { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .site-mini-cue { grid-column: 2; }
  .atlas-navigation { flex-direction: column; }
  .atlas-navigation .button { width: 100%; }
  .resource-search-row { grid-template-columns: 1fr; }
  .resource-search-row button { justify-self: start; }
  .resource-results { width: calc(100% + .5rem); margin-inline: -.25rem; padding: 1rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .together-setting-choices span,
  .together-path-node,
  .resource-tab,
  .atlas-guide,
  .site-miniature { transition: none; }
  .together-visual,
  .together-settings,
  .together-path-node,
  .together-path-node:nth-child(even),
  .together-path-node[aria-selected="true"],
  .together-role-token:nth-child(even),
  .resource-collage img,
  .resource-tab,
  .resource-tab:nth-child(even),
  .resource-tab[aria-selected="true"],
  .atlas-guide,
  .site-miniature:hover,
  .site-miniature:focus-visible { transform: none; }
}

/* Final cascade for the accessibility revision */
.site-nav a { font-size: .875rem; }
.field-label,
.filter-control label,
.resource-tools label,
.contact-form label:not(.check-label),
.extras-kind-stamp,
.extras-duration,
.extras-sheet h4,
.extras-counter,
.extras-remember,
.extras-reset,
.extras-storage-status,
.together-settings-heading p,
.together-setting legend,
.together-setting-choices span,
.together-path-label,
.together-path-node > span:last-child,
.together-mission-counter,
.together-role-token > p,
.together-role-token strong,
.together-role-token > div > span:last-child > span,
.together-step > span:last-child,
.together-progress,
.together-memory,
.together-storage-status,
.resource-search-tool label,
.resource-tab strong,
.resource-tab > span > span,
.atlas-counter,
.atlas-guide span,
.site-mini-browser,
.site-mini-body strong,
.site-mini-body > span:nth-child(2) > span,
.site-mini-cue,
.atlas-navigation .button,
.resource-search-result > p {
  font-size: .875rem;
  line-height: 1.45;
}

.together-hero {
  grid-template-columns: minmax(24rem, 1fr) minmax(28rem, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.together-heading h2 { max-width: 10ch; font-size: clamp(3rem, 5.5vw, 5.5rem); }
.together-heading > p:last-child { max-width: 60ch; font-size: 1.08rem; }
.together-visual { width: 100%; max-width: 44rem; justify-self: end; padding: .55rem .55rem 2.8rem; }
.together-visual img { width: 100%; height: auto !important; aspect-ratio: 1693 / 929; object-fit: contain; }
.together-settings-scroll { grid-template-columns: repeat(5, minmax(8.5rem, 1fr)); }
.together-setting-choices span { min-height: 2.75rem; display: flex; align-items: center; padding: .55rem .7rem; }
.together-path-node { flex-basis: 9rem; min-height: 5.8rem; }
.together-step { min-height: 3.25rem; align-items: center; }

.resource-intro { grid-template-columns: minmax(24rem, 1fr) minmax(24rem, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.resource-collage { min-height: clamp(17rem, 27vw, 22rem); }
.resource-collage img { width: min(58%, 25rem); height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.resource-tab { flex-basis: 10rem; min-height: 0; }
.resource-tab img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.resource-tab > span { min-height: 3.7rem; align-items: center; }
.atlas-spread { grid-template-columns: minmax(20rem, .82fr) minmax(24rem, 1.18fr); align-items: start; }
.atlas-guide { position: static; width: 100%; max-width: 32rem; justify-self: center; }
.atlas-guide img { width: 100%; height: auto !important; aspect-ratio: auto; object-fit: contain; }
.atlas-copy { max-width: 43rem; }
.site-miniature { min-height: 4.75rem; }
.site-mini-body { grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: .9rem; padding: .85rem; }

@media (max-width: 72rem) {
  .menu-button { display: inline-flex; }
  .site-nav { display: none; position: absolute; z-index: 10; top: 100%; right: 0; left: 0; align-items: stretch; flex-direction: column; gap: 0; padding: .45rem 1rem 1rem; border-bottom: 2px solid var(--terracotta); background: var(--paper-light); box-shadow: 0 1rem 2rem rgba(49, 32, 18, .15); }
  .site-nav.open { display: flex; }
  .site-nav a { min-height: 2.75rem; display: flex; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .site-nav a::after { display: none; }
  .together-hero,
  .resource-intro,
  .atlas-spread { grid-template-columns: 1fr; }
  .together-heading,
  .together-visual,
  .resource-heading,
  .resource-collage,
  .atlas-copy { width: min(100%, 48rem); margin-inline: auto; }
  .together-visual { justify-self: center; }
  .together-settings-scroll { grid-template-columns: repeat(3, minmax(9rem, 1fr)); }
  .resource-collage { min-height: 25rem; }
}

@media (max-width: 44rem) {
  .together-hero { gap: 2rem; }
  .together-visual { padding: .35rem .35rem 2.7rem; border-radius: 1.8rem .4rem 1.4rem .5rem; }
  .together-visual img { border-radius: 1.45rem .25rem 1rem .3rem; }
  .together-settings { width: 100%; margin-inline: 0; padding: 1rem; }
  .together-settings-scroll { width: 100%; display: grid; grid-template-columns: 1fr; margin-inline: 0; padding: 0; overflow: visible; }
  .together-setting { width: 100%; flex: none; }
  .together-setting-choices { display: grid; grid-template-columns: 1fr 1fr; }
  .together-role-strip { width: 100%; display: grid; grid-template-columns: 1fr; margin-inline: 0; padding: 0; overflow: visible; }
  .together-role-token { width: 100%; flex: none; }
  .resource-collage { min-height: 18rem; }
  .resource-ribbon { width: 100%; margin-inline: 0; padding-inline: .25rem; }
  .atlas-spread,
  .resource-results { width: 100%; margin-inline: 0; }
  .site-mini-body { grid-template-columns: 2.65rem minmax(0, 1fr); }
  .site-mini-cue { grid-column: 2; white-space: normal; }
}

/* Evaluator fixes: contrast, type floor and unobscured navigation */
:root {
  --action: #9f360a;
  --action-hover: #762505;
}

html { scroll-padding-top: 1.25rem; }
[id],
main > section,
main > section[id],
.legal-main { scroll-margin-top: 1.25rem; }

.site-header {
  position: relative;
  top: auto;
}

#main:focus { outline: none; }

a:hover { color: var(--terracotta-deep); }

.button-primary,
.button-primary:visited {
  border-color: #762505;
  background: var(--action);
  color: var(--white);
  box-shadow: .25rem .3rem 0 #762505;
}
.button-primary:hover,
.button-primary:focus-visible {
  border-color: #5f1d03;
  background: var(--action-hover);
  color: var(--white);
}

.together-path-node[aria-selected="true"] {
  border-color: var(--action-hover);
  background: var(--action);
  color: var(--white);
}
.role-mark-reader { background: var(--action); }

.gallery-section {
  background: #263943;
  color: #eef2eb;
}
.gallery-section .section-heading > div > p:last-child,
.gallery-section .heading-row > div:first-child > p:not(.eyebrow):not(.gallery-origin-note) {
  color: #eef2eb;
}
.gallery-section .filter-control label { color: #fffdf7; }
.gallery-section .gallery-origin-note { color: #f7dfb9 !important; }

.language-link,
.hero-caption,
.stat span,
.map-direction span span,
.map-open span,
.map-figure figcaption,
.map-figure .map-footer figcaption,
.map-footer figcaption [data-map-note],
.fact-list li,
.chapter-subtitle,
.chapter-action strong,
.guide-kicker,
.guide-title,
.guide-origin,
.guide-open-cue,
.gallery-origin-note,
.extras-choice,
.extras-kind-stamp,
.extras-duration,
.extras-sheet h4,
.extras-checkpoint > span:last-child,
.extras-progress-row,
.extras-complete-mark,
.extras-counter,
.extras-remember,
.extras-reset,
.extras-storage-status,
.together-visual figcaption,
.together-settings-heading p,
.together-setting legend,
.together-setting-choices span,
.together-path-label,
.together-path-node > span:last-child,
.together-mission-counter,
.together-role-token > p,
.together-role-token strong,
.together-role-token > div > span:last-child > span,
.together-step > span:last-child,
.together-progress,
.together-memory,
.together-storage-status,
.resource-search-tool label,
.resource-tab strong,
.resource-tab > span > span,
.atlas-guide span,
.atlas-counter,
.site-mini-browser,
.site-mini-body strong,
.site-mini-body > span:nth-child(2) > span,
.site-mini-cue,
.atlas-navigation .button,
.resource-search-result > p,
.work-label,
.check-label,
.form-note,
.form-status,
.footer-grid h2,
.footer-bottom,
.dialog-note,
.legal-updated,
.noscript-nav a,
.noscript-chapters span,
.noscript-resources span {
  font-size: .875rem !important;
  line-height: 1.45;
}

.language-link {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.guide-open-cue,
.extras-choice,
.footer-grid h2,
.resource-tab strong,
.resource-search-tool label {
  letter-spacing: .05em;
}

.site-mini-cue,
.atlas-counter,
.resource-tab > span > span {
  color: var(--category-accent);
}

@media (max-width: 44rem) {
  .together-visual figcaption { font-size: .875rem !important; }
}

@media print {
  .site-header,
  .reading-progress { display: none !important; }
}

/* Local contrast refinements */
.extras-heading .eyebrow {
  color: #7d2600;
}

.map-section :focus-visible,
.help-panel :focus-visible,
.gallery-section :focus-visible,
.resources-section :focus-visible,
.site-footer :focus-visible {
  outline: .2rem solid #ffe09a;
  outline-offset: .3rem;
  box-shadow: 0 0 0 .45rem #122f40;
}

/* Digital Playground */
.button-play {
  border-color: var(--sage);
  background: var(--sage-pale);
  color: var(--blue-deep);
  box-shadow: .22rem .26rem 0 var(--sage);
}
.button-play:hover,
.button-play:focus-visible { background: var(--sage); color: var(--white); }

.games-section {
  position: relative;
  overflow: clip;
  padding-block: clamp(5rem, 9vw, 8.5rem);
  background:
    radial-gradient(circle at 8% 12%, rgba(212, 154, 56, .17), transparent 22rem),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(255, 255, 255, .018) 5px 6px),
    #1f4355;
  color: var(--white);
}
.games-section::before,
.games-section::after {
  position: absolute;
  content: "";
  width: 11rem;
  height: 11rem;
  border: .12rem dashed rgba(247, 238, 219, .25);
  border-radius: 50%;
  pointer-events: none;
}
.games-section::before { top: 3rem; right: -4rem; }
.games-section::after { bottom: 8rem; left: -5rem; }
.games-shell { position: relative; z-index: 1; }
.games-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
  margin-bottom: 3rem;
}
.games-heading .eyebrow { color: #f5c36e; }
.games-heading h2 {
  max-width: 12ch;
  margin: .35rem 0 .8rem;
  color: var(--white);
  font-size: clamp(3.6rem, 8vw, 7.6rem);
  line-height: .82;
}
.games-hook {
  max-width: 30ch;
  margin: 0;
  color: #f8d9aa;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  font-style: italic;
  font-weight: 700;
  line-height: 1.25;
}
.games-intro {
  margin: 0;
  padding: 1.5rem 1.6rem;
  border-top: .22rem solid var(--gold);
  border-bottom: 1px solid rgba(255,255,255,.3);
  color: #f4ead8;
  font-size: 1.05rem;
}
.games-board {
  display: grid;
  grid-template-columns: minmax(16rem, .36fr) minmax(0, 1fr);
  gap: clamp(1.3rem, 3vw, 2.7rem);
  align-items: start;
}
.game-passport {
  position: sticky;
  top: 1.25rem;
  min-height: 37rem;
  padding: 2.4rem 1.55rem 1.7rem 2.4rem;
  overflow: hidden;
  border: .16rem solid #d2ad6e;
  border-radius: 1.3rem .7rem 1.5rem .55rem;
  background:
    repeating-linear-gradient(0deg, transparent 0 1.85rem, rgba(34, 88, 120, .1) 1.85rem 1.91rem),
    var(--paper-light);
  color: var(--ink);
  box-shadow: .75rem .9rem 0 rgba(12, 35, 47, .45);
  transform: rotate(-.45deg);
}
.passport-binding {
  position: absolute;
  inset: 0 auto 0 .7rem;
  width: .6rem;
  background: repeating-linear-gradient(0deg, transparent 0 .95rem, var(--terracotta) .95rem 1.3rem, transparent 1.3rem 2.1rem);
}
.passport-kicker {
  margin: 0;
  color: var(--terracotta-deep);
  font-size: .875rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.game-passport h3 { margin: .35rem 0 1.25rem; color: var(--blue-deep); font-size: 2.1rem; line-height: .98; }
.passport-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin: 0 0 1rem; }
.passport-stats div { padding: .7rem; border: 1px solid var(--line); background: rgba(255,255,255,.62); }
.passport-stats dt { font-size: .875rem; line-height: 1.3; }
.passport-stats dd { margin: .2rem 0 0; color: var(--blue-deep); font-family: var(--font-display); font-size: 1.7rem; font-weight: 950; }
.passport-compass { position: relative; margin: 1rem 0; padding: 1rem 1rem 1rem 4.3rem; border: .13rem solid var(--blue); border-radius: 50% 1rem 1rem 50%; background: #edf0dc; }
.passport-compass > span { position: absolute; left: .65rem; top: 50%; display: grid; width: 2.9rem; aspect-ratio: 1; place-items: center; border: .13rem solid var(--blue-deep); border-radius: 50%; color: var(--blue-deep); font-family: var(--font-serif); font-weight: 900; transform: translateY(-50%) rotate(-7deg); }
.passport-compass > span::after { position: absolute; content: ""; bottom: .3rem; border-width: .5rem .25rem 0; border-style: solid; border-color: var(--terracotta) transparent transparent; }
.passport-compass strong { display: block; color: var(--blue-deep); font-family: var(--font-serif); font-size: 1.08rem; }
.passport-compass p { margin: .2rem 0 0; font-size: .875rem; line-height: 1.4; }
.passport-stamps { display: grid; gap: .45rem; margin: 1rem 0; }
.passport-stamp { display: flex; justify-content: space-between; gap: .5rem; padding: .45rem .6rem; border: .1rem dashed #9b8a73; color: #554d43; font-size: .875rem; font-weight: 750; }
.passport-stamp::after { content: attr(data-state); font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.passport-stamp.is-complete { border: .14rem solid var(--sage); color: #40511e; transform: rotate(-.5deg); }
.games-remember { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1.2rem; font-size: .875rem; font-weight: 700; line-height: 1.4; }
.games-remember input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: .1rem; accent-color: var(--sage); }
.games-reset { min-height: 2.75rem; margin-top: .65rem; padding: .35rem .15rem; border: 0; background: transparent; color: var(--terracotta-deep); font-size: .875rem; font-weight: 850; text-decoration: underline; text-underline-offset: .2rem; cursor: pointer; }
.games-storage-status { min-height: 2.5rem; margin: .25rem 0 0; color: var(--ink-soft); font-size: .875rem; line-height: 1.35; }
.game-board-main { position: relative; min-width: 0; padding: 1.2rem 0 3rem; }
.game-path { position: absolute; inset: 48% 8% auto; z-index: 0; display: flex; justify-content: space-between; border-top: .2rem dashed #e2b762; transform: rotate(-2deg); }
.game-path span { width: 1rem; height: 1rem; margin-top: -.6rem; border: .16rem solid #e2b762; border-radius: 50%; background: #1f4355; }
.game-stations { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.game-station {
  min-height: 24rem;
  display: grid;
  grid-template-rows: 11rem 1fr;
  padding: 0;
  overflow: hidden;
  border: .16rem solid var(--station-border, var(--gold));
  border-radius: 1.3rem .45rem 1.1rem .6rem;
  background: var(--paper-light);
  color: var(--ink);
  text-align: left;
  box-shadow: .65rem .8rem 0 rgba(9, 30, 41, .5);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.game-station:nth-child(1) { --station-border: #df6c2e; transform: rotate(-.7deg); }
.game-station:nth-child(2) { --station-border: #779054; margin-top: 2rem; transform: rotate(.65deg); }
.game-station:nth-child(3) { --station-border: #d3a43f; margin-top: -1rem; transform: rotate(.45deg); }
.game-station:nth-child(4) { --station-border: #4d82a4; margin-top: 1rem; transform: rotate(-.55deg); }
.game-station:hover,
.game-station:focus-visible { transform: translateY(-.45rem) rotate(0); box-shadow: .9rem 1.1rem 0 rgba(9, 30, 41, .6); }
.game-station[aria-pressed="true"] { outline: .25rem solid #ffe09a; outline-offset: .25rem; }
.game-station-art { position: relative; display: block; overflow: hidden; background: var(--paper-aged); }
.game-station-art::after { position: absolute; inset: auto 1.2rem -.15rem; content: ""; height: .65rem; background: rgba(231, 204, 137, .7); transform: rotate(-1deg); }
.game-station-art img { width: 100%; height: 100%; object-fit: cover; }
.game-station-copy { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.1rem 1.25rem; }
.game-station-number { align-self: flex-start; margin-top: -2.1rem; padding: .3rem .6rem; border: .12rem solid var(--station-border); background: var(--paper-light); color: var(--terracotta-deep); font-family: var(--font-display); font-size: 1rem; font-weight: 950; }
.game-station-copy > strong { color: var(--blue-deep); font-family: var(--font-serif); font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.06; }
.game-station-copy > span:not(.game-station-number):not(.game-station-meta):not(.game-station-state) { line-height: 1.45; }
.game-station-meta { display: flex; flex-wrap: wrap; gap: .35rem .7rem; color: var(--ink-soft); font-size: .875rem; }
.game-station-state { align-self: flex-start; margin-top: auto; padding: .35rem .55rem; border: .1rem dashed var(--terracotta-deep); color: var(--terracotta-deep); font-size: .8rem; font-weight: 900; text-transform: uppercase; }
.game-station-state.is-complete { border-style: solid; border-color: var(--sage); color: #40511e; transform: rotate(-1deg); }

.game-player {
  scroll-margin-top: 1.25rem;
  margin-top: 3rem;
  padding: clamp(1.1rem, 3vw, 2.5rem);
  border: .18rem solid var(--gold);
  border-radius: 1.4rem .55rem 1.6rem .7rem;
  background:
    repeating-linear-gradient(0deg, transparent 0 2.15rem, rgba(34, 88, 120, .08) 2.15rem 2.21rem),
    var(--paper-light);
  color: var(--ink);
  box-shadow: 1rem 1.15rem 0 rgba(12, 35, 47, .48);
}
.game-player-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .4rem; }
.game-back { min-height: 2.75rem; padding: .4rem .6rem; border: 0; background: transparent; color: var(--terracotta-deep); font-weight: 850; text-decoration: underline; text-underline-offset: .2rem; cursor: pointer; }
.game-player-bar > span { color: var(--blue-deep); font-size: .875rem; font-weight: 900; text-transform: uppercase; }
.game-progress { width: 100%; height: .75rem; overflow: hidden; border: 1px solid var(--blue); border-radius: 0; accent-color: var(--sage); }
.game-progress::-webkit-progress-bar { background: #e7dfcd; }
.game-progress::-webkit-progress-value { background: var(--sage); }
.game-player-content { padding-top: clamp(1.4rem, 4vw, 3rem); }
.game-rules { display: grid; grid-template-columns: minmax(13rem, .7fr) minmax(0, 1fr); gap: clamp(1.3rem, 4vw, 3rem); align-items: center; }
.game-rules > img { width: 100%; height: auto; border: .14rem solid var(--line); border-radius: .8rem .25rem 1rem .35rem; box-shadow: .6rem .7rem 0 var(--paper-aged); }
.game-rules-copy h3,
.game-round h3,
.game-finish h3 { margin: .25rem 0 .7rem; color: var(--blue-deep); font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: .92; }
.game-rules-goal { color: var(--terracotta-deep); font-family: var(--font-serif); font-size: 1.3rem; font-weight: 750; }
.game-warning { max-width: 54rem; padding: .8rem 1rem; border-left: .28rem solid var(--terracotta-deep); background: #f6dfc7; color: #5b230b; font-weight: 800; }
.game-round { max-width: 59rem; margin-inline: auto; }
.game-prompt { max-width: 48rem; margin: .8rem 0 1.5rem; color: #3d352d; font-family: var(--font-serif); font-size: clamp(1.15rem, 2.4vw, 1.55rem); line-height: 1.48; }
.game-hint { min-height: 2.75rem; padding: .45rem .75rem; border: .12rem dashed var(--blue); background: transparent; color: var(--blue-deep); font-weight: 850; cursor: pointer; }
.game-hint-text { max-width: 46rem; margin: .75rem 0; padding: .75rem 1rem; background: var(--sage-pale); color: #324416; }
.game-options { display: grid; gap: .75rem; margin: 1.4rem 0 0; padding: 0; border: 0; }
.game-option { position: relative; min-height: 3.4rem; padding: .85rem 1.1rem; border: .13rem solid var(--blue); border-radius: .2rem .7rem .18rem .65rem; background: #fffdf8; color: var(--blue-deep); font-weight: 800; text-align: left; cursor: pointer; }
.game-option:hover:not(:disabled),
.game-option:focus-visible:not(:disabled) { background: #e5edd6; transform: translateX(.25rem); }
.game-option:disabled { opacity: 1; cursor: default; }
.game-option.is-correct { padding-right: 11rem; border-width: .18rem; border-color: var(--sage); background: #edf1d9; }
.game-option.is-learning { padding-right: 15rem; border-style: dashed; border-color: var(--terracotta-deep); background: #f8ead9; }
.game-option.is-correct::after,
.game-option.is-learning::after { position: absolute; right: .7rem; top: 50%; content: attr(data-result); max-width: 13rem; color: #344616; font-size: .75rem; font-weight: 950; text-transform: uppercase; transform: translateY(-50%); }
.game-option.is-learning::after { color: #722704; }
.game-feedback { margin-top: 1.5rem; padding: clamp(1.1rem, 3vw, 2rem); border: .15rem solid var(--sage); border-radius: .85rem .25rem 1rem .4rem; background: #edf1d9; }
.game-feedback.is-learning { border-color: var(--terracotta-deep); background: #f8ead9; }
.game-feedback h4 { margin: 0 0 .7rem; color: var(--blue-deep); font-family: var(--font-serif); font-size: 1.55rem; }
.game-feedback h5 { margin: 1rem 0 .35rem; color: var(--terracotta-deep); font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; }
.game-clues { margin: .35rem 0 0; padding-left: 1.25rem; }
.game-safe-action { padding: .75rem 1rem; border-left: .25rem solid var(--blue); background: rgba(255,255,255,.65); color: var(--blue-deep); font-weight: 750; }
.game-next { margin-top: 1rem; }

.phrase-builder { display: grid; grid-template-columns: minmax(13rem, .7fr) minmax(0, 1.3fr); gap: 1.2rem; }
.phrase-bank,
.phrase-selection { padding: 1.1rem; border: .12rem solid var(--line); background: rgba(255,255,255,.68); }
.phrase-builder h4 { margin: 0 0 .75rem; color: var(--blue-deep); font-family: var(--font-serif); font-size: 1.15rem; }
.phrase-tiles { display: flex; flex-wrap: wrap; gap: .5rem; }
.phrase-tile { min-height: 2.75rem; padding: .5rem .7rem; border: .12rem solid var(--terracotta-deep); background: #f8dfbf; color: #642607; font-weight: 850; cursor: pointer; transform: rotate(-.5deg); }
.phrase-tile:nth-child(even) { border-color: var(--blue); background: #dce8eb; color: var(--blue-deep); transform: rotate(.7deg); }
.phrase-tile:disabled { opacity: .38; }
.phrase-output { min-height: 3.4rem; margin: 0 0 .75rem; padding: .75rem; border: .15rem dashed var(--sage); background: #f3f3dd; color: var(--blue-deep); font-family: var(--font-serif); font-size: 1.2rem; font-weight: 800; overflow-wrap: anywhere; }
.phrase-selected-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.phrase-selected-item { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.phrase-selected-tile { overflow-wrap: anywhere; }
.phrase-tile-actions { display: flex; flex-wrap: wrap; gap: .3rem; }
.phrase-tile-actions button { min-width: 2.75rem; min-height: 2.75rem; padding: .35rem .5rem; border: .1rem solid var(--blue); background: var(--white); color: var(--blue-deep); font-size: .78rem; font-weight: 800; cursor: pointer; }
.phrase-tile-actions button:disabled { opacity: .45; cursor: default; }
.phrase-actions { margin-top: 1rem; }
.phrase-facts { display: grid; gap: .35rem; padding: 0; list-style: none; }
.phrase-facts li { padding-left: 1.5rem; position: relative; }
.phrase-facts li::before { position: absolute; left: 0; content: "○"; font-weight: 900; }
.phrase-facts li.is-met::before { content: "●"; color: var(--sage); }
.phrase-security-note { padding: .8rem 1rem; border: .12rem solid var(--blue); background: #e8eef0; color: var(--blue-deep); font-weight: 750; }

.game-finish { max-width: 52rem; margin-inline: auto; padding: 2rem; text-align: center; }
.game-finish-stamp { display: inline-block; padding: .5rem .85rem; border: .18rem double var(--terracotta-deep); color: var(--terracotta-deep); font-weight: 950; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2deg); }
.game-finish-score { color: var(--sage); font-family: var(--font-serif); font-size: 1.45rem; font-weight: 850; }
.game-finish-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.4rem; }
.games-share { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; margin-top: 3rem; padding: clamp(1.3rem, 4vw, 2.5rem); border: .18rem solid #f0c575; border-radius: .55rem 1.4rem .65rem 1.6rem; background: #f3e2bd; color: var(--ink); box-shadow: .8rem .85rem 0 rgba(12,35,47,.45); }
.games-share[hidden] { display: none; }
.games-share .eyebrow { color: var(--terracotta-deep); }
.games-share h3 { margin: .2rem 0 .4rem; color: var(--blue-deep); font-size: clamp(2rem, 4vw, 3.6rem); }
.games-share p { margin-block: .35rem; }
.games-share-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: flex-end; }
.games-copy-fallback { grid-column: 1 / -1; }
.games-copy-fallback label { display: block; margin-bottom: .35rem; font-weight: 800; }
.games-copy-fallback textarea { width: 100%; padding: .8rem; border: .12rem solid var(--blue); background: var(--white); color: var(--ink); }
.games-share-status { grid-column: 1 / -1; min-height: 1.5rem; color: var(--blue-deep); font-weight: 750; }

.noscript-games > article { margin: 1.2rem 0; padding: 1.2rem; border: .12rem solid var(--line); background: var(--paper-light); }
.noscript-games details { margin: .7rem 0; padding: .65rem; border-left: .22rem solid var(--sage); background: var(--sage-pale); }
.noscript-games summary { min-height: 2.75rem; display: flex; align-items: center; color: var(--blue-deep); font-weight: 850; cursor: pointer; }

@media (max-width: 68rem) {
  .games-heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .games-heading h2 { max-width: none; }
  .games-board { grid-template-columns: 1fr; }
  .game-passport { position: relative; top: auto; min-height: 0; }
  .passport-stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 52rem) {
  .game-stations { grid-template-columns: 1fr; }
  .game-station { min-height: 0; grid-template-columns: minmax(8rem, .65fr) minmax(0, 1fr); grid-template-rows: 1fr; }
  .game-station:nth-child(n) { margin-top: 0; transform: rotate(0); }
  .game-station-art { min-height: 14rem; }
  .game-station-number { margin-top: 0; }
  .game-path { display: none; }
  .game-rules,
  .phrase-builder { grid-template-columns: 1fr; }
  .game-rules > img { max-height: 24rem; object-fit: contain; background: var(--paper-aged); }
  .games-share { grid-template-columns: 1fr; }
  .games-share-actions { justify-content: flex-start; }
}
@media (max-width: 38rem) {
  .games-section { padding-block: 4rem; }
  .games-heading h2 { font-size: clamp(3.1rem, 16vw, 5.2rem); }
  .game-passport { padding: 2rem 1rem 1.2rem 1.8rem; transform: none; }
  .passport-stats,
  .passport-stamps { grid-template-columns: 1fr; }
  .game-station { display: block; }
  .game-station-art { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .game-player { padding: 1rem; box-shadow: .45rem .55rem 0 rgba(12,35,47,.48); }
  .game-rules-copy h3,
  .game-round h3,
  .game-finish h3 { font-size: clamp(2.1rem, 12vw, 3.5rem); }
  .game-option.is-correct,
  .game-option.is-learning { padding: .85rem 1rem 3.1rem; }
  .game-option.is-correct::after,
  .game-option.is-learning::after { inset: auto auto .65rem 1rem; max-width: calc(100% - 2rem); transform: none; }
  .phrase-selected-item { align-items: flex-start; flex-direction: column; }
  .phrase-tile-actions { width: 100%; }
  .phrase-tile-actions button { flex: 1 1 4.5rem; }
  .game-finish { padding: 1rem 0; }
  .game-finish-actions > * { width: 100%; }
  .games-share-actions > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .game-station,
  .game-station:nth-child(n),
  .game-passport,
  .game-finish-stamp { transform: none !important; transition: none !important; }
}

@media (forced-colors: active) {
  .games-section,
  .game-passport,
  .game-station,
  .game-player,
  .game-feedback,
  .games-share { background: Canvas; color: CanvasText; forced-color-adjust: auto; }
  .game-station,
  .game-player,
  .game-option,
  .game-feedback,
  .phrase-tile,
  .passport-stamp { border: 2px solid CanvasText; }
  .game-option.is-correct,
  .passport-stamp.is-complete { border: 4px double Highlight; }
  .game-option.is-learning { border: 4px dashed CanvasText; }
}

/* Book and website storytelling fold-out */
.book-ecosystem-link { margin: 1.4rem 0 0; }
.book-ecosystem-link .text-link { display: inline-flex; min-height: 2.75rem; align-items: center; }

.ecosystem-section {
  position: relative;
  overflow: clip;
  padding-block: clamp(5.5rem, 9vw, 9rem);
  background:
    radial-gradient(circle at 90% 6%, rgba(212, 154, 56, .16), transparent 25rem),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(62, 42, 24, .016) 4px 5px),
    #efe1c6;
  color: var(--ink);
}
.ecosystem-section::before {
  position: absolute;
  inset: 1.3rem 0 auto;
  content: "";
  height: .35rem;
  background: linear-gradient(90deg, transparent 3%, var(--terracotta) 3% 32%, transparent 32% 35%, var(--sage) 35% 69%, transparent 69% 72%, var(--blue) 72% 97%, transparent 97%);
  opacity: .75;
  transform: rotate(-.2deg);
}
.ecosystem-shell { position: relative; }
.ecosystem-opening {
  display: grid;
  grid-template-columns: minmax(20rem, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.ecosystem-opening-copy { position: relative; z-index: 2; }
.ecosystem-opening-copy .eyebrow { color: var(--terracotta-deep); }
.ecosystem-opening-copy h2 {
  max-width: 12ch;
  margin: .4rem 0 1rem;
  color: var(--blue-deep);
  font-size: clamp(3.4rem, 6.7vw, 7rem);
  line-height: .86;
}
.ecosystem-lead {
  max-width: 37rem;
  margin: 0;
  padding: 1.15rem 0 1.15rem 1.3rem;
  border-left: .28rem solid var(--terracotta);
  color: #443930;
  font-family: var(--font-serif);
  font-size: clamp(1.12rem, 2vw, 1.45rem);
  line-height: 1.55;
}
.ecosystem-story-art {
  position: relative;
  margin: 0;
  padding: .7rem;
  border: .14rem solid var(--blue);
  border-radius: 1.8rem .55rem 1.25rem .75rem;
  background: var(--paper-light);
  box-shadow: 1rem 1.1rem 0 rgba(101, 122, 61, .58), 1.45rem 1.65rem 2rem rgba(69, 43, 20, .2);
  transform: rotate(.55deg);
}
.ecosystem-story-art::before {
  position: absolute;
  z-index: 1;
  top: -.8rem;
  left: 42%;
  width: 8rem;
  height: 1.7rem;
  content: "";
  background: rgba(232, 211, 157, .78);
  transform: rotate(-1.2deg);
}
.ecosystem-story-art img { width: 100%; height: auto; border-radius: 1.2rem .25rem 1rem .4rem; }

.ecosystem-scenes {
  position: relative;
  display: grid;
  grid-template-columns: 1.03fr .94fr 1.03fr;
  gap: clamp(1rem, 3vw, 2.4rem);
  margin: clamp(4rem, 8vw, 7rem) 0;
  padding: 0;
  list-style: none;
}
.ecosystem-scenes::before {
  position: absolute;
  z-index: 0;
  top: 1.75rem;
  left: 8%;
  right: 8%;
  content: "";
  border-top: .18rem dashed var(--terracotta);
  transform: rotate(-.5deg);
}
.ecosystem-scene {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  align-items: start;
  padding: 1.25rem 1.2rem 1.35rem;
  border: .12rem solid var(--line);
  border-radius: .9rem .25rem 1.15rem .45rem;
  background: var(--paper-light);
  box-shadow: .5rem .65rem 0 rgba(118, 88, 50, .16);
}
.ecosystem-scene-1 { margin-top: 1.7rem; transform: rotate(-.7deg); }
.ecosystem-scene-2 { border-color: var(--sage); transform: rotate(.45deg); }
.ecosystem-scene-3 { margin-top: 2.7rem; border-color: var(--blue); transform: rotate(-.25deg); }
.ecosystem-scene-number {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: .14rem solid var(--terracotta-deep);
  border-radius: 50%;
  background: #f8dcb8;
  color: var(--terracotta-deep);
  font-family: var(--font-display);
  font-weight: 950;
}
.ecosystem-scene h3 { margin: .1rem 0 .5rem; color: var(--blue-deep); font-family: var(--font-serif); font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.15; }
.ecosystem-scene p { margin: 0; color: var(--ink-soft); line-height: 1.55; }

.ecosystem-tools {
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding: clamp(4rem, 7vw, 6.5rem) max(calc((100vw - var(--shell)) / 2), 1.25rem);
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,.018) 4px 5px),
    var(--blue-deep);
  color: var(--white);
}
.ecosystem-tools::before { position: absolute; inset: 1.8rem 4% auto; content: ""; border-top: .15rem dashed rgba(255,255,255,.3); }
.ecosystem-tools > h3 {
  max-width: 19ch;
  margin: 0 auto clamp(2rem, 5vw, 4rem);
  color: var(--white);
  font-size: clamp(2.5rem, 5.2vw, 5.2rem);
  line-height: .94;
  text-align: center;
}
.ecosystem-tool-spread { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem minmax(0, 1fr); align-items: stretch; }
.ecosystem-tool {
  min-height: 26rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  color: var(--ink);
  box-shadow: .75rem .85rem 0 rgba(4, 25, 36, .48);
}
.ecosystem-tool-book {
  border: .16rem solid #b88f54;
  border-radius: .35rem 1.3rem 1.1rem .4rem;
  background:
    linear-gradient(90deg, rgba(138,99,55,.08), transparent 8%),
    repeating-linear-gradient(0deg, transparent 0 2rem, rgba(34,88,120,.07) 2rem 2.05rem),
    var(--paper-light);
  transform: rotate(-.55deg);
}
.ecosystem-tool-site {
  border: .16rem solid #7090a2;
  border-radius: 1.3rem .4rem .55rem 1.15rem;
  background:
    linear-gradient(#dce7e8 0 2.2rem, transparent 2.2rem),
    var(--paper-light);
  transform: rotate(.45deg);
}
.ecosystem-tool-site::before { display: block; width: 4.2rem; height: .5rem; margin: -1.15rem 0 1.6rem; content: ""; background: radial-gradient(circle, var(--terracotta) 0 .22rem, transparent .24rem) 0 0 / 1.4rem .5rem repeat-x; }
.ecosystem-tool > p { margin: 0; color: var(--terracotta-deep); font-size: .875rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.ecosystem-tool h4 { max-width: 18ch; margin: .4rem 0 1.3rem; color: var(--blue-deep); font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: .98; }
.ecosystem-tool ul { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.ecosystem-tool li { position: relative; padding: .72rem .7rem .72rem 2.2rem; border-bottom: 1px solid var(--line); font-weight: 700; }
.ecosystem-tool li::before { position: absolute; left: .5rem; top: .85rem; width: .85rem; height: .85rem; content: ""; border: .13rem solid var(--sage); border-radius: 50% 30% 50% 35%; }
.ecosystem-bridge { position: relative; z-index: 2; display: grid; place-items: center; }
.ecosystem-bridge::before,
.ecosystem-bridge::after { position: absolute; content: ""; width: 1.45rem; height: 1.45rem; border: .16rem solid #f3c56e; border-radius: 50%; background: var(--blue-deep); }
.ecosystem-bridge::before { left: -.78rem; }
.ecosystem-bridge::after { right: -.78rem; }
.ecosystem-bridge span { width: 135%; height: 2.2rem; border: .14rem solid #f3c56e; border-radius: 50%; transform: rotate(-4deg); }
.ecosystem-bridge-statement {
  max-width: 47rem;
  margin: 3rem auto 0;
  padding: 1rem 1.5rem;
  border-top: .18rem solid var(--gold);
  border-bottom: 1px solid rgba(255,255,255,.3);
  color: #fff2d7;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  font-weight: 750;
  text-align: center;
}

.ecosystem-loop { padding-block: clamp(5rem, 9vw, 8rem); }
.ecosystem-loop-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.3rem; align-items: start; margin-bottom: 2rem; }
.ecosystem-loop-kicker { margin: .4rem 0 0; color: var(--terracotta-deep); font-family: var(--font-display); font-size: .875rem; font-weight: 950; letter-spacing: .08em; writing-mode: vertical-rl; }
.ecosystem-loop h3 { max-width: 17ch; margin: 0; color: var(--blue-deep); font-size: clamp(2.7rem, 5.7vw, 5.8rem); line-height: .92; }
.ecosystem-loop-layout { display: grid; grid-template-columns: minmax(17rem, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.ecosystem-loop-art { position: relative; margin: 0; padding: .65rem; border: .16rem solid var(--sage); border-radius: 50% 1.4rem 1.1rem 1.5rem; background: var(--paper-light); box-shadow: .85rem .95rem 0 rgba(101,122,61,.38); transform: rotate(-.6deg); }
.ecosystem-loop-art img { width: 100%; height: auto; border-radius: 50% 1rem .75rem 1.1rem; }
.ecosystem-loop-steps { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.ecosystem-loop-step { display: grid; grid-template-columns: auto 1fr; gap: .9rem; padding: 1rem 1.1rem; border-left: .2rem solid var(--step-accent, var(--terracotta)); background: rgba(255,250,240,.74); box-shadow: .35rem .4rem 0 rgba(87,60,34,.1); }
.ecosystem-loop-step-1 { --step-accent: var(--terracotta); margin-right: 5rem; transform: rotate(-.35deg); }
.ecosystem-loop-step-2 { --step-accent: var(--gold); margin-left: 2.2rem; margin-right: 2.8rem; transform: rotate(.25deg); }
.ecosystem-loop-step-3 { --step-accent: var(--sage); margin-left: 4rem; margin-right: 1rem; transform: rotate(-.2deg); }
.ecosystem-loop-step-4 { --step-accent: var(--blue); margin-left: 1rem; margin-right: 4rem; transform: rotate(.3deg); }
.ecosystem-loop-number { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: .13rem solid var(--step-accent); border-radius: 50%; color: var(--blue-deep); font-family: var(--font-display); font-weight: 950; }
.ecosystem-loop-step h4 { margin: .05rem 0 .25rem; color: var(--blue-deep); font-family: var(--font-serif); font-size: 1.4rem; }
.ecosystem-loop-step p { margin: 0 0 .35rem; line-height: 1.48; }
.ecosystem-loop-step .text-link { min-height: 2.75rem; display: inline-flex; align-items: center; }
.ecosystem-loop-note { max-width: 42rem; margin: 2.2rem auto 0; padding: .8rem 1.1rem; border: .13rem dashed var(--terracotta-deep); color: var(--terracotta-deep); font-family: var(--font-serif); font-size: 1.12rem; font-style: italic; font-weight: 750; text-align: center; transform: rotate(-.25deg); }

.ecosystem-compass {
  display: grid;
  grid-template-columns: minmax(14rem, .35fr) minmax(0, 1fr);
  gap: 1.4rem 2rem;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: .17rem solid #7b2905;
  border-radius: 1.5rem .45rem 1.7rem .65rem;
  background: var(--terracotta-deep);
  color: var(--white);
  box-shadow: .85rem .95rem 0 #6a3f22;
}
.ecosystem-compass .eyebrow { color: #ffd590; }
.ecosystem-compass h3 { max-width: 11ch; margin: .25rem 0 0; color: var(--white); font-size: clamp(2.4rem, 4.6vw, 4.5rem); line-height: .94; }
.ecosystem-compass ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.ecosystem-destination a { min-height: 6.5rem; display: flex; flex-direction: column; justify-content: center; padding: .9rem 1rem; border: .13rem solid #f1c476; border-radius: .7rem .18rem .85rem .3rem; background: var(--paper-light); color: var(--blue-deep); text-decoration: none; box-shadow: .28rem .34rem 0 #6c2504; }
.ecosystem-destination:nth-child(1) a { transform: rotate(-.5deg); }
.ecosystem-destination:nth-child(2) a { transform: rotate(.35deg); }
.ecosystem-destination:nth-child(3) a { transform: rotate(.45deg); }
.ecosystem-destination:nth-child(4) a { transform: rotate(-.35deg); }
.ecosystem-destination a:hover,
.ecosystem-destination a:focus-visible { background: #f4e2bf; transform: translateY(-.2rem) rotate(0); }
.ecosystem-destination span { color: var(--terracotta-deep); font-size: .875rem; font-weight: 850; }
.ecosystem-destination strong { margin-top: .25rem; font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.25; }

.noscript-ecosystem { border-top-color: var(--terracotta); }
.noscript-ecosystem > ol { display: grid; gap: .7rem; }
.noscript-tool-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block: 1.2rem; }
.noscript-tool-pair article { padding: 1rem; border: .12rem solid var(--line); background: var(--paper-light); }

@media (max-width: 68rem) {
  .ecosystem-opening { grid-template-columns: 1fr; }
  .ecosystem-opening-copy h2 { max-width: 14ch; }
  .ecosystem-story-art { width: min(58rem, 94%); margin-inline: auto; }
  .ecosystem-scenes { grid-template-columns: 1fr; }
  .ecosystem-scenes::before { top: 2%; bottom: 2%; left: 1.6rem; right: auto; border-top: 0; border-left: .18rem dashed var(--terracotta); }
  .ecosystem-scene:nth-child(n) { margin: 0 0 0 2rem; transform: none; }
  .ecosystem-tool-spread { grid-template-columns: 1fr; gap: 1.3rem; }
  .ecosystem-bridge { height: 4rem; }
  .ecosystem-bridge::before { top: -.45rem; left: 50%; transform: translateX(-50%); }
  .ecosystem-bridge::after { right: auto; bottom: -.45rem; left: 50%; transform: translateX(-50%); }
  .ecosystem-bridge span { width: 2.2rem; height: 135%; transform: rotate(-4deg); }
  .ecosystem-tool { min-height: 0; transform: none; }
  .ecosystem-loop-layout { grid-template-columns: 1fr; }
  .ecosystem-loop-art { width: min(42rem, 90%); margin-inline: auto; }
  .ecosystem-compass { grid-template-columns: 1fr; }
  .ecosystem-compass h3 { max-width: none; }
}
@media (max-width: 44rem) {
  .ecosystem-section { padding-block: 4.5rem; }
  .ecosystem-opening-copy h2 { font-size: clamp(3rem, 14vw, 5rem); }
  .ecosystem-story-art { width: 100%; padding: .4rem; box-shadow: .55rem .65rem 0 rgba(101,122,61,.5); transform: none; }
  .ecosystem-scene { grid-template-columns: 1fr; }
  .ecosystem-scenes::before { display: none; }
  .ecosystem-scene:nth-child(n) { margin-left: 0; }
  .ecosystem-tools { padding-inline: 1rem; }
  .ecosystem-tools > h3 { text-align: left; }
  .ecosystem-tool { padding: 1.25rem 1rem; }
  .ecosystem-loop-heading { grid-template-columns: 1fr; }
  .ecosystem-loop-kicker { writing-mode: initial; }
  .ecosystem-loop-art { width: 100%; transform: none; }
  .ecosystem-loop-step:nth-child(n) { margin-inline: 0; transform: none; }
  .ecosystem-loop-step { grid-template-columns: 1fr; }
  .ecosystem-compass { padding: 1.2rem 1rem; box-shadow: .5rem .6rem 0 #6a3f22; }
  .ecosystem-compass ul,
  .noscript-tool-pair { grid-template-columns: 1fr; }
  .ecosystem-destination a { min-height: 5.5rem; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ecosystem-story-art,
  .ecosystem-scene,
  .ecosystem-tool,
  .ecosystem-loop-art,
  .ecosystem-loop-step,
  .ecosystem-loop-note,
  .ecosystem-destination a { transform: none !important; transition: none !important; }
}

@media (forced-colors: active) {
  .ecosystem-section,
  .ecosystem-tools,
  .ecosystem-story-art,
  .ecosystem-scene,
  .ecosystem-tool,
  .ecosystem-loop-art,
  .ecosystem-loop-step,
  .ecosystem-compass,
  .ecosystem-destination a { background: Canvas; color: CanvasText; forced-color-adjust: auto; }
  .ecosystem-story-art,
  .ecosystem-scene,
  .ecosystem-tool,
  .ecosystem-loop-art,
  .ecosystem-loop-step,
  .ecosystem-compass,
  .ecosystem-destination a { border: 2px solid CanvasText; }
}

/* Technology Together: every setting leaves a visible field note */
.together-impact {
  display: grid;
  grid-template-columns: minmax(15rem, .34fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  margin: 1.2rem 0 3.25rem;
  padding: clamp(1.25rem, 3vw, 2.2rem);
  border: .14rem solid var(--sage);
  border-radius: .55rem 2rem .7rem 1.65rem;
  background: linear-gradient(100deg, rgba(223, 227, 196, .72), rgba(255, 250, 240, .9));
  box-shadow: .65rem .75rem 0 rgba(101, 122, 61, .23);
}
.together-impact header { align-self: center; }
.together-impact header .eyebrow { margin-bottom: .45rem; color: var(--terracotta-deep); }
.together-impact h3 { max-width: 15ch; margin: 0 0 .55rem; color: var(--blue-deep); font-family: var(--font-serif); font-size: clamp(1.65rem, 3vw, 2.55rem); line-height: 1.02; }
.together-impact header > p:not(.eyebrow) { margin: 0 0 .8rem; color: var(--ink-soft); line-height: 1.48; }
.together-impact header > strong { display: block; padding-top: .7rem; border-top: 1px dashed var(--terracotta); color: var(--blue-deep); font-size: .8rem; line-height: 1.45; }
.together-impact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: 0; }
.together-impact-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .75rem; align-items: start; padding: .8rem .9rem; border: 1px solid rgba(34, 88, 120, .22); border-radius: .35rem 1.05rem .42rem .9rem; background: rgba(255, 253, 247, .86); }
.together-impact-row:nth-child(even) { border-radius: 1rem .35rem .85rem .45rem; }
.together-impact-row:last-child { grid-column: 1 / -1; }
.together-impact-row dt { color: var(--terracotta-deep); font-size: .68rem; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }
.together-impact-row dd { margin: 0; }
.together-impact-row dd strong,
.together-impact-row dd span { display: block; }
.together-impact-row dd strong { margin-bottom: .2rem; color: var(--blue-deep); font-family: var(--font-serif); font-size: 1rem; }
.together-impact-row dd span { color: var(--ink-soft); font-size: .76rem; line-height: 1.42; }

.together-path-node { min-height: 6.4rem; grid-template-rows: auto 1fr auto; }
.together-path-title { max-width: 10ch; font-size: .68rem; font-weight: 850; line-height: 1.15; text-align: center; }
.together-path-status { min-height: 1.1rem; padding: .08rem .35rem; color: var(--sage); font-size: .57rem; font-weight: 950; letter-spacing: .04em; line-height: 1.1; text-align: center; text-transform: uppercase; }
.together-path-node[data-recommended="true"] { border-color: var(--terracotta-deep); box-shadow: 0 0 0 .2rem #f4ca86, .28rem .34rem 0 rgba(23, 59, 80, .2); }
.together-path-node[data-recommended="true"] .together-path-status { color: var(--terracotta-deep); }
.together-path-node[data-compatible="true"]:not([data-recommended="true"]) { border-style: dashed; border-color: var(--sage); }
.together-path-node.is-muted { opacity: .56; filter: saturate(.65); }
.together-path-node.is-muted:hover,
.together-path-node.is-muted:focus-visible,
.together-path-node[aria-selected="true"] { opacity: 1; filter: none; }
.together-path-node[aria-selected="true"] .together-path-status,
.together-path-node[aria-selected="true"] .together-path-number { color: var(--white); }

.together-plan {
  position: relative;
  margin: 0 0 2.4rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: .13rem solid rgba(34, 88, 120, .42);
  border-radius: .45rem 1.55rem .6rem 1.2rem;
  background: rgba(247, 238, 219, .82);
}
.together-plan::before { position: absolute; top: -.65rem; left: 8%; width: 7rem; height: 1.25rem; content: ""; background: rgba(220, 198, 143, .75); transform: rotate(-1deg); }
.together-plan > header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem 1rem; align-items: center; margin-bottom: 1.2rem; }
.together-plan > header h4 { color: var(--blue-deep); font-size: clamp(1.55rem, 3vw, 2.3rem); }
.together-plan > header > p:last-child { grid-column: 2; margin: 0; color: var(--ink-soft); font-size: .82rem; }
.together-route-label { grid-row: 1 / span 2; align-self: stretch; display: grid; min-width: 6.8rem; margin: 0; padding: .55rem .75rem; place-items: center; border: .12rem solid var(--terracotta-deep); border-radius: 1.1rem .3rem .9rem .4rem; background: var(--terracotta-deep); color: var(--white); font-size: .68rem; font-weight: 950; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.together-plan-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: .85rem; }
.together-plan-grid article { min-width: 0; padding: 1rem 1.05rem; border: 1px solid rgba(101, 122, 61, .34); background: rgba(255, 253, 247, .82); }
.together-plan-place { border-radius: .4rem 1.2rem .5rem 1rem; }
.together-plan-agenda { border-radius: 1.25rem .38rem 1rem .48rem; }
.together-plan-tools { border-radius: 1.05rem .4rem .85rem .5rem; }
.together-plan-theme { border-radius: .38rem 1.15rem .5rem .9rem; }
.together-plan h5 { margin: 0 0 .55rem; color: var(--terracotta-deep); font-family: var(--font-serif); font-size: 1.02rem; }
.together-plan ul,
.together-plan ol { display: grid; gap: .35rem; margin: 0; padding-left: 1.15rem; }
.together-plan li { color: var(--ink-soft); font-size: .75rem; line-height: 1.42; }
.together-plan-agenda ol { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; list-style: none; }
.together-plan-agenda li { padding: .3rem .45rem; border-left: .16rem solid var(--gold); background: rgba(244, 202, 134, .13); }
.together-plan-agenda > p { margin: .7rem 0 0; padding: .65rem .75rem; border-left: .2rem solid var(--terracotta); color: var(--blue-deep); font-family: var(--font-serif); font-size: .82rem; font-style: italic; font-weight: 700; }
.together-plan-theme strong { display: block; margin-top: .65rem; padding-top: .55rem; border-top: 1px dashed var(--sage); color: var(--blue-deep); font-size: .75rem; line-height: 1.4; }
.together-plan-theme p { margin: 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.45; }
.together-plan-why { margin-top: .85rem; padding: .85rem 1rem; border-left: .22rem solid var(--terracotta); background: rgba(217, 85, 11, .07); }
.together-plan-why h5 { margin-bottom: .25rem; }
.together-plan-why p { margin: 0; color: var(--blue-deep); font-size: .8rem; line-height: 1.45; }
.together-plan-why ul:empty { display: none; }
.together-plan-why ul { margin-top: .45rem; }

.together-step-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .65rem; align-items: start; }
.together-step-time { display: inline-grid; min-width: 3.6rem; min-height: 1.75rem; padding: .22rem .45rem; place-items: center; border: 1px solid var(--terracotta); border-radius: .75rem .25rem .65rem .3rem; color: var(--terracotta-deep); font-size: .66rem; font-weight: 950; }
.together-step-text { align-self: center; }
.together-step-method { grid-column: 2; color: var(--ink-soft); font-size: .69rem; font-style: italic; line-height: 1.4; }

@media (max-width: 68rem) {
  .together-impact { grid-template-columns: 1fr; }
  .together-impact h3 { max-width: none; }
}

@media (max-width: 44rem) {
  .together-impact { margin-inline: 0; padding: 1rem; border-radius: .45rem 1.25rem .55rem 1rem; box-shadow: .4rem .5rem 0 rgba(101, 122, 61, .2); }
  .together-impact-list,
  .together-plan-grid { grid-template-columns: 1fr; }
  .together-impact-row:last-child { grid-column: auto; }
  .together-impact-row { grid-template-columns: 5.6rem minmax(0, 1fr); padding-inline: .7rem; }
  .together-path-node { flex-basis: 8.1rem; }
  .together-plan { padding: 1.1rem .8rem; }
  .together-plan > header { grid-template-columns: 1fr; }
  .together-route-label { grid-row: auto; width: fit-content; min-width: 0; }
  .together-plan > header > p:last-child { grid-column: auto; }
  .together-plan-agenda ol { grid-template-columns: 1fr; }
  .together-step { grid-template-columns: auto 1.7rem minmax(0, 1fr); }
  .together-step-copy { grid-template-columns: 1fr; }
  .together-step-method { grid-column: 1; }
  .together-step-time { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .together-impact,
  .together-plan,
  .together-path-node { transition: none !important; transform: none !important; }
}

@media (forced-colors: active) {
  .together-impact,
  .together-impact-row,
  .together-plan,
  .together-plan-grid article,
  .together-plan-why,
  .together-step-time { border: 2px solid CanvasText; background: Canvas; color: CanvasText; forced-color-adjust: auto; }
  .together-path-node.is-muted { opacity: 1; filter: none; }
  .together-path-node[data-recommended="true"] { outline: 3px double Highlight; outline-offset: 2px; }
  .together-path-node[data-compatible="true"]:not([data-recommended="true"]) { border-style: dashed; }
}

@media (min-width: 72.01rem) {
  .header-inner { gap: .65rem; }
  .site-nav { gap: clamp(.45rem, .75vw, .85rem); }
  .site-nav a { font-size: .67rem; letter-spacing: .01em; }
  .brand { gap: .5rem; }
  .brand-name { font-size: .82rem; }
}