/* ============================================
   HocMon.org — Editorial Saigon Gateway
   Palette: paper cream + ink + scarlet + ochre + olive + gold
   Fonts: Playfair Display (display) + Manrope (body) + JetBrains Mono
   ============================================ */

:root {
  --ink:#0d0d0d;
  --ink-soft:#1c1c1c;
  --ink-mid:#2d2520;
  --paper:#f5f1e8;
  --paper-2:#efe9da;
  --paper-3:#e6dec9;
  --line-soft:#cbc2ad;
  --line:#9a8d70;
  --scarlet:#c33724;
  --scarlet-deep:#8e2317;
  --ochre:#c87f2a;
  --ochre-deep:#9a5e1c;
  --olive:#4a5340;
  --olive-deep:#2f3429;
  --gold:#d4a437;
  --gold-deep:#a07c1c;
  --serif:"Playfair Display",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --container:1300px;
  --gutter:clamp(20px,5vw,52px);
  --shadow:0 28px 60px -28px rgba(13,13,13,.4);
  --shadow-sm:0 12px 26px -14px rgba(13,13,13,.25);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;font-weight:400;line-height:1.65;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color .2s}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}

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

/* ============================================
   TOPBAR — newspaper masthead
   ============================================ */
.masthead{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .25s ease;
}
.masthead.is-scrolled{box-shadow:0 1px 0 var(--line-soft), var(--shadow-sm)}
.masthead__inner{
  display:flex;align-items:center;gap:18px;padding:14px 0;
}
.brand{display:flex;align-items:center;gap:14px;color:var(--ink)}
.brand__mark{
  width:42px;height:42px;border-radius:8px;display:block;
  border:1px solid var(--line-soft);
}
.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__name{
  font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:24px;color:var(--ink);letter-spacing:-.005em;
}
.brand__meta{
  font-family:var(--mono);font-size:10px;color:var(--scarlet);
  text-transform:uppercase;letter-spacing:.22em;font-weight:600;
}
.nav{display:none;gap:0;margin-left:auto;align-items:center}
.nav a{
  padding:10px 16px;font-weight:500;font-size:14px;color:var(--ink-soft);
  border-bottom:2px solid transparent;
  transition:border-color .2s, color .2s;
  letter-spacing:.005em;
}
.nav a:hover{color:var(--scarlet);border-bottom-color:var(--scarlet)}
.nav__sep{width:1px;height:18px;background:var(--line-soft);margin:0 6px}

.cta{
  display:none;align-items:center;gap:8px;
  padding:12px 22px;
  background:var(--scarlet);color:var(--paper);font-weight:600;font-size:14px;
  border:none;letter-spacing:.005em;
  transition:background .2s, transform .2s;
}
.cta:hover{background:var(--scarlet-deep);transform:translateY(-1px)}
.cta svg{width:14px;height:14px}

.hamburger{
  margin-left:auto;
  width:42px;height:42px;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
}
.hamburger:hover{background:var(--scarlet)}

@media (min-width:960px){
  .nav{display:flex}
  .cta{display:inline-flex;margin-left:8px}
  .hamburger{display:none}
}

/* DRAWER */
.drawer{position:fixed;inset:0;z-index:90;display:none}
.drawer[aria-hidden="false"]{display:block}
.drawer__scrim{position:absolute;inset:0;background:rgba(13,13,13,.6);backdrop-filter:blur(4px)}
.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(86%,380px);
  background:var(--paper);color:var(--ink);
  padding:24px 24px 32px;
  display:flex;flex-direction:column;gap:2px;
  box-shadow:-30px 0 60px -20px rgba(13,13,13,.3);
}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:18px;margin-bottom:14px;
  border-bottom:1px solid var(--line-soft);
}
.drawer__brand{font-family:var(--serif);font-style:italic;font-size:24px;font-weight:700;color:var(--ink)}
.drawer__close{width:38px;height:38px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center}
.drawer a{
  display:flex;align-items:center;gap:14px;
  padding:14px 6px;color:var(--ink);font-weight:500;font-size:15px;
  border-bottom:1px solid var(--line-soft);
  transition:color .15s, padding-left .2s;
}
.drawer a:hover{color:var(--scarlet);padding-left:14px}
.drawer a svg{width:18px;height:18px;color:var(--scarlet);opacity:.8}
.drawer__cta{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:18px;background:var(--scarlet);color:var(--paper);
  font-weight:600;letter-spacing:.005em;
}
.drawer__cta:hover{background:var(--scarlet-deep);color:var(--paper)}
.drawer__cta svg{width:16px;height:16px}

