/* ==========================================================================
   Πολιτιστικός Σύλλογος Δωματίων «Το Γεφύρι» — design system
   Tokens derived from the village: seal navy, limestone paper, clay roof
   tiles, moss. Signature motif: the stone arch of the "Γεφύρι" bridge,
   repeated as an "arcade" rule and as niche-shaped cards.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..700,0..100,0..1&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  /* --- color tokens --- */
  --ink:        #1a2a3f;   /* deep indigo-navy, from the seal */
  --ink-2:      #24384f;
  --paper:      #f5f0e4;   /* warm limestone paper */
  --paper-2:    #ebe2cd;   /* deeper cream for alternating sections */
  --paper-3:    #e2d7bd;
  --stone:      #9c927b;   /* weathered stone */
  --stone-dark: #6f6754;
  --terracotta: #1b3776;   /* clay roof tile — primary accent */
  --terracotta-dark:#142b5f;
  --moss:       #57603f;   /* moss / pine — secondary accent */
  --cream-ink:  #efe8d8;

  /* --- type tokens --- */
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --fs-display-xl: clamp(2.6rem, 5.6vw, 5.4rem);
  --fs-display-l:  clamp(2.1rem, 4vw, 3.4rem);
  --fs-display-m:  clamp(1.5rem, 2.4vw, 2.05rem);
  --fs-lede:       clamp(1.1rem, 1.6vw, 1.375rem);
  --fs-body:       1.0625rem;
  --fs-small:      0.875rem;
  --fs-eyebrow:    0.78rem;

  --container: 1240px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --radius: 6px;
  --ease: cubic-bezier(.16,.8,.28,1);
}

