/* ==========================================================================
   TORRE Society — Design system
   Tokens → base → layout → components → utilities → motion
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Palette */
  --cream: #faf9f1;
  --cream-deep: #f1efe2;
  --card-cream: #f6f7e9;   /* the illustrations' own ground */
  --champagne: #b8a57a;
  --champagne-soft: #cdbc96;
  --navy: #10253f;
  --navy-deep: #0b1a2e;
  --warm: #8a8780;
  --ink: #10253f;

  /* Typography */
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* Fixed type scale.
     Body copy 12px DM Sans, headings 18px Cormorant Garamond,
     the home hero title 24px. */
  --text: 14px;
  --text-title: 24px;   /* 14 x 1.7 */
  --text-hero: 30px;    /* home hero only */

  /* Legacy aliases, kept so inline styles resolve to the scale above. */
  --step--1: var(--text);
  --step-0: var(--text);
  --step-1: var(--text);
  --step-2: var(--text-title);
  --step-3: var(--text-title);
  --step-4: var(--text-title);

  /* Layout */
  --page-width: 1660px;
  --content-width: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Reset / base ------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* A page's own title outranks its section headings. Without this an article
   and its seven subheadings all read at the same weight. */
h1 { font-size: var(--text-hero); }

p { margin: 0; text-wrap: pretty; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -100%;
  z-index: 100;
  padding: .75rem 1.5rem;
  background: var(--navy);
  color: var(--cream);
  transform: translateX(-50%);
}
.skip-link:focus { top: .5rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Typography helpers ------------------------------------------------- */
.display { font-family: var(--font-display); }
.display--caps { text-transform: uppercase; }

.eyebrow {
  margin: 0;
  color: var(--champagne);
  font-size: var(--text);
  font-weight: 600;
  letter-spacing: .19em;
  line-height: 1.5;
  text-transform: uppercase;
}

.lead { max-width: 40ch; font-size: var(--text); line-height: 1.55; }

.prose { max-width: 68ch; display: grid; gap: 1.5rem; font-size: var(--text); line-height: 1.7; }
.prose h2 { margin-top: 1.5rem; font-size: var(--text-title); }
.prose h3 { margin-top: 1rem; font-size: var(--text-title); }
.prose a { border-bottom: 1px solid var(--champagne); }

/* Paragraph tones used in the opening statement. */
.text-champagne { color: var(--champagne); font-weight: 600; }
.text-warm { color: var(--warm); }

.rule {
  width: 5rem;
  height: 1px;
  background: var(--champagne);
}

/* --- Layout ------------------------------------------------------------- */
.shell { width: min(100%, var(--page-width)); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { width: min(100%, var(--content-width)); }

.section { padding-block: var(--section-y); }

.section--cream { background: var(--cream); color: var(--navy); }
.section--navy { background: var(--navy); color: var(--cream); }
.section--navy .eyebrow { color: var(--champagne-soft); }

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  isolation: isolate;
  color: var(--cream);
  border-bottom: 1px solid transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.site-header::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: clamp(6rem, 16vw, 9rem);
  content: "";
  background: linear-gradient(to bottom, rgba(16,37,63,.96), rgba(16,37,63,.72) 36%, rgba(16,37,63,.2) 72%, transparent);
  pointer-events: none;
}
.site-header.is-scrolled { background: var(--navy); border-color: var(--champagne); }
.site-header.is-scrolled::before { height: 0; }
.site-header--solid { position: sticky; background: var(--navy); border-color: var(--champagne); }
.site-header--solid::before { height: 0; }

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: min(100%, var(--page-width));
  margin-inline: auto;
  padding: .9rem var(--gutter);
}

.brand-logo { height: 40px; width: auto; object-fit: contain; }

.nav-links { display: none; align-items: center; gap: clamp(1.1rem, 2vw, 2rem); }

