/* =====================================================================
   Verano — cinematic concept site (image-light) · for Alirko
   Vertical scroll-snap chapters + horizontal work gallery
   Cormorant Garamond · IBM Plex Mono · Inter
   ===================================================================== */

:root{
  --void:#090C10;
  --night:#0E141A;
  --slate:#141D26;
  --teal:#102826;
  --paper:#ECE6DA;
  --paper-2:rgba(236,230,218,.60);
  --paper-3:rgba(236,230,218,.32);
  --line:rgba(236,230,218,.14);
  --ember:#E2925A;
  --ember-soft:#d6a982;
  --disp:"Cormorant Garamond",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:clamp(24px,6vw,96px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  background:var(--void);scroll-behavior:smooth;
  scroll-snap-type:y proximity;-webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:none}}
/* touch devices: drop vertical snap — it fights momentum scrolling + the mobile address bar */
@media (pointer:coarse){html{scroll-snap-type:none;scroll-behavior:auto}}
body{font-family:var(--sans);color:var(--paper);background:var(--void);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* cinematic vignette */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
  background:radial-gradient(130% 100% at 50% 50%,transparent 56%,rgba(0,0,0,.45));}
::selection{background:var(--ember);color:#1a120a}
a{color:inherit;text-decoration:none}
svg{display:block}
em{font-style:italic;color:var(--ember)}

.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-weight:400}

/* ---------------- Fixed UI ---------------- */
.wordmark{position:fixed;top:clamp(22px,3vw,34px);left:var(--pad);z-index:70;
  font-family:var(--mono);font-weight:500;letter-spacing:.4em;font-size:15px;padding-left:.4em;color:var(--paper)}
.enquire{position:fixed;top:clamp(22px,3vw,34px);right:var(--pad);z-index:70;color:var(--paper-2);transition:color .3s}
.enquire:hover{color:var(--ember)}
.corner{position:fixed;left:var(--pad);bottom:26px;z-index:70;color:var(--paper-3);font-size:11px;letter-spacing:.2em;transition:opacity .4s var(--ease)}
.at-end .corner{opacity:0;pointer-events:none}

.dots{position:fixed;right:clamp(18px,2.4vw,34px);top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:14px}
.dots a{display:flex;align-items:center;gap:12px;justify-content:flex-end;color:var(--paper-3);font-family:var(--mono);font-size:11px;letter-spacing:.18em;transition:color .3s}
.dots a span{opacity:0;transform:translateX(6px);transition:.35s var(--ease);font-size:10px;text-transform:uppercase}
.dots a::after{content:attr(data-i);width:26px;text-align:right}
.dots a:hover span,.dots a.active span{opacity:1;transform:none}
.dots a.active{color:var(--ember)}
.dots a:hover{color:var(--paper)}

.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;background:rgba(236,230,218,.08)}
.progress i{display:block;height:100%;width:0;background:var(--ember);transition:width .1s linear}

/* ---------------- Chapter base ---------------- */
.chapter{position:relative;min-height:100svh;scroll-snap-align:start;
  display:flex;flex-direction:column;justify-content:center;padding:clamp(96px,12vh,140px) var(--pad);overflow:hidden}
.tag{color:var(--ember);margin-bottom:30px}

/* ---------------- 00 Cover ---------------- */
.atmosphere{position:absolute;inset:0;z-index:0;color:var(--ember);pointer-events:none}
.glow{position:absolute;left:50%;bottom:-26%;transform:translateX(-50%);width:min(150vw,1500px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(226,146,90,.30),rgba(226,146,90,.07) 40%,transparent 64%);
  animation:breathe 14s var(--ease) infinite}
.glow-2{bottom:auto;top:-30%;background:radial-gradient(circle at 50% 50%,rgba(226,146,90,.22),transparent 62%)}
@keyframes breathe{0%,100%{transform:translateX(-50%) scale(1);opacity:.85}50%{transform:translateX(-50%) scale(1.08);opacity:1}}
.horizon{position:absolute;left:0;right:0;bottom:18%;width:100%;height:200px;opacity:.6}
.cover{justify-content:center}
.cover-inner{position:relative;z-index:2;max-width:1100px}
.eyebrow{color:var(--ember-soft);margin-bottom:34px}
.cover-sub{font-size:clamp(16px,1.5vw,19px);color:var(--paper-2);max-width:48ch;margin-top:36px;line-height:1.7}
.scroll-hint{position:absolute;left:var(--pad);bottom:60px;z-index:2;color:var(--paper-3);transition:color .3s}
.scroll-hint:hover{color:var(--ember)}

/* Display type */
.mega{font-family:var(--disp);font-weight:300;font-size:clamp(46px,8.6vw,138px);line-height:.98;letter-spacing:-.005em}

/* ---------------- 01 Ethos ---------------- */
.ethos{background:var(--night);justify-content:center}
.statement{font-family:var(--disp);font-weight:300;font-size:clamp(30px,5vw,72px);line-height:1.18;letter-spacing:-.005em;max-width:18ch}
.statement .w{opacity:.14;transition:opacity .5s var(--ease)}
.statement .w.lit{opacity:1}

/* ---------------- 02 Work ---------------- */
.work{background:var(--void);justify-content:flex-start}
.work-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:clamp(20px,3vh,40px)}
.work-head .tag{margin-bottom:0}
.drag-hint{color:var(--paper-3)}
.gallery{display:flex;gap:clamp(18px,2.2vw,30px);overflow-x:auto;scroll-snap-type:x mandatory;
  flex:1;min-height:0;padding-bottom:14px;cursor:grab;
  touch-action:pan-x;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.gallery::-webkit-scrollbar{display:none}
.gallery.dragging{cursor:grabbing;scroll-snap-type:none}
.panel{position:relative;flex:0 0 min(78vw,720px);scroll-snap-align:start;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;min-height:62vh}
.panel-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(236,230,218,.42)}
.panel-art svg{width:62%;max-width:420px;height:auto}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 38%,rgba(5,7,9,.82));pointer-events:none}
.panel[data-tone=dusk]{background:linear-gradient(165deg,#3C2A1B,#190F09)}
.panel[data-tone=teal]{background:linear-gradient(165deg,#16322F,#091716);}
.panel[data-tone=sand]{background:linear-gradient(165deg,#3A3327,#171310)}
.panel[data-tone=slate]{background:linear-gradient(165deg,#1F2A34,#0B1117)}
.panel[data-tone=dusk] .panel-art{color:rgba(226,146,90,.5)}
.panel-meta{position:relative;z-index:2;padding:clamp(22px,3vw,38px)}
.panel-meta .no{color:var(--ember);display:block;margin-bottom:12px}
.panel-meta h3{font-family:var(--disp);font-weight:400;font-size:clamp(26px,3vw,40px);line-height:1.04;letter-spacing:-.01em}
.panel-meta .loc{display:block;color:var(--paper-3);margin:10px 0 14px}
.panel-meta p{color:var(--paper-2);font-size:15px;max-width:38ch}
.panel-end{background:var(--night);justify-content:center;align-items:flex-start}
.panel-end::after{display:none}
.panel-meta.center{padding:clamp(28px,4vw,52px)}
.panel-end h3{font-size:clamp(30px,3.6vw,52px)}
.panel-end .link{display:inline-block;margin-top:20px;color:var(--ember);border-bottom:1px solid var(--line);padding-bottom:4px}

/* ---------------- 03 Craft ---------------- */
.craft{background:var(--slate)}
.craft-list{list-style:none;display:grid;gap:0;max-width:1100px}
.craft-list li{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,70px);align-items:baseline;
  padding-block:clamp(20px,3vh,34px);border-top:1px solid var(--line)}
.craft-list li:last-child{border-bottom:1px solid var(--line)}
.craft-list .no{color:var(--ember);align-self:start;padding-top:.6em}
.craft-list h3{font-family:var(--disp);font-weight:400;font-size:clamp(28px,4vw,54px);line-height:1;letter-spacing:-.01em}
.craft-list p{grid-column:2;color:var(--paper-2);font-size:15.5px;max-width:54ch;margin-top:12px}

/* ---------------- 04 Process ---------------- */
.process{background:var(--night)}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px);max-width:1200px}
.proc{border-top:1px solid var(--line);padding-top:22px}
.big-no{font-family:var(--disp);font-style:italic;color:var(--ember);font-size:clamp(34px,4vw,58px);line-height:1;display:block;margin-bottom:18px}
.proc h3{font-family:var(--disp);font-weight:400;font-size:clamp(22px,2.4vw,30px);margin-bottom:10px}
.proc p{color:var(--paper-2);font-size:14.5px}

/* ---------------- 05 Voices ---------------- */
.voices{background:var(--void);justify-content:center;align-items:center;text-align:center}
.voices blockquote{max-width:min(940px,92vw)}
.voices p{font-family:var(--disp);font-weight:300;font-size:clamp(30px,4.8vw,68px);line-height:1.16;letter-spacing:-.01em}
.voices footer{margin-top:36px;color:var(--paper-3)}

/* ---------------- 06 Begin ---------------- */
.begin{background:var(--night);justify-content:center}
.begin-inner{position:relative;z-index:2;max-width:1000px}
.begin .mega{margin:14px 0 30px}
.cta{display:inline-block;margin-top:18px;background:var(--ember);color:#1a120a;font-family:var(--sans);font-weight:500;
  font-size:15px;padding:16px 34px;border-radius:100px;transition:transform .3s var(--ease),background .3s}
.cta:hover{background:#efa066;transform:translateY(-2px)}
.foot{position:absolute;left:var(--pad);right:var(--pad);bottom:30px;z-index:2;display:flex;flex-wrap:wrap;gap:8px 28px;
  color:var(--paper-3);font-size:11px;letter-spacing:.16em}
.foot .credit{margin-left:auto;color:var(--paper-2)}

/* ---------------- Entrance ---------------- */
.rise,.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rise.in,.reveal.in{opacity:1;transform:none}

/* ---------------- Responsive ---------------- */
@media (max-width:820px){
  .dots,.corner{display:none}
  .proc-grid{grid-template-columns:1fr 1fr;gap:30px 24px}
  .panel{flex-basis:86vw;min-height:56vh}
  .craft-list li{grid-template-columns:1fr}
  .craft-list .no{padding-top:0}
  .craft-list p{grid-column:1;margin-top:8px}
  .foot{position:static;margin-top:40px}
  .foot .credit{margin-left:0;flex-basis:100%}
  .begin{justify-content:flex-start}
}
@media (max-width:520px){
  .proc-grid{grid-template-columns:1fr}
  .work-head{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .rise,.reveal{opacity:1;transform:none;transition:none}
  .glow{animation:none}
  .statement .w{opacity:1}
}