@font-face { font-family: 'Kings Caslon'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/kc-regular.woff2) format('woff2'); }
@font-face { font-family: 'Kings Caslon'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/kc-italic.woff2) format('woff2'); }
@font-face { font-family: 'Kings Caslon'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/kc-bold.woff2) format('woff2'); }
@font-face { font-family: 'Kings Caslon'; font-style: italic; font-weight: 700; font-display: swap; src: url(fonts/kc-bolditalic.woff2) format('woff2'); }
@font-face { font-family: 'Contax Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/contax-bold.woff2) format('woff2'); }
body { margin: 0; background: #E9E2D6 url(img/travertine-light.jpg); background-size: 420px 420px; }
    a { color: #16130F; text-decoration: none; }
    a:hover { color: #5E5749; }
    .navlink { font-family: 'Contax Pro', Helvetica, Arial, sans-serif; font-size: 11px; letter-spacing: 0.22em; color: #16130F; }
    .navlink:hover { color: #5E5749; }
    .plate { position: relative; overflow: hidden; }
    /* Proportions, not pixel heights. A fixed height letterboxes the photograph
       harder the wider the window gets; these hold the 1440 design's shape everywhere. */
    .hero-plate { aspect-ratio: 1328 / 620; }
    .grid .plate { aspect-ratio: 636 / 470; }

    /* ---- property photo carousels -------------------------------------
       Without JavaScript the first slide shows and no controls exist, so
       nothing ever renders as a broken button. */
    .carousel .slide { position: absolute; top: 0; left: 0; display: block;
      width: 100%; height: 100%; object-fit: cover; opacity: 0;
      transition: opacity 480ms ease; }
    .carousel .slide.is-on { opacity: 1; }
    .carousel.no-fade .slide { transition: none; }

    .cnav { position: absolute; top: 50%; transform: translateY(-50%);
      width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
      border: 0; padding: 0; background: transparent; cursor: pointer;
      color: #fff; font-family: 'Kings Caslon', Georgia, serif; font-size: 30px; line-height: 1;
      text-shadow: 0 1px 7px rgba(0,0,0,0.5);
      opacity: 0; transition: opacity 180ms ease; }
    .cprev { left: 2px; }
    .cnext { right: 2px; }
    .carousel:hover .cnav, .cnav:focus-visible { opacity: 1; }
    .cnav:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
    /* on touch there is no hover to reveal them */
    @media (hover: none) { .cnav { opacity: 0.92; } }

    .cdots { position: absolute; left: 10px; bottom: 8px; display: flex; gap: 2px; }
    .cdot { position: relative; width: 26px; height: 26px; border: 0; padding: 0;
      background: transparent; cursor: pointer; }
    .cdot::before { content: ''; position: absolute; left: 10px; top: 10px;
      width: 6px; height: 6px; border-radius: 50%;
      background: rgba(255,255,255,0.55); box-shadow: 0 1px 3px rgba(0,0,0,0.4);
      transition: background 180ms ease; }
    .cdot[aria-current]::before { background: #fff; }
    .cdot:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

    /* announced to screen readers, never shown */
    .cstatus { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

    .platenote { position: absolute; left: 16px; bottom: 13px; font-family: 'Contax Pro', Helvetica, Arial, sans-serif; font-size: 9px; letter-spacing: 0.26em; color: rgba(22,19,15,0.32); }

    /* ---- the booking bar needs ~860px; stack it before that ------------ */
    @media (max-width: 900px) {
      /* booking bar: one field per row, rules become horizontal */
      .bar-row { flex-direction: column !important; }
      .bar-row > div:not(.rule) { padding: 16px 0 !important; flex: none !important; }
      .rule { padding: 0 !important; flex: none !important; }
      .rule { width: auto !important; height: 1px !important; align-self: stretch !important; }
      .bar-row > div:last-child { padding-bottom: 20px !important; }
      #bk-go { display: block !important; width: 100% !important; text-align: center !important; padding: 16px 0 !important; }

      /* two columns get narrow here; the name must be allowed to wrap
         or it pushes SITE/BOOK past the card edge */
      .grid h3 { white-space: normal !important; }

    }

    /* ---- phones and small tablets ------------------------------------- */
    @media (max-width: 760px) {
      /* the page breathes at 20px, not 56px */
      .nav, .hero, .about, .places, .foot { padding-left: 20px !important; padding-right: 20px !important; }
      .bar, .hero-plate { margin-left: 20px !important; margin-right: 20px !important; }

      /* nav: the wordmark can't stay absolutely centred next to four links */
      .nav { flex-direction: column !important; height: auto !important;
             gap: 18px !important; padding-top: 26px !important; padding-bottom: 22px !important; }
      .nav-mark { position: static !important; transform: none !important; }
      .nav-links { gap: 26px !important; }

      .hero { padding-top: 56px !important; padding-bottom: 52px !important; gap: 26px !important; }
      .hero > h1 { font-size: 34px !important; line-height: 1.24 !important; }
      .hero > div[style*="0.26em"] { font-size: 9px !important; letter-spacing: 0.18em !important; }
      .hero > img { width: 42px !important; }

      .hero-plate { aspect-ratio: 7 / 6 !important; }   /* a wide band is too thin on a phone */
      .about { padding-top: 56px !important; }
      .about div[style*="17px"] { font-size: 16px !important; }

      .places { padding-top: 64px !important; padding-bottom: 70px !important; gap: 40px !important; }
      .grid { grid-template-columns: 1fr !important; gap: 44px !important; }

      /* property names can wrap on a phone — better than overflowing */
      .grid h3 { font-size: 23px !important; white-space: normal !important; }
      .acts { gap: 16px !important; }

      .soon { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }

      .foot { padding-top: 56px !important; gap: 44px !important; }
      .foot-top { flex-direction: column !important; gap: 40px !important; }
      .foot-cols { flex-direction: column !important; gap: 32px !important; }
      .foot img { height: 36px !important; }
      .foot > div:last-child { flex-direction: column !important; gap: 10px !important; }

      /* touch targets: the ink stays the same size, the tappable area grows */
      .nav a, .places a, .foot a { position: relative !important; }
      .nav a::after, .places a::after, .foot a::after {
        content: '' !important; position: absolute !important;
        left: -8px !important; right: -8px !important; top: -17px !important; bottom: -17px !important;
      }
      #bk-place, #bk-start, #bk-end, #bk-guests { min-height: 44px !important; }

    }
.ground { background: #E9E2D6 url(img/travertine-light.jpg); background-size: 420px 420px; }