/* Tondero — values taken 1:1 from the design handoff (design/*.dc.html + README.md) */

/* ---------- Fonts ---------- */
@font-face { font-family:'Bricolage Grotesque'; src:url('../assets/fonts/BricolageGrotesque-Light.ttf') format('truetype');    font-weight:100 350; font-style:normal; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('../assets/fonts/BricolageGrotesque-Regular.ttf') format('truetype');  font-weight:351 450; font-style:normal; font-display:swap; }
@font-face { font-family:'Bricolage Grotesque'; src:url('../assets/fonts/BricolageGrotesque-SemiBold.ttf') format('truetype'); font-weight:451 900; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --red:#A92C23;
  --ivory:#FCF8F2;
  --cacao:#231C19;
  --hairline-soft:rgba(35,28,25,0.12);
  --hairline-red:rgba(169,44,35,0.3);
  --underline:rgba(35,28,25,0.3);
  --muted:rgba(35,28,25,0.55);
  --tag-bg:rgba(169,44,35,0.1);
  --gutter:clamp(20px,5vw,48px);
  --gutter-chrome:clamp(16px,5vw,48px);
  --header-h:57px;            /* replaced at runtime by the measured header height */
  --vh:100vh;
}
@supports (height:100svh){ :root{ --vh:100svh; } }

*{box-sizing:border-box;}
body{margin:0;background:var(--ivory);color:var(--cacao);font-family:'Bricolage Grotesque',sans-serif;-webkit-font-smoothing:antialiased;}
a{color:var(--red);text-decoration:none;}
a:hover{color:var(--cacao);}
img{max-width:100%;}
.page{background:var(--ivory);color:var(--cacao);min-height:100vh;}

/* ---------- Type roles ---------- */
.eyebrow{font-size:13px;font-weight:600;text-transform:uppercase;color:var(--red);}
.h1{font-size:clamp(44px,5vw,84px);line-height:1.02;font-weight:600;letter-spacing:-0.015em;color:var(--red);}
.lead{font-size:clamp(16px,1.6vw,20px);font-weight:300;line-height:1.5;color:var(--cacao);}
.field-label{font-size:12px;font-weight:600;text-transform:uppercase;color:var(--cacao);}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--ivory);border-bottom:1px solid var(--cacao);}
.header-inner{padding:22px var(--gutter-chrome);display:flex;align-items:center;justify-content:flex-start;gap:20px;}
.brand-link{display:flex;align-items:center;}
.brand-link img{height:24px;display:block;}
.header-right{display:flex;align-items:center;gap:28px;margin-left:auto;}
.desktop-nav{display:flex;gap:20px;flex-wrap:wrap;}
.nav-link{font-size:13px;font-weight:600;text-transform:uppercase;color:var(--cacao);}
.nav-link.is-current{color:var(--red);}

/* Language pill (desktop) */
.lang{position:relative;width:76px;height:33px;}
.lang-panel{position:absolute;top:0;right:0;display:flex;flex-direction:column;width:76px;border:1px solid var(--red);border-radius:18px;overflow:hidden;background:var(--ivory);}
.lang-trigger,.lang-item{border:none;background:transparent;font-family:'Bricolage Grotesque',sans-serif;font-size:12px;font-weight:600;cursor:pointer;width:100%;text-align:center;padding:7px 10px;}
.lang-trigger{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--red);}
.lang-trigger svg{flex:none;transition:transform 0.2s ease;}
.lang-trigger[aria-expanded="true"] svg{transform:rotate(180deg);}
.lang-item{display:block;color:var(--cacao);border-top:1px solid var(--hairline-red);}
.lang-item:hover{color:var(--red);}
.lang-list[hidden]{display:none;}

/* Hamburger */
.hamburger{position:relative;width:34px;height:32px;background:none;border:none;cursor:pointer;margin-left:auto;padding:0;display:none;}
.hamburger span{position:absolute;left:2px;width:30px;height:1.5px;background:var(--cacao);display:block;transition:transform 0.28s ease,opacity 0.2s ease,top 0.28s ease;transform-origin:center;}
.hamburger span:nth-child(1){top:9px;}
.hamburger span:nth-child(2){top:15px;}
.hamburger span:nth-child(3){top:21px;}
.hamburger[aria-expanded="true"] span:nth-child(1){top:15px;transform:rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){top:15px;transform:rotate(-45deg);}

