/* ==========================================================================
   THEME — edit the values in :root to change colours and fonts site-wide.
   ========================================================================== */
:root {
  color-scheme: dark;
  --bg: #371b45;   /* page background (deep aubergine) */
  --bg-deep: #2b1339;   /* darker plum used in the background fade */
  --line: rgba(255, 158, 125, 0.22);   /* thin divider lines */
  --line-soft: rgba(255, 158, 125, 0.11);
  --accent: #ff9e7d;   /* headings, rates, markers (coral) */
  --accent-dim: #d79a8c;   /* eyebrows, footer brand line */
  --text: #f8eff6;   /* lead paragraphs */
  --text-soft: #dccbe0;   /* small body copy (soft lilac) */
  --text-faint: #a892b0;   /* footer small print */

  --font-display: "Cormorant Garamond", "Times New Roman", Times, serif;
  --font-body: "Jost", "Trebuchet MS", "Segoe UI", Arial, sans-serif;

  --content: 900px;          /* width of the centred content column */
}

/* Fonts are bundled in /fonts (both families are open-licensed, SIL OFL 1.1) */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/jost-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); }

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  /* faint woven texture + slow fade to a darker tone, as in the reference */
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 10;
  padding: 10px 16px; background: var(--accent); color: var(--bg-deep);
  font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap { max-width: calc(var(--content) + 48px); margin: 0 auto; padding: 0 24px; }

/* shared small-caps label style: eyebrows, nav, table heads, footer */
.eyebrow,
.site-nav a,
.rooms th,
.footer-brand {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* ==========================================================================
   HEADER — centred masthead, then a ruled navigation strip
   ========================================================================== */
.masthead { text-align: center; padding: 72px 24px 46px; }
.masthead .eyebrow { margin: 0 0 26px; color: var(--accent-dim); font-size: 12px; letter-spacing: 0.28em; }
.masthead h1 {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(46px, 7vw, 76px);
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.masthead .tagline {
  margin: 22px 0 0;
  color: var(--text-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
}

.site-nav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.site-nav ul {
  list-style: none; margin: 0; padding: 0 16px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px;
}
.site-nav a {
  display: block; padding: 25px 14px;
  color: var(--text-soft); font-size: 12.5px; text-decoration: none;
  transition: color 0.2s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--accent); }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { padding: 74px 0 78px; border-bottom: 1px solid var(--line); scroll-margin-top: 12px; }
.section:last-of-type { border-bottom: 0; padding-bottom: 96px; }

.section .eyebrow { margin: 0 0 22px; color: var(--accent-dim); font-size: 11.5px; }
.section h2 {
  margin: 0 0 34px;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(31px, 4.2vw, 40px);
  line-height: 1.15;
}
.lead {
  margin: 0 0 26px;
  max-width: 700px;
  color: var(--text);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.65;
}

/* two-column feature grid (The Floor, Dining) */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 52px; }
.grid h3 {
  margin: 0 0 14px; padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.2;
}
.grid p { margin: 0; font-size: 15.5px; }

/* rooms table */
.rooms { width: 100%; border-collapse: collapse; margin-top: 6px; }
.rooms th {
  padding: 12px 14px; text-align: left;
  color: var(--accent-dim); font-size: 11px; letter-spacing: 0.16em;
  border-bottom: 1px solid var(--line);
}
.rooms td { padding: 19px 14px; vertical-align: top; border-bottom: 1px solid var(--line-soft); font-size: 15.5px; }
.rooms .room-name {
  width: 22%;
  color: var(--text);
  font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.35;
}
.rooms .room-rate { width: 16%; color: var(--accent); white-space: nowrap; letter-spacing: 0.03em; }

/* pull quote */
.pull {
  margin: 40px 0 0; padding: 4px 0 4px 24px;
  max-width: 700px;
  border-left: 2px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display); font-style: italic; font-size: 27px; line-height: 1.35;
}
.pull p { margin: 0; }

/* house rules: two columns with a suit marker */
.rules { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 52px; }
.rules li {
  position: relative; break-inside: avoid;
  margin: 0 0 20px; padding-left: 26px;
  font-size: 15.5px;
}
.rules li::before {
  content: "\2666"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-size: 14px;
}

/* reservation contact lines */
.contact { margin: 34px 0 0; font-style: normal; color: var(--accent); font-size: 17px; letter-spacing: 0.04em; line-height: 1.9; }
.contact a { text-decoration: none; }
.contact a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { text-align: center; padding: 10px 24px 64px; }
.footer-brand { margin: 0 0 12px; color: var(--accent-dim); font-size: 12px; }
.footer-note { margin: 0; color: var(--text-faint); font-size: 12.5px; letter-spacing: 0.04em; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 760px) {
  .masthead { padding: 54px 20px 36px; }
  .masthead .tagline { font-size: 19px; }
  .site-nav ul { gap: 0 2px; }
  .site-nav a { padding: 15px 10px; font-size: 11.5px; letter-spacing: 0.16em; }
  .section { padding: 54px 0 58px; }
  .section h2 { margin-bottom: 26px; }
  .lead { font-size: 17.5px; }
  .grid { grid-template-columns: 1fr; gap: 30px; }
  .rules { columns: 1; }
  .pull { font-size: 23px; }

  /* table becomes stacked cards so nothing scrolls sideways */
  .rooms thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rooms, .rooms tbody, .rooms tr, .rooms td { display: block; width: 100%; }
  .rooms tr { padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
  .rooms td { padding: 2px 0; border: 0; }
  .rooms .room-name, .rooms .room-rate { width: 100%; }
  .rooms .room-rate { padding-top: 8px; }
}

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