/* MacDonald Arms Hotel — design system (from Design Handoff, Jul 2026)
   Tokens + site component classes. Dark charcoal-navy base, haar blue + brass accents. */

/* ---------- Fonts ---------- */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/CormorantGaramond-400i.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/CormorantGaramond-400.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/CormorantGaramond-500.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/CormorantGaramond-600.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Montserrat-400.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Montserrat-500.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/Montserrat-600.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/Montserrat-700.woff2) format('woff2')}

/* ---------- Tokens ---------- */
:root{
--charcoal-950:#14181d;--charcoal-900:#1b2128;--charcoal-800:#242c35;--charcoal-700:#323b46;--charcoal-600:#46515d;--charcoal-500:#5d6975;
--plum-950:#271619;--plum-900:#33201f;
--haar-600:#5b858d;--haar-500:#6f9ba3;--haar-400:#8db6bd;--haar-300:#a9c9cf;--haar-200:#c9dde0;
--brass-600:#96733d;--brass-500:#ad8a4f;--brass-400:#c9a468;--brass-300:#dcc08c;
--cream-50:#f6f2ea;--cream-100:#ede7da;--cream-200:#e0d8c6;--off-white:#fcfbf8;
--surface-page:var(--charcoal-950);--surface-card:var(--charcoal-900);--surface-raised:var(--charcoal-800);--surface-header:var(--charcoal-900);--surface-bar:var(--plum-950);
--text-primary:#f0ede6;--text-secondary:#b4bcc3;--text-faint:#7d868f;--text-inverse:var(--charcoal-950);
--accent:var(--haar-400);--accent-strong:var(--haar-300);--accent-warm:var(--brass-400);
--border-subtle:rgba(240,237,230,.14);--border-strong:rgba(240,237,230,.28);--border-accent:var(--haar-500);
--link:var(--haar-300);--link-hover:var(--haar-200);
--font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
--font-sans:'Montserrat','Helvetica Neue',Arial,sans-serif;
--text-display-xl:600 clamp(38px,5vw,68px)/1.06 var(--font-display);
--text-display:600 clamp(34px,4vw,44px)/1.08 var(--font-display);
--text-title:600 32px/1.15 var(--font-display);
--text-heading:600 24px/1.25 var(--font-display);
--text-serif-body:400 19px/1.6 var(--font-display);
--text-body:400 16px/1.7 var(--font-sans);
--text-body-strong:600 16px/1.7 var(--font-sans);
--text-small:400 13.5px/1.6 var(--font-sans);
--text-label:600 12px/1.3 var(--font-sans);
--text-button:600 14px/1 var(--font-sans);
--ls-label:.18em;--ls-wide:.32em;
--radius-sm:3px;--radius-md:6px;
--border-hairline:1px solid var(--border-subtle);
--shadow-card:0 1px 2px rgba(0,0,0,.25),0 8px 28px rgba(0,0,0,.28);
--ease-brand:cubic-bezier(.4,0,.2,1);--dur-fast:150ms;--dur-slow:350ms;
--content-max:1140px;--content-narrow:680px;
}
.theme-paper{--surface-page:var(--cream-50);--surface-card:var(--off-white);--surface-raised:var(--cream-100);
--text-primary:#232a31;--text-secondary:#535d66;--text-faint:#8a929a;
--accent:var(--haar-600);--accent-strong:var(--haar-500);--accent-warm:var(--brass-600);
--border-subtle:rgba(35,42,49,.14);--border-strong:rgba(35,42,49,.3);--link:var(--haar-600);--link-hover:var(--charcoal-800);
--border-hairline:1px solid var(--border-subtle);
--shadow-card:0 1px 2px rgba(35,42,49,.08),0 10px 30px rgba(35,42,49,.10);}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--text-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--link);text-decoration:none;transition:color var(--dur-fast) var(--ease-brand)}
a:hover{color:var(--link-hover)}
::selection{background:var(--haar-500);color:var(--charcoal-950)}
h1,h2,h3,h4{margin:0;color:var(--text-primary)}

