/* ==========================================================
   hannah leigh · brand.css
   nameplate · rules · cards · art that breaks the grid · the firefly
   Load the fonts, then this file. Everything else is markup.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500&family=Montserrat:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* paper and ink */
  --cream: #FFFCF9;
  --ink:   #1A1A1A;
  --rule:  #000000;

  /* seasonal set: FALL (swap the five accents by season; cream, ink, rule never change) */
  --accent-1: #C9798F;   /* anemone */
  --accent-2: #EDE3A8;   /* petal */
  --accent-3: #8B5A2B;   /* cattail */
  --accent-4: #C9A24A;   /* wheat (glyphs, planets, small marks) */
  --accent-5: #6B7A3A;   /* olive */

  /* type */
  --nameplate: 'UnifrakturMaguntia', 'Old London', serif;   /* nameplate only, lowercase only */
  --display:   'Bodoni Moda', 'against', 'Didot', serif;    /* headlines */
  --body:      'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* rules and cards */
  --hairline: 0.5px;
  --section-rule: 2px;
  --radius: 22px;
  --gutter: 18px;
  --margin: 48px;
}

/* ---------- base ---------- */
html { background: var(--cream); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 0.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 1px; }

.page { position: relative; max-width: 1056px; margin: 0 auto; padding: var(--margin); overflow: hidden; }

/* ---------- rules ---------- */
.rule        { border: 0; border-top: var(--hairline) solid var(--rule); margin: 0; }
.rule-thick  { border: 0; border-top: var(--section-rule) solid var(--rule); margin: 0; }
.rule-double { border: 0; border-top: var(--section-rule) solid var(--rule); position: relative; margin: 0; }
.rule-double::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: var(--hairline) solid var(--rule); }
.rule-double.bottom { border-top: var(--hairline) solid var(--rule); }
.rule-double.bottom::after { top: 3px; border-top: var(--section-rule) solid var(--rule); }

/* ---------- masthead ---------- */
.masthead { text-align: center; position: relative; }
.masthead .dateline {
  display: flex; justify-content: space-between;
  font-family: var(--body); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 12px 0 0;
}
.nameplate {
  font-family: var(--nameplate);
  font-weight: 400;
  text-transform: lowercase;
  font-size: clamp(56px, 10vw, 120px);
  line-height: 1;
  margin: 18px 0 10px;
  display: inline-block;
  position: relative;
}
.tagline { font-family: var(--body); font-style: italic; font-size: 14px; letter-spacing: 0.02em; margin: 0 0 18px; }
.nav {
  font-family: var(--body); font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  text-align: center; padding: 12px 0;
}
.nav a { text-decoration: none; margin: 0 10px; }

/* ---------- the firefly (signature) ----------
   One per piece. Sits just past the last letter of the nameplate, tilted, with a contact shadow.
   Never aligned, never straight. Vary --tilt per page between -33deg and 33deg. */
.firefly {
  --tilt: -22deg;
  position: absolute;
  right: -0.42em;        /* relative to nameplate font-size */
  bottom: 0.18em;
  width: 0.5em; height: auto;
  transform: rotate(var(--tilt));
  filter: drop-shadow(2px 4px 4px rgba(26, 20, 10, 0.28));
  pointer-events: none;
  transform-origin: 50% 60%;
  animation: firefly-rest 7s ease-in-out infinite;
  transition: transform 0.9s cubic-bezier(.2,.7,.2,1), filter 0.9s ease;
}
/* at rest: the faintest breathing, like wings settling */
@keyframes firefly-rest {
  0%, 100% { transform: rotate(var(--tilt)) translate(0, 0); }
  50%      { transform: rotate(calc(var(--tilt) + 2deg)) translate(0.5px, -1px); }
}
/* it lands when the page opens: fades in from a little above, settles, then rests */
@keyframes firefly-land {
  0%   { opacity: 0; transform: rotate(calc(var(--tilt) - 12deg)) translate(10px, -22px); filter: drop-shadow(0 14px 10px rgba(26,20,10,.12)); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: rotate(var(--tilt)) translate(0, 0); filter: drop-shadow(2px 4px 4px rgba(26,20,10,.28)); }
}
/* when the cursor comes near: it lifts, glows, and settles back (JS toggles .lift) */
.firefly.lift {
  animation: none;
  transform: rotate(calc(var(--tilt) - 10deg)) translate(6px, -14px);
  filter: drop-shadow(0 10px 8px rgba(26, 20, 10, 0.18)) drop-shadow(0 0 10px rgba(237, 227, 168, 0.95));
}
@media (prefers-reduced-motion: reduce) { .firefly, .firefly.arrive { animation: none; transition: none; opacity: 1; } }

/* ---------- type ---------- */
h1, h2, h3, .headline { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0 0 0.35em; }
h1, .headline { font-size: clamp(32px, 5vw, 46px); }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
.deck { font-style: italic; font-size: 15px; line-height: 1.5; margin: 0 0 10px; }
.byline, .label, .folio {
  font-family: var(--body); font-weight: 500; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
}
p { margin: 0 0 1em; }
.small { font-size: 12px; }

/* ---------- columns ---------- */
.columns { column-gap: var(--gutter); column-rule: var(--hairline) solid var(--rule); }
.columns-2 { column-count: 2; }
.columns-3 { column-count: 3; }
@media (max-width: 720px) { .columns-2, .columns-3 { column-count: 1; column-rule: 0; } }

/* ---------- cards (the planner) ---------- */
.card {
  background: var(--cream);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 24px;
  position: relative;
}
.card.small { border-radius: 12px; padding: 12px 16px; }

/* ---------- art ----------
   Layer 1: behind the cards, bleeding off the edge.  Layer 3: in front, at most one or two per page. */
.art { position: absolute; pointer-events: none; z-index: 0; }
.art.behind { z-index: 1; }   /* above the rules, below the text */
.art.front  { z-index: 3; }
.page > :not(.art) { position: relative; z-index: 2; }
.page > hr { z-index: 0; }    /* rules run behind the art, like printed lines under a pressed flower */
.art.bleed-tr { top: 90px; right: -18%; width: 34%; }
.art.bleed-bl { bottom: -8%; left: -14%; width: 26%; }
.art.bleed-br { bottom: -10%; right: -9%; width: 17%; }
@media (max-width: 720px) { .art { width: 38%; } .art.bleed-tr { right: -24%; top: -4%; } .art.bleed-bl { left: -20%; } .art.bleed-br { width: 22%; right: -12%; } }
/* If a bleed reaches text at your page width, make the art smaller or move it. Never put text on art. */

/* ---------- glyph marks (zodiac, planets) ---------- */
.glyph { width: 26px; height: 26px; vertical-align: middle; }

/* ---------- footer ---------- */
.footer { text-align: center; padding: 10px 0 0; }

/* nameplate is always a link home */
.nameplate a { color: inherit; text-decoration: none; }
.nameplate a:hover { text-decoration: none; opacity: 0.85; }
.contact { font-family: var(--body); font-size: 12px; letter-spacing: 0.04em; text-align: center; margin-top: 8px; }
.contact a { color: inherit; text-decoration: none; border-bottom: 0.5px solid var(--ink); }

/* ---------- the page prints itself ----------
   Once per visit, in order: rules draw across, type inks in, the art grows in from its corner,
   the firefly lands last. Give the firefly the class "arrive". Everything respects reduced-motion. */
@keyframes draw   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ink    { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes grow   { 0% { opacity: 0; transform: scale(.55) rotate(var(--grow-tilt, 5deg)); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.page > hr { transform-origin: 0 50%; animation: draw .8s cubic-bezier(.2,.7,.2,1) both; }
.page > hr.rule-double.bottom, .page > hr:nth-of-type(3) { animation-delay: .25s; }
.masthead .dateline { animation: ink .6s .35s both; }
.nameplate          { animation: ink .9s .5s cubic-bezier(.2,.7,.2,1) both; }
.page > *:not(hr):not(.masthead):not(.art) { animation: ink .7s .85s both; }
.art.behind, .art.front { animation: grow 1.6s cubic-bezier(.2,.7,.2,1) .6s both; }
.art.bleed-tr { transform-origin: 100% 0;   --grow-tilt: 6deg; }
.art.bleed-bl { transform-origin: 0 100%;   --grow-tilt: -5deg; animation-delay: .8s; }
.art.bleed-br { transform-origin: 100% 100%; --grow-tilt: 4deg; animation-delay: 1.05s; }
.firefly.arrive { animation: firefly-land 1.3s cubic-bezier(.2,.7,.2,1) 1.7s 1 both, firefly-rest 7s ease-in-out 3s infinite; }
.firefly.arrive.now { animation-delay: 0s, 1.3s; }   /* for a re-landing mid-visit, e.g. a page turn */
@media (prefers-reduced-motion: reduce) {
  .page > hr, .masthead .dateline, .nameplate, .page > *, .art.behind, .art.front { animation: none !important; opacity: 1; transform: none; }
}

/* the firefly flies away from the cursor (JS sets --fx, --fy, --spin and adds .flee), then re-lands with .arrive.now */
.firefly.flee {
  animation: none;
  transform: translate(var(--fx, 0px), var(--fy, -60px)) rotate(calc(var(--tilt) + var(--spin, 30deg)));
  filter: drop-shadow(0 18px 12px rgba(26,20,10,.10)) drop-shadow(0 0 12px rgba(237,227,168,.95));
  transition: transform .62s cubic-bezier(.45,.05,.35,1), filter .4s ease;
}
@keyframes firefly-glow { 0%,100% { opacity: 1; } 50% { opacity: .78; } }
.firefly.flee { animation: firefly-glow .9s ease-in-out infinite; }