/* ============================================================
   NINO CAFE — ninostalbans.com
   Brand system v1.0 (July 2026)
   Cream #F8EFE3 · Paper #FDF8F0 · Espresso #3B2D23
   Terracotta #C1693C · Latte #C7AF87 · Leaf (veggie only)
   Type: Bricolage Grotesque / Hanken Grotesk / Spline Sans Mono
   Rules: 12px radius · pills for tags only · 1.5px espresso
   borders at 12–20% · one terracotta button per screen
   ============================================================ */

:root{
  --cream:#F8EFE3;
  --paper:#FDF8F0;
  --espresso:#3B2D23;
  --espresso-deep:#2E231B;
  --terracotta:#C1693C;
  --terracotta-dark:#A5552E;
  --latte:#C7AF87;
  --leaf:#4A6337;
  --line:rgba(59,45,35,.14);
  --line-strong:rgba(59,45,35,.22);
  --radius:12px;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,"Courier New",monospace;
  --wrap:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
body{
  margin:0;
  background:var(--cream);
  color:var(--espresso);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--espresso)}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--terracotta);
  outline-offset:3px;
  border-radius:6px;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- utility type ---------- */
.eyebrow{
  font-family:var(--mono);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--terracotta-dark);
  margin:0 0 .8rem;
}
.section-title{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.7rem,3.6vw,2.3rem);
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0 0 .6rem;
}
.section-intro{max-width:56ch;margin:0 0 2rem;font-size:1.02rem}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:-999px;top:0;
  background:var(--espresso);color:var(--cream);
  padding:.6rem 1rem;z-index:100;border-radius:0 0 var(--radius) 0;
  font-family:var(--mono);font-size:.85rem;
}
.skip:focus{left:0}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--cream);
  border-bottom:1.5px solid var(--line-strong);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-top:.7rem;padding-bottom:.7rem;
}
.brand-link{display:inline-flex;align-items:center}
.brand-link img{height:44px;width:auto}
.site-nav{display:flex;gap:.5rem;flex-wrap:wrap}
.site-nav a{
  font-family:var(--mono);font-weight:600;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;
  padding:.45rem .85rem;
  border:1.5px solid var(--line-strong);
  border-radius:999px;
  transition:background .15s,color .15s;
}
.site-nav a:hover{background:var(--espresso);color:var(--cream)}

/* ---------- hero ---------- */
.hero{padding:3.5rem 0 3rem;border-bottom:1.5px solid var(--line)}
.hero .wrap{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:3rem;align-items:center;
}
.hero h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.6rem,6.5vw,4rem);
  line-height:1.02;letter-spacing:-.015em;margin:0 0 1rem;
}
.hero .lede{font-size:1.12rem;max-width:46ch;margin:0 0 1.8rem}
.hero-actions{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.7rem 1.5rem;
  border-radius:var(--radius);
  font-family:var(--body);font-weight:700;font-size:1.17rem;
  text-decoration:none;
  transition:background .15s,color .15s;
}
.btn-primary{background:var(--terracotta);color:var(--paper)}
.btn-primary:hover{background:var(--terracotta-dark)}
.btn-ghost{
  background:transparent;color:var(--espresso);
  border:1.5px solid var(--line-strong);
}
.btn-ghost:hover{background:var(--espresso);color:var(--cream)}
.text-link{
  font-family:var(--mono);font-weight:600;font-size:.85rem;
  letter-spacing:.1em;text-transform:uppercase;
}

/* the A-board — hero signature */
.aboard{position:relative}
.aboard-card{
  background:var(--paper);
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius);
  padding:1.8rem 1.6rem 1.4rem;
  box-shadow:0 2px 0 rgba(59,45,35,.06);
}
.aboard-label{
  font-family:var(--mono);font-weight:600;font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--terracotta-dark);margin:0 0 .4rem;
}
.aboard-greeting{
  font-family:var(--display);font-weight:800;
  font-size:1.9rem;line-height:1.05;margin:0 0 1.1rem;
}
.aboard-lines{list-style:none;margin:0 0 1.2rem;padding:0}
.aboard-lines li{
  display:flex;align-items:baseline;gap:.5em;
  font-family:var(--mono);font-weight:600;font-size:.92rem;
  letter-spacing:.06em;text-transform:uppercase;
  padding:.45rem 0;
}
.aboard-lines .leader{flex:1;border-bottom:2px dotted var(--latte);transform:translateY(-4px)}
.aboard-foot{
  font-family:var(--mono);font-size:.75rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--terracotta-dark);
  border-top:1.5px solid var(--line);
  padding-top:.9rem;margin:0;
}
.aboard-stamp{
  position:absolute;top:-26px;right:-14px;
  width:76px;height:76px;transform:rotate(8deg);
}

