/* Petiscos by Adega - flagship build (2026-08-29). Editorial Portuguese warmth:
   cream and terracotta by day, deep Atlantic blue for the evening sections.
   Serif display is Playfair (NOT Fraunces - Andre vetoed its squiggly j). */
:root{
  --cream:#f7f1e4; --paper:#fdfaf2; --sand:#efe6d2; --line:#e3d9c4;
  --ink:#28211a; --dim:#6e6353;
  --terra:#9e4a38; --terra-d:#7a3628;
  --atl:#16334f; --atl-d:#0e2338; --atl-l:#274b6e;
  --gold:#d9a84c; --gold-d:#7a5a1c;
  --ease:cubic-bezier(.33,.02,.2,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
html,body{overflow-x:clip;}
body{background:var(--cream); color:var(--ink); font-family:'Hanken Grotesk','Segoe UI',system-ui,sans-serif;
  line-height:1.65; font-size:16.5px;}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif; font-weight:600; letter-spacing:-.3px; line-height:1.12;}
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}
::selection{background:var(--gold); color:#2a2008;}
.wrap{max-width:1100px; margin:0 auto; padding:0 22px;}
section{padding:84px 0;}
@media(max-width:640px){ section{padding:60px 0;} }
.eyebrow{font:700 11.5px/1 'Hanken Grotesk',sans-serif; letter-spacing:3px; text-transform:uppercase; color:var(--terra);}
.rv{opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.rv.in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} }

/* Top bar: reserve-first for a dine-in house. */
.top{position:sticky; top:0; z-index:60; background:rgba(247,241,228,.93); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);}
.top .wrap{display:flex; align-items:center; gap:12px; height:68px;}
.brand{display:flex; align-items:baseline; gap:8px; margin-right:auto; text-decoration:none;}
.brand b{font-family:'Playfair Display',serif; font-weight:700; font-size:21px; letter-spacing:.2px;}
.brand span{font:600 10px/1 'Hanken Grotesk',sans-serif; letter-spacing:2.6px; text-transform:uppercase; color:var(--dim);}
.navlinks{display:flex; gap:24px; margin-right:8px;}
.navlinks a{font:600 14px/1 'Hanken Grotesk',sans-serif; text-decoration:none; color:var(--ink); position:relative; padding:6px 0;}
.navlinks a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--terra); transition:right .3s var(--ease);}
.navlinks a:hover::after, .navlinks a.on::after{right:0;}
@media(max-width:880px){ .navlinks{display:none;} }
.reserve{background:var(--atl); color:#f4ede0; text-decoration:none; font:700 14px/1 'Hanken Grotesk',sans-serif;
  padding:13px 22px; border-radius:999px; white-space:nowrap; transition:background .25s, transform .2s var(--ease);}
.reserve:hover{background:var(--atl-l); transform:translateY(-2px);}

/* Hamburger, house pattern, terracotta middle line. */
.nav-toggle{display:block; background:none; border:none; cursor:pointer; padding:7px 8px 13px; order:-1;}
.nav-toggle svg{display:block;}
.nav-toggle .l{stroke:var(--ink); stroke-width:2; stroke-linecap:round; transform-box:fill-box; transition:transform .35s var(--ease), opacity .3s var(--ease); transform-origin:center;}
.nav-toggle .l2{stroke:var(--terra);}
.nav-toggle[aria-expanded="true"] .l1{transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .l2{opacity:0; transform:scaleX(.2);}
.nav-toggle[aria-expanded="true"] .l3{transform:translateY(-7px) rotate(-45deg);}
#menu-scrim{position:fixed; inset:0; background:rgba(22,51,79,.45); z-index:64; opacity:0; pointer-events:none; transition:opacity .35s;}
#menu-scrim.open{opacity:1; pointer-events:auto;}
#menu-panel{position:fixed; top:0; left:0; bottom:0; width:min(310px,85vw); background:var(--cream);
  border-right:1px solid var(--line); z-index:65; padding:88px 28px 28px; transform:translateX(-103%);
  transition:transform .42s var(--ease); overflow-y:auto;}
#menu-panel.open{transform:translateX(0);}
#menu-panel a{display:block; padding:12px 2px; font:600 17px/1.3 'Playfair Display',Georgia,serif; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--line); opacity:0; transform:translateX(-8px);
  transition:opacity .3s var(--ease) .08s, transform .3s var(--ease) .08s, color .2s;}
