/*
Theme Name: Hellocello Sonoma
Theme URI: https://hellosonoma.com/
Author: Hellocello / Prohibition Spirits
Description: A handcrafted one-page WordPress theme for Hellocello.
Version: 1.0.0
Text Domain: hellocello
*/

:root { --cream:#f7f0df; --paper:#fffaf0; --lemon:#f6d731; --orange:#e9571e; --red:#c73a23; --green:#163e2b; --ink:#173429; --soft-green:#dce5c4; --line:rgba(23,52,41,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
img { display:block; width:100%; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.045em; }
h1 em,h2 em { color:var(--orange); font-weight:400; }
.section-pad { padding-left:clamp(24px,6vw,96px); padding-right:clamp(24px,6vw,96px); }
.eyebrow { color:var(--red); font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.eyebrow.light { color:var(--lemon); }
.button-row { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:52px; padding:0 24px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; transition:transform .2s,background .2s,color .2s; }
.button:hover { transform:translateY(-2px); }
.button span { font-size:18px; }
.button.primary { background:var(--orange); color:#fff; }
.button.dark { background:var(--green); color:#fff; }
.button.text-button { padding-inline:4px; border-radius:0; border-bottom:1px solid var(--ink); }
.button.light-button { background:var(--lemon); color:var(--ink); }
.button.outline-light { border:1px solid rgba(255,255,255,.5); color:#fff; }

.site-header { height:86px; padding:10px clamp(22px,5vw,72px); display:grid; grid-template-columns:190px 1fr auto; gap:28px; align-items:center; background:var(--paper); border-bottom:1px solid var(--line); position:relative; z-index:10; }
.brand img { width:148px; height:62px; object-fit:contain; }
.desktop-nav { display:flex; justify-content:center; gap:clamp(18px,3vw,48px); }
.desktop-nav a { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.desktop-nav a:hover { color:var(--orange); }
.nav-cta { background:var(--green); color:#fff; border-radius:999px; padding:14px 22px; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }

.hero { min-height:calc(100vh - 86px); display:grid; grid-template-columns:54% 46%; background:var(--paper); overflow:hidden; }
.hero-copy { position:relative; padding:clamp(70px,10vh,120px) clamp(28px,7vw,110px) 70px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; background:radial-gradient(circle at 18% 90%,rgba(246,215,49,.27),transparent 26%),var(--paper); }
.hero h1 { font-size:clamp(54px,6.3vw,104px); line-height:.94; max-width:850px; margin:20px 0 30px; }
.hero-intro { font-family:Georgia,serif; font-size:clamp(17px,1.4vw,22px); line-height:1.6; max-width:620px; color:#446255; }
.hero .button-row { margin-top:18px; }
.hero-stamp { width:116px; height:116px; border:1px solid var(--red); border-radius:50%; color:var(--red); display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(-7deg); text-align:center; margin-top:46px; font-size:9px; letter-spacing:.15em; text-transform:uppercase; }
.hero-stamp strong { font-family:Georgia,serif; font-size:20px; letter-spacing:.06em; margin:4px 0; }
.hero-image { position:relative; background:#fff; border-left:1px solid var(--line); min-height:680px; }
.hero-image img { width:100%; height:100%; object-fit:cover; object-position:62% bottom; }
.vertical-note { position:absolute; top:50%; right:18px; margin:0; writing-mode:vertical-rl; transform:translateY(-50%); color:var(--red); font-size:9px; font-weight:800; letter-spacing:.2em; }
.marquee { min-height:58px; padding:12px clamp(20px,5vw,72px); background:var(--lemon); display:flex; align-items:center; justify-content:space-between; gap:28px; color:var(--green); overflow:hidden; white-space:nowrap; font-size:12px; font-weight:900; letter-spacing:.18em; }
.marquee i { color:var(--orange); font-style:normal; }

.intro { padding-top:120px; padding-bottom:110px; display:grid; grid-template-columns:1.15fr .85fr; align-items:end; gap:10vw; }
.intro h2 { font-size:clamp(46px,6vw,88px); line-height:1.03; max-width:820px; margin-bottom:0; }
.lead { font-family:Georgia,serif; font-size:clamp(20px,2.1vw,31px); line-height:1.48; color:#496558; margin:0; }
.craft-grid { padding-bottom:120px; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(40px,7vw,110px); align-items:center; }
.photo-card { margin:0; position:relative; }
.photo-card img { aspect-ratio:1.38; object-fit:cover; }
.photo-card figcaption { position:absolute; left:22px; bottom:22px; background:var(--paper); padding:13px 16px; font:italic 17px Georgia,serif; }
.craft-copy h2 { font-size:clamp(48px,5.2vw,78px); line-height:1; margin:12px 0 28px; }
.craft-copy>p:not(.eyebrow) { max-width:600px; color:#516b5f; font-size:17px; line-height:1.75; }
.craft-points { margin-top:36px; border-top:1px solid var(--line); }
.craft-points article { display:grid; grid-template-columns:42px 140px 1fr; gap:12px; align-items:baseline; border-bottom:1px solid var(--line); padding:17px 0; }
.craft-points span { color:var(--orange); font-size:11px; font-weight:800; }
.craft-points h3 { margin:0; font:19px Georgia,serif; }
.craft-points p { margin:0; color:#63786f; font-size:13px; line-height:1.5; }

.cellos { padding-top:120px; padding-bottom:120px; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(48px,9vw,140px); background:var(--soft-green); }
.cellos-photo-wrap { position:relative; align-self:stretch; min-height:720px; }
.cellos-photo-wrap img { height:100%; object-fit:cover; }
.photo-number { position:absolute; right:-22px; top:30px; padding:13px 18px; background:var(--lemon); color:var(--ink); transform:rotate(3deg); font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.cellos-copy { padding-block:18px; }
.cellos-copy h2 { font-size:clamp(50px,5.7vw,84px); line-height:1; margin:14px 0 28px; }
.cellos-copy>p:not(.eyebrow):not(.seasonal-note) { max-width:650px; font-size:17px; line-height:1.7; color:#496458; }
.cello-list { list-style:none; margin:38px 0 18px; padding:0; border-top:1px solid var(--line); }
.cello-list li { min-height:62px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:42px 1fr auto; gap:16px; align-items:center; }
.cello-list span { font-size:10px; font-weight:900; color:var(--orange); }
.cello-list strong { font-family:Georgia,serif; font-size:20px; font-weight:400; }
.cello-list em { color:#6d7d72; font-size:12px; }
.seasonal-note { font:italic 15px Georgia,serif; color:var(--red); }

.journey { padding:120px 0; background:var(--green); color:#fff; }
.journey-heading h2 { max-width:1100px; font-size:clamp(50px,6.5vw,92px); line-height:1.02; margin:18px 0 70px; }
.journey-heading h2 em { color:var(--lemon); }
.journey-images { display:grid; grid-template-columns:.8fr 1.35fr .85fr; gap:20px; align-items:stretch; }
.journey-images figure { margin:0; position:relative; min-height:560px; overflow:hidden; }
.journey-images img { width:100%; height:100%; object-fit:cover; }
.journey-images figcaption { position:absolute; left:0; bottom:0; width:100%; padding:46px 22px 20px; display:grid; grid-template-columns:34px 1fr; background:linear-gradient(transparent,rgba(9,28,18,.92)); }
.journey-images figcaption b { color:var(--lemon); font-size:10px; }
.journey-images figcaption span { font:25px Georgia,serif; }
.journey-images figcaption small { grid-column:2; opacity:.7; margin-top:4px; }
.journey-story { margin-top:70px; display:grid; grid-template-columns:1fr 1fr; gap:9vw; }
.journey-story p { font-family:Georgia,serif; font-size:clamp(18px,1.65vw,25px); line-height:1.65; color:#d8e2d3; }
.journey-story .dropcap::first-letter { float:left; font-size:84px; line-height:.76; padding-right:11px; color:var(--lemon); }
.journey-story strong { color:var(--lemon); }

.values { padding-top:120px; padding-bottom:120px; display:grid; grid-template-columns:.8fr 1.2fr; gap:10vw; }
.values-heading h2 { font-size:clamp(48px,5.2vw,78px); line-height:1; }
.values-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.values-grid article { min-height:235px; padding:30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.values-grid article>span { color:var(--orange); }
.values-grid h3 { font:23px Georgia,serif; margin:24px 0 13px; }
.values-grid p { margin:0; color:#63796e; line-height:1.6; font-size:14px; }

.growth { padding-top:110px; padding-bottom:110px; display:grid; grid-template-columns:1fr 1fr; gap:clamp(48px,8vw,120px); background:#eddfc8; align-items:center; }
.growth-image img { aspect-ratio:1/1.07; object-fit:cover; }
.growth-copy { position:relative; }
.ps-mark { position:absolute; width:100px; right:0; top:-28px; transform:rotate(3deg); }
.growth-copy h2 { font-size:clamp(48px,5.5vw,82px); line-height:1; max-width:700px; margin:15px 0 28px; }
.growth-copy p:not(.eyebrow) { max-width:630px; color:#53695e; font-size:16px; line-height:1.75; }
.growth-copy .button { margin-top:14px; }

.aperitivo { min-height:850px; display:grid; grid-template-columns:.9fr 1.1fr; background:var(--orange); color:#fff; }
.aperitivo-photo { position:relative; }
.aperitivo-photo img { height:100%; object-fit:cover; }
.aperitivo-photo>span { position:absolute; top:40px; left:32px; color:#fff; font:italic 24px Georgia,serif; }
.aperitivo-copy { display:flex; flex-direction:column; justify-content:center; padding-top:100px; padding-bottom:100px; }
.aperitivo-copy h2 { font-size:clamp(58px,7vw,108px); line-height:.93; margin:18px 0 34px; }
.aperitivo-copy h2 em { color:var(--lemon); }
.aperitivo-copy p { max-width:730px; color:#ffe8d9; line-height:1.7; }
.aperitivo-copy p.large { font:25px/1.5 Georgia,serif; color:#fff; }
.spritz-list { display:flex; flex-wrap:wrap; gap:9px; list-style:none; padding:0; margin:25px 0 40px; }
.spritz-list li { border:1px solid rgba(255,255,255,.55); border-radius:999px; padding:10px 15px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.spritz-rule { border-top:1px solid rgba(255,255,255,.42); border-bottom:1px solid rgba(255,255,255,.42); padding:20px 0; display:flex; justify-content:space-between; color:var(--lemon); font:italic 22px Georgia,serif; }
.spritz-wide { position:relative; height:460px; overflow:hidden; }
.spritz-wide img { height:100%; object-fit:cover; }
.spritz-wide::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(12,39,25,.72),transparent 75%); }
.spritz-wide div { position:absolute; left:clamp(24px,7vw,110px); bottom:52px; z-index:1; color:#fff; display:flex; flex-direction:column; gap:10px; }
.spritz-wide span { font-size:10px; font-weight:900; letter-spacing:.2em; }
.spritz-wide strong { font:38px Georgia,serif; font-weight:400; }

.experiences { padding-top:120px; padding-bottom:120px; display:grid; grid-template-columns:1fr 1fr .8fr; gap:clamp(36px,5vw,80px); align-items:start; }
.experiences-heading h2 { font-size:clamp(48px,5.4vw,82px); line-height:1; margin:15px 0 28px; }
.experiences-heading>p:not(.eyebrow) { color:#5b7166; line-height:1.75; max-width:580px; }
.experiences-heading .button { margin-top:20px; }
.experiences-list { border-top:1px solid var(--line); }
.experiences-list article { display:grid; grid-template-columns:46px 1fr; gap:12px; border-bottom:1px solid var(--line); padding:23px 0; }
.experiences-list span { color:var(--orange); font-size:10px; font-weight:900; }
.experiences-list h3 { font:22px Georgia,serif; margin:0 0 8px; }
.experiences-list p { margin:0; color:#63796e; font-size:13px; line-height:1.55; }
.experiences-photo { margin:0; position:relative; transform:rotate(1.5deg); }
.experiences-photo img { aspect-ratio:.76; object-fit:cover; border:12px solid #fff7e8; box-shadow:0 18px 50px rgba(23,52,41,.16); }
.experiences-photo figcaption { font:italic 17px Georgia,serif; text-align:center; margin-top:15px; }

.visit { display:grid; grid-template-columns:1fr 1fr; min-height:790px; background:var(--green); color:#fff; }
.visit-photo img { height:100%; object-fit:cover; object-position:center; }
.visit-copy { display:flex; flex-direction:column; justify-content:center; padding-top:90px; padding-bottom:90px; }
.visit-copy h2 { font-size:clamp(58px,7vw,106px); line-height:.92; margin:20px 0 28px; color:var(--lemon); }
.visit-copy p.large { font:23px Georgia,serif; color:#dbe6dc; }
.visit address { display:flex; flex-direction:column; gap:13px; font-style:normal; border-top:1px solid rgba(255,255,255,.25); border-bottom:1px solid rgba(255,255,255,.25); padding:25px 0; margin:28px 0; }
.visit address strong { color:var(--lemon); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.visit address a { font:24px/1.4 Georgia,serif; }
.contact-links { display:flex; flex-wrap:wrap; gap:16px 30px; margin-bottom:32px; }
.contact-links a { font-weight:800; font-size:12px; letter-spacing:.08em; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:4px; }

footer { background:var(--lemon); }
.salute { min-height:520px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px 24px; }
.salute>span { color:var(--red); font-size:10px; font-weight:900; letter-spacing:.2em; }
.salute h2 { font-size:clamp(100px,17vw,250px); line-height:.8; margin:36px 0; color:var(--orange); font-style:italic; }
.salute p { font:19px Georgia,serif; }
.footer-bottom { border-top:1px solid rgba(23,52,41,.27); padding:35px clamp(24px,6vw,96px); display:grid; grid-template-columns:150px 1fr auto; gap:30px; align-items:center; }
.footer-bottom img { width:140px; }
.footer-bottom p { margin:0; font:italic 16px Georgia,serif; }
.footer-bottom div { display:flex; gap:24px; font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:900; }
.footer-bottom small { grid-column:1/-1; text-align:center; opacity:.65; }

@media (max-width:1050px) {
  .desktop-nav { display:none; }
  .site-header { grid-template-columns:1fr auto; }
  .hero { grid-template-columns:1fr 46%; }
  .hero-copy { padding-inline:40px; }
  .craft-points article { grid-template-columns:34px 1fr; }
  .craft-points p { grid-column:2; }
  .experiences { grid-template-columns:1fr 1fr; }
  .experiences-photo { grid-column:1/-1; max-width:420px; justify-self:center; }
}

@media (max-width:760px) {
  .site-header { height:72px; padding-block:7px; }
  .brand img { width:126px; height:54px; }
  .nav-cta { padding:12px 15px; font-size:9px; }
  .hero { display:flex; flex-direction:column; }
  .hero-copy { padding:70px 24px 48px; min-height:650px; }
  .hero h1 { font-size:clamp(52px,15.5vw,76px); }
  .hero-image { min-height:620px; border-left:0; border-top:1px solid var(--line); }
  .hero-stamp { margin-top:36px; }
  .marquee { justify-content:flex-start; }
  .intro,.craft-grid,.cellos,.values,.growth,.aperitivo,.experiences,.visit { grid-template-columns:1fr; }
  .intro { gap:34px; padding-top:80px; padding-bottom:72px; }
  .craft-grid { padding-bottom:80px; }
  .photo-card { margin-inline:-24px; }
  .photo-card figcaption { left:18px; }
  .craft-copy h2,.cellos-copy h2,.values-heading h2,.growth-copy h2,.experiences-heading h2 { font-size:50px; }
  .cellos { padding-top:80px; padding-bottom:80px; }
  .cellos-photo-wrap { min-height:590px; }
  .photo-number { right:-8px; }
  .cello-list li { grid-template-columns:34px 1fr; padding:10px 0; }
  .cello-list em { grid-column:2; }
  .journey { padding:85px 0; }
  .journey-heading h2 { font-size:50px; }
  .journey-images { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-right:24px; }
  .journey-images figure { flex:0 0 82vw; min-height:520px; scroll-snap-align:start; }
  .journey-story { grid-template-columns:1fr; gap:18px; }
  .values { padding-top:85px; padding-bottom:85px; gap:30px; }
  .values-grid { grid-template-columns:1fr; }
  .values-grid article { min-height:190px; }
  .growth { padding-top:80px; padding-bottom:80px; }
  .ps-mark { width:76px; top:-5px; }
  .growth-copy { padding-top:20px; }
  .aperitivo-photo { min-height:610px; }
  .aperitivo-copy { padding-top:80px; padding-bottom:80px; }
  .aperitivo-copy h2 { font-size:65px; }
  .spritz-rule { flex-direction:column; gap:8px; }
  .spritz-wide { height:420px; }
  .spritz-wide strong { font-size:30px; max-width:300px; }
  .experiences { padding-top:85px; padding-bottom:90px; }
  .experiences-photo { grid-column:auto; max-width:100%; margin-top:10px; }
  .visit-photo { min-height:620px; }
  .visit-copy { padding-top:80px; padding-bottom:80px; }
  .visit-copy h2 { font-size:70px; }
  .salute { min-height:430px; }
  .salute h2 { font-size:30vw; }
  .footer-bottom { grid-template-columns:1fr; text-align:center; }
  .footer-bottom img { margin:auto; }
  .footer-bottom div { justify-content:center; flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }