/* Bombay Bark Company. Direction B, "the menu board of a Bandra café".
   Chocolate ground from the logo outline, cream type, blush accent (the one action), one family: Bricolage Grotesque.
   Edit colours here only. Every page uses this file. */
:root{
  --ground:#2e1d12;      /* the logo outline brown, deepened */
  --ground-2:#3a2618;    /* raised panels */
  --ink:#fbf1e6;         /* cream, 15.1:1 on ground */
  --ink-2:#e2cdb9;       /* 10.4:1 on ground */
  --blush:#f2c9b8;       /* accent = the call button + menu right column, 10.6:1 on ground */
  --blush-hover:#ffd9ca;
  --tan:#e1ad79;         /* numerals only */
  --rule:rgba(251,241,230,.22);
  color-scheme:dark;     /* dark only, by design: the chocolate ground is the brand */
  --sans:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r:6px;               /* one radius: buttons, chips, photos */
  --wrap:1240px;
  --gap:clamp(56px, 4vw + 32px, 104px);  /* the break between sections */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1.0625rem/1.55 var(--sans);font-optical-sizing:auto}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--blush);color:var(--ground);padding:10px 16px;border-radius:var(--r);font-weight:700;z-index:9}
.skip:focus{left:12px}

/* Header */
header.site{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--rule)}
.brand img{display:block;width:150px;height:auto}
nav.main ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-weight:600;font-size:.95rem}
nav.main a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
nav.main a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}
nav.main a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}

