/* 29 Eleven Interiors --- Shared Design System */
/* Auto-extracted from K.4 design packet */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{ --slate:#1e2630;--slate2:#252f3c;--steel:#2e3d4e; --fog:#8a9aaa;--mist:#b8c4cc;--ice:#dde6ec; --snow:#ffffff;--champ:#d4c89a;--champ2:#b8a870; --nav:210px; --body-max:680px; }
html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;background:var(--snow);color:var(--slate);overflow-x:hidden}
/* ─── LEFT NAV ─── */ .nav{position:fixed;left:0;top:0;bottom:0;width:var(--nav);background:transparent;display:flex;flex-direction:column;padding:40px 28px;z-index:500}
.nl{margin-bottom:52px}
.nl img{width:130px;display:block}
.nlinks{list-style:none;flex:1}
.nlinks li{margin-bottom:20px}
.nlinks a{font-size:8.5px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--steel);text-decoration:none;transition:color .3s;display:flex;align-items:center}
.nlinks a::before{content:'+';font-size:10px;color:var(--champ2);opacity:0;transition:opacity .32s;flex-shrink:0;margin-right:0;transition:opacity .32s, margin-right .32s}
.nlinks a:hover,.nlinks .on a{color:var(--slate)}
.nlinks a:hover::before,.nlinks .on a::before{opacity:1;margin-right:6px}
.nft{margin-top:auto;padding-top:18px;border-top:1px solid rgba(30,38,48,.12)}
.ncta{display:inline-block;margin-bottom:10px;font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--champ2);text-decoration:none;transition:color .2s}
.ncta:hover{color:var(--slate)}
.ncity{font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
main{margin-left:var(--nav)}
/* ─── READ PROGRESS BAR ─── */ .progress-bar{position:fixed;top:0;left:var(--nav);right:0;height:2px;background:var(--ice);z-index:600}
.progress-fill{height:100%;background:var(--champ2);width:0%;transition:width .1s linear}
/* ─── ARTICLE HERO ─── */ .art-hero{height:80vh;position:relative;overflow:hidden}
.art-hero-bg::after{display:none}
.back-link{position:absolute;top:36px;left:40px;z-index:20;display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:rgba(254,254,254,.48);text-decoration:none;transition:color .3s}
.back-link:hover{color:rgba(254,254,254,.9)}
.back-link::before{content:'+';font-size:12px}
.art-hero-content{position:absolute;bottom:0;left:0;right:0;z-index:10;padding:0 15% 64px}
.art-cat-row{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.art-cat{font-size:7.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--champ2)}
.art-dot{width:3px;height:3px;border-radius:50%;background:rgba(254,254,254,.3)}
.art-date{font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(254,254,254,.4)}
.art-read-time{font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(254,254,254,.4)}
.art-h1{font-family:'Libre Baskerville',serif;font-size:clamp(32px,4vw,54px);line-height:1.1;color:#fefefe;max-width:820px}
.art-h1 em{font-style:italic}
/* ─── ARTICLE BYLINE BAR ─── */ .byline-bar{padding:24px 15%;border-bottom:1px solid var(--ice);display:flex;align-items:center;justify-content:space-between;background:var(--snow);position:sticky;top:2px;z-index:100}
.byline-left{display:flex;align-items:center;gap:14px}
.byline-avatar{width:38px;height:38px;border-radius:50%;background:url('https://29eleveninteriors.com/wp-content/uploads/2023/05/AshleyPorter_Headshot.jpg') center/cover;flex-shrink:0}
.byline-name{font-size:10px;font-weight:400;color:var(--slate);display:block}
.byline-role{font-size:8.5px;color:var(--fog);font-weight:300;display:block;margin-top:2px}
.byline-right{display:flex;align-items:center;gap:20px}
.byline-share{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--fog);cursor:pointer;transition:color .2s;border:none;background:none;font-family:'Outfit',sans-serif}
.byline-share:hover{color:var(--champ2)}
/* ─── ARTICLE BODY ─── */ .art-body{padding:72px 15% 0;max-width:1200px;margin:0 auto}
/* Pull intro / lede */ .art-lede{font-family:'Libre Baskerville',serif;font-size:20px;line-height:1.75;color:var(--steel);margin-bottom:48px;padding-bottom:48px;border-bottom:1px solid var(--ice)}
/* Body copy */ .art-p{font-size:13px;line-height:2.15;color:var(--slate);font-weight:300;margin-bottom:22px}
.art-p strong{font-weight:400;color:var(--slate)}
/* Section heading */ .art-h2{font-family:'Libre Baskerville',serif;font-size:28px;line-height:1.2;color:var(--slate);margin:56px 0 20px}
.art-h2 em{font-style:italic;color:var(--steel)}
/* Pull quote */ .pull-quote{margin:52px -8%;padding:44px 56px;background:var(--slate);position:relative}
.pull-quote::before{content:'"';font-family:'Libre Baskerville',serif;font-size:120px;line-height:.8;color:rgba(212,200,154,.1);position:absolute;top:20px;left:32px}
.pull-quote p{font-family:'Libre Baskerville',serif;font-style:italic;font-size:22px;line-height:1.6;color:var(--ice);position:relative;z-index:1}
.pull-quote cite{display:block;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--fog);margin-top:18px;font-style:normal}
/* Inline image --- full bleed within column */ .art-img-full{margin:52px -8%;height:480px;position:relative;overflow:hidden}
.art-img-full-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s ease}
.art-img-full:hover .art-img-full-bg{transform:scale(1.02)}
.art-img-caption{position:absolute;bottom:16px;right:24px;font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:rgba(254,254,254,.4)}
/* Two-up inline images */ .art-img-duo{margin:44px -4%;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.art-img-duo-item{height:340px;overflow:hidden;position:relative}
.art-img-duo-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s ease}
.art-img-duo-item:hover .art-img-duo-bg{transform:scale(1.04)}
/* Callout box */ .callout{margin:44px 0;padding:32px 36px;background:var(--ice);border-left:3px solid var(--champ2)}
.callout-label{font-size:7.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--champ2);margin-bottom:10px;display:block}
.callout p{font-size:12px;line-height:1.85;color:var(--steel);font-weight:300}
/* Article closing rule + share --> .art-close{margin-top:64px;padding-top:40px;border-top:1px solid var(--ice);display:flex;align-items:center;justify-content:space-between;padding-bottom:72px}
.art-close-left{}
.art-close-tag{font-size:8px;letter-spacing:.24em;text-transform:uppercase;color:var(--mist);margin-bottom:6px}
.art-close-author{font-family:'Libre Baskerville',serif;font-style:italic;font-size:18px;color:var(--slate)}
.art-close-right{display:flex;gap:12px}
.share-btn{padding:10px 18px;border:1px solid var(--ice);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--fog);background:none;cursor:pointer;font-family:'Outfit',sans-serif;transition:all .2s}
.share-btn:hover{border-color:var(--champ2);color:var(--champ2)}
/* ─── MORE ARTICLES STRIP ─── */ .more-strip{background:var(--slate2);padding:72px}
.more-strip-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:48px}
.more-strip-h2{font-family:'Libre Baskerville',serif;font-size:26px;color:var(--ice)}
.more-strip-h2 em{font-style:italic;color:var(--champ)}
.more-strip-link{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--champ2);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.more-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.mc{cursor:pointer;text-decoration:none;color:inherit}
.mc-img{height:200px;overflow:hidden;position:relative;margin-bottom:16px}
.mc-img-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .7s ease}
.mc:hover .mc-img-bg{transform:scale(1.05)}
.mc-cat{font-size:7.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--champ2);margin-bottom:8px}
.mc-h3{font-family:'Libre Baskerville',serif;font-style:italic;font-size:18px;color:var(--ice);line-height:1.25;transition:color .3s}
.mc:hover .mc-h3{color:var(--champ)}
.mc-date{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog);margin-top:10px;font-weight:200}
/* ─── FOOTER ─── */ footer{background:var(--slate2);padding:64px 72px 30px}
.ftg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:44px;margin-bottom:22px}
.ftlog img{width:154px;display:block;margin-bottom:14px}
.ft-services{font-family:'Raleway',sans-serif;font-size:9.2px;letter-spacing:.12em;text-transform:uppercase;color:rgba(138,154,170,.98);line-height:2;font-weight:500;white-space:nowrap}
.fttag{font-size:11px;line-height:1.9;color:rgba(138,154,170,.58);font-weight:300;max-width:220px}
.fth{font-size:8.7px;letter-spacing:.3em;text-transform:uppercase;color:var(--fog);margin-bottom:16px}
.ftul{list-style:none}
.ftul li{margin-bottom:10px}
.ftul a{font-size:11.7px;color:rgba(138,154,170,.98);text-decoration:none;font-weight:300;transition:color .3s}
.ftul a:hover{color:var(--fog)}
.ftbot{display:flex;justify-content:space-between}
.ftc{font-size:9.7px;letter-spacing:.1em;color:rgba(138,154,170,.98)}
/* ═══ DESIGN E --- Cinematic Enhancements ═══ */ /* Letterbox bars --- thin cinematic framing */ .hero-letterbox{ position:absolute;inset:0;z-index:3;pointer-events:none; }
.hero-letterbox::before,.hero-letterbox::after{display:none}
.hero-letterbox::before{top:0}
.hero-letterbox::after{bottom:0}
/* Ken Burns slow pan --- hero backgrounds */ @keyframes kb-hero{ 0%{transform:scale(1)} 100%{transform:scale(1.08) translate(-1.2%,-0.6%)} }
.kb-pan{animation:kb-hero 28s ease-in-out infinite alternate}
/* Ken Burns --- CTA sections */ @keyframes kb-cta{ 0%{transform:scale(1) translate(0,0)} 25%{transform:scale(1.04) translate(-0.8%,-0.4%)} 50%{transform:scale(1.06) translate(-1.2%,0.2%)} 75%{transform:scale(1.04) translate(-0.4%,0.6%)} 100%{transform:scale(1.08) translate(-1.6%,-0.2%)} }
/* Ghost image texture for dark panels */ .ghost-bg{ position:absolute;inset:0; background-size:cover;background-position:center; opacity:.08; animation:kb-hero 35s ease-in-out infinite alternate; pointer-events:none; }
/* Film strip --- subtle bottom treatment on CTAs */ .film{position:absolute;bottom:0;left:0;right:0;height:26%;display:flex;gap:2px;z-index:2;opacity:.14;pointer-events:none}
.fp{flex:1;background-size:cover;background-position:center}
.fv{flex:1.6;background:rgba(20,28,36,.5);display:flex;align-items:center;justify-content:center}
.play{width:36px;height:36px;border-radius:50%;border:1px solid rgba(254,254,254,.3);display:flex;align-items:center;justify-content:center;color:rgba(254,254,254,.5);font-size:12px}
/* Scroll indicator */ .scroll-hint{ position:absolute;bottom:56px;left:50%;transform:translateX(-50%); z-index:10;display:flex;flex-direction:column;align-items:center;gap:6px; }
.scroll-line{width:1px;height:22px;background:rgba(255,255,255,.18);animation:sc-anim 2s ease infinite}
@keyframes sc-anim{0%,100%{opacity:.18;transform:scaleY(1)}50%{opacity:.5;transform:scaleY(.6)}}
.scroll-label{font-size:7px;letter-spacing:.28em;text-transform:uppercase;color:rgba(254,254,254,.22)}
/* Media badge indicator */ .media-badge{ position:absolute;top:56px;right:72px;z-index:10; font-size:7.5px;letter-spacing:.28em;text-transform:uppercase; color:rgba(254,254,254,.25); display:flex;align-items:center;gap:8px; }
.media-badge-dot{ width:5px;height:5px;border-radius:50%; background:var(--champ2);opacity:.6; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.art-hero-bg{animation:kb-hero 28s ease-in-out infinite alternate}
/* K.2 Logo Fix --- match phone version: show copper colors */ .nl img { filter: none !important; opacity: 1 !important; }
.ftlog img { filter: none !important; opacity: 1 !important; margin-bottom: 14px !important; }
/* K.2 CTA --- native champagne color, no opacity */ .ncta { background: transparent !important; border: none !important; color: var(--champ2) !important; opacity: 1 !important; padding: 0 !important; }
.ncta:hover { color: var(--slate) !important; opacity: 1 !important; }
/* === K.3 SOFT HALO TEXT TREATMENT === */ .art-h1{text-shadow:0 2px 10px rgba(30,38,48,0.5),0 4px 30px rgba(30,38,48,0.4),0 8px 60px rgba(30,38,48,0.35),0 12px 100px rgba(30,38,48,0.25);}
.art-cat,.art-date,.art-read-time{text-shadow:0 1px 8px rgba(30,38,48,0.5),0 3px 20px rgba(30,38,48,0.3);}

/* ═══ Design N GLOBAL --- Rounded corners on all buttons ═══ */
a[class*="btn"], a[class*="hbw"], a[class*="hbg"], button,
.ctabtn, .iqsub, .pbtn, .tlink, .sa, .scard,
input[type="submit"], .ncta, select,
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="url"], input[type="number"],
textarea { border-radius: 4px !important; }

