/* ————————————————————————————————————————————————
   THE CHAPBOOK — wren & the weather
   a hand-set letterpress chapbook / a letter left on
   a kitchen table. light, warm, paper. almost no motion.
   ———————————————————————————————————————————————— */

:root {
  --paper:      #f6efe3;   /* cream stock */
  --paper-hi:   #fbf6ea;
  --paper-card: #f2e9d6;   /* setlist / note cards */
  --ink:        #2e2419;   /* warm brown ink */
  --ink-soft:   #4d4030;
  --ink-faint:  rgba(46, 36, 25, 0.55);
  --rust:       #9c4a2f;   /* pressed-flower rust — the one accent */
  --ribbon-1:   #b0463c;   /* silk-red bookmark */
  --ribbon-2:   #8c2f27;
  --hairline:   rgba(46, 36, 25, 0.3);
  --stain:      rgba(139, 94, 45, 0.28);
  --serif:  "EB Garamond", "Iowan Old Style", Georgia, serif;
  --display: "Italiana", "EB Garamond", serif;
  --hand:   "Caveat", "Segoe Script", cursive;
  --measure: 640px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

html { overflow-x: hidden; }  /* keep decorative margins from adding a horizontal scroll */

body {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  line-height: 1.68;
  color: var(--ink);
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
  hanging-punctuation: first;
  background-color: var(--paper);
  /* laid-paper: faint horizontal laid lines, sparser vertical chain
     lines, a soft top light, and a warm vignette at the edges */
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(46, 36, 25, 0.02) 0px,
      rgba(46, 36, 25, 0.02) 1px,
      transparent 1px,
      transparent 4px),
    repeating-linear-gradient(
      90deg,
      rgba(46, 36, 25, 0.014) 0px,
      rgba(46, 36, 25, 0.014) 1px,
      transparent 1px,
      transparent 26px),
    radial-gradient(ellipse 120% 60% at 50% -5%, rgba(255, 252, 243, 0.85), transparent 70%),
    radial-gradient(ellipse 140% 120% at 50% 45%, transparent 55%, rgba(122, 92, 51, 0.07) 100%);
}

::selection { background: rgba(156, 74, 47, 0.22); }

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

/* ————— links: dotted baseline, underline draws in slowly ————— */

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(46, 36, 25, 0.4);
  background-image: linear-gradient(var(--rust), var(--rust));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 calc(100% + 1px);
  transition: background-size 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.6s ease;
}

a:hover,
a:focus-visible {
  color: var(--rust);
  background-size: 100% 1px;
}

a:focus-visible {
  outline: 1.5px dotted var(--rust);
  outline-offset: 3px;
}

/* ————— ribbon bookmark (reading progress) ————— */

.ribbon {
  position: fixed;
  top: 0;
  left: clamp(8px, 2.6vw, 30px);
  width: 9px;
  height: 0;
  z-index: 40;
  background: linear-gradient(90deg, var(--ribbon-1) 0%, var(--ribbon-2) 55%, #7c261f 100%);
  box-shadow: 1px 0 2px rgba(46, 36, 25, 0.28);
  pointer-events: none;
}

.ribbon::after {                 /* swallow-tail end */
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 100%;
  height: 10px;
  background: #7c261f;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 40%, 0 100%);
}

/* ————— the frontispiece (title page + contents) ————— */

.frontispiece {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(2.2rem, 6vh, 4.5rem) 24px 0;
  text-align: center;
}

.return-line {
  font-size: 0.78rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  margin-bottom: clamp(2.4rem, 7vh, 5rem);
}

.return-line a { border-bottom-color: rgba(46, 36, 25, 0.3); }

.press-line {
  font-size: 0.8rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.34em;
  color: var(--rust);
  margin-bottom: 1.4rem;
}

.masthead {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.35rem, 7.5vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-wrap: balance;
}

.masthead .amp {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--rust);
  font-size: 0.82em;
  letter-spacing: 0;
  padding: 0 0.06em;
}

.subtitle {
  font-style: italic;
  font-size: 1.02em;
  color: var(--ink-soft);
  margin-top: 1.1rem;
  text-wrap: balance;
}

.ornament {
  color: var(--rust);
  font-size: 1.5rem;
  margin: clamp(1.6rem, 4vh, 2.6rem) auto;
  line-height: 1;
}

