/*
Theme Name: Prahou
Template: twentytwentyfive
Description: Child theme for prahou.com. One stylesheet. Every colour, font and size lives in :root below.
Version: 0.9.3
Author: Prahou
Text Domain: prahou
License: GNU General Public License v2 or later
*/

/* =========================================================
   1. TOKENS — the only part you normally edit
   ========================================================= */
:root {
  /* ornament images, defined once and reused */
  --corner-tl: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3Cg transform='rotate%280 48 48%29' fill='none' stroke='%23B59758' stroke-width='1' stroke-linecap='round'%3E %3Cpath d='M2 94 V16 Q2 2 16 2 H94' opacity='.9'/%3E %3Cpath d='M9 94 V22 Q9 9 22 9 H94' opacity='.45'/%3E %3Cpath d='M16 16 c 12 0 16 8 16 18 c 0 -10 4 -18 16 -18' opacity='.8'/%3E %3Cpath d='M16 16 c 0 12 8 16 18 16 c -10 0 -18 4 -18 16' opacity='.8'/%3E %3Cpath d='M36 10 c 6 0 10 4 10 10 M10 36 c 0 6 4 10 10 10' opacity='.5'/%3E %3C/g%3E %3Cpath d='M16 11 L21 16 L16 21 L11 16 Z' fill='%23B59758' transform='rotate%280 48 48%29'/%3E %3C/svg%3E");
  --corner-tr: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3Cg transform='rotate%2890 48 48%29' fill='none' stroke='%23B59758' stroke-width='1' stroke-linecap='round'%3E %3Cpath d='M2 94 V16 Q2 2 16 2 H94' opacity='.9'/%3E %3Cpath d='M9 94 V22 Q9 9 22 9 H94' opacity='.45'/%3E %3Cpath d='M16 16 c 12 0 16 8 16 18 c 0 -10 4 -18 16 -18' opacity='.8'/%3E %3Cpath d='M16 16 c 0 12 8 16 18 16 c -10 0 -18 4 -18 16' opacity='.8'/%3E %3Cpath d='M36 10 c 6 0 10 4 10 10 M10 36 c 0 6 4 10 10 10' opacity='.5'/%3E %3C/g%3E %3Cpath d='M16 11 L21 16 L16 21 L11 16 Z' fill='%23B59758' transform='rotate%2890 48 48%29'/%3E %3C/svg%3E");
  --corner-bl: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3Cg transform='rotate%28270 48 48%29' fill='none' stroke='%23B59758' stroke-width='1' stroke-linecap='round'%3E %3Cpath d='M2 94 V16 Q2 2 16 2 H94' opacity='.9'/%3E %3Cpath d='M9 94 V22 Q9 9 22 9 H94' opacity='.45'/%3E %3Cpath d='M16 16 c 12 0 16 8 16 18 c 0 -10 4 -18 16 -18' opacity='.8'/%3E %3Cpath d='M16 16 c 0 12 8 16 18 16 c -10 0 -18 4 -18 16' opacity='.8'/%3E %3Cpath d='M36 10 c 6 0 10 4 10 10 M10 36 c 0 6 4 10 10 10' opacity='.5'/%3E %3C/g%3E %3Cpath d='M16 11 L21 16 L16 21 L11 16 Z' fill='%23B59758' transform='rotate%28270 48 48%29'/%3E %3C/svg%3E");
  --corner-br: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3Cg transform='rotate%28180 48 48%29' fill='none' stroke='%23B59758' stroke-width='1' stroke-linecap='round'%3E %3Cpath d='M2 94 V16 Q2 2 16 2 H94' opacity='.9'/%3E %3Cpath d='M9 94 V22 Q9 9 22 9 H94' opacity='.45'/%3E %3Cpath d='M16 16 c 12 0 16 8 16 18 c 0 -10 4 -18 16 -18' opacity='.8'/%3E %3Cpath d='M16 16 c 0 12 8 16 18 16 c -10 0 -18 4 -18 16' opacity='.8'/%3E %3Cpath d='M36 10 c 6 0 10 4 10 10 M10 36 c 0 6 4 10 10 10' opacity='.5'/%3E %3C/g%3E %3Cpath d='M16 11 L21 16 L16 21 L11 16 Z' fill='%23B59758' transform='rotate%28180 48 48%29'/%3E %3C/svg%3E");
  --corner-d-tl: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3Cg transform='rotate%280 48 48%29' fill='none' stroke='%237A5C24' stroke-width='1' stroke-linecap='round'%3E %3Cpath d='M2 94 V16 Q2 2 16 2 H94' opacity='.9'/%3E %3Cpath d='M9 94 V22 Q9 9 22 9 H94' opacity='.45'/%3E %3Cpath d='M16 16 c 12 0 16 8 16 18 c 0 -10 4 -18 16 -18' opacity='.8'/%3E %3Cpath d='M16 16 c 0 12 8 16 18 16 c -10 0 -18 4 -18 16' opacity='.8'/%3E %3Cpath d='M36 10 c 6 0 10 4 10 10 M10 36 c 0 6 4 10 10 10' opacity='.5'/%3E %3C/g%3E %3Cpath d='M16 11 L21 16 L16 21 L11 16 Z' fill='%237A5C24' transform='rotate%280 48 48%29'/%3E %3C/svg%3E");
  --corner-d-tr: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3Cg transform='rotate%2890 48 48%29' fill='none' stroke='%237A5C24' stroke-width='1' stroke-linecap='round'%3E %3Cpath d='M2 94 V16 Q2 2 16 2 H94' opacity='.9'/%3E %3Cpath d='M9 94 V22 Q9 9 22 9 H94' opacity='.45'/%3E %3Cpath d='M16 16 c 12 0 16 8 16 18 c 0 -10 4 -18 16 -18' opacity='.8'/%3E %3Cpath d='M16 16 c 0 12 8 16 18 16 c -10 0 -18 4 -18 16' opacity='.8'/%3E %3Cpath d='M36 10 c 6 0 10 4 10 10 M10 36 c 0 6 4 10 10 10' opacity='.5'/%3E %3C/g%3E %3Cpath d='M16 11 L21 16 L16 21 L11 16 Z' fill='%237A5C24' transform='rotate%2890 48 48%29'/%3E %3C/svg%3E");
  --corner-d-bl: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3Cg transform='rotate%28270 48 48%29' fill='none' stroke='%237A5C24' stroke-width='1' stroke-linecap='round'%3E %3Cpath d='M2 94 V16 Q2 2 16 2 H94' opacity='.9'/%3E %3Cpath d='M9 94 V22 Q9 9 22 9 H94' opacity='.45'/%3E %3Cpath d='M16 16 c 12 0 16 8 16 18 c 0 -10 4 -18 16 -18' opacity='.8'/%3E %3Cpath d='M16 16 c 0 12 8 16 18 16 c -10 0 -18 4 -18 16' opacity='.8'/%3E %3Cpath d='M36 10 c 6 0 10 4 10 10 M10 36 c 0 6 4 10 10 10' opacity='.5'/%3E %3C/g%3E %3Cpath d='M16 11 L21 16 L16 21 L11 16 Z' fill='%237A5C24' transform='rotate%28270 48 48%29'/%3E %3C/svg%3E");
  --corner-d-br: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E %3Cg transform='rotate%28180 48 48%29' fill='none' stroke='%237A5C24' stroke-width='1' stroke-linecap='round'%3E %3Cpath d='M2 94 V16 Q2 2 16 2 H94' opacity='.9'/%3E %3Cpath d='M9 94 V22 Q9 9 22 9 H94' opacity='.45'/%3E %3Cpath d='M16 16 c 12 0 16 8 16 18 c 0 -10 4 -18 16 -18' opacity='.8'/%3E %3Cpath d='M16 16 c 0 12 8 16 18 16 c -10 0 -18 4 -18 16' opacity='.8'/%3E %3Cpath d='M36 10 c 6 0 10 4 10 10 M10 36 c 0 6 4 10 10 10' opacity='.5'/%3E %3C/g%3E %3Cpath d='M16 11 L21 16 L16 21 L11 16 Z' fill='%237A5C24' transform='rotate%28180 48 48%29'/%3E %3C/svg%3E");

  /* --- Palette: 11 colours --- */
  --c-night:      #0C1219;  /* page: midnight blue-black */
  --c-night-2:    #141B24;  /* raised panels, cards, menu */
  --c-slate:      #2E3844;  /* muted borders, disabled, map streets */
  --c-cream:      #F1E9D8;  /* text on dark; parchment sections */
  --c-parchment:  #E6DAC2;  /* darker parchment: panels on light */
  --c-ink:        #1A1816;  /* text on parchment */
  --c-gold:       #B59758;  /* hairlines, labels, primary button */
  --c-gold-2:     #D9BE84;  /* hover, highlights */
  --c-gold-deep:  #7A5C24;  /* gold for text on light grounds (readable) */
  --c-wine:       #642F35;  /* secondary CTA, testimonial panel */
  --c-wine-2:     #4A2328;  /* deeper wine */

  /* --- Type --- */
  --f-display: 'Cinzel', 'Cormorant Garamond', Georgia, serif;   /* headings, uppercase */
  --f-serif:   'Cardo', Georgia, 'Times New Roman', serif;        /* lead text, quotes */
  --f-ui:      'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; /* body, nav, labels, buttons */

  --fs-xs: 0.72rem;   /* labels */
  --fs-sm: 0.88rem;
  --fs-0:  1rem;      /* body */
  --fs-1:  1.25rem;   /* lead */
  --fs-2:  1.3rem;    /* h3 */
  --fs-3:  clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);   /* h2 */
  --fs-4:  clamp(2.2rem, 1.3rem + 3.8vw, 4.3rem);   /* h1 */
  --track:   0.2em;   /* label tracking */
  --track-h: 0.08em;  /* heading tracking */
  --lh-body: 1.7;

  /* --- Spacing & layout --- */
  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem; --sp-5: 4rem; --sp-6: 6.5rem;
  --section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --wide: 1240px;
  --measure: 58ch;
  --radius: 0;
  --arch: 999px;
  --header-h: 5rem;
}

/* =========================================================
   1b. MODES — dark is the default. Components use only these roles,
   so light mode remaps them in one place. The hero and the map stay dark in both.
   ========================================================= */
:root,
:root[data-theme="light"] :is(.hero, .map, .keep-dark) {
  color-scheme: dark;
  --bg:        var(--c-night);
  --bg-2:      var(--c-night-2);
  --text:      var(--c-cream);
  --text-2:    color-mix(in oklab, var(--c-cream), var(--bg) 38%);
  --line:      color-mix(in oklab, var(--c-gold), transparent 50%);
  --line-2:    var(--c-gold);
  --accent:    var(--c-gold);
  --accent-2:  var(--c-gold-2);
  --cta:       var(--c-wine);
  --on-accent: var(--c-night);
  --shade:     rgba(0, 0, 0, .45);
  --glow:      color-mix(in oklab, var(--c-night), var(--c-cream) 6%);   /* vignette centre */
  --edge:      color-mix(in oklab, var(--c-night), black 45%);          /* vignette edge */

  --chrome-bg: color-mix(in oklab, var(--edge), transparent 10%);   /* header */
  --foot-bg:   var(--c-night);                                       /* footer */
  --menu-bg:   radial-gradient(ellipse 70% 90% at 50% 45%, color-mix(in oklab, var(--c-night-2), var(--c-cream) 4%) 0%, var(--c-night-2) 60%, var(--edge) 100%);
  --drop:      rgba(0, 0, 0, .55);                                   /* menu shadow */
}
:root[data-theme="light"] :is(.hero, .map, .keep-dark) { color: var(--text); }

:root[data-theme="light"] {
  color-scheme: light;
  --bg:        var(--c-cream);
  --bg-2:      color-mix(in oklab, var(--c-cream), white 55%);
  --text:      var(--c-night);
  --text-2:    color-mix(in oklab, var(--c-night), var(--c-cream) 35%);
  --line:      color-mix(in oklab, var(--c-gold-deep), transparent 55%);
  --line-2:    var(--c-gold-deep);
  --accent:    var(--c-gold-deep);
  --accent-2:  color-mix(in oklab, var(--c-gold-deep), black 25%);
  --cta:       var(--c-wine);
  --on-accent: var(--c-cream);
  --shade:     rgba(60, 45, 20, .2);
  --glow:      color-mix(in oklab, var(--c-cream), white 50%);
  --edge:      var(--c-parchment);
  --chrome-bg: color-mix(in oklab, var(--c-parchment), transparent 6%);
  --foot-bg:   var(--c-parchment);
  --menu-bg:   radial-gradient(ellipse 70% 90% at 50% 45%, color-mix(in oklab, var(--c-cream), white 50%) 0%, var(--c-cream) 60%, var(--c-parchment) 100%);
  --drop:      rgba(70, 50, 20, .18);
}
/* on a light page, parchment sections go one shade deeper so they still read as a band */
:root[data-theme="light"] :is(.parchment, .wp-block-group.is-style-parchment) { --bg: var(--c-parchment); --bg-2: color-mix(in oklab, var(--c-parchment), white 45%); }

/* =========================================================
   2. BASE
   ========================================================= */
*, *::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;
  color: var(--text);
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .7 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E"), radial-gradient(ellipse 90% 70% at 50% 25%, var(--glow) 0%, var(--bg) 55%, var(--edge) 100%);
  background-attachment: scroll, fixed;
  font-family: var(--f-ui);
  font-size: var(--fs-0);
  line-height: var(--lh-body);
  font-feature-settings: "kern", "liga";
}
p, li, blockquote, figcaption, dd { max-width: var(--measure); }
img, svg, video { max-width: 100%; height: auto; display: block; }
::selection { background: var(--c-gold); color: var(--c-night); }
:root[data-theme="light"] body { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E"), radial-gradient(ellipse 90% 70% at 50% 25%, var(--glow) 0%, var(--bg) 55%, var(--edge) 100%); }
:focus-visible { outline: 1px solid var(--c-gold-2); outline-offset: 4px; }

/* section grounds: a section only resets the roles */
.parchment, .wp-block-group.is-style-parchment {
  --bg: var(--c-cream); --bg-2: var(--c-parchment);
  color-scheme: light;
  --text: var(--c-ink); --text-2: color-mix(in oklab, var(--c-ink), var(--c-cream) 35%);
  --line: color-mix(in oklab, var(--c-gold), transparent 35%);
  --line-2: var(--c-gold-deep); --accent: var(--c-gold-deep); --accent-2: color-mix(in oklab, var(--c-gold-deep), black 25%); --on-accent: var(--c-cream);
  --shade: rgba(60, 40, 20, .25);
  background-color: var(--bg); color: var(--text);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
}
.wine, .wp-block-group.is-style-wine {
  --bg: var(--c-wine); --bg-2: var(--c-wine-2);
  --text: var(--c-cream); --text-2: color-mix(in oklab, var(--c-cream), var(--bg) 30%);
  --line: color-mix(in oklab, var(--c-gold), transparent 50%); --line-2: var(--c-gold);
  --accent: var(--c-gold); --accent-2: var(--c-gold-2); --on-accent: var(--c-night);
  color-scheme: dark;
  background-color: var(--bg); color: var(--text);
}
.raised { background: var(--bg-2); }

/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */
h1, h2, h3, .wp-block-post-title, .wp-block-query-title, .display {
  font-family: var(--f-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-h);
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
h1, .wp-block-post-title { font-size: var(--fs-4); line-height: 1.08; letter-spacing: 0.05em; font-weight: 400; }
h2 { font-size: var(--fs-3); }
h3 { font-size: var(--fs-2); letter-spacing: 0.1em; margin-bottom: var(--sp-2); }
h4, h5, h6 { font-family: var(--f-ui); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--fs-sm); color: var(--text); margin: 0 0 var(--sp-2); }
.gilt { color: var(--accent); }

p { margin: 0 0 var(--sp-2); }
.lead { font-family: var(--f-serif); font-size: var(--fs-1); line-height: 1.5; color: var(--text); }
.serif { font-family: var(--f-serif); }
small, .small, figcaption, .wp-element-caption { font-size: var(--fs-sm); color: var(--text-2); }

/* label: the small tracked gold caps used everywhere */
.label, .eyebrow, .wp-block-post-terms, .wp-block-post-date {
  font-family: var(--f-ui); font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track); color: var(--accent);
}
/* kicker: centred label between two hairlines, with an ornament under it */
.kicker {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--f-display); font-size: 0.9rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.28em; color: var(--accent);
  margin: 0 0 var(--sp-4); text-align: center;
}
.kicker::before, .kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.kicker.left { justify-content: flex-start; }
.kicker.left::before { display: none; }
.kicker.left::after { flex: 0 0 4rem; }
.kicker-ornament { display: block; width: 220px; height: 16px; margin: calc(-1 * var(--sp-3)) auto var(--sp-4); background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='16' viewBox='0 0 220 16'%3E %3Cpath d='M0 8 H88 M132 8 H220' stroke='%23B59758' stroke-width='1'/%3E %3Cpath d='M88 8 c 6 -7 12 -7 16 0 M116 8 c 4 7 10 7 16 0' stroke='%23B59758' stroke-width='1' fill='none'/%3E %3Cpath d='M110 2 L116 8 L110 14 L104 8 Z' fill='%23B59758'/%3E %3Ccircle cx='96' cy='8' r='1.4' fill='%23B59758'/%3E%3Ccircle cx='124' cy='8' r='1.4' fill='%23B59758'/%3E %3C/svg%3E") no-repeat center / 220px 16px; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
:where(.entry-content, .wp-block-post-content) :where(p, li, td) a:not(.btn):not(.btn-text):not(.wp-block-button__link) { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--line); }

