/* ---------------------------------------------------------------------
   Generated from this operator's pilot stylesheet, which had already been
   built, rendered and verified. Two things changed and nothing else:

     1. Every token resolves to Stayfarer's palette and both typefaces are
        swapped to Libre Caslon Text and IBM Plex Sans. A stay page has to be
        the SAME DOCUMENT as a guide page, because Google isolates a section
        "starkly different from the main content of the site" and measures it
        on its own, silently.

     2. Every selector is namespaced under .stay-i-city. Each pilot sheet defines
        .btn, .hero, .nav, .brand and .foot, styles.css defines them too, and
        two pilots define them differently from each other.

   Regenerate rather than hand-edit: system/tools/port-stay-site.py
   --------------------------------------------------------------------- */


.stay-i-city *, .stay-i-city *::before, .stay-i-city *::after{ box-sizing: border-box; margin: 0; padding: 0; }
.stay-i-city{
    display: block;
    color: var(--ink);
    background: var(--chart);
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    font-size: var(--t-ui);
    --sand: var(--chart-2);
    --sand-2: var(--chart-3);
    --sand-3: var(--chart-3);
    --bark: var(--ink-deep);
    --bark-deep: var(--ink-deep);
    --bark-soft: rgba(20,43,62,0.8);
    --bark-mute: rgba(20,43,62,0.68);
    --bark-faint: rgba(20,43,62,0.38);
    --line: rgba(20,43,62,0.15);
    --line-soft: rgba(20,43,62,0.08);
    --clay: var(--sea);
    --clay-deep: var(--sea);
    --moss: var(--ink);
    --nav-h: 68px;
    --maxw: min(1120px, 92vw);
    --measure: 64ch;
}
@media (prefers-reduced-motion: reduce) {
.stay-i-city *, .stay-i-city *::before, .stay-i-city *::after{ transition: none !important; animation: none !important; }
}
.stay-i-city .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.stay-i-city a{ color: var(--clay-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.stay-i-city a:hover{ color: var(--bark); }
.stay-i-city :focus-visible{ outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 2px; }
/* ── Type roles ─────────────────────────────────────────────────────── */
.stay-i-city h1, .stay-i-city h2, .stay-i-city h3, .stay-i-city .display{
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.012em;
    line-height: 1.14;
}
.stay-i-city h1{ font-size: clamp(2.3rem, 6vw, 3.9rem); }
.stay-i-city h2{ font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.18; }
.stay-i-city h3{ font-size: clamp(1.22rem, 2.2vw, 1.5rem); line-height: 1.26; }
.stay-i-city .eyebrow{
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clay-deep);
}
.stay-i-city .lede{
    font-size: clamp(1.08rem, 1.9vw, 1.28rem);
    line-height: 1.6;
    color: var(--bark-soft);
    max-width: 58ch;
}
.stay-i-city p{ max-width: var(--measure); }
.stay-i-city p + p{ margin-top: 1.05em; }
/* ── Shell ──────────────────────────────────────────────────────────── */
.stay-i-city .shell{ width: var(--maxw); margin-inline: auto; }
.stay-i-city section{ padding: clamp(44px, 5.5vw, 78px) 0; }
.stay-i-city .rule{ border: 0; border-top: 1px solid var(--line); }
/* ── Header ─────────────────────────────────────────────────────────── */
.stay-i-city .nav{
    position: sticky; top: 0; z-index: 50;
    background: rgba(20,43,62,0.94);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--line-soft);
}
.stay-i-city .nav-inner{
    width: var(--maxw); margin-inline: auto; min-height: var(--nav-h);
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.stay-i-city .brand{
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: 1.16rem; font-weight: 600;
    letter-spacing: -0.01em; color: var(--bark); text-decoration: none;
    display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap;
}
.stay-i-city .brand span{ font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--bark-mute); }
.stay-i-city .nav-links{ display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); }
.stay-i-city .nav-links a{
    font-size: 15px; font-weight: 500; color: var(--bark-soft);
    text-decoration: none; white-space: nowrap;
}
.stay-i-city .nav-links a:hover{ color: var(--clay-deep); }
.stay-i-city .nav-links a[aria-current="page"]{ color: var(--bark); box-shadow: inset 0 -2px 0 var(--clay); }
.stay-i-city .nav-cta{
    background: var(--clay-deep); color: var(--sand) !important;
    padding: 9px 16px; border-radius: 3px; font-weight: 600;
}
.stay-i-city .nav-cta:hover{ background: var(--bark); color: var(--sand) !important; }
@media (max-width: 760px) {
.stay-i-city .nav-inner{ flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 0 10px; }
.stay-i-city .nav-links{ width: 100%; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.stay-i-city .nav{ position: static; }
}
/* ── Buttons ────────────────────────────────────────────────────────── */
.stay-i-city .btn{
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--clay-deep); color: var(--sand);
    padding: 14px 24px; border-radius: 3px;
    font-weight: 600; font-size: 16px; text-decoration: none;
    border: 1px solid var(--clay-deep);
    transition: background .18s ease, transform .18s ease;
}
.stay-i-city .btn:hover{ background: var(--bark); border-color: var(--bark); color: var(--sand); transform: translateY(-1px); }
.stay-i-city .btn.ghost{ background: transparent; color: var(--bark); border-color: var(--line); }
.stay-i-city .btn.ghost:hover{ background: var(--sand-2); color: var(--bark); border-color: var(--bark-faint); }
.stay-i-city .btn svg{ flex: none; }
.stay-i-city .btn-row{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* ── Hero ───────────────────────────────────────────────────────────── */
.stay-i-city .hero{ padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(44px, 6vw, 76px); }
.stay-i-city .hero h1{ margin-top: 14px; max-width: 15ch; }
.stay-i-city .hero .lede{ margin-top: 22px; }
.stay-i-city .hero-facts{
    display: flex; flex-wrap: wrap; gap: 10px 26px;
    margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line);
    font-size: 14.5px; color: var(--bark-mute);
}
.stay-i-city .hero-facts b{ font-weight: 600; color: var(--bark); }
/* ── The answer block — the site's signature element ────────────────── */
.stay-i-city .answers{ display: grid; gap: 0; border-top: 1px solid var(--line); }
.stay-i-city .answer{
    display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 56px);
    padding: clamp(26px, 3.4vw, 40px) 0;
    border-bottom: 1px solid var(--line);
}
.stay-i-city .answer > dt{
    font-family: 'Libre Caslon Text', Georgia, serif;
    font-size: clamp(1.06rem, 1.6vw, 1.22rem); font-weight: 500;
    line-height: 1.3; color: var(--bark);
}
.stay-i-city .answer > dd{ margin: 0; }
.stay-i-city .answer .short{
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.5; color: var(--bark); font-weight: 500;
    max-width: 52ch;
}
.stay-i-city .answer .detail{ margin-top: 10px; color: var(--bark-mute); font-size: 16px; }
@media (max-width: 720px) {
.stay-i-city .answer{ grid-template-columns: 1fr; gap: 10px; }
}
/* ── Unit cards ─────────────────────────────────────────────────────── */
.stay-i-city .units{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(20px, 3vw, 32px); margin-top: 38px; }
.stay-i-city .unit{
    display: flex; flex-direction: column;
    background: var(--sand-2);
    border: 1px solid var(--line-soft);
    border-radius: 4px; overflow: hidden;
}
.stay-i-city .unit > img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--line-soft); }
.stay-i-city .unit-body{ padding: clamp(20px, 2.6vw, 30px); display: flex; flex-direction: column; flex: 1; }
.stay-i-city .unit h3{ margin-bottom: 8px; }
.stay-i-city .unit .sub{ font-size: 14px; color: var(--bark-mute); margin-bottom: 16px; }
.stay-i-city .unit ul{ list-style: none; margin: 0 0 22px; padding: 0; font-size: 15.5px; }
.stay-i-city .unit li{ padding: 7px 0 7px 22px; position: relative; border-bottom: 1px solid var(--line-soft); color: var(--bark-soft); }
.stay-i-city .unit li:last-child{ border-bottom: 0; }
.stay-i-city .unit li::before{
    content: ""; position: absolute; left: 4px; top: 16px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--clay); opacity: .55;
}
.stay-i-city .unit .unit-link{ margin-top: auto; font-weight: 600; text-decoration: none; font-size: 15.5px; }
.stay-i-city .unit .unit-link:hover{ text-decoration: underline; }
/* Photo plate — an editorial cover, not an empty frame. Rauf's photos
   drop straight in here (see FILL-INS.md); until they do, the plate is
   a deliberate design element rather than a hole in the page. */