/* ---------- Layout ---------- */
.container{max-width:var(--content-max);margin:0 auto;padding:0 24px}
.container-narrow{max-width:calc(var(--content-narrow) + 48px);margin:0 auto;padding:0 24px}
.section{padding:72px 0}
.section-tight{padding:48px 0}

/* ---------- Type helpers ---------- */
.kicker{font:var(--text-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent)}
.kicker-strong{font:var(--text-label);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--accent-strong)}
.kicker-brass{font:var(--text-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--brass-300)}
.display-xl{font:var(--text-display-xl);letter-spacing:.01em}
.display{font:var(--text-display)}
.title{font:var(--text-title)}
.heading{font:var(--text-heading)}
.lede{font:var(--text-body);color:var(--text-secondary)}
.serif-body{font:var(--text-serif-body);color:var(--text-secondary)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;font:var(--text-button);letter-spacing:.08em;text-transform:uppercase;border-radius:var(--radius-md);padding:12px 22px;cursor:pointer;transition:all var(--dur-fast) var(--ease-brand);text-decoration:none;border:1px solid transparent}
.btn-sm{padding:9px 16px}
.btn-outline{background:transparent;color:var(--accent-strong);border-color:var(--border-accent)}
.btn-outline:hover{background:rgba(141,182,189,.12);color:var(--haar-200)}
.btn-brass{background:transparent;color:var(--brass-300);border-color:var(--brass-500)}
.btn-brass:hover{background:rgba(201,164,104,.12);color:var(--brass-300)}
.btn-solid{background:var(--charcoal-800);color:var(--text-primary);border-color:var(--border-strong)}
.btn-solid:hover{background:var(--charcoal-700);color:var(--text-primary)}
.btn-ghost{background:transparent;color:var(--text-secondary)}
.btn-ghost:hover{color:var(--text-primary)}
.btn svg{width:15px;height:15px;stroke-width:1.5}

/* ---------- Divider (brand rule) ---------- */
.divider{display:flex;align-items:center;gap:18px;margin:0}
.divider .line{flex:1;height:1px;background:var(--haar-500)}
.divider .label{font:var(--text-label);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-primary);white-space:nowrap}
.divider-brass .line{background:var(--brass-500)}
.divider-brass .label{color:var(--brass-300)}

/* ---------- Badge ---------- */
.badge{display:inline-flex;align-items:center;font:var(--text-label);letter-spacing:var(--ls-label);text-transform:uppercase;padding:5px 10px;border:1px solid var(--haar-600);border-radius:var(--radius-sm);color:var(--accent-strong)}
.badge-brass{border-color:var(--brass-500);color:var(--brass-300)}

/* ---------- Cards ---------- */
.card{background:var(--surface-card);border:var(--border-hairline);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);display:block;color:var(--text-primary)}
a.card:hover .card-title{color:var(--accent-strong)}
.card-img{height:200px;background-size:cover;background-position:center}
.card-body{padding:20px 22px 24px;display:grid;gap:8px}
.card-title{font:var(--text-heading);color:var(--text-primary);transition:color var(--dur-fast) var(--ease-brand)}
.card-text{font:var(--text-small);color:var(--text-secondary)}

