/* ============================================================
   SITE — True Communications
   ============================================================
   Structure:
     1.  Reset / base
     2.  Typography
     3.  Layout primitives  (.page, .stack, .section, .section__inner)
     4.  Eyebrow / heading shared classes
     5.  Buttons
     6.  Site header
     7.  Hero  (.hero, .hero__copy, .hero-grid)
     8.  Tagline strip
     9.  Brand rail (.brand-rail, .brand-card, .brand-rail__nav)
     10. Feature split (.feature)
     11. Contact card
     12. Footer
   ============================================================ */

@import url("./variables.css");


/* 1. RESET / BASE */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Nav is fixed; offset anchor jumps so headings land below it. */
  scroll-padding-top: clamp(4rem, 7vw, 6rem);
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body-base);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-surface-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; }


/* 2. TYPOGRAPHY */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--color-heading);
  margin: 0;
  font-weight: 400;            /* Anton ships a single weight */
  text-transform: uppercase;   /* condensed display reads best in caps */
  letter-spacing: 0.005em;
  line-height: 0.95;
}
h1 { font-size: var(--heading-1); letter-spacing: 0.01em; }
h2 { font-size: var(--heading-2); }
h3 { font-size: var(--heading-3); line-height: 1.05; }
h4 { font-size: var(--heading-4); letter-spacing: 0.01em; }

p { margin: 0; }

a {
  color: var(--color-primary-hover);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary); }
a.unlined, .unlined a { border-bottom: 0; }


/* 3. LAYOUT PRIMITIVES
   Flat sections on one page background. No section cards, no per-section
   fills (the hero is the only card on the page). One container rail, one
   gutter token — every section adheres to --container-inner + --gutter. */

.page {
  max-width: var(--container-outer);
  margin: 0 auto;
}

/* Vertical rhythm between flat sections — whitespace only, no rules.
   No top padding: the hero sits directly under the nav. Bottom padding
   keeps the footer off the last section. */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding-bottom: var(--section-gap);
}

.section { display: block; }
/* Clip boundary sections — the hero's rotated cover grid and the brand rail's
   bleeding card row would otherwise push the page into horizontal scroll. */
.section--hero,
.section--brands { overflow: hidden; }
/* Hero sits on pure white, not the page paper tint — gives the cover field
   a cleaner background to bleed onto. */
.section--hero { background: var(--brand-surface); }

/* The single content rail. Every section's content sits in one of these.
   --container-inner caps the width; --gutter is the only side inset. */
.section__inner {
  max-width: var(--container-inner);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Narrow reading rail variant for prose-only blocks (the tagline). */
.section__inner--prose { max-width: var(--container-prose); }
/* Intro section — wider editorial column, left-aligned. */
.section__inner--intro {
  max-width: 52.5rem;       /* ~840px */
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* One title style for every section. Heading level lives in markup. */
.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--heading-2);
  letter-spacing: 0.005em;
  line-height: 0.95;
}


/* 4. EYEBROW */

.eyebrow {
  display: inline-block;
  font-size: var(--body-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}
.on-dark .eyebrow { color: rgba(255, 255, 255, 0.72); }


/* 5. BUTTONS */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.95em 1.7em;
  border-radius: var(--radius-sm);   /* squared, not pill */
  font-weight: 600;
  font-size: var(--body-base);
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base),
              border-color var(--transition-base), transform var(--transition-fast);
  text-decoration: none;
}
.button:hover { transform: translateY(-1px); }

.button--primary {
  background: var(--color-primary);
  color: var(--color-secondary);   /* navy on teal — stronger contrast than white */
  border-color: var(--color-primary);
}
.button--primary:hover { background: var(--color-primary-hover); color: #fff; border-color: var(--color-primary-hover); }

.button--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.button--ghost:hover { color: var(--color-primary); border-color: var(--color-primary); }

.on-dark .button--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}
.on-dark .button--ghost:hover {
  color: #fff;
  border-color: #fff;
}

