/* Each section is a wall painted in one of the hostel's own colours: red = the lounge and evenings, lime = the garden, blue = rooms, salmon = the outside and finding us. Photos hang in white frames, like the house's window trim. */
:root {
  --paper: #ffffff;
  --ink: #1b1714;
  --muted: #5d5650;
  --rule: #e4e0da;
  --red: #a52c12;
  --lime: #c2cf45;
  --blue: #1f4597;
  --salmon: #de8c70;
  --g: clamp(16px, 4vw, 56px);
  --gap: clamp(20px, 3vw, 48px);
  --frame: clamp(8px, 0.9vw, 14px);
  --pad: clamp(64px, 9vw, 136px);
  --head: "Young Serif", Georgia, serif;
  --body: "Instrument Sans", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 400; margin: 0; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1.04; letter-spacing: -0.015em; }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08; letter-spacing: -0.01em; }
h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.15; }
h4 { font-size: 1.3rem; line-height: 1.2; }
p { margin: 0; }
p + p { margin-top: 0.9em; }
figure { margin: 0; }
figcaption { font-size: 0.875rem; margin-top: 10px; opacity: 0.85; }
address { font-style: normal; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--g); }
.lede { font-size: 1.1875rem; max-width: 34em; }
h2 + .lede { margin-top: 24px; }

