:root {
  --ink: #0a0a09;
  --line: rgba(198, 161, 91, 0.22);
  --stone: #d8d0c2;
  --stone-dim: #9d958a;
  --paper: #ece6da;
  --gold: #c6a15b;
  --gold-hi: #e7c987;
  --gold-grad: linear-gradient(135deg, #8a6a32 0%, #e7c987 45%, #b38a45 70%, #f0d79c 100%);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 72px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--stone); font: 300 17px/1.7 var(--sans); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p a, li a, .crumbs a { color: var(--gold-hi); border-bottom: 1px solid var(--line); }
.paper p a, .paper li a { color: #7a5c28; border-color: rgba(122, 92, 40, .4); }

.eyebrow { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); font-weight: 400; }
.display { font-family: var(--serif); font-weight: 400; line-height: 1.06; color: #f2ece2; letter-spacing: -.01em; }
.display em { font-style: italic; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 24px; font: 400 12px var(--sans); letter-spacing: .22em; text-transform: uppercase; border: 1px solid var(--gold); color: var(--gold-hi); background: none; cursor: pointer; transition: all .4s ease; }
.btn-gold { background: var(--gold-grad); color: #12100c; border-color: transparent; font-weight: 500; }
.btn-gold:hover { filter: brightness(1.1); }
.btn:not(.btn-gold):hover { background: rgba(198, 161, 91, .1); }

nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px var(--gutter); background: rgba(10, 10, 9, .9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand svg { width: 32px; height: 32px; flex: none; }
.brand-name { font-family: var(--serif); font-size: 17px; letter-spacing: .18em; text-transform: uppercase; color: #f2ece2; line-height: 1.15; }
.brand-name small { display: block; font: 400 9.5px var(--sans); letter-spacing: .36em; color: var(--gold); }
.nav-links { display: flex; gap: clamp(14px, 2vw, 28px); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.nav-links a { opacity: .75; white-space: nowrap; transition: opacity .3s, color .3s; }
.nav-links a:hover, .nav-links a[aria-current] { opacity: 1; color: var(--gold-hi); }
.nav-tel { font-size: 13px; letter-spacing: .14em; color: var(--gold-hi); white-space: nowrap; }

.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 400px); gap: clamp(32px, 6vw, 96px); align-items: start; padding: clamp(40px, 6vw, 76px) var(--gutter) clamp(56px, 7vw, 96px); background: radial-gradient(110% 90% at 80% 0%, #2a2013 0%, #15120d 42%, var(--ink) 76%); }
.crumbs { font-size: 13px; color: var(--stone-dim); margin-bottom: 26px; }
.crumbs a { border: 0; }
.hero h1 { font-size: clamp(40px, 5.2vw, 74px); margin: 12px 0 20px; }
.lede { font-size: clamp(18px, 1.5vw, 21px); max-width: 38em; }

.contact { background: rgba(14, 13, 11, .84); border: 1px solid var(--line); padding: clamp(20px, 2.4vw, 30px); }
.contact .tel { display: block; font: 400 clamp(30px, 3vw, 38px)/1.2 var(--serif); color: var(--gold-hi); margin: 4px 0 14px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.pair .btn { padding: 14px 8px; }
form { display: grid; gap: 10px; }
label { display: grid; gap: 3px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--stone-dim); }
input, textarea { width: 100%; background: rgba(255, 255, 255, .04); border: 0; border-bottom: 1px solid var(--line); color: #f2ece2; font: 300 16px var(--sans); padding: 8px 2px; border-radius: 0; outline: none; }
input:focus, textarea:focus { border-color: var(--gold-hi); }
textarea { resize: vertical; min-height: 44px; }
.form-note { font-size: 13px; line-height: 1.45; color: var(--stone-dim); }

section.band { padding: clamp(60px, 8vw, 110px) var(--gutter); }
.paper { background: var(--paper); color: #3b362e; }
.paper .display, .paper h3 { color: #15130f; }
.paper .eyebrow { color: #8a6a32; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.band h2 { font-size: clamp(32px, 3.8vw, 52px); margin: 10px 0 18px; }
.band h3 { font: 400 26px/1.2 var(--serif); color: #f2ece2; margin: 26px 0 6px; }
.band p + p { margin-top: 14px; }
.ticks { list-style: none; border-top: 1px solid var(--line); }
.paper .ticks, .paper .ticks li { border-color: rgba(21, 19, 15, .22); }
.ticks li { padding: 11px 0; border-bottom: 1px solid var(--line); }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo figcaption { font-size: 14px; color: var(--stone-dim); margin-top: 10px; }
.paper .photo figcaption { color: #6b6256; }

.quote blockquote { font: 400 clamp(25px, 3vw, 38px)/1.28 var(--serif); color: #f2ece2; max-width: 26em; }
.quote figcaption { margin-top: 14px; font-size: 14px; color: var(--gold-hi); }
.quote figcaption span { color: var(--stone-dim); margin-left: 8px; }

.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid rgba(21, 19, 15, .22); vertical-align: top; }
.compare th { font: 400 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #8a6a32; }

details { border-bottom: 1px solid var(--line); padding: 16px 0; max-width: 860px; }
summary { font: 400 clamp(21px, 2vw, 26px)/1.25 var(--serif); color: #f2ece2; cursor: pointer; }
details p { margin-top: 10px; color: var(--stone-dim); max-width: 680px; }

.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.related a { background: var(--ink); padding: 24px; font: 400 25px/1.2 var(--serif); color: #f2ece2; border: 0; transition: color .3s; }
.related a:hover { color: var(--gold-hi); }
.related small { display: block; font: 300 15px/1.5 var(--sans); color: var(--stone-dim); margin-top: 6px; }

footer { border-top: 1px solid var(--line); padding: 48px var(--gutter) 40px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px 48px; font-size: 15px; color: var(--stone-dim); }
footer h2 { font: 400 11px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
footer a { color: var(--stone); display: block; }
footer a:hover { color: var(--gold-hi); }
.foot-id { display: flex; gap: 18px; align-items: flex-start; }
.foot-id img { width: 76px; height: 76px; border-radius: 50%; flex: none; }

.mobile-bar { display: none; }

@media (max-width: 1420px) { .nav-links { display: none; } }
@media (max-width: 900px) {
  body { font-size: 16px; }
  .hero, .split, .related, footer { grid-template-columns: 1fr; }
  .nav-tel { display: none; }
  .mobile-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; }
  .mobile-bar .btn { background-color: #12100c; }
  .mobile-bar .btn-gold { background: var(--gold-grad); }
  footer { padding-bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.scroll-x { overflow-x: auto; }
.fees { width: 100%; min-width: 720px; border-collapse: collapse; }
.fees th { font: 400 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); text-align: left; padding: 10px 14px 10px 0; }
.fees td { padding: 13px 14px 13px 0; border-top: 1px solid var(--line); vertical-align: top; }
.fees td:nth-child(3), .fees td:nth-child(4) { font: 400 24px/1.1 var(--serif); color: var(--gold-hi); white-space: nowrap; }
.band .fees a { color: var(--gold-hi); }

/* blog */
.post-list { list-style: none; max-width: 860px; }
.post-list li { padding: 18px 0; border-top: 1px solid rgba(21, 19, 15, .22); }
.post-list a { font: 400 clamp(24px, 2.4vw, 32px)/1.2 var(--serif); color: #15130f; border: 0; }
.post-list a:hover { color: #8a6a32; }
.post-list span { display: block; color: #6b6256; margin-top: 3px; }
.post-body { max-width: 760px; }
.post-body h2 { font: 400 clamp(26px, 2.6vw, 34px)/1.15 var(--serif); color: #15130f; margin: 30px 0 10px; }
.post-body .ticks { margin: 12px 0; }
.post-body .scroll-x { margin: 16px 0; }
.post-back { margin-top: 30px; }
.bbb-seal { display: inline-block; margin-top: 14px; }
.bbb-seal img { display: block; width: 170px; height: auto; }