/* table of contents — dotted leaders, page numbers */

.toc {
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}

.toc-heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 0.82rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.38em;
  text-align: center;
  color: var(--ink-faint);
  margin-bottom: 1.1rem;
}

.toc ol { list-style: none; }

.toc li + li { margin-top: 0.35rem; }

.toc a {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  border-bottom: none;
  background: none;
  padding: 0.15rem 0.2rem;
}

.toc-num {
  font-style: italic;
  color: var(--rust);
  min-width: 1.6em;
  text-align: right;
}

.toc-title {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  font-size: 1.02em;
  background-image: linear-gradient(var(--rust), var(--rust));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.toc a:hover .toc-title,
.toc a:focus-visible .toc-title { background-size: 100% 1px; color: var(--rust); }

.leader {
  flex: 1;
  border-bottom: 2px dotted rgba(46, 36, 25, 0.45);
  transform: translateY(-0.28em);
  min-width: 2.5em;
}

.toc-page {
  font-variant-numeric: oldstyle-nums;
  color: var(--ink-faint);
}

/* ————— the letter column ————— */

.letter {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vh, 4.5rem) 24px 2rem;
}

.passage { position: relative; }

.passage p + p,
.passage aside + p,
.passage div + p { margin-top: 1.15em; }

.section-divider {
  text-align: center;
  color: var(--rust);
  font-size: 1.35rem;
  margin: clamp(2.8rem, 7vh, 4.5rem) 0;
  letter-spacing: 0.5em;
  padding-left: 0.5em; /* optically centre the asterism */
}

.section-head {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.55rem, 3.4vw, 2.1rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-bottom: 1.5rem;
  scroll-margin-top: 2.5rem;
}

.section-head .head-num {
  font-family: var(--serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--rust);
  font-size: 0.78em;
}

.section-head .folio {
  margin-left: auto;
  font-family: var(--serif);
  font-size: 0.55em;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  text-transform: none;
}

section.passage { scroll-margin-top: 2rem; }

/* drop caps on section openings */

.drop::first-letter {
  font-family: var(--display);
  float: left;
  font-size: 3.55em;
  line-height: 0.78;
  padding: 0.08em 0.14em 0 0;
  color: var(--rust);
}

/* ————— margin notes ————— */
/* narrow: folded inline as indented asides.
   wide (≥960px): drift alongside the column, held at the
   vertical spot where they appear in the letter. */

.margin-note {
  display: block;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 1.1em 0 1.1em 2.2em;
  padding-left: 0.9em;
  border-left: 2px solid rgba(156, 74, 47, 0.45);
  max-width: 34ch;
}

.margin-note::before {
  content: "— ";
  color: var(--rust);
}

@media (min-width: 980px) { /* 960 leaves the side notes 4px off-canvas; they fold inline until they truly fit */
  .margin-note {
    position: absolute;      /* top:auto keeps its in-flow vertical spot */
    width: 158px;
    max-width: none;
    margin: 0;
    margin-top: -6.5em;      /* drift up beside the paragraph it follows */
    padding-left: 0;
    border-left: none;
    font-size: 0.88rem;
    line-height: 1.55;
  }
  .margin-note.side-right { left: calc(100% + 22px); transform: rotate(0.7deg); }
  .margin-note.side-left  { right: calc(100% + 22px); text-align: right; transform: rotate(-0.8deg); }
  .margin-note.side-left::before { content: ""; }
  .margin-note.side-left::after { content: " —"; color: var(--rust); }
}

/* ————— pressed flowers (margin botany) ————— */
/* herbarium scans on cream — multiply melts their paper into the page */

.flower {
  display: none;
  position: absolute;
  width: 120px;
  height: auto;
  mix-blend-mode: multiply;
  opacity: 0.9;
}

@media (min-width: 960px) {
  .flower { display: block; }
  .flower--sprig    { right: calc(100% + 20px); top: 9.5em; transform: rotate(8deg); }
  .flower--harebell { left: calc(100% + 26px); top: 15em; transform: rotate(-6deg); width: 112px; }
  .flower--frond    { right: calc(100% + 30px); top: 7em; transform: rotate(-4deg); width: 96px; }
}

