/* ==========================================================================
   Dynasty Grazing — theme layer on top of Pico.css v2
   Pico's light theme uses `:root:not([data-theme=dark])` (specificity 0,2,0),
   which outranks a plain `:root` block — so the page sets data-theme="dark"
   and every override below is scoped to `:root[data-theme="dark"]` to win.
   ========================================================================== */

:root[data-theme="dark"] {
  /* Mocha scale, taken from the logo's own ground. The page sits one step deeper
     than the logo itself: cream body copy on #9E7B6C reaches only 3.6:1, under
     WCAG AA — the same hue at #7A5949 reaches 5.7:1. The untouched logo colour
     stays in the palette as --dg-mocha-logo for chips, hairlines and glows, so
     the mark still sits on its own tone without dragging text contrast down. */
  --dg-mocha-logo: #9E7B6C;
  --dg-mocha: #7A5949;
  --dg-mocha-deep: #5C4234;
  --dg-mocha-shade: #3B2820;

  /* Cream and a warm caramel-blush are the only accents — the palette is
     deliberately monochrome, so hierarchy comes from value, not hue.
     --dg-blush is decorative (hairlines, borders, glows); --dg-blush-light is
     the text-safe one at 5.0:1 on the page ground. Don't swap them. */
  --dg-blush: #E8C4A8;
  --dg-blush-light: #F5E2D2;
  --dg-ivory: #F7F3EC;
  --dg-espresso: #3A2119;
  --dg-radius: 0.5rem;
  /* Sticky-header clearance for anchor jumps — keep in sync with the header's
     rendered height (logo + nav padding) or eyebrow labels land underneath it. */
  --dg-header-height: 100px;

  /* High-contrast display serif, chosen to echo the logo's Didot-style monogram.
     Revert to "Montserrat" here to go back to an all-sans treatment. */
  --dg-font-display: "Playfair Display", Georgia, serif;

  --pico-font-family: "Montserrat", system-ui, sans-serif;
  --pico-background-color: var(--dg-mocha);
  /* Solid, not translucent: the ground is a mid-tone now, so cream at 0.82 drops
     body copy to 4.1:1. Full-strength ivory is what keeps it over AA. */
  --pico-color: var(--dg-ivory);
  --pico-h1-color: var(--dg-ivory);
  --pico-h2-color: var(--dg-ivory);
  --pico-h3-color: var(--dg-ivory);
  --pico-h4-color: var(--dg-ivory);
  --pico-muted-color: rgba(247, 243, 236, 0.85);

  /* Cream is the button colour — the logo is cream-on-mocha, so a cream CTA on
     the mocha ground is the logo's own contrast repeated at UI scale. */
  --pico-primary: var(--dg-ivory);
  --pico-primary-background: var(--dg-ivory);
  --pico-primary-hover-background: var(--dg-blush);
  --pico-primary-border: var(--dg-ivory);
  --pico-primary-hover-border: var(--dg-blush);
  --pico-primary-inverse: var(--dg-espresso);
  --pico-primary-focus: rgba(232, 196, 168, 0.45);

  /* Surfaces recede rather than lift. On the old near-black ground a cream tint
     read as raised; on a mid-tone it washes text out (4.3:1), so cards and
     fields are tinted with the shade instead — 6.3:1, and it reads as depth. */
  --pico-card-background-color: rgba(59, 40, 32, 0.28);
  --pico-card-border-color: rgba(232, 196, 168, 0.26);
  --pico-form-element-background-color: rgba(59, 40, 32, 0.5);
  --pico-form-element-border-color: rgba(247, 243, 236, 0.26);
  --pico-form-element-color: var(--dg-ivory);
  --pico-form-element-active-border-color: var(--dg-blush);
  --pico-form-element-placeholder-color: rgba(247, 243, 236, 0.5);
}

/* --------------------------------------------------------- mocha + motif */

html {
  scroll-behavior: smooth;
}

/* Anchor targets stop clear of the sticky header rather than sliding under it. */
section[id] {
  scroll-margin-top: var(--dg-header-height);
}

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

