:root{
  --cream:#F3E6D4;
  --cream-2:#EAD6BA;
  --paper:#FAF3E8;
  --ink:#0E0E0E;
  --muted:#3F372F;
  --copper:#B56B2A;
  --copper-2:#E0A06A;
  --copper-d:#8A4E1C;
  --line:rgba(14,14,14,.14);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Outfit",system-ui,sans-serif;
  line-height:1.55;
  letter-spacing:.01em;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--copper-d)}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:8px;background:#000;color:#fff;padding:8px;z-index:100}
.wrap{width:min(var(--max),calc(100% - 36px));margin-inline:auto}

/* Top info bar removed sitewide — keep rule inert if markup lingers */
.top{display:none!important}

header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(243,230,212,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding:8px 0;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);background:transparent!important;box-shadow:none!important;padding:0!important}
.brand img{height:72px;width:auto;max-width:min(420px,78vw);object-fit:contain;background:transparent!important}
.word{display:flex;flex-direction:column;line-height:1}
.word b{font-family:"Fraunces",Georgia,serif;font-size:1.35rem;font-weight:600;letter-spacing:.02em}
.word span{font-size:.68rem;letter-spacing:.22em;color:var(--copper);font-weight:600}
nav.primary{display:flex;gap:20px;align-items:center}
nav.primary a{text-decoration:none;color:var(--ink);font-weight:500;font-size:.95rem}
.menu{display:none;background:var(--paper);border:1px solid var(--ink);color:var(--ink);padding:10px 12px;font:inherit;font-weight:600;min-height:44px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:var(--cream);text-decoration:none;
  padding:12px 18px;font-weight:600;letter-spacing:.04em;
  border:1px solid var(--ink);cursor:pointer;font:inherit;
  min-height:48px;border-radius:2px;
}
.btn.copper{background:var(--copper);border-color:var(--copper-d);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.cream{background:var(--cream);color:var(--ink);border-color:var(--ink)}
.btn:hover{transform:translateY(-1px)}
.ink .btn.ghost,
.hero .btn.ghost{
  color:var(--cream);
  border-color:var(--cream);
  background:rgba(14,14,14,.35);
}
.ink .btn.cream{border-color:var(--cream);color:var(--ink);background:var(--cream)}

.hero{
  position:relative;
  min-height:0;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  background:var(--ink);
  color:var(--cream);
  overflow:hidden;
}
.hero-copy{
  padding:28px 7vw 40px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  position:relative;
  z-index:2;
  background:linear-gradient(90deg,#0E0E0E 0%,#0E0E0E 72%,rgba(14,14,14,.82) 100%);
}
.kicker{
  color:var(--copper-2);letter-spacing:.28em;text-transform:uppercase;font-size:.78rem;margin:0 0 14px;
  font-weight:600;
}
.hero h1{
  font-family:"Fraunces",Georgia,serif;
  font-weight:500;
  font-size:clamp(2.1rem,5vw,3.8rem);
  line-height:1.05;
  margin:0 0 16px;
  color:var(--cream);
}
.hero h1 em{font-style:italic;color:var(--copper-2)}
.lede{font-size:1.12rem;max-width:42ch;color:#F0E4D4;margin:0}
.hero-actions{
  display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 14px;
  justify-content:flex-start;
}
.hero-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:.92rem;color:#E2D2BE}
.hero-meta strong{color:var(--cream);font-weight:600}
.hero-photo{
  position:relative;min-height:340px;
  background:#1a1a1a center/cover no-repeat;
}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,14,14,.65),rgba(14,14,14,.15) 45%,transparent 70%);
  pointer-events:none;
}
.hero-badge{
  position:absolute;left:24px;bottom:24px;z-index:2;
  background:rgba(14,14,14,.88);border:1px solid rgba(224,160,106,.55);
  padding:10px 14px;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-2);
}

.rule{
  height:14px;background:
    repeating-linear-gradient(90deg,var(--copper) 0 18px,transparent 18px 36px);
  opacity:.9;
}

section{padding:72px 0}
h2{
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(1.8rem,3.4vw,2.8rem);
  font-weight:500;line-height:1.1;margin:0 0 12px;
  color:var(--ink);
}
.sub{color:var(--muted);max-width:58ch;margin:0 0 34px}
.grid-3,.grid-2{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:1.1fr .9fr}

.ticket{
  background:var(--paper);
  border:1px solid var(--ink);
  padding:24px;
  position:relative;
}
.ticket:before{
  content:attr(data-no);
  position:absolute;top:12px;right:14px;
  font-size:.72rem;letter-spacing:.16em;color:var(--copper-d);
}
.ticket h3{margin:8px 0 8px;font-family:"Fraunces",serif;font-size:1.35rem;font-weight:500;color:var(--ink)}
.ticket p{margin:0;color:var(--muted)}

