@charset "UTF-8";
/* ============================================================================
   ADRI — editorial theme stylesheet
   Single file, no build step, no preprocessor. Browser-parsable as shipped.

   TOKEN CONTRACT: every colour, size, duration and easing used anywhere in this
   file is declared in :root below. If you find a raw hex code or a raw px value
   outside :root, it is a bug — fix the token, not the component.

   Namespace: all theme classes are prefixed `adri-`.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------ */
:root {
  /* --- Colour ------------------------------------------------------------
     One dominant hue: warm paper. Accents have fixed, non-overlapping roles.
     `accent` is STRUCTURAL only (hairlines, underlines, markers) because at
     1.9:1 against paper it can never carry text.
     `accent-ink` is the TEXT accent, darkened to clear WCAG AA (5.6:1). */
  --adri-paper:        #fdfcfa;   /* page ground, faintly warm white        */
  --adri-cream:        #f0ebe6;   /* banded sections, cards at rest         */
  --adri-cream-deep:   #e7dfd6;   /* dividers, image placeholders           */
  --adri-ink:          #282828;   /* headings, primary text                 */
  --adri-ink-strong:   #141414;   /* the one true black, used sparingly     */
  --adri-ink-soft:     #635f5c;   /* body copy, meta                        */
  --adri-ink-faint:    #8d8781;   /* timestamps, captions, disabled labels  */
  --adri-accent:       #ccb391;   /* STRUCTURAL tan — rules, marks, washes  */
  --adri-accent-soft:  #ece0cf;   /* tan wash for hovers and highlights     */
  --adri-accent-ink:   #8a6e45;   /* TEXT tan — links, active nav, tags     */
  --adri-focus:        #1f4b45;   /* deep green: reads on paper AND on photo*/
  --adri-focus-halo:   #ffffff;
  --adri-danger:       #8c3a2b;
  --adri-danger-soft:  #f6e6e2;
  --adri-success:      #3d5c40;
  --adri-success-soft: #e6ede4;
  --adri-notice-soft:  #f7f0e3;
  --adri-shade:        rgba(20, 20, 20, .48);  /* photo scrim              */
  --adri-shade-soft:   rgba(20, 20, 20, .18);
  --adri-hairline:     rgba(40, 40, 40, .13);

  /* --- Typography --------------------------------------------------------
     Display: Cormorant Garamond. Old-style, high stroke contrast, small
     x-height — it wants to be set large and tracked tight.
     Body/UI: Poppins. Geometric, near-monoline — set TINY and tracked WIDE
     it stops looking like a UI font and starts looking like a caption stamp.
     Wordmark: Parisienne, one job only, never below display sizes. */
  --adri-font-display: "Cormorant Garamond", "Cormorant", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --adri-font-body:    "Poppins", "Avenir Next", "Century Gothic", "Futura", "Trebuchet MS", "Helvetica Neue", sans-serif;
  --adri-font-script:  "Parisienne", "Snell Roundhand", "Apple Chancery", "Segoe Script", cursive;
  --adri-font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Fluid ramp. min at 360px viewport, max at 1440px. */
  --adri-text-2xs:  0.625rem;   --adri-leading-2xs: 1.7;   /* 10px stamps   */
  --adri-text-xs:   0.6875rem;  --adri-leading-xs:  1.7;   /* 11px meta     */
  --adri-text-sm:   0.8125rem;  --adri-leading-sm:  1.75;  /* 13px UI       */
  --adri-text-base: 1.0625rem;  --adri-leading-base:1.78;  /* 17px body     */
  --adri-text-lg:   clamp(1.125rem, 0.4vw + 1.03rem, 1.3125rem);  --adri-leading-lg: 1.62;
  --adri-text-xl:   clamp(1.5rem, 1.1vw + 1.25rem, 2rem);         --adri-leading-xl: 1.22;
  --adri-text-2xl:  clamp(1.875rem, 2.1vw + 1.4rem, 2.875rem);    --adri-leading-2xl:1.14;
  --adri-text-3xl:  clamp(2.25rem, 3.4vw + 1.5rem, 4rem);         --adri-leading-3xl:1.08;
  /* Wordmark ramp. A script face is set to be read as one shape, so its size
     has to come from how long the name is, not from the viewport alone —
     "Adri" and "Adri's Fixations" cannot share a font-size and both fit.
     header.php picks the tier from the character count. */
  --adri-mark-xl: clamp(3.25rem, 8vw + 0.5rem, 7.5rem);      /* up to 6 chars */
  --adri-mark-lg: clamp(2.875rem, 6.4vw + 0.95rem, 6.75rem);  /* 7–12 chars   */
  --adri-mark-md: clamp(2.4375rem, 5.4vw + 1.15rem, 6rem);    /* 13–18 chars  */
  --adri-mark-sm: clamp(1.8125rem, 4vw + 0.85rem, 4.375rem);  /* 19+ chars    */
  --adri-text-mark: var(--adri-mark-xl);

  --adri-track-tight: -0.022em;  /* display faces at size                   */
  --adri-track-body:   0.005em;
  --adri-track-wide:   0.18em;   /* small caps UI                           */
  --adri-track-widest: 0.42em;   /* section eyebrows, the widest we go      */

  /* --- Space -------------------------------------------------------------
     A 4px base, doubling with two half-steps. Section rhythm is deliberately
     large: this is a paper layout, whitespace is the primary material. */
  --adri-space-1:  0.25rem;  --adri-space-2:  0.5rem;   --adri-space-3: 0.75rem;
  --adri-space-4:  1rem;     --adri-space-5:  1.5rem;   --adri-space-6: 2rem;
  --adri-space-7:  2.75rem;  --adri-space-8:  4rem;     --adri-space-9: 5.5rem;
  --adri-space-10: 7.5rem;   --adri-space-11: 10rem;

  --adri-measure:      1240px;  /* outer container                         */
  --adri-measure-text: 40rem;   /* reading column, ~72 characters          */
  --adri-gutter:       clamp(1.25rem, 4vw, 3.25rem);
  --adri-bar-h:        3.25rem; /* sticky bar, at rest                     */
  --adri-bar-h-min:    2.875rem;/* sticky bar, condensed                   */
  --adri-tap:          2.75rem; /* 44px minimum touch target               */

  /* --- Line, radius, depth ----------------------------------------------
     Near-zero radius everywhere. Photographs on paper have square corners;
     rounded cards are the tell we are refusing. Depth comes from hairlines
     and paper tone, not from drop shadows. The only shadows are for elements
     that genuinely float above the page (the side panel, the search sheet). */
  --adri-rule:       1px;
  --adri-rule-thick: 2px;
  --adri-radius-sm:  1px;
  --adri-radius-md:  2px;
  --adri-radius-pill:100px;
  --adri-shadow-sm:  0 1px 2px rgba(20,20,20,.05);
  --adri-shadow-md:  0 12px 32px -12px rgba(20,20,20,.22);
  --adri-shadow-lg:  0 28px 70px -20px rgba(20,20,20,.34);

  /* --- Motion ------------------------------------------------------------
     Everything is transform/opacity. Nothing bounces; this is paper, and
     paper does not bounce. The spring is reserved for the panel only. */
  --adri-dur-fast:  140ms;
  --adri-dur-base:  280ms;
  --adri-dur-slow:  620ms;
  --adri-ease-out:  cubic-bezier(.22, .61, .36, 1);
  --adri-ease-in:   cubic-bezier(.55, .06, .68, .19);
  --adri-ease-spring: cubic-bezier(.2, .9, .3, 1.06);

  --adri-z-base: 1;  --adri-z-sticky: 60;  --adri-z-panel: 80;
  --adri-z-sheet: 90; --adri-z-skip: 100;
}