.icon-button {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.icon-button:hover { color: var(--color-primary); border-color: var(--color-primary); }
.icon-button:disabled { opacity: 0.35; cursor: not-allowed; }
/* Carets stay their original size — only the circle grows. */
.icon-button svg { width: 1rem; height: 1rem; }


/* 6. SITE HEADER — floats above the hero. Out of document flow so the
   cover grid extends to the very top of the viewport and clips behind it. */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: transparent;
  pointer-events: none;
  transition: transform var(--transition-base), opacity var(--transition-base);
}
/* Hidden state: nav slides up out of view once the user scrolls past the hero.
   Single-page site — there's nothing useful to navigate to once you're past it. */
.site-header.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.site-header__inner {
  max-width: var(--container-inner);
  margin: 0 auto;
  padding: clamp(1.25rem, 2.5vw, 2rem) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* nav only, logo removed. Keep it left, over the
                                   white copy panel: flush right put it on top of
                                   the cover field where it was unreadable. */
  pointer-events: auto;         /* re-enable on the nav */
}
.site-header__nav {
  display: flex;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--body-base);
}
.site-header__nav a {
  color: var(--color-text-soft);
  border: 0;
  font-weight: 500;
}
.site-header__nav a:hover { color: var(--color-primary); }
@media (max-width: 640px) {
  /* Nav is the only thing left in the header; below 640 there is no room
     for it, so hide the whole bar rather than ship an empty fixed strip. */
  .site-header { display: none; }
}


/* 7. HERO — fills the viewport from y=0. The nav floats above; the cover
   grid extends past the top of the viewport so covers clip behind the nav.
   No top padding on the hero — it starts at the very top of the page. */

/* Hero is its own block: locked to one viewport height on desktop so the
   copy never drops below the fold. On mobile, the grid collapses, the nav
   sits at the top, and the hero is content-sized (height: auto). */
.hero {
  max-width: var(--container-inner);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);   /* copy gets the larger track so the wordmark fits */
  align-items: end;                /* headline block anchored to the bottom */
  gap: clamp(2rem, 5vw, 5rem);
  min-height: 40rem;               /* fallback so bottom-anchored copy/CTA stay stable */
  height: 100vh;                   /* fallback for browsers without dvh */
  height: 100dvh;                  /* dynamic viewport height — no jump when mobile browser chrome shows/hides */
  max-height: 1200px;              /* cap on tall displays so it doesn't feel cavernous */
  padding-bottom: clamp(2rem, 6vw, 4rem);   /* min < max (was inverted) */
  overflow-y: clip;
}
@media (max-width: 860px) {
  /* Stacked single column, two rows: copy on top, the covers as their own
     contained, visible band below. No full-bleed wash, no fixed viewport
     height — the hero is content-sized so nothing is clipped off. */
  .hero {
    position: relative;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: clamp(1.5rem, 5vw, 2.5rem);
    padding-top: clamp(4.5rem, 14vw, 7rem);
    padding-bottom: clamp(2rem, 6vw, 3rem);
    height: auto;
    min-height: 0;
    max-height: none;
    align-items: start;
    overflow-y: visible;
  }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  position: relative;
  z-index: var(--z-raised);
}

/* Hero entrance — runs once on load. Copy fades up with a short stagger;
   the cover grid only fades (its own rotate + marquee transforms stay
   untouched). `backwards` keeps delayed elements hidden until their turn. */
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(var(--motion-rise)); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-enter-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero__wordmark,
.hero__lede,
.hero__cta {
  animation: hero-enter var(--duration-slower) var(--ease-out) backwards;
}
.hero__lede { animation-delay: var(--duration-fast); }
.hero__cta  { animation-delay: var(--duration-base); }
.hero-grid-frame { animation: hero-enter-fade var(--duration-slower) var(--ease-out) backwards; animation-delay: var(--duration-fast); }