/* ---------- halal band ---------- */
.halal-band{background:var(--espresso);color:var(--cream)}
.halal-band .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;padding-top:1.4rem;padding-bottom:1.4rem;
}
.halal-band p{margin:0;font-size:1.05rem;max-width:62ch}
.halal-band strong{font-weight:700}
.halal-chips{display:flex;gap:.5rem;flex-wrap:wrap}
.halal-chips span{
  font-family:var(--mono);font-weight:600;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;
  border:1.5px solid rgba(248,239,227,.4);
  border-radius:999px;padding:.35rem .8rem;
}

/* ---------- about ---------- */
.about{background:var(--paper);padding:4rem 0;border-bottom:1.5px solid var(--line)}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem}
.about-grid h3{
  font-family:var(--display);font-weight:700;font-size:1.2rem;
  margin:0 0 .5rem;
}
.about-grid p{margin:0;font-size:.98rem}

/* ---------- favourites ---------- */
.favourites{padding:4rem 0;border-bottom:1.5px solid var(--line)}
.fav-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.fav-card{
  background:var(--paper);
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.fav-slot{
  aspect-ratio:4/3;
  margin:.7rem;
  border:2px dashed var(--latte);
  border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;background:var(--cream);
}
.fav-slot img{width:44px;opacity:.45}
.fav-slot span{
  font-family:var(--mono);font-size:.62rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--latte);
}
.fav-body{padding:.4rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.fav-body h3{font-family:var(--display);font-weight:700;font-size:1.1rem;margin:0}
.fav-body p{margin:0;font-size:.9rem;flex:1}
.fav-meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.fav-meta .price{font-family:var(--mono);font-weight:600;font-size:1rem}

/* ---------- chips (pills, mono, one job each) ---------- */
.chip{
  display:inline-block;
  font-family:var(--mono);font-weight:600;font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;
  border-radius:999px;padding:.22rem .6rem;
  vertical-align:middle;white-space:nowrap;
}
.chip-pop{border:1.5px solid var(--terracotta);color:var(--terracotta-dark)}
.chip-fav{background:rgba(199,175,135,.35);color:var(--espresso)}
.chip-v{border:1.5px solid var(--leaf);color:var(--leaf)}

/* ---------- menu ---------- */
.menu{padding:4rem 0}
.menu-note{
  font-family:var(--mono);font-weight:600;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--terracotta-dark);margin:0 0 2rem;
}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.menu-cat{
  background:var(--paper);
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius);
  padding:1.6rem 1.5rem 1.4rem;
  break-inside:avoid;
}
.menu-cat-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;border-bottom:1.5px solid var(--line);
  padding-bottom:.7rem;margin-bottom:.9rem;
}
.menu-cat-head h3{
  font-family:var(--display);font-weight:700;font-size:1.45rem;margin:0;
}
.menu-cat-head .cols{
  font-family:var(--mono);font-weight:600;font-size:.7rem;
  letter-spacing:.12em;color:var(--terracotta-dark);
}
.menu-items{list-style:none;margin:0;padding:0}
.menu-items li{padding:.45rem 0}
.item-line{display:flex;align-items:baseline;gap:.55em}
.item-name{font-weight:600;font-size:1.02rem}
.item-line .leader{flex:1;border-bottom:2px dotted var(--latte);transform:translateY(-4px);min-width:1.5em}
.item-price{font-family:var(--mono);font-weight:600;font-size:.95rem;white-space:nowrap}
.item-desc{margin:.15rem 0 0;font-size:.88rem;color:rgba(59,45,35,.82);max-width:52ch}
.cat-note{
  font-family:var(--mono);font-weight:500;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--terracotta-dark);
  border-top:1.5px solid var(--line);
  padding-top:.8rem;margin:.9rem 0 0;
}
.formats{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:0 0 .8rem;padding:0;list-style:none}
.formats li{
  font-family:var(--mono);font-weight:600;font-size:.85rem;letter-spacing:.04em;
}
.good-to-know{
  margin-top:1.3rem;
  background:var(--paper);
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius);
  padding:1.2rem 1.5rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:space-between;
}
.good-to-know p{margin:0;font-size:.95rem}
.good-to-know .no-small-print{
  font-family:var(--mono);font-weight:600;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta-dark);
}

