/* ============================================================================
   Gilder Creek Studio - gildercreekstudio.com
   Brand: Paper #F8F5EE / Ink #383634 / Creek Slate #3E4E5C.
   Creek Slate is the only brand field colour; the six theme accents appear
   only as product chips, never as site furniture.
   ========================================================================= */

/* ------------------------------------------------------------ tokens ---- */
:root {
  --paper:        #F8F5EE;
  --paper-warm:   #F2EDE3;
  --card:         #FFFDF8;
  --ink:          #383634;
  --ink-soft:     #5A5651;
  --ink-muted:    #837D74;
  --slate:        #3E4E5C;
  --slate-deep:   #33414D;
  --slate-soft:   #6C7C89;
  --line:         #DED6C7;
  --line-soft:    #EAE3D6;

  /* Bodoni is the brand's display voice: the covers, the listing images and the
     avatar are all set in Bodoni MT. Bodoni Moda is the closest true Bodoni
     available as a webfont, so the site and the product read as one thing. */
  --serif:  "Bodoni Moda", "Bodoni MT", Didot, "Playfair Display", Georgia, serif;
  --geo:    "Jost", "Century Gothic", "Futura", "Segoe UI", sans-serif;
  --sans:   "Inter", "Aptos", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap:   1160px;
  --wrap-narrow: 760px;
  --gap:    clamp(1.25rem, 3vw, 2.25rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);

  --radius: 3px;
  --shadow: 0 1px 2px rgba(56, 54, 52, .04), 0 12px 32px -18px rgba(56, 54, 52, .28);
  --ease:   cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  /* the off-canvas mobile nav sits parked to the right of the viewport; clip
     (not hidden) keeps it from adding a horizontal scrollbar without turning
     body into a scroll container, which would break the sticky header */
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------------------------------------------------------- typography -- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.008em;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 { font-size: clamp(2.6rem, 6vw, 4.15rem); line-height: 1.06; }
h2 { font-size: clamp(1.95rem, 3.6vw, 2.9rem); }
/* Bodoni's hairlines thin out fast: give the small headings the heavier cut */
h3 { font-size: clamp(1.2rem, 1.9vw, 1.45rem); line-height: 1.26; font-weight: 500; }
h4 { font-size: 1.06rem; font-family: var(--sans); font-weight: 500; letter-spacing: 0; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 500; color: var(--ink); }
em { font-style: italic; }

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.28rem);
  line-height: 1.62;
  color: var(--ink-soft);
  font-weight: 300;
}
.small  { font-size: .92rem; }
.muted  { color: var(--ink-muted); }
.center { text-align: center; }
.measure { max-width: 62ch; }
.measure-tight { max-width: 52ch; }
.center .measure, .center .measure-tight { margin-inline: auto; }

.eyebrow {
  font-family: var(--geo);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.1rem;
}
.eyebrow--light { color: rgba(248, 245, 238, .62); }

/* the creek rule: --- · ---  the standalone brand device */
.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 1.6rem 0;
}
.rule::before, .rule::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: .45;
}
.rule::after { }
.rule i {
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .55; display: block;
}
.rule--left { justify-content: flex-start; }

/* ------------------------------------------------------------ layout ---- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--tint  { background: var(--paper-warm); }
.section--card  { background: var(--card); }
.section--slate { background: var(--slate); color: rgba(248, 245, 238, .88); }
.section--slate h1, .section--slate h2, .section--slate h3, .section--slate strong { color: var(--paper); }
.section--slate .lede, .section--slate .muted { color: rgba(248, 245, 238, .72); }
.section + .section--tint, .section--tint + .section { border-top: 1px solid var(--line-soft); }

.stack > * + * { margin-top: 1.15rem; }
.section-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head .lede { margin-top: .35rem; }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--text-right { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
@media (max-width: 860px) { .split, .split--text-right { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .split--flip-first > *:first-child { order: 2; } }

/* ----------------------------------------------------------- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--geo);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.6rem;
  border: 1px solid var(--slate);
  border-radius: var(--radius);
  background: var(--slate);
  color: var(--paper);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--slate-deep); border-color: var(--slate-deep); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: transparent; color: var(--slate); border-color: var(--slate); }
.btn--light { background: var(--paper); color: var(--slate); border-color: var(--paper); }
.btn--light:hover { background: #fff; border-color: #fff; color: var(--slate-deep); }
.btn--ghost-light { background: transparent; color: var(--paper); border-color: rgba(248, 245, 238, .4); }
.btn--ghost-light:hover { background: rgba(248, 245, 238, .08); border-color: rgba(248, 245, 238, .75); }
.btn--sm { padding: .7rem 1.15rem; font-size: .7rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.center .btn-row { justify-content: center; }

.link {
  font-family: var(--geo);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--slate);
  border-bottom: 1px solid rgba(62, 78, 92, .3);
  padding-bottom: 2px;
  transition: border-color .25s var(--ease);
}
.link:hover { border-color: var(--slate); }
.link--light { color: var(--paper); border-bottom-color: rgba(248, 245, 238, .35); }
.link--light:hover { border-bottom-color: var(--paper); }

/* prose links inside body copy */
.prose a { color: var(--slate); text-decoration: none; border-bottom: 1px solid rgba(62, 78, 92, .28); }
.prose a:hover { border-bottom-color: var(--slate); }

/* a button inside prose is still a button: beat .prose a on colour and rule */
a.btn, .prose a.btn { color: var(--paper); border-bottom-color: var(--slate); }
a.btn:hover, .prose a.btn:hover { color: var(--paper); border-bottom-color: var(--slate-deep); }
a.btn--ghost, .prose a.btn--ghost { color: var(--ink); border-bottom-color: var(--line); }
a.btn--ghost:hover, .prose a.btn--ghost:hover { color: var(--slate); border-bottom-color: var(--slate); }
a.btn--light, .prose a.btn--light { color: var(--slate); border-bottom-color: var(--paper); }
a.btn--ghost-light, .prose a.btn--ghost-light { color: var(--paper); border-bottom-color: rgba(248, 245, 238, .4); }
.prose a.link { border-bottom-color: rgba(62, 78, 92, .3); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--slate); color: var(--paper); padding: .75rem 1.15rem;
  font-family: var(--geo); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: .75rem; top: .75rem; }

/* ---------------------------------------------------------- wordmark ---- */
/* the header nav is wide; the wordmark must never be the thing that gives */
.wordmark { display: inline-block; text-decoration: none; line-height: 1; text-align: center; flex: 0 0 auto; }
.wordmark__name {
  display: block;
  font-family: var(--geo);
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark__rule {
  display: block;
  width: 46px; height: 1px;
  background: currentColor;
  opacity: .5;
  margin: .42rem auto .34rem;
}
.wordmark__studio {
  display: block;
  font-family: var(--geo);
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: .42em;
  text-indent: .42em;
  color: var(--ink-muted);
}
.wordmark--light .wordmark__name { color: var(--paper); }
.wordmark--light .wordmark__studio { color: rgba(248, 245, 238, .6); }
.wordmark--lg .wordmark__name { font-size: 1.5rem; }
.wordmark--lg .wordmark__rule { width: 68px; }
.wordmark--lg .wordmark__studio { font-size: .68rem; }

/* -------------------------------------------------------------- nav ----- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248, 245, 238, .93);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: .95rem;
}
.nav { display: flex; align-items: center; gap: clamp(.9rem, 1.9vw, 1.75rem); }
.nav a {
  font-family: var(--geo);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a.is-active { color: var(--ink); border-bottom-color: var(--slate); }
/* the CTA in the nav is a button first: beat .nav a on colour and padding */
.nav a.btn { margin-left: .4rem; color: var(--paper); border-bottom-color: var(--slate); }
.nav a.btn:hover { color: var(--paper); border-bottom-color: var(--slate-deep); }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  padding: .55rem .8rem; cursor: pointer;
  font-family: var(--geo); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
@media (max-width: 1040px) {
  .nav-toggle { display: inline-block; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 84vw);
    background: var(--paper); border-left: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: .35rem; padding: 5.5rem 2rem 2rem;
    transform: translateX(100%); transition: transform .32s var(--ease);
    box-shadow: -20px 0 50px -30px rgba(56, 54, 52, .5);
    overflow-y: auto;
  }
  .nav[data-open="true"] { transform: translateX(0); }
  .nav a { font-size: .82rem; padding-block: .7rem; width: 100%; }
  .nav .btn { margin: 1rem 0 0; width: 100%; justify-content: center; }
  .nav-scrim {
    position: fixed; inset: 0; background: rgba(56, 54, 52, .35);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); z-index: 40;
  }
  .nav-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
}

/* ------------------------------------------------------------- hero ----- */
.hero { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }
.hero__grid {
  display: grid;
  /* the hero image is a portrait tablet, so it gets the narrower column */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 em { font-style: italic; }
.hero .lede { max-width: 42ch; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.25rem;
  margin-top: 2.25rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.hero__meta div { max-width: 15rem; }
.hero__meta dt {
  font-family: var(--geo); font-size: .68rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
}
.hero__meta dd { margin: .3rem 0 0; font-size: .9rem; color: var(--ink-muted); line-height: 1.5; }

/* ------------------------------------------------------------ figures --- */
.figure { margin: 0; }
.figure__frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.figure__frame img { width: 100%; }
button.figure__frame { display: block; width: 100%; padding: 0; cursor: zoom-in; }
button.figure__frame:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(56,54,52,.05), 0 22px 44px -22px rgba(56,54,52,.35); }
.figure figcaption {
  margin-top: .85rem;
  font-size: .84rem;
  color: var(--ink-muted);
  line-height: 1.5;
}
.figure figcaption b {
  display: block; color: var(--ink); font-weight: 500;
  font-family: var(--geo); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: .25rem;
}
.figure--plain .figure__frame { box-shadow: none; }
.zoom-hint {
  position: absolute; right: .6rem; bottom: .6rem;
  font-family: var(--geo); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(248, 245, 238, .92); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 2px; padding: .28rem .5rem;
  opacity: 0; transition: opacity .25s var(--ease);
}
button.figure__frame:hover .zoom-hint, button.figure__frame:focus-visible .zoom-hint { opacity: 1; }

/* ------------------------------------------------------------- cards ---- */
.card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 2rem);
}
.card--bare { background: transparent; border: 0; padding: 0; }
.card h3 { margin-bottom: .4rem; }
.card p { font-size: .96rem; color: var(--ink-soft); }
.card__num {
  font-family: var(--serif); font-size: 1.05rem; color: var(--slate-soft);
  display: block; margin-bottom: .6rem;
}

.feature { display: grid; gap: .55rem; }
.feature__title {
  font-family: var(--geo); font-size: .76rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.feature p { font-size: .95rem; color: var(--ink-muted); margin: 0; }

/* fact strip */
.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.facts div { padding: 1.75rem 1.25rem; text-align: center; border-right: 1px solid var(--line); }
.facts div:last-child { border-right: 0; }
.facts b { display: block; font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; }
.facts span { display: block; margin-top: .35rem; font-family: var(--geo); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 760px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts div:nth-child(2) { border-right: 0; }
  .facts div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* checkmark list */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ticks li { position: relative; padding-left: 1.6rem; color: var(--ink-soft); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 10px; height: 5px; border-left: 1px solid var(--slate); border-bottom: 1px solid var(--slate);
  transform: rotate(-45deg);
}
.section--slate .ticks li { color: rgba(248, 245, 238, .8); }
.section--slate .ticks li::before { border-color: rgba(248, 245, 238, .8); }

/* -------------------------------------------------------------- tabs ---- */
.tabs {
  display: flex; flex-wrap: wrap; gap: .4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .7rem .9rem; margin-bottom: -1px; cursor: pointer;
  font-family: var(--geo); font-size: .74rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--slate); }
.tabs--center { justify-content: center; }
.tabpanel[hidden] { display: none; }

/* The numbered .how step-list was removed on 2026-08-15: numbering the palette,
   calendar, customize and personalize choices made four independent options
   read as one four-stage process. They are now .included (facts) and .options
   (additions). Do not reintroduce numbering here. */

/* ------------------------------------------------------------- the fork -- */
/* Two products, side by side, so nobody reads the configuration choices as
   part of the instant download. */
.fork {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  position: relative;
}
@media (max-width: 820px) { .fork { grid-template-columns: 1fr; } }
.fork__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 2.8vw, 2.4rem);
  display: flex; flex-direction: column;
}
.fork__card--alt { background: var(--paper-warm); border-color: var(--line); }
.section--tint .fork__card--alt { background: var(--card); }
.fork__card h3 { margin: .9rem 0 .5rem; font-size: clamp(1.35rem, 2.1vw, 1.7rem); }
.fork__lede { color: var(--ink-soft); font-size: .98rem; margin-bottom: 1.35rem; }
.fork .btn-row { margin-top: auto; }
/* Additions, not steps. A "+" rather than a number, because numbering these
   made four independent choices read as one four-stage process. */