/* ---------------------------------------------------------------------------
   2. RESET — targeted, not scorched-earth
   ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--adri-paper);
  color: var(--adri-ink-soft);
  font-family: var(--adri-font-body);
  font-size: var(--adri-text-base);
  line-height: var(--adri-leading-base);
  letter-spacing: var(--adri-track-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.adri-is-locked { overflow: hidden; }

img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; }
img { height: auto; border: 0; background-color: var(--adri-cream-deep); }
/* No blanket `fill` here: a CSS fill on <svg> overrides the element's own
   fill="none" presentation attribute and turns stroked icons into blobs. */
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
hr { border: 0; border-top: var(--adri-rule) solid var(--adri-hairline); margin: var(--adri-space-8) 0; }
table { border-collapse: collapse; width: 100%; }

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY PRIMITIVES
   ------------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6, .adri-display {
  font-family: var(--adri-font-display);
  color: var(--adri-ink);
  font-weight: 500;
  letter-spacing: var(--adri-track-tight);
  line-height: var(--adri-leading-xl);
  font-variant-ligatures: common-ligatures;
}
h1 { font-size: var(--adri-text-3xl); line-height: var(--adri-leading-3xl); }
h2 { font-size: var(--adri-text-2xl); line-height: var(--adri-leading-2xl); }
h3 { font-size: var(--adri-text-xl); }
h4 { font-size: var(--adri-text-lg); letter-spacing: 0; }
h5, h6 {
  font-family: var(--adri-font-body); font-size: var(--adri-text-xs);
  font-weight: 500; text-transform: uppercase; letter-spacing: var(--adri-track-wide);
}

a { color: var(--adri-accent-ink); text-decoration: none; transition: color var(--adri-dur-fast) var(--adri-ease-out); }
a:hover { color: var(--adri-ink); }

/* Body links inside authored prose get the tan hairline underline — the same
   hairline used for rules and dividers. One material, used everywhere. */
.adri-prose a:not(.adri-btn) {
  background-image: linear-gradient(var(--adri-accent), var(--adri-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% var(--adri-rule);
  padding-bottom: 0.08em;
  transition: background-size var(--adri-dur-base) var(--adri-ease-out),
              color var(--adri-dur-fast) var(--adri-ease-out);
}
.adri-prose a:not(.adri-btn):hover { background-size: 100% var(--adri-rule-thick); color: var(--adri-ink); }

/* The stamp: Poppins set tiny and tracked to the edge of legibility. Used for
   every non-prose label in the theme. Never below 10px, never not uppercase. */
.adri-stamp {
  font-family: var(--adri-font-body);
  font-size: var(--adri-text-2xs);
  line-height: var(--adri-leading-2xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--adri-track-wide);
  color: var(--adri-ink-faint);
}
.adri-stamp--wide { letter-spacing: var(--adri-track-widest); }

/* The eyebrow: Cormorant italic, lowercase, the site's first-person voice.
   It sits above nav items and section headings and speaks TO the reader. */
.adri-eyebrow {
  font-family: var(--adri-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--adri-text-sm);
  line-height: 1;
  letter-spacing: 0;
  color: var(--adri-accent-ink);
  text-transform: none;
}

.adri-screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.adri-skip-link {
  position: fixed; top: var(--adri-space-2); left: var(--adri-space-2);
  z-index: var(--adri-z-skip);
  transform: translateY(-200%);
  background: var(--adri-ink); color: var(--adri-paper);
  padding: var(--adri-space-3) var(--adri-space-5);
  font-size: var(--adri-text-2xs); text-transform: uppercase; letter-spacing: var(--adri-track-wide);
  transition: transform var(--adri-dur-fast) var(--adri-ease-out);
}
.adri-skip-link:focus { transform: translateY(0); color: var(--adri-paper); }

/* ---------------------------------------------------------------------------
   4. FOCUS — designed, not defaulted
   A deep-green ring with a paper halo. The halo is what keeps it visible when
   the focused element sits on top of a photograph.
   ------------------------------------------------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus { outline: none; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--adri-rule-thick) solid var(--adri-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--adri-focus-halo), 0 0 0 6px rgba(31, 75, 69, .14);
  border-radius: var(--adri-radius-sm);
}

/* ---------------------------------------------------------------------------
   5. LAYOUT SCAFFOLD
   ------------------------------------------------------------------------ */
.adri-shell { display: flow-root; }
.adri-container { width: 100%; max-width: var(--adri-measure); margin-inline: auto; padding-inline: var(--adri-gutter); }
.adri-container--text { max-width: calc(var(--adri-measure-text) + var(--adri-gutter) * 2); }
.adri-container--wide { max-width: 1560px; }
.adri-bleed { width: 100%; padding-inline: clamp(0px, 1.2vw, var(--adri-space-4)); }

.adri-section { padding-block: var(--adri-space-9); }
.adri-section--tight { padding-block: var(--adri-space-7); }
.adri-section--cream { background: var(--adri-cream); }

/* Section heading: centred, hairline-flanked, eyebrow above. Used verbatim by
   every band on the page so the rhythm never breaks. */
.adri-sectionhead { text-align: center; margin-bottom: var(--adri-space-7); }
.adri-sectionhead .adri-eyebrow { display: block; margin-bottom: var(--adri-space-2); }
.adri-sectionhead__title {
  font-size: var(--adri-text-xl); font-weight: 500;
  display: inline-flex; align-items: center; gap: var(--adri-space-5);
}
.adri-sectionhead__title::before,
.adri-sectionhead__title::after {
  content: ""; width: clamp(1.5rem, 6vw, 4.5rem); height: var(--adri-rule);
  background: var(--adri-accent); flex: none;
}

/* ---------------------------------------------------------------------------
   6. THE DATELINE — signature element
   Every story is filed by the place it came from. The dateline stamps that
   place onto the card, the hero and the article head, and it is a live link
   into the Places index — a second navigation axis alongside categories.
   ------------------------------------------------------------------------ */
.adri-dateline {
  display: inline-flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--adri-space-2);
  font-family: var(--adri-font-body);
  font-size: var(--adri-text-2xs); line-height: 1.6;
  font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--adri-track-wide);
  color: var(--adri-ink-faint);
}
.adri-dateline__place {
  color: var(--adri-accent-ink);
  position: relative; padding-bottom: 2px;
  background-image: linear-gradient(var(--adri-accent), var(--adri-accent));
  background-repeat: no-repeat; background-position: 0 100%;
  background-size: 0 var(--adri-rule);
  transition: background-size var(--adri-dur-base) var(--adri-ease-out);
}
.adri-dateline__place::before {
  content: ""; display: inline-block;
  width: var(--adri-space-1); height: var(--adri-space-1);
  margin-right: var(--adri-space-2); vertical-align: middle;
  background: var(--adri-accent); transform: rotate(45deg);
}
a.adri-dateline__place:hover,
.adri-card:hover .adri-dateline__place { background-size: 100% var(--adri-rule); }
.adri-dateline__coord { font-family: var(--adri-font-mono); font-size: var(--adri-text-2xs); letter-spacing: .08em; color: var(--adri-ink-faint); }
.adri-dateline__sep { color: var(--adri-accent); }
.adri-dateline--onphoto,
.adri-dateline--onphoto .adri-dateline__coord { color: var(--adri-paper); }
.adri-dateline--onphoto .adri-dateline__place { color: var(--adri-paper); }
.adri-dateline--onphoto .adri-dateline__place::before { background: var(--adri-paper); }

/* Places index — the archive side of the signature element. */
.adri-places { list-style: none; border-top: var(--adri-rule) solid var(--adri-hairline); }
.adri-places__item { border-bottom: var(--adri-rule) solid var(--adri-hairline); }
.adri-places__link {
  display: flex; align-items: baseline; gap: var(--adri-space-4);
  min-height: var(--adri-tap);
  padding-block: var(--adri-space-3);
  color: var(--adri-ink);
  transition: padding-inline-start var(--adri-dur-base) var(--adri-ease-out), background-color var(--adri-dur-fast) var(--adri-ease-out);
}
.adri-places__link:hover { padding-inline-start: var(--adri-space-3); background: var(--adri-cream); }
.adri-places__name { font-family: var(--adri-font-display); font-size: var(--adri-text-lg); letter-spacing: var(--adri-track-tight); }
.adri-places__rule { flex: 1 1 auto; height: var(--adri-rule); background: var(--adri-hairline); align-self: center; }
.adri-places__count { font-family: var(--adri-font-mono); font-size: var(--adri-text-xs); color: var(--adri-ink-faint); }

/* ---------------------------------------------------------------------------
   7. TOP BAR — sticky, three-part, condenses on scroll
   ------------------------------------------------------------------------ */
.adri-topbar {
  position: sticky; top: 0; z-index: var(--adri-z-sticky);
  background: var(--adri-paper);
  border-bottom: var(--adri-rule) solid var(--adri-hairline);
  transition: box-shadow var(--adri-dur-base) var(--adri-ease-out);
}
.adri-topbar.is-stuck { box-shadow: var(--adri-shadow-sm); }
.adri-topbar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--adri-space-4);
  min-height: var(--adri-bar-h);
  padding-inline: var(--adri-gutter);
  transition: min-height var(--adri-dur-base) var(--adri-ease-out);
}
.adri-topbar.is-stuck .adri-topbar__inner { min-height: var(--adri-bar-h-min); }
.adri-topbar__left  { display: flex; align-items: center; gap: var(--adri-space-5); min-width: 0; }

/* Compact wordmark: hidden while the full masthead is still on screen, fades
   in once the bar sticks. Desktop never needs it — the masthead is close by
   and the centred nav owns this space. */
.adri-topbar__mark {
  display: none; align-items: center;
  min-height: var(--adri-tap);
  font-family: var(--adri-font-script);
  font-size: var(--adri-text-lg); line-height: 1;
  color: var(--adri-ink-strong);
  min-width: 0; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(2px);
  transition: opacity var(--adri-dur-base) var(--adri-ease-out),
              transform var(--adri-dur-base) var(--adri-ease-out);
}
.adri-topbar.is-stuck .adri-topbar__mark { opacity: 1; transform: none; }
.adri-topbar__right { display: flex; align-items: center; justify-content: flex-end; gap: var(--adri-space-1); }

.adri-minimenu { display: flex; align-items: center; gap: var(--adri-space-5); list-style: none; }
.adri-minimenu a {
  display: inline-flex; align-items: center; min-height: var(--adri-tap);
  font-size: var(--adri-text-2xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--adri-track-wide); color: var(--adri-ink);
}
.adri-minimenu a:hover { color: var(--adri-accent-ink); }

/* Icon buttons: 44px targets with a tan wash on hover. */
.adri-iconbtn {
  display: inline-grid; place-items: center;
  width: var(--adri-tap); height: var(--adri-tap);
  color: var(--adri-ink);
  border-radius: var(--adri-radius-sm);
  transition: background-color var(--adri-dur-fast) var(--adri-ease-out), color var(--adri-dur-fast) var(--adri-ease-out);
}
.adri-iconbtn:hover { background: var(--adri-accent-soft); color: var(--adri-accent-ink); }
.adri-iconbtn:active { background: var(--adri-accent); color: var(--adri-ink); }
.adri-iconbtn svg { width: 1rem; height: 1rem; }
.adri-iconbtn[aria-expanded="true"] { background: var(--adri-accent-soft); color: var(--adri-accent-ink); }

/* ---------------------------------------------------------------------------
   8. PRIMARY NAV — every item wears a first-person eyebrow
   The eyebrow text comes from the menu item's Description field in wp-admin,
   so it is authored content, not decoration.
   ------------------------------------------------------------------------ */
.adri-nav { display: flex; justify-content: center; }
.adri-nav__list { display: flex; align-items: stretch; gap: clamp(var(--adri-space-4), 2.2vw, var(--adri-space-7)); list-style: none; }
.adri-nav__item { position: relative; display: flex; }
.adri-nav__link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-height: var(--adri-tap); padding-inline: var(--adri-space-1);
  color: var(--adri-ink); text-align: center; white-space: nowrap;
}
.adri-nav__eyebrow {
  font-family: var(--adri-font-display); font-style: italic; font-weight: 400;
  font-size: var(--adri-text-sm); line-height: 1; color: var(--adri-accent-ink);
  opacity: .85; transition: opacity var(--adri-dur-fast) var(--adri-ease-out), transform var(--adri-dur-base) var(--adri-ease-out);
}
.adri-nav__label {
  font-size: var(--adri-text-2xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--adri-track-wide); line-height: 1.4;
}
/* The active/hover marker is the tan hairline, drawn from the centre out. */
.adri-nav__link::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 0; height: var(--adri-rule-thick); background: var(--adri-accent);
  transform: translateX(-50%);
  transition: width var(--adri-dur-base) var(--adri-ease-out);
}
.adri-nav__link:hover::after,
.adri-nav__link:focus-visible::after { width: 100%; }
.adri-nav__item.is-current > .adri-nav__link::after { width: 100%; }
.adri-nav__item.is-current > .adri-nav__link .adri-nav__label { color: var(--adri-accent-ink); }
.adri-nav__link:hover .adri-nav__eyebrow { opacity: 1; transform: translateY(-1px); }

/* Dropdown */
.adri-nav__sub {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, var(--adri-space-2));
  min-width: 13rem; list-style: none;
  background: var(--adri-paper);
  border: var(--adri-rule) solid var(--adri-hairline);
  border-top: var(--adri-rule-thick) solid var(--adri-accent);
  padding: var(--adri-space-2) 0;
  box-shadow: var(--adri-shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--adri-dur-fast) var(--adri-ease-out),
              transform var(--adri-dur-base) var(--adri-ease-out),
              visibility 0s linear var(--adri-dur-base);
}
.adri-nav__item:hover > .adri-nav__sub,
.adri-nav__item:focus-within > .adri-nav__sub {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0); transition-delay: 0s;
}
.adri-nav__sub a {
  display: flex; align-items: center; min-height: var(--adri-tap);
  padding-inline: var(--adri-space-5);
  font-size: var(--adri-text-2xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--adri-track-wide); color: var(--adri-ink);
  transition: background-color var(--adri-dur-fast) var(--adri-ease-out), padding-inline-start var(--adri-dur-base) var(--adri-ease-out);
}
.adri-nav__sub a:hover { background: var(--adri-cream); padding-inline-start: var(--adri-space-6); color: var(--adri-accent-ink); }

/* ---------------------------------------------------------------------------
   9. MASTHEAD — the wordmark band
   ------------------------------------------------------------------------ */
.adri-masthead {
  text-align: center;
  padding-block: clamp(var(--adri-space-7), 7vw, var(--adri-space-10));
  padding-inline: var(--adri-gutter);
  background: var(--adri-paper);
  position: relative;
}
.adri-masthead__link { display: inline-block; max-width: 100%; color: var(--adri-ink); }
.adri-masthead__mark {
  display: block;
  font-family: var(--adri-font-script);
  font-size: var(--adri-mark-size, var(--adri-text-mark));
  font-weight: 400; line-height: .95;
  letter-spacing: 0; color: var(--adri-ink-strong);
  padding-inline: 0.08em;   /* script faces overhang their box */
  text-wrap: balance;       /* if a very long name must break, break it evenly */
}
.adri-masthead__logo { margin-inline: auto; width: auto; max-height: clamp(4rem, 11vw, 8.5rem); }
.adri-masthead__tagline {
  display: block; margin-top: var(--adri-space-4);
  font-size: var(--adri-text-2xs); font-weight: 400; text-transform: uppercase;
  letter-spacing: var(--adri-track-widest); color: var(--adri-ink-soft);
  text-indent: var(--adri-track-widest);  /* re-centre after tracking        */
}
/* The wave rule that closes the masthead — a repeating SVG hairline, the same
   tan, tiled. It is the only ornament in the theme. */
