/* Premium: linen base with huckleberry accent. Scroll-triggered reveals, chapter rail. */
:root{--accent:var(--berry)}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:60;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:14px var(--gutter);color:var(--linen);transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease),color .4s}
.top.solid{background:rgba(243,238,230,.95);backdrop-filter:blur(8px);color:var(--charcoal);box-shadow:0 1px 0 rgba(36,34,31,.12);padding-block:8px}
.brand img{width:88px;height:auto;transition:width .5s var(--ease)}
.top.solid .brand img{width:62px}
.lg-d{display:none}
.top.solid .lg-l{display:none}
.top.solid .lg-d{display:block}
.nav{display:flex;justify-content:center;gap:clamp(18px,3vw,40px)}
.nav a{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;text-decoration:none;position:relative;padding-block:6px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.top-btn{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;text-decoration:none;padding:11px 20px;border:1px solid currentColor;transition:background .4s,color .4s,border-color .4s}
.top-btn:hover{background:var(--linen);color:var(--charcoal);border-color:var(--linen)}
.top.solid .top-btn:hover{background:var(--berry);color:var(--linen);border-color:var(--berry)}

/* chapter rail */
.rail{position:fixed;left:clamp(14px,2vw,28px);top:50%;transform:translateY(-50%);z-index:50;color:#fff;mix-blend-mode:difference;opacity:0;pointer-events:none;transition:opacity .7s var(--ease)}
.rail.show{opacity:1;pointer-events:auto}
.rail ol{list-style:none;margin:0;padding:0;display:grid;gap:18px;position:relative}
.rail-line{position:absolute;left:3px;top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.35)}
.rail-line::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:top;transform:scaleY(var(--p,0));transition:transform .9s var(--ease)}
.rail a{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;position:relative;z-index:1}
.rail b{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.55;transition:transform .4s var(--ease),opacity .4s}
.rail span{opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s;white-space:nowrap}
.rail a.on b{opacity:1;transform:scale(1.5)}
.rail a.on span,.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:none}
@media (max-width:1100px){.rail{display:none}}

/* 1. hero */
.hero{justify-content:flex-end;overflow:hidden;color:var(--linen);background:var(--night)}
.hero picture,.hero-img{position:absolute;inset:0;width:100%;height:100%}
.hero-img{object-fit:cover;object-position:50% 40%;animation:drift 28s ease-in-out infinite alternate}
.hero-veil{position:absolute;inset:0;background:linear-gradient(0deg,rgba(24,18,30,.82) 0%,rgba(24,18,30,.38) 42%,rgba(24,18,30,.3) 100%)}
.hero-in{position:relative;padding-bottom:clamp(56px,11vh,120px)}
.h-eyebrow{margin-bottom:20px;opacity:.9;animation:fadeUp 1.1s var(--ease) .2s both}
.hero-h{font-size:clamp(42px,7.2vw,116px);max-width:11em}
.ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.ln>span{display:inline-block;animation:lineUp 1.4s var(--ease) both}
.ln:nth-child(1)>span{animation-delay:.3s}
.ln:nth-child(2)>span{animation-delay:.5s}
@keyframes lineUp{from{transform:translateY(108%)}to{transform:none}}
.hero-act{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px;animation:fadeUp 1.1s var(--ease) .95s both}

/* shared full-bleed backgrounds */
.sec-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sec-veil{position:absolute;inset:0;z-index:1;pointer-events:none}
.sec>.wrap{position:relative;z-index:2}

/* 2. the day: every chapter is one full-screen photo with a thin veil */
.day{background:var(--night)}
.chap{min-height:100vh;min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;color:var(--linen);background:var(--night)}
.fig{position:absolute;inset:0;overflow:hidden}
.fig img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(24,18,30,.66) 0%,rgba(24,18,30,.34) 42%,rgba(24,18,30,.06) 74%)}
.chap.flip .veil{background:linear-gradient(270deg,rgba(24,18,30,.66) 0%,rgba(24,18,30,.34) 42%,rgba(24,18,30,.06) 74%)}
.chap-in{position:relative;z-index:2;width:100%;max-width:1280px;margin-inline:auto;padding:clamp(88px,12vh,140px) var(--gutter);display:flex}
.chap.flip .chap-in{justify-content:flex-end}
.txt{max-width:30em}
.cnum{color:var(--lantern);margin-bottom:10px}
.ch{font-size:clamp(58px,9.4vw,150px);line-height:.95;color:var(--linen)}
.sub{font-size:clamp(24px,2.6vw,38px);line-height:1.15;margin:clamp(14px,2.4vh,26px) 0 18px;color:var(--lantern)}
.txt .lede{opacity:.92}

