/* =========================================================
   Faraway Postcards — design system
   A vintage-postcard, editorial-luxury theme.
   Palette: parchment paper, deep petrol ink, brass, postmark red.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Newsreader:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --paper: #f3ead9;
  --paper-deep: #ece0c9;
  --paper-line: #e3d4b8;
  --card: #faf5ea;
  --ink: #1b2a2c;
  --ink-soft: #3c4e4f;
  --petrol: #163b41;
  --petrol-deep: #0c2529;
  --petrol-mid: #1f5058;
  --brass: #a97a3f;
  --brass-light: #c99a5c;
  --brass-pale: #e9d3ab;
  --stamp-red: #a3402b;
  --stamp-blue: #2c4f6b;
  --shadow: 0 30px 60px -25px rgba(12, 26, 29, 0.35);
  --shadow-sm: 0 10px 24px -12px rgba(12, 26, 29, 0.28);
  --radius: 2px;
  --maxw: 1240px;
  --serif-display: 'Fraunces', 'Iowan Old Style', serif;
  --serif-body: 'Newsreader', 'Georgia', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{ font-family: var(--serif-display); font-weight: 500; margin: 0 0 .5em; letter-spacing: -0.01em; }
p{ margin: 0 0 1.1em; }
ul{ margin:0 0 1.1em; padding-left: 1.3em; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }

/* subtle paper grain texture */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 0;
  opacity: .5;
  background-image:
    radial-gradient(rgba(28,43,44,.05) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}

/* =============== kicker / labels =============== */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 600;
}
.kicker::before{
  content:"";
  width: 22px; height: 1px;
  background: var(--brass);
  display:inline-block;
}

/* =============== postmark stamp graphic =============== */
.postmark{
  --size: 88px;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  border: 1.5px solid currentColor;
  position: relative;
  display:flex; align-items:center; justify-content:center;
  color: var(--stamp-red);
  flex: none;
}
.postmark::before{
  content:"";
  position:absolute; inset: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity:.6;
}
.postmark svg{ width: 100%; height: 100%; }
.postmark .pm-center{
  font-family: var(--serif-display);
  font-style: italic;
  font-size: .82rem;
  text-align:center;
  line-height:1.05;
}

/* =============== dotted / perforation divider =============== */
.perforation{
  height: 0;
  border-top: 1.5px dashed rgba(27,42,44,.28);
  margin: 0;
}
.airmail-edge{
  height: 6px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--stamp-red) 0 10px,
    var(--paper) 10px 20px,
    var(--stamp-blue) 20px 30px,
    var(--paper) 30px 40px
  );
  opacity: .9;
}

