/* Metapattern Institute: Flowershow migration stylesheet.
   Written independently for this migration. Values match the measured appearance of the
   original GoDaddy site (see ../../reference/*.json); no GoDaddy CSS is reused. */

@import url("fonts.css");

:root {
  --black: #000;
  --bar: rgb(22, 22, 22);
  --bar-sticky: rgb(14, 14, 14);   /* solid once scrolled: content never shows through the bar */
  --nav-text: rgb(247, 247, 247);
  --heading: #ece6dc;            /* warm white */
  --body: rgb(196, 192, 186);    /* softer white body text (was rgb(145,145,145)); 12:1 on black */
  --footer: rgb(150, 150, 150);
  --field: rgb(171, 171, 171);
  --rule: rgba(255, 255, 255, 0.3);
  --footer-rule: rgb(27, 27, 27);
  --error: rgb(242, 86, 86);
  --sans: "Source Sans Pro", arial, sans-serif;
  --serif: Cinzel, Georgia, serif;
  --gutter: 24px;
  --section-pad: 40px;
  --nav-h: 88px;
}
@media (min-width: 768px) { :root { --section-pad: 56px; } }
@media (min-width: 1024px) { :root { --nav-h: 77px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--black); color: var(--body); font: 16px/24px var(--sans); }
@media (min-width: 1536px) { body { font-size: 18px; line-height: 27px; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
p.gap { margin-top: 24px; }
@media (min-width: 1536px) { p.gap { margin-top: 27px; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 10010; padding: 8px 12px; background: #fff; color: #000; }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Header and navigation ---------- */
/* One navigation system on every page: the bar sits over the Montréal film at the top of the page
   (the hero / page header reserves --nav-h of top padding, so it never covers a title) and becomes a
   fixed, solid dark bar once scrolled. Being absolutely positioned, fixing it causes no layout jump. */
.site-header { position: absolute; left: 0; right: 0; top: 0; z-index: 10000; }
.nav-anchor { height: 0; }
.nav-wrap { height: var(--nav-h); }
.nav-bar { position: relative; height: var(--nav-h); background: transparent; transition: background .3s; }
.nav-bar.is-stuck { position: fixed; left: 0; right: 0; top: 0; background: var(--bar-sticky); box-shadow: 0 1px 0 rgba(205, 176, 106, .18); }
.nav-rule { position: absolute; left: 48px; right: 48px; bottom: 0; margin: 0; border: 0; border-bottom: 1px solid var(--rule); }
.nav-bar.is-stuck .nav-rule { opacity: 0; }
.site-nav { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.site-nav li { display: inline-block; line-height: 24px; }
.site-nav li + li { padding-left: 32px; }
.site-nav a {
  display: block; margin: -6px 0; padding: 6px; color: var(--nav-text); text-decoration: none;
  font-size: 14px; letter-spacing: 0.071em; text-transform: uppercase;
}
.site-nav li:first-child a { margin-left: -6px; }
/* Reserve each link's bold width so the centred menu never shifts between pages. */
.site-nav a::after { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; }
.site-nav a:hover { opacity: .6; }
.site-nav a[aria-current="page"] { font-weight: 700; box-shadow: inset 0 -1px 0 var(--accent); }
@media (min-width: 1536px) { .site-nav a { font-size: 16px; } }
.menu-button {
  position: absolute; right: 24px; top: 24px; width: 40px; height: 40px; padding: 6px; margin: 0;
  border: 0; background: none; color: var(--nav-text); cursor: pointer;
}
.menu-button svg { display: block; width: 28px; height: 28px; }
/* Hummingbird mark at the far left of the bar (aligned with the start of the rule), as on
   erikhaines.org; the links stay centred. On phones the menu button moves to the right. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.nav-inner { display: flex; align-items: center; justify-content: center; height: var(--nav-h); }
.brand { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); display: block; }
.brand img { width: 39px; height: 45px; }
.brand:hover { opacity: .85; }
@media (min-width: 1024px) {
  .menu-button { display: none; }
  .brand { left: 48px; }
  .brand img { width: 45px; height: 52px; }
  .site-nav { display: flex; justify-content: center; padding-top: 5px; } /* keeps the link baseline where the original Home menu had it */
}
.nav-rule { display: block; }

/* Language switch "EN | FR" (bilingual site, 20 Oct 2026): a quiet control at the right end of the bar, in the
   menu's type and the gold of the header panels. The current language is bold with a fine gold underline (as
   the current menu item); the other is a link to the same page in that language. 44px touch targets. On
   phones and tablets it sits just left of the menu button, so it is always one tap away and never inside the
   drawer; from 1024px its text ends where the bar's rule ends. No flags. */
.lang-switch { position: absolute; right: 66px; top: 50%; z-index: 1; transform: translateY(-50%); }
.lang-switch ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.lang-switch li { display: flex; align-items: center; }
.lang-switch li + li::before { content: ""; width: 1px; height: 14px; background: var(--accent); opacity: .7; }
.lang-switch a, .lang-current {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px;
  color: var(--nav-text); font-size: 13px; line-height: 1; letter-spacing: .1em; text-decoration: none;
}
.lang-switch a:hover { opacity: .6; }
.lang-current { font-weight: 700; }
.lang-current > span[aria-hidden] { text-decoration: underline 1px var(--accent); text-underline-offset: 6px; }
@media (min-width: 1024px) { .lang-switch { right: 38px; top: calc(50% - .5px); } } /* on the menu's text line */
@media (min-width: 1536px) { .lang-switch a, .lang-current { font-size: 15px; } }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 10002; padding: 56px 24px 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bar); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2);
  transform: translateX(-249vw); visibility: hidden; transition: transform .3s ease-in-out, visibility 0s .3s;
}
.drawer.is-open { transform: none; visibility: visible; transition: transform .3s ease-in-out; }
.drawer ul { list-style: none; margin: 0 0 24px; padding: 0; }
.drawer a { display: block; padding: 16px 4px 16px 24px; color: var(--nav-text); font-size: 22px; line-height: 28px; text-decoration: none; }
.drawer a[aria-current="page"] { font-weight: 700; border-left: 2px solid var(--accent); padding-left: 22px; }
.drawer-close {
  position: absolute; top: 15px; right: 15px; width: 40px; height: 40px; padding: 6px; border: 0; background: none;
  color: var(--nav-text); cursor: pointer;
}
.drawer-close svg { display: block; width: 28px; height: 28px; }
body.drawer-open { overflow: hidden; }

/* ---------- Home hero ---------- */
.hero {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 500px; padding: var(--nav-h) var(--gutter) 0; text-align: center;
  background-color: var(--bar); background-size: auto, cover; /* image + focus point: per-page <style> */
}
@media (min-width: 1024px) { .hero { height: 85vh; min-height: 500px; } }
.hero h1 {
  margin: 0; max-width: 100%; color: #fff; font: 400 40px/1.2 var(--serif); letter-spacing: normal; overflow-wrap: break-word;
}
@media (min-width: 768px) { .hero h1 { font-size: 48px; } }
@media (min-width: 1024px) { .hero h1 { font-size: 62px; } }
@media (min-width: 1536px) { .hero h1 { font-size: 70px; } }
/* Home title accent (Director, 20 Oct 2026): a fine gold underline the width of the title, brightest at
   the centre and fading out at both ends. 1px on smaller screens; from 1024px a 2px line drawn at softer
   intensity, slightly heavier than a hairline without looking bold. Decorative only. */
.hero h1::after {
  content: ""; display: block; height: 1px; margin: 4px auto 0;
  background: linear-gradient(90deg, rgba(205, 176, 106, 0), rgba(205, 176, 106, .85) 22%, rgba(236, 212, 147, .95) 50%, rgba(205, 176, 106, .85) 78%, rgba(205, 176, 106, 0));
}
@media (min-width: 1024px) {
  .hero h1::after {
    height: 2px; margin-top: 6px;
    background: linear-gradient(90deg, rgba(205, 176, 106, 0), rgba(205, 176, 106, .6) 22%, rgba(236, 212, 147, .72) 50%, rgba(205, 176, 106, .6) 78%, rgba(205, 176, 106, 0));
  }
}

/* Optional hero film (see assets/js/hero-video.js): sits under the overlay and the title. */
[data-video-desktop] { overflow: hidden; }
.hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: opacity 1.5s ease-in-out; }
.hero-film.is-next { opacity: 0; }
[data-video-desktop]::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, var(--film-shade, .25)); pointer-events: none; }
.hero[data-video-desktop] h1 { position: relative; z-index: 2; }

/* ---------- Interior page header: shorter band of the same Montréal film ---------- */
.page-header {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 340px; padding: var(--nav-h) var(--gutter) 0;
  background-color: var(--bar); background-size: cover; background-position: 50% 20%; /* poster: per-page <style> */
}
/* On wide screens the short header shows only a horizontal band of the 16:9 film; framing it near the top
   keeps the sky and skyline in view, as in the Home hero (Director, 20 Oct 2026). Phones, where the film
   is cropped at the sides instead, are unaffected. */
.page-header .hero-film { object-position: 50% 20%; }
@media (min-width: 768px) { .page-header { height: 380px; } }
@media (min-width: 1024px) { .page-header { height: 46vh; min-height: 400px; max-height: 500px; } }
/* Fade the film into the black page below. */
.page-header::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; z-index: 2; background: linear-gradient(transparent, #000); pointer-events: none; }
.page-panel {
  position: relative; z-index: 3; max-width: 100%; padding: 18px 26px;
  background: rgba(8, 8, 8, .62); border: 1px solid rgba(205, 176, 106, .35); border-radius: 4px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
/* Stacked and centred: page name, then its icon underneath. */
.page-title { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; color: var(--ink); font: 400 27px/1.15 var(--serif); text-align: center; }
.page-icon { display: inline-flex; color: var(--accent); margin-top: 4px; }
.page-icon svg { display: block; width: 30px; height: 30px; }
.page-name { overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .page-panel { padding: 26px 52px 22px; }
  .page-title { gap: 12px; font-size: 38px; }
  .page-icon svg { width: 34px; height: 34px; }
}
@media (min-width: 1024px) { .page-title { font-size: 44px; } }

/* ---------- Content ---------- */
.section { padding: var(--section-pad) 0; }
.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 725px; margin: 0 auto; }
@media (min-width: 768px) and (max-width: 1023px) { .measure { max-width: 592px; } }
.prose h2 { margin: 0 0 24px; color: var(--heading); font: 400 22px/1.25 var(--sans); }
.prose strong { color: var(--heading); }
.interior .prose a:not(.btn-ghost) { color: var(--heading); text-decoration-color: var(--accent); text-underline-offset: 3px; }
@media (min-width: 1536px) { .prose h2 { font-size: 24px; } }
.prose * + h2 { margin-top: 32px; }
.prose strong { font-weight: 700; }
.home-quote { text-align: center; }
/* French Home: the quotation is a free translation, and a small note under the attribution says so. */
.home-quote .quote-note { margin-top: 10px; color: var(--footer); font-size: 13px; line-height: 18px; font-style: italic; }
/* About: the text sits in one raised panel with the same fill and contour as the Theory cards. */
.text-panel { padding: 26px 22px 30px; border: 1px solid var(--card-line); border-radius: 4px; background: #0b0b0b; }
.text-panel > :first-child, .text-panel > p.gap:first-child { margin-top: 0; }
/* Section marker above a heading (About: "Profile" above Founder & Director): a smaller companion to
   the page-header panel, with the same fill, gold contour and radius, the serif label and the gold
   icon centred underneath. Only the panel is centred; the heading below stays left-aligned. */
.section-panel {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: fit-content; max-width: 100%;
  margin: 44px auto 24px; padding: 12px 26px 11px;
  background: rgba(8, 8, 8, .62); border: 1px solid rgba(205, 176, 106, .35); border-radius: 4px;
}
.section-name { color: var(--ink); font: 400 18px/1.15 var(--serif); }
.section-icon { display: inline-flex; color: var(--accent); }
.section-icon svg { display: block; width: 22px; height: 22px; }
.prose .section-panel + h2 { margin-top: 0; }
@media (min-width: 768px) {
  .section-panel { gap: 9px; margin-top: 52px; padding: 14px 36px 13px; }
  .section-name { font-size: 21px; }
  .section-icon svg { width: 24px; height: 24px; }
}

/* Text above and below accordion cards (Philosophy introduction; Services introduction and closing).
   From tablet width up it shares the reading column of the open card panels: the same left edge
   (--axis-text-inset + the panel's 1px border), measure and type size, so the page reads as one column
   from the introduction into each panel. */
.philosophy-intro p, .reading-column p, .axis-panel-body p { max-width: 74ch; text-wrap: pretty; }
.philosophy-intro p, .reading-column p { color: var(--body); }
@media (min-width: 768px) {
  .philosophy-intro.measure, .reading-column.measure { max-width: 940px; padding: 0 calc(var(--axis-text-inset-r) + 1px) 0 calc(var(--axis-text-inset) + 1px); }
  .philosophy-intro p, .reading-column p { font-size: 17px; line-height: 27px; }
}
/* Services closing section: a heading in the style of the About headings, left-aligned paragraphs and
   one centred link to Contact in the site's outline-button style. */
.services-closing { margin-top: var(--section-pad); }
.services-closing h2 { margin-bottom: 16px; }
.reading-column p.services-action { margin-top: 8px; text-align: center; }
@media (min-width: 768px) { .text-panel.measure { max-width: 680px; padding: 34px 44px 40px; } }
@media (min-width: 1024px) { .text-panel.measure { max-width: 820px; padding: 40px 52px 46px; } }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; max-width: 100%;
  margin-top: 24px; padding: 8px 18px; border: 1px solid var(--accent-line); border-radius: 4px; background: transparent;
  color: var(--ink); font: 700 14px/normal var(--sans); letter-spacing: 0.071em; text-transform: uppercase; text-decoration: none;
  transition: border-color .25s ease, background-color .25s ease;
}
/* Gold rules either side of the label, as in the cards and header panels. */
.btn-ghost::before, .btn-ghost::after { content: ""; display: block; width: 18px; border-top: 1px solid var(--accent); }
.btn-ghost::before { margin-right: 10px; }
.btn-ghost::after { margin-left: 10px; }
.btn-ghost:hover { border-color: var(--accent); background: var(--accent-wash); }

/* Erik Haines's links (About): a small box centred under the biography (same fill and gold contour as
   the header panels) with the serif label "Follow On" above Substack, website and GitHub as gold icons
   in one row. Each 48px target keeps its gold circle, which lights up on hover, keyboard focus and click. */
.social-box {
  display: flex; flex-direction: column; align-items: center; gap: 8px; width: fit-content; max-width: 100%;
  margin: 40px auto 0; padding: 12px 16px 14px;
  background: rgba(8, 8, 8, .62); border: 1px solid rgba(205, 176, 106, .35); border-radius: 4px;
}
.social-label { color: var(--ink); font: 400 15px/1.15 var(--serif); }
.social-links { display: flex; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .social-box { gap: 10px; padding: 14px 24px 16px; }
  .social-label { font-size: 17px; }
  .social-links { gap: 18px; }
}
.social-links a {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border: 1px solid var(--accent-line); border-radius: 50%; color: var(--accent);
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.social-links a:hover, .social-links a:focus-visible { border-color: var(--accent); background: rgba(205, 176, 106, .12); box-shadow: 0 0 10px rgba(205, 176, 106, .3); }
.social-links a:active { border-color: var(--accent); background: rgba(205, 176, 106, .22); box-shadow: 0 0 14px rgba(205, 176, 106, .45); transition-duration: .05s; }
.social-links svg { display: block; width: 22px; height: 22px; stroke-width: 1.9; }
.social-links a:focus-visible { outline-color: var(--accent); }

/* Theory [+] Praxis axes */
.axes { display: grid; gap: 48px; padding-bottom: 24px; }
@media (min-width: 768px) { .axes { padding-bottom: 0; } }
.axis { display: grid; gap: 24px; }
.axis-media { align-self: start; }   /* image cell top-aligned, text cell centred (as on GoDaddy) */
.axis-text { align-self: center; }
@media (min-width: 1024px) { .axis-media { align-self: center; } }
.axis img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.axis h2 { margin-bottom: 16px; }
@media (min-width: 768px) {
  .axis { grid-template-columns: 1fr 1fr; gap: 48px; }
  .axis h2 { margin-bottom: 24px; }
  .axis:nth-child(even) .axis-media { order: 2; }
}

/* ---------- Theory [+] Praxis: six-axis cards (assets/js/axes.js) ----------
   One column at every width: each card is a single row (number, icon, title, chevron) and its panel
   opens directly beneath it; the other cards stay visible and dim slightly. */
/* Gold sampled from Erik's hummingbird logo (mid tone rgb(181,156,88), highlight rgb(236,212,147)). */
:root { --accent: #cdb06a; --accent-line: rgba(205, 176, 106, .55); --accent-wash: rgba(205, 176, 106, .07); --ink: #ece6dc; --card-line: rgba(255, 255, 255, .13); }
.axis-grid { display: grid; grid-template-columns: 1fr; max-width: 940px; margin: 0 auto; }
.theory-intro + .axis-grid, .services-intro + .axis-grid { margin-top: var(--section-pad); }
/* A card reached by its URL fragment (Services) stops below the fixed navigation bar. */
.axis-card { scroll-margin-top: calc(var(--nav-h) + 12px); }
/* Insets of the axis panel text. The left one aligns it with the card title (padding + number + gap +
   icon + gap); the Philosophy introduction uses both, so it shares the panels' reading column. */
@media (min-width: 768px) { :root { --axis-text-inset: 146px; --axis-text-inset-r: 30px; } }
@media (min-width: 1024px) { :root { --axis-text-inset: 154px; --axis-text-inset-r: 40px; } }
.axis-card { margin: 0 0 12px; font: inherit; }
.axis-toggle {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; width: 100%;
  padding: 18px 18px; border: 1px solid var(--card-line); border-radius: 4px; background: #0b0b0b;
  color: var(--ink); font: 400 18px/1.3 var(--sans); text-align: left; cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease, opacity .25s ease;
}
.axis-toggle:hover { border-color: var(--accent-line); }
.axis-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.axis-num { color: var(--accent); font-size: 13px; letter-spacing: .12em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.axis-icon { color: var(--accent); display: inline-flex; }
.axis-icon svg { display: block; width: 26px; height: 26px; }
.axis-title { color: var(--ink); }
.axis-plus { color: var(--accent); white-space: nowrap; }
.axis-chevron { width: 9px; height: 9px; margin-right: 4px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s ease; }
.axis-card.is-active .axis-toggle { border-color: var(--accent-line); border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: var(--accent-wash); }
.axis-card.is-active .axis-chevron { transform: rotate(-135deg) translate(-2px, -2px); }
.axis-grid.has-open .axis-card:not(.is-active) .axis-toggle { opacity: .5; }
.axis-grid.has-open .axis-card:not(.is-active) .axis-toggle:hover,
.axis-grid.has-open .axis-card:not(.is-active) .axis-toggle:focus-visible { opacity: .85; }
/* Services: the other cards recede only slightly, so they stay readable and clearly clickable. */
.service-grid.has-open .axis-card:not(.is-active) .axis-toggle { opacity: .75; }
.service-grid.has-open .axis-card:not(.is-active) .axis-toggle:hover,
.service-grid.has-open .axis-card:not(.is-active) .axis-toggle:focus-visible { opacity: 1; }

.axis-panel { display: grid; grid-template-rows: 1fr; position: relative; scroll-margin-top: 100px; scroll-margin-bottom: 24px; }
.js .axis-panel { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s ease, opacity .3s ease; }
.js .axis-panel.is-open { grid-template-rows: 1fr; opacity: 1; }
.axis-panel-clip { min-height: 0; overflow: hidden; }
.axis-card.is-active { margin-bottom: 0; }
.axis-panel-body { margin: 0 0 12px; padding: 22px 20px 24px; border: 1px solid var(--accent-line); border-top: 0; border-radius: 0 0 4px 4px; background: var(--accent-wash); color: var(--body); }
.axis-panel-body strong { color: var(--ink); }

@media (min-width: 768px) {
  .axis-card { margin-bottom: 16px; }
  .axis-toggle { gap: 22px; padding: 24px 30px; font-size: 21px; }
  .axis-num { min-width: 2.6em; font-size: 14px; }
  .axis-icon svg { width: 32px; height: 32px; }
  .axis-card.is-active { margin-bottom: 0; }
  .axis-panel-body { margin: 0 0 16px; padding: 28px var(--axis-text-inset-r) 30px var(--axis-text-inset); }
  .axis-panel-body p { font-size: 17px; line-height: 27px; }
}
@media (min-width: 1024px) {
  .axis-toggle { padding: 28px 34px; font-size: 24px; }
  .axis-card .axis-title { white-space: nowrap; }
  .service-grid .axis-card .axis-title { white-space: normal; } /* longer service titles may wrap */
  :lang(fr) .axis-card .axis-title { white-space: normal; } /* French titles run longer: wrap rather than overflow */
  .axis-icon svg { width: 36px; height: 36px; }
  .axis-chevron { width: 11px; height: 11px; }
  .axis-panel-body { padding: 30px var(--axis-text-inset-r) 34px var(--axis-text-inset); }
}
/* ---------- Footer ---------- */
.site-footer { padding: var(--section-pad) 0; text-align: center; color: var(--footer); font-size: 14px; line-height: 21px; }
.site-footer .spacer { height: 21px; }
.site-footer hr { width: 50px; margin: 24px auto; border: 0; border-bottom: 1px solid var(--footer-rule); }
@media (min-width: 1536px) { .site-footer { font-size: 16px; line-height: 24px; } .site-footer .spacer { height: 24px; } }

/* ---------- Email confidentiality notice (confidentialite.html) ----------
   A compact reading page under the navigation bar (no film): the About text panel, a serif bilingual title,
   then the French and English notices, each under its own heading. */
.notice main { padding-top: var(--nav-h); }
.notice-kicker { margin: 0 0 10px; color: var(--accent); font-size: 13px; line-height: 18px; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.notice-title { margin: 0; color: var(--ink); font: 400 26px/1.25 var(--serif); text-align: center; }
.notice-sep { color: var(--accent); }
@media (min-width: 768px) { .notice-title { font-size: 32px; } }
.notice-block { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--card-line); }
.prose .notice-block h2 { margin: 0 0 14px; }
.notice-scope { margin-top: 14px; color: var(--footer); font-size: 14px; line-height: 21px; }

/* ---------- Contact form ---------- */
/* One introductory sentence above the form (20 Oct 2026): plain body text, centred like the form beneath it. */
.contact-intro { margin: 0 auto 36px; max-width: 60ch; color: var(--body); text-align: center; text-wrap: pretty; }
.contact-form { text-align: center; }
.contact-form h2 { margin: 0 0 24px; color: var(--heading); font: 400 22px/1.25 var(--sans); }
.field { position: relative; margin-bottom: 24px; text-align: left; }
.field input, .field textarea {
  display: block; width: 100%; margin: 0; border: 1px solid rgba(255, 255, 255, .45); border-radius: 4px; background: #0b0b0b;
  color: var(--field); font: 16px var(--sans); -webkit-appearance: none; appearance: none;
}
.field input { height: 52px; padding: 23px 16px 7px; line-height: 20px; }
.field textarea { min-height: 202px; padding: 16px; line-height: 28px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.field textarea::placeholder { color: inherit; opacity: 1; }
.field label.float {
  position: absolute; left: 16px; top: 33%; color: var(--field); font-size: 16px; line-height: 20px;
  pointer-events: none; transition: all .15s ease;
}
.field input:focus + label.float, .field input:not(:placeholder-shown) + label.float { top: 8px; font-size: 12px; line-height: 15px; color: #fff; }
.field .error { margin: 6px 0 0; color: var(--error); font-size: 14px; line-height: 20px; }
.field [aria-invalid="true"] { border-color: var(--error); }
.field [aria-invalid="true"]:focus { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.verification { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 0; min-height: 0; }
.verification:empty { display: none; }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; max-width: 100%;
  margin-top: 4px; padding: 8px 40px; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent-wash); color: var(--ink);
  font: 700 14px/normal var(--sans); letter-spacing: 0.071em; text-transform: uppercase; cursor: pointer;
  transition: background-color .25s ease;
}
.btn-primary:hover { background: rgba(205, 176, 106, .16); }
.btn-primary:active { background: rgba(205, 176, 106, .24); }
.btn-primary[disabled] { opacity: .6; cursor: progress; }
@media (min-width: 768px) { .btn-primary { width: auto; } }
.form-status { margin: 16px 0 0; font-size: 14px; line-height: 20px; color: var(--heading); }
.form-status[data-kind="error"] { color: var(--error); }
.form-status:empty { display: none; }
.form-note { margin: 32px 0 0; font-size: 12px; line-height: 18px; color: var(--footer); }
.form-note a { color: #fff; text-decoration: none; }
.form-success h2 { margin: 0; color: var(--heading); font: 400 22px/1.25 var(--sans); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }