/* ============================================================
   Erisse — clean rebuild of the published site (home page)
   Rebuilt from the rendered output of www.erisse.eu.
   Breakpoint: ≤809px = mobile variant, ≥810px = desktop.
   ============================================================ */

:root {
  --bg: rgb(22, 16, 12);            /* page background        */
  --cream: rgb(248, 244, 238);      /* primary text / buttons */
  --ink: rgb(21, 9, 9);             /* text on cream buttons  */
  --pill-bg: rgb(77, 66, 51);       /* tag pill background    */
  --pill-fg: rgb(242, 218, 178);    /* tag pill text          */

  --serif-light: "Reckless Neue TRIAL:Light", sans-serif;
  --serif-regular: "Reckless Neue TRIAL:Regular", sans-serif;
  --serif-medium: "Reckless Neue TRIAL:Medium", sans-serif;
  --serif-italic: "Reckless Neue TRIAL:Regular Italic", sans-serif;
  --serif-light-italic: "Reckless Neue TRIAL:Light Italic", sans-serif;
  --sans-bold: "Test Pitch Sans:Bold", sans-serif;

  --section-gap: 167px;
}

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

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--serif-regular);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-gap);
  overflow: clip;
  background: var(--bg);
}

/* The published site renders content inside transformed wrappers, which puts
   text on transparent composited layers and switches Chromium to grayscale
   antialiasing. Apply the same to our text containers so glyphs rasterize
   identically. */
.hero-copy, .nav-menu, .nav-actions, .ring-card, .quote-inner, .sec-head,
.manu-copy, .card-label, .card .btn, .footer-cta-copy, .footer-main, .showcase-inner {
  /* translateZ forces a real compositing layer -> grayscale AA, matching the
     published render (the identity translate(0,0) folds away on headless
     Linux and glyphs keep subpixel AA -> colored fringes; the legal and
     manufacturing rebuilds proved translateZ is the reliable lever) */
  transform: translateZ(0);
}

/* responsive variant toggles — hide the other breakpoint's variant,
   never force a display value (elements keep their own display type) */
@media (min-width: 810px) {
  .m-only { display: none !important; }
}
@media (max-width: 809px) {
  .d-only { display: none !important; }
  :root { --section-gap: 91px; }
}

/* ---------- ornament strip behind the page ---------- */
.ornament {
  position: absolute;
  top: 462px;
  left: 50%;
  width: 1452px;
  transform: translateX(-726px);
  z-index: 0;
  pointer-events: none;
}
.ornament img { width: 100%; height: 10824px; }
@media (max-width: 809px) {
  .ornament { top: -40px; width: 375px; transform: translateX(-187.5px); overflow: visible; }
  .ornament img { width: 668px; height: 5939px; margin-left: -146.5px; }
}

/* ---------- shared type ---------- */
.h-32 { font-family: var(--serif-regular); font-size: 32px; line-height: 1.2; font-weight: 400; }
.h-24 { font-family: var(--serif-regular); font-size: 24px; line-height: 1.2; font-weight: 400; }
.sec-sub { font-family: var(--serif-light); font-size: 20px; line-height: 1.2; }
@media (max-width: 809px) {
  .h-32 { font-size: 24px; }
  .sec-sub { font-size: 18px; }
}

/* section header block (heading + sub): full-width, left-aligned text */
.sec-head {
  display: flex; flex-direction: column; gap: 32px; align-items: flex-start;
  width: 100%;
}
.sec-head > * { width: 100%; }
.sec-head-left { gap: 24px; }
@media (max-width: 809px) {
  .sec-head { align-items: flex-start; text-align: left; gap: 40px; }
  .sec-head-left { gap: 32px; }
}

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; justify-content: center; align-items: center;
  font-family: var(--sans-bold);
  font-size: 16px; line-height: 24px; font-weight: 400;
  text-transform: uppercase;
  padding: 6px 20px;
  white-space: nowrap;
}
.btn-solid { background: var(--cream); color: var(--ink); }
.btn-ghost { color: var(--cream); }
/* the 1px frame sitting 1px outside the button */
.btn-frame::before {
  content: ""; position: absolute; inset: -1px;
  border: 1px solid var(--cream);
  pointer-events: none;
}
.btn-sm { line-height: 22.4px; padding: 5px 20px; color: rgb(22, 14, 9); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; width: 100%; height: 922px; z-index: 1; }
.hero-bg, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bg img { object-fit: cover; }
.scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.scrim-20 { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); }