/* ---------- hours ---------- */
.hours{background:var(--espresso);color:var(--cream);padding:4rem 0}
.hours .eyebrow{color:var(--latte)}
.hours .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.hours h2{color:var(--cream)}
.hours .section-intro{margin-bottom:0;color:rgba(248,239,227,.9)}
.receipt{
  background:var(--paper);color:var(--espresso);
  border-radius:var(--radius);
  padding:1.6rem 1.6rem 1.3rem;
  font-family:var(--mono);
  box-shadow:0 2px 0 rgba(0,0,0,.15);
}
.receipt h3{
  font-family:var(--mono);font-weight:600;font-size:.8rem;
  letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 1rem;color:var(--terracotta-dark);
}
.receipt table{width:100%;border-collapse:collapse;font-size:.92rem}
.receipt td{padding:.4rem 0;font-weight:500}
.receipt td:last-child{text-align:right;font-weight:600}
.receipt tr+tr td{border-top:1.5px dotted var(--latte)}
.receipt .closed td:last-child{color:var(--terracotta-dark)}
.receipt p{
  margin:1rem 0 0;font-size:.72rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--terracotta-dark);
  border-top:1.5px solid var(--line);padding-top:.9rem;
}

/* ---------- find us ---------- */
.findus{background:var(--paper);padding:4rem 0;border-bottom:1.5px solid var(--line)}
.findus .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:start}
.address{font-style:normal;font-size:1.05rem;line-height:1.7;margin:0 0 1.5rem}
.address strong{font-family:var(--display);font-weight:700;font-size:1.15rem}
.address a{font-weight:600}
.findus-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.map-frame{
  border:1.5px solid var(--line-strong);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--cream);
}
.map-frame iframe{display:block;width:100%;height:380px;border:0}

/* ---------- footer ---------- */
.site-footer{background:var(--espresso-deep);color:var(--cream);padding:3.2rem 0 2.4rem}
.site-footer .wrap{display:flex;flex-direction:column;align-items:center;gap:1.1rem;text-align:center}
.site-footer img{height:110px;width:auto}
.footer-line{
  font-family:var(--mono);font-weight:600;font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--latte);margin:0;
}
.site-footer p{margin:0;font-size:.95rem;color:rgba(248,239,227,.85)}
.site-footer a{color:var(--cream);font-weight:600}
.footer-legal{font-size:.8rem;color:rgba(248,239,227,.55)}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .hero .wrap{grid-template-columns:1fr;gap:2.5rem}
  .aboard{max-width:440px}
  .fav-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr;gap:1.5rem}
  .hours .wrap,.findus .wrap{grid-template-columns:1fr;gap:2rem}
  .menu-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .brand-link img{height:36px}
  .site-nav a{padding:.4rem .7rem;font-size:.72rem}
  .fav-grid{grid-template-columns:1fr}
  .hero{padding-top:2.5rem}
  .aboard-stamp{right:0}
}

/* ---------- 404 ---------- */
.oops{min-height:70vh;display:flex;align-items:center}
.oops-inner{text-align:center;padding:4rem 20px}
.oops-inner img{margin:0 auto 1.5rem}
.oops-inner h1{font-family:var(--display);font-weight:800;font-size:2.4rem;margin:0 0 .6rem}
.oops-inner p{margin:0 0 2rem}

/* ---------- favourites photos ---------- */
.fav-photo{
  width:calc(100% - 1.4rem);
  margin:.7rem .7rem 0;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:8px;
  border:1.5px solid var(--line);
}