blockquote, .wp-block-quote {
  position: relative; margin: var(--sp-4) 0; padding: var(--sp-3) 0 0 0; border: 0;
  font-family: var(--f-serif); font-size: 1.35rem; font-style: italic; line-height: 1.45;
}
blockquote::before, .wp-block-quote::before { content: "\201C"; display: block; font-family: var(--f-serif); font-style: normal; font-size: 4rem; line-height: 0.6; color: var(--accent); margin-bottom: var(--sp-2); }
blockquote cite, .wp-block-quote cite { display: block; margin-top: var(--sp-2); font-family: var(--f-ui); font-size: var(--fs-xs); font-style: normal; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-2); }

hr, .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) auto; max-width: var(--wide); }
.ornament-rule, .wp-block-separator.is-style-ornament { position: relative; border: 0; height: 1px; background: var(--line); overflow: visible; }
.ornament-rule::after, .wp-block-separator.is-style-ornament::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 220px; height: 16px; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='16' viewBox='0 0 220 16'%3E %3Cpath d='M0 8 H88 M132 8 H220' stroke='%23B59758' stroke-width='1'/%3E %3Cpath d='M88 8 c 6 -7 12 -7 16 0 M116 8 c 4 7 10 7 16 0' stroke='%23B59758' stroke-width='1' fill='none'/%3E %3Cpath d='M110 2 L116 8 L110 14 L104 8 Z' fill='%23B59758'/%3E %3Ccircle cx='96' cy='8' r='1.4' fill='%23B59758'/%3E%3Ccircle cx='124' cy='8' r='1.4' fill='%23B59758'/%3E %3C/svg%3E") no-repeat center / 220px 16px; box-shadow: 0 0 0 10px var(--bg);
}

/* =========================================================
   4. LAYOUT
   ========================================================= */
.wrap { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section-tight { padding-block: calc(var(--section) / 2); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
@media (max-width: 60rem) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 36rem) { .grid-5 { grid-template-columns: repeat(2, 1fr); } }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* hero: full-bleed image, shade, text left, index at the edge */
.hero {
  position: relative; min-height: min(88vh, 860px);
  display: grid; align-items: center;
  background-color: var(--bg-2); background-size: cover; background-position: center; background-repeat: no-repeat;
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, color-mix(in oklab, var(--c-night), transparent 8%) 0%, color-mix(in oklab, var(--c-night), transparent 28%) 42%, color-mix(in oklab, var(--c-night), transparent 75%) 100%);
}
.hero .wrap { padding-block: var(--sp-6); width: 100%; }
.hero h1 { max-width: 14ch; margin-bottom: var(--sp-3); }
.hero .lead { max-width: 36ch; margin-bottom: var(--sp-4); font-family: var(--f-ui); font-size: 1.05rem; color: var(--text-2); }
.hero-index { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; gap: var(--sp-2); justify-items: center; font-family: var(--f-ui); font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--text-2); }
.hero-index i { display: block; width: 1px; height: 4rem; background: var(--line); }
.hero-index b { font-weight: 500; color: var(--accent); }
@media (max-width: 72rem) { .hero-index { display: none; } }
@media (min-width: 72.01rem) { .hero .wrap { padding-left: calc(var(--gutter) + 4.5rem); } }

/* =========================================================
   5. ARCHES — the signature shape
   ========================================================= */
.arch {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--arch) var(--arch) 0 0;
  background: var(--bg-2);
  overflow: hidden; text-align: center;
  padding-bottom: var(--sp-3);
}
.arch .media { width: 100%; aspect-ratio: 3 / 4; background-color: var(--c-slate); background-size: cover; background-position: center; background-repeat: no-repeat; -webkit-mask-image: linear-gradient(#000 62%, transparent 100%); mask-image: linear-gradient(#000 62%, transparent 100%); }
.arch h3 { margin: calc(-1 * var(--sp-4)) var(--sp-3) var(--sp-1); position: relative; font-size: 1.15rem; }
.arch p { margin: 0 var(--sp-3) var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); margin-inline: auto; padding-inline: var(--sp-3); }
.arch .btn-text { margin-top: auto; align-self: center; }
.arch-frame { display: block; border: 1px solid var(--line); border-radius: var(--arch) var(--arch) 0 0; padding: 8px; }
.arch-frame > * { border-radius: var(--arch) var(--arch) 0 0; overflow: hidden; display: block; }
.arch-media { aspect-ratio: 4 / 5; background-color: var(--c-slate); background-size: cover; background-position: center; background-repeat: no-repeat; }

/* rectangular cards for destinations, itinerary items, forms */
.card { border: 1px solid var(--line); background: var(--bg-2); text-align: center; padding-bottom: var(--sp-2); }
.card .media { aspect-ratio: 4 / 3; background-color: var(--c-slate); background-size: cover; background-position: center; background-repeat: no-repeat; margin: 6px 6px var(--sp-2); }
.card h3 { font-size: 0.85rem; letter-spacing: 0.16em; margin: 0 var(--sp-2) 0.2rem; }
.card p { margin: 0 var(--sp-2); font-size: var(--fs-xs); color: var(--text-2); margin-inline: auto; }

/* =========================================================
   6. BUTTONS, LISTS, META, FORMS
   ========================================================= */
/* --- Buttons --------------------------------------------------------------
   .btn            gilded: metallic gold, a second hairline frame, a sheen when you point at it
   .btn-outline    framed: a gold rule with corner brackets, fills softly on hover
   .btn-wine       wine, with an inner gold rule
   .btn-text       small caps with an arrow; the underline draws in on hover
   Block editor (Button block → Styles): Fill = gilded, Outline = framed, Wine, Text with arrow. */
html body button, html body input[type="submit"] { font: inherit; cursor: pointer; }

html body .btn, html body .wp-block-button__link, html body .wp-element-button, html body input[type="submit"] {
  --btn-bg: linear-gradient(180deg, color-mix(in oklab, var(--accent), white 26%) 0%, var(--accent) 48%, color-mix(in oklab, var(--accent), black 18%) 100%);
  --btn-fg: var(--on-accent);
  --btn-edge: color-mix(in oklab, var(--accent), black 24%);
  --btn-ring: var(--line);
  --btn-glow: 0 8px 20px -10px var(--drop);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  font-family: var(--f-ui); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track); line-height: 1;
  padding: 1.15em 2.1em 1.1em;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-edge); border-radius: var(--radius);
  outline: 1px solid var(--btn-ring); outline-offset: 3px;
  box-shadow: inset 0 1px 0 color-mix(in oklab, white, transparent 60%), inset 0 -1px 0 color-mix(in oklab, black, transparent 72%), var(--btn-glow);
  text-decoration: none; cursor: pointer; white-space: nowrap; text-shadow: var(--btn-ts, 0 1px 0 color-mix(in oklab, white, transparent 75%));
  transition: transform .2s ease, box-shadow .25s ease, outline-color .25s ease, outline-offset .25s ease, color .2s ease, background-color .25s ease, filter .25s ease;
}
/* the sheen: a soft band of light that passes once across the button */
html body .btn::before, html body .wp-block-button__link::before, html body .wp-element-button::before {
  content: ""; position: absolute; z-index: -1; top: -10%; bottom: -10%; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent 0%, color-mix(in oklab, white, transparent 58%) 50%, transparent 100%);
  transform: skewX(-20deg); opacity: 0; pointer-events: none;
}
html body .btn:hover::before, html body .wp-block-button__link:hover::before, html body .wp-element-button:hover::before { animation: btn-sheen .9s ease forwards; }
@keyframes btn-sheen { 0% { left: -70%; opacity: 0; } 20% { opacity: 1; } 100% { left: 135%; opacity: 0; } }

html body .btn:hover, html body .wp-block-button__link:hover, html body .wp-element-button:hover, html body input[type="submit"]:hover {
  --btn-ring: var(--accent); --btn-glow: 0 14px 28px -12px var(--drop);
  color: var(--btn-fg); outline-offset: 4px; transform: translateY(-1px); filter: brightness(1.05) saturate(1.06);
}
html body .btn:active, html body .wp-block-button__link:active, html body .wp-element-button:active, html body input[type="submit"]:active { transform: translateY(0); filter: brightness(.97); }
html body .btn:focus-visible, html body .wp-block-button__link:focus-visible, html body .wp-element-button:focus-visible, html body input[type="submit"]:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; }

/* framed (outline) */
html body .btn-outline, html body .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
  --btn-fg: var(--text); --btn-edge: var(--line-2); --btn-ring: transparent;
  --corner: linear-gradient(var(--accent), var(--accent));
  background:
    var(--corner) left 4px top 4px / 9px 1px no-repeat, var(--corner) left 4px top 4px / 1px 9px no-repeat,
    var(--corner) right 4px top 4px / 9px 1px no-repeat, var(--corner) right 4px top 4px / 1px 9px no-repeat,
    var(--corner) left 4px bottom 4px / 9px 1px no-repeat, var(--corner) left 4px bottom 4px / 1px 9px no-repeat,
    var(--corner) right 4px bottom 4px / 9px 1px no-repeat, var(--corner) right 4px bottom 4px / 1px 9px no-repeat;
  background-color: transparent;
  border-width: 1px;
  box-shadow: none; text-shadow: none;
}
html body .btn-outline:hover, html body .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover {
  --btn-fg: var(--accent-2); --btn-ring: transparent;
  background-color: color-mix(in oklab, var(--accent), transparent 88%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent), transparent 60%) inset;
}

/* wine */
html body .btn-wine, html body .wp-block-button.is-style-wine > .wp-block-button__link.wp-element-button {
  --btn-bg: linear-gradient(180deg, color-mix(in oklab, var(--c-wine), white 12%) 0%, var(--c-wine) 52%, var(--c-wine-2) 100%);
  --btn-fg: var(--c-cream); --btn-edge: color-mix(in oklab, var(--c-gold), transparent 25%); --btn-ring: transparent;
  box-shadow: inset 0 0 0 3px var(--c-wine), inset 0 0 0 4px color-mix(in oklab, var(--c-gold), transparent 40%), var(--btn-glow);
  text-shadow: none;
}
html body .btn-wine:hover, html body .wp-block-button.is-style-wine > .wp-block-button__link.wp-element-button:hover { --btn-fg: var(--c-cream); --btn-ring: color-mix(in oklab, var(--c-gold), transparent 50%); }

/* text with arrow */
html body .btn-text, html body .wp-block-button.is-style-text > .wp-block-button__link.wp-element-button {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--f-ui); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track);
  color: var(--accent); text-decoration: none; padding: 0.45em 0;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; background-color: transparent;
  border: 0; outline: 0; box-shadow: none; text-shadow: none; overflow: visible; filter: none; transform: none;
  transition: background-size .35s ease, color .2s ease;
}
html body .btn-text::after, html body .wp-block-button.is-style-text > .wp-block-button__link.wp-element-button::after, html body .btn .arrow::after { content: "\2192"; font-size: 1.1em; line-height: 1; display: inline-block; transition: transform .25s ease; }
html body .btn-text:hover, html body .wp-block-button.is-style-text > .wp-block-button__link.wp-element-button:hover { color: var(--accent-2); background-size: 100% 1px; filter: none; transform: none; }
html body .btn-text:hover::after, html body .wp-block-button.is-style-text > .wp-block-button__link.wp-element-button:hover::after, html body .btn:hover .arrow::after { transform: translateX(4px); }
html body .wp-block-button.is-style-text > .wp-block-button__link.wp-element-button::before { display: none; }

html body .btn .star { width: 0.95em; height: 0.95em; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C10 6 14 10 20 10 C14 10 10 14 10 20 C10 14 6 10 0 10 C6 10 10 6 10 0 Z' fill='%23B59758'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform .35s ease; }
html body .btn:hover .star { transform: rotate(90deg) scale(1.15); }
/* long labels (German, Polish…) may wrap on phones instead of overflowing */
@media (max-width: 600px) { html body .btn, html body .wp-block-button__link, html body .wp-element-button { white-space: normal; text-align: center; line-height: 1.35; max-width: 100%; } }
/* light mode: the gilded button is deep gold with cream letters, so the engraving shadow goes dark */
:root[data-theme="light"] body .btn, :root[data-theme="light"] body .wp-block-button__link, :root[data-theme="light"] body .wp-element-button { --btn-ts: 0 -1px 0 color-mix(in oklab, black, transparent 55%); }
:root[data-theme="light"] body :is(.hero, .map, .keep-dark) :is(.btn, .wp-block-button__link, .wp-element-button) { --btn-ts: 0 1px 0 color-mix(in oklab, white, transparent 75%); }

@media (prefers-reduced-motion: reduce) {
  html body .btn, html body .wp-block-button__link, html body .wp-element-button, html body input[type="submit"], html body .btn-text { transition: none; }
  html body .btn:hover, html body .wp-block-button__link:hover, html body .wp-element-button:hover { transform: none; }
  html body .btn:hover::before, html body .wp-block-button__link:hover::before, html body .wp-element-button:hover::before { animation: none; }
  html body .btn:hover .star, html body .btn-text:hover::after, html body .btn:hover .arrow::after { transform: none; }
}
html body .actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
html body .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* highlights: gold diamond bullets */
html body .diamonds { list-style: none; padding: 0; margin: 0 0 var(--sp-3); display: grid; gap: 0.5em; }
html body .diamonds li { padding-left: 1.5em; position: relative; }
html body .diamonds li::before { content: ""; position: absolute; left: 0.15em; top: 0.62em; width: 0.45em; height: 0.45em; background: var(--accent); transform: rotate(45deg); }
/* facts: icon + text */
html body .facts { list-style: none; padding: 0; margin: 0 0 var(--sp-3); display: grid; gap: 0.6em; }
html body .facts li { display: flex; align-items: center; gap: 0.75em; font-size: var(--fs-sm); }
html body .facts svg, html body .meta svg { width: 1.1em; height: 1.1em; stroke: var(--accent); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* meta row: duration · type · price */
html body .meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-3); font-family: var(--f-ui); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text); }
html body .meta span { display: inline-flex; align-items: center; gap: 0.5em; }
html body .tag { display: inline-block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--line); padding: 0.35em 0.8em; border-radius: 999px; margin-bottom: var(--sp-2); }

/* stats: 10+ years · languages · guests */
html body .stats { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin: var(--sp-3) 0; }
html body .stats div { display: grid; justify-items: center; gap: 0.2em; text-align: center; }
html body .stats b { font-family: var(--f-display); font-size: 1.4rem; font-weight: 500; color: var(--text); }
html body .stats small { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
html body .stats svg { width: 1.3rem; height: 1.3rem; stroke: var(--accent); fill: none; stroke-width: 1.3; }

/* itinerary timeline */
html body .itinerary { list-style: none; counter-reset: stop; padding: 0; margin: 0; display: grid; gap: var(--sp-3); position: relative; }
html body .itinerary::before { content: ""; position: absolute; left: 0.9rem; top: 1rem; bottom: 1rem; width: 1px; background: var(--line); }
html body .itinerary li { position: relative; padding-left: 3rem; display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); align-items: center; }
html body .itinerary li::before { counter-increment: stop; content: counter(stop); position: absolute; left: 0; top: 0.1rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; font-family: var(--f-ui); font-size: var(--fs-xs); font-weight: 700; color: var(--accent); background: var(--bg); border: 1px solid var(--line-2); border-radius: 50%; }
html body .itinerary h4 { margin: 0 0 0.15em; }
html body .itinerary p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
html body .itinerary svg { width: 2.6rem; height: 2.6rem; stroke: var(--text-2); fill: none; stroke-width: 1; opacity: 0.8; }

