/* Something Built: "Walnut Workshop" (Jesse picked direction D, 2026-10-13).
   Built to the mockups Direction-D (home) and Direction-D-product (piece page):
   walnut bars top and bottom, linen pages, kraft bands, white cards with a
   linen inset for each shop drawing, Young Serif for display, Archivo for
   everything else, one gold accent. The pieces are shown as measured shop
   drawings until (and alongside) the photos from the styled shoot. */

:root {
  --walnut: #3A2A1F;       /* header, hero, footer, primary buttons */
  --walnut-2: #33251B;     /* the hero's drawing side */
  --linen: #F4EEE2;        /* page */
  --kraft: #E9DDC7;        /* bands */
  --card: #FFFFFF;
  --line: #DED1B9;
  --field: #CBBC9F;        /* input borders */
  --ink: #2B2018;          /* text, drawing lines */
  --body-ink: #4B3D30;
  --muted: #5E4E3E;
  --brown: #8C6B3B;        /* labels and prices on light grounds */
  --gold: #C9A75C;         /* accent on dark grounds, gold buttons */
  --gold-dim: #B08C4A;     /* dimension lines on light grounds */
  --cream: #F4EEE2;
  --cream-2: #D9CCB4;      /* body text on walnut */
  --ok: #2F6B43;
  --low: #8A5A12;
  --no: #8E3B2E;
  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --control-h: 48px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body { margin: 0; background: var(--linen); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; }
a { color: var(--brown); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
p { margin: 0 0 1em; max-width: 68ch; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.05; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.45rem; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.label { display: inline-block; font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brown); }
.lede { font-size: 1.15rem; color: var(--body-ink); max-width: 46ch; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.center { text-align: center; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Header: a walnut bar ── */
/* Centered badge, menu under it (Jesse, 2026-10-13). The header is fixed and
   a spacer holds its full height, so when it compacts on scroll (site.js adds
   .compact) the page underneath never jumps. */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: var(--walnut); color: var(--cream); transition: box-shadow .3s ease; }
.top .wrap { max-width: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-block: 22px 16px; transition: padding .3s ease, gap .3s ease; }
.top.compact { box-shadow: 0 8px 22px rgba(20, 12, 6, .28); }
.top.compact .wrap { padding-block: 8px 8px; gap: 4px; }
.top-spacer { height: var(--hdr-h, 230px); background: var(--walnut); }
.brand { font-family: var(--display); font-size: 1.65rem; color: var(--cream); text-decoration: none; white-space: nowrap; flex: none; }
.brand:hover { color: var(--cream); }
.nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; align-items: center; }
.nav a { color: var(--cream); text-decoration: none; font-size: .92rem; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--gold); color: var(--cream); }
.nav .listlink { display: inline-flex; align-items: center; gap: 6px; }
.nav .listlink b { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; background: var(--gold); color: var(--ink); font-weight: 600; font-size: .72rem; }
.nav a.btn, .nav a.btn:hover { border: 0; padding: 0 16px; color: var(--ink); }
.menu-btn { display: none; position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); height: 40px; padding: 0 14px; background: none; border: 1px solid var(--gold); color: var(--cream); font: 600 .78rem var(--body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; border-radius: 3px; }
@media (max-width: 1060px) {
  .menu-btn { display: inline-block; }
  .top .wrap { padding-block: 14px; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--walnut); border-top: 1px solid #4B3829; padding: 12px var(--gutter) 20px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .nav.open { display: flex; }
  .nav a { font-size: 1.1rem; }
}

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-h); padding: 0 24px; border: 1px solid var(--walnut); background: var(--walnut); color: var(--cream); font: 600 .95rem var(--body); text-decoration: none; cursor: pointer; border-radius: 3px; }
.btn:hover { background: #2A1E16; color: var(--cream); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn.gold:hover { background: #D6B66C; color: var(--ink); }
.btn.ghost { background: transparent; color: var(--walnut); }
.btn.ghost:hover { background: var(--walnut); color: var(--cream); }
.btn.wide { display: flex; width: 100%; letter-spacing: .16em; text-transform: uppercase; font-size: .85rem; }
.btn.small { min-height: 38px; padding: 0 16px; font-size: .85rem; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ── Sections ── */
section { padding-block: clamp(56px, 7vw, 92px); }
section.tight { padding-block: clamp(36px, 5vw, 60px); }
.tone { background: var(--kraft); }
.sec-head { text-align: center; margin: 0 auto 38px; max-width: 760px; }
.sec-head h2 { margin: 8px 0 10px; }
.sec-head p { margin: 0 auto; color: var(--muted); }

/* ── Home hero: walnut, two halves ── */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); background: var(--kraft); color: var(--ink); }
.hero .hl { padding: clamp(48px, 6vw, 84px) var(--gutter) clamp(56px, 7vw, 96px); display: flex; flex-direction: column; justify-content: center; }
.hero .label { color: var(--brown); }
/* The rhyme: three quiet lines lead in, then the one we build lands big (Jesse: "very heavy/dense"). */
.hero h1 { font-size: clamp(2.4rem, calc((50vw - 110px) / 8.4), 4.4rem); line-height: 1; margin: 18px 0 26px; }
.hero h1 span { display: block; font-size: .42em; line-height: 1.32; color: var(--muted); }
.hero h1 .gold { font-size: 1em; line-height: 1; color: #7A5427; margin-top: .14em; white-space: nowrap; }
.hero .lede { color: var(--body-ink); font-size: 1.12rem; }
.hero .hr { position: relative; display: grid; place-items: center; padding: clamp(28px, 4vw, 56px); background: var(--walnut); }
.hero .hr .dwg { max-width: 640px; }
/* The badge: Jesse's logo (vector, traced from his PNG) as a mask, colored by currentColor. */
.badge { display: inline-block; aspect-ratio: 1; background: currentColor; -webkit-mask: url(/assets/brand/logo.svg) center / contain no-repeat; mask: url(/assets/brand/logo.svg) center / contain no-repeat; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-badge { width: 128px; color: var(--gold); display: block; transition: width .3s ease; }
.top.compact .brand-badge { width: 56px; }
.hero-badge { position: absolute; top: 28px; right: 32px; width: 150px; color: var(--gold); }
.foot-badge { display: block; width: 168px; color: var(--gold); }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero .hl { padding: 44px var(--gutter) 40px; }
  .hero h1 { font-size: clamp(2.2rem, calc((100vw - 2 * var(--gutter)) / 8.4), 4.4rem); }
  .hero-badge { width: 96px; top: 16px; right: 16px; }
}

/* ── Shop drawings ── */
.dwg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: visible; }
.dwg .ob { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.dwg .ob.fl { fill: var(--linen); }
.dwg .dt { fill: none; stroke: var(--ink); stroke-width: .7; stroke-linecap: round; }
.dwg .gd { stroke: var(--gold-dim); stroke-width: .8; stroke-dasharray: 2 4; }
.dwg .dm { fill: none; stroke: var(--gold-dim); stroke-width: .7; }
.dwg .dx { fill: var(--brown); font: 500 10.5px var(--body); letter-spacing: .08em; }
.dwg .sg { font: 19px var(--display); fill: var(--ink); }
.pdp .main .dwg .ob.fl { fill: var(--card); }
.on-dark .dwg .ob { stroke: var(--cream); }
.on-dark .dwg .ob.fl { fill: var(--walnut-2); }
.on-dark .dwg .dt { stroke: var(--cream-2); }
.on-dark .dwg .dm, .on-dark .dwg .gd { stroke: var(--gold); }
.on-dark .dwg .dx { fill: var(--gold); }
.on-dark .dwg .sg { fill: var(--cream); }
@media (prefers-reduced-motion: no-preference) {
  .draw .ob, .draw .dt { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: pencil 2.4s ease forwards; }
  .draw .dm, .draw .dx { opacity: 0; animation: fadein .6s ease 2.1s forwards; }
  @keyframes pencil { to { stroke-dashoffset: 0; } }
  @keyframes fadein { to { opacity: 1; } }
}

/* ── Cards: white, a linen inset for the drawing ── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 22px; }
.cards.three { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.card { position: relative; background: var(--card); border: 1px solid var(--line); padding: 16px 16px 20px; box-shadow: 0 1px 0 var(--line); transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(58, 42, 31, .08); }
.card .img { display: block; background: var(--linen); padding: 12px; }
.card .img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card h3 { font-size: 1.42rem; margin: 14px 0 3px; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card .meta { margin: 0; font-size: .85rem; color: var(--brown); font-weight: 500; }
.card .avail { position: absolute; top: 24px; right: 24px; z-index: 2; }
.card.is-booked .img { opacity: .45; }

/* Availability chips */
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid currentColor; border-radius: 30px; background: #fff; font: 600 .68rem var(--body); letter-spacing: .12em; text-transform: uppercase; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.ok { color: var(--ok); } .chip.low { color: var(--low); } .chip.no { color: var(--no); } .chip.ask { color: var(--muted); }

/* ── Date bar (rentals, packages, list) ── */
.datebar { background: var(--kraft); border-block: 1px solid var(--line); }
.datebar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-block: 16px; }
.datebar label { font-weight: 600; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brown); }
.datebar input { height: 44px; padding: 0 12px; border: 1px solid var(--field); background: #fff; color: var(--ink); font: 1rem var(--body); border-radius: 3px; }
.datebar .msg { font-size: .95rem; color: var(--muted); }

/* ── Packages ── */
.pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 22px; align-items: stretch; }
.pkg { background: var(--card); border: 1px solid var(--line); padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 6px; }
.pkg.featured { background: var(--walnut); border-color: var(--walnut); color: var(--cream); }
.pkg.featured .label { color: var(--gold); }
.pkg h3 { font-size: 1.95rem; margin: 6px 0 0; }
.pkg .price { font-family: var(--display); font-size: 3.4rem; line-height: 1; color: var(--brown); margin: 4px 0 2px; }
.pkg.featured .price { color: var(--gold); }
.pkg .tag { margin: 0; color: var(--muted); }
.pkg.featured .tag { color: var(--cream-2); }
.pkg ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pkg li { padding-left: 20px; position: relative; font-size: .97rem; }
.pkg li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1.5px; background: var(--gold); }
.pkg .foot { margin-top: auto; padding-top: 20px; display: grid; gap: 10px; }
.pkg .foot .small { color: var(--muted); }
.pkg.featured .foot .small { color: var(--cream-2); }
.pkg.featured .btn { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* ── The weekend ── */
.days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; text-align: center; }
.days b { display: block; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brown); font-weight: 600; }
.days span { display: block; font-family: var(--display); font-size: 2rem; margin: 4px 0; }
.days p { font-size: .92rem; color: var(--muted); margin: 0 auto; max-width: 22ch; }
.days .ev span { color: var(--brown); }
@media (max-width: 760px) { .days { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

/* ── Panels (planners/venues, how-it-works blocks) ── */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 22px; }
.panel { background: var(--card); border: 1px solid var(--line); padding: clamp(26px, 3.4vw, 42px); }
.panel h3 { font-size: 1.9rem; margin: 8px 0 12px; }
.panel p { color: var(--body-ink); }
.ticks { margin: 0 0 1em; padding: 0; list-style: none; display: grid; gap: 10px; }
.ticks li { padding-left: 22px; position: relative; max-width: 62ch; color: var(--body-ink); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .72em; width: 11px; height: 1.5px; background: var(--gold); }

/* ── Inner page heads: a walnut band, like the hero ── */
.page-head { background: var(--walnut); color: var(--cream); padding-block: clamp(44px, 6vw, 76px); }
.page-head .label { color: var(--gold); }
.page-head h1 { margin: 12px 0 14px; font-size: clamp(2.4rem, 5vw, 3.7rem); }
.page-head .lede { color: var(--cream-2); }
.page-head a { color: var(--gold); }
.page-head .crumbs, .page-head .crumbs a { color: var(--cream-2); padding-top: 0; }
.page-head .btns .btn.ghost { color: var(--cream); border-color: var(--gold); }
.crumbs { font-weight: 600; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brown); padding: 26px 0 18px; }
.crumbs a { color: var(--brown); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

/* ── Piece page (built to Direction-D-product) ── */
.pdp { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 56px); align-items: start; padding-bottom: clamp(48px, 6vw, 72px); }
.pdp .main { background: var(--card); border: 1px solid var(--line); padding: clamp(18px, 3vw, 36px); }
.pdp .main img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.thumbs > * { aspect-ratio: 1; background: var(--card); border: 1px dashed var(--line); display: grid; place-items: center; text-align: center; padding: 8px; font-weight: 600; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); }
.thumbs > .on { border: 1px solid var(--ink); }
.buy h1 { font-size: clamp(2.5rem, 4.4vw, 3.6rem); margin: 8px 0 8px; }
.buy .price { font-family: var(--display); font-size: 2.75rem; line-height: 1; margin: 0; }
.buy .price small { font-family: var(--display); font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brown); margin-left: 6px; }
.buy .short { font-size: 1.12rem; line-height: 1.55; margin: 18px 0; }
.datebox { background: var(--card); border: 1px solid var(--line); padding: 16px 18px; margin: 22px 0; }
.datebox .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
.datebox input { flex: 1; min-width: 180px; height: var(--control-h); border: 1px solid var(--field); background: #fff; padding: 0 12px; font: 1rem var(--body); color: var(--ink); border-radius: 3px; }
.datebox p { margin: 10px 0 0; font-size: .88rem; color: var(--brown); }
.buy .btn + .btn { margin-top: 10px; }
.facts { margin: 26px 0 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.facts dt { font-weight: 600; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brown); padding-top: 4px; }
.facts dd { margin: 0; }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(24px, 5vw, 56px); align-items: start; }
.story h2 { margin: 8px 0 0; }
.story p { font-size: 1.05rem; line-height: 1.75; color: var(--body-ink); }
@media (max-width: 860px) { .pdp, .story { grid-template-columns: minmax(0, 1fr); } }