.adri-wave {
  height: var(--adri-space-5);
  /* Masked, not painted, so it re-tints with the accent token automatically. */
  background-color: var(--adri-accent);
  opacity: .6;
  --adri-wave-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cpath d='M0 12c15-12 45-12 60 0s45 12 60 0' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--adri-wave-src);
          mask-image: var(--adri-wave-src);
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: auto 100%;
          mask-size: auto 100%;
}

/* ---------------------------------------------------------------------------
   10. HERO — full-bleed scroll-snap slider
   ------------------------------------------------------------------------ */
.adri-hero { position: relative; }
.adri-hero__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.adri-hero__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .adri-hero__track { scroll-behavior: auto; } }

.adri-hero__slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: center;
  min-height: clamp(24rem, 62vw, 41rem);
  display: grid; align-items: end;
  isolation: isolate; overflow: hidden;
}
.adri-hero__media { position: absolute; inset: 0; z-index: -2; }
.adri-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim: only as dark as it needs to be at the bottom, clear at the top so the
   photograph is never muddied. */
.adri-hero__slide::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--adri-shade) 0%, var(--adri-shade-soft) 42%, transparent 70%);
}
.adri-hero__body {
  width: 100%; max-width: 46rem;
  padding: var(--adri-space-6) var(--adri-gutter) var(--adri-space-8);
  color: var(--adri-paper);
}
.adri-hero__title {
  margin-top: var(--adri-space-3);
  font-size: var(--adri-text-2xl); line-height: var(--adri-leading-2xl);
  font-weight: 500; color: var(--adri-paper);
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(20,20,20,.35);
}
.adri-hero__title a { color: inherit; }
.adri-hero__title a:hover { color: var(--adri-accent-soft); }
.adri-hero__title + .adri-dateline { margin-top: var(--adri-space-3); }
.adri-hero__body > .adri-tags { padding-top: var(--adri-space-1); }
.adri-hero__excerpt {
  margin-top: var(--adri-space-3); max-width: 34rem;
  font-size: var(--adri-text-sm); color: var(--adri-paper); opacity: .9;
}

/* Slider controls: hairline dots, plus arrows that only appear for pointers. */
.adri-hero__dots {
  position: absolute; left: 50%; bottom: var(--adri-space-4); transform: translateX(-50%);
  display: flex; gap: var(--adri-space-1); z-index: var(--adri-z-base);
}
.adri-hero__dot {
  width: var(--adri-tap); height: var(--adri-tap);
  display: grid; place-items: center;
}
.adri-hero__dot::before {
  content: ""; width: var(--adri-space-6); height: var(--adri-rule-thick);
  background: var(--adri-paper); opacity: .45;
  transition: opacity var(--adri-dur-fast) var(--adri-ease-out), background-color var(--adri-dur-fast) var(--adri-ease-out);
}
.adri-hero__dot:hover::before { opacity: .8; }
.adri-hero__dot[aria-current="true"]::before { opacity: 1; background: var(--adri-accent); }
.adri-hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: var(--adri-z-base);
  width: var(--adri-tap); height: var(--adri-tap);
  display: none; place-items: center;
  color: var(--adri-paper); background: var(--adri-shade-soft);
  backdrop-filter: blur(2px);
  transition: background-color var(--adri-dur-fast) var(--adri-ease-out);
}
.adri-hero__arrow:hover { background: var(--adri-shade); }
.adri-hero__arrow--prev { left: var(--adri-space-3); }
.adri-hero__arrow--next { right: var(--adri-space-3); }
@media (hover: hover) and (pointer: fine) { .adri-hero__arrow { display: grid; } }

/* ---------------------------------------------------------------------------
   11. CATEGORY TAGS
   ------------------------------------------------------------------------ */
.adri-tags { display: flex; flex-wrap: wrap; gap: var(--adri-space-3); list-style: none; }
.adri-tag {
  font-size: var(--adri-text-2xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--adri-track-wide); color: var(--adri-accent-ink);
  transition: color var(--adri-dur-fast) var(--adri-ease-out);
}
.adri-tag:hover { color: var(--adri-ink); }
.adri-tags--onphoto .adri-tag { color: var(--adri-paper); }
.adri-tags--onphoto .adri-tag:hover { color: var(--adri-accent-soft); }

/* ---------------------------------------------------------------------------
   12. ABOUT BAND — the letter from Adri
   Asymmetric on purpose: this is the one place the centred grid breaks.
   ------------------------------------------------------------------------ */
.adri-about { background: var(--adri-cream); }
.adri-about__grid {
  display: grid; gap: clamp(var(--adri-space-5), 5vw, var(--adri-space-9));
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
}
.adri-about__portrait { position: relative; }
.adri-about__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* Offset hairline frame — the photograph is "pinned" to the paper. */
.adri-about__portrait::after {
  content: ""; position: absolute; inset: 0;
  transform: translate(var(--adri-space-3), var(--adri-space-3));
  border: var(--adri-rule) solid var(--adri-accent);
  pointer-events: none;
}
.adri-about__body { max-width: 34rem; }
.adri-about__title { font-size: var(--adri-text-2xl); margin-block: var(--adri-space-2) var(--adri-space-4); }
.adri-about__text { font-size: var(--adri-text-base); color: var(--adri-ink-soft); }
.adri-about__text p + p { margin-top: var(--adri-space-4); }
.adri-about__sign {
  display: block; margin-top: var(--adri-space-5);
  font-family: var(--adri-font-script); font-size: var(--adri-text-xl);
  color: var(--adri-ink-strong); line-height: 1;
}

/* ---------------------------------------------------------------------------
   13. STRIP — horizontal card row (Trending / Most Popular)
   ------------------------------------------------------------------------ */
.adri-strip { display: grid; gap: clamp(var(--adri-space-5), 3vw, var(--adri-space-6)); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adri-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------------------------------------------------------------------------
   14. CARDS — the feed unit
   No rounded corners, no shadow, no floating tile. The photograph sits flush
   on the paper; the hairline under the title is the only chrome.
   ------------------------------------------------------------------------ */
.adri-card { display: flex; flex-direction: column; }
.adri-card__media { position: relative; overflow: hidden; display: block; background: var(--adri-cream-deep); }
.adri-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--adri-dur-slow) var(--adri-ease-out), filter var(--adri-dur-base) var(--adri-ease-out);
}
.adri-card:hover .adri-card__media img { transform: scale(1.035); }
.adri-card__media--4x5 img { aspect-ratio: 4 / 5; }
.adri-card__media--3x2 img { aspect-ratio: 3 / 2; }
.adri-card__media--1x1 img { aspect-ratio: 1 / 1; }
.adri-card__media--16x9 img { aspect-ratio: 16 / 9; }

.adri-card__body { padding-top: var(--adri-space-4); }
.adri-card__title {
  margin-block: var(--adri-space-2);
  font-size: var(--adri-text-xl); font-weight: 500; text-wrap: balance;
}
.adri-card__title a { color: var(--adri-ink); }
.adri-card__title a:hover { color: var(--adri-accent-ink); }
.adri-card__excerpt { font-size: var(--adri-text-sm); color: var(--adri-ink-soft); }
.adri-card__foot { margin-top: var(--adri-space-4); }