body {
  font-weight: 300;
  line-height: 1.7;
  background-color: var(--dg-mocha);
  /* Second glow is the exact logo mocha (#9E7B6C) — lighter than the ground, so
     it lifts rather than tints. Lattice alphas run below the old gold's: a cream
     line on a mid-tone reads far louder than a gold one did on near-black. */
  background-image:
    radial-gradient(circle at 12% 8%, rgba(245, 226, 210, 0.09), transparent 42%),
    radial-gradient(circle at 88% 62%, rgba(158, 123, 108, 0.30), transparent 46%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23F5E2D2' stroke-opacity='0.11' stroke-width='1.1'%3E%3Cpath d='M60 10 L110 60 L60 110 L10 60 Z'/%3E%3Cpath d='M0 60 L10 60 M110 60 L120 60 M60 0 L60 10 M60 110 L60 120'/%3E%3C/g%3E%3Cg fill='%23F5E2D2' fill-opacity='0.10'%3E%3Ccircle cx='60' cy='60' r='2.6'/%3E%3Ccircle cx='0' cy='0' r='1.8'/%3E%3Ccircle cx='120' cy='0' r='1.8'/%3E%3Ccircle cx='120' cy='120' r='1.8'/%3E%3Ccircle cx='0' cy='120' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, repeat;
}

h1, h2, h3, h4 {
  font-family: var(--dg-font-display);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.14;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.85rem);
  margin-bottom: 1.25rem;
}

/* Serif headings run optically larger and lighter than the sans did, so the
   hero gains a touch more weight to hold up against the video behind it. */
.hero-content h1 {
  font-weight: 700;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container.narrow {
  max-width: 760px;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* -light, not --dg-blush: at 12px this is small text, and plain blush only
     reaches 3.85:1 on the ground where the light tint reaches 4.98:1. */
  color: var(--dg-blush-light);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(232, 196, 168, 0.5), transparent);
}

/* 0.88 is the floor for cream on the mocha ground — it lands at 4.82:1, and the
   0.78 these carried against the old near-black drops to 4.18:1 here. */
.lead {
  font-size: 1.1rem;
  color: rgba(247, 243, 236, 0.88);
  max-width: 62ch;
}

.muted {
  color: var(--pico-muted-color);
}

section.container {
  padding-block: clamp(2.25rem, 4.5vw, 4rem);
}

/* ---------------------------------------------------------------- header */

#site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(232, 196, 168, 0.18);
  transition: box-shadow 0.35s ease;
}

/* The blur deliberately lives on a pseudo-element rather than on #site-header
   itself. `backdrop-filter` makes an element the containing block for any
   position:fixed descendant — with it on the header, the mobile menu panel sized
   itself to the header strip instead of the viewport. */
#site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(59, 40, 32, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background-color 0.35s ease;
}

#site-header.is-scrolled::before {
  background: rgba(59, 40, 32, 0.95);
}

#site-header.is-scrolled {
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
}

#site-header nav {
  padding-block: 0.3rem;
  align-items: center;
}

/* Pico pads every `nav li` by --pico-nav-element-spacing-vertical (1rem), which
   stacked ~2rem of dead space around the brand lockup and set the real header
   height regardless of what the logo measured. Zeroing it here makes the header
   height = logo + the nav padding above, which is what --dg-header-height tracks. */
/* Scoped off .primary-menu deliberately: an #id selector here outranks the
   .primary-menu padding that clears the header on mobile, which would drop the
   first menu item underneath the bar. */
#site-header nav > ul:not(.primary-menu) {
  padding-block: 0;
  margin-block: 0;
}

#site-header nav > ul:not(.primary-menu) > li {
  padding-block: 0;
}

/* Horizontal lockup: the mark carries recognition, the text carries legibility.
   The script inside the JPEG can't read at header scale at any sane size, so the
   name is set in live type instead. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  line-height: 1;
  padding-block: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.brand-name {
  font-family: var(--dg-font-display);
  font-size: clamp(1.2rem, 2.1vw, 1.7rem);
  font-weight: 600;
  color: var(--dg-ivory);
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.brand-tagline {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  /* -light for the same reason as .eyebrow. The header's backdrop is the blurred
     ::before over whatever is scrolling beneath, so the effective contrast moves
     with the hero video — plain blush measures 3.85:1 against the bare page
     ground, and this is 10px text. Don't gamble it on the video being dark. */
  color: var(--dg-blush-light);
  white-space: nowrap;
}

/* Sized so the "Dynasty Grazing" script inside the logo stays legible. Fixed
   size always — no scroll or hover resize — so the header doesn't shift around. */
.brand-logo {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(232, 196, 168, 0.4);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

/* margin-left:auto pins the menu to the right edge; without it Pico's nav
   spacing lets the items drift across the bar. */
.primary-menu {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  margin-left: auto;
  flex: 0 0 auto;
}

.primary-menu li {
  list-style: none;
  padding: 0;
}

.primary-menu a {
  color: rgba(247, 243, 236, 0.88);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  position: relative;
  padding-block: 0.25rem;
  white-space: nowrap;
}

.primary-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--dg-blush);
  transition: width 0.28s ease;
}

.primary-menu a:hover {
  color: var(--dg-blush-light);
}

.primary-menu a:hover::after {
  width: 100%;
}

/* Blush rather than the cream used by page buttons: on the dark header a cream
   pill shouts, and the warm tint keeps the persistent CTA distinct from the
   in-page ones. Scoped to .primary-menu so it outranks `.primary-menu a`
   (0,1,1), which would otherwise force ivory text onto it and make it
   unreadable against the blush. */
.primary-menu .nav-cta {
  background: var(--dg-blush);
  border: 1px solid var(--dg-blush);
  color: var(--dg-espresso);
  padding: 0.55rem 1.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.primary-menu .nav-cta:hover {
  background: var(--dg-blush-light);
  border-color: var(--dg-blush-light);
  color: var(--dg-espresso);
}

.nav-cta::after {
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--dg-ivory);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ------------------------------------------------------------------ hero */

#hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--dg-ivory);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(59, 40, 32, 0.62) 0%, rgba(59, 40, 32, 0.72) 55%, rgba(122, 89, 73, 0.96) 100%),
    radial-gradient(circle at 30% 45%, transparent 20%, rgba(59, 40, 32, 0.55) 80%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  padding-block: 2.5rem;
}

.hero-content h1 {
  font-size: clamp(2.3rem, 5.6vw, 4rem);
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.hero-lede {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(247, 243, 236, 0.9);
  margin-bottom: 2rem;
  max-width: 56ch;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

[role="button"],
button {
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  padding: 0.85rem 2rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.hero-actions [role="button"] {
  width: auto;
}

[role="button"]:hover,
button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(232, 196, 168, 0.28);
}

.outline.light {
  --pico-primary: var(--dg-ivory);
  --pico-primary-border: var(--dg-ivory);
  --pico-primary-hover-border: var(--dg-blush-light);
  --pico-primary-hover-background: transparent;
  color: var(--dg-ivory);
  background: rgba(247, 243, 236, 0.06);
  backdrop-filter: blur(4px);
}

.outline.light:hover {
  color: var(--dg-blush-light);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

/* ----------------------------------------------------------------- lists */

.feature-list,
.pill-list {
  padding: 0;
  margin: 1.25rem 0 1.75rem;
}

/* Pico applies `ul li{list-style:square}` straight to the li, and an inherited
   value from the ul can never beat a directly-applied one — so this has to be
   set on the li itself. */
.feature-list li,
.pill-list li {
  list-style: none;
}

.feature-list li {
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(232, 196, 168, 0.18);
  font-size: 1rem;
  color: rgba(247, 243, 236, 0.88);
}

.feature-list li:first-child {
  border-top: 1px solid rgba(232, 196, 168, 0.18);
}

.feature-list li strong {
  color: var(--dg-ivory);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.pill-list li {
  border: 1px solid rgba(232, 196, 168, 0.3);
  background: rgba(59, 40, 32, 0.28);
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  font-size: 0.875rem;
  color: rgba(247, 243, 236, 0.9);
  transition: border-color 0.25s ease, color 0.25s ease;
}

.pill-list li:hover {
  border-color: var(--dg-blush);
  color: var(--dg-blush-light);
}

/* ------------------------------------------------------------- galleries */

/* 3 columns is deliberate: a 2x2 feature (4 cells) + 5 singles = 9 cells, which
   fills a 3x3 grid exactly. At 4 columns the 6th image orphans onto its own row. */
.bento-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(160px, 17vw, 235px);
  grid-auto-flow: dense;
  gap: 0.9rem;
}

.bento-gallery.two-up {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(220px, 26vw, 340px);
}

.bento-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--dg-radius);
  border: 1px solid rgba(232, 196, 168, 0.16);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease, border-color 0.5s ease;
}

.bento-gallery img:hover {
  transform: scale(1.02) translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  border-color: rgba(232, 196, 168, 0.5);
}

.bento-gallery img.feature {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 768px) {
  .bento-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(140px, 30vw, 175px);
  }
  .bento-gallery.two-up {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }
  /* 2 columns: feature spans the row, leaving 5 singles — an odd count. The last
     image spans the full width too, so no half-empty row is left at the bottom. */
  .bento-gallery img.feature,
  .bento-gallery img:last-child {
    grid-column: span 2;
    grid-row: span 1;
  }
  .bento-gallery.two-up img:last-child {
    grid-column: span 1;
  }
}

/* ---------------------------------------------------------- split layout */

.split-section {
  position: relative;
  background: var(--dg-mocha-deep);
  border-block: 1px solid rgba(232, 196, 168, 0.18);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
}

/* Vertical padding runs tighter than horizontal so the split band doesn't
   tower over the sections either side of it. */
.split-media,
.split-text {
  padding: clamp(1.5rem, 3vw, 2.75rem) clamp(2rem, 5vw, 4.5rem);
}

.split-text h2 {
  color: var(--dg-ivory);
}

.split-text p {
  color: rgba(247, 243, 236, 0.78);
  margin-bottom: 1.5rem;
  max-width: 46ch;
}

.split-media video {
  width: 100%;
  border-radius: var(--dg-radius);
  border: 1px solid rgba(232, 196, 168, 0.2);
  display: block;
}

@media (max-width: 768px) {
  .split-section {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------- contact */

.contact-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: 1.75rem;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#contact-form label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 243, 236, 0.88);
}

#contact-form input,
#contact-form textarea {
  border-radius: var(--dg-radius);
  font-weight: 300;
  letter-spacing: normal;
  text-transform: none;
}

#form-status:not(:empty) {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--dg-radius);
  background: rgba(59, 40, 32, 0.28);
  border-left: 3px solid var(--dg-blush);
  font-size: 0.9rem;
}