/* ---------- Header ---------- */
.site-header{background:var(--surface-header);border-bottom:var(--border-hairline);position:sticky;top:0;z-index:50}
.site-header .inner{max-width:var(--content-max);margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:24px}
.site-header .logo img{height:60px;width:auto}
.site-nav{display:flex;gap:26px;margin-left:auto;align-items:center}
.site-nav a:not(.btn){font:var(--text-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-secondary);padding-bottom:4px;border-bottom:1px solid transparent}
.site-nav a:not(.btn):hover{color:var(--text-primary)}
.site-nav a.active{color:var(--accent-strong);border-bottom-color:var(--haar-500)}
.mobile-book{display:none}
.nav-toggle{display:none;width:44px;height:44px;background:none;border:none;cursor:pointer;place-items:center}
.nav-toggle .bars{display:grid;gap:5px}
.nav-toggle .bars span{display:block;width:22px;height:1.5px;background:var(--text-primary);transition:all var(--dur-fast) var(--ease-brand)}
.nav-toggle.open .bars span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle.open .bars span:nth-child(2){transform:scaleX(0)}
.nav-toggle.open .bars span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu{display:none;background:var(--charcoal-900);border-bottom:var(--border-hairline);padding:8px 0 16px}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:13px 24px;font:var(--text-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-secondary);border-left:2px solid transparent}
.mobile-menu a.active{color:var(--accent-strong);border-left-color:var(--haar-500)}
.mobile-menu .menu-cta{padding:12px 24px 0}
.mobile-menu .menu-cta .btn{width:100%}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:520px;display:grid;background-size:cover;background-position:center 35%}
.hero-short{min-height:400px}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,24,29,.92),rgba(20,24,29,.25) 55%,rgba(20,24,29,.4))}
.hero .content{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:80px 24px;gap:20px;align-content:center}
.hero .content>*{max-width:min(760px,100%)}
.hero p{font:var(--text-body);color:var(--text-secondary);margin:0;max-width:min(560px,100%)}

/* Bottom-anchored hero variant: text sits low, over the darkest gradient band */
.hero-low .content{align-content:end;padding:150px 24px 64px}

/* ---------- Page intro (no photo) ---------- */
.page-intro{padding:72px 24px 48px;text-align:center;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;justify-items:center}
.page-intro p{max-width:min(var(--content-narrow),100%);margin:0}
.page-intro>*{max-width:100%}

/* ---------- Grids ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split .photo{height:380px;background-size:cover;background-position:center;border-radius:var(--radius-md)}

/* ---------- Room cards ---------- */
.room-card{background:var(--surface-card);border:var(--border-hairline);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);display:grid}
.room-card .photo{height:230px;background-size:cover;background-position:center}
.room-card .body{padding:20px 22px 22px;display:grid;gap:12px;align-content:start}
.room-card .name{font:var(--text-heading)}
.room-card .desc{font:var(--text-small);color:var(--text-secondary);margin:0}
.room-card .badges{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Menu (paper card) ---------- */
.menu-card{background:var(--plum-900);border:1px solid rgba(220,192,140,.25);border-radius:var(--radius-md);padding:40px 44px;box-shadow:var(--shadow-card)}
.menu-section-label{text-align:center;margin:26px 0 6px}
.menu-section-label:first-child{margin-top:0}
.dish{display:grid;gap:4px;padding:14px 0;border-bottom:var(--border-hairline)}
.dish .row{display:flex;align-items:baseline;gap:12px}
.dish .name{font:var(--text-heading);font-size:20px;font-style:italic}
.dish .dots{flex:1;border-bottom:1px dotted var(--border-strong)}
.dish .price{font:var(--text-body-strong);color:var(--brass-300);white-space:nowrap}
.dish .desc{font:var(--text-small);color:var(--text-secondary)}
.menu-note{text-align:center;margin-top:24px;font:var(--text-small);color:var(--text-faint)}

/* ---------- Room list & testimonials ---------- */
.room-list{display:grid;gap:0;border:var(--border-hairline);border-radius:var(--radius-md);overflow:hidden;background:var(--surface-card)}
.room-row{display:grid;grid-template-columns:110px 1fr auto;gap:16px;align-items:baseline;padding:14px 20px;border-bottom:var(--border-hairline)}
.room-row:last-child{border-bottom:none}
.room-row .no{font:var(--text-body-strong);color:var(--accent-strong)}
.room-row .what{font:var(--text-small);color:var(--text-secondary)}
.room-row .tag{font:var(--text-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--brass-300);white-space:nowrap}
.quote{display:grid;gap:10px;text-align:center;max-width:640px;margin:0 auto}
.quote p{font:var(--text-serif-body);font-style:italic;color:var(--text-primary);margin:0}
.quote .who{font:var(--text-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint)}
@media (max-width:820px){.room-row{grid-template-columns:80px 1fr;gap:8px}.room-row .tag{grid-column:2}}

/* ---------- Article ---------- */
.article-hero{position:relative;min-height:400px;background-size:cover;background-position:center;display:grid;align-items:end}
.article-hero .overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,24,29,.94),rgba(20,24,29,.25) 60%)}
.article-hero .content{position:relative;max-width:calc(var(--content-narrow) + 48px);margin:0 auto;padding:120px 24px 44px;display:grid;gap:14px;width:100%}
.article-body{max-width:calc(var(--content-narrow) + 48px);margin:0 auto;padding:56px 24px 40px}
.article-body h3,.article-body h4{font:var(--text-heading);margin:36px 0 12px}
.article-body p{font:var(--text-serif-body);color:var(--text-secondary);margin:0 0 20px}
.article-body ul{font:var(--text-serif-body);color:var(--text-secondary);margin:0 0 20px;padding-left:24px}
.article-body li{margin-bottom:6px}
.article-body strong{color:var(--text-primary)}
.article-body a{color:var(--link)}