/* --------------------------------- reset --------------------------------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.08; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--terracotta);
  outline-offset:3px;
}

.container{ 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:fixed; top:-60px; left:1rem; z-index:1000;
  background:var(--ink); color:var(--paper); padding:.75rem 1.25rem;
  border-radius:var(--radius); font-family:var(--font-mono); font-size:.85rem;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:1rem; }

/* --------------------------------- eyebrow -------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-mono); font-size:var(--fs-eyebrow);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--terracotta);
}
.eyebrow::before{
  content:""; width:1.6em; height:1px; background:currentColor; display:block;
}
.eyebrow.on-dark{ color:#e3b18c; }

/* --------------------------------- buttons -------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:.04em;
  padding:.95rem 1.6rem; border-radius:999px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .35s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn-primary{ background:var(--terracotta); color:var(--cream-ink); }
.btn-primary:hover{ background:var(--terracotta-dark); transform:translateY(-2px); }
.btn-ghost{ border-color:currentColor; color:inherit; background:transparent; }
.btn-ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); transform:translateY(-2px); }
.btn-ghost.on-dark{ color:var(--paper); }
.btn-ghost.on-dark:hover{ background:var(--paper); color:var(--ink); }
.btn svg{ width:1em; height:1em; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }

/* ---------------------------------- header -------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:1.35rem 0;
  color:var(--paper);
  transition:background-color .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), color .4s var(--ease);
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(15,18,14,.55) 0%, rgba(15,18,14,0) 100%);
  opacity:1; transition:opacity .4s var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1.25rem; }
.site-header.is-scrolled{
  background:rgba(245,240,228,.92);
  backdrop-filter:blur(10px);
  padding:.7rem 0;
  color:var(--ink);
  box-shadow:0 1px 0 rgba(26,42,63,.1);
}
.site-header.is-scrolled::before{ opacity:0; }

.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; flex-shrink:0; }
.brand img{ width:42px; height:42px; object-fit:contain; flex-shrink:0; }
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:.98rem; line-height:1.15; white-space:nowrap; }
.brand-name small{ display:block; font-family:var(--font-mono); font-weight:500; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; opacity:.8; white-space:normal; }

.main-nav{ display:flex; align-items:center; gap:1.5rem; }
.main-nav ul{ display:flex; gap:1.4rem; flex-wrap:nowrap; }
.main-nav a{
  text-decoration:none; font-size:.86rem; font-weight:500; position:relative; padding:.2rem 0; white-space:nowrap;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:currentColor;
  transition:right .3s var(--ease);
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ right:0; }
.main-nav a[aria-current="page"]{ font-weight:600; }

.nav-toggle{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:1px solid currentColor; border-radius:50%; cursor:pointer; color:inherit;
}
.nav-toggle svg{ width:18px; height:18px; }

@media (max-width: 1120px){
  .main-nav{
    position:fixed; inset:0; z-index:99; background:var(--ink); color:var(--paper);
    flex-direction:column; justify-content:center; align-items:flex-start;
    padding:2rem var(--gutter); gap:0;
    transform:translateX(100%); transition:transform .45s var(--ease);
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; gap:0; width:100%; }
  .main-nav ul li{ border-bottom:1px solid rgba(245,240,228,.14); width:100%; }
  .main-nav a{ display:block; padding:1.15rem 0; font-size:1.5rem; font-family:var(--font-display); }
  .main-nav a::after{ display:none; }
  .main-nav .btn{ margin-top:1.5rem; }
  .nav-toggle{ display:inline-flex; }
}

/* ---------------------------------- hero ---------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  color:var(--paper); overflow:hidden; background:var(--ink);
}
.hero-media{ position:absolute; inset:0; z-index:0; will-change:opacity, transform; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 65%; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,26,20,.35) 0%, rgba(18,22,17,.35) 50%, rgba(15,18,14,.9) 86%, var(--paper) 100%);
}
.hero-inner{ position:relative; z-index:1; padding-block:7.5rem 6.5rem; width:100%; will-change:opacity, transform; }
.hero-kicker{ color:#e9c9a6; }
.hero h1{
  font-size:var(--fs-display-xl); max-width:16ch; margin-top:1.1rem; color:var(--paper);
  font-variation-settings:"SOFT" 40, "WONK" 1;
}
.hero-lede{ font-size:var(--fs-lede); max-width:46ch; margin-top:1.5rem; color:#e7e1d2; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }
.hero-scroll{
  position:absolute; right:var(--gutter); bottom:2.2rem; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#cfc6ae;
}
.hero-scroll span{ writing-mode:vertical-rl; }
.hero-scroll::after{ content:""; width:1px; height:38px; background:currentColor; animation:scrollpulse 2.2s infinite var(--ease); }
@keyframes scrollpulse{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* -------------------------- arcade rule (signature) ------------------------
   A repeating stone-arch silhouette used as a section divider — echoes the
   voussoir arches of the village bridge. Pure CSS, no images required.     */
.arcade{
  --arch-size: 64px;
  height: calc(var(--arch-size) / 2 + 10px);
  width:100%;
  background:
    radial-gradient(circle at 50% 0, transparent calc(var(--arch-size)/2 - 1px), var(--arcade-color, var(--stone)) calc(var(--arch-size)/2)) 0 0 / var(--arch-size) 100% repeat-x;
  opacity:.55;
}
.arcade.tight{ --arch-size: 40px; }
.arcade.on-dark{ --arcade-color: var(--paper); opacity:.14; }
.arcade.on-paper2{ --arcade-color: var(--paper-2); }

/* ------------------------------ section basics ----------------------------- */
.section{ padding-block:clamp(4.5rem, 9vw, 7.5rem); }
.section.tight{ padding-block:clamp(3rem,6vw,4.5rem); }
.section.alt{ background:var(--paper-2); }
.section.dark{ background:var(--ink); color:var(--paper); }
.section.clay{ background:var(--terracotta); color:var(--cream-ink); }