/* linen-pull reveal: the picture is drawn down like a cloth */
.js .fig[data-rv="pull"]{opacity:1;transform:none}
.js .fig[data-rv="pull"] img{clip-path:inset(0 0 100% 0);transform:scale(1.12);transition:clip-path 1.7s var(--ease),transform 2.6s var(--ease)}
.js .fig[data-rv="pull"].in img{clip-path:inset(0 0 0 0);transform:scale(1)}

/* 3. collection: four panels, edge to edge */
.coll{background:var(--linen);justify-content:flex-start}
.coll-head{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;padding-block:clamp(88px,12vh,130px) clamp(26px,4vh,48px)!important}
.h2{font-size:clamp(34px,4.7vw,70px);line-height:1.04}
.coll .eyebrow{color:var(--berry);margin-bottom:14px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);flex:1;min-height:58vh}
.tile{position:relative;overflow:hidden;display:flex;align-items:flex-start;background:var(--tone,#E7E2D8);min-height:58vh}
.tile-img{position:absolute;inset:0}
.tile-img img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform 1.4s var(--ease)}
.tile.photo .tile-img img{mix-blend-mode:normal}
.tile.photo .tile-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,18,30,.7),rgba(24,18,30,0) 55%)}
.tile:hover .tile-img img{transform:scale(1.05)}
.tile-txt{position:relative;z-index:1;padding:clamp(18px,2vw,32px);width:100%}
.tile.photo{color:var(--linen)}
.tile h3{font-size:clamp(22px,2vw,29px);line-height:1.1;margin-bottom:6px}
.tile .small{opacity:.85;max-width:21em}
.sw{margin-top:10px}
.sw i{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--c);border:1px solid rgba(36,34,31,.3);margin-right:7px}

/* 4. package */
.pack{color:var(--linen);background:var(--night)}
.pack .sec-veil{background:linear-gradient(90deg,rgba(26,20,34,.78) 0%,rgba(26,20,34,.5) 55%,rgba(26,20,34,.66) 100%)}
.pack-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,7vw,120px);align-items:center}
.pack .eyebrow{color:var(--lantern);margin-bottom:16px}
.pack .h2 span{display:block}
.incl{margin-top:30px;display:grid;gap:0;max-width:30em}
.incl li{padding:12px 0 12px 30px;border-top:1px solid rgba(243,238,230,.28);position:relative;font-size:17px}
.incl li:last-child{border-bottom:1px solid rgba(243,238,230,.28)}
.incl li::before{content:"";position:absolute;left:0;top:50%;width:16px;height:1px;background:var(--lantern)}
.rate{position:relative}
.rate-t{color:var(--lantern);margin-bottom:8px}
.rate-s{font-family:var(--display);font-style:italic;font-size:clamp(20px,1.9vw,26px);margin-bottom:12px;opacity:.92}
.rates{margin:0}
.rates div{display:flex;align-items:baseline;gap:14px;padding:7px 0}
.rates dt{font-family:var(--display);font-size:clamp(22px,2.2vw,32px);line-height:1.1}
.rates dd{margin:0;font-family:var(--display);font-style:italic;font-size:clamp(26px,2.8vw,40px);line-height:1.1;color:var(--lantern)}
.rates i{flex:1;height:1px;background:repeating-linear-gradient(90deg,rgba(243,238,230,.7) 0 2px,transparent 2px 7px);transform-origin:left;transform:scaleX(0);transition:transform 1.3s var(--ease);min-width:20px;align-self:center}
.js .rate.in .rates i{transform:none}
.rates div:nth-child(2) i{transition-delay:.08s}.rates div:nth-child(3) i{transition-delay:.16s}.rates div:nth-child(4) i{transition-delay:.24s}.rates div:nth-child(5) i{transition-delay:.32s}.rates div:nth-child(6) i{transition-delay:.4s}
html:not(.js) .rates i{transform:none}
.rate-n{margin:16px 0 26px;opacity:.88;max-width:28em}