.contact-details {
  background: rgba(59, 40, 32, 0.28);
  border: 1px solid rgba(232, 196, 168, 0.26);
  border-radius: var(--dg-radius);
  padding: 1.6rem 1.75rem;
}

.contact-details h3 {
  font-size: 1.15rem;
  margin-bottom: 1.25rem;
}

.contact-details p {
  margin-bottom: 0.65rem;
}

.contact-details a {
  color: var(--dg-ivory);
  text-decoration: none;
  font-size: 1.05rem;
  border-bottom: 1px solid rgba(232, 196, 168, 0.4);
  padding-bottom: 2px;
}

.contact-details a:hover {
  color: var(--dg-blush-light);
  border-color: var(--dg-blush);
}

.social-links {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.social-links a {
  color: rgba(247, 243, 236, 0.88);
  text-decoration: none;
  font-weight: 500;
  border: 1px solid rgba(232, 196, 168, 0.3);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

.social-links a:hover {
  border-color: var(--dg-blush);
  color: var(--dg-blush-light);
  background: rgba(232, 196, 168, 0.08);
}

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

/* ---------------------------------------------------------------- footer */

footer {
  background: var(--dg-mocha-deep);
  border-top: 1px solid rgba(232, 196, 168, 0.2);
  padding-block: 2.25rem;
  margin-top: 0;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
}

/* The footer has room the sticky header doesn't, so the mark runs large enough
   here for the script lettering to actually read. */
.footer-logo {
  width: clamp(170px, 26vw, 240px);
  height: clamp(170px, 26vw, 240px);
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(232, 196, 168, 0.3);
}

.footer-inner .social-links {
  margin-top: 0;
}

.copyright {
  color: var(--pico-muted-color);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin: 0;
}

/* ------------------------------------------------------ reveal on scroll */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .bento-gallery img,
  .primary-menu a::after,
  [role="button"],
  button,
  #site-header {
    transition: none;
  }
}

/* ------------------------------------------------------------- mobile nav */

@media (max-width: 900px) {
  :root[data-theme="dark"] {
    --dg-header-height: 82px;
  }

  .nav-toggle {
    display: flex;
  }

  /* Full-screen panel. It sits at z-index 90, just under the header's 100, so the
     logo and the close button stay visible and tappable on top of it. The top
     padding clears the header so the first item never hides behind it. */
  .primary-menu {
    position: fixed;
    inset: 0;
    z-index: 90;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.75rem;
    margin: 0;
    background: rgba(59, 40, 32, 0.98);
    padding: calc(var(--dg-header-height) + 1.5rem) 1.5rem 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .primary-menu.is-open {
    transform: translateX(0);
  }

  .primary-menu a {
    font-size: 1.2rem;
  }

  .primary-menu .nav-cta {
    margin-top: 0.5rem;
    padding: 0.8rem 2.2rem;
    font-size: 0.95rem;
  }

  /* Keep the toggle above the panel so it can always be tapped to close. */
  .nav-toggle {
    position: relative;
    z-index: 110;
  }

  body.menu-open {
    overflow: hidden;
  }

  .brand-logo {
    width: 56px;
    height: 56px;
  }

  .brand {
    gap: 0.7rem;
  }

  /* Burger morphs to an X — must live here, alongside the rule that makes the
     toggle visible, not in the narrower phone query below. */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* Narrow phones: the tagline is the first thing to go, so the mark, the name and
   the hamburger always have room. */
@media (max-width: 420px) {
  .brand-tagline {
    display: none;
  }

  .brand-name {
    font-size: 1.05rem;
  }
}