/* ============================================================
   DAYANA, PORTFOLIO HERO
   Bird animation: Fast speed (spec durations x 0.6 via --speed).
   Set --speed: 1 for Normal.
   ============================================================ */

:root {
  --speed: 0.6;

  --font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #131333;          /* headings, nav, labels */
  --body-ink: #1D1D4C;     /* body copy */
  --lilac: #B7B0F6;        /* logo mark */
  --hairline: #EFEFFE;   /* unified with the section grid per Dayana */

  /* Site nav (v1.9.0, confirmed by Dayana: was 12px / 8px top pad).
     hero.css loads site-wide, so this applies to the homepage and the
     article pages alike. */
  --nav-size: 14px;
  --nav-weight: 500;         /* v1.14.1: hover keeps the ink color   */
  --nav-weight-hover: 600;   /* and goes one weight up instead       */
  --nav-pad-top: 16px;

  /* ---- v1.16.0 ----

     --focus-ring is now the ONE focus color, site-wide, per Dayana.
     It replaced #4A4290 on every ring and #6160FD on the article
     rings. The only ring not pointing at it is the lightbox close
     button, which stays white because it sits on a near-black
     overlay where this lilac would not pass contrast.

     Selection: both values are Dayana's (the first pass repeated
     #EFEFFE for the ink, which would have made selected text
     invisible). #5756E4 on #EFEFFE measures 4.76:1, which clears
     WCAG AA for body text but not AAA. */
  --focus-ring: #8180FD;
  --select-bg: #EFEFFE;
  --select-ink: #5756E4;

  /* Mobile and tablet nav chrome. --mnav-pad-y is 16 + 2 per
     Dayana's "maybe 2px each side, not sure until I see it". */
  --mnav-pad-y: 18px;
  --nav-z: 60;
  --nav-shadow: 0 4px 12px 0 rgba(39, 38, 101, 0.08);

  /* Minimum tap target. WCAG 2.2 AA (2.5.8) asks for 24px and AAA
     (2.5.5) for 44px; 48 is the comfortable finger size and is what
     the burger, the panel links and the TOC chevrons all expand to
     WITHOUT any of them changing size on screen. */
  --tap-min: 48px;
  /*
   * v1.16.4, PRESSED STATE. The gray wash on tap was the browser's
   * own `-webkit-tap-highlight-color`, not a focus state and not
   * anything the theme was drawing. It is an OVERLAY painted on top
   * of the element, so it cannot be recolored to #EFEFFE and still
   * read as #EFEFFE: a near-white overlay opaque enough to see would
   * wash out the text under it. The highlight is switched off and a
   * real :active background is drawn behind the text instead, which
   * is why this is a background token and not a highlight token.
   *
   * Deliberately the same value as --select-bg and --hairline, per
   * Dayana. Aliased rather than repeated so the three stay in step.
   */
  --tap-bg: var(--select-bg);
  /* Vertical padding inside a panel link. 12 makes each row a ~45px
     full-width band with no gap between neighbors. Note it widens the
     text-to-text spacing from 20 to 24; that is the cost of a 44px+
     target at 14px type, and it is a token. */
  --nav-link-pad-y: 12px;

  /* Hero support type (v1.15.0, confirmed by Dayana: was a hardcoded
     14px on both). The meta row and the strip labels are one type
     style in the design, so they share a size token rather than
     carrying the number twice. Line height is unchanged at 20px: no
     new value was given for it. */
  --hero-support-size: 15px;
  --hero-support-lh: 20px;

  /* ---- Mobile nav panel (v1.15.1) ----
     Drops from the top, full width, solid white, above everything.
     Height is content plus padding, NOT full height, per Dayana.

     --nav-panel-pad-top is the gap between the nav row and the first
     link. The panel's top edge is 0, not the bottom of the nav bar, so
     the rule adds --site-nav-h to this value: closed, the sheet then
     sits entirely off screen, which is what stops a sliver of white
     showing through the transparent header on the homepage, where the
     nav floats over the bird art. The brand and the toggle are raised
     above the panel so the nav row stays readable while it is open.

     --nav-scrim is transparent on purpose: the spec is a panel, not a
     dimmed page. Set it to something like rgba(19,19,51,.2) if a
     scrim is wanted later. */
  --nav-panel-w: 100%;
  --nav-panel-bg: #FFFFFF;
  --nav-panel-shadow: 0 4px 12px 0 rgba(39, 38, 101, 0.08);
  --nav-panel-pad-top: 40px;
  --nav-panel-pad-x: 24px;
  --nav-panel-pad-bottom: 40px;   /* PROVISIONAL: not specified */
  --nav-scrim: transparent;

  /* Burger / close icon. Geometry is taken straight from
     Status_show.svg and Status_close.svg: a 24 box, bars running
     x 5 to 19 (14px) at y 5 / 12 / 19, round caps, --ink.
     --icon-stroke is 1px because that is what the exported files
     carry (no stroke-width attribute = 1). It reads very light at
     24px; raise it here if you want 1.5 or 2. */
  --icon-size: 24px;
  --icon-stroke: 1px;
  --burger-bar-w: 14px;
  --burger-x: 5px;
  --nav-anim: 300ms;   /* Figma: 0.3s ease-out */

  /* Per-layer opacity multipliers, tuning knobs for the burn over
     the warm gradient areas. 1 = spec values. */
  --tune-body: 1;
  --tune-inner-root: 1;
  --tune-wing-left: 1;
  --tune-wing-right: 1;
  --tune-tale-bottom: 1;
  --tune-tale-top: 1;

  /* ONE box drives the whole art group. The box has the bird's aspect
     ratio; the bird fills it and the gradient is positioned in % of it,
     so the two scale and move together and can never separate.
     Desktop values are PURE vw, so the whole composition scales
     proportionally with window width, no svh caps, no white gaps.
     Composition target: art group fills the right ~60-70% of the
     screen, gradient reaches the top edge behind the nav, and the
     bird's right wing tip runs to the viewport edge. */
  /* Width-limited (aspect 16:9 or taller): pure vw, proportional.
     Height-limited (wider/shorter windows): 110svh cap keeps the bird
     inside the hero instead of being clipped to a slice. 62vw = 110svh
     exactly at 16:9, so the crossover is seamless. */
  --bird-width: min(62vw, 110svh);
  --bird-right: 0.6vw;      /* right wing tip hugs the viewport edge in both regimes */
  /* Tail clip is a fixed RATIO of bird size (-10vw/62vw), so the same
     composition holds in both regimes and the gradient always covers
     the top edge. */
  --bird-top: calc(var(--bird-width) * -0.1613);

  /* Gradient box in % of the art box. Desktop values are enlarged and
     pulled up-left relative to the bird so the colored area reaches the
     very top of the hero (behind the nav) and fills the right ~60-70%
     of the screen down to the strip. Tablet/mobile keep the original
     tighter wrap ratios. */
  --grad-left: -8.4%;
  --grad-top: -20.5%;
  --grad-w: 160%;
  --grad-h: 146.1%;
}

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