/* A wall: full width, one colour. --on is the text colour that reads on it. */
.wall { background: var(--wall, var(--paper)); color: var(--on, var(--ink)); padding: var(--pad) 0; }
.red { --wall: var(--red); --on: #fff; }
.lime { --wall: var(--lime); --on: var(--ink); }
.blue { --wall: var(--blue); --on: #fff; }
.salmon { --wall: var(--salmon); --on: var(--ink); }
.plain + .plain { padding-top: 0; }

/* Every photo hangs the same way: a white frame, nothing else. */
.frame { background: #fff; padding: var(--frame); }

/* Text and photo side by side; .flip puts the photo first. */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.split > .text { grid-column: 1 / 6; }
.split > .pic { grid-column: 6 / 13; }
.split.flip > .text { grid-column: 8 / 13; order: 2; }
.split.flip > .pic { grid-column: 1 / 8; }
.split + .split { margin-top: var(--pad); }
.text h2 + p, .text h1 + p { margin-top: 24px; }

.btn {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font: 600 1rem/1 var(--body);
  padding: 16px 24px;
  border-radius: 2px;
  text-decoration: none;
}
.btn:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.red .btn, .blue .btn { background: #fff; color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 36px; }
.actions a:not(.btn) { font-weight: 600; }

/* Header */
.top { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.mark { display: block; }
.mark img { width: 156px; }
.key { display: flex; gap: 24px; margin: 0 0 0 auto; padding: 0; list-style: none; font-size: 0.9375rem; font-weight: 500; }
.key a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.key a:hover { text-decoration: underline; }
.sw { width: 12px; height: 12px; flex: none; background: var(--c); }
.top .btn { padding: 12px 16px; font-size: 0.9375rem; }

/* Home: the lounge wall runs from the hero through the evenings. */
.hero { padding-top: clamp(40px, 6vw, 96px); }
.hero .text p { font-size: 1.1875rem; max-width: 28em; }
#evenings { margin-top: var(--pad); }
.offline .text .frame { width: 62%; margin-top: 40px; }

.quote blockquote { margin: 0; max-width: 24em; font: 400 clamp(1.4rem, 2.5vw, 2.05rem)/1.32 var(--head); }
.quote cite { display: block; margin-top: 20px; font-style: normal; color: var(--muted); }

/* Three equal squares in a row at every width above phone size, so they always fit. */
.garden-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.garden-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.garden-photos figure:nth-child(2) img { object-position: 58% 50%; }
.garden-note { margin-top: 40px; max-width: 34em; font-size: 1.1875rem; }
.garden .more { margin-top: 40px; border-top: 1px solid rgb(27 23 20 / 0.25); padding-top: 24px; }
.garden .more a { font-weight: 600; }

/* Rooms */
.rooms h3 { margin-top: 72px; }
.rooms .note { margin-top: 12px; max-width: 46em; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 32px; }
.card h4 { margin-top: 20px; }
.card ul { margin: 8px 0 14px; padding-left: 1.1em; }
.card a { font-weight: 600; }
.rooms .after { margin-top: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }

.honest { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.honest h2 { grid-column: 1 / 5; font-size: clamp(1.75rem, 2.6vw, 2.3rem); }
.honest blockquote { grid-column: 5 / 12; margin: 0; font-size: 1.3125rem; line-height: 1.55; }
.honest .team { grid-column: 5 / 12; margin-top: 28px; color: var(--muted); }

/* The front-door photo is portrait, so it gets a narrower column. */
.find .split.flip > .pic { grid-column: 1 / 6; }
.find .split.flip > .text { grid-column: 7 / 13; }
.find dl { margin: 28px 0 36px; display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }
.find dt { font-weight: 600; }
.find dd { margin: 0; }
.find address { margin-top: 24px; font-size: 1.1875rem; }
.find address + p { margin-top: 12px; }

/* Info page */
.page-head { padding-top: clamp(48px, 7vw, 104px); }
.page-head h1 { max-width: 12em; }
.page-head .lede { margin-top: 24px; }
.times { margin-top: 56px; border-top: 2px solid var(--ink); padding-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.times h2 { font: 600 1.0625rem/1.3 var(--body); }
.times .big { margin-top: 10px; font: 400 clamp(1.75rem, 3.2vw, 2.8rem)/1.12 var(--head); }
.times .big + p { margin-top: 14px; color: var(--muted); }
.info { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.info > div { border-top: 1px solid var(--rule); padding-top: 20px; }
.info h3 { font-size: 1.25rem; margin-bottom: 8px; }
.info p { font-size: 0.96875rem; }
.sec-h { border-top: 2px solid var(--ink); padding-top: 32px; margin-bottom: 24px; }
.qa { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--rule); padding: 24px 0; }
.qa:last-child { border-bottom: 1px solid var(--rule); }
.qa h3 { grid-column: 1 / 6; font-size: 1.25rem; line-height: 1.3; }
.qa p { grid-column: 6 / 13; }
.facts { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
.facts li { padding: 14px 0; border-top: 1px solid rgb(255 255 255 / 0.3); }
.facts strong { font-weight: 600; }
.split.top-align { align-items: start; }
.long-notes { list-style: none; margin: 32px 0 0; padding: 0; }
.long-notes li { padding: 14px 0; border-top: 1px solid rgb(27 23 20 / 0.25); }
.long-notes strong { font-weight: 600; }
.work { margin-top: 40px; }
.work ul { list-style: none; margin: 16px 0; padding: 0; font: 400 clamp(1.4rem, 2.2vw, 1.9rem)/1.25 var(--head); }

/* Footer */
footer { border-top: 1px solid var(--rule); padding: 40px 0 56px; font-size: 0.9375rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: baseline; }
footer .tag { font: 400 1.3rem/1.2 var(--head); margin-right: auto; }
footer .small { width: 100%; color: var(--muted); }
footer ul { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }

@media (max-width: 1100px) {
  .key { gap: 16px; font-size: 0.875rem; }
  .info { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .top { position: static; }
  .top .wrap { flex-wrap: wrap; row-gap: 0; padding-top: 12px; }
  .top .btn { margin-left: auto; }
  .key { order: 3; width: 100%; margin: 0; padding: 12px 0 16px; flex-wrap: wrap; gap: 8px 16px; }
  .split, .honest, .qa { display: block; }
  .split > .pic { margin-top: 40px; }
  .split.flip > .pic { margin: 0 0 40px; }
  .offline .text .frame { width: 70%; }

  .cards { grid-template-columns: 1fr; row-gap: 48px; }
  .honest blockquote, .honest .team { margin-top: 20px; }
  .qa p { margin-top: 12px; }
}
@media (max-width: 560px) {
  .garden-photos { grid-template-columns: 1fr 1fr; }
  .garden-photos figure:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .garden-photos figure:nth-child(2) img { aspect-ratio: 4 / 3; }
  .mark img { width: 128px; }
  .times, .info, .facts { grid-template-columns: 1fr; }
  .find dl { grid-template-columns: 1fr; gap: 0; }
  .find dd { margin-bottom: 8px; }
}
.split > .text.wide { grid-column: 1 / 8; }
.split > .pic.narrow { grid-column: 9 / 13; }
.card .beds { margin: 6px 0 14px; }
.work h3 { font: 600 1.0625rem/1.35 var(--body); }