/* Ported from design/Tended Landing.dc.html. The artboard computed these
   per-daypart values in JS and interpolated them into inline styles; here they
   are custom properties swapped by the data-daypart attribute, so the
   transitions the artboard already declared keep working unchanged. */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("./assets/fonts/newsreader-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("./assets/fonts/instrument-sans-latin.woff2") format("woff2");
}

:root {
  --ink: #252626;
  --glass: rgba(255, 253, 250, 0.62);
  --edge: rgba(255, 255, 255, 0.68);
  --scrim: linear-gradient(
    100deg,
    rgba(255, 251, 245, 0.86) 0%,
    rgba(255, 251, 245, 0.7) 40%,
    rgba(255, 251, 245, 0.34) 66%,
    rgba(255, 251, 245, 0.04) 88%
  );
  --chip-on-bg: #fffdfc;
  --chip-on-fg: #a4522a;
  --op-morning: 0;
  --op-evening: 0;
  --op-night: 0;
}

:root[data-daypart="morning"] { --op-morning: 1; }
:root[data-daypart="evening"] { --op-evening: 1; }

:root[data-daypart="night"] {
  --op-night: 1;
  --ink: #fff8ed;
  --glass: rgba(30, 38, 62, 0.42);
  --edge: rgba(255, 255, 255, 0.16);
  --scrim: linear-gradient(
    100deg,
    rgba(12, 17, 34, 0.82) 0%,
    rgba(12, 17, 34, 0.68) 40%,
    rgba(12, 17, 34, 0.34) 66%,
    rgba(12, 17, 34, 0.06) 88%
  );
  --chip-on-bg: rgba(255, 253, 250, 0.92);
}

html { scroll-behavior: smooth; background: #e8e3dc; }

body {
  margin: 0;
  background: #e8e3dc;
  color: #252626;
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: #a4522a; }
input, button { font: inherit; }

@keyframes drift1 {
  0% { transform: scale(1.10) translate3d(0, 0, 0); }
  50% { transform: scale(1.17) translate3d(-1.6%, -1.4%, 0); }
  100% { transform: scale(1.10) translate3d(0, 0, 0); }
}
@keyframes drift2 {
  0% { transform: scale(1.14) translate3d(0, 0, 0); }
  50% { transform: scale(1.08) translate3d(1.4%, 1.1%, 0); }
  100% { transform: scale(1.14) translate3d(0, 0, 0); }
}
@keyframes breathe {
  0% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.04); }
  100% { opacity: 0.55; transform: scale(1); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes sway {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-2%, 1%, 0) rotate(-1.2deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  .atmos-canvas { transition: none !important; }
  .atmos-layer,
  .atmos-scrim { transition: none !important; }
}

/* ---------------------------------------------------------------- atmosphere */

/* The three sources are 1672x941 landscape. On a portrait viewport `cover`
   keeps only the middle band, so the horizon has to stay near the centre —
   pushing it to 80%+ (as the old portrait art needed) would crop the sun and
   the moon straight off the top. */

.atmos {
  position: fixed;
  inset: -8% -6%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.atmos picture {
  position: absolute;
  inset: 0;
  display: block;
}

.atmos-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 2600ms cubic-bezier(0.37, 0, 0.63, 1);
}

.atmos-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.37, 0, 0.63, 1);
}

.atmos[data-webgl="ready"] .atmos-canvas { opacity: 1; }

/* The canvas starts from the paintings' exact cover crop. Keep its fallback at
   that same crop so the handoff never zooms or slides while textures load. */
.atmos-generative .atmos-layer {
  animation: none;
  object-position: 50% 50%;
}

