@font-face{font-family:Figtree;src:url(fonts/figtree.woff2) format('woff2-variations');font-weight:400 800;font-display:swap;font-style:normal}

:root{
  --paper:#f7f5f2;
  --ink:#1d2422;
  --quiet:#4c5754;
  --rule:#cfcbc4;
  --band-lo:#d9e5df;
  --band-mid:#7fa79a;
  --band-hi:#24544a;
  --hot:#8a3b1d;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Figtree,system-ui,sans-serif;font-size:17px;line-height:1.62;
}
.skip{position:absolute;left:-9999px;padding:10px 14px}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--ink);color:var(--paper);padding:10px 14px}
:focus-visible{outline:3px solid var(--hot);outline-offset:3px}

.mockup{
  max-width:none;margin:0;padding:9px 20px;background:var(--ink);color:#f0efe9;
  font-size:13.5px;line-height:1.45;text-align:center;
}
.mockup b{font-weight:700}

.top{padding:22px 26px 0;max-width:96rem;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:6px 56px;align-items:end}
.mark{grid-column:1/-1;margin:0 0 22px;font-weight:800;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.mark a{color:inherit;text-decoration:none;display:inline-block;padding-block:7px}
h1{
  grid-row:span 2;align-self:start;
  font-size:clamp(27px,4vw,42px);line-height:1.12;font-weight:800;letter-spacing:-.02em;
  margin:0 0 14px;max-width:20ch;
}
.top p{margin:0 0 10px;max-width:60ch;color:var(--quiet)}

/* the area diagram */
.plan{padding:20px 26px 8px}
.planscroll{overflow-x:auto;padding-bottom:6px}
.plan svg{display:block;width:100%;height:auto;min-width:680px}
.legend{
  display:flex;flex-wrap:wrap;gap:8px 26px;margin:16px 0 0;padding:0;list-style:none;
  font-size:14.5px;color:var(--quiet);
}
.legend li{display:flex;align-items:center;gap:9px}
.legend i{width:22px;height:14px;display:inline-block;border:1px solid var(--ink)}
.legend .lo{background:var(--band-lo)} .legend .mid{background:var(--band-mid)} .legend .hi{background:var(--band-hi)}
.legend .none{background:transparent}
.plan .note{margin:14px 0 0;max-width:64ch;font-size:15px;color:var(--quiet)}

/* asymmetric body: narrow prose against a facts column */
.body{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:34px 52px;
  padding:34px 26px;border-top:1px solid var(--rule);margin-top:26px;align-items:start;
}
h2{font-size:21px;font-weight:800;letter-spacing:-.01em;margin:0 0 8px}
.body p{margin:0 0 12px;max-width:58ch}
.body .quiet{color:var(--quiet)}
.hours{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.hours li{display:flex;gap:16px;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--rule)}
.hours b{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.hours span{color:var(--quiet)}

.no{padding:30px 26px 26px;background:var(--ink);color:#eceae4;border-top:6px solid var(--hot)}
.no h2{color:#fff}
.no ol{margin:14px 0 0;padding-left:1.25em;max-width:66ch}
.no li{margin:0 0 12px}
.no li b{color:#fff}
.no p{margin:16px 0 0;max-width:66ch;color:#c9c5bd;font-size:15.5px}

.close{padding:32px 26px 26px}
.close p{max-width:60ch;margin:0 0 10px}
.close a{color:var(--ink);font-weight:800;text-decoration:underline;text-underline-offset:4px}

/* sticky call bar, in flow */
.dock{
  position:sticky;bottom:0;z-index:20;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;
  padding:12px 26px;background:var(--hot);color:#fff;border-top:2px solid var(--ink);
}
.dock p{margin:0;font-size:15px}
.dock a{
  margin-left:auto;color:#fff;font-weight:800;font-size:20px;letter-spacing:.02em;
  text-decoration:underline;text-underline-offset:4px;padding-block:6px;
}
footer{padding:26px 26px 40px}
footer nav{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:12px}
footer nav a{color:var(--ink);padding-block:6px}
footer p{font-size:13.5px;color:var(--quiet);max-width:74ch;margin:0}

/* interior */
.rooms{padding:8px 26px 30px;max-width:64rem}
.rooms .item{padding:15px 0;border-top:1px solid var(--rule)}
.rooms .item:last-child{border-bottom:1px solid var(--rule)}
.rooms h2{margin:0 0 4px;font-size:17.5px;font-weight:800}
.rooms p{margin:0;max-width:64ch;color:var(--quiet)}
.rooms .tag{display:inline-block;margin-left:10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--hot);font-weight:800}

@media (max-width:900px){
  .top{grid-template-columns:1fr;gap:0}
  .top h1{grid-row:auto}
}
@media (max-width:820px){
  .body{grid-template-columns:1fr;gap:26px}
}
@media (max-width:640px){
  .top,.plan,.body,.no,.close,footer,.rooms{padding-left:17px;padding-right:17px}
  .dock{padding:11px 17px}
  .dock a{margin-left:0}
}


/* =======================================================================
   MOTION, added 2026-08-02 during the fleet repair.
   The fleet measured 0 to 5 transitioned elements against a floor of 20 in
   references/motion.md, which is the largest part of what reads as "there is
   no CSS on this page". Tokens below are this site's own.
   ======================================================================= */

a, button, summary,
li, dt, dd, tr, th, td,
figure, .item, .note {
  transition: color .16s ease, background-color .18s ease,
              border-color .18s ease, opacity .18s ease,
              transform .22s cubic-bezier(.2,.7,.3,1);
}

a:hover { color: var(--hot); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--hot); outline-offset: 3px;
}

/* rows respond, because a price row you are reading should acknowledge you */
li:hover, dt:hover, dd:hover, tbody tr:hover { background: rgba(29,36,34,.055); }
.item:hover, .note:hover { border-color: var(--hot); }

figure img { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
figure:hover img { transform: scale(1.015); }

/* reveals. The hidden state exists ONLY under .motion, which an inline head
   script adds when reduced motion is not requested, so no JS means the plain
   document rather than an empty page. */
.motion section, .motion figure, .motion article {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
.motion section.seen, .motion figure.seen, .motion article.seen {
  opacity: 1; transform: none;
}

/* PEAK: the rule under the opening block draws itself, left to right, once. */
.motion h1 { position: relative; }
.motion h1::after {
  content: ""; position: absolute; left: 0; bottom: -.28em; height: 3px; width: 100%;
  background: var(--hot); transform-origin: left center;
  animation: peak-rule 1.05s cubic-bezier(.16,.8,.3,1) .2s both;
}
@keyframes peak-rule { from { transform: scaleX(0) } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .001ms !important;
  }
  .motion section, .motion figure, .motion article { opacity: 1; transform: none; }
}


/* --- imagery placed during the fleet repair -----------------------------
   The band breaks its container on purpose: every wrapper on these sites is
   narrower than 90% of the viewport, so an image inside one never counts as
   carrying a section and the page reads as having no photography at all. */
.fleet-band { margin: 2.2rem 0; width: 100vw; margin-left: calc(50% - 50vw); }
.fleet-band img { width: 100%; height: clamp(280px, 46vh, 460px); object-fit: cover; display: block; }
.fleet-band figcaption { max-width: 62rem; margin: 0 auto; padding: .55rem 1.4rem 0;
  font-size: .84rem; opacity: .78; }
.fleet-figs { display: grid; gap: 1.1rem; margin: 2.2rem 0; }
@media (min-width: 760px) { .fleet-figs.two { grid-template-columns: 1fr 1fr; } }
.fleet-figs figure { margin: 0; }
.fleet-figs img { width: 100%; height: auto; display: block; }
.fleet-figs figcaption { font-size: .82rem; opacity: .78; padding-top: .4rem; }

/* This layout is not centred in the viewport, so the 100vw breakout above
   started at the sidebar and ran off the right edge. The band fills its own
   container instead. It will not register as full-bleed, and that is correct:
   a band that overflows the page is not full-bleed, it is broken. */
.fleet-band { width: auto; margin-left: 0; margin-right: 0; }