/* ==========================================================================
   The Honey Engineer — stylesheet
   --------------------------------------------------------------------------
   Everything you'd want to tweak lives in the :root block below. Change a
   color there and it updates everywhere on the site.
   ========================================================================== */

/* --- 1. Design tokens ---------------------------------------------------- */

/* Accent colors are sampled directly from assets/logo.png. The site is
   light-only — no dark mode — so every pairing below is fixed and tested. */

:root {
  color-scheme: light;   /* keeps scrollbars/controls light, never auto-inverted */

  /* Backgrounds. --paper is the honey cream: it is exactly what
     rgba(253,199,1,0.16) resolved to over white, i.e. the tint the ghost
     buttons used to show on hover, now promoted to the whole page. */
  --paper:        #fff6d6;
  --paper-sunk:   #fbedbb;   /* a step deeper, for the footer */
  --paper-raised: #ffffff;

  /* Ink — the logo's outline black, which is slightly warm, not pure #000 */
  --ink:          #141009;
  --ink-soft:     #4a4335;
  --ink-faint:    #746b59;   /* 4.8:1 even on the blue panels */

  /* The bee's yellow. --honey is for FILLS (black text sits on it at 12:1).
     --honey-ink is the darkened version for TEXT on white —
     the bright yellow only hits 1.5:1 there and would be unreadable. */
  --honey:        #fdc701;
  --honey-ink:    #8a6700;
  /* Button hover. Now that the page itself is the cream, this had to go
     stronger to stay visible — it resolves to roughly #ffeca7 over --paper,
     a clear step darker than the background. */
  --honey-wash:   rgba(253, 199, 1, 0.22);

  /* Secondary colors, also from the logo: wing blue, and the two pens.
     The wing blue is what tints the two feature panels. */
  --sky:          #e9f6fb;
  --blue:         #0268b8;
  --red:          #d00900;

  /* Structure — heavy black outlines, echoing the logo's linework */
  --rule:         #ead9a8;   /* warm hairline; a grey one goes muddy on cream */
  --rule-strong:  #141009;

  /* Type */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Spacing rhythm */
  --gutter:    clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 11vw, 8.5rem);
  /* Max line length for body prose. Classic typographic advice is 45–75
     characters; this runs wider deliberately, for a fuller-looking column. */
  --measure:   84ch;

  /* The retro-tech signature: a hard, offset shadow instead of a soft blur.
     Pairs with the logo's heavy outlines — same sticker-like language. */
  --lift:      5px 5px 0 var(--rule-strong);
  --lift-sm:   3px 3px 0 var(--rule-strong);
}

/* --- 2. Base ------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.35vw + 0.95rem, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--honey-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* All :hover styling on this site is wrapped like this. A touch device has
   no way to leave :hover — it sticks after a tap until you tap elsewhere —
   so hover effects are limited to devices that actually have a pointer. */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--ink); }
}

h1, h2, h3 {
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--honey);
  outline-offset: 3px;
}

/* A 3px honey-yellow hairline across the very top — a nod to a status LED. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--honey);
  z-index: 100;
}

/* --- 3. Layout helpers --------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--rule); }

.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  max-width: 24ch;
}

/* Shares --measure with .prose p so every block of body copy on the page
   wraps at the same line length and lines up down the left and right. */
.section-intro {
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 1rem 0 0;
}

/* Readable by screen readers, invisible on screen. Used to label the
   struck-through and sale prices, which are only distinguishable visually. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: var(--gutter);
  top: 1rem;
  z-index: 200;
  background: var(--paper-raised);
  color: var(--ink);
  padding: 0.75rem 1rem;
  border: 2px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

/* --- 4. Header / nav ----------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper); /* fallback for browsers without color-mix() */
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: clamp(72px, 7vw, 92px);
  padding-block: 0.75rem;
}

/* Wordmark + logo mark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}

/* Logo is wider than it is tall, so set height and let width follow. */
.brand__mark {
  height: clamp(34px, 3.6vw, 50px);
  width: auto;
  flex-shrink: 0;
}

/* The wordmark scales with the viewport. The business name is long and set
   in a monospace face, so at a fixed size it collides with the Order button
   on a narrow phone — the lower clamp bound is what prevents that. */
.brand__name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(0.9375rem, 2.1vw, 1.3125rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.nav__link {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--honey-ink); }
}

/* Hide text nav on small screens; the hero CTA carries the action. */
@media (max-width: 720px) {
  .nav__link { display: none; }
}