/* ═══ DESIGN Design N --- Blacknegative-Inspired Enhancements ═══ */

/* ─── Design N TYPOGRAPHY --- Ultra-tracked luxury spacing ─── */
.ls-wide{letter-spacing:.35em !important}
.ls-ultra{letter-spacing:.55em !important}
.ls-label{letter-spacing:.42em !important}

/* ─── Design N PAGE TRANSITIONS ─── */
.page-wrap{
  opacity:0;transform:translateY(8px);
  animation:designL-fadeIn .6s ease .1s forwards;
}
@keyframes designL-fadeIn{
  to{opacity:1;transform:translateY(0)}
}
.page-wrap.designL-out{
  animation:designL-fadeOut .3s ease forwards !important;
}
@keyframes designL-fadeOut{
  to{opacity:0;transform:translateY(-6px)}
}

/* ─── Design N NUMBERED REVEAL GRID --- Portfolio ─── */
.portfolio-section{
  background:var(--snow);padding:100px 0 120px;position:relative;overflow:hidden;
}
.portfolio-header{
  text-align:center;margin-bottom:56px;position:relative;z-index:2;
}
.portfolio-header-ey{
  font-size:8px;letter-spacing:.55em;text-transform:uppercase;color:var(--fog);margin-bottom:14px;
}
.portfolio-header-h2{
  font-family:'Libre Baskerville',serif;font-size:44px;color:var(--slate);
}
.portfolio-header-h2 em{font-style:italic;color:var(--champ)}