/* 5. good to know */
.know{background:linear-gradient(rgba(243,238,230,.8),rgba(243,238,230,.88)),url("img/know-bg.webp") center/cover}
.know-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,7vw,120px);align-items:start}
.know .eyebrow{color:var(--berry);margin-bottom:14px}
.faq{border-bottom:1px solid rgba(36,34,31,.25)}
.faq details{border-top:1px solid rgba(36,34,31,.25)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:var(--display);font-size:clamp(21px,2vw,28px);line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;transition:transform .5s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--berry)}
.faq details p{padding:0 40px 24px 0;max-width:36em;opacity:.88;animation:fadeUp .6s var(--ease) both}

/* 6. inquiry: the form sits straight on the photo */
.ask{--accent:var(--lantern);color:var(--linen);background:var(--night)}
.ask .sec-veil{background:linear-gradient(90deg,rgba(24,18,30,.74) 0%,rgba(24,18,30,.6) 100%)}
.ask-grid{display:grid;grid-template-columns:1fr minmax(0,600px);gap:clamp(32px,6vw,100px);align-items:center}
.ask .eyebrow{color:var(--lantern);margin-bottom:14px}
.ask .h2 span{display:block}
.area{margin-top:clamp(26px,5vh,54px);display:grid;gap:6px}
.area li{display:flex;align-items:baseline;gap:16px;border-top:1px solid rgba(243,238,230,.3);padding:12px 0}
.area b{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,42px)}
.area span{font-size:12px;letter-spacing:.22em;text-transform:uppercase;opacity:.78}
.sheet form{display:grid;gap:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px}
.sheet .btn.solid{justify-self:start;background:var(--linen);color:var(--charcoal);border-color:var(--linen);--fill:var(--lantern);--fillText:var(--night)}
.sheet .field input::placeholder{color:currentColor;opacity:.5}
.sheet input[type=date]{color-scheme:dark}
.thanks{font-size:clamp(30px,3.4vw,44px);margin-bottom:12px}
.foot{background:var(--charcoal);color:var(--linen);margin-top:auto}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;padding-block:22px 84px}
.foot-in img{width:84px;height:auto}
.foot a{text-decoration:none;border-bottom:1px solid rgba(243,238,230,.4)}

@media (max-width:1000px){
  .chap{align-items:flex-end}
  .chap-in,.chap.flip .chap-in{justify-content:flex-start;padding-bottom:clamp(56px,9vh,96px)}
  .veil,.chap.flip .veil{background:linear-gradient(0deg,rgba(24,18,30,.82) 0%,rgba(24,18,30,.5) 46%,rgba(24,18,30,.08) 78%)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tile{min-height:30svh}
  .coll-head,.pack-grid,.know-grid,.ask-grid{grid-template-columns:1fr}
  .coll-head{padding-block:84px 18px!important;gap:12px}
  .pack>.wrap{padding-block:84px 96px}
  .incl{margin-top:16px}
  .incl li{padding-block:8px}
  .rates div{padding-block:3px}
  .pack .sec-veil{background:linear-gradient(0deg,rgba(26,20,34,.84),rgba(26,20,34,.6))}
}
@media (max-width:560px){
  .grid2{grid-template-columns:1fr}
  .tile h3{font-size:20px}
  .tile-txt{padding:14px}
  .foot-in{flex-direction:column;align-items:flex-start}
  .top-btn{padding:9px 14px;font-size:11px}
  .hero-img{object-position:50% 50%}
}
@media (prefers-reduced-motion:reduce){
  .hero-img{animation:none}
  .js .fig[data-rv="pull"] img{clip-path:none;transform:none}
    .rates i{transform:none!important}
}
.ask .foot{position:relative;z-index:2}