.hero__meta {
  font-size: var(--body-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}

.hero__wordmark {
  font-family: var(--font-display);
  /* Sized to the copy track, not the viewport. The longest token,
     COMMUNICATIONS, measures 6.69x the font size; the track runs ~0.466 of
     the viewport until --container-inner caps it, so anything under ~6.9vw
     fits. 6.2vw keeps a margin, the 6rem cap holds once the track stops
     growing, and the 2.4rem floor fits the word at 320px. */
  font-size: clamp(2.4rem, 6.2vw, 6rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1;                   /* breathing room between MAGAZINE / TV / BOOKS */
  color: var(--color-text);
  margin: 0;
}
.hero__wordmark .dot { color: var(--color-primary); }

.hero__lede {
  max-width: 34ch;
  font-size: var(--body-base);
  line-height: 1.55;
  color: var(--color-text-soft);
}

.hero__cta { margin-top: 0; }

/* The cell on the right of the hero. A containing block for the absolutely
   positioned cover grid. Deliberately NOT clipped: the covers bleed free-form
   in every direction and the only constraint is the viewport edge, which the
   parent .section--hero clips (invisible). Collision with the headline is
   avoided by geometry, not by cutting the covers: the field is placed so its
   rotated left edge stays right of the copy column. */
.hero-grid-frame {
  position: relative;
  align-self: stretch;
}

/* Three+ columns of covers. Positioned absolutely so its natural
   height (14 covers stacked) overflows the frame vertically. The frame
   clips the horizontal overflow; the parent .section--hero clips top and
   bottom. Width is oversized so that after the horizontal clip the rotated
   field fills the cell edge-to-edge with no empty wedge. */
.hero-grid {
  --hero-grid-gap: clamp(0.5rem, 0.7vw, 0.75rem);
  position: absolute;
  /* Push up past the frame's top edge so the top row sits behind the nav.
     The section's overflow:hidden clips the top; the covers read as if they
     run off the top of the screen. */
  top: clamp(-8rem, -10vw, -5rem);
  /* Anchored to the right cell and oversized so the field bleeds off the
     right and bottom of the screen. Left offset keeps the rotated ragged
     edge in the copy/cover gap, never on the headline. Width is 50vw plus
     the container's right margin once it caps at --container-inner, so the
     field reaches the screen edge at ANY width (below the cap the margin
     term is 0 and it is just 50vw). Only the right side extends; the left
     edge and headline clearance are unaffected. */
  left: 3%;
  width: calc(50vw + max(0px, (100vw - var(--container-inner)) / 2));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--hero-grid-gap);
  transform: rotate(7deg);
  transform-origin: center top;
}
.hero-grid__col {
  display: flex;
  flex-direction: column;
  gap: var(--hero-grid-gap);
  /* Marquee animation. The JS clones each column's children once so the loop
     is seamless: scroll the column by exactly the original-half height and the
     duplicate sits where the original used to be. Each column runs a different
     duration and a different negative start delay, and columns 2 and 4 run in
     reverse. Desyncing speed + phase (on top of a cover distribution where the
     two same-direction columns share no covers) means a repeated cover never
     travels alongside its twin. */
  animation: hero-marquee 180s linear infinite;
  will-change: transform;
}
.hero-grid__col:nth-child(1) { animation-duration: 175s; animation-delay: -32s; }
.hero-grid__col:nth-child(2) { animation-direction: reverse; animation-duration: 205s; animation-delay: -88s; }
.hero-grid__col:nth-child(3) { animation-duration: 240s; animation-delay: -140s; }
.hero-grid__col:nth-child(4) { animation-direction: reverse; animation-duration: 190s; animation-delay: -60s; }

@keyframes hero-marquee {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-grid__col,
  .hero__wordmark,
  .hero__lede,
  .hero__cta,
  .hero-grid-frame { animation: none; }
}

.hero-cover {
  margin: 0;                       /* kill UA figure margin */
  display: block;
  box-shadow: var(--shadow-md);    /* close, tight drop — sits near the object */
  flex-shrink: 0;
}
.hero-cover img {
  width: 100%;
  height: auto;                    /* covers resolve to their natural ratio */
  object-fit: contain;
  display: block;
}
@media (max-width: 860px) {
  /* Row 2: the covers as their own contained, legible band below the copy.
     Not a background wash — a real grid row with a fixed height and its own
     clip. Rotation dropped so covers read straight; the marquee still scrolls
     vertically and the JS clone/seam logic is unchanged. */
  .hero-grid-frame {
    position: relative;
    order: 2;
    align-self: stretch;
    height: clamp(15rem, 58vw, 22rem);
    overflow: hidden;
    opacity: 1;
    pointer-events: none;
  }
  .hero-grid {
    top: 0;
    left: 0;
    width: 100%;
    transform: none;
  }
  /* Row 1: plain copy block, no scrim, no negative margins. */
  .hero__copy {
    order: 1;
    z-index: var(--z-raised);
    background: none;
    padding: 0;
    margin-inline: 0;
  }
}


/* 8. INTRO — flat, left-aligned editorial intro */

.tagline__text {
  font-size: var(--body-xl);
  line-height: 1.4;
  color: var(--color-text-soft);
  font-weight: 500;
}
.tagline__text em {
  font-style: italic;
  color: var(--color-primary);
  font-weight: 600;
}

/* Home-of list — the four properties under the About intro. */
.home-of__label {
  margin-top: var(--space-sm);
  font-size: var(--body-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.home-of {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
  /* Two even columns: Magazine / TV on top, Books / Hummingbird below. */
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--space-xs) clamp(1.5rem, 4vw, 3rem);
  font-size: var(--body-lg);
  font-weight: 600;
  color: var(--color-text);
}
@media (max-width: 480px) { .home-of { grid-template-columns: 1fr; } }
.home-of li {
  position: relative;
  padding-left: 1rem;
}
.home-of li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--color-primary);
}