/* Grid */
.portfolio-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  max-width:1460px;margin:0 auto;padding:0 56px;position:relative;z-index:2;
}

/* Card */
.pgrid-card{
  position:relative;overflow:hidden;cursor:pointer;display:block;text-decoration:none;color:inherit;border-radius:6px;
}
.pgrid-img{
  display:block;width:100%;height:auto;
  transition:transform .7s ease,filter .6s ease;
  border-radius:6px;
}
.pgrid-card:hover .pgrid-img{
  transform:scale(1.05);filter:saturate(1) brightness(.9);
}
.pgrid-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(transparent 60%,rgba(30,38,48,.3));
  pointer-events:none;border-radius:6px;
}

/* Large ghost number */
.pgrid-big-num{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:'Libre Baskerville',serif;font-style:italic;
  font-size:140px;color:rgba(212,200,154,.06);
  pointer-events:none;transition:color .5s;z-index:1;
}
.pgrid-card:hover .pgrid-big-num{color:rgba(212,200,154,.1)}

/* Info overlay */
.pgrid-info{
  position:absolute;bottom:0;left:0;right:0;
  padding:32px 28px;z-index:2;
  transform:translateY(20px);opacity:.7;
  transition:all .4s ease;
  display:flex;flex-direction:column;
}
.pgrid-card:hover .pgrid-info{transform:translateY(0);opacity:1}
.pgrid-num{
  font-size:9px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--champ);opacity:.5;display:block;margin-bottom:6px;
}
.pgrid-name{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:#fefefe;display:block;text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.pgrid-loc{
  font-family:'Libre Baskerville',serif;font-style:italic;
  font-size:13px;color:var(--champ);margin-top:4px;display:block;text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.pgrid-line{
  display:block;width:28px;height:1px;
  background:var(--champ);opacity:.4;margin:14px 0;
  transition:width .4s ease;
}
.pgrid-card:hover .pgrid-line{width:48px;opacity:.7}
.pgrid-cta{
  font-size:7px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--champ);display:block;
  opacity:0;transform:translateY(8px);
  transition:all .3s ease .1s;
}
.pgrid-card:hover .pgrid-cta{opacity:1;transform:translateY(0)}