/* ============================================
   ISSUE BANNER — newspaper-style date strip
   ============================================ */
.issue-strip{
  background:var(--ink);color:var(--paper);
  padding:9px 0;
  font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.18em;
  border-bottom:3px solid var(--scarlet);
}
.issue-strip__inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.issue-strip__inner span{display:flex;align-items:center;gap:8px}
.issue-strip__inner span::before{
  content:"";display:inline-block;width:6px;height:6px;background:var(--scarlet);border-radius:50%;
}
.issue-strip__inner span:nth-child(2)::before{background:var(--gold)}
.issue-strip__inner span:nth-child(3)::before{background:var(--olive)}
@media (max-width:640px){
  .issue-strip__inner span:nth-child(3){display:none}
}

/* ============================================
   HERO — split editorial + photo
   ============================================ */
.hero{
  position:relative;
  border-bottom:1px solid var(--line-soft);
  background:var(--paper);
}
.hero__grid{
  display:grid;gap:0;grid-template-columns:1fr;
}
@media (min-width:880px){.hero__grid{grid-template-columns:1.05fr 1fr;min-height:80vh}}
.hero__copy{padding:60px var(--gutter) 56px;display:flex;flex-direction:column;justify-content:center}
@media (min-width:880px){.hero__copy{padding:84px var(--gutter) 76px}}

.hero__kicker{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  padding:6px 14px;
  background:var(--scarlet);color:var(--paper);
  font-family:var(--mono);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.22em;
  margin-bottom:24px;
}
.hero__kicker::before{
  content:"";width:6px;height:6px;background:var(--paper);border-radius:50%;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.hero__title{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(56px,9vw,128px);line-height:.92;letter-spacing:-.022em;
  color:var(--ink);margin:0 0 12px;
}
.hero__title em{
  display:block;font-style:italic;font-weight:500;
  color:var(--ochre);margin-top:6px;letter-spacing:-.025em;
}
.hero__sub{
  font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-soft);font-weight:600;margin:24px 0 22px;
  display:flex;align-items:center;gap:14px;
}
.hero__sub::before{
  content:"";width:36px;height:2px;background:var(--scarlet);
}
.hero__lede{
  font-family:var(--serif);font-size:clamp(20px,1.7vw,24px);
  line-height:1.55;color:var(--ink);max-width:54ch;
  margin:0 0 30px;font-weight:400;
}
.hero__lede strong{font-weight:700;color:var(--scarlet-deep)}
.hero__lede em{color:var(--ochre-deep);font-style:italic}

.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:36px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 28px;
  font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.005em;
  border:1px solid transparent;
  transition:transform .2s, background .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:14px;height:14px}
.btn--scarlet{background:var(--scarlet);color:var(--paper);border-color:var(--scarlet-deep)}
.btn--scarlet:hover{background:var(--scarlet-deep)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--paper)}
.btn--gold{background:var(--gold);color:var(--ink);border-color:var(--gold-deep)}
.btn--gold:hover{background:var(--gold-deep);color:var(--paper)}

.hero__stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px;
  border-top:1px solid var(--line-soft);
  padding-top:28px;
}
@media (min-width:580px){.hero__stats{grid-template-columns:repeat(4,1fr)}}
.hero__stat .num{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(22px,2.6vw,32px);
  color:var(--scarlet);line-height:1;letter-spacing:-.01em;
}
.hero__stat .num em{font-style:normal;color:var(--ink);opacity:.55;font-weight:500;font-size:.7em}
.hero__stat .lbl{
  font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--ink-soft);
  margin-top:8px;font-weight:600;display:block;line-height:1.4;
}

