/* ============================================================
   SANDRA LUNA DESIGN — "Atelier" editorial monograph system
   Helvetica Neue · gallery paper · hairlines · real photography
   ============================================================ */
@import url("fonts.css");

:root{
  --paper:#f4f1ec;
  --paper-2:#eceae2;
  --ink:#16140f;
  --ink-80:rgba(22,20,15,.80);
  --ink-65:rgba(22,20,15,.65);
  --ink-50:rgba(22,20,15,.50);
  --ink-38:rgba(22,20,15,.38);
  --rule:rgba(22,20,15,.16);
  --rule-soft:rgba(22,20,15,.09);
  --ember:#b4521f;            /* used hair-thin, sparingly */
  --hero-emph:#b9542f;        /* kinetic hero "and its power" fill */
  --wrap:1360px;
  --gx:clamp(22px,5vw,72px);  /* page gutter */
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"HN",-apple-system,system-ui,sans-serif;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-size:18px;line-height:1.6;letter-spacing:-0.006em;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--ink);color:var(--paper);}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gx);padding-right:var(--gx);}

/* ---- shared label / eyebrow ---- */
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-50);}
.rulehead{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  border-top:1px solid var(--ink);padding-top:18px;}
.rulehead .l{font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;}
.rulehead .r{font-size:12px;letter-spacing:.04em;color:var(--ink-50);}

/* =====================  HEADER  ===================== */
.site-head{position:sticky;top:0;z-index:50;
  background:rgba(244,241,236,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;height:74px;}
.brand{display:flex;align-items:center;gap:13px;}
.brand .mk{width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #ffd9a0, #e08a3c 55%, #b4521f 100%);
  box-shadow:0 0 14px rgba(224,138,60,.55);}
.brand .wm{font-size:15px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;}
.nav{display:flex;gap:34px;}
.nav a{font-size:13px;font-weight:400;letter-spacing:.02em;color:var(--ink-50);
  padding:6px 0;position:relative;transition:color .25s;}
.nav a:hover{color:var(--ink);}
.nav a.active{color:var(--ink);}
.nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ember);}
.nav-toggle{display:none;background:none;border:0;font:inherit;cursor:pointer;}

/* =====================  FOOTER  ===================== */
.site-foot{border-top:1px solid var(--ink);margin-top:0;padding:clamp(64px,9vw,120px) 0 56px;}
.foot-cta{font-weight:100;font-size:clamp(46px,8vw,104px);line-height:.96;letter-spacing:-0.04em;}
.foot-cta a{border-bottom:1px solid var(--rule);transition:border-color .25s;}
.foot-cta a:hover{border-color:var(--ink);}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:clamp(48px,7vw,90px);
  border-top:1px solid var(--rule);padding-top:40px;}
.foot-grid h4{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-50);margin:0 0 14px;}
.foot-grid p,.foot-grid a{font-size:14px;line-height:1.7;color:var(--ink-80);margin:0;}
.foot-grid a:hover{color:var(--ember);}
.colophon{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin-top:56px;font-size:12px;letter-spacing:.02em;color:var(--ink-38);}

/* =====================  HERO  ===================== */
.hero{padding:clamp(56px,10vw,120px) 0 clamp(48px,7vw,84px);border-bottom:1px solid var(--rule);}
.hero .eyebrow{margin-bottom:clamp(34px,5vw,56px);}
.hero h1{font-weight:100;font-size:clamp(54px,10.6vw,144px);line-height:.92;letter-spacing:-0.05em;margin:0;max-width:15ch;}
.hero h1 em{font-style:italic;font-weight:300;color:var(--hero-emph);}
/* kinetic stagger: words wrapped at runtime; safe-by-default if JS/anime absent */
.hero h1 .w{display:inline-block;will-change:transform,opacity;}
@media (prefers-reduced-motion:reduce){
  .hero h1 .w{opacity:1!important;transform:none!important;}
}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:32px;margin-top:clamp(40px,6vw,72px);}
.hero-foot .lede{font-size:clamp(17px,2vw,21px);line-height:1.62;max-width:46ch;color:var(--ink-80);font-weight:400;}
.hero-foot .meta{font-size:12px;letter-spacing:.04em;color:var(--ink-50);text-align:right;line-height:1.9;}
.hero-foot .meta b{display:block;color:var(--ink);font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:11px;margin-bottom:6px;}

/* =====================  SECTION SHELL  ===================== */
.section{padding:clamp(64px,9vw,128px) 0;}
.section.alt{background:var(--paper-2);}
.section + .section{border-top:1px solid var(--rule);}

/* =====================  PLATES (project rows)  ===================== */
.plate{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(36px,5vw,84px);}
.plate + .plate{margin-top:clamp(64px,8vw,128px);}
.plate.flip .pfig{order:2;}
.pfig{position:relative;overflow:hidden;background:var(--paper-2);}
.pfig img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transition:transform 1.1s cubic-bezier(.19,1,.22,1);}
.plate:hover .pfig img{transform:scale(1.035);}
.pfig .tag{position:absolute;left:18px;top:16px;font-size:10px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5);}
.pbody .ix{font-size:12px;letter-spacing:.16em;color:var(--ink-38);margin-bottom:22px;
  display:flex;align-items:center;gap:12px;}
