/* The app's public website. Its own sheet, not the booking pages': those
   wear the colours of whichever bunkhouse is using them, and this is the
   app speaking for itself. Nothing is set under 0.875rem (14px): where
   the design handoff asked for 11, 12 or 13px, it is 14 here. The
   handoff drew the light scheme; the dark one follows it, the same warm
   paper and green at night, and the screenshots change with it. The site
   runs no scripts, so the few things that move are radio buttons and
   the stylesheet. */

/* The three families, served from here rather than from Google so that a
   page asks nobody else for anything. Latin subsets, all under the SIL
   Open Font License. */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/source-serif-4.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/source-serif-4-italic.woff2) format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/public-sans.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/plex-mono-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/plex-mono-500.woff2) format("woff2"); }

@layer reset, base, layout, components, home, pages;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
  img, svg { display: block; max-inline-size: 100%; block-size: auto; }
  h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
}

@layer base {
  :root {
    color-scheme: light dark;
    --paper: #f5f2ea;
    --paper-2: #ece7db;
    --card: #fffdf7;
    --ink: #221f1a;
    --body: #3d3830;
    --muted: #5e574c;
    --faint: #7a725f;
    --line: #e3dccd;
    --line-2: #d9d2c3;
    --line-3: #cfc7b6;
    --green: #2f6b4f;
    --green-hover: #285e45;
    --green-deep: #1f4d37;
    --on-green: #fff;
    --link-hover: #1f4d37;
    --green-tint: #e3ede5;
    --night: #1f2a24;
    --night-panel: #26332c;
    --night-line: #3a4a40;
    --night-text: #eef0ea;
    --night-body: #c9cfc6;
    --night-muted: #a9b3a6;
    --amber: #e3b04b;
    --red: #b3372b;

    --serif: "Source Serif 4", Georgia, serif;
    --sans: "Public Sans", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;

    --h1: clamp(2.5rem, 6vw, 4rem);
    --h2: clamp(1.875rem, 4vw, 2.625rem);
    --h2-step: clamp(1.75rem, 3.4vw, 2.375rem);

    --shadow-card: 0 20px 40px -28px rgba(40, 30, 15, .4);
    --shadow-shot: 0 30px 60px -30px rgba(40, 30, 15, .35), 0 2px 6px rgba(40, 30, 15, .06);
    --shadow-button: 0 1px 0 var(--green-deep), 0 6px 16px -8px rgba(47, 107, 79, .7);
    --stripe: #e6e0d2;
    --stripes: repeating-linear-gradient(135deg, var(--paper-2) 0 10px, var(--stripe) 10px 20px);
    --chip-line: #bfb6a3;
    --new-bg: #dfeadf; --new-fg: #1f4d37;
    --improved-bg: #e6e0f0; --improved-fg: #43346b;
    --fixed-bg: #f3e2bf; --fixed-fg: #6b4a10;
    --feed-glow: #f7e3cc;
    --house: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%);
    --head: 4.25rem;
  }
  /* After dark: the paper goes to a warm near-black, the lines and text
     turn over, and the green is lifted to be read on it, with dark text
     on anything filled with it. The night band and the e-ink panel keep
     their own colours. */
  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #181613;
      --paper-2: #221f1b;
      --card: #201e1a;
      --ink: #eeeae1;
      --body: #cdc6b8;
      --muted: #a39b8c;
      --faint: #8a8272;
      --line: #302c26;
      --line-2: #3a352e;
      --line-3: #4a443a;
      --green: #6cbf93;
      --green-hover: #85cfa7;
      --green-deep: #14301f;
      --green-tint: #1d3327;
      --on-green: #10241a;
      --link-hover: #9ddcb9;
      --night: #141c18;
      --night-panel: #1c2721;
      --stripe: #1d1a17;
      --chip-line: #4a443a;
      --new-bg: #1f3529; --new-fg: #9fd6b5;
      --improved-bg: #2c2740; --improved-fg: #cdbdf0;
      --fixed-bg: #3a2d14; --fixed-fg: #ebc37d;
      --feed-glow: #4a3620;
      --shadow-card: 0 20px 40px -28px rgba(0, 0, 0, .8);
      --shadow-shot: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .3);
      --shadow-button: 0 1px 0 var(--green-deep), 0 6px 16px -8px rgba(0, 0, 0, .7);
    }
  }

  html {
    font-family: var(--sans);
    font-size: 100%;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--head);
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  }
  body { min-block-size: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }

  h1, h2 { font-family: var(--serif); font-weight: 400; }
  h1 { font-size: var(--h1); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
  h2 { font-size: var(--h2); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
  h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
  p, li { text-wrap: pretty; }

  a { color: var(--green); text-underline-offset: 3px; }
  a:hover { color: var(--link-hover); }
  :focus-visible { outline: 3px solid color-mix(in oklab, var(--green) 70%, var(--ink)); outline-offset: 2px; border-radius: 4px; }
  ::selection { background: var(--green-tint); color: var(--ink); }

  .sr-only { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}

@layer layout {
  .wrap { inline-size: 100%; max-inline-size: calc(1120px + 48px); margin-inline: auto; padding-inline: 24px; }
  .wrap.narrow { max-inline-size: calc(880px + 48px); }

  .masthead {
    position: sticky;
    inset-block-start: 0;
    z-index: 5;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-block-end: 1px solid var(--line);
    & .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-block: 14px; }
    & nav { display: flex; flex-wrap: wrap; gap: 4px; font-size: .9375rem; }
    & nav a {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 7px 12px;
      border-radius: 999px;
      color: var(--ink);
      text-decoration: none;
      transition: background-color .15s;
      &:hover { background: var(--paper-2); color: var(--ink); }
      &[aria-current] { background: var(--line); }
    }
    /* On a phone the header wraps to two lines; it scrolls away rather
       than taking a third of the screen. */
    @media (width < 34rem) { position: static; }
    @media (width < 26rem) { & nav { gap: 0; margin-inline: -8px; } & nav a { padding-inline: 8px; } }
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--ink);
    text-decoration: none;
    &:hover { color: var(--ink); }
  }
  .house { display: block; inline-size: 22px; block-size: 22px; background: var(--green); clip-path: var(--house); }
  /* The app changed today: a dot beside Changelog that breathes. */
  .fresh { display: block; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--green); animation: breathe 2.4s ease-in-out infinite; }
  @keyframes breathe { 50% { opacity: .25; } }

  .colophon {
    border-block-start: 1px solid var(--line);
    font-size: .875rem;
    color: var(--muted);
    & .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-block: 32px 48px; }
    & p:first-child { max-inline-size: 460px; }
    & p:last-child { text-align: end; }
    @media (width < 40rem) { & p:last-child { text-align: start; } }
  }

  .section { padding-block: 80px 40px; }
  .section > h2 { margin-block-end: 32px; }
  .heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-block-end: 28px;
    & > a { font-size: .9375rem; font-weight: 500; }
  }
  .band { background: var(--paper-2); padding-block: 80px; & h2 { margin-block-end: 32px; } }
  .dark { background: var(--night); color: var(--night-text); padding-block: 88px; margin-block-start: 80px; & h2 { margin-block-end: 32px; } }
  .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px; align-items: start; }
  .words { display: grid; gap: 16px; align-content: start; }
}

@layer components {
  .hero {
    display: grid;
    gap: 22px;
    padding-block: 72px 24px;
    & .lede { max-inline-size: 680px; }
  }
  .lede { font-size: 1.1875rem; line-height: 1.6; color: var(--body); }
  .eyebrow { font-family: var(--mono); font-size: .875rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
  .pill {
    justify-self: start;
    padding: 4px 12px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: .875rem;
    letter-spacing: .04em;
    color: var(--muted);
  }

  .actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .band .actions, .dark .actions { margin-block-start: 40px; }
  .button {
    display: inline-flex;
    align-items: center;
    padding: 13px 20px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--green);
    color: var(--on-green);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    text-decoration: none;
    box-shadow: var(--shadow-button);
    transition: transform .15s, background-color .15s;
    &:hover { background: var(--green-hover); color: var(--on-green); transform: translateY(-1px); }
    &.quiet { background: transparent; color: var(--ink); border-color: var(--line-3); box-shadow: none; }
    &.quiet:hover { background: var(--paper-2); color: var(--ink); transform: none; }
    &.light { background: var(--night-text); color: var(--night); box-shadow: none; }
    &.light:hover { background: #fff; color: var(--night); }
  }

  /* A link further on: an arrow that leans the way it goes. Drawn rather
     than typed, since the fonts carry no arrow. */
  .onward {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    &::after {
      content: "";
      inline-size: .85em;
      block-size: .85em;
      flex: none;
      background: currentColor;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h10M8.5 3.5 13 8l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
      transition: translate .15s;
    }
    &:hover::after { translate: .2em 0; }
  }

  .card {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 24px;
    background: var(--card);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    & h3 { font-size: 1.125rem; }
    & p:not(.eyebrow) { font-size: .9375rem; color: var(--body); }
    & .eyebrow { color: var(--green); }
    &.lift { transition: transform .2s; &:hover { transform: translateY(-3px); } }
  }
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
  .dark .card { background: var(--night-panel); border-color: var(--night-line); & p:not(.eyebrow) { color: var(--night-body); } }

  .features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 36px 40px;
    & h3 { margin-block-end: 8px; }
    & p { color: var(--body); }
  }

  /* A screenshot of the app, cropped to its frame from the top, on stripes
     that show while it loads. */
  .shot {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line-2);
    border-radius: 14px;
    background: var(--stripes);
    box-shadow: var(--shadow-shot);
    & picture { display: block; block-size: 100%; }
    & img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
  }

  .address {
    justify-self: start;
    padding-block-end: 2px;
    border-block-end: 2px solid var(--green);
    font-family: var(--serif);
    font-size: 1.375rem;
    text-decoration: none;
    transition: background-color .15s;
    &:hover { background: var(--green-tint); }
  }

  /* A change: what kind and who can see it in a column of tags, the words
     beside them. */
  .changes {
    & li {
      display: grid;
      grid-template-columns: 184px minmax(0, 1fr);
      gap: 16px;
      padding-block: 16px;
      border-block-start: 1px solid var(--line);
      @media (width < 30rem) { grid-template-columns: 1fr; gap: 8px; }
    }
    & p { font-size: .9375rem; color: var(--body); }
    /* Arriving from the feed at one change: it is lit, then settles. */
    & li:target { animation: found 2.4s ease-out .3s both; }
  }
  @keyframes found { from { background: var(--green-tint); } }
  .tags {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: 6px;
    font-family: var(--mono);
    font-size: .875rem;
    line-height: 1.5;
    & > span { padding: 2px 8px; border-radius: 6px; }
    & .kind.feature { background: var(--new-bg); color: var(--new-fg); }
    & .kind.improvement { background: var(--improved-bg); color: var(--improved-fg); }
    & .kind.fix { background: var(--fixed-bg); color: var(--fixed-fg); }
    & .who { padding: 1px 7px; border: 1px solid var(--line-3); color: var(--muted); }
  }
}

@layer home {
  .home {
    padding-block: 72px 40px;
    & .intro { display: grid; gap: 28px; max-inline-size: 760px; }
    & h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); }
    & h1 em { color: var(--green); }
  }
  .showcase {
    position: relative;
    margin-block: 56px 26px;
    perspective: 1600px;
    & .shot { transform: rotateX(8deg) scale(.97); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
    & .shot:hover { transform: none; }
  }
  .morning {
    position: absolute;
    inset-inline-start: -8px;
    inset-block-end: -26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    padding: 14px 18px;
    background: var(--card);
    border: 1px solid var(--line-2);
    border-radius: 12px;
    box-shadow: 0 14px 30px -16px rgba(40, 30, 15, .4);
    rotate: -1.5deg;
    & .eyebrow { line-height: 1.4; }
    & .eyebrow span { color: var(--ink); text-transform: none; }
    & dl { display: flex; gap: 18px; font-size: .875rem; }
    & div { display: flex; flex-direction: column-reverse; }
    & dt { color: var(--muted); }
    & dd { font-family: var(--serif); font-size: 1.625rem; line-height: 1; }
    & .make dd { color: var(--green); }
    @media (width < 34rem) { position: relative; inset: auto; margin-block-start: -12px; margin-inline: 8px; }
  }

  .six {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    margin-block-end: 44px;
    & li {
      display: flex;
      flex-direction: column;
      gap: 18px;
      padding: 14px 16px;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 12px;
      font-weight: 500;
      transition: transform .2s, border-color .2s;
      &:hover { transform: translateY(-3px); border-color: var(--green); }
    }
    & span { font-family: var(--mono); font-size: .875rem; font-weight: 400; color: var(--green); }
  }

  .money { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; align-items: start; }
  .rows li {
    padding-block: 16px;
    border-block-start: 1px solid var(--line);
    color: var(--body);
    & strong { color: var(--ink); font-weight: 600; }
  }
  .price-list {
    position: sticky;
    inset-block-start: 90px;
    padding: 26px;
    gap: 0;
    box-shadow: var(--shadow-card);
    & .eyebrow { color: var(--muted); margin-block-end: 16px; }
    & .rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-block-end: 22px; }
    & .rates div { display: flex; flex-direction: column-reverse; padding: 12px; background: var(--paper-2); border-radius: 10px; }
    & .rates dt { font-size: .875rem; line-height: 1.35; color: var(--muted); }
    & .rates dd { font-family: var(--serif); font-size: 1.75rem; line-height: 1.3; }
    & p.for { font-size: .875rem; color: var(--muted); margin-block-end: 10px; }
    & .receipt { display: grid; gap: 6px; font-family: var(--mono); font-size: .875rem; }
    & .receipt div { display: flex; justify-content: space-between; gap: 12px; }
    & .receipt .total { margin-block-start: 4px; padding-block-start: 8px; border-block-start: 1px dashed var(--line-3); font-weight: 500; }
    & .receipt .now { color: var(--green); }
    & .receipt .later { color: var(--muted); }
    @media (width < 30rem) { & .rates dd { font-size: 1.375rem; } }
  }

  #planning .words p { line-height: 1.65; color: var(--night-body); }
  #planning h2 { margin: 0; }

  /* The planner. Six radio buttons, one for each plan, and everything
     after them looks to see which is checked: a bed's colour and letter
     in plan N are --sN and data-sN on the bed, and .at-N is shown only
     in plan N. */
  .planner {
    --bk-a: #e8c27a; --bk-b: #9fc7e6; --bk-c: #e6a7a0; --bk-d: #b7d69a; --bk-e: #c9b5e6;
    padding: 22px;
    background: var(--night-panel);
    border: 1px solid var(--night-line);
    border-radius: 16px;
    & .top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 18px; }
    & .eyebrow { color: var(--night-muted); }
    & .dots { display: flex; gap: 5px; }
    & .dots label { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #4a5b50; cursor: pointer; transition: background-color .3s; }
    & .rooms { display: grid; gap: 12px; }
    & .room { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; align-items: center; }
    & .room p:first-child { display: grid; font-size: .875rem; line-height: 1.4; }
    & .room p:first-child span { color: var(--night-muted); }
    & .beds { display: flex; flex-wrap: wrap; gap: 5px; }
    & .bed {
      display: flex;
      align-items: center;
      justify-content: center;
      inline-size: 34px;
      block-size: 34px;
      border: 2px dashed #4a5b50;
      border-radius: 8px;
      background: #33443a;
      color: var(--night);
      font-family: var(--mono);
      font-size: .875rem;
      font-weight: 500;
      transition: background-color .4s, border-color .4s;
    }
    & .caption { min-block-size: 72px; margin-block: 20px 16px; padding: 14px 16px; background: var(--night); border-radius: 10px; font-size: .9375rem; line-height: 1.55; }
    & .controls { display: flex; flex-wrap: wrap; gap: 10px; }
    & .controls label {
      padding: 10px 15px;
      border: 1px solid transparent;
      border-radius: 9px;
      font-size: .9375rem;
      cursor: pointer;
      user-select: none;
      transition: background-color .15s;
    }
    & .next { background: var(--night-text); color: var(--night); font-weight: 600; &:hover { background: #fff; } }
    & .back { border-color: #4a5b50 !important; color: var(--night-text); font-weight: 500; &:hover { background: #2e3d34; } }
    & .at { display: none; }
    & input:focus-visible ~ .controls { outline: 3px solid var(--night-muted); outline-offset: 4px; border-radius: 9px; }
  }
  #plan-0:checked ~ * .at-0, #plan-1:checked ~ * .at-1, #plan-2:checked ~ * .at-2,
  #plan-3:checked ~ * .at-3, #plan-4:checked ~ * .at-4, #plan-5:checked ~ * .at-5 { display: revert; }
  #plan-0:checked ~ .top label:nth-child(-n+1), #plan-1:checked ~ .top label:nth-child(-n+2),
  #plan-2:checked ~ .top label:nth-child(-n+3), #plan-3:checked ~ .top label:nth-child(-n+4),
  #plan-4:checked ~ .top label:nth-child(-n+5), #plan-5:checked ~ .top label { background: var(--night-text); }
  #plan-1:checked ~ .rooms .bed[data-s1] { background: var(--s1); border: 2px solid transparent; &::after { content: attr(data-s1); } }
  #plan-2:checked ~ .rooms .bed[data-s2] { background: var(--s2); border: 2px solid transparent; &::after { content: attr(data-s2); } }
  #plan-3:checked ~ .rooms .bed[data-s3] { background: var(--s3); border: 2px solid transparent; &::after { content: attr(data-s3); } }
  #plan-4:checked ~ .rooms .bed[data-s4] { background: var(--s4); border: 2px solid transparent; &::after { content: attr(data-s4); } }
  #plan-5:checked ~ .rooms .bed[data-s5] { background: var(--s5); border: 2px solid transparent; &::after { content: attr(data-s5); } }
  /* Moved to make room: ringed in white. */
  #plan-4:checked ~ .rooms .bed[data-m4] { border-color: #fff; }

  /* Eight features in cells, the gaps between them drawn as lines. */
  .cells {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    & article { padding: 24px; background: var(--paper); transition: background-color .2s; &:hover { background: var(--card); } }
    & h3 { margin-block-end: 8px; }
    & p { font-size: .9375rem; color: var(--body); }
  }

  .pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
    gap: 56px;
    & article { display: grid; gap: 22px; align-content: start; }
    & article > p { line-height: 1.65; color: var(--body); }
  }

  /* The wall display: the app's own pictures of the demo day, drawn when
     the site is built, in a TRMNL X. Three radio buttons choose the time
     of day. */
  .wall {
    display: grid;
    gap: 14px;
    & .times { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    & .times > span { font-size: .875rem; color: var(--muted); margin-inline-end: 4px; }
    & label {
      padding: 4px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: .875rem;
      cursor: pointer;
    }
    & .screen img { display: none; inline-size: 100%; block-size: auto; }
  }
  #wall-morning:checked ~ .trmnl .at-morning,
  #wall-midday:checked ~ .trmnl .at-midday,
  #wall-evening:checked ~ .trmnl .at-evening { display: block; }
  #wall-morning:checked ~ .times label[for=wall-morning],
  #wall-midday:checked ~ .times label[for=wall-midday],
  #wall-evening:checked ~ .times label[for=wall-evening] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .wall input:focus-visible ~ .times label { outline-offset: 2px; }
  #wall-morning:focus-visible ~ .times label[for=wall-morning],
  #wall-midday:focus-visible ~ .times label[for=wall-midday],
  #wall-evening:focus-visible ~ .times label[for=wall-evening] { outline: 2px solid var(--ink); }

  /* The device: a dark frame, the panel's paper grey behind the picture's
     white, and a chin with its three buttons. */
  .trmnl {
    padding: 3.5% 3.5% 0;
    background: #2e2e2c;
    border-radius: 14px;
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .06);
    & .screen {
      padding: 1.5%;
      background: #e6e4de;
      border-radius: 3px;
      box-shadow: inset 0 0 0 2px #1d1d1b;
    }
    & .screen img { mix-blend-mode: multiply; }
    & .chin { display: flex; justify-content: center; gap: 22%; padding-block: 3%; }
    & .chin span { inline-size: 10px; block-size: 10px; border-radius: 50%; background: #1d1d1b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
  }

  /* In your colours: four radio buttons, and the mock booking page takes
     the colour of whichever is checked. */
  .colours {
    --base: #2f6b4f; --pressed: #234f3b; --on: #fff;
    gap: 18px;
    padding: 22px;
    border-radius: 18px;
    & .swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    & .swatches > span { font-size: .875rem; color: var(--muted); }
    & label {
      display: block;
      inline-size: 30px;
      block-size: 30px;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
      transition: transform .15s, box-shadow .2s;
      &:hover { transform: scale(1.12); }
    }
    & label[for=colour-moss] { background: #2f6b4f; }
    & label[for=colour-heather] { background: #7a3b69; }
    & label[for=colour-loch] { background: #2d5d8a; }
    & label[for=colour-gorse] { background: #e0b33c; }
    & .mock { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
    & .bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--base); color: var(--on); font-family: var(--serif); font-size: 1.125rem; font-weight: 600; transition: background-color .35s, color .35s; }
    & .bar .house { inline-size: 18px; block-size: 18px; background: var(--on); transition: background-color .35s; }
    & .body { display: grid; gap: 12px; padding: 16px; }
    & .body .eyebrow { color: var(--muted); }
    & .option { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border: 2px solid var(--base); border-radius: 10px; transition: border-color .35s; }
    & .option span:not(.choose) { font-size: .875rem; color: var(--muted); }
    & .choose { padding: 9px 14px; border-radius: 8px; background: var(--base); color: var(--on); font-weight: 600; font-size: .875rem; transition: background-color .35s, color .35s; }
    & .choose:active { background: var(--pressed); }
  }
  #colour-heather:checked ~ * { --base: #7a3b69; --pressed: #5c2c4f; --on: #fff; }
  #colour-loch:checked ~ * { --base: #2d5d8a; --pressed: #214669; --on: #fff; }
  #colour-gorse:checked ~ * { --base: #e0b33c; --pressed: #c49a2a; --on: #221f1a; }
  #colour-moss:checked ~ .swatches label[for=colour-moss],
  #colour-heather:checked ~ .swatches label[for=colour-heather],
  #colour-loch:checked ~ .swatches label[for=colour-loch],
  #colour-gorse:checked ~ .swatches label[for=colour-gorse] { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--base); }
  .colours input:focus-visible ~ .swatches { outline: 3px solid color-mix(in oklab, var(--green) 70%, var(--ink)); outline-offset: 4px; border-radius: 8px; }

  .private {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 40px;
    padding: clamp(24px, 4vw, 48px);
    background: var(--paper-2);
    border: 1px solid var(--line-2);
    border-radius: 18px;
    & .words p:not(.chips) { line-height: 1.65; color: var(--body); }
  }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chips span { padding: 4px 10px; border: 1px solid var(--chip-line); border-radius: 999px; font-family: var(--mono); font-size: .875rem; }

  .last {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 56px;
    align-items: start;
    padding-block-end: 96px;
    & .words p { line-height: 1.65; color: var(--body); }
    & .latest { grid-column: span 2; min-inline-size: 0; }
    & .heading { margin-block-end: 18px; }
    & .latest > .onward { margin-block-start: 16px; font-weight: 500; }
    @media (width < 736px) { & .latest { grid-column: auto; } }
  }
}

@layer pages {
  /* Booking: the six steps, jumped to from pills at the top. */
  .jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 12px;
    & a {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px 8px 8px;
      background: var(--card);
      border: 1px solid var(--line-2);
      border-radius: 999px;
      color: var(--ink);
      font-size: .875rem;
      text-decoration: none;
      transition: border-color .2s, transform .2s;
      &:hover { border-color: var(--green); transform: translateY(-2px); color: var(--ink); }
    }
    & span { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--green); color: var(--on-green); font-family: var(--mono); font-size: .875rem; }
  }
  .tour { padding-block: 40px; }
  .tour .step {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 40px;
    align-items: center;
    padding-block: 56px;
    border-block-start: 1px solid var(--line);
    & h2 { font-size: var(--h2-step); }
    & .words p:not(.steps):not(.eyebrow) { line-height: 1.65; color: var(--body); }
    /* The words and the pictures change sides from one step to the next. */
    &:nth-child(even) .words { order: 2; }
  }
  .steps {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: .875rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--green);
    & .bar { display: flex; gap: 3px; }
    & .bar span { inline-size: 18px; block-size: 4px; border-radius: 2px; background: var(--line-2); }
    & .bar .done { background: var(--green); }
  }
  .shots {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    min-inline-size: 0;
    & .shot { flex: 1 1 0; min-inline-size: 0; aspect-ratio: 4 / 3; border-radius: 12px; box-shadow: 0 24px 48px -28px rgba(40, 30, 15, .4); transition: transform .3s; }
    & .shot:hover { transform: translateY(-4px); }
    & .shot.phone { flex: 0 0 28%; aspect-ratio: 9 / 19; border-radius: 22px; }
  }

  /* Dashboard: the staff tab bar, a page of sections, and their keys. */
  .tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-block-start: 12px;
    padding: 8px;
    background: var(--card);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    box-shadow: 0 14px 30px -22px rgba(40, 30, 15, .4);
    & p { display: flex; flex-wrap: wrap; gap: 4px; }
    & a { padding: 9px 16px; border-radius: 9px; color: var(--ink); font-weight: 500; text-decoration: none; transition: background-color .15s; }
    & a:hover { background: var(--paper-2); color: var(--ink); }
    & a.first { background: var(--paper-2); &:hover { background: var(--line); } }
    & a.new { background: var(--green); color: var(--on-green); font-weight: 600; &:hover { background: var(--green-hover); color: var(--on-green); } }
  }
  .staff { padding-block: 24px 40px; }
  .staff .step {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 28px;
    padding-block: 56px;
    border-block-start: 1px solid var(--line);
    & > .words { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px 48px; align-items: start; }
    & > .words > div { display: grid; gap: 14px; }
    & > .words > div:first-child { gap: 10px; }
    & .eyebrow { color: var(--green); }
    & .words p:not(.eyebrow) { line-height: 1.65; color: var(--body); }
    & .shot { box-shadow: 0 30px 60px -34px rgba(40, 30, 15, .4); }
    &:nth-child(even) .words { order: 0; }
  }
  .key {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 4px;
    & li { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; background: var(--card); border: 1px solid var(--line-2); border-radius: 999px; font-size: .875rem; }
  }
  .chip { display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 5px; background: var(--new-bg); color: var(--new-fg); font-family: var(--mono); font-size: .875rem; font-weight: 500; line-height: 1; }
  .chip.owes { background: var(--amber); color: #221f1a; }
  .chip.blocked { background: repeating-linear-gradient(135deg, var(--line-3) 0 3px, var(--paper-2) 3px 6px); }
  /* Where a stay stands, as the bookings list draws it. */
  .ring { display: block; inline-size: 18px; block-size: 18px; border: 2px solid var(--ink); border-radius: 50%; }
  .ring.here { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
  .ring.left { background: var(--ink); }
  .ring.cancelled { background: linear-gradient(135deg, transparent 44%, var(--ink) 44% 56%, transparent 56%); }
  .ring.overdue { background: var(--red); border-color: var(--red); }
  .dark .explain { justify-self: start; margin-block-start: 6px; padding: 6px 12px; border: 1px solid #4a5b50; border-radius: 999px; font-size: .875rem; }
  #and { margin-block-start: 0; padding-block: 80px; }

  /* Pricing: a swing tag with nothing written on it yet. */
  .pricing {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 48px;
    align-items: center;
    padding-block-end: 40px;
    & .intro { display: grid; gap: 22px; }
  }
  .undecided { font-family: var(--serif); font-style: italic; font-size: clamp(1.625rem, 3vw, 2rem); line-height: 1.3; color: var(--green); }
  .tag-hanger { display: flex; justify-content: center; padding-block: 48px 24px; }
  .tag {
    position: relative;
    rotate: -4deg;
    transition: rotate .5s cubic-bezier(.2, .7, .2, 1), translate .5s cubic-bezier(.2, .7, .2, 1);
    &:hover { rotate: 2deg; translate: 0 -4px; }
    & .string { position: absolute; inset-inline-start: 50%; inset-block-start: -44px; inline-size: 64px; block-size: 64px; margin-inline-start: -1px; border-inline-start: 2px solid #8f8672; transform-origin: bottom; rotate: 18deg; }
    & .label {
      position: relative;
      display: grid;
      gap: 14px;
      inline-size: 280px;
      padding: 44px 28px 28px;
      text-align: center;
      background: var(--card);
      border: 1px solid var(--line-3);
      clip-path: polygon(18% 0, 82% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
      box-shadow: 0 30px 50px -30px rgba(40, 30, 15, .5);
    }
    & .hole { position: absolute; inset-inline-start: 50%; inset-block-start: 14px; inline-size: 14px; block-size: 14px; margin-inline-start: -7px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-3); }
    & .eyebrow { letter-spacing: .06em; }
    & .price { font-family: var(--serif); font-size: 4.5rem; line-height: 1; }
    & .blank { display: inline-block; inline-size: 1.1em; block-size: .62em; border-block-end: 3px dashed var(--line-3); }
    & .when { font-size: .875rem; color: var(--muted); }
  }
  .mark { display: block; inline-size: 34px; block-size: 34px; }
  .mark.pound { font-family: var(--serif); font-size: 2.5rem; line-height: 34px; color: var(--green); }
  .mark.house { background: var(--green); clip-path: var(--house); }
  .mark.ring { border: 3px solid var(--green); border-radius: 50%; }
  .centred {
    text-align: center;
    & .wrap { max-inline-size: calc(760px + 48px); display: grid; gap: 18px; justify-items: center; }
    & h2 { margin: 0; }
    & .big { font-size: 1.125rem; line-height: 1.65; color: var(--body); }
    & .address { justify-self: center; font-size: clamp(1.5rem, 3vw, 1.875rem); }
    & .onwards { margin-block-start: 18px; color: var(--body); }
  }

  /* Changelog: a feed, a filter, and the days. */
  .log {
    padding-block-end: 96px;
    & .hero { padding-block-end: 40px; }
  }
  .feed {
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: var(--card);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    color: var(--ink);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .15s;
    &:hover { border-color: var(--green); color: var(--ink); }
    &::before { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; background: #e0913c; box-shadow: 0 0 0 3px var(--feed-glow); }
  }
  .filter {
    position: sticky;
    inset-block-start: calc(var(--head) - 1px);
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-block: 12px;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-block-end: 1px solid var(--line);
    @media (width < 34rem) { inset-block-start: 0; }
    & .segments { display: flex; gap: 4px; padding: 4px; background: var(--paper-2); border-radius: 10px; }
    & label { padding: 7px 14px; border-radius: 7px; font-size: .875rem; font-weight: 500; cursor: pointer; transition: background-color .2s; }
    & .count { text-transform: none; }
    & .count span { display: none; }
  }
  #show-all:checked ~ .filter label[for=show-all],
  #show-public:checked ~ .filter label[for=show-public],
  #show-staff:checked ~ .filter label[for=show-staff] { background: var(--card); box-shadow: 0 1px 3px rgba(40, 30, 15, .15); }
  #show-all:checked ~ .filter .all,
  #show-public:checked ~ .filter .public,
  #show-staff:checked ~ .filter .staff { display: inline; }
  #show-public:checked ~ .day li.staff,
  #show-staff:checked ~ .day li.public,
  #show-public:checked ~ .day:not(:has(li.public)),
  #show-staff:checked ~ .day:not(:has(li.staff)) { display: none; }
  .log input:focus-visible ~ .filter .segments { outline: 3px solid color-mix(in oklab, var(--green) 70%, var(--ink)); outline-offset: 2px; }
  .day {
    padding-block-start: 32px;
    scroll-margin-top: 70px;
    & .date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-block-end: 8px; }
    & h2 { font-size: 1.875rem; }
    & .changes li { padding-block: 18px; }
  }
  .newest { padding: 2px 10px; border-radius: 999px; background: var(--green); color: var(--on-green); font-family: var(--mono); font-size: .875rem; }

  /* The page that is not there, drawn as a room with nobody in it. */
  .vacant {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    justify-self: start;
    padding: 12px 16px;
    background: var(--night-panel);
    border-radius: 12px;
    color: var(--night-text);
    font-size: .875rem;
    & span:last-child { color: var(--night-muted); }
    & .beds { display: flex; gap: 5px; }
    & .beds span { inline-size: 28px; block-size: 28px; border: 2px dashed #4a5b50; border-radius: 7px; background: #33443a; }
  }
}