#menu-panel.open a{opacity:1; transform:none;}
#menu-panel a:hover{color:var(--terra);}
#menu-panel a.here{color:var(--terra);}
#menu-panel a.small{font:500 14.5px/1.4 'Hanken Grotesk',sans-serif; border-bottom:none; padding:8px 2px;}
#menu-panel .sub{font:700 10.5px/1 'Hanken Grotesk',sans-serif; letter-spacing:2.4px; text-transform:uppercase; color:var(--dim); margin:20px 0 4px;}
#menu-panel .sub:first-child{margin-top:0;}

/* The signature motion: an azulejo line-tile that draws itself beside section headings. */
.tilehead{display:flex; align-items:center; gap:14px;}
.tilehead svg{flex:none; width:34px; height:34px; overflow:visible;}
.tilehead svg path{fill:none; stroke:var(--atl); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:220; stroke-dashoffset:220;}
.tilehead svg circle{fill:var(--gold); opacity:0; transition:opacity .4s var(--ease) 1s;}
.tilehead.in svg path{animation:tiledraw 1.4s var(--ease) forwards;}
.tilehead.in svg circle{opacity:1;}
@keyframes tiledraw{to{stroke-dashoffset:0;}}
@media(prefers-reduced-motion:reduce){ .tilehead svg path{animation:none; stroke-dashoffset:0;} .tilehead svg circle{opacity:1;} }

.sec-head{max-width:700px; margin-bottom:40px;}
.sec-head h2{font-size:clamp(28px,3.8vw,44px); margin-top:14px;}
.sec-head p{margin-top:14px; color:var(--dim);}

/* Azulejo band, drawn as repeating SVG. */
.tiles{height:16px; background-repeat:repeat-x; background-size:64px 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16' viewBox='0 0 64 16'%3E%3Crect width='64' height='16' fill='%2316334f'/%3E%3Cpath d='M16 2 L23 8 L16 14 L9 8 Z M48 2 L55 8 L48 14 L41 8 Z' fill='%23f7f1e4' opacity='.9'/%3E%3Ccircle cx='32' cy='8' r='2.6' fill='%23c9973a'/%3E%3Ccircle cx='0' cy='8' r='2.6' fill='%23c9973a'/%3E%3Ccircle cx='64' cy='8' r='2.6' fill='%23c9973a'/%3E%3C/svg%3E");}

/* Designed art panels: hand-coded azulejo compositions that stand in beautifully until
   the restaurant's own photography arrives, then swap 1:1. Never generated imagery.
   v2 (2026-08-30): a fine repeating azulejo lattice now floats over each composition,
   with a slow light sweep, so the placeholders read as designed tilework, not flat art. */
.panel{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line);
  background:var(--atl); min-height:300px; display:flex; align-items:flex-end;
  box-shadow:inset 0 0 0 6px rgba(247,241,228,.07), inset 0 0 0 7px rgba(201,151,58,.18);}
.panel svg.art{position:absolute; inset:0; width:100%; height:100%;}
.panel img.art{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.panel.photo::before{display:none;}
.panel::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23f7f1e4' stroke-width='1'%3E%3Cpath d='M44 8 L80 44 L44 80 L8 44 Z'/%3E%3Cpath d='M44 22 L66 44 L44 66 L22 44 Z'/%3E%3Ccircle cx='44' cy='44' r='5'/%3E%3Cpath d='M0 44 H8 M80 44 H88 M44 0 V8 M44 80 V88'/%3E%3C/g%3E%3Ccircle cx='44' cy='44' r='2' fill='%23c9973a'/%3E%3C/svg%3E");
  background-size:88px 88px;}
.panel::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(247,241,228,.13) 46%, rgba(201,151,58,.11) 51%, transparent 64%);
  transform:translateX(-130%); animation:pansweep 7.5s var(--ease) infinite;}
@keyframes pansweep{0%{transform:translateX(-130%)} 60%{transform:translateX(130%)} 100%{transform:translateX(130%)}}
@media(prefers-reduced-motion:reduce){ .panel::after{animation:none; display:none;} }
.panel .cap{position:relative; z-index:2; padding:18px 20px; color:#e9e2d2; font-size:13px;
  letter-spacing:1.6px; text-transform:uppercase; font-weight:600;
  background:linear-gradient(transparent, rgba(14,35,56,.85));width:100%;}

.btn{display:inline-block; text-decoration:none; font:700 15px/1 'Hanken Grotesk',sans-serif;
  padding:15px 26px; border-radius:999px; transition:transform .2s var(--ease), background .25s;}