.options { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.options li {
  border-top: 1px solid var(--line-soft); padding-top: .9rem;
  display: grid; grid-template-columns: 1.6rem 1fr; column-gap: .75rem;
}
/* the geometric sans draws a plus with real weight; Bodoni's is a hairline */
.options__mark {
  font-family: var(--geo); font-weight: 400; font-size: 1.45rem; line-height: 1;
  color: var(--slate); grid-row: span 2; padding-top: .05rem; text-align: center;
}
.options h4 { margin: 0 0 .2rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.options p { margin: 0; font-size: .92rem; color: var(--ink-muted); }
.tag {
  font-family: var(--geo); font-size: .58rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .16rem .5rem;
}

/* what every edition carries, stated rather than numbered */
.included {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.5rem 0; margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 2.5rem; align-items: center;
}
@media (max-width: 760px) { .included { grid-template-columns: 1fr; } }
.included__label {
  font-family: var(--geo); font-size: .68rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink); margin: 0; white-space: nowrap;
}
.included ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem;
  font-size: .92rem; color: var(--ink-muted);
}
.included li { position: relative; padding-left: 1.1rem; }
.included li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 4px; border-left: 1px solid var(--slate-soft); border-bottom: 1px solid var(--slate-soft);
  transform: rotate(-45deg);
}

/* the staged pair image sits wide and uncropped, centred in its section */
.pair { max-width: 60rem; margin-inline: auto; }
.pair figcaption { text-align: center; max-width: 46rem; margin-inline: auto; }

/* --------------------------------------------------------- cover row ----- */
.cover-row {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(.6rem, 1.4vw, 1.1rem);
}
@media (max-width: 900px) { .cover-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cover-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cover-row a { text-decoration: none; display: block; }
.cover-row img {
  width: 100%; border-radius: 3px; border: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease);
}
.cover-row a:hover img { transform: translateY(-3px); }
.cover-row span {
  display: block; margin-top: .7rem; text-align: center;
  font-family: var(--geo); font-size: .68rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted);
}

/* ------------------------------------------------------------ themes ---- */
.theme-picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.theme-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: .45rem .95rem .45rem .5rem; cursor: pointer;
  font-family: var(--geo); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.theme-chip:hover { color: var(--ink); border-color: var(--ink-muted); }
.theme-chip[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.theme-chip i { width: 16px; height: 16px; border-radius: 50%; display: block; }

.swatches { display: flex; gap: .4rem; margin-top: .1rem; }
.swatches span {
  width: 30px; height: 30px; border-radius: 2px; border: 1px solid rgba(56, 54, 52, .1);
}
.swatches--sm span { width: 20px; height: 20px; }

.theme-card { display: grid; gap: 1rem; }
.theme-card__meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.theme-card__meta h3 { margin: 0; }

/* --------------------------------------------------------- personalise -- */
.builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) { .builder { grid-template-columns: 1fr; } }

/* .field and friends set display, which beats the [hidden] UA rule, so the
   builder's mode-switched blocks need this to actually disappear */
[hidden] { display: none !important; }

/* which order am I placing: pages, name, or both */
.mode-switch {
  display: flex; flex-wrap: wrap; gap: .4rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .35rem; background: var(--card); margin-bottom: 1.25rem;
}
.mode-switch button {
  flex: 1 1 auto; background: none; border: 0; border-radius: 2px;
  padding: .6rem .8rem; cursor: pointer; white-space: nowrap;
  font-family: var(--geo); font-size: .7rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.mode-switch button:hover { color: var(--ink); }
.mode-switch button[aria-pressed="true"] { background: var(--slate); color: var(--paper); }
.order-label {
  font-family: var(--geo); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-muted); margin: 0 0 1.25rem;
}

/* a pages-only order puts no name on the cover, so the preview shows none */
.cover-preview[data-mode="pages"] .cover-preview__name,
.cover-preview[data-mode="pages"] .cover-preview__motto { display: none; }