/* Mobile panel */
.mobile-menu{position:absolute;top:100%;left:0;right:0;z-index:60;padding:36px var(--gutter-chrome) 40px;display:flex;flex-direction:column;gap:34px;border-top:1px solid var(--hairline-soft);background:var(--ivory);box-shadow:0 12px 20px rgba(35,28,25,0.14);}
.mobile-menu[hidden]{display:none;}
.mobile-nav{display:flex;flex-direction:column;gap:22px;}
.mobile-nav a{font-size:16px;font-weight:600;text-transform:uppercase;color:var(--cacao);}
.mobile-nav a.is-current{color:var(--red);}
.lang-row{display:flex;align-items:center;gap:16px;align-self:flex-end;margin-right:10px;}
.lang-row a{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:600;color:var(--cacao);}
.lang-row a.is-current{color:var(--red);}
.lang-sep{width:1px;height:13px;background:var(--hairline-red);}

@media (max-width:760px){
  .header-right{display:none;}
  .hamburger{display:flex;}
}

/* ---------- Shared bits ---------- */
.rule{height:1px;background:var(--cacao);}
.btn-pill{display:inline-block;background:transparent;color:var(--red);padding:14px 28px;border:1px solid var(--red);border-radius:999px;font-size:14px;font-weight:600;text-transform:uppercase;transition:background 0.2s ease,color 0.2s ease;}
.btn-pill:hover{background:var(--red);color:var(--ivory);}
.link-underline{color:var(--cacao);text-decoration:none;border-bottom:1px solid var(--underline);}
.link-plain{color:var(--cacao);}

/* ---------- Home: hero ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:calc(var(--vh) - var(--header-h));background:var(--ivory);overflow:hidden;}
.hero-text{background:var(--ivory);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:56px clamp(20px,5vw,56px);}
.hero-text h1{margin:0 0 22px;}
.hero-text .lead{margin:0 0 34px;max-width:520px;}
.hero-media{position:relative;min-height:460px;overflow:hidden;border-left:1px solid var(--cacao);}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease;}
.hero-slide.is-active{opacity:1;}

/* ---------- Home: intro ---------- */
.intro{padding:180px var(--gutter);max-width:900px;margin:0 auto;text-align:center;}
.intro img{width:36px;height:36px;margin:0 auto 28px;display:block;}
.intro p{font-size:clamp(22px,2.8vw,32px);line-height:1.4;font-weight:300;color:var(--cacao);margin:0;}

/* ---------- Home: story ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;min-height:calc(var(--vh) - var(--header-h));background:var(--red);overflow:hidden;}
.story-media{position:relative;min-height:460px;overflow:hidden;border-right:1px solid var(--cacao);}
.story-media > div{width:100%;height:100%;background-size:cover;background-position:center;}
.story-text{background:var(--red);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:56px clamp(20px,5vw,56px);}
.story-text .eyebrow{color:var(--ivory);}
.story-text h2{font-size:clamp(44px,5vw,84px);line-height:1.02;font-weight:600;letter-spacing:-0.015em;color:var(--ivory);margin:14px 0 22px;}
.story-text .lead{color:var(--ivory);margin:0;max-width:520px;}

/* ---------- Home: gallery ---------- */
.gallery{padding:100px var(--gutter);}
.gallery-head{margin-bottom:44px;}
.gallery-head h2{font-size:clamp(34px,4vw,56px);font-weight:600;letter-spacing:-0.015em;margin:10px 0 0;line-height:1.02;color:var(--red);}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-auto-rows:380px;gap:20px;}
.gallery-grid > div{border-radius:12px;overflow:hidden;background-size:cover;background-position:center;}

