/* Ember & Oak — cozy coffee shop */

@font-face { /* fallback noop, keep system fonts only */ }

:root{
  --cream:#f7ede0;
  --oat:#efe1cd;
  --board:#e7d5b8;
  --espresso:#2c1c12;
  --coffee:#5c3b26;
  --coffee-light:#8a5f3f;
  --ember:#d8672c;
  --ember-dark:#b04f1f;
  --cream-text:#fbf3e7;
  --line:rgba(44,28,18,0.12);
  --mustard:#e0a936;
  --mustard-dark:#b9821e;
  --pine:#2c463b;
  --pine-light:#3f5f50;
  --magenta:#cf4577;
  --magenta-dark:#a9315d;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Courier New",monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;overflow-x:hidden;width:100%;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--espresso);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* paper grain, zine-photocopy texture over the whole site */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:999;
  pointer-events:none;
  opacity:0.5;
  mix-blend-mode:multiply;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  background-size:180px 180px;
}
.sticker{
  display:inline-flex;
  align-items:center;
  gap:0.35em;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:700;
  padding:0.4em 0.85em;
  border:1.5px dashed currentColor;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
}
.squiggle{display:block;height:20px;margin:0.2em 0 0.8em;overflow:visible;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{
  font-family:var(--serif);
  font-weight:700;
  margin:0 0 0.5em;
  color:var(--espresso);
  letter-spacing:0.01em;
}
p{margin:0 0 1em;}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.4em;
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ember-dark);
  font-weight:700;
  margin-bottom:0.9em;
  padding:0.35em 0.9em;
  border:1.5px dashed var(--ember-dark);
  border-radius:999px;
  transform:rotate(-2deg);
  background:rgba(216,103,44,0.07);
}
.eyebrow.tag-pine{color:var(--pine);border-color:var(--pine);background:rgba(44,70,59,0.07);transform:rotate(1.5deg);}
.eyebrow.tag-magenta{color:var(--magenta-dark);border-color:var(--magenta-dark);background:rgba(207,69,119,0.08);transform:rotate(-1.5deg);}
.eyebrow.tag-mustard{color:var(--mustard-dark);border-color:var(--mustard-dark);background:rgba(224,169,54,0.12);transform:rotate(2deg);}
.section-inner{
  max-width:1080px;
  margin:0 auto;
  padding:5rem 1.75rem;
}
.btn{
  display:inline-block;
  padding:0.85rem 1.9rem;
  border-radius:2px;
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:0.03em;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
  background:var(--ember);
  color:var(--cream-text);
  border-color:var(--ember);
}
.btn-primary:hover{background:var(--ember-dark);border-color:var(--ember-dark);}
.btn-ghost{
  background:transparent;
  color:var(--cream-text);
  border-color:rgba(251,243,231,0.55);
}
.btn-ghost:hover{background:rgba(251,243,231,0.12);}

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(44,28,18,0.96);
  border-bottom:1px solid rgba(216,103,44,0.35);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  padding:1rem 1.75rem;
  row-gap:0.5rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:0.6rem;
  color:var(--cream-text);
}
.brand svg{width:32px;height:32px;flex:none;}
.brand-name{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:0.02em;
  color:var(--cream-text);
}
.mtl-stamp{
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--mustard);
  border:1.5px dashed var(--mustard);
  border-radius:999px;
  padding:0.15em 0.6em;
  transform:rotate(-4deg);
  margin-left:0.3rem;
}
@media (max-width:520px){.mtl-stamp{display:none;}}
.site-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:1.75rem;
  row-gap:0.4rem;
}
.site-nav a{
  color:var(--oat);
  font-size:0.85rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:600;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.site-nav a:hover{border-color:var(--ember);color:var(--cream-text);}

@media (max-width:640px){
  .site-header{padding:0.85rem 1.1rem;}
  .site-nav{gap:1rem;width:100%;justify-content:center;}
  .brand-name{font-size:1.05rem;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(216,103,44,0.35), transparent 55%),
    radial-gradient(circle, rgba(251,243,231,0.12) 1.5px, transparent 1.6px),
    linear-gradient(160deg, var(--espresso) 0%, var(--coffee) 60%, #4a2e1c 100%);
  background-size:auto, 16px 16px, auto;
  color:var(--cream-text);
  overflow:hidden;
}
.hero-inner{
  max-width:1080px;
  margin:0 auto;
  padding:6.5rem 1.75rem 6rem;
  position:relative;
  z-index:2;
}
.hero .eyebrow{color:#f0b184;border-color:#f0b184;background:rgba(240,177,132,0.1);}
.hero h1{
  color:var(--cream-text);
  font-size:clamp(2.4rem,6vw,3.7rem);
  line-height:1.08;
  max-width:16ch;
}
.hero-stickers{
  display:flex;
  flex-wrap:wrap;
  gap:0.8rem;
  margin-bottom:1.4rem;
}
.hero-stickers .sticker:nth-child(1){color:var(--mustard);border-color:var(--mustard);transform:rotate(-3deg);}
.hero-stickers .sticker:nth-child(2){color:#ef91b5;border-color:#ef91b5;transform:rotate(2deg);}
.hero-stickers .sticker:nth-child(3){color:#8fbfa8;border-color:#8fbfa8;transform:rotate(-1.5deg);}
.hero p.lede{
  max-width:42ch;
  font-size:1.1rem;
  color:rgba(251,243,231,0.86);
}
.hero-ctas{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1.8rem;
}
.hero-steam{
  position:absolute;
  right:6%;
  bottom:0;
  width:220px;
  opacity:0.35;
  z-index:1;
}
@media (max-width:720px){
  .hero-steam{display:none;}
}

/* ---------- About strip ---------- */
.about{
  background:var(--oat);
  border-bottom:1px solid var(--line);
}
.about .section-inner{padding-top:4.5rem;padding-bottom:4.5rem;}
.about-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:3rem;
  align-items:start;
}
.about h2{font-size:2rem;}
.about-copy p{font-size:1.02rem;color:#3a271a;}
.feature-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:1.4rem;
}
.feature-list li{
  display:flex;
  gap:0.9rem;
  align-items:flex-start;
}
.feature-list svg{width:26px;height:26px;flex:none;color:var(--ember-dark);margin-top:0.15rem;}
.feature-list h3{font-size:1.02rem;margin-bottom:0.15em;}
.feature-list p{font-size:0.93rem;color:#4a3423;margin-bottom:0;}
@media (max-width:760px){
  .about-grid{grid-template-columns:1fr;gap:2.2rem;}
}

/* ---------- Menu ---------- */
.menu{background:var(--cream);}
.menu .section-header{text-align:center;max-width:640px;margin:0 auto 3rem;}
.menu h2{font-size:2.1rem;}
.menu-note{color:#6a4b33;font-size:0.95rem;}
.menu-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2rem;
}
.menu-card{
  position:relative;
  background:var(--board);
  background-image:radial-gradient(rgba(92,59,38,0.07) 1px, transparent 1.4px);
  background-size:14px 14px;
  border:1px solid rgba(92,59,38,0.25);
  border-radius:6px;
  padding:2.2rem 1.9rem 2rem;
  box-shadow:0 10px 24px -14px rgba(44,28,18,0.35);
}
.menu-card::before{
  content:"";
  position:absolute;
  top:-10px;
  left:28px;
  width:56px;
  height:22px;
  background:rgba(224,169,54,0.55);
  border:1px solid rgba(184,130,20,0.4);
  transform:rotate(-4deg);
}
.menu-card:nth-child(1){transform:rotate(-0.6deg);}
.menu-card:nth-child(2){transform:rotate(0.5deg);}
.menu-card:nth-child(3){transform:rotate(-0.4deg);}
.menu-card:nth-child(4){transform:rotate(0.6deg);}
.menu-card:nth-child(2)::before{background:rgba(207,69,119,0.4);border-color:rgba(169,49,93,0.4);left:auto;right:28px;transform:rotate(5deg);}
.menu-card:nth-child(3)::before{background:rgba(44,70,59,0.35);border-color:rgba(44,70,59,0.5);transform:rotate(3deg);}
.menu-card:nth-child(4)::before{background:rgba(216,103,44,0.45);border-color:rgba(176,79,31,0.4);left:auto;right:28px;transform:rotate(-3deg);}
.menu-note-fr{
  display:block;
  font-family:var(--serif);
  font-style:italic;
  color:var(--pine-light);
  font-size:0.95rem;
  margin-top:-0.3rem;
}
.menu-card h3{
  font-size:1.2rem;
  color:var(--coffee);
  border-bottom:2px solid var(--ember);
  padding-bottom:0.5rem;
  margin-bottom:1.1rem;
}
.menu-item{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:0.55rem 0;
  border-bottom:1px dashed rgba(92,59,38,0.25);
}
.menu-item:last-child{border-bottom:none;}
.menu-item-name{font-weight:600;color:var(--espresso);font-size:0.98rem;}
.menu-item-desc{display:block;font-weight:400;color:#5c4530;font-size:0.85rem;margin-top:0.1rem;}
.menu-item-price{
  font-weight:700;
  color:var(--ember-dark);
  white-space:nowrap;
  font-size:0.95rem;
  padding-top:0.05rem;
}
@media (max-width:760px){
  .menu-grid{grid-template-columns:1fr;}
}

/* ---------- Hours ---------- */
.hours{
  background:var(--espresso);
  color:var(--cream-text);
}
.hours .section-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}
.hours h2{color:var(--cream-text);font-size:2rem;}
.hours-copy p{color:rgba(251,243,231,0.78);}
.hours .eyebrow{color:#ef91b5;border-color:#ef91b5;background:rgba(239,145,181,0.1);}
.hours-card{
  background:rgba(251,243,231,0.06);
  border:1px solid rgba(251,243,231,0.18);
  border-radius:6px;
  padding:2rem 2.2rem;
}
.hours-row{
  display:flex;
  justify-content:space-between;
  padding:0.7rem 0;
  border-bottom:1px solid rgba(251,243,231,0.14);
  font-size:1rem;
}
.hours-row:last-child{border-bottom:none;}
.hours-day{font-weight:700;color:var(--cream-text);}
.hours-time{color:#f0d9bf;}
@media (max-width:760px){
  .hours .section-inner{grid-template-columns:1fr;gap:2rem;}
}

/* ---------- Visit & Contact ---------- */
.visit{background:var(--oat);}
.visit .section-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.5rem;
  align-items:start;
}
.visit h2{font-size:2rem;}
.visit-details{margin-top:1.5rem;display:flex;flex-direction:column;gap:1.2rem;}
.visit-detail{display:flex;gap:0.9rem;align-items:flex-start;}
.visit-detail svg{width:24px;height:24px;flex:none;color:var(--ember-dark);margin-top:0.2rem;}
.visit-detail strong{display:block;font-size:0.95rem;color:var(--espresso);}
.visit-detail span{color:#4a3423;font-size:0.92rem;}
.visit .btn-ghost{color:var(--ember);border-color:var(--ember);}
.visit .btn-ghost:hover{background:rgba(216,103,44,0.1);}

.contact-card{
  position:relative;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:6px;
  padding:2.2rem;
  box-shadow:0 10px 24px -16px rgba(44,28,18,0.3);
  transform:rotate(-0.5deg);
}
.contact-card::before{
  content:"";
  position:absolute;
  top:-10px;
  right:34px;
  width:60px;
  height:22px;
  background:rgba(207,69,119,0.4);
  border:1px solid rgba(169,49,93,0.4);
  transform:rotate(4deg);
}
.contact-card h3{font-size:1.25rem;margin-bottom:0.3em;}
.contact-card > p{color:#5c4530;font-size:0.93rem;}
@media (max-width:820px){
  .visit .section-inner{grid-template-columns:1fr;}
}

/* ---------- Form ---------- */
.pets-photo{
  margin:0;
  transform:rotate(-1.2deg);
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:8px;
  padding:0.7rem 0.7rem 1rem;
  box-shadow:0 14px 28px -16px rgba(44,28,18,0.4);
}
.pets-photo img{
  display:block;
  width:100%;
  height:auto;
  border-radius:5px;
}
.pets-photo figcaption{
  margin-top:0.6rem;
  font-size:0.85rem;
  color:var(--coffee);
  text-align:center;
  font-style:italic;
}
.pets-rules-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto;}
.pets-hero{min-height:60vh;}

.sas-form{margin-top:1.2rem;}
.sas-field{display:block;margin-bottom:1.1rem;}
.sas-field > span{
  display:block;
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--coffee);
  margin-bottom:0.4rem;
}
.sas-field input,
.sas-field select,
.sas-field textarea{
  width:100%;
  font-family:inherit;
  font-size:0.98rem;
  padding:0.7rem 0.85rem;
  border:1px solid rgba(92,59,38,0.35);
  border-radius:4px;
  background:#fff;
  color:var(--espresso);
}
.sas-field textarea{min-height:110px;resize:vertical;}
.sas-field input:focus,
.sas-field select:focus,
.sas-field textarea:focus{
  outline:none;
  border-color:var(--ember);
  box-shadow:0 0 0 3px rgba(216,103,44,0.18);
}
.sas-form button[type="submit"]{
  background:var(--ember);
  color:var(--cream-text);
  border:2px solid var(--ember);
  border-radius:2px;
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:0.03em;
  padding:0.85rem 1.9rem;
  cursor:pointer;
  transition:background 0.2s ease;
}
.sas-form button[type="submit"]:hover{background:var(--ember-dark);border-color:var(--ember-dark);}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--espresso);
  color:rgba(251,243,231,0.7);
  text-align:center;
  padding:2.4rem 1.75rem;
  border-top:1px solid rgba(216,103,44,0.3);
  font-size:0.85rem;
}
.site-footer .brand-name{display:block;color:var(--cream-text);font-size:1.05rem;margin-bottom:0.4rem;}
.site-footer .sticker{display:inline-flex;}
.site-footer .botbuilt-credit{display:block;margin-top:0.5rem;font-size:0.78rem;opacity:0.8;}
.site-footer .botbuilt-credit a{text-decoration:underline;color:inherit;}
.site-footer .botbuilt-credit a:hover{color:var(--ember);}