.atmos-morning {
  object-position: 50% 54%;
  opacity: var(--op-morning);
  animation: drift1 78s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.atmos-evening {
  object-position: 50% 56%;
  opacity: var(--op-evening);
  animation: drift2 94s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}
.atmos-night {
  object-position: 50% 52%;
  opacity: var(--op-night);
  animation: drift1 110s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.atmos-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  transition: background 2000ms cubic-bezier(0.37, 0, 0.63, 1);
}

/* --------------------------------------------------------------- shared shell */

.page {
  position: relative;
  z-index: 1;
  color: var(--ink);
  transition: color 2000ms cubic-bezier(0.37, 0, 0.63, 1);
}

.shell {
  width: min(1180px, calc(100% - clamp(32px, 8vw, 48px)));
  margin: 0 auto;
}

/* The five card surfaces share these values in the artboard; hoisted rather
   than repeated. Radius and padding vary, so they stay on the callers. */
.panel {
  border: 1px solid var(--edge);
  background: var(--glass);
  backdrop-filter: blur(26px) saturate(125%);
  transition: background-color 1200ms, border-color 1200ms;
}

/* ------------------------------------------------------------------- header */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 5vw, 34px) 0 0;
}

.wordmark {
  font-family: "Newsreader", Georgia, serif;
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.03em;
}

.chip-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--glass);
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  backdrop-filter: blur(20px) saturate(120%);
  transition: background-color 400ms, border-color 400ms;
}
.chip-link:hover {
  color: inherit;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------- hero */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(128px, 26vw, 150px) 0 clamp(72px, 14vw, 110px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  animation: rise 1200ms cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

.pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: breathe 5200ms ease-in-out infinite;
}

.hero-title {
  max-width: 15ch;
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(46px, 10vw, 150px);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 0.86;
  text-wrap: balance;
  animation: rise 1400ms 120ms cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

.hero-lede {
  max-width: 520px;
  margin: 36px 0 0;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.42;
  opacity: 0.78;
  text-wrap: pretty;
  animation: rise 1400ms 260ms cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

/* ----------------------------------------------------------------- waitlist */

.waitlist {
  width: min(680px, 100%);
  margin-top: 52px;
  border-radius: 34px;
  box-shadow: 0 22px 54px rgba(40, 36, 32, 0.1);
  padding: clamp(18px, 4vw, 22px) clamp(18px, 4vw, 24px);
  animation: rise 1400ms 400ms cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

.waitlist-kicker {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

.waitlist-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.waitlist-input {
  flex: 1 1 240px;
  min-height: 50px;
  border: 1px solid rgba(120, 110, 100, 0.22);
  border-radius: 999px;
  background: rgba(255, 253, 250, 0.72);
  padding: 0 20px;
  color: #252626;
  font-size: 15px;
  outline: none;
}
.waitlist-input:focus {
  border-color: #6c96d3;
  box-shadow: 0 0 0 3px rgba(108, 150, 211, 0.26);
}

.waitlist-submit {
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  background: #f48a52;
  box-shadow: 0 9px 24px rgba(219, 104, 55, 0.24);
  padding: 0 26px;
  color: #fffdfc;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.37, 0, 0.63, 1), background-color 300ms;
}
.waitlist-submit:hover {
  background: #f6a06f;
  transform: translateY(-1px);
}
.waitlist-submit:active {
  background: #eb7f49;
  transform: scale(0.975);
}
.waitlist-submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.waitlist-line {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.62;
}

/* Lining, fixed-width digits so the count-up animation does not shuffle the
   sentence sideways on every frame. */
.waitlist-count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.joined {
  animation: rise 700ms cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

.joined-title {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.joined-body {
  margin: 12px 0 0;
  font-size: 15px;
  opacity: 0.7;
}

/* The honeypot must be reachable by a DOM-walking bot and invisible to a
   human, which rules out display:none and hidden. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

[hidden] { display: none !important; }

/* ------------------------------------------------------------ care section */

.care {
  padding: 40px 0 0;
  animation: rise 1100ms 300ms cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

.care-panel {
  border-radius: 40px;
  box-shadow: 0 22px 54px rgba(40, 36, 32, 0.08);
  padding: clamp(36px, 5vw, 72px);
}

.care-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 5vw, 72px);
}

.care-title {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(36px, 4.6vw, 62px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.care-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 6px;
}

.care-body p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  opacity: 0.82;
  text-wrap: pretty;
}

/* ------------------------------------------------------------------- marks */

.marks {
  padding: clamp(60px, 8vw, 120px) 0 0;
}

.marks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 18px;
}

.mark {
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-radius: 34px;
  box-shadow: 0 18px 44px rgba(40, 36, 32, 0.08);
  padding: clamp(28px, 6vw, 34px) clamp(24px, 5vw, 32px) clamp(30px, 6vw, 38px);
  transition: background-color 1200ms, border-color 1200ms,
    transform 500ms cubic-bezier(0.37, 0, 0.63, 1);
}
.mark:hover { transform: translateY(-4px); }

.mark:nth-child(1) { animation: rise 1100ms 520ms cubic-bezier(0.37, 0, 0.63, 1) forwards; }
.mark:nth-child(2) { animation: rise 1100ms 640ms cubic-bezier(0.37, 0, 0.63, 1) forwards; }
.mark:nth-child(3) { animation: rise 1100ms 760ms cubic-bezier(0.37, 0, 0.63, 1) forwards; }

.mark-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 26px rgba(40, 36, 32, 0.16);
}
.mark:nth-child(1) .mark-icon { animation: sway 26s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
.mark:nth-child(2) .mark-icon { animation: sway 31s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
.mark:nth-child(3) .mark-icon { animation: sway 37s cubic-bezier(0.37, 0, 0.63, 1) infinite; }

.mark h3 {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.06;
}

.mark p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.78;
  text-wrap: pretty;
}

/* -------------------------------------------------------------- flow banner */

.flow {
  padding: clamp(60px, 8vw, 120px) 0 0;
  animation: rise 1100ms 900ms cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

.flow-frame {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  box-shadow: 0 22px 54px rgba(40, 36, 32, 0.14);
}

.flow-frame picture {
  position: absolute;
  inset: -14%;
  display: block;
  width: 128%;
  height: 128%;
}

.flow-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: drift2 86s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.flow-body {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(320px, 42vw, 520px);
  padding: clamp(32px, 5vw, 64px);
}

.flow-body p {
  max-width: 16ch;
  margin: 0;
  color: #fffdfc;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.94;
  text-shadow: 0 2px 30px rgba(40, 30, 20, 0.28);
}

/* --------------------------------------------------------------------- cta */

.cta {
  padding: clamp(60px, 8vw, 120px) 0 0;
  animation: rise 1100ms 1040ms cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

.cta-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  border-radius: 40px;
  box-shadow: 0 22px 54px rgba(40, 36, 32, 0.08);
  padding: clamp(36px, 5vw, 72px);
}

.cta-copy { max-width: 540px; }

.cta-copy h2 {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(34px, 4.4vw, 58px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.cta-copy p {
  max-width: 460px;
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.5;
  opacity: 0.8;
  text-wrap: pretty;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  border-radius: 999px;
  background: #f48a52;
  box-shadow: 0 9px 24px rgba(219, 104, 55, 0.24);
  padding: 0 28px;
  color: #fffdfc;
  font-size: 15px;
  font-weight: 650;
  transition: transform 200ms cubic-bezier(0.37, 0, 0.63, 1), background-color 300ms;
}
.cta-button:hover {
  background: #f6a06f;
  color: #fffdfc;
  transform: translateY(-1px);
}

/* ------------------------------------------------------------------ footer */

.site-footer {
  padding: clamp(48px, 7vw, 96px) 0 56px;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.daypart-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(120%);
  transition: background-color 1200ms, border-color 1200ms;
}

.daypart-button {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 400ms, color 400ms;
}

.daypart-button[aria-pressed="true"] {
  background: var(--chip-on-bg);
  color: var(--chip-on-fg);
}

.colophon {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.62;
}

/* ------------------------------------------------------------------ article */
/* The article pages reuse the atmosphere, the glass panel and the two type
   families from the landing page; only the reading column below is new. */

.article-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 5vw, 34px) 0 0;
}

.article {
  padding: clamp(48px, 9vw, 96px) 0 0;
}

.article-panel {
  width: min(760px, 100%);
  margin: 0 auto;
  border-radius: 40px;
  box-shadow: 0 22px 54px rgba(40, 36, 32, 0.1);
  padding: clamp(32px, 6vw, 72px);
  animation: rise 1200ms cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
}

.article-meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.article-title {
  max-width: 18ch;
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(38px, 6.4vw, 76px);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-wrap: balance;
}

.article-lede {
  margin: 28px 0 0;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  opacity: 0.8;
  text-wrap: pretty;
}

.article-body {
  margin-top: clamp(30px, 5vw, 48px);
  border-top: 1px solid var(--edge);
  padding-top: clamp(30px, 5vw, 48px);
}

.article-body h2 {
  margin: clamp(38px, 6vw, 56px) 0 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}

.article-body h2:first-child { margin-top: 0; }

.article-body p {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.62;
  opacity: 0.85;
  text-wrap: pretty;
}

.article-body ul {
  margin: 20px 0 0;
  padding-left: 1.1em;
}

.article-body li {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.6;
  opacity: 0.85;
  text-wrap: pretty;
}

.article-body li strong { font-weight: 650; opacity: 1; }

.article-body a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.article-pull {
  margin: clamp(34px, 5vw, 52px) 0 0;
  border-left: 2px solid currentColor;
  padding: 4px 0 4px 24px;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 300;
  font-style: normal;
  letter-spacing: -0.03em;
  line-height: 1.15;
  opacity: 0.9;
  text-wrap: balance;
}

.article-pull p { margin: 0; font: inherit; opacity: 1; }

.article-signoff {
  margin-top: clamp(34px, 5vw, 52px);
  border-top: 1px solid var(--edge);
  padding-top: 24px;
  font-size: 15px;
  opacity: 0.7;
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(28px, 4vw, 40px);
  font-size: 14px;
  font-weight: 650;
}

.care-more {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
}
.care-more a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.colophon a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* --------------------------------------------------- article: how-to steps */

/* The one-line instruction under a numbered step. The prose that follows it
   explains why; this is the part you act on, so it stays visually separate. */
.article-body .step-do {
  margin-top: 16px;
  border-left: 2px solid #f48a52;
  padding-left: 18px;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.5;
  opacity: 1;
}

.article-body .sticky-sample {
  margin-top: 16px;
  border: 1px solid var(--edge);
  border-radius: 18px;
  background: rgba(255, 253, 250, 0.5);
  padding: 16px 20px;
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}

/* ---------------------------------------------------- article: checklist */

.checklist {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: checklist;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 0;
  border-top: 1px solid var(--edge);
  padding: 16px 0;
  opacity: 1;
}
.checklist li:last-child { border-bottom: 1px solid var(--edge); }

.checklist-box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1.5px solid currentColor;
  border-radius: 6px;
  opacity: 0.45;
}

.checklist-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checklist-text strong {
  font-size: 17px;
  font-weight: 650;
  line-height: 1.35;
}

.checklist-text span {
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.72;
}

/* --------------------------------------------------------------- printing */

/* The checklist is meant to go on a fridge, so printing drops the atmosphere,
   the glass panel and everything around the article and leaves plain ink on
   paper. Backgrounds are not printed by default in most browsers, which would
   otherwise leave the night palette's pale text on white. */
/* ------------------------------------------------------------- site nav */
/* The header carries one route besides the waitlist; on a phone the label
   sits beside the chip rather than wrapping under it. */

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 22px);
}

.nav-link {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.02em;
  opacity: 0.78;
  transition: opacity 240ms ease;
}

.nav-link:hover { opacity: 1; }

/* -------------------------------------------------- article: photography */
/* Photographs run to the full width of the reading column and keep their own
   caption. `title` is on the <img>; the visible caption repeats it so the
   sentence is available without a hover, which a phone cannot do. */

.article-figure {
  margin: clamp(30px, 5vw, 48px) 0 0;
}

.article-figure picture {
  display: block;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(40, 36, 32, 0.14);
}

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.article-figure-hero {
  margin: clamp(28px, 4vw, 40px) 0 0;
}

.article-figure figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.66;
  text-wrap: pretty;
}

.figure-credit { opacity: 0.78; }

.article-figure figcaption a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ------------------------------------------------ article: previous/next */
/* Generated by scripts/build-content.mjs. Two cells at most: the article
   before this one and the article after it, in publication order. */

.article-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: clamp(34px, 5vw, 52px);
  border-top: 1px solid var(--edge);
  padding-top: clamp(24px, 4vw, 34px);
}

.article-nav-cell {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid var(--edge);
  border-radius: 20px;
  padding: 18px 20px 20px;
  text-decoration: none;
  transition: transform 320ms cubic-bezier(0.37, 0, 0.63, 1), background 320ms ease;
}

.article-nav-cell:hover {
  transform: translateY(-3px);
  background: var(--edge);
}

/* When only one neighbour exists it should not stretch across the whole row
   pretending to be a pair — and it should sit on the side its direction implies. */
.article-nav-cell:only-child { max-width: 420px; }
.article-nav-cell:only-child.article-nav-next { justify-self: end; }

.article-nav-next { text-align: right; }

.article-nav-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}

.article-nav-title {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.14;
  text-wrap: balance;
}

.article-nav-section {
  font-size: 12px;
  letter-spacing: 0.02em;
  opacity: 0.62;
}

.article-nav-all {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 650;
}

.article-nav-all a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ----------------------------------------------------------- article hub */

.index {
  padding: clamp(40px, 8vw, 82px) 0 0;
}

.index-hero {
  width: min(760px, 100%);
  margin: 0 auto;
}

.index-title {
  max-width: 16ch;
  margin: 18px 0 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(38px, 6.4vw, 72px);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.94;
  text-wrap: balance;
}

.index-lede {
  margin: 24px 0 0;
  max-width: 54ch;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.45;
  opacity: 0.8;
  text-wrap: pretty;
}

.index-feed {
  margin: 18px 0 0;
  font-size: 14px;
  font-weight: 650;
  opacity: 0.8;
}

.index-feed a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.index-list {
  width: min(760px, 100%);
  margin: clamp(34px, 6vw, 56px) auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.index-entry {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: clamp(18px, 3vw, 28px);
  align-items: start;
  border: 1px solid var(--edge);
  border-radius: 28px;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  padding: 18px;
  transition: transform 380ms cubic-bezier(0.37, 0, 0.63, 1);
}

.index-entry:hover { transform: translateY(-4px); }

.index-entry picture {
  display: block;
  overflow: hidden;
  border-radius: 18px;
}

.index-thumb {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 148px;
  max-height: 190px;
  object-fit: cover;
}

.index-entry-body {
  padding: 6px 8px 8px 0;
}

.index-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.66;
}