.adri-card--sm .adri-card__title { font-size: var(--adri-text-lg); }
.adri-card--lg .adri-card__title { font-size: var(--adri-text-2xl); }
.adri-card--lg .adri-card__excerpt { font-size: var(--adri-text-base); }

/* Mini card: sidebar row, image left, text right. */
.adri-card--mini { flex-direction: row; gap: var(--adri-space-4); align-items: flex-start; }
.adri-card--mini .adri-card__media { flex: 0 0 5.5rem; }
.adri-card--mini .adri-card__media img { aspect-ratio: 1 / 1; }
.adri-card--mini .adri-card__body { padding-top: 0; }
.adri-card--mini .adri-card__title { font-size: var(--adri-text-lg); line-height: 1.24; margin-block: var(--adri-space-1) var(--adri-space-2); }

/* Numbered card, used by "Most Popular" — the rank is set in the display face
   at a size that makes it an illustration rather than a badge. */
.adri-card--ranked { position: relative; }
.adri-card--ranked .adri-card__rank {
  position: absolute; top: calc(var(--adri-space-3) * -1); left: calc(var(--adri-space-3) * -1);
  z-index: var(--adri-z-base);
  font-family: var(--adri-font-display); font-size: var(--adri-text-xl);
  font-style: italic; color: var(--adri-accent-ink);
  background: var(--adri-paper); width: var(--adri-space-7); height: var(--adri-space-7);
  display: grid; place-items: center; line-height: 1;
}

/* "Read on" affordance */
.adri-more {
  display: inline-flex; align-items: center; gap: var(--adri-space-2);
  min-height: var(--adri-tap);
  font-size: var(--adri-text-2xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--adri-track-wide); color: var(--adri-ink);
}
.adri-more::after {
  content: ""; width: var(--adri-space-6); height: var(--adri-rule); background: var(--adri-accent);
  transition: width var(--adri-dur-base) var(--adri-ease-out);
}
.adri-more:hover { color: var(--adri-accent-ink); }
.adri-more:hover::after { width: var(--adri-space-8); }

/* ---------------------------------------------------------------------------
   15. FEED + SIDEBAR
   ------------------------------------------------------------------------ */
.adri-main { padding-block: var(--adri-space-9); }
.adri-layout {
  display: grid; align-items: start;
  gap: clamp(var(--adri-space-6), 5vw, var(--adri-space-9));
  grid-template-columns: minmax(0, 1fr) minmax(0, 20.5rem);
}
.adri-layout--full { grid-template-columns: minmax(0, 1fr); }
.adri-feed { display: grid; gap: var(--adri-space-9); }
.adri-feed > article { border-bottom: var(--adri-rule) solid var(--adri-hairline); padding-bottom: var(--adri-space-9); }
.adri-feed > article:last-child { border-bottom: 0; padding-bottom: 0; }

.adri-sidebar { position: sticky; top: calc(var(--adri-bar-h) + var(--adri-space-5)); display: grid; gap: var(--adri-space-8); }
@media (max-width: 63.99em) { .adri-sidebar { position: static; } }

.adri-widget__title {
  font-size: var(--adri-text-2xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--adri-track-widest); color: var(--adri-ink);
  padding-bottom: var(--adri-space-3); margin-bottom: var(--adri-space-5);
  border-bottom: var(--adri-rule) solid var(--adri-accent);
  font-family: var(--adri-font-body);
}
.adri-widget ul { list-style: none; }
.adri-widget > ul > li { border-bottom: var(--adri-rule) solid var(--adri-hairline); }
.adri-widget > ul > li > a {
  display: flex; align-items: center; min-height: var(--adri-tap);
  font-size: var(--adri-text-sm); color: var(--adri-ink);
  transition: padding-inline-start var(--adri-dur-base) var(--adri-ease-out);
}
.adri-widget > ul > li > a:hover { padding-inline-start: var(--adri-space-3); color: var(--adri-accent-ink); }
.adri-widget__stack { display: grid; gap: var(--adri-space-5); }

/* Portrait widget — the sidebar "hello" */
.adri-hello { text-align: center; background: var(--adri-cream); padding: var(--adri-space-6) var(--adri-space-5); }
.adri-hello img { width: 8rem; height: 8rem; object-fit: cover; border-radius: var(--adri-radius-pill); margin-inline: auto; }
.adri-hello__name { font-family: var(--adri-font-script); font-size: var(--adri-text-xl); color: var(--adri-ink-strong); margin-top: var(--adri-space-3); line-height: 1; }
.adri-hello__text { font-size: var(--adri-text-sm); margin-top: var(--adri-space-3); }

/* ---------------------------------------------------------------------------
   16. PAGINATION
   ------------------------------------------------------------------------ */
.adri-pagination { margin-top: var(--adri-space-9); }
.adri-pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--adri-space-2); }
.adri-pagination .page-numbers {
  display: inline-grid; place-items: center;
  min-width: var(--adri-tap); height: var(--adri-tap); padding-inline: var(--adri-space-3);
  font-size: var(--adri-text-2xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--adri-track-wide); color: var(--adri-ink);
  border: var(--adri-rule) solid transparent;
  transition: border-color var(--adri-dur-fast) var(--adri-ease-out), color var(--adri-dur-fast) var(--adri-ease-out), background-color var(--adri-dur-fast) var(--adri-ease-out);
}
.adri-pagination a.page-numbers:hover { border-color: var(--adri-accent); color: var(--adri-accent-ink); }
.adri-pagination .page-numbers.current { background: var(--adri-ink); color: var(--adri-paper); }
.adri-pagination .page-numbers.dots { color: var(--adri-ink-faint); }

/* ---------------------------------------------------------------------------
   17. SINGLE POST
   ------------------------------------------------------------------------ */
.adri-postheader { text-align: center; padding-block: var(--adri-space-8) var(--adri-space-6); }
.adri-postheader__title { margin-block: var(--adri-space-4); text-wrap: balance; }
.adri-postheader__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--adri-space-4); }
.adri-postfeature img { width: 100%; max-height: 42rem; object-fit: cover; }
.adri-postfeature figcaption { margin-top: var(--adri-space-3); text-align: center; }

/* Reading progress — the tan hairline again, this time measuring the article. */
.adri-progress {
  position: fixed; top: 0; left: 0; right: 0; height: var(--adri-rule-thick);
  z-index: calc(var(--adri-z-sticky) + 1);
  background: transparent; pointer-events: none;
}
.adri-progress__bar {
  height: 100%; width: 0; background: var(--adri-accent);
  transform-origin: left center;
}

.adri-prose { font-size: var(--adri-text-base); line-height: var(--adri-leading-base); color: var(--adri-ink-soft); }
.adri-prose > * + * { margin-top: var(--adri-space-5); }
.adri-prose h2 { font-size: var(--adri-text-xl); margin-top: var(--adri-space-8); }
.adri-prose h3 { font-size: var(--adri-text-lg); margin-top: var(--adri-space-7); }
.adri-prose ul, .adri-prose ol { padding-inline-start: var(--adri-space-5); }
.adri-prose li + li { margin-top: var(--adri-space-2); }
.adri-prose li::marker { color: var(--adri-accent); }
.adri-prose img, .adri-prose figure { margin-block: var(--adri-space-7); }
.adri-prose figcaption {
  margin-top: var(--adri-space-3); font-size: var(--adri-text-2xs);
  text-transform: uppercase; letter-spacing: var(--adri-track-wide); color: var(--adri-ink-faint);
}
.adri-prose blockquote {
  margin-block: var(--adri-space-8); padding-inline-start: var(--adri-space-5);
  border-inline-start: var(--adri-rule-thick) solid var(--adri-accent);
  font-family: var(--adri-font-display); font-size: var(--adri-text-xl);
  font-style: italic; line-height: 1.34; color: var(--adri-ink);
  letter-spacing: var(--adri-track-tight);
}
.adri-prose blockquote cite { display: block; margin-top: var(--adri-space-3); font-family: var(--adri-font-body); font-style: normal; font-size: var(--adri-text-2xs); text-transform: uppercase; letter-spacing: var(--adri-track-wide); color: var(--adri-ink-faint); }
.adri-prose code { font-family: var(--adri-font-mono); font-size: .88em; background: var(--adri-cream); padding: .12em .38em; }
.adri-prose pre { background: var(--adri-cream); padding: var(--adri-space-5); overflow-x: auto; font-family: var(--adri-font-mono); font-size: var(--adri-text-sm); }
.adri-prose pre code { background: none; padding: 0; }
.adri-prose table { font-size: var(--adri-text-sm); display: block; overflow-x: auto; }
.adri-prose th, .adri-prose td { text-align: start; padding: var(--adri-space-3); border-bottom: var(--adri-rule) solid var(--adri-hairline); }
.adri-prose th { font-family: var(--adri-font-body); font-size: var(--adri-text-2xs); text-transform: uppercase; letter-spacing: var(--adri-track-wide); color: var(--adri-ink); }
/* Drop cap — only on the first paragraph of a single post. */
.adri-prose--lead > p:first-of-type::first-letter {
  float: left; font-family: var(--adri-font-display); font-size: 3.9em;
  line-height: .82; padding-right: .08em; margin-top: .06em;
  color: var(--adri-ink-strong);
}

.adri-postfoot { margin-top: var(--adri-space-8); padding-top: var(--adri-space-6); border-top: var(--adri-rule) solid var(--adri-hairline); display: grid; gap: var(--adri-space-5); }
.adri-share { display: flex; align-items: center; gap: var(--adri-space-2); flex-wrap: wrap; }
.adri-share__label { margin-right: var(--adri-space-2); }

.adri-author { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--adri-space-5); align-items: center; background: var(--adri-cream); padding: var(--adri-space-6); }
.adri-author img { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--adri-radius-pill); }
.adri-author__name { font-family: var(--adri-font-script); font-size: var(--adri-text-xl); color: var(--adri-ink-strong); line-height: 1; }
.adri-author__bio { font-size: var(--adri-text-sm); margin-top: var(--adri-space-2); }

.adri-postnav { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--adri-space-5); margin-top: var(--adri-space-8); }
.adri-postnav__link { display: grid; gap: var(--adri-space-2); padding: var(--adri-space-5); border: var(--adri-rule) solid var(--adri-hairline); transition: border-color var(--adri-dur-fast) var(--adri-ease-out), background-color var(--adri-dur-fast) var(--adri-ease-out); }
.adri-postnav__link:hover { border-color: var(--adri-accent); background: var(--adri-cream); }
.adri-postnav__link--next { text-align: end; }
.adri-postnav__title { font-family: var(--adri-font-display); font-size: var(--adri-text-lg); color: var(--adri-ink); letter-spacing: var(--adri-track-tight); }

/* ---------------------------------------------------------------------------
   18. SHOP / AFFILIATE TEMPLATE
   ------------------------------------------------------------------------ */
.adri-shop { display: grid; gap: clamp(var(--adri-space-5), 3vw, var(--adri-space-7)); grid-template-columns: repeat(4, minmax(0,1fr)); }
.adri-product { display: flex; flex-direction: column; }
.adri-product__media { position: relative; overflow: hidden; background: var(--adri-cream); }
.adri-product__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform var(--adri-dur-slow) var(--adri-ease-out); }
.adri-product:hover .adri-product__media img { transform: scale(1.04); }
.adri-product__badge {
  position: absolute; top: var(--adri-space-3); left: var(--adri-space-3);
  background: var(--adri-paper); color: var(--adri-accent-ink);
  padding: var(--adri-space-1) var(--adri-space-3);
  font-size: var(--adri-text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--adri-track-wide);
}
.adri-product__name { font-family: var(--adri-font-display); font-size: var(--adri-text-lg); color: var(--adri-ink); margin-top: var(--adri-space-3); letter-spacing: var(--adri-track-tight); }
.adri-product__price { font-family: var(--adri-font-mono); font-size: var(--adri-text-xs); color: var(--adri-ink-faint); margin-top: var(--adri-space-1); }
.adri-product__note { font-size: var(--adri-text-sm); margin-top: var(--adri-space-2); }
.adri-product .adri-btn { margin-top: var(--adri-space-4); }
.adri-disclosure {
  background: var(--adri-notice-soft); border-inline-start: var(--adri-rule-thick) solid var(--adri-accent);
  padding: var(--adri-space-4) var(--adri-space-5); font-size: var(--adri-text-sm);
  margin-bottom: var(--adri-space-8);
}

/* ---------------------------------------------------------------------------
   19. BUTTONS + FORMS — all seven states
   ------------------------------------------------------------------------ */
.adri-btn {
  --_bg: var(--adri-ink); --_fg: var(--adri-paper); --_bd: var(--adri-ink);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--adri-space-2);
  min-height: var(--adri-tap); padding-inline: var(--adri-space-6);
  background: var(--_bg); color: var(--_fg);
  border: var(--adri-rule) solid var(--_bd);
  font-size: var(--adri-text-2xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--adri-track-wide);
  cursor: pointer;
  transition: background-color var(--adri-dur-fast) var(--adri-ease-out),
              color var(--adri-dur-fast) var(--adri-ease-out),
              border-color var(--adri-dur-fast) var(--adri-ease-out),
              transform var(--adri-dur-fast) var(--adri-ease-out);
}
.adri-btn:hover { --_bg: var(--adri-accent-ink); --_bd: var(--adri-accent-ink); --_fg: var(--adri-paper); color: var(--adri-paper); }
.adri-btn:active { transform: translateY(1px); }
.adri-btn--ghost { --_bg: transparent; --_fg: var(--adri-ink); --_bd: var(--adri-ink); }
.adri-btn--ghost:hover { --_bg: var(--adri-ink); --_fg: var(--adri-paper); --_bd: var(--adri-ink); }
.adri-btn--quiet { --_bg: transparent; --_fg: var(--adri-accent-ink); --_bd: var(--adri-accent); }
.adri-btn--quiet:hover { --_bg: var(--adri-accent-soft); --_fg: var(--adri-accent-ink); --_bd: var(--adri-accent); color: var(--adri-accent-ink); }
.adri-btn[disabled], .adri-btn[aria-disabled="true"] {
  --_bg: var(--adri-cream-deep); --_fg: var(--adri-ink-faint); --_bd: var(--adri-cream-deep);
  cursor: not-allowed; transform: none;
}
.adri-btn[data-state="loading"] { color: transparent; pointer-events: none; }
.adri-btn[data-state="loading"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: var(--adri-space-4); height: var(--adri-space-4);
  border: var(--adri-rule-thick) solid currentColor; border-top-color: transparent;
  border-radius: var(--adri-radius-pill); color: var(--adri-paper);
  animation: adri-spin var(--adri-dur-slow) linear infinite;
}
@keyframes adri-spin { to { transform: rotate(1turn); } }