/* map panel */
html body .map { position: relative; border: 1px solid var(--line); background: var(--bg-2); overflow: hidden; min-height: 320px; }
html body .map svg { width: 100%; height: 100%; display: block; overflow: hidden; }
html body .map-stop { position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--sp-2); align-items: center; padding: var(--sp-2); background: color-mix(in oklab, var(--c-night), transparent 12%); border: 1px solid var(--line); backdrop-filter: blur(6px); }
html body .map-stop .thumb { aspect-ratio: 1; background-color: var(--c-slate); background-size: cover; background-position: center; }
html body .map-stop h4 { margin: 0 0 0.2em; font-size: var(--fs-xs); }
html body .map-stop p { margin: 0; font-size: var(--fs-xs); color: var(--text-2); }

/* included strip */
html body .included { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); border: 1px solid var(--line); padding: var(--sp-3); }
html body .included div { display: grid; justify-items: center; gap: 0.5em; text-align: center; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
html body .included svg { width: 1.5rem; height: 1.5rem; stroke: var(--accent); fill: none; stroke-width: 1.3; }
@media (max-width: 36rem) { html body .included { grid-template-columns: repeat(2, 1fr); } }

/* seal: a wax seal with the mark */
html body .seal { width: 5.5rem; height: 5.5rem; border-radius: 50%; background: var(--c-wine); border: 1px solid var(--c-gold); box-shadow: 0 0 0 4px var(--c-wine), 0 0 0 5px var(--line), 0 8px 20px rgba(0,0,0,.3); display: grid; place-items: center; }
html body .seal svg { width: 2.4rem; height: 2.4rem; stroke: var(--c-gold-2); fill: none; stroke-width: 1.2; }

/* stars */
html body .stars { color: var(--accent); letter-spacing: 0.2em; font-size: 0.9rem; }

/* forms */
html body label { display: block; font-family: var(--f-ui); font-size: 0.62rem; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--accent); margin-bottom: 0.4em; }
html body :where(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]), textarea, select) {
  width: 100%; font: inherit; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.85em 1em; margin-bottom: var(--sp-3);
}
html body input::placeholder, html body textarea::placeholder { color: var(--text-2); }
html body textarea { min-height: 8rem; resize: vertical; }
html body input:focus, html body textarea:focus, html body select:focus { border-color: var(--accent-2); outline: none; }
html body .field { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); align-items: center; border: 1px solid var(--line); padding: 0.9rem 1rem; }
html body .field + .field { border-top: 0; }
html body .field svg { width: 1.1rem; height: 1.1rem; stroke: var(--accent); fill: none; stroke-width: 1.4; }
html body .field label { margin: 0 0 0.1em; }
html body .field input, html body .field select { margin: 0; padding: 0; border: 0; background: transparent; font-size: var(--fs-sm); }
html body .reassure { display: flex; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-3); }
html body .reassure div { display: grid; justify-items: center; gap: 0.3em; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); text-align: center; }
html body .reassure svg { width: 1.2rem; height: 1.2rem; stroke: var(--accent); fill: none; stroke-width: 1.3; }

html body table, html body .wp-block-table table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; }
html body th, html body td { text-align: left; padding: 0.75em 0.9em; border-bottom: 1px solid var(--line); vertical-align: top; }
html body th { font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; color: var(--accent); font-weight: 600; }

/* =========================================================
   7. HEADER + MEGA MENU
   ========================================================= */
html body .site-header { position: relative; z-index: 20; background: var(--chrome-bg); border-bottom: 1px solid var(--line); color: var(--text); }
html body .icon-btn { width: 2.4rem; height: 2.4rem; padding: 0; background: none; border: 0; color: var(--accent); display: inline-grid; place-items: center; }
html body .icon-btn svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; }
html body .icon-btn:hover { background: none; color: var(--accent-2); }
html body .header-tools .sep { width: 1px; height: 1.6rem; background: var(--line); }
html body .site-header .wrap { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); min-height: var(--header-h); }
html body .brand { display: inline-flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--text); margin-right: auto; flex: none; }
html body .brand svg { width: 2.2rem; height: 2.6rem; flex: none; stroke: var(--accent); fill: none; stroke-width: 1.2; }
html body .brand .wordmark { display: grid; line-height: 1; }
html body .brand .wordmark b { font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; letter-spacing: 0.32em; white-space: nowrap; }
html body .brand .wordmark small { font-size: 0.5rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin-top: 0.35em; white-space: nowrap; }
html body .header-tools { display: flex; align-items: center; gap: clamp(0.6rem, 1.1vw, 1.5rem); }
html body .lang { display: flex; gap: 0.2rem; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; }
html body .lang a { color: var(--text-2); padding: 0.2em 0.35em; }
html body .lang a[aria-current="true"] { color: var(--accent); border-bottom: 1px solid var(--accent); }
html body .nav-burger { display: none; width: 2.6rem; height: 2.6rem; padding: 0; background: none; border: 1px solid var(--line); color: var(--accent); font-size: 1.1rem; }
html body .nav-burger:hover { background: var(--bg-2); color: var(--accent-2); border-color: var(--line); }

html body .site-nav > ul { display: flex; align-items: center; gap: clamp(1.1rem, 2.1vw, 2.5rem); list-style: none; margin: 0; padding: 0; }
html body .site-nav > ul > li { position: static; }
html body .site-nav > ul > li:not(.nav-cta) > a, html body .nav-toggle {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--f-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--text); background: none; border: 0; padding: 0.6em 0; cursor: pointer; text-decoration: none;
  border-bottom: 1px solid transparent; white-space: nowrap;
}
html body .site-nav > ul > li:not(.nav-cta) > a:hover, html body .nav-toggle:hover, html body .site-nav > ul > li:not(.nav-cta) > a[aria-current="page"], html body .has-mega.open > .nav-toggle, html body .has-mega:hover > .nav-toggle { color: var(--accent); border-bottom-color: var(--accent); background: none; }
html body .nav-toggle { position: relative; }
/* the header button speaks the same face as the menu next to it */
html body .header-tools .btn, html body .nav-cta .btn { font-family: var(--f-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.13em; }
/* a full bar tightens step by step (nav.js measures it and adds nav-fit-1, -2, -3 to the header):
   long menu names, e.g. German, never push the bar past the edge */
html body .site-header.nav-fit-1 .wrap { gap: 1rem; }
html body .site-header.nav-fit-1 .site-nav > ul { gap: clamp(0.85rem, 1.4vw, 1.6rem); }
html body .site-header.nav-fit-1 .site-nav > ul > li:not(.nav-cta) > a, html body .site-header.nav-fit-1 .nav-toggle { font-size: 0.74rem; letter-spacing: 0.09em; }
html body .site-header.nav-fit-1 .header-tools { gap: 0.5rem; }
html body .site-header.nav-fit-1 .lang-current { padding-inline: 0.4em; font-size: 0.74rem; }
html body .site-header.nav-fit-1 .header-tools .btn { font-size: 0.72rem; letter-spacing: 0.1em; padding: 1em 1.3em 0.95em; }
html body .site-header.nav-fit-2 .header-tools > .btn, html body .site-header.nav-fit-2 .header-tools .sep { display: none; }
html body .site-header.nav-fit-2 .site-nav > ul { gap: 0.9rem; }
html body .site-header.nav-fit-3 .site-nav > ul { gap: 0.7rem; }
html body .site-header.nav-fit-3 .site-nav > ul > li:not(.nav-cta) > a, html body .site-header.nav-fit-3 .nav-toggle { font-size: 0.7rem; letter-spacing: 0.05em; }
html body .site-header.nav-fit-3 .brand .wordmark small { display: none; }
html body .site-header.nav-fit-3 .brand .wordmark b { letter-spacing: 0.2em; }
/* without the script: the narrowest laptops still drop the header button */
@media (min-width: 64.01rem) and (max-width: 74rem) { html body .site-header:not(.is-fitted) .header-tools > .btn, html body .site-header:not(.is-fitted) .header-tools .sep { display: none; } }
html body .nav-toggle::before { content: ""; position: absolute; left: 50%; bottom: -5px; width: 7px; height: 7px; background: var(--accent); transform: translateX(-50%) rotate(45deg); opacity: 0; }
html body .has-mega.open > .nav-toggle::before, html body .has-mega:hover > .nav-toggle::before { opacity: 1; }
html body .nav-toggle::after { content: ""; width: 0.4em; height: 0.4em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-0.15em) rotate(45deg); }
html body .has-mega.open > .nav-toggle::after { transform: translateY(0.1em) rotate(225deg); }
/* items with their own page: the name is a link, the small arrow next to it opens the panel */
html body .site-nav > ul > li.has-link { display: flex; align-items: center; gap: 0.1rem; }
html body .has-link > .nav-toggle::after { display: none; }
html body .nav-caret {
  display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.8rem; padding: 0; margin: 0;
  background: none; border: 0; color: var(--text); cursor: pointer; transition: color 0.2s ease;
}
html body .nav-caret::after { content: ""; width: 0.4em; height: 0.4em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-0.15em) rotate(45deg); transition: transform 0.25s ease; }
html body .has-mega:hover > .nav-caret, html body .has-mega.open > .nav-caret, html body .nav-caret:hover { color: var(--accent); background: none; }
html body .has-mega.open > .nav-caret::after { transform: translateY(0.1em) rotate(225deg); }
html body .nav-caret:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

html body .mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--menu-bg); color: var(--text);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px var(--drop);
  display: none;
}
/* filigree: thin gold corner ornaments, usable on any panel */
html body .filigree:not(.mega) { position: relative; }
html body .filigree::before { content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: 0;
  background: var(--corner-tl) no-repeat left top / 96px 96px, var(--corner-tr) no-repeat right top / 96px 96px, var(--corner-bl) no-repeat left bottom / 96px 96px, var(--corner-br) no-repeat right bottom / 96px 96px; }
html body .filigree > * { position: relative; z-index: 1; }
html body .has-mega.open > .mega { display: block; }
html body .mega .wrap { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr) 1.05fr; gap: var(--sp-5); align-items: start; min-height: 0; padding-block: var(--sp-4) var(--sp-4); position: relative; }
html body .mega-col + .mega-col { border-left: 1px solid color-mix(in oklab, var(--accent), transparent 82%); padding-left: var(--sp-4); margin-left: calc(-1 * var(--sp-4) + 1px); }
html body .mega-col h4 { display: flex; align-items: center; gap: 0.7em; font-family: var(--f-display); font-weight: 500; color: var(--accent); font-size: 0.8rem; letter-spacing: 0.22em; margin-bottom: var(--sp-2); }
html body .mega-col h4 svg { width: 1.3rem; height: 1.3rem; stroke: var(--accent); fill: none; stroke-width: 1.2; }
html body .mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
html body .mega-col li { border-bottom: 1px solid color-mix(in oklab, var(--accent), transparent 82%); }
html body .mega-col li:last-child { border-bottom: 0; }
html body .mega-item { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.9rem; align-items: center; padding: 0.8rem 0; }
html body .mega-item svg { width: 2.2rem; height: 2.2rem; stroke: var(--accent); fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
html body .mega-item b { display: block; font-family: var(--f-serif); font-weight: 400; font-size: 1.12rem; line-height: 1.2; color: var(--text); }
html body .mega-item small { display: block; font-size: 0.72rem; color: var(--text-2); margin-top: 0.15em; }
html body .mega-item {
  margin-inline: -0.75rem; padding-inline: 0.75rem; text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
html body .mega-item b, html body .mega-item small, html body .mega-item svg { transition: color 0.2s ease, stroke 0.2s ease; }
/* hover: gold ground, dark letters */
html body .mega-item:hover, html body .mega-item:focus-visible, html body .mega-col a.mega-item:not(.btn):not(.btn-text):hover {
  background-color: var(--c-gold); outline: 0; color: var(--c-night);
  box-shadow: inset 0 1px 0 color-mix(in oklab, white, transparent 62%), inset 0 -1px 0 color-mix(in oklab, black, transparent 80%);
}
html body .mega-item:hover b, html body .mega-item:focus-visible b { color: var(--c-night); }
html body .mega-item:hover small, html body .mega-item:focus-visible small { color: color-mix(in oklab, var(--c-night), transparent 22%); }
html body .mega-item:hover svg, html body .mega-item:focus-visible svg { stroke: var(--c-night); }
html body .mega-col li:has(> .mega-item:hover) { border-bottom-color: transparent; }
html body .mega-col li:has(+ li > .mega-item:hover) { border-bottom-color: transparent; }
html body .mega-col > .btn-text { margin-top: var(--sp-2); font-size: 0.66rem; white-space: nowrap; }
html body .mega-col a:not(.btn):not(.btn-text) { color: var(--text); font-size: var(--fs-sm); }
html body .mega-col a:not(.btn):not(.btn-text):hover { color: var(--accent-2); }
html body .mega-col a.current { color: var(--accent); }
html body .mega-col a small { display: block; font-size: 0.7rem; color: var(--text-2); }
html body .mega-feature { position: relative; border: 1px solid var(--line); padding: 1rem 1rem 1.25rem; display: grid; justify-items: center; gap: 0.5rem; text-align: center; background: color-mix(in oklab, var(--bg-2), transparent 25%); }
html body .mega-feature .arch-frame { width: 100%; margin-bottom: 0.5rem; }
html body .mega-feature .arch-media { aspect-ratio: 4 / 4.2; }
html body .mega-feature h3 { font-size: 1.05rem; margin: 0; }
html body .mega-feature p { font-size: var(--fs-sm); color: var(--text-2); margin: 0; }
html body .mega-feature .kicker-ornament { width: 110px; height: 8px; margin: 0.2rem auto 0.4rem; background-size: 110px 8px; }
html body .mega-close { position: absolute; right: var(--gutter); top: var(--sp-2); width: 2rem; height: 2rem; padding: 0; background: none; border: 0; color: var(--text-2); font-size: 1.4rem; line-height: 1; }
html body .mega-close:hover { color: var(--accent); background: none; }
html body .mega-usps { border-top: 1px solid var(--line); }
html body .mega-usps .wrap { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); padding-block: var(--sp-3); min-height: 0; }
html body .mega-usps div { display: flex; align-items: center; gap: 0.9em; }
html body .mega-usps div + div { border-left: 1px solid color-mix(in oklab, var(--accent), transparent 82%); padding-left: var(--sp-3); }
html body .mega-usps svg { width: 2.6rem; height: 2.6rem; padding: 0.6rem; border: 1px solid var(--line); border-radius: 50%; stroke: var(--accent); fill: none; stroke-width: 1.2; stroke-linecap: round; flex: none; }
html body .mega-usps b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); }
html body .mega-usps small { display: block; font-size: 0.7rem; color: var(--text-2); }

@media (max-width: 64rem) {
  html body .nav-burger { display: inline-flex; align-items: center; justify-content: center; }
  html body .site-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: none; max-height: calc(100vh - var(--header-h) - 1rem); overflow: auto; }
  html body .site-nav.open { display: block; }
  html body .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--sp-1) 0; }
  html body .site-nav > ul > li { border-top: 1px solid color-mix(in oklab, var(--accent), transparent 75%); }
  html body .site-nav > ul > li:first-child { border-top: 0; }
  html body .site-nav > ul > li:not(.nav-cta) > a, html body .nav-toggle { width: 100%; justify-content: space-between; padding: 1em var(--gutter); border-bottom: 0; }
  html body .site-nav > ul > li.has-link { flex-wrap: wrap; gap: 0; align-items: stretch; }
  html body .site-nav > ul > li.has-link > .nav-toggle { flex: 1 1 0; width: auto; min-width: 0; }
  html body .site-nav > ul > li.has-link > .nav-caret { flex: none; width: 3.5rem; height: auto; border-left: 1px solid color-mix(in oklab, var(--accent), transparent 75%); }
  html body .site-nav > ul > li.has-link > .mega { flex: 0 0 100%; }
  html body .mega { position: static; border: 0; box-shadow: none; background: var(--bg); }
  html body .mega .wrap { grid-template-columns: 1fr; gap: var(--sp-3); padding-block: var(--sp-2) var(--sp-3); }
  html body .mega-feature, html body .mega-close, html body .mega-usps, html body .mega::before { display: none; }
  html body .mega-col + .mega-col { border-left: 0; padding-left: 0; margin-left: 0; }
  html body .mega-item { padding: 0.6rem 0.75rem; }
  html body .nav-toggle::before { display: none; }
  html body .mega-lang { display: none; }
  html body .nav-cta { padding: var(--sp-2) var(--gutter) var(--sp-3); }
}
@media (min-width: 64.01rem) { html body .mega-lang, html body .nav-cta { display: none; } }
@media (max-width: 40rem) {
  html body .header-tools > .btn { display: none; } html body .brand .wordmark small { display: none; }
  html body .header-tools { gap: 0.3rem; }
  html body .header-tools .sep { display: none; }
  html body .lang-current { font-size: 0.72rem; letter-spacing: 0.08em; padding-inline: 0.35em; }
}
/* small phones: everything in the bar a little closer, so the menu button never leaves the screen */
@media (max-width: 26.5rem) {
  html body .site-header .wrap { gap: 0.5rem; }
  html body .brand { gap: 0.55rem; }
  html body .brand-mark { width: 1.9rem; height: 2.2rem; }
  html body .brand .wordmark b { font-size: 1.02rem; letter-spacing: 0.2em; }
  html body .icon-btn { width: 2.1rem; height: 2.1rem; }
  html body .header-tools { gap: 0.1rem; }
  html body .lang-current { padding-inline: 0.25em; gap: 0.3em; }
  html body .nav-burger { width: 2.4rem; height: 2.4rem; margin-left: 0.2rem; }
}
@media (max-width: 22.5rem) { html body .lang-current svg { display: none; } html body .brand .wordmark b { font-size: 0.95rem; letter-spacing: 0.14em; } }
/* panels inside the phone / tablet menu: one group under another, never side by side */
@media (max-width: 64rem) {
  html body .mega .wrap, html body .mega:not(.has-feature) .wrap, html body .mega:not(.has-feature):not(.is-compact) .wrap, html body .mega.cols-many > .wrap, html body .mega.cols-many.has-feature > .wrap {
    grid-template-columns: minmax(0, 1fr); max-width: none; gap: var(--sp-3); padding-block: var(--sp-2) var(--sp-3);
  }
  html body .mega-col + .mega-col, html body .mega.cols-many .mega-col + .mega-col { border-left: 0; padding-left: 0; margin-left: 0; }
  html body .mega-col h4 {
    margin: 0 0 0.3rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line);
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
  }
  html body .mega-col h4 svg { width: 1.1rem; height: 1.1rem; }
  html body .mega-item { padding-block: 0.55rem; grid-template-columns: 1.6rem 1fr; gap: 0.7rem; }
  html body .mega-item.no-icon { grid-template-columns: 1fr; }
  html body .mega-item svg { width: 1.6rem; height: 1.6rem; }
  html body .mega-item b { font-size: 1.05rem; }
  html body .mega-item small { font-size: 0.72rem; }
  html body .mega-col > .btn-text { margin-top: 0.5rem; }
  html body .site-nav .mega, html body .site-nav .mega.is-compact { max-height: none; overflow: visible; }   /* the phone menu scrolls as one, not panel inside panel */
}
/* phones: the links of a group in two columns, so a long menu stays short */
@media (max-width: 40rem) and (min-width: 20.5rem) {
  html body .mega:not(.is-compact) .mega-col ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.1rem; }
  html body .mega:not(.is-compact) .mega-col li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  html body .mega:not(.is-compact) .mega-item small { display: none; }
  html body .mega:not(.is-compact) .mega-item b { font-size: 1rem; line-height: 1.25; }
}
/* the app button at the end of the phone menu: a full-width gilded button */
html body .nav-cta .btn { width: 100%; }

/* =========================================================
   8. FOOTER
   ========================================================= */
html body .site-footer { border-top: 1px solid var(--line); background: var(--foot-bg); color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--section); }
html body .site-footer .wrap { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-4); padding-block: var(--sp-5); }
html body .site-footer h4 { color: var(--accent); font-size: 0.62rem; letter-spacing: 0.22em; }
html body .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5em; }
html body .site-footer a { color: var(--text); }
html body .site-footer a:hover { color: var(--accent-2); }
html body .site-footer .brand { margin-bottom: var(--sp-2); }
html body .site-footer .bottom { border-top: 1px solid color-mix(in oklab, var(--accent), transparent 75%); }
html body .site-footer .bottom .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); padding-block: var(--sp-3); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 60rem) { html body .site-footer .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 36rem) { html body .site-footer .wrap { grid-template-columns: 1fr; } }

/* =========================================================
   9. GRAPHIC ELEMENTS (inline SVG helpers)
   ========================================================= */
.glyph { stroke: var(--accent); fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.compass { width: 7rem; height: 7rem; }
.shield { width: 4.5rem; height: 5.4rem; }
.arch-glyph { width: 4rem; height: 6rem; }

/* WordPress image blocks: a thin gold frame */
.wp-block-image img, .wp-block-post-featured-image img { border: 1px solid var(--line); padding: 6px; background: var(--bg-2); }
.wp-block-image.is-style-arch img { border-radius: var(--arch) var(--arch) 0 0; }

/* =========================================================
   10. WORDPRESS BLOCK MAPPING — makes core blocks wear the classes above
   ========================================================= */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.brand img { height: 2.6rem; width: auto; }
.brand-mark { flex: none; width: 2.2rem; height: 2.6rem; stroke: var(--accent); fill: none; stroke-width: 1.2; }

/* hero built from a Group (align full, class "hero") with an Image block (class "hero-bg") inside */
.hero { overflow: hidden; }
.hero .hero-bg { position: absolute; inset: 0; margin: 0; z-index: -2; max-width: none; }
.hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; border: 0; padding: 0; background: none; }
.hero .wp-block-buttons { margin-top: var(--sp-2); }

/* images inside arches and cards */
.arch .media.wp-block-image, .card .media.wp-block-image { margin: 0; }
.card .media.wp-block-image { margin: 6px 6px var(--sp-2); }
.arch .media img, .card .media img { width: 100%; height: 100%; object-fit: cover; border: 0; padding: 0; background: none; }
/* photos of any shape fill the arch at the arch's own proportions */
.arch .media.wp-block-image img { height: auto; aspect-ratio: inherit; }
.arch-frame .wp-block-image { margin: 0; }
.arch-frame .wp-block-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 0; padding: 0; background: none; border-radius: var(--arch) var(--arch) 0 0; }
.arch-frame.wide .wp-block-image img { aspect-ratio: 4 / 4.6; }
.arch .wp-block-buttons { justify-content: center; margin-top: auto; }

/* block styles registered in functions.php */
p.is-style-kicker { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--f-display); font-size: 0.9rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.28em; color: var(--accent); margin: 0 0 var(--sp-4); text-align: center; max-width: none; }
p.is-style-kicker::before, p.is-style-kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); }
p.is-style-label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track); color: var(--accent); }
p.is-style-lead { font-family: var(--f-serif); font-size: var(--fs-1); line-height: 1.5; }
.wp-block-group.is-style-raised { background: var(--bg-2); border: 1px solid var(--line); }
.wp-block-separator.is-style-ornament { position: relative; border: 0; height: 1px; background: var(--line); overflow: visible; }

/* Search block: square field the same height as the gilded button */
.wp-block-search .wp-block-search__inside-wrapper { align-items: stretch; gap: 0.9rem; }
.wp-block-search .wp-block-search__input { margin: 0; min-width: 0; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); color: var(--text); padding: 0.85em 1em; }
.wp-block-search .wp-block-search__input:focus { border-color: var(--accent-2); }
.wp-block-search .wp-block-search__button { margin: 0; flex: none; }
.search-form-wrap .wp-block-search__button:not(:focus-visible) { outline-color: transparent; }   /* the field already frames it */


/* =========================================================
   11. LIGHT / DARK SWITCH
   ========================================================= */
html body .theme-toggle .i-moon { display: none; }
:root[data-theme="light"] body .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] body .theme-toggle .i-moon { display: block; }
.mode-anim, .mode-anim *, .mode-anim *::before, .mode-anim *::after { transition: background-color .35s ease, color .35s ease, border-color .35s ease, stroke .35s ease !important; }
@media (prefers-reduced-motion: reduce) { .mode-anim, .mode-anim * { transition: none !important; } }

/* WordPress adds block-gap margins to flow layouts; our sections space themselves */
body .wp-site-blocks > * + * { margin-block-start: 0; }
:is(.hero, .parchment, .wine, .wrap).is-layout-flow > *,
:is(.hero, .parchment, .wine, .wrap) .is-layout-flow > * { margin-block-start: 0; }

/* light mode: photos end cleanly at a gold hairline instead of fading into a pale card */
:root[data-theme="light"] .arch .media { -webkit-mask-image: none; mask-image: none; border-bottom: 1px solid var(--line); }
:root[data-theme="light"] .arch h3 { margin-top: var(--sp-3); }

/* =========================================================
   12. WORDPRESS READING PAGES — posts, pages, archives (templates in /templates)
   ========================================================= */
html, body { overflow-x: clip; }

/* Twenty Twenty-Five and plugins use these colour names; point them at our roles so they follow light/dark */
html body {
  --wp--preset--color--base: var(--bg);
  --wp--preset--color--contrast: var(--text);
  --wp--preset--color--accent-1: var(--accent);
  --wp--preset--color--accent-2: var(--bg-2);
  --wp--preset--color--accent-3: var(--cta);
  --wp--preset--color--accent-4: var(--text-2);
  --wp--preset--color--accent-5: var(--bg-2);
  --wp--preset--color--accent-6: var(--line);
}

/* the reading column: one width for text, boxes and images, centred */
.prahou-article { padding-block: var(--sp-5) var(--sp-6); }
.article-head { text-align: center; margin-bottom: var(--sp-4); }
.article-head .wp-block-post-terms, .article-head .wp-block-post-date { display: block; margin: 0 auto var(--sp-2); }
.article-head .wp-block-post-terms a { color: var(--accent); text-decoration: none; }
.article-head .wp-block-post-title { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); line-height: 1.12; margin: 0 auto var(--sp-2); max-width: 22ch; }
.article-head::after { content: ""; display: block; width: 220px; height: 16px; margin: var(--sp-3) auto 0; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='16' viewBox='0 0 220 16'%3E %3Cpath d='M0 8 H88 M132 8 H220' stroke='%23B59758' stroke-width='1'/%3E %3Cpath d='M88 8 c 6 -7 12 -7 16 0 M116 8 c 4 7 10 7 16 0' stroke='%23B59758' stroke-width='1' fill='none'/%3E %3Cpath d='M110 2 L116 8 L110 14 L104 8 Z' fill='%23B59758'/%3E %3Ccircle cx='96' cy='8' r='1.4' fill='%23B59758'/%3E%3Ccircle cx='124' cy='8' r='1.4' fill='%23B59758'/%3E %3C/svg%3E") no-repeat center / 220px 16px; }

.entry-content :where(p, li, blockquote, figcaption, dd):not(.is-layout-constrained > *) { max-width: none; }
.entry-content { font-size: 1.04rem; }
.entry-content > * + * { margin-block-start: 1.1em; }
/* in-page links land below the sticky header */
.entry-content :where(h2, h3, h4, [id]) { scroll-margin-top: calc(var(--prahou-bar, 0px) + 4rem + 1.5rem); }
.entry-content h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); text-transform: none; letter-spacing: 0.03em; margin-top: 2.2em; margin-bottom: 0.6em; }
.entry-content h3 { font-size: 1.15rem; text-transform: none; letter-spacing: 0.04em; margin-top: 1.8em; margin-bottom: 0.4em; }
.entry-content h4 { margin-top: 1.6em; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-block: 0.35em; }
.entry-content li::marker { color: var(--accent); }
.entry-content img { height: auto; }
.entry-content .wp-block-image figcaption { text-align: center; font-size: var(--fs-sm); color: var(--text-2); }

/* featured image: a segmental arch, not a full dome, so wide photos keep their content */
.wp-block-post-featured-image { margin: 0 0 var(--sp-4); }
.wp-block-post-featured-image img { width: 100%; object-fit: cover; border: 1px solid var(--line); padding: 6px; background: var(--bg-2); border-radius: 50% 50% 0 0 / 34% 34% 0 0; }
.wp-block-post-featured-image img { clip-path: none; }

/* boxes people draw in the editor (bordered groups) take the house style: hairline, raised ground, square corners */
.entry-content .wp-block-group.has-border-color:not(.keep-style),
.entry-content .wp-block-group[style*="border-width"]:not(.keep-style) {
  border-color: var(--line) !important; border-radius: 0 !important; background-color: var(--bg-2);
}
.entry-content .wp-block-group.has-border-color > :first-child { margin-top: 0; }

/* sticky boxes inside an article would slide over the text in a one-column layout.
   They become normal boxes; add the class "keep-sticky" to opt back in (then they get a solid background). */
.entry-content .is-position-sticky:not(.keep-sticky) { position: relative !important; top: auto !important; z-index: auto !important; }
.keep-sticky { background: var(--bg-2); z-index: 5; box-shadow: 0 12px 30px var(--drop); }

/* --- Table of contents inside a post ---
   Whatever makes it sticky or fixed (a plugin, a snippet, inline styles), inside the text it stays in place.
   On wide screens nav.js moves it into .toc-rail beside the column, where it is sticky on purpose. */
html body :is(.entry-content, .wp-block-post-content) :is(#ez-toc-container, .ez-toc-container, .lwptoc, .rank-math-toc, .wp-block-rank-math-toc-block, .wp-block-yoast-seo-table-of-contents, .yoast-table-of-contents, .wp-block-table-of-contents, .toc, .prahou-toc):not(.keep-sticky) {
  position: static !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
  transform: none !important; z-index: auto !important; float: none !important;
}
html body :is(#ez-toc-container, .ez-toc-container, .lwptoc, .rank-math-toc, .wp-block-rank-math-toc-block, .wp-block-yoast-seo-table-of-contents, .yoast-table-of-contents, .wp-block-table-of-contents, .toc, .prahou-toc) {
  background: var(--bg-2) !important; color: var(--text); border: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important;
  outline: 1px solid color-mix(in oklab, var(--accent), transparent 80%); outline-offset: -7px;
  padding: var(--sp-4) var(--sp-4) var(--sp-3) !important; margin-block: var(--sp-4) !important; width: auto !important;
  font-family: var(--f-ui); font-size: 0.95rem; line-height: 1.4;
}
/* title: first line of the box, set like a kicker between two hairlines */
html body :is(#ez-toc-container, .ez-toc-container, .lwptoc, .rank-math-toc, .wp-block-rank-math-toc-block, .wp-block-yoast-seo-table-of-contents, .yoast-table-of-contents, .wp-block-table-of-contents, .toc, .prahou-toc) > :is(p, h2, h3, h4, h5, .ez-toc-title-container, .lwptoc_header):first-child,
html body :is(#ez-toc-container .ez-toc-title, .lwptoc_title, .rank-math-toc h2, .wp-block-yoast-seo-table-of-contents h2) {
  display: flex; align-items: center; gap: 0.9rem; margin: 0 0 var(--sp-2) !important; padding: 0 !important;
  font-family: var(--f-display) !important; font-size: 0.82rem !important; font-weight: 500 !important; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent) !important; text-align: center; justify-content: center;
}
html body :is(#ez-toc-container, .ez-toc-container, .lwptoc, .rank-math-toc, .wp-block-rank-math-toc-block, .wp-block-yoast-seo-table-of-contents, .yoast-table-of-contents, .wp-block-table-of-contents, .toc, .prahou-toc) > :is(p, h2, h3, h4, h5):first-child::before,
html body :is(#ez-toc-container, .ez-toc-container, .lwptoc, .rank-math-toc, .wp-block-rank-math-toc-block, .wp-block-yoast-seo-table-of-contents, .yoast-table-of-contents, .wp-block-table-of-contents, .toc, .prahou-toc) > :is(p, h2, h3, h4, h5):first-child::after { content: ""; flex: 1; height: 1px; background: var(--line); }
html body :is(#ez-toc-container, .ez-toc-container, .lwptoc, .rank-math-toc, .wp-block-rank-math-toc-block, .wp-block-yoast-seo-table-of-contents, .yoast-table-of-contents, .wp-block-table-of-contents, .toc, .prahou-toc) > :is(p, h2, h3, h4, h5):first-child :is(strong, b) { font-weight: inherit; }
html body :is(#ez-toc-container, .ez-toc-container, .lwptoc, .rank-math-toc, .wp-block-rank-math-toc-block, .wp-block-yoast-seo-table-of-contents, .yoast-table-of-contents, .wp-block-table-of-contents, .toc, .prahou-toc) a { color: var(--text) !important; text-decoration: none !important; font-weight: 400 !important; border: 0 !important; padding: 0 !important; background: none !important; transition: color 0.2s ease; }
html body :is(#ez-toc-container, .ez-toc-container, .lwptoc, .rank-math-toc, .wp-block-rank-math-toc-block, .wp-block-yoast-seo-table-of-contents, .yoast-table-of-contents, .wp-block-table-of-contents, .toc, .prahou-toc) a:hover { color: var(--accent) !important; }

/* the list: Roman numerals in gold for plain TOCs (plugins keep their own numbering) */
html body :is(.toc, [data-prahou-toc="plain"]) :is(ul, ol) { list-style: none !important; margin: 0 !important; padding: 0 !important; counter-reset: toc; }
html body :is(.toc, [data-prahou-toc="plain"]) li {
  display: grid; grid-template-columns: 2.6em 1fr; align-items: baseline; counter-increment: toc;
  margin: 0 !important; padding: 0.5em 0 !important; border-top: 1px solid color-mix(in oklab, var(--line), transparent 45%);
}
html body :is(.toc, [data-prahou-toc="plain"]) li:first-child { border-top: 0; }
html body :is(.toc, [data-prahou-toc="plain"]) li::marker { content: none; }
html body :is(.toc, [data-prahou-toc="plain"]) li::before { content: counter(toc, upper-roman) "."; font-family: var(--f-display); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--accent); transition: color 0.2s ease; }
html body :is(.toc, [data-prahou-toc="plain"]) li > :is(ul, ol) { grid-column: 2; margin-top: 0.35em !important; }
html body :is(.toc, [data-prahou-toc="plain"]) li li { grid-template-columns: 1.3em 1fr; border-top: 0; padding: 0.25em 0 !important; font-size: 0.92em; }
html body :is(.toc, [data-prahou-toc="plain"]) li li::before { content: ""; width: 0.34em; height: 0.34em; background: var(--line-2); transform: rotate(45deg) translateY(-0.2em); }

/* the section you are reading (marked by nav.js) */
html body :is(#ez-toc-container, .ez-toc-container, .lwptoc, .rank-math-toc, .wp-block-rank-math-toc-block, .wp-block-yoast-seo-table-of-contents, .yoast-table-of-contents, .wp-block-table-of-contents, .toc, .prahou-toc) li.is-current > a { color: var(--accent-2) !important; }
html body :is(#ez-toc-container, .ez-toc-container, .lwptoc, .rank-math-toc, .wp-block-rank-math-toc-block, .wp-block-yoast-seo-table-of-contents, .yoast-table-of-contents, .wp-block-table-of-contents, .toc, .prahou-toc) li.is-current::before { color: var(--accent-2); }
html body :is(#ez-toc-container, .ez-toc-container, .lwptoc, .rank-math-toc, .wp-block-rank-math-toc-block, .wp-block-yoast-seo-table-of-contents, .yoast-table-of-contents, .wp-block-table-of-contents, .toc, .prahou-toc) li li.is-current::before { background: var(--accent); }

/* side rail on wide screens: a copy of the contents that slides in once the box in the text has scrolled away */
.has-toc-rail { position: relative; }
html body .toc-rail { position: absolute; z-index: 3; margin: 0 !important; padding: 0 !important; max-width: none !important; pointer-events: none; }
html body .toc-rail > :is(.prahou-toc, #prahou-toc-rail-id) {
  position: sticky !important; top: calc(var(--prahou-bar, 0px) + 4rem + var(--sp-3)) !important;
  max-height: calc(100vh - var(--prahou-bar, 0px) - 4rem - 2 * var(--sp-3)); overflow-y: auto; overscroll-behavior: contain;
  margin: 0 !important; padding: var(--sp-3) var(--sp-3) var(--sp-2) !important; font-size: 0.86rem;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  opacity: 0; visibility: hidden; transform: translateX(-18px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.2, .7, .2, 1), visibility 0s linear 0.45s;
}
html body .toc-rail.is-shown > :is(.prahou-toc, #prahou-toc-rail-id) {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
html body .toc-rail > :is(.prahou-toc, #prahou-toc-rail-id) li { padding: 0.42em 0 !important; }
html body .toc-rail > :is(.prahou-toc, #prahou-toc-rail-id) > :is(p, h2, h3, h4, h5):first-child { font-size: 0.72rem !important; letter-spacing: 0.2em; gap: 0.6rem; }
html body .toc-rail :is(.ez-toc-title-toggle, .ez-toc-toggle, .lwptoc_toggle) { display: none !important; }
html body .toc-rail :is(nav, ul, ol) { display: block !important; }
@media (prefers-reduced-motion: reduce) { html body .toc-rail > .prahou-toc { transform: none; transition: none; } }
@media (max-width: 600px) {
  html body :is(.entry-content, .wp-block-post-content) :is(.toc, .prahou-toc) { padding: var(--sp-3) var(--sp-3) var(--sp-2) !important; outline-offset: -5px; font-size: 0.92rem; }
  html body :is(.toc, [data-prahou-toc="plain"]) li { grid-template-columns: 2.3em 1fr; padding: 0.42em 0 !important; }
}

/* --- Quick summary (section.tldr from the post generator, or a group with the class "quick-summary"):
       a parchment card, the same ground as the route sections --- */
html body .entry-content :is(.tldr, .quick-summary) {
  --bg: var(--c-cream); --bg-2: var(--c-parchment);
  --text: var(--c-ink); --text-2: color-mix(in oklab, var(--c-ink), var(--c-cream) 30%);
  --line: color-mix(in oklab, var(--c-gold-deep), transparent 55%); --line-2: var(--c-gold-deep);
  --accent: var(--c-gold-deep); --accent-2: color-mix(in oklab, var(--c-gold-deep), black 25%); --on-accent: var(--c-cream);
  color-scheme: light; color: var(--text); position: relative; isolation: isolate;
  --sum-top: color-mix(in oklab, var(--c-cream), white 18%); --sum-mid: var(--c-cream); --sum-end: color-mix(in oklab, var(--c-cream), var(--c-parchment) 70%);
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--sum-top), var(--sum-mid) 55%, var(--sum-end)) !important;
  border: 1px solid var(--c-gold-deep) !important; border-radius: 0 !important;
  outline: 1px solid color-mix(in oklab, var(--c-gold-deep), transparent 55%); outline-offset: -8px;
  box-shadow: 0 18px 40px -22px var(--drop), 0 0 0 1px color-mix(in oklab, var(--c-gold), transparent 70%);
  padding: var(--sp-5) clamp(1.25rem, 5vw, var(--sp-5)) var(--sp-4) !important; margin-block: var(--sp-5) !important;
}
:root[data-theme="light"] .entry-content :is(.tldr, .quick-summary) { --sum-top: color-mix(in oklab, var(--c-parchment), white 30%); --sum-mid: var(--c-parchment); --sum-end: color-mix(in oklab, var(--c-parchment), var(--c-gold) 12%); }
html body .entry-content :is(.tldr, .quick-summary)::before {
  content: ""; position: absolute; inset: 12px; pointer-events: none; z-index: -1;
  background: var(--corner-d-tl) no-repeat left top / 64px 64px, var(--corner-d-tr) no-repeat right top / 64px 64px, var(--corner-d-bl) no-repeat left bottom / 64px 64px, var(--corner-d-br) no-repeat right bottom / 64px 64px;
  opacity: 0.85;
}
html body .entry-content :is(.tldr, .quick-summary) > :is(h2, h3):first-child {
  margin: 0 0 var(--sp-3) !important; text-align: center; color: var(--c-ink);
  font-family: var(--f-display); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
}
html body .entry-content :is(.tldr, .quick-summary) > :is(h2, h3):first-child::after {
  content: ""; display: block; width: 180px; height: 14px; margin: 0.7rem auto 0; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='16' viewBox='0 0 220 16'%3E %3Cpath d='M0 8 H88 M132 8 H220' stroke='%23B59758' stroke-width='1'/%3E %3Cpath d='M88 8 c 6 -7 12 -7 16 0 M116 8 c 4 7 10 7 16 0' stroke='%23B59758' stroke-width='1' fill='none'/%3E %3Cpath d='M110 2 L116 8 L110 14 L104 8 Z' fill='%23B59758'/%3E %3Ccircle cx='96' cy='8' r='1.4' fill='%23B59758'/%3E%3Ccircle cx='124' cy='8' r='1.4' fill='%23B59758'/%3E %3C/svg%3E") no-repeat center / 180px 14px;
  filter: brightness(0.55) saturate(1.4);
}
html body .entry-content :is(.tldr, .quick-summary) ul { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 0.15rem; }
html body .entry-content :is(.tldr, .quick-summary) li {
  position: relative; margin: 0 !important; padding: 0.55em 0 0.55em 1.7em; line-height: 1.55; color: var(--c-ink);
  border-top: 1px dashed color-mix(in oklab, var(--c-gold-deep), transparent 65%);
}
html body .entry-content :is(.tldr, .quick-summary) li:first-child { border-top: 0; }
html body .entry-content :is(.tldr, .quick-summary) li::marker { content: none; }
html body .entry-content :is(.tldr, .quick-summary) li::before {
  content: ""; position: absolute; left: 0.25em; top: 1.08em; width: 0.42em; height: 0.42em;
  background: var(--c-gold-deep); transform: rotate(45deg); box-shadow: 0 0 0 2px var(--c-cream), 0 0 0 3px color-mix(in oklab, var(--c-gold-deep), transparent 50%);
}
html body .entry-content :is(.tldr, .quick-summary) :is(strong, b) { color: var(--c-wine); }
html body .entry-content :is(.tldr, .quick-summary) a { color: var(--c-wine); }
html body .entry-content :is(.tldr, .quick-summary) > p { color: var(--c-ink); }

/* --- FAQ (section.faq with details.faq-item, or any details / Details block): framed questions in the house style --- */
html body .entry-content :is(.faq) > :is(h2, h3):first-child { margin-bottom: var(--sp-3) !important; }
html body .entry-content details {
  position: relative; margin: 0 0 0.7rem !important; padding: 0 !important;
  background: var(--bg-2) !important; border: 1px solid var(--line) !important; border-radius: 0 !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease; interpolate-size: allow-keywords;
}
html body .entry-content details:hover { border-color: color-mix(in oklab, var(--accent), transparent 30%) !important; }
html body .entry-content details[open] { border-color: color-mix(in oklab, var(--accent), transparent 15%) !important; box-shadow: inset 3px 0 0 var(--accent), 0 14px 30px -20px var(--drop); }
html body .entry-content details > summary {
  list-style: none !important; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  margin: 0 !important; padding: 1.05rem 1.3rem !important;
  font-family: var(--f-serif); font-size: 1.1rem; font-weight: 400 !important; line-height: 1.35; color: var(--text); transition: color 0.2s ease;
}
html body .entry-content details > summary br { display: none; }
html body .entry-content details > summary::-webkit-details-marker { display: none; }
html body .entry-content details > summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
  border: 1px solid var(--line); font-family: var(--f-display); font-size: 1.15rem; line-height: 1; color: var(--accent);
  transition: transform 0.3s ease, border-color 0.2s ease, background-color 0.2s ease;
}
html body .entry-content details > summary:hover, html body .entry-content details[open] > summary { color: var(--accent-2); }
html body .entry-content details > summary:hover::after { border-color: var(--accent); }
html body .entry-content details[open] > summary::after { transform: rotate(45deg); border-color: var(--accent); background: color-mix(in oklab, var(--accent), transparent 88%); }
html body .entry-content details > summary:focus-visible { outline: 1px solid var(--accent); outline-offset: -4px; }
html body .entry-content details > :not(summary) {
  margin: 0 1.3rem !important; padding: 0.95rem 0 1.15rem !important; border-top: 1px solid var(--line) !important;
  color: var(--text-2); line-height: 1.7 !important;
}
html body .entry-content details > :not(summary) p { margin: 0 0 0.7em; }
html body .entry-content details > :not(summary) p:last-of-type { margin-bottom: 0; }
html body .entry-content details p:empty { display: none; }
@supports (interpolate-size: allow-keywords) {
  html body .entry-content details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete; }
  html body .entry-content details[open]::details-content { block-size: auto; }
}

/* --- Important note (section.content-disclaimer, or a group with the class "note"): wine-tinted, gold frame --- */
html body .entry-content :is(.content-disclaimer, .note, .callout) {
  position: relative; color: var(--text) !important;
  background: linear-gradient(90deg, color-mix(in oklab, var(--c-wine), var(--bg) 62%), color-mix(in oklab, var(--c-wine), var(--bg) 84%) 60%) !important;
  border: 1px solid color-mix(in oklab, var(--c-gold), transparent 55%) !important; border-left: 3px solid var(--c-wine) !important; border-radius: 0 !important;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 0.3rem) !important; margin-block: var(--sp-4) !important;
}
:root[data-theme="light"] .entry-content :is(.content-disclaimer, .note, .callout) { border-left-color: var(--c-wine) !important; }
html body .entry-content :is(.content-disclaimer, .note, .callout) > :is(h2, h3, h4, p:first-child > strong:only-child):first-child {
  display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.7rem !important;
  font-family: var(--f-display); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
html body .entry-content :is(.content-disclaimer, .note, .callout) > :is(h2, h3, h4):first-child::before {
  content: ""; flex: none; width: 1rem; height: 1rem; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C10 6 14 10 20 10 C14 10 10 14 10 20 C10 14 6 10 0 10 C6 10 10 6 10 0 Z' fill='%23B59758'/%3E%3C/svg%3E") no-repeat center / contain;
}
html body .entry-content :is(.content-disclaimer, .note, .callout) :is(ul, ol) { margin: 0 !important; padding-left: 1.2em !important; }
html body .entry-content :is(.content-disclaimer, .note, .callout) li { margin-block: 0.3em; color: var(--text); font-size: 0.96rem; }
html body .entry-content :is(.content-disclaimer, .note, .callout) li::marker { color: color-mix(in oklab, var(--c-wine), var(--accent) 45%); }
html body .entry-content :is(.content-disclaimer, .note, .callout) p { color: var(--text); }

/* boxes pasted from elsewhere with a white or near-white background would be cream text on white: give them the house ground */
html body .entry-content :is([style*="background:#f"], [style*="background: #f"], [style*="background-color:#f"], [style*="background-color: #f"], [style*="background:white"], [style*="background: white"], [style*="background-color:white"], [style*="background-color: white"]):not(.keep-style, .content-disclaimer, .note, .callout, .tldr, .quick-summary) {
  background: var(--bg-2) !important; color: var(--text) !important; border-color: var(--line) !important;
}

/* --- Sources (section.sources): small framed links --- */
html body .entry-content .sources { border-top: 1px solid var(--line) !important; margin-top: var(--sp-5) !important; padding-top: var(--sp-4) !important; }
html body .entry-content .sources > :is(h2, h3):first-child {
  margin: 0 0 var(--sp-3) !important; font-family: var(--f-display); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent);
}
html body .entry-content .sources ul { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; }
html body .entry-content .sources li { margin: 0 !important; }
html body .entry-content .sources li::marker { content: none; }
html body .entry-content .sources a {
  display: inline-flex; align-items: center; gap: 0.45em; padding: 0.45em 0.8em; border: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--text-2); text-decoration: none !important; transition: color 0.2s ease, border-color 0.2s ease;
}
html body .entry-content .sources a::after { content: "\2197"; font-size: 0.85em; color: var(--accent); }
html body .entry-content .sources a:hover { color: var(--accent-2); border-color: var(--accent); }

/* --- App teaser at the end of a post (section.app-cta): a wine panel with gilded corners and a button --- */
html body .entry-content .app-cta {
  --bg: var(--c-wine); --bg-2: var(--c-wine-2);
  --text: var(--c-cream); --text-2: color-mix(in oklab, var(--c-cream), var(--c-wine) 25%);
  --line: color-mix(in oklab, var(--c-gold), transparent 50%); --line-2: var(--c-gold);
  --accent: var(--c-gold); --accent-2: var(--c-gold-2); --on-accent: var(--c-night);
  color-scheme: dark; position: relative; isolation: isolate; text-align: center; color: var(--text);
  background: radial-gradient(ellipse 80% 90% at 50% 0%, color-mix(in oklab, var(--c-wine), white 10%) 0%, var(--c-wine) 55%, var(--c-wine-2) 100%) !important;
  border: 1px solid color-mix(in oklab, var(--c-gold), transparent 35%) !important; border-radius: 0 !important;
  outline: 1px solid color-mix(in oklab, var(--c-gold), transparent 70%); outline-offset: -8px;
  margin-top: var(--sp-5) !important; padding: var(--sp-5) clamp(1.25rem, 5vw, var(--sp-6)) !important;
}
html body .entry-content .app-cta::before {
  content: ""; position: absolute; inset: 12px; pointer-events: none; z-index: -1;
  background: var(--corner-tl) no-repeat left top / 64px 64px, var(--corner-tr) no-repeat right top / 64px 64px, var(--corner-bl) no-repeat left bottom / 64px 64px, var(--corner-br) no-repeat right bottom / 64px 64px;
}
html body .entry-content .app-cta > :is(h2, h3):first-child { margin: 0 0 var(--sp-2) !important; color: var(--c-cream); }
html body .entry-content .app-cta p { color: var(--text-2); max-width: 46ch; margin-inline: auto; }
html body .entry-content .app-cta .app-cta-action { margin-top: var(--sp-3); }

/* --- byline under the title, and the author card after the article --- */
.byline { display: flex; align-items: center; justify-content: center; gap: 0.7rem; flex-wrap: wrap; margin: 0 auto var(--sp-2);
  font-family: var(--f-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-2); }
.byline-name { color: var(--text); text-decoration: none; transition: color 0.2s ease; }
.byline-name:hover { color: var(--accent); }
.byline-sep { width: 0.38rem; height: 0.38rem; background: var(--accent); transform: rotate(45deg); }
.byline time { color: var(--accent); }
.monogram {
  flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  font-family: var(--f-display); font-size: 0.95rem; font-weight: 500; letter-spacing: 0; color: var(--c-gold-2);
  background: radial-gradient(circle at 50% 35%, var(--c-slate), var(--c-night) 75%);
  border: 1px solid var(--c-gold); box-shadow: inset 0 0 0 2px var(--c-night), inset 0 0 0 3px color-mix(in oklab, var(--c-gold), transparent 55%);
}
.monogram.is-lg { width: 6rem; height: 6rem; font-size: 2.4rem; box-shadow: inset 0 0 0 4px var(--c-night), inset 0 0 0 5px color-mix(in oklab, var(--c-gold), transparent 45%), 0 14px 30px -14px var(--drop); }
.author-photo { flex: none; width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--accent); padding: 4px; background: var(--bg-2); }

.author-card {
  position: relative; isolation: isolate; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: center;
  margin: var(--sp-5) auto 0; padding: var(--sp-4) clamp(1.25rem, 4vw, var(--sp-5));
  background: var(--bg-2); border: 1px solid var(--line); outline: 1px solid color-mix(in oklab, var(--accent), transparent 80%); outline-offset: -7px;
}
.author-card::before {
  content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: -1; opacity: 0.7;
  background: var(--corner-tl) no-repeat left top / 56px 56px, var(--corner-tr) no-repeat right top / 56px 56px, var(--corner-bl) no-repeat left bottom / 56px 56px, var(--corner-br) no-repeat right bottom / 56px 56px;
}
.author-card-kicker { margin: 0 0 0.3rem; font-family: var(--f-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--accent); }
.author-card-name { margin: 0 0 0.5rem; font-family: var(--f-display); font-size: 1.45rem; font-weight: 500; letter-spacing: 0.08em; line-height: 1.2; }
.author-card-name a { color: var(--text); text-decoration: none; }
.author-card-name a:hover { color: var(--accent); }
.author-card-bio { margin: 0 0 0.8rem; color: var(--text-2); font-size: 0.98rem; line-height: 1.65; max-width: 52ch; }
.author-card .btn-text { margin-top: 0.1rem; }
/* the head of the card: picture + name, role, bio */
.author-card { display: block; }
.author-card-head { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: center; }
.author-card-role { margin: -0.25rem 0 0.6rem; font-family: var(--f-serif); font-style: italic; font-size: 1.02rem; color: var(--accent-2); }
@media (max-width: 600px) {
  .author-card-head { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--sp-3); }
  .author-card-bio { margin-inline: auto; }
}

/* the author's latest articles: small arched cards */
.author-card-posts { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.author-card-posts-title {
  display: flex; align-items: center; gap: 0.9rem; margin: 0 0 var(--sp-3); max-width: none;
  font-family: var(--f-display); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);
}
.author-card-posts-title::before, .author-card-posts-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.author-list { list-style: none; margin: 0; padding: 0; max-width: none; }
.author-list li { margin: 0; max-width: none; border-top: 1px solid color-mix(in oklab, var(--line), transparent 45%); }
.author-list li:first-child { border-top: 0; }
.author-list a {
  display: grid; grid-template-columns: 1.4rem 1fr auto; align-items: baseline; gap: 0.2rem 0.9rem;
  padding: 0.7rem 0.3rem; color: var(--text); text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease;
}
.author-list a::before {
  content: ""; width: 0.4rem; height: 0.4rem; justify-self: center; align-self: center;
  background: var(--accent); transform: rotate(45deg); transition: transform 0.3s ease, background-color 0.2s ease;
}
.author-list-title { font-family: var(--f-serif); font-size: 1.05rem; line-height: 1.35; }
.author-list time { font-family: var(--f-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.author-list a:hover { color: var(--accent-2); background: color-mix(in oklab, var(--accent), transparent 93%); }
.author-list a:hover::before { transform: rotate(225deg); background: var(--accent-2); }
.author-card-all { margin: var(--sp-3) 0 0; text-align: center; }
@media (max-width: 600px) {
  .author-list a { grid-template-columns: 1.2rem 1fr; text-align: left; }
  .author-list time { grid-column: 2; }
}

/* author boxes added by plugins: the card above replaces them (nav.js takes over a bio it could not find itself) */
body:has(.author-card) :is(.saboxplugin-wrap, .m-a-box, .m-a-box-container, .molongui-author-box, .pp-multiple-authors-boxes-wrapper, .pp-author-boxes-wrapper, .wp-post-author-wrap, .abh_box, .ts-fab-wrapper, #author-bio-box, .author-bio-box, .about-author, .wpa-author-box) { display: none !important; }
.prahou-replaced-author-box { display: none !important; }

/* --- Forms in the text: Contact Form 7 (and any plain form) in the house style --- */
.wpcf7 { --warn: color-mix(in oklab, var(--c-wine), white 48%); --ok: var(--accent); }
:root[data-theme="light"] .wpcf7 { --warn: var(--c-wine); }
/* a form on its own gets a framed card; inside the contact pattern the card is already there */
.entry-content .wpcf7:not(.contact-form .wpcf7) {
  position: relative; padding: var(--sp-4) clamp(1.1rem, 4vw, var(--sp-4)); margin-block: var(--sp-3);
  background: var(--bg-2); border: 1px solid var(--line); outline: 1px solid color-mix(in oklab, var(--accent), transparent 80%); outline-offset: -7px;
}
.wpcf7 .hidden-fields-container, .wpcf7 .screen-reader-response { display: none; }
.wpcf7 form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.2rem; }
.wpcf7 form > * { grid-column: 1 / -1; margin: 0; max-width: none; }
.wpcf7 form > p:has([data-name="your-name"]), .wpcf7 form > p:has([data-name="your-email"]) { grid-column: auto; }
@media (max-width: 600px) { .wpcf7 form > p:has([data-name="your-name"]), .wpcf7 form > p:has([data-name="your-email"]) { grid-column: 1 / -1; } }
.wpcf7 label { margin: 0; }
.wpcf7 label > br { display: none; }
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 0.45rem; }
/* fields sit inside their label in CF7: give them back normal text, not the label's small capitals */
.wpcf7 :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), textarea, select) {
  width: 100%; margin: 0; font: 400 1rem/1.5 var(--f-ui); letter-spacing: normal; text-transform: none; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 0; padding: 0.85em 1em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wpcf7 textarea { min-height: 9rem; resize: vertical; }
.wpcf7 :is(input, textarea, select)::placeholder { color: color-mix(in oklab, var(--text-2), transparent 25%); text-transform: none; letter-spacing: normal; }
.wpcf7 :is(input:not([type="submit"]), textarea, select):focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 82%); }
.wpcf7 [aria-invalid="true"] { border-color: var(--warn) !important; }
.wpcf7 .wpcf7-not-valid-tip { display: block; margin-top: 0.4rem; font: 500 0.82rem/1.4 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--warn); }
/* consent / checkboxes: a sentence with a gold box */
.wpcf7 .wpcf7-list-item { display: block; margin: 0; }
.wpcf7 .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer;
  font: 400 0.92rem/1.5 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.wpcf7 input[type="checkbox"], .wpcf7 input[type="radio"] { flex: none; width: 1.05rem; height: 1.05rem; margin: 0.2rem 0 0; accent-color: var(--accent); }
/* the send button: the gilded one, a little wider */
.wpcf7 form > p:has(.wpcf7-submit) { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.3rem; }
.wpcf7 .wpcf7-submit { min-width: 12rem; }
.wpcf7 .wpcf7-spinner { margin: 0; background-color: var(--accent); }
.wpcf7 .wpcf7-spinner::before { background-color: var(--c-night); }
/* the message after sending */
.wpcf7 form .wpcf7-response-output {
  margin: 0; padding: 0.9rem 1.1rem; font-size: 0.95rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--ok);
}
.wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output { border-left-color: var(--warn); }
.wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--ok); }
/* any other form in a post or page: its send button is the gilded one too */
.entry-content form :is(button[type="submit"], .elementor-button, .wpforms-submit, .forminator-button-submit):not(.wp-block-search__button) {
  font-family: var(--f-ui); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track);
  padding: 1.15em 2.1em 1.1em; color: var(--on-accent); border: 1px solid color-mix(in oklab, var(--accent), black 24%); border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent), white 26%) 0%, var(--accent) 48%, color-mix(in oklab, var(--accent), black 18%) 100%);
  outline: 1px solid var(--line); outline-offset: 3px; cursor: pointer;
}

/* --- Contact page (pattern "Contact page"): details on the left, the form in a framed card on the right --- */
.contact-page { gap: var(--sp-5) !important; align-items: flex-start; margin-block: var(--sp-2) var(--sp-5); }
.contact-info > .is-style-label { margin-bottom: 0.4rem; }
.contact-info > h2 { margin-top: 0; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); line-height: 1.15; }
.contact-cards { display: grid; gap: 0.75rem; margin-top: var(--sp-3); }
.contact-card {
  position: relative; margin: 0 !important; padding: 1rem 1.1rem 1rem 4.4rem; min-height: 4.6rem;
  background: var(--bg-2); border: 1px solid var(--line); transition: border-color 0.25s ease;
}
.contact-card:hover { border-color: color-mix(in oklab, var(--accent), transparent 30%); }
.contact-card::before { content: ""; position: absolute; left: 1rem; top: 1rem; width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); border-radius: 50%; }
.contact-card::after { content: ""; position: absolute; left: 1rem; top: 1rem; width: 2.5rem; height: 2.5rem; background-color: var(--accent);
  -webkit-mask: var(--ico) center / 1.15rem no-repeat; mask: var(--ico) center / 1.15rem no-repeat; }
.contact-card.icon-mail { --ico: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpath d='M3.5 6.5l8.5 6 8.5-6'/%3E%3C/svg%3E"); }
.contact-card.icon-pin { --ico: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.contact-card.icon-clock { --ico: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.contact-card.icon-phone { --ico: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }
.contact-card p { margin: 0; max-width: none; }
.contact-label { font-family: var(--f-ui); font-size: 0.64rem; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--accent); }
.contact-value { margin-top: 0.15rem !important; font-family: var(--f-serif); font-size: 1.2rem; line-height: 1.3; color: var(--text); }
.contact-value a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); transition: color 0.2s ease, border-color 0.2s ease; }
.contact-value a:hover { color: var(--accent-2); border-color: var(--accent); }
.contact-note { margin-top: 0.2rem !important; font-size: 0.9rem; color: var(--text-2); }
.contact-form {
  position: relative; isolation: isolate; padding: var(--sp-4) clamp(1.1rem, 4vw, var(--sp-5)) var(--sp-4);
  background: var(--bg-2); border: 1px solid var(--line); outline: 1px solid color-mix(in oklab, var(--accent), transparent 80%); outline-offset: -7px;
}
.contact-form::before {
  content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: -1; opacity: 0.75;
  background: var(--corner-tl) no-repeat left top / 56px 56px, var(--corner-tr) no-repeat right top / 56px 56px, var(--corner-bl) no-repeat left bottom / 56px 56px, var(--corner-br) no-repeat right bottom / 56px 56px;
}
.contact-form > h3:first-child { margin: 0 0 var(--sp-3); font-size: 1.15rem; letter-spacing: 0.14em; text-align: center; }
.contact-form > h3:first-child::after { content: ""; display: block; width: 160px; height: 12px; margin: 0.7rem auto 0; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='16' viewBox='0 0 220 16'%3E %3Cpath d='M0 8 H88 M132 8 H220' stroke='%23B59758' stroke-width='1'/%3E %3Cpath d='M88 8 c 6 -7 12 -7 16 0 M116 8 c 4 7 10 7 16 0' stroke='%23B59758' stroke-width='1' fill='none'/%3E %3Cpath d='M110 2 L116 8 L110 14 L104 8 Z' fill='%23B59758'/%3E %3Ccircle cx='96' cy='8' r='1.4' fill='%23B59758'/%3E%3Ccircle cx='124' cy='8' r='1.4' fill='%23B59758'/%3E %3C/svg%3E") no-repeat center / 160px 12px; }
.contact-form .wpcf7 { margin: 0; }

/* --- The generated homepage (Appearance → Prahou homepage) --- */
.home-articles .home-title { text-align: center; margin: 0 auto var(--sp-4); }
.home-articles > .wp-block-buttons { justify-content: center; margin-top: var(--sp-4); }
.home-posts .post-grid { gap: var(--sp-3); }
.home-cta .wrap { text-align: center; }
.home-cta .lead { max-width: 42ch; margin-inline: auto; color: var(--text-2); }
.home-cta .wp-block-buttons { justify-content: center; }
.home-cta .kicker::before, .home-cta .kicker::after { background: color-mix(in oklab, var(--c-gold), transparent 50%); }
.home-usps { border-block: 1px solid var(--line); background: var(--bg-2); }
.home-usps .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sp-3) var(--sp-4); padding-block: var(--sp-4); min-height: 0; }
.home-usps .wrap > div { display: flex; align-items: center; gap: 0.9em; }
.home-usps svg { flex: none; width: 2.8rem; height: 2.8rem; padding: 0.65rem; border: 1px solid var(--line); border-radius: 50%; stroke: var(--accent); fill: none; stroke-width: 1.2; stroke-linecap: round; }
.home-usps b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); }
.home-usps small { display: block; font-size: 0.78rem; color: var(--text-2); margin-top: 0.15em; }
.home-features + .home-articles { padding-top: 0; }
.home-cta .lead { margin-bottom: var(--sp-4); }
@media (max-width: 40rem) {
  /* on phones the hero text runs over the whole photo: darken it evenly so the words stay readable */
  .hero::before { background: linear-gradient(180deg, color-mix(in oklab, var(--c-night), transparent 35%) 0%, color-mix(in oklab, var(--c-night), transparent 15%) 55%, color-mix(in oklab, var(--c-night), transparent 5%) 100%); }
  .home-features .arch .media { aspect-ratio: 4 / 3; }
}

/* --- The generated About page --- */
.page-hero { min-height: min(66vh, 640px); }
/* hero intro keeps a readable line length (inside page content the general text rule would widen it) */
.hero p.lead { max-width: 40ch; }
.about-story { align-items: center; }
.about-story > .arch-frame { width: 100%; max-width: 30rem; justify-self: center; }
.about-story-text h2 { margin-top: 0; }
.about-story-text .lead { font-family: var(--f-serif); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.6; color: var(--text); max-width: 34em; }
.signature { margin-top: var(--sp-3); font-family: var(--f-serif); font-style: italic; font-size: 1.7rem; line-height: 1; color: var(--accent); }
.signature::before { content: ""; display: inline-block; width: 2.2rem; height: 1px; margin-right: 0.7rem; vertical-align: middle; background: var(--accent); }

