/* ==========================================================================
   PROPER COFFEE — brand + site styles

   Palette is read off the shop itself: white vaulted ceiling and walls (bone),
   blonde oak floors and tables, warm charcoal feature walls, black steel roof
   trusses, and the amber glow of the rattan pendants. Bright and airy first;
   the dark is used as an anchor, never as the mood.

   The one fixed point is --sand (#F3E4D4), sampled from the logo PNG, which has
   that cream baked in. Any band the logo sits on must be exactly --sand or the
   artwork reads as a rectangle. Everything else is free.
   ========================================================================== */

:root{
  /* surfaces */
  --bone:#FBF8F3;        /* walls + ceiling — the primary page */
  --bone-2:#F5F0E8;      /* a half-step down, for cards */
  --sand:#F3E4D4;        /* LOCKED: sampled from the logo artwork */
  --charcoal:#3A3330;    /* the warm dark feature wall */
  --steel:#211E1C;       /* roof trusses — deepest tone */

  /* accents */
  --oak:#C9A47A;         /* floors and tables */
  --amber:#C9832F;       /* the pendant glow — brand amber, for fills */

  /* JoshGen blue — #1d3b64 is JoshGen's own theme colour.
     It is superb on cream (10.7:1) but effectively invisible on charcoal
     (1.1:1), so dark bands need the lifted cut instead. */
  --jg:#1D3B64;
  --jg-lift:#6BA6DE;     /* blue text on charcoal/steel (4.8:1 / 6.4:1) */
  --jg-deep:#16345A;     /* hover / pressed */
  --amber-ink:#8E5516;   /* amber TEXT on cream/bone  (4.9:1 on sand) */
  --amber-dk:#DB9E50;    /* amber TEXT on charcoal/steel (5.3:1 on charcoal) */
  --sage:#7E8B6E;        /* the planting */

  /* type */
  --ink:#2A2522;
  --ink-soft:rgba(42,37,34,.70);
  --ink-mute:rgba(42,37,34,.66);
  --on-dark:#F2EDE5;
  --on-dark-soft:rgba(242,237,229,.72);

  /* lines */
  --hair:rgba(42,37,34,.13);
  --hair-strong:rgba(42,37,34,.26);
  --hair-dark:rgba(242,237,229,.16);

  --shell:1180px;
  --ease:cubic-bezier(.22,.68,.28,1);
  --slow:cubic-bezier(.16,.84,.24,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bone);
  color:var(--ink);
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100svh;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--jg);outline-offset:3px;border-radius:2px;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--charcoal);color:var(--on-dark);
  padding:12px 20px;font-size:13px;text-decoration:none;
}
.skip:focus{left:12px;top:12px;}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 30px;}

/* ------------------------------------------------------------------ type -- */
h1,h2,h3,.display{
  font-family:'Instrument Serif',Georgia,serif;
  font-weight:400;line-height:1.04;letter-spacing:-.012em;
}
h1{font-size:clamp(46px,8.4vw,92px);}
h2{font-size:clamp(32px,5.4vw,60px);}
h3{font-size:clamp(19px,2.3vw,24px);line-height:1.2;}
i,em,.it{font-style:italic;}
.accent{color:var(--amber-ink);}

.eyebrow{
  font-size:10.5px;font-weight:500;
  letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;
  color:var(--ink-mute);
}
.band--dark .eyebrow,.band--steel .eyebrow{color:var(--jg-lift);}

.lede{
  font-size:clamp(16px,2.05vw,19px);font-weight:300;line-height:1.75;
  color:var(--ink-soft);max-width:48ch;
}
.center .lede,.hero .lede{margin-left:auto;margin-right:auto;}
.prose p + p{margin-top:20px;}

/* thin oak hairline */
.hair{height:1px;background:var(--hair);border:0;}

/* -------------------------------------------------------------------- nav -- */
.nav{
  position:sticky;top:0;z-index:80;
  background:rgba(251,248,243,.82);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--hair);}
.nav .shell{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:74px;flex-wrap:wrap;
}
.wordmark{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:20px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  transition:color .3s var(--ease);
}
.wordmark:hover{color:var(--jg);}

.tabs{display:flex;align-items:center;gap:2px;flex-wrap:wrap;}
.tabs a{
  position:relative;padding:8px 15px 9px;
  font-size:11px;font-weight:500;
  letter-spacing:.16em;text-indent:.16em;text-transform:uppercase;
  color:var(--ink-mute);text-decoration:none;
  transition:color .3s var(--ease);
}
.tabs a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:1px;height:1px;
  background:var(--jg);transform:scaleX(0);transform-origin:center;
  transition:transform .45s var(--slow);
}
.tabs a:hover{color:var(--ink);}
.tabs a:hover::after{transform:scaleX(1);}
.tabs a[aria-current="page"]{color:var(--ink);}
.tabs a[aria-current="page"]::after{transform:scaleX(1);}