html { scroll-behavior: smooth; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: #ffffff;    /* plain white; only the gradients add color */
}

/* ============================================================
   HERO SHELL
   ============================================================ */

.hero {
  position: relative;
  margin: 0;
  /* Height scales with the screen: ~86% of the visible area on every
     monitor, so the next section always peeks just a little. */
  height: 86vh;
  height: 86svh;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  /* No opacity / transform / filter / z-index here or on .hero-art /
     .bird, a stacking context would isolate the color-burn layers
     from the gradient. */
}

/* ============================================================
   ART: the container IS the bird box (bird's aspect ratio),
   anchored right and vertically positioned by --bird-top.
   The gradient SVG is placed in PERCENTAGES of this box, so bird
   and gradient are locked together at every resolution, the
   burn always has gradient color behind the bird.
   ============================================================ */

.hero-art {
  position: absolute;
  right: var(--bird-right);
  width: var(--bird-width);
  aspect-ratio: 1500 / 1395;
  /* Vertical anchor via top only, never transform (a transform here
     would create a stacking context and break the color-burn).
     Desktop: fixed vw offset so the group is a pure function of
     viewport width. Tablet/mobile override --bird-top with a
     center-based calc (top = center minus width x 0.465). */
  top: var(--bird-top);
  pointer-events: none;
}

.hero-art > svg {
  position: absolute;
  /* Gradient box relative to the bird box (percentages of the art
     box, via variables so breakpoints can retune the wrap ratio).
     Overflow is clipped by the hero; edges are soft fades. */
  left: var(--grad-left);
  top: var(--grad-top);
  width: var(--grad-w);
  height: var(--grad-h);
  display: block;
}

/* ---------- Bird ---------- */

.bird {
  position: absolute;
  inset: 0;   /* fills the art box exactly */
}

.bird img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: color-burn;               /* per layer, per spec */
  transform-origin: 48% 52%;                /* shared visual hinge */
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  animation-iteration-count: infinite;
  will-change: transform, opacity;
  user-select: none;
  -webkit-user-drag: none;
}