.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.value { position: relative; margin: 0 !important; padding: var(--sp-4) var(--sp-3) var(--sp-3); text-align: center; background: var(--bg-2); border: 1px solid var(--line); transition: border-color 0.25s ease, transform 0.25s ease; }
.value:hover { border-color: color-mix(in oklab, var(--accent), transparent 30%); transform: translateY(-2px); }
.value-num { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 0 0 0.8rem; font-family: var(--f-display); font-size: 1.5rem; font-weight: 500; line-height: 1; color: var(--accent); max-width: none; }
.value-num::before, .value-num::after { content: ""; width: 1.8rem; height: 1px; background: color-mix(in oklab, var(--accent), transparent 40%); }
.value h3 { margin: 0 0 0.6rem; font-size: 1.02rem; letter-spacing: 0.1em; }
.value p:last-child { margin: 0 auto; font-size: 0.95rem; line-height: 1.6; color: var(--text-2); max-width: 26ch; }

.about-steps > .kicker { margin-bottom: var(--sp-5); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.step { position: relative; margin: 0 !important; text-align: center; }
.step-num {
  position: relative; z-index: 1; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin: 0 auto var(--sp-2) !important;
  font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; line-height: 1; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 50%; background: var(--bg);
  box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px color-mix(in oklab, var(--accent), transparent 60%);
}
.step:not(:last-child)::after { content: ""; position: absolute; top: 1.8rem; left: calc(50% + 2.8rem); right: calc(-50% - var(--sp-4) + 2.8rem); border-top: 1px dashed color-mix(in oklab, var(--accent), transparent 35%); }
.step h3 { margin: 0 0 0.5rem; font-size: 1.02rem; letter-spacing: 0.1em; }
.step p:last-child { margin: 0 auto; font-size: 0.95rem; line-height: 1.6; color: var(--text-2); max-width: 24ch; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--sp-3); max-width: 58rem; margin: 0 auto; }
.team-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--sp-4) var(--sp-3) var(--sp-3); background: var(--bg-2); border: 1px solid var(--line);
  outline: 1px solid color-mix(in oklab, var(--accent), transparent 80%); outline-offset: -7px;
}
.team-card::before {
  content: ""; position: absolute; inset: 10px; z-index: -1; pointer-events: none; opacity: 0.7;
  background: var(--corner-tl) no-repeat left top / 48px 48px, var(--corner-tr) no-repeat right top / 48px 48px, var(--corner-bl) no-repeat left bottom / 48px 48px, var(--corner-br) no-repeat right bottom / 48px 48px;
}
.team-card .monogram, .team-card .author-photo { display: grid; margin-bottom: var(--sp-2); }
.team-name { margin: 0 0 0.25rem; font-size: 1.3rem; letter-spacing: 0.08em; }
.team-name a { color: var(--text); text-decoration: none; transition: color 0.2s ease; }
.team-name a:hover { color: var(--accent-2); }
.team-role { margin: 0 0 0.6rem; font-family: var(--f-serif); font-style: italic; font-size: 1.02rem; color: var(--accent-2); }
.team-bio { margin: 0 auto 0.9rem; max-width: 40ch; font-size: 0.95rem; line-height: 1.65; color: var(--text-2); }
.team-card .btn-text { margin-top: auto; }

@media (max-width: 64rem) {
  .values, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step::after { display: none; }
  .about-story { grid-template-columns: 1fr; }
  .about-story > .arch-frame { max-width: 24rem; }
}
@media (max-width: 40rem) {
  .values, .steps { grid-template-columns: 1fr; }
  .steps { gap: var(--sp-4); }
}

/* --- 404 --- */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.prahou-404 { padding-inline: var(--gutter); }
.nf { padding-block: var(--sp-5); }
.nf-inner { max-width: 40rem; margin: 0 auto; text-align: center; }
.nf-inner > p, .archive-intro > p { margin-inline: auto; }
.nf-inner > .label, .archive-intro > .label { justify-content: center; text-align: center; }
.nf-more .kicker, .no-results .kicker, .no-results .lead { max-width: none; }
.nf-code {
  display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2rem); margin: 0 0 var(--sp-2) !important; max-width: none;
  font-family: var(--f-display); font-weight: 500; font-size: clamp(5.5rem, 3rem + 10vw, 11rem); line-height: 0.9; letter-spacing: 0.06em;
  background: linear-gradient(180deg, var(--c-gold-2) 0%, var(--c-gold) 45%, var(--c-gold-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nf-code::before, .nf-code::after { content: ""; flex: 0 1 5rem; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }
.nf-code::after { background: linear-gradient(90deg, var(--accent), transparent); }
.nf h1 { margin: 0.2rem auto var(--sp-2); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); max-width: 18ch; }
.nf .kicker-ornament { margin: var(--sp-2) auto var(--sp-3); }
.nf .lead { margin: 0 auto var(--sp-4); max-width: 46ch; color: var(--text-2); }
.prahou-search { display: flex; gap: 0.7rem; max-width: 30rem; margin: 0 auto; }
.prahou-search input[type="search"] { flex: 1; min-width: 0; margin: 0; padding: 0.85em 1em; font: 400 1rem/1.4 var(--f-ui); color: var(--text); background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; }
.prahou-search input[type="search"]:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 82%); }
.prahou-search .btn { flex: none; outline-color: transparent; }
.nf-actions { margin-top: var(--sp-3); }
.nf-more, .no-results { max-width: 66rem; margin: var(--sp-6) auto 0; }
.no-results { margin-top: var(--sp-3); text-align: center; }
.no-results .lead { margin: 0 auto var(--sp-5); color: var(--text-2); }
.nf-more .kicker, .no-results .kicker { margin-bottom: var(--sp-3); }
.nf-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sp-3); }
.nf-cards li { margin: 0; max-width: none; }
.nf-card { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 6px 6px var(--sp-2); text-align: left; color: var(--text); text-decoration: none; background: var(--bg-2); border: 1px solid var(--line); transition: border-color 0.25s ease, transform 0.25s ease; }
.nf-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.nf-card-media { display: block; aspect-ratio: 4 / 3; margin-bottom: 0.4rem; background: var(--c-slate) center / cover no-repeat; border-radius: 50% 50% 0 0 / 24% 24% 0 0; }
.nf-card-media.is-empty { background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='16' viewBox='0 0 220 16'%3E %3Cpath d='M0 8 H88 M132 8 H220' stroke='%23B59758' stroke-width='1'/%3E %3Cpath d='M88 8 c 6 -7 12 -7 16 0 M116 8 c 4 7 10 7 16 0' stroke='%23B59758' stroke-width='1' fill='none'/%3E %3Cpath d='M110 2 L116 8 L110 14 L104 8 Z' fill='%23B59758'/%3E %3Ccircle cx='96' cy='8' r='1.4' fill='%23B59758'/%3E%3Ccircle cx='124' cy='8' r='1.4' fill='%23B59758'/%3E %3C/svg%3E") no-repeat center / 140px 12px, radial-gradient(ellipse at 50% 30%, color-mix(in oklab, var(--bg-2), var(--accent) 14%), var(--bg-2) 70%); border-bottom: 1px solid var(--line); }
.nf-card-label { padding-inline: 0.8rem; font-family: var(--f-ui); font-size: 0.62rem; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--accent); }
.nf-card-title { padding-inline: 0.8rem; font-family: var(--f-display); font-size: 1rem; letter-spacing: 0.06em; line-height: 1.3; transition: color 0.2s ease; }
.nf-card:hover .nf-card-title { color: var(--accent-2); }
@media (max-width: 40rem) {
  .prahou-search { flex-direction: column; } .prahou-search .btn { width: 100%; }
  .nf-cards { gap: 0.7rem; }
  .nf-card { display: grid; grid-template-columns: 5.5rem 1fr; grid-template-rows: auto 1fr; column-gap: 0.9rem; row-gap: 0.25rem; align-items: start; padding: 6px; }
  .nf-card-media { grid-row: 1 / span 2; width: 5.5rem; aspect-ratio: 4 / 5; margin: 0; border-radius: 50% 50% 0 0 / 22% 22% 0 0; }
  .nf-card-media.is-empty { background-size: 60px 6px, auto; }
  .nf-card-label, .nf-card-title { padding-inline: 0; }
  .nf-card-label { align-self: end; padding-top: 0.4rem; }
}

/* --- archive, author, search and blog headers --- */
.archive-intro { max-width: 46rem; margin: 0 auto; text-align: center; }
.archive-intro .label { margin-bottom: 0.4rem; }
.archive-intro .archive-title { margin: 0 auto var(--sp-2); font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem); line-height: 1.12; }
.archive-intro .archive-title::after { content: ""; display: block; width: 220px; height: 16px; margin: var(--sp-2) auto 0; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='16' viewBox='0 0 220 16'%3E %3Cpath d='M0 8 H88 M132 8 H220' stroke='%23B59758' stroke-width='1'/%3E %3Cpath d='M88 8 c 6 -7 12 -7 16 0 M116 8 c 4 7 10 7 16 0' stroke='%23B59758' stroke-width='1' fill='none'/%3E %3Cpath d='M110 2 L116 8 L110 14 L104 8 Z' fill='%23B59758'/%3E %3Ccircle cx='96' cy='8' r='1.4' fill='%23B59758'/%3E%3Ccircle cx='124' cy='8' r='1.4' fill='%23B59758'/%3E %3C/svg%3E") no-repeat center / 220px 16px; }
.archive-intro .archive-desc { margin: 0 auto var(--sp-2); max-width: 60ch; color: var(--text-2); }
.archive-intro .archive-desc p { max-width: none; }
.archive-intro .monogram, .archive-intro .author-photo { display: grid; margin: 0 auto var(--sp-2); }
.archive-count { margin: 0 0 var(--sp-3); font-family: var(--f-ui); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--text-2); }
.archive-intro .prahou-search { margin-top: var(--sp-2); }
/* page numbers under the grids */
.wp-block-query-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: var(--sp-5); }
.wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wp-block-query-pagination .page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next {
  display: inline-grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 0.9rem; margin: 0 !important;
  font-family: var(--f-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text); text-decoration: none; border: 1px solid var(--line); background: var(--bg-2);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.wp-block-query-pagination a:hover { border-color: var(--accent); color: var(--accent-2); }
.wp-block-query-pagination .page-numbers.current { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.wp-block-query-pagination .page-numbers.dots { border-color: transparent; background: none; }

/* --- footer: cookie settings as a quiet link --- */
.site-footer .cookie-settings :is(button, a) {
  padding: 0; margin: 0; background: none !important; border: 0 !important; box-shadow: none !important; outline: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--text-2) !important; cursor: pointer; text-decoration: none;
}
.site-footer .cookie-settings :is(button, a):hover { color: var(--accent-2) !important; }
.site-footer .bottom .wrap { align-items: center; }
.site-footer .bottom .wrap > span:first-child { margin-right: auto; }

/* comment form: the "remember me" line is a sentence, not a field label */
.comment-form-cookies-consent { display: flex; align-items: baseline; gap: 0.6rem; }
.comment-form-cookies-consent label { font-family: var(--f-ui); font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-2); margin: 0; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* after the article */
.article-foot { margin-top: var(--sp-5); }
.article-foot .post-nav, .article-foot .post-nav.is-layout-flex {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); border-top: 0; padding-top: 0; margin: 0 auto;
}
/* previous / next: two framed cards, a small label with an arrow above the title */
.article-foot .post-nav .wp-block-post-navigation-link {
  position: relative; display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 1.1rem 1.3rem 1.2rem;
  background: var(--bg-2); border: 1px solid var(--line); transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.article-foot .post-nav .post-navigation-link-next { grid-column: 2; text-align: right; align-items: flex-end; }
.article-foot .post-nav [class*="wp-block-post-navigation-link__arrow"] { display: none; }
.article-foot .post-nav .post-nav-label {
  display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--f-ui); font-size: 0.64rem; font-weight: 600;
  letter-spacing: var(--track); text-transform: uppercase; color: var(--accent);
}
.article-foot .post-nav .post-navigation-link-previous .post-nav-label::before,
.article-foot .post-nav .post-navigation-link-next .post-nav-label::after { font-size: 0.9rem; letter-spacing: 0; transition: transform 0.25s ease; }
.article-foot .post-nav .post-navigation-link-previous .post-nav-label::before { content: "\2190"; }
.article-foot .post-nav .post-navigation-link-next .post-nav-label::after { content: "\2192"; }
.article-foot .post-nav a { font-family: var(--f-serif); font-size: 1.12rem; line-height: 1.3; color: var(--text); text-decoration: none; transition: color 0.2s ease; }
.article-foot .post-nav a::after { content: ""; position: absolute; inset: 0; }   /* the whole card is the link */
.article-foot .post-nav .wp-block-post-navigation-link:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 16px 30px -22px var(--drop); }
.article-foot .post-nav .wp-block-post-navigation-link:hover a { color: var(--accent-2); }
.article-foot .post-nav .post-navigation-link-previous:hover .post-nav-label::before { transform: translateX(-4px); }
.article-foot .post-nav .post-navigation-link-next:hover .post-nav-label::after { transform: translateX(4px); }
@media (max-width: 600px) {
  .article-foot .post-nav, .article-foot .post-nav.is-layout-flex { grid-template-columns: minmax(0, 1fr); }
  .article-foot .post-nav .post-navigation-link-next { grid-column: auto; }
}

/* --- Cookie banner (Complianz; CookieYes as well) in the house style: dark card, gold edge, gilded "Accept" --- */
html body .cmplz-cookiebanner {
  --cmplz_banner_background_color: var(--bg-2) !important;
  --cmplz_banner_border_color: color-mix(in oklab, var(--accent), transparent 45%) !important;
  --cmplz_banner_border_width: 1px !important;
  --cmplz_banner_border_radius: 0 !important;
  --cmplz_text_color: var(--text) !important;
  --cmplz_hyperlink_color: var(--accent-2) !important;
  --cmplz_category_header_always_active_color: var(--accent) !important;
  --cmplz_button_border_radius: 0 !important;
  --cmplz_button_accept_background_color: var(--accent) !important;
  --cmplz_button_accept_border_color: color-mix(in oklab, var(--accent), black 24%) !important;
  --cmplz_button_accept_text_color: var(--on-accent) !important;
  --cmplz_button_deny_background_color: transparent !important;
  --cmplz_button_deny_border_color: var(--line) !important;
  --cmplz_button_deny_text_color: var(--text) !important;
  --cmplz_button_settings_background_color: transparent !important;
  --cmplz_button_settings_border_color: var(--line) !important;
  --cmplz_button_settings_text_color: var(--text) !important;
  --cmplz_slider_active_color: var(--accent) !important;
  --cmplz_slider_inactive_color: var(--c-slate) !important;
  --cmplz_slider_bullet_color: var(--c-cream) !important;
  font-family: var(--f-ui) !important; color: var(--text);
  outline: 1px solid color-mix(in oklab, var(--accent), transparent 80%); outline-offset: -7px;
  box-shadow: 0 24px 60px -20px var(--drop), 0 0 0 1px color-mix(in oklab, black, transparent 70%) !important;
}
html body .cmplz-cookiebanner .cmplz-title {
  font-family: var(--f-display) !important; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent) !important;
}
html body .cmplz-cookiebanner :is(.cmplz-message, .cmplz-message p, .cmplz-description) { font-family: var(--f-ui) !important; color: var(--text-2) !important; }
html body .cmplz-cookiebanner .cmplz-divider { border-color: var(--line) !important; background: var(--line) !important; }
html body .cmplz-cookiebanner .cmplz-close { color: var(--text-2) !important; }
html body .cmplz-cookiebanner .cmplz-close:hover { color: var(--accent) !important; }
html body .cmplz-cookiebanner .cmplz-btn {
  font-family: var(--f-ui) !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 0 !important; height: auto !important; min-height: 45px; line-height: 1.25 !important;
  transition: filter 0.2s ease, border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
html body .cmplz-cookiebanner .cmplz-btn.cmplz-accept {
  background-image: linear-gradient(180deg, color-mix(in oklab, var(--accent), white 24%), var(--accent) 50%, color-mix(in oklab, var(--accent), black 16%)) !important;
  box-shadow: inset 0 1px 0 color-mix(in oklab, white, transparent 60%);
}
html body .cmplz-cookiebanner .cmplz-btn:not(.cmplz-accept):hover { border-color: var(--accent) !important; color: var(--accent-2) !important; }
html body .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover { filter: brightness(1.06); }
html body .cmplz-cookiebanner :is(.cmplz-link, .cmplz-documents a, .cmplz-links a) { color: var(--accent-2) !important; text-decoration-color: color-mix(in oklab, var(--accent), transparent 50%) !important; }
html body .cmplz-cookiebanner .cmplz-category { background: var(--bg) !important; border: 1px solid var(--line) !important; border-radius: 0 !important; }
html body .cmplz-cookiebanner .cmplz-category-title { font-family: var(--f-ui) !important; color: var(--text) !important; }
/* the small "Manage consent" tab Complianz leaves on the page after you choose */
html body #cmplz-manage-consent .cmplz-manage-consent {
  background: var(--bg-2) !important; color: var(--accent) !important; border: 1px solid color-mix(in oklab, var(--accent), transparent 45%) !important;
  border-bottom: 0 !important; border-radius: 0 !important; box-shadow: 0 -8px 24px -12px var(--drop) !important;
  font-family: var(--f-ui) !important; font-size: 0.66rem !important; font-weight: 700 !important; letter-spacing: 0.14em; text-transform: uppercase;
}
html body #cmplz-manage-consent .cmplz-manage-consent:hover { color: var(--accent-2) !important; border-color: var(--accent) !important; }
/* CookieYes */
html body .cky-consent-container .cky-consent-bar, html body .cky-modal .cky-preference-center {
  background: var(--bg-2) !important; border: 1px solid color-mix(in oklab, var(--accent), transparent 45%) !important; border-radius: 0 !important;
  box-shadow: 0 24px 60px -20px var(--drop) !important;
}
html body :is(.cky-consent-container, .cky-modal) :is(.cky-title, .cky-preference-title) { font-family: var(--f-display) !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent) !important; }
html body :is(.cky-consent-container, .cky-modal) :is(.cky-notice-des, .cky-notice-des p, .cky-preference-content-wrapper, .cky-accordion-header-des, p) { color: var(--text-2) !important; font-family: var(--f-ui) !important; }
html body :is(.cky-consent-container, .cky-modal) .cky-btn { border-radius: 0 !important; font-family: var(--f-ui) !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.14em; text-transform: uppercase; }
html body :is(.cky-consent-container, .cky-modal) .cky-btn-accept { background: var(--accent) !important; border-color: color-mix(in oklab, var(--accent), black 24%) !important; color: var(--on-accent) !important; }
html body :is(.cky-consent-container, .cky-modal) :is(.cky-btn-reject, .cky-btn-customize, .cky-btn-preferences) { background: transparent !important; border-color: var(--line) !important; color: var(--text) !important; }
html body .cky-btn-revisit-wrapper { background: var(--bg-2) !important; border: 1px solid color-mix(in oklab, var(--accent), transparent 45%) !important; }
/* the floating tab can go when the footer has a "Cookie settings" link ('cookie_tab' => false in prahou_settings) */
html body.no-cookie-tab :is(#cmplz-manage-consent, .cky-btn-revisit-wrapper) { display: none !important; }
.wp-block-comments { margin-top: var(--sp-5); }

/* archives, blog, search: a grid of cards */
.archive-head { text-align: center; padding-block: var(--sp-5) var(--sp-4); }
.archive-head .wp-block-query-title { font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem); margin: 0 auto var(--sp-2); }
.archive-head .wp-block-term-description { color: var(--text-2); max-width: 60ch; margin: 0 auto; }
.archive-head .wp-block-term-description p { max-width: none; }
.post-grid { gap: var(--sp-4) var(--sp-3) !important; list-style: none; padding: 0; }
.post-card { height: 100%; display: flex; flex-direction: column; text-align: left; padding: 6px 6px var(--sp-3); border: 1px solid var(--line); background: var(--bg-2); }
.post-card .wp-block-post-featured-image { margin: 0 0 var(--sp-2); }
.post-card .wp-block-post-featured-image img { border: 0; padding: 0; background: none; border-radius: 50% 50% 0 0 / 24% 24% 0 0; aspect-ratio: 4 / 3; }
.post-card > :not(.wp-block-post-featured-image) { margin-inline: var(--sp-2); }
.post-card .wp-block-post-terms { margin-bottom: 0.4rem; }
.post-card .wp-block-post-title { font-size: 1.15rem; line-height: 1.25; letter-spacing: 0.06em; margin: 0 var(--sp-2) 0.5rem; }
.post-card .wp-block-post-title a { color: var(--text); text-decoration: none; }
.post-card .wp-block-post-title a:hover { color: var(--accent); }
.post-card .wp-block-post-excerpt { font-size: var(--fs-sm); color: var(--text-2); margin-top: 0; }
.post-card .wp-block-post-excerpt__more-link { display: inline-block; margin-top: var(--sp-1); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--accent); text-decoration: none; }
.post-card .wp-block-post-excerpt__more-link::after { content: " \2192"; }
.search-form-wrap .wp-block-search__inside-wrapper { border: 1px solid var(--line); background: var(--bg-2); }
.search-form-wrap .wp-block-search__input { border: 0; margin: 0; background: transparent; }
.search-form-wrap .wp-block-search__button { margin: 0; }

/* =========================================================
   13. MENU STATES — compact dropdowns, items without icons, current section
   ========================================================= */
html body .mega:not(.has-feature) .wrap { grid-template-columns: repeat(var(--cols, 3), 1fr); }
html body .mega:not(.has-feature):not(.is-compact) .wrap { max-width: min(var(--wide), calc(var(--cols, 3) * 22rem + 6rem)); }
html body .mega-item.no-icon { grid-template-columns: 1fr; }
html body .mega-col h4 a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.7em; }
html body .mega-col h4 a:hover { color: var(--accent-2); }
html body .nav-toggle.is-current { color: var(--accent); }

@media (min-width: 64.01rem) {
  html body .has-mega.is-compact-parent { position: relative; }
  html body .mega.is-compact {
    left: 50%; right: auto; top: calc(50% + var(--header-h) / 2);
    transform: translateX(-50%); width: max-content; min-width: 15rem; max-width: 22rem;
    border: 1px solid var(--line); border-top: 0;
  }
  html body .mega.is-compact .wrap { display: block; padding: var(--sp-2) var(--sp-3); max-width: none; }
  html body .mega.is-compact .mega-col { border: 0; padding: 0; margin: 0; }
  html body .mega.is-compact .mega-item { padding: 0.65rem 0.75rem; }
}
@media (max-width: 64rem) {
  html body .mega.is-compact { transform: none; width: auto; max-width: none; }
}

/* reading pages need their own side padding (they are not inside .wrap) */
.prahou-article { padding-inline: var(--gutter); }

/* cards for posts without a featured image get an arched placeholder, so the grid stays even */
.post-card:not(:has(.wp-block-post-featured-image))::before {
  content: ""; display: block; aspect-ratio: 4 / 3; margin-bottom: var(--sp-2);
  border-radius: 50% 50% 0 0 / 24% 24% 0 0;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='16' viewBox='0 0 220 16'%3E %3Cpath d='M0 8 H88 M132 8 H220' stroke='%23B59758' stroke-width='1'/%3E %3Cpath d='M88 8 c 6 -7 12 -7 16 0 M116 8 c 4 7 10 7 16 0' stroke='%23B59758' stroke-width='1' fill='none'/%3E %3Cpath d='M110 2 L116 8 L110 14 L104 8 Z' fill='%23B59758'/%3E %3Ccircle cx='96' cy='8' r='1.4' fill='%23B59758'/%3E%3Ccircle cx='124' cy='8' r='1.4' fill='%23B59758'/%3E %3C/svg%3E") no-repeat center / 160px 12px, radial-gradient(ellipse at 50% 30%, color-mix(in oklab, var(--bg-2), var(--accent) 14%), var(--bg-2) 70%);
  border-bottom: 1px solid var(--line);
}

/* =========================================================
   14. STICKY HEADER, LANGUAGE DROPDOWN, MANY-COLUMN PANELS
   ========================================================= */
/* the header sticks to the top (below the WordPress admin bar when logged in; on phones the bar scrolls away) */
html { --prahou-bar: var(--wp-admin--admin-bar--height, 0px); }
@media screen and (max-width: 600px) { html { --prahou-bar: 0px; } }
html body .site-header-part, html body .wp-site-blocks > header:has(> .site-header) {
  position: sticky; top: var(--prahou-bar); z-index: 60;
}
html body > .site-header { position: sticky; top: 0; z-index: 60; }
html body .site-header { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: box-shadow .3s ease; }
html body .site-header .wrap { transition: min-height .3s ease; }
html.is-scrolled body .site-header { box-shadow: 0 10px 30px var(--drop); }
html.is-scrolled body .site-header .wrap { min-height: 4rem; }
/* the slimmer bar keeps its old footprint (as margin), so the page below does not jump when it shrinks */
html body .site-header-part, html body .wp-site-blocks > header:has(> .site-header) { transition: margin-bottom .3s ease; }
html.is-scrolled body :is(.site-header-part, .wp-site-blocks > header:has(> .site-header)) { margin-bottom: calc(var(--header-h) - 4rem); }
@media (prefers-reduced-motion: reduce) { html body .site-header, html body .site-header .wrap, html body .site-header-part { transition: none; } }
/* tall panels scroll inside the window instead of running off it */
html body .mega { max-height: calc(100vh - var(--header-h) - var(--prahou-bar, 0px) - 1rem); overflow-y: auto; overscroll-behavior: contain; }
html body .mega.is-compact { max-height: none; overflow: visible; }

/* one language in the header, the others in a dropdown */
html body .lang-switch { position: relative; }
html body .lang-current {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--f-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text); background: none; border: 1px solid transparent; padding: 0.55em 0.6em; line-height: 1; cursor: pointer;
}
html body .lang-current svg { width: 1rem; height: 1rem; stroke: var(--accent); fill: none; stroke-width: 1.4; }
/* flags: a small circle with a thin gold edge (the middle of the flag, like a coin) */
html body .flag {
  flex: none; display: block; width: 1.3rem; height: 1.3rem; aspect-ratio: 1; border-radius: 50%; object-fit: cover;
  stroke: none; fill: initial; overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--c-gold), transparent 45%), 0 1px 3px rgba(0, 0, 0, 0.35);
}
html body .lang-current svg.flag, html body .lang-current img.flag { width: 1.3rem; height: 1.3rem; stroke: none; fill: initial; margin-right: 0.15em; }
html body .lang-menu a .flag { align-self: center; }
html body .lang-menu a:hover .flag, html body .lang-menu a:focus-visible .flag { box-shadow: 0 0 0 1px color-mix(in oklab, var(--c-night), transparent 55%); }
html body .lang-current::after { content: ""; width: 0.38em; height: 0.38em; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-0.15em) rotate(45deg); }
html body .lang-switch.open .lang-current::after { transform: translateY(0.1em) rotate(225deg); }
html body .lang-current:hover, html body .lang-switch.open .lang-current { color: var(--accent); background: none; border-color: var(--line); }
html body .lang-menu {
  position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 70; display: none;
  min-width: 11rem; margin: 0; padding: 0.4rem 0; list-style: none;
  background: var(--menu-bg); border: 1px solid var(--line); box-shadow: 0 18px 40px var(--drop);
}
html body .lang-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -0.7rem; height: 0.7rem; }
html body .lang-switch.open .lang-menu { display: block; }
html body .lang-menu li { margin: 0; }
html body .lang-menu li + li { border-top: 1px solid color-mix(in oklab, var(--accent), transparent 78%); }
html body .lang-menu li:has(> a:hover), html body .lang-menu li:has(> a:hover) + li { border-top-color: transparent; }
html body .lang-menu { padding: 0.35rem 0.45rem; }
html body .lang-menu a {
  display: flex; justify-content: flex-start; align-items: baseline; gap: 0.75rem; padding: 0.4rem 0.8rem;
  color: var(--text); text-decoration: none; font-family: var(--f-serif); font-size: 1.02rem; line-height: 1.25;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
html body .lang-menu a small { margin-left: auto; padding-left: 1rem; font-family: var(--f-display); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); transition: color 0.2s ease; }
html body .lang-menu a[aria-current="true"] { color: var(--accent); }
html body .lang-menu a[aria-current="true"] small { color: var(--accent); }
/* hover: gold ground, dark letters */
html body .lang-menu a:hover, html body .lang-menu a:focus-visible {
  color: var(--c-night); background-color: var(--c-gold); outline: 0;
  box-shadow: inset 0 1px 0 color-mix(in oklab, white, transparent 62%), inset 0 -1px 0 color-mix(in oklab, black, transparent 80%);
}
html body .lang-menu a:hover small, html body .lang-menu a:focus-visible small { color: color-mix(in oklab, var(--c-night), transparent 25%); }

/* panels with many columns: columns wrap into rows of equal width; the feature stays on the right */
html body .mega.cols-many > .wrap { grid-template-columns: repeat(var(--row-cols, 4), minmax(0, 1fr)); grid-auto-flow: row dense; row-gap: var(--sp-4); max-width: var(--wide); padding-block: var(--sp-4) var(--sp-4); }
html body .mega.cols-many.has-feature > .wrap { grid-template-columns: repeat(var(--row-cols, 4), minmax(0, 1fr)) minmax(16rem, 1.05fr); }
html body .mega.cols-many .mega-item { padding: 0.55rem 0.75rem; }
html body .mega.cols-many .mega-col > .btn-text { margin-top: var(--sp-1); }
html body .mega.cols-many .mega-col + .mega-col { border-left: 0; padding-left: 0; margin-left: 0; }
html body .mega.cols-many .mega-col h4 { border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; }
html body .mega.cols-many .mega-feature { grid-column: -2 / -1; grid-row: 1 / span 3; }
@media (max-width: 64rem) {
  html body .mega.cols-many > .wrap, html body .mega.cols-many.has-feature > .wrap { grid-template-columns: 1fr; row-gap: var(--sp-3); }
  html body .mega.cols-many .mega-feature { grid-column: auto; grid-row: auto; }
  html body .lang-menu { right: -0.5rem; }
}

html body .mega-close { right: 0.75rem; top: 0.75rem; }

/* big multi-row panels skip the selling-points strip to stay within the window */
html body .mega.cols-many .mega-usps { display: none; }

/* --- Desktop: the panel is a floating card under the menu, only as wide as its columns need --- */
@media (min-width: 64.01rem) {
  html body .mega:not(.is-compact) {
    left: 50%; right: auto; top: calc(100% + 0.55rem); transform: translateX(-50%);
    width: min(calc(100vw - 2 * var(--gutter)), var(--mega-w, var(--wide)));
    border: 1px solid color-mix(in oklab, var(--accent), transparent 55%);
    outline: 1px solid color-mix(in oklab, var(--accent), transparent 82%); outline-offset: -7px;
    box-shadow: 0 34px 70px -24px var(--drop), 0 0 0 1px color-mix(in oklab, black, transparent 72%);
  }
  html body .mega:not(.has-feature):not(.cols-many):not(.is-compact) { --mega-w: calc(var(--cols, 3) * 16rem + 5rem); }
  html body .mega.has-feature:not(.cols-many) { --mega-w: calc(var(--cols, 3) * 15rem + 25rem); }
  html body .mega.cols-many:not(.has-feature) { --mega-w: calc(var(--row-cols, 4) * 15rem + 5rem); }
  html body .mega.cols-many.has-feature { --mega-w: calc(var(--row-cols, 4) * 14rem + 25rem); }
  html body .mega:not(.is-compact) .wrap, html body .mega:not(.is-compact) > .wrap { max-width: none; padding-inline: var(--sp-4); }
  html body .mega:not(.is-compact) .mega-usps .wrap { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); padding-inline: var(--sp-4); }
  html body .mega:not(.is-compact) .mega-close { right: 0.9rem; top: 0.9rem; }
  html body .mega.filigree:not(.is-compact)::before { inset: 9px;
    background: var(--corner-tl) no-repeat left top / 58px 58px, var(--corner-tr) no-repeat right top / 58px 58px, var(--corner-bl) no-repeat left bottom / 58px 58px, var(--corner-br) no-repeat right bottom / 58px 58px; }
  html body .mega:not(.is-compact) > .wrap { padding: calc(var(--sp-4) + 0.6rem) calc(var(--sp-4) + 0.8rem) var(--sp-4); }
  /* an invisible bridge between the menu word and the card, so the panel stays open on the way down */
  html body .has-mega.open:not(.is-compact-parent)::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.7rem; }
}

/* pattern helpers */
.grid-2.tight { gap: var(--sp-4); align-items: start; }
.grid-2.stretch { align-items: stretch; }
.gap-top { margin-top: var(--sp-4); }
.pad { padding: var(--sp-4); }
.arch-frame > .wp-block-image, .arch-frame > figure { margin: 0; }
.arch-frame > .seal { overflow: visible; }
.wp-block-group.arch-frame { position: relative; }
.wp-block-group.grid-2 > .wp-block-group { position: relative; }
.map img { border: 0; padding: 0; background: none; }