.btn.solid{background:var(--terra); color:#fff6ef; box-shadow:0 3px 0 var(--terra-d);}
.btn.solid:hover{transform:translateY(-2px);}
.btn.ghost{border:1.6px solid var(--ink); color:var(--ink); margin-left:10px;}
.btn.ghost:hover{background:var(--ink); color:var(--cream);}

/* Michelin recognition, shown honestly: Guide seasons for Petiscos, star in the lineage.
   The pills link to the restaurant's page on guide.michelin.com. */
.michelin{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.michelin .m{border:1px solid var(--line); background:var(--paper); border-radius:999px;
  font:700 12px/1 'Hanken Grotesk',sans-serif; letter-spacing:1.6px; padding:9px 15px; color:var(--ink);
  text-decoration:none; transition:border-color .25s, transform .2s var(--ease);}
a.michelin-link:hover .m, a.m:hover{border-color:var(--terra); transform:translateY(-1px);}
.michelin .m b{color:var(--terra);}
.michelin .mread{font:600 12px/1.4 'Hanken Grotesk',sans-serif; color:var(--dim);}
.michelin .mread a{color:var(--terra);}

footer{background:var(--atl-d); color:#b9c5d2; padding:52px 0 34px; font-size:14.5px;}
footer .lg{font-family:'Playfair Display',serif; font-size:22px; color:#f4ede0; margin-bottom:8px;}
footer a{color:#e0c489; text-decoration:underline; text-underline-offset:3px;}
footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px;}
@media(max-width:760px){ footer .cols{grid-template-columns:1fr;} }
footer .credit{margin-top:22px; font-size:12.5px; color:#7d8ea0;}
footer .credit a{color:#9fb0c1;}
.demobar{background:#0a1826; color:#7f92a6; text-align:center; font-size:12.5px; padding:12px 18px;}
.demobar a{color:var(--gold); text-decoration:none; font-weight:600;}

/* v4: real photos + video era */
.panel.photo::after{display:none;}
.panel video.art{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
@keyframes pbounce{0%{transform:none}30%{transform:translateY(-8px) scale(1.012)}55%{transform:translateY(2px)}78%{transform:translateY(-3px)}100%{transform:none}}
.panel.photo:hover .art{animation:pbounce .65s var(--ease);}
img.zoom{cursor:zoom-in;}
#plbox{position:fixed; inset:0; z-index:300; background:rgba(20,16,10,.93); display:none; align-items:center; justify-content:center; padding:4vh 4vw; cursor:zoom-out;}
#plbox.open{display:flex;}
#plbox img{max-width:100%; max-height:100%; border-radius:14px; box-shadow:0 30px 90px rgba(0,0,0,.6);}
#flyover{position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:multiply; overflow:hidden;}
#flyover video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1;}
.hero .wrap{position:relative; z-index:2;}
.fxhost{position:relative;}
.fxhost video.fx{position:absolute; width:132px; height:132px; right:2px; bottom:2px; mix-blend-mode:multiply; opacity:0; transition:opacity .3s var(--ease); pointer-events:none;}
.fxhost:hover video.fx{opacity:1;}
@media(prefers-reduced-motion:reduce){
  .panel.photo:hover .art{animation:none;}
  #flyover{display:none;}
  .fxhost video.fx{display:none;}
  .panel video.art{display:none;}
}
/* Online orders (Carlos 9/7): the DoorDash pill sits beside Reserve, same size, red so it reads as DoorDash. */
.order-dd{background:#d0250a;color:#fff;text-decoration:none;font:700 14px/1 'Hanken Grotesk',sans-serif;padding:13px 20px;border-radius:999px;white-space:nowrap;transition:background .25s,transform .2s var(--ease);display:inline-flex;align-items:center;gap:7px;margin-right:8px}
.order-dd:hover{background:#b01f08;transform:translateY(-2px)}
.order-dd svg{width:13px;height:13px;flex:none}
.btn.dd{background:#d0250a;color:#fff;border-color:#d0250a} .btn.dd:hover{background:#d82404;border-color:#d82404}
@media(max-width:820px){.top .order-dd{padding:11px 13px;font-size:12.5px;margin-right:6px}}
/* the top bar on a phone (Andre 9/8): everything fits on one line at 360 px, nothing clips */
.top .wrap{flex-wrap:nowrap;min-width:0} .brand{min-width:0;white-space:nowrap}
@media(max-width:640px){
  .top .wrap{height:62px;gap:8px;padding:0 12px}
  .nav-toggle{padding:5px 4px 11px}
  .brand b{font-size:19px} .brand span{display:none}
  .order-dd{padding:10px 11px;margin-right:0} .order-dd span{display:none} .order-dd svg{width:15px;height:15px}
  .reserve{padding:10px 13px;font-size:12.5px} .reserve .rl{display:none}
}
/* Mailing list (Carlos 9/7), styled like Loomwest's report-card block: a deep panel, a stitched tile band, a labelled form. */
.mlist{background:var(--atl);color:#f4ede0;text-align:center;position:relative;border-top:1px solid rgba(247,241,228,.14);border-bottom:1px solid rgba(247,241,228,.14);padding:84px 0 76px}
.mlist .wrap{max-width:820px}
.mlist .eyebrow{color:var(--gold)}
.mlist h2{color:#f4ede0;font-size:clamp(30px,4.2vw,46px);margin:12px 0 14px}
.mlist .subline{color:rgba(244,237,224,.78);max-width:58ch;margin:0 auto 30px;font-size:16.5px}
.mform{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;background:rgba(247,241,228,.05);border:1px solid rgba(247,241,228,.18);border-radius:20px;padding:22px;text-align:left;box-shadow:0 30px 60px rgba(0,0,0,.25)}
@media(max-width:700px){.mform{grid-template-columns:1fr}}
.mform label{display:flex;flex-direction:column;gap:6px;font:600 11px/1 'Hanken Grotesk',sans-serif;letter-spacing:2px;text-transform:uppercase;color:rgba(244,237,224,.7)}
.mform input{padding:13px 16px;border-radius:12px;border:1px solid rgba(247,241,228,.22);background:rgba(0,0,0,.28);color:#f4ede0;font:inherit;font-size:15px;letter-spacing:0;text-transform:none}
.mform input::placeholder{color:rgba(244,237,224,.45)}
.mform input:focus{outline:2px solid var(--gold);outline-offset:1px}
.mform button{background:var(--gold);color:#2a2008;border:0;border-radius:12px;padding:15px 22px;font:700 14px/1 'Hanken Grotesk',sans-serif;letter-spacing:.5px;cursor:pointer;transition:transform .2s var(--ease),background .2s;white-space:nowrap}
.mform button:hover{background:var(--gold-d);color:#fff;transform:translateY(-2px)}
.mform .ok{grid-column:1/-1;font-size:14px;color:var(--gold);min-height:1.2em}
.mlist .perks{list-style:none;margin:30px auto 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:820px}
@media(max-width:700px){.mlist .perks{grid-template-columns:1fr}}
.mlist .perks li{background:rgba(247,241,228,.05);border:1px solid rgba(247,241,228,.14);border-radius:14px;padding:16px 14px;font-size:14px;color:rgba(244,237,224,.85)}
.mlist .perks li b{display:block;font-family:'Fraunces',Georgia,serif;font-size:19px;color:var(--gold);margin-bottom:6px;font-weight:600}
.mlist .note{margin-top:22px;font-size:13px;color:rgba(244,237,224,.7)}
/* 9/7 night: the film reel (Our Story), the light form on the Gilroy page */
.mform.light{background:var(--paper); border-color:var(--line); box-shadow:0 20px 50px rgba(40,33,26,.12); max-width:820px; margin:0 auto;}
.mform.light label{color:var(--dim);} .mform.light input{background:#fff; border-color:var(--line); color:var(--ink);} .mform.light input::placeholder{color:#a89c88;}
.mform.light button{background:var(--terra); color:#fff6ef;} .mform.light button:hover{background:var(--terra-d); color:#fff;} .mform.light .ok{color:var(--terra);}

/* phone-only floating call button so every page keeps a tap-to-call within reach (gate rule, 2026-09-14) */
.floatcall{position:fixed; right:16px; bottom:16px; z-index:60; background:var(--terra); color:#fff6ef; font:700 15px/1 'Hanken Grotesk',sans-serif; padding:14px 20px; border-radius:999px; text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.28);}
@media(min-width:900px){.floatcall{display:none;}}

/* Mobile navigation on the RIGHT (Andre 2026-09-17), amending the 2026-09-07 left-hand
   standard: a phone is held in the right hand, so the hamburger and its panel belong under
   the thumb. Desktop is untouched. 880px is where .navlinks is hidden, the width at which the hamburger becomes the
   only way to navigate. Placed last in the file so it wins on source order. */
@media(max-width:880px){
  .nav-toggle{order:1;}
  #menu-panel{left:auto; right:0; border-right:0; border-left:1px solid var(--line); transform:translateX(103%);}
  #menu-panel.open{transform:translateX(0);}
  #menu-panel a{transform:translateX(8px);}
  #menu-panel.open a{transform:none;}
}
@media(prefers-reduced-motion:reduce){
  .nav-toggle .l,#menu-panel,#menu-panel a,#menu-scrim{transition:none;}
}