.pbody .ix::after{content:"";flex:1;height:1px;background:var(--rule);}
.pbody h3{font-weight:200;font-size:clamp(30px,4vw,52px);line-height:1.02;letter-spacing:-0.03em;margin:0 0 18px;}
.pbody .desc{font-size:16px;line-height:1.72;color:var(--ink-65);max-width:42ch;margin:0;}
.pbody .pmeta{display:flex;gap:34px;margin-top:30px;}
.pbody .pmeta div{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50);}
.pbody .pmeta b{display:block;color:var(--ink);font-weight:500;margin-bottom:5px;}
.viewlink{display:inline-flex;align-items:center;gap:10px;margin-top:34px;white-space:nowrap;
  font-size:13px;letter-spacing:.04em;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px;
  transition:gap .25s,color .25s,border-color .25s;}
.viewlink:hover{gap:16px;color:var(--ember);border-color:var(--ember);}

/* =====================  STATEMENT  ===================== */
.statement{text-align:center;}
.statement p{font-weight:200;font-size:clamp(26px,4.3vw,52px);line-height:1.22;letter-spacing:-0.025em;
  max-width:20ch;margin:0 auto;}
.statement p em{font-style:italic;font-weight:300;color:var(--ink-50);}

/* =====================  WORK INDEX GRID  ===================== */
.cat-head{margin-bottom:clamp(40px,5vw,64px);}
.cat-head h2{font-weight:100;font-size:clamp(34px,5vw,68px);letter-spacing:-0.035em;margin:14px 0 0;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px) clamp(20px,2.5vw,36px);}
.card{display:flex;flex-direction:column;}
.cfig{position:relative;overflow:hidden;background:var(--paper-2);}
.cfig img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s cubic-bezier(.19,1,.22,1);}
.card:hover .cfig img{transform:scale(1.04);}
.cfig .tag{position:absolute;left:14px;top:12px;font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55);}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--ink);padding-top:14px;margin-top:18px;gap:14px;}
.card h3{font-weight:400;font-size:18px;letter-spacing:-0.01em;margin:0;line-height:1.15;}
.card .num{font-size:11px;letter-spacing:.1em;color:var(--ink-38);flex:0 0 auto;}
.card .loc{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50);margin-top:8px;}
.card .cdesc{font-size:14px;line-height:1.6;color:var(--ink-65);margin:10px 0 0;}

/* =====================  ABOUT  ===================== */
.lead-2col{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(36px,6vw,90px);align-items:start;}
.lead-2col .body p{font-size:clamp(17px,1.6vw,20px);line-height:1.66;color:var(--ink-80);margin:0 0 22px;}
.lead-2col .body p:last-child{margin-bottom:0;}
.about-fig{margin-top:clamp(48px,7vw,88px);}
.about-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.about-fig figcaption{font-size:12px;letter-spacing:.06em;color:var(--ink-50);margin-top:14px;}

.process{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,40px);}
.process .step{border-top:1px solid var(--ink);padding-top:22px;}
.process .step .n{font-size:12px;letter-spacing:.14em;color:var(--ink-38);}
.process .step h3{font-weight:400;font-size:21px;letter-spacing:-0.015em;margin:30px 0 12px;line-height:1.12;}
.process .step p{font-size:14.5px;line-height:1.62;color:var(--ink-65);margin:0;}

.services{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(40px,6vw,90px);}
.services .svc{display:flex;align-items:baseline;gap:18px;padding:22px 0;border-bottom:1px solid var(--rule);}
.services .svc .n{font-size:12px;color:var(--ink-38);letter-spacing:.08em;flex:0 0 28px;}
.services .svc .t{font-weight:300;font-size:clamp(20px,2.4vw,28px);letter-spacing:-0.02em;}

.creds{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);margin-top:clamp(40px,5vw,64px);}
.creds div{padding:26px clamp(22px,2.4vw,36px);border-right:1px solid var(--rule);}
.creds div:first-child{padding-left:0;}
.creds div:last-child{border-right:0;padding-right:0;}
.creds .k{font-weight:100;font-size:clamp(28px,3.4vw,46px);letter-spacing:-0.03em;line-height:1;}
.creds .v{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);margin-top:10px;}

/* =====================  CONTACT  ===================== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);margin-top:clamp(48px,6vw,80px);}
.office{border-top:1px solid var(--ink);padding-top:26px;}
.office h3{font-weight:200;font-size:clamp(30px,4vw,52px);letter-spacing:-0.03em;margin:0 0 24px;}
.office .row{font-size:16px;line-height:1.7;color:var(--ink-80);margin:0 0 6px;}
.office .label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-50);margin:22px 0 6px;}
.office a:hover{color:var(--ember);}

/* =====================  RESPONSIVE  ===================== */
@media (max-width:920px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .process{grid-template-columns:repeat(2,1fr);gap:36px 28px;}
  .foot-grid{grid-template-columns:repeat(2,1fr);gap:32px;}
  .creds{grid-template-columns:repeat(2,1fr);}
  .creds div:nth-child(2){border-right:0;}
  .lead-2col{grid-template-columns:1fr;gap:40px;}
}
@media (max-width:680px){
  body{font-size:16px;}
  .nav{display:none;}
  .nav.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);padding:8px var(--gx) 20px;}
  .nav.open a{padding:14px 0;border-bottom:1px solid var(--rule-soft);font-size:16px;color:var(--ink);}
  .nav-toggle{display:block;font-size:13px;letter-spacing:.16em;text-transform:uppercase;}
  .plate,.plate.flip{grid-template-columns:1fr;gap:24px;}
  .plate.flip .pfig{order:0;}
  .grid{grid-template-columns:1fr;}
  .services{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .hero-foot{flex-direction:column;align-items:flex-start;}
  .hero-foot .meta{text-align:left;}
}