/* =========================================================
   Stay Vo — Old Town Hotel, Gdańsk
   Palette: bone #efe9dd · ink #101010 · amber #e8a317 · brick #8b3a2b
   Fonts: Fraunces/Georgia (display), JetBrains Mono/Consolas (labels),
          Inter/Arial (body). No external loads — system fallbacks only.
   ========================================================= */

:root{
  --bone:#efe9dd;
  --ink:#101010;
  --amber:#e8a317;
  --brick:#8b3a2b;
  --hair:rgba(16,16,16,.18);
  --hair-light:rgba(239,233,221,.22);

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",Consolas,"Courier New",monospace;
  --sans:"Inter",Arial,Helvetica,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.5;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}

/* ---------- 12-column grid wrapper ---------- */
.grid{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:20px;
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--bone);
  padding:10px 14px;font-family:var(--mono);font-size:13px;z-index:200;
}
.skip-link:focus{left:8px;top:8px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--bone);
  border-bottom:1px solid var(--hair);
}
.site-header .grid{
  align-items:center;
  padding-top:14px;padding-bottom:14px;
}
.wordmark{
  grid-column:1 / 7;
  display:flex;flex-direction:column;
  font-family:var(--serif);
  font-weight:600;
  line-height:.82;
  font-size:26px;
  letter-spacing:.04em;
  text-decoration:none;
}
.wordmark span:nth-child(2){color:var(--amber);}

/* ---------- CSS-only overlay menu ---------- */
.menu{
  grid-column:7 / 13;
  justify-self:end;
}
.menu summary{
  list-style:none;
  cursor:pointer;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:8px 4px;
  border-bottom:2px solid var(--amber);
}
.menu summary::-webkit-details-marker{display:none;}
.menu summary::marker{content:"";}
.menu summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

.menu-overlay{
  position:fixed;
  inset:0;
  background:var(--ink);
  color:var(--bone);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px 24px;
  z-index:150;
}
.menu[open] summary{
  position:fixed;top:14px;right:20px;z-index:160;
  color:var(--bone);
  border-color:var(--amber);
}
.menu nav ul{
  list-style:none;margin:0;padding:0;
  max-width:1240px;margin:0 auto;width:100%;
}
.menu nav li{
  border-top:1px solid var(--hair-light);
}
.menu nav li:last-child{border-bottom:1px solid var(--hair-light);}
.menu nav a{
  display:block;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(34px,9vw,80px);
  line-height:1.05;
  letter-spacing:-.01em;
  text-decoration:none;
  padding:14px 0;
  color:var(--bone);
}
.menu nav a:hover,
.menu nav a:focus-visible{color:var(--amber);outline:none;}
.menu-close-note{
  display:block;
  max-width:1240px;margin:28px auto 0;width:100%;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  color:rgba(239,233,221,.55);
}

/* ---------- Shared section rhythm ---------- */
section{padding:72px 0;border-bottom:1px solid var(--hair);}
.section-label{
  grid-column:1 / 13;
  font-family:var(--mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:0 0 36px;
  display:flex;gap:14px;align-items:baseline;
}
.section-label .idx{color:var(--amber);}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-variant:small-caps;
  color:var(--brick);
  margin:0 0 20px;
}

/* ---------- Hero ---------- */
.hero{padding:96px 0 84px;border-bottom:1px solid var(--hair);}
.hero .eyebrow{grid-column:1 / 13;}
.hero h1{
  grid-column:1 / 13;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(52px,14vw,168px);
  line-height:.92;
  letter-spacing:-.02em;
  margin:0;
}
.amber-bar{
  grid-column:1 / 13;
  height:4px;
  background:var(--amber);
  margin:40px 0 28px;
}
.hero-sub{
  grid-column:1 / 9;
  font-size:clamp(18px,2.2vw,22px);
  line-height:1.45;
  margin:0 0 28px;
  max-width:62ch;
}

/* ---------- Link-arrow buttons (no filled buttons) ---------- */
.link-arrow a,
.link-arrow button{
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  background:none;border:none;padding:0;cursor:pointer;
  border-bottom:2px solid var(--amber);
  padding-bottom:3px;
  transition:border-width .12s ease;
  display:inline-block;
}
.link-arrow a:hover,
.link-arrow button:hover,
.link-arrow a:focus-visible,
.link-arrow button:focus-visible{
  border-bottom-width:5px;
  outline:none;
}
.link-arrow a span,
.link-arrow button span{color:var(--amber);}

/* ---------- Hotel ---------- */
.pullquote{
  grid-column:1 / 7;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(28px,4.6vw,52px);
  line-height:1.04;
  letter-spacing:-.01em;
  margin:0;
}
.hotel-body{
  grid-column:8 / 13;
  align-self:end;
}
.hotel-body p{margin:0 0 18px;max-width:46ch;}
.hotel-body p:last-child{margin-bottom:0;}