.hero-content {
  position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 0;
}
.hero-frame {
  width: min(1128px, 100%);
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero-frame > .site-nav { width: 100%; }

/* --- navigation --- */
.site-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 30px 10px;
  margin-bottom: 167px;
}
.nav-logo img { width: 108px; height: 24px; }
.nav-menu {
  list-style: none;
  /* live update 19 Jul 2026: "deco languages" -> "decorative languages" and the
     menu gap tightened 25px -> 11px (menu keeps its centre, span 564px) */
  display: flex; gap: 11px; justify-content: center; align-items: center;
}
.nav-menu a {
  font-family: var(--sans-bold); font-size: 16px; line-height: 22.4px;
  text-transform: uppercase; color: var(--cream);
}
.nav-actions { display: flex; gap: 16px; justify-content: flex-end; align-items: center; padding-left: 15px; }
.lang-btn {
  display: flex; gap: 2px; justify-content: center; align-items: center;
  width: 44px; height: 34px;
  border: 1px solid var(--cream);
  color: var(--cream);
  font-family: var(--sans-bold); font-size: 12px; line-height: 16.8px; text-transform: uppercase;
}
.lang-btn .chevron { flex-shrink: 0; transition: transform 0.2s; }
.lang-menu { position: relative; }
.lang-menu.open .lang-btn .chevron { transform: rotate(180deg); }
.lang-panel {
  position: absolute; top: 100%; left: 0; z-index: 50;
  box-sizing: border-box; width: 44px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--cream); border-top: 0;
}
.lang-item {
  display: flex; align-items: center; justify-content: flex-start;
  width: 100%; height: 34px; padding: 0 11px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--cream);
  font-family: var(--sans-bold); font-size: 12px; text-transform: uppercase;
  transition: background 0.15s;
}
.lang-item:hover { background: rgba(248, 244, 238, 0.1); }
.nav-inquire { padding: 6px 12px; }
.menu-btn { width: 42px; height: 34px; padding: 8px; }

/* --- mobile menu overlay --- */
.mobile-menu-backdrop {
  position: fixed; inset: 0; z-index: 40;
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  display: none;
}
.mobile-menu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgb(205, 181, 141);
  display: none;
  flex-direction: column; align-items: center;
  padding: 76px 0 50px;
  gap: 48px;
}
.mobile-menu.open, .mobile-menu-backdrop.open { display: flex; }
.mobile-menu a {
  font-family: var(--sans-bold); font-size: 16px; line-height: 22.4px;
  letter-spacing: 1px; color: rgb(248, 244, 238);
}
.mobile-menu .menu-contact {
  background: var(--cream); color: rgb(21, 9, 9);
  border-radius: 8px;
  padding: 12px 44px;
}
.mobile-menu .menu-close {
  position: absolute; top: 36px; right: 44px;
  color: rgb(248, 244, 238);
}

/* --- hero copy --- */
.hero-copy {
  display: flex; flex-direction: column; gap: 32px;
  width: 709px; max-width: 100%;
  padding: 0 10px;
}
.hero-title-1 { font-family: var(--serif-light); font-size: 64px; line-height: 64px; }
.hero-title-2 { font-family: var(--serif-regular); font-size: 48px; line-height: 57.6px; white-space: pre-wrap; }
.hero-title-2 .ghost { font-family: var(--serif-light); font-size: 64px; line-height: 64px; }
.hero-lede { font-family: var(--serif-light); font-size: 24px; line-height: 28.8px; max-width: 689px; }
.hero-cta { display: flex; gap: 24px; align-items: center; }

@media (max-width: 809px) {
  .hero { height: 800px; }
  .hero-content { padding: 40px 25px; }
  .site-nav { padding: 30px 0; margin-bottom: 160px; }
  .nav-logo img { width: 108px; height: 28px; }
  .nav-actions { gap: 15px; height: 38px; padding-left: 0; }
  .hero-copy { width: 100%; padding: 0 50px 0 0; }
  .hero-title { min-width: 340px; } /* title escapes the copy block's right padding, as published */
  .hero-title-1 { font-family: var(--serif-regular); font-size: 48px; line-height: 57.6px; }
  .hero-title-2 { font-size: 36px; line-height: 43.2px; white-space: normal; }
  .hero-lede { font-size: 18px; line-height: 21.6px; max-width: 290px; }
  .hero-cta { flex-direction: column; align-items: flex-start; }
  .hero-cta .btn { font-size: 14px; line-height: 21px; }
}

/* ============================================================
   RING SECTION
   ============================================================ */
