/* ============================================================
   CONTACT — universe "papeterie" (the calling card)
   Warm laid paper, sepia ink, gold foil. Private correspondence:
   an engraved calling card with foil sheen, wax seal and postmark.
   Loaded after style-v2.css on /contact/ and /fr/contact/.
   ============================================================ */

/* ---------- Token remap — laid paper + sepia ink ---------- */
.theme-letterpress {
  --paper: oklch(95.8% 0.016 92);
  --paper-raise: oklch(97.6% 0.012 94);
  --paper-sunk: oklch(93% 0.02 90);
  --sepia: oklch(27% 0.022 62);
  --foil: oklch(64% 0.11 82);
  --foil-deep: oklch(52% 0.1 74);
  --foil-bright: oklch(80% 0.12 88);

  --bg: var(--paper);
  --bg-raise: var(--paper-raise);
  --bg-sunk: var(--paper-sunk);
  --ink: var(--sepia);
  --ink-deep: oklch(21% 0.02 58);
  --text: oklch(35% 0.02 68);
  --text-dim: oklch(48% 0.02 70);
  --text-faint: oklch(61% 0.02 72);
  --line: oklch(32% 0.02 66 / 0.16);
  --line-strong: oklch(32% 0.02 66 / 0.3);

  /* the house gold reads as stamped foil in this universe */
  --gold: var(--foil);
  --gold-deep: var(--foil-deep);
  --gold-bright: var(--foil-bright);
  --gold-faint: oklch(70% 0.12 85 / 0.16);
  --gold-line: oklch(58% 0.11 80 / 0.45);

  --shadow-soft: 0 1px 2px oklch(35% 0.02 65 / 0.05), 0 12px 40px -12px oklch(35% 0.02 65 / 0.16);
  --shadow-lift: 0 2px 4px oklch(35% 0.02 65 / 0.06), 0 30px 70px -18px oklch(38% 0.03 62 / 0.3);

  background: var(--bg);
  color: var(--text);
}
.theme-letterpress .lede { color: var(--text-dim); }
.theme-letterpress .lede strong { color: var(--ink); }

/* light world: the floating nav speaks sepia until scrolled */
.theme-letterpress .site-header:not(.is-scrolled) .brand-mark { color: var(--ink); }
.theme-letterpress .site-header:not(.is-scrolled) .brand .brand-name { color: var(--text-dim); }
.theme-letterpress .site-header:not(.is-scrolled) .nav-links a { color: var(--text-dim); }
.theme-letterpress .site-header:not(.is-scrolled) .nav-links a:hover { color: var(--ink); }
.theme-letterpress .site-header:not(.is-scrolled) .nav-links a[aria-current="page"] { color: var(--foil-deep); }
.theme-letterpress .site-header:not(.is-scrolled) .nav-cta {
  border-color: var(--line-strong);
  color: var(--ink) !important;
}
.theme-letterpress .site-header:not(.is-scrolled) .nav-cta:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--foil-bright) !important;
}
.theme-letterpress .site-header:not(.is-scrolled) .nav-lang a {
  border-color: var(--line);
  color: var(--text-faint);
}
.theme-letterpress .site-header:not(.is-scrolled) .nav-toggle span,
.theme-letterpress .site-header:not(.is-scrolled) .nav-toggle span::before,
.theme-letterpress .site-header:not(.is-scrolled) .nav-toggle span::after { background: var(--ink); }
.theme-letterpress .site-header.is-scrolled .nav {
  background: oklch(96.5% 0.014 92 / 0.8);
  border-color: var(--line);
}
@media (max-width: 900px) {
  .theme-letterpress .nav-links { background: oklch(95.8% 0.016 92 / 0.97); }
}

/* ---------- Hero — the letterhead ---------- */
.lh-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: clamp(7.5rem, 7rem + 4vw, 11rem);
  padding-bottom: clamp(3.5rem, 7vh, 6rem);
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(60rem 40rem at 84% 16%, oklch(88% 0.05 88 / 0.55), transparent 60%),
    radial-gradient(46rem 34rem at 4% 98%, oklch(90% 0.035 80 / 0.5), transparent 62%),
    linear-gradient(174deg, var(--paper-raise), var(--paper) 55%, var(--paper-sunk));
}
/* laid-paper chain lines, fading at the edges */
.lh-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(0deg, oklch(40% 0.02 70 / 0.03) 0 1px, transparent 1px 2.6rem);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.lh-atmo {
  position: absolute;
  inset: -10%;
  z-index: -1;
  background: radial-gradient(42rem 28rem at 74% 34%, oklch(84% 0.07 86 / 0.4), transparent 60%);
  animation: atmo-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
.lh-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.lh-title {
  font-size: clamp(2.9rem, 1.6rem + 5.4vw, 5.75rem);
  line-height: 1.05;
  max-width: 12ch;
  color: var(--ink);
}
.lh-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--foil-deep) 12%, var(--foil) 55%, oklch(70% 0.12 86) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lh-title .line {
  display: block;
  overflow: clip;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.lh-title .line > span {
  display: block;
  transform: translateY(112%);
  animation: hero-line 1.1s var(--ease-out) forwards;
  animation-delay: calc(150ms + var(--i, 0) * 140ms);
}
.lh-lede {
  margin-top: clamp(1.6rem, 3vh, 2.4rem);
  max-width: 46ch;
  opacity: 0;
  animation: hero-fade 1.1s var(--ease-out) 750ms forwards;
}
.lh-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.3rem 2rem;
  margin-top: clamp(2rem, 4vh, 2.8rem);
  opacity: 0;
  animation: hero-fade 1.1s var(--ease-out) 950ms forwards;
}