.hero__visual{
  position:relative;background:var(--ink);min-height:340px;
  overflow:hidden;
}
.hero__visual img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero__visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(13,13,13,0) 50%, rgba(13,13,13,.55) 100%);
}
.hero__caption{
  position:absolute;left:24px;right:24px;bottom:18px;
  font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.18em;color:var(--paper);
  z-index:2;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
.hero__caption b{color:var(--gold)}

/* ============================================
   TICKER / RUNNING FACTS
   ============================================ */
.ticker{
  background:var(--ink);color:var(--paper);
  padding:18px 0;overflow:hidden;
  border-top:3px solid var(--scarlet);border-bottom:1px solid var(--ink-soft);
}
.ticker__track{
  display:flex;gap:48px;width:max-content;
  animation:slide 50s linear infinite;
}
.ticker__item{
  display:flex;align-items:center;gap:48px;white-space:nowrap;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(18px,2vw,28px);
  letter-spacing:-.005em;
}
.ticker__item span:nth-child(odd){color:var(--paper)}
.ticker__item span:nth-child(even){
  color:var(--gold);font-style:normal;font-family:var(--mono);
  font-size:.55em;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================
   SECTION
   ============================================ */
.section{padding:96px 0;position:relative}
@media (max-width:640px){.section{padding:64px 0}}
.section--paper-2{background:var(--paper-2)}
.section--ink{background:var(--ink);color:var(--paper)}
.section--ink h2{color:var(--paper)}

.section__head{margin-bottom:54px;max-width:80ch}
.section__head--center{margin-left:auto;margin-right:auto;text-align:center}
.section__kicker{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.22em;
  color:var(--scarlet);margin-bottom:18px;font-weight:600;
}
.section__kicker::before{
  content:"";width:36px;height:2px;background:var(--scarlet);
}
.section--ink .section__kicker{color:var(--gold)}
.section--ink .section__kicker::before{background:var(--gold)}
.section__head--center .section__kicker{justify-content:center}

.section__title{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(36px,5.5vw,72px);line-height:1.0;letter-spacing:-.022em;
  color:var(--ink);margin:0 0 20px;
}
.section__title em{font-style:italic;font-weight:500;color:var(--ochre)}
.section--ink .section__title em{color:var(--gold)}
.section__lede{font-size:18px;line-height:1.65;color:inherit;max-width:62ch;font-weight:400;opacity:.92}
.section__head--center .section__lede{margin-left:auto;margin-right:auto}

/* ============================================
   INTRO — newspaper 2-col body
   ============================================ */
.intro__grid{display:grid;gap:48px;grid-template-columns:1fr;align-items:start}
@media (min-width:880px){.intro__grid{grid-template-columns:1.4fr 1fr;gap:72px}}

.intro__copy p{
  font-size:17px;line-height:1.75;margin:0 0 20px;color:var(--ink);
  font-weight:400;
}
.intro__copy p:first-of-type{
  font-size:21px;line-height:1.55;
  font-family:var(--serif);font-weight:400;color:var(--ink);
}
.intro__copy p:first-of-type::first-letter{
  font-family:var(--serif);font-weight:900;
  font-size:5.6rem;line-height:.85;
  float:left;padding:6px 14px 0 0;
  color:var(--scarlet);
}
.intro__copy strong{font-weight:700;color:var(--scarlet-deep)}
.intro__copy em{font-style:italic;color:var(--ochre-deep)}

.factsheet{
  background:var(--paper-3);color:var(--ink);
  padding:36px;position:relative;
  border:1px solid var(--line-soft);
}
.factsheet::before{
  content:"";position:absolute;top:-1px;left:-1px;width:80px;height:6px;
  background:var(--scarlet);
}
.factsheet__title{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.22em;
  color:var(--scarlet);font-weight:700;margin:0 0 22px;
}
.factsheet dl{margin:0;display:grid;gap:0}
.factsheet .row{
  display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding:14px 0;border-bottom:1px dashed var(--line-soft);
}
.factsheet .row:last-child{border-bottom:0;padding-bottom:0}
.factsheet dt{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-soft);font-weight:600;align-self:center;
}
.factsheet dd{
  margin:0;font-family:var(--serif);font-size:17px;font-weight:600;color:var(--ink);
  text-align:right;letter-spacing:-.005em;line-height:1.3;
}
.factsheet dd em{color:var(--scarlet);font-style:italic;font-weight:600}

/* ============================================
   THESIS GRID (Tiềm năng)
   ============================================ */
.thesis__grid{
  display:grid;gap:0;grid-template-columns:1fr;
  border-top:1px solid var(--line-soft);
  border-left:1px solid var(--line-soft);
}
@media (min-width:680px){.thesis__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.thesis__grid{grid-template-columns:repeat(3,1fr)}}
.section--ink .thesis__grid{border-color:var(--ink-soft)}

.thesis-card{
  padding:36px 32px;
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:transparent;
  position:relative;
  transition:background .25s, color .25s;
  display:flex;flex-direction:column;gap:14px;
}
.section--ink .thesis-card{border-color:var(--ink-soft)}
.thesis-card:hover{background:var(--ink);color:var(--paper)}
.section--ink .thesis-card:hover{background:var(--scarlet);color:var(--paper)}
.thesis-card:hover .thesis-card__num{color:var(--gold)}
.thesis-card:hover .thesis-card__title{color:var(--paper)}
.thesis-card:hover .thesis-card__title em{color:var(--gold)}

.thesis-card__top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.thesis-card__num{
  font-family:var(--mono);font-size:13px;letter-spacing:.18em;
  color:var(--scarlet);font-weight:700;text-transform:uppercase;
}
.section--ink .thesis-card__num{color:var(--gold)}
.thesis-card__chip{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  color:var(--ink);background:var(--gold);padding:4px 10px;font-weight:700;
  text-transform:uppercase;
}
.thesis-card__title{
  font-family:var(--serif);font-weight:700;
  font-size:26px;line-height:1.18;color:var(--ink);
  margin:0;letter-spacing:-.012em;
}
.section--ink .thesis-card__title{color:var(--paper)}
.thesis-card__title em{font-style:italic;color:var(--scarlet);font-weight:500}
.section--ink .thesis-card__title em{color:var(--gold)}
.thesis-card p{margin:0;font-size:14.5px;line-height:1.7;color:inherit;opacity:.92;font-weight:400}

/* ============================================
   TWO-FACE / CONTRAST SECTION (di sản vs đô thị)
   ============================================ */
.twoface{
  display:grid;gap:0;grid-template-columns:1fr;
}
@media (min-width:880px){.twoface{grid-template-columns:1fr 1fr}}
.twoface__panel{padding:80px var(--gutter);display:flex;flex-direction:column;justify-content:center;min-height:360px;position:relative;overflow:hidden}
@media (min-width:880px){.twoface__panel{padding:100px clamp(40px,5vw,80px)}}
.twoface__bg{position:absolute;inset:0;z-index:0}
.twoface__bg img{width:100%;height:100%;object-fit:cover;opacity:.18}
.twoface__bg::after{content:"";position:absolute;inset:0;background:inherit}
.twoface__panel--heritage{background:var(--paper-2);color:var(--ink)}
.twoface__panel--heritage .twoface__bg::after{background:linear-gradient(135deg, rgba(245,241,232,.85), rgba(239,233,218,.95))}
.twoface__panel--urban{background:var(--ink);color:var(--paper)}
.twoface__panel--urban .twoface__bg::after{background:linear-gradient(135deg, rgba(13,13,13,.7), rgba(13,13,13,.92))}
.twoface__content{position:relative;z-index:1}
.twoface__kicker{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.22em;
  font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:14px;
}
.twoface__panel--heritage .twoface__kicker{color:var(--ochre-deep)}
.twoface__panel--heritage .twoface__kicker::before{content:"";width:36px;height:2px;background:var(--ochre)}
.twoface__panel--urban .twoface__kicker{color:var(--gold)}
.twoface__panel--urban .twoface__kicker::before{content:"";width:36px;height:2px;background:var(--gold)}

.twoface h2{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(34px,4.4vw,52px);line-height:1.05;letter-spacing:-.022em;
  margin:0 0 22px;
}
.twoface__panel--heritage h2{color:var(--ink)}
.twoface__panel--heritage h2 em{color:var(--ochre);font-style:italic;font-weight:500}
.twoface__panel--urban h2{color:var(--paper)}
.twoface__panel--urban h2 em{color:var(--gold);font-style:italic;font-weight:500}

.twoface p{font-size:16px;line-height:1.75;font-weight:400;max-width:50ch}
.twoface__panel--heritage p{color:var(--ink)}
.twoface__panel--urban p{color:var(--paper);opacity:.9}

.twoface__list{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:14.5px}
.twoface__list li{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.twoface__list li::before{content:"·";font-weight:700;font-size:1.6em;line-height:.6}
.twoface__panel--heritage .twoface__list li::before{color:var(--scarlet)}
.twoface__panel--urban .twoface__list li::before{color:var(--gold)}

/* ============================================
   GALLERY
   ============================================ */
.gallery__grid{
  display:grid;gap:14px;grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;
}
@media (min-width:780px){
  .gallery__grid{grid-template-columns:repeat(8,1fr);grid-auto-rows:160px;gap:14px}
}
.tile{position:relative;overflow:hidden;background:var(--paper-3);cursor:pointer}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.tile:hover img{transform:scale(1.06)}
.tile__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:18px 18px 16px;color:var(--paper);
  background:linear-gradient(0deg, rgba(13,13,13,.92) 0%, transparent 100%);
}
.tile__cap small{
  display:block;font-family:var(--mono);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.2em;color:var(--gold);
  margin-bottom:4px;font-weight:600;
}
.tile__cap b{
  display:block;font-family:var(--serif);font-weight:700;font-size:17px;
  letter-spacing:-.005em;line-height:1.2;
}
@media (min-width:780px){
  .t-1{grid-column:span 5;grid-row:span 2}
  .t-2{grid-column:span 3;grid-row:span 1}
  .t-3{grid-column:span 3;grid-row:span 1}
  .t-4{grid-column:span 4;grid-row:span 2}
  .t-5{grid-column:span 4;grid-row:span 1}
  .t-6{grid-column:span 4;grid-row:span 1}
  .t-7{grid-column:span 3;grid-row:span 2}
  .t-8{grid-column:span 5;grid-row:span 2}
}
@media (max-width:780px){.t-1,.t-4,.t-7,.t-8{grid-row:span 2}}

/* ============================================
   MODEL — Vùng đất [X]
   ============================================ */
.model__intro{
  display:grid;gap:48px;grid-template-columns:1fr;margin-bottom:50px;
}
@media (min-width:880px){.model__intro{grid-template-columns:1.4fr 1fr;gap:72px;align-items:start}}
.model__copy h3{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(28px,3.6vw,42px);line-height:1.1;letter-spacing:-.018em;
  color:var(--gold);margin:0 0 22px;
}
.model__copy h3 em{font-style:italic;font-weight:500;color:var(--scarlet)}
.section--ink .model__copy h3 em{color:var(--gold)}
.model__copy p{font-size:16px;line-height:1.75;color:var(--paper);opacity:.9;font-weight:400}
.model__copy strong{font-weight:700;color:var(--gold)}
.model__list{margin:18px 0 22px;padding:0;list-style:none;display:grid;gap:12px}
.model__list li{display:flex;align-items:flex-start;gap:14px;font-size:15px;line-height:1.6;color:var(--paper);opacity:.92}
.model__list li::before{
  content:"";flex:0 0 8px;width:8px;height:8px;background:var(--scarlet);
  margin-top:9px;
}
.model__list strong{color:var(--gold);font-weight:700}

.section--ink .factsheet{background:var(--ink-soft);border-color:var(--ink-mid);color:var(--paper)}
.section--ink .factsheet::before{background:var(--gold)}
.section--ink .factsheet__title{color:var(--gold)}
.section--ink .factsheet dt{color:var(--paper);opacity:.6}
.section--ink .factsheet dd{color:var(--paper)}
.section--ink .factsheet dd em{color:var(--gold)}
.section--ink .factsheet .row{border-color:var(--ink-mid)}

/* ============================================
   FAQ
   ============================================ */
.faq{background:var(--paper-2)}
.faq__list{display:grid;gap:14px;max-width:84ch;margin:0 auto}
.faq__item{
  background:var(--paper);border-left:4px solid var(--scarlet);
  padding:0;overflow:hidden;
  transition:box-shadow .2s, border-color .2s;
}
.faq__item[open]{box-shadow:var(--shadow-sm);border-left-color:var(--scarlet-deep);border-left-width:6px}
.faq__q{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 26px;
  font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink);
  letter-spacing:-.005em;line-height:1.35;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{
  content:"+";font-family:var(--mono);font-size:24px;font-weight:300;
  color:var(--scarlet);transition:transform .2s;
}
.faq__item[open] .faq__q::after{content:"−"}
.faq__a{padding:0 26px 26px;color:var(--ink);font-size:15px;line-height:1.75;font-weight:400}
.faq__a strong{font-weight:700;color:var(--scarlet-deep)}
.faq__a a{color:var(--scarlet);font-weight:600;border-bottom:1px solid currentColor}

/* ============================================
   CTA PANEL — investment offer style
   ============================================ */
.cta-panel{
  position:relative;
  background:var(--ink);color:var(--paper);
  padding:64px 36px;overflow:hidden;
  border:1px solid var(--ink-mid);
}
@media (min-width:780px){.cta-panel{padding:88px 80px}}
.cta-panel::before{
  content:"";position:absolute;top:0;left:0;width:140px;height:6px;background:var(--scarlet);
}
.cta-panel::after{
  content:"FOR SALE";position:absolute;top:30px;right:-60px;
  background:var(--scarlet);color:var(--paper);
  font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:.4em;
  padding:8px 80px;transform:rotate(35deg);
}
.cta-panel__inner{
  position:relative;display:grid;gap:36px;grid-template-columns:1fr;align-items:center;
}
@media (min-width:780px){.cta-panel__inner{grid-template-columns:1.5fr 1fr;gap:60px}}
.cta-panel__kicker{
  display:inline-block;padding:6px 14px;
  background:var(--gold);color:var(--ink);font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.22em;font-weight:700;margin-bottom:22px;
}
.cta-panel h2{
  font-family:var(--serif);font-weight:800;font-size:clamp(34px,4.5vw,54px);
  line-height:1.05;letter-spacing:-.022em;
  color:var(--paper);margin:0 0 22px;
}
.cta-panel h2 em{color:var(--gold);font-style:italic;font-weight:500}
.cta-panel p{font-size:16px;line-height:1.75;color:var(--paper);opacity:.85;max-width:54ch;font-weight:400}
.cta-panel strong{color:var(--gold);font-weight:700}
.cta-panel__visual{
  text-align:center;
  border:2px solid var(--gold);
  padding:48px 24px;position:relative;background:rgba(212,164,55,.06);
}
.cta-panel__visual::before{
  content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:6px;background:var(--gold);
}
.cta-panel__domain{
  font-family:var(--serif);font-weight:800;font-size:clamp(40px,5.5vw,64px);
  letter-spacing:-.025em;color:var(--gold);
  margin:0;line-height:1;
}
.cta-panel__domain em{color:var(--paper);opacity:.6;font-style:italic;font-weight:500}
.cta-panel__visual small{
  display:block;font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.2em;color:var(--scarlet);
  margin-top:18px;font-weight:700;
}

/* ============================================
   FOOTER
   ============================================ */
.footer{
  background:var(--ink);color:var(--paper);
  padding:80px 0 100px;
  border-top:3px solid var(--scarlet);
}
@media (min-width:880px){.footer{padding:96px 0 64px}}
.footer__grid{display:grid;gap:40px;grid-template-columns:1fr}
@media (min-width:780px){.footer__grid{grid-template-columns:1.5fr repeat(3,1fr);gap:54px}}
.footer__brand{font-family:var(--serif);font-style:italic;font-weight:800;font-size:32px;color:var(--paper);margin:0 0 4px}
.footer__sub{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:var(--gold);margin-bottom:18px;display:block;font-weight:700}
.footer p{font-size:14px;line-height:1.7;color:rgba(245,241,232,.7);font-weight:400}
.footer h4{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:var(--scarlet);
  font-weight:700;margin:0 0 16px;
}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer ul a{font-size:14px;color:rgba(245,241,232,.85);font-weight:400;transition:color .15s, padding-left .2s}
.footer ul a:hover{color:var(--gold);padding-left:6px}
.footer__bottom{
  margin-top:54px;padding-top:26px;border-top:1px solid var(--ink-mid);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.22em;color:rgba(245,241,232,.5);font-weight:600;
}
.footer__bottom a{color:var(--gold)}

/* ============================================
   BOTTOM NAV (mobile)
   ============================================ */
.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--ink);
  border-top:2px solid var(--scarlet);
  display:grid;grid-template-columns:repeat(5,1fr);
  padding:8px 4px calc(env(safe-area-inset-bottom,0) + 8px);
}
@media (min-width:960px){.bottomnav{display:none}}
.bottomnav a{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 4px;
  font-size:10px;font-weight:600;color:var(--paper);text-decoration:none;
  letter-spacing:.02em;position:relative;
}
.bottomnav a svg{width:22px;height:22px;color:rgba(245,241,232,.6)}
.bottomnav a.is-cta{color:var(--scarlet)}
.bottomnav a.is-cta svg{color:var(--scarlet)}
.bottomnav a.is-cta::after{
  content:"";position:absolute;top:6px;right:calc(50% - 16px);
  width:5px;height:5px;border-radius:50%;background:var(--gold);
}
@media (max-width:960px){body{padding-bottom:64px}}

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

/* reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease, transform .8s ease}
.reveal.is-visible{opacity:1;transform:none}