/* Wireframe styles: greyscale on purpose. Colour and typography come at the mockup stage. */
:root { --ink:#222; --mid:#666; --soft:#999; --line:#d4d4d4; --fill:#ececec; --bg:#fafafa; --note:#2a6df4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg); }
a { color:inherit; }
h1,h2,h3,h4 { line-height:1.15; margin:.2em 0 .5em; font-weight:600; letter-spacing:-.01em; }
h1 { font-size:clamp(2rem,5vw,3.6rem); } h2 { font-size:clamp(1.5rem,3vw,2.2rem); } h3 { font-size:1.4rem; } h4 { font-size:1.1rem; }
img { max-width:100%; }
main > section, main > article { padding:56px max(16px,calc((100vw - 1180px)/2)); border-bottom:1px dashed var(--line); position:relative; }
.narrow { max-width:760px; margin-left:auto !important; margin-right:auto !important; }
section.narrow { padding-left:16px; padding-right:16px; box-sizing:content-box; }
.lead { font-size:1.2rem; color:var(--mid); }
.muted { color:var(--soft); font-size:.92rem; }
.kicker { text-transform:uppercase; letter-spacing:.18em; font-size:.75rem; color:var(--mid); margin:0 0 .5em; display:block; }

/* annotation + placeholders */
.tag { display:inline-block; font:600 11px/1.3 ui-monospace,Menlo,monospace; color:var(--note); border:1px dashed var(--note); padding:3px 8px; margin-bottom:14px; border-radius:3px; background:#fff; }
.ph { position:relative; width:100%; background:var(--fill); border:1px solid var(--line); overflow:hidden;
  background-image:linear-gradient(to top right,transparent calc(50% - 1px),var(--line) 50%,transparent calc(50% + 1px)),linear-gradient(to bottom right,transparent calc(50% - 1px),var(--line) 50%,transparent calc(50% + 1px)); }
.ph span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--fill); padding:6px 10px; text-align:center; font-size:.8rem; color:var(--mid); max-width:90%; }
.ph small { display:block; font:11px ui-monospace,Menlo,monospace; color:var(--soft); }

