@font-face {
  font-family: Fraunces;
  src: url("./fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: Fraunces;
  src: url("./fraunces-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("./dm-sans.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f8f3e7;
  --paper-light: #fffbf2;
  --ink: #202a23;
  --muted: #515b50;
  --green: #144637;
  --green-deep: #102f25;
  --rule: #d6ccb9;
  --amber: #f5cf82;
  --content: 72rem;
  --gutter: clamp(1.125rem, 4vw, 3rem);
  --display: Fraunces, Georgia, serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.58 "DM Sans", sans-serif;
  overflow-wrap: anywhere;
}

img, svg { display: block; max-inline-size: 100%; }
a { color: inherit; text-underline-offset: 0.22em; }
p, h1, h2, h3, figure, blockquote { margin: 0; }
button { font: inherit; }

h1, h2 {
  font-family: var(--display);
  font-weight: 580;
  line-height: 1.02;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

h2 { font-size: clamp(2.15rem, 4.4vw, 4.05rem); }
h3 { line-height: 1.28; }

:focus-visible { outline: 3px solid #ac5f17; outline-offset: 5px; }
[id] { scroll-margin-top: 1.5rem; }
[hidden] { display: none !important; }

.shell {
  inline-size: min(var(--content), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  z-index: 2;
  padding: 0.75rem 1rem;
  background: var(--paper-light);
  inset: 0 auto auto var(--gutter);
  max-inline-size: calc(100% - 2 * var(--gutter));
  transform: translateY(-150%);
}

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

.preview-strip {
  padding: 0.35rem var(--gutter);
  text-align: center;
  background: #eedebc;
  color: #46371e;
  font-size: 0.8125rem;
  font-weight: 650;
}

.preview-strip span { margin-inline: 0.25em; }
.masthead { border-bottom: 1px solid var(--rule); }

.masthead-inner {
  display: flex;
  min-block-size: 5.15rem;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--green-deep);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.16;
  text-decoration: none;
  white-space: nowrap;
}

.brand small {
  display: block;
  margin-top: 0.18em;
  font-size: 0.775rem;
  color: var(--muted);
  font-weight: 550;
}

.masthead nav[aria-label="Navigasi utama"] { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 3vw, 2.5rem); }
.masthead nav[aria-label="Navigasi utama"] a {
  display: flex;
  align-items: center;
  min-block-size: 2.75rem;
  font-size: 0.9375rem;
  font-weight: 650;
  text-decoration: none;
}
.masthead nav a:hover { text-decoration: underline; }

.language-row {
  display: flex;
  justify-content: end;
  border-top: 1px solid var(--rule);
}
.language-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.85rem;
}
.language-links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  color: var(--green);
  font-size: 0.95rem;
  text-decoration: none;
}
.language-links a[aria-current="page"] { font-weight: 800; text-decoration: underline; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  min-block-size: 3.25rem;
  max-inline-size: 100%;
  padding: 0.6em 1em;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 720;
  text-align: center;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
}

.button-small { min-block-size: 2.75rem; font-size: 0.9375rem; }
.button-primary { background: var(--green); color: var(--paper-light); }
.button-primary:hover { background: var(--green-deep); }
.button-outline { background: transparent; border-color: #617566; color: var(--green-deep); }
.button-outline:hover { background: #e7e9da; }
.button-gold { background: var(--amber); color: #282319; }
.button-gold:hover { background: #ffdd95; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(2.1rem, 6vw, 5rem);
  padding-block: clamp(2.3rem, 5.25vw, 4.9rem);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  color: var(--green);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.095em;
  line-height: 1.35;
  text-transform: uppercase;
}

.hero .eyebrow span {
  inline-size: 0.68rem;
  block-size: 0.68rem;
  background: #b16b27;
  transform: rotate(45deg) scale(0.83);
}

.hero h1 {
  margin-block: 0.2em 0.25em;
  font-size: clamp(3.25rem, 6.35vw, 5.4rem);
  text-wrap: initial;
}

.hero h1 em { color: var(--green); font-weight: inherit; }
.hero-description {
  max-inline-size: 32rem;
  color: var(--muted);
  font-size: clamp(1.13rem, 1.9vw, 1.375rem);
  line-height: 1.45;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-block: 1.65rem 0.55rem;
}

.listen-link {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  min-block-size: 2.75rem;
  color: var(--green);
  font-size: 1rem;
  font-weight: 700;
}

.play-glyph { font-size: 0.78em; }

.cover-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(0.95rem, 2vw, 1.65rem);
  min-block-size: 27rem;
  overflow: hidden;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem) 0.9rem;
  border: 1px solid #d5c6a7;
  border-radius: 0.7rem;
  background: radial-gradient(ellipse at 35% 23%, #f6e7c8 0, #e2d1ab 62%, #c9b88f 100%);
}

.cover-stage::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: repeating-linear-gradient(116deg, transparent 0 28px, #534a2f16 28px 29px);
  content: "";
}

.cover-frame {
  inline-size: min(74%, 16.6rem);
  transform: rotate(-6deg);
  box-shadow: 6px 8px 0 #394235, 17px 25px 30px #3f352960;
  border-radius: 0.15rem 0.4rem 0.4rem 0.15rem;
}

.cover-frame img { inline-size: 100%; block-size: auto; border-radius: inherit; }

.cover-stage figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 1rem;
  inline-size: 100%;
  border-top: 1px solid #6553396b;
  padding-top: 0.7rem;
  color: #3c321f;
  font-size: 0.8125rem;
  font-weight: 730;
}

.section-label { display: flex; align-items: center; gap: 0.7rem; margin-block-end: 0.85rem; }
.folio {
  display: inline-grid;
  place-items: center;
  inline-size: 2.15rem;
  block-size: 2.15rem;
  border: 1px solid #9ba293;
  border-radius: 50%;
  color: var(--green-deep);
  font-size: 0.8125rem;
  font-weight: 720;
}

.lesson {
  padding-block: clamp(2.3rem, 5vw, 4.4rem);
  border-top: 1px solid var(--rule);
}

.lesson-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 1.25rem 2.5rem;
  align-items: end;
}

.lesson-intro p { max-inline-size: 28rem; color: var(--muted); }
.example-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(0.65rem, 2vw, 1.25rem);
  align-items: stretch;
  margin-block: 2rem 1.15rem;
}

