/* ==========================================================================
   Warm paper / scrapbook — shared stylesheet
   Used by: index.html, guides.html, contact.html, 404.html, guides/*.html

   Structure
     1. Tokens
     2. Reset & base
     3. Typography
     4. Layout utilities
     5. Paper effects (tape, torn edge, highlighter, polaroid)
     6. Header & nav
     7. Buttons
     8. Hero & page header
     9. Two paths, timeline, big line
    10. Cards
    11. Guide library (search, chips, grid)
    12. Article body
    13. Contact
    14. Closing CTA & footer
    15. Responsive
    16. Motion & print preferences
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
  /* palette — change --accent + --accent-dk + --accent-wash to reskin the site */
  --bg: #f7f4ee;
  --paper: #ede7da;
  --card: #fffdf8;
  --accent: #476e61;
  --accent-dk: #39584d;
  --accent-wash: rgba(71, 110, 97, 0.2);
  --dusk: #8aa6b8;
  /* --ochre and --clay are decorative (tape, stickers, borders). Their -text
     twins are darkened to clear WCAG AA against the paper backgrounds. */
  --ochre: #d9a441;
  --ochre-text: #8d651c;
  --clay: #c98b7a;
  --clay-text: #985c4a;
  --ink: #2c2a26;
  --ink-soft: #6e675d;
  --line: #ded5c4;

  /* type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hand: "Caveat", "Bradley Hand", cursive;

  /* spacing scale (4px base) */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;

  /* ragged edges for .torn dividers */
  --tear-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 V11 L14 14 L27 6 L44 13 L60 7 L76 15 L92 8 L108 14 L124 5 L140 12 L157 7 L172 15 L188 9 L204 13 L220 6 L236 13 L252 8 L268 14 L284 9 L300 11 V30 Z' fill='%23000'/%3E%3C/svg%3E");
  --tear-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='30' preserveAspectRatio='none'%3E%3Cpath d='M0 0 V19 L17 16 L34 25 L52 17 L70 24 L88 15 L105 22 L123 16 L141 25 L158 18 L176 23 L193 15 L211 22 L229 17 L247 25 L264 16 L282 21 L299 15 L317 23 L340 19 V0 Z' fill='%23000'/%3E%3C/svg%3E");

  /* misc */
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(44, 42, 38, 0.08);
  --shadow-lift: 0 18px 40px rgba(44, 42, 38, 0.13);
  --wrap: 1120px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* keeps form controls and scrollbars light even in dark OS mode */
  color-scheme: light;
}

/* ------------------------------------------------------- 2. Reset & base */

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--bg);
  /* hand-made paper grain, generated with SVG turbulence — no image request */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--accent);
  text-decoration-color: var(--accent-wash);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent-dk);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: var(--s3) var(--s5);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}

.skip:focus {
  transform: translate(-50%, 0);
  color: #fff;
}

/* -------------------------------------------------------- 3. Typography */

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
}

h2 {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
}

h3 {
  font-size: 1.25rem;
  line-height: 1.25;
}

p {
  text-wrap: pretty;
}

.lead {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--ink-soft);
  max-width: 34em;
}

/* handwritten accent */
.hand {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--clay-text);
}

.eyebrow {
  display: inline-block;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ochre-text);
  letter-spacing: 0.01em;
  margin-bottom: var(--s2);
}

/* ------------------------------------------------- 4. Layout utilities */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.band {
  background: var(--paper);
}

.center {
  text-align: center;
}

.sec-head {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--s7);
}

.sec-head p {
  color: var(--ink-soft);
  margin-top: var(--s4);
}

/* small spacing overrides, so pages stay free of inline styles */
.pt-0 {
  padding-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mt-4 {
  margin-top: var(--s4);
}

.mt-5 {
  margin-top: var(--s5);
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* side-by-side cards that should share a height instead of centering */
.grid2.stretch {
  align-items: stretch;
  gap: var(--s5);
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s5);
}

/* ------------------------------------------------- 5. Paper effects */

/* washi tape strip pinned to the top edge of a block */
.tape {
  position: relative;
}

.tape::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 116px;
  height: 30px;
  transform: translateX(-50%) rotate(-2.4deg);
  background: repeating-linear-gradient(
    48deg,
    rgba(217, 164, 65, 0.55) 0 8px,
    rgba(217, 164, 65, 0.3) 8px 16px
  );
  box-shadow: 0 1px 3px rgba(44, 42, 38, 0.1);
  border-radius: 1px;
}