.stay-i-city .plate{
    aspect-ratio: 16 / 10;
    background:
        repeating-linear-gradient(135deg, rgba(20,43,62,0.028) 0 1px, transparent 1px 9px),
        radial-gradient(130% 130% at 18% 12%, rgba(20,43,62,0.2), transparent 62%),
        linear-gradient(160deg, var(--ink-mute), var(--sand-3) 55%, var(--chart-3));
    border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: flex-end; padding: 22px;
    position: relative;
}
.stay-i-city .plate::after{
    content: ""; position: absolute; inset: 14px;
    border: 1px solid rgba(20,43,62,0.1); border-radius: 2px; pointer-events: none;
}
.stay-i-city .plate span{
    font-family: 'Libre Caslon Text', Georgia, serif; font-size: 1.5rem; color: var(--bark-soft); line-height: 1.15;
    position: relative; z-index: 1; max-width: 16ch;
}
.stay-i-city .plate.tall{ aspect-ratio: 4 / 5; }
/* ── Photography ────────────────────────────────────────────────────── */
.stay-i-city img{ max-width: 100%; height: auto; display: block; }
.stay-i-city .shot{
    border-radius: 4px; overflow: hidden;
    background: var(--sand-3);
    border: 1px solid var(--line-soft);
}
.stay-i-city .shot img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.stay-i-city .shot.wide img{ aspect-ratio: 16 / 9; }
.stay-i-city .shot.tall img{ aspect-ratio: 4 / 5; }
.stay-i-city figure.shot figcaption{
    font-size: 13.5px; color: var(--bark-mute);
    padding: 9px 12px 11px; background: var(--sand-2);
}
.stay-i-city .gallery{
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 34px;
}
.stay-i-city .gallery .shot.span-2{ grid-column: span 2; }
@media (max-width: 620px) {
.stay-i-city .gallery .shot.span-2{ grid-column: span 1; } }
.stay-i-city .lead-shot{ margin-top: 30px; }
.stay-i-city .lead-shot img{ aspect-ratio: 3 / 2; }
@media (max-width: 620px) {
.stay-i-city .lead-shot img{ aspect-ratio: 4 / 3; } }
/* Fill marker — a value only Rauf can give us. Deliberately visible in
   the demo so he can see exactly what's his to decide, and deliberately
   ugly enough that it can never ship live by accident.
   Find them all:  grep -rn "class=\"fill\"" . */
