/* vlgreer.com — the umbrella. Warm, editorial, atmospheric. A colour journey:
   cream → sage → clay → lilac → forest. No tramlines; colour fields do the dividing. */
:root{
  --green:#1C2A20; --cream:#F4EEE1; --paper:#F7F1E5; --ink:#17191C;
  --clay:#C0673A; --sage:#9DAE87; --plum:#43273A; --iris:#322B4D; --lilac:#C9BCE0;
  --stone:#897F70; --on-dark:#D9D3C3;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  background:var(--cream);color:var(--green);
  font-family:'Mulish',system-ui,sans-serif;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  position:relative;overflow-x:clip;
}
/* warm paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}
a{color:inherit;text-decoration:none}
em{font-style:italic}
.serif{font-family:'EB Garamond',serif}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(24px,5.5vw,80px);position:relative;z-index:1}
p{text-wrap:pretty}
.eyebrow{font-family:'Mulish',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--clay)}

@keyframes rise{from{transform:translateY(22px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── NAV — airy, no rule ── */
.nav{position:relative;z-index:5;padding:clamp(26px,3vw,40px) 0 0}
.navwrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px}
.brand svg{flex:0 0 auto;display:block}
.brand .nm{font-family:'EB Garamond',serif;font-weight:500;font-size:23px;letter-spacing:.01em;color:var(--green)}
.links{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);flex-wrap:wrap}
.links a{position:relative;font-family:'Mulish',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:#5b6258;padding:3px 0;transition:color .2s}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--clay);transition:right .28s cubic-bezier(.2,.7,.2,1)}
.links a:hover{color:var(--clay)}
.links a:hover::after{right:0}

/* ── HERO ── */
.hero{position:relative;padding:clamp(54px,9vw,120px) 0 clamp(48px,7vw,96px);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;align-items:center}
.htext{grid-column:1 / 8;position:relative;z-index:2}
.hero .eyebrow{animation:rise .8s cubic-bezier(.2,.7,.2,1) backwards}
.display{font-family:'EB Garamond',serif;font-weight:500;font-size:clamp(42px,6vw,74px);line-height:1.0;letter-spacing:.004em;color:var(--green);margin-top:22px;animation:rise .9s cubic-bezier(.2,.7,.2,1) .08s backwards}
.display em{font-style:italic;color:var(--clay)}
.hlead{margin-top:26px;max-width:44ch;font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.7;color:#39423a;animation:rise .9s cubic-bezier(.2,.7,.2,1) .2s backwards}
.hlead b{font-weight:600;color:var(--green)}
.hcue{margin-top:34px;display:inline-flex;align-items:center;gap:12px;font-family:'Mulish',sans-serif;font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);animation:rise .9s cubic-bezier(.2,.7,.2,1) .32s backwards}
.hcue .ln{width:46px;height:1px;background:var(--stone);opacity:.5}
/* hero widening field styled in stage block below */
@media(max-width:900px){
  .htext{grid-column:1 / -1}
}

/* ── INDEX TRIO — the three rooms at a glance, marks in little cards ── */
.index{padding:clamp(24px,4vw,52px) 0 clamp(48px,7vw,92px)}
.index .lead-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,40px)}
.index .lead-row h2{font-family:'EB Garamond',serif;font-weight:500;font-size:clamp(26px,3.2vw,38px);line-height:1.1;color:var(--green);white-space:nowrap}
.index .lead-row .sub{font-family:'Mulish',sans-serif;font-size:14.5px;color:var(--stone);flex:1 1 320px;max-width:none}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.tcard{background:var(--t);border-radius:18px;padding:clamp(28px,3vw,40px) 26px clamp(26px,3vw,34px);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:15px;color:inherit;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;will-change:transform}
.tcard .tmark{height:58px;display:flex;align-items:flex-end;justify-content:center}
.tcard .tmark svg{display:block}
.tcard .tbody{display:flex;flex-direction:column;align-items:center;gap:5px}
.tcard .tn{font-family:'EB Garamond',serif;font-weight:500;font-size:clamp(22px,2.2vw,26px);color:var(--green);line-height:1.05}
.tcard--navy .tn{color:#F4EFE6}
.tcard--navy{background:linear-gradient(150deg,#13253E 0%,#254268 100%)}
.tcard .tt{font-family:'Mulish',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ta)}
.tcard .tar{margin-top:4px;font-family:'Mulish',sans-serif;font-size:18px;color:var(--ta);transition:transform .26s ease}
.tcard:hover{transform:translateY(-7px);box-shadow:0 24px 48px -26px rgba(28,42,32,.45)}
.tcard:hover .tar{transform:translateX(7px)}
@media(max-width:740px){ .trio{grid-template-columns:1fr;gap:13px} .tcard{flex-direction:row;text-align:left;justify-content:flex-start;gap:22px;padding:22px 26px}
  .tcard .tmark{height:auto;flex:0 0 auto} .tcard .tbody{align-items:flex-start;gap:5px} .tcard .tar{margin-left:auto} }

/* ── ROOM BANDS — full-bleed hue worlds, alternating, no rules ── */
.band{padding:clamp(76px,10vw,140px) 0;position:relative;overflow:hidden}
.band--sage{background:#DCE0CF;--accent:#2E4A2A;--disc:rgba(46,74,42,.07)}
.band--clay{background:#F0DCC7;--accent:#A9532E;--disc:rgba(169,83,46,.08)}
.band--lilac{background:#E3DBEF;--accent:#322B4D;--disc:rgba(50,43,77,.07)}
.band--navy{background:radial-gradient(700px 640px at 78% 50%,rgba(222,196,140,.24),rgba(222,196,140,0) 66%),radial-gradient(150% 130% at 72% 38%,rgba(212,182,124,.09),rgba(212,182,124,0) 62%),linear-gradient(180deg,#35567F 0%,#1E3557 46%,#0E1D31 100%);--accent:#D9BE83;--disc:rgba(201,169,97,.18)}
.band--navy .bhead{color:#F4EFE6}
.band--navy .bdesc{color:rgba(244,239,230,.72)}
.band--navy .watermark circle{stroke:rgba(232,217,176,.5)}
.band--navy .watermark circle:last-child{fill:rgba(232,217,176,.5)}
.band .inner{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(40px,6vw,96px);align-items:center;position:relative;z-index:1}
.band.alt .txt{order:2}.band.alt .fig{order:1}
.bname{font-family:'Mulish',sans-serif;font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.bhead{font-family:'EB Garamond',serif;font-weight:500;font-size:clamp(32px,4.1vw,54px);line-height:1.04;color:var(--green);margin-top:18px;letter-spacing:.003em;max-width:15ch}
.bdesc{font-size:clamp(16.5px,1.5vw,18px);line-height:1.74;color:#3a4137;max-width:48ch;margin-top:24px}
.benter{margin-top:30px;display:inline-flex;align-items:center;gap:11px;font-family:'Mulish',sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;color:var(--accent)}
.benter .ar{transition:transform .24s ease}
.band a.block{display:block;color:inherit}
.band a.block:hover .benter .ar{transform:translateX(9px)}
.band a.block:hover .bhead{color:#0e1611}
.band--navy a.block:hover .bhead{color:#ffffff}
/* figure: mark in a soft disc + pull-quote */
.fig{display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center}
.markwell{width:clamp(210px,27vw,330px);aspect-ratio:1;border-radius:50%;background:var(--disc);display:grid;place-items:center;
  transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.band a.block:hover .markwell{transform:scale(1.035)}
.markwell svg{display:block}
.pq{font-family:'EB Garamond',serif;font-style:italic;font-weight:500;font-size:clamp(21px,2.2vw,27px);line-height:1.32;color:var(--accent);max-width:17ch}
/* faint oversized watermark for atmosphere */
.band .watermark{position:absolute;top:50%;opacity:.05;z-index:0;pointer-events:none;transform:translateY(-50%)}
.band .watermark svg{display:block;width:clamp(420px,52vw,720px)}
.band:not(.alt) .watermark{right:-13%}
.band.alt .watermark{left:-13%}
@media(max-width:900px){
  .band{padding:clamp(58px,11vw,84px) 0}
  .band .inner{grid-template-columns:1fr;gap:clamp(34px,7vw,52px)}
  .band.alt .txt{order:2}.band.alt .fig{order:1}
  .fig{order:-1}
  .band .watermark{display:none}
}

/* ── ABOUT — framed photo, on cream ── */
.about{padding:clamp(72px,9vw,128px) 0}
.about .ag{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:901px){ .about .ag{grid-template-columns:1.5fr 1fr;column-gap:80px} }
.about .eyebrow{margin-bottom:20px}
.about h2{font-family:'EB Garamond',serif;font-weight:500;font-size:clamp(33px,4.6vw,56px);line-height:1.04;color:var(--green);margin-bottom:28px;max-width:14ch}
.about .body{font-size:17.5px;line-height:1.74;color:#3a4137;max-width:58ch}
.about .body+.body{margin-top:18px}
.about .body .em{font-style:italic;color:var(--clay)}
.about-photo{position:relative;justify-self:center;max-width:330px;width:100%}
.about-photo .frame{position:absolute;inset:20px -20px -20px 20px;background:var(--iris);border-radius:8px;z-index:0}
.about-photo img{position:relative;z-index:1;width:100%;border-radius:8px;display:block;filter:saturate(.95)}
.about-photo .cap{position:relative;z-index:1;font-family:'Mulish',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-top:20px;text-align:right}

/* ── FOOTER — deep plum ground, echoes the iris hero ── */
.foot{background:radial-gradient(120% 130% at 20% 0%, #4A2B43 0%, #362340 48%, #29233F 100%);color:var(--on-dark);position:relative;z-index:1}
.foot .wrap{padding-top:clamp(46px,5vw,68px);padding-bottom:clamp(34px,3.6vw,46px)}
.fbig{font-family:'EB Garamond',serif;font-weight:500;font-style:italic;font-size:clamp(29px,4.2vw,52px);line-height:1.14;color:var(--cream);max-width:34ch;margin-bottom:clamp(26px,3vw,40px)}
.fbig .acc{color:var(--lilac);font-style:normal}
.foot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:48px;flex-wrap:wrap;padding-bottom:clamp(26px,3vw,38px)}
.foot .fbrand svg{margin-bottom:18px;display:block}
.foot .nm{font-family:'EB Garamond',serif;font-weight:500;font-size:28px;color:var(--cream);line-height:1}
.foot .tl{font-family:'Mulish',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#E7B98C;margin-top:13px}
.foot-links{display:flex;flex-direction:column;gap:14px}
.foot-links a{font-family:'EB Garamond',serif;font-size:21px;color:var(--cream);display:inline-flex;align-items:center;gap:11px;transition:color .2s}
.foot-links a:hover{color:var(--lilac)}
.foot-links a .ar{color:var(--lilac);font-family:'Mulish',sans-serif;font-size:15px;transition:transform .24s ease}
.foot-links a:hover .ar{transform:translateX(6px)}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:clamp(20px,2.2vw,30px);font-family:'Mulish',sans-serif;font-size:12.5px;letter-spacing:.04em;color:#8c9686}
.foot-bottom a{color:#ab9ec4}
.foot-bottom a:hover{color:var(--cream)}

/* ── mobile type ── */
@media(max-width:520px){
  .display{font-size:clamp(44px,13vw,58px)}
  .links{gap:15px}.links a{font-size:11px;letter-spacing:.1em}
  .about .body,.bdesc{font-size:16.5px}
  .index .lead-row{gap:8px}
  .index .lead-row h2{white-space:normal}
}

/* ── HERO STAGE — deep iris ground, luminous widening ── */
.stage{position:relative;background:radial-gradient(125% 125% at 78% 90%, #4c3c66 0%, #322B4D 44%, #3a2640 100%);overflow:hidden}
.stage .links a{color:#cdbfe6}
.stage .links a:hover{color:#fff}
.stage .links a::after{background:var(--lilac)}
.stage .brand .nm{color:var(--cream)}
.stage .hero{background:transparent;padding:clamp(38px,5.5vw,84px) 0 clamp(66px,9vw,128px);min-height:clamp(520px,70vh,740px)}
.stage .display{color:var(--cream)}
.stage .display em{color:#EBBE90}
.stage .hlead{color:#D9D0E7}
.stage .hlead b{color:#fff}
.stage .eyebrow{color:#EBBE90}
.stage .hcue{color:#b3a6cf}
.stage .hcue .ln{background:#b3a6cf;opacity:.6}
.hero::before{content:"";position:absolute;right:3%;bottom:0;width:min(64vw,660px);aspect-ratio:1;background:radial-gradient(circle at 50% 74%, rgba(235,190,144,.24), rgba(201,188,224,.09) 44%, transparent 68%);z-index:0;pointer-events:none}
.hero-field{position:absolute;right:0;top:50%;transform:translate(clamp(0px,4vw,70px),-50%);width:min(56vw,620px);z-index:1;pointer-events:none}
.warc{stroke-dasharray:var(--len);stroke-dashoffset:0;animation:draw 1.5s cubic-bezier(.25,.7,.2,1) backwards}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@media(max-width:900px){
  .hero-field{position:static;transform:none;width:82vw;margin:12px auto 0;display:block}
  .hero::before{right:auto;left:50%;transform:translateX(-50%);bottom:-4%;width:90vw}
}

/* ── side dot-rail: section wayfinding ── */
.rail{position:fixed;right:clamp(13px,1.9vw,28px);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:14px;align-items:center;opacity:0;pointer-events:none;transition:opacity .45s ease}
.rail.shown{opacity:1;pointer-events:auto}
.rail a{position:relative;display:block;padding:4px}
.rail .dot{display:block;width:9px;height:9px;border-radius:50%;border:1.6px solid var(--stone);background:transparent;transition:transform .28s cubic-bezier(.2,.7,.2,1),background .28s,border-color .28s}
.rail a:hover .dot{border-color:var(--clay);transform:scale(1.18)}
.rail a.active .dot{background:var(--clay);border-color:var(--clay);transform:scale(1.25)}
.rail a::before{content:attr(data-label);position:absolute;right:26px;top:50%;transform:translateY(-50%);font-family:'Mulish',sans-serif;font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);background:var(--cream);border-radius:6px;padding:4px 9px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:0 8px 20px -12px rgba(28,42,32,.6)}
.rail a:hover::before{opacity:1}
@media(max-width:820px){
  .rail{top:auto;bottom:16px;left:50%;right:auto;transform:translateX(-50%);flex-direction:row;gap:11px;
    background:rgba(30,29,51,.55);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);padding:9px 15px;border-radius:999px}
  .rail .dot{border-color:rgba(244,238,225,.55)}
  .rail a.active .dot{background:var(--clay);border-color:var(--clay)}
  .rail a::before{display:none}
}

/* land section jumps with a strip of the previous room showing */
.index,.band,.about{scroll-margin-top:clamp(28px,6vh,72px)}

/* ── header instagram glyph ── */
.links a.ig{padding:0;display:inline-flex;align-items:center}
.links a.ig::after{display:none}
.links a.ig svg{display:block;width:18px;height:18px}