/* DE BLACK Coffee — Phnom Penh
   Ground: bleached tropical daylight. Menu: the cafe's glossy black price board. */

:root{
  --sun:      #E4E2D8;   /* bleached daylight ground */
  --sun-deep: #D6D4C7;
  --ink:      #17130F;   /* warm near-black */
  --board:    #0A0A09;   /* the price board */
  --amber:    #8F5D08;   /* text-safe gold on the light ground */
  --gold:     #D9A03C;   /* the gold lettering in the hero artwork */
  --blue:     #2563EB;   /* the map marker */
  --rule:     rgba(23,19,15,.16);

  --gut: clamp(18px, 4vw, 64px);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--sun); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.45;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--sun); padding:12px 18px;
}
.skip:focus{ left:8px; top:8px }

:focus-visible{ outline:2px solid var(--amber); outline-offset:3px }

/* wordmark: their reversed C */
.flip{ display:inline-block; transform:scaleX(-1) }

/* ---------- bar ---------- */
.bar{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--gut);
  mix-blend-mode:difference; color:#fff;
  pointer-events:none;
}
.bar a{ pointer-events:auto; text-decoration:none }
.bar-mark{
  font-family:var(--sans); font-weight:600;
  font-size:13px; letter-spacing:.34em;
}
.bar-nav{ display:flex; gap:clamp(14px,2.4vw,30px) }
.bar-nav a{
  font-size:11px; letter-spacing:.28em; text-transform:lowercase;
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.bar-nav a:hover{ border-bottom-color:currentColor }

/* ---------- hero ----------
   The artwork is already black to its edges, so it is contained rather than
   cropped: the band reads as one plate and the splash keeps its whole shape. */
.hero{
  position:relative; background:var(--board);
  height:100svh; min-height:560px; overflow:hidden;
}
/* Pinned rather than sized in flow: a percentage height against an auto row
   collapses back to the image's own aspect and blows past the viewport. */
.hero-img{
  position:absolute; left:0; top:54px;
  width:100%; height:calc(100% - 134px);
  object-fit:contain; object-position:50% 50%;
}

/* ---------- wordmark band ---------- */
.mark-band{ padding:clamp(54px,9vw,132px) var(--gut) 0 }
.mark{
  margin:0; font-family:var(--sans); font-weight:600;
  font-size:clamp(46px,13vw,186px); line-height:.84;
  letter-spacing:.01em; color:var(--ink);
}
.mark-sub{
  margin:.7em 0 0; font-size:clamp(10px,1.4vw,15px);
  letter-spacing:.62em; text-transform:uppercase;
  color:rgba(23,19,15,.62);
}
.hero-data{
  position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(22px,4vh,40px);
  margin:0; display:flex; flex-wrap:wrap; gap:6px clamp(16px,3vw,40px);
  color:var(--sun); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  border-top:1px solid rgba(228,226,216,.3); padding-top:14px;
}
.hero-data i{ font-style:normal; font-size:.66em; vertical-align:.5em; margin-left:1px }

/* ---------- strata ---------- */
.strata{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,2vw,28px);
  padding:clamp(30px,5.5vw,74px) var(--gut) clamp(40px,8vw,110px);
  align-items:start;
}
.strata-i{ margin:0 }
.strata-i img{ width:100%; aspect-ratio:3/4; object-fit:cover }
.s2{ margin-top:clamp(26px,7vw,96px) }
.s3{ margin-top:clamp(52px,14vw,192px) }

/* ---------- the board ---------- */
.board{
  background:var(--board); color:var(--sun);
  padding:clamp(48px,9vw,120px) var(--gut) clamp(56px,10vw,132px);
}
.board-eyebrow{
  margin:0 0 clamp(28px,5vw,60px);
  font-size:10px; letter-spacing:.36em; text-transform:uppercase;
  color:var(--gold);
}
.cat-l{ list-style:none; margin:0; padding:0; font-family:var(--serif) }
.cat-l li{
  display:flex; align-items:baseline; gap:10px;
  padding:5px 0; font-size:clamp(14px,1.32vw,17px);
  break-inside:avoid;
}
.cat-l span{ flex:1 1 auto; min-width:0 }
.cat-l b{ font-weight:400; flex:0 0 auto; font-variant-numeric:tabular-nums }
.cat-l i{ font-style:normal; font-size:.62em; vertical-align:.62em; margin-left:1px }