/* ── Steps (how it works: a real sequence) ── */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; border-top: 1px solid var(--line); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 4px 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--display); color: var(--gold-dim); font-size: 1.9rem; line-height: 1; grid-row: span 2; }
.steps h3 { margin: 0; font-size: 1.4rem; }
.steps p { margin: 0; color: var(--muted); }

/* ── Terms ── */
.terms { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); }
.terms th, .terms td { text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.terms th { width: 28%; font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brown); padding-top: 19px; }
.terms tr:last-child th, .terms tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) { .terms th, .terms td { display: block; width: auto; } .terms th { border-bottom: 0; padding-bottom: 0; } }

/* ── Delivery zones ── */
.zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px; }
.zone { background: var(--card); border: 1px solid var(--line); padding: 26px; }
.zone h3 { font-size: 1.6rem; margin: 6px 0 0; }
.zone .fee { font-family: var(--display); font-size: 2.5rem; line-height: 1; margin: 8px 0 10px; color: var(--brown); }
.zone ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.zone li { font-size: .86rem; border: 1px solid var(--line); padding: 3px 10px; background: var(--linen); border-radius: 20px; }
.rings { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.rings .r { fill: none; stroke: var(--gold-dim); stroke-width: 1; }
.rings .r1 { fill: rgba(201, 167, 92, .14); }
.rings text { font: 600 10.5px var(--body); fill: var(--brown); letter-spacing: .12em; }
.rings .town { fill: var(--ink); font: 400 12px var(--body); letter-spacing: 0; }
.rings .dot { fill: var(--ink); }
.rings .home { fill: var(--gold); stroke: var(--walnut); stroke-width: 1.5; }

/* ── Forms ── */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; background: var(--card); border: 1px solid var(--line); padding: clamp(22px, 3vw, 36px); }
.form .full { grid-column: 1 / -1; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); }
.form input, .form select, .form textarea { width: 100%; font: 1rem var(--body); color: var(--ink); background: #fff; border: 1px solid var(--field); border-radius: 3px; padding: 0 12px; letter-spacing: 0; text-transform: none; }
/* Fleet rule: single-line controls (including <select>) share one height. Textareas are exempt. */
.form input, .form select { height: var(--control-h); }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.form textarea { min-height: 140px; padding: 10px 12px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.form .hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.form .listsum { grid-column: 1 / -1; border: 1px dashed var(--gold-dim); padding: 12px 14px; font-size: .95rem; background: var(--linen); }
.form .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.alert { border: 1px solid var(--no); color: var(--no); background: #fff; padding: 12px 16px; margin-bottom: 18px; }
@media (max-width: 640px) { .form { grid-template-columns: minmax(0, 1fr); } }

/* ── Your List ── */
.list-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); }
.list-table th, .list-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.list-table th { font-weight: 600; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); }
.list-table td.num, .list-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.list-table input { width: 64px; height: 38px; padding: 0 8px; font: 1rem var(--body); border: 1px solid var(--field); border-radius: 3px; }
.list-table button { background: none; border: 0; color: var(--no); cursor: pointer; font: .9rem var(--body); text-decoration: underline; }
.addbtn[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* ── Town pages ── */
.cityfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); background: var(--walnut-2); border: 1px solid #4B3829; margin: 28px 0 0; }
.cityfacts div { padding: 16px 20px; border-right: 1px solid #4B3829; }
.cityfacts .label { color: var(--gold); }
.cityfacts b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.6rem; color: var(--cream); }

