/* DAWNT links: an apothecary link tree. One column of label-like links on cream paper, didone titles, and a quiet
   field of engraved plants living in the background (links.js builds it from img/field.svg). */
@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodoni-moda-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodoni-moda-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin-var.woff2") format("woff2-variations"), url("fonts/manrope-latin-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nothing You Could Do";
  src: url("fonts/nycd-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --paper is registered so a card can fade its own paper tone (leaf fills follow it) */
@property --paper { syntax: "<color>"; inherits: true; initial-value: #f2ecdf; }
:root {
  --paper: #f2ecdf;
  --paper-lift: #f7f2e7;
  --ink: #1d1a14;
  --sepia: #5b5040;          /* 6.6:1 on paper */
  --rule: rgba(29, 26, 20, .22);
  --rule-soft: rgba(29, 26, 20, .12);
  --sun: #f2e27a;            /* brand accent, same as the main site (hero/src/index.css) */
  --sun-paper: #e4cf70;      /* the accent shifted a few percent toward straw, so it sits with the cream paper */
  --straw: #d8c48a;          /* main site value */
  --serif: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hand: "Nothing You Could Do", cursive;
  --gut: max(18px, env(safe-area-inset-left), env(safe-area-inset-right));
  --ease: cubic-bezier(.45, .05, .25, 1);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); overflow-x: clip; }
body {
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* soft vignette + paper grain sit above everything (never interactive), so leaf fills always match the page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 49;
  pointer-events: none;
  background: radial-gradient(130% 90% at 50% 20%, transparent 60%, rgba(110, 88, 48, .06) 100%);
}
/* paper grain: inline SVG turbulence */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .09 0 0 0 0 .06 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
img { display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- the column: one stack of links, same on every screen ---------- */
.tree {
  position: relative;
  z-index: 1;
  max-width: 476px;
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) var(--gut) max(36px, env(safe-area-inset-bottom));
}

/* ---------- background field (built by links.js; never takes a pointer, the document listens instead) ---------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; }
.bg .pl, .bg .fs { position: absolute; left: 0; top: 0; will-change: transform; }
.bg .sd { transition: opacity .35s ease; }
.bg .sd.gone { opacity: 0; }
.bg .regrow .sd { transition: opacity 1.6s ease; }
.bg .fs { width: 28px; height: 30px; overflow: visible; fill: none; stroke: var(--ink); stroke-linecap: round; opacity: 0; }
/* plants are drawn at ~1x; when a box is scaled up the pens follow, so the clock's fine filaments get a little help */
.bg .art-clock .sd path { stroke-width: .42; }
.bg .art-clock .sd .sa { stroke-width: 1; }

/* ---------- header ---------- */
/* a soft paper halo keeps header and footer text clear of any plant line drifting behind it */
.head, .foot { text-shadow: 0 0 3px var(--paper), 0 0 8px var(--paper), 0 0 14px var(--paper); }
.head { position: relative; z-index: 4; text-align: center; }
.title {
  /* the main site's wordmark lockup (hero/src/App.tsx nav): Manrope 300, uppercase, .3em tracking.
     Reversible: the Bodoni title was font-family var(--serif), weight 500, opsz 22, 52px, .06em tracking. */
  font-family: var(--sans);
  font-weight: 300;
  text-transform: uppercase;
  font-size: 34px;
  line-height: 1;
  letter-spacing: .3em;
  margin: 0 0 0 .3em;         /* the left margin re-centres the tracked caps */
}
.handle, .tag, .sub, .small {
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--sepia);
}
.handle { margin-top: 8px; font-size: 11px; letter-spacing: .26em; line-height: 1.4; }
.tag { margin-top: 4px; font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; font-size: 15px; line-height: 1.4; }