.example-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid #d6c9b1;
  border-radius: 0.6rem;
  background: #f0e7d4;
}

.example-after { border-color: #bfcbb5; background: #e9eedf; }
.example-card figcaption { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; font-weight: 750; }
.example-dot { inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; background: #976527; }
.example-after .example-dot { background: #346144; }
.example-card blockquote { line-height: 1.45; }
.example-arrow { align-self: center; color: var(--green); font-size: 1.75rem; line-height: 1; }

summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }

.reader {
  border: 1px solid var(--rule);
  border-radius: 0.6rem;
  background: var(--paper-light);
}

.reader > summary, .transcript > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  min-block-size: 3.3rem;
  padding: 0.65rem clamp(1rem, 2.5vw, 1.5rem);
  font-weight: 750;
  color: var(--green-deep);
}

.reader > summary span::after, .transcript > summary span::after { content: "+"; font-size: 1.35rem; }
.reader[open] > summary span::after, .transcript[open] > summary span::after { content: "−"; }

.chapter {
  max-inline-size: 69ch;
  padding: 0.9rem clamp(1rem, 2.5vw, 1.5rem) 1.6rem;
  border-top: 1px solid var(--rule);
}

.chapter h3 { margin-block: 1.15em 0.4em; font-size: 1.3rem; }
.chapter h4 { margin-block: 1em 0.35em; font-size: 1.08rem; }
.chapter p, .chapter ul { margin-block: 0.65em; }
.chapter ul { padding-inline-start: 1.25rem; }
.chapter a { color: var(--green); }
.chapter blockquote {
  margin-block: 0.7rem;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid #52745a;
  background: #edf0e4;
}
.chapter blockquote p { margin: 0; }
.copy-status { color: var(--green-deep); font-size: 0.9rem; }

.audio-section { background: var(--green-deep); color: var(--paper-light); }
.audio-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: 1.75rem clamp(2rem, 7vw, 6.5rem);
  padding-block: clamp(2.3rem, 5vw, 4.25rem);
}

