/* ============================================
   Linea Vigne — quiet luxury Napa watercolor
   ============================================ */
:root{
  --paper:#FCFCFA;
  --paper-2:#F6F4EF;
  --ink:#1A1815;
  --ink-soft:#4A463F;
  --sage:#6B7259;
  --ochre:#B89A6A;
  --slate:#8494A0;
  --terracotta:#B37C63;
  --line:#E4E0D7;
  --line-soft:#EEEBE3;

  --serif:"Cormorant Garamond", Georgia, serif;
  --body:"EB Garamond", Georgia, serif;
  --util:"Inter Tight", system-ui, sans-serif;

  --wrap:1240px;
  --gutter:clamp(1.4rem, 5vw, 5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.02rem,1.1vw,1.16rem);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
em{font-style:italic}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.7rem 1rem;z-index:100}
.skip:focus{left:.5rem;top:.5rem}

.eyebrow{
  font-family:var(--util);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--sage);
  font-weight:500;
}

/* ---------- Header ---------- */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding-block:1.3rem;
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.site-head.scrolled{
  background:rgba(252,252,250,.86);
  backdrop-filter:blur(14px);
  padding-block:.85rem;
  border-bottom:1px solid var(--line-soft);
}
.head-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--ink)}
.brand-mark{color:var(--sage);display:grid;place-items:center}
.brand-word{
  font-family:var(--serif);
  font-size:1.5rem;
  letter-spacing:.04em;
  font-weight:400;
}
.nav{display:flex;align-items:center;gap:2.4rem}
.nav a{
  font-family:var(--util);
  font-size:.82rem;
  letter-spacing:.06em;
  color:var(--ink-soft);
  position:relative;
  transition:color .3s;
}
.nav a:hover{color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;background:var(--sage);transition:width .35s var(--ease)}
.nav a:hover::after{width:100%}
.nav-cta{
  border:1px solid var(--line);
  padding:.55rem 1.2rem;
  border-radius:2px;
  color:var(--ink) !important;
}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--ink);color:var(--paper) !important;border-color:var(--ink)}

.menu-btn{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:6px}
.menu-btn span{width:26px;height:1.4px;background:var(--ink);transition:transform .35s var(--ease),opacity .35s}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.7px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:55;
  background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem;
  opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.mobile-nav.open{opacity:1;pointer-events:auto;transform:none}
.mobile-nav a{font-family:var(--serif);font-size:2.2rem;color:var(--ink)}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  padding-top:8rem;padding-bottom:4rem;
  overflow:hidden;
}
.hero-inner{position:relative;z-index:3;max-width:760px}
.hero-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(3.2rem,9vw,7.2rem);
  line-height:.98;
  letter-spacing:-.01em;
  margin:1.6rem 0 1.8rem;
}
.hero-title span{display:block}
.serif-i{font-style:italic;color:var(--ink-soft)}
.hero-lede{
  font-size:clamp(1.15rem,1.6vw,1.45rem);
  max-width:34ch;
  color:var(--ink-soft);
  line-height:1.5;
}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.4rem}

.btn{
  font-family:var(--util);
  font-size:.82rem;
  letter-spacing:.08em;
  padding:.9rem 1.8rem;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  border-radius:2px;
  transition:background .35s var(--ease),color .35s,transform .35s;
}
.btn:hover{background:transparent;color:var(--ink);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

.hero-art{
  position:absolute;
  right:calc(var(--gutter) * -.2);top:50%;
  transform:translateY(-46%);
  width:min(52vw,640px);
  z-index:1;
  opacity:.92;
  pointer-events:none;
}
.line-art{width:100%;height:auto;overflow:visible}
.line-art .draw{
  fill:none;stroke:var(--ink);stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.line-art.drawn .draw{
  transition:stroke-dashoffset 1.8s var(--ease);
  stroke-dashoffset:0;
}
.line-art .wash{stroke:var(--slate);opacity:.5}
.pigment{opacity:0;transition:opacity 2s ease 1s;mix-blend-mode:multiply}
.line-art.drawn .pigment{opacity:.14}
.pigment.sage{fill:var(--sage)}
.pigment.ochre{fill:var(--ochre);opacity:0}
.line-art.drawn .pigment.ochre{opacity:.12}
.pigment.slate{fill:var(--slate)}

/* ---------- Places marquee ---------- */
.places{
  border-block:1px solid var(--line);
  padding-block:1.5rem;
  overflow:hidden;
  white-space:nowrap;
  background:var(--paper-2);
}
.places-track{
  display:inline-flex;align-items:center;gap:1.4rem;
  font-family:var(--serif);font-style:italic;
  font-size:1.5rem;color:var(--ink-soft);
  animation:marquee 34s linear infinite;
  will-change:transform;
}
.places-track .dot{color:var(--ochre);font-style:normal}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Statement ---------- */
.statement{padding-block:clamp(5rem,12vw,9rem);border-bottom:1px solid var(--line-soft)}
.statement-text{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.6rem,3.6vw,2.9rem);
  line-height:1.28;
  max-width:22ch;
  margin-inline:auto;
  text-align:center;
  letter-spacing:-.005em;
}
.statement-text{max-width:20ch}

/* ---------- Section heads ---------- */
.section-head{margin-bottom:3rem}
.section-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.4rem,5vw,4rem);
  line-height:1.02;
  margin-top:.6rem;
}

/* ---------- Work gallery ---------- */
.work{padding-block:clamp(4.5rem,10vw,8rem)}
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,3vw,2.6rem);
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.plate{overflow:hidden}
.plate-art{
  overflow:hidden;
  background:var(--paper-2);
  border:1px solid var(--line-soft);
  aspect-ratio:4/5;
}
.plate-art img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.plate:hover .plate-art img{transform:scale(1.045)}
.plate figcaption{padding-top:1.1rem;display:flex;flex-direction:column;gap:.15rem}
.fc-name{font-family:var(--serif);font-size:1.3rem}
.fc-meta{font-family:var(--util);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}