.sec-ring {
  position: relative; z-index: 1;
  width: min(1280px, 100% - 160px);
  height: 985px;
}
.ring {
  position: absolute; left: 50%; top: 50%;
  width: 980px; height: 980px;
  transform: translate(-50%, -50%);
}
.ring-spin {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  animation: ring-spin 250s linear infinite;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }
.ring-item {
  position: absolute; left: 50%; top: 50%;
  width: 137.5px; height: 165px;
  transform-origin: 0 0;
  box-shadow: rgba(0, 0, 0, 0.35) 0 4px 16px;
  /* each item sits on a 407.5px ring at 30° steps, facing outward */
  transform: rotate(var(--station)) translate(407.5px) rotate(90deg) translate(-50%, -50%);
  transition: transform 0.3s;
}
.ring-item:hover { transform: rotate(var(--station)) translate(407.5px) rotate(90deg) translate(-50%, -50%) scale(1.15); }
.ring-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.73); }
.ring-item:nth-child(1)  { --station: 0deg; }
.ring-item:nth-child(2)  { --station: 30deg; }
.ring-item:nth-child(3)  { --station: 60deg; }
.ring-item:nth-child(4)  { --station: 90deg; }
.ring-item:nth-child(5)  { --station: 120deg; }
.ring-item:nth-child(6)  { --station: 150deg; }
.ring-item:nth-child(7)  { --station: 180deg; }
.ring-item:nth-child(8)  { --station: 210deg; }
.ring-item:nth-child(9)  { --station: 240deg; }
.ring-item:nth-child(10) { --station: 270deg; }
.ring-item:nth-child(11) { --station: 300deg; }
.ring-item:nth-child(12) { --station: 330deg; }

.ring-card {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) translateZ(0); /* keep the compositing layer */
  width: 469px;
  display: flex; flex-direction: column; gap: 24px; align-items: center;
  text-align: center;
}
.tag-pill {
  background: var(--pill-bg);
  width: 178px; height: 21px;
  overflow: hidden;
  display: flex; justify-content: center; align-items: center;
}
.tag-pill p {
  font-family: var(--sans-bold); font-size: 12px; line-height: 16.8px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--pill-fg);
  white-space: nowrap;
}
.ring-card-body { font-family: var(--serif-light); font-size: 20px; line-height: 24px; }

@media (max-width: 809px) {
  .sec-ring { width: 100%; }
  .ring-card { width: 340px; }
  .ring-card .h-32 { font-size: 24px; }
  .ring-card-body { font-size: 18px; line-height: 21.6px; }
}

/* ============================================================
   QUOTE SECTION
   ============================================================ */
.sec-quote { position: relative; z-index: 1; width: 100%; }
.sec-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote-inner {
  position: relative;
  width: min(1280px, 100% - 150px);
  margin: 0 auto;
  padding: 78px 0;
  display: flex; flex-direction: column; gap: 75px; align-items: flex-start;
}
.quote-line { font-family: var(--serif-italic); font-size: 48px; line-height: 57.6px; }
.quote-sp-24 { font-family: var(--serif-italic); font-size: 24px; line-height: 28.8px; }
.quote-attr { font-family: var(--serif-regular); font-size: 24px; line-height: 28.8px; }
.quote-sp-20 { font-family: var(--serif-italic); font-size: 20px; line-height: 24px; }
.quote-body { font-family: var(--serif-light); font-size: 20px; line-height: 24px; }

@media (max-width: 809px) {
  .quote-inner { width: 100%; padding: 50px 25px 90px; gap: 111px; }
  .quote-attr { font-size: 20px; line-height: 24px; }
  .quote-body { font-size: 14px; line-height: 16.8px; }
  .sec-quote .btn-sm { line-height: 24px; padding: 6px 20px; }
}

/* ============================================================
   MANUFACTURING
   ============================================================ */
.sec-manu {
  position: relative; z-index: 1;
  width: min(1280px, 100% - 160px);
  display: flex; flex-direction: column; gap: 75px; align-items: center;
  padding: 0 75px;
}
.manu-row {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
}
.manu-media { width: 695px; }
.manu-media img { width: 350px; height: 518px; object-fit: cover; }
.manu-copy {
  width: 435px; padding-left: 50px;
  display: flex; flex-direction: column; gap: 24px; justify-content: flex-end; align-items: flex-start;
}
.manu-p { font-family: var(--serif-light); font-size: 20px; line-height: 24px; }
.manu-group { display: flex; flex-direction: column; gap: 24px; padding-bottom: 20px; }

@media (max-width: 809px) {
  .sec-manu { width: 100%; padding: 0 25px; }
  .manu-row { flex-direction: column; gap: 35px; align-items: center; }
  .manu-media { width: 100%; display: flex; justify-content: center; }
  .manu-media img { width: 340px; height: 500px; }
  .manu-copy { width: 100%; padding-left: 0; }
  .manu-copy .h-24 { font-size: 20px; }
  .manu-p { font-size: 14px; line-height: 16.8px; }
  .sec-manu .btn-sm { font-size: 12px; line-height: 16.8px; }
}

/* ============================================================
   CARDS (ornamental embroidery)
   ============================================================ */
