:root { --ink:#20211d; --paper:#f3eee4; --paper-dark:#e6dccd; --tomato:#a43a28; --olive:#51634b; --butter:#f7bc52; --line:rgba(32,33,29,.18); --hero:url("./assets/hero-osteria.png"); --story:url("./assets/pasta.png"); --serif: Iowan Old Style, Baskerville, Georgia, serif; --sans: Inter, Helvetica Neue, Arial, sans-serif; --page:min(1240px, calc(100% - 2.5rem)); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; }
body.menu-open { overflow:hidden; }
a { color:inherit; text-decoration:none; } button { font:inherit; color:inherit; } img { display:block; width:100%; height:100%; object-fit:cover; }
::selection { background:var(--tomato); color:var(--paper); }
.header { position:fixed; z-index:20; top:0; left:0; width:100%; height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 1.25rem; color:var(--paper); border-bottom:1px solid rgba(255,255,255,.24); transition:background .25s ease, color .25s ease, height .25s ease; }
.header.scrolled { height:66px; background:rgba(243,238,228,.95); color:var(--ink); border-color:var(--line); backdrop-filter:blur(12px); }
.brand, .footer-brand { font-size:1.35rem; font-weight:800; letter-spacing:.12em; }
.logo-image { width:auto; height:30px; max-width:170px; object-fit:contain; object-position:left; }
.nav { position:fixed; inset:0; z-index:-1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; background:var(--tomato); color:var(--paper); opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease; font-family:var(--serif); font-size:2.6rem; }
.nav.open { opacity:1; visibility:visible; }.header-cta { display:none; }.menu-button { display:grid; place-content:center; gap:6px; width:42px; height:42px; padding:0; border:1px solid currentColor; background:transparent; cursor:pointer; }.menu-button i { display:block; width:17px; height:1px; background:currentColor; transition:transform .22s ease; }.menu-button.active i:first-child { transform:translateY(3.5px) rotate(45deg); }.menu-button.active i:last-child { transform:translateY(-3.5px) rotate(-45deg); }
.hero { position:relative; isolation:isolate; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; padding:7.8rem 1.25rem 1.5rem; color:var(--paper); background:var(--ink); }.hero::before { content:""; position:absolute; inset:0; z-index:-2; background:var(--hero) 62% center / cover no-repeat; filter:saturate(.78) contrast(1.06); transform:scale(1.01); }.hero-overlay { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(18,18,16,.86),rgba(18,18,16,.26) 75%), linear-gradient(0deg,rgba(18,18,16,.62),transparent 48%); }.hero-copy { max-width:680px; }.hero-eyebrow,.kicker { margin:0 0 1.05rem; text-transform:uppercase; font-size:.64rem; letter-spacing:.18em; font-weight:700; }.hero h1,h2 { margin:0; font-size:clamp(3.55rem,16vw,7rem); line-height:.86; letter-spacing:-.065em; font-weight:650; }.hero h1 em,h2 em { font-family:var(--serif); font-weight:400; }.hero-copy>p:not(.hero-eyebrow) { max-width:410px; margin:1.5rem 0 0; font-size:.95rem; line-height:1.65; }.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; margin-top:1.8rem; }.button { display:inline-flex; align-items:center; justify-content:space-between; gap:1.5rem; min-width:184px; padding:1rem 1.1rem; text-transform:uppercase; font-size:.66rem; letter-spacing:.14em; font-weight:800; transition:transform .2s ease,background .2s ease; }.button:hover { transform:translateY(-2px); }.button-sun { background:var(--butter); color:var(--ink); }.underlined { border-bottom:1px solid currentColor; padding-bottom:.2rem; font-size:.73rem; letter-spacing:.05em; }.hero-note { margin:4rem 0 0; padding-top:1rem; border-top:1px solid rgba(255,255,255,.35); text-transform:uppercase; font-size:.56rem; letter-spacing:.12em; }
.section,.intro,.menu-section,.contact { padding:5.8rem 1.25rem; }.intro { position:relative; display:grid; grid-template-columns:42px 1fr; gap:1rem; background:var(--paper-dark); }.intro-number { color:var(--tomato); font-family:var(--serif); font-size:1.3rem; }.intro-copy h2,.menu-heading h2,.story-copy h2,.gallery-heading h2,.reviews h2,.contact h2,.closing h2 { max-width:760px; }.body-copy { max-width:505px; margin:1.8rem 0 0; font-family:var(--serif); font-size:1.35rem; line-height:1.4; }.signature { display:inline-block; max-width:275px; margin:2rem 0 0; padding-top:.9rem; border-top:2px solid var(--tomato); color:var(--tomato); font-size:.75rem; line-height:1.5; font-weight:700; }
.menu-section { background:var(--olive); color:var(--paper); }.menu-heading>p:last-child { max-width:430px; margin:1.6rem 0 0; font-size:.94rem; line-height:1.65; }.menu-list { margin-top:3.5rem; }.menu-group { padding:1.6rem 0 2rem; border-top:1px solid rgba(243,238,228,.32); }.menu-group h3 { margin:0 0 1rem; color:var(--butter); text-transform:uppercase; letter-spacing:.16em; font-size:.64rem; }.menu-group article { display:grid; grid-template-columns:1fr auto; gap:1.1rem; padding:.8rem 0; }.menu-group h4 { margin:0; font-family:var(--serif); font-size:1.25rem; font-weight:400; line-height:1.15; }.menu-group p { margin:.35rem 0 0; color:rgba(243,238,228,.65); font-size:.67rem; line-height:1.4; }.menu-group strong { white-space:nowrap; font-size:.78rem; }.menu-footnote { margin:1.2rem 0 0; color:rgba(243,238,228,.65); font-size:.61rem; }
.story { display:grid; background:var(--tomato); color:var(--paper); }.story-photo { min-height:61vh; background:var(--story) center/cover no-repeat; filter:saturate(.7) contrast(1.05); }.story-copy { padding:5rem 1.25rem 5.6rem; }.story-copy>p:not(.kicker) { margin:1.7rem 0 0; max-width:490px; font-size:.95rem; line-height:1.7; }.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; max-width:470px; margin-top:3rem; padding-top:1.2rem; border-top:1px solid rgba(243,238,228,.4); }.facts div { display:grid; gap:.35rem; }.facts strong { font-family:var(--serif); font-size:1.75rem; font-weight:400; }.facts span { font-size:.55rem; text-transform:uppercase; letter-spacing:.1em; line-height:1.3; opacity:.7; }
.gallery { padding:5.8rem 1.25rem 1.25rem; background:var(--paper); }.gallery-heading { margin-bottom:3rem; }.gallery-grid { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:220px; gap:.65rem; }.gallery-card { overflow:hidden; margin:0; background:var(--paper-dark); }.gallery-card img { transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s ease; filter:saturate(.85); }.gallery-card:hover img { transform:scale(1.045); filter:saturate(1); }.gallery-card-1 { grid-row:span 2; }.gallery-card-4 { grid-column:span 2; }
.reviews { background:var(--paper-dark); }.reviews-heading { display:grid; gap:2rem; }.rating { display:grid; grid-template-columns:auto auto; gap:.2rem .7rem; align-items:center; align-self:end; }.rating strong { grid-row:span 2; font-family:var(--serif); font-size:2.2rem; font-weight:400; }.rating span,.review-stars { color:var(--tomato); letter-spacing:.08em; font-size:.72rem; }.rating small { font-size:.59rem; color:rgba(32,33,29,.57); }.reviews-grid { display:grid; gap:1px; margin-top:3rem; background:var(--line); border:1px solid var(--line); }.review-card { display:flex; flex-direction:column; justify-content:space-between; min-height:250px; padding:1.5rem; background:var(--paper-dark); }.review-card blockquote { margin:1.5rem 0 auto; font-family:var(--serif); font-size:1.3rem; line-height:1.38; }.review-card footer { display:grid; gap:.25rem; margin-top:2rem; }.review-card footer strong { text-transform:uppercase; letter-spacing:.11em; font-size:.62rem; }.review-card footer span { color:rgba(32,33,29,.56); font-size:.61rem; }
.contact { background:var(--paper); }.contact-copy address { max-width:300px; margin:2rem 0 1.5rem; font-family:var(--serif); font-style:normal; font-size:1.45rem; line-height:1.3; }.contact-links { display:grid; justify-items:start; gap:.65rem; }.contact-links a { padding-bottom:.15rem; border-bottom:1px solid var(--ink); font-size:.75rem; }.hours { margin-top:4rem; }.hours-row { display:flex; justify-content:space-between; gap:1rem; max-width:500px; padding:.75rem 0; border-bottom:1px solid var(--line); font-size:.72rem; }.hours-row strong { font-weight:500; text-align:right; }.map { height:360px; margin-top:4rem; overflow:hidden; }.map iframe { width:100%; height:100%; border:0; filter:grayscale(1) contrast(.88); }
.closing { position:relative; isolation:isolate; display:grid; min-height:650px; color:var(--paper); background:var(--ink); }.closing-photo { position:absolute; inset:0; z-index:-2; background:var(--hero) center/cover no-repeat; filter:grayscale(.35) saturate(.6) brightness(.68); }.closing::after { content:""; position:absolute; inset:0; z-index:-1; background:rgba(22,23,20,.65); }.closing-copy { align-self:center; padding:5rem 1.25rem; max-width:720px; }.closing-copy>p:not(.kicker) { max-width:400px; margin:1.6rem 0 2rem; line-height:1.65; }
footer { display:grid; grid-template-columns:1fr auto; gap:2rem 1rem; padding:3.5rem 1.25rem 5.5rem; background:var(--ink); color:var(--paper); } footer p,footer a { margin:0; font-size:.67rem; text-transform:uppercase; letter-spacing:.11em; } footer>p { align-self:end; color:rgba(243,238,228,.55); } footer>a { align-self:end; text-align:right; } footer small { grid-column:1/-1; padding-top:1rem; border-top:1px solid rgba(243,238,228,.2); color:rgba(243,238,228,.43); font-size:.56rem; text-transform:uppercase; letter-spacing:.1em; }.floating-book { position:fixed; z-index:15; right:1rem; bottom:1rem; display:flex; gap:.6rem; align-items:center; padding:.7rem .85rem .7rem 1rem; background:var(--butter); color:var(--ink); font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; box-shadow:0 8px 28px rgba(0,0,0,.22); }.floating-book span { font-size:1rem; }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1); }.reveal.visible { opacity:1; transform:none; }
@media (min-width:760px) { :root { --page:min(1240px,calc(100% - 6rem)); }.header { height:94px; padding-inline:max(3rem,calc((100vw - 1240px)/2)); }.header.scrolled { height:74px; }.nav { position:static; z-index:auto; flex-direction:row; background:transparent; color:inherit; opacity:1; visibility:visible; font-family:var(--sans); font-size:.64rem; text-transform:uppercase; letter-spacing:.14em; }.header-cta { display:inline-flex; padding:.78rem 1rem; border:1px solid currentColor; font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; }.menu-button { display:none; }.hero { padding:11rem max(3rem,calc((100vw - 1240px)/2)) 2.8rem; }.hero h1,h2 { font-size:clamp(5.1rem,8vw,8.3rem); }.hero-copy>p:not(.hero-eyebrow) { font-size:1rem; }.hero-note { margin-top:6rem; }.section,.intro,.menu-section,.contact { padding:8rem max(3rem,calc((100vw - 1240px)/2)); }.intro { grid-template-columns:1fr 1.8fr; gap:7vw; }.intro-copy { max-width:800px; }.body-copy { font-size:1.65rem; }.menu-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:8vw; }.menu-list { margin-top:0; }.menu-footnote { grid-column:2; }.menu-group h4 { font-size:1.42rem; }.story { grid-template-columns:1fr 1fr; min-height:790px; }.story-photo { min-height:auto; }.story-copy { padding:8rem max(4rem,8vw); align-self:center; }.gallery { padding:8rem 1.5rem 1.5rem; }.gallery-heading { padding-inline:max(1.5rem,calc((100vw - 1240px)/2)); }.gallery-grid { grid-template-columns:1.1fr .9fr 1fr; grid-template-rows:340px 340px; grid-auto-rows:unset; gap:.8rem; }.gallery-card-1 { grid-row:span 2; }.gallery-card-4 { grid-column:2/4; }.reviews-heading { grid-template-columns:1fr auto; align-items:end; }.reviews-grid { grid-template-columns:repeat(3,1fr); }.contact { display:grid; grid-template-columns:1fr 1fr; column-gap:10vw; }.hours { margin-top:0; }.map { grid-column:1/-1; height:550px; }.closing { min-height:730px; }.closing-copy { padding-left:max(3rem,calc((100vw - 1240px)/2)); } footer { grid-template-columns:1fr auto auto; padding:4.5rem max(3rem,calc((100vw - 1240px)/2)) 2.5rem; } footer small { grid-column:1/-1; margin-top:3rem; }.floating-book { right:1.5rem; bottom:1.5rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }.reveal { opacity:1; transform:none; } }