/* ============================================================
   IACI — Innovative Arts & Culture Institution of Greater New York
   Light edition. White field, navy type, the mark's gold arc as
   the one accent — and the arc itself as the page's spine.
   ============================================================ */

:root{
  --paper:#FFFFFF;
  --mist:#EDEFF2;          /* pale cool tint of the logo navy */
  --line:#D3D8DF;
  --ink:#0A1628;           /* sampled from the mark */
  --ink-deep:#050B14;
  --slate:#3C4C61;
  --slate-2:#5B6C82;
  --gold:#B08A38;          /* the mark's gold, deepened for white */
  --gold-soft:#C19A4E;
  --gold-lt:#E6CE9A;
  --chalk:#E8EAED;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Jost","Futura","Century Gothic",system-ui,sans-serif;

  --gut:clamp(1.25rem,5vw,4.5rem);
  --rail:clamp(0px,4vw,72px);
  --max:1360px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:1.0625rem;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:300;font-family:var(--serif)}
p{margin:0 0 1.15em}
ul,ol{margin:0;padding:0;list-style:none}

.u-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--gold);color:#fff;padding:.75rem 1.25rem}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

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

/* ── type ─────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);margin:0 0 2.4rem;
  display:flex;align-items:flex-start;gap:.9rem;
}
.eyebrow::before{
  content:"";width:2.6rem;height:1.1rem;flex:none;
  border-top:1px solid var(--gold);border-radius:60% 60% 0 0/100% 100% 0 0;
  border-left:1px solid transparent;border-right:1px solid transparent;
  transform:translateY(.5rem);
}
.eyebrow--light{color:var(--gold-lt)}

.head{font-size:clamp(1.65rem,3.6vw,3.05rem);line-height:1.15;letter-spacing:-.016em;max-width:26ch;font-weight:200}
.head--light{color:var(--chalk)}

.statement{
  font-size:clamp(1.95rem,5.2vw,4.1rem);line-height:1.06;letter-spacing:-.026em;
  max-width:21ch;margin:0 0 clamp(2.5rem,5vw,4rem);font-weight:200;
}
.statement em{font-style:italic;color:var(--gold)}
.statement--light{color:var(--chalk)}
.statement--light em{color:var(--gold-lt)}
.statement .figure{font-style:italic;color:var(--gold-lt);font-variation-settings:"opsz" 72;white-space:nowrap}

.lede{font-family:var(--serif);font-size:clamp(1.1rem,1.7vw,1.45rem);line-height:1.55;max-width:46ch;color:var(--slate)}
.lede--light{color:#A9B8C9}

/* ── masthead ─────────────────────────────────────────── */
.masthead{
  position:fixed;inset:0 0 auto;z-index:100;
  display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.4rem);
  padding:1.15rem var(--gut);
  transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s,box-shadow .5s;
  border-bottom:1px solid transparent;
}
.masthead.is-stuck{
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);padding-block:.7rem;
}
.masthead__logo{flex:none;line-height:0}
.masthead__logo img{height:clamp(28px,3.4vw,40px);width:auto;transition:height .5s var(--ease)}
.masthead.is-stuck .masthead__logo img{height:clamp(24px,2.8vw,32px)}

.masthead__nav{display:flex;gap:clamp(.9rem,1.9vw,1.9rem);margin-left:auto}
.masthead__nav a{
  font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;font-weight:400;
  color:var(--slate);text-decoration:none;padding-block:.4rem;position:relative;white-space:nowrap;
}
.masthead__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.masthead__nav a:hover{color:var(--ink)}
.masthead__nav a:hover::after{transform:scaleX(1)}

.masthead__cta{
  font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:#fff;background:var(--ink);text-decoration:none;white-space:nowrap;
  padding:.7rem 1.4rem;border-radius:999px;transition:background .35s;
}
.masthead__cta:hover{background:var(--gold)}

