/* ARARAT International Art Project — paper/ink/crimson/gold palette,
   light + dark theming via CSS custom properties. */

:root{
  --paper: #f3ecdc;
  --paper-raised: #faf5e9;
  --ink: #14213d;
  --ink-soft: #4a5573;
  --ink-faint: #7c85a0;
  --line: rgba(20,33,61,0.16);
  --crimson: #b93a2c;
  --crimson-ink: #7c261c;
  --gold: #c8842a;
  --gold-soft: #e7bd7a;
  --navy-deep: #0c1428;
  --navy-panel: #101c38;
  --on-dark: #efe7d4;
  --on-dark-soft: #b9bfd2;
  --shadow: 0 18px 40px -18px rgba(12,20,40,0.35);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper: #0c1428;
    --paper-raised: #101c38;
    --ink: #efe7d4;
    --ink-soft: #b9bfd2;
    --ink-faint: #7f89a8;
    --line: rgba(239,231,212,0.16);
    --crimson: #e0665a;
    --crimson-ink: #f2a89f;
    --gold: #e7bd7a;
    --gold-soft: #f3d9ab;
    --navy-deep: #050a16;
    --navy-panel: #0a1226;
    --on-dark: #efe7d4;
    --on-dark-soft: #b9bfd2;
    --shadow: 0 18px 40px -18px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --paper: #0c1428;
  --paper-raised: #101c38;
  --ink: #efe7d4;
  --ink-soft: #b9bfd2;
    --ink-faint: #7f89a8;
  --line: rgba(239,231,212,0.16);
  --crimson: #e0665a;
  --crimson-ink: #f2a89f;
  --gold: #e7bd7a;
  --gold-soft: #f3d9ab;
  --navy-deep: #050a16;
  --navy-panel: #0a1226;
  --on-dark: #efe7d4;
  --on-dark-soft: #b9bfd2;
  --shadow: 0 18px 40px -18px rgba(0,0,0,0.6);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Karla', -apple-system, "Segoe UI", sans-serif;
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
img{ display:block; max-width:100%; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,56px); }

h1,h2,h3{ font-family:'Fraunces', Georgia, serif; margin:0; text-wrap:balance; color:var(--ink); }

.eyebrow{
  font-family:'Karla',sans-serif;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.74rem;
  font-weight:700;
  color:var(--crimson-ink);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family:'Karla',sans-serif;
  font-weight:700;
  font-size:.92rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-decoration:none;
  padding:.95em 1.7em;
  border-radius:999px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.btn-gold{ background:var(--gold); color:var(--navy-deep); box-shadow:var(--shadow); }
.btn-gold:hover{ transform:translateY(-2px); background:var(--gold-soft); }
.btn-line{ border-color:currentColor; background:transparent; }
.btn-line:hover{ background:var(--ink); color:var(--paper); }

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(20px,4vw,56px);
  max-width:1180px; margin:0 auto;
}
.brand{
  display:flex; flex-direction:column; gap:.15em;
  font-family:'Fraunces',serif; font-weight:600; font-size:1.18rem;
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:var(--ink);
  line-height:1;
}
.brand span{
  font-family:'Karla',sans-serif; font-weight:600; font-size:.6rem;
  letter-spacing:.14em; color:var(--ink-soft);
}
.nav-links{ display:flex; gap:clamp(14px,2vw,30px); list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; font-size:.86rem; font-weight:600; color:var(--ink-soft); }
.nav-links a:hover{ color:var(--crimson); }
.nav-links{ display:none; }
@media (min-width:760px){ .nav-links{ display:flex; } }

/* ---------- Hero ---------- */
.hero{ padding:clamp(40px,7vw,84px) 0 clamp(48px,6vw,70px); }
.hero-grid{
  display:grid; gap:clamp(28px,4vw,54px);
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
}
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; } }

.poster-frame{
  position:relative;
  transform:rotate(-.6deg);
  border:1px solid var(--line);
  background:var(--paper-raised);
  padding:10px;
  box-shadow:var(--shadow);
}
.poster-frame img{ width:100%; height:auto; display:block; }
.poster-cap{
  display:flex; justify-content:space-between; gap:1em;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); padding:.7em .3em .1em;
}