/* ————— the setlist card (letterpress, deep impression) ————— */

.setlist-card {
  margin: 2.4rem auto 1.6rem;
  max-width: 480px;
  padding: clamp(1.6rem, 5vw, 2.4rem) clamp(1.2rem, 4vw, 2.1rem);
  background:
    radial-gradient(ellipse 130% 90% at 50% 8%, rgba(255, 252, 243, 0.65), transparent 60%),
    linear-gradient(168deg, #f4ecdb 0%, var(--paper-card) 58%, #ecdfc6 100%);
  border: 1px solid rgba(46, 36, 25, 0.28);
  box-shadow:
    inset 0 0 0 4px var(--paper-card),
    inset 0 0 0 5px rgba(46, 36, 25, 0.3),
    inset 0 2px 10px rgba(46, 36, 25, 0.07),
    0 2px 6px rgba(46, 36, 25, 0.14),
    0 12px 26px -18px rgba(46, 36, 25, 0.4);
  transform: rotate(-0.55deg);
  text-align: center;
}

.setlist-title {
  font-family: var(--serif);
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.5em;
  padding-left: 0.5em;   /* balance the tracking */
  font-size: 1.25rem;
  color: #3b2d1d;
  text-shadow: 0 1px 0 rgba(255, 253, 246, 0.85);   /* pressed in */
}

.setlist-sub {
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-faint);
  margin-top: 0.2rem;
}

.rule-ornament {
  display: flex;
  align-items: center;
  gap: 0.7em;
  color: var(--rust);
  margin: 1.15rem 0;
  font-size: 1.05rem;
  text-shadow: 0 1px 0 rgba(255, 253, 246, 0.8);
}

.rule-ornament span {
  flex: 1;
  border-bottom: 1px solid rgba(46, 36, 25, 0.35);
  box-shadow: 0 1px 0 rgba(255, 253, 246, 0.75);
}

.setlist {
  list-style: none;
  counter-reset: song;
}

.setlist li {
  counter-increment: song;
  padding: 0.62rem 0;
}

.setlist li + li { border-top: 1px dotted rgba(46, 36, 25, 0.22); }

.song-title {
  display: block;
  font-weight: 600;
  font-size: 1.12em;
  letter-spacing: 0.05em;
  color: #3b2d1d;
  /* deep-impression letterpress: darker ink pressed below the surface */
  text-shadow:
    0 1px 0 rgba(255, 253, 246, 0.9),
    0 0 1px rgba(46, 36, 25, 0.25);
}

.song-title::before {
  content: counter(song) " · ";
  font-weight: 400;
  font-style: italic;
  color: var(--rust);
  font-size: 0.85em;
}

.song-lyric {
  display: block;
  font-style: italic;
  font-size: 0.95em;
  color: var(--ink-soft);
  margin-top: 0.1rem;
  hanging-punctuation: first;
  text-indent: -0.42em;   /* hang the opening quote */
  text-shadow: 0 1px 0 rgba(255, 253, 246, 0.55);
}

.setlist-foot {
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ink-faint);
}

/* ————— the kitchen calendar ————— */

.ring-anchor { position: relative; }

.coffee-ring {
  position: absolute;
  top: -3.6rem;
  right: -2.6rem;
  width: 200px;
  height: 200px;
  transform: rotate(-10deg);
  mix-blend-mode: multiply;
  pointer-events: none;
  /* a real scanned double set-down, splash flecks included */
  background: url("img/coffee-ring.webp") center / contain no-repeat;
  opacity: 0.8;
}

.calendar-grid {
  width: 100%;
  margin: 2.2rem 0 0.6rem;
  border-collapse: collapse;
  table-layout: fixed;
  transform: rotate(-0.35deg);           /* ruled by hand, not by machine */
  font-variant-numeric: oldstyle-nums;
}

.calendar-grid caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.7rem;
}

.cal-month {
  font-family: var(--hand);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.cal-year {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-faint);
}

.calendar-grid th {
  font-weight: 500;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.2em;
  font-size: 0.85rem;
  color: var(--ink-faint);
  padding: 0.3rem 0.2rem;
  border-bottom: 2px solid rgba(46, 36, 25, 0.5);
}

.calendar-grid th abbr { text-decoration: none; }

