/* ============================================================
   블랙뻘 BLACK MUD — 브랜드 랜딩페이지
   Palette: CORAL #F08A78 / IVORY #F7F3EA / GOLD #C9A467
            CHARCOAL #222222 / SEAFOAM #A7C7C2
   ============================================================ */

:root{
  --coral:#F08A78;
  --coral-deep:#E4735E;
  --coral-ink:#C25943;
  --ivory:#F7F3EA;
  --ivory-lt:#FDFBF6;
  --gold:#C9A467;
  --gold-lt:#E3C489;
  --charcoal:#222222;
  --seafoam:#A7C7C2;
  --ink:#2A2724;
  --muted:#6E6862;
  --line:rgba(34,34,34,.12);

  --serif:'Nanum Myeongjo', 'Nanum Myeongjo', serif;
  --sans:'Noto Sans KR', system-ui, -apple-system, 'Malgun Gothic', sans-serif;
  --latin:'Cormorant Garamond', 'Nanum Myeongjo', serif;

  --wrap:1140px;
  --r:16px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.75;
  letter-spacing:-.01em;
  word-break:keep-all;
  overflow-wrap:break-word;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:800; line-height:1.34; letter-spacing:-.02em}
p{margin:0}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.br-pc{display:none}
@media (min-width:840px){ .br-pc{display:inline} }

.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:200; background:var(--charcoal); color:#fff; padding:.6rem 1rem; border-radius:8px}

:focus-visible{outline:2px solid var(--coral-deep); outline-offset:3px; border-radius:4px}

/* ---------- 등장 애니메이션 ---------- */
.rise{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* ============ NAV ============ */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(247,243,234,.86);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.nav.stuck{border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(34,34,34,.6)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:66px}

.brand{display:flex; align-items:center; gap:.6rem}
.brand-mark{width:30px; height:30px; color:var(--coral-deep); flex:none}
.brand-txt{display:flex; flex-direction:column; line-height:1.05}
.brand-txt b{font-family:var(--serif); font-size:1.06rem; font-weight:800; letter-spacing:.02em}
.brand-txt i{font-family:var(--latin); font-style:normal; font-size:.62rem; letter-spacing:.26em; color:var(--muted)}

.nav-links{display:flex; align-items:center; gap:1.55rem}
.nav-links a{font-size:.92rem; color:var(--muted); transition:color .2s ease; white-space:nowrap}
.nav-links a:hover{color:var(--charcoal)}
.nav-cta{
  background:var(--charcoal); color:#fff !important; padding:.5rem 1.05rem;
  border-radius:999px; font-size:.86rem !important;
}
.nav-cta:hover{background:var(--coral-deep)}

.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:.55rem; cursor:pointer}
.nav-toggle span{width:22px; height:2px; background:var(--charcoal); border-radius:2px; transition:transform .25s ease, opacity .2s ease}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:880px){
  .nav-toggle{display:flex}
  .nav-links{
    position:absolute; inset:100% 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ivory-lt); border-bottom:1px solid var(--line);
    padding:.4rem 1.25rem 1.1rem;
    box-shadow:0 18px 40px -26px rgba(34,34,34,.7);
    display:none;
  }
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:.85rem .2rem; border-bottom:1px solid var(--line); font-size:1rem}
  .nav-cta{margin-top:.9rem; text-align:center; border-bottom:0 !important}
}

/* ============ HERO ============ */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(2.6rem,6vw,5.2rem) 0 clamp(4rem,9vw,7rem);
  background:
    radial-gradient(120% 80% at 78% 12%, rgba(167,199,194,.34), transparent 62%),
    radial-gradient(100% 70% at 12% 88%, rgba(240,138,120,.20), transparent 60%),
    var(--ivory);
}
.hero-waves{position:absolute; left:0; right:0; bottom:-2px; pointer-events:none}
.hero-waves svg{width:100%; height:clamp(110px,16vw,200px)}