.audio-grid .eyebrow, .audio-grid .folio { color: var(--amber); }
.audio-grid .folio { border-color: #b4ad83; }
.audio-grid h2 + p { max-inline-size: 28rem; margin-block-start: 1rem; color: #e4e5d5; }

.audio-card {
  background: #f9f0d9;
  border: 1px solid #e4d4ac;
  border-radius: 0.75rem;
  color: var(--ink);
  padding: clamp(1rem, 3vw, 1.65rem);
}

.audio-heading { display: flex; align-items: center; gap: 0.9rem; margin-block-end: 1rem; }
.audio-heading h3 { font-size: 1.09rem; }
.audio-heading p { color: var(--muted); font-size: 0.9rem; }
.audio-mark { flex: none; color: var(--green); }
audio { display: block; inline-size: 100%; block-size: 3.4rem; }
.transcript { margin-block-start: 0.65rem; border-top: 1px solid #d6c7a7; }
.transcript > summary { min-block-size: 2.75rem; padding: 0.55rem 0; font-size: 1rem; }
.transcript p { margin-block: 0.55rem 0.85rem; }

.curriculum { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.curriculum-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.6rem 0 0.8rem;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--rule);
}

.curriculum-list li { padding: 1.15rem clamp(1rem, 3vw, 1.75rem) 1.4rem; }
.curriculum-list li:first-child { padding-inline-start: 0; }
.curriculum-list li + li { border-inline-start: 1px solid var(--rule); }
.lesson-number { color: #725625; font-weight: 750; font-size: 0.88rem; }
.curriculum-list h3 { margin-block: 0.27rem 0.45rem; font-family: var(--display); font-weight: 590; font-size: 1.65rem; }
.curriculum-list p { color: var(--muted); line-height: 1.45; }
.device-tag { display: inline-block; margin-block-start: 0.75rem; color: var(--green); font-size: 0.9rem; font-weight: 750; }
.requirements { color: var(--muted); font-size: 0.95rem; }

.offer { margin-block-end: clamp(2.5rem, 5vw, 4.5rem); }
.offer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
  gap: 1.5rem clamp(2rem, 6vw, 5rem);
  padding: clamp(1.4rem, 5vw, 3.3rem);
  border-radius: 0.7rem;
  background: var(--green);
  color: var(--paper-light);
}

.offer h2 { margin-block: 0.2em 0.3em; font-size: clamp(2.05rem, 4.2vw, 3.6rem); }
.offer .eyebrow, .price { color: var(--amber); }
.offer-inner p:not(.eyebrow, .price) { color: #eceddb; }
.purchase-policy { margin-block-start: 0.9rem; }
.purchase-policy p + p { margin-block-start: 0.5rem; }
.purchase-policy a { color: inherit; overflow-wrap: anywhere; text-decoration: underline; }
.purchase-policy a:focus-visible { outline-color: var(--amber); }
.offer-buy { border-inline-start: 1px solid #8caa8c; padding-inline-start: clamp(1rem, 2.75vw, 1.75rem); }
.price { font: 580 clamp(2.65rem, 6vw, 4rem)/1 var(--display); letter-spacing: -0.05em; }
.offer-formats { margin-block: 0.4rem 0.9rem; font-size: 0.9375rem; }
.buy-help { margin-block-start: 0.65rem; }
.buy-help a { color: inherit; text-decoration: underline; }
.buy-help a:focus-visible { outline-color: var(--amber); }
.checkout-preview p { margin-block-start: 0.85rem; font-size: 0.9375rem; }
.checkout-preview summary:focus-visible { outline-color: var(--amber); }
.checkout-preview[open] summary span { transform: rotate(180deg); }

.faq {
  padding-block: 1.25rem clamp(2.5rem, 5vw, 4.5rem);
}
.faq-list { margin-block-start: 1.5rem; border-block-start: 1px solid var(--rule); }
.faq-list article { padding-block: 1rem; border-block-end: 1px solid var(--rule); }
.faq-list h3 { font-size: 1.18rem; color: var(--green-deep); }
.faq-list p { max-inline-size: 65ch; margin-block-start: 0.35rem; color: var(--muted); }

.purchase-info, .notice-page { padding-block: 1.3rem 2.5rem; }
.purchase-info { border-block-start: 1px solid var(--rule); }
.purchase-info h2, .notice-page h2 { font-size: clamp(1.45rem, 3vw, 2.2rem); }
.purchase-info p, .purchase-info ol, .notice-page p { max-inline-size: 65ch; margin-block-start: 0.85rem; }
.purchase-info a, .notice-page a { color: var(--green-deep); overflow-wrap: anywhere; text-decoration: underline; }
.download-steps { padding-inline-start: 1.4em; }
.download-steps li + li { margin-block-start: 0.55rem; }
.notice-page h1 { margin-block-start: 1.2rem; font-size: clamp(2rem, 5vw, 3.5rem); }
.notice-page h2, .notice-page h3 { margin-block-start: 1.25rem; }
.notice-page section { margin-block-start: 2.5rem; border-block-start: 1px solid var(--rule); }

.locale-hero h1 { margin-block: 0.2em 0.3em; font-size: clamp(2.5rem, 6.3vw, 5.4rem); }
.locale-hero .actions { margin-block-end: 0; }
.locale-hero p { max-inline-size: 38rem; }
.locale-curriculum { padding-block-start: 1rem; }
:lang(ta) h1, :lang(ta) h2, :lang(zh) h1, :lang(zh) h2 {
  font-family: "DM Sans", "Nirmala UI", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  line-height: 1.3;
}
html:lang(ta) .locale-hero h1 { font-size: clamp(2.15rem, 6.3vw, 4rem); }

.site-footer { border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.9375rem; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.2rem 1rem; padding-block: 1rem; }
.footer-inner a { display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 2.75rem; color: var(--green-deep); }

@media (max-width: 59rem) {
  .hero { gap: clamp(1.1rem, 3vw, 2rem); }
  .cover-stage { min-block-size: auto; }
  .cover-frame { inline-size: min(79%, 15rem); }
  .lesson-intro { grid-template-columns: 1fr; }
  .wide-only { display: none; }
}

@media (max-width: 45rem) {
  .masthead-inner { min-block-size: 0; flex-wrap: wrap; gap: 0.35rem 0.7rem; padding-block: 0.75rem 0.25rem; }
  .masthead nav[aria-label="Navigasi utama"] { order: 1; justify-content: start; inline-size: 100%; gap: clamp(0.75rem, 5vw, 1.65rem); }
  .masthead nav[aria-label="Navigasi utama"] a { font-size: 0.9rem; }
  .language-row { justify-content: start; }
  .language-links { column-gap: 0.68rem; }
  .hero, .audio-grid, .offer-inner, .curriculum-list { grid-template-columns: minmax(0, 1fr); }
  .hero { gap: 1.65rem; }
  .hero h1 { font-size: clamp(2.75rem, 10.3vw, 4.8rem); }
  .cover-stage { padding-block-start: 1.65rem; }
  .cover-frame { inline-size: min(68%, 15rem); }
  .offer-buy { border-inline-start: 0; border-block-start: 1px solid #8caa8c; padding: 1.15rem 0 0; }
  .curriculum-list li { padding-inline: 0; }
  .curriculum-list li + li { border-inline-start: 0; border-block-start: 1px solid var(--rule); }
}

@media (max-width: 33rem) {
  .example-spread { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .example-arrow { justify-self: center; transform: rotate(90deg); }
}