.socials { list-style: none; display: flex; justify-content: center; gap: 2px; margin-top: 14px; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); transition: background-color .3s var(--ease); }
.socials a:hover { background: rgba(29, 26, 20, .06); }
.socials svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- link stack ---------- */
.links { position: relative; z-index: 4; list-style: none; display: grid; gap: 14px; margin-top: 26px; }
/* each link is an apothecary label: cream card, ink hairline, an inner rule 3px in, a dot at each inner corner */
.lbl {
  --paper: #f7f2e7;
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 10px 12px 10px 10px;
  background: var(--paper);
  border: 1px solid rgba(29, 26, 20, .62);
  border-radius: 2px;
  text-decoration: none;
  transition: --paper .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.lbl::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--rule);
  pointer-events: none;
}
.lbl::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  --d: radial-gradient(circle, rgba(29, 26, 20, .7) 1.1px, transparent 1.6px);
  background: var(--d) 0 0 / 6px 6px no-repeat, var(--d) 100% 0 / 6px 6px no-repeat, var(--d) 0 100% / 6px 6px no-repeat, var(--d) 100% 100% / 6px 6px no-repeat;
}
.lbl:hover { --paper: #fbf8f1; box-shadow: 0 6px 16px -12px rgba(29, 26, 20, .5); transform: translateY(-1px); }
.lbl:active { transform: translateY(0); }
.lbl:focus-visible { outline-offset: 3px; }
.lbl img {
  flex: none;
  width: 50px;
  height: 50px;
  padding: 2px;
  object-fit: cover;
  background: var(--paper);
  border: 1px solid rgba(29, 26, 20, .55);
}
.txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.t { position: relative; align-self: flex-start; font-family: var(--serif); font-size: 21px; line-height: 1.1; font-weight: 500; }
.sub { font-size: 9.5px; letter-spacing: .2em; line-height: 1.3; }
.lbl .sprig { flex: none; width: 46px; height: 54px; margin: -6px 0 -4px; }

/* featured: the new single. Slightly taller, and the only place the sun yellow appears */
.feat { min-height: 84px; gap: 14px; }
.feat img { width: 58px; height: 58px; }
.feat .t { font-style: italic; font-size: 27px; font-weight: 400; }
.feat .sub { order: -1; }
.act {
  flex: none;
  padding: 9px 12px 9px 13px;
  background: var(--sun-paper);
  border: 1px solid var(--ink);
  border-radius: 1px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .3s var(--ease);
}
.act span[aria-hidden] { display: inline-block; margin-left: 3px; font-family: var(--serif); font-weight: 400; transition: transform .3s var(--ease); }
.feat:hover .act { background: #ebd882; }
.feat:hover .act span[aria-hidden] { transform: translateX(3px); }

/* hand-drawn pencil underline, sketched in on hover/focus */
.ul {
  position: absolute;
  left: 0;
  top: calc(100% - 3px);
  width: 100%;
  height: 8px;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  pointer-events: none;
}
.ul path { vector-effect: non-scaling-stroke; transition: stroke-dashoffset .45s var(--ease); }
.ul path + path { stroke-width: .75; opacity: .6; transition-delay: .2s; }
.lbl:hover .ul path, .lbl:focus-visible .ul path { stroke-dashoffset: 0; }
/* the sprig sways from its base while hovered */
.lbl .plant { transform-box: view-box; transform-origin: 50% 100%; }
.lbl:hover .plant, .lbl:focus-visible .plant { animation: sway 3.4s ease-in-out infinite; }
@keyframes sway {
  0%, 100% { transform: rotate(0) skewX(0); }
  30% { transform: rotate(3deg) skewX(-1.5deg); }
  65% { transform: rotate(-2deg) skewX(1deg); }
}

/* ---------- footer ---------- */
.foot { position: relative; z-index: 4; margin-top: 36px; text-align: center; }
.foot::before { content: ""; display: block; width: 44px; height: 1px; margin: 0 auto 22px; background: var(--rule); }
.site { font-family: var(--serif); font-style: italic; font-size: 19px; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.site:hover { background-size: 100% 2px; }
.small { margin-top: 14px; font-size: 9px; letter-spacing: .2em; }

/* phones: the featured kicker keeps to one line (the date is the part that matters) */
@media (max-width: 439px) { .feat .ns { display: none; } }
@media (max-width: 360px) {
  .lbl { gap: 11px; }
  .t { font-size: 19px; }
  .feat .t { font-size: 24px; }
  .act { padding: 8px 9px; font-size: 12px; }
}

/* ---------- pencil draw-on (html.draw is set by the inline head script) ---------- */
.draw .art { opacity: 0; animation: art-show 0s 3s forwards; }   /* fallback if links.js never runs */
.draw .art.ready { opacity: 1; animation: none; }
@keyframes art-show { to { opacity: 1; } }
.art.ready:not(.done) .c { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.art.ready:not(.done) .h, .art.ready:not(.done) .k, .art.ready:not(.done) .w, .art.ready:not(.done) .v, .art.ready:not(.done) .a, .art.ready:not(.done) .s, .art.ready:not(.done) .sd { opacity: 0; }
.art.on:not(.done) .c { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t, 1s) var(--ease) var(--d, 0s); }
.art.on:not(.done) .v, .art.on:not(.done) .a { opacity: 1; transition: opacity 1s ease var(--dv, .6s); }
.art.on:not(.done) .h, .art.on:not(.done) .k, .art.on:not(.done) .w, .art.on:not(.done) .s { opacity: 1; transition: opacity 1.4s ease var(--dh, .9s); }
.art.on:not(.done) .sd { opacity: 1; transition: opacity .8s ease var(--d, 1s); }

/* button sprigs are drawn at display size with the tone stripped: contour and vein only */
.art.sprig .c { stroke-width: .75; }
.art.sprig .t { stroke-width: .5; }
.art.sprig .v { stroke-width: .45; }
.art.sprig .s { stroke-width: 1; }
/* clover heads and yarrow corymbs are clusters of ~1px florets: hairline pens keep them a tone, not a blot */
.art-clover.sprig .c, .art-yarrow.sprig .c { stroke-width: .5; }
.art-clover.sprig .t, .art-yarrow.sprig .t { stroke-width: .25; }
.art-clover.sprig .v, .art-yarrow.sprig .v { stroke-width: .3; }

@media (prefers-reduced-motion: reduce) {
  .lbl:hover .plant, .lbl:focus-visible .plant { animation: none; }
  .ul path, .lbl, .act, .act span[aria-hidden] { transition: none; }
}

/* art:start  (pen weights, in plate units ~ CSS px) */
.art { display: block; overflow: visible; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.art .p { fill: var(--paper); }
.art .c { stroke-width: .8; }
.art .t { stroke-width: .5; }
.art .v { stroke-width: .42; }
.art .h { stroke-width: .34; }
.art .k { stroke-width: .5; }
.art .w { fill: var(--sepia); stroke: none; opacity: .17; }
.art .s { stroke-width: .9; }
.art .a { fill: var(--ink); stroke: none; }
.art .sd path { stroke-width: .3; }
.art .sd .sa { stroke-width: .9; }
.art .sd.bk > path { opacity: .42; }
.art .sd.fc > path { opacity: .7; }
.art .pf .pr { stroke-width: .45; }
.art .pf .pb { stroke-width: .42; }
.art .sd > path { transition: opacity .26s ease; }
.art .sd.fl > path { opacity: 0; }
.art .sd use { opacity: 0; transition: opacity .26s ease; }
.art .sd.fl use { opacity: 1; }
/* art:end */

/* background plants sit at low contrast: a solid ink line at .17 over paper still leaves the sepia text above
   4.5:1 (the cards are opaque, so link text never sits on a plant). Declared last so it outranks the draw-on. */
.bg .art.pl { opacity: .17; }
.bg .art.pl.m { opacity: .27; }      /* desktop margins: nothing to read out there */