/* ---------- Footer ---------- */
.site-footer{background:var(--charcoal-900);border-top:var(--border-hairline);padding:56px 24px 32px;margin-top:0}
.site-footer .inner{max-width:var(--content-max);margin:0 auto}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:48px}
.site-footer .mark{width:110px;margin-bottom:16px}
.site-footer .addr{font:var(--text-small);color:var(--text-secondary);line-height:1.9}
.site-footer .col-label{font:var(--text-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.site-footer .col a.footer-link{display:block;font:var(--text-small);color:var(--text-secondary);margin-bottom:8px}
.site-footer .col a.footer-link:hover{color:var(--text-primary)}
.site-footer .blurb{font:var(--text-small);color:var(--text-secondary);margin:0 0 16px}
.footer-social{display:flex;gap:14px;margin-top:18px}
.footer-social a{color:var(--text-secondary)}
.footer-social a:hover{color:var(--accent-strong)}
.footer-social svg{width:18px;height:18px;stroke-width:1.5}
.footer-bottom{font:var(--text-small);color:var(--text-faint);text-align:center;margin-top:20px}

/* ---------- Misc ---------- */
.map-wrapper{border-radius:var(--radius-md);overflow:hidden;border:var(--border-hairline)}
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;text-align:left}
.checklist .item{display:flex;align-items:center;gap:12px;font:var(--text-body);color:var(--text-primary)}
.checklist .tick{width:22px;height:1px;background:var(--haar-500);flex-shrink:0}
.contact-panel{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
.info-list{display:grid;gap:18px}
.bar-page{background:var(--surface-page)}
.west-page{background:var(--plum-950)}
.west-page .card,.west-page .site-header{background:var(--plum-900)}

/* ---------- Responsive ---------- */
/* Ultra-wide: grow heroes so the crop aspect stays sane (a 400px band on a
   2500px screen is a 6:1 letterbox that loses the subject entirely) */
@media (min-width:1800px){
  .hero{min-height:700px}
  .hero-short{min-height:580px}
  .article-hero{min-height:540px}
}
@media (max-width:960px){
  .grid-4{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .split{grid-template-columns:1fr;gap:28px}
  .contact-panel{grid-template-columns:1fr}
}
@media (max-width:820px){
  .site-nav{display:none}
  .mobile-book{display:inline-flex;margin-left:auto}
  .nav-toggle{display:grid;flex-shrink:0}
  .site-header .inner{gap:12px}
  .site-header .logo img{height:46px}
  .section{padding:52px 0}
  .hero{min-height:440px}
  .menu-card{padding:28px 20px}
  .grid-2{grid-template-columns:1fr}
  .checklist{grid-template-columns:1fr}
}
@media (max-width:600px){
  .grid-4{grid-template-columns:1fr}
  .display-xl{font-size:34px}
}