/* Dèlf Café — built by Cache Nerds */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --shell:#FAF7F1;      /* off-white paper */
  --sand:#E9E1D3;       /* beige ground */
  --sand-deep:#DCD2C0;  /* beige shadow */
  --shade:#1B2822;      /* palm shade */
  --espresso:#33241C;   /* deep coffee */
  --cocoa:#6B4E3A;      /* mid brown — actions */
  --cocoa-lt:#8A6A4F;   /* light brown — labels */
  --frond:#718C6E;      /* leaf green */
  --sun:#E0A23C;        /* late light */
  --ink:#231F1B;        /* body text */

  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --script:"Allura",cursive;

  --rule:1px solid rgba(107,78,58,.24);
  --rule-dark:1px solid rgba(233,225,211,.18);
  --pad:clamp(20px,5vw,64px);
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;border-radius:0 !important;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--sand);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:15px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
li{list-style:none}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px}

/* accessibility helpers */
.screen-reader-text{
  position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.skip-link:focus{
  position:fixed;top:10px;left:10px;z-index:999;width:auto;height:auto;clip:auto;
  background:var(--shell);color:var(--ink);padding:12px 18px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
}

/* ============================================================
   TYPE
   ============================================================ */
.eyebrow{
  font-family:var(--body);font-size:10px;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:var(--cocoa-lt);
}
.band--dark .eyebrow,.band--shade .eyebrow,.foot .eyebrow,.hero .eyebrow{color:rgba(233,225,211,.6)}
.display{
  font-family:var(--display);font-weight:300;line-height:1.06;
  letter-spacing:.14em;text-transform:uppercase;
}
.d-xl{font-size:clamp(30px,7.6vw,62px)}
.d-lg{font-size:clamp(28px,7.5vw,58px)}
.d-md{font-size:clamp(22px,5.4vw,34px)}
.script{font-family:var(--script);text-transform:none;letter-spacing:0;color:var(--sun);font-size:1.5em}
.lede{max-width:48ch;font-size:14.5px;line-height:1.85;opacity:.8}
.hair{width:44px;height:1px;background:currentColor;opacity:.45}
.blockhead{display:block;margin-bottom:14px}

/* ============================================================
   LAYOUT
   ============================================================ */
.band{padding:clamp(60px,12vw,132px) var(--pad);position:relative}
.band--tight{padding-top:clamp(40px,8vw,72px);padding-bottom:clamp(40px,8vw,72px)}
.band--nogap{padding-top:0}
.band--dark{background:var(--espresso);color:var(--sand)}
.band--shade{background:var(--shade);color:var(--sand)}
.band--shell{background:var(--shell)}
.wrap{max-width:1180px;margin:0 auto}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px var(--pad);
  border-bottom:1px solid transparent;color:var(--sand);
  transition:background .45s ease,border-color .45s ease,color .45s ease;
}
.hdr.is-stuck{background:var(--shell);color:var(--ink);border-bottom:var(--rule)}
.hdr__mark{font-family:var(--display);font-size:15px;letter-spacing:.42em;text-transform:uppercase;white-space:nowrap}
.hdr__mark span{color:var(--sun)}
.hdr__right{display:flex;align-items:center;gap:14px}
.hdr__order{
  background:var(--cocoa);color:var(--shell);
  padding:11px 18px;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  border:1px solid var(--cocoa);transition:background .35s ease,border-color .35s ease;
}
.hdr__order:hover{background:var(--espresso);border-color:var(--espresso)}
.burger{display:flex;flex-direction:column;gap:5px;padding:8px 0 8px 4px}
.burger i{display:block;width:22px;height:1px;background:currentColor}

/* admin bar offset */
body.admin-bar .hdr{top:32px}
@media screen and (max-width:782px){body.admin-bar .hdr{top:46px}}

/* ============================================================
   NAV OVERLAY
   ============================================================ */
