@import url('/assets/tokens.css');

/* Yellow Door Experiences, for every page but the homepage: buyer pages (experience, proposal, Season, waiver, vendor)
   and the back office. The homepage's look carried over (D70): white rooms, deep ink, brass hairlines, Italiana for
   display, Figtree for reading, DM Mono for small labels, lacquer yellow only where it matters. Colors and type live
   in tokens.css. One light look in every mode. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.65 var(--text); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-color: rgba(168, 132, 63, .6); text-underline-offset: 4px; }
@media (hover: hover) { a:hover { text-decoration-color: var(--brass); } }
img { display: block; max-width: 100%; }
::selection { background: rgba(233, 179, 18, .28); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: 0; z-index: 10; transform: translateY(-120%); background: var(--paper); color: var(--ink); padding: 12px 18px; font: 600 15px/1 var(--sans); text-decoration: none; }
.skip:focus { transform: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: .01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(48px, 7vw, 100px); }
h2 { font-size: clamp(36px, 4.6vw, 62px); }
h3 { font-size: clamp(28px, 2.8vw, 38px); }
em { font-style: italic; }
.label { font: 500 14px/1.2 var(--sans); color: var(--ink-2); }
.muted { color: var(--ink-2); }
.note { font-size: 16px; color: var(--ink-2); }
.ok { color: var(--accent); }
section { padding: clamp(64px, 10vw, 140px) 0; }

/* Header: the door wordmark over a brass hairline. */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(168, 132, 63, .45); }
.nav { display: flex; gap: 28px; align-items: center; font: 500 14px/1 var(--sans); letter-spacing: .04em; }
.nav a { text-decoration: none; }
@media (max-width: 760px) { .nav a:not(.btn) { display: none; } .top .btn { padding: 12px 16px; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 28px; border-radius: 0; white-space: nowrap;
  background: var(--ink); color: #fff; text-decoration: none; font: 500 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--ink); cursor: pointer; transition: background .4s, color .4s, border-color .4s; }
@media (hover: hover) { .btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); } }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
@media (hover: hover) { .btn.ghost:hover { background: var(--ink); color: #fff; } }
.btn.brass { background: var(--lacquer); border-color: var(--lacquer); color: var(--ink); }
@media (hover: hover) { .btn.brass:hover { background: #f2c230; border-color: #f2c230; } }
.btn[disabled] { opacity: .5; cursor: default; }
.textlink { justify-self: start; font: 600 15px/1 var(--sans); text-decoration: none; border-bottom: 1px solid var(--brass); padding: 10px 0 6px; transition: color .2s; }
@media (hover: hover) { .textlink:hover { color: var(--brass); } }

/* Shared building blocks (proposal pages and the dashboard) */
.hero { padding: clamp(40px, 7vw, 100px) 0 clamp(40px, 6vw, 80px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.hero h1 { grid-column: 1 / -1; }
.hero .lede { grid-column: 1 / span 2; font-size: clamp(19px, 1.7vw, 21px); margin: 0; color: var(--ink-2); }
.hero .cta { grid-column: 3 / span 2; align-self: end; display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 820px) { .hero .lede, .hero .cta { grid-column: 1 / -1; justify-content: flex-start; } }
.molding { border-top: 1px solid rgba(168, 132, 63, .45); }
.band { background: var(--paper-2); }
.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.split > .a { grid-column: 1 / span 5; }
.split > .b { grid-column: 7 / span 6; }
@media (max-width: 860px) { .split > .a, .split > .b { grid-column: 1 / -1; } }
.card { background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--lacquer); padding: clamp(24px, 3vw, 40px); }
.ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.ticks li { padding-left: 24px; position: relative; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .82em; width: 12px; height: 1px; background: var(--brass); }
.menu { margin-top: 32px; border-top: 1px solid rgba(168, 132, 63, .45); }
.dish { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px 24px; padding: 24px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.dish .no { font: 400 24px/1 var(--serif); color: var(--brass); }
.dish h3 { font-size: clamp(24px, 2.6vw, 32px); }
.dish p { grid-column: 2; margin: 6px 0 0; color: var(--ink-2); max-width: 60ch; }
.dish .price { font: 500 14px/1 var(--mono); letter-spacing: .04em; white-space: nowrap; text-align: right; }
.dish .price small { display: block; font: 400 13px/1.3 var(--sans); color: var(--ink-2); margin-top: 8px; }
@media (max-width: 640px) { .dish { grid-template-columns: 36px 1fr; } .dish .price { grid-column: 2; text-align: left; margin-top: 8px; } }

/* Forms: quiet underlines that turn brass on focus */
form.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin-top: 24px; }
form.grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { form.grid { grid-template-columns: 1fr; } }
label { display: grid; gap: 6px; font: 500 15px/1.3 var(--sans); color: var(--ink-2); }
input, select, textarea { font: 17px/1.4 var(--text); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink-2); border-radius: 0; padding: 10px 0; width: 100%; caret-color: var(--brass); }
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--brass); box-shadow: 0 1px 0 var(--brass); }
input[type="checkbox"] { width: auto; accent-color: var(--ink); }
textarea { min-height: 90px; resize: vertical; }
label:has(input[type="checkbox"]) { font: 400 16px/1.5 var(--text); }

/* Video call */
.screen { aspect-ratio: 16 / 10; width: 100%; overflow: hidden; background: var(--ink); color: #fff; display: grid; place-items: center; text-align: center; padding: 24px; position: relative; }
.screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.screen > span { position: relative; }
.screen iframe { width: 100%; height: 100%; border: 0; position: relative; }

/* Questions: a brass plus that turns to a minus */
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font: 500 18px/1.4 var(--sans); position: relative; transition: color .2s; }
summary::-webkit-details-marker { display: none; }
summary::before, summary::after { content: ''; position: absolute; right: 6px; top: 33px; width: 15px; height: 1px; background: var(--brass); transition: transform .4s; }
summary::after { transform: rotate(90deg); }
details[open] summary::after { transform: rotate(0); }
details p { color: var(--ink-2); margin: 0 0 22px; max-width: 64ch; }

/* Footer: deep ink, like the homepage's. */
footer { background: var(--ink); color: #cfd1e3; padding: 56px 0 64px; font-size: 15px; }
footer .wrap { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
footer .mark { color: #fff; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }