/* The magazine to leaf through: a made-up autumn magazine on a pale desk; the page turns with a real curl. */
:root {
  --desk: #ffffff;          /* the page around the magazine */
  --paper: #f6f0e4;         /* the magazine's paper */
  --ink: #1f1c18;           /* titles and text */
  --muted: #7d7365;         /* small print */
  --terra: #c4553a;         /* terracotta: apples, rules, the cover lines */
  --olive: #74813f;         /* hills and fields */
  --deep: #34502f;          /* the trees */
  --ochre: #e3a63c;         /* the sun */
  --sky: #e9dcc4;           /* the sky of the pictures */
  --river: #4f7f98;         /* the river */
  --night: #1d2433;         /* the bakery at night */
  --brick: #8c3f2c;         /* the oven */
  --glow: #f2b14a;          /* the fire */
  --back: #2f4a35;          /* the back cover */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--desk);
  color: var(--ink);
  font-family: 'Fraunces Variable', Georgia, serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 24px 16px;
  /* the page waiting to turn sits outside the spread, clipped to nothing: without this the page could be pushed sideways
     (a focus, a scroll from the script). clip cuts without making a scroll box; hidden is for older Safari */
  overflow: hidden;
  overflow: clip;
}

.mag {
  display: grid;
  justify-items: center;
  gap: 14px;
  opacity: 0;
}

/* ---------------------------------------------------------------- the book */
/* the spread: two pages side by side, the spine in the middle; the script sets --W and --H */
.book {
  position: relative;
  width: calc(var(--W, 150px) * 2);
  height: var(--H, 200px);
  outline: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.book.is-grab {
  cursor: grab;
}

.book.is-grabbing {
  cursor: grabbing;
}

.book.is-page {
  cursor: pointer;
}

/* the edges of the pages under the top one, and the shadow on the desk */
.base {
  position: absolute;
  top: 0;
  width: var(--W, 150px);
  height: var(--H, 200px);
  background: var(--paper);
  opacity: 0;
}

.base--left {
  left: 0;
  border-radius: 3px 0 0 3px;
}

.base--right {
  left: var(--W, 150px);
  border-radius: 0 3px 3px 0;
}

/* each page sits in a layer as big as the spread: the script clips and moves the page inside it */
.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.layer--under {
  filter: drop-shadow(0 3px 7px rgba(30, 22, 12, 0.22));
}

.pg {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--W, 150px);
  height: var(--H, 200px);
  margin: 0;
  overflow: hidden;
  transform-origin: 0 0;
  background: var(--paper);
  pointer-events: auto;
  padding: calc(var(--u) * 9) calc(var(--u) * 8.5);
  font-size: calc(var(--u) * 2.75);
  line-height: 1.42;
}

/* the gutter: every page darkens towards the spine */
.pg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(40, 28, 14, 0.2), rgba(40, 28, 14, 0.04) 7%, rgba(40, 28, 14, 0) 14%);
  z-index: 3;
}

.pg.is-left::after {
  background: linear-gradient(to left, rgba(40, 28, 14, 0.2), rgba(40, 28, 14, 0.04) 7%, rgba(40, 28, 14, 0) 14%);
}

/* the light on the fold: a band laid along the fold line by the script */
.fold {
  position: absolute;
  left: 0;
  top: 0;
  height: 400%;
  transform-origin: 0 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
}

.fold--up {
  background: linear-gradient(to right, rgba(30, 20, 8, 0.32), rgba(30, 20, 8, 0.08) 45%, rgba(30, 20, 8, 0));
}

.fold--under {
  background: linear-gradient(to right, rgba(30, 20, 8, 0.38), rgba(30, 20, 8, 0.1) 6%, rgba(255, 252, 244, 0.7) 16%, rgba(255, 252, 244, 0.25) 34%, rgba(30, 20, 8, 0.1) 60%, rgba(30, 20, 8, 0));
}

/* the shadow the turning page throws on the page below */
.cast {
  position: absolute;
  top: 0;
  width: var(--W, 150px);
  height: var(--H, 200px);
  overflow: hidden;
  pointer-events: none;
}

.cast__band {
  position: absolute;
  left: 0;
  top: 0;
  height: 400%;
  transform-origin: 0 0;
  background: linear-gradient(to right, rgba(30, 20, 8, 0.4), rgba(30, 20, 8, 0.12) 35%, rgba(30, 20, 8, 0));
  opacity: 0;
}

/* ---------------------------------------------------------------- the pages */
.art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.art--small {
  position: relative;
  height: auto;
  margin: calc(var(--u) * 10) 0 calc(var(--u) * 6);
}

.art path,
.art circle,
.art ellipse,
.art rect {
  stroke: none;
}

.c-ochre { fill: var(--ochre); }
.c-olive { fill: var(--olive); }
.c-terra { fill: var(--terra); }
.c-deep { fill: var(--deep); }
.c-sky { fill: var(--sky); }
.c-river { fill: var(--river); }
.c-night { fill: var(--night); }
.c-brick { fill: var(--brick); }
.c-glow { fill: var(--glow); }
.c-paper { fill: var(--paper); }
.c-loaf { fill: #c98a45; }
.art .c-ink,
.leaf .c-ink {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
}
.art .c-line,
.leaf .c-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.art .c-line-light {
  fill: none;
  stroke: var(--paper);
  stroke-width: 0.7;
  stroke-linecap: round;
  opacity: 0.75;
}
.art .c-steam {
  fill: none;
  stroke: var(--paper);
  stroke-width: 0.8;
  stroke-linecap: round;
  opacity: 0.5;
}

.kicker {
  margin: 0 0 calc(var(--u) * 2.4);
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  font-size: calc(var(--u) * 2.5);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra);
}