.nav{
  position:fixed;inset:0;z-index:70;background:var(--espresso);color:var(--sand);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);
  transform:translateY(-100%);transition:transform .6s cubic-bezier(.76,0,.24,1);
}
.nav.is-open{transform:translateY(0)}
.nav__close{position:absolute;top:16px;right:var(--pad);font-size:11px;letter-spacing:.3em;text-transform:uppercase}
.nav__list li a,.nav .nav__list a{
  display:block;font-family:var(--display);font-size:clamp(24px,6.4vw,42px);
  letter-spacing:.16em;text-transform:uppercase;font-weight:300;
  padding:13px 0;border-bottom:var(--rule-dark);
  transition:padding-left .35s ease,color .35s ease;
}
.nav__list li a:hover{padding-left:14px;color:var(--sun)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  padding:110px var(--pad) clamp(48px,10vw,88px);
  color:var(--sand);isolation:isolate;background:#1E2A22;
}
.hero__bg{position:absolute;inset:0}
.hero__bg picture,.hero__bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,13,9,.62) 0%,rgba(18,13,9,.42) 40%,rgba(18,13,9,.88) 100%)}
.hero__inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%}
.hero h1{margin:20px 0 0}
.hero .lede{opacity:.85;max-width:44ch}
.hero__tag{
  font-family:var(--script);color:var(--sun);
  font-size:clamp(26px,6vw,40px);line-height:1;display:block;margin:18px 0 20px;
}
.hero__cta{display:flex;flex-direction:column;gap:10px;margin-top:30px;max-width:440px}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.66;
}

/* palm light */
.dapple{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.dapple svg{position:absolute;opacity:.14;color:#000}
.dapple .frond-a{top:-14%;left:-18%;width:78%;transform-origin:top left;animation:delf-sway 26s ease-in-out infinite}
.dapple .frond-b{bottom:-20%;right:-22%;width:88%;transform-origin:bottom right;animation:delf-sway 34s ease-in-out infinite reverse}
@keyframes delf-sway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(3.2deg) translate3d(1.5%,1%,0)}}
.glow{
  position:absolute;width:78vw;height:78vw;max-width:760px;max-height:760px;
  top:-24%;right:-22%;pointer-events:none;
  background:radial-gradient(circle,rgba(224,162,60,.4) 0%,rgba(224,162,60,.12) 45%,transparent 68%);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:block;text-align:center;padding:15px 20px;
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.btn--order{background:var(--cocoa);color:var(--shell);border:1px solid var(--cocoa)}
.btn--order:hover{background:var(--sun);border-color:var(--sun);color:var(--espresso)}
.btn--ghost{border:1px solid rgba(233,225,211,.5);color:var(--sand)}
.btn--ghost:hover{background:rgba(233,225,211,.12);border-color:var(--sand)}
.btn--ink{border:1px solid rgba(107,78,58,.4);color:var(--ink)}
.btn--ink:hover{background:var(--espresso);border-color:var(--espresso);color:var(--sand)}
.arrowlink{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  padding-bottom:6px;border-bottom:1px solid currentColor;
}
.arrowlink i{display:block;width:16px;height:1px;background:currentColor;transition:width .35s ease}
.arrowlink:hover i{width:28px}

/* ============================================================
   PHOTOS
   ============================================================ */
.shot{position:relative;overflow:hidden;background:var(--sand-deep)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot::after{content:"";position:absolute;inset:0;background:rgba(107,78,58,.07);pointer-events:none}

/* ============================================================
   FEATURE BLOCKS
   ============================================================ */
.feature{border-top:var(--rule)}
.feature__shot{aspect-ratio:4/3}
.feature__body{padding:clamp(28px,6vw,44px) var(--pad) clamp(40px,8vw,64px)}
.feature__body .eyebrow{display:block;margin-bottom:16px}
.feature__title{margin-bottom:16px}

/* ============================================================
   FILTERABLE MENU
   ============================================================ */
.menu__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px}
.filters{
  display:flex;gap:2px;margin:30px 0 0;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;
}
.filters::-webkit-scrollbar{display:none}
.fchip{
  flex:0 0 auto;padding:11px 18px;border:1px solid rgba(107,78,58,.3);
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.fchip:hover{border-color:var(--cocoa)}
.fchip.is-on{background:var(--cocoa);border-color:var(--cocoa);color:var(--shell)}
.mgroup{margin-top:46px}
.mgroup__title{display:flex;align-items:baseline;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--cocoa)}
.mgroup__title h3{font-family:var(--display);font-size:20px;font-weight:400;letter-spacing:.2em;text-transform:uppercase}
.mgroup__title span{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--cocoa-lt);white-space:nowrap}
.mgroup__note{
  margin-top:10px;font-size:11px;letter-spacing:.06em;
  color:var(--cocoa-lt);font-style:italic;
}
.mitem{display:flex;align-items:baseline;gap:14px;padding:16px 0;border-bottom:var(--rule)}
.mitem__main{flex:1;min-width:0}
.mitem__name{font-size:14.5px;font-weight:400;letter-spacing:.02em}
.mitem__desc{font-size:12.5px;line-height:1.6;opacity:.66;margin-top:3px}
.mitem__size{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cocoa-lt);margin-top:5px}
.mitem__price{font-size:13px;color:var(--cocoa);white-space:nowrap;letter-spacing:.06em}
.mitem__order{
  flex:0 0 auto;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  padding:8px 12px;border:1px solid rgba(107,78,58,.34);color:var(--cocoa);
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.mitem__order:hover{background:var(--cocoa);border-color:var(--cocoa);color:var(--shell)}
.menu__foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.menu__foot .btn{flex:1 1 240px}

/* printed menu lightbox */
.lb{
  position:fixed;inset:0;z-index:80;background:rgba(27,20,15,.95);
  display:none;align-items:center;justify-content:center;padding:56px var(--pad) var(--pad);
  overflow:auto;
}
.lb.is-open{display:flex}
.lb__inner{max-width:1400px;width:100%}
.lb__inner img{width:100%;height:auto;max-height:82vh;object-fit:contain}
.lb__close{position:fixed;top:18px;right:var(--pad);color:var(--sand);font-size:11px;letter-spacing:.3em;text-transform:uppercase;z-index:2}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{text-align:center}
.manifesto .hair{margin:0 auto 34px}
.manifesto__sub{margin-top:26px;opacity:.74}
.manifesto__meta{margin-top:34px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;opacity:.55}

/* ============================================================
   GALLERY
   ============================================================ */
.gal__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:var(--rule)}
.gal__rail{display:flex;gap:2px;margin-top:2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gal__rail::-webkit-scrollbar{display:none}
.gal__item{flex:0 0 62%;max-width:340px;aspect-ratio:3/4;scroll-snap-align:start}
.gal__nav{display:flex;gap:2px;margin-top:20px}
.gal__nav button{width:44px;height:44px;border:var(--rule);display:grid;place-items:center;transition:background .3s ease,color .3s ease}
.gal__nav button:hover{background:var(--espresso);color:var(--sand)}

/* ============================================================
   POSTCARD
   ============================================================ */
.postcard{background:var(--shell);padding:14px 14px 18px;max-width:400px;margin:0 auto;box-shadow:0 30px 60px -30px rgba(20,14,10,.6)}
.postcard__shot{aspect-ratio:1/1}
.postcard__cap{margin-top:14px;text-align:center;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--cocoa-lt)}