/* Footer */
.portfolio-footer{
  text-align:center;margin-top:48px;position:relative;z-index:2;
}
.portfolio-footer a{
  font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--steel);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  transition:gap .3s;
}
.portfolio-footer a:hover{gap:16px}
.portfolio-footer a::after{content:'+'}

/* ─── Design N EDITORIAL GRID (Interiors page) ─── */
.editorial-grid{padding:56px 72px 96px}
.ed-row{display:flex;gap:3px;margin-bottom:3px}
.ed-row--featured{display:block}
.ed-row--duo .ed-card:first-child{flex:6}
.ed-row--duo .ed-card:last-child{flex:4}
.ed-row--trio .ed-card:nth-child(1){flex:4}
.ed-row--trio .ed-card:nth-child(2){flex:3}
.ed-row--trio .ed-card:nth-child(3){flex:3}
.ed-card{
  position:relative;overflow:hidden;cursor:pointer;
  display:block;text-decoration:none;
}
.ed-card-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .9s ease;
}
.ed-card:hover .ed-card-bg{transform:scale(1.03)}
.ed-card::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,transparent 40%,rgba(30,38,48,.72) 100%);
  opacity:.4;transition:opacity .4s;pointer-events:none;
}
.ed-card:hover::after{opacity:1}
.ed-card-info{
  position:absolute;bottom:0;left:0;right:0;padding:28px 24px;
  opacity:.4;transition:all .4s;z-index:2;
}
.ed-card:hover .ed-card-info{opacity:1}
.ed-num{
  font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(254,254,254,.3);margin-bottom:6px;display:block;
  position:absolute;top:20px;left:24px;z-index:3;
}
.ed-accent{width:24px;height:1.5px;background:var(--champ2);margin-bottom:8px;display:block;}
.ed-name{
  font-family:'Libre Baskerville',serif;font-style:italic;
  font-size:22px;color:#fefefe;display:block;line-height:1.2;
}
.ed-type{
  font-size:8px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(254,254,254,.4);margin-top:5px;display:block;
}
/* Text overlay card */
.ed-text-card{
  background:var(--snow);padding:48px 40px;
  display:flex;flex-direction:column;justify-content:center;
  min-height:380px;position:relative;
}
.ed-text-card .ed-tc-ey{
  font-size:7.5px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--champ2);margin-bottom:14px;
}
.ed-text-card .ed-tc-h3{
  font-family:'Libre Baskerville',serif;font-size:28px;
  line-height:1.2;color:var(--slate);margin-bottom:16px;
}
.ed-text-card .ed-tc-h3 em{font-style:italic;color:var(--steel)}
.ed-text-card .ed-tc-body{
  font-size:12px;line-height:2;color:var(--fog);font-weight:300;
}
.ed-text-card .ed-tc-link{
  display:inline-flex;align-items:center;gap:11px;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--steel);text-decoration:none;margin-top:24px;
  border-bottom:1px solid currentColor;padding-bottom:3px;
  transition:gap .3s;
}
.ed-text-card .ed-tc-link:hover{gap:19px}
.ed-text-card .ed-tc-link::after{content:'+'}
/* Row heights */
.ed-row--featured .ed-card{height:72vh}
.ed-row--duo .ed-card{height:480px}
.ed-row--trio .ed-card{height:400px}
.ed-row--text .ed-card{height:460px}
.ed-row--text{gap:0}
.ed-row--text .ed-text-card{flex:4}
.ed-row--text .ed-card{flex:6}