.bird__body {
  opacity: calc(0.90 * var(--tune-body));
  animation-name: flex-body;
  animation-duration: calc(8.4s * var(--speed));
  animation-delay: calc(-8.2s * var(--speed));
}
.bird__inner-root {
  opacity: calc(0.70 * var(--tune-inner-root));
  animation-name: flex-inner-root;
  animation-duration: calc(6.3s * var(--speed));
  animation-delay: calc(-2.1s * var(--speed));
}
.bird__wing-left {
  opacity: calc(0.76 * var(--tune-wing-left));
  animation-name: flex-wing-left;
  animation-duration: calc(6.3s * var(--speed));
  animation-delay: calc(-2.1s * var(--speed));
}
.bird__wing-right {
  opacity: calc(0.85 * var(--tune-wing-right));
  animation-name: flex-wing-right;
  animation-duration: calc(5.5s * var(--speed));
  animation-delay: calc(-0.5s * var(--speed));
}
.bird__tale-bottom {
  opacity: calc(0.67 * var(--tune-tale-bottom));
  animation-name: flex-tale-bottom;
  animation-duration: calc(5.1s * var(--speed));
  animation-delay: calc(-1.8s * var(--speed));
}
.bird__tale-top {
  opacity: calc(0.72 * var(--tune-tale-top));
  animation-name: flex-tale-top;
  animation-duration: calc(7.1s * var(--speed));
  animation-delay: calc(-3.5s * var(--speed));
}

@keyframes flex-body {
  0%, 100% { transform: scale(1);     opacity: calc(0.90 * var(--tune-body)); }
  50%      { transform: scale(1.018); opacity: calc(0.98 * var(--tune-body)); }
}
@keyframes flex-inner-root {
  0%, 100% { transform: rotate(0deg);   opacity: calc(0.70 * var(--tune-inner-root)); }
  50%      { transform: rotate(1.5deg); opacity: calc(0.78 * var(--tune-inner-root)); }
}
@keyframes flex-wing-left {
  0%, 100% { transform: rotate(0deg) scale(1);    opacity: calc(0.76 * var(--tune-wing-left)); }
  50%      { transform: rotate(6deg) scale(1.02); opacity: calc(0.88 * var(--tune-wing-left)); }
}
@keyframes flex-wing-right {
  0%, 100% { transform: rotate(0deg) scale(1);     opacity: calc(0.85 * var(--tune-wing-right)); }
  50%      { transform: rotate(-8deg) scale(1.02); opacity: calc(0.95 * var(--tune-wing-right)); }
}
@keyframes flex-tale-bottom {
  0%, 100% { transform: rotate(0deg) translateY(0);    opacity: calc(0.67 * var(--tune-tale-bottom)); }
  50%      { transform: rotate(-4deg) translateY(5px); opacity: calc(0.78 * var(--tune-tale-bottom)); }
}
@keyframes flex-tale-top {
  0%, 100% { transform: rotate(0deg) translateX(0);   opacity: calc(0.72 * var(--tune-tale-top)); }
  50%      { transform: rotate(5deg) translateX(7px); opacity: calc(0.82 * var(--tune-tale-top)); }
}

@media (prefers-reduced-motion: reduce) {
  .bird img { animation: none; }   /* frozen at resting opacities */
}

/* ============================================================
   HEADER / NAV
   ============================================================ */

.container {
  width: 100%;
  max-width: 1248px;   /* 1200px content + padding; centered web grid */
  margin-inline: auto;
  padding-inline: clamp(20px, 3vw, 24px);
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--nav-pad-top);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}

/* Placeholder monogram, replace with your real logo SVG */
.brand__mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--lilac);
  display: grid;
  place-items: center;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.5px;
  color: #4A4290;
}

.brand__name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nav__links {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
}

.nav__links a {
  font-family: var(--font-heading);
  color: var(--ink);
  text-decoration: none;
  font-weight: var(--nav-weight);
  font-size: var(--nav-size);
  /* Grid so the reserved-width copy below can stack under the real
     label instead of sitting beside it. */
  display: inline-grid;
  justify-items: center;
}

/*
 * v1.14.1: hover keeps the ink color and goes SemiBold. A weight
 * change makes the text wider, and these items sit in a right-aligned
 * flex row, so a bolder item pushes its neighbors sideways: the whole
 * menu twitches whenever the cursor crosses it.
 *
 * So every link reserves its own bold width up front. An invisible
 * copy of the label at weight 600 occupies the same grid cell with
 * zero height, which makes the cell as wide as the bold text will ever
 * be. The visible label is centered in it, so nothing moves on hover.
 *
 * The copy comes from a data-text attribute added in
 * inc/template-tags.php (both the fallback nav and wp_nav_menu items).
 * Menu items without it simply lose the reservation and keep working.
 */