.masthead__toggle{display:none;background:none;border:0;padding:.6rem;cursor:pointer;margin-left:auto}
.masthead__toggle span{display:block;width:26px;height:1px;background:var(--ink);transition:transform .4s var(--ease)}
.masthead__toggle span+span{margin-top:7px}
.masthead__toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.masthead__toggle[aria-expanded="true"] span+span{transform:translateY(-4px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:99;background:var(--paper);display:grid;place-items:center}
.drawer[hidden]{display:none}
.drawer nav{display:grid;gap:.4rem;text-align:center}
.drawer a{
  font-family:var(--serif);font-size:clamp(1.6rem,6.5vw,2.4rem);font-weight:200;
  color:var(--ink);text-decoration:none;padding:.3rem 1rem;
}
.drawer a:last-child{color:var(--gold);font-style:italic}

/* ── scroll arc (signature) ───────────────────────────── */
.arc-rail{
  position:fixed;left:0;top:0;width:var(--rail);height:100vh;z-index:60;
  pointer-events:none;opacity:0;transition:opacity .6s var(--ease);
}
.arc-rail.is-live{opacity:1}
.arc-rail svg{width:100%;height:100%;overflow:visible}
.arc-rail path{fill:none;stroke-width:1.25;vector-effect:non-scaling-stroke}
.arc-rail__ghost{stroke:rgba(176,138,56,.20)}
.arc-rail__draw{stroke:var(--gold);stroke-dasharray:1;stroke-dashoffset:1}
.arc-rail__label{
  position:absolute;left:50%;bottom:clamp(2rem,8vh,5rem);
  transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500;
  color:var(--gold);white-space:nowrap;transition:opacity .4s;
}
.arc-bar{position:fixed;inset:0 0 auto;height:2px;z-index:101;pointer-events:none}
.arc-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,transparent,var(--gold))}

/* ── section rhythm ───────────────────────────────────── */
.section{position:relative;padding-block:clamp(5rem,12vh,9rem);padding-left:var(--rail);background:var(--paper)}
.section--mist{background:var(--mist)}
.section--ink{background:var(--ink);color:var(--chalk)}
.section--ink p{color:#A9B8C9}

/* ── hero: type left, photograph bleeding right ───────── */
.hero{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  align-items:center;gap:clamp(2rem,5vw,5rem);
  min-height:100svh;padding:clamp(7rem,14vh,9rem) 0 clamp(3rem,7vh,5rem) var(--rail);
  background:var(--paper);
}
.hero__type{padding-left:var(--gut);max-width:none}
.hero__title{
  font-size:clamp(2.5rem,6.4vw,5.2rem);line-height:1.0;letter-spacing:-.032em;
  margin:0 0 clamp(1.4rem,2.6vw,2rem);font-weight:200;
}
.hero__title em{font-style:italic;color:var(--gold)}
.mask{display:block;overflow:hidden;padding-bottom:.06em}
.mask>span{display:block}
.hero__lede{
  font-family:var(--serif);font-size:clamp(1.02rem,1.5vw,1.28rem);line-height:1.6;
  color:var(--slate);max-width:42ch;
}
.hero__facts{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1.8rem;
  margin-top:clamp(1.75rem,3.2vw,2.5rem);
  font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.hero__facts li{position:relative}
.hero__facts li+li::before{
  content:"";position:absolute;left:-.9rem;top:50%;transform:translateY(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--gold);
}
.hero__figure{margin:0;height:min(78vh,720px);overflow:hidden;background:var(--ink-deep)}
.hero__figure img{width:100%;height:100%;object-fit:cover;will-change:transform}

/* ── photo band with an overlaid pull ────────────────────── */
.band{margin:clamp(3.5rem,8vw,6rem) 0 0;position:relative;overflow:hidden}
.band img{width:100%;height:clamp(420px,72vh,760px);object-fit:cover;will-change:transform}
.band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(5,11,20,.68) 0%,rgba(5,11,20,.30) 42%,rgba(5,11,20,0) 68%);
}
.band figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 var(--gut) clamp(2rem,5vw,3.5rem);
}
.band__inner{display:block;max-width:var(--max);margin-inline:auto}
.band__inner>span{display:block}
.band__eyebrow{
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;font-weight:500;
  color:var(--gold-lt);margin-bottom:1.1rem;
}
.band__quote{
  font-family:var(--serif);font-weight:200;
  font-size:clamp(1.15rem,2.5vw,2.05rem);line-height:1.28;letter-spacing:-.018em;
  color:#fff;max-width:26ch;
}
.band__attr{
  margin-top:1.2rem;padding-top:1.2rem;font-size:.82rem;letter-spacing:.05em;
  color:var(--gold-lt);max-width:34ch;position:relative;
}
.band__attr::before{
  content:"";position:absolute;top:0;left:0;width:3.5rem;height:1px;background:var(--gold);
}
@media (max-width:820px){
  .band img{height:clamp(380px,62vh,520px)}
  .band::after{background:linear-gradient(180deg,rgba(5,11,20,.25) 0%,rgba(5,11,20,.86) 62%)}
  .band__quote{max-width:none}
}

