/* ============================================================
   Hotel Kraus — Website Kit · local CSS
   ============================================================ */

html, body, #app{ margin:0; padding:0; background:var(--hk-ivory); color:var(--hk-ink); font-family:var(--hk-sans-ui); min-height:100%; }
*, *::before, *::after{ box-sizing:border-box; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }

/* ── Filters for SVG marks ── */
.mark-burgundy{ filter: brightness(0) saturate(100%) invert(7%) sepia(80%) saturate(5000%) hue-rotate(355deg) brightness(70%) contrast(120%); }
.mark-ivory{ filter: brightness(0) invert(1); }
.mark-ink{ filter: brightness(0); }

/* ── App shell ── */
.shell{ min-height:100vh; display:flex; flex-direction:column; }
.shell main{ flex:1; }

/* ── Top rail ── */
.top-rail{
  position:sticky; top:0; z-index:50;
  background: var(--hk-ivory);
  border-bottom: 0.5px solid var(--hk-rule);
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding: 18px 60px;
  gap: 40px;
}
.top-rail .nav{ display:flex; gap:34px; }
.top-rail .nav a{
  font-family: var(--hk-serif-sc);
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--hk-ink);
  transition: color var(--hk-dur-base) var(--hk-ease);
}
.top-rail .nav a:hover{ color: var(--hk-burgundy); }
.top-rail .nav a.active{ color: var(--hk-burgundy); }
.top-rail .nav.right{ justify-content:flex-end; }
.top-rail .brand{ display:flex; align-items:center; justify-content:center; gap:18px; }
.top-rail .brand img{ height: 22px; }
.top-rail .brand .div-dot{ color: var(--hk-ink-quiet); }
.top-rail .brand .sub{
  font-family: var(--hk-serif-carved);
  font-size: 10px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--hk-ink-soft);
  font-weight: 500;
}

/* ── Foot rail ── */
.foot-rail{
  border-top: 0.5px solid var(--hk-rule);
  padding: 60px 60px 28px;
  display: grid;
  grid-template-columns: 360px 1fr 1fr 1fr;
  gap: 48px;
  background: var(--hk-ivory);
}
.foot-rail .col h4{
  font-family: var(--hk-serif-sc);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--hk-ink-soft);
  margin: 0 0 18px;
}
.foot-rail .col a{ display:block; font-family: var(--hk-sans-body); font-weight: 300; font-size: 14px; color: var(--hk-ink); padding: 5px 0; }
.foot-rail .col a:hover{ color: var(--hk-burgundy); }
.foot-rail .lede{ display:flex; flex-direction:column; gap: 18px; max-width: 38ch; }
.foot-rail .lede img{ height: 28px; align-self:flex-start; }
.foot-rail .lede p{ font-family: var(--hk-sans-body); font-weight: 300; font-size: 14px; line-height: 1.7; color: var(--hk-ink); }
.foot-rail .baseline{
  grid-column: 1 / -1;
  margin-top: 48px; padding-top: 22px;
  border-top: 0.5px solid var(--hk-rule-soft);
  display:flex; justify-content:space-between; align-items: baseline;
  font-family: var(--hk-serif-sc); font-size: 10px; letter-spacing: 0.30em; text-transform: uppercase; color: var(--hk-ink-soft);
}

/* ── Buttons / Links ── */
.btn{
  font-family: var(--hk-serif-sc);
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  padding: 16px 30px;
  border: 0.5px solid var(--hk-burgundy);
  background: var(--hk-burgundy);
  color: var(--hk-ivory);
  transition: background var(--hk-dur-base) var(--hk-ease), color var(--hk-dur-base) var(--hk-ease), border-color var(--hk-dur-base) var(--hk-ease);
  display: inline-flex; align-items: center; gap: 14px;
}
.btn:hover{ background: var(--hk-burgundy-deep); border-color: var(--hk-burgundy-deep); }
.btn:active{ transform: translateY(1px); }
.btn.secondary{ background: transparent; color: var(--hk-burgundy); }
.btn.secondary:hover{ background: var(--hk-burgundy); color: var(--hk-ivory); }
.btn.inverse{ background: var(--hk-ivory); color: var(--hk-burgundy); border-color: var(--hk-ivory); }
.btn.inverse:hover{ background: transparent; color: var(--hk-ivory); border-color: var(--hk-ivory); }
.btn.ghost{ background: transparent; border-color: transparent; padding: 16px 8px; color: var(--hk-burgundy); }
.btn.ghost:hover{ opacity: 0.7; background: transparent; }
.hero .btn.ghost,
.section.deep .btn.ghost,
.invite .btn.ghost{ color: var(--hk-ivory); }