/* 9. BRAND RAIL — heading in the rail, cards bleed off the right edge.
   The head sits in the standard rail; the scroller starts at the gutter
   but runs to the viewport edge so cards bleed off-page (no clipping). */

.brand-rail {
  /* Single source of truth for the rail's lead inset — the heading rail's
     left edge: the gutter plus the centring margin past the inner container.
     Both the head, the scroll snap-padding and the track inherit this. */
  --rail-inset: calc(var(--gutter) + max(0px, (100vw - var(--container-inner)) / 2));
}

.brand-rail__head {
  max-width: var(--container-inner);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand-rail__nav {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* The scroller. Left edge aligns to the container gutter; the row runs
   past the right viewport edge so the next card bleeds off the page.
   No overflow clipping on the section — only horizontal scroll here. */
.brand-rail__viewport {
  overflow-x: auto;
  /* Proximity snap: arrow clicks land softly on a card; manual drag is free. */
  scroll-snap-type: x proximity;
  /* Smooth scroll for arrow-button scrollBy() and any anchor-targeted scrolls.
     During an active drag we override this to `auto` so the rail tracks the
     pointer 1:1 (see .is-dragging below). */
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-padding-left: var(--rail-inset);
  padding-block: var(--space-2xs) var(--space-lg);
  cursor: grab;
}
.brand-rail__viewport:active { cursor: grabbing; }
/* While actively dragging: block text selection, suppress snap (so the drag
   feels free rather than fighting snap points), and block native image/anchor
   drag previews. */
.brand-rail__viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;             /* sync scroll during the drag itself */
  user-select: none;
}
.brand-rail__viewport.is-dragging * {
  pointer-events: none;              /* let the viewport own the gesture */
}
.brand-rail__viewport img,
.brand-rail__viewport a {
  -webkit-user-drag: none;
  user-drag: none;
}
.brand-rail__viewport::-webkit-scrollbar { display: none; }

.brand-rail__track {
  /* Lead inset aligns the first card to the heading rail; the row then
     runs past the right viewport edge so cards bleed off-page. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(20rem, 38vw, 39rem);
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-inline: var(--rail-inset) var(--gutter);
  width: max-content;
}

.brand-card {
  scroll-snap-align: start;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-rule);
  display: flex;
  flex-direction: column;
  color: var(--color-text);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
a.brand-card { border-bottom: 1px solid var(--color-rule); } /* override global a underline */

.brand-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
  color: var(--color-text);
}
.brand-card--static:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-rule);
}

