
:root { --ink:#0c0c0b; --cream:#f6ecd6; --paper:#fffaf0; --red:#9d2f22; --line:rgba(12,12,11,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
body, button, input, textarea, select { font-size:16px; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
h1,h2,h3,p,figure { margin-top:0; }
h1,h2,h3 { font-family:Georgia, "Times New Roman", serif; font-weight:400; line-height:.91; letter-spacing:-.045em; }
em { font-weight:400; color:var(--red); }
.section-pad { padding:120px max(6vw, 32px); }
.eyebrow { font-size:11px; line-height:1; font-weight:700; text-transform:uppercase; letter-spacing:.2em; }

.site-header { height:88px; display:flex; align-items:center; justify-content:space-between; padding:0 max(4vw, 24px); background:var(--ink); color:var(--cream); border-bottom:1px solid rgba(246,236,214,.22); position:relative; z-index:10; }
.brand { width:205px; height:68px; overflow:hidden; display:flex; align-items:center; }
.brand img { width:100%; height:100%; object-fit:contain; }
.site-header nav { display:flex; align-items:center; gap:38px; font-size:12px; text-transform:uppercase; font-weight:700; letter-spacing:.12em; }
.site-header nav a { transition:opacity .2s; }
.site-header nav a:hover { opacity:.65; }
.site-header .nav-cta { border:1px solid var(--cream); padding:12px 18px; }

.hero { min-height:calc(100vh - 88px); display:grid; grid-template-columns:58% 42%; background:var(--ink); color:var(--cream); }
.hero-photo { background:linear-gradient(0deg,rgba(0,0,0,.08),rgba(0,0,0,.08)),url('./images/hero-pizza-new.jpg') center center/cover no-repeat; min-height:680px; }
.hero-panel { padding:clamp(65px, 8vw, 130px) clamp(40px, 5.5vw, 92px); position:relative; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.hero-panel::before { content:""; position:absolute; inset:26px; border:1px solid rgba(246,236,214,.15); pointer-events:none; }
.hero h1 { font-size:clamp(62px, 7.2vw, 118px); margin:28px 0 30px; position:relative; }
.hero h1 em { color:var(--cream); font-style:italic; }
.hero-copy { font-family:Georgia,serif; font-size:18px; line-height:1.65; max-width:520px; color:rgba(246,236,214,.78); position:relative; }
.hero-actions { display:flex; align-items:center; gap:30px; margin-top:34px; position:relative; }
.button { display:inline-flex; align-items:center; justify-content:center; padding:17px 24px; border:1px solid; text-transform:uppercase; letter-spacing:.13em; font-size:11px; font-weight:700; cursor:pointer; transition:.2s; }
.button-light { border-color:var(--cream); background:var(--cream); color:var(--ink); }
.button-light:hover { background:transparent; color:var(--cream); }
.button-dark { border-color:var(--ink); background:var(--ink); color:var(--cream); }
.button-dark:hover { background:transparent; color:var(--ink); }
.text-link { display:inline-flex; gap:14px; align-items:center; padding-bottom:7px; border-bottom:1px solid; text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:700; }
.light-link { color:var(--cream); }
.intro { display:grid; grid-template-columns:1fr 1fr; gap:12vw; align-items:start; background:var(--paper); }
.intro h2,.section-heading h2,.story-copy h2,.contact h2,.about-text h2 { font-size:clamp(56px, 6.5vw, 100px); margin:30px 0 0; }
.intro-copy { padding-top:46px; max-width:580px; }
.intro-copy p { color:#57534d; line-height:1.8; }
.intro-copy .lead { color:var(--ink); font-family:Georgia,serif; font-size:26px; line-height:1.4; }
.intro-copy .text-link { margin-top:22px; }

.events { background:var(--ink); color:var(--cream); }
.section-heading { display:grid; grid-template-columns:2fr 1fr; align-items:end; gap:5vw; margin-bottom:70px; }
.section-heading h2 { margin:0; }
.section-heading > p:last-child { font-family:Georgia,serif; font-size:17px; line-height:1.6; color:rgba(246,236,214,.68); }
.service-list { border-top:1px solid rgba(246,236,214,.24); }
.service { display:grid; grid-template-columns:1fr 1.2fr 100px; gap:40px; align-items:center; padding:36px 0; border-bottom:1px solid rgba(246,236,214,.24); transition:.25s; }
.service:hover { padding-left:12px; background:rgba(246,236,214,.035); }
.service h3 { font-size:38px; margin:0; }
.service p { font-family:Georgia,serif; font-size:15px; line-height:1.6; color:rgba(246,236,214,.65); margin:0; }
.service-enquire { text-transform:uppercase; font-size:10px; letter-spacing:.14em; }
.service-enquire b { font-size:16px; margin-left:10px; }

.gallery { background:var(--cream); }
.gallery .section-heading { grid-template-columns:1fr 2fr 1fr; }
.gallery .section-heading h2 em { white-space:nowrap; }
.social-links { justify-self:end; display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.instagram-link { justify-self:end; font-size:11px; text-transform:uppercase; letter-spacing:.13em; border-bottom:1px solid; padding-bottom:8px; font-weight:700; }
.gallery-grid { display:grid; grid-template-columns:1.15fr .85fr 1fr; grid-template-rows:430px 280px; gap:18px; }
.gallery-item { margin:0; overflow:hidden; background:#d9cbb0; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.gallery-item:hover img { transform:scale(1.025); }
.gallery-1 { grid-row:1 / 3; }
.gallery-2 { grid-column:2; grid-row:1; }
.gallery-3 { grid-column:3; grid-row:1; }
.gallery-4 { grid-column:2 / 4; grid-row:2; }
.gallery-4 img { object-position:center 60%; }

.story-teaser { display:grid; grid-template-columns:1.05fr .95fr; min-height:750px; }
.story-photo { overflow:hidden; }
.story-photo img { width:100%; height:100%; object-fit:cover; object-position:center 48%; }
.story-copy { background:var(--red); color:var(--cream); padding:100px 8vw; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.story-copy h2 { font-size:clamp(46px,5.2vw,78px); margin-bottom:48px; }
.story-copy em { color:var(--cream); }
.story-copy p:not(.eyebrow) { max-width:520px; font-family:Georgia,serif; font-size:18px; line-height:1.65; color:rgba(246,236,214,.8); }
.story-copy .button { margin-top:25px; background:var(--cream); color:var(--ink); border-color:var(--cream); }

.contact { display:grid; grid-template-columns:.8fr 1.2fr; gap:10vw; }
.contact-intro > p:not(.eyebrow) { font-family:Georgia,serif; font-size:18px; line-height:1.65; color:#5a554c; max-width:500px; }
.contact-details { margin-top:50px; border-top:1px solid var(--line); }
.contact-details a { display:block; padding:17px 0; border-bottom:1px solid var(--line); font-family:Georgia,serif; font-size:18px; }
.contact-details a[href^="tel:"], footer a[href^="tel:"] { white-space:nowrap; }
.contact-details span { width:100px; display:inline-block; font:700 9px Arial,sans-serif; text-transform:uppercase; letter-spacing:.14em; color:#777067; }
.contact-form { align-self:center; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.contact-form label { display:block; font-size:9px; font-weight:700; letter-spacing:.16em; margin-bottom:25px; }
.contact-form input,.contact-form select,.contact-form textarea { width:100%; border:0; border-bottom:1px solid var(--ink); background:transparent; border-radius:0; padding:13px 0; color:var(--ink); font:16px Georgia,serif; outline:none; }
.contact-form textarea { resize:vertical; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:var(--red); box-shadow:0 1px 0 var(--red); }
.contact-form button { margin-top:5px; }
.form-note { margin-top:15px; font-family:Georgia,serif; color:#57534d; }

footer { background:var(--ink); color:var(--cream); min-height:280px; padding:60px max(5vw, 30px) 35px; display:grid; grid-template-columns:240px 1fr 1fr; align-items:start; gap:5vw; }
footer img { width:230px; height:auto; object-fit:contain; align-self:start; }
footer > p:not(.legal) { font-family:Georgia,serif; font-size:18px; color:rgba(246,236,214,.65); padding-top:22px; }
footer > div { padding-top:20px; display:flex; flex-direction:column; gap:12px; font-size:12px; letter-spacing:.05em; }
.legal { grid-column:1 / -1; border-top:1px solid rgba(246,236,214,.2); padding-top:22px; margin:20px 0 0; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:rgba(246,236,214,.42); }

.about-hero { background:var(--ink); color:var(--cream); text-align:center; padding:115px 30px 140px; }
.about-hero h1 { font-size:clamp(68px, 9vw, 145px); margin:35px 0 0; }
.about-hero em { color:var(--cream); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:9vw; align-items:center; }
.about-image { height:760px; overflow:hidden; }
.about-image img { width:100%; height:100%; object-fit:cover; }
.about-text .lead { font-family:Georgia,serif; font-size:24px; line-height:1.45; color:var(--ink); }
.about-text p { line-height:1.75; color:#5a554c; }
.about-text .button { margin-top:20px; }
.about-values { background:var(--cream); display:grid; grid-template-columns:repeat(3,1fr); gap:7vw; }
.about-values > div { border-top:1px solid var(--ink); padding-top:25px; }
.about-values span { font-size:10px; color:#726b5e; }
.about-values h3 { font-size:42px; margin:50px 0 20px; }
.about-values p { font-family:Georgia,serif; line-height:1.65; color:#5a554c; }
.about-cta { background:var(--red); color:var(--cream); text-align:center; padding:120px 30px; }
.about-cta h2 { font-size:clamp(62px, 8vw, 120px); margin:35px 0 45px; }
.about-cta em { color:var(--cream); }

@media (max-width: 900px) {
  .site-header nav a:not(.nav-cta) { display:none; }
  .site-header nav { gap:0; }
  .hero { grid-template-columns:1fr; }
  .hero-photo { min-height:58vh; }
  .hero-panel { min-height:580px; }
  .intro,.story-teaser,.contact,.about-grid { grid-template-columns:1fr; }
  .section-heading { grid-template-columns:1fr; align-items:start; }
  .section-heading > p:last-child,.instagram-link,.social-links { justify-self:start; max-width:500px; }
  .service { grid-template-columns:1fr 1.2fr; }
  .service-enquire { display:none; }
  .gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:500px 330px 330px; }
  .gallery-1 { grid-column:1 / 3; grid-row:1; }
  .gallery-2 { grid-column:1; grid-row:2; }
  .gallery-3 { grid-column:2; grid-row:2; }
  .gallery-4 { grid-column:1 / 3; grid-row:3; }
  .story-photo { min-height:700px; }
  .about-image { height:650px; }
  footer { grid-template-columns:1fr 1fr; }
  footer img { grid-column:1 / -1; }
  .about-values { grid-template-columns:1fr; }
}

@media (max-width: 600px) {
  html,body { max-width:100%; overflow-x:hidden; }
  .section-pad { padding:80px 24px; }
  .site-header { height:76px; padding:0 18px; }
  .brand { width:160px; height:56px; }
  .site-header .nav-cta { padding:11px 14px; }
  .hero { min-height:auto; }
  .hero-photo { min-height:54vh; }
  .hero-panel { min-height:540px; padding:70px 28px; }
  .hero-panel::before { inset:14px; }
  .hero h1 { font-size:58px; }
  .hero-actions { flex-direction:column; align-items:flex-start; }
  .intro h2,.section-heading h2,.story-copy h2,.contact h2,.about-text h2 { font-size:52px; }
  .gallery .section-heading h2 { font-size:44px; }
  .gallery .section-heading { grid-template-columns:1fr; gap:30px; }
  .section-heading > *, .contact > *, footer > * { min-width:0; max-width:100%; }
  .social-links { width:100%; gap:14px; }
  .instagram-link { max-width:100%; font-size:10px; letter-spacing:.1em; white-space:normal; overflow-wrap:anywhere; }
  .contact-details a, footer a { overflow-wrap:anywhere; }
  .intro { gap:30px; }
  .intro-copy { padding-top:0; }
  .service { grid-template-columns:1fr; gap:15px; align-items:start; }
  .service p { grid-column:1; }
  .gallery-grid { display:grid; grid-template-columns:1.15fr .85fr; grid-template-rows:300px 210px 260px; gap:10px; }
  .gallery-item { height:auto; margin:0; }
  .gallery-1 { grid-column:1 / 3; grid-row:1; }
  .gallery-2 { grid-column:1; grid-row:2; }
  .gallery-3 { grid-column:2; grid-row:2; }
  .gallery-4 { grid-column:1 / 3; grid-row:3; }
  .story-photo { min-height:520px; }
  .story-copy { padding:80px 28px; }
  .field-row { grid-template-columns:1fr; gap:0; }
  .contact-details span { display:block; width:auto; margin-bottom:6px; }
  footer { grid-template-columns:1fr; }
  footer img,footer .legal { grid-column:1; }
  .about-hero { padding:90px 22px 110px; }
  .about-hero h1 { font-size:64px; }
  .about-image { height:520px; }
  .about-cta h2 { font-size:58px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }
