/* ==========================================================================
   SIEBEN — Tiles Stone Flooring Design
   Landing page stylesheet
   --------------------------------------------------------------------------
   Values derived from Sieben_Web_Header_Footer.fig (canvas 3082px wide)
   at a 0.5 scale factor, cross-checked against the
   Sieben Quick Style Reference Guide 2026.
   ========================================================================== */

/* ---------- Fonts ------------------------------------------------------- */

@font-face {
  font-family: 'Sculpin';
  src: url('../fonts/sculpin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-variable.woff2') format('woff2-variations'),
       url('../fonts/figtree-variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ----------------------------------------------- */

:root {
  /* Core brand palette — Quick Style Reference Guide, p.4 */
  --c-black-sand: #272525;
  --c-dark-grey:  #333333;
  --c-white:      #FFFFFF;
  --c-pale-grey:  #F4F4F4;
  --c-khaki-1:    #D2CDC3;
  --c-khaki-2:    #C4BCAC;

  /* Used sparingly — Quick Style Reference Guide, p.4 */
  --c-black:      #000000;
  --c-mid-grey:   #D9D9D9;
  --c-khaki-3:    #B9B09C;  /* text only: small headings on text blocks */

  /* Present in the Figma file but not in the style guide — see README */
  --c-footer-ink: #544B44;  /* footer logo + column headings */
  --c-off-white:  #FDFDFD;  /* body section background */
  --c-callout-bg: #FBFBFB;  /* call-out strip background */
  --c-placeholder:#8E8E8E;  /* search input placeholder */

  /* Type */
  --f-display: 'Sculpin', 'Zalando Sans SemiExpanded', 'Lexend Peta', sans-serif;
  --f-body:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --container: 1280px;
  --gutter: 24px;
  --radius: 5px;

  /* Band heights (from the Figma frames) */
  --h-topbar: 62px;
  --h-logoband: 230px;
  --h-nav: 62px;
  --h-callouts: 132px;
  --h-hero: 622px;
  --h-footer-buffer: 66px;
  --h-footer-lower: 73px;
}

/* ---------- Reset ------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-weight: 400;
  color: var(--c-dark-grey);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--c-dark-grey);
  color: var(--c-white);
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--c-black-sand);
  outline-offset: 2px;
}

/* ==========================================================================
   HEADER — Top utility bar
   ========================================================================== */

.topbar {
  background: var(--c-khaki-2);
  color: var(--c-black-sand);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.4vw, 52px);
  min-height: var(--h-topbar);
}

.topbar__home {
  flex: 0 0 auto;
  width: 37px;
  height: 37px;
}
.topbar__home img { width: 100%; height: 100%; }

.topbar__contact {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 0 0 auto;
}

.topbar__link {
  font-size: 17px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition: opacity .18s ease;
}
.topbar__link:hover { opacity: .65; }

.topbar__divider {
  width: 1px;
  height: 31px;
  background: currentColor;
  opacity: .45;
}

/* Search ---------------------------------------------------------------- */

.search {
  position: relative;
  flex: 0 1 244px;
  min-width: 170px;
  margin-left: auto;
}

.search__input {
  width: 100%;
  height: 32px;
  padding: 0 40px 0 16px;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--c-dark-grey);
  background: var(--c-white);
  border: 0;
  border-radius: var(--radius);
}
.search__input::placeholder { color: var(--c-placeholder); opacity: 1; }

.search__submit {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: flex;
  color: var(--c-dark-grey);
}

/* Top bar actions -------------------------------------------------------- */

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

.consult {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 266px;
  height: 32px;
  padding: 0 12px 0 18px;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--c-dark-grey);
  background: var(--c-white);
  border-radius: var(--radius);
  transition: background .18s ease;
}
.consult:hover { background: var(--c-pale-grey); }
.consult__label { white-space: nowrap; }
.consult__chevron { flex: 0 0 auto; transition: transform .18s ease; }
.consult[aria-expanded="true"] .consult__chevron { transform: rotate(180deg); }

.btn-samples {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 149px;
  height: 32px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* optical centring against the tracking */
  color: var(--c-white);
  background: var(--c-dark-grey);
  border-radius: var(--radius);
  transition: background .18s ease;
}
.btn-samples:hover { background: var(--c-black-sand); }

/* ==========================================================================
   HEADER — Logo band
   ========================================================================== */

.logo-band {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--h-logoband);
  background: var(--c-white);
}

.logo-band__logo { width: 548px; }

/* ==========================================================================
   HEADER — Primary navigation
   ========================================================================== */

.mainnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(51, 51, 51, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: background .32s ease, box-shadow .32s ease;
}

/* Once it detaches from the header it firms up slightly for legibility. */
.mainnav.is-stuck {
  background: rgba(39, 37, 37, 0.82);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

/* Browsers without backdrop-filter get a near-solid bar instead of a
   washed-out one that text can't sit on. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .mainnav,
  .mainnav.is-stuck { background: rgba(51, 51, 51, 0.97); }
}

.mainnav__inner {
  display: flex;
  align-items: center;
  min-height: var(--h-nav);
}

.mainnav__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.mainnav__link {
  display: block;
  padding: 8px 4px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--c-white);
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity .18s ease;
}
.mainnav__link:hover { opacity: .62; }

.nav-toggle { display: none; }

/* ==========================================================================
   Call-out strip
   ========================================================================== */

.callouts {
  display: flex;
  align-items: center;
  min-height: var(--h-callouts);
  background: var(--c-callout-bg);
}

.callouts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
}

.callout {
  display: flex;
  align-items: center;
  gap: 22px;
}

/* Placeholder icon from the Figma file — five vertical bars.
   Swap for the final iconography when supplied. */
.callout__icon {
  flex: 0 0 auto;
  display: flex;
  gap: 2.5px;
  width: 47.5px;
  height: 47.5px;
}
.callout__icon span {
  display: block;
  width: 7.5px;
  height: 100%;
  background: var(--c-black);
}

.callout__text {
  font-size: 15px;
  line-height: 24.35px;
  letter-spacing: 0.05em;
  color: var(--c-black);
}
.callout__text strong { font-weight: 600; }
.callout__text span { display: block; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  height: var(--h-hero);
  background: var(--c-mid-grey);
  overflow: hidden;
}

/* Media, scrim and copy all share one grid cell so they stack without
   absolute positioning. */
.hero > * { grid-area: 1 / 1; }

.hero > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Top-weighted, plus a soft wash from the left where the copy sits. The header
   stack above the hero is 486px tall, so a bottom-aligned heading would sit
   below the fold on a laptop — the copy has to live at the top of the image. */
.hero__scrim {
  background:
    linear-gradient(to bottom,
      rgba(39, 37, 37, 0.46) 0%,
      rgba(39, 37, 37, 0.16) 42%,
      rgba(39, 37, 37, 0) 66%),
    linear-gradient(to right,
      rgba(39, 37, 37, 0.30) 0%,
      rgba(39, 37, 37, 0) 52%);
}

.hero__content {
  position: relative;
  z-index: 1;
  align-self: start;
  padding-top: 58px;
}

.hero .hero__title {
  max-width: 720px;
  /* A step down from the body's primary heading — it sits over a photograph
     rather than white space, and breaks to two lines at this measure. */
  font-size: clamp(34px, 4vw, 54px);
  color: var(--c-white);
  text-shadow: 0 1px 24px rgba(39, 37, 37, 0.34);
}

/* ==========================================================================
   Body sections
   ========================================================================== */

.section-white { background: var(--c-off-white); }
.section-pale  { background: var(--c-pale-grey); }

/* ==========================================================================
   FOOTER — Main
   ========================================================================== */

.footer {
  background: var(--c-khaki-1);
  padding-block: 68px 62px;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 64px;
}

.footer__brand {
  flex: 0 0 auto;
  margin-top: 24px;
}

.footer__logo { width: 393px; }

.footer__social {
  display: flex;
  gap: 30.5px;
  margin-top: 31px;
}
.footer__social a {
  display: block;
  width: 35px;
  height: 35px;
  transition: opacity .18s ease;
}
.footer__social a:hover { opacity: .7; }

.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 149px;
  height: 32px;
  margin-top: 31px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--c-white);
  background: var(--c-dark-grey);
  border-radius: var(--radius);
  transition: background .18s ease;
}
.btn-contact:hover { background: var(--c-black-sand); }

/* Footer link columns ---------------------------------------------------- */

.footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  flex: 0 1 auto;
}

.footer__col-title {
  margin: 0 0 8px;
  line-height: 52.5px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--c-footer-ink);
  text-transform: uppercase;
  white-space: nowrap;
}

.footer__col li + li { margin-top: 0; }

.footer__col a {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 30.5px;
  letter-spacing: 0.1em;
  color: var(--c-dark-grey);
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity .18s ease;
}
.footer__col a:hover { opacity: .6; }

/* ==========================================================================
   FOOTER — Buffer + lower bar
   ========================================================================== */

.footer-buffer {
  height: var(--h-footer-buffer);
  background: var(--c-dark-grey);
}

.footer-lower {
  background: var(--c-black-sand);
  color: var(--c-white);
}

.footer-lower__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: var(--h-footer-lower);
}

.footer-lower__left {
  display: flex;
  align-items: center;
}

.footer-lower__home {
  width: 37px;
  height: 37px;
  margin-right: 74px;
}

.footer-lower__links {
  display: flex;
  align-items: center;
  gap: 79px;
}