.field { display: grid; gap: .4rem; margin-bottom: 1.15rem; }
.field label {
  font-family: var(--geo); font-size: .7rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.field input[type="text"], .field select, .field input[type="email"] {
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .7rem .85rem;
  width: 100%;
}
.field input:focus, .field select:focus { outline: 2px solid var(--slate); outline-offset: 1px; border-color: var(--slate); }
.field .hint { font-size: .8rem; color: var(--ink-muted); }
.field .hint.is-over { color: #8A4A42; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

/* live cover preview: mirrors the real cover's lockup, not a substitute for it */
.cover-preview {
  position: relative;
  aspect-ratio: 10 / 7.1;
  border-radius: 4px;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8% 12% 6%;
  background: var(--preview-accent, #5A4A3E);
  box-shadow: var(--shadow);
  text-align: center;
  container-type: inline-size;
}
.cover-preview__year {
  position: absolute; top: 12%; left: 0; right: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: 27cqw; line-height: 1;
  color: rgba(255, 255, 255, .14);
  letter-spacing: .04em;
}
.cover-preview__body { position: relative; margin-top: 22%; width: 100%; }
/* every line of the lockup is its own row, at any width */
.cover-preview__body > * { display: block; }
.cover-preview__title {
  font-family: var(--geo); font-weight: 300;
  font-size: 5.2cqw; letter-spacing: .34em; text-indent: .34em;
  color: rgba(255, 255, 255, .95);
}
.cover-preview__rule {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  color: rgba(255, 255, 255, .7); margin: 3.5cqw 0;
}
.cover-preview__rule::before, .cover-preview__rule::after {
  content: ""; width: 5cqw; height: 1px; background: currentColor;
}
.cover-preview__rule i { width: 2px; height: 2px; border-radius: 50%; background: currentColor; }
.cover-preview__sub {
  font-family: var(--geo); font-weight: 300;
  font-size: 2.5cqw; letter-spacing: .24em; color: rgba(255, 255, 255, .72);
}
.cover-preview__name {
  font-family: var(--geo); font-weight: 400;
  font-size: 3.4cqw; letter-spacing: .3em; color: rgba(255, 255, 255, .95);
  margin-top: 6cqw; min-height: 4cqw;
}
.cover-preview__motto {
  font-family: var(--geo); font-weight: 300;
  font-size: 2.3cqw; letter-spacing: .2em; color: rgba(255, 255, 255, .62);
  margin-top: 1.6cqw; min-height: 3cqw;
}
.cover-preview__name.is-placeholder,
.cover-preview__motto.is-placeholder { opacity: .42; }
.cover-preview__foot {
  position: absolute; bottom: 5%; left: 0; right: 0;
  font-family: var(--geo); font-weight: 300;
  font-size: 1.9cqw; letter-spacing: .18em; color: rgba(255, 255, 255, .45);
}

/* a disclosure for the choices most people should not have to make */
.reveal { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); margin-bottom: 1.15rem; }
.reveal summary {
  list-style: none; cursor: pointer; padding: .95rem 1.5rem .95rem 0; position: relative;
  font-family: var(--geo); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.reveal summary::-webkit-details-marker { display: none; }
.reveal summary:hover { color: var(--ink); }
.reveal summary::after {
  content: ""; position: absolute; right: .3rem; top: 1.25rem;
  width: 7px; height: 7px; border-right: 1px solid var(--ink-muted); border-bottom: 1px solid var(--ink-muted);
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.reveal[open] summary::after { transform: rotate(-135deg); top: 1.45rem; }

.pages-summary {
  font-size: .92rem; color: var(--ink-soft);
  border-left: 2px solid var(--slate-soft); padding: .1rem 0 .1rem 1rem;
  margin: 0 0 1.5rem;
}
/* a mixed pair is deliberate, not an error: darken the rule, do not colour it */
.pages-summary.is-mixed { border-left-color: var(--ink); color: var(--ink); }

.paste-box {
  background: var(--slate); color: var(--paper);
  border-radius: var(--radius); padding: 1.25rem 1.4rem;
  display: grid; gap: .9rem;
}
/* The buyer pays on Etsy, not here, so the option they must select there is
   spelled out at the moment they copy: same words as the mode switch, same
   words as the Etsy variation. */
.etsy-pick {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  border-top: 1px solid rgba(248, 245, 238, .18);
  margin-top: .25rem; padding-top: .9rem;
  font-size: .9rem; color: rgba(248, 245, 238, .8);
}
.etsy-pick b {
  font-family: var(--geo); font-size: .78rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--paper);
  border: 1px solid rgba(248, 245, 238, .45); border-radius: 2px;
  padding: .28rem .6rem;
}

.paste-box code {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .86rem; line-height: 1.7; word-break: break-word;
  color: #fff;
}
/* The Etsy answers, one row per dropdown. The value is set in the SAME words as
   the Etsy option, so the buyer is matching text, not translating it. */
.etsy-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.etsy-picks li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .8rem;
  font-size: .9rem;
}
.etsy-picks .k {
  font-family: var(--geo); font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(248, 245, 238, .55); min-width: 10.5rem;
}
.etsy-picks .v { color: #fff; }
.paste-box .eyebrow { color: rgba(248, 245, 238, .55); margin: 0; }
/* .muted is an ink tone: on the slate panel it would be near-invisible */
.paste-box .muted { color: rgba(248, 245, 238, .62); }

/* ---------------------------------------------------------- elements ---- */
.piece-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 1rem;
  align-items: center;
}
.piece {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius);
  min-height: 86px; display: flex; align-items: center; justify-content: center;
  padding: .9rem;
}
.piece img { max-height: 52px; width: auto; }
.piece--wide { grid-column: span 2; }

/* ---------------------------------------------------------------- faq --- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.35rem 2.5rem 1.35rem 0; position: relative;
  font-family: var(--serif); font-size: 1.16rem; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .45rem; top: 1.85rem;
  width: 9px; height: 9px; border-right: 1px solid var(--ink-muted); border-bottom: 1px solid var(--ink-muted);
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 2.05rem; }
.faq .faq__body { padding: 0 2.5rem 1.5rem 0; color: var(--ink-soft); max-width: 68ch; }

/* --------------------------------------------------------- newsletter --- */
.signup { display: grid; gap: .75rem; max-width: 30rem; }
.signup__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.signup input[type="email"] {
  flex: 1 1 15rem;
  font-family: var(--sans); font-size: 1rem;
  border: 1px solid rgba(248, 245, 238, .35);
  background: rgba(248, 245, 238, .07);
  color: var(--paper);
  border-radius: var(--radius);
  padding: .9rem 1rem;
}
.signup input::placeholder { color: rgba(248, 245, 238, .5); }
.signup input:focus { outline: 2px solid var(--paper); outline-offset: 1px; }
.signup .fine { font-size: .82rem; color: rgba(248, 245, 238, .58); }
.signup__status { font-size: .92rem; min-height: 1.4em; }
.signup--paper input[type="email"] {
  border-color: var(--line); background: var(--card); color: var(--ink);
}
.signup--paper input::placeholder { color: var(--ink-muted); }
.signup--paper .fine { color: var(--ink-muted); }
.center .signup { margin-inline: auto; justify-items: center; }
.center .signup__row { justify-content: center; }

/* ------------------------------------------------------------ footer ---- */
.site-footer { background: var(--paper-warm); border-top: 1px solid var(--line); padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; }
.site-footer__grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  font-family: var(--geo); font-size: .68rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink); margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer a { font-size: .92rem; color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__base {
  border-top: 1px solid var(--line); padding-top: 1.5rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .82rem; color: var(--ink-muted);
}
.site-footer .wordmark { text-align: left; }
.site-footer .wordmark__rule { margin-inline: 0; }

/* ------------------------------------------------------- applies-to ----- */
/* Search traffic lands on deep pages, not the home page, so every page that
   describes only part of the range says up front which products it covers and
   links to the map. Without this a visitor reads about seven day layouts with
   no idea that six of them belong to a made-to-order product. */
.applies {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem;
  margin: 1.6rem 0 0; padding: .85rem 0 0;
  border-top: 1px solid var(--line);
}
.applies__label {
  font-family: var(--geo); font-size: .64rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted);
}
.applies a {
  font-family: var(--geo); font-size: .68rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--slate); border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .75rem; white-space: nowrap;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.applies a:hover { border-color: var(--slate); background: var(--card); }
