@import url('tokens.css');

/* ============================================================
   Avontuur — Louise Fili direction
   Old World warmth, ornament used sparingly, the page composed
   as an invitation rather than a listing. Type leads, because
   there is no photography yet and the layout must not depend
   on any arriving.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: var(--step-0);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }

/* ---- type: the serif leads ---- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }
h1 { font-size: var(--step-4); line-height: 1.08; letter-spacing: -0.005em; }
h2 { font-size: var(--step-3); line-height: 1.14; text-wrap: balance; }
h3 { font-size: var(--step-1); line-height: 1.25; }
p  { margin: 0 0 1.15em; max-width: var(--measure); }

/* Small-caps label, letterspaced and quiet. Never bold. */
.label {
  font-family: var(--wordmark);
  font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 22px;
}

/* Ornament: hairline with a lozenge at centre, taken from the line
   language of the turtle mark. Opens a section, never twice running. */
.ornament { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
.ornament::before, .ornament::after { content: ''; height: 1px; background: var(--rule); flex: 1; }
.ornament i { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); flex: none; }
.ornament--left::before { display: none; }
.ornament--left::after { max-width: 120px; }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(16, 32, 60, 0.95); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(208, 174, 121, 0.28);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 82px; gap: 24px; }
.brand img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: .93; }
.nav-links { display: flex; gap: 38px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--wordmark); color: rgba(255,255,255,0.8); text-decoration: none;
  font-size: var(--step--2); letter-spacing: 0.24em; text-transform: uppercase;
  padding-bottom: 5px; border-bottom: 1px solid transparent; transition: all .3s;
}
.nav-links a:hover { color: #fff; border-bottom-color: var(--gold); }

/* ---- buttons: thin gold rule, generous tracking, no shout ---- */
.btn {
  display: inline-block; padding: 15px 36px;
  font-family: var(--wordmark); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--gold); transition: all .3s;
}
.btn-solid { background: var(--gold); color: var(--navy-deep); }
.btn-solid:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.btn-ghost { color: var(--gold); background: transparent; }
.btn-ghost:hover { background: rgba(208,174,121,.14); }