/* --------------------------------------------------------------- sections -- */
main{flex:1;}
.band{padding:clamp(76px,10vw,132px) 0;}
.band--bone{background:var(--bone);}
.band--sand{background:var(--sand);}
.band--dark{background:var(--charcoal);color:var(--on-dark);}
.band--steel{background:var(--steel);color:var(--on-dark);}
.band--dark .lede,.band--steel .lede{color:var(--on-dark-soft);}
.band--dark .accent,.band--steel .accent{color:var(--amber-dk);}
.band--bone .deets .k,.band--sand .deets .k{color:var(--jg);}
.center{text-align:center;}

/* -------------------------------------------------------------------- hero -- */
.hero{
  background:var(--sand);   /* must equal the logo's baked-in cream */
  padding:clamp(24px,3vw,38px) 0 clamp(58px,7vw,88px);
  text-align:center;
}
.hero-art{width:min(424px,74%);margin:0 auto clamp(4px,1.2vw,10px);}
.hero-art img{width:100%;height:auto;}  /* width/height attrs hold the ratio */
.hero h1{margin-top:4px;}
.hero .lede{margin-top:20px;}

/* ---------------------------------------------------------------- countdown -- */
.countdown{margin:clamp(30px,3.8vw,44px) auto 0;max-width:680px;}
.countdown-label{
  font-size:10px;font-weight:500;letter-spacing:.42em;text-indent:.42em;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:22px;
}
.clock{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--hair-strong);
  border-bottom:1px solid var(--hair-strong);
}
.clock div{padding:22px 6px 20px;position:relative;}
.clock div + div::before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;
  background:var(--hair);
}
.clock .n{
  display:block;
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(40px,9vw,76px);line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.clock .u{
  display:block;margin-top:10px;
  font-size:9.5px;font-weight:500;letter-spacing:.28em;text-indent:.28em;
  text-transform:uppercase;color:var(--ink-mute);
}
/* shown instead of the clock until an opening date is set */
.countdown-tba{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(24px,4.4vw,38px);line-height:1.25;
  padding:26px 0 24px;
  border-top:1px solid var(--hair-strong);
  border-bottom:1px solid var(--hair-strong);
}
.countdown-tba .sub{
  display:block;margin-top:12px;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:300;
  color:var(--ink-soft);letter-spacing:0;
}

/* --------------------------------------------------------------- notify -- */
.notify{margin:clamp(28px,3.6vw,40px) auto 0;max-width:470px;}
.notify p.pitch{font-size:14.5px;color:var(--ink-soft);margin-bottom:16px;}
.notify-row{display:flex;gap:9px;flex-wrap:wrap;}
.notify input[type=email]{
  flex:1 1 210px;min-width:0;
  padding:15px 17px;
  font-family:inherit;font-size:15px;font-weight:300;color:var(--ink);
  background:rgba(251,248,243,.75);
  border:1px solid var(--hair-strong);border-radius:2px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.notify input[type=email]::placeholder{color:var(--ink-mute);}
.notify input[type=email]:focus{outline:none;border-color:var(--jg);background:var(--bone);}
.notify .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.notify-msg{
  margin-top:13px;font-size:13.5px;min-height:20px;
  color:var(--ink-soft);opacity:0;transform:translateY(-4px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.notify-msg.show{opacity:1;transform:none;}
.notify-msg.bad{color:#9C4221;}

/* --------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border-radius:2px;cursor:pointer;
  font-family:inherit;font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
  background:var(--jg);color:#fff;
  border:1px solid var(--jg);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{background:var(--jg-deep);border-color:var(--jg-deep);color:#fff;}
.btn[disabled]{opacity:.55;cursor:default;}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--hair-strong);}
.btn--ghost:hover{background:var(--jg);border-color:var(--jg);color:#fff;}
.band--dark .btn--ghost,.band--steel .btn--ghost{color:var(--on-dark);border-color:rgba(107,166,222,.45);}
.band--dark .btn--ghost:hover,.band--steel .btn--ghost:hover{background:var(--jg-lift);border-color:var(--jg-lift);color:var(--steel);}
.btn svg{width:13px;height:13px;flex:none;}

/* ----------------------------------------------------------------- cards -- */
.grid{display:grid;gap:1px;margin-top:clamp(44px,5.5vw,64px);background:var(--hair);}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr));}
.cell{background:var(--bone);padding:clamp(30px,3.6vw,44px) clamp(26px,3vw,36px);}
.band--sand .cell{background:var(--sand);}
.band--dark .grid,.band--steel .grid{background:var(--hair-dark);}
.band--dark .cell,.band--steel .cell{background:var(--charcoal);}
.band--steel .cell{background:var(--steel);}
.cell .num{
  display:block;font-size:10px;font-weight:500;letter-spacing:.3em;text-indent:.3em;
  text-transform:uppercase;color:var(--jg);margin-bottom:16px;
}
.cell h3{margin-bottom:11px;}
.cell p{font-size:14.5px;line-height:1.72;color:var(--ink-soft);}
.band--dark .cell p,.band--steel .cell p{color:var(--on-dark-soft);}
.band--dark .cell .num,.band--steel .cell .num{color:var(--jg-lift);}

/* -------------------------------------------------------------- two-up -- */
.split{display:grid;gap:clamp(34px,5vw,72px);grid-template-columns:1fr;align-items:start;}
@media(min-width:880px){.split{grid-template-columns:1fr 1fr;}}
.split--lead{align-items:center;}

.deets .row{padding:22px 0;border-top:1px solid var(--hair-dark);}
.deets .row:last-child{border-bottom:1px solid var(--hair-dark);}
.band--bone .deets .row,.band--sand .deets .row{border-color:var(--hair);}
.deets .k{
  font-size:10px;font-weight:500;letter-spacing:.28em;text-indent:.28em;
  text-transform:uppercase;color:var(--jg-lift);margin-bottom:7px;
}
.deets .v{font-size:16.5px;line-height:1.7;}
.deets address{font-style:normal;}
.deets .soft{color:var(--on-dark-soft);}
.band--bone .deets .soft,.band--sand .deets .soft{color:var(--ink-soft);}

/* ---------------------------------------------------------------- quote -- */
.quote{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(26px,4.2vw,46px);line-height:1.22;font-style:italic;
  max-width:20ch;
}

/* --------------------------------------------------------------- footer -- */
.foot{background:var(--steel);color:var(--on-dark);padding:clamp(54px,6vw,76px) 0 34px;}
.foot-top{
  display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start;
  padding-bottom:32px;border-bottom:1px solid var(--hair-dark);
}
.foot-mark{
  font-family:'Instrument Serif',Georgia,serif;font-size:23px;
  letter-spacing:.12em;text-transform:uppercase;
}
.foot-line{margin-top:7px;font-size:13.5px;color:var(--on-dark-soft);}
.foot-nav{display:flex;flex-wrap:wrap;gap:22px;}
.foot-nav a{
  font-size:11px;font-weight:500;letter-spacing:.16em;text-indent:.16em;
  text-transform:uppercase;color:var(--on-dark-soft);text-decoration:none;
  transition:color .3s var(--ease);
}
.foot-nav a:hover{color:var(--jg-lift);}
.foot-base{
  margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:10.5px;letter-spacing:.16em;text-indent:.16em;text-transform:uppercase;
  color:rgba(242,237,229,.5);
}

/* ------------------------------------------------------- scroll reveals -- */
/* Smooth and unhurried: long distance, long duration, soft curve. Children
   stagger off --i, set inline by the page. */
.rv{
  opacity:0;
  transform:translateY(26px);
  transition:
    opacity 1.05s var(--slow),
    transform 1.15s var(--slow);
  transition-delay:calc(var(--i,0) * 105ms);
  will-change:opacity,transform;
}
.rv.in{opacity:1;transform:none;}
.no-js .rv{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
  .rv{opacity:1;transform:none;}
}

/* ---------------------------------------------------------------- small -- */
@media (max-width:820px){
  .grid--3{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .shell{padding:0 22px;}
  .nav .shell{min-height:0;padding-top:12px;padding-bottom:12px;justify-content:center;gap:6px;}
  .wordmark{font-size:18px;}
  .tabs a{padding:7px 11px 8px;letter-spacing:.12em;text-indent:.12em;}
  .tabs a::after{left:11px;right:11px;}
  .clock div{padding:16px 4px 15px;}
  .clock .u{font-size:8.5px;letter-spacing:.2em;text-indent:.2em;}
  .foot-top{flex-direction:column;gap:22px;}
  .foot-base{justify-content:flex-start;gap:6px;flex-direction:column;}
}

/* ---------------------------------------------------------------- beans -- */
/* Native scroll-snap rail — no carousel library. The buttons just nudge
   scrollLeft, so it stays usable with touch, trackpad, keyboard and no JS. */
.beans-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.beans-nav{display:flex;gap:8px;}
.beans-btn{
  width:44px;height:44px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;cursor:pointer;
  border:1px solid var(--hair-strong);border-radius:50%;
  color:var(--ink);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease);
}
.beans-btn:hover:not([disabled]){background:var(--jg);border-color:var(--jg);color:#fff;}
.beans-btn[disabled]{opacity:.3;cursor:default;}
.beans-btn svg{width:17px;height:17px;}

.beans-rail{
  margin-top:clamp(30px,3.6vw,44px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.beans-rail::-webkit-scrollbar{display:none;}
.beans-track{
  display:flex;gap:22px;list-style:none;
  /* line the first card up with the shell, but let the rail bleed off-screen */
  padding:4px max(30px,calc((100vw - var(--shell)) / 2 + 30px));
  margin:0;
}
@media(max-width:640px){
  .beans-track{padding-left:22px;padding-right:22px;}
}

.bean{
  flex:0 0 clamp(230px,74vw,286px);
  scroll-snap-align:start;
  display:flex;flex-direction:column;
}
.bean-shot{
  aspect-ratio:3/4;overflow:hidden;
  background:var(--sand);border:1px solid var(--hair);
  margin-bottom:18px;
}
.bean-shot img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--slow);}
.bean:hover .bean-shot img{transform:scale(1.035);}
.bean-shot--blank{
  background:linear-gradient(160deg,var(--sand),var(--bone-2));
}
.bean-roaster{
  font-size:10px;font-weight:500;
  letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;
  color:var(--jg);margin-bottom:8px;
}
.bean-name{margin-bottom:4px;}
.bean-tag{
  font-family:'Instrument Serif',Georgia,serif;
  font-style:italic;font-size:16px;line-height:1.35;
  color:var(--jg);margin-bottom:9px;
}
.bean-notes{
  font-size:14px;line-height:1.65;color:var(--ink-soft);
  margin-bottom:14px;
}
.bean-foot{
  margin-top:auto;padding-top:14px;
  border-top:1px solid var(--hair);
  display:flex;align-items:baseline;gap:10px;
}
.bean-price{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:21px;color:var(--ink);
}
.bean-weight{font-size:12px;color:var(--ink-mute);}
.bean-soon{
  font-size:10px;font-weight:500;
  letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;
  color:var(--jg);
}
.bean-out{
  font-size:10px;font-weight:500;
  letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;
  color:#8A3419;
}
.bean.is-out .bean-shot{opacity:.5;}
.bean.is-out .bean-name{color:var(--ink-soft);}

/* ----------------------------------------------------------------- menu -- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.mgrid{
  display:grid;gap:clamp(40px,5vw,64px) clamp(40px,6vw,88px);
  grid-template-columns:1fr;
}
@media(min-width:800px){ .mgrid{grid-template-columns:1fr 1fr;} }

.mgroup-title{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(23px,3vw,30px);line-height:1.1;
  padding-bottom:12px;border-bottom:1px solid var(--hair-strong);
}
.mgroup-note{
  margin-top:10px;font-size:13.5px;font-style:italic;
  font-family:'Instrument Serif',Georgia,serif;color:var(--jg);
}
.mlist{list-style:none;margin-top:18px;}

.mi{
  display:flex;align-items:baseline;gap:10px;
  padding:11px 0;
}
.mi + .mi{border-top:1px solid var(--hair);}
.mi-name{font-size:16px;color:var(--ink);flex:0 1 auto;}
.mi-desc{
  display:block;font-size:13px;line-height:1.5;
  color:var(--ink-mute);margin-top:3px;
}
/* the leader dots between name and price */
.mi-dots{
  flex:1 1 auto;min-width:14px;
  align-self:flex-end;margin-bottom:5px;
  border-bottom:1px dotted var(--hair-strong);
}
.mi-price{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:18px;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.mi-off{
  font-size:10px;font-weight:500;letter-spacing:.18em;text-indent:.18em;
  text-transform:uppercase;color:#8A3419;white-space:nowrap;
}
.mi.is-off .mi-name{color:var(--ink-mute);}

.menu-foot{
  margin-top:clamp(44px,5vw,64px);
  padding-top:22px;border-top:1px solid var(--hair);
  font-size:13px;color:var(--ink-mute);max-width:60ch;
}