.applies .applies__all { border-style: dashed; }

/* ------------------------------------------------------ product cards --- */
.products { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .products { grid-template-columns: 1fr; } }
.products--wide { grid-template-columns: 1fr; }

.product {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2.1rem); display: flex; flex-direction: column;
}
.product--accent { background: var(--paper-warm); }
.product__num {
  font-family: var(--geo); font-size: .64rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-muted);
  display: block; margin-bottom: .9rem;
}
.product h3 { margin-bottom: .4rem; }
.product__lede { color: var(--ink-soft); font-size: .98rem; margin-bottom: 1.25rem; }
.product__spec { width: 100%; border-collapse: collapse; font-size: .9rem; margin-bottom: 1.4rem; }
.product__spec th, .product__spec td {
  text-align: left; padding: .5rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
.product__spec th {
  font-family: var(--geo); font-size: .64rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; width: 8.5rem; padding-right: 1rem;
}
.product__spec td { color: var(--ink-soft); }
.product__spec tr:last-child th, .product__spec tr:last-child td { border-bottom: 0; }
.product .btn-row { margin-top: auto; }
.product__price { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); }

/* ------------------------------------------------------- the letter ----- */
/* A page from the planner, written by hand. Presented flat rather than in a
   tablet bezel: the words are the point, and a bezel would shrink them. */