/* ---- hero: composed like an invitation card ---- */
.hero { background: var(--navy); color: #fff; position: relative; }
.hero::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero-inner { padding-block: clamp(64px, 9vw, 118px); }
.hero-card {
  border: 1px solid rgba(208,174,121,.34);
  padding: clamp(40px, 6vw, 78px) clamp(24px, 5vw, 64px);
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
.hero-mark   { height: 88px; width: auto; margin-bottom: 28px; }
.hero-script { height: 52px; width: auto; opacity: .95; margin-bottom: 32px; }
.hero h1 { max-width: 22ch; text-wrap: balance; }
.hero .lede {
  font-size: var(--step-1); color: var(--light-blue); font-weight: 300;
  max-width: 48ch; margin: 26px auto 0; line-height: 1.62;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 42px; justify-content: center; }

/* ---- sections ---- */
.section { padding-block: clamp(72px, 10vw, 138px); }
.section--ivory { background: var(--ivory); }
.section-head { margin-bottom: 60px; max-width: 62ch; }
.section-head p { color: var(--muted); font-size: var(--step-1); font-weight: 300; }
.centred { text-align: center; margin-inline: auto; }
.centred .ornament { max-width: 240px; margin-inline: auto; }
.centred p { margin-inline: auto; }

.split { display: grid; gap: clamp(36px, 6vw, 84px); grid-template-columns: 1.15fr 1fr; align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

/* Drop cap, one per page, on the opening paragraph only. */
.dropcap::first-letter {
  font-family: var(--display); float: left;
  font-size: 3.4em; line-height: 0.84; padding: 0.06em 0.13em 0 0;
  color: var(--gold-deep);
}

/* ---- facts: a hairline ledger ---- */
.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  display: flex; gap: 22px; align-items: baseline; padding: 17px 0;
  border-bottom: 1px solid var(--rule-soft); color: var(--muted);
  font-size: var(--step--1);
}
.facts li:first-child { border-top: 1px solid var(--rule-soft); }
.facts b {
  font-family: var(--display); font-weight: 400; font-size: var(--step-1);
  color: var(--navy); min-width: 4.8em;
}

/* ---- rooms as a menu, not a card grid ----
   Seven unnamed rooms would read as seven empty photo boxes. Ruled as a
   list, the absence of imagery reads as restraint instead of absence. */
.roomlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.roomlist li {
  border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: 4rem 1fr auto; gap: 26px;
  align-items: baseline; padding: 25px 6px; transition: background .3s;
}
.roomlist li:hover { background: rgba(208,174,121,.08); }
.roomnum  { font-family: var(--display); font-size: var(--step-1); color: var(--gold-deep); }
.roomname { font-family: var(--display); font-size: var(--step-1); color: var(--navy); }
.roommeta { color: var(--muted); font-size: var(--step--1); text-align: right; }

/* ---- feature pair (Gourmand / the Spa) ---- */
.grid { display: grid; gap: clamp(22px, 3vw, 40px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.feature {
  border: 1px solid var(--rule); padding: clamp(32px, 4vw, 54px);
  background: var(--paper); display: flex; flex-direction: column;
}
.section--ivory .feature { background: var(--paper); }
.feature h3 { font-size: var(--step-2); margin-bottom: 14px; }
.feature p { color: var(--muted); }
.link-cta {
  margin-top: auto; padding-top: 24px; align-self: flex-start;
  font-family: var(--wordmark); font-size: var(--step--2);
  letter-spacing: .24em; text-transform: uppercase; text-decoration: none;
  color: var(--navy); border-bottom: 1px solid var(--gold); padding-bottom: 5px;
}
.link-cta:hover { color: var(--gold-deep); }

/* ---- band ---- */
.band { background: var(--navy-deep); color: #fff; }
.band .wrap { padding-block: clamp(66px, 9vw, 120px); }
.band p { color: var(--light-blue); font-weight: 300; }
.band .ornament::before, .band .ornament::after { background: rgba(208,174,121,.4); }
.around { margin-top: 54px; }
.around-item { border-top: 1px solid rgba(208,174,121,.34); padding-top: 22px; }
.around-item h3 { color: #fff; margin-bottom: 9px; }
.around-item p { color: rgba(195,224,244,.82); font-size: var(--step--1); margin: 0; }

/* ---- location ---- */
.plain { list-style: none; padding: 0; margin: 26px 0 0; }
.plain li { padding: 13px 0; border-bottom: 1px solid var(--rule-soft); color: var(--muted); font-size: var(--step--1); }
.map-slot { aspect-ratio: 4/3; background: var(--ivory-deep); border: 1px solid var(--rule); }
.note { margin-top: 38px; color: var(--muted); font-size: var(--step--2); letter-spacing: .04em; }

/* ---- footer ---- */
.footer { background: var(--navy); color: rgba(255,255,255,0.7); font-size: var(--step--1); font-weight: 300; }
.footer .wrap { padding-block: 74px 40px; }
.footer-grid { display: grid; gap: 44px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); } }
.footer-mark { height: 108px; width: auto; }
.footer h4 {
  font-family: var(--wordmark); font-size: var(--step--2); letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 18px; font-weight: 500;
}
.footer a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer-base {
  margin-top: 56px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.13);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  color: rgba(255,255,255,0.45); font-size: var(--step--2); letter-spacing: .06em;
}

/* ---- placeholder marking ---- */
.tbd { position: relative; margin-top: 24px; }
.tbd::before {
  content: 'PLACEHOLDER'; position: absolute; top: -15px; left: 0;
  font-family: var(--wordmark); font-size: 8px; line-height: 1;
  letter-spacing: 0.2em; background: #9d3320; color: #fff; padding: 3px 7px;
}
.roomlist .tbd, .plain .tbd, .around-item .tbd { margin-top: 20px; }

@media (max-width: 780px) {
  .nav-links { display: none; }
  .roomlist li { grid-template-columns: 3rem 1fr; }
  .roommeta { grid-column: 2; text-align: left; }
}

/* ---- timeline: a dated ledger for the avenue's history ---- */
.timeline { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.timeline li {
  display: grid; grid-template-columns: 4.6rem 1fr; gap: 22px;
  padding: 15px 0; border-bottom: 1px solid var(--rule-soft);
  color: var(--muted); font-size: var(--step--1); line-height: 1.6;
}
.timeline li:first-child { border-top: 1px solid var(--rule-soft); }
.timeline span {
  font-family: var(--display); font-size: var(--step-1);
  color: var(--gold-deep); line-height: 1.2;
}
.timeline em { font-style: italic; color: var(--navy); }
@media (max-width: 560px) { .timeline li { grid-template-columns: 1fr; gap: 4px; } }

/* ============================================================
   Dining: the Gourmand room
   Gourmand is its own brand at the same address, 641 Arnold.
   Rather than describe it in the hotel's voice, the page steps
   into the restaurant's surface for one band and steps back out.
   Its exact tokens, read from gourmandnj.com/styles.css 2026-08-10.
   Gold is what the two brands share, so gold carries the join.
   ============================================================ */
.dining {
  --g-burgundy: #5b1144;
  --g-burgundy-deep: #3e0a2e;
  --g-gold: #ccbe92;
  --g-gold-deep: #b8a677;
  background: var(--g-burgundy);
  color: #fff;
  position: relative;
}
.dining::before, .dining::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--g-gold), transparent);
}
.dining::before { top: 0; }
.dining::after  { bottom: 0; }
.dining .wrap { padding-block: clamp(74px, 10vw, 132px); }
.dining .label { color: var(--g-gold); }
.dining .ornament::before, .dining .ornament::after { background: rgba(204,190,146,.4); }
.dining .ornament i { background: var(--g-gold); }
.dining h2 { color: #fff; }
.dining p { color: rgba(255,255,255,.82); }

.dining-grid {
  display: grid; gap: clamp(36px, 6vw, 76px);
  grid-template-columns: 1.25fr 1fr; align-items: start; margin-top: 8px;
}
@media (max-width: 880px) { .dining-grid { grid-template-columns: 1fr; } }

.dining-quote {
  font-family: var(--display); font-size: var(--step-2);
  line-height: 1.34; color: #fff; margin: 0 0 26px; max-width: 22ch;
}
.dining-attrib {
  font-family: var(--wordmark); font-size: var(--step--2);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--g-gold); margin-bottom: 34px;
}
.dining-facts { list-style: none; margin: 0; padding: 0; }
.dining-facts li {
  padding: 15px 0; border-bottom: 1px solid rgba(204,190,146,.28);
  color: rgba(255,255,255,.8); font-size: var(--step--1);
  display: flex; gap: 20px; align-items: baseline;
}
.dining-facts li:first-child { border-top: 1px solid rgba(204,190,146,.28); }
.dining-facts b {
  font-family: var(--display); font-weight: 400; color: var(--g-gold);
  font-size: var(--step-0); min-width: 8.4em;
}
.dining-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 38px; }
.btn-gourmand { background: var(--g-gold); border-color: var(--g-gold); color: var(--g-burgundy-deep); }
.btn-gourmand:hover { background: #ded2ae; border-color: #ded2ae; }
.btn-gourmand-ghost { color: var(--g-gold); border-color: var(--g-gold); background: transparent; }
.btn-gourmand-ghost:hover { background: rgba(204,190,146,.15); }

/* external-link affordance, quiet */
.ext::after {
  content: '↗'; font-family: var(--body); font-size: .78em;
  margin-left: .5em; opacity: .7;
}