:root {
  --teal: #00a7a8;
  --teal-dark: #00898a;
  --orange: #d67e41;
  --orange-bright: #f0921e;
  --wave: #ecbe9c;
  --ink: #2f3437;
  --muted: #6b7275;
  --bg: #ffffff;
  --soft: #fdf6f0;
  --wave-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10'%3E%3Cpath d='M0 5 Q6 0 12 5 T24 5' fill='none' stroke='%23ECBE9C' stroke-width='1.6'/%3E%3C/svg%3E");
  --wave-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='24'%3E%3Cpath d='M5 0 Q0 6 5 12 T5 24' fill='none' stroke='%23ECBE9C' stroke-width='1.6'/%3E%3C/svg%3E");
  --sans: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --serif: "EB Garamond", Garamond, Georgia, serif;
  --humanist: "Alegreya Sans", "Gill Sans", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
}

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

a { color: inherit; }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 4px;
  border-radius: 6px;
}

.page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 16px 64px;
}

.back {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  margin-bottom: 8px;
}
.back:hover { color: var(--teal); }

.brand {
  display: block;
  width: fit-content;
  margin: 0 auto;
  text-decoration: none;
  text-align: center;
}
.brand .crown { width: 92px; margin: 0 auto 10px; }
.brand .wordmark { width: 230px; margin: 0 auto; }
.brand-sub {
  margin: 12px 0 0;
  color: var(--orange);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
}

.label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
  text-align: center;
}

.section-head { text-align: center; margin-top: 20px; }
.section-head .circle { width: 104px; height: 104px; margin: 0 auto 10px; }
.section-head h1 { margin: 0; color: var(--teal); }

.wave {
  height: 10px;
  max-width: 460px;
  margin: 28px auto 36px;
  background: var(--wave-h) repeat-x center / 24px 10px;
}

.intro {
  max-width: 560px;
  margin: 0 auto 36px;
  text-align: center;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 19px;
}

.circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(60, 40, 90, 0.18);
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
}
.tile .circle { transition: transform 0.2s ease, box-shadow 0.2s ease; }
a.tile:hover .circle {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(60, 40, 90, 0.25);
}
a.tile:hover .label { color: var(--teal); }

/* Landing */

.frame {
  max-width: 620px;
  margin: 32px auto 0;
  padding: 44px 32px;
  background:
    var(--wave-h) repeat-x left top / 24px 10px,
    var(--wave-h) repeat-x left bottom / 24px 10px,
    var(--wave-v) repeat-y left top / 10px 24px,
    var(--wave-v) repeat-y right top / 10px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 600px) {
  .frame { grid-template-columns: 1fr 1fr; gap: 48px 24px; }
}

/* Gateway and audio */

.stack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 48px 72px;
}

.media { max-width: 300px; }
.media .note {
  margin: -4px 0 0;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}
.media audio { width: 260px; max-width: 100%; }
.soon {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  background: var(--soft);
  border: 1px dashed var(--wave);
  border-radius: 999px;
  padding: 4px 14px;
}

.label.teal { color: var(--teal); }

.audio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px 32px;
  max-width: 640px;
  margin: 48px auto 0;
}
@media (min-width: 560px) {
  .audio-grid { grid-template-columns: 1fr 1fr; }
}
.illustration { height: 170px; width: auto; }

/* Worksheets index */

.parts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 44px 32px;
}

.part-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
}
.part-card .art {
  aspect-ratio: 1.1 / 1;
  width: 100%;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
  transition: filter 0.2s ease;
}
.part-card:hover .art { filter: brightness(1.06) saturate(1.08); }
.banner {
  background: var(--part);
  color: #fff;
  outline: 1px dashed rgba(255, 255, 255, 0.75);
  outline-offset: -5px;
  padding: 14px 12px;
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-weight: 300;
  font-size: 19px;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}
.banner small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-top: 4px;
}
.part-card .label { color: var(--teal); margin-top: 12px; }
.part-card:hover .label { color: var(--teal-dark); }

/* Part page */

.cover {
  position: relative;
  max-width: 720px;
  margin: 24px auto 0;
}
.cover .art {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: 4px;
}
.cover .banner {
  position: relative;
  width: min(86%, 560px);
  margin: -64px auto 0;
  padding: 20px 16px;
  font-size: clamp(20px, 4.4vw, 32px);
}
.cover .banner .part-no {
  display: block;
  font-weight: 600;
  font-size: clamp(14px, 2.4vw, 18px);
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 4px;
}

.download-all {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 12px;
  text-align: center;
  width: fit-content;
  margin: 32px auto 0;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--orange-bright);
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(240, 146, 30, 0.35);
  transition: transform 0.2s ease, background 0.2s ease;
}
.download-all:hover { background: #e07f0c; transform: translateY(-2px); }
.download-all .size { font-weight: 300; opacity: 0.9; }

.fill-note {
  max-width: 560px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 15px;
  color: var(--muted);
}

.toc-title {
  display: block;
  width: fit-content;
  margin: 44px auto 28px;
  padding: 8px 30px;
  border-radius: 12px;
  background: var(--orange-bright);
  color: #fff;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.toc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 20px;
}
.toc a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s ease;
}
.toc a:hover { background: var(--soft); }
.toc img { width: 34px; flex: none; margin-top: 2px; }
.toc .num {
  display: block;
  font-family: var(--humanist);
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  color: var(--teal);
  line-height: 1.2;
}
.toc .name {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.25;
}
.toc .ch {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.toc a:hover .name { color: var(--teal-dark); }

.part-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 56px;
}
.part-nav a {
  padding: 6px 14px;
  border: 1px solid var(--wave);
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--muted);
}
.part-nav a:hover { color: var(--teal); border-color: var(--teal); }
.part-nav a[aria-current] { background: var(--teal); border-color: var(--teal); color: #fff; }

footer {
  margin-top: 64px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
footer .wave { margin: 0 auto 20px; max-width: 240px; }