/* ── discipline index ─────────────────────────────────── */
.index{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
  width:100%;max-width:var(--max);margin:clamp(3rem,7vw,5.5rem) auto 0;padding-inline:var(--gut);
}
.index__stage{position:sticky;top:16vh;aspect-ratio:4/5;overflow:hidden;background:var(--ink-deep)}
.index__stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);transition:opacity .8s var(--ease),transform 1.4s var(--ease);
}
.index__stage img.is-on{opacity:1;transform:scale(1)}

.index__list li{padding:clamp(1.4rem,2.6vw,2rem) 0;border-top:1px solid var(--line);transition:opacity .5s var(--ease)}
.index__list li:last-child{border-bottom:1px solid var(--line)}
.index__list h3{
  font-size:clamp(1.5rem,3vw,2.35rem);line-height:1.1;letter-spacing:-.02em;color:var(--ink);
  display:flex;align-items:baseline;gap:1rem;transition:color .45s var(--ease);font-weight:200;
}
.index__list h3::after{
  content:"";flex:1;height:1px;background:var(--gold);opacity:0;
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease),opacity .4s var(--ease);
}
.index__list p{margin:.65rem 0 0;max-width:54ch;font-size:.95rem;color:var(--slate);transition:color .45s var(--ease)}
.index.is-hovered .index__list li{opacity:.45}
.index__list li.is-active{opacity:1}
.index__list li.is-active h3{color:var(--gold)}
.index__list li.is-active h3::after{transform:scaleX(1);opacity:1}

/* ── lineage ──────────────────────────────────────────── */
.lineage{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:clamp(3rem,6vw,4.5rem) 0;border-top:1px solid var(--line);
}
.lineage li{padding:1.5rem 1.25rem 1.5rem 0;border-bottom:1px solid var(--line)}
.lineage b{display:block;font-family:var(--serif);font-weight:300;font-size:1.2rem;letter-spacing:-.01em}
.lineage span{display:block;margin-top:.35rem;font-size:.82rem;letter-spacing:.04em;color:var(--slate-2)}
.lineage .is-open b,.lineage .is-open span{color:var(--gold)}
.lineage .is-open b{font-style:italic}

/* ── split: copy + photograph ─────────────────────────── */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.split__body{color:var(--slate);max-width:56ch}
.pull{
  font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.35;
  color:var(--ink);margin-top:2rem;padding-top:2rem;border-top:1px solid var(--gold);
}
.pull em{font-style:italic;color:var(--gold)}
.split__list{margin-top:1.5rem}
.split__list li{
  padding:.8rem 0 .8rem 1.9rem;border-bottom:1px solid var(--line);
  font-size:.92rem;letter-spacing:.02em;color:var(--slate);position:relative;
}
.split__list li::before{
  content:"";position:absolute;left:0;top:1.4rem;width:.85rem;height:.5rem;
  border-top:1px solid var(--gold);border-radius:60% 60% 0 0/100% 100% 0 0;
}
.split__figure{margin:0}
.split__figure img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--ink-deep)}
.split__figure figcaption{margin-top:.9rem;font-size:.76rem;letter-spacing:.06em;color:var(--slate-2)}

/* ── open questions ──────────────────────────────────────── */
.questions{margin-top:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--line);padding-top:clamp(2rem,4vw,3rem)}
.questions__intro{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  color:var(--gold);max-width:60ch;line-height:1.9;margin-bottom:1.8rem}
.questions ul{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:0 clamp(2rem,5vw,4.5rem);max-width:104ch;
}
.questions li{
  font-family:var(--serif);font-weight:200;
  font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.3;letter-spacing:-.012em;
  padding:1.15rem 0;border-bottom:1px solid var(--line);color:var(--ink);
}
.questions__coda{
  margin:clamp(2rem,4vw,3rem) 0 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.05rem,1.7vw,1.4rem);color:var(--gold);max-width:44ch;
}