.index-entry-meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.index-entry-title {
  margin: 12px 0 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.06;
  text-wrap: balance;
}

.index-entry-title a { text-decoration: none; }
.index-entry-title a:hover { text-decoration: underline; text-underline-offset: 4px; }

.index-entry-lede {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.55;
  opacity: 0.8;
  text-wrap: pretty;
}

.index-cta { margin-top: clamp(40px, 7vw, 72px); }

@media (max-width: 720px) {
  .index-entry { grid-template-columns: 1fr; }
  .index-thumb { max-height: 200px; }
  .index-entry-body { padding: 0 4px 6px; }
}

/* ------------------------------------------------------ printable sheets */
/* On screen a sheet is an article panel with a print button. On paper it is
   the only thing left — see the print block at the foot of this file. */

.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: clamp(26px, 4vw, 34px) 0 0;
}

.sheet-actions .cta-button { border: 0; cursor: pointer; font: inherit; }

.sheet-back { margin-top: 0; }

.sheet-body {
  margin-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--edge);
  padding-top: clamp(24px, 4vw, 36px);
}

.sheet-write { margin-top: clamp(28px, 4vw, 38px); }

.sheet-write h2 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.66;
}

.sheet-lines {
  margin: 0;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sheet-lines-short { gap: 14px; }

.sheet-line {
  display: block;
  height: 1px;
  margin-top: 14px;
  background: currentColor;
  opacity: 0.28;
}

.sheet-blank {
  display: inline-block;
  width: 84px;
  margin-left: 4px;
  border-bottom: 1px solid currentColor;
  opacity: 0.4;
  vertical-align: -2px;
}

.sheet-footer {
  margin: clamp(30px, 5vw, 44px) 0 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* --------------------------------------------------------------- the 404 */

.lost {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(280px, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  padding: clamp(30px, 7vw, 72px) 0 clamp(40px, 8vw, 90px);
}

.lost-stage {
  position: relative;
  aspect-ratio: 1;
  max-width: 460px;
  width: 100%;
  justify-self: center;
}

.lost-blob {
  display: block;
  width: 100%;
  height: 100%;
  /* The blob is drawn transparent and sits over the atmosphere, so it needs no
     backdrop of its own — only a soft glow to keep it from looking pasted on. */
  filter: drop-shadow(0 22px 44px rgba(40, 36, 32, 0.12));
}

.lost-title {
  margin: 18px 0 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(42px, 7vw, 78px);
  font-weight: 300;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

.lost-lede {
  margin: 22px 0 0;
  max-width: 42ch;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  opacity: 0.8;
  text-wrap: pretty;
}

.lost-links {
  margin: 26px 0 0;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lost-links li {
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.85;
}

.lost-links a,
.lost-note a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 650;
}

.lost-note {
  margin: 26px 0 0;
  font-size: 14px;
  opacity: 0.66;
}

@media (max-width: 840px) {
  .lost { grid-template-columns: 1fr; }
  .lost-stage { max-width: 320px; }
}

/* The pin a reader saves. Deliberately quieter than a blog's usual save
   block: a label, a bordered image, and nothing shouting. */
.pin-save {
  margin: 3.5rem 0 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgb(0 0 0 / 0.08);
}

.pin-save-label {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}

.pin-save-image {
  display: block;
  width: min(280px, 60%);
  height: auto;
  border-radius: 4px;
  box-shadow: 0 1px 12px rgb(0 0 0 / 0.1);
}

.pin-save-button {
  display: inline-flex;
  align-items: center;
  margin-top: 0.85rem;
  padding: 8px 16px;
  border: 1px solid rgb(0 0 0 / 0.16);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  color: #252626;
  transition: border-color 200ms, transform 200ms cubic-bezier(0.37, 0, 0.63, 1);
}
.pin-save-button:hover {
  border-color: rgb(0 0 0 / 0.32);
  transform: translateY(-1px);
}

@media print {
  html, body { background: #fff; color: #000; }

  .atmos,
  .site-header,
  .article-header,
  .site-footer,
  .article-back,
  .article-signoff { display: none !important; }

  .page { color: #000; }

  .shell, .article { width: auto; margin: 0; padding: 0; }

  .article-panel {
    width: auto;
    border: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
    padding: 0;
    animation: none;
  }

  .article-body p,
  .article-body li,
  .checklist-text span { opacity: 1; }

  .article-title { font-size: 32pt; }
  .article-body h2 { font-size: 16pt; }
  .article-body p, .article-body li { font-size: 11pt; }
  /* The pull quote sizes itself off the viewport, which on paper collapses to
     a few points — it needs a real length here. */
  .article-pull, .article-pull p { font-size: 14pt; }

  /* Keep a step and its instruction together rather than split over a page. */
  .article-body h2 { break-after: avoid; }
  .checklist li { break-inside: avoid; }
  .checklist-box { border-color: #000; opacity: 1; }

  /* Photographs, the previous/next widget and anything marked no-print are
     screen furniture — a printed checklist is text and boxes only. */
  .article-figure,
  .article-nav,
  .article-nav-all,
  .site-nav,
  .no-print { display: none !important; }

  .sheet-body {
    margin-top: 18pt;
    border-top: 0;
    padding-top: 0;
  }

  .sheet-write { margin-top: 20pt; break-inside: avoid; }
  .sheet-write h2 { font-size: 9pt; letter-spacing: 0.14em; opacity: 1; }
  .sheet-line { background: #000; opacity: 0.45; margin-top: 12pt; }
  .sheet-blank { border-color: #000; opacity: 0.55; }
  .sheet-lines { gap: 14pt; }
  .sheet-lines-short { gap: 11pt; }
  .sheet-footer { opacity: 0.7; font-size: 8pt; }
  .sheet-title { font-size: 28pt; }

  @page { margin: 14mm; }
}