@font-face {
  font-family: Google Sans Flex;
  src: url('/assets/GoogleSansFlex-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Google Sans Flex;
  src: url('/assets/GoogleSansFlex-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #faf8f4;
  --ink: #16120e;
  --muted: #62594f;
  --orange: #fa4e04;
  --rust: #ad360d;
  --line: #e1d8cd;
  --white: #fffdf9;
  font: 400 100%/1.6 "Google Sans Flex", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 600; line-height: 1.1; text-wrap: balance; }
p, li { overflow-wrap: break-word; }
a { color: var(--rust); }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--rust); outline-offset: 5px; }
img { max-width: 100%; display: block; }
.wrap { width: min(100% - 3rem, 70rem); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -5rem; z-index: 3; background: white; padding: .5rem 1rem; }
.skip:focus { top: 1rem; }

.top { border-bottom: 1px solid var(--line); }
.top-inner { display: flex; min-height: 4.8rem; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { font-weight: 600; color: var(--ink); text-decoration: none; font-size: 1.1rem; }
.brand::before { content: ""; display: inline-block; vertical-align: middle; width: .8rem; height: .21rem; background: var(--orange); margin-right: .65rem; }
.top-nav { display: flex; gap: 1rem; align-items: center; }
.top-nav a { color: var(--ink); text-underline-offset: .23em; font-size: .93rem; white-space: nowrap; }

.hero {
  display: grid;
  grid-template-columns: 1fr minmax(0, .44fr);
  align-items: center;
  gap: clamp(1rem, 6vw, 5.5rem);
  padding-block: clamp(2.3rem, 7.5vw, 6.2rem);
  border-bottom: 1px solid var(--line);
}
.eyebrow { font-size: .86rem; color: var(--rust); font-weight: 600; letter-spacing: .10em; text-transform: uppercase; }
.hero h1 { font-size: clamp(2.7rem, 6.6vw, 6.1rem); margin-block: .32em .21em; letter-spacing: -.056em; }
.hero h1 em { font-style: normal; color: var(--rust); }
.lead { color: var(--muted); font-size: clamp(1.08rem, 2.3vw, 1.3rem); max-width: 39rem; }
.paper-card { margin: 0; position: relative; background: white; padding: .7rem; border-radius: .6rem; transform: rotate(3deg); box-shadow: 0 12px 30px #3f281919; }
.paper-card img { border-radius: .35rem; width: 100%; height: auto; }
.paper-card::before { position: absolute; content: ""; width: 37%; height: 1.4rem; background: #e7d5b8d9; top: -.45rem; left: 30%; transform: rotate(-9deg); }

.catalog { padding-block: 2.4rem 4.2rem; }
.catalog h2, .panel h2, .lesson-section h2 { font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -.035em; margin-bottom: .65rem; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-top: 1.2rem; }
.lesson-card { background: var(--white); border: 1px solid var(--line); border-radius: .8rem; }
.lesson-card a { display: grid; min-height: 100%; grid-template-columns: 2.65rem minmax(0, 1fr) auto; align-items: start; gap: .8rem; padding: 1.15rem; color: var(--ink); text-decoration: none; }
.lesson-card a:hover { background: #f7eee6; border-radius: inherit; }
.lesson-card h3 { font-size: 1.16rem; margin-bottom: .35rem; }
.lesson-card p { color: var(--muted); font-size: .94rem; }
.number { color: var(--rust); font-weight: 600; font-variant-numeric: tabular-nums; }
.arrow { color: var(--rust); }

.breadcrumb { margin-top: 1.5rem; font-size: .92rem; text-underline-offset: .22em; }
.lesson-head { padding-block: 1.6rem 2rem; border-bottom: 1px solid var(--line); }
.lesson-head h1 { font-size: clamp(2.25rem, 5.3vw, 4.7rem); margin-block: .3em .24em; max-width: 19ch; letter-spacing: -.05em; }
.lesson-body { padding-block: 1.75rem 3rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, .53fr); gap: clamp(1.2rem, 4vw, 3.4rem); align-items: start; }
.reading { max-width: 45rem; }
.lesson-section + .lesson-section { margin-top: 2rem; }
.lesson-section p + ul, .lesson-section p + ol { margin-top: .7rem; }
ul, ol { padding-inline-start: 1.36rem; margin-block: .45rem 0; }
li + li { margin-top: .45rem; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: .85rem; padding: 1.2rem; }
.panel + .panel { margin-top: .85rem; }
.downloads { padding: 0; list-style: none; }
.downloads li { margin-top: .4rem; }
.downloads a { padding: .66rem .1rem; display: block; border-top: 1px solid var(--line); font-weight: 600; text-underline-offset: .18em; }
.downloads small { display: block; margin-top: .16rem; color: var(--muted); font-weight: 400; }
.file-type { color: var(--muted); font-size: .72rem; letter-spacing: .06em; font-weight: 600; margin-left: .32rem; }
.lesson-pagination { border-top: 1px solid var(--line); padding-block: 1rem 3.2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; }
.foot { background: #211d18; color: #f4eade; padding: 1.3rem 0; font-size: .95rem; }
.foot .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }
.foot a { color: #fff4e6; }
.foot img { width: 7rem; }
.empty { padding-block: 4rem; }
.empty h1 { margin-block: .4rem .7rem; }

@media (max-width: 48rem) {
  .wrap { width: min(100% - 2rem, 38rem); }
  .hero { gap: 1.75rem; grid-template-columns: 1fr minmax(0, .45fr); }
  .lesson-body { grid-template-columns: 1fr; }
}

@media (max-width: 35rem) {
  .catalog-grid, .hero { grid-template-columns: 1fr; }
  .paper-card { width: min(52%, 12rem); margin: 0 .9rem .25rem auto; }
  .top-inner { min-height: 4.3rem; }
  .top-nav { gap: .55rem; }
  .top-nav a { font-size: .82rem; }
  .brand { font-size: 1rem; white-space: nowrap; }
  .brand::before { margin-right: .38rem; }
}