/* ---------- The calling card ---------- */
.cc-stage {
  perspective: 1400px;
  display: grid;
  place-items: center;
}
.cc-float {
  animation: card-float 9s ease-in-out infinite;
  will-change: transform;
}
@keyframes card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.cc-card {
  position: relative;
  width: min(30rem, 100%);
  aspect-ratio: 1.62;
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 2.1rem) clamp(1.5rem, 2.6vw, 2.3rem);
  border-radius: 0.5rem;
  background:
    linear-gradient(155deg, oklch(98.6% 0.008 96), oklch(96.4% 0.014 92) 58%, oklch(94.4% 0.018 90));
  border: 1px solid var(--gold-line);
  box-shadow:
    inset 0 1px 0 oklch(99.5% 0.004 96 / 0.9),
    inset 0 -1px 0 oklch(40% 0.03 70 / 0.08),
    var(--shadow-lift);
  transition: transform 0.45s var(--ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}
/* engraved inner rule — the card's embossed border */
.cc-card::before {
  content: '';
  position: absolute;
  inset: 0.55rem;
  border-radius: 0.3rem;
  border: 1px solid oklch(45% 0.04 74 / 0.28);
  box-shadow: inset 0 1px 0 oklch(99.5% 0.004 96 / 0.7);
  pointer-events: none;
}
/* gold foil sheen sweeping the card */
.cc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    oklch(86% 0.09 90 / 0.35) 46%,
    oklch(96% 0.03 96 / 0.6) 50%,
    oklch(82% 0.1 86 / 0.35) 54%,
    transparent 62%);
  background-size: 280% 100%;
  background-repeat: no-repeat;
  animation: foil-sweep 8.5s var(--ease-soft) infinite;
}
@keyframes foil-sweep {
  0% { background-position: 125% 0; opacity: 0; }
  8% { opacity: 1; }
  42% { background-position: -35% 0; opacity: 1; }
  50%, 100% { background-position: -35% 0; opacity: 0; }
}
.cc-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.cc-mark { height: 1.9rem; width: auto; color: var(--sepia); flex: none; }
.cc-name {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* letterpress double rule */
.cc-rule {
  margin-top: 1rem;
  height: 5px;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}
.cc-lines {
  margin-top: clamp(1.1rem, 3vh, 1.9rem);
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}
/* phone & email set like letterpress lines */
.cc-line {
  font-family: var(--font-display);
  color: var(--ink);
  text-shadow: 0 1px 0 oklch(99.5% 0.004 96 / 0.85);
  opacity: 0;
  transform: translateY(10px);
  filter: blur(3px);
  animation: ink-in 1s var(--ease-out) forwards;
  animation-delay: calc(500ms + var(--i, 0) * 160ms);
  transition: color var(--duration-fast) ease;
}
@keyframes ink-in {
  to { opacity: 1; transform: none; filter: none; }
}
.cc-line--tel { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem); }
.cc-line--tel:hover { color: var(--foil-deep); }
.cc-line--mail {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  color: var(--foil-deep);
  overflow-wrap: anywhere;
}
.cc-line--mail:hover { color: var(--ink); }
.cc-addr {
  margin-top: auto;
  padding-top: 1.3rem;
  padding-right: 4.4rem;
  font-style: normal;
  font-size: 0.82rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  opacity: 0;
  transform: translateY(10px);
  filter: blur(3px);
  animation: ink-in 1s var(--ease-out) forwards;
  animation-delay: calc(500ms + var(--i, 0) * 160ms);
}
/* postmark, stamped a touch off-true */
.cc-post {
  position: absolute;
  top: 0.95rem;
  right: 1.05rem;
  width: 4.3rem;
  height: 4.3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1.5px dashed oklch(35% 0.02 66 / 0.4);
  color: oklch(38% 0.02 66 / 0.55);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  transform: rotate(9deg);
  pointer-events: none;
}
.cc-post::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid oklch(35% 0.02 66 / 0.3);
}
/* wax seal echoing the advisory dossier */
.cc-seal {
  position: absolute;
  right: clamp(0.9rem, 2vw, 1.6rem);
  bottom: -1.5rem;
  width: clamp(4.2rem, 7vw, 5.2rem);
  border-radius: 50%;
  animation: cc-seal-glow 6s ease-in-out infinite;
}
@keyframes cc-seal-glow {
  0%, 100% { box-shadow: 0 8px 22px -6px oklch(45% 0.08 68 / 0.5); transform: rotate(-4deg); }
  50% { box-shadow: 0 10px 34px -6px oklch(50% 0.09 72 / 0.65); transform: rotate(-1deg); }
}
.cc-seal svg { display: block; width: 100%; height: auto; }
.seal-mono {
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 0.08em;
  fill: oklch(92% 0.04 85);
}

/* ---------- Correspondence — the house's directory ---------- */
.corr {
  background: linear-gradient(180deg, var(--paper-sunk), var(--paper) 30%);
}
.corr h2 {
  color: var(--ink);
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.corr-list {
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
.corr-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
  transition: background var(--duration-fast) ease, padding-left var(--duration) var(--ease-out);
}
.corr-row:hover {
  background: oklch(99% 0.005 95 / 0.5);
  padding-left: 0.8rem;
}
.corr-row h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  color: var(--ink);
}
.corr-detail { display: grid; gap: 0.35rem; justify-items: start; }
.corr-detail > a {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--foil-deep);
  transition: color var(--duration-fast) ease;
}
.corr-detail > a:hover { color: var(--ink); }
.corr-sub {
  font-size: var(--text-sm);
  color: var(--text-dim);
}
.corr-sub a {
  color: var(--text);
  border-bottom: 1px solid var(--gold-line);
  transition: color var(--duration-fast) ease;
}
.corr-sub a:hover { color: var(--foil-deep); }

/* ---------- Coordinates — postmarked pull quote ---------- */
.lh-quote-section {
  position: relative;
  isolation: isolate;
  overflow: clip;
  text-align: center;
}
/* the great postmark, faded into the paper */
.lh-quote-section::before,
.lh-quote-section::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
.lh-quote-section::before {
  width: min(34rem, 82vw);
  aspect-ratio: 1;
  border: 1.5px dashed oklch(40% 0.02 66 / 0.16);
}
.lh-quote-section::after {
  width: min(30.5rem, 74vw);
  aspect-ratio: 1;
  border: 1px solid oklch(40% 0.02 66 / 0.12);
}
.lh-quote-frame {
  display: grid;
  justify-items: center;
  gap: clamp(1.8rem, 3vw, 2.6rem);
}
.lh-quote {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.5rem);
  line-height: 1.25;
  max-width: 24ch;
  text-wrap: balance;
  color: var(--ink);
}
.lh-quote em { font-style: normal; color: var(--foil-deep); }
.lh-rule {
  position: relative;
  width: min(26rem, 70%);
  height: 5px;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}
.lh-rule i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--foil);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 10px oklch(70% 0.11 82 / 0.5);
}

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .lh-hero-inner { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 4rem); }
  .cc-card { margin-inline: auto; }
}
@media (max-width: 640px) {
  .lh-title { font-size: clamp(2.3rem, 10vw, 2.9rem); }
  .corr-row { grid-template-columns: 1fr; gap: 0.4rem; }
  .cc-card { aspect-ratio: auto; min-height: 21rem; }
  .cc-seal { width: 4rem; bottom: -1.3rem; }
  .cc-post { width: 3.8rem; height: 3.8rem; font-size: 0.5rem; }
}

/* ---------- QA mode (?qa=1 — screenshot testing) ---------- */
.qa .lh-hero { min-height: 0; }
.qa .lh-title .line > span { transform: none; animation: none; }
.qa .lh-lede, .qa .lh-actions { opacity: 1; animation: none; }
.qa .lh-atmo, .qa .cc-float, .qa .cc-seal { animation: none; }
.qa .cc-card { transform: none !important; transition: none; }
.qa .cc-card::after { animation: none; opacity: 0.55; background-position: 30% 0; }
.qa .cc-line, .qa .cc-addr { opacity: 1; transform: none; filter: none; animation: none; }
.qa .cc-seal { box-shadow: 0 8px 26px -6px oklch(48% 0.085 70 / 0.6); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .lh-atmo, .cc-float, .cc-seal { animation: none; }
  .cc-card { transition: none; }
  .cc-card::after { animation: none; opacity: 0.4; background-position: 30% 0; }
  .lh-title .line > span { transform: none; animation: none; }
  .lh-lede, .lh-actions { opacity: 1; animation: none; }
  .cc-line, .cc-addr { opacity: 1; transform: none; filter: none; animation: none; }
}