/* Casa Verde — drawn from the shop's own visual language: near-black ground,
   warm gold, classical display serif. A speakeasy lounge, not a clinic.
   Committed single-theme: the brand is dark, so the page is dark in every
   viewer's setting and paints its own ground rather than borrowing one.

   2026-10-10 — restyled against a reference design (casaverde.devsmason.com)
   proposed by another developer. The reference's cannabis strain names,
   product jars and effect-claim copy are NOT carried over — they are exactly
   what Article 9 and this repo's compliance linter exist to keep off the
   site. What IS taken: the palette discipline (umber/brass/cream), the
   Italiana display serif, the mono "knob" button language, a film-grain
   texture, and editorial rounded-top photo framing — rebuilt here against
   our own real, allowlisted content and photographs. No motion is added to
   anything inside `.rail`: it is `position:sticky` above 1200px, and a
   transform/opacity reveal on a sticky ancestor silently breaks its stick. */
@import url('https://fonts.googleapis.com/css2?family=Italiana&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Thai:wght@300;400;500&family=IBM+Plex+Sans:wght@300;400;500&display=swap');

:root{
  --ground:#0D0D0C;
  --surface:#151513;
  --surface-2:#1D1D1A;
  --panel:#13170F;          /* a second, forest-leaning dark — alternates with --surface for rhythm, decorative only */
  --gold:#C6A465;
  --gold-dim:#8E7742;
  --brass:#B8925A;          /* hairlines and the footer mark — decorative only, never used for text */
  --cream:#EFE9DC;
  --text:#CFC9BD;
  --text-soft:#9A948A;
  --text-faint:#6E6960;
  --rule:#272724;
  --rule-strong:#39382F;
  --verde:#7FA981;
  --amber:#D8AC55;
  --amber-soft:#2A2317;

  /* Type — a 1.25 modular scale on a 17px body. The hero size is its own
     scale, not a step up from --t-h1: once the headline moved into a
     full-bleed band and became the only thing on the page using <h1>, it
     no longer had to share a size with anything else, so it got room to
     actually read as a headline rather than a slightly large paragraph
     title — matching the scale the reference commits to. */
  --t-micro:11px;
  --t-small:14px;
  --t-body:17px;
  --t-lede:22px;
  --t-h3:30px;
  --t-h2:42px;
  --t-h1-min:42px;
  --t-h1:65px;
  --t-hero:clamp(46px, 7.6vw, 112px);

  --display:"Italiana","Didot",Georgia,serif;

  /* Space — one 4px-based scale. Section rhythm: 64 between blocks,
     96 between zones, 128 before the footer. */
  --s1:4px;  --s2:8px;   --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px; --s9:96px; --s10:128px;

  --measure:66ch;
  --shell:1000px;
  --ease-out: cubic-bezier(.23,1,.32,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:"IBM Plex Sans","IBM Plex Sans Thai",system-ui,sans-serif;
  font-weight:300;
  font-size:var(--t-body);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
html[lang="th"] body{
  font-family:"IBM Plex Sans Thai","IBM Plex Sans",system-ui,sans-serif;
  line-height:1.95;
}

/* A quiet 35mm grain over the whole page — texture, not motion, so it costs
   nothing under reduced-motion and nothing in legibility. Inline SVG noise,
   no image request. */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s2);top:var(--s2);z-index:20;background:var(--gold);color:#0D0D0C;padding:10px var(--s4);border-radius:2px}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---- header ---- */
header.site{
  position:sticky;top:0;z-index:10;
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center;
  justify-content:space-between;
  max-width:var(--shell);margin:0 auto;padding:var(--s5);
  border-bottom:1px solid var(--rule);
  background:rgba(13,13,12,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.wordmark{display:flex;align-items:center;gap:var(--s3);text-decoration:none;color:var(--gold)}
.wordtype{
  font-family:var(--display);
  font-weight:400;font-size:var(--t-h3);letter-spacing:.1em;
  text-transform:uppercase;color:var(--cream);line-height:1;
}
.wordtype em{font-style:normal;color:var(--gold)}
header nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center}
header nav a{
  font-size:var(--t-small);font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-soft);text-decoration:none;
  padding-top:11px;border-top:1px solid transparent;
  transition:color .18s var(--ease-out),border-color .18s var(--ease-out);
}
header nav a:hover,header nav a[aria-current="page"]{color:var(--gold);border-top-color:var(--gold-dim)}
header nav a.lang{
  border:1px solid var(--rule-strong);border-top:1px solid var(--rule-strong);padding:var(--s1) 10px;border-radius:2px;
  color:var(--text-faint);letter-spacing:.08em;
}
header nav a.lang:hover{border-color:var(--gold-dim);color:var(--gold)}

/* ---- the brand eyebrow — "Cali Botanical Lounge · Café · Fashion" above
   every h1, the real categories already verified in site.config.json.
   Echoes the reference's mono eyebrow-above-headline device. Lives inside
   .band now, so its own margin is just the gap above the headline. ---- */
.eyebrow{
  margin:0 0 var(--s3);
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim);
}
.eyebrow span + span::before{content:"·";margin:0 .6em;color:var(--rule-strong)}

/* ---- the band ----
   Every page opens full-bleed, edge to edge, independent of the centred
   shell below it — the single biggest lever for the "document, not a
   designed page" problem: a 65px headline in a 1180px column reads as a
   large paragraph, not an opening statement. `width:100vw` plus a negative
   half-viewport margin breaks out of any ancestor's max-width or grid
   column without touching the markup above it.
   With a photo: the image fills the band as a real <img> (kept for alt
   text and loading semantics, not a CSS background), a scrim sits over it
   for legibility, and the text block sits low in the frame — the same
   "title low, image breathing above it" composition the reference uses.
   Without one: a flat panel ground carries the same big type on its own,
   so every page gets the same confident opening, photo or not. */
.band{
  position:relative;
  width:100vw;margin-left:calc(50% - 50vw);
  overflow:hidden;
  background:var(--panel);
}
.band__inner{
  position:relative;z-index:2;
  max-width:var(--shell);margin:0 auto;
  padding:clamp(96px,16vh,168px) var(--s5) clamp(56px,10vh,96px);
}
.band--photo{
  min-height:clamp(420px,62vh,760px);
  display:flex;align-items:flex-end;
}
.band--photo .band__inner{padding-top:clamp(140px,26vh,260px);padding-bottom:clamp(48px,8vh,80px)}
.band__img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:saturate(.94) contrast(1.02);
}
/* Same daylight-correction reasoning as before: two of the four photographs
   were shot in daylight and read wrong against a near-black site. Graded
   here, never by editing the JPEGs — the allowlist reviews files by name. */
.band__img--daylight{filter:brightness(.82) saturate(.78) contrast(1.06) sepia(.12)}
.band__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(0deg, rgba(13,13,12,.95) 0%, rgba(13,13,12,.88) 30%, rgba(13,13,12,.45) 58%, rgba(13,13,12,.1) 100%),
    linear-gradient(100deg, rgba(13,13,12,.55) 0%, rgba(13,13,12,0) 55%);
}
.band h1{margin:0 0 var(--s5)}
.band--photo .eyebrow,
.band--photo h1,
.band--photo .lede{text-shadow:0 2px 16px rgba(10,9,7,.7), 0 1px 2px rgba(10,9,7,.9)}
@media (max-width:700px){
  .band--photo{min-height:56vh}
  .band--photo .band__inner{padding-top:clamp(100px,22vh,180px)}
}

.shell{max-width:var(--shell);margin:0 auto;position:relative;z-index:2}
main{padding:var(--s9) var(--s5) var(--s5)}
.rail{padding:0 var(--s5)}

@media (min-width:1200px){
  :root{--shell:1180px}
  .shell{
    display:grid;
    grid-template-columns:minmax(0,7fr) minmax(260px,3fr);
    gap:0 var(--s9);
    align-items:start;
  }
  main{padding-right:0}
  .rail{
    padding:calc(var(--s8) + var(--s5)) 0 0;
    position:sticky;top:calc(var(--s8) + 2px);
  }
  .rail .visit-card{
    margin:0;padding:var(--s5) 0 0;
    border-top:1px solid var(--rule-strong);
  }
}
h1{
  font-family:var(--display);
  font-weight:400;font-size:var(--t-hero);
  line-height:.98;
  letter-spacing:-.018em;
  color:var(--cream);
  margin:0 0 var(--s5);max-width:15ch;text-wrap:balance;
}
.lede{
  font-size:clamp(var(--t-lede),2.2vw,25px);font-weight:300;
  color:var(--text-soft);max-width:48ch;margin:0;text-wrap:pretty;
}
.band--photo .lede{color:var(--text)}
.block{border-top:1px solid var(--rule);padding:var(--s6) 0 0;margin:var(--s8) 0 0}
.block h2{
  font-family:var(--display);
  font-weight:400;font-size:clamp(var(--t-h3),3.4vw,var(--t-h2));
  line-height:1.1;letter-spacing:-.008em;color:var(--cream);
  margin:0 0 var(--s4);max-width:30ch;text-wrap:balance;
}
.block p{margin:0;max-width:var(--measure)}
p{text-wrap:pretty}
.updated{margin-top:var(--s7);font-size:var(--t-small);color:var(--text-soft);max-width:var(--measure)}

.block:nth-of-type(even){
  background:var(--panel);border-top-color:transparent;
  border-left:2px solid var(--brass);border-radius:0 3px 3px 0;
  padding:var(--s6) var(--s5);
}
.block:nth-of-type(even) + .block{border-top:1px solid var(--rule)}

.events-list{list-style:none;margin:var(--s7) 0 0;padding:0;max-width:var(--measure)}
.event{
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);align-items:baseline;
  padding:var(--s4) 0;border-top:1px solid var(--rule);
}
.event:last-child{border-bottom:1px solid var(--rule)}
.event-when{
  font-family:"IBM Plex Mono",monospace;font-size:var(--t-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dim);
  flex:0 0 8rem;
}
.event-what{color:var(--text);flex:1 1 16rem}
.event-what.tbc{border-bottom:1px dotted var(--amber);color:var(--cream)}
.events-empty{
  margin:var(--s7) 0 0;padding:var(--s5);max-width:var(--measure);
  border:1px dashed var(--rule-strong);border-radius:2px;background:var(--surface);
}
.events-empty p{margin:0;color:var(--text-soft);font-size:var(--t-small)}

.cta-row{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);margin:var(--s7) 0 0}
.cta{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  text-decoration:none;
  font-family:"IBM Plex Mono",monospace;
  font-size:var(--t-small);letter-spacing:.1em;text-transform:uppercase;
  padding:0 var(--s5);border-radius:2px;border:1px solid transparent;
  transition:background-color .18s var(--ease-out),color .18s var(--ease-out),border-color .18s var(--ease-out),transform .12s var(--ease-out);
}
.cta:active{transform:scale(.97)}
.cta-primary{background:var(--gold);color:#0D0D0C;border-color:var(--gold)}
.cta-primary:hover{background:var(--cream);border-color:var(--cream)}
.cta-secondary{border-color:var(--rule-strong);color:var(--text-soft);background:none}
.cta-secondary:hover{border-color:var(--gold-dim);color:var(--gold)}

footer.site{max-width:var(--shell);margin:var(--s9) auto 0;padding:var(--s6) var(--s5) var(--s9);border-top:1px solid var(--rule);position:relative;z-index:2}
.notice{
  background:var(--surface);border-left:2px solid var(--gold-dim);
  padding:var(--s4) var(--s5);font-size:var(--t-small);color:var(--text-soft);
  max-width:var(--measure);margin:0 0 var(--s5);
}
.visit-card{
  display:flex;flex-direction:column;gap:var(--s1);
  max-width:var(--measure);margin:0 0 var(--s5);
}
.visit-addr{
  font-family:var(--display);
  font-size:var(--t-lede);line-height:1.3;letter-spacing:.005em;
  color:var(--cream);margin:0;
}
.visit-line{margin:0;font-size:var(--t-small);line-height:1.55;color:var(--text-soft)}
.visit-tel{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.visit-tel:hover{border-bottom-color:var(--gold)}
.visit-label{
  font-family:"IBM Plex Mono",monospace;
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-dim);margin-right:9px;
}
.licence{
  font-family:"IBM Plex Mono",monospace;
  font-size:var(--t-small);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-soft);margin:0;
}

.colophon{margin-top:var(--s9);display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.colophon-mark{
  width:40px;aspect-ratio:32/32;background:var(--text-faint);
  -webkit-mask:url(/logo.svg) center/contain no-repeat;mask:url(/logo.svg) center/contain no-repeat;
}
.colophon-type{
  font-family:var(--display);font-weight:400;
  font-size:clamp(26px,4.4vw,40px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);
}

.preview-bar{
  position:relative;z-index:3;
  background:var(--amber-soft);border-bottom:1px solid var(--gold-dim);
  color:var(--text-soft);font-size:var(--t-small);line-height:1.55;
  padding:var(--s3) var(--s5);text-align:center;
}
.preview-bar > span{display:block;max-width:var(--measure);margin:0 auto}
.preview-bar strong{color:var(--amber);font-weight:500}
.tbc{border-bottom:1px dotted var(--amber);padding-bottom:1px;color:var(--cream)}
.blank{
  background:var(--amber-soft);border:1px dashed var(--gold-dim);border-radius:2px;
  padding:1px var(--s2);font-size:.88em;color:var(--amber);white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;letter-spacing:.04em;
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.events-group{margin:var(--s7) 0 0}
.events-group h2{margin:0}
.events-group .events-list{margin-top:var(--s4)}
.events-group .events-empty{margin-top:var(--s4)}
.events-past .event-what{color:var(--text-soft)}