/* ════════════════════════════════════════════════════════════════════
 *  YOURRETREAT @ i-CITY — "ANSWER FIRST"
 *
 *  The design idea, in one line: this site's whole character is that it
 *  ANSWERS things. Where exactly is it. Is the wifi actually fast. Where
 *  do I park. How do I book without a platform. Each answer is set as a
 *  question in the host's voice, then a plain sentence in large type,
 *  then the detail underneath. That structure is the aesthetic AND the
 *  findability strategy at the same time — an answer engine can lift a
 *  whole block and quote it, and a traveller reading it feels talked to
 *  rather than sold to.
 *
 *  Deliberately NOT Stayfarer's system (naval ink / chart paper / Caslon).
 *  This is Rauf's property, not our practice: warm sand, clay, a soft
 *  serif with real personality. Nothing here should read as a template
 *  that a studio reuses.
 *
 *  Palette : sand (ground) · bark (ink) · clay (action) · moss (quiet)
 *  Type    : Fraunces variable (display, warm optical serif)
 *            Karla variable (text, humanist grotesque)
 *  Fonts self-hosted, SIL OFL. Zero third-party requests, zero JavaScript.
 * ════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Fraunces';
    font-style: normal; font-weight: 300 700; font-display: swap;
    src: url('fonts/fraunces-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Karla';
    font-style: normal; font-weight: 300 700; font-display: swap;
    src: url('fonts/karla-var.woff2') format('woff2');
}
@font-face {
    font-family: 'Karla';
    font-style: italic; font-weight: 300 700; font-display: swap;
    src: url('fonts/karla-var-italic.woff2') format('woff2');
}

/* url() in CSS resolves against the STYLESHEET, not the page — so
   /stays/*.html loading ../styles.css still finds fonts/ correctly.
   Comment kept so nobody "fixes" this into ../fonts/. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --sand:       #FAF6EF;
    --sand-2:     #F2EBDF;
    --sand-3:     #E8DFCF;
    --bark:       #241F1B;
    --bark-deep:  #15110E;
    --bark-soft:  rgba(36,31,27,0.80);
    --bark-mute:  rgba(36,31,27,0.68);   /* AA on all three grounds: 5.45 sand / 5.23 sand-2 / 4.98 sand-3 */
    --bark-faint: rgba(36,31,27,0.38);   /* chrome only, never body text */
    --line:       rgba(36,31,27,0.15);
    --line-soft:  rgba(36,31,27,0.08);
    --clay:       #A8482F;               /* the one action colour */
    --clay-deep:  #8A3A24;
    --moss:       #46574A;
    --nav-h:      68px;
    --maxw:       min(1120px, 92vw);
    --measure:    64ch;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
    background: var(--sand);
    color: var(--bark);
    font-family: 'Karla', system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.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; }

a { color: var(--clay-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bark); }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 2px; }

/* ── Type roles ─────────────────────────────────────────────────────── */
h1, h2, h3, .display {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -0.012em;
    line-height: 1.14;
}
h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); font-variation-settings: 'opsz' 110; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-variation-settings: 'opsz' 64; line-height: 1.18; }
h3 { font-size: clamp(1.22rem, 2.2vw, 1.5rem); font-variation-settings: 'opsz' 28; line-height: 1.26; }

.eyebrow {
    font-family: 'Karla', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clay-deep);
}
.lede {
    font-size: clamp(1.08rem, 1.9vw, 1.28rem);
    line-height: 1.6;
    color: var(--bark-soft);
    max-width: 58ch;
}
p { max-width: var(--measure); }
p + p { margin-top: 1.05em; }

/* ── Shell ──────────────────────────────────────────────────────────── */
.shell { width: var(--maxw); margin-inline: auto; }
section { padding: clamp(44px, 5.5vw, 78px) 0; }
.rule { border: 0; border-top: 1px solid var(--line); }

/* ── Header ─────────────────────────────────────────────────────────── */
.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(250,246,239,0.94);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
    width: var(--maxw); margin-inline: auto; min-height: var(--nav-h);
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.16rem; font-weight: 600; font-variation-settings: 'opsz' 24;
    letter-spacing: -0.01em; color: var(--bark); text-decoration: none;
    display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap;
}
.brand span { font-family: 'Karla', sans-serif; font-size: 12px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--bark-mute); }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); }
.nav-links a {
    font-size: 15px; font-weight: 500; color: var(--bark-soft);
    text-decoration: none; white-space: nowrap;
}
.nav-links a:hover { color: var(--clay-deep); }
.nav-links a[aria-current="page"] { color: var(--bark); box-shadow: inset 0 -2px 0 var(--clay); }
.nav-cta {
    background: var(--clay-deep); color: var(--sand) !important;
    padding: 9px 16px; border-radius: 3px; font-weight: 600;
}
.nav-cta:hover { background: var(--bark); color: var(--sand) !important; }
@media (max-width: 760px) {
    .nav-inner { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 0 10px; }
    .nav-links { width: 100%; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
    .nav { position: static; }
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.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;
}
.btn:hover { background: var(--bark); border-color: var(--bark); color: var(--sand); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--bark); border-color: var(--line); }
.btn.ghost:hover { background: var(--sand-2); color: var(--bark); border-color: var(--bark-faint); }
.btn svg { flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(44px, 6vw, 76px); }
.hero h1 { margin-top: 14px; max-width: 15ch; }
.hero .lede { margin-top: 22px; }
.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);
}
.hero-facts b { font-weight: 600; color: var(--bark); }

/* ── The answer block — the site's signature element ────────────────── */
.answers { display: grid; gap: 0; border-top: 1px solid var(--line); }
.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);
}
.answer > dt {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.06rem, 1.6vw, 1.22rem);
    font-variation-settings: 'opsz' 24; font-weight: 500;
    line-height: 1.3; color: var(--bark);
}
.answer > dd { margin: 0; }
.answer .short {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.5; color: var(--bark); font-weight: 500;
    max-width: 52ch;
}
.answer .detail { margin-top: 10px; color: var(--bark-mute); font-size: 16px; }
@media (max-width: 720px) {
    .answer { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Unit cards ─────────────────────────────────────────────────────── */
.units { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(20px, 3vw, 32px); margin-top: 38px; }
.unit {
    display: flex; flex-direction: column;
    background: var(--sand-2);
    border: 1px solid var(--line-soft);
    border-radius: 4px; overflow: hidden;
}
.unit > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 1px solid var(--line-soft); }
.unit-body { padding: clamp(20px, 2.6vw, 30px); display: flex; flex-direction: column; flex: 1; }
.unit h3 { margin-bottom: 8px; }
.unit .sub { font-size: 14px; color: var(--bark-mute); margin-bottom: 16px; }
.unit ul { list-style: none; margin: 0 0 22px; padding: 0; font-size: 15.5px; }
.unit li { padding: 7px 0 7px 22px; position: relative; border-bottom: 1px solid var(--line-soft); color: var(--bark-soft); }
.unit li:last-child { border-bottom: 0; }
.unit li::before {
    content: ""; position: absolute; left: 4px; top: 16px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--clay); opacity: .55;
}
.unit .unit-link { margin-top: auto; font-weight: 600; text-decoration: none; font-size: 15.5px; }
.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. */
.plate {
    aspect-ratio: 16 / 10;
    background:
        repeating-linear-gradient(135deg, rgba(36,31,27,0.028) 0 1px, transparent 1px 9px),
        radial-gradient(130% 130% at 18% 12%, rgba(168,72,47,0.20), transparent 62%),
        linear-gradient(160deg, #E3D8C6, var(--sand-3) 55%, #EFE7D9);
    border-bottom: 1px solid var(--line-soft);
    display: flex; align-items: flex-end; padding: 22px;
    position: relative;
}
.plate::after {
    content: ""; position: absolute; inset: 14px;
    border: 1px solid rgba(36,31,27,0.10); border-radius: 2px; pointer-events: none;
}
.plate span {
    font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem;
    font-variation-settings: 'opsz' 40; color: var(--bark-soft); line-height: 1.15;
    position: relative; z-index: 1; max-width: 16ch;
}
.plate.tall { aspect-ratio: 4 / 5; }

/* ── Photography ────────────────────────────────────────────────────── */
img { max-width: 100%; height: auto; display: block; }

.shot {
    border-radius: 4px; overflow: hidden;
    background: var(--sand-3);
    border: 1px solid var(--line-soft);
}
.shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shot.wide img { aspect-ratio: 16 / 9; }
.shot.tall img { aspect-ratio: 4 / 5; }

figure.shot figcaption {
    font-size: 13.5px; color: var(--bark-mute);
    padding: 9px 12px 11px; background: var(--sand-2);
}

.gallery {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 34px;
}
.gallery .shot.span-2 { grid-column: span 2; }
@media (max-width: 620px) { .gallery .shot.span-2 { grid-column: span 1; } }

.lead-shot { margin-top: 30px; }
.lead-shot img { aspect-ratio: 3 / 2; }
@media (max-width: 620px) { .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\"" . */
.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(168,72,47,0.06);
}

/* ── Callout / host note ────────────────────────────────────────────── */
.note {
    border-left: 3px solid var(--clay);
    padding: 6px 0 6px 22px;
    margin: 30px 0;
    max-width: 62ch;
    color: var(--bark-soft);
}
.note p { max-width: none; }
.host-note { font-size: 1.06rem; }
.host-note .sig {
    display: block; margin-top: 14px; font-size: 14.5px; color: var(--bark-mute);
    font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 20;
}

/* ── Book band ──────────────────────────────────────────────────────── */
.band {
    background: var(--bark); color: var(--sand);
    padding: clamp(48px, 6.5vw, 84px) 0;
}
.band h2 { color: var(--sand); max-width: 20ch; }
.band p { color: rgba(250,246,239,0.76); margin-top: 16px; }
.band .btn { background: var(--clay); border-color: var(--clay); color: #fff; }
.band .btn:hover { background: var(--sand); border-color: var(--sand); color: var(--bark); }
.band .btn.ghost { background: transparent; color: var(--sand); border-color: rgba(250,246,239,0.32); }
.band .btn.ghost:hover { background: rgba(250,246,239,0.10); color: var(--sand); }
.band a { color: var(--sand); }

/* ── Steps ──────────────────────────────────────────────────────────── */
.steps { counter-reset: step; margin-top: 34px; display: grid; gap: 2px; }
.steps li { list-style: none; display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.steps li::before {
    counter-increment: step; content: counter(step);
    font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem;
    font-variation-settings: 'opsz' 40; color: var(--clay); line-height: 1;
}
.steps strong { display: block; font-weight: 600; margin-bottom: 3px; }
.steps span { color: var(--bark-mute); font-size: 16px; }

/* ── Table (getting here) ───────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; margin-top: 28px; }
table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15.5px; }
th, td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 700; font-size: 12.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bark-mute); }
td:first-child { font-weight: 600; }

/* ── Breadcrumb ─────────────────────────────────────────────────────── */
.crumb { font-size: 14px; color: var(--bark-mute); padding-top: 26px; }
.crumb a { color: var(--bark-mute); }
.crumb a:hover { color: var(--clay-deep); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding: 46px 0 60px; font-size: 15px; color: var(--bark-mute); }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.foot h3 { font-family: 'Karla', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bark); margin-bottom: 12px; }
.foot ul { list-style: none; }
.foot li { padding: 3px 0; }
.foot a { color: var(--bark-mute); text-decoration: none; }
.foot a:hover { color: var(--clay-deep); text-decoration: underline; }
.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) ──────────────────────────────────────── */
.prose h2 { margin-top: 52px; }
.prose h3 { margin-top: 36px; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 + p, .prose h3 + p { margin-top: 0.7em; }
.prose ul, .prose ol { margin-left: 1.15em; max-width: var(--measure); }
.prose li { padding: 4px 0; }

/* ── Print ──────────────────────────────────────────────────────────── */
@media print {
    .nav, .band .btn, .btn-row { display: none; }
    body { background: #fff; font-size: 11pt; }
    .band { background: #fff; color: #000; }
}