.calendar-grid td {
  height: clamp(3rem, 9vw, 4rem);
  vertical-align: top;
  text-align: left;
  padding: 0.28rem 0.4rem;
  font-size: 0.98rem;
  color: var(--ink-soft);
  position: relative;
}

/* hand-ruled: thin uneven borders — weights and inks wobble */
.calendar-grid td { border: 1px solid rgba(46, 36, 25, 0.32); }
.calendar-grid td:nth-child(odd)  { border-bottom-color: rgba(46, 36, 25, 0.44); }
.calendar-grid td:nth-child(3n)   { border-right-width: 2px; border-right-color: rgba(46, 36, 25, 0.22); }
.calendar-grid tr:nth-child(even) td { border-top-color: rgba(46, 36, 25, 0.2); }
.calendar-grid tr:nth-child(3) td:nth-child(even) { border-bottom-width: 2px; border-bottom-color: rgba(46, 36, 25, 0.24); }
.calendar-grid td.blank {
  background:
    repeating-linear-gradient(45deg, transparent 0 7px, rgba(46, 36, 25, 0.05) 7px 8px);
}

/* a circled show-day, rust ink, drawn slightly off-true */

.day-btn {
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  position: relative;
  width: 2em;
  height: 2em;
  line-height: 1;
  text-align: center;
  margin: -0.2em 0 0 -0.45em;
}

.day-btn::after {                     /* the rust circle */
  content: "";
  position: absolute;
  inset: -0.1em 0 0 0;
  border: 2px solid var(--rust);
  border-radius: 54% 46% 50% 50% / 46% 54% 46% 54%;
  transform: rotate(-7deg);
  opacity: 0.9;
}

.day-btn:focus-visible {
  outline: 1.5px dotted var(--rust);
  outline-offset: 4px;
}

/* the note card that lifts */

.note-card {
  position: absolute;
  bottom: calc(100% - 0.2rem);
  left: 50%;
  width: min(220px, 62vw);
  padding: 0.7rem 0.85rem 0.75rem;
  background: linear-gradient(172deg, var(--paper-hi), var(--paper-card));
  border: 1px solid rgba(46, 36, 25, 0.3);
  box-shadow:
    0 1px 2px rgba(46, 36, 25, 0.14),
    0 10px 22px -12px rgba(46, 36, 25, 0.45);
  font-size: 0.85rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--ink-soft);
  text-align: left;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px) rotate(0.8deg);
  transition:
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.4s;
  pointer-events: none;
}

.note-card b {
  display: inline;
  font-style: normal;
  font-weight: 600;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.day-btn:focus-visible + .note-card,
.show-day.is-open .note-card {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) rotate(-1deg);
  transition:
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

.show-day.edge-right .note-card { left: auto; right: -0.4rem; transform: translate(0, 8px) rotate(0.8deg); }
.show-day.edge-right .day-btn:focus-visible + .note-card,
.show-day.edge-right.is-open .note-card { transform: translate(0, 0) rotate(-1deg); }

.show-day.edge-left .note-card { left: -0.4rem; transform: translate(0, 8px) rotate(-0.8deg); }
.show-day.edge-left .day-btn:focus-visible + .note-card,
.show-day.edge-left.is-open .note-card { transform: translate(0, 0) rotate(1deg); }

/* hover lift only where hover is real — on touch, a tap's sticky hover
   would otherwise hold a card open after it is tapped closed */
@media (hover: hover) {
  .show-day:hover .note-card {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) rotate(-1deg);
    transition:
      opacity 0.4s ease,
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s;
  }
  .show-day.edge-right:hover .note-card { transform: translate(0, 0) rotate(-1deg); }
  .show-day.edge-left:hover .note-card { transform: translate(0, 0) rotate(1deg); }
}

/* the dates written out beneath the grid */

.dates-written { margin-top: 1.6rem; }

.dates-head {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.24em;
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}

.dates-written ul { list-style: none; }

