/* Copperhound site layer, on top of copperhound-tokens.css v1.1 */
html { scroll-behavior: smooth; }
body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--ch-space-6); }
.wrap.narrow { max-width: 760px; }
section { padding: var(--ch-space-16) 0; }
section.ch-band { border-top: 1px solid var(--ch-line); border-bottom: 1px solid var(--ch-line); }
h1, h2, h3 { margin-top: 0; }
h2 { margin-bottom: var(--ch-space-6); }
.ch-eyebrow { display: block; margin-bottom: var(--ch-space-3); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ch-soot); color: var(--ch-beige); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }

/* nav */
.site-nav { background: var(--ch-white); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--ch-line); }
.site-nav .ch-nav { border-bottom: 0; padding-top: var(--ch-space-2); padding-bottom: var(--ch-space-2); }
.site-nav .brand img { display: block; height: 32px; width: auto; }
.site-nav .menu { display: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--ch-soot); }
.ch-nav-links a[aria-current] { box-shadow: inset 0 -2px 0 var(--ch-rust); }
.ch-nav-links .ch-btn { box-shadow: none; }
@media (max-width: 760px) {
  .site-nav .menu { display: inline-flex; }
  .site-nav .ch-nav-links { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--ch-space-3); padding: var(--ch-space-3) 0 var(--ch-space-4); }
  .site-nav.open .ch-nav-links { display: flex; }
}

/* hero */
.hero { padding: var(--ch-space-20, 80px) 0 var(--ch-space-16); }
.hero h1 { max-width: 14ch; margin-bottom: var(--ch-space-4); }
.hero .ch-lead { max-width: 52ch; margin-top: 0; }
.hero.small { padding: var(--ch-space-12) 0 var(--ch-space-8); }
.hero.small h1 { max-width: 20ch; }
.cta-row { display: flex; gap: var(--ch-space-3); flex-wrap: wrap; align-items: center; margin-top: var(--ch-space-6); }

/* two column blocks */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ch-space-12); align-items: center; }
.two-col.top { align-items: start; }
.two-col.rev > :first-child { order: 2; }
.two-col.mt { margin-top: var(--ch-space-12); }
.panel { background: var(--ch-beige-tint); border: 1px solid var(--ch-line-strong); border-radius: var(--ch-radius-container); padding: var(--ch-space-8); }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; gap: var(--ch-space-8); } .two-col.rev > :first-child { order: 0; } }

/* cards */
.ichead { display: flex; align-items: center; gap: var(--ch-space-2); }
.ichead .ch-eyebrow { margin: 0; }
.ch-card.person { text-align: center; }
.ch-card.person .ch-avatar { width: 72px; height: 72px; font-size: 1.8rem; border-color: var(--ch-line-strong); margin-bottom: var(--ch-space-2); }
.ch-card.person .ch-eyebrow { margin-bottom: var(--ch-space-2); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ch-space-6); }
.steps.col { grid-template-columns: 1fr; max-width: 760px; gap: var(--ch-space-8); }
.step { display: flex; gap: var(--ch-space-4); align-items: flex-start; }
.step-n { font-family: var(--ch-font-display); font-size: 3.2rem; line-height: .9; color: var(--ch-tan); letter-spacing: .01em; flex: none; width: 2ch; }
.step > div { display: flex; flex-direction: column; gap: 6px; }
.step b { font-family: var(--ch-font-display); font-weight: 400; text-transform: uppercase; font-size: var(--ch-fs-h3); letter-spacing: var(--ch-track-display); line-height: var(--ch-lh-display); }
.step > div > span { color: var(--ch-text-muted); font-size: .95rem; }
.step.big h3 { margin: 4px 0 2px; }
.step.big p { margin: 0; color: var(--ch-text-muted); }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }


/* paper devices: the Friday report, the rules card */
.paper { position: relative; margin: 0; background: var(--ch-white); border: 1px solid var(--ch-line-strong); border-top: var(--ch-double-rule); border-radius: 0 0 var(--ch-radius-container) var(--ch-radius-container); padding: var(--ch-space-5) var(--ch-space-6); box-shadow: 0 8px 24px rgba(43, 37, 33, .08); }
.paper-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ch-space-3); flex-wrap: wrap; margin-bottom: var(--ch-space-3); }
.paper-head .ch-eyebrow { margin: 0; }
.paper-meta { font-family: var(--ch-font-label); font-size: var(--ch-fs-label); color: var(--ch-text-muted); }
.paper .ch-table { width: 100%; }
.paper .ch-table td.num { text-align: right; font-family: var(--ch-font-display); font-size: 1.35rem; letter-spacing: .02em; }
.paper-foot { margin: var(--ch-space-4) 0 0; font-size: .95rem; color: var(--ch-text-muted); border-top: 1px dashed var(--ch-line-strong); padding-top: var(--ch-space-3); }
.rule-list { list-style: none; padding: 0; margin: 0; }
.rule-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--ch-line); }
.rule-list li:last-child { border-bottom: 0; }
.rule-list .ch-icon { flex: none; margin-top: 3px; }

/* rubber stamps */
.stamp { position: absolute; right: 22px; top: 30px; transform: rotate(-9deg); font-family: var(--ch-font-display); text-transform: uppercase; font-size: 1.25rem; letter-spacing: .08em; line-height: 1; padding: 6px 10px 4px; border: 2.5px solid currentColor; border-radius: 4px; opacity: .85; pointer-events: none; }
.stamp-ok { color: var(--ch-ok); }
.stamp-sent { color: var(--ch-rust); position: static; transform: rotate(-7deg); }
.report .stamp, .rules .stamp { top: auto; bottom: 58px; }

/* text thread */
.thread { margin: 0; display: flex; flex-direction: column; gap: 10px; max-width: 440px; padding: var(--ch-space-5); background: var(--ch-white); border: 1px solid var(--ch-line-strong); border-radius: var(--ch-radius-container); }
.thread figcaption { margin-bottom: var(--ch-space-2); }
.bubble { max-width: 85%; padding: 10px 14px; border-radius: 16px; position: relative; }
.bubble p { margin: 0; font-size: .98rem; line-height: 1.45; }
.bubble time { display: block; font-family: var(--ch-font-label); font-size: .72rem; letter-spacing: .04em; margin-top: 4px; opacity: .7; }
.bubble.them { background: var(--ch-beige-tint); border: 1px solid var(--ch-line); align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.me { background: var(--ch-soot); color: var(--ch-beige); align-self: flex-end; border-bottom-right-radius: 4px; }

/* sent ticket */
.ticket { margin: 0; display: flex; max-width: 420px; background: var(--ch-white); border: 1px solid var(--ch-line-strong); border-radius: var(--ch-radius-container); overflow: hidden; }
.ticket-body { flex: 1; padding: var(--ch-space-5) var(--ch-space-6); display: flex; flex-direction: column; gap: 4px; }
.ticket-body b { font-family: var(--ch-font-display); font-weight: 400; text-transform: uppercase; font-size: 1.6rem; line-height: 1; letter-spacing: var(--ch-track-display); }
.ticket-sub { font-family: var(--ch-font-label); font-size: var(--ch-fs-label); color: var(--ch-text-muted); }
.ticket-stub { flex: none; width: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-left: 2px dashed var(--ch-line-strong); background: var(--ch-beige-tint); padding: var(--ch-space-4); }
.ticket-stub time { font-family: var(--ch-font-label); font-size: .75rem; color: var(--ch-text-muted); }

/* one-price hang tag */
.tag { position: relative; margin: 0; max-width: 420px; background: var(--ch-white); border: 1px solid var(--ch-line-strong); border-top: var(--ch-double-rule); border-radius: 0 0 var(--ch-radius-container) var(--ch-radius-container); padding: var(--ch-space-8) var(--ch-space-6) var(--ch-space-5); box-shadow: 0 8px 24px rgba(43, 37, 33, .08); }
.tag-hole { position: absolute; top: 14px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ch-beige); border: 2px solid var(--ch-tan); }
.tag .ch-eyebrow { text-align: center; margin-top: var(--ch-space-3); }
.tag-price { font-family: var(--ch-font-display); text-transform: uppercase; font-size: 4rem; line-height: .95; text-align: center; letter-spacing: .01em; margin: var(--ch-space-2) 0 var(--ch-space-5); color: var(--ch-soot); }