/* ---------- Commissions ---------- */
.commissions{padding-block:clamp(4.5rem,10vw,8rem);border-top:1px solid var(--line-soft);background:var(--paper-2)}
.comm-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.comm-copy{margin:1.4rem 0 2rem;color:var(--ink-soft);max-width:42ch}
.comm-list{list-style:none;display:flex;flex-direction:column}
.comm-list li{
  display:flex;gap:1.6rem;
  padding-block:1.7rem;
  border-top:1px solid var(--line);
}
.comm-list li:last-child{border-bottom:1px solid var(--line)}
.ci{font-family:var(--util);font-size:.78rem;color:var(--ochre);letter-spacing:.1em;padding-top:.35rem}
.comm-list h3{font-family:var(--serif);font-weight:400;font-size:1.55rem;margin-bottom:.3rem}
.comm-list p{font-size:1rem;color:var(--ink-soft);max-width:46ch}

/* ---------- Studio ---------- */
.studio{padding-block:clamp(4.5rem,10vw,8rem)}
.studio-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.studio-art{max-width:360px}
.studio-copy p{margin-top:1.3rem;color:var(--ink-soft)}
.studio-copy .eyebrow{margin-bottom:0}

/* ---------- Contact ---------- */
.contact{
  padding-block:clamp(5.5rem,13vw,10rem);
  border-top:1px solid var(--line-soft);
  text-align:center;
  background:var(--ink);
  color:var(--paper);
}
.contact .eyebrow{color:var(--ochre)}
.contact-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.4rem,6vw,4.6rem);
  line-height:1.02;margin:1.2rem auto 1.4rem;
  max-width:16ch;
}
.contact-lede{color:rgba(252,252,250,.72);max-width:44ch;margin-inline:auto}
.mail{
  display:inline-block;margin-top:2.4rem;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.6rem,3.5vw,2.6rem);
  color:var(--paper);
  border-bottom:1px solid rgba(252,252,250,.3);
  padding-bottom:.2rem;
  transition:border-color .4s;
}
.mail:hover{border-color:var(--ochre)}

/* ---------- Footer ---------- */
.site-foot{padding-top:clamp(3.5rem,8vw,6rem);padding-bottom:2.5rem;background:var(--paper)}
.foot-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:3rem;
  border-bottom:1px solid var(--line);
}
.foot-brand .brand-word{font-size:1.8rem;display:block;margin-bottom:.6rem}
.foot-tag{font-family:var(--serif);font-style:italic;color:var(--ink-soft)}
.foot-loc{font-family:var(--util);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);margin-top:.8rem}
.foot-col h4{font-family:var(--util);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:1.1rem;font-weight:500}
.foot-col a{display:block;color:var(--ink-soft);font-size:.98rem;padding-block:.35rem;transition:color .3s}
.foot-col a:hover{color:var(--sage)}
.foot-base{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.8rem;
  padding-top:2rem;
}
.foot-base p{font-family:var(--util);font-size:.74rem;letter-spacing:.04em;color:var(--ink-soft)}
.foot-fine{color:var(--sage) !important}

/* ---------- Legal pages ---------- */
.legal{padding-top:9rem;padding-bottom:5rem;max-width:820px}
.legal .eyebrow{margin-bottom:1rem}
.legal h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1.05;margin-bottom:.7rem}
.legal .updated{font-family:var(--util);font-size:.78rem;letter-spacing:.08em;color:var(--sage);text-transform:uppercase;margin-bottom:2.6rem}
.legal h2{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin:2.6rem 0 .8rem}
.legal h3{font-family:var(--serif);font-weight:400;font-size:1.28rem;margin:1.6rem 0 .5rem}
.legal p,.legal li{color:var(--ink-soft);margin-bottom:1rem}
.legal ul,.legal ol{padding-left:1.4rem;margin-bottom:1rem}
.legal li{margin-bottom:.5rem}
.legal a{color:var(--sage);border-bottom:1px solid var(--line);transition:border-color .3s}
.legal a:hover{border-color:var(--sage)}
.legal .back{
  display:inline-block;margin-bottom:2rem;font-family:var(--util);
  font-size:.8rem;letter-spacing:.06em;color:var(--ink-soft);border:none;
}
.legal .back:hover{color:var(--sage)}
.legal table{width:100%;border-collapse:collapse;margin:1rem 0 1.6rem;font-size:.95rem}
.legal th,.legal td{text-align:left;padding:.7rem .8rem;border:1px solid var(--line);vertical-align:top}
.legal th{font-family:var(--util);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;background:var(--paper-2);color:var(--ink)}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:920px){
  .comm-grid,.studio-grid{grid-template-columns:1fr}
  .studio-art{max-width:280px;margin-inline:auto}
  .gallery{grid-template-columns:1fr 1fr}
  .hero-art{opacity:.4;width:70vw}
}
@media(max-width:680px){
  .nav{display:none}
  .menu-btn{display:flex}
  .gallery{grid-template-columns:1fr;gap:2.4rem}
  .foot-grid{grid-template-columns:1fr;gap:2.2rem}
  .foot-base{flex-direction:column;align-items:flex-start}
  .hero-art{position:absolute;bottom:2rem;top:auto;right:-10%;transform:none;opacity:.28;width:90vw}
  .hero{min-height:auto}
  .plate-art{aspect-ratio:4/4.4}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important}
  .reveal{opacity:1;transform:none;transition:none}
  .line-art.drawn .draw{transition:none}
  html{scroll-behavior:auto}
}