.letter { margin: 0; max-width: 34rem; margin-inline: auto; }
/* The page is portrait, so it sits beside its own transcription rather than
   above it: a facsimile on one side, the same words in type on the other. */
.letter-split { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 860px) { .letter-split { grid-template-columns: 1fr; } }
.letter__frame {
  display: block; width: 100%; padding: 0; cursor: zoom-in;
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  background: var(--card); box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.letter__frame:hover { transform: translateY(-2px); }
.letter__frame img { width: 100%; display: block; }
.letter figcaption { margin-top: .9rem; font-size: .84rem; color: var(--ink-muted); text-align: center; }

/* The same words in type, always visible: handwriting is hard to read for
   plenty of people, and text a reader can see is text a search engine counts
   fully. It must stay word-for-word identical to the page in the image. */
.letter__transcript {
  padding-left: 1.35rem;
  border-left: 2px solid var(--slate-soft);
  color: var(--ink-soft);
  max-width: 34rem;
}
.letter__transcript p + p { margin-top: 1rem; }
.letter__transcript .letter__sign {
  font-family: var(--geo); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-muted); margin-top: 1.4rem;
}
@media (max-width: 860px) {
  .letter__transcript { margin-top: 1.75rem; font-size: .98rem; }
}

/* ---------------------------------------------------------- lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(45, 43, 41, .93);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
}
.lightbox[data-open="true"] { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: 4px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
/* A tall image (the Elements legend card) is wider on the page than 82vh would
   allow in here, so fitting it to the viewport SHRINKS it. Let those run to
   full width and scroll instead, or "enlarge" is a lie. */
.lightbox--tall { align-items: flex-start; overflow-y: auto; }
.lightbox--tall img { max-height: none; }
.lightbox figcaption {
  margin-top: 1rem; text-align: center; color: rgba(248, 245, 238, .8);
  font-family: var(--geo); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
}
.lightbox__close {
  /* fixed, not absolute: in a scrolling tall lightbox an absolute button
     scrolls away with the image and strands you */
  position: fixed; top: 1.25rem; right: 1.5rem; z-index: 1;
  background: none; border: 1px solid rgba(248, 245, 238, .35); border-radius: var(--radius);
  color: var(--paper); padding: .5rem .85rem; cursor: pointer;
  font-family: var(--geo); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
}
.lightbox__close:hover { border-color: var(--paper); }

/* ------------------------------------------------------------- misc ----- */
.pill {
  display: inline-block;
  font-family: var(--geo); font-size: .64rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .7rem; color: var(--ink-muted);
}
.note {
  border-left: 2px solid var(--slate-soft);
  padding: .2rem 0 .2rem 1.15rem;
  color: var(--ink-soft);
  font-size: .96rem;
}
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.steps li { counter-increment: step; position: relative; padding-left: 3rem; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -.15rem;
  font-family: var(--serif); font-size: 1.35rem; color: var(--slate-soft);
  width: 2rem; text-align: center;
}
.steps h4 { margin-bottom: .3rem; }
.steps p { font-size: .96rem; color: var(--ink-soft); margin: 0; }

table.spec { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.spec th, table.spec td { text-align: left; padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.spec th {
  font-family: var(--geo); font-size: .7rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink); white-space: nowrap; width: 34%;
}
table.spec td { color: var(--ink-soft); }