.nav-link {
  position: relative;
  font-size: var(--text);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.nav-link::after {
  position: absolute;
  bottom: -7px; left: 0;
  width: 100%; height: 1px;
  content: "";
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* Language switcher: a quiet pair of codes beside the navigation. */
.lang-switch {
  display: flex;
  gap: .5rem;
  margin: 0;
  font-size: var(--text);
  font-weight: 600;
  letter-spacing: .14em;
}
.lang-switch a {
  padding-bottom: .2rem;
  border-bottom: 1px solid transparent;
  opacity: .75;
  transition: opacity .2s var(--ease), border-color .2s var(--ease);
}
.lang-switch a:hover,
.lang-switch a:focus-visible { opacity: 1; border-bottom-color: var(--champagne); }

.menu-button {
  display: inline-flex;
  padding: .4rem;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.menu-button svg { width: 1.7rem; height: 1.7rem; }

.mobile-panel {
  max-height: 0;
  overflow: hidden;
  background: var(--navy);
  transition: max-height .35s var(--ease);
}
.mobile-panel.is-open { max-height: 34rem; }
.mobile-panel ul { padding-inline: var(--gutter); }
.mobile-panel a {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid var(--champagne);
  color: var(--cream);
  font-size: var(--text);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mobile-panel li:last-child a { border-bottom: 0; }

@media (min-width: 60rem) {
  .nav-links { display: flex; }
  .menu-button { display: none; }
}

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(100svh, 56rem);
  overflow: hidden;
  color: var(--cream);
}
.hero--compact { min-height: min(68svh, 40rem); }

/* Optional hero video. Inserted by JS after load, only on wide screens and
   only when motion is welcome, so the poster image stays the LCP element and
   mobile visitors never pay for the download. It sits above the still and
   below the ::after scrim. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero__video.is-ready { opacity: 1; }

.hero__media,
.cover-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--navy-deep);
}

.hero::after,
.media-panel::after {
  position: absolute;
  inset: 0;
  content: "";
  /* Two layers, as in the reference: a light wash over the whole image, and a
     deep scrim confined to the bottom 58% where the copy sits. */
  background:
    linear-gradient(to bottom, transparent, rgba(16,37,63,.18) 22%, rgba(16,37,63,.58) 58%, rgba(16,37,63,.94))
      bottom / 100% 58% no-repeat,
    linear-gradient(to bottom, rgba(16,37,63,.48), rgba(16,37,63,.24) 18%, rgba(16,37,63,.08) 48%, transparent 76%, rgba(16,37,63,.08))
      top / 100% 100% no-repeat;
}

.hero__content,
.media-panel__content {
  position: relative;
  z-index: 1;
  width: min(100%, var(--page-width));
  margin-inline: auto;
  padding: clamp(4rem, 12vw, 8rem) var(--gutter) clamp(3rem, 7vw, 5rem);
}

.hero__content :is(h1, h2, p, a),
.media-panel__content :is(h1, h2, p) {
  text-shadow: 0 2px 14px rgba(16,37,63,.72), 0 1px 3px rgba(16,37,63,.9);
}

/* The hero eyebrow sits on bright water. Pure champagne disappears there, so
   it is warmed towards cream (40% champagne / 60% cream) and given a firm
   shadow, keeping the brand tone while staying legible. */
.hero__content .eyebrow {
  font-size: 13px;
  color: #e0d7c1;
  text-shadow: 0 1px 2px rgba(16,37,63,.95), 0 2px 16px rgba(16,37,63,.85);
}

.hero__title {
  margin-top: .55rem;
  max-width: 18ch;
  font-size: var(--text-hero);
  line-height: 1.05;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.hero__tagline { margin-top: 1.75rem; max-width: 42ch; font-size: var(--text); }

/* --- Links & buttons ---------------------------------------------------- */
.line-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  width: fit-content;
  padding-bottom: .4rem;
  border-bottom: 1px solid currentColor;
  font-size: var(--text);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: gap .2s var(--ease);
}
.line-link::after {
  content: "\2198";
  display: inline-block;
  margin-left: .35rem;
  font-size: .9em;
  line-height: 1;
  transform: translate(2px, 2px);
  transition: transform .2s var(--ease);
}
.line-link:hover { transform: translateY(-1px); }
.line-link:hover::after { transform: translate(2px, 4px); }

.button-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 2.9rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--champagne);
  font-size: var(--text);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.button:hover { transform: translateY(-2px); }
.button--primary { background: var(--champagne); color: var(--navy); }
.button--ghost { background: rgba(16, 37, 63, .42); color: var(--cream); }
.button--ghost:hover { background: var(--champagne); color: var(--navy); }

/* In the hero both buttons sit on the photograph, so they share the WhatsApp
   treatment: cream lettering on a translucent ground, champagne with navy
   lettering on hover. Elsewhere the primary button keeps its filled style. */
.hero__content .button--primary { background: rgba(16, 37, 63, .42); color: var(--cream); }
.hero__content .button--primary:hover { background: var(--champagne); color: var(--navy); }
.button svg { width: 1.05rem; height: 1.05rem; }

/* --- Editorial grids ---------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: 3fr 8fr; }
  .split--wide { grid-template-columns: 5fr 7fr; align-items: start; }
  .split--media { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

.split__media { width: 100%; height: 100%; min-height: 24rem; object-fit: cover; background: var(--cream-deep); }

/* An inset, not a panel. The photograph is portrait, so filling a 7fr column
   ran it to 747x931 beside 244px of text — taller than a laptop screen. The
   cap keeps its crop and leaves it centred in the column. */
.split__media--inset {
  width: 100%;
  max-width: 28rem;
  height: auto;
  min-height: 0;
  margin-inline: auto;
}

/* The Worldwide panel is a short block beside a tall photograph. The site's
   standard section padding left too much air above the heading, so this one
   runs tighter. */
#worldwide { padding-block: clamp(2rem, 3.5vw, 3.5rem); }

.card-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

/* Four worlds: two per row, then all four abreast once there is room.
   A 2x2 grid of square cards ran to 1682px — over two screens of scrolling
   for four items. */
.card-grid--worlds { gap: 1.25rem; }
@media (min-width: 40rem) { .card-grid--worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 78rem) { .card-grid--worlds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Seasons: four columns on wide screens. */
.card-grid--seasons { gap: 2.5rem; }
@media (min-width: 40rem) { .card-grid--seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .card-grid--seasons { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Journal: two columns. */
.card-grid--journal { gap: 2.5rem; }
@media (min-width: 55rem) {
  .card-grid--journal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; }
  .card-grid--journal > :nth-child(even) { margin-top: 4rem; }
}

/* --- World / service card ----------------------------------------------- */
.world-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card-cream);
  color: var(--navy);
  border: 1px solid color-mix(in srgb, var(--champagne) 45%, transparent);
}
.world-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.world-card:hover > img { transform: scale(1.03); }
.world-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  /* Top padding matters: without it the eyebrow sits flush against the
     photograph and the card reads as cramped. */
  padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.5rem, 2.5vw, 2.25rem);
}
.world-card .eyebrow { color: var(--champagne); }

/* At four abreast two of the labels wrap. Reserving the second line keeps
   every title on the same baseline; below that width they fit on one. */
@media (min-width: 78rem) {
  .world-card .eyebrow { min-height: calc(1.5em * 2); }
}
/* The emblem already carries the world's name, so the heading is hidden from
   sight but kept in the document for search engines and screen readers. */
.world-card__title { margin-top: .7rem; font-size: var(--text-title); }
.world-card__text { margin-top: .9rem; max-width: 34ch; color: var(--warm); }
.world-card .line-link { align-self: flex-start; margin-top: auto; padding-top: 1.75rem; color: var(--navy); }

/* --- Journal card ------------------------------------------------------- */
.journal-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 1.25rem;
  border-top: 1px solid var(--champagne);
}
.journal-card__media { aspect-ratio: 5 / 4; overflow: hidden; background: var(--navy-deep); }
.journal-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.journal-card:hover .journal-card__media img { transform: scale(1.05); }
.journal-card__title { margin-top: 1rem; font-size: var(--text-title); }
.journal-card__excerpt { margin-top: .85rem; }
.journal-card .line-link { margin-top: auto; padding-top: 1.5rem; }

/* --- Season grid -------------------------------------------------------- */
.season {
  display: flex;
  flex-direction: column;
  padding-top: 1.25rem;
  border-top: 1px solid var(--champagne);
}
.season__index { margin-top: 1.25rem; font-size: var(--text); color: var(--warm); }
.season__media { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; background: var(--cream-deep); }
.season__title { margin-top: .9rem; font-size: var(--text-title); }
.season__text { margin-top: .85rem; }
.season .line-link { margin-top: auto; padding-top: 1.5rem; }