.stay-i-city .fill{
    display: inline-block;
    font-size: 13.5px; font-weight: 600; line-height: 1.4;
    color: var(--clay-deep);
    border: 1px dashed var(--clay);
    border-radius: 3px; padding: 1px 8px;
    background: rgba(20,43,62,0.06);
}
/* ── Callout / host note ────────────────────────────────────────────── */
.stay-i-city .note{
    border-left: 3px solid var(--clay);
    padding: 6px 0 6px 22px;
    margin: 30px 0;
    max-width: 62ch;
    color: var(--bark-soft);
}
.stay-i-city .note p{ max-width: none; }
.stay-i-city .host-note{ font-size: 1.06rem; }
.stay-i-city .host-note .sig{
    display: block; margin-top: 14px; font-size: 14.5px; color: var(--bark-mute);
    font-family: 'Libre Caslon Text', Georgia, serif;
}
/* ── Book band ──────────────────────────────────────────────────────── */
.stay-i-city .band{
    background: var(--bark); color: var(--sand);
    padding: clamp(48px, 6.5vw, 84px) 0;
}
.stay-i-city .band h2{ color: var(--sand); max-width: 20ch; }
.stay-i-city .band p{ color: inherit; opacity: .82; margin-top: 16px; }
.stay-i-city .band .btn{ background: var(--clay); border-color: var(--clay); color: var(--chart); }
.stay-i-city .band .btn:hover{ background: var(--sand); border-color: var(--sand); color: var(--bark); }
.stay-i-city .band .btn.ghost{ background: transparent; color: var(--sand); border-color: rgba(20,43,62,0.32); }
.stay-i-city .band .btn.ghost:hover{ background: rgba(20,43,62,0.1); color: var(--sand); }
.stay-i-city .band a{ color: var(--sand); }
/* ── Steps ──────────────────────────────────────────────────────────── */
.stay-i-city .steps{ counter-reset: step; margin-top: 34px; display: grid; gap: 2px; }
.stay-i-city .steps li{ list-style: none; display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.stay-i-city .steps li::before{
    counter-increment: step; content: counter(step);
    font-family: 'Libre Caslon Text', Georgia, serif; font-size: 1.5rem; color: var(--clay); line-height: 1;
}
.stay-i-city .steps strong{ display: block; font-weight: 600; margin-bottom: 3px; }
.stay-i-city .steps span{ color: var(--bark-mute); font-size: 16px; }
/* ── Table (getting here) ───────────────────────────────────────────── */
.stay-i-city .tbl-wrap{ overflow-x: auto; margin-top: 28px; }
/* L19: a table that scrolls must SAY it scrolls — a silent overflow reads as a
   broken layout on a phone. Hint is shown only where the table actually clips. */
.stay-i-city .tbl-hint{ display: none; font-size: 13.5px; color: var(--bark-mute); margin-top: 10px; letter-spacing: 0.02em; }
@media (max-width: 560px) {
.stay-i-city .tbl-hint{ display: block; } }
.stay-i-city table{ border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15.5px; }
.stay-i-city th, .stay-i-city td{ text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.stay-i-city th{ font-weight: 700; font-size: 12.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bark-mute); }
.stay-i-city td:first-child{ font-weight: 600; }
/* A four-column table needs more room before it stops being readable, so it
   gets a wider floor — and therefore starts clipping at a wider viewport than
   the 560px the plain hint assumes. Same L19 rule, moved breakpoint. */
.stay-i-city .tbl-wrap.wide table{ min-width: 640px; }
@media (max-width: 700px) {
.stay-i-city .tbl-wrap.wide + .tbl-hint{ display: block; } }
/* ── Spec panel — the block built to be lifted whole ────────────────────
   An answer engine quotes a contiguous run of facts far more readily than
   it assembles one from prose scattered down a page. This is that run:
   every qualifying fact about a unit, in one container, as real text. */
.stay-i-city .spec{
    background: var(--sand-2);
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 30px) clamp(8px, 1vw, 14px);
    margin-top: 30px;
}
.stay-i-city .spec .tbl-wrap{ margin-top: 0; }
.stay-i-city .spec table{ min-width: 340px; }
.stay-i-city .spec th, .stay-i-city .spec td{ padding: 10px 16px 10px 0; }
.stay-i-city .spec tbody tr:last-child th, .stay-i-city .spec tbody tr:last-child td{ border-bottom: 0; }
.stay-i-city .spec th[scope="row"]{
    font-size: 15.5px; font-weight: 600; text-transform: none;
    letter-spacing: 0; color: var(--bark-mute); width: 40%;
}
.stay-i-city .spec td{ color: var(--bark); }
/* ── Dated source note ──────────────────────────────────────────────────
   Opening hours and prices go stale, and a stale figure on a host's own
   page is worse than no figure. Every perishable table says where it came
   from and the day it was read, so a reader can tell how old it is. */