.nav__links a::before {
  content: attr(data-text);
  grid-area: 1 / 1;
  font-weight: var(--nav-weight-hover);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.nav__links a > span,
.nav__links a::after { grid-area: 1 / 1; }

.nav__links a:hover { color: var(--ink); font-weight: var(--nav-weight-hover); }

.nav__links a:focus-visible,
.brand:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ============================================================
   MOBILE NAV (v1.15.0)
   ============================================================

   DESKTOP IS UNCHANGED. The links are wrapped in .nav__panel, which
   is `display: contents` above the breakpoint, so .nav__links stays a
   direct flex child of .nav and the desktop row is byte-identical to
   v1.14.1. The toggle is display:none there.

   Painting: the panel is fixed and the toggle is relative, both with
   a z-index, so the panel covers the page and the burger stays on top
   of it and can morph in place. This is the one place the build uses
   z-index deliberately. It is confined to nav chrome: no ancestor of
   .hero-art, .bird or any grid line gets a stacking context, so the
   per-layer color-burn is untouched. Both rules live inside the
   600px media query, so desktop carries no z-index at all. */

.nav__panel,
.nav__panel-inner { display: contents; }
.nav__scrim { display: none; }

/* Brand text selection, site-wide (v1.16.0). ::selection does not
   inherit through the shorthand in every engine, so the universal
   selector is deliberate rather than lazy. */
::selection {
  background: var(--select-bg);
  color: var(--select-ink);
}
::-moz-selection {
  background: var(--select-bg);
  color: var(--select-ink);
}

/* Mobile-only nav entry (the contact link). Hidden by default so it
   never appears in the desktop row; the panel rule below turns it on.

   v1.16.2: the selector carries .nav__links on purpose. theme.css has
   `.nav__links li { display: flex }`, which is more specific than a
   lone class AND loads later, so the first version of this rule was
   overridden and the link showed up in the desktop row. */
.nav__links .nav__item--mobile { display: none; }

.nav__toggle {
  display: none;
  appearance: none;
  background: none;
  border: 0;
  /*
   * v1.16.0: the hit area is grown to --tap-min with padding and
   * pulled back out of the layout with an equal negative margin. The
   * button's box is 48x48 for the finger; the 24px icon inside it does
   * not move by a pixel and the nav row does not reflow. This is the
   * whole trick, and it is why the look and the animation are
   * untouched.
   */
  padding: calc((var(--tap-min) - var(--icon-size)) / 2);
  margin: calc((var(--tap-min) - var(--icon-size)) / -2);
  color: var(--ink);
  cursor: pointer;
  line-height: 0;
  border-radius: 4px;
  /* Kills the 300ms delay iOS adds before a tap on a small target. */
  touch-action: manipulation;
}

.nav__toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

/* The icon is three bars rather than the two exported SVGs, because
   the morph has to animate between them. The geometry reproduces both
   files exactly: 24 box, 14px bars at y 5 / 12 / 19, round caps.
   Open state, decoded from the Figma dev-mode export:
   - bar 2 (middle) rotates -45deg in place;
   - bar 3 (bottom) rises 7.132px to the crossing point and rotates
     +45deg;
   - both grow 14 -> 19.77px, which is 14 x root 2, the diagonal of
     the X (applied as scaleX so the 1px stroke thickness is not
     scaled with it);
   - bar 1 (top) has no keyframe block in the export, so it fades.
     ASSUMPTION, flagged in the handoff. */
.nav__burger {
  position: relative;
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
}

.nav__bar {
  position: absolute;
  left: var(--burger-x);
  width: var(--burger-bar-w);
  height: var(--icon-stroke);
  border-radius: var(--icon-stroke);
  background: currentColor;
  transform-origin: 50% 50%;
  transition:
    transform var(--nav-anim) ease-out,
    opacity var(--nav-anim) ease-out;
}

.nav__bar--1 { top: calc(5px  - var(--icon-stroke) / 2); }
.nav__bar--2 { top: calc(12px - var(--icon-stroke) / 2); }
.nav__bar--3 { top: calc(19px - var(--icon-stroke) / 2); }

[aria-expanded="true"] .nav__bar--1 { opacity: 0; }
[aria-expanded="true"] .nav__bar--2 { transform: rotate(-45deg) scaleX(1.4121); }
[aria-expanded="true"] .nav__bar--3 { transform: translateY(-7.132px) rotate(45deg) scaleX(1.4121); }

@media (prefers-reduced-motion: reduce) {
  .nav__bar,
  .nav__panel { transition-duration: 0.01ms; }
}

/* ---------- Meta row ---------- */

.meta {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: clamp(28px, 5vh, 64px);
  font-size: var(--hero-support-size);
  line-height: var(--hero-support-lh);
  font-weight: 400;
}

/* ============================================================
   HEADLINE
   ============================================================ */

.hero-content {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(40px, 6vh, 80px);
}

.hero-content .inner {
  max-width: 700px;
  margin-bottom: 6vh;   /* lifts the block slightly above true center, as in the design */
}

/* "Hi, I'm Dayana" = Figma H2 (32/42, Light) */
.hero-content h1 {
  font-family: var(--font-heading);
  color: var(--ink);
  font-weight: 300;
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 42px;
  letter-spacing: normal;
}

/* "Product Designer" = Figma H1 (40/48, Medium) */
.hero-content h1 strong {
  display: block;
  font-weight: 500;
  font-size: clamp(32px, 2.8vw, 40px);
  line-height: 48px;
  letter-spacing: normal;
  margin-top: 4px;
}

/* Body lg (18/28, Regular), 24px spacing above per design.
   Wide enough to overlap the art zone; it paints above the bird. */
.hero-content p {
  margin-top: 24px;
  font-family: var(--font-body);
  color: var(--body-ink);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  max-width: 700px;
}

/* ============================================================
   BOTTOM STRIP
   ============================================================ */

.strip {
  position: relative;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: transparent;
}

.strip .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 84px;
  padding-block: 18px;
  font-size: var(--hero-support-size);
  line-height: var(--hero-support-lh);
  font-weight: 400;
  flex-wrap: wrap;
}