.adri-field { display: grid; gap: var(--adri-space-2); }
.adri-label { font-size: var(--adri-text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--adri-track-wide); color: var(--adri-ink); }
.adri-input, .adri-textarea, .adri-select {
  width: 100%; min-height: var(--adri-tap);
  padding: var(--adri-space-3) var(--adri-space-4);
  background: var(--adri-paper); color: var(--adri-ink);
  border: var(--adri-rule) solid var(--adri-cream-deep);
  border-radius: var(--adri-radius-sm);
  font-size: var(--adri-text-sm); font-family: var(--adri-font-body);
  transition: border-color var(--adri-dur-fast) var(--adri-ease-out), background-color var(--adri-dur-fast) var(--adri-ease-out);
}
.adri-textarea { min-height: 9rem; resize: vertical; line-height: var(--adri-leading-sm); }
/* iOS Safari zooms the page when a control under 16px takes focus, and never
   zooms back out. 16px is the threshold, so on touch devices we sit on it. */
@media (pointer: coarse) {
  .adri-input, .adri-textarea, .adri-select { font-size: 1rem; }
}
.adri-input:hover, .adri-textarea:hover { border-color: var(--adri-accent); }
.adri-input:focus-visible, .adri-textarea:focus-visible, .adri-select:focus-visible { border-color: var(--adri-focus); }
.adri-input::placeholder, .adri-textarea::placeholder { color: var(--adri-ink-faint); }
.adri-input[disabled], .adri-textarea[disabled] { background: var(--adri-cream); color: var(--adri-ink-faint); cursor: not-allowed; }
.adri-input[aria-invalid="true"], .adri-textarea[aria-invalid="true"] { border-color: var(--adri-danger); background: var(--adri-danger-soft); }
.adri-fielderror { font-size: var(--adri-text-xs); color: var(--adri-danger); }
.adri-fieldhint { font-size: var(--adri-text-xs); color: var(--adri-ink-faint); }

/* Search: inline in the bar, expanding to a sheet. */
.adri-searchsheet {
  position: fixed; inset: 0; z-index: var(--adri-z-sheet);
  display: grid; place-items: start center;
  padding-top: 22vh;
  background: rgba(253, 252, 250, .97);
  opacity: 0; visibility: hidden;
  transition: opacity var(--adri-dur-base) var(--adri-ease-out), visibility 0s linear var(--adri-dur-base);
}
.adri-searchsheet[data-open="true"] { opacity: 1; visibility: visible; transition-delay: 0s; }
.adri-searchsheet__form { width: min(46rem, 100% - var(--adri-gutter) * 2); }
.adri-searchsheet__input {
  width: 100%; background: transparent; border: 0;
  border-bottom: var(--adri-rule) solid var(--adri-accent);
  font-family: var(--adri-font-display); font-size: var(--adri-text-2xl);
  letter-spacing: var(--adri-track-tight); color: var(--adri-ink);
  padding-block: var(--adri-space-3); border-radius: 0;
}
.adri-searchsheet__input::placeholder { color: var(--adri-ink-faint); }
.adri-searchsheet__close { position: absolute; top: var(--adri-space-4); right: var(--adri-space-4); }

/* Touch sizing. On a phone the category tags and the dateline place are real
   navigation, but as inline text they were only 15–18px tall. Give them the
   full 44px target on coarse pointers — and only there, so the desktop
   composition keeps its tight editorial rhythm. */
@media (pointer: coarse) {
  .adri-tag,
  .adri-dateline__place,
  .adri-places__count {
    display: inline-flex; align-items: center;
    min-height: var(--adri-tap);
  }
  .adri-tags { gap: var(--adri-space-4); row-gap: 0; }
  .adri-card__title a,
  .adri-hero__title a { display: inline-block; }
  /* A single-line card title is only as tall as its line box. Raise it to a
     comfortable target without letting it collide with the meta rows above
     and below — those keep their own 44px areas. */
  .adri-card__title a { min-height: 2rem; }
  .adri-instagram__handle { display: inline-flex; align-items: center; min-height: var(--adri-tap); }
  .adri-masthead__link { padding-block: var(--adri-space-2); }
  /* The default tap flash is a blue box that belongs to no palette. */
  html { -webkit-tap-highlight-color: rgba(204, 179, 145, .28); }
}

/* ---------------------------------------------------------------------------
   20. SIDE PANEL — mobile + overflow navigation
   ------------------------------------------------------------------------ */
.adri-panel {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: var(--adri-z-panel);
  width: min(23rem, 88vw);
  background: var(--adri-paper);
  border-inline-start: var(--adri-rule) solid var(--adri-hairline);
  box-shadow: var(--adri-shadow-lg);
  transform: translateX(101%);
  visibility: hidden;
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--adri-space-6) var(--adri-space-6) var(--adri-space-8);
  transition: transform var(--adri-dur-base) var(--adri-ease-spring), visibility 0s linear var(--adri-dur-base);
}
.adri-panel[data-open="true"] { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.adri-panel__scrim {
  position: fixed; inset: 0; z-index: calc(var(--adri-z-panel) - 1);
  background: var(--adri-shade); opacity: 0; visibility: hidden;
  transition: opacity var(--adri-dur-base) var(--adri-ease-out), visibility 0s linear var(--adri-dur-base);
}
.adri-panel__scrim[data-open="true"] { opacity: 1; visibility: visible; transition-delay: 0s; }
.adri-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--adri-space-6); }
.adri-panel__menu { list-style: none; }
.adri-panel__menu li { border-bottom: var(--adri-rule) solid var(--adri-hairline); }
.adri-panel__menu a {
  display: block; padding-block: var(--adri-space-3); min-height: var(--adri-tap);
  color: var(--adri-ink);
}
.adri-panel__menu .adri-nav__eyebrow { display: block; margin-bottom: 2px; }
.adri-panel__menu .adri-nav__label { display: block; }
.adri-panel__menu .sub-menu { list-style: none; padding-inline-start: var(--adri-space-4); }
.adri-panel__menu .sub-menu li:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------------------
   21. SOCIAL + INSTAGRAM STRIP
   ------------------------------------------------------------------------ */
.adri-social { display: flex; align-items: center; gap: var(--adri-space-1); list-style: none; }
.adri-instagram { background: var(--adri-paper); }
.adri-instagram__head { text-align: center; padding-block: var(--adri-space-6) var(--adri-space-5); }
.adri-instagram__handle { font-family: var(--adri-font-script); font-size: var(--adri-text-xl); color: var(--adri-ink-strong); line-height: 1; }
.adri-instagram__grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); }
.adri-instagram__cell { position: relative; display: block; overflow: hidden; background: var(--adri-cream-deep); }
.adri-instagram__cell img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform var(--adri-dur-slow) var(--adri-ease-out); }
.adri-instagram__cell::after {
  content: ""; position: absolute; inset: 0;
  background: var(--adri-shade); opacity: 0;
  transition: opacity var(--adri-dur-base) var(--adri-ease-out);
}
.adri-instagram__cell:hover img { transform: scale(1.06); }
.adri-instagram__cell:hover::after { opacity: 1; }

/* ---------------------------------------------------------------------------
   22. FOOTER
   ------------------------------------------------------------------------ */
.adri-footer { background: var(--adri-cream); }
.adri-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(var(--adri-space-6), 5vw, var(--adri-space-9)); padding-block: var(--adri-space-8); }
.adri-footer__mark { font-family: var(--adri-font-script); font-size: var(--adri-text-xl); color: var(--adri-ink-strong); line-height: 1; }
.adri-footer__text { font-size: var(--adri-text-sm); margin-top: var(--adri-space-3); }
.adri-footer__menu { list-style: none; }
.adri-footer__menu li { border-bottom: var(--adri-rule) solid var(--adri-hairline); }
.adri-footer__menu li:last-child { border-bottom: 0; }
.adri-footer__menu a {
  display: flex; align-items: center; min-height: var(--adri-tap);
  font-size: var(--adri-text-2xs); font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--adri-track-wide); color: var(--adri-ink);
  transition: padding-inline-start var(--adri-dur-base) var(--adri-ease-out), color var(--adri-dur-fast) var(--adri-ease-out);
}
.adri-footer__menu a:hover { padding-inline-start: var(--adri-space-3); color: var(--adri-accent-ink); }
.adri-footer .adri-social { margin-top: var(--adri-space-4); margin-inline-start: calc(var(--adri-space-3) * -1); }

.adri-footer__bottom {
  border-top: var(--adri-rule) solid var(--adri-hairline);
  padding-block: var(--adri-space-4);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--adri-space-4);
}
.adri-totop { display: inline-flex; align-items: center; gap: var(--adri-space-2); min-height: var(--adri-tap); }

/* ---------------------------------------------------------------------------
   23. COMMENTS
   ------------------------------------------------------------------------ */
.adri-comments { margin-top: var(--adri-space-9); }
.adri-commentlist { list-style: none; }
.adri-commentlist .children { list-style: none; padding-inline-start: clamp(var(--adri-space-4), 4vw, var(--adri-space-8)); }
.adri-comment { padding-block: var(--adri-space-5); border-bottom: var(--adri-rule) solid var(--adri-hairline); }
.adri-comment__head { display: flex; align-items: center; gap: var(--adri-space-3); }
.adri-comment__head img { width: var(--adri-space-7); height: var(--adri-space-7); border-radius: var(--adri-radius-pill); }
.adri-comment__author { font-family: var(--adri-font-display); font-size: var(--adri-text-lg); color: var(--adri-ink); letter-spacing: var(--adri-track-tight); }
.adri-comment__body { margin-top: var(--adri-space-3); font-size: var(--adri-text-sm); }
.adri-commentform { display: grid; gap: var(--adri-space-4); margin-top: var(--adri-space-6); }
.adri-commentform__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--adri-space-4); }

/* ---------------------------------------------------------------------------
   24. STATES: empty, error, notice, loading
   ------------------------------------------------------------------------ */
.adri-empty {
  text-align: center; padding: var(--adri-space-9) var(--adri-gutter);
  border: var(--adri-rule) solid var(--adri-hairline);
  background: var(--adri-cream);
}
.adri-empty__title { font-size: var(--adri-text-xl); margin-block: var(--adri-space-3); }
.adri-empty__text { font-size: var(--adri-text-sm); max-width: 32rem; margin-inline: auto; }
.adri-empty__actions { display: flex; flex-wrap: wrap; gap: var(--adri-space-3); justify-content: center; margin-top: var(--adri-space-5); }

.adri-notice { padding: var(--adri-space-4) var(--adri-space-5); font-size: var(--adri-text-sm); border-inline-start: var(--adri-rule-thick) solid var(--adri-accent); background: var(--adri-notice-soft); color: var(--adri-ink); }
.adri-notice--error { border-color: var(--adri-danger); background: var(--adri-danger-soft); color: var(--adri-danger); }
.adri-notice--ok { border-color: var(--adri-success); background: var(--adri-success-soft); color: var(--adri-success); }

/* Skeleton for anything that streams in. Shimmer is a slow paper sheen. */
.adri-skeleton { background: var(--adri-cream-deep); position: relative; overflow: hidden; }
.adri-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(253,252,250,.72), transparent);
  transform: translateX(-100%);
  animation: adri-sheen 1.6s var(--adri-ease-out) infinite;
}
@keyframes adri-sheen { to { transform: translateX(100%); } }

/* 404 */
.adri-404 { text-align: center; padding-block: var(--adri-space-10); }
.adri-404__code { font-family: var(--adri-font-display); font-style: italic; font-size: var(--adri-text-3xl); color: var(--adri-accent); line-height: 1; }

/* ---------------------------------------------------------------------------
   25. ENTRANCE — one orchestrated reveal, opt-in per element
   ------------------------------------------------------------------------ */
/* `.adri-reveal` on its own does nothing. The script adds `.is-armed` to hide
   an element and `.is-in` to release it — so if the script never runs, or
   throws, the content is simply visible. A CSS-first version of this pattern
   hides everything up front and loses the whole page when the script fails. */
.adri-reveal.is-armed { opacity: 0; transform: translateY(var(--adri-space-4)); }
.adri-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--adri-dur-slow) var(--adri-ease-out),
              transform var(--adri-dur-slow) var(--adri-ease-out);
  transition-delay: var(--adri-reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
  .adri-reveal.is-armed { opacity: 1; transform: none; }
  .adri-card:hover .adri-card__media img,
  .adri-product:hover .adri-product__media img,
  .adri-instagram__cell:hover img { transform: none; }
}

/* ---------------------------------------------------------------------------
   26. BREAKPOINTS — four steps, narrative preserved at each
   The feed never becomes a single sad column of tiny thumbnails; below the
   sidebar breakpoint the sidebar becomes a full-width band of its own.
   ------------------------------------------------------------------------ */
@media (max-width: 74.99em) {           /* < 1200px — laptop               */
  .adri-shop { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .adri-instagram__grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (max-width: 63.99em) {           /* < 1024px — tablet               */
  .adri-layout { grid-template-columns: minmax(0, 1fr); }
  .adri-sidebar { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-flow: dense; }
  .adri-about__grid { grid-template-columns: minmax(0,1fr); }
  .adri-about__portrait { max-width: 24rem; }
  .adri-footer__cols { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .adri-topbar__inner { grid-template-columns: 1fr auto; }
  .adri-nav { display: none; }          /* primary nav moves into the panel */
  .adri-hero__body { padding-bottom: var(--adri-space-9); }
}

@media (max-width: 47.99em) {           /* < 768px — large phone           */
  .adri-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .adri-strip > :nth-child(n+5) { display: none; }
  .adri-shop { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .adri-sidebar { grid-template-columns: minmax(0,1fr); }
  .adri-postnav { grid-template-columns: minmax(0,1fr); }
  .adri-postnav__link--next { text-align: start; }
  .adri-commentform__row { grid-template-columns: minmax(0,1fr); }
  .adri-author { grid-template-columns: minmax(0,1fr); text-align: center; justify-items: center; }
  .adri-minimenu { display: none; }
  .adri-topbar__mark { display: inline-flex; }
  /* Five icons left the wordmark ~114px and it truncated. On a phone the bar
     only needs the way home, search, and the menu — the social links are in
     the panel and the footer already. */
  .adri-topbar__right .adri-social { display: none; }
  .adri-sectionhead__title::before,
  .adri-sectionhead__title::after { display: none; }
  .adri-sectionhead__title { gap: 0; }
  .adri-instagram__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .adri-section { padding-block: var(--adri-space-8); }
}

@media (max-width: 29.99em) {           /* < 480px — small phone           */
  .adri-strip { grid-template-columns: minmax(0,1fr); }
  .adri-strip > :nth-child(n+4) { display: none; }
  .adri-footer__cols { grid-template-columns: minmax(0,1fr); text-align: center; }
  .adri-footer__bottom { justify-content: center; text-align: center; }
  .adri-card--mini .adri-card__media { flex-basis: 4.5rem; }
  .adri-prose--lead > p:first-of-type::first-letter { font-size: 3.2em; }
}

/* ---------------------------------------------------------------------------
   27. PRINT — she will print recipes and packing lists. Make it good.
   ------------------------------------------------------------------------ */
@media print {
  .adri-topbar, .adri-panel, .adri-panel__scrim, .adri-searchsheet,
  .adri-instagram, .adri-sidebar, .adri-postnav, .adri-comments,
  .adri-hero__dots, .adri-hero__arrow, .adri-share, .adri-progress { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .adri-prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .adri-layout { display: block; }
}