.tape.sage::before {
  background: repeating-linear-gradient(
    48deg,
    rgba(79, 122, 107, 0.42) 0 8px,
    rgba(79, 122, 107, 0.22) 8px 16px
  );
}

.tape.dusk::before {
  background: repeating-linear-gradient(
    48deg,
    rgba(138, 166, 184, 0.5) 0 8px,
    rgba(138, 166, 184, 0.26) 8px 16px
  );
}

/* Torn-paper divider. The ragged edge is an SVG polyline used as a mask —
   irregular on purpose, so it reads as torn rather than die-cut. First and
   last vertex share the same y so the tile repeats without a seam. */
.torn {
  height: 26px;
  background: var(--paper);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 300px 100%;
  mask-size: 300px 100%;
  -webkit-mask-image: var(--tear-top);
  mask-image: var(--tear-top);
}

/* .flip closes a .band section: the tear runs along the bottom edge and uses
   a different rhythm, so the two never look mirrored */
.torn.flip {
  -webkit-mask-image: var(--tear-bottom);
  mask-image: var(--tear-bottom);
  -webkit-mask-size: 340px 100%;
  mask-size: 340px 100%;
}

/* highlighter swipe behind a word */
.mark {
  position: relative;
  color: var(--accent);
  z-index: 0;
}

.mark::after {
  content: "";
  position: absolute;
  inset: auto -0.07em 0.1em;
  height: 0.34em;
  background: var(--accent-wash);
  border-radius: 0.5em 0.9em 0.4em 0.8em;
  transform: rotate(-0.7deg);
  z-index: -1;
}

/* polaroid photo — fit-content so absolutely positioned stickers hang off the
   photo itself rather than off the full grid column */
.photo-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  width: fit-content;
  margin-inline: auto;
}

.polaroid {
  position: relative;
  max-width: 340px;
  background: #fff;
  padding: 14px 14px 54px;
  border-radius: 3px;
  box-shadow: 0 16px 36px rgba(44, 42, 38, 0.15), 0 2px 6px rgba(44, 42, 38, 0.08);
  transform: rotate(-2.4deg);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.polaroid::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 42%;
  width: 108px;
  height: 34px;
  transform: translateX(-50%) rotate(4deg);
  background: repeating-linear-gradient(
    48deg,
    rgba(201, 139, 122, 0.5) 0 8px,
    rgba(201, 139, 122, 0.28) 8px 16px
  );
  box-shadow: 0 1px 3px rgba(44, 42, 38, 0.08);
}

.polaroid img {
  width: 100%;
  border-radius: 1px;
  background: var(--line);
}

.polaroid:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.polaroid .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  text-align: center;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ink-soft);
}

/* sticker badge floating over a photo */
.sticker {
  position: absolute;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(44, 42, 38, 0.18);
  white-space: nowrap;
}

.sticker.s1 {
  bottom: 12%;
  left: -4%;
  background: var(--accent);
  transform: rotate(-5deg);
}

/* ------------------------------------------------- 6. Header & nav */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 244, 238, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px dashed var(--line);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s4);
}

.brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.brand .dot {
  color: var(--accent);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.8rem);
}

.nav a {
  position: relative;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 0.2rem;
}

.nav a:hover {
  color: var(--ink);
}

.nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}

.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
  transform: rotate(-0.8deg);
}

/* .nav a is more specific than .btn, so restate what the button needs */
.nav a.btn {
  color: #fff;
  font-weight: 600;
}

.nav a.btn:hover {
  color: #fff;
}

.nav a.btn::after {
  display: none;
}

/* ---------------------------------------------------- 7. Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  background: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 0.92rem 1.7rem;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--accent-dk);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.btn:hover {
  color: #fff;
  background: var(--accent-dk);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--accent-dk);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--accent-dk);
}

.btn.ghost {
  color: var(--accent);
  background: transparent;
  box-shadow: 0 3px 0 var(--line);
}

.btn.ghost:hover {
  color: var(--accent-dk);
  background: var(--card);
  box-shadow: 0 5px 0 var(--line);
}

.btn.sm {
  padding: 0.7rem 1.2rem;
  font-size: 0.88rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s6);
}

.sec-head + .cta-row,
.cta-row.center,
.center .cta-row {
  justify-content: center;
}

/* ------------------------------------------- 8. Hero & page header */

.hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.hero .hi {
  display: block;
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--clay-text);
  transform: rotate(-2deg);
  transform-origin: left center;
  margin-bottom: var(--s2);
}

.hero h1 {
  margin-bottom: var(--s5);
}

.tagline {
  display: inline-block;
  font-size: 0.95rem;
  color: var(--ink-soft);
  border: 1.5px dashed var(--clay);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  margin-bottom: var(--s5);
}

.ps {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--s5);
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--clay-text);
  text-decoration: none;
  transform: rotate(-1deg);
}

.ps:hover {
  color: var(--accent);
}

.ps span {
  transition: transform 0.25s var(--ease);
}

.ps:hover span {
  transform: translateX(5px);
}

/* small inline photo shown only on narrow screens */
.mobile-face {
  display: none;
  margin: 0 0 var(--s5);
}

.mobile-face .polaroid {
  max-width: 168px;
  padding: 9px 9px 34px;
}

.mobile-face .polaroid .cap {
  font-size: 1rem;
  bottom: 9px;
}

.mobile-face .polaroid::before {
  width: 74px;
  height: 24px;
  top: -11px;
}

/* compact header for interior pages */
.pagehead {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
  max-width: 46rem;
}

.pagehead .hi {
  display: block;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--clay-text);
  transform: rotate(-1.6deg);
  transform-origin: left center;
}

.pagehead h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  margin-block: var(--s2) var(--s4);
}

/* -------------------------------- 9. Two paths, timeline, big line */

/* the "what you were sold / what actually happens" comparison */
.pathcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--shadow);
}

.pathcard:first-child {
  transform: rotate(-0.5deg);
}

.pathcard:last-child {
  transform: rotate(0.5deg);
}

.pathcard h3 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ochre-text);
  margin-bottom: var(--s4);
}

.pathcard:last-child h3 {
  color: var(--accent);
}

.path {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0;
  margin-bottom: var(--s4);
}

.path li {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
}

.path li + li::before {
  content: "\2192";
  color: var(--ink-soft);
  font-family: var(--sans);
  font-weight: 300;
  margin-inline: 0.55rem;
}

.pathcard p {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* chronology card: a list where the sequence is the point */
.timeline {
  list-style: none;
  padding: var(--s5);
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: rotate(-0.6deg);
}

.timeline li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--s4);
  padding-block: var(--s3);
}

.timeline li + li {
  border-top: 1px dashed var(--line);
}

.timeline .when {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--clay-text);
  line-height: 1.3;
}

.timeline .what {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* a statement that lands on its own, with nothing after it */
.bigline {
  max-width: 32ch;
  margin: var(--s7) auto 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  text-wrap: balance;
}

/* ------------------------------------------------------ 10. Cards */

.fcard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.fcard:nth-child(odd) {
  transform: rotate(-0.45deg);
}

.fcard:nth-child(even) {
  transform: rotate(0.5deg);
}

.fcard:hover {
  transform: rotate(0deg) translateY(-5px);
  box-shadow: var(--shadow-lift);
}

.fcard .ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--accent-wash);
  font-size: 1.35rem;
  margin-bottom: var(--s4);
}

.fcard:nth-child(2) .ic {
  background: rgba(217, 164, 65, 0.22);
}

.fcard:nth-child(3) .ic {
  background: rgba(138, 166, 184, 0.24);
}

.fcard h3 {
  margin-bottom: var(--s3);
}

.fcard p {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------------------------------------------- 11. Guide library */

.filters {
  display: grid;
  gap: var(--s5);
  margin-bottom: var(--s6);
}

.flabel {
  display: block;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ochre-text);
  margin-bottom: var(--s2);
}

.search-field {
  position: relative;
  max-width: 30rem;
}

.search-field .search-icon {
  position: absolute;
  left: 1.05rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  pointer-events: none;
}

.search-field input {
  width: 100%;
  font-size: 1rem;
  font-weight: 300;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.85rem 1.2rem 0.85rem 3rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.search-field input::placeholder {
  color: var(--ink-soft);
  opacity: 0.75;
}

.search-field input:hover {
  border-color: var(--clay);
}

.search-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.chip {
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink-soft);
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease),
    border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.chip:hover {
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-1px);
}

.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 500;
}

.chips.format .chip[aria-pressed="true"] {
  background: var(--dusk);
  border-color: var(--dusk);
  color: var(--ink);
}

.gcount {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ink-soft);
  margin-bottom: var(--s4);
}

.glib {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s5);
}

.gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}

.gcard:nth-child(odd) {
  transform: rotate(-0.4deg);
}

.gcard:nth-child(even) {
  transform: rotate(0.45deg);
}

.gcard:hover {
  color: inherit;
  transform: rotate(0deg) translateY(-5px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}

.gcard h3 {
  font-size: 1.14rem;
}

.gcard p {
  font-size: 0.93rem;
  color: var(--ink-soft);
  flex: 1;
}

.gtags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.gtag {
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  background: var(--accent-wash);
  color: var(--accent-dk);
}

.gtag.format {
  background: rgba(138, 166, 184, 0.26);
  color: #3f5665;
}

.gcard .read {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--accent);
  text-decoration: none;
}

/* stretch the single real link over the whole card, so the card is clickable
   without wrapping everything in an <a> */
.gcard .read::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.gcard .read span {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

.gcard:hover .read span {
  transform: translateX(5px);
}

/* written but not published yet: still filterable, not clickable */
.gcard.soon {
  border-style: dashed;
  box-shadow: none;
  background: transparent;
}

.gcard.soon:hover {
  transform: rotate(0deg);
  border-color: var(--line);
  box-shadow: none;
}

.gcard.soon h3,
.gcard.soon p {
  opacity: 0.62;
}

.gtag.pending {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--ink-soft);
}

.search-empty {
  display: none;
  text-align: center;
  padding: var(--s8) var(--s4);
}

.search-empty strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  margin-bottom: var(--s2);
}

.search-empty span {
  color: var(--ink-soft);
}

/* is-empty is toggled by guides.js */
.glib.is-empty {
  display: none;
}

.glib.is-empty + .search-empty {
  display: block;
}

/* ------------------------------------------------ 12. Article body */

.guidewrap {
  width: min(100% - 2.5rem, 46rem);
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 3.5rem) var(--s8);
}

.guideback {
  display: inline-block;
  font-size: 0.92rem;
  color: var(--ink-soft);
  text-decoration: none;
  margin-bottom: var(--s5);
}

.guideback:hover {
  color: var(--accent);
}

.guidehead h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: var(--s4);
}

.guidehead .gtags {
  margin-bottom: var(--s6);
}

.guidebody > * + * {
  margin-top: var(--s5);
}

.guidebody h2 {
  font-size: 1.65rem;
  margin-top: var(--s7);
}

.guidebody h3 {
  font-size: 1.2rem;
  margin-top: var(--s6);
}

.guidebody ul,
.guidebody ol {
  padding-left: 1.35rem;
}

.guidebody li + li {
  margin-top: var(--s2);
}

.guidebody strong {
  font-weight: 600;
}

.gcallout {
  background: var(--card);
  border-left: 4px solid var(--ochre);
  border-radius: 4px var(--radius-sm) var(--radius-sm) 4px;
  padding: var(--s4) var(--s5);
  box-shadow: var(--shadow);
}

/* small handwritten label that sits above a section heading */
.kicker {
  display: block;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ochre-text);
  margin-top: var(--s7);
  margin-bottom: calc(var(--s2) * -1);
}

.kicker + h2 {
  margin-top: var(--s2);
}

/* section divider inside an article */
hr.rule {
  border: 0;
  height: 1px;
  background: var(--line);
  margin-block: var(--s6);
}

/* aside boxes: neutral, quiet, warning */
.tip {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s4) var(--s5);
  font-size: 0.95rem;
}

.tip.calm {
  background: rgba(71, 110, 97, 0.07);
  border-color: rgba(71, 110, 97, 0.25);
}

.tip.warn {
  background: rgba(217, 164, 65, 0.1);
  border-color: rgba(217, 164, 65, 0.4);
}

/* numbered steps where the sequence is the point */
ol.steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
}

ol.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.6rem;
  min-height: 1.9rem;
}

ol.steps li + li {
  margin-top: var(--s4);
}

ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-dk);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.9rem;
}

/* grid of short blocks, for enumerations that are not steps */
.cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s4);
}

.cardgrid > div {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s4);
  font-size: 0.93rem;
}

.cardgrid strong {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: var(--s2);
}

/* a hole only Angelica can fill: a real number, a real moment, a real name.
   Deliberately loud so it cannot be published by accident. */
.gap {
  background: rgba(217, 164, 65, 0.28);
  border-bottom: 2px dotted var(--ochre-text);
  color: var(--ink);
  padding: 0.05em 0.3em;
  border-radius: 3px;
  font-size: 0.94em;
}

.codeblock {
  position: relative;
}

.guidebody pre {
  background: #f1ece1;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--s5);
  overflow-x: auto;
}

.guidebody code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
}

.copy-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}

.copy-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* no guide uses a table yet. Kept so the first one that does renders correctly:
   wrap it in <div class="tablewrap"> so it scrolls instead of breaking the page. */
.tablewrap {
  overflow-x: auto;
}

.guidebody table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.guidebody th,
.guidebody td {
  border: 1px solid var(--line);
  padding: 0.7rem 0.9rem;
  text-align: left;
}

.guidebody th {
  background: var(--paper);
  font-weight: 600;
}

/* ------------------------------------------------------ 13. Contact */

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.contactbox {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--shadow);
}

.contactbox + .contactbox {
  margin-top: var(--s5);
}

.contactbox h3 {
  margin-bottom: var(--s3);
}

.contactbox p {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.mailbox {
  text-align: center;
  padding: var(--s6) var(--s5);
  /* follows the reader down the list of enquiry types on desktop */
  position: sticky;
  top: 6rem;
}

/* .eyebrow is inline-block by default, which would sit it next to the address */
.mailbox .eyebrow {
  display: block;
}

.mailbox a.mail {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.15rem, 3vw, 1.7rem);
  word-break: break-word;
  text-decoration: none;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  margin-top: var(--s5);
}

.socials a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  text-decoration: none;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.socials a:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* ------------------------------------- 14. Closing CTA & footer */

.closing {
  position: relative;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--s5);
  box-shadow: var(--shadow);
  transform: rotate(-0.5deg);
}

.closing .big {
  display: block;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ochre-text);
  margin-bottom: var(--s2);
}

.closing p {
  color: var(--ink-soft);
  max-width: 32em;
  margin-inline: auto;
  margin-top: var(--s4);
}

.closing .cta-row {
  justify-content: center;
}

footer.sitefoot {
  border-top: 1px dashed var(--line);
  padding-block: var(--s6);
  text-align: center;
}

footer.sitefoot .handle {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.35rem;
  text-decoration: none;
}

footer.sitefoot .copyright {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: var(--s2);
}

/* --------------------------------------------------- 15. Responsive */

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
  }

  /* direct child only — .mobile-face holds a .photo-wrap of its own */
  .hero > .photo-wrap {
    display: none;
  }

  .mobile-face {
    display: block;
  }

  .grid2 {
    grid-template-columns: 1fr;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .mailbox {
    position: static;
  }
}

@media (max-width: 760px) {
  .topbar .wrap {
    flex-direction: column;
    gap: var(--s3);
    padding-block: var(--s3);
  }

  .nav {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--s4);
  }

  .sticker.s1 {
    left: 0;
  }
}

@media (max-width: 560px) {
  .cta-row .btn {
    width: 100%;
  }

  .glib {
    grid-template-columns: 1fr;
  }

  .timeline li {
    grid-template-columns: 1fr;
    gap: var(--s1);
  }

  .closing {
    transform: none;
  }
}

/* ------------------------------------- 16. Motion & print preferences */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* flatten every decorative tilt so nothing wobbles */
  .polaroid,
  .hero .hi,
  .pagehead .hi,
  .ps,
  .closing,
  .fcard,
  .gcard,
  .pathcard,
  .timeline,
  .mark::after {
    transform: none;
  }

  .polaroid:hover,
  .fcard:hover,
  .gcard:hover {
    transform: none;
  }
}

@media print {
  .topbar,
  .torn,
  .cta-row,
  .sticker {
    display: none;
  }

  body {
    background: #fff;
  }
}