.photo-break{
  min-height:380px;
  background:center/cover no-repeat;
  position:relative;
}
.photo-break::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(14,14,14,.35));
  pointer-events:none;
}
.photo-break .caption{
  position:absolute;left:24px;bottom:24px;z-index:2;
  background:var(--cream);color:var(--ink);padding:10px 14px;border:1px solid var(--ink);
  font-size:.85rem;font-weight:500;
}

.ink{background:var(--ink);color:var(--cream)}
.ink .sub,.ink p{color:#E2D2BE}
.ink h2{color:var(--cream)}
.ink .kicker{color:var(--copper-2)}
.ink a{color:var(--copper-2)}

.towns{display:flex;flex-wrap:wrap;gap:8px}
.towns a,.towns span{
  border:1px solid currentColor;padding:7px 12px;text-decoration:none;
  color:inherit;font-size:.9rem;
}

table{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--ink)}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink)}
th{background:var(--ink);color:var(--cream);font-weight:500;letter-spacing:.06em}

form{display:grid;gap:10px}
label{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:600}
input,select,textarea{
  width:100%;padding:12px;border:1px solid var(--ink);background:var(--paper);font:inherit;color:var(--ink)
}
.fine{font-size:.82rem;color:var(--muted)}
.notice{border:1px solid var(--copper-d);padding:16px;background:rgba(181,107,42,.12);color:var(--ink)}

.faq details{border:1px solid var(--ink);background:var(--paper);padding:12px 16px;margin-bottom:8px}
.faq summary{cursor:pointer;font-weight:600;color:var(--ink)}
.faq p{color:var(--muted)}
.gallery{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}
.gallery img{width:100%;height:100%;object-fit:cover;border:1px solid var(--ink);background:#fff}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.path{
  border:1px solid var(--ink);background:var(--paper);padding:28px;color:var(--ink);
}
.path.ink{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.path .tag{letter-spacing:.2em;text-transform:uppercase;font-size:.75rem;color:var(--copper-d);font-weight:600}
.path.ink .tag{color:var(--copper-2)}
.path p,.path li{color:var(--muted)}
.path.ink p,.path.ink li{color:#E2D2BE}
.price-hold{
  font-family:"Fraunces",serif;font-size:2rem;margin:10px 0;color:var(--ink);
}
.price-hold span{color:var(--copper-d);font-size:1rem;letter-spacing:.12em}
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.prod{border:1px solid var(--ink);background:#fff}
.prod img{width:100%;height:220px;object-fit:contain;background:#fafafa}
.prod .pad{padding:16px}
@media (max-width:900px){
  .gallery,.paths,.prod-grid{grid-template-columns:1fr}
}

footer{
  background:var(--ink);color:#E2D2BE;padding:48px 0 28px;font-size:.92rem
}
footer a{color:var(--cream);text-decoration:none}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.legal{border-top:1px solid rgba(243,230,212,.15);margin-top:28px;padding-top:16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.8rem;color:#C9B8A3}

.sticky{display:none}

@media (max-width:900px){
  .brand img{height:60px;max-width:min(240px,62vw)}
  .hero,.grid-3,.grid-2,.foot{grid-template-columns:1fr}
  .hero-copy{
    padding:20px 22px 28px;
    background:var(--ink);
  }
  .hero-photo{min-height:260px}
  .hero-photo::after{
    background:linear-gradient(180deg,rgba(14,14,14,.55),transparent 40%);
  }
  .hero-actions{
    justify-content:center;
    width:100%;
  }
  .hero-actions .btn{
    flex:1 1 calc(50% - 6px);
    min-width:140px;
    max-width:100%;
    text-align:center;
  }
  nav.primary{display:none}
  nav.primary.open{
    display:flex;flex-direction:column;align-items:stretch;
    position:absolute;left:0;right:0;top:100%;
    background:var(--cream);padding:16px;border-bottom:1px solid var(--ink);gap:10px
  }
  .menu{display:inline-flex;align-items:center;justify-content:center}
  .sticky{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;
    background:var(--ink);padding:10px 12px;gap:10px;
    border-top:1px solid rgba(243,230,212,.2);
    justify-content:center;align-items:center;
  }
  .sticky a{
    flex:1 1 0;
    width:100%;
    max-width:none;
    min-height:48px;
    text-align:center;
    font-weight:700;
    letter-spacing:.06em;
  }
  body{padding-bottom:72px}
}

/* ---- Launch polish: mobile overflow, contrast, forms ---- */
html,body{overflow-x:hidden;max-width:100%}
section .wrap,main{max-width:100%}
table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
input,select,textarea{font-size:16px} /* prevent iOS zoom */
.hero-actions .btn{word-break:keep-all}
.ink .ticket h3{color:var(--cream)}
.ink .ticket p{color:#E2D2BE}
.path ul{padding-left:1.15rem;margin:12px 0 18px}
.path li{margin:6px 0}
footer .license-line{
  margin-top:14px;font-size:.85rem;color:#C9B8A3;
  border:1px dashed rgba(224,160,106,.45);padding:10px 12px;display:inline-block;
}
footer .license-line strong{color:var(--cream)}
.form-note{
  margin-top:10px;padding:12px 14px;border:1px solid var(--copper-d);
  background:rgba(181,107,42,.1);font-size:.88rem;color:var(--ink);
}
.form-note code{font-size:.85em;background:var(--paper);padding:1px 5px;border:1px solid var(--line)}
@media (max-width:900px){
  .towns a,.towns span{font-size:.85rem;padding:8px 10px}
  .photo-break{min-height:260px}
  .sticky{
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  }
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  h2{font-size:clamp(1.55rem,6vw,2.2rem)}
  .lede{font-size:1.05rem}
  th,td{padding:10px 11px;font-size:.92rem}
}
@media (max-width:480px){
  .wrap{width:min(var(--max),calc(100% - 28px))}
  .hero-actions .btn{flex:1 1 100%;min-width:0}
  .brand img{height:52px;max-width:min(200px,58vw)}
}

/* Designed by Porch Light Desk */
.designed-by{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:22px;padding-top:18px;
  border-top:1px solid rgba(243,230,212,.18);
  font-size:.82rem;letter-spacing:.06em;color:#C9B8A3;
}
.designed-by a{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--cream);text-decoration:none;font-weight:500;
}
.designed-by a:hover{color:var(--copper-2)}
.designed-by img{
  height:28px;width:auto;opacity:.95;
  background:transparent;
}

/* === copper tubing polish === */
/* Black panels get visible copper pipe runs */
.hero,
section.ink,
footer{
  position:relative;
  overflow:hidden;
  background-color:#0E0E0E !important;
}
.hero::after,
section.ink::after,
footer::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:url('../images/copper-tubing.svg');
  background-repeat:no-repeat;
  background-size:min(1200px,160vw) auto;
  background-position:right -5% bottom -12%;
  opacity:.55;
  mix-blend-mode:screen;
}
.hero::after{
  background-position:left -12% top -4%;
  background-size:min(1250px,185vw) auto;
  opacity:.72;
}
section.ink::after{
  background-position:left -10% top 0%, right -12% bottom -20%;
  background-size:min(1000px,150vw) auto, min(900px,140vw) auto;
  background-image:
    url('../images/copper-tubing.svg'),
    url('../images/copper-tubing.svg');
  opacity:.4;
}
footer::after{
  background-position:left -25% bottom -35%;
  opacity:.38;
}
.hero::before{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 50% at 15% 25%, rgba(181,107,42,.22), transparent 60%),
    radial-gradient(ellipse 40% 45% at 85% 80%, rgba(224,160,106,.12), transparent 55%);
}
.hero > *,
section.ink > *,
footer > *{position:relative;z-index:1}
.hero-copy{
  background:linear-gradient(90deg, rgba(14,14,14,.78) 0%, rgba(14,14,14,.55) 70%, rgba(14,14,14,.08) 100%) !important;
}
section.ink{
  border-block:1px solid rgba(224,160,106,.28);
}
footer{
  border-top:1px solid rgba(224,160,106,.32);
}
footer::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg, transparent 5%, #E0A06A 35%, #B56B2A 65%, transparent 95%);
}
.rule{
  height:16px;border:none;opacity:1;
  background:
    linear-gradient(90deg, transparent, rgba(224,160,106,.65), transparent),
    repeating-linear-gradient(90deg, #8A4E1C 0 12px, #F2C08A 12px 16px, #B56B2A 16px 28px, transparent 28px 40px);
  background-size:100% 2px, 100% 7px;
  background-position:center, center;
  background-repeat:no-repeat, repeat-x;
}
.ticket{
  background:linear-gradient(180deg,#FFFaf3,#FAF3E8);
  border-top:3px solid var(--copper);
  box-shadow:0 12px 28px rgba(14,14,14,.07);
}
.ticket:hover,.path:hover,.prod:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(14,14,14,.12);
  border-color:rgba(181,107,42,.55);
}
header.site{box-shadow:0 1px 0 rgba(181,107,42,.2), 0 8px 24px rgba(14,14,14,.05)}
.btn.copper{box-shadow:0 6px 18px rgba(181,107,42,.3)}
@media (max-width:900px){
  .hero::after, section.ink::after{opacity:.55}
  .hero-copy{background:rgba(14,14,14,.92) !important}
}
/* === end copper tubing polish === */