/* ── tenets ───────────────────────────────────────────── */
.tenets{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin:clamp(3rem,6vw,4.5rem) 0 clamp(2.5rem,5vw,4rem);
}
.tenets article{background:var(--paper);padding:clamp(1.6rem,2.6vw,2.2rem)}
.tenets h3{font-size:1.28rem;font-weight:300;color:var(--gold);margin-bottom:.7rem}
.tenets p{margin:0;font-size:.9rem;line-height:1.65;color:var(--slate)}
.coda{font-family:var(--serif);font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.55;max-width:52ch;color:var(--slate)}

/* ── impact ───────────────────────────────────────────── */
.because{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0 clamp(2rem,5vw,4rem);max-width:96ch;
}
.because li{
  font-family:var(--serif);font-size:clamp(1.02rem,1.5vw,1.24rem);line-height:1.45;
  padding:1rem 0;border-bottom:1px solid rgba(230,206,154,.22);color:#C3CFDC;
}

/* ── connect ──────────────────────────────────────────── */
.routes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(2.5rem,5vw,4rem);
}
.route{
  background:var(--paper);padding:clamp(1.8rem,3vw,2.5rem);
  display:flex;flex-direction:column;gap:.55rem;
}
.route h3{font-size:1.2rem;font-weight:300}
.route p{margin:0;font-size:.88rem;color:var(--slate)}

.contact{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem clamp(1.5rem,4vw,3rem);
  margin-top:clamp(2.5rem,5vw,3.5rem);padding:clamp(1.6rem,3vw,2.2rem) 0 0;
  border-top:1px solid var(--gold);text-decoration:none;
}
.contact__label{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:var(--slate-2)}
.contact__mail{
  font-family:var(--serif);font-weight:200;font-size:clamp(1.6rem,4.4vw,3.1rem);
  letter-spacing:-.02em;color:var(--ink);position:relative;
}
.contact__mail::after{
  content:"";position:absolute;left:0;right:0;bottom:-.1em;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.contact:hover .contact__mail{color:var(--gold)}
.contact:hover .contact__mail::after{transform:scaleX(1)}

/* ── colophon ─────────────────────────────────────────── */
.colophon{background:var(--ink-deep);color:#8598AC;padding:clamp(3.5rem,8vh,6rem) 0 3rem;padding-left:var(--rail)}
.colophon__logo{height:clamp(34px,4vw,48px);width:auto;margin-bottom:1.8rem}
.colophon__line{font-family:var(--serif);font-size:clamp(1rem,1.5vw,1.25rem);color:#A9B8C9;max-width:36ch}
.colophon__foot{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.6rem;border-top:1px solid rgba(230,206,154,.18);
  font-size:.74rem;letter-spacing:.08em;
}

/* ── motion ───────────────────────────────────────────── */
[data-load]{opacity:0;transform:translateY(1.1em)}
[data-reveal]{opacity:0;transform:translateY(26px)}
.is-in{opacity:1;transform:none;transition:opacity .95s var(--ease),transform .95s var(--ease)}

/* ── responsive ───────────────────────────────────────── */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr;min-height:0;gap:clamp(2rem,5vw,3rem);
        padding:clamp(6.5rem,12vh,8rem) 0 clamp(3rem,6vh,4rem) var(--rail)}
  .hero__figure{height:min(52vh,460px)}
  .index{grid-template-columns:1fr}
  .index__stage{position:relative;top:auto;aspect-ratio:16/10;max-height:46vh}
  .split{grid-template-columns:1fr}
  .split__figure img{aspect-ratio:16/10}
  .cols{columns:1}
}
@media (max-width:820px){
  .masthead__nav,.masthead__cta{display:none}
  .masthead__toggle{display:block}
  .arc-rail{display:none}
  :root{--rail:0px}
  .hero__facts{flex-direction:column;align-items:flex-start;gap:.4rem}
  .hero__facts li+li::before{display:none}
  .eyebrow{font-size:.66rem;letter-spacing:.2em;margin-bottom:1.6rem}
  .eyebrow::before{width:1.8rem}
  .statement,.head{max-width:none}
  .because{grid-template-columns:1fr}
}
.cols{columns:2;column-gap:clamp(1.5rem,4vw,4rem);max-width:74ch;color:var(--slate)}
.cols p{break-inside:avoid}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-load],[data-reveal]{opacity:1;transform:none}
  .arc-rail__draw{stroke-dashoffset:0}
  .hero__figure img{transform:none!important}
}