/* =============== nav =============== */
.site-nav{
  position: sticky; top:0; z-index: 100;
  background: rgba(243,234,217,.86);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--paper-line);
  transition: background .3s ease, box-shadow .3s ease;
}
.site-nav.is-scrolled{ box-shadow: var(--shadow-sm); }
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px clamp(20px,4vw,56px);
  max-width: var(--maxw); margin:0 auto;
  gap: 20px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family: var(--serif-display);
}
.brand .mark{
  width: 38px; height: 38px; border-radius:50%;
  border: 1.4px solid var(--petrol);
  display:flex; align-items:center; justify-content:center;
  position: relative;
  color: var(--petrol);
}
.brand .mark::before{ content:""; position:absolute; inset:4px; border:1px solid var(--petrol); border-radius:50%; opacity:.55;}
.brand .mark svg{ width: 18px; height: 18px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-text .name{ font-size: 1.28rem; font-weight:600; color: var(--petrol-deep); }
.brand-text .name em{ font-style: italic; color: var(--brass); font-weight:500; }
.brand-text .tag{ font-family: var(--sans); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color: var(--ink-soft); margin-top:2px;}

.nav-links{ display:flex; align-items:center; gap: 34px; font-family: var(--sans); }
.nav-links a{
  font-size: .82rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  color: var(--ink-soft); position:relative; padding: 6px 0;
}
.nav-links a:hover, .nav-links a.active{ color: var(--petrol-deep); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background: var(--brass);
}
.nav-cta{
  font-family: var(--sans); font-size:.78rem; letter-spacing:.06em; font-weight:700;
  text-transform:uppercase;
  background: var(--petrol); color: var(--paper) !important;
  padding: 11px 22px; border-radius: 40px;
  border: 1px solid var(--petrol);
  transition: transform .25s ease, background .25s ease;
  white-space:nowrap;
}
.nav-cta:hover{ background: var(--petrol-deep); transform: translateY(-1px); }

.nav-toggle{ display:none; }

/* =============== buttons =============== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--sans); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  padding: 14px 28px; border-radius: 40px; border: 1px solid transparent;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  cursor:pointer;
}
.btn-brass{ background: var(--brass); color: var(--paper); }
.btn-brass:hover{ background: var(--petrol-deep); transform: translateY(-2px); }
.btn-outline{ border-color: currentColor; color: var(--petrol-deep); background: transparent; }
.btn-outline:hover{ background: var(--petrol-deep); color: var(--paper); border-color: var(--petrol-deep); }
.btn-ghost-light{ border-color: rgba(243,234,217,.55); color: var(--paper); }
.btn-ghost-light:hover{ background: var(--paper); color: var(--petrol-deep); }

/* =============== hero =============== */
.hero{
  position: relative;
  min-height: 92vh;
  display:flex; align-items:flex-end;
  color: var(--paper);
  overflow:hidden;
  background: var(--petrol-deep);
}
.hero .hero-bg{
  position:absolute; inset:0; z-index:0;
}
.hero .hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero .hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(12,37,41,.35) 0%, rgba(12,37,41,.35) 35%, rgba(12,37,41,.88) 100%),
    linear-gradient(90deg, rgba(12,37,41,.55) 0%, rgba(12,37,41,.05) 55%);
}
.hero-content{
  position:relative; z-index:2;
  width:100%;
  padding: 160px clamp(20px,4vw,56px) 90px;
  max-width: var(--maxw); margin:0 auto;
}
.hero .kicker{ color: var(--brass-light); margin-bottom: 22px; }
.hero .kicker::before{ background: var(--brass-light); }
.hero h1{
  font-size: clamp(2.6rem, 5.6vw, 5.1rem);
  line-height: 1.03;
  max-width: 16ch;
  color: var(--paper);
}
.hero h1 em{ color: var(--brass-light); font-style: italic; }
.hero .lede{
  font-family: var(--serif-body); font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: rgba(243,234,217,.86);
  max-width: 46ch; margin: 22px 0 36px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-stamp{
  position:absolute; z-index:2; top: 130px; right: clamp(20px,4vw,56px);
  color: var(--brass-light);
}

.scroll-cue{
  position:absolute; z-index:2; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: var(--sans); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color: rgba(243,234,217,.7);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue .line{ width:1px; height:34px; background: rgba(243,234,217,.5); animation: pulseLine 2.4s ease-in-out infinite; }
@keyframes pulseLine{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* =============== sections =============== */
section{ position: relative; z-index:1; }
.section{ padding: clamp(64px, 9vw, 128px) 0; }
.section-head{ max-width: 720px; margin-bottom: 56px; }
.section-head h2{ font-size: clamp(2rem, 3.4vw, 3rem); margin-top: 16px; }
.section-head .lede{ font-size: 1.12rem; color: var(--ink-soft); font-style: italic; font-family: var(--serif-body); margin-top: 14px;}
.section-dark{ background: var(--petrol-deep); color: var(--paper); }
.section-dark .kicker{ color: var(--brass-light); }
.section-dark .kicker::before{ background: var(--brass-light); }
.section-dark h2{ color: var(--paper); }
.section-paper2{ background: var(--paper-deep); }

/* =============== postcard split block (About / Philosophy) =============== */
.postcard{
  display:grid; grid-template-columns: 1.05fr 1fr;
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow:hidden;
  position:relative;
}
.postcard-photo{ position:relative; min-height: 480px; }
.postcard-photo img{ width:100%; height:100%; object-fit:cover; }
.postcard-message{
  padding: clamp(32px,4vw,64px);
  position:relative;
  color: var(--ink);
  background-image: repeating-linear-gradient(
    var(--card), var(--card) 38px, var(--paper-line) 39px, var(--paper-line) 40px
  );
}
.postcard-message .msg-inner{ max-width: 46ch; }
.postcard-message h3{ font-size: clamp(1.5rem,2.4vw,2rem); color: var(--ink); }
.postcard-message p{ font-family: var(--serif-body); color: var(--ink); }
.postcard-divider{
  position:absolute; left: 0; top:0; bottom:0; width:1px;
  background-image: repeating-linear-gradient(to bottom, rgba(27,42,44,.3) 0 8px, transparent 8px 16px);
}
.postcard-stampcorner{
  position:absolute; top: 28px; right: 28px;
  display:flex; flex-direction: column; align-items:center; gap: 10px;
}
.postcard-stamp{
  width: 74px; height: 92px;
  border: 2px dashed var(--brass);
  padding: 6px;
  display:flex; align-items:center; justify-content:center;
  color: var(--brass);
  background: var(--paper-deep);
  font-family: var(--serif-display); font-style:italic; font-size:.7rem; text-align:center;
  transform: rotate(4deg);
}

/* =============== stat row =============== */
.stat-row{ display:flex; flex-wrap:wrap; gap: clamp(28px,5vw,64px); margin-top: 48px; }
.stat{ }
.stat .num{ font-family: var(--serif-display); font-size: clamp(2.2rem,3.4vw,3rem); color: var(--brass-light); font-style: italic; }
.stat .label{ font-family: var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: rgba(243,234,217,.75); margin-top:6px; }

/* =============== philosophy grid =============== */
.value-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--paper-line); border: 1px solid var(--paper-line); margin-top: 8px;}
.value-card{ background: var(--card); padding: 34px 28px; }
.value-card .vn{ font-family: var(--serif-display); font-style:italic; color: var(--brass); font-size: 1.6rem; }
.value-card h4{ margin-top: 14px; font-size: 1.12rem; }
.value-card p{ font-size:.95rem; color: var(--ink-soft); margin:0; }
.value-closing{
  margin: 28px 0 0; text-align:center;
  font-family: var(--serif-display); font-style: italic; color: var(--petrol-mid);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
}

/* =============== region filter chips =============== */
.filters{ display:flex; flex-wrap:wrap; gap: 10px; margin-bottom: 44px; }
.filter-chip{
  font-family: var(--sans); font-size:.74rem; letter-spacing:.07em; text-transform:uppercase; font-weight:600;
  padding: 9px 18px; border-radius: 30px; border: 1px solid var(--paper-line);
  background: var(--card); color: var(--ink-soft);
  cursor:pointer; transition: all .2s ease;
}
.filter-chip:hover{ border-color: var(--brass); color: var(--petrol-deep); }
.filter-chip.active{ background: var(--petrol); border-color: var(--petrol); color: var(--paper); }

/* =============== article / journal cards grid =============== */
.card-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 34px 28px; }
.card-grid.featured-grid{ grid-template-columns: 1.4fr 1fr; gap: 28px; }

.p-card{
  position:relative;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: transform .35s ease, box-shadow .35s ease;
  display:flex; flex-direction:column;
}
.p-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.p-card .thumb{ position:relative; aspect-ratio: 4/3; overflow:hidden; }
.p-card.wide .thumb{ aspect-ratio: 16/10; }
.p-card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.p-card:hover .thumb img{ transform: scale(1.06); }
.p-card .thumb::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,37,41,0) 55%, rgba(12,37,41,.55) 100%);
}
.p-card .region-badge{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family: var(--sans); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  background: rgba(243,234,217,.92); color: var(--petrol-deep);
  padding: 6px 12px; border-radius: 30px;
}
.p-card .body{ padding: 22px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.p-card .kicker{ font-size:.66rem; }
.p-card h3{ font-size: 1.28rem; line-height:1.28; }
.p-card .excerpt{ color: var(--ink-soft); font-size:.92rem; margin:0; }
.p-card .readmore{
  margin-top:auto; padding-top: 10px;
  font-family: var(--sans); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color: var(--brass); display:flex; align-items:center; gap:8px;
}
.p-card .readmore svg{ width:14px; height:14px; transition: transform .25s ease; }
.p-card:hover .readmore svg{ transform: translateX(4px); }

/* =============== footer =============== */
.site-footer{ background: var(--petrol-deep); color: rgba(243,234,217,.86); padding-top: 80px; }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(243,234,217,.14); }
.footer-brand .brand-text .name{ color: var(--paper); }
.footer-brand p{ color: rgba(243,234,217,.65); max-width: 34ch; margin-top: 16px; font-size:.95rem; }
.footer-col h5{ font-family: var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--brass-light); margin: 0 0 18px; }
.footer-col a{ display:block; color: rgba(243,234,217,.78); font-family: var(--sans); font-size:.88rem; margin-bottom: 12px; transition: color .2s ease; }
.footer-col a:hover{ color: var(--paper); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding: 26px 0 34px; font-family: var(--sans); font-size:.78rem; color: rgba(243,234,217,.55); flex-wrap:wrap; gap:12px;}