.hero-copy .eyebrow{ margin-bottom:.9em; display:block; }
.hero-title{
  font-size:clamp(2.3rem, 3.1vw + 1.1rem, 3.6rem);
  font-weight:600; font-style:italic; line-height:1.06;
}
.hero-sub{
  font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:clamp(1.2rem,1.4vw + .8rem,1.55rem);
  color:var(--crimson-ink);
  margin-top:.5em;
}
.hero-lede{ margin-top:1.1em; max-width:46ch; color:var(--ink-soft); font-size:1.03rem; }

.hero-facts{
  display:flex; flex-wrap:wrap; gap:1.6em 2.2em;
  margin-top:1.8em; padding-top:1.5em; border-top:1px solid var(--line);
}
.fact dt{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); font-weight:700; }
.fact dd{ margin:.25em 0 0; font-family:'Fraunces',serif; font-size:1.18rem; font-weight:600; }

.hero-cta{ margin-top:1.8em; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* ---------- Diagonal seam ---------- */
.seam{
  height:clamp(46px,7vw,86px);
  background:linear-gradient(100deg, var(--crimson) 0 34%, var(--navy-deep) 34% 66%, var(--gold) 66% 100%);
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
}

/* ---------- Section shell ---------- */
section{ padding:clamp(56px,8vw,104px) 0; }
.section-head{ max-width:62ch; margin-bottom:clamp(28px,4vw,46px); }
.section-head h2{ font-size:clamp(1.9rem,2.4vw + 1rem,2.7rem); margin-top:.3em; font-weight:600; }

.dark-panel{ background:var(--navy-deep); color:var(--on-dark); }
.dark-panel .eyebrow{ color:var(--gold-soft); }
.dark-panel h2, .dark-panel h3{ color:var(--on-dark); }
.dark-panel p{ color:var(--on-dark-soft); }
.dark-panel .line{ border-color:rgba(239,231,212,0.18); }

/* ---------- Peaks divider ---------- */
.peaks{ display:block; margin:0 auto; opacity:.75; }
.peaks-row{ display:flex; justify-content:center; padding: 6px 0 2px; }

/* ---------- Invitation copy ---------- */
.invite-copy{ display:flex; flex-direction:column; gap:1em; }
.invite-copy p{ color:var(--ink-soft); }
.invite-close{
  font-family:'Fraunces',serif; font-style:italic; font-weight:600;
  font-size:clamp(1.2rem,1.6vw + .7rem,1.55rem);
  line-height:1.3; color:var(--crimson-ink);
  margin:1.3em 0 0; padding-top:1.1em; border-top:1px solid var(--line);
}

/* ---------- Photo band ---------- */
.photo-band{ position:relative; overflow:hidden; }
.photo-band img{
  width:100%; height:clamp(280px,42vw,460px); object-fit:cover;
  filter:grayscale(.35) sepia(.18) saturate(1.2);
}
.photo-band::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(12,20,40,.86), rgba(12,20,40,.28) 55%, rgba(12,20,40,.05));
}
.photo-band-copy{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(24px,4vw,56px) clamp(20px,4vw,56px);
  max-width:1180px; margin:0 auto;
}
.photo-band-copy p{
  font-family:'Fraunces',serif; font-style:italic; color:#f3ecdc;
  font-size:clamp(1.3rem,2.2vw + .7rem,2.1rem); max-width:22ch; margin:0;
}

/* ---------- Call panel ---------- */
.call-panel{
  border:1.5px solid rgba(239,231,212,.5);
  padding:clamp(26px,4vw,50px);
  position:relative;
}
.call-panel::before, .call-panel::after,
.call-panel-in::before, .call-panel-in::after{
  content:''; position:absolute; width:14px; height:14px; border:1.5px solid var(--gold);
}
.call-panel::before{ top:-1.5px; left:-1.5px; border-right:none; border-bottom:none; }
.call-panel::after{ top:-1.5px; right:-1.5px; border-left:none; border-bottom:none; }
.call-panel-in::before{ bottom:-1.5px; left:-1.5px; border-right:none; border-top:none; }
.call-panel-in::after{ bottom:-1.5px; right:-1.5px; border-left:none; border-top:none; }
.call-panel-in{ position:relative; }

.call-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.6em 2em; margin:2em 0; }
.call-grid dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-soft); font-weight:700; }
.call-grid dd{ margin:.3em 0 0; font-family:'Fraunces',serif; font-size:1.3rem; font-weight:600; }