/* Very narrow phones (~320px): the wordmark and the Order button fight for
   the same row. Tighten both rather than truncate the business name. */
@media (max-width: 360px) {
  .site-header__inner { gap: 0.75rem; }
  .brand { gap: 0.5rem; }
  .brand__mark { height: 30px; }
  .brand__name { font-size: 0.8125rem; }
  .site-header .btn { padding: 0.6rem 0.9rem; }
}

/* --- 4b. Follow bar ------------------------------------------------------ */

/* Brand yellow with black text — 12:1 contrast, and the same pairing as the
   buttons, so it reads as part of the design rather than an ad. Kept to one
   line of small mono type: loud enough to notice, quiet enough to scroll
   past. The 2px rule underneath ties it to the panel language. */
.announce {
  /* Height reserved along the bottom for the flowers. The text is padded
     clear of this band, so the two never share space. One value controls
     the band, the flower height, and the bee's altitude reference. */
  --flower-band: 24px;

  position: relative;
  overflow: hidden;          /* clips the bee at both ends of its run */
  background: var(--honey);
  color: #141009;
  border-bottom: 2px solid var(--rule-strong);
}

/* Holds the <symbol> only; never rendered itself. */
.announce__defs {
  position: absolute;
  width: 0;
  height: 0;
}

/* Still, faint, and strictly inside the bottom band. Left in place under
   prefers-reduced-motion — nothing here moves. */
.announce__flower {
  position: absolute;
  bottom: 0;
  width: 16px;
  height: var(--flower-band);
  color: #141009;
  opacity: 0.2;
  pointer-events: none;
}

/* --a and --c are landing pads: offset by 12px because the bee's X value
   positions its left edge, while these position the flower's, and the bee
   is 40px wide against the flower's 16px. */
.announce__flower--a { left: calc(20vw + 12px); }
.announce__flower--b { left: 34vw; }
.announce__flower--c { left: calc(58vw + 12px); }
.announce__flower--d { left: 88vw; }

/* A bee wanders across behind the text. Two animations on two elements:
   the span flies the route, the svg spins the loop. They share a 24s
   duration so the loop lands where the route holds still for it.

   The erratic feel comes from uneven keyframe spacing plus a timing
   function declared per keyframe — each one governs the interval that
   *starts* at it, so the bee can dart, coast, and stop within one run.
   Repeating a transform across two stops is what makes it hover. */
/* Anchored to the top of the flower band rather than the bar's centre.
   That keeps the landing offset a single constant: however tall the bar
   gets when the text wraps, the flowers and the bee move together. */
.announce__bee {
  position: absolute;
  bottom: var(--flower-band);
  left: 0;
  width: 40px;
  height: 22px;
  color: #141009;
  opacity: 0.38;
  pointer-events: none;
  animation: bee-flight 24s linear infinite;
  will-change: transform;
}

/* transform-origin below the body makes rotation sweep a circle instead of
   spinning on the spot. 104% puts the pivot ~12px under the centre, so the
   loop is ~24px across — enough to read, small enough to stay in the bar. */
.announce__bee svg {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 104%;
  animation: bee-loop 24s linear infinite;
}

/* Y is measured from the top of the flower band: negative is cruising
   altitude, +5px rests the bee's body on a bloom. The two landings are at
   20vw and 58vw, matching .announce__flower--a and --c. */
@keyframes bee-flight {
  0%   { transform: translate(-80px, -18px);  animation-timing-function: ease-out; }
  6%   { transform: translate(12vw, -23px);   animation-timing-function: ease-in-out; }
  11%  { transform: translate(18vw, -16px);   animation-timing-function: ease-in; }   /* descends */
  15%  { transform: translate(20vw, 5px); }                                           /* lands */
  19%  { transform: translate(20vw, 5px);     animation-timing-function: ease-out; }  /* sits */
  24%  { transform: translate(28vw, -22px); }                                         /* lifts off */
  29%  { transform: translate(36vw, -15px);   animation-timing-function: ease-in-out; }
  35%  { transform: translate(46vw, -22px); }
  41%  { transform: translate(54vw, -19px);   animation-timing-function: ease-in; }    /* descends */
  48%  { transform: translate(58vw, 5px); }                                           /* lands */
  52%  { transform: translate(58vw, 5px);     animation-timing-function: ease-out; }   /* sits */
  57%  { transform: translate(68vw, -14px); }
  62%  { transform: translate(76vw, -18px); }                   /* the one loop, held */
  68%  { transform: translate(80vw, -18px);   animation-timing-function: ease-in; }
  74%  { transform: translate(calc(100vw + 80px), -21px); }
  100% { transform: translate(calc(100vw + 80px), -21px); }  /* rests off-screen */
}

/* A single loop, at 62–68% — the last thing it does before buzzing off. */
@keyframes bee-loop {
  0%,  62%  { transform: rotate(0deg);   animation-timing-function: ease-in-out; }
  68%, 100% { transform: rotate(360deg); }
}

.announce__inner {
  position: relative;        /* sits above the bee */
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1.25rem;
  /* Extra bottom padding reserves the flower band, so the copy sits well
     clear of it however many lines the text wraps to. */
  padding-top: 0.8rem;
  padding-bottom: calc(0.8rem + var(--flower-band));
  font-family: var(--font-mono);
  /* Scales up on wide screens but steps back before the line gets too long
     to hold — it stays on one line from roughly 900px up. */
  font-size: clamp(0.875rem, 1.6vw, 1rem);
  letter-spacing: 0.01em;
  text-align: center;
}

.announce__links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.announce a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #141009;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Sized in em so the icons grow with the text rather than drifting out of
   proportion as the font scales. Scoped to the links on purpose: a bare
   `.announce svg` also matches the flowers and the <symbol> holder, and
   would outrank their own class-level sizing. */
.announce__links svg {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .announce a:hover { text-decoration-thickness: 2px; }
}

/* --- 5. Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.8rem 1.35rem;
  border: 2px solid var(--rule-strong);
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn--primary {
  background: var(--honey);
  color: #141009;
  box-shadow: var(--lift-sm);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: var(--lift-sm);
}

/* The press: button slides into its own shadow.
   Guarded by (hover: hover) because touch devices have no way to leave
   :hover — iOS keeps it applied after a tap until you tap something else,
   so an unguarded rule leaves the button stuck down. Mice get :hover,
   fingers get :active below, which always releases. */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover,
  .btn--ghost:hover {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--rule-strong);
    color: #141009;
  }

  .btn--ghost:hover {
    background: var(--honey-wash);
    color: var(--ink);
  }
}

/* Press feedback everywhere, including touch. :active ends with the tap. */
.btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--rule-strong);
}

.btn--ghost:active { background: var(--honey-wash); }

/* iOS paints its own overlay on tap. Rather than killing it outright, tint
   it faintly in the ink colour so there is still press feedback even if
   :active does not fire — belt and braces alongside the rule above. */
.btn { -webkit-tap-highlight-color: rgba(20, 16, 9, 0.10); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover,
  .btn:active { transform: none; }

  /* Hidden outright rather than frozen — a stationary bee parked at the
     left edge would read as a stray graphic. It is decorative, so removing
     it costs nothing. */
  .announce__bee { display: none; }
}

/* --- 6. Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem) var(--section-y);
  overflow: hidden;
}

/* Plotter-paper dot grid, faded out toward the bottom. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--rule) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
  opacity: 0.7;
  pointer-events: none;
}

.hero__inner { position: relative; }

/* On wide screens the hero splits: copy left, the bee on the right. */
.hero__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__layout { grid-template-columns: 1.15fr 0.85fr; }
}

.hero__art {
  margin: 0;
  justify-self: center;
  max-width: 420px;
  width: 100%;
}

/* Keep the mascot from dominating on phones, where it sits above the copy. */
@media (max-width: 899px) {
  .hero__art { max-width: 240px; order: -1; justify-self: start; }
}

.hero__kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.5rem;
}

.hero__title {
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  max-width: 18ch;
}

.hero__title em {
  font-style: normal;
  color: var(--honey-ink);
}

.hero__lede {
  font-size: clamp(1.0625rem, 0.6vw + 1rem, 1.3125rem);
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 1.5rem 0 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2.5rem;
}

/* --- 7. Products --------------------------------------------------------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: 3rem;
}

/* With a single product the auto-fill grid still reserves three tracks, so
   the lone card ends up narrow with a lot of dead space beside it. Collapse
   to one capped column instead. minmax(0, …) keeps it shrinking on phones.
   Browsers without :has() fall back to the grid above, which is fine.
   Capped wide enough for the card's own two columns — copy and photo. */
.product-grid:has(> .product:only-child) {
  grid-template-columns: minmax(0, 820px);
}

.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  background: var(--sky);   /* same wing-blue panel as the ordering block */
  border: 2px solid var(--rule-strong);
  border-radius: 2px;
  box-shadow: var(--lift);
  padding: 1.5rem;
}