/* ─── Design N ANIMATED SVG ICONS ─── */
.svc-icon{
  width:80px;height:80px;margin-bottom:20px;display:block;
}
.svc-icon path,.svc-icon line,.svc-icon rect,.svc-icon circle,.svc-icon polyline{
  stroke-dasharray:var(--path-len,300);
  stroke-dashoffset:var(--path-len,300);
  transition:stroke-dashoffset 1.8s ease-out, opacity 1s ease;
  fill:none;
}
.svc-icon.animated path,.svc-icon.animated line,.svc-icon.animated rect,.svc-icon.animated circle,.svc-icon.animated polyline{
  stroke-dashoffset:0;
}
.svc-icon .accent{stroke:var(--champ);stroke-width:1.5}
.svc-icon .primary{stroke:var(--fog);stroke-width:1}
.svc-icon .detail{stroke:var(--fog);stroke-width:.5;opacity:.5}
.svc-icon.animated .detail{opacity:1}
/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .svc-icon path,.svc-icon line,.svc-icon rect,.svc-icon circle,.svc-icon polyline{
    stroke-dashoffset:0 !important;transition:none !important;
  }
  .page-wrap{animation:none !important;opacity:1 !important;transform:none !important}
  .pgrid-card,.pgrid-img{transition:none !important}
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Mobile Nav + Tablet/Phone Breakpoints
   ═══════════════════════════════════════════════════════ */