.brand-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-alt);
  position: relative;
}
.brand-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Video-preview variant: YouTube poster + a play badge. On hover the JS
   swaps in an iframe (see index.html script); the iframe fills the slot. */
.brand-card__media--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;     /* let outer <a> own the click */
}
.brand-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.brand-card__play svg {
  display: block;
  width: 28px;
  height: 28px;
  padding: 1.25rem 1.15rem 1.25rem 1.4rem;   /* generous so the circle is ~64px */
  background: rgba(4, 30, 42, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  color: #fff;
  border-radius: var(--radius-full);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
/* Once the iframe is playing, hide the play badge. */
.brand-card__media--video.is-playing .brand-card__play { opacity: 0; }

.brand-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: clamp(1.5rem, 2.25vw, 2.25rem);
  flex: 1;
}

.brand-card__title {
  font-family: var(--font-display);
  font-size: var(--heading-3);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
}
.brand-card__desc {
  font-size: var(--body-base);
  color: var(--color-text-soft);
  line-height: 1.5;
}
.brand-card__cta {
  margin-top: auto;
  padding-top: var(--space-xs);
  font-size: var(--body-base);
  font-weight: 600;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
/* Open-head arrow (north-east) — signals "external link, leaves the site". */
.brand-card__cta::after {
  content: "↗";
  font-weight: 400;
  transition: transform var(--transition-base);
}
.brand-card:hover .brand-card__cta::after { transform: translate(2px, -2px); }
.brand-card--static .brand-card__cta::after { content: none; }


/* 10. FEATURE SPLIT */

.feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.feature--image-right { grid-template-columns: 1fr 1.1fr; }
/* Bottom-aligned variant: copy block sinks to the bottom of the image height. */
.feature--bottom { align-items: end; }
.feature--bottom .feature__content { justify-content: end; }
@media (max-width: 760px) {
  .feature, .feature--image-right { grid-template-columns: 1fr; }
}

.feature__content { display: flex; flex-direction: column; gap: var(--space-md); }
.feature__body  { font-size: var(--body-lg); color: var(--color-text-soft); line-height: 1.55; }
.feature__cta   { margin-top: var(--space-sm); }

.feature__image {
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-alt);
}
.feature__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }


/* 11. CONTACT CARD */

.contact {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 760px) {
  .contact { grid-template-columns: 1fr; }
}

.contact__intro { display: flex; flex-direction: column; gap: var(--space-md); }
.contact__body  { font-size: var(--body-lg); color: var(--color-text-soft); line-height: 1.55; }
/* Postal address block — semantic <address>, each line on its own row. */
.contact__address {
  margin-top: var(--space-md);
  font-size: var(--body-sm);
  color: var(--color-text-muted);
  font-style: normal;       /* <address> defaults to italic */
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  line-height: 1.45;
}
.contact__address-org {
  color: var(--color-text);
  font-weight: 600;
}

/* Socials block: a labelled set of brand groups. Desktop = 2-col grid of
   groups (Magazine, Books, Hummingbird, Personal). Mobile = each group
   collapses into a native <details> accordion. */
.contact__socials {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.contact__socials-label {
  font-size: var(--body-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.brand-socials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-lg);
}

.brand-socials__group { border: 0; padding: 0; margin: 0; }
.brand-socials__group > summary {
  /* Desktop: not an accordion — render as a plain brand-row label, no marker. */
  list-style: none;
  cursor: default;
  font-size: var(--body-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: var(--space-xs);
}
.brand-socials__group > summary::-webkit-details-marker { display: none; }

.brand-socials__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.brand-socials__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--body-xs);
  color: var(--color-text);
  transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}