/* Type */
h1{font-weight:700;font-size:clamp(2.5rem,1rem + 5vw,4.5rem);line-height:1.0;letter-spacing:-.02em;margin:0 0 26px;text-wrap:balance}
h2{font-weight:800;font-size:clamp(1.8rem,1.2rem + 2vw,2.8rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 6px;text-wrap:balance}
h3{font-weight:700;font-size:1.3rem;letter-spacing:-.01em;margin:0 0 4px}
.lede{font-size:1.2rem;color:var(--ink-2);max-width:38ch;margin:0 0 30px}
.sub{color:var(--ink-2);margin:0 0 22px}
.label{font-size:1rem;font-weight:600;letter-spacing:0;line-height:1.4;color:var(--ink-2);margin:0 0 14px}
.body{max-width:58ch}
.body p,.desc{color:var(--ink-2)}
.body p{margin-bottom:2em}
.body .who{margin:0 0 4px}
.mt{margin-top:22px}
.mt-s{margin-top:12px}

/* Actions */
.actions{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-bottom:18px}
.btn{display:inline-flex;align-items:center;background:var(--blush);color:var(--ground);font-weight:800;text-decoration:none;padding:16px 28px;border-radius:var(--r);min-height:52px}
.btn:hover{background:var(--blush-hover)}
.link{font-weight:600;text-underline-offset:5px;padding-block:12px}
.link:hover{text-decoration-thickness:3px}
a:focus-visible,.btn:focus-visible,summary:focus-visible,video:focus-visible,iframe:focus-visible{outline:3px solid var(--blush);outline-offset:4px}

/* Facts (address, open, phone) */
.where{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 14px;align-items:baseline;font-weight:600}
.where dd{margin:0;font-weight:400;color:var(--ink-2)}
.where dd small{display:block;font-size:.88rem}

/* "To fill" chips: client content still to come. Delete the chip when the real text goes in. */
.fill{display:inline-block;font-size:.88rem;color:var(--ink-2);border:1.5px dashed var(--ink-2);border-radius:var(--r);padding:6px 12px;font-weight:400}

/* Hero (home). The collar tag drops onto its ring, swings and settles in 2.2 seconds (WCAG 2.2.2: nothing moves longer than 5 s). Hover swings it again. */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;padding:32px 0 24px}
.tag{position:relative;width:min(380px,100%);aspect-ratio:1;justify-self:center}
.swing{position:absolute;inset:15%;transform-origin:50% -9%;animation:settle 2.2s cubic-bezier(.3,.7,.4,1) 1 both}
.tag:hover .swing{animation:settle-again 2.2s cubic-bezier(.3,.7,.4,1) 1 both}
.hook{position:absolute;left:50%;top:-25px;width:18px;height:18px;margin-left:-9px;border:3px solid var(--ink);border-radius:50%}
.hook::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:7px;margin-left:-1px;background:var(--ink)}
.disc{position:absolute;inset:0;border-radius:50%;background:#fbf6f1;box-shadow:0 0 0 2px var(--ground),0 0 0 4px var(--ink-2);display:grid;place-items:center;overflow:hidden}
.disc img{width:52%;height:auto}
.ring{position:absolute;inset:0;transform-origin:50% 50%;animation:turn-in 2.2s cubic-bezier(.2,.7,.2,1) 1 both}
.ring text{fill:var(--ink-2);font:600 18px var(--sans);letter-spacing:.2em;text-transform:uppercase}
@keyframes turn-in{from{transform:rotate(-48deg)}to{transform:rotate(-18deg)}}
@keyframes settle{0%{transform:translateY(-10px) rotate(-9deg)}30%{transform:translateY(0) rotate(6deg)}52%{transform:rotate(-3deg)}72%{transform:rotate(1.4deg)}88%{transform:rotate(-.5deg)}100%{transform:rotate(0)}}
@keyframes settle-again{0%{transform:rotate(10deg)}30%{transform:rotate(-6deg)}52%{transform:rotate(3deg)}72%{transform:rotate(-1.2deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.ring,.swing,.tag:hover .swing{animation:none}}
@media (min-width:1100px){
  .hero{grid-template-columns:1.1fr .9fr}
  .tag{width:min(440px,100%)}
}

/* The menu board: name ····· right column */
.board{border-top:1px solid var(--rule);padding:40px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:56px}
.board + .section{margin-top:56px}
.board-foot{grid-column:1 / -1;margin-top:-24px}
.menu{list-style:none;margin:0;padding:0}
.menu li,.menu .row{display:grid;grid-template-columns:minmax(0,max-content) minmax(32px,1fr) max-content;align-items:end;column-gap:12px}
.menu li{padding:12px 0;font-size:1.1rem}
.menu .dots{align-self:end;margin-bottom:.4em;border-bottom:2px dotted var(--rule)}
.menu .price{font-variant-numeric:tabular-nums;color:var(--blush);font-weight:600;white-space:nowrap}
.menu-desc > li{display:block;padding:18px 0}
.menu-desc > li > .row{font-weight:600;font-size:1.2rem}
.menu-desc .desc{margin:6px 0 0;color:var(--ink-2);font-size:1rem;max-width:60ch}
.after-menu{margin-top:16px}

/* Sections */
.section{border-top:1px solid var(--rule);margin-top:var(--gap);padding-top:40px}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:28px}
.section-head .sub{margin:0}

/* Photos */
figure{margin:0}
.ph{border-radius:var(--r);overflow:hidden;background:var(--ground-2)}
.ph img{width:100%;height:100%;object-fit:cover}
figcaption{font-size:.88rem;line-height:1.45;color:var(--ink-2);padding-top:10px}
figcaption b{color:var(--ink);font-weight:700}
.door{color:var(--tan);font-weight:800;font-size:1.6rem;line-height:0;margin-right:8px;font-variant-numeric:tabular-nums;vertical-align:-.08em}
/* Home "Inside": the door numbers at the size they are painted on the glass */
.inside .door{display:block;font-size:clamp(3.5rem,6vw,6rem);line-height:.85;margin:4px 0 8px;font-weight:300;font-variation-settings:"opsz" 96}
.r45{aspect-ratio:4/5}
.r43{aspect-ratio:4/3}
.sq{aspect-ratio:1}
.block-ph{display:grid;gap:20px}
.sq img{object-position:50% 70%}
.pos-left img{object-position:0 50%}
.pos-dog img{object-position:50% 85%}
.pos-table img{object-position:22% 50%}
.film figcaption{text-wrap:balance}
.film figcaption a{display:block;width:fit-content}

/* Rows of photos that share top and bottom edges: the 4:5 tiles set the row height, the wide tile fills it. */
.inside,.gallery{display:grid;gap:28px 20px;align-items:stretch}
.inside{grid-template-columns:2fr 1fr 1fr}
.gallery{grid-template-columns:repeat(3,1fr)}
.gallery .wide{grid-column:span 2}
.inside figure,.gallery figure{display:grid;grid-template-rows:1fr auto}
.inside figure:first-child .ph,.gallery .wide .ph{aspect-ratio:auto;position:relative;min-height:0}
.inside figure:first-child .ph img,.gallery .wide .ph img{position:absolute;inset:0}

/* Founder (home): the video, then her words */
.founder{display:grid;grid-template-columns:340px 1fr;gap:72px;align-items:center}
.quote{font-size:clamp(1.5rem,1rem + 1.6vw,2.3rem);font-weight:600;line-height:1.2;letter-spacing:-.015em;margin:0 0 22px;text-wrap:pretty;hanging-punctuation:first}
.who{font-weight:700;margin:0}
.who span{display:block;font-weight:400;color:var(--ink-2)}
.film{max-width:340px}
.film video{width:100%;aspect-ratio:464/832;border-radius:var(--r);background:var(--ground-2)}
details{margin-top:12px;font-size:.95rem;color:var(--ink-2)}
summary{cursor:pointer;font-weight:600;color:var(--ink);min-height:44px;display:list-item;list-style:disclosure-closed inside;padding-block:10px}
details[open] summary{list-style-type:disclosure-open}
.scene{font-style:normal;color:var(--ink-2)}

/* Visit */
.visit{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:start}
.addr{font-weight:800;font-size:clamp(1.8rem,1.2rem + 2vw,2.8rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance}
.map{position:relative;aspect-ratio:4/3;border-radius:var(--r);background:var(--ground-2)}
.map-fallback{position:absolute;inset:0;display:grid;place-content:center;gap:10px;text-align:center;padding:24px}
.map-fallback p{margin:0;color:var(--ink)}
.map iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;border-radius:var(--r)}
.js .map iframe{opacity:0;transition:opacity .2s}
.map iframe.ok{opacity:1}
.map:has(iframe.ok) .map-fallback{visibility:hidden}

/* Services page: the board, with one photo per block */
.block{display:grid;grid-template-columns:360px 1fr;gap:56px;align-items:start;padding:40px 0;border-top:1px solid var(--rule)}
.page-head + .block{border-top:0;padding-top:0}
.block.no-ph > div{grid-column:2}
.block.no-ph{padding-bottom:0}
.block + .section{margin-top:56px}

/* About */
.story{display:grid;grid-template-columns:340px 1fr;gap:72px;align-items:start}
.team .visit{grid-template-columns:minmax(0,440px) 1fr}
.team .ph{aspect-ratio:4/5}

/* Page head (inner pages) */
.page-head{padding:40px 0 48px}
.page-head .lede{margin-bottom:0}

/* Footer */
footer.site{border-top:1px solid var(--rule);margin-top:var(--gap);padding:40px 0 56px;display:grid;grid-template-columns:auto 1fr;gap:20px 56px;align-items:start}
footer.site .brand img{width:132px}
.foot-facts{margin:0;color:var(--ink-2)}
footer.site nav{grid-column:1 / -1}
footer.site nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 24px;font-weight:600}
footer.site nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
footer.site nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.legal{grid-column:1 / -1;font-size:.88rem;color:var(--ink-2);margin:0}

@media (max-width:980px){
  .gallery{grid-template-columns:1fr 1fr}
  .gallery .wide .ph{aspect-ratio:16/10}
  .gallery .wide .ph img{position:static}
  .block{grid-template-columns:280px 1fr;gap:40px}
}
@media (max-width:860px){
  header.site{gap:4px 24px}
  nav.main{width:100%;margin:-8px -20px;padding:8px 20px;overflow-x:auto;scrollbar-width:none}
  nav.main ul{gap:22px;white-space:nowrap}
  .visit,.story{grid-template-columns:1fr;gap:32px}
  .founder{grid-template-columns:260px 1fr;gap:40px}
  .inside{grid-template-columns:1fr 1fr}
  .inside figure:first-child{grid-column:1 / -1}
  .inside figure:first-child .ph{aspect-ratio:4/3}
  .inside figure:first-child .ph img{position:static}
}
@media (max-width:700px){
  .hero{grid-template-columns:1fr;padding-top:24px;gap:28px}
  .tag{width:230px;justify-self:center}
  .board{grid-template-columns:1fr;gap:48px}
  .founder{grid-template-columns:1fr;gap:28px}
  .film{max-width:280px}
  .block{grid-template-columns:1fr;gap:24px}
  .block .ph{aspect-ratio:4/3}
  .block.no-ph > div{grid-column:auto}
}
@media (max-width:560px){
  .gallery{grid-template-columns:1fr}
  .gallery .wide{grid-column:auto}
  .gallery .wide .ph{aspect-ratio:4/3}
  .gallery .wide .ph img{position:static}
  footer.site{grid-template-columns:1fr}
}
@media (max-width:420px){
  nav.main ul{gap:14px;font-size:.9rem}
}
@media (forced-colors:active){
  .btn{border:2px solid ButtonText}
  .fill{border-color:CanvasText}
  .disc{border:2px solid CanvasText;forced-color-adjust:none;background:#fbf6f1}
}

/* Photos page: the storefront tile keeps the whole sign */
.gallery .wide .ph img[src*="storefront"]{object-position:50% 0}
@media (max-width:860px){
  .board{grid-template-columns:1fr;gap:48px}
  .board-foot{margin-top:-24px}
  .team .visit{grid-template-columns:1fr}
}

/* Hero between phone and desktop: the tag sits small beside the facts */
@media (min-width:701px) and (max-width:1099px){
  .hero{grid-template-columns:1fr 260px}
  .tag{width:260px;align-self:start;margin-top:24px}
}
@media (max-width:420px){
  .menu-desc .row{font-size:1rem}
}
/* The hook scales with the tag (tag 230px on phones, 260px on tablets = 0.6 to 0.7 of 380) */
@media (max-width:1099px){
  .hook{top:-17px;width:12px;height:12px;margin-left:-6px;border-width:2px}
  .hook::after{height:5px}
}

/* Home "Inside": three photos of one height, then the door numeral, then the caption, so 1 · 3 · 4 sit on one line */
.inside{align-items:start}
.inside figure{display:block}
.inside .ph,.inside figure:first-child .ph{height:clamp(240px,24vw,340px);aspect-ratio:auto;position:relative}
.inside .ph img,.inside figure:first-child .ph img{position:absolute;inset:0}
.inside .door{height:1em}
@media (max-width:860px){
  .inside figure:first-child .ph{height:auto;aspect-ratio:4/3}
  .inside figure:first-child .ph img{position:static}
  .inside figure:not(:first-child) .ph{height:clamp(200px,58vw,320px)}
}
/* The hook clears the last letter of JUHU on the smaller tag */
@keyframes turn-in-sm{from{transform:rotate(-52deg)}to{transform:rotate(-22deg)}}
@media (max-width:1099px){.ring{animation-name:turn-in-sm}}
/* Long words (the email address) never push a column wider than the phone */
.visit > *,.where dd{min-width:0}
.where dd{overflow-wrap:anywhere}
/* After the last round: menu names fit beside their right column on phones; the Services photo column ends with the list */
@media (max-width:420px){
  .menu li,.menu-desc > li > .row{font-size:1rem}
}
@media (min-width:981px){
  .block{grid-template-columns:300px 1fr}
}
/* Home "Inside": all four doors, one row on desktop, two by two on phones */
.inside{grid-template-columns:repeat(4,1fr)}
.inside figure:first-child .ph img{object-position:22% 70%}
@media (max-width:860px){
  .inside{grid-template-columns:1fr 1fr}
  .inside figure:first-child{grid-column:auto}
  .inside figure:first-child .ph,.inside figure:not(:first-child) .ph{height:clamp(200px,58vw,320px);aspect-ratio:auto}
  .inside figure:first-child .ph img{position:absolute}
}