.section-head{ max-width:44rem; }
.section-head h2{ font-size:var(--fs-display-l); margin-top:.9rem; }
.section-head .lede{ font-size:var(--fs-lede); margin-top:1.1rem; color:var(--stone-dark); max-width:38ch; }
.section.dark .section-head .lede{ color:#c9c3b3; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.center .eyebrow::before{ display:none; }

/* ------------------------------- pillar cards -------------------------------
   Arched "niche" cards — referencing the wall niches / shrine alcoves found
   throughout the village, and the bridge arch itself.                     */
.pillars{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:1.75rem; margin-top:3.5rem; }
.pillar-card{
  position:relative; background:var(--paper); border:1px solid var(--paper-3);
  border-radius: 140px 140px 14px 14px;
  padding:2.7rem 2rem 2.4rem; text-align:center;
  text-decoration:none; color:inherit; overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.pillar-card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px -24px rgba(26,42,63,.35); border-color:var(--terracotta); }
.pillar-icon{
  width:84px; height:84px; margin:0 auto 1.5rem; border-radius:50%;
  background:var(--ink); display:flex; align-items:center; justify-content:center;
  color:var(--paper);
}
.pillar-icon svg{ width:36px; height:36px; }
.pillar-card h3{ font-size:1.35rem; }
.pillar-card p{ margin-top:.8rem; color:var(--stone-dark); font-size:.96rem; }
.go{
  margin-top:1.4rem; display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--terracotta);
}
.go svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.pillar-card:hover .go svg, .event-card:hover .go svg{ transform:translateX(4px); }

/* ------------------------------ material strip ------------------------------ */
.materials{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:2.2rem; margin-top:3.5rem; }
.material{ text-align:center; }
.material-swatch{
  width:100%; aspect-ratio:1; border-radius:50%; margin-bottom:1.1rem;
  display:flex; align-items:center; justify-content:center; color:var(--paper);
  font-family:var(--font-display); font-size:1.6rem;
  box-shadow:inset 0 0 0 6px rgba(245,240,228,.14);
}
.material h4{ font-size:1rem; font-family:var(--font-body); font-weight:600; }
.material span{ display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--stone); margin-top:.3rem; text-transform:uppercase; }

/* --------------------------------- timeline --------------------------------- */
.timeline{ position:relative; margin-top:3rem; padding-left:2.4rem; border-left:1px solid var(--paper-3); }
.timeline-item{ position:relative; padding-bottom:2.6rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-2.51rem; top:.35rem; width:11px; height:11px; border-radius:50%;
  background:var(--terracotta); box-shadow:0 0 0 4px var(--paper), 0 0 0 5px var(--paper-3);
}
.timeline-year{ font-family:var(--font-mono); color:var(--terracotta); font-size:.95rem; letter-spacing:.04em; }
.timeline-item h3{ font-size:1.25rem; margin-top:.4rem; }
.timeline-item p{ margin-top:.5rem; color:var(--stone-dark); max-width:52ch; }

/* ---------------------------------- gallery ---------------------------------- */
.gallery{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.1rem; margin-top:3.5rem; }
.gallery figure{ margin:0; position:relative; overflow:hidden; border-radius:var(--radius); grid-column:span 3; aspect-ratio:4/3; }
.gallery figure.tall{ aspect-ratio:3/4; }
.gallery figure.wide{ grid-column:span 6; aspect-ratio:16/7; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.gallery figure:hover img{ transform:scale(1.06); }
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.2rem;
  background:linear-gradient(0deg, rgba(20,17,14,.82), transparent);
  color:var(--paper); font-family:var(--font-mono); font-size:.78rem; letter-spacing:.03em;
}
@media (max-width:760px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery figure{ grid-column:span 2 !important; }
}

/* --------------------------------- activity list -------------------------------- */
.activities{ display:grid; gap:1.4rem; margin-top:3.5rem; }
.activity{
  display:grid; grid-template-columns:220px 1fr; gap:2rem; align-items:center;
  background:var(--paper); border:1px solid var(--paper-3); border-radius:var(--radius); overflow:hidden;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.activity:hover{ border-color:var(--terracotta); box-shadow:0 20px 40px -28px rgba(26,42,63,.4); }
.activity-media{ aspect-ratio:1; overflow:hidden; }
.activity-media img{ width:100%; height:100%; object-fit:cover; }
.activity-body{ padding:1.6rem 2rem 1.6rem 0; }
.activity-tag{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--moss); }
.activity-body h3{ font-size:1.3rem; margin-top:.5rem; }
.activity-body p{ color:var(--stone-dark); margin-top:.6rem; max-width:60ch; }
@media (max-width:700px){
  .activity{ grid-template-columns:1fr; }
  .activity-media{ aspect-ratio:16/9; }
  .activity-body{ padding:1.4rem 1.4rem 1.8rem; }
}

