/* =========================================================
   café mel fred — styles.css
   Palette sampled from their real brand (leafy green + warm
   cream) with a terracotta/berry accent from the photos.
   Display: Gloock (warm serif) · Wordmark: Fredoka (rounded)
   Text: Hanken Grotesk (clean warm sans)
   ========================================================= */

:root{
  /* greens */
  --green:        #5d7152;
  --green-deep:   #46563d;
  --green-soft:   #6f8560;
  --green-tint:   #e7ead9;   /* very pale leaf */
  /* creams */
  --cream:        #f7f1e6;
  --cream-2:      #f3ecdd;
  --cream-deep:   #ece2cf;
  --paper:        #fbf7ee;
  /* ink */
  --ink:          #2a2722;
  --ink-soft:     #514c43;
  --ink-faint:    #7d7668;
  /* accents */
  --terra:        #c2603f;   /* terracotta / berry-warm */
  --terra-soft:   #d98a5b;
  --berry:        #8e4a5c;    /* muted berry */
  --blue:         #3f4a6b;    /* blueberry, sparing */

  --maxw: 1180px;
  --gap: clamp(1rem, 3vw, 2.2rem);
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 18px 50px -28px rgba(42,39,34,.45);
  --shadow-soft: 0 10px 30px -20px rgba(42,39,34,.4);

  --ff-display: "Gloock", Georgia, "Times New Roman", serif;
  --ff-mark: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --ff-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--ff-text);
  color:var(--ink);
  background:var(--paper);
  line-height:1.62;
  font-size:clamp(1rem, .96rem + .25vw, 1.12rem);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html,body{ max-width:100%; }

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

h1,h2,h3{ margin:0; line-height:1.06; font-weight:400; }
p{ margin:0 0 1rem; }

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(1.1rem, 5vw, 2.4rem);
}

.skip-link{
  position:absolute; left:8px; top:-60px;
  background:var(--green); color:var(--cream);
  padding:.6rem 1rem; border-radius:10px; z-index:200;
  transition:top .2s var(--ease); font-weight:600; text-decoration:none;
}
.skip-link:focus{ top:8px; }

:focus-visible{
  outline:3px solid var(--terra);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- typography helpers ---------- */
.h2{
  font-family:var(--ff-display);
  font-size:clamp(2rem, 1.4rem + 3vw, 3.4rem);
  letter-spacing:-.01em;
  color:var(--green-deep);
}
.eyebrow,.kicker{
  font-family:var(--ff-mark);
  font-weight:600;
  text-transform:lowercase;
  letter-spacing:.02em;
  color:var(--green);
  font-size:.95rem;
  margin:0 0 .9rem;
  display:inline-flex; align-items:center; gap:.5rem;
}
.kicker{ color:var(--terra); }
.eyebrow .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--terra); display:inline-block;
  box-shadow:0 0 0 4px rgba(194,96,63,.18);
}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--green); --fg:var(--cream);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  font-family:var(--ff-mark);
  font-weight:600;
  font-size:1rem;
  text-decoration:none;
  padding:.82em 1.4em;
  border-radius:999px;
  background:var(--bg); color:var(--fg);
  border:2px solid var(--bg);
  cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease),
             box-shadow .25s var(--ease), color .25s var(--ease);
  box-shadow:var(--shadow-soft);
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary:hover{ background:var(--green-deep); border-color:var(--green-deep); }
.btn--ghost{
  background:transparent; color:var(--green-deep);
  border-color:var(--green); box-shadow:none;
}
.btn--ghost:hover{ background:var(--green); color:var(--cream); }
.btn--lg{ padding:.95em 1.7em; font-size:1.08rem; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid color-mix(in srgb, var(--green) 14%, transparent);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:68px;
}
.brand{ text-decoration:none; display:inline-flex; }

/* wordmark — round, lowercase, green+cream */
.brand-mark{
  display:grid;
  grid-template-columns:auto auto;
  grid-template-areas:
    "cafe cafe"
    "mel  fred";
  align-items:baseline;
  column-gap:.32em;
  line-height:.9;
  font-family:var(--ff-mark);
  font-weight:700;
  color:var(--green);
}
.brand-mark__cafe{
  grid-area:cafe;
  font-size:.52em; letter-spacing:.32em;
  font-weight:600; color:var(--green-soft);
  transform:translateY(2px);
}
.brand-mark__mel{ grid-area:mel; }
.brand-mark__fred{ grid-area:fred; }
.brand-mark__mel,.brand-mark__fred{ font-size:1.55em; }
.site-header .brand-mark{ font-size:15px; }

.site-nav{ display:flex; align-items:center; gap:clamp(.6rem,1.6vw,1.6rem); }
.site-nav a{
  text-decoration:none; color:var(--ink-soft);
  font-weight:600; font-size:.98rem;
  padding:.3rem .15rem; position:relative;
  transition:color .2s var(--ease);
}
.site-nav a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px;
  height:2px; background:var(--terra); border-radius:2px;
  transition:right .28s var(--ease);
}
.site-nav a:not(.nav-cta):hover{ color:var(--green-deep); }
.site-nav a:not(.nav-cta):hover::after{ right:0; }
.nav-cta{
  background:var(--green); color:var(--cream)!important;
  padding:.5rem 1rem!important; border-radius:999px;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.nav-cta:hover{ background:var(--green-deep); transform:translateY(-1px); }
.site-nav a:first-child,.site-nav a:nth-child(2),
.site-nav a:nth-child(3),.site-nav a:nth-child(4){ display:none; }

@media (min-width:760px){
  .site-nav a{ display:inline-block!important; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; padding-top:clamp(2.4rem,6vw,4.5rem); }
.hero__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 55% at 78% 8%, rgba(111,133,96,.22), transparent 60%),
    radial-gradient(50% 50% at 8% 30%, rgba(194,96,63,.10), transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--paper) 70%);
}
.hero__grid{
  display:grid; gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:1fr;
  align-items:center;
  padding-bottom:clamp(2rem,5vw,3.4rem);
}
.hero__title{
  font-family:var(--ff-display);
  font-size:clamp(2.6rem, 1.7rem + 5.2vw, 5rem);
  letter-spacing:-.015em;
  color:var(--green-deep);
  margin:.2rem 0 1.1rem;
  text-wrap:balance;
}
.hero__title .ink{
  display:inline-block;
  color:var(--terra);
  position:relative;
}
.hero__title .ink::after{
  content:""; position:absolute; left:-.04em; right:-.04em; bottom:.04em;
  height:.42em; z-index:-1;
  background:linear-gradient(90deg, rgba(217,138,91,.32), rgba(194,96,63,.20));
  border-radius:.3em;
  transform:rotate(-1deg);
}
.hero__lede{
  font-size:clamp(1.05rem,1rem + .4vw,1.25rem);
  color:var(--ink-soft);
  max-width:46ch;
  margin-bottom:1.6rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.8rem; }

.hero__hours{
  list-style:none; margin:0; padding:0;
  display:flex; gap:.6rem; flex-wrap:wrap;
}
.hero__hours li{
  display:flex; flex-direction:column; align-items:center;
  background:var(--cream-2);
  border:1px solid color-mix(in srgb, var(--green) 18%, transparent);
  border-radius:var(--radius-sm);
  padding:.55rem 1.05rem; min-width:74px;
  box-shadow:var(--shadow-soft);
}
.hero__hours .d{
  font-family:var(--ff-mark); font-weight:600;
  color:var(--terra); font-size:.85rem; letter-spacing:.04em;
}
.hero__hours .t{
  font-family:var(--ff-display); color:var(--green-deep);
  font-size:1.15rem; line-height:1.1;
}

/* hero media */
.hero__media{ position:relative; justify-self:center; width:100%; max-width:460px; }
.hero__photo{
  margin:0; border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  border:6px solid var(--cream-2);
  rotate:1.4deg;
}
.hero__photo img{ width:100%; aspect-ratio:640/853; object-fit:cover; }
.hero__badge{
  position:absolute; left:-10px; bottom:-16px;
  width:104px; height:104px; border-radius:50%;
  background:var(--terra); color:var(--cream);
  display:grid; place-content:center; text-align:center;
  font-family:var(--ff-mark); line-height:1;
  box-shadow:var(--shadow);
  rotate:-8deg;
  border:3px solid var(--cream);
}
.hero__badge-top{ font-size:.72rem; letter-spacing:.16em; opacity:.9; }
.hero__badge-big{ font-size:1.7rem; font-weight:700; margin:.1rem 0; }
.hero__badge-bot{ font-size:.95rem; font-weight:600; }