/* ============================================================
   LARGE-SCREEN SAFEGUARD
   At ~4K widths the feTurbulence grain filters rasterize at 10+ MP
   per ellipse; Chromium/Safari can partially drop such surfaces,
   which blanks the gradient, and with it the color-burn bird.
   Above this width, disable the grain filters (CSS filter beats the
   SVG filter attribute); the radial-gradient ellipses still paint,
   just without grain, which is invisible at that viewing scale.
   Lower the threshold if a scaled display still shows dropouts.
   ============================================================ */
@media (min-width: 1900px) {
  .hero-art > svg g[filter] { filter: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  :root {
    --bird-width: min(52vw, 76svh);
    --bird-right: 3vw;
    --bird-top: calc(44% - var(--bird-width) * 0.465);
    /* Restore the previous gradient-to-bird wrap ratio on small
       screens, where the bird is sized to the device rather than
       calibrated to the desktop export. */
    --grad-left: -81%;
    --grad-top: -16%;
    --grad-w: 228%;
    --grad-h: 198%;
  }
  .hero-content .inner { max-width: 560px; }
  .hero-content p { max-width: 620px; }
}

@media (max-width: 600px) {
  /* Bird stays anchored right, allowed to bleed off the edge;
     the gradient travels with it automatically. */
  :root {
    --bird-width: min(80vw, 66svh);
    --bird-right: -12vw;
    --bird-top: calc(38% - var(--bird-width) * 0.465);
  }
  .hero-content { justify-content: flex-end; }
  .hero-content h1 { line-height: 1.3; }
  .hero-content h1 strong { line-height: 1.2; }
  .hero-content p { font-size: 16px; line-height: 24px; }

  /* v1.15.0: strip label 2 is hidden on mobile and the strip goes
     back to ONE row, so label 1 sits on the left page padding and
     label 3 on the right, matching the meta row above it. That is the
     "two on top, two on the bottom, same left and right padding"
     alignment. flex-wrap stays on from the base rule: at 15px these
     two labels need roughly 340px of the 350 available on a 390px
     screen, so on anything narrower label 3 wraps to a second line
     rather than colliding. */
  .strip .container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding-block: 16px;
  }
  .strip .container > span:nth-child(2) { display: none; }

  .brand__name { font-size: 18px; }
}

/* ============================================================
   MOBILE AND TABLET NAV (v1.16.0)
   ============================================================

   The breakpoint moved from 600 to 900, so tablets get the hamburger
   too, per Dayana. Desktop above 900 is unchanged unless the sticky
   option below is switched on.

   Every rule is scoped to .dayana-js, set on <html> by an inline
   script in wp_head. Without JavaScript the panel stays
   `display: contents` and the toggle stays hidden, so the nav
   degrades to the v1.14.1 inline wrapping row instead of a sheet
   nothing can open. The class is set in the head, not from nav.js in
   the footer, so there is no flash. */

@media (max-width: 900px) {

  .dayana-js .nav__toggle { display: block; }

  .dayana-js .nav { gap: 16px; }

  /* ---- Sticky bar ----
     Two mechanisms, because the two templates put the header in
     different places.

     ARTICLE PAGES: <header> is a child of <body>, so `sticky` works
     and needs no compensation.

     HOMEPAGE: <header> lives INSIDE .hero, which is 86svh tall with
     overflow hidden. A sticky element can only travel inside its
     containing block, so it would unstick the moment the hero scrolls
     past. `fixed` is the only option there, and .hero gets a
     padding-top equal to the bar so the flow below it does not jump
     up by the height of the row that just left the flow. The bird is
     absolutely positioned, and an absolute containing block is the
     padding box, so the art does not move. */

  .dayana-js .site-header {
    position: sticky;
    top: var(--wp-bar, 0px);
    padding-block: var(--mnav-pad-y);
    z-index: var(--nav-z);
    /* Transparent at rest: on the homepage this bar sits over the
       bird art and must not box it in until it actually sticks. */
    background: transparent;
    transition: background 150ms ease, box-shadow 150ms ease;
  }

  .dayana-js .home .site-header {
    position: fixed;
    top: var(--wp-bar, 0px);
    left: 0;
    right: 0;
  }

  .dayana-js .home .hero { padding-top: var(--site-nav-h, 76px); }

  /* The 16px --nav-pad-top exists for the homepage hero, where the
     nav floats over the art. In a bar with its own padding it is
     double spacing. */
  .dayana-js .site-header .nav { padding-top: 0; }

  /* Scrolled state. nav.js adds .is-stuck past a few pixels; the bar
     is only visually a bar from that point on. */
  .dayana-js .site-header.is-stuck {
    background: #FFFFFF;
    box-shadow: var(--nav-shadow);
  }

  /* ---- Panel ---- */

  /*
   * v1.16.2: the panel EXPANDS out of the nav bar. It used to be a
   * full-height sheet starting at the top of the screen and sliding
   * down past the logo, which read as an overlay arriving from
   * somewhere else rather than the navigation opening.
   *
   * It now starts at the bottom edge of the nav row and unrolls, using
   * a grid row animated from 0fr to 1fr with the inner element
   * clipping. That is the one way to animate to an unknown, content
   * driven height: `height: auto` is not interpolable, and a max-height
   * guess makes the easing wrong whenever the guess is off.
   *
   * The outer element carries no padding or background, only the grid.
   * Both live on .nav__panel-inner, or the panel could never collapse
   * to zero.
   */
  .dayana-js .nav__panel {
    display: grid;
    grid-template-rows: 0fr;
    position: fixed;
    top: calc(var(--wp-bar, 0px) + var(--site-nav-h, 76px));
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--wp-bar, 0px) - var(--site-nav-h, 76px));
    transition: grid-template-rows var(--nav-anim) ease-out, visibility 0s linear var(--nav-anim);
    visibility: hidden;
    z-index: 90;
    /*
     * v1.16.4, THE SEAM. The line Dayana saw across the top of the
     * open panel is not the header's shadow: measured, the header's
     * shadow is completely covered by the panel, and switching it off
     * changes nothing at all. It is the PANEL's own shadow spilling
     * upward onto the nav bar. `0 4px 12px` offsets down 4 and blurs
     * 12, and a blur extends half its radius past the shadow rect, so
     * the top edge lands 6 - 4 = 2px ABOVE the panel and paints a
     * hairline of shadow onto the white bar it is supposed to be
     * continuous with.
     *
     * Clipped at the top edge exactly, and opened out on the other
     * three sides so the shadow below is untouched. The token keeps
     * its specced value; nothing is re-tuned to hide the symptom.
     * The panel is full width, so the horizontal allowance only ever
     * matters off screen.
     */
    clip-path: inset(0 -32px -32px -32px);
  }

  .dayana-js .nav__panel.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows var(--nav-anim) ease-out, visibility 0s;
  }

  .dayana-js .nav__panel-inner {
    /*
     * v1.16.3, THE PANEL BUG. This line is the whole fix.
     *
     * The base rule pairs .nav__panel and .nav__panel-inner at
     * `display: contents`, which is correct above 900 where the
     * wrapper has to vanish so the desktop flex row is unchanged.
     * Below 900 only .nav__panel was switched back to a box, so the
     * inner stayed `contents`: a contents element generates no box at
     * all, so the padding, the white background, the drop shadow and
     * the overflow clip below were all computed and then discarded,
     * and the <ul> became the grid item directly. That is why the
     * open menu had no sheet behind it and the links sat on the page
     * content. It also meant the panel never collapsed, because the
     * <ul> has no min-height: 0 and its automatic minimum size held
     * the 0fr row open at full height.
     */
    display: block;
    /* min-height 0 lets a grid item shrink below its content, which is
       what makes the 0fr row actually collapse. */
    min-height: 0;
    /*
     * Closed and mid-animation the box is shorter than its content, so
     * `auto` on the block axis would paint a scrollbar on every open
     * and close on any platform with classic scrollbars (tablets with
     * a trackpad, a desktop browser resized below 900). Clip while
     * animating, scroll only once open, where a scrollbar is real
     * feedback rather than a flash.
     */
    overflow: hidden;
    box-sizing: border-box;
    /*
     * v1.16.3: the padding moved DOWN to the <ul>, and this is not
     * cosmetic. `min-height: 0` lets a grid item's CONTENT box shrink
     * to zero; padding is not part of that and never collapses. With
     * 40 top and 40 bottom sitting here, the closed panel was still
     * 56px tall, so every open animated from 56 to 191 instead of 0 to
     * 191 and the sheet popped a third of its height on the first
     * frame. Measured: 56, 56, 79, 119, 141, 161, 176, 187, 191.
     *
     * Nothing else about the sheet moves. The box that paints the
     * white and the shadow is still this one, so the surface is what
     * collapses; the padding now travels with the content it is
     * clipping.
     */
    padding: 0;
    background: var(--nav-panel-bg);
    box-shadow: var(--nav-panel-shadow);
    /*
     * v1.16.4: `auto`, not `contain`. `contain` existed to stop a
     * swipe on the panel from moving the frozen page behind it. With
     * the scroll lock gone that is the behavior Dayana asked for, and
     * `contain` would have made the sheet a dead zone: a scroll
     * container with no range still blocks chaining, so a swipe
     * starting on the links would have done nothing at all.
     *
     * If the menu ever grows long enough to scroll on its own, a
     * swipe inside it scrolls the menu first and only reaches the
     * page at the end of its travel, which is the standard behavior
     * and the right one.
     */
    overscroll-behavior: auto;
  }

  .dayana-js .nav__panel.is-open .nav__panel-inner { overflow-y: auto; }

  /* Focused programmatically on open, so the ring would be drawn on a
     container the user never tabbed to. Not an interactive control;
     the links inside keep their own focus styles. */
  .dayana-js .nav__panel:focus { outline: none; }

  .dayana-js .nav__scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--nav-scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--nav-anim) ease-out, visibility 0s linear var(--nav-anim);
    z-index: 80;
    /*
     * v1.16.4: the scrim is a full-viewport overlay, so with the
     * scroll lock gone it is the one element most likely to swallow
     * the swipe that is now supposed to scroll the page. `pan-y`
     * hands vertical panning to the browser to resolve against the
     * nearest scrollable ancestor, which is the document, instead of
     * delivering it here as a pointer event. Taps still reach the
     * element, so tap-outside-to-close is unaffected, and a pan does
     * not close the menu because browsers suppress the click that
     * would otherwise follow a drag.
     *
     * `pinch-zoom` is kept explicitly. Dropping to a bare `pan-y`
     * would disable pinch zoom over the whole viewport while the
     * menu is open, which is a WCAG 1.4.4 problem.
     *
     * Stated rather than left to the default because I could not
     * synthesize a touch pan in the sandbox to verify it. This one
     * needs a real device.
     */
    touch-action: pan-y pinch-zoom;
  }

  .dayana-js .nav__scrim.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--nav-anim) ease-out, visibility 0s;
  }

  .dayana-js .nav__toggle {
    position: relative;
    z-index: 100;   /* above the sheet, so the burger morphs in place */
  }

  /* v1.16.2: the brand no longer needs raising. The panel starts BELOW
     the nav row now, so nothing ever covers the logo and the extra
     stacking context is gone. */

  /* ---- Panel links ---- */

  /*
   * v1.16.0 tap targets. The visual rhythm is unchanged: 20px between
   * one link's text and the next, and exactly 40px from the panel edge
   * to the first and last link.
   *
   * The mechanism is the same one used on the burger. The list gap
   * goes to 0 and the spacing is rebuilt as padding INSIDE each link,
   * so every row is a full-width band about 45px tall with no dead
   * gutter between them, and the list's negative block margin cancels
   * the first and last link's padding against the panel padding.
   *
   * Padding rather than a min-height because the bands have to abut
   * without overlapping: overlapping targets fail WCAG 2.2's target
   * offset just as badly as small ones.
   */
  .dayana-js .nav__panel .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* The link rows carry their own tap padding, so the container
       gives back exactly that much. Net result: the first and last
       link's TEXT sits --nav-panel-pad-top from the panel edge, and no
       negative margin is needed anywhere. Same approach as the TOC bar
       after the v1.16.2 fix. Moved here from .nav__panel-inner in
       v1.16.3, see the note there. */
    padding:
      calc(var(--nav-panel-pad-top) - var(--nav-link-pad-y))
      var(--nav-panel-pad-x)
      calc(var(--nav-panel-pad-bottom) - var(--nav-link-pad-y));
  }

  .dayana-js .nav__panel .nav__links a {
    justify-items: start;
    width: 100%;
    padding-block: var(--nav-link-pad-y);
    touch-action: manipulation;
  }

  /* The contact link, panel only. `flex` matches theme.css's rule for
     its siblings, so all three rows behave identically. */
  .dayana-js .nav__panel .nav__links .nav__item--mobile { display: flex; }

  /*
   * v1.16.4, PRESSED STATE, mobile and tablet only. Desktop is not
   * touched: it has no tap, and the approved design has no pressed
   * state on the nav.
   *
   * Two declarations, and both are needed. The first switches off the
   * browser's gray wash. The second draws the brand color BEHIND the
   * text rather than over it, which is the only way to get #EFEFFE
   * and keep the label legible while it is held.
   *
   * The burger's box is its 48px hit area, which is 12px larger than
   * the icon on every side, so the press reads as a square swatch
   * around the glyph rather than a tint on three thin bars.
   */
  .dayana-js .nav__panel .nav__links a,
  .dayana-js .nav__toggle {
    -webkit-tap-highlight-color: transparent;
  }

  .dayana-js .nav__panel .nav__links a:active { background: var(--tap-bg); }

  .dayana-js .nav__toggle:active { background: var(--tap-bg); }
}

