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

html { color-scheme: light; overflow-y: scroll; }

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("/assets/paper-cream.jpg");
  background-repeat: repeat;
  background-size: 720px 720px;
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
}

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

.site-shell {
  width: min(100% - (2 * var(--page-pad)), var(--page-max));
  margin-inline: auto;
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.display {
  margin: 0;
  color: var(--green);
  font-family: var(--font-display);
  /* Crimson Text ships 400/600/700; 400 carries the big sizes */
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: .82;
}

.serif-title {
  margin: 0;
  color: var(--green);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.02;
}

.kicker,
.nav,
.meta,
.micro,
.section-label {
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .21em;
}

.kicker,
.section-label {
  font-size: 11px;
  line-height: 1.4;
  color: var(--terracotta);
}

.meta,
.micro {
  font-size: 10px;
  line-height: 1.45;
  color: var(--muted);
}

.rule-accent {
  display: inline-block;
  width: 34px;
  height: 1px;
  background: var(--terracotta);
  vertical-align: middle;
}

.site-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 32px;
  padding-top: 34px;
}

.site-mark {
  color: var(--green);
  font-family: var(--font-display);
  font-size: 31px;
  line-height: .72;
  letter-spacing: -.08em;
  text-decoration: none;
}

.site-mark .slash { color: var(--terracotta); }

.site-nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 48px);
  padding-top: 8px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.site-nav a {
  position: relative;
  text-decoration: none;
  color: #223831;
}

.site-nav a[aria-current="page"] { color: var(--terracotta); }

.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 1px;
  background: var(--terracotta);
}

.quote-well {
  border-left: 2px solid var(--terracotta);
  padding: 6px 0 8px 26px;
}

.quote-well .quote {
  margin: 12px 0 10px;
  color: var(--ink);
  font-family: var(--font-quote);
  font-size: clamp(20px, 1.8vw, 27px);
  font-weight: 400;
  line-height: 1.32;
  max-width: 17em;
}

/* the rotating quote can run long; a six-line 31px quote would swallow the
   header, so past ~100 characters it steps down */
.quote-well.long .quote {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.45;
}

.quote-well .date {
  margin-top: 6px;
  font-family: var(--font-label);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
}

.paper-card {
  position: relative;
  background: rgba(251,249,245,.82);
  border: var(--hairline) solid var(--rule);
  box-shadow: var(--shadow-card);
}

.paper-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background: url("/assets/paper-card.jpg") repeat;
  background-size: 560px 560px;
  mix-blend-mode: multiply;
}

.dark-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--cream-on-dark);
  background: var(--green);
}

.dark-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .22;
  background: url("/assets/green-mottle.jpg") center/cover;
  mix-blend-mode: soft-light;
}

.arrow-link {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  color: var(--green);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  text-decoration: none;
}

.arrow-link::after {
  content: "⟶";
  color: var(--terracotta);
  font-size: 14px;
  transition: transform var(--t-fast) var(--ease-out);
}

.arrow-link:hover::after { transform: translateX(4px); }

.hairline { border-top: 1px solid var(--rule); }

@media (max-width: 820px) {
  .site-shell { width: min(100% - 36px, var(--page-max)); }
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { gap: 18px; overflow-x: auto; max-width: 74vw; }
  .editorial-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}