/* ---------- Rooms index ---------- */
.room-index{
  grid-column:1 / 13;
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--hair);
}
.room-index li{
  display:grid;
  grid-template-columns:72px 1fr;
  grid-template-areas:
    "no name"
    "no desc"
    "no sleeps";
  gap:2px 18px;
  padding:22px 0;
  border-bottom:1px solid var(--hair);
}
.room-no{
  grid-area:no;
  font-family:var(--mono);
  font-size:14px;
  color:var(--amber);
  padding-top:4px;
}
.room-name{
  grid-area:name;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(26px,4.4vw,42px);
  line-height:1;
  letter-spacing:-.01em;
}
.room-desc{grid-area:desc;max-width:52ch;margin-top:4px;}
.room-sleeps{
  grid-area:sleeps;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brick);
  margin-top:6px;
}

/* ---------- Old Town walks ---------- */
.walks{
  grid-column:1 / 13;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid var(--hair);
}
.walk{
  padding:26px 0;
  border-bottom:1px solid var(--hair);
}
.walk-time{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.14em;
  color:var(--amber);
}
.walk h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(24px,3.4vw,32px);
  line-height:1.02;
  margin:8px 0 10px;
}
.walk p{margin:0;max-width:34ch;font-size:15px;line-height:1.45;}

/* ---------- Casino (black section) ---------- */
.casino{
  background:var(--ink);
  color:var(--bone);
  border-bottom:1px solid var(--ink);
}
.casino-panel{
  grid-column:1 / 13;
  position:relative;
  padding-left:28px;
}
.casino-panel::before{
  content:"";
  position:absolute;
  left:0;top:4px;bottom:4px;
  width:4px;
  background:var(--amber);
}
.age-label{
  display:inline-block;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.16em;
  color:var(--amber);
  border:1px solid var(--amber);
  padding:4px 10px;
  margin-bottom:22px;
}
.casino h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(34px,7vw,76px);
  line-height:.98;
  letter-spacing:-.015em;
  margin:0 0 32px;
  max-width:14ch;
}
.casino-body{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  max-width:70ch;
}
.casino-body p{margin:0;line-height:1.55;color:rgba(239,233,221,.9);}

/* ---------- Contact ---------- */
.contact-cols{
  grid-column:1 / 13;
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
}
.contact-line{margin:0 0 16px;max-width:52ch;}
.contact-line .k{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brick);
  margin-bottom:3px;
}
.contact-line a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--amber);}
.contact-note{
  margin:28px 0 0;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.04em;
  color:var(--ink);
  padding-top:16px;
  border-top:1px solid var(--hair);
}

/* Contact form */
.contact-form .field{margin:0 0 20px;}
.contact-form label{
  display:block;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  font-family:var(--sans);
  font-size:16px;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--ink);
  padding:8px 0;
  border-radius:0;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-bottom:2px solid var(--amber);
}
.contact-form textarea{resize:vertical;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--bone);
  padding:56px 0 48px;
}
.site-footer .grid{row-gap:6px;}
.foot-name{
  grid-column:1 / 13;
  font-family:var(--serif);
  font-weight:600;
  font-size:30px;
  margin:0 0 6px;
}
.foot-tag{grid-column:1 / 13;margin:0 0 20px;max-width:44ch;}
.foot-copy,
.foot-legal{
  grid-column:1 / 13;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--ink);
  margin:0 0 4px;
}
.foot-legal a{text-decoration:none;border-bottom:1px solid var(--amber);}

/* =========================================================
   Responsive — tablet / desktop
   ========================================================= */
@media (min-width:720px){
  body{font-size:18px;}

  .hero-sub{grid-column:1 / 10;}

  .room-index li{
    grid-template-columns:90px 5fr 2fr;
    grid-template-areas:"no name sleeps" "no desc sleeps";
    align-items:start;
  }
  .room-sleeps{text-align:right;margin-top:8px;}

  .walks{
    grid-template-columns:repeat(4,1fr);
    column-gap:20px;
    border-top:1px solid var(--hair);
  }
  .walk{
    border-bottom:none;
    border-left:1px solid var(--hair);
    padding:24px 18px 10px;
  }
  .walk:first-child{border-left:none;padding-left:0;}

  .casino-body{grid-template-columns:1fr 1fr;gap:22px 34px;}
  .casino-body p:last-child{grid-column:1 / 3;max-width:70ch;}

  .contact-cols{grid-template-columns:1fr 1fr;gap:60px;}
}

@media (min-width:1000px){
  .wordmark{font-size:30px;}
  .hero{padding:120px 0 96px;}
  .pullquote{grid-column:1 / 6;}
  .hotel-body{grid-column:7 / 12;}
}

/* ---------- Focus-visible baseline ---------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}

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