.dates-written li {
  font-family: var(--hand);
  font-size: 1.32rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.dates-written .dw-day { color: var(--rust); }

/* ————— photographs as album prints ————— */

.print {
  margin: clamp(2.6rem, 7vh, 4rem) auto;
  max-width: 480px;
}

.print--wide {
  max-width: none;
  width: min(92vw, 900px);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* portrait prints break the column more gently */
.print--wide.print--tall { width: min(86vw, 720px); }

.tilt-a .mount { transform: rotate(-0.7deg); }
.tilt-b .mount { transform: rotate(0.55deg); }

.mount {
  position: relative;
  background: var(--paper-hi);
  padding: clamp(10px, 1.6vw, 15px);
  box-shadow:
    0 1px 2px rgba(46, 36, 25, 0.18),
    0 14px 30px -18px rgba(46, 36, 25, 0.5);
}

.mount img {
  width: 100%;
  /* warm duotone: everything remembers the same lamplight */
  filter: sepia(0.3) contrast(1.05) brightness(1.04) saturate(0.86);
}

/* photo-corner pockets */

.corner {
  position: absolute;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #eadbbe, #e0cda9);
  box-shadow: 0 1px 2px rgba(46, 36, 25, 0.25);
  z-index: 2;
}

.c-tl { top: -5px; left: -5px;  clip-path: polygon(0 0, 100% 0, 0 100%); }
.c-tr { top: -5px; right: -5px; clip-path: polygon(0 0, 100% 0, 100% 100%); background: linear-gradient(225deg, #eadbbe, #e0cda9); }
.c-bl { bottom: -5px; left: -5px;  clip-path: polygon(0 0, 0 100%, 100% 100%); background: linear-gradient(45deg, #eadbbe, #e0cda9); }
.c-br { bottom: -5px; right: -5px; clip-path: polygon(100% 0, 100% 100%, 0 100%); background: linear-gradient(315deg, #eadbbe, #e0cda9); }

.print figcaption {
  padding: 0.7rem 0.35rem 0;
  text-align: center;
}

.print .hand {
  display: block;
  font-family: var(--hand);
  font-size: 1.34rem;
  line-height: 1.3;
  color: var(--ink-soft);
  transform: rotate(-0.6deg);
}

.print .credit {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.22em;
  color: var(--rust);
}

/* ————— write to us / sign-off ————— */

.address-block {
  margin: 1.6rem 0;
  padding: 1.1rem 1.3rem;
  border-left: 2px solid rgba(156, 74, 47, 0.5);
  font-size: 1.08em;
}

.post-address {
  font-weight: 500;
  letter-spacing: 0.03em;
}

.address-alt {
  font-style: italic;
  font-size: 0.9em;
  color: var(--ink-faint);
}

.valediction {
  margin-top: 2.6rem;
  font-style: italic;
}

.signature {
  font-family: var(--hand);
  font-weight: 600;
  font-size: 3rem;
  line-height: 1;
  color: var(--ink);
  transform: rotate(-2.5deg);
  width: max-content;
  padding: 0.2rem 0.6rem 0.4rem 1.4rem;
}

.postscript {
  margin-top: 2.2rem;
  font-style: italic;
  font-size: 0.95em;
  color: var(--ink-soft);
}

/* the seal, pressed beside the signature */
.wren-seal {
  width: 108px;
  height: auto;
  margin: -2.4rem 0 0 10.5rem;
  transform: rotate(7deg);
  mix-blend-mode: multiply;
}

/* ————— colophon ————— */

.colophon {
  max-width: var(--measure);
  margin: clamp(3rem, 9vh, 6rem) auto 0;
  padding: 0 24px clamp(3rem, 8vh, 5rem);
  text-align: center;
  border-top: none;
}

.colophon .ornament { margin-bottom: 1.6rem; }

.colophon-line {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.16em;
  font-size: 1.02rem;
}

.colophon-line a { border-bottom-color: rgba(156, 74, 47, 0.5); }

.colophon-pitch { color: var(--rust); }

.colophon-fine {
  margin-top: 1.1rem;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-wrap: balance;
}

/* ————— small screens ————— */

@media (max-width: 640px) {
  .ribbon { width: 6px; left: 5px; }
  .coffee-ring { right: -1.2rem; top: -2.8rem; width: 140px; height: 140px; }
  .calendar-grid td { padding: 0.2rem 0.25rem; }
  .note-card { font-size: 0.8rem; }
  .print--wide { width: calc(100vw - 26px); }
}

/* ————— the signature is stillness ————— */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}