/* =============== article page =============== */
.article-hero{ min-height: 78vh; }
.article-meta-row{
  display:flex; align-items:center; gap: 18px; flex-wrap:wrap;
  font-family: var(--sans); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color: rgba(243,234,217,.75);
  margin-bottom: 18px;
}
.article-meta-row .dot{ width:4px; height:4px; border-radius:50%; background: currentColor; }

.article-body-wrap{ display:grid; grid-template-columns: 220px minmax(0,720px); gap: 64px; max-width: 1040px; margin: 0 auto; padding: 0 clamp(20px,4vw,56px); }
.article-toc{ position:sticky; top: 110px; align-self:start; }
.article-toc .kicker{ margin-bottom: 16px; }
.article-toc ol{ list-style:none; margin:0; padding:0; border-left: 1px solid var(--paper-line); }
.article-toc li{ margin: 0; }
.article-toc a{
  display:block; padding: 8px 0 8px 18px; margin-left:-1px;
  border-left: 1px solid transparent;
  font-family: var(--sans); font-size:.82rem; color: var(--ink-soft); line-height:1.4;
}
.article-toc a:hover{ color: var(--petrol-deep); }
.article-toc a.active{ border-left-color: var(--brass); color: var(--petrol-deep); font-weight:600; }

.prose{ font-family: var(--serif-body); font-size: 1.14rem; color: var(--ink); }
.prose > .lede-p{ font-size: 1.28rem; font-family: var(--serif-body); font-style: italic; color: var(--ink-soft); }
.prose .dropcap:first-letter{
  float:left; font-family: var(--serif-display); font-style: italic; font-size: 4.6rem; line-height: .78;
  padding: 6px 10px 0 0; color: var(--brass);
}
.prose h2{ font-size: 1.7rem; margin-top: 2.4em; padding-top: .2em; scroll-margin-top: 120px; }
.prose h2 .hnum{ color: var(--brass); font-style:italic; margin-right: 10px; }
.prose h3{ font-size: 1.28rem; margin-top: 1.8em; color: var(--petrol-mid); scroll-margin-top: 120px;}
.prose p{ margin-bottom: 1.3em; }
.prose ul{ margin-bottom: 1.3em; }
.prose ul li{ margin-bottom: .5em; }
.prose ul li::marker{ color: var(--brass); }

blockquote.pull{
  margin: 2.6em 0; padding: .2em 0 .2em 34px;
  border-left: 3px solid var(--brass);
  font-family: var(--serif-display); font-style: italic;
  font-size: 1.5rem; line-height:1.4; color: var(--petrol-deep);
}

.inline-figure{ margin: 2.6em 0; }
.inline-figure img{ width:100%; }
.inline-figure figcaption{ margin-top:10px; font-family: var(--sans); font-size:.78rem; color: var(--ink-soft); letter-spacing:.02em;}

.article-end{
  max-width: 720px; margin: 80px auto 0; padding: 40px clamp(20px,4vw,56px) 0;
  border-top: 1.5px dashed var(--paper-line);
  text-align:center;
}
.signoff{ font-family: var(--serif-display); font-style: italic; font-size: 1.3rem; color: var(--petrol-mid); }

.related-strip{ background: var(--paper-deep); }

/* =============== journal / listing hero (non image) =============== */
.page-hero{
  background: var(--petrol-deep); color: var(--paper);
  padding: 150px clamp(20px,4vw,56px) 70px;
  position:relative; overflow:hidden;
}
.page-hero h1{ font-size: clamp(2.2rem,4.6vw,3.6rem); max-width: 18ch;}
.page-hero .lede{ font-family: var(--serif-body); font-style:italic; color: rgba(243,234,217,.82); max-width:52ch; font-size:1.1rem; margin-top:16px;}
.page-hero .map-texture{
  position:absolute; inset:0; opacity:.14; mix-blend-mode: luminosity;
  background-size: cover; background-position: center;
}

/* =============== unified photo treatment =============== */
.photo-filter{
  filter: saturate(.86) contrast(1.07) brightness(1.03) sepia(.08);
}
.tinted{ position:relative; }
.tinted::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(160deg, rgba(22,59,65,.22), rgba(169,122,63,.14));
  mix-blend-mode: multiply;
  pointer-events:none;
}

/* =============== reveal animation =============== */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform: none; }

/* =============== about page specifics =============== */
.about-quote{
  max-width: 900px; margin: 0 auto; text-align:center;
  font-family: var(--serif-display); font-style: italic; font-weight:400;
  font-size: clamp(1.6rem, 3vw, 2.4rem); line-height:1.4; color: var(--paper);
}
.timeline-quote-mark{ color: var(--brass); font-size: 1.6em; }

.mini-cta{
  background: var(--brass); color: var(--paper);
  padding: clamp(56px,8vw,96px) 0; text-align:center;
}
.mini-cta h2{ color: var(--paper); }
.mini-cta .lede{ color: rgba(243,234,217,.9); }

/* =============== responsive =============== */
@media (max-width: 1080px){
  .card-grid{ grid-template-columns: repeat(2,1fr); }
  .card-grid.featured-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .value-grid{ grid-template-columns: repeat(2,1fr); }
  .article-body-wrap{ grid-template-columns: 1fr; }
  .article-toc{ display:none; }
}
@media (max-width: 760px){
  .nav-cta{ display:none; }
  .nav-links{
    position: absolute; top: 100%; left:0; right:0; z-index: 90;
    background: var(--paper); flex-direction:column; align-items:flex-start;
    padding: 26px clamp(20px,6vw,40px) 34px; gap: 20px;
    opacity:0; visibility:hidden; transform: translateY(-8px);
    transition: transform .3s ease, opacity .3s ease, visibility .3s;
    border-top: 1px solid var(--paper-line);
    border-bottom: 1px solid var(--paper-line);
    box-shadow: var(--shadow-sm);
  }
  .nav-links.open{ opacity:1; visibility:visible; transform: translateY(0); }
  .nav-links .nav-cta{ display:inline-flex; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; justify-content:center; align-items:center;
    width: 40px; height: 40px; border:1px solid var(--paper-line); border-radius:50%; background:none; cursor:pointer;
    flex: none;
  }
  .nav-toggle span{ width:16px; height:1.4px; background: var(--petrol-deep); display:block; }
  .postcard{ grid-template-columns: 1fr; }
  .postcard-divider{ display:none; }
  .card-grid{ grid-template-columns: 1fr; }
  .value-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; }
  .hero-content{ padding-top: 130px; }
  .hero-stamp{ display:none; }
}

/* =============== ad placement =============== */
.ad-placement{ width:100%; max-width: var(--maxw); margin: 0 auto; padding: 8px 0 4px; }
.ad-placement::before{
  content:"Advertisement";
  display:block; text-align:center;
  font-family: var(--sans); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--ink-soft); opacity:.55; margin-bottom: 14px;
}
.ad-placement-inner{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.ad-unit{ min-width:180px; min-height:180px; }