.stay-i-city .src{ font-size: 13.5px; color: var(--bark-mute); margin-top: 14px; max-width: var(--measure); }
.stay-i-city .src a{ color: var(--bark-mute); }
.stay-i-city .src a:hover{ color: var(--clay-deep); }
/* ── Breadcrumb ─────────────────────────────────────────────────────── */
.stay-i-city .crumb{ font-size: 14px; color: var(--bark-mute); padding-top: 26px; }
.stay-i-city .crumb a{ color: var(--bark-mute); }
.stay-i-city .crumb a:hover{ color: var(--clay-deep); }
/* ── Footer ─────────────────────────────────────────────────────────── */
.stay-i-city .foot{ border-top: 1px solid var(--line); padding: 46px 0 60px; font-size: 15px; color: var(--bark-mute); }
.stay-i-city .foot-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.stay-i-city .foot h3{ font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bark); margin-bottom: 12px; }
.stay-i-city .foot ul{ list-style: none; }
.stay-i-city .foot li{ padding: 3px 0; }
.stay-i-city .foot a{ color: var(--bark-mute); text-decoration: none; }
.stay-i-city .foot a:hover{ color: var(--clay-deep); text-decoration: underline; }
.stay-i-city .foot-base{ margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
/* ── Prose (guide/about pages) ──────────────────────────────────────── */
.stay-i-city .prose h2{ margin-top: 52px; }
.stay-i-city .prose h3{ margin-top: 36px; }
.stay-i-city .prose > * + *{ margin-top: 1.05em; }
.stay-i-city .prose h2 + p, .stay-i-city .prose h3 + p{ margin-top: 0.7em; }
.stay-i-city .prose ul, .stay-i-city .prose ol{ margin-left: 1.15em; max-width: var(--measure); }
.stay-i-city .prose li{ padding: 4px 0; }

/* ── Print ──────────────────────────────────────────────────────────── */
@media print {
.stay-i-city .nav, .stay-i-city .band .btn, .stay-i-city .btn-row{ display: none; }
.stay-i-city .band{ background: var(--chart); color: var(--ink-deep); }
}
/* ── Spacing and scale utilities ────────────────────────────────────────
   Added 2026-09-02. These nine rules were inline style="..." attributes on
   32 elements across six pages, and this site's CSP is `style-src 'self'`
   with no 'unsafe-inline' and no hash, so EVERY ONE OF THEM WAS BLOCKED on
   the live site. Nine violations on the Hyde Tower page alone. The pages
   have been rendering with default spacing since launch, and they looked
   correct in every local check because a local file has no CSP.

   Found by reading the browser console rather than the markup. Same defect
   shipped on stayfarer.com/proof and was fixed the same day.
   ─────────────────────────────────────────────────────────────────────── */
.stay-i-city .u-mt16{ margin-top: 16px; }
.stay-i-city .u-mt24{ margin-top: 24px; }
.stay-i-city .u-mt30{ margin-top: 30px; }
.stay-i-city .u-mt38{ margin-top: 38px; }
.stay-i-city .u-mb8{ margin-bottom: 8px; }
.stay-i-city .u-pt0{ padding-top: 0; }
.stay-i-city .u-fs15{ font-size: 15px; }
.stay-i-city .u-aside{ font-size: 15px; color: var(--bark-mute); margin-top: 14px; }
.stay-i-city .u-aside-wide{ font-size: 15px; color: var(--bark-mute); max-width: 62ch; }

/* The operator's own footer is a property index now, not a site footer,
   so it loses the rule that used to close the page. Stayfarer's does that. */
.stay-i-city .foot, .stay-i-city footer.site { border-bottom: 0; padding-bottom: 26px; }