/* Copy left, jar photo right — once there is room for both. */
@media (min-width: 640px) {
  .product { grid-template-columns: 1fr minmax(0, 38%); align-items: start; }
}

/* Keeps the Order button pinned to the bottom of the copy column. */
.product__body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Thin outline only — a second offset shadow inside an already-shadowed
   card reads as clutter. */
.product__photo {
  margin: 0;
  align-self: start;
}

.product__photo img {
  width: 100%;
  border: 2px solid var(--rule-strong);
  border-radius: 2px;
}

/* Photo first on phones; product shots lead better than copy at that size. */
@media (max-width: 639px) {
  .product__photo { order: -1; }
}

.product__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}

.product__name {
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

.product__price {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--honey-ink);
  white-space: nowrap;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

/* The pre-sale price, struck through and stepped back so the sale price is
   clearly the one being charged. */
.product__price-was {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-faint);
  text-decoration: line-through;
}

/* Sale flag. Uses the red from the pens in the logo — white on it is
   5.6:1, so the text stays readable. */
.product__badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: clamp(0.6875rem, 1.8vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--red);
  padding: 0.45rem 0.8rem;
  border-radius: 2px;
  margin: 0 0 1.25rem;
  /* One line above ~430px. Narrower than that it has to wrap, so give it
     room to breathe and let the browser even out the two lines. */
  line-height: 1.5;
  text-wrap: balance;
}

.product__desc {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin: 1rem 0 1.25rem;
}

/* Pinned to the bottom of the card so cards line up if more are added. */
.product__cta { margin-top: auto; margin-bottom: 0; }

/* --- 8. About ------------------------------------------------------------ */

/* Copy left, hives photo right — the same split as the hero. */
.about__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
  margin-top: 3rem;
}

@media (min-width: 900px) {
  .about__layout { grid-template-columns: 1.05fr 0.95fr; }
}

/* Photo gets the same hard outline and offset shadow as the panels, so it
   reads as part of the set rather than a snapshot dropped on the page. */
.about__art {
  margin: 0;
  align-self: start;
}

.about__art img {
  width: 100%;
  border: 2px solid var(--rule-strong);
  border-radius: 2px;
  box-shadow: var(--lift);
}

/* --measure keeps the lines readable rather than letting them run the full
   page width. The top margin lives on .about__layout now. */
.prose { margin-top: 0; }

.prose p {
  color: var(--ink-soft);
  margin: 0;
  max-width: var(--measure);
}

/* Must be `p + p`, not `> * + *`: the rule above is more specific, so its
   `margin: 0` silently beat a universal-selector gap no matter the order. */
.prose p + p { margin-top: 1rem; }

/* --- 9. Where to buy ----------------------------------------------------- */

.outlets {
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
  border-top: 1px solid var(--rule);
}

.outlet {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 2rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 720px) {
  .outlet {
    grid-template-columns: 1.1fr 1fr auto;
    align-items: baseline;
  }
}

.outlet__name { font-size: 1.0625rem; font-weight: 600; }

.outlet__detail { color: var(--ink-soft); font-size: 0.9375rem; }

.outlet__when {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* --- 10. Contact / order ------------------------------------------------- */

/* First element in its section, so no top margin — the section's own
   padding supplies the space. */
.order {
  background: var(--sky);
  border: 2px solid var(--rule-strong);
  border-radius: 2px;
  box-shadow: var(--lift);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 880px) {
  .order { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}

.order__title { font-size: clamp(1.5rem, 2.5vw, 2rem); }

.order__text { color: var(--ink-soft); margin: 1rem 0 2rem; }

.order__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; }

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.steps li:last-child { border-bottom: 0; }

.steps li::before {
  content: "0" counter(step);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--honey-ink);
  padding-top: 0.2rem;
  letter-spacing: 0.06em;
}


/* --- 11. Footer ---------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-sunk);
  padding-block: 3.5rem 2.5rem;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer__contact {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin: 1rem 0 0;
  display: grid;
  gap: 0.4rem;
}

/* Social links sit under the contact details, same type as the rest of the
   footer. Icons inherit currentColor so they match the label. */
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 1.1rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.site-footer__social svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__social a:hover { color: var(--honey-ink); }
}

.site-footer__nav {
  display: grid;
  gap: 0.6rem;
}

.site-footer__nav a {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__nav a:hover { color: var(--honey-ink); }
}

.site-footer__legal {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
}