/* about page cards */
.about-grid { margin-bottom: var(--ch-space-4); }
.about-card p { font-size: var(--ch-fs-body); }

/* prose */
.prose h2 { margin-top: var(--ch-space-8); }
.prose h2:first-child { margin-top: 0; }
.legal h2 { font-size: var(--ch-fs-h3); margin-top: var(--ch-space-6); }

/* booking page */
.cal { background: var(--ch-white); border: 1px solid var(--ch-line-strong); border-radius: var(--ch-radius-container); padding: var(--ch-space-5) var(--ch-space-6); }
.cal-frame { min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ch-space-3); border: 2px dashed var(--ch-line-strong); border-radius: var(--ch-radius-control); background: var(--ch-beige-tint); text-align: center; padding: var(--ch-space-6); }
.cal-frame p { margin: 0; color: var(--ch-text-muted); }
.lead-form { max-width: none; }
.lead-form .ch-label { margin-top: var(--ch-space-4); }
.lead-form .ch-help { margin-top: 4px; }
.lead-form .cta-row { margin-top: var(--ch-space-5); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-msg { min-height: 1.4em; font-size: .95rem; margin: var(--ch-space-3) 0 0; }
.form-msg.ok { color: var(--ch-ok); }
.form-msg.err { color: var(--ch-err); }

/* footer */
.site-foot { padding: var(--ch-space-12) 0 var(--ch-space-8); margin-top: auto; }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: var(--ch-space-6); flex-wrap: wrap; padding-bottom: var(--ch-space-6); border-bottom: 1px solid rgba(234, 219, 194, .18); }
.foot-links { display: flex; gap: var(--ch-space-5); flex-wrap: wrap; font-family: var(--ch-font-display); text-transform: uppercase; letter-spacing: var(--ch-track-nav); font-size: var(--ch-fs-control); }
.site-foot a { color: var(--ch-on-dark); text-decoration: none; }
.site-foot a:hover { color: var(--ch-copper); }
.foot-bottom { display: flex; justify-content: space-between; gap: var(--ch-space-4); flex-wrap: wrap; padding-top: var(--ch-space-5); font-family: var(--ch-font-label); font-size: var(--ch-fs-label); letter-spacing: .03em; color: var(--ch-on-dark-muted); }

/* draft notice (removed on --final builds) */
.draft-note { position: fixed; left: 12px; bottom: 12px; z-index: 30; font-family: var(--ch-font-label); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; background: var(--ch-soot); color: var(--ch-beige); padding: 6px 10px; border-radius: var(--ch-radius-control); opacity: .9; }

@media (max-width: 600px) {
  section { padding: var(--ch-space-12) 0; }
  .hero { padding-top: var(--ch-space-12); }
  .wrap { padding: 0 var(--ch-space-5); }
  .stamp { font-size: 1rem; right: 14px; }
  .ticket-stub { width: 104px; }
  .tag-price { font-size: 3.2rem; }
  .panel { padding: var(--ch-space-5); }
}

/* v0.2: hero wrap, legal pages, consent checkbox, smaller draft chip */
.hero h1 { max-width: 16ch; }
.draft-note { left: auto; right: 12px; font-size: .7rem; padding: 5px 8px; }
.ch-check.consent { align-items: flex-start; font-size: .9rem; color: var(--ch-text-muted); margin-top: var(--ch-space-4); }
.ch-check.consent input { margin-top: 4px; flex: none; }
.legal h2 { font-size: var(--ch-fs-h3); margin-top: var(--ch-space-8); }
.legal h3 { font-size: 1.15rem; margin-top: var(--ch-space-6); }
.legal p, .legal li { font-size: .98rem; }
.legal blockquote { margin: 0 0 var(--ch-space-4); padding: var(--ch-space-3) var(--ch-space-4); border-left: 3px solid var(--ch-tan); color: var(--ch-text-muted); }
.legal .ch-table { width: 100%; margin: var(--ch-space-3) 0 var(--ch-space-5); font-size: .92rem; }
.legal .ch-alert { margin-bottom: var(--ch-space-6); }
mark.ph { background: var(--ch-beige); color: var(--ch-deep); padding: 0 4px; border-radius: 3px; font-family: var(--ch-font-label); font-size: .82em; }
.hero.small .ch-lead { max-width: 60ch; }