.title {
  margin: 0 0 calc(var(--u) * 4);
  font-weight: 640;
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 144;
  letter-spacing: -0.02em;
  line-height: 0.96;
  text-wrap: balance;
}

.title--mid { font-size: calc(var(--u) * 8.4); }
.title--big { font-size: calc(var(--u) * 10.4); }
.title--huge { font-size: calc(var(--u) * 12); }

.body {
  margin: 0;
  color: var(--ink);
}

.body p {
  margin: 0 0 0.7em;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.body--cols {
  columns: 2;
  column-gap: calc(var(--u) * 5);
}

.drop::first-letter {
  float: left;
  font-size: 3.3em;
  line-height: 0.8;
  margin: 0.06em 0.08em 0 0;
  font-weight: 700;
  color: var(--terra);
}

.stand {
  margin: 0 0 calc(var(--u) * 4);
  font-size: calc(var(--u) * 3.7);
  font-style: italic;
  line-height: 1.3;
  color: var(--muted);
}

.quote {
  margin: calc(var(--u) * 3) 0 0;
  padding-top: calc(var(--u) * 3);
  border-top: calc(var(--u) * 0.4) solid var(--terra);
  font-size: calc(var(--u) * 5.6);
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
}

.sign {
  margin: calc(var(--u) * 2) 0 0;
  font-style: italic;
  color: var(--muted);
}

.toc {
  margin-top: calc(var(--u) * 7);
}

.toc__row {
  padding: calc(var(--u) * 3) 0;
  border-top: 1px solid rgba(31, 28, 24, 0.18);
}

.toc__row p {
  margin: 0;
}

.toc__sec {
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  font-size: calc(var(--u) * 2.3);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra);
}

.toc__name {
  font-size: calc(var(--u) * 4.6);
  font-weight: 600;
  line-height: 1.1;
  margin: calc(var(--u) * 0.8) 0 !important;
}

.toc__what {
  color: var(--muted);
  font-style: italic;
}

.leaf {
  position: absolute;
  right: calc(var(--u) * 8.5);
  bottom: calc(var(--u) * 8);
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
}

.leaf path:first-child {
  fill: var(--terra);
}

.box {
  margin-top: calc(var(--u) * 3);
  padding: calc(var(--u) * 3.4);
  background: var(--sky);
  border-radius: calc(var(--u) * 1.4);
}

.box p {
  margin: 0;
}

.box__head {
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  font-size: calc(var(--u) * 2.3);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: calc(var(--u) * 1) !important;
}

/* the cover */
.pg--cover {
  background: var(--sky);
}

.pg--cover > p,
.pg--cover > div {
  position: relative;
  z-index: 2;
}

.cover__mast {
  margin: calc(var(--u) * -2) 0 0;
  font-size: calc(var(--u) * 30);
  font-weight: 800;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  letter-spacing: -0.045em;
  line-height: 0.82;
  color: var(--ink);
}

.cover__tag {
  margin: calc(var(--u) * 2) 0 0;
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  font-size: calc(var(--u) * 2.6);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cover__lines {
  position: absolute !important;
  left: calc(var(--u) * 8.5);
  right: calc(var(--u) * 40);
  bottom: calc(var(--u) * 36);
  font-size: calc(var(--u) * 3.8);
  font-weight: 600;
  line-height: 1.12;
}

.cover__lines p {
  margin: 0 0 calc(var(--u) * 1.8);
}

.cover__issue {
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  font-size: calc(var(--u) * 2.4);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra);
}

/* pictures that fill a page */
.pg--art {
  padding: 0;
}

.caption {
  position: absolute;
  left: calc(var(--u) * 8.5);
  bottom: calc(var(--u) * 6);
  margin: 0;
  font-size: calc(var(--u) * 2.6);
  font-style: italic;
  color: var(--ink);
}

.caption--light {
  color: var(--paper);
}

.kicker--over,
.title--over {
  position: relative;
  z-index: 2;
}

.pg--river-left .kicker--over {
  margin: calc(var(--u) * 12) calc(var(--u) * 8.5) calc(var(--u) * 2.4);
}

.pg--river-left .title--over {
  margin: 0 calc(var(--u) * 8.5);
  font-size: calc(var(--u) * 16);
}

.card {
  position: absolute;
  left: calc(var(--u) * 12);
  right: calc(var(--u) * 10);
  top: calc(var(--u) * 14);
  padding: calc(var(--u) * 4.4);
  background: var(--paper);
  border-radius: calc(var(--u) * 1.4);
  font-size: calc(var(--u) * 3.2);
  line-height: 1.38;
}

.card p {
  margin: 0;
}

/* the back cover */
.pg--back {
  background: var(--back);
  color: var(--paper);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.back__mast {
  margin: 0;
  font-size: calc(var(--u) * 12);
  font-weight: 800;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  letter-spacing: -0.04em;
}

.back__next {
  margin: 0;
  font-size: calc(var(--u) * 3.8);
  font-style: italic;
}

.code {
  position: absolute;
  right: calc(var(--u) * 8);
  bottom: calc(var(--u) * 7);
  width: calc(var(--u) * 16);
  padding: calc(var(--u) * 1.2);
  background: var(--paper);
}

.code path {
  stroke: var(--ink);
  stroke-width: 0.9;
}

/* ---------------------------------------------------------------- under the magazine */
.where {
  margin: 0;
  height: 1.3em;
  overflow: hidden;
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.where__roll {
  display: inline-block;
}

.hint {
  margin: -8px 0 0;
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  font-size: 13px;
  color: var(--muted);
}

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

.book:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 10px;
  border-radius: 4px;
}