/* ----------------------------------- events ------------------------------------ */
.events-filter{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:2.5rem; }
.events-filter button{
  padding:.55rem 1.15rem; border-radius:999px; border:1px solid var(--paper-3); background:var(--paper);
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em; cursor:pointer; color:var(--stone-dark);
  transition:all .25s var(--ease);
}
.events-filter button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.events-filter button:hover{ border-color:var(--ink); }

.event-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.6rem; margin-top:2.6rem; }
.event-card{
  background:var(--paper); border:1px solid var(--paper-3); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.event-card:hover{ transform:translateY(-5px); box-shadow:0 24px 44px -28px rgba(26,42,63,.4); }
.event-card.is-past{ opacity:.72; }
.event-media{ aspect-ratio:16/10; overflow:hidden; position:relative; }
.event-media img{ width:100%; height:100%; object-fit:cover; }
.event-date{
  position:absolute; top:1rem; left:1rem; background:var(--ink); color:var(--paper);
  font-family:var(--font-mono); text-align:center; padding:.5rem .7rem; border-radius:4px; line-height:1.1;
}
.event-date b{ display:block; font-size:1.15rem; }
.event-date span{ font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; }
.event-status{
  position:absolute; top:1rem; right:1rem; font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.08em; text-transform:uppercase; background:var(--terracotta); color:var(--cream-ink);
  padding:.35rem .6rem; border-radius:999px;
}
.event-card.is-past .event-status{ background:var(--stone); }
.event-body{ padding:1.5rem 1.5rem 1.7rem; flex:1; display:flex; flex-direction:column; }
.event-body h3{ font-size:1.2rem; }
.event-meta{ font-family:var(--font-mono); font-size:.75rem; color:var(--stone-dark); margin-top:.5rem; letter-spacing:.02em; }
.event-body p{ color:var(--stone-dark); margin-top:.7rem; flex:1; }

/* ----------------------------------- CTA banner ---------------------------------- */
.cta-banner{
  position:relative; padding-block:clamp(4.5rem,9vw,7rem); text-align:center; overflow:hidden;
  background:var(--ink); color:var(--paper);
}
.cta-banner h2{ font-size:var(--fs-display-l); max-width:18ch; margin-inline:auto; }
.cta-banner .lede{ margin:1.3rem auto 0; max-width:40ch; color:#cfc6ae; }
.cta-banner .hero-actions{ justify-content:center; margin-top:2.3rem; }

/* ----------------------------------- footer ---------------------------------- */
.site-footer{ background:var(--ink); color:var(--paper); padding-block:4rem 2rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; }
.footer-brand{ display:flex; align-items:center; gap:.8rem; text-decoration:none; color:inherit; margin-bottom:1.1rem; }
.footer-brand img{ width:46px; height:46px; object-fit:contain; }
.footer-brand strong{ font-family:var(--font-display); font-size:1.05rem; }
.footer p{ color:#b9b2a0; max-width:32ch; }
.footer-col h5{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#c9c3b3; margin-bottom:1rem; }
.footer-col a, .footer-col address{ display:block; font-style:normal; color:#d9d3c2; text-decoration:none; padding:.35rem 0; font-size:.92rem; }
.footer-col a:hover{ color:var(--paper); text-decoration:underline; }
.footer-bottom{
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(245,240,228,.14);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-family:var(--font-mono); font-size:.75rem; color:#a39c89;
}
.footer-social{ display:flex; gap:1rem; }
.footer-social a{ color:#d9d3c2; display:inline-flex; }
.footer-social a:hover{ color:var(--terracotta); }
.footer-social svg{ width:20px; height:20px; }
@media (max-width:800px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ------------------------------- reveal-on-scroll ------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ---------------------------------- misc pages ---------------------------------- */
.breadcrumb-hero{
  position:relative; padding-block:9.5rem 3.5rem; background:var(--ink); color:var(--paper); overflow:hidden;
}
.breadcrumb-hero .container{ position:relative; z-index:1; }
.breadcrumb-hero-bg{ position:absolute; inset:0; opacity:.34; }
.breadcrumb-hero-bg img{ width:100%; height:100%; object-fit:cover; }
.breadcrumb-hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,42,63,.2), var(--ink) 92%); }
.breadcrumb-hero h1{ font-size:var(--fs-display-l); color:var(--paper); max-width:22ch; margin-top:1rem; }
.breadcrumb-hero .lede{ margin-top:1.2rem; max-width:52ch; color:#d7d0bd; font-size:var(--fs-lede); }

/* ------------------------------- back link --------------------------------- */
.back-link{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:inherit;
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.04em; opacity:.85;
  transition:opacity .25s var(--ease), gap .25s var(--ease);
}
.back-link svg{ width:15px; height:15px; }
.back-link:hover{ opacity:1; gap:.7rem; }

/* --------------------------- event detail meta row -------------------------- */
.event-meta-row{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.event-meta-row .pill{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius:999px;
  background:rgba(245,240,228,.1); border:1px solid rgba(245,240,228,.22);
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.02em;
}
.event-meta-row .pill svg{ width:15px; height:15px; flex-shrink:0; }
.event-meta-row .pill.status-upcoming{ background:var(--terracotta); border-color:var(--terracotta); color:var(--cream-ink); }
.event-meta-row .pill.status-past{ background:rgba(245,240,228,.16); }

/* ------------------------------ related events ------------------------------ */
.related-events .event-grid{ margin-top:2.6rem; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.two-col.reverse .two-col-media{ order:2; }
.two-col-media img{ border-radius:var(--radius); }
.two-col h2{ font-size:var(--fs-display-l); }
.two-col .lede{ margin-top:1.2rem; color:var(--stone-dark); font-size:1.05rem; }
@media (max-width:860px){
  .two-col{ grid-template-columns:1fr; }
  .two-col.reverse .two-col-media{ order:0; }
}

.pull-quote{
  font-family:var(--font-display); font-size:clamp(1.4rem,2.6vw,2rem); font-weight:500;
  max-width:34ch; line-height:1.35; color:var(--ink); font-variation-settings:"SOFT" 30;
  position:relative; padding-left:1.6rem; border-left:3px solid var(--terracotta);
}
.pull-quote cite{ display:block; font-style:normal; font-family:var(--font-mono); font-size:.8rem; color:var(--stone-dark); margin-top:1rem; letter-spacing:.04em; }

/* contact page */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); margin-top:3rem; align-items:start; }
.contact-cards{ display:grid; gap:1.1rem; }
.contact-card{
  display:flex; gap:1.1rem; align-items:flex-start; padding:1.5rem; background:var(--paper);
  border:1px solid var(--paper-3); border-radius:var(--radius);
}
.contact-card .ic{
  width:46px; height:46px; border-radius:50%; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-card .ic svg{ width:20px; height:20px; }
.contact-card h3{ font-size:1rem; font-family:var(--font-body); font-weight:600; }
.contact-card p, .contact-card a{ color:var(--stone-dark); text-decoration:none; font-size:.95rem; margin-top:.3rem; display:inline-block; }
.contact-card a:hover{ color:var(--terracotta); }
.map-frame{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--paper-3); aspect-ratio:4/3; }
.map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(.25) contrast(1.05); }

.social-follow{ display:flex; gap:.9rem; margin-top:1.6rem; }
.social-follow a{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--paper-3);
  display:flex; align-items:center; justify-content:center; color:var(--ink); text-decoration:none;
  transition:all .3s var(--ease);
}
.social-follow a:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.social-follow svg{ width:19px; height:19px; }