/*
 * v1.16.3, REDUCED MOTION ON THE PANEL. Found while verifying the
 * fixes above, pre-existing since v1.16.2, and worth stating plainly:
 * the panel was still animating for 300ms under
 * `prefers-reduced-motion: reduce`.
 *
 * The reduce block up near the burger targets a bare `.nav__panel`
 * (0,1,0) and sits earlier in the file. The open and closed rules in
 * the block above are `.dayana-js .nav__panel` and
 * `.dayana-js .nav__panel.is-open` (0,2,0 and 0,3,0) and re-declare
 * the `transition` shorthand, so they simply outranked it. The burger
 * bars were never affected, because nothing re-declares their
 * transition at a higher specificity.
 *
 * The delay goes to zero as well as the duration: the closed rule
 * holds `visibility` back by --nav-anim so the sheet stays painted
 * while it collapses, and with no collapse left to wait for that
 * delay only keeps a zero-height panel nominally visible.
 */
@media (prefers-reduced-motion: reduce) {
  .dayana-js .nav__panel,
  .dayana-js .nav__panel.is-open {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

/* ============================================================
   DESKTOP STICKY NAV, OPTIONAL (v1.16.0)
   ============================================================
   Off by default, so desktop is byte-for-byte the current design.
   Theme Settings > Branding and navigation > "Desktop navigation"
   adds .nav-sticky to <body> and turns this on, so both options can
   be compared on the real site without a rebuild.

   Same split as above: the homepage header is inside .hero and has to
   be fixed, everything else can be sticky. */

@media (min-width: 901px) {
  .nav-sticky .site-header {
    position: sticky;
    top: var(--wp-bar, 0px);
    padding-block: var(--nav-pad-top);
    z-index: var(--nav-z);
    background: transparent;
    transition: background 150ms ease, box-shadow 150ms ease;
  }

  .nav-sticky .site-header .nav { padding-top: 0; }

  .nav-sticky.home .site-header {
    position: fixed;
    top: var(--wp-bar, 0px);
    left: 0;
    right: 0;
    /* .container centers itself with margin auto and a max-width; once
       it is fixed and full width, the max-width has to be restored on
       the inside or the row would run to the window edges. */
    max-width: none;
    padding-inline: 0;
  }

  .nav-sticky.home .site-header > .nav {
    max-width: 1248px;
    margin-inline: auto;
    padding-inline: clamp(20px, 3vw, 24px);
    box-sizing: border-box;
  }

  .nav-sticky.home .hero { padding-top: var(--site-nav-h, 76px); }

  .nav-sticky .site-header.is-stuck {
    background: #FFFFFF;
    box-shadow: var(--nav-shadow);
  }
}