/* ============================================================
   VISIT
   ============================================================ */
.visit__title{margin:18px 0 40px}
.visit__addr{font-size:14px;line-height:2}
.row{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:var(--rule-dark);font-size:13px}
.row span:last-child{opacity:.66}
.list{margin-top:14px}
.list li{display:flex;gap:12px;padding:9px 0;border-bottom:var(--rule-dark);font-size:13px;opacity:.84}
.list li::before{content:"";flex:0 0 5px;height:5px;margin-top:9px;background:var(--sun)}

/* ============================================================
   CATERING
   ============================================================ */
.catering__copy{margin-top:24px}
.catering__btn{margin-top:34px;max-width:340px}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--espresso);color:var(--sand);padding:clamp(48px,9vw,80px) var(--pad) 26px}
.foot__mark{font-family:var(--display);font-size:17px;letter-spacing:.42em;text-transform:uppercase}
.foot__cols{display:grid;gap:36px;margin-top:44px}
.foot a{display:block;padding:7px 0;font-size:13px;opacity:.78;transition:opacity .3s ease,color .3s ease}
.foot a:hover{opacity:1;color:var(--sun)}
.foot__base{margin-top:46px;padding-top:18px;border-top:var(--rule-dark);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.45}

/* ============================================================
   STICKY ORDER BAR
   ============================================================ */
.orderbar{
  position:fixed;left:0;right:0;bottom:0;z-index:55;
  background:var(--cocoa);color:var(--shell);padding:15px 20px;text-align:center;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  transform:translateY(100%);transition:transform .45s ease;
}
.orderbar.is-up{transform:translateY(0)}

/* ============================================================
   POSTS & PAGES
   ============================================================ */
.entry{max-width:70ch;margin:0 auto;padding-top:60px}
.entry__title{margin-bottom:26px}
.entry__content p{margin-bottom:1.2em}
.entry__content h2,.entry__content h3{font-family:var(--display);letter-spacing:.08em;margin:1.6em 0 .5em}
.entry__content a{border-bottom:1px solid var(--cocoa)}
.entry__content ul,.entry__content ol{margin:0 0 1.2em 1.2em}
.entry__content li{list-style:disc;margin-bottom:.3em}
.pagination{margin-top:40px;font-size:11px;letter-spacing:.2em;text-transform:uppercase}

/* WordPress core alignment classes */
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption-text{font-size:12px;color:var(--cocoa-lt);margin-top:6px}
.sticky,.gallery-caption,.bypostauthor{display:block}