/* ---------- the board: tabs, search, panels ---------- */
.board-head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:clamp(20px,3vw,32px);
}
.board-find{ display:flex; align-items:baseline; gap:14px }
.board-find input{
  font-family:var(--sans); font-size:12px; letter-spacing:.12em;
  color:var(--sun); background:transparent;
  border:0; border-bottom:1px solid rgba(228,226,216,.28);
  padding:7px 2px; width:clamp(150px,20vw,210px);
  -webkit-appearance:none; appearance:none;
}
.board-find input::placeholder{ color:rgba(228,226,216,.52) }
.board-find input:focus{ outline:0; border-bottom-color:var(--gold) }
.board-count{ margin:0; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold) }
.board-count:empty{ display:none }

.board-tabs{
  display:flex; gap:clamp(18px,3vw,40px);
  border-bottom:1px solid rgba(228,226,216,.16);
  overflow-x:auto; scrollbar-width:none;
  margin-bottom:clamp(26px,4vw,48px);
}
.board-tabs::-webkit-scrollbar{ display:none }
.mtab{
  flex:0 0 auto; position:relative;
  font-family:var(--serif); font-size:clamp(19px,2.4vw,28px);
  background:none; border:0; color:rgba(228,226,216,.56);
  padding:0 0 12px; cursor:pointer; white-space:nowrap;
  transition:color .25s ease;
}
.mtab:hover{ color:var(--sun) }
.mtab[aria-selected="true"]{ color:var(--sun) }
.mtab::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.mtab[aria-selected="true"]::after{ transform:scaleX(1) }
/* A search spans every category, so the strip steps back while one is running. */
.board-tabs.is-off{ opacity:.55 }
.mtab-n{
  font-family:var(--sans); font-size:10px; letter-spacing:.1em;
  vertical-align:super; margin-left:6px; color:var(--gold); opacity:.8;
}

.mpanel{
  display:grid; grid-template-columns:1fr clamp(220px,24vw,300px);
  gap:clamp(24px,4vw,56px); align-items:start;
}
.mpanel[hidden]{ display:none }
.mpanel-list{ min-width:0 }
.mpanel-h{
  margin:0 0 14px; font-family:var(--serif); font-weight:400;
  font-size:clamp(20px,2.4vw,26px); color:var(--gold);
}
.mpanel-h[hidden]{ display:none }
.mpanel .cat-l{ columns:2; column-gap:clamp(24px,4vw,52px) }
.mpanel-shot{ margin:0; position:relative; overflow:hidden }
.mshow-track{ display:flex; transition:transform .85s cubic-bezier(.65,0,.2,1) }
.mshow-slide{ flex:0 0 100% }
.mpanel-shot img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  background:#fff;
}
/* Counts down the dwell, so the next slide never arrives unannounced. */
.mshow-bar{
  position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--gold); opacity:0;
}
.mshow-bar.is-running{ opacity:.9; width:100%; transition:width linear }
.mpanel-shot[hidden]{ display:none }

.cat-l li.is-out{ display:none }
@media (prefers-reduced-motion:reduce){
  .mtab,.mtab::after,.mshow-track{ transition:none }
  .mshow-bar{ display:none }
}

/* ---------- drinks mosaic ---------- */
.drinks{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(10px,1.6vw,22px);
  padding:clamp(56px,11vw,150px) var(--gut);
}
.d{ margin:0 }
.d img{ width:100%; height:100%; object-fit:cover }
.d-a{ grid-column:span 2; grid-row:span 2 }
.d-b{ grid-column:span 2 }
.d-c{ grid-column:span 2 }
.d-d{ grid-column:span 2 }
.d-e{ grid-column:span 2 }
.d-f{ grid-column:span 2; grid-row:span 2 }
.d-g{ grid-column:span 2 }
.d-h{ grid-column:span 2 }
.d-i{ grid-column:span 2 }
.d-a img{ aspect-ratio:3/4 }
.d-f img{ aspect-ratio:3/4 }
.d-b img,.d-c img,.d-d img,.d-e img,.d-g img,.d-h img,.d-i img{ aspect-ratio:4/3 }

/* ---------- visit ---------- */
.visit{
  display:grid; grid-template-columns:minmax(300px,.85fr) 1.15fr;
  border-top:1px solid var(--rule);
}
.visit-info{ padding:clamp(44px,7vw,96px) var(--gut) }
.visit-h{
  margin:0 0 clamp(26px,4vw,44px);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,4.4vw,62px); line-height:1;
}
.visit-dl{ margin:0 }
.visit-dl dt{
  font-size:10px; letter-spacing:.32em; text-transform:uppercase;
  color:rgba(23,19,15,.62); margin-top:22px;
}
.visit-dl dt:first-child{ margin-top:0 }
.visit-dl dd{
  margin:5px 0 0; font-family:var(--serif); font-size:clamp(16px,1.7vw,20px);
}
.visit-dl a{ text-decoration:none; border-bottom:1px solid var(--rule) }
.visit-dl a:hover{ border-bottom-color:var(--amber); color:var(--amber) }
.visit-do{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:14px clamp(18px,2.4vw,28px);
  margin-top:clamp(28px,4vw,44px);
}
.visit-cta{
  display:inline-block;
  padding:13px 22px; background:var(--ink); color:var(--sun);
  text-decoration:none; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
}
.visit-cta:hover{ background:var(--amber) }
.visit-alt{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--gold); padding-bottom:3px;
}
.visit-alt:hover{ color:var(--amber); border-bottom-color:var(--amber) }
/* Leaflet panes use z-index 400 to 1000 and .leaflet-container makes no
   stacking context of its own, so without this they paint over the dialog. */
.visit-map{ min-height:420px; border-left:1px solid var(--rule); position:relative; z-index:0; isolation:isolate }
#map{ width:100%; height:100%; min-height:420px; background:var(--sun-deep) }
.leaflet-container{ font-family:var(--sans) }
.leaflet-tile-pane{ filter:saturate(.55) contrast(1.04) }
.pin{
  width:22px; height:22px; border-radius:50%;
  background:var(--blue); border:3px solid #fff;
  box-shadow:0 0 0 7px rgba(37,99,235,.26), 0 2px 8px rgba(0,0,0,.35);
}
/* Nothing to drag, so do not offer the grab cursor. */
.leaflet-container,
.leaflet-container .leaflet-interactive{ cursor:default }
.leaflet-grab{ cursor:default }

/* ---------- foot ---------- */
.foot{
  display:flex; flex-wrap:wrap; gap:8px clamp(18px,3vw,40px);
  align-items:center;
  padding:26px var(--gut) 34px;
  border-top:1px solid var(--rule);
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(23,19,15,.66);
}
.foot-mark{ font-weight:600; letter-spacing:.34em; color:var(--ink) }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1) }
.reveal.in{ opacity:1; transform:none }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .visit{ grid-template-columns:1fr }
  .visit-map{ border-left:0; border-top:1px solid var(--rule) }
  .drinks{ grid-template-columns:repeat(4,1fr) }
}
@media (max-width:900px){
  .mpanel{ grid-template-columns:1fr }
  .mpanel-shot img{ aspect-ratio:16/10 }
}
@media (max-width:640px){
  /* Below 16px, iOS zooms the whole page when the field takes focus. */
  .board-find input{ font-size:16px }
  .mtab{ padding-bottom:16px }
  .visit-alt{ padding:12px 0 }
  .mpanel .cat-l{ columns:1 }
  .board-head{ gap:10px }
  .strata{ grid-template-columns:1fr; gap:14px }
  .s2,.s3{ margin-top:0 }
  .drinks{ grid-template-columns:repeat(2,1fr) }
  .d{ grid-column:span 1; grid-row:span 1 }
  .d-a{ grid-column:span 2 }
  .d img{ aspect-ratio:3/4 }
  .d-a img{ aspect-ratio:4/3 }
  /* Let the artwork set the height so it never floats in dead black. */
  .hero{ height:auto; min-height:0 }
  .hero-img{ position:static; width:100%; height:auto }
  .hero-data{
    position:static; margin:0; padding:14px var(--gut) 20px;
    border-top-color:rgba(228,226,216,.22);
    font-size:9.5px; letter-spacing:.16em; gap:4px 14px;
  }
  .bar-nav{ gap:16px }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none; transition:none }
}

/* ---------- install prompt ---------- */
.pwa{
  position:fixed; left:var(--gut); bottom:18px; z-index:1900;
  display:flex; align-items:center; gap:12px;
  background:var(--board); color:var(--sun);
  padding:10px 10px 10px 12px;
  max-width:min(430px, calc(100vw - 2 * var(--gut)));
  box-shadow:0 10px 34px rgba(0,0,0,.34);
  opacity:0; transform:translateY(14px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.pwa[hidden]{ display:none }
.pwa.in{ opacity:1; transform:none }
.pwa-icon{ width:36px; height:36px; flex:0 0 auto }
.pwa-line{ margin:0; flex:1 1 auto; font-size:12px; line-height:1.3; letter-spacing:.03em }
.pwa-go{
  flex:0 0 auto; font-family:inherit; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  background:var(--gold); color:#14100E; border:0;
  padding:9px 15px; cursor:pointer;
}
.pwa-go:hover{ background:#E6B252 }
.pwa-x{
  flex:0 0 auto; background:none; border:0; color:var(--sun);
  opacity:.55; font-size:19px; line-height:1; padding:4px 6px; cursor:pointer;
}
.pwa-x:hover{ opacity:1 }

@media (max-width:640px){
  .pwa{ left:10px; right:10px; bottom:10px; max-width:none }
}
@media (prefers-reduced-motion:reduce){
  .pwa{ transition:none }
}

/* ---------- review reward: the wheel ---------- */
.spin{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,6,5,.86); padding:20px;
}
.spin[hidden]{ display:none }
.spin-card{
  position:relative; width:min(380px, 100%);
  background:var(--board); color:var(--sun);
  border:1px solid rgba(217,160,60,.4);
  padding:30px 26px 28px; text-align:center;
}
.spin-x{
  position:absolute; top:8px; right:10px;
  background:none; border:0; color:var(--sun); opacity:.5;
  font-size:22px; line-height:1; padding:4px 6px; cursor:pointer;
}
.spin-x:hover{ opacity:1 }
.spin-eyebrow{
  margin:0 0 20px; font-size:10px; letter-spacing:.36em;
  text-transform:uppercase; color:var(--gold);
}
.spin-line{
  margin:0 0 20px; font-size:12.5px; line-height:1.45;
  letter-spacing:.02em; color:rgba(228,226,216,.72);
}
.spin-line[hidden]{ display:none }
.spin-stage{ position:relative; width:min(280px, 72vw); margin:0 auto }
.spin-wheel{ display:block; width:100%; height:auto }
.spin-pin{
  position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:0; height:0;
  border-left:10px solid transparent; border-right:10px solid transparent;
  border-top:18px solid var(--gold);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.spin-fx{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.spin-go{
  margin-top:24px; font-family:inherit; font-size:12px;
  letter-spacing:.26em; text-transform:uppercase;
  background:var(--gold); color:#14100E; border:0;
  padding:14px 34px; cursor:pointer;
}
.spin-go:hover{ background:#E6B252 }
.spin-go:disabled{ opacity:.5; cursor:default }
.spin-result{ margin-top:22px }
.spin-prize{
  margin:0; font-family:var(--serif); font-size:clamp(21px,5.4vw,27px);
  line-height:1.15; color:var(--sun);
}
.spin-code{
  margin:12px 0 0; display:inline-block;
  border:1px dashed rgba(217,160,60,.6); padding:8px 16px;
  font-size:15px; letter-spacing:.22em; color:var(--gold);
}
.spin-date{
  margin:10px 0 0; font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(228,226,216,.56);
}

/* the prize, once it is won */
.visit-mine{
  font-family:inherit; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  background:none; border:1px dashed rgba(143,93,8,.55); color:var(--amber);
  padding:9px 14px; cursor:pointer;
}
.visit-mine[hidden]{ display:none }
.visit-mine:hover{ background:rgba(217,160,60,.12) }




/* QR landing cue on the review link */
.visit-alt.is-cue{ animation:cue 1.1s ease-in-out 4; color:var(--amber) }
@keyframes cue{
  0%,100%{ box-shadow:0 0 0 0 rgba(217,160,60,0) }
  50%{ box-shadow:0 0 0 7px rgba(217,160,60,.28) }
}
@media (prefers-reduced-motion:reduce){ .visit-alt.is-cue{ animation:none } }

/* This is the third max-width:640px block in the file, and the split is
   deliberate: each one sits after the rules it overrides. Merging them into a
   single block higher up would silently lose every override that follows,
   which is exactly the bug this one was written to fix. */
@media (max-width:640px){
  .spin-x{ font-size:26px; padding:12px 14px; top:4px; right:6px }
}