/* ─── MOBILE NAV (hidden on desktop) ─── */
.mobile-nav{display:none}

/* ─── MOBILE NAV OVERLAY (hidden on desktop) ─── */
.nav-overlay{
  display:none;position:fixed;inset:0;background:var(--slate);z-index:9999;
  flex-direction:column;align-items:center;justify-content:center;gap:18px;
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.nav-overlay.open{display:flex;opacity:1;pointer-events:auto}
.nav-overlay-logo{height:36px;width:auto;margin-bottom:12px;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.4)) drop-shadow(0 0 16px rgba(0,0,0,.2))}
.nav-overlay-line{width:28px;height:1px;background:rgba(212,200,154,.3);margin:4px 0}
.nav-overlay a{
  font-size:9px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(254,254,254,.4);text-decoration:none;transition:color .3s;
  padding:10px 20px;min-height:44px;display:flex;align-items:center;
}
.nav-overlay a:hover,.nav-overlay a.on{color:var(--champ)}
.nav-overlay-loc{font-size:7px;letter-spacing:.3em;text-transform:uppercase;color:var(--fog);margin-top:12px}
.nav-overlay-close{
  position:absolute;top:20px;right:20px;
  font-size:28px;color:var(--fog);cursor:pointer;
  background:none;border:none;font-family:'Outfit',sans-serif;
  transition:color .3s;z-index:10000;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
}
.nav-overlay-close:hover{color:#fefefe}

/* ═══ TABLET + PHONE (under 1024px) ═══ */
@media(max-width:1023px){

  /* Hide desktop sidebar */
  .nav{display:none !important}
  main{margin-left:0 !important}
  :root{--nav:0px}

  /* Show mobile nav bar */
  .mobile-nav{
    display:flex;position:fixed;top:0;left:0;right:0;z-index:900;
    height:64px;
    background:linear-gradient(180deg, rgba(30,38,48,.95) 0%, rgba(30,38,48,.7) 55%, rgba(30,38,48,0) 100%);
    flex-direction:row;align-items:center;gap:12px;
    padding:0 20px;
  }
  .mobile-nav-logo{height:24px;width:auto;
    filter:drop-shadow(0 0 6px rgba(0,0,0,.4)) drop-shadow(0 0 16px rgba(0,0,0,.2))}
  .mobile-nav-menu{
    font-size:6px;letter-spacing:.36em;text-transform:uppercase;
    color:var(--champ);cursor:pointer;
    background:none;border:none;font-family:'Outfit',sans-serif;
    text-shadow:0 0 8px rgba(0,0,0,.6),0 0 20px rgba(0,0,0,.3);
    padding:12px 16px;min-height:44px;display:flex;align-items:center;
  }

  /* Progress bar full width */
  .progress-bar{left:0}

  /* Footer responsive */
  .ftg{grid-template-columns:1fr 1fr;gap:32px}
  footer{padding:48px 32px 24px}

  /* Portfolio grid 2-col on tablet */
  .portfolio-grid{grid-template-columns:repeat(2,1fr);padding:0 32px}
  .portfolio-header-h2{font-size:36px}

  /* Editorial grid adjustments */
  .editorial-grid{padding:32px 24px 56px}
  .ed-row{flex-direction:column;gap:3px}
  .ed-row--duo .ed-card,.ed-row--trio .ed-card{height:340px}
  .ed-row--featured .ed-card{height:50vh}
  .ed-row--text{flex-direction:column}
  .ed-text-card{min-height:280px;padding:36px 28px}

  /* More articles strip */
  .more-cards{grid-template-columns:repeat(2,1fr);gap:24px}
  .more-strip{padding:48px 32px}

  /* Article body */
  .art-hero-content{padding:0 8% 48px}
  .art-body{padding:48px 8% 0}
  .byline-bar{padding:20px 8%}
  .pull-quote{margin:36px -4%;padding:32px 36px}
  .art-img-full{margin:36px -4%;height:360px}
  .art-img-duo{margin:32px 0;gap:3px}
  .art-img-duo-item{height:260px}
}

/* ═══ PHONE ONLY (under 768px) ═══ */
@media(max-width:767px){

  /* Mobile nav slightly smaller */
  .mobile-nav{height:56px;padding:0 16px}
  .mobile-nav-logo{height:20px}
  .mobile-nav-menu{font-size:5.5px;letter-spacing:.32em}

  /* Nav overlay tighter spacing */
  .nav-overlay{gap:14px}
  .nav-overlay-logo{height:28px;margin-bottom:8px}
  .nav-overlay a{font-size:8px;letter-spacing:.28em}

  /* Footer single column */
  .ftg{grid-template-columns:1fr;gap:24px}
  footer{padding:36px 24px 20px}
  .ftbot{flex-direction:column;gap:8px;text-align:center}

  /* Portfolio grid single column */
  .portfolio-grid{grid-template-columns:1fr;padding:0 20px}
  .portfolio-header{margin-bottom:36px}
  .portfolio-header-h2{font-size:28px}
  .pgrid-big-num{font-size:80px}

  /* Editorial grid */
  .editorial-grid{padding:20px 16px 40px}
  .ed-row--duo .ed-card,.ed-row--trio .ed-card{height:280px}
  .ed-row--featured .ed-card{height:40vh}
  .ed-text-card{min-height:240px;padding:28px 20px}
  .ed-text-card .ed-tc-h3{font-size:22px}

  /* More articles single column */
  .more-cards{grid-template-columns:1fr}
  .more-strip{padding:36px 20px}
  .more-strip-header{flex-direction:column;gap:12px;text-align:center}

  /* Article body full width */
  .art-hero{height:60vh}
  .art-hero-content{padding:0 20px 36px}
  .art-h1{font-size:28px}
  .art-body{padding:32px 20px 0}
  .art-lede{font-size:16px;margin-bottom:32px;padding-bottom:32px}
  .byline-bar{padding:16px 20px;flex-direction:column;gap:12px;align-items:flex-start}
  .pull-quote{margin:28px 0;padding:24px 20px}
  .pull-quote p{font-size:17px}
  .art-img-full{margin:28px 0;height:240px}
  .art-img-duo{grid-template-columns:1fr;gap:3px}
  .art-img-duo-item{height:220px}
}