.sec-cards {
  position: relative; z-index: 1;
  width: min(1280px, 100% - 160px);
  height: 915px; /* fixed section height in the design; content centers vertically */
  display: flex; flex-direction: column; gap: 64px; align-items: center; justify-content: center;
}
.sec-cards .sec-head { width: 1128px; max-width: 100%; }
.cards-row { display: flex; gap: 25px; justify-content: center; align-items: flex-start; width: 1128px; max-width: 100%; }
.cards-col { display: flex; flex-direction: column; gap: 64px; width: 100%; }
.cards-row .card { flex: 1 1 0; }
.card { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; width: 552px; max-width: 100%; }
.card-top { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.card-media { position: relative; width: 100%; height: 552px; overflow: hidden; }
.card-media-zoom img { position: absolute; width: 910.578px; height: 1146.66px; left: -106.375px; top: 1.8125px; max-width: none; }
.card-media-tint img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.card-media .tint { position: absolute; inset: 0; background: rgba(105, 69, 6, 0.1); }
.card-label {
  width: 100%;
  display: flex; justify-content: space-between; align-items: flex-start;
  font-family: var(--sans-bold); font-size: 12px; line-height: 16.8px;
  letter-spacing: 1.2px; text-transform: uppercase; color: rgb(255, 255, 255);
}
/* text-block widths fixed in the design */
.card-name-wide { width: 201px; }
.card-name-narrow { width: 178px; }
.card-price { text-align: right; }
.card-price-wide { width: 164px; }
.card-price-narrow { width: 138px; }

@media (max-width: 809px) {
  .sec-cards { width: 100%; height: 1277px; padding: 0 25px; gap: 64px; }
  .sec-cards .sec-head { width: 100%; }
  .card { width: 100%; gap: 20px; }
  .card-media { width: 340px; height: 340px; }
  .card-media-zoom img { width: 463px; height: 888px; left: 7px; top: -3px; }
  .sec-cards { justify-content: flex-start; }
  .card-name-m1 { width: 247px; }
  .card-name-m2 { width: 170px; }
  .card-price-m1, .card-price-m2 { white-space: nowrap; }
  .showcase-media img[src*="sculptural-mbaked"] { height: 607px; object-fit: cover; object-position: top; }
  /* live: the mobile 18.000 card's price block is a 170px LEFT-aligned box */
  .card-price-m2 { width: 170px; text-align: left; }
}

/* ============================================================
   SHOWCASE SECTIONS (sculptural / interior)
   ============================================================ */
.sec-showcase {
  position: relative; z-index: 1;
  width: min(1280px, 100% - 160px);
  height: 980px; /* fixed section height in the design */
  display: flex; flex-direction: column; align-items: center;
}
.showcase-inner { width: 1128px; max-width: 100%; display: flex; flex-direction: column; gap: 32px; align-items: center; }
.showcase-main { width: 100%; display: flex; flex-direction: column; gap: 72px; align-items: center; }
.showcase-media { width: 100%; }
.showcase-media img { width: 100%; height: 705px; object-fit: cover; }

@media (max-width: 809px) {
  .sec-showcase { width: 100%; padding: 0 25px; }
  .sec-interior { height: 981px; }
  .sec-sculptural { height: 1003px; }
  .showcase-media img { height: 608px; }
  /* published mobile order: interior design before sculptural pieces */
  .page > * { order: 0; }
  .sec-sculptural { order: 1; }
  .sec-interior { order: 0; }
  .site-footer { order: 2; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative; z-index: 1;
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.footer-cta { position: relative; width: 100%; height: 505px; }
.footer-cta-bg, .footer-cta-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.footer-cta-bg img { object-fit: cover; }
.footer-cta-copy {
  position: relative; height: 100%;
  width: min(1150px, 100%);
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 32px; justify-content: center; align-items: center;
  text-align: center;
}
.footer-cta-copy h1 { max-width: 522px; }
.footer-cta-copy p { font-family: var(--serif-light-italic); font-size: 20px; line-height: 24px; max-width: 522px; }
.footer-cta-copy .btn { color: rgb(12, 7, 7); }

.footer-main {
  width: 100%;
  display: flex; flex-direction: column; gap: 30px; justify-content: flex-end; align-items: center;
  padding: 50px 25px;
}
.footer-cols {
  width: min(1280px, 100%);
  min-height: 255px; /* row height as rendered in the design */
  display: flex; justify-content: space-between; align-items: flex-start;
}
.footer-news {
  width: 550px; padding-right: 25px;
  display: flex; flex-direction: column; gap: 25px; align-items: flex-start;
}
.footer-news-lines { font-family: var(--serif-light); font-size: 20px; line-height: 24px; }
.news-form { display: flex; gap: 15px; font-family: Roboto, Arial, sans-serif; padding-bottom: 7px; }
.news-input-wrap { position: relative; }
/* newsletter success state (replica of the runtime component's success branch):
   bordered box replaces input+button, message glows via a 2s alternating
   text-shadow pulse. Colours follow --news-ink (overridden on cream pages). */
.news-success {
  position: relative; flex: 1 1 0; height: 48px; min-width: 1px;
  display: flex; align-items: center; justify-content: center;
}
.news-success::before { content: ""; position: absolute; inset: -1px; border: 1px solid var(--news-ink, var(--cream)); pointer-events: none; }
.news-success p {
  font-family: Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.5;
  color: var(--news-ink, var(--cream)); padding: 0 12px;
  animation: news-glow 2s ease-in-out infinite alternate;
}
@keyframes news-glow {
  from { text-shadow: 0 0 4px rgba(248, 244, 238, 0.5); }
  to   { text-shadow: 0 0 10px rgba(248, 244, 238, 0.9); }
}
.news-input-wrap::before { content: ""; position: absolute; inset: -1px; border: 1px solid var(--cream); pointer-events: none; }
.news-input {
  width: 264px; height: 48px;
  background: transparent; border: none; outline: none;
  color: rgba(248, 244, 238, 0.9);
  font-family: Roboto, Arial, sans-serif; font-size: 16px; line-height: 24px;
  font-variation-settings: "wdth" 100; /* the published input pins the Roboto width axis */
  padding: 12px;
}
.news-input::placeholder { color: rgba(248, 244, 238, 0.6); opacity: 1; }
.news-btn {
  height: 48px; padding: 12px 24px;
  border: 1px solid var(--cream);
  color: var(--cream);
  font-family: Roboto, Arial, sans-serif; font-size: 16px; line-height: 24px;
}
.news-note { font-family: var(--serif-regular); font-size: 12px; line-height: 18px; max-width: 525px; text-decoration: underline from-font; }
.news-note span { line-height: inherit; text-decoration: inherit; }

.footer-links { display: flex; gap: 15px; justify-content: flex-end; align-items: flex-start; padding-left: 12px; }
.footer-col { display: flex; flex-direction: column; gap: 25px; align-items: flex-start; }
.footer-col-title { font-family: var(--serif-medium); font-size: 16px; line-height: 24px; }
.footer-col-social { width: 100px; gap: 16px; padding-right: 5px; }
.footer-col-pages { width: 103px; padding: 0 5px; }
.footer-col-support { width: 106px; padding-left: 5px; }
.social-list { display: flex; flex-direction: column; align-items: flex-start; }
.social-list a { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
.social-list p { font-family: var(--serif-regular); font-size: 14px; line-height: 21px; }
.icon { width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; }
.icon svg { display: block; }
.icon-20 svg { width: 20px; height: 20px; }
.icon-18 svg { width: 18px; height: 18px; }
.icon-x svg { width: 18px; height: 16px; }
.page-list { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.page-list a, .support-list a { font-family: var(--serif-regular); font-size: 14px; line-height: 21px; }
.page-list a { min-height: 21px; flex-shrink: 0; display: flex; align-items: center; }
/* "Decorative Language" is two separate text nodes on the published site */
.page-list a.pl-split { flex-direction: column; align-items: flex-start; }
.support-list { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.support-list a { height: 21px; }

.footer-base { width: min(1390px, 100%); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.footer-divider { width: 100%; }
.footer-divider img { width: 100%; height: 15px; }
.footer-legal {
  position: relative;
  width: min(1280px, 100%);
  height: 70px;
  display: flex; justify-content: center; align-items: flex-start;
}
.copyright { position: absolute; left: 0; top: 0; font-family: var(--serif-regular); font-size: 14px; line-height: 21px; }
.logomark { position: relative; width: 47px; height: 47px; display: block; }
.logomark img { position: absolute; }
.logomark-ring { mix-blend-mode: difference; }
.logomark-letter { mix-blend-mode: exclusion; }
.logomark-ring { width: 47px; height: 47px; left: 50%; margin-left: -24px; top: 0; }
.logomark-letter { width: 24px; height: 40px; left: 50%; margin-left: -13px; top: 4px; }
.logomark-base { width: 7px; height: 3px; left: 50%; margin-left: 16px; top: 44px; }
.credit { position: absolute; right: 0; top: 0; font-family: var(--serif-regular); font-size: 14px; line-height: 21px; }
.credit a { text-decoration: underline from-font; }

@media (max-width: 809px) {
  .footer-cta-copy { width: 100%; padding: 0 35px; }
  .footer-cta-copy h1 { font-size: 32px; } /* CTA heading keeps 32px on mobile */
  .footer-main { align-items: flex-start; gap: 0; }
  .footer-cols { flex-direction: column; gap: 50px; }
  .footer-news { width: 100%; padding-right: 0; }
  .footer-news-lines { width: 100%; }
  .news-form { width: 100%; }
  .news-input { width: 204.3px; }
  .news-note { font-size: 11px; line-height: 16.5px; align-self: center; text-align: left; }
  .footer-links {
    width: 100%;
    flex-wrap: wrap; justify-content: flex-start; align-items: center;
    gap: 45px; padding: 0 0 30px 0;
  }
  .footer-col { gap: 24px; padding: 0; width: auto; }
  /* live update 19 Jul 2026: mobile column order is now
     [Pages | Follow Us] on the first row, Support alone below (was
     [Support | Pages] then Follow Us) — net -68px footer height */
  .footer-col-social { order: 2; width: 100px; gap: 16px; height: 209px; position: relative; top: -0.3px; }
  .footer-col-pages { order: 1; width: 100px; }
  .footer-col-support { order: 3; width: 106px; padding-bottom: 22px; }
  .page-list { gap: 4px; height: 161.4px; }
  /* mobile: on /decorative-language the two lines are separate rows 4px apart
     with no gap after (page-specific on the live site; home joins them) */
  .page-decorative-language .page-list a.pl-split { gap: 4px; margin-bottom: -4px; }
  /* ^ social gap 16, support 22px tail, pages list fixed at 161.4px (content
     overflows by design): the published site's own column boxes — these drive
     the vertical centring of the wrapped footer columns on every page */
  .news-form { padding-bottom: 22px; }
  .footer-base { width: 100%; gap: 0; }
  .footer-divider img { height: 9px; }
  .footer-legal {
    height: auto;
    flex-direction: column; gap: 32px; align-items: center;
    padding-top: 7.9px; /* live: legal block sits 1.1px higher */
    padding-bottom: 1px; /* keeps the page total height equal to live (divider ink is 9px, box 10px) */
  }
  .copyright, .credit { position: static; }
  .logomark { width: 50px; height: 50px; }
  /* keep the ring centred: the desktop rule's margin-left:-24px would
     otherwise still apply and drag the ring out of the composition */
  .logomark img.logomark-ring { left: 50%; margin-left: -23.5px; top: 1.5px; }
  .logomark img.logomark-letter { width: 24px; height: 41px; }
  .logomark img.logomark-base { top: 45px; }
}

/* ============================================================
   STORY PAGE (/story)  — all rules scoped with .page-story or .st-*
   New assets (hash -> readable name):
     c0360047 -> story-hero.png        4925cde8 -> story-bg-desktop.svg
     83aeae98 -> story-bg-mobile.svg   15bba834 -> founder.png
     a6ee86b6 -> journey-1994.png      8ddee42a -> journey-2010.png (tint)
     320f2ab3 -> journey-2013.png      efd07707 -> journey-2017.png (tint)
     e2d09fc8 -> journey-2019.png      7c847ac7 -> journey-2023.png
     c53b8b15 -> journey-2025.png      9d5f7eb7 -> principle-1.png
     1d56fcb2 -> principle-2.png       6076675c -> principle-3.png
   ============================================================ */
.page-story { gap: 55px; }
.page-story .ornament { display: none; }   /* story ships its own full-page backdrop */
.page-story .hero-frame { width: min(900px, 100%); }   /* story nav frame is narrower than home */
.page-story .footer-main { padding: 50px 100px; }       /* story footer content is 1240px (home is wider) */
@media (min-width: 810px) {
  .page-story .footer-col-support { gap: 19px; }        /* story desktop support column sits 6px tighter than home */
}

/* grayscale-AA parity: text on composited layers, like the published site */
.hero-story-title, .st-phil-quote, .st-quote, .st-quote-attr, .st-phil-body,
.st-founder-text, .st-journey-head, .st-tcell, .st-text-m, .st-prin-text,
.st-principles-title { transform: translate(0, 0); }

/* ---- full-page ornament backdrop ----
   No z-index anywhere in this chain: the backdrop must paint above .page's
   background (it does, as a positioned first child in DOM order) and the
   content wrappers must NOT create stacking contexts — a z-index on them
   would isolate the timeline's mix-blend-mode:overlay tints from the
   backdrop and change the blend result on the 0.9-opacity images. */
.st-bg { position: absolute; left: 0; top: 0; pointer-events: none; }
.st-bg img { position: absolute; }
.st-bg .d-only { left: -1295px; top: -271px; width: 4031px; height: 12833px; }
.st-bg .m-only { left: -635px; top: 1275px; width: 1662px; height: 7906px; }

/* ---- hero: brown difference tint + centred title ---- */
.page-story .hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: rgb(123, 109, 88); mix-blend-mode: difference;
}
.page-story .hero-copy {
  position: absolute; left: 0; top: 461px; transform: translateY(-50%);
  width: 900px; max-width: 100%;
  gap: 0; padding: 0; align-items: center;
}
.hero-story-title { font-family: var(--serif-regular); font-size: 48px; line-height: 57.6px; text-align: center; }

/* ---- tag pills (auto width, unlike the fixed home .tag-pill) ---- */
.st-pill { display: inline-flex; justify-content: center; align-items: center; background: var(--pill-bg); padding: 2px 8px; overflow: hidden; }
.st-pill p { font-family: var(--sans-bold); font-size: 12px; line-height: 16.8px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pill-fg); white-space: nowrap; }

/* ---- content wrapper: philosophy + founder + journey ---- */
.st-content { position: relative; width: 1280px; max-width: 100%; display: flex; flex-direction: column; gap: 50px; align-items: center; padding-top: 100px; }

/* philosophy */
.st-philosophy { width: 100%; display: flex; flex-direction: column; gap: 64px; align-items: center; padding: 0 75px 75px; }
.st-phil-quote { width: 1000px; max-width: 100%; display: flex; flex-direction: column; gap: 24px; align-items: center; }
.st-quote { font-family: var(--serif-regular); font-size: 32px; line-height: 38.4px; text-align: center; width: 100%; }
.st-quote-attr { font-family: var(--serif-light); font-size: 24px; line-height: 28.8px; text-align: right; width: 100%; }
.st-phil-body { font-family: var(--serif-light); font-size: 24px; line-height: 28.8px; text-align: center; width: 1000px; max-width: 100%; }

/* founder */
.st-founder { width: 100%; display: flex; gap: 50px; align-items: center; padding: 0 50px; }
.st-founder-text { width: 565px; display: flex; flex-direction: column; gap: 48px; justify-content: center; align-items: flex-start; }
.st-founder-name { font-family: var(--serif-regular); font-size: 32px; line-height: 38.4px; }
.st-founder-body { display: flex; flex-direction: column; }
.st-founder-body p { font-family: var(--serif-light); font-size: 20px; line-height: 24px; }
.st-founder-img { width: 565px; height: 653px; overflow: hidden; }
.st-founder-img img { width: 100%; height: 100%; object-fit: cover; }

/* journey */
.st-journey { width: 100%; display: flex; flex-direction: column; gap: 150px; align-items: center; padding: 154px 50px; }
.st-journey-head { display: flex; flex-direction: column; gap: 24px; align-items: center; }
.st-journey-title { font-family: var(--serif-regular); font-size: 32px; line-height: 38.4px; text-align: center; }

.st-rows { position: relative; width: 1180px; max-width: 100%; display: flex; flex-direction: column; gap: 180px; align-items: center; }
/* animated centre line (desktop timeline only): geometry copied from the
   published code component — 12px left of centre, width from aspect-ratio */
.st-line {
  position: absolute; left: calc(50% - 12px); top: 0; bottom: 0;
  aspect-ratio: 18.6170196533203 / 2305;
  transform: translateX(-50%);
  overflow: clip;
  pointer-events: none;
}
.st-line svg { display: block; width: 100%; height: 100%; }
.st-row { width: 100%; display: flex; justify-content: space-between; align-items: center; height: 385px; }
.st-row-6 { height: 350px; }
.st-tcell { width: 435px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; }
.st-tcell.pr { padding-right: 50px; }
.st-tcell.pl { padding-left: 50px; }
.st-year { font-family: var(--sans-bold); font-size: 10px; line-height: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--cream); text-align: center; }
.st-card-title { font-family: var(--serif-regular); font-size: 24px; line-height: 28.8px; text-align: center; width: 100%; }
.st-card-body, .st-card-body p { font-family: var(--serif-light); font-size: 20px; line-height: 24px; text-align: center; }
/* the published body paragraphs are pre-wrap: double spaces inside the copy
   are significant and move line breaks (e.g. the 2019 card) */
.st-card-body p, .st-founder-body p, .st-prin-body p { white-space: pre-wrap; }
.st-icell { width: 435px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.st-icell.end { align-items: flex-end; padding-left: 50px; }
.st-icell.start { align-items: flex-start; padding-right: 50px; }
.st-img { width: 385px; height: 385px; overflow: hidden; position: relative; flex-shrink: 0; }
.st-img img { width: 100%; height: 100%; object-fit: cover; }
.st-img-tall { height: 413px; }
.st-img.o97 img, .st-img-m.o97 img { opacity: 0.97; }
.st-img.o90 img, .st-img-m.o90 img { opacity: 0.9; }
.st-img.o98 img, .st-img-m.o98 img { opacity: 0.98; }
.st-img.o80 img, .st-img-m.o80 img { opacity: 0.8; }
.st-img.tint::after, .st-img-m.tint::after {
  content: ""; position: absolute; inset: 0;
  background: rgb(77, 66, 51); mix-blend-mode: overlay;
}
/* live update 19 Jul 2026: the 2025 row tightened — row 645px -> 435px, image
   645x645 -> 435x435 centred in its former 645px slot (page total -210px) */
.st-row-last { width: 100%; display: flex; gap: 100px; align-items: center; justify-content: flex-start; height: 435px; }
.st-row-last .st-tcell { width: 435px; padding-right: 50px; }
.st-img-lg { width: 435px; height: 435px; margin-left: 105px; overflow: hidden; }
.st-img-lg img { width: 100%; height: 100%; object-fit: cover; }

/* guiding principles */
.st-principles { position: relative; width: 1280px; max-width: 100%; display: flex; flex-direction: column; gap: 72px; align-items: center; padding: 0 50px 100px; }
.st-principles-title { font-family: var(--serif-regular); font-size: 32px; line-height: 38.4px; text-align: center; width: 100%; }
.st-prin-row { width: 1180px; max-width: 100%; display: flex; justify-content: space-between; align-items: flex-start; }
.st-prin-col { width: 393px; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; padding: 0 8px; }
.st-prin-img { overflow: hidden; position: relative; }
.st-prin-img img { width: 100%; height: 100%; object-fit: cover; }
.st-prin-img.o85 img { opacity: 0.85; }
.st-prin-col1 .st-prin-img { width: 377px; height: 377px; } /* live update 19 Jul 2026: was 250x250 */
.st-prin-col2 .st-prin-img, .st-prin-col3 .st-prin-img { width: 377px; height: 369px; }
.st-prin-text { display: flex; flex-direction: column; gap: 24px; width: 377px; }
.st-prin-col1 .st-prin-text { align-items: center; }
.st-prin-col2 .st-prin-text, .st-prin-col3 .st-prin-text { align-items: flex-end; }
.st-prin-name { font-family: var(--serif-regular); font-size: 24px; line-height: 28.8px; text-align: center; width: 100%; min-height: 57.6px; }
.st-prin-body, .st-prin-body p { font-family: var(--serif-light); font-size: 20px; line-height: 24px; text-align: center; }

/* mobile card timeline (hidden ≥810) */
.st-rows-m { width: 100%; display: flex; flex-direction: column; gap: 96px; align-items: center; }
.st-card-m { width: 100%; display: flex; flex-direction: column; gap: 35px; align-items: center; }
.st-img-m { width: 340px; height: 340px; overflow: hidden; position: relative; }
.st-img-m img { width: 100%; height: 100%; object-fit: cover; }
.st-img-m.tall { height: 364px; }
.st-text-m { display: flex; flex-direction: column; gap: 24px; align-items: center; }

/* ---------- story mobile (≤809) ---------- */
@media (max-width: 809px) {
  .page-story { gap: 15px; }
  .page-story .hero { height: 852px; }
  .page-story .hero-copy { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 375px; }
  .hero-story-title { font-size: 36px; line-height: 43.2px; }

  .st-content { width: 100%; gap: 125px; padding: 75px 25px; }

  .st-philosophy { padding: 0 0 75px; gap: 64px; }
  .st-phil-quote { width: 100%; }
  .st-quote { font-size: 24px; line-height: 28.8px; }
  .st-quote-attr { font-size: 18px; line-height: 21.6px; }
  .st-phil-body { width: 100%; font-size: 24px; line-height: 28.8px; }

  .st-founder { flex-direction: column; gap: 50px; padding: 0; align-items: center; }
  .st-founder-text { width: 340px; gap: 48px; align-items: center; }
  .st-founder-name { font-size: 24px; line-height: 28.8px; }
  .st-founder-body p { font-size: 14px; line-height: 16.8px; }
  .st-founder-img { width: 340px; height: 653px; }

  .st-journey { padding: 15px 0; gap: 150px; }
  .st-journey-head { padding: 60px 0; }
  .st-journey-title { font-size: 24px; line-height: 28.8px; }

  .st-card-title { font-size: 20px; line-height: 24px; }
  .st-card-body, .st-card-body p { font-size: 14px; line-height: 16.8px; }
  .st-card-m-2025 { gap: 50px; }
  .st-card-m-2025 .st-card-title { font-size: 24px; line-height: 28.8px; }
  .st-card-m-2025 .st-card-body, .st-card-m-2025 .st-card-body p { font-size: 20px; line-height: 24px; }

  .page-story .footer-main { padding: 50px 50px; }   /* story mobile footer inset (content 290px) */
  /* live 19 Jul: story mobile nav is inset 30px and sits 10px higher than home */
  .page-story .hero-content { padding-top: 30px; padding-left: 30px; padding-right: 30px; }
  .page-story .news-input { width: 154px; }          /* story mobile form: input 154 + gap 15 + Subscribe 121 = 290 */
  .st-principles { width: 100%; gap: 72px; padding: 50px 50px 100px; }
  .st-principles-title { font-size: 24px; line-height: 28.8px; }
  .st-prin-row { flex-direction: column; gap: 29px; width: 290px; align-items: center; } /* live update 19 Jul 2026: was 50px */
  .st-prin-col { width: 290px; gap: 20px; padding: 0; align-items: center; }
  .st-prin-text { width: 290px; align-items: center; }
  .st-prin-col1 .st-prin-img { width: 290px; height: 290px; }
  .st-prin-col2 .st-prin-img { width: 290px; height: 298px; }
  .st-prin-col3 .st-prin-img { width: 290px; height: 290px; }
  .st-prin-name { font-size: 20px; line-height: 24px; min-height: 0; }
  .st-prin-body, .st-prin-body p { font-size: 14px; line-height: 16.8px; }
}