.brand-socials__list a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.brand-socials__list svg { flex-shrink: 0; width: 14px; height: 14px; }

/* Mobile: real accordion behavior. Summary becomes a tappable row with a
   chevron; groups collapse by default. */
@media (max-width: 760px) {
  .brand-socials {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--color-rule);
  }
  .brand-socials__group {
    border-bottom: 1px solid var(--color-rule);
  }
  .brand-socials__group > summary {
    /* Collapse by default on mobile by removing the `open` attribute below. */
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-sm);
    margin-bottom: 0;
    color: var(--color-text);
  }
  .brand-socials__group > summary::after {
    content: "+";
    font-weight: 400;
    font-size: var(--body-lg);
    color: var(--color-text-muted);
    transition: transform var(--transition-base);
  }
  .brand-socials__group[open] > summary::after { content: "–"; }
  .brand-socials__list {
    padding-block: 0 var(--space-sm);
  }
}

/* Form sits on a soft teal-tinted surface; inputs are light with dark text. */
.contact-form {
  position: relative;                 /* contains the off-screen honeypot */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--color-surface-sky-1);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.contact-form__row { display: flex; flex-direction: column; gap: var(--space-xs); }
.contact-form__label {
  font-size: var(--body-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
}
.contact-form input,
.contact-form textarea {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  font-size: var(--body-sm);
  padding: 0.5em 0.5em;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-surface-sky-2);
}
.contact-form textarea { min-height: 8rem; resize: vertical; }
.contact-form__submit { margin-top: var(--space-sm); align-self: start; }
.contact-form__submit:disabled { opacity: 0.6; cursor: default; }
/* Honeypot. Moved off-screen rather than display:none — hidden fields are an
   obvious tell, and this way a bot reading the layout still fills it in. */
.contact-form__gotcha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Turnstile slot stays out of the flex gap until the widget actually renders. */
.contact-form__turnstile:empty { display: none; }
.contact-form__status {
  font-size: var(--body-sm);
  color: var(--color-text-soft);
}
.contact-form__status.is-error { color: var(--color-error); }


/* 12. FOOTER / IMPRINT */

/* Imprint reversed out on the dark brand ink (the heading colour), so the
   footer reads as a distinct dark band. Text goes light; links keep the brand
   teal, which still pops on the dark ground. */
.site-footer {
  background: var(--color-secondary);   /* brand ink / navy — same as headings */
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.site-footer .section__title { color: #fff; }

.imprint { display: flex; flex-direction: column; gap: clamp(1.25rem, 2.5vw, 1.75rem); }

.imprint__lead { max-width: var(--container-prose); }
.imprint__statement {
  margin-top: var(--space-sm);
  font-size: var(--body-base);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.imprint__statement strong { color: #fff; font-weight: 600; }
.imprint__statement a { color: var(--color-primary); border-color: rgba(255, 255, 255, 0.25); }

.imprint__grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.875rem, 1.75vw, 1.25rem) clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 700px) { .imprint__grid { grid-template-columns: 1fr; } }

.imprint__item { display: flex; flex-direction: column; gap: var(--space-2xs); }
.imprint__term {
  font-size: var(--body-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);   /* softer, greyed-back label on the dark ground */
}
/* Imprint definitions are meta data (addresses, registration numbers, emails),
   not reading prose — body-sm is correct microcopy use. */
.imprint__def {
  margin: 0;
  font-size: var(--body-sm);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
.imprint__def a { color: var(--color-primary); border-color: rgba(255, 255, 255, 0.25); }
.imprint__def a:hover { border-color: var(--color-primary); }
.imprint__statement a:hover { border-color: var(--color-primary); }
/* Visible placeholder for facts still owed by the client — never ships as real copy. */
.imprint__def--todo { color: var(--color-primary-dark); font-style: italic; }

.imprint__copy {
  font-size: var(--body-xs);
  color: rgba(255, 255, 255, 0.55);
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}