/* ---------- Home: location ---------- */
.location{padding:0 var(--gutter) 100px;}
.location-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.location-panel{background:var(--ivory);color:var(--cacao);padding:8px 44px 44px 0;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;text-align:left;}
.location-panel h2{font-size:clamp(30px,3.4vw,44px);font-weight:600;letter-spacing:-0.015em;margin:14px 0 26px;line-height:1.02;color:var(--red);}
.location-panel .field-label{margin:0 0 6px;}
.loc-block{margin-bottom:22px;}
.loc-block-lg{margin-bottom:34px;}
.loc-value{font-size:16px;margin:0;color:var(--cacao);}
.loc-hours-line{font-size:15px;margin:0 0 4px;color:var(--cacao);}
.loc-hours-line:last-child{margin:0;}
.location-photo{position:relative;width:100%;height:100%;min-height:360px;border-radius:12px;overflow:hidden;}
.location-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- Carta ---------- */
.menu-head{padding:80px var(--gutter) 88px;}
.menu-head h1{margin:14px 0 22px;}
.menu-head .lead{margin:0;max-width:560px;}
.menu-category{padding:64px var(--gutter);border-top:1px solid var(--cacao);}
.menu-category-head{display:flex;align-items:baseline;gap:16px;margin-bottom:36px;}
.menu-category-head h2{font-size:clamp(28px,3vw,40px);font-weight:600;letter-spacing:-0.015em;margin:0;line-height:1.02;color:var(--red);}
.menu-category-tagline{font-size:14px;color:var(--muted);}
.menu-note{font-size:16px;color:var(--cacao);margin:0;line-height:1.6;}
.menu-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:32px;}
.menu-item-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px;}
.menu-item-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.menu-item-name h3{font-size:18px;font-weight:700;margin:0;}
.menu-tag{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--red);background:var(--tag-bg);padding:3px 8px;border-radius:10px;}
.menu-price{font-size:16px;font-weight:700;color:var(--cacao);white-space:nowrap;}
.menu-desc{font-size:14px;color:var(--cacao);margin:0;line-height:1.5;}
.menu-legal{padding:40px var(--gutter) 56px;display:flex;flex-direction:column;gap:10px;max-width:760px;}
.menu-legal p{font-size:13px;color:var(--cacao);line-height:1.6;margin:0;}

/* ---------- Contacto ---------- */
.contact-head{padding:80px var(--gutter) 0;}
.contact-head h1{margin:14px 0 22px;max-width:16ch;}
.contact-head .lead{margin:0;max-width:560px;}
.contact-info{padding:88px var(--gutter) 100px;}
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:64px;align-items:start;}
.contact-photo{width:100%;aspect-ratio:4/5;border-radius:12px;object-fit:cover;display:block;}
.contact-col .field-label{margin:0 0 10px;}
.contact-address{font-size:17px;line-height:1.6;margin:0 0 40px;color:var(--cacao);max-width:26ch;}
.contact-hours{font-size:17px;margin:0 0 6px;color:var(--cacao);}
.contact-hours:last-child{margin:0;}
.contact-links{display:flex;flex-direction:column;gap:32px;}
.contact-links .field-label{margin:0 0 8px;}
.contact-value{font-size:17px;margin:0;color:var(--cacao);}
.contact-links a{font-size:17px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ivory);color:var(--cacao);padding:72px var(--gutter-chrome) 32px;border-top:1px solid var(--cacao);text-align:left;}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:40px;padding-bottom:48px;}
.footer-logo{height:22px;display:block;margin:0 0 18px;}
.footer-tag{font-size:14px;color:var(--cacao);max-width:280px;line-height:1.6;margin:0;}
.footer-grid .field-label{margin:0 0 16px;}
.footer-address{font-size:14px;color:var(--cacao);line-height:1.6;margin:0;}
.footer-social{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.footer-social a{color:var(--cacao);font-size:14px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:12px;}
.footer-bottom p{font-size:13px;color:var(--cacao);margin:0;}

/* ---------- Mobile (≤760px, the design's breakpoint) ---------- */
@media (max-width:760px){
  .hero{grid-template-columns:1fr;min-height:0;}
  .hero-text{align-items:center;text-align:center;padding:96px clamp(20px,5vw,56px);}
  .hero-media{order:-1;height:calc(var(--vh) - var(--header-h));min-height:0;border-left:none;border-bottom:1px solid var(--cacao);}
  .intro{padding:104px var(--gutter);}
  .story{grid-template-columns:1fr;min-height:0;}
  .story-media{height:60vh;min-height:0;border-right:none;border-bottom:1px solid var(--cacao);}
  .story-text{padding:96px clamp(20px,5vw,56px);}
  .location-panel{padding:40px 0;}
  .contact-grid{grid-template-columns:1fr;gap:48px;}
}