/* --- Media panel (full-bleed image section) ----------------------------- */
.media-panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(82svh, 46rem);
  overflow: hidden;
  color: var(--cream);
}

.place-list {
  margin-top: 1.75rem;
  font-size: var(--text);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --- Facts / definition list (GEO-friendly) ----------------------------- */
.facts {
  display: grid;
  gap: 0;
  margin-top: 2.5rem;
  border-top: 1px solid color-mix(in srgb, var(--champagne) 50%, transparent);
}
.facts > div {
  display: grid;
  gap: .35rem 2rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--champagne) 50%, transparent);
}
@media (min-width: 45rem) {
  .facts > div { grid-template-columns: 14rem 1fr; align-items: baseline; }
}
.facts dt { font-size: var(--text); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--champagne); }
.facts dd { margin: 0; }

/* --- FAQ ---------------------------------------------------------------- */
.faq { display: grid; gap: 0; margin-top: 2.5rem; border-top: 1px solid color-mix(in srgb, var(--champagne) 50%, transparent); }
.faq__item { border-bottom: 1px solid color-mix(in srgb, var(--champagne) 50%, transparent); padding-block: 1.6rem; }
.faq__q { font-size: var(--text-title); line-height: 1.4; }
.faq__a { margin-top: .75rem; max-width: 70ch; }

/* --- Contact ------------------------------------------------------------ */
.contact-layout {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  padding-top: 3rem;
  border-top: 1px solid var(--champagne);
}
@media (min-width: 62rem) { .contact-layout { grid-template-columns: 5fr 6fr; } }

.contact-card {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--navy);
  color: var(--cream);
}
.contact-card .control {
  border-bottom-color: var(--champagne);
  color: var(--cream);
}
.contact-card .control:focus { border-bottom-color: var(--cream); }
.contact-card .form-status { color: color-mix(in srgb, var(--cream) 72%, transparent); }

.field-grid { display: grid; gap: 1.5rem 2rem; }
@media (min-width: 40rem) {
  .field-grid { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

.field label {
  display: block;
  margin-bottom: .55rem;
  color: var(--champagne);
  font-size: var(--text);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.control {
  width: 100%;
  padding: .7rem 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 25%, transparent);
  background: transparent;
  color: inherit;
  font: inherit;
  transition: border-color .25s var(--ease);
}
.control:focus { outline: none; border-color: var(--champagne); }
textarea.control { min-height: 8rem; resize: vertical; }

.form-status { margin-top: 1.25rem; min-height: 1.5rem; font-size: var(--text); }
.form-status[data-state="error"] { color: #9c3a2d; }

.contact-details a { display: block; width: fit-content; padding-bottom: .25rem; border-bottom: 1px solid var(--champagne); }

/* --- Footer ------------------------------------------------------------- */
.site-footer { padding-block: clamp(3rem, 7vw, 5rem); background: var(--navy); color: var(--cream); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3rem; }
.footer-nav { display: grid; gap: .6rem; font-size: var(--text); }
.footer-nav a:hover { color: var(--champagne-soft); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--champagne);
  font-size: var(--text);
  letter-spacing: .1em;
}

/* --- Breadcrumb --------------------------------------------------------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; font-size: var(--text); color: var(--warm); }
.breadcrumb a { border-bottom: 1px solid transparent; }
.breadcrumb a:hover { border-color: var(--champagne); }

/* --- Article ------------------------------------------------------------ */
.article-header { max-width: 50ch; }
.article-header h1 { margin-top: 1.25rem; }
.article-meta { margin-top: 1.25rem; font-size: var(--text); color: var(--warm); }
.article-figure { margin: clamp(2.5rem, 5vw, 4rem) 0; }
.article-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--cream-deep); }
.article-figure figcaption { margin-top: .75rem; font-size: var(--text); color: var(--warm); }

/* --- Motion ------------------------------------------------------------- */
/* Gated behind .js so that, without JavaScript, nothing is ever hidden. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* --- Print -------------------------------------------------------------- */
@media print {
  .site-header, .mobile-panel, .button-row, .site-footer { display: none; }
  body { background: #fff; color: #000; }
}