/* marquee */
.marquee{
  overflow:hidden; white-space:nowrap;
  background:var(--green);
  color:var(--cream);
  border-block:1px solid var(--green-deep);
  padding:.7rem 0;
}
.marquee__track{
  display:inline-flex; align-items:center; gap:1.4rem;
  font-family:var(--ff-mark); font-weight:500;
  font-size:1.05rem; letter-spacing:.02em;
  animation:marquee 30s linear infinite;
  will-change:transform;
}
.marquee__track .sep{ color:var(--terra-soft); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =========================================================
   SECTION HEADINGS
   ========================================================= */
.section-head{ max-width:54ch; margin:0 auto clamp(2rem,4vw,3rem); text-align:center; }
.section-head__lede{ color:var(--ink-soft); font-size:1.08rem; }

/* =========================================================
   STORY
   ========================================================= */
.story{ padding:clamp(3.2rem,7vw,6rem) 0; }
.story__grid{
  display:grid; gap:clamp(1.6rem,4vw,3.4rem);
  grid-template-columns:1fr; align-items:center;
}
.story__copy p{ color:var(--ink-soft); max-width:48ch; }
.story__chips{
  list-style:none; margin:1.4rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.55rem;
}
.story__chips li{
  font-family:var(--ff-mark); font-weight:500; font-size:.92rem;
  background:var(--green-tint); color:var(--green-deep);
  padding:.4rem .9rem; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--green) 22%, transparent);
}

/* photo frames */
.frame{
  margin:0; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); border:6px solid var(--cream-2);
  background:var(--cream-2);
}
.frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.frame--tall img{ aspect-ratio:4/5; }
.story__media .frame{ rotate:-1.5deg; max-width:480px; }

/* =========================================================
   SERVE / KARTE
   ========================================================= */
.serve{
  padding:clamp(3.2rem,7vw,6rem) 0;
  background:
    linear-gradient(180deg, transparent, rgba(231,234,217,.5) 12%, rgba(231,234,217,.5) 88%, transparent),
    var(--paper);
}
.serve__grid{
  display:grid; gap:clamp(1rem,2.4vw,1.6rem);
  grid-template-columns:1fr;
}
.serve-card{
  background:var(--cream);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  border:1px solid color-mix(in srgb, var(--green) 12%, transparent);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.serve-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.serve-card__img{ overflow:hidden; aspect-ratio:4/3; }
.serve-card__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease);
}
.serve-card:hover .serve-card__img img{ transform:scale(1.06); }
.serve-card__body{ padding:1.2rem 1.3rem 1.5rem; }
.serve-card__body h3{
  font-family:var(--ff-display);
  font-size:1.5rem; color:var(--green-deep);
  margin:0 0 .4rem;
}
.serve-card__body p{ color:var(--ink-soft); margin:0; font-size:1rem; }
.serve__note{
  text-align:center; color:var(--ink-faint);
  margin:clamp(1.6rem,3vw,2.4rem) auto 0; max-width:50ch;
}
.serve__note a{ color:var(--terra); font-weight:600; text-underline-offset:3px; }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery{ padding:clamp(3.2rem,7vw,6rem) 0 clamp(2.4rem,5vw,4rem); }
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(.7rem,1.8vw,1.1rem);
}
.gtile{
  margin:0; border-radius:var(--radius-sm);
  overflow:hidden; position:relative;
  box-shadow:var(--shadow-soft);
  border:4px solid var(--cream-2);
  background:var(--cream-2);
}
.gtile img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; transition:transform .6s var(--ease); }
.gtile--tall{ grid-row:span 2; }
.gtile--tall img{ aspect-ratio:9/16; }
.gtile:hover img{ transform:scale(1.05); }
.gtile__cap{
  position:absolute; left:10px; bottom:10px;
  background:color-mix(in srgb, var(--ink) 70%, transparent);
  color:var(--cream);
  font-family:var(--ff-mark); font-weight:500; font-size:.82rem;
  padding:.3rem .7rem; border-radius:999px;
  backdrop-filter:blur(4px);
}

/* =========================================================
   TEAM
   ========================================================= */
.team{
  padding:clamp(3.2rem,7vw,6rem) 0;
  background:
    radial-gradient(70% 60% at 90% 10%, rgba(111,133,96,.16), transparent 60%),
    var(--cream-2);
}
.team__grid{
  display:grid; gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:1fr; align-items:center;
}
.team__copy p{ color:var(--ink-soft); max-width:44ch; margin-bottom:1.6rem; }
.team__media{
  display:grid; grid-template-columns:1.25fr .9fr;
  gap:clamp(.7rem,2vw,1.2rem); align-items:start;
}
.team__media .frame img{ aspect-ratio:9/16; }
.team__media .frame{ rotate:1.2deg; }
.team__media .frame--small{ rotate:-2deg; margin-top:1.6rem; }

/* =========================================================
   VISIT
   ========================================================= */
.visit{ padding:clamp(3.2rem,7vw,6rem) 0; }
.visit__grid{
  display:grid; gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:1fr; align-items:center;
}
.visit__place{
  font-family:var(--ff-mark); font-weight:600;
  color:var(--green-deep); font-size:1.15rem;
  display:flex; align-items:center; gap:.5rem; margin-bottom:.2rem;
}
.visit__pin{ color:var(--terra); font-size:1.3rem; }
.visit__addr{ color:var(--ink-faint); font-size:1rem; margin-bottom:1.4rem; }

.hours{ margin:0 0 1.4rem; padding:0; }
.hours > div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.7rem .2rem;
  border-bottom:1px dashed color-mix(in srgb, var(--green) 26%, transparent);
}
.hours dt{
  font-family:var(--ff-mark); font-weight:600;
  color:var(--green-deep);
}
.hours dd{ margin:0; color:var(--ink-soft); }
.hours__off dt,.hours__off dd{ color:var(--ink-faint); font-style:italic; }

.visit__hint{ color:var(--ink-soft); max-width:46ch; margin-bottom:1.6rem; }
.visit__media .frame--tall img{ aspect-ratio:4/5; }
.visit__media .frame{ rotate:-1.4deg; max-width:480px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--green-deep);
  color:var(--cream-2);
  padding:clamp(2.6rem,5vw,4rem) 0 1.6rem;
}
.footer-inner{
  display:grid; gap:2rem;
  grid-template-columns:1fr;
}
.brand-mark--footer{ font-size:18px; color:var(--cream); }
.brand-mark--footer .brand-mark__cafe{ color:color-mix(in srgb,var(--cream) 70%, transparent); }
.footer-tag{ color:color-mix(in srgb,var(--cream) 78%, transparent); max-width:40ch; margin-top:1rem; }

.footer-cols{ display:flex; flex-wrap:wrap; gap:2.4rem; }
.footer-col h2{
  font-family:var(--ff-mark); font-weight:600;
  font-size:1rem; color:var(--terra-soft);
  margin:0 0 .7rem; letter-spacing:.02em;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.footer-col li{ color:color-mix(in srgb,var(--cream) 82%, transparent); }
.footer-col li span{
  display:inline-block; min-width:2.2em;
  color:var(--terra-soft); font-weight:600;
}
.footer-col a{ color:var(--cream); text-underline-offset:3px; }
.footer-col a:hover{ color:var(--terra-soft); }

.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem;
  margin-top:clamp(1.8rem,4vw,2.8rem);
  padding-top:1.4rem;
  border-top:1px solid color-mix(in srgb,var(--cream) 18%, transparent);
  font-size:.9rem;
  color:color-mix(in srgb,var(--cream) 70%, transparent);
}
.footer-bottom p{ margin:0; }

/* =========================================================
   FLOATING PUP (signature touch — the café dog)
   ========================================================= */
.pup{
  position:fixed; right:16px; bottom:16px; z-index:90;
  filter:drop-shadow(0 8px 14px rgba(42,39,34,.3));
  cursor:pointer;
  animation:pup-in .6s var(--ease) both;
  transition:transform .25s var(--ease);
}
.pup:hover{ transform:translateY(-4px) rotate(-4deg); }
.pup.wag svg{ animation:wag .5s ease-in-out 2; transform-origin:50% 80%; }
@keyframes pup-in{ from{ transform:translateY(20px) scale(.6); opacity:0; } }
@keyframes wag{ 0%,100%{ rotate:0deg; } 25%{ rotate:-6deg; } 75%{ rotate:6deg; } }

/* =========================================================
   REVEAL ANIMATIONS
   ========================================================= */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee__track{ animation:none; }
  .pup{ animation:none; }
  .btn,.serve-card,.gtile img,.serve-card__img img{ transition:none; }
  *{ scroll-behavior:auto; }
}
/* no-anim escape hatch (?noanim) */
.noanim .reveal{ opacity:1!important; transform:none!important; transition:none!important; }
.noanim .marquee__track{ animation:none!important; }
.noanim .pup{ animation:none!important; }
.noanim *{ transition:none!important; }

/* =========================================================
   RESPONSIVE — tablet & up
   ========================================================= */
@media (min-width:680px){
  .serve__grid{ grid-template-columns:repeat(2,1fr); }
  .gallery__grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; }
}

@media (min-width:880px){
  .hero__grid{ grid-template-columns:1.05fr .95fr; }
  .hero__media{ justify-self:end; max-width:480px; }
  .story__grid{ grid-template-columns:.92fr 1.08fr; }
  .story__media{ order:-1; }
  .serve__grid{ grid-template-columns:repeat(4,1fr); }
  .team__grid{ grid-template-columns:1fr 1.05fr; }
  .visit__grid{ grid-template-columns:1.05fr .95fr; }
  .visit__media{ justify-self:end; }
  .footer-inner{ grid-template-columns:1.2fr 1fr; align-items:start; }
  .gallery__grid{
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:minmax(0,1fr);
  }
}

@media (min-width:1040px){
  .section-head{ text-align:center; }
}