/* Porto A Casa: "The Little Room". Libre Caslon Display + Gelasio. burgundy #5A1A1F / cream #F6EEDF / basil #2F5D3A */
@font-face{font-family:'Libre Caslon Display';font-weight:400;font-display:swap;src:url(../fonts/LibreCaslonDisplay-normal-400.woff2) format('woff2')}
@font-face{font-family:'Gelasio';font-weight:400 700;font-display:swap;src:url(../fonts/Gelasio-normal-400.woff2) format('woff2')}
@font-face{font-family:'Gelasio';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/Gelasio-italic-400.woff2) format('woff2')}
:root{--bur:#5A1A1F;--cream:#F6EEDF;--basil:#2F5D3A;--red:#A3262C;--ink:#2A1A17;--s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:104px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-bottom:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bur);color:var(--cream);font-family:'Gelasio',Georgia,serif;font-size:1.0625rem;line-height:1.65}
img{display:block;max-width:100%;height:auto}
h1,h2{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;line-height:1.02;margin:0 0 var(--s3)}
h1{font-size:clamp(3rem,8.5vw,6.4rem)}
h1 em{font-style:normal;color:#F2C9B8}
h2{font-size:clamp(2rem,4.6vw,3.3rem)}
p{margin:0 0 var(--s2)}
a{color:inherit}
.num{white-space:nowrap}
:focus-visible{outline:3px solid #F2C9B8;outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--cream);color:var(--bur);padding:12px 16px;z-index:9}.skip:focus{left:8px}
.top,main>section{width:min(1120px,100% - 40px);margin-inline:auto}
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s1);padding:var(--s2) 0}
.brand{font-family:'Libre Caslon Display',serif;font-size:1.7rem;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.top nav{display:flex;gap:2px;margin-left:-12px}
.top nav a{min-height:44px;min-width:44px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-style:italic}
.top nav a:hover{text-decoration:underline;text-underline-offset:5px}
/* gingham band: two crossed stripe layers */
.gingham{height:28px;background-color:var(--cream);background-image:linear-gradient(90deg,rgba(163,38,44,.55) 50%,transparent 50%),linear-gradient(rgba(163,38,44,.55) 50%,transparent 50%);background-size:28px 28px;animation:slide 1.4s ease-out both}
@keyframes slide{from{background-position:-280px 0,-280px 0}to{background-position:0 0,0 0}}
.actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:50px;padding:12px 24px;text-decoration:none;font-weight:600;border-radius:3px;white-space:nowrap;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn-main{background:var(--basil);color:#fff}
.btn-line{border:1.5px solid currentColor}
/* hero */
.hero{display:grid;gap:var(--s4);padding:var(--s5) 0;align-items:center}
.eyebrow{font-style:italic;color:#F2C9B8}
.lede{font-size:1.2rem;max-width:32em}
.hero-plate{margin:0;position:relative}
.hero-plate img{width:100%;aspect-ratio:4/3;object-fit:cover;border:10px solid var(--cream);transform:rotate(1.5deg)}
@media (min-width:900px){.hero{grid-template-columns:1fr 520px}}
/* menu card */
.menu{padding:var(--s5) 0;display:grid;gap:var(--s4)}
.card{background:var(--cream);color:var(--ink);padding:var(--s4) var(--s3);border:1px solid #d8c9ac;outline:2px solid var(--cream);outline-offset:6px;text-align:center;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.card h2{color:var(--bur)}
.card-top{text-transform:uppercase;letter-spacing:.3em;font-size:.85rem;color:var(--basil)}
.dishes{list-style:none;padding:0;margin:0 0 var(--s3)}
.dishes li{padding:var(--s2) 0;border-bottom:1px dotted var(--bur);font-size:1.3rem}
.dishes li:last-child{border-bottom:0}
.card-note{font-style:italic;margin:0}
.plates{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.plates img{width:100%;aspect-ratio:1/1;object-fit:cover;border:6px solid var(--cream)}
.plates li:nth-child(odd){transform:rotate(-1.5deg)}.plates li:nth-child(even){transform:rotate(1.5deg) translateY(var(--s2))}
.plates.in li{animation:settle .7s ease-out both}
@keyframes settle{from{translate:0 18px}to{translate:0 0}}
@media (min-width:900px){.menu{grid-template-columns:420px 1fr;align-items:start}.plates{grid-template-columns:repeat(3,1fr)}}
/* quote */
.say{padding:var(--s5) 0;text-align:center}
.say figure{margin:0 auto;max-width:760px}
.say blockquote{margin:0;font-family:'Libre Caslon Display',serif;font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.3}
.say figcaption{margin-top:var(--s3);font-style:italic;color:#F2C9B8}
/* hours ticket */
.hours{padding:var(--s4) 0}
.ticket{background:var(--cream);color:var(--ink);max-width:620px;margin:0 auto;padding:var(--s4) var(--s3);border-top:12px solid var(--basil)}
.ticket h2{color:var(--bur)}
.ticket dl{margin:0 0 var(--s3)}
.ticket dl div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s1);padding:12px 0;border-bottom:1px dotted var(--bur)}
.ticket dt{font-weight:600}.ticket dd{margin:0;white-space:nowrap}
/* find */
.find{padding:var(--s5) 0 var(--s6);display:grid;gap:var(--s4);align-items:center}
.find img{width:min(360px,80%);aspect-ratio:3/4;object-fit:cover;border:8px solid var(--cream)}
.find address{font-style:normal;font-size:1.2rem}
@media (min-width:768px){.find{grid-template-columns:360px 1fr}.find img{width:100%}}
.foot{text-align:center;padding:var(--s4) 20px 120px;background:var(--ink);color:var(--cream)}
.foot p{margin:0}
.bar{position:fixed;left:0;right:0;bottom:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--ink);z-index:5}
.bar .btn{width:100%}
@media (min-width:900px){.bar{display:none}.foot{padding-bottom:var(--s4)}}
@media (max-width:359px){.btn{padding:12px 16px}}