.call-grid-wrap{ display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(20px,3vw,40px); align-items:stretch; }
@media (max-width:860px){ .call-grid-wrap{ grid-template-columns:1fr; } }
.call-poster{ margin:0; background:var(--paper-raised); border:1px solid rgba(239,231,212,.5); padding:10px; align-self:start; }
.call-poster img{ width:100%; height:auto; display:block; }
.call-poster figcaption{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); padding:.6em .2em 0; text-align:center; }

/* ---------- FAQ ---------- */
.faq-list{ max-width:74ch; }
.faq-list details{ border-bottom:1px solid var(--line); padding:1.15em 0; }
.faq-list details:first-child{ border-top:1px solid var(--line); }
.faq-list summary{
  cursor:pointer; list-style:none; font-family:'Fraunces',serif; font-weight:600;
  font-size:1.14rem; display:flex; align-items:baseline; justify-content:space-between; gap:1em;
  color:var(--ink);
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:'+'; font-family:'Karla',sans-serif; font-weight:400; color:var(--crimson-ink);
  font-size:1.3rem; flex:none; transition:transform .2s ease;
}
.faq-list details[open] summary::after{ content:'\2212'; }
.faq-list summary:focus-visible{ outline:3px solid var(--gold); outline-offset:4px; }
.faq-list p{ margin:.8em 0 0; color:var(--ink-soft); max-width:64ch; }

/* ---------- Tag constellation ---------- */
.tags{ display:flex; flex-wrap:wrap; gap:.55em .7em; margin-top:1.6em; }
.tags span{
  font-family:'Fraunces',serif; border:1px solid var(--line);
  border-radius:999px; padding:.4em 1.05em; color:var(--ink-soft);
}
.tags span:nth-child(4n+1){ font-size:1.35rem; color:var(--crimson-ink); border-color:color-mix(in srgb, var(--crimson) 40%, transparent); font-style:italic; }
.tags span:nth-child(4n+2){ font-size:.92rem; }
.tags span:nth-child(4n+3){ font-size:1.1rem; color:var(--ink); }
.tags span:nth-child(4n){ font-size:.85rem; }

/* ---------- Two column / founder ---------- */
.two-col{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,4vw,60px); align-items:start; }
@media (max-width:820px){ .two-col{ grid-template-columns:1fr; } }
.founder-photo{ border:1px solid var(--line); box-shadow:var(--shadow); }
.founder-photo img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.drop p:first-of-type::first-letter{
  font-family:'Fraunces',serif; font-weight:700; font-style:italic;
  font-size:3.6em; float:left; line-height:.82; padding:.02em .08em 0 0; color:var(--crimson);
}
.drop p{ color:var(--ink-soft); }
.founder-name{ font-size:clamp(1.6rem,1.8vw + 1rem,2.2rem); font-style:italic; font-weight:600; }

/* ---------- Org / AAC ---------- */
.org-card{
  display:inline-flex; align-items:center; gap:12px;
  background:#ffffff; border:1px solid #ffffff;
  border-radius:12px; padding:9px 16px; margin-bottom:1.6em;
  box-shadow:var(--shadow);
}
.org-card img{ width:44px; height:44px; object-fit:contain; }
.org-card span{
  font-family:'Fraunces',serif; font-weight:600; font-style:italic; font-size:.98rem;
  color:#14213d;
}

/* ---------- Footer / final CTA ---------- */
.finale{ text-align:center; }
.finale h2{ font-size:clamp(2rem,3.6vw + 1rem,3.4rem); font-style:italic; font-weight:600; max-width:16ch; margin:0 auto; }
.finale .hero-sub{ margin:.5em auto 0; }
.finale .hero-cta{ justify-content:center; margin-top:1.9em; }
.finale .deadline-note{ margin-top:1.1em; font-size:.85rem; color:var(--on-dark-soft); }

footer{
  max-width:1180px; margin:0 auto;
  padding:30px clamp(20px,4vw,56px) 40px;
  font-size:.82rem; color:var(--ink-soft);
}
.footer-row{
  display:flex; flex-wrap:wrap; gap:10px 24px;
  justify-content:space-between; align-items:center;
  padding:16px 0;
}
.footer-row + .footer-row{ border-top:1px solid var(--line); }
footer a{ text-decoration:none; color:var(--ink-soft); }
footer a:hover{ color:var(--crimson-ink); }
.footer-legal{ font-size:.8rem; }
.footer-legal a{ font-weight:700; }
.footer-legal .sep{ color:var(--line); margin:0 .2em; }

.hr{ height:1px; background:var(--line); border:none; margin:0; }