/* buttons */
.btn { display:inline-block; padding:12px 26px; background:var(--ink); color:#fff; text-decoration:none; font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--ink); margin:6px 6px 6px 0; }
.btn-ghost { background:transparent; color:var(--ink); }
.btn.is-disabled { opacity:.35; pointer-events:none; }
.more { font-weight:600; text-decoration:none; border-bottom:1px solid; }

/* wireframe bar */
.wf-bar { background:#111; color:#eee; font-size:13px; position:sticky; top:0; z-index:20; }
.wf-bar-in { display:flex; gap:16px; align-items:center; padding:8px 16px; flex-wrap:wrap; }
.wf-home { text-decoration:none; color:#aaa; }
.wf-switch { margin-left:auto; display:flex; gap:4px; }
.wf-switch a { text-decoration:none; padding:2px 10px; border:1px solid #555; border-radius:3px; }
.wf-switch a.on { background:#eee; color:#111; }

/* header */
.site-head { display:flex; align-items:center; gap:20px; padding:14px 16px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:35px; z-index:10; flex-wrap:wrap; }
.logo { font-weight:700; letter-spacing:.3em; text-decoration:none; font-size:1.2rem; }
.logo small { display:block; font-weight:400; letter-spacing:.1em; font-size:.7rem; color:var(--mid); }
.site-head nav { display:flex; gap:16px; flex-wrap:wrap; font-size:.85rem; margin-left:auto; }
.site-head nav a { text-decoration:none; color:var(--mid); } .site-head nav a.on { color:var(--ink); border-bottom:2px solid; }
.site-head .btn { margin:0; padding:9px 18px; }
.nav-btn { display:none; margin-left:auto; border:1px solid var(--ink); padding:6px 12px; font-size:.8rem; cursor:pointer; }
@media (max-width:980px) {
  .nav-btn { display:block; }
  .site-head nav { display:none; width:100%; order:5; flex-direction:column; gap:10px; padding-top:10px; }
  #nav-toggle:checked ~ nav { display:flex; }
  .site-head .btn { display:none; }
}

/* layouts */
.split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.split.rev > :first-child { order:2; }
.stack > * + * { margin-top:12px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cards-4 { grid-template-columns:repeat(4,1fr); } .cards-3 { grid-template-columns:repeat(3,1fr); }
.cards.mini { margin:16px 0; gap:12px; } .cards.mini .card { padding:12px; }
.card { background:#fff; border:1px solid var(--line); padding:16px; text-decoration:none; display:block; }
.card .ph { margin-bottom:14px; }
.card ul { padding-left:18px; margin:0; font-size:.92rem; }
.cards-blog .card:first-child { grid-column:span 2; grid-row:span 2; }
.mosaic { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.amen { columns:3; padding:0; list-style:none; }
.amen li { padding:4px 0; }
.band { background:var(--fill); text-align:center; }
.closing { text-align:center; }

/* home */
.hero h1 { max-width:14em; }
.hero-bg { position:relative; }
.hero-over { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px; }
.hero-over h1 { margin-inline:auto; }
.collage { display:grid; grid-template-columns:2fr 1fr; gap:12px; margin:24px 0; }
.collage > div { display:grid; gap:12px; }
.qb { display:flex; gap:12px; flex-wrap:wrap; align-items:center; background:#fff; border:1px solid var(--line); padding:12px; }
.qb span { flex:1; min-width:120px; border:1px solid var(--line); padding:10px; color:var(--soft); }
.facts-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center; }
.facts-grid strong { display:block; font-size:1.5rem; } .facts-grid span { color:var(--mid); font-size:.9rem; }
.teasers-center .teaser { display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:center; margin-bottom:48px; }
.teasers-center .teaser.rev > :first-child { order:2; }
.teasers-split { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.teasers-split .tag { grid-column:1/-1; justify-self:start; }
.teasers-split .teaser-text { padding-top:12px; }
.teasers-editorial .teaser { position:relative; margin-bottom:24px; }
.teasers-editorial .teaser-text { position:absolute; left:24px; bottom:24px; background:#fff; padding:20px; max-width:420px; border:1px solid var(--line); }
.strip { display:grid; grid-auto-flow:column; grid-auto-columns:220px; gap:12px; overflow-x:auto; padding-bottom:12px; }
blockquote { font-size:1.6rem; font-style:italic; margin:0 0 12px; }

/* inner pages */
.page-hero .ph { margin-bottom:24px; }
.attr { padding:32px 0; border-top:1px solid var(--line); }
.dist { font-size:.95rem; }
.tbl { width:100%; border-collapse:collapse; font-size:.92rem; }
.tbl th, .tbl td { text-align:left; padding:8px; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl small { color:var(--soft); }
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.tabs span { border:1px solid var(--line); padding:6px 14px; font-size:.85rem; } .tabs .on { background:var(--ink); color:#fff; }
.masonry { columns:4 220px; column-gap:12px; } .masonry .ph { margin-bottom:12px; break-inside:avoid; }
.faq { border-bottom:1px solid var(--line); padding:14px 0; } .faq summary { cursor:pointer; font-weight:600; }
.prose h3 { margin-top:1.6em; } .article .ph { margin:24px 0; }

/* booking */
.booking { display:grid; grid-template-columns:2fr 1fr; gap:32px; align-items:start; }
.bk-cal { background:#fff; border:1px solid var(--line); padding:20px; position:relative; }
.bk-nav { position:absolute; top:16px; left:16px; right:16px; display:flex; justify-content:space-between; pointer-events:none; }
.bk-nav button { pointer-events:auto; border:1px solid var(--line); background:#fff; width:36px; height:36px; font-size:20px; cursor:pointer; }
.bk-nav button:disabled { opacity:.3; cursor:default; }
.bk-months { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:32px; }
.bk-title { text-align:center; font-weight:600; line-height:36px; margin-bottom:10px; }
.bk-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; text-align:center; }
.bk-dow { font-size:.75rem; color:var(--soft); padding:4px 0; }
.bk-day { border:0; background:none; padding:9px 0; cursor:pointer; font:inherit; }
.bk-day:hover { background:var(--fill); }
.bk-day.is-past { color:#ccc; cursor:default; } .bk-day.is-past:hover { background:none; }
.bk-day.is-range { background:#e2e2e2; } .bk-day.is-edge { background:var(--ink); color:#fff; }
.bk-side label { display:block; margin:16px 0; font-size:.9rem; } .bk-side select { display:block; width:100%; padding:10px; margin-top:4px; }
.bk-side .btn { display:block; text-align:center; margin:0 0 10px; }
.bk-summary { font-weight:600; min-height:3em; }

/* footer */
.site-foot { background:#e6e6e6; padding:48px max(16px,calc((100vw - 1180px)/2)) 24px; font-size:.92rem; }
.foot-grid { display:grid; grid-template-columns:2fr 1.5fr 1.5fr 1fr; gap:32px; }
.foot-grid h4 { text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; }
.fine { color:var(--soft); font-size:.8rem; margin-top:32px; }
.wa-float { position:fixed; right:16px; bottom:16px; background:var(--ink); color:#fff; text-decoration:none; padding:12px 16px; border-radius:30px; font-size:.85rem; z-index:5; }

@media (max-width:860px) {
  main > section, main > article { padding-top:40px; padding-bottom:40px; }
  .split, .booking, .teasers-center .teaser, .collage { grid-template-columns:1fr; gap:24px; }
  .split.rev > :first-child, .teasers-center .teaser.rev > :first-child { order:0; }
  .cards, .cards-3, .cards-4, .teasers-split, .foot-grid { grid-template-columns:1fr; }
  .cards-blog .card:first-child { grid-column:auto; grid-row:auto; }
  .facts-grid { grid-template-columns:1fr 1fr; }
  .mosaic { grid-template-columns:1fr 1fr; }
  .amen { columns:1; }
  .teasers-editorial .teaser-text { position:static; max-width:none; }
  .hero-over { position:static; padding:24px 0 0; }
  .hero-bg .ph { aspect-ratio:4/3 !important; }
}
@media (min-width:861px) and (max-width:1100px) { .cards-4 { grid-template-columns:1fr 1fr; } }
.hero-bg .ph span { top:auto; bottom:8px; transform:translateX(-50%); }
.teasers-editorial .ph { aspect-ratio:21/9 !important; }
@media (max-width:860px) { .teasers-editorial .ph { aspect-ratio:4/3 !important; } }
.page-hero .narrow { margin-left:0 !important; }