/* ============================================================
   REVEAL
   ============================================================ */
.rise{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.rise.is-in{opacity:1;transform:none}

/* ============================================================
   DESKTOP
   ============================================================ */
@media (min-width:860px){
  body{font-size:16px}
  .feature{display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .feature--flip .feature__shot{order:2}
  .feature__shot{aspect-ratio:1/1;height:100%}
  .feature__body{padding:clamp(48px,6vw,88px)}
  .hero{align-items:center}
  .hero__cta{flex-direction:row;max-width:580px}
  .hero__cta .btn{flex:1}
  .gal__item{flex:0 0 26%}
  .foot__cols{grid-template-columns:repeat(3,1fr);gap:48px}
  .info{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:56px;align-items:start}
  .mlist{columns:2;column-gap:56px}
  .mgroup{break-inside:avoid;margin-top:0;margin-bottom:44px;display:inline-block;width:100%}
  .orderbar{display:none}
}
@media (max-width:859px){body{padding-bottom:52px}}

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

/* ---------- FAQ ---------- */
.faq{margin-top:34px;border-top:var(--rule)}
.faq__item{border-bottom:var(--rule)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 0;cursor:pointer;list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-size:20px;color:var(--cocoa);line-height:1}
.faq__item[open] summary::after{content:"\2013"}
.faq__item summary h3{
  font-family:var(--body);font-size:14.5px;font-weight:400;
  letter-spacing:.02em;text-transform:none;
}
.faq__item p{padding:0 0 22px;font-size:14px;line-height:1.8;opacity:.78;max-width:68ch}
/* ---------- breadcrumbs ---------- */
.crumbs{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--cocoa-lt)}
.crumbs a{border-bottom:1px solid rgba(107,78,58,.34)}
.crumbs span[aria-hidden]{margin:0 8px;opacity:.5}

/* ============================================================
   MENU SECTIONS — Coffee Bar / Juice Bar / Kitchen
   ============================================================ */
.menuintro{padding-bottom:0}
.menujump{display:flex;flex-wrap:wrap;gap:2px;margin-top:28px}
.menujump a{
  flex:1 1 auto;text-align:center;padding:14px 16px;
  border:1px solid rgba(107,78,58,.3);
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.menujump a:hover{background:var(--cocoa);border-color:var(--cocoa);color:var(--shell)}

.menusec{scroll-margin-top:70px}
.menusec .feature{border-top:var(--rule)}
.menusec__list{padding-top:clamp(30px,6vw,52px);padding-bottom:clamp(40px,8vw,72px)}
.menusec__list .filters{margin-top:0}
/* first group in a section sits right under its own chip row */
.menusec__list .mlist>.mgroup:first-child{margin-top:38px}

/* ============================================================
   PHOTO CAROUSEL — section banners
   ============================================================ */
.carousel{position:relative;overflow:hidden}
.carousel::after{content:none} /* the warm wash lives on each slide instead */
.carousel__track{
  display:flex;height:100%;width:100%;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__slide{
  position:relative;flex:0 0 100%;height:100%;scroll-snap-align:center;
  margin:0;background:var(--sand-deep);
}
.carousel__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.carousel__slide::after{
  content:"";position:absolute;inset:0;
  background:rgba(107,78,58,.07);pointer-events:none;
}
.carousel__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;display:grid;place-items:center;
  background:rgba(250,247,241,.9);color:var(--espresso);
  border:1px solid rgba(107,78,58,.2);
  opacity:0;transition:opacity .3s ease,background .3s ease;
}
.carousel__arrow--prev{left:12px}
.carousel__arrow--next{right:12px}
.carousel:hover .carousel__arrow,.carousel__arrow:focus-visible{opacity:1}
.carousel__arrow:hover{background:var(--shell)}
.carousel__arrow[disabled]{opacity:0 !important;pointer-events:none}
.carousel__dots{
  position:absolute;left:0;right:0;bottom:14px;z-index:3;
  display:flex;justify-content:center;gap:6px;
}
.carousel__dot{
  width:22px;height:3px;background:rgba(250,247,241,.45);
  transition:background .3s ease,width .3s ease;
}
.carousel__dot.is-on{background:var(--shell);width:34px}
.carousel__count{
  position:absolute;top:12px;right:12px;z-index:3;
  padding:5px 9px;background:rgba(27,20,15,.55);color:var(--shell);
  font-size:9px;letter-spacing:.2em;
}
/* touch devices: arrows are pointless, the track swipes */
@media (hover:none){
  .carousel__arrow{display:none}
}