.hero-in{
  position:relative; z-index:1;
  display:grid; gap:clamp(1.6rem,4vw,3.4rem);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:900px){
  .hero-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}

.hero-visual{margin:0; position:relative; display:flex; justify-content:center; align-items:center}
.hero-halo{
  position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(201,164,103,.30), rgba(240,138,120,.14) 55%, transparent 72%);
  filter:blur(6px); animation:halo 7s ease-in-out infinite alternate;
}
.hero-logo{
  position:relative; width:min(100%, 420px); height:auto; border-radius:28px;
  box-shadow:0 30px 60px -28px rgba(34,34,34,.35), 0 0 0 1px rgba(201,164,103,.35);
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)}}
@keyframes halo{from{opacity:.65; transform:scale(.96)} to{opacity:1; transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){
  .hero-logo,.hero-halo{animation:none}
}

/* ---------- 마퀴 슬로건 ---------- */
.marquee{
  overflow:hidden; background:var(--charcoal); color:var(--ivory);
  border-block:3px solid var(--coral-deep); padding:.8rem 0;
}
.marquee-track{
  display:flex; width:max-content; white-space:nowrap;
  animation:marquee 26s linear infinite;
  font-family:var(--serif); font-weight:700; font-size:1.02rem; letter-spacing:.08em;
}
.marquee-track span{padding-right:.5rem}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none} }

.eyebrow{
  font-family:var(--latin); font-weight:600; font-size:.86rem;
  letter-spacing:.32em; color:var(--gold); margin-bottom:1.1rem;
}
.eyebrow::after{content:''; display:block; width:52px; height:2px; background:var(--gold); margin-top:.7rem; opacity:.7}

.hero-h1{font-size:clamp(2.1rem,5.4vw,3.5rem); line-height:1.28}
.hero-h1 em{font-style:normal; color:var(--coral-deep)}
.hero-lead{margin-top:1.3rem; font-size:clamp(1rem,1.6vw,1.11rem); color:var(--muted); line-height:1.9}

.hero-btns{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.86rem 1.7rem; border-radius:999px;
  font-size:.95rem; font-weight:500; letter-spacing:.01em;
  transition:transform .2s ease, background .22s ease, color .22s ease, box-shadow .22s ease;
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--coral-deep); color:#fff; box-shadow:0 12px 26px -14px rgba(196,89,67,.95)}
.btn-primary:hover{background:var(--coral-ink)}
.btn-ghost{border-color:var(--charcoal); color:var(--charcoal)}
.btn-ghost:hover{background:var(--charcoal); color:var(--ivory)}
.btn-line{border-color:rgba(255,255,255,.55); color:#fff}
.btn-line:hover{background:rgba(255,255,255,.14)}

.hero-stats{display:flex; flex-wrap:wrap; gap:2rem; margin-top:2.6rem; padding-top:1.7rem; border-top:1px solid var(--line)}
.hero-stats li{display:flex; flex-direction:column; gap:.15rem}
.hero-stats b{font-family:var(--serif); font-size:1.5rem; font-weight:800; color:var(--charcoal)}
.hero-stats span{font-size:.83rem; color:var(--muted); letter-spacing:.01em}

/* ============ SECTION 공통 ============ */
.sec{padding:clamp(3.8rem,8vw,6.6rem) 0}
.sec-eyebrow{
  font-family:var(--latin); font-weight:600; font-size:.82rem;
  letter-spacing:.28em; color:var(--gold); margin-bottom:.9rem; text-transform:uppercase;
}
.sec-h2{font-size:clamp(1.65rem,3.6vw,2.5rem)}
.sec-h2 em{font-style:normal; color:var(--coral-deep)}
.sec-lead{margin-top:1.05rem; color:var(--muted); font-size:1.01rem; line-height:1.9; max-width:56ch}

/* ============ STORY ============ */
.sec-story{background:var(--ivory-lt); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.story-grid{
  display:grid; gap:1.1rem; margin-top:2.8rem;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
}
.story-card{
  background:var(--ivory); border:1px solid var(--line); border-radius:var(--r);
  padding:1.7rem 1.6rem; transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.story-card:hover{transform:translateY(-5px); border-color:rgba(201,164,103,.6); box-shadow:0 22px 40px -30px rgba(34,34,34,.75)}
.story-no{
  display:inline-block; font-family:var(--latin); font-weight:700;
  font-size:.7rem; letter-spacing:.24em; color:var(--gold); margin-bottom:.85rem;
}
.story-card h3{font-size:1.14rem; margin-bottom:.6rem}
.story-card p{font-size:.93rem; color:var(--muted); line-height:1.85}

.palette{display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2.6rem; padding-top:2rem; border-top:1px solid var(--line)}
.sw{display:flex; flex-direction:column; gap:.4rem; min-width:88px}
.sw span{width:100%; height:46px; border-radius:10px; display:block}
.sw b{font-family:var(--latin); font-size:.74rem; font-weight:700; letter-spacing:.18em; color:var(--charcoal)}
.sw i{font-family:var(--latin); font-style:normal; font-size:.72rem; letter-spacing:.08em; color:var(--muted)}

/* ============ ORIGIN ============ */
.asset-grid{
  display:grid; gap:1.1rem; margin-top:2.8rem;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
}
.asset{
  position:relative; background:var(--ivory-lt);
  border:1px solid var(--line); border-radius:var(--r);
  padding:2rem 1.6rem 1.7rem; overflow:hidden;
}
.asset::before{
  content:''; position:absolute; inset:0 auto 0 0; width:4px;
  background:linear-gradient(180deg, var(--coral), var(--gold));
}
.asset-n{
  font-family:var(--latin); font-size:.72rem; font-weight:700;
  letter-spacing:.22em; color:var(--gold); display:block; margin-bottom:.8rem;
}
.asset-val{
  display:block; font-family:var(--serif); font-weight:800;
  font-size:1.85rem; color:var(--coral-deep); line-height:1.2; margin-bottom:.45rem;
}
.asset h3{font-size:1rem; margin-bottom:.55rem}
.asset p{font-size:.9rem; color:var(--muted); line-height:1.82}

/* ============ PRODUCT ============ */
.sec-product{background:var(--ivory-lt); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.prod-two{display:grid; gap:1.2rem; margin-top:2.8rem; grid-template-columns:repeat(auto-fit, minmax(290px,1fr))}
.prod{
  background:var(--ivory); border:1px solid var(--line); border-radius:var(--r);
  padding:2rem 1.8rem;
}
.prod-alt{background:var(--charcoal); border-color:var(--charcoal); color:var(--ivory)}
.prod-alt h3{color:var(--ivory)}
.prod-alt .tick li{color:rgba(247,243,234,.9)}
.prod-alt .tick li::before{background:var(--coral)}
.prod-alt .prod-note{color:rgba(247,243,234,.6); border-top-color:rgba(247,243,234,.2)}
.prod-tag{
  display:inline-block; font-family:var(--latin); font-weight:700;
  font-size:.72rem; letter-spacing:.2em; color:var(--gold); margin-bottom:.9rem;
}
.prod h3{font-size:1.28rem; margin-bottom:1.2rem}
.tick li{position:relative; padding-left:1.35rem; font-size:.96rem; line-height:2.05; color:var(--ink)}
.tick li::before{
  content:''; position:absolute; left:0; top:.92em;
  width:7px; height:7px; border-radius:50%; background:var(--coral-deep);
}
.prod-note{
  margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--line);
  font-size:.86rem; color:var(--muted); line-height:1.8;
}

/* 시즌 차트 */
.season{margin-top:3.2rem; background:var(--ivory); border:1px solid var(--line); border-radius:var(--r); padding:2rem 1.8rem}
.season-h{font-size:clamp(1.1rem,2.2vw,1.42rem); margin-bottom:1.6rem}
.season-h em{font-style:normal; color:var(--coral-deep)}
.season-row{display:flex; align-items:center; gap:.9rem; margin-bottom:.6rem}
.season-label{flex:none; width:70px; font-size:.82rem; color:var(--muted); letter-spacing:.01em}
.season-track{display:grid; grid-template-columns:repeat(12,1fr); gap:4px; flex:1}
.season-track i{height:26px; border-radius:5px; background:rgba(34,34,34,.07); display:block}
.season-track i.on{background:var(--seafoam)}
.season-track.alt i.on{background:var(--coral)}
.season-months{
  display:grid; grid-template-columns:repeat(12,1fr); gap:4px;
  margin-left:calc(70px + .9rem); margin-top:.5rem;
}
.season-months span{font-size:.68rem; color:var(--muted); text-align:center; font-family:var(--latin)}
.season-note{margin-top:1.3rem; font-size:.87rem; color:var(--muted)}
@media (max-width:600px){
  .season-label{width:56px; font-size:.75rem}
  .season-months{margin-left:calc(56px + .9rem)}
  .season-track i{height:20px}
}

/* 로드맵 */
.roadmap{margin-top:3.2rem}
.road-h{font-size:clamp(1.2rem,2.4vw,1.6rem)}
.road-sub{margin-top:.6rem; color:var(--muted); font-size:.96rem}
.road-list{display:grid; gap:1.1rem; margin-top:1.9rem; grid-template-columns:repeat(auto-fit, minmax(250px,1fr))}
.road-list li{
  background:var(--ivory); border:1px solid var(--line); border-radius:var(--r);
  padding:1.7rem 1.6rem; position:relative;
}
.road-yr{
  display:inline-block; background:var(--gold); color:#fff;
  font-size:.72rem; font-weight:700; letter-spacing:.1em;
  padding:.28rem .8rem; border-radius:999px; margin-bottom:1rem;
}
.road-list h4{font-size:1.12rem; margin-bottom:.6rem}
.road-list p{font-size:.9rem; color:var(--muted); line-height:1.85}

/* ============ PACKAGE ============ */
.pack-grid{display:grid; gap:1.1rem; margin-top:2.8rem; grid-template-columns:repeat(auto-fit, minmax(240px,1fr))}
.pack{
  background:var(--ivory-lt); border:1px solid var(--line); border-radius:var(--r);
  padding:1.7rem 1.6rem; transition:border-color .28s ease, transform .28s ease;
}
.pack:hover{border-color:rgba(201,164,103,.65); transform:translateY(-4px)}
.pack h3{font-size:1.08rem; margin-bottom:.6rem; color:var(--charcoal)}
.pack p{font-size:.91rem; color:var(--muted); line-height:1.85}

.quote{
  margin:2.8rem 0 0; padding:2rem 2.2rem;
  background:var(--charcoal); color:var(--ivory); border-radius:var(--r);
  font-family:var(--serif); font-size:clamp(1.05rem,2.2vw,1.38rem); font-weight:700; line-height:1.7;
}
.quote cite{
  display:block; margin-top:1rem; font-family:var(--sans); font-style:normal;
  font-size:.8rem; font-weight:400; color:rgba(247,243,234,.6); letter-spacing:.02em;
}

/* ============ ESG ============ */
.sec-esg{background:var(--ivory-lt); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.esg-steps{display:grid; gap:1.1rem; margin-top:2.8rem; grid-template-columns:repeat(auto-fit, minmax(250px,1fr))}
.esg-step{
  background:var(--ivory); border:1px solid var(--line); border-radius:var(--r);
  padding:1.8rem 1.6rem; border-top:3px solid var(--seafoam);
}
.esg-n{
  display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.14em;
  color:var(--seafoam); margin-bottom:.85rem;
}
.esg-step h3{font-size:1.14rem; margin-bottom:.6rem}
.esg-step p{font-size:.91rem; color:var(--muted); line-height:1.85}

.fund{
  margin-top:2.4rem; padding:2.2rem 2rem; border-radius:var(--r);
  background:linear-gradient(135deg, rgba(167,199,194,.32), rgba(201,164,103,.18));
  border:1px solid rgba(167,199,194,.55);
}
.fund h3{font-size:1.3rem; margin-bottom:.8rem}
.fund p{font-size:.98rem; color:var(--muted); line-height:1.88; max-width:62ch}
.fund-tags{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.4rem}
.fund-tags span{
  background:rgba(255,255,255,.72); border:1px solid rgba(34,34,34,.1);
  padding:.4rem 1rem; border-radius:999px; font-size:.83rem; color:var(--charcoal);
}

/* ============ FESTIVAL ============ */
.flow{
  display:grid; gap:.7rem; margin-top:2.8rem;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  counter-reset:f;
}
.flow li{
  counter-increment:f; position:relative;
  background:var(--ivory-lt); border:1px solid var(--line); border-radius:var(--r);
  padding:1.5rem 1.2rem 1.3rem; text-align:center;
}
.flow li::before{
  content:counter(f); position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  width:24px; height:24px; border-radius:50%;
  background:var(--coral-deep); color:#fff;
  font-family:var(--latin); font-size:.76rem; font-weight:700;
  display:grid; place-items:center;
}
.flow b{display:block; font-family:var(--serif); font-size:1rem; font-weight:800; margin-bottom:.2rem}
.flow span{font-size:.78rem; color:var(--muted)}

.fest-two{display:grid; gap:1.2rem; margin-top:2.2rem; grid-template-columns:repeat(auto-fit, minmax(290px,1fr))}
.fest{background:var(--ivory-lt); border:1px solid var(--line); border-radius:var(--r); padding:1.9rem 1.7rem}
.fest h3{font-size:1.18rem; margin-bottom:1.1rem}
.fest-note{margin-top:1.5rem; font-size:.83rem; color:var(--muted)}

/* ============ CONTACT ============ */
.sec-contact{
  background:
    radial-gradient(90% 120% at 82% 8%, rgba(240,138,120,.28), transparent 58%),
    var(--charcoal);
  color:var(--ivory);
}
.contact-in{text-align:center; display:flex; flex-direction:column; align-items:center}
.sec-eyebrow.light{color:var(--gold-lt)}
.sec-h2.light{color:var(--ivory)}
.sec-h2.light em{color:var(--coral)}
.sec-lead.light{color:rgba(247,243,234,.72); text-align:center}
.contact-btns{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:2.2rem}


/* ============ 이미지 쇼케이스 공통 ============ */
.showcase{margin-top:2.6rem}
.shot{margin:0; border-radius:var(--r); overflow:hidden; position:relative;
  box-shadow:0 30px 60px -34px rgba(34,34,34,.55); background:#fff}
.shot img{width:100%; height:auto; transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.shot:hover img{transform:scale(1.025)}
.shot figcaption{
  position:absolute; inset:auto 0 0 0; padding:2rem 1.6rem .9rem;
  background:linear-gradient(180deg, transparent, rgba(20,18,16,.72));
  color:#fff; font-size:.86rem; letter-spacing:.01em;
}

/* ============ CONCEPT 01 · GOODS ============ */
.sec-goods{background:var(--ivory-lt); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.goods-tags{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.6rem; justify-content:center}
.goods-tags span{
  font-family:var(--latin); font-weight:700; font-size:.78rem; letter-spacing:.2em;
  border:1px solid var(--gold); color:var(--gold); border-radius:999px; padding:.42rem 1.05rem;
  background:var(--ivory);
}
.cap-colors{display:flex; gap:1.6rem; justify-content:center; margin-top:1.4rem}
.cap{display:flex; align-items:center; gap:.5rem; font-family:var(--latin); font-weight:700;
  font-size:.76rem; letter-spacing:.16em; color:var(--muted)}
.cap i{width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}

/* ============ CONCEPT 02 · SIGNATURE ============ */
.sig-in{
  display:grid; gap:clamp(1.6rem,4vw,3.4rem); margin-top:2.8rem;
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:900px){ .sig-in{grid-template-columns:1.05fr .95fr} }
.shot-product{background:radial-gradient(120% 100% at 50% 0%, #fff, #F1EBDD)}
.shot-product img{mix-blend-mode:multiply}
.sig-specs h3{
  font-family:var(--latin); font-weight:700; font-size:clamp(1.5rem,3vw,2.1rem);
  letter-spacing:.12em; line-height:1.25; color:var(--gold); margin-bottom:1.4rem;
}
.spec{margin:0; border-top:1px solid var(--line)}
.spec > div{display:flex; gap:1.2rem; padding:.85rem 0; border-bottom:1px solid var(--line)}
.spec dt{flex:none; width:64px; font-size:.86rem; color:var(--muted); padding-top:.1rem}
.spec dd{margin:0; font-family:var(--serif); font-weight:700; font-size:1.05rem; color:var(--charcoal)}
.spec dd small{font-family:var(--sans); font-weight:400; font-size:.82rem; color:var(--muted)}
.sig-note{margin-top:1.2rem; font-size:.92rem; color:var(--muted); line-height:1.85}
.btn-dark{background:var(--charcoal); color:#fff; margin-top:1.6rem}
.btn-dark:hover{background:var(--coral-deep)}
.sec-signature .season{margin-top:3.6rem}

/* ============ CONCEPT 03 · PACKAGE ============ */
.pack-in{margin-top:2.6rem}
.pack-cols{
  display:grid; gap:1.2rem; margin-top:1.6rem;
  grid-template-columns:1fr;
}
@media (min-width:900px){ .pack-cols{grid-template-columns:1.4fr .8fr; align-items:start} }
.pack-feats{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit, minmax(220px,1fr))}
.pack-size{
  background:var(--charcoal); color:var(--ivory); border-radius:var(--r);
  padding:1.8rem 1.7rem;
}
.pack-size h3{font-size:1.1rem; color:var(--ivory); margin-bottom:1.1rem}
.pack-size table{width:100%; border-collapse:collapse; font-size:.92rem}
.pack-size th{
  text-align:left; font-weight:500; color:rgba(247,243,234,.55); font-size:.78rem;
  letter-spacing:.08em; padding:.45rem .2rem; border-bottom:1px solid rgba(247,243,234,.25);
}
.pack-size td{padding:.6rem .2rem; border-bottom:1px solid rgba(247,243,234,.14)}
.pack-size td:first-child{font-family:var(--latin); font-weight:700; letter-spacing:.1em; color:var(--gold-lt); width:3rem}
.pack-size td:last-child{font-variant-numeric:tabular-nums}
.pack-badges{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.3rem}
.pack-badges span{
  font-size:.76rem; border:1px solid rgba(247,243,234,.35); color:rgba(247,243,234,.85);
  border-radius:999px; padding:.32rem .85rem;
}

/* ============ FOOTER ============ */
.foot{background:#191817; color:rgba(247,243,234,.72); padding:3rem 0 2.4rem; font-size:.88rem}
.foot-in{display:grid; gap:1.6rem}
@media (min-width:840px){
  .foot-in{grid-template-columns:1fr auto; align-items:start}
  .foot-copy{grid-column:1 / -1; padding-top:1.6rem; border-top:1px solid rgba(247,243,234,.14)}
}
.foot-brand b{display:block; font-family:var(--serif); font-size:1.15rem; color:var(--ivory); font-weight:800}
.foot-brand b i{font-family:var(--latin); font-style:normal; font-size:.82rem; letter-spacing:.18em; color:var(--gold-lt)}
.foot-brand span{display:block; margin-top:.35rem; font-size:.85rem}
.foot-nav{display:flex; flex-wrap:wrap; gap:1.1rem}
.foot-nav a{transition:color .2s ease}
.foot-nav a:hover{color:var(--ivory)}
.foot-copy{font-size:.79rem; color:rgba(247,243,234,.5); line-height:1.9; margin:0}