.serif-link{
  font-family: var(--hk-serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--hk-burgundy);
  border-bottom: 0.5px solid var(--hk-rule);
  padding-bottom: 4px;
  transition: border-color var(--hk-dur-base) var(--hk-ease);
}
.serif-link:hover{ border-bottom-color: var(--hk-burgundy); }

/* ── Pill ── */
.pill{
  font-family: var(--hk-serif-sc);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  border: 0.5px solid var(--hk-rule);
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
}
.pill .dot{ width:6px; height:6px; border-radius:50%; background: var(--hk-burgundy); }
.pill.open .dot{ background: #3d8a5a; }
.pill.solid{ background: var(--hk-burgundy); color: var(--hk-ivory); border-color: var(--hk-burgundy); }
.pill.solid .dot{ background: var(--hk-straw); }
.pill.slate{ background: var(--hk-blue); color: var(--hk-ivory); border-color: var(--hk-blue); }
.pill.slate .dot{ background: var(--hk-ivory); }

/* ── Section ── */
.section{ padding: 110px 60px; }
.section.deep{ background: var(--hk-burgundy); color: var(--hk-ivory); }
.section.warm{ background: var(--hk-ivory-warm); }
.section.tight{ padding: 72px 60px; }

.section-lede{ display:flex; flex-direction:column; gap: 18px; max-width: 64ch; }
.section-lede .eyebrow{
  font-family: var(--hk-serif-carved);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--hk-burgundy);
}
.section.deep .section-lede .eyebrow{ color: var(--hk-straw); }
.section-lede h2{
  font-family: var(--hk-serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 64px;
  line-height: 1.02;
  color: var(--hk-ink);
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
.section.deep .section-lede h2{ color: var(--hk-ivory); }
.section-lede .desc{
  font-family: var(--hk-sans-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  color: var(--hk-ink);
  max-width: 54ch;
}
.section.deep .section-lede .desc{ color: var(--hk-on-deep); }

/* ── Hero ── */
.hero{
  background: var(--hk-burgundy);
  color: var(--hk-ivory);
  min-height: 92vh;
  padding: 80px 60px 60px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 40px;
  position: relative;
  overflow: hidden;
}
.hero .rail-top{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family: var(--hk-serif-sc); font-size: 11px; letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--hk-on-deep-soft);
  padding-bottom: 18px;
  border-bottom: 0.5px solid var(--hk-rule-inv);
}
.hero .body{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}
.hero .sig-stack{ display:flex; flex-direction:column; gap: 40px; align-items:flex-start; }
.hero .sig{ width: 480px; max-width: 80%; }
.hero h1{
  font-family: var(--hk-serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 90px;
  line-height: 1;
  color: var(--hk-ivory);
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.hero h1 .light{ font-style: normal; font-weight: 400; color: var(--hk-straw); }
.hero .lede{
  display:flex; flex-direction:column; gap: 28px;
  font-family: var(--hk-sans-body); font-weight: 300; font-size: 18px; line-height: 1.7;
  color: var(--hk-on-deep); max-width: 38ch;
}
.hero .lede em{ font-family: var(--hk-serif-text); font-style: italic; color: var(--hk-straw); font-size: 1.05em; }
.hero .actions{ display: flex; gap: 16px; align-items: center; }
.hero .rail-bot{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family: var(--hk-serif-sc); font-size: 11px; letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--hk-on-deep-soft);
  padding-top: 18px;
  border-top: 0.5px solid var(--hk-rule-inv);
}

/* ── Image placeholder (manual style) ── */
.imgph{
  background: var(--hk-ivory-warm);
  border: 0.75px dashed rgba(46,0,0,0.30);
  display:flex; align-items:center; justify-content:center; position:relative;
  min-height: 200px;
}
.imgph::before, .imgph::after{ content:''; position:absolute; inset:0; pointer-events:none; }
.imgph::before{ background: linear-gradient(to top right, transparent calc(50% - 0.4px), rgba(46,0,0,0.18) calc(50% - 0.4px), rgba(46,0,0,0.18) calc(50% + 0.4px), transparent calc(50% + 0.4px)); }
.imgph::after{ background: linear-gradient(to bottom right, transparent calc(50% - 0.4px), rgba(46,0,0,0.18) calc(50% - 0.4px), rgba(46,0,0,0.18) calc(50% + 0.4px), transparent calc(50% + 0.4px)); }
.imgph .lbl{
  position:relative; z-index:1; background: var(--hk-ivory-warm); padding: 10px 18px;
  font-family: var(--hk-serif-carved); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--hk-burgundy); font-weight:500;
  text-align:center;
}
.imgph .lbl .alt{ display:block; margin-top: 4px; font-family: var(--hk-serif-sc); letter-spacing: 0.18em; color: var(--hk-ink-soft); font-size: 10px; }
.imgph.deep{ background: rgba(237,232,220,0.04); border-color: rgba(237,232,220,0.30); }
.imgph.deep::before{ background: linear-gradient(to top right, transparent calc(50% - 0.4px), rgba(237,232,220,0.22) calc(50% - 0.4px), rgba(237,232,220,0.22) calc(50% + 0.4px), transparent calc(50% + 0.4px)); }
.imgph.deep::after{ background: linear-gradient(to bottom right, transparent calc(50% - 0.4px), rgba(237,232,220,0.22) calc(50% - 0.4px), rgba(237,232,220,0.22) calc(50% + 0.4px), transparent calc(50% + 0.4px)); }
.imgph.deep .lbl{ background: var(--hk-burgundy); color: var(--hk-straw); }
.imgph.deep .lbl .alt{ color: rgba(237,232,220,0.5); }

/* ── Room grid ── */
.room-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.room{ display:flex; flex-direction:column; gap: 0; background: var(--hk-ivory-warm); border: 0.5px solid var(--hk-rule-soft); transition: border-color var(--hk-dur-base) var(--hk-ease); cursor:pointer; }
.room:hover{ border-color: var(--hk-rule); }
.room.deep{ background: var(--hk-burgundy); color: var(--hk-ivory); border-color: rgba(237,232,220,0.25); }
.room.deep:hover{ border-color: var(--hk-ivory); }
.room.slate{ background: var(--hk-blue); color: var(--hk-ivory); border-color: rgba(237,232,220,0.25); }
.room.green{ background: var(--hk-green); color: var(--hk-ivory); border-color: rgba(237,232,220,0.25); }
.room .img{ aspect-ratio: 4 / 3; }
.room .meta{ padding: 26px 30px 28px; display:flex; flex-direction:column; gap: 10px; }
.room .eyebrow{
  font-family: var(--hk-serif-sc); font-size: 10px; letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--hk-ink-soft);
}
.room.deep .eyebrow, .room.slate .eyebrow, .room.green .eyebrow{ color: rgba(237,232,220,0.6); }
.room .name{
  font-family: var(--hk-serif-display); font-style: italic; font-weight: 500; font-size: 38px; line-height: 1;
  color: var(--hk-ink); margin: 0;
}
.room.deep .name, .room.slate .name, .room.green .name{ color: var(--hk-ivory); }
.room .desc{ font-family: var(--hk-sans-body); font-weight: 300; font-size: 14px; line-height: 1.65; color: var(--hk-ink); margin-top: 4px; }
.room.deep .desc, .room.slate .desc, .room.green .desc{ color: rgba(237,232,220,0.85); }
.room .foot{
  margin-top: 18px; padding-top: 16px; border-top: 0.5px solid var(--hk-rule-soft);
  display:flex; justify-content:space-between; align-items:baseline;
  font-family: var(--hk-serif-sc); font-size: 10px; letter-spacing: 0.30em; text-transform: uppercase;
  color: var(--hk-ink-soft);
}
.room.deep .foot, .room.slate .foot, .room.green .foot{ border-color: rgba(237,232,220,0.25); color: rgba(237,232,220,0.6); }

/* ── Cite / quote ── */
.cite{
  display:grid; grid-template-columns: 100px 1fr; gap: 40px; align-items: baseline;
  padding: 90px 0;
}
.cite .num{ font-family: var(--hk-serif-text); font-style: italic; font-size: 64px; line-height: 1; color: var(--hk-burgundy); letter-spacing: -0.02em; }
.cite .body{
  font-family: var(--hk-serif-display); font-style: italic; font-weight: 500; font-size: 52px; line-height: 1.15; color: var(--hk-ink); max-width: 22ch; letter-spacing: -0.005em;
}
.cite .body .em{ color: var(--hk-burgundy); }

/* ── Field ── */
.field{ display:flex; flex-direction:column; gap: 8px; }
.field label{
  font-family: var(--hk-serif-sc); font-size: 10px; letter-spacing: 0.30em; text-transform: uppercase; color: var(--hk-ink-soft);
}
.field input, .field select, .field textarea{
  font-family: var(--hk-sans-body); font-weight: 300; font-size: 16px;
  background: transparent; border: none; border-bottom: 0.5px solid var(--hk-rule);
  padding: 10px 2px; color: var(--hk-ink); outline: none;
  transition: border-bottom-color var(--hk-dur-base) var(--hk-ease);
  width: 100%;
}
.field input::placeholder{ color: var(--hk-ink-quiet); font-style: italic; }
.field input:focus, .field select:focus, .field textarea:focus{ border-bottom-color: var(--hk-burgundy); }

/* ── Reservation drawer ── */
.scrim{
  position: fixed; inset: 0; z-index: 100;
  background: rgba(31, 0, 0, 0.55);
  display:flex; align-items: stretch; justify-content: flex-end;
  animation: fadeIn 320ms var(--hk-ease);
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
.drawer{
  width: 560px; max-width: 100vw; background: var(--hk-ivory);
  padding: 36px 48px 40px;
  display: flex; flex-direction: column; gap: 28px;
  animation: slideIn 520ms var(--hk-ease);
  overflow-y: auto;
}
@keyframes slideIn{ from{transform:translateX(20px); opacity:0;} to{transform:translateX(0); opacity:1;} }
.drawer .top{ display:flex; justify-content:space-between; align-items:flex-start; padding-bottom: 18px; border-bottom: 0.5px solid var(--hk-rule); }
.drawer .close{ font-family: var(--hk-serif-sc); font-size: 10px; letter-spacing: 0.30em; text-transform: uppercase; color: var(--hk-ink-soft); background:none; border:none; padding:4px; }
.drawer .close:hover{ color: var(--hk-burgundy); }
.drawer .crumbs{ font-family: var(--hk-serif-sc); font-size: 10px; letter-spacing: 0.30em; text-transform: uppercase; color: var(--hk-ink-soft); }
.drawer .crumbs .crumb{ color: var(--hk-ink-soft); }
.drawer .crumbs .crumb.on{ color: var(--hk-burgundy); }
.drawer .crumbs .sep{ color: var(--hk-ink-quiet); margin: 0 6px; }
.drawer h3{
  font-family: var(--hk-serif-display); font-style: italic; font-weight: 500; font-size: 42px; line-height: 1; color: var(--hk-ink); margin: 0;
}
.drawer .step-num{
  font-family: var(--hk-serif-text); font-style: italic; font-size: 60px; line-height: 1; color: var(--hk-burgundy); letter-spacing: -0.02em;
}
.drawer .group{ display:flex; flex-direction:column; gap: 20px; }
.drawer .row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.drawer .actions{ display:flex; justify-content:space-between; align-items:center; margin-top: auto; padding-top: 18px; border-top: 0.5px solid var(--hk-rule-soft); }
.drawer .actions .back{ font-family: var(--hk-serif-sc); font-size: 11px; letter-spacing: 0.30em; text-transform: uppercase; color: var(--hk-ink-soft); background:none; border:none; }
.drawer .actions .back:hover{ color: var(--hk-burgundy); }
.drawer .room-option{
  padding: 18px 22px; border: 0.5px solid var(--hk-rule-soft); background: var(--hk-ivory-warm);
  display:grid; grid-template-columns: 1fr auto; gap: 14px; align-items:center;
  cursor:pointer; transition: border-color var(--hk-dur-base) var(--hk-ease), background var(--hk-dur-base) var(--hk-ease);
}
.drawer .room-option:hover{ border-color: var(--hk-rule); }
.drawer .room-option.on{ border-color: var(--hk-burgundy); background: var(--hk-ivory-soft); }
.drawer .room-option .nm{ font-family: var(--hk-serif-display); font-style: italic; font-size: 22px; color: var(--hk-ink); }
.drawer .room-option .ds{ font-family: var(--hk-sans-body); font-weight: 300; font-size: 13px; color: var(--hk-ink-soft); margin-top: 2px; }
.drawer .room-option .pr{ font-family: var(--hk-serif-text); font-style: italic; font-size: 22px; color: var(--hk-burgundy); white-space: nowrap; }
.drawer .room-option .pr .per{ font-family: var(--hk-serif-sc); font-size: 9px; letter-spacing: 0.30em; color: var(--hk-ink-soft); display:block; margin-top: 2px; text-align:right; }
.drawer .summary{ background: var(--hk-burgundy); color: var(--hk-ivory); padding: 28px 32px; }
.drawer .summary h4{ font-family: var(--hk-serif-sc); font-weight: 400; font-size: 11px; letter-spacing: 0.30em; text-transform: uppercase; color: rgba(237,232,220,0.7); margin:0 0 14px; }
.drawer .summary .ln{ display:flex; justify-content:space-between; padding: 8px 0; border-bottom: 0.5px solid rgba(237,232,220,0.18); font-family: var(--hk-sans-body); font-weight: 300; font-size: 14px; }
.drawer .summary .ln:last-child{ border-bottom: none; padding-top: 14px; font-family: var(--hk-serif-display); font-style: italic; font-size: 22px; }
.drawer .summary .ln .k{ color: rgba(237,232,220,0.7); }

/* ── Members invite block ── */
.invite{ background: var(--hk-burgundy); color: var(--hk-ivory); padding: 90px 60px; display:grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items:center; }
.invite h2{ font-family: var(--hk-serif-display); font-style: italic; font-weight: 500; font-size: 72px; line-height: 1.02; color: var(--hk-ivory); letter-spacing: -0.005em; margin: 0; }
.invite h2 .ac{ color: var(--hk-straw); }
.invite p{ font-family: var(--hk-sans-body); font-weight: 300; font-size: 17px; line-height: 1.75; color: var(--hk-on-deep); max-width: 44ch; }
.invite .actions{ margin-top: 24px; display: flex; gap: 18px; align-items: center; }

/* ── Tear-off / page numbering ── */
.tear{ display:flex; justify-content:space-between; align-items:baseline; padding: 30px 0 0; }
.tear .l, .tear .r{ font-family: var(--hk-serif-sc); font-size: 11px; letter-spacing: 0.30em; text-transform: uppercase; color: var(--hk-ink-soft); }

/* Tabular numerals everywhere by default */
.shell{ font-feature-settings: "tnum"; }

/* ── Detail page hero ── */
.detail-hero{
  display:grid; grid-template-columns: 480px 1fr; gap: 90px; padding: 90px 60px 60px;
  align-items: end;
}
.detail-hero .left .ref-num{ font-family: var(--hk-serif-text); font-style: italic; font-size: 92px; line-height: 1; color: var(--hk-burgundy); letter-spacing: -0.02em; }
.detail-hero .left .ref-tag{ font-family: var(--hk-serif-sc); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--hk-ink-soft); margin-top: 6px; }
.detail-hero .left h1{ font-family: var(--hk-serif-display); font-style: italic; font-weight: 500; font-size: 86px; line-height: 1; color: var(--hk-ink); letter-spacing: -0.005em; margin-top: 30px; }
.detail-hero .right .body{ font-family: var(--hk-sans-body); font-weight: 300; font-size: 17px; line-height: 1.75; color: var(--hk-ink); margin: 0 0 16px; max-width: 48ch; }
.detail-hero .right .body em{ font-family: var(--hk-serif-text); font-style: italic; color: var(--hk-burgundy); }
.detail-hero .right .spec{ margin-top: 22px; display:flex; gap: 36px; }
.detail-hero .right .spec .col{ display:flex; flex-direction:column; gap: 4px; }
.detail-hero .right .spec .k{ font-family: var(--hk-serif-sc); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--hk-ink-soft); }
.detail-hero .right .spec .v{ font-family: var(--hk-serif-text); font-style: italic; font-size: 22px; color: var(--hk-burgundy); }

/* ── Photo mosaic ── */
.mosaic{ display:grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 18px; padding: 0 60px 90px; }
.mosaic .imgph:nth-child(1){ grid-row: 1 / 3; }