/* ============================================================
   SOLICA — Direction 1: THE ARCHIVE
   Architectural / restrained. Editorial serif, hairline rules,
   framed photography, catalog captions. Crimson as a precise accent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  --crimson:#C61130;
  --crimson-deep:#A60E28;
  --orange:#F4901E;
  --ink:#1A1A1A;
  --ink-soft:#3a3733;
  --slate:#6B7280;
  --sand:#F4EFE9;
  --sand-deep:#EBE4D9;
  --paper:#FBF9F5;
  --line:#D9D2C7;
  --line-strong:#C3BAAC;
  --white:#FFFFFF;

  --serif:'Spectral', Georgia, serif;
  --sans:'Public Sans', system-ui, sans-serif;

  --maxw:1280px;
  --gutter:clamp(20px,5vw,72px);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{
  font-family:var(--serif);
  color:var(--ink);
  background:var(--paper);
  font-size:18px;
  line-height:1.65;
  font-weight:400;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* ---- type helpers ---- */
.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--crimson);
}
.eyebrow.muted{color:var(--slate);}
.serif-italic{font-style:italic;font-weight:300;}
.display{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.01em;
}
h1.display{font-size:clamp(44px,6.2vw,92px);}
h2.display{font-size:clamp(32px,4.4vw,60px);font-weight:400;line-height:1.08;}
h3{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.4vw,30px);line-height:1.2;}
.lead{font-size:clamp(20px,2.1vw,26px);line-height:1.55;font-weight:300;color:var(--ink-soft);}
.caption{
  font-family:var(--sans);
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--slate);
  line-height:1.5;
}
.fig{
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--crimson);
}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
.rule{height:1px;background:var(--line);border:0;}
section{position:relative;}

/* ============================================================ NAV */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(251,249,245,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:74px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand .sun{width:30px;height:30px;flex:none;}
.brand .word{
  font-family:var(--sans);
  font-weight:700;
  letter-spacing:.34em;
  font-size:16px;
  padding-left:4px;
}
.brand .word b{font-weight:700;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{
  font-family:var(--sans);
  font-size:13px;font-weight:500;letter-spacing:.04em;
  color:var(--ink-soft);
  padding-bottom:3px;
  border-bottom:1.5px solid transparent;
  transition:border-color .2s,color .2s;
}
.nav-links a:hover{color:var(--crimson);border-color:var(--crimson);}
.nav-links a.active{color:var(--ink);border-color:var(--ink);}

/* direction switcher (shared chrome across all 3 directions) */
.switcher{
  display:flex;align-items:center;gap:0;
  border:1px solid var(--line-strong);
  border-radius:2px;
  overflow:hidden;
  font-family:var(--sans);
}
.switcher a{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 12px;color:var(--slate);
  border-right:1px solid var(--line);
  transition:background .15s,color .15s;
}
.switcher a:last-child{border-right:0;}
.switcher a:hover{background:var(--sand);color:var(--ink);}
.switcher a.on{background:var(--ink);color:var(--paper);}
.switcher .lbl{
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slate);padding:0 12px 0 2px;
}

/* ============================================================ BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.04em;
  padding:14px 26px;border-radius:2px;
  transition:transform .15s,background .2s,color .2s;
}
.btn .arr{transition:transform .2s;}
.btn:hover .arr{transform:translateX(4px);}
.btn-solid{background:var(--crimson);color:#fff;}
.btn-solid:hover{background:var(--crimson-deep);}
.btn-ghost{border:1px solid var(--ink);color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}
.link-underline{
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--crimson);
  display:inline-flex;align-items:center;gap:9px;
  padding-bottom:3px;border-bottom:1.5px solid var(--crimson);
}
.link-underline .arr{transition:transform .2s;}
.link-underline:hover .arr{transform:translateX(4px);}

/* ============================================================ HERO */
.hero{padding-top:clamp(48px,7vw,96px);}
.hero-head{
  display:grid;grid-template-columns:1fr;gap:28px;
  padding-bottom:clamp(36px,5vw,64px);
}
.hero-head .meta-row{
  display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:16px;
  border-top:1px solid var(--line);padding-top:18px;
}
.hero-figure{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--sand);
  border:1px solid var(--line);
}
.hero-figure img{width:100%;height:100%;object-fit:cover;}
.hero-figure .plate-cap{
  position:absolute;left:0;bottom:0;
  background:var(--paper);
  border-top:1px solid var(--line);border-right:1px solid var(--line);
  padding:10px 16px;
}

/* ============================================================ STORY / INTRO */
.story{padding:clamp(64px,9vw,128px) 0;}
.story-grid{
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(32px,6vw,96px);align-items:start;
}
.story-grid .label-col{position:sticky;top:110px;}
.drop p{margin-bottom:1.1em;}
.drop p:first-of-type::first-letter{
  font-family:var(--serif);
  float:left;font-size:5.2em;line-height:.78;
  padding:.04em .12em 0 0;color:var(--crimson);font-weight:400;
}

/* ============================================================ FEATURED PROJECTS */
.featured{padding:clamp(48px,7vw,96px) 0;border-top:1px solid var(--line);}
.sec-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px);
}
.proj-list{display:grid;gap:0;}
.proj-row{
  display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(20px,4vw,56px);
  align-items:center;
  padding:clamp(26px,3.4vw,44px) 0;
  border-top:1px solid var(--line);
}
.proj-row:last-child{border-bottom:1px solid var(--line);}
.proj-row .idx{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--crimson);letter-spacing:.06em;}
.proj-row .pfig{
  aspect-ratio:4/3;overflow:hidden;background:var(--sand);border:1px solid var(--line);
}
.proj-row .pfig img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.proj-row:hover .pfig img{transform:scale(1.04);}
.proj-row .pname{font-family:var(--serif);font-size:clamp(26px,3vw,40px);font-weight:400;line-height:1.05;margin-bottom:10px;}
.proj-row .pmeta{font-family:var(--sans);font-size:13px;color:var(--slate);letter-spacing:.02em;display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:18px;}
.proj-row .pmeta span{position:relative;}
.proj-row .pmeta span+span::before{content:"";position:absolute;left:-9px;top:50%;width:3px;height:3px;border-radius:50%;background:var(--line-strong);transform:translateY(-50%);}
.placeholder-ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,var(--sand),var(--sand) 11px,#efe8dd 11px,#efe8dd 22px);
}
.placeholder-ph span{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);background:var(--paper);padding:5px 10px;border:1px solid var(--line);}

/* ============================================================ NUMBERS */
.numbers{padding:clamp(56px,7vw,104px) 0;background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.num-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);}
.num{border-top:2px solid var(--crimson);padding-top:18px;}
.num .n{font-family:var(--serif);font-size:clamp(46px,6vw,82px);line-height:1;font-weight:400;}
.num .k{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--ink-soft);margin-top:10px;}
.prov{
  font-family:var(--sans);font-size:11px;letter-spacing:.05em;color:var(--slate);
  border-bottom:1px dashed var(--line-strong);
}
.prov-note{font-family:var(--sans);font-size:12px;color:var(--slate);margin-top:28px;display:flex;align-items:center;gap:8px;}
.prov-note::before{content:"";width:18px;height:1px;border-bottom:1px dashed var(--slate);}

/* ============================================================ NEIGHBORHOOD */
.hood{padding:clamp(64px,9vw,128px) 0;}
.hood-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:clamp(32px,4vw,52px);}
.hood-fig{overflow:hidden;background:var(--sand);border:1px solid var(--line);position:relative;}
.hood-fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;}
.hood-fig:hover img{transform:scale(1.05);}
.hood-fig.a{grid-column:span 7;aspect-ratio:16/10;}
.hood-fig.b{grid-column:span 5;aspect-ratio:4/5;}
.hood-fig.c{grid-column:span 5;aspect-ratio:4/5;}
.hood-fig.d{grid-column:span 7;aspect-ratio:16/10;}
.hood-cap{position:absolute;left:0;bottom:0;background:var(--paper);border-top:1px solid var(--line);border-right:1px solid var(--line);padding:8px 13px;}

/* ============================================================ CTA */
.cta{padding:clamp(72px,10vw,150px) 0;background:var(--ink);color:var(--paper);text-align:center;}
.cta h2{color:var(--paper);}
.cta .btn-solid{margin-top:36px;}
.cta-sun{width:46px;height:46px;margin:0 auto 28px;}

/* ============================================================ FOOTER */
footer{background:var(--ink);color:#cfc8bd;padding:clamp(48px,6vw,84px) 0 40px;border-top:1px solid #2c2926;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;}
.foot-grid h4{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8a847b;margin-bottom:16px;font-weight:600;}
.foot-grid a,.foot-grid p{font-family:var(--sans);font-size:14px;color:#cfc8bd;line-height:1.9;}
.foot-grid a:hover{color:var(--orange);}
.foot-brand .word{font-family:var(--sans);font-weight:700;letter-spacing:.3em;font-size:16px;color:var(--paper);}
.foot-tag{font-family:var(--serif);font-style:italic;font-weight:300;font-size:19px;color:#9a948b;margin-top:14px;}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:54px;padding-top:24px;border-top:1px solid #2c2926;font-family:var(--sans);font-size:12px;color:#7d776e;letter-spacing:.03em;}

/* ============================================================ CASE STUDY */
.cs-hero{position:relative;height:min(82vh,760px);overflow:hidden;background:var(--ink);}
.cs-hero img{width:100%;height:100%;object-fit:cover;}
.cs-hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.15) 0%,rgba(20,18,16,.05) 40%,rgba(20,18,16,.72) 100%);}
.cs-hero .cs-head{position:absolute;left:0;right:0;bottom:0;color:var(--paper);padding-bottom:clamp(28px,4vw,52px);}
.cs-hero .cs-head h1{color:#fff;}
.cs-meta-bar{display:flex;flex-wrap:wrap;gap:26px;margin-top:20px;border-top:1px solid rgba(255,255,255,.25);padding-top:16px;}
.cs-meta-bar .m{}
.cs-meta-bar .m .k{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:3px;}
.cs-meta-bar .m .v{font-family:var(--serif);font-size:18px;color:#fff;}

.cs-body{padding:clamp(56px,8vw,112px) 0;}
.cs-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,0.9fr);gap:clamp(36px,6vw,88px);align-items:start;}
.cs-narrative p{margin-bottom:1.2em;}
.cs-narrative p.intro{font-size:clamp(22px,2.3vw,30px);line-height:1.45;font-weight:300;color:var(--ink-soft);margin-bottom:1.4em;}
.facts{border:1px solid var(--line);position:sticky;top:100px;}
.facts h4{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--crimson);padding:18px 22px;border-bottom:1px solid var(--line);font-weight:600;}
.facts dl{padding:6px 22px 12px;}
.facts .frow{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);}
.facts .frow:last-child{border-bottom:0;}
.facts dt{font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--slate);}
.facts dd{font-family:var(--serif);font-size:16px;text-align:right;}

/* before / after — framed plates */
.ba{padding:clamp(48px,7vw,96px) 0;background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.ba-plates{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px);margin-top:clamp(28px,4vw,48px);}
.plate figure{border:1px solid var(--line-strong);background:var(--paper);padding:12px;}
.plate .img{aspect-ratio:4/5;overflow:hidden;background:var(--ink);}
.plate .img img{width:100%;height:100%;object-fit:cover;}
.plate figcaption{display:flex;justify-content:space-between;align-items:baseline;padding:14px 4px 4px;gap:12px;}
.plate .pl-label{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;}
.plate.before .pl-label{color:var(--slate);}
.plate.after .pl-label{color:var(--crimson);}
.plate .pl-desc{font-family:var(--serif);font-style:italic;font-weight:300;font-size:15px;color:var(--ink-soft);text-align:right;}

/* gallery */
.gallery{padding:clamp(56px,8vw,112px) 0;}
.gal-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:clamp(28px,4vw,48px);}
.gal{overflow:hidden;background:var(--sand);border:1px solid var(--line);}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;}
.gal:hover img{transform:scale(1.04);}
.gal.wide{grid-column:span 8;aspect-ratio:16/10;}
.gal.tall{grid-column:span 4;aspect-ratio:3/4;}
.gal.half{grid-column:span 6;aspect-ratio:4/3;}
.gal.third{grid-column:span 4;aspect-ratio:1/1;}

/* pull quote */
.pull{padding:clamp(56px,8vw,112px) 0;border-top:1px solid var(--line);}
.pull blockquote{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.6vw,46px);line-height:1.28;max-width:18ch;}
.pull blockquote .q{color:var(--crimson);}
.pull cite{display:block;font-family:var(--sans);font-style:normal;font-size:13px;letter-spacing:.04em;color:var(--slate);margin-top:24px;}

/* prev/next */
.csnav{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;}
.csnav a{padding:clamp(28px,4vw,52px) var(--gutter);display:block;transition:background .2s;}
.csnav a:hover{background:var(--sand);}
.csnav a+a{border-left:1px solid var(--line);text-align:right;}
.csnav .dir{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--crimson);margin-bottom:8px;}
.csnav .pn{font-family:var(--serif);font-size:clamp(22px,2.6vw,34px);}

/* ============================================================ RESPONSIVE */
@media(max-width:900px){
  .nav-links{display:none;}
  .story-grid{grid-template-columns:1fr;}
  .story-grid .label-col{position:static;}
  .proj-row{grid-template-columns:1fr;gap:18px;}
  .proj-row .idx{display:none;}
  .num-grid{grid-template-columns:1fr;gap:8px;}
  .num{border-top-width:2px;}
  .hood-fig.a,.hood-fig.b,.hood-fig.c,.hood-fig.d{grid-column:span 12;aspect-ratio:16/10;}
  .cs-layout{grid-template-columns:1fr;}
  .facts{position:static;}
  .ba-plates{grid-template-columns:1fr;}
  .gal.wide,.gal.tall,.gal.half,.gal.third{grid-column:span 12;aspect-ratio:16/10;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px;}
  .switcher .lbl{display:none;}
}
@media(max-width:560px){
  body{font-size:17px;}
  .foot-grid{grid-template-columns:1fr;}
  .csnav{grid-template-columns:1fr;}
  .csnav a+a{border-left:0;border-top:1px solid var(--line);text-align:left;}
}