.footer-lower__links a,
.footer-lower__copy {
  font-size: 14px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.footer-lower__links a { transition: opacity .18s ease; }
.footer-lower__links a:hover { opacity: .65; }

/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   `.anim-ready` is added to <html> by an inline script before first paint and
   removed by main.js once GSAP has set inline start states, so content never
   flashes in — and never stays hidden if GSAP fails to load.
   ========================================================================== */

.anim-ready [data-anim="up"],
.anim-ready [data-anim="stagger"] > * { opacity: 0; }

/* Hidden rather than transparent: the line splitter needs layout to measure
   where the text wraps, which `visibility: hidden` preserves. */
.anim-ready [data-anim="lines"] { visibility: hidden; }

/* Each line is a mask the text slides up out of. The padding/negative-margin
   pair keeps descenders from being clipped by the overflow. */
[data-anim="lines"] .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
[data-anim="lines"] .line__inner {
  display: block;
  will-change: transform;
}

/* ==========================================================================
   Brand type scale — used by the placeholder body sections.
   Values follow the Quick Style Reference Guide, p.5.
   ========================================================================== */

.h-primary {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-dark-grey);
}

.h-secondary {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-dark-grey);
}

.h-sub {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-dark-grey);
}

.h-eyebrow {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-khaki-3);
}

.body-copy {
  margin: 0;
  font-size: 17px;
  line-height: 1.62;
  color: var(--c-dark-grey);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 172px;
  height: 44px;
  padding: 0 26px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--c-white);
  background: var(--c-dark-grey);
  border-radius: var(--radius);
  transition: background .18s ease;
}
.btn-primary:hover { background: var(--c-black-sand); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-dark-grey);
}
.link-arrow::after { content: '>'; font-weight: 400; }
.link-arrow:hover { opacity: .65; }

/* ==========================================================================
   PLACEHOLDER BODY
   --------------------------------------------------------------------------
   The body design was not final at build time. These two sections hold the
   correct backgrounds and vertical rhythm from the Figma file and show the
   brand type scale in situ. Delete every block marked `is-placeholder`
   (and this rule set) once the real body design lands.
   ========================================================================== */

.is-placeholder { position: relative; }

.is-placeholder::before {
  content: 'Placeholder — awaiting final body design';
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-white);
  background: var(--c-khaki-3);
  border-radius: 999px;
  white-space: nowrap;
}

.placeholder-block { padding-block: 96px; }

.placeholder-block__head { max-width: 720px; }
.placeholder-block__head > * + * { margin-top: 20px; }
.placeholder-block__head .btn-primary { margin-top: 32px; }

.specimen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 28px;
  margin-top: 72px;
  padding-top: 44px;
  border-top: 1px solid rgba(51,51,51,.14);
}

.specimen__card > * + * { margin-top: 12px; }

.specimen__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.specimen__swatch {
  width: 54px;
  height: 54px;
  border-radius: 3px;
  border: 1px solid rgba(51,51,51,.12);
}

.specimen__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-khaki-3);
}

/* Media tiles stand in for the product/imagery rows still to be designed. */
.tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 56px;
}

.tile {
  aspect-ratio: 4 / 3;
  background: var(--c-mid-grey);
  border-radius: 2px;
}
.tile--tall { aspect-ratio: 3 / 4; }

/* ==========================================================================
   Responsive
   --------------------------------------------------------------------------
   No mobile or tablet designs were supplied. The rules below are sensible
   defaults built from the desktop design — they are a starting point for
   sign-off, not a designed breakpoint set.
   ========================================================================== */

@media (max-width: 1280px) {
  .logo-band__logo { width: 46vw; min-width: 320px; }
  .footer__cols { gap: 40px; }
}

@media (max-width: 1270px) {
  .topbar__inner { gap: 28px; }
  .search { flex-basis: 200px; }
  .consult { width: auto; padding-inline: 14px; }
  .consult__label { display: none; }
  .consult::before {
    content: 'Consultation';
    font-size: 14px;
    letter-spacing: .06em;
  }
}

@media (max-width: 1100px) {
  .footer__inner { flex-direction: column; gap: 48px; }
  .footer__brand { margin-top: 0; }
  .footer__cols { gap: 36px 48px; }
}

@media (max-width: 1080px) {
  .mainnav__inner { min-height: 56px; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-white);
  }
  .nav-toggle__bars { display: grid; gap: 4px; width: 20px; }
  .nav-toggle__bars span {
    display: block;
    height: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .mainnav__list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding-bottom: 12px;
  }
  .mainnav__list.is-open {
    display: flex;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mainnav__inner { flex-wrap: wrap; }
  .mainnav__link {
    padding: 13px 0;
    font-size: 14px;
    border-top: 1px solid rgba(255,255,255,.12);
  }
}

@media (max-width: 900px) {
  :root { --h-logoband: 168px; --h-hero: 440px; }

  .hero__content { padding-top: 40px; }
  .hero .hero__title { max-width: 60%; }

  .topbar__inner {
    flex-wrap: wrap;
    gap: 14px;
    padding-block: 12px;
  }
  .topbar__contact { order: 1; }
  .topbar__actions { order: 2; margin-left: auto; }
  .search { order: 3; flex: 1 1 100%; margin-left: 0; }

  .callouts { min-height: 0; padding-block: 32px; }
  .callouts__grid { grid-template-columns: 1fr; gap: 20px; }

  .footer { padding-block: 52px 44px; }
  .footer__logo { width: min(320px, 80vw); }

  .footer-lower__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-block: 24px;
  }
  .footer-lower__left { flex-wrap: wrap; gap: 18px; }
  .footer-lower__home { margin-right: 0; }
  .footer-lower__links { flex-wrap: wrap; gap: 12px 32px; }

  .placeholder-block { padding-block: 64px; }
  .specimen { margin-top: 48px; }
}

@media (max-width: 600px) {
  :root { --gutter: 18px; --h-logoband: 132px; --h-hero: 340px; }

  .hero__content { padding-top: 28px; }
  .hero .hero__title { max-width: none; font-size: clamp(26px, 8vw, 36px); }

  .topbar__home { display: none; }
  .topbar__link { font-size: 14px; }
  .logo-band__logo { width: 78vw; min-width: 0; }
  .btn-samples { width: 128px; letter-spacing: .2em; text-indent: .2em; }
}

@media (max-width: 600px) {
  /* The placeholder badge is nowrap by default and overflows narrow phones. */
  .is-placeholder::before {
    max-width: calc(100% - 36px);
    white-space: normal;
    text-align: center;
    line-height: 1.5;
  }
}

@media (max-width: 400px) {
  .topbar__contact { gap: 12px; }
  .topbar__link { font-size: 13px; letter-spacing: 0.06em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  /* Belt and braces — the inline guard already skips `.anim-ready` here. */
  [data-anim="up"],
  [data-anim="stagger"] > * { opacity: 1 !important; transform: none !important; }
  [data-anim="lines"] { visibility: visible !important; }
  [data-anim="lines"] .line__inner { transform: none !important; }
}

/* ==========================================================================
   WordPress
   --------------------------------------------------------------------------
   Core classes the editor and template tags emit, plus the inner-page shell.
   Everything above this block is the design system from the static build.
   ========================================================================== */

/* Underscores templates and get_search_form() use this name. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  margin: 0; clip: auto;
  padding: 12px 20px;
  background: var(--c-dark-grey);
  color: var(--c-white);
}

.alignleft   { float: left;  margin: 0 1.5em 1em 0; }
.alignright  { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: none; }

.wp-caption { max-width: 100%; margin-bottom: 1.5em; }
.wp-caption img { display: block; }
.wp-caption-text, .wp-element-caption {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--c-khaki-3);
}

.sticky { display: block; }
.gallery-caption { display: block; }
.bypostauthor { display: block; }

/* Uploaded call-out icon, replacing the placeholder bar graphic. */
.callout__img {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* ---------- Inner pages --------------------------------------------------- */

.page-block { padding-block: 88px 96px; }

.entry-header { max-width: 900px; }
.entry-header .h-primary { margin-bottom: 12px; }

.entry-media { margin-block: 40px; }
.entry-media img { width: 100%; height: auto; }

.entry-content {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--c-dark-grey);
}
.entry-content > * + * { margin-top: 1.15em; }
.entry-content h2 {
  margin-top: 1.8em;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.entry-content h3 {
  margin-top: 1.6em;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { opacity: .7; }
.entry-content ul, .entry-content ol { padding-left: 1.25em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: .4em; }
.entry-content blockquote {
  margin-inline: 0;
  padding-left: 24px;
  border-left: 2px solid var(--c-khaki-2);
  color: var(--c-black-sand);
}
.entry-content img { height: auto; }

.post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 44px 32px;
  margin-top: 56px;
}
.post-list .entry-title {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.post-list .entry-title a:hover { opacity: .65; }

.pagination {
  display: flex;
  gap: 10px;
  margin-top: 64px;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pagination .page-numbers {
  padding: 8px 14px;
  border: 1px solid rgba(51,51,51,.18);
  border-radius: var(--radius);
}
.pagination .current { background: var(--c-dark-grey); color: var(--c-white); border-color: var(--c-dark-grey); }

/* The WordPress admin bar offsets the viewport; keep the sticky nav below it. */
body.admin-bar .mainnav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .mainnav { top: 46px; }
}

@media (max-width: 900px) {
  .page-block { padding-block: 56px 64px; }
  .post-list { margin-top: 36px; gap: 32px 24px; }
}