/* ── Prose ── */
.prose { max-width: 760px; }
.prose h2 { margin-top: 1.4em; font-size: 2rem; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose p, .prose li { color: var(--body-ink); }

/* ── Footer: walnut ── */
footer.foot { background: var(--walnut); color: var(--cream-2); padding-block: 64px 36px; font-size: .92rem; }
footer.foot a { color: var(--cream); text-decoration: none; }
footer.foot a:hover { color: var(--gold); }
footer.foot .cols { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 28px 40px; align-items: start; }
footer.foot .brand { font-size: 1.9rem; }
footer.foot h4 { font-family: var(--body); font-weight: 600; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
footer.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
footer.foot .social { display: flex; gap: 10px; margin-top: 14px; }
footer.foot .social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); }
footer.foot .social a:hover { background: var(--gold); color: var(--walnut); }
footer.foot address { font-style: normal; margin-top: 14px; color: var(--cream-2); line-height: 1.55; }
footer.foot .fine { margin-top: 40px; padding-top: 18px; border-top: 1px solid #4B3829; font-size: .82rem; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 1000px) { footer.foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } footer.foot .foot-mark { grid-column: 1 / -1; } }
@media (max-width: 520px) { footer.foot .cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
  .brand-badge { width: 84px; }
  .top.compact .brand-badge { width: 48px; }
  .foot-badge { width: 160px; }
}

/* ── Instagram strip (server/site/instagram.php) ── */
.ig-preview-note { margin: 0 auto 22px; max-width: 760px; text-align: center; font-size: .85rem; color: var(--no); border: 1px dashed var(--no); padding: 8px 14px; background: #fff; }
.ig-row { list-style: none; margin: 0; padding: 0 0 8px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
/* No scrollbar (Jesse, 2026-10-13): the row still swipes and trackpad-scrolls, and the cut-off tile at the edge shows there's more. */
.ig-row::-webkit-scrollbar { display: none; }
.ig-tile { scroll-snap-align: start; }
.ig-tile button { all: unset; box-sizing: border-box; display: grid; gap: 10px; width: 100%; cursor: pointer; background: var(--card); border: 1px solid var(--line); padding: 10px 10px 12px; transition: transform .2s ease, box-shadow .2s ease; }
.ig-tile button:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(58, 42, 31, .1); }
.ig-tile button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ig-art { display: grid; place-items: center; aspect-ratio: 1; background: var(--linen); overflow: hidden; }
.ig-art img { width: 100%; height: 100%; object-fit: cover; }
.ig-art .dwg { width: 92%; }
.ig-cap { font-size: .86rem; line-height: 1.45; color: var(--body-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.ig-counts { display: flex; gap: 14px; font-size: .8rem; font-weight: 600; color: var(--brown); }
.ig-counts span { display: inline-flex; align-items: center; gap: 5px; }
.ig-dialog { border: 0; padding: 0; background: var(--card); color: var(--ink); width: min(920px, 94vw); max-height: 92vh; overflow: auto; }
.ig-dialog::backdrop { background: rgba(30, 20, 14, .72); }
.ig-dialog-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.ig-full-art { background: var(--linen); display: grid; place-items: center; aspect-ratio: 1; }
.ig-full-art img { width: 100%; height: 100%; object-fit: cover; }
.ig-full-art .dwg { width: 90%; }
.ig-full-body { padding: 28px 26px; display: grid; gap: 12px; align-content: start; }
.ig-full-body p { margin: 0; color: var(--body-ink); }
.ig-full-body .ig-handle { font-weight: 600; color: var(--ink); }
.ig-full-body .chip { justify-self: start; }
.ig-full-body .btn { justify-self: start; margin-top: 6px; }
.ig-close, .ig-prev, .ig-next { position: absolute; border: 0; background: var(--walnut); color: var(--cream); width: 40px; height: 40px; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.ig-close { top: 10px; right: 10px; }
.ig-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.ig-next { right: 10px; top: 50%; transform: translateY(-50%); }
@media (max-width: 760px) {
  .ig-row { grid-auto-columns: 72%; }
  .ig-dialog-inner { grid-template-columns: minmax(0, 1fr); }
  .ig-prev, .ig-next { top: 38%; }
}

/* ── Date picker (site.js enhances every [data-date-input]) ──
   The native input stays as the value holder (and the no-JS fallback); a
   designed trigger + popover replace it. Hovering a date shows its rental
   window, Thursday out to Monday back, as a gold band. */
.dp { position: relative; display: inline-block; }
.datebox .dp { flex: 1; min-width: 200px; }
.form .dp { display: block; }
.dp-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.dp-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 230px; height: var(--control-h); padding: 0 14px; background: #fff; border: 1px solid var(--field); border-radius: 3px; color: var(--ink); font: 1rem var(--body); text-align: left; cursor: pointer; letter-spacing: 0; text-transform: none; }
.datebar .dp-trigger { height: 44px; }
.dp-trigger:hover { border-color: var(--gold-dim); }
.dp-trigger svg { flex: none; color: var(--brown); }
.dp-trigger .dp-ph { color: var(--muted); }
.dp-pop { text-transform: none; letter-spacing: 0; font-weight: 400; position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: 336px; max-width: calc(100vw - 32px); background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 18px 40px rgba(43, 32, 24, .22); overflow: hidden; }
.dp-head { display: flex; align-items: center; justify-content: space-between; background: var(--walnut); color: var(--cream); padding: 12px 10px; }
.dp-head b { font: 400 1.35rem var(--display); }
.dp-head button { width: 34px; height: 34px; border: 1px solid #5A4433; border-radius: 50%; background: transparent; color: var(--gold); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.dp-head button:hover:not(:disabled) { background: var(--gold); color: var(--walnut); }
.dp-head button:disabled { opacity: .3; cursor: default; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 10px 12px 4px; row-gap: 4px; }
.dp-dow { text-align: center; font: 600 .66rem var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 4px 0 6px; }
.dp-dow.wk { color: var(--brown); }
.dp-day { position: relative; height: 40px; border: 0; background: transparent; font: 400 .95rem var(--body); color: var(--ink); cursor: pointer; }
.dp-day.wk { font-weight: 600; color: var(--walnut); }
.dp-day:disabled, .dp-day.wk:disabled { color: #C9BFAE; cursor: default; }
.dp-day.other { visibility: hidden; }
.dp-day.today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--gold); }
.dp-day.band { background: #F3E6C6; }
.dp-day.band-start { border-radius: 20px 0 0 20px; }
.dp-day.band-end { border-radius: 0 20px 20px 0; }
.dp-day.band-start.band-end { border-radius: 20px; }
.dp-day.pick { background: var(--walnut); color: var(--cream); border-radius: 50%; }
.dp-day:not(:disabled):hover, .dp-day:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 50%; }
.dp-foot { border-top: 1px solid var(--line); padding: 10px 14px 12px; font-size: .85rem; color: var(--muted); min-height: 3.4em; }
.dp-foot b { color: var(--ink); font-weight: 600; }
.dp-foot .dp-key { display: inline-block; width: 22px; height: 10px; border-radius: 6px; background: #F3E6C6; vertical-align: -1px; margin-right: 6px; }

/* ── Guides ── */
.page-head .byline { color: var(--cream-2); margin: 0; }
.page-head .byline strong { color: var(--cream); font-weight: 600; }
.guide { display: flex; justify-content: center; }
.guide-body { max-width: 720px; font-size: 1.06rem; }
.guide-body h2 { font-size: 1.9rem; margin: 1.6em 0 .5em; }
.guide-body h3 { font-size: 1.35rem; margin: 1.4em 0 .4em; }
.guide-body p, .guide-body li { line-height: 1.75; }
.guide-body ul, .guide-body ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.guide-body li { margin-bottom: .45em; }
.guide-body li::marker { color: var(--gold-dim); }
.guide-body a { color: var(--brown); font-weight: 500; }
.guide-body blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--gold); font-family: var(--display); font-size: 1.2rem; color: var(--ink); }
.tablewrap { overflow-x: auto; margin: 1.2em 0 1.6em; border: 1px solid var(--line); background: var(--card); }
.guide-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
.guide-table th, .guide-table td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.guide-table th { font-weight: 600; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brown); background: var(--linen); }
.guide-table tr:last-child td { border-bottom: 0; }
.guides .card .meta { font-weight: 400; color: var(--muted); font-size: .92rem; }

/* ── Photo galleries (server/site/photos.php): shown only with 3+ real photos ── */
.gallery { list-style: none; margin: 0; padding: 0; columns: 3 260px; column-gap: 14px; }
.gallery li { break-inside: avoid; margin-bottom: 14px; }
.gallery a { display: block; background: var(--card); border: 1px solid var(--line); padding: 8px; }
.gallery img { display: block; width: 100%; height: auto; }
.gal-dialog { border: 0; padding: 0; background: #1C140F; width: min(1200px, 96vw); max-height: 94vh; }
.gal-dialog::backdrop { background: rgba(20, 12, 8, .85); }
.gal-dialog figure { margin: 0; display: grid; }
.gal-dialog img { display: block; max-width: 100%; max-height: 86vh; margin: 0 auto; }
.gal-dialog figcaption { color: var(--cream-2); font-size: .9rem; padding: 10px 16px 14px; text-align: center; }

/* ── Sign in (fleet social-login spec: 44px buttons, Google first, Apple black) ── */
#socialwrap { display: grid; gap: 10px; margin-bottom: 18px; }
#socialwrap:empty { display: none; }
.gbtn-wrap { display: flex; justify-content: center; min-height: 44px; }
.gbtn-wrap > div { width: 100%; }
.socbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; border-radius: 8px; border: none; background: #000; color: #fff; font: 600 15px var(--body); cursor: pointer; }
.orline { text-align: center; color: var(--muted); font-size: 13px; position: relative; margin: 4px 0 14px; }
.orline::before, .orline::after { content: ""; position: absolute; top: 50%; width: 30%; height: 1px; background: var(--line); }
.orline::before { left: 0; } .orline::after { right: 0; }
.linkform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.linkform input { height: var(--control-h); border: 1px solid var(--field); border-radius: 3px; padding: 0 12px; font: 1rem var(--body); }
.signin-msg { margin: 12px 0 0; font-size: .92rem; color: var(--ok); }
.signin-msg.bad { color: var(--no); }
@media (max-width: 480px) { .linkform { grid-template-columns: minmax(0, 1fr); } }
.resv { margin-bottom: 18px; }
.resv-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.resv-head h3 { margin: 6px 0 4px; }
.resv-total { text-align: right; }
.resv-total b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.7rem; }

/* ── Checkout ── */
.co { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.co-main { display: grid; gap: 18px; }
.co-main .panel { display: grid; gap: 12px; }
.co-main .form { border: 0; padding: 0; background: none; }
.co-date { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.co-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.co-lines li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.co-lines li b { font-weight: 600; }
.co-choice { flex-basis: 100%; display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--brown); font-weight: 600; }
.co-choice select { height: 42px; border: 1px solid var(--field); border-radius: 3px; padding: 0 10px; font: .95rem var(--body); background: #fff; }
.co-radio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.co-radio label { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; border: 1px solid var(--line); padding: 14px; cursor: pointer; background: #fff; }
.co-radio label:has(input:checked) { border-color: var(--walnut); box-shadow: inset 0 0 0 1px var(--walnut); }
.co-radio span { grid-column: 2; font-size: .85rem; color: var(--muted); }
.co-agree { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.co-agree input { width: 20px; height: 20px; }
.co-sum { position: sticky; top: 130px; }
.co-totals { margin: 12px 0 0; }
.co-totals div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.co-totals dt { color: var(--muted); }
.co-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.co-totals .big { border-bottom: 2px solid var(--ink); }
.co-totals .big dt, .co-totals .big dd { color: var(--ink); font-weight: 600; font-size: 1.1rem; }
.co-totals .due dt, .co-totals .due dd { color: var(--ink); font-weight: 600; }
.co-errors { margin: 14px 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.co-errors li { color: var(--no); font-size: .9rem; padding-left: 16px; position: relative; }
.co-errors li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--no); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 900px) { .co { grid-template-columns: minmax(0, 1fr); } .co-sum { position: static; } }

/* The venue rules guide (PDF) offer: a gold band at the top of the footer and on /guides/. */
.foot-cta, .guides-cta { background: var(--gold); color: var(--ink); }
.foot-cta .wrap, .guides-cta .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-block: 22px; }
.foot-cta p, .guides-cta p { margin: 0; font-size: 1.02rem; color: var(--ink); }
.foot-cta .btn:hover, .guides-cta .btn:hover { background: var(--walnut-2); color: var(--cream); }
footer.foot .foot-cta { margin: -64px 0 52px; }
footer.foot .foot-cta a.btn, footer.foot .foot-cta a.btn:hover { color: var(--cream); }

/* Gallery shot cards: the shot list as a contact sheet. Each empty slot draws its
   frame at the slot's real ratio, with the piece's drawing faded inside. */
.gal-note { margin: 10px auto 0; max-width: 560px; color: var(--brown); font-size: .98rem; }
.gallery.sheet { columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gallery.sheet li { margin: 0; }
.gallery.sheet a { height: 100%; }
.gallery.sheet a img { aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
.gallery .shot-card { aspect-ratio: 4 / 5; display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--kraft); border: 1px solid var(--line); }
.gallery .shot-well { flex: 1; min-height: 0; display: grid; place-items: center; }
.gallery .shot-frame { display: grid; place-items: center; border: 1px dashed var(--gold-dim); background: rgba(244, 238, 226, .55); }
.gallery .shot-frame.r-32 { width: 100%; aspect-ratio: 3 / 2; }
.gallery .shot-frame.r-11 { width: 70%; aspect-ratio: 1; }
.gallery .shot-frame.r-23 { width: 52%; aspect-ratio: 2 / 3; }
.gallery .shot-frame .dwg { width: 86%; opacity: .34; }
.gallery .shot-frame.r-23 .dwg { width: 98%; }
.gallery .shot-label { display: block; font: 600 .7rem var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--brown); }
.gallery .shot-label small { font-size: inherit; letter-spacing: .08em; color: var(--gold-dim); margin-left: 6px; }
.gallery .shot-text p { margin: 4px 0 0; font-size: .92rem; line-height: 1.4; color: var(--ink); }
@media (max-width: 760px) {
  .gallery.sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gallery .shot-card { padding: 12px; gap: 8px; aspect-ratio: 3 / 4; }
  .gallery .shot-text p { font-size: .82rem; }
}

/* Turnstile, interaction-only: no space at all until Cloudflare asks for a click. */
.ts-slot:not(.is-shown) { height: 0; overflow: hidden; }
.form .ts-slot:not(.is-shown) { margin-top: -16px; }
.co-ts.is-shown { margin-top: 14px; }
.ts-wait { grid-column: 1 / -1; margin: 0; font-size: .92rem; color: var(--brown); }

/* /gallery/: one contact sheet per piece. */
.gal-piece { padding-block: 34px; border-top: 1px solid var(--line); }
.gal-piece:first-of-type { border-top: 0; }
.gal-piece-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 18px; }
.gal-piece-head h2 { margin: 0; }
.gal-piece-head .price { margin: 0; color: var(--brown); }
.gal-piece-head .btn { margin-left: auto; }
.gal-filter { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 18px 0; }
.gal-filter button { min-height: 40px; padding: 0 16px; border: 1px solid var(--walnut); background: none; color: var(--walnut); font: 600 .9rem var(--body); border-radius: 999px; cursor: pointer; }
.gal-filter button[aria-pressed="true"] { background: var(--walnut); color: var(--cream); }
@media (max-width: 640px) { .gal-piece-head .btn { margin-left: 0; } }