/* =============================================================
   Rocklands — shared styles for the SEO "pool" pages (pages/*.html).
   Uses the tokens in palettes.css. One source of truth so every pool
   page stays identical in skin.

   THE "CHALK ON ROCK" SKIN (mockup A): a fixed photograph of red
   Cederberg rock behind everything, with DARK glass panels floating on
   it — a thin warm chalk veil over a backdrop whose saturation is pushed
   UP, so the sandstone glows through. Type on the panels is chalk-white.
   The class names are unchanged from earlier skins (.frost included), so
   the page markup never had to be rewritten — only the skin swapped.

   MOBILE BUDGET (see the phone media query at the bottom):
   backdrop-filter is expensive, and worst over a fixed background
   because every scroll frame re-blurs. On phones only the top bar and
   the bottom tab bar keep a live blur; the content slab and the cards
   fall back to --glass-solid, which over a dark photograph is nearly
   indistinguishable. Measured: 2 live blurred surfaces on phones.
   ============================================================= */
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--font-body);font-weight:400;color:var(--chalk);
  background:var(--rock-900);overflow-x:hidden;line-height:1.65;}
img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.08;text-wrap:balance;}
.wrap{max-width:900px;margin:0 auto;padding:0 var(--gutter);}
.wide{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}

/* ---------- the rock: three fixed layers behind everything ---------- */
.rock-bg{position:fixed;inset:0;z-index:-3;overflow:hidden;background:var(--rock-900);}
.rock-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 45%;
  transform:scale(1.12) translateZ(0);
  filter:saturate(148%) contrast(114%) brightness(.78) hue-rotate(-4deg);}
.rock-bg::after{content:"";position:absolute;inset:0;mix-blend-mode:multiply;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(196,83,31,.30), rgba(90,30,16,.60) 52%, rgba(30,14,8,.94) 88%),
    linear-gradient(180deg, rgba(46,25,15,.30), rgba(24,12,7,.92));}
.rock-bg .lift{position:absolute;inset:0;mix-blend-mode:soft-light;
  background:
    radial-gradient(70% 55% at 22% 16%, rgba(255,196,128,.70), transparent 60%),
    radial-gradient(60% 50% at 84% 78%, rgba(156,59,27,.55), transparent 62%);}
/* weathering: turbulence reads as stone, mechanical stripes read as corduroy */
.rock-mottle{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.30;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.022' numOctaves='5' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='1400' height='900' filter='url(%23s)'/%3E%3C/svg%3E");
  background-size:cover;}
/* chalk dust in the air */
.rock-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- the chalk glass primitive ---------- */
.frost{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
  border-radius:var(--radius);
  color:var(--on-glass);
  position:relative;overflow:hidden;
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 rgba(46,25,15,.35),
    0 2px 4px -1px rgba(20,8,4,.18),
    0 26px 60px -26px rgba(16,6,3,.85);
}
/* chalk tooth: powder on the surface of the glass */
.frost::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23c)' opacity='.22'/%3E%3C/svg%3E");}
/* specular sweep */
.frost::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%);}
.frost > *{position:relative;z-index:1;}

/* ---------- top bar: a floating pill of chalk ---------- */
nav.top{position:fixed;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:50;
  width:min(var(--maxw),calc(100% - 28px));
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 10px 9px 20px;border-radius:100px;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 40px -22px rgba(16,6,3,.8);}
nav.top .brand{font-family:var(--font-logo);font-weight:800;font-size:17px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--on-glass);display:flex;align-items:baseline;gap:0;
  padding:11px 4px;margin:-11px -4px;}
nav.top .brand .dot{color:var(--rock-300);}
nav.top .links{display:flex;gap:2px;font-size:13.5px;font-weight:500;}
nav.top .links a{color:var(--on-glass-2);padding:11px 14px;border-radius:100px;opacity:1;transition:background .16s,color .16s;}
nav.top .links a:hover{color:var(--on-glass);background:rgba(255,255,255,.09);}
.nav-mark{width:120px;height:auto;display:block;}

/* ---------- bottom tab bar: phones only, where the thumb is ---------- */
nav.tabs{display:none;}

/* ---------- breadcrumb ---------- */
.crumbs{font-size:12px;font-weight:600;letter-spacing:.04em;padding:calc(94px + env(safe-area-inset-top)) 0 0;
  text-transform:uppercase;}
.crumbs a{color:var(--chalk-faint);display:inline-block;padding:13px 2px;margin:-13px -2px;}
.crumbs a:hover{color:var(--chalk);}
.crumbs span{color:var(--chalk-faint);opacity:.6;margin:0 8px;}
.crumbs .here{color:var(--rock-300);}

/* ---------- hero ---------- */
.hero{position:relative;height:52vh;min-height:340px;overflow:hidden;display:flex;align-items:flex-end;
  background:var(--rock-900);margin-top:14px;border-radius:var(--radius);
  box-shadow:0 30px 70px -30px rgba(16,6,3,.9);}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(126%) contrast(106%);}
.hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(30,14,8,.06) 30%,rgba(30,14,8,.82));}
.hero-in{position:relative;z-index:2;padding:0 clamp(22px,4vw,44px) 36px;color:var(--chalk);width:100%;}
.hero .eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rock-300);margin-bottom:12px;display:block;}
.hero h1{font-weight:800;font-size:clamp(30px,5vw,54px);line-height:1.02;letter-spacing:-.03em;max-width:18ch;}
.hero .flag{position:absolute;top:14px;left:14px;z-index:3;font-size:9px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;background:var(--accent-on-glass);color:#fff;padding:4px 10px;border-radius:100px;}
.hero .credit{position:absolute;right:14px;bottom:10px;z-index:3;font-size:10px;color:rgba(250,247,241,.55);}

/* ---------- the content slab: everything readable lives on chalk ---------- */
main.wrap{
  width:calc(100% - 2 * var(--gutter));
  max-width:calc(var(--maxw) - 2 * var(--gutter));
  margin:26px auto 40px;
  padding:clamp(24px,4vw,52px) clamp(20px,3.4vw,48px) clamp(30px,4vw,56px);
  border-radius:var(--radius);
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
  color:var(--on-glass);
  position:relative;
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 2px 4px -1px rgba(20,8,4,.18),
    0 30px 70px -30px rgba(16,6,3,.85);
}
main.wrap::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23c2)' opacity='.20'/%3E%3C/svg%3E");}
main.wrap > *{position:relative;z-index:1;}

.lead{font-family:var(--font-display);font-weight:600;font-size:clamp(19px,2.1vw,26px);line-height:1.28;
  letter-spacing:-.01em;padding:0 0 6px;max-width:42ch;color:var(--on-glass);}
.lead b{color:var(--accent-on-glass);font-weight:700;}
main section{padding:clamp(26px,3.4vw,42px) 0 0;}
h2{font-weight:700;font-size:clamp(23px,3vw,34px);margin-bottom:14px;color:var(--on-glass);}
h3{font-weight:700;font-size:19px;margin:22px 0 8px;color:var(--on-glass);}
p{font-size:clamp(15px,1.15vw,17px);color:var(--on-glass-2);margin-bottom:14px;max-width:68ch;}
ol,ul{margin:12px 0 14px 20px;max-width:66ch;color:var(--on-glass-2);} li{margin-bottom:9px;}
b,strong{color:var(--on-glass);}
.link{font-weight:600;color:var(--accent-on-glass);border-bottom:1px solid rgba(224,115,60,.45);}
.link:hover{border-bottom-color:var(--accent-on-glass);}

/* ---------- tables ---------- */
.facts{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px;}
.facts th,.facts td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--hairline);}
.facts th{font-weight:600;width:38%;color:var(--on-glass);}
.facts td{font-weight:400;color:var(--on-glass-2);}
.facts tr:first-child th,.facts tr:first-child td{border-top:2px solid var(--accent-on-glass);}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:0;}

.callout{background:rgba(224,115,60,.12);border-left:3px solid var(--accent-on-glass);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:20px 24px;margin:24px 0;}
.callout p{margin-bottom:0;max-width:none;}
.callout .lbl{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-on-glass);display:block;margin-bottom:8px;}

.wearer{margin:24px 0;padding:20px 24px;background:rgba(255,255,255,.07);border-left:3px solid var(--rock-500);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.wearer p{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.3;color:var(--on-glass);margin:0;max-width:none;}
.wearer cite{display:block;margin-top:10px;font-style:normal;font-size:13px;color:var(--on-glass-3);}
.wearer cite .src{color:var(--rock-600);font-weight:600;}

figure.inline{margin:24px 0;border-radius:var(--radius-sm);overflow:hidden;background:rgba(255,255,255,.06);
  border:1px solid var(--hairline);}
figure.inline img{width:100%;height:auto;}
figure.inline figcaption{font-size:12.5px;color:var(--on-glass-3);padding:12px 16px;}

.cta{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;background:linear-gradient(180deg,var(--ember-lit),var(--accent-on-glass));
  border-radius:100px;padding:15px 26px;margin-top:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 14px 30px -12px rgba(168,57,26,.85);}
.cta:hover{background:linear-gradient(180deg,var(--accent-on-glass),var(--ember-deep));}
.src{font-size:12.5px;color:var(--on-glass-3);} .src a{color:var(--accent-on-glass);}
.updated{color:var(--on-glass-3);font-size:12px;margin-top:22px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;}

/* ---------- stay / directory cards ---------- */
.stay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:28px 0;}
.stay-card{background:var(--glass-soft);border:1px solid var(--glass-line);
  border-radius:var(--radius-sm);overflow:hidden;box-shadow:0 10px 24px -16px rgba(16,6,3,.6);}
.stay-card .ph{height:120px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-glass-3);}
.stay-card img{width:100%;height:120px;object-fit:cover;}
.stay-card .b{padding:16px 18px 18px;}
.stay-card h3{font-size:17px;margin:0 0 3px;}
.stay-card .meta{font-size:13px;color:var(--on-glass-3);}
.stay-card .tags{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap;}
.stay-card .tag{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.03em;
  color:var(--accent-on-glass);background:rgba(224,115,60,.16);padding:4px 10px;border-radius:100px;}
.stay-card .site,.stay-card .book{display:inline-block;margin-top:12px;font-family:var(--font-display);
  font-weight:700;font-size:12.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--accent-on-glass);}

/* ---------- related: the one deep-red band ---------- */
.related{margin:0 auto;max-width:var(--maxw);padding:0 var(--gutter);}
.related > .wrap{
  max-width:none;margin:0;padding:clamp(28px,4vw,48px);border-radius:var(--radius);
  color:var(--chalk);position:relative;overflow:hidden;
  background:
    radial-gradient(60% 55% at 10% 2%, rgba(255,186,132,.34), transparent 60%),
    linear-gradient(150deg, #B23C17 0%, #8A2D12 42%, #4A1A0C 78%, #2A130A 100%);
  border:1px solid rgba(216,160,111,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 30px 70px -26px rgba(16,6,3,.9);}
.related > .wrap::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Cfilter id='b2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.03' numOctaves='5' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='900' height='600' filter='url(%23b2)'/%3E%3C/svg%3E");background-size:cover;}
.related > .wrap > *{position:relative;z-index:1;}
.related h2{color:var(--chalk);}
.related .grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:22px;}
.related a{display:block;background:rgba(250,247,241,.12);border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius-sm);padding:16px 18px;transition:background .18s;}
.related a:hover{background:rgba(250,247,241,.20);}
.related a b{font-family:var(--font-display);font-weight:700;display:block;margin-bottom:4px;color:var(--chalk);}
.related a span{font-weight:400;font-size:13px;color:rgba(250,247,241,.75);}

/* ---------- footer ---------- */
footer.site{margin:34px auto 0;max-width:var(--maxw);padding:0 var(--gutter) 56px;}
footer.site .wrap{max-width:none;margin:0;padding:clamp(22px,3vw,34px);border-radius:var(--radius);
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 50px -30px rgba(16,6,3,.8);}
footer.site p{color:var(--on-glass-3);font-size:12.5px;max-width:70ch;line-height:1.7;}
footer.site .flinks{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;font-weight:600;margin-bottom:12px;}
footer.site .flinks a{color:var(--on-glass-2);padding:4px 0;} footer.site .flinks a:hover{color:var(--accent-on-glass);}
.dev{margin-top:14px;font-size:12px;font-weight:600;color:var(--on-glass-3);} .dev a{color:var(--accent-on-glass);}


/* =============================================================
   HOVER + FOCUS: readability, not decoration
   The panel smokes up under the cursor — the backdrop darkens, so the
   chalk text on top gains contrast. Gated to devices that genuinely
   hover (a touch screen would leave the state stuck on), and mirrored
   on :focus-visible so keyboard users get the same help.
   ============================================================= */
.stay-card,.related a,.hire .card,.credit-row,.li{
  transition:background .22s ease,border-color .22s ease,
             -webkit-backdrop-filter .22s ease,backdrop-filter .22s ease,
             transform .2s ease,box-shadow .22s ease;}

@media (hover:hover) and (pointer:fine){
  .stay-card:hover,.hire .card:hover{
    background:var(--glass-hover);
    border-color:var(--glass-line-hover);
    -webkit-backdrop-filter:var(--blur-hover);backdrop-filter:var(--blur-hover);
    box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 40px -20px rgba(16,6,3,.9);}
  .stay-card:hover .meta,.hire .card:hover .meta,
  .stay-card:hover p,.hire .card:hover p{color:var(--on-glass-2);}

  .related a:hover{background:rgba(20,10,6,.34);border-color:rgba(255,255,255,.34);}
  .related a:hover span{color:rgba(250,247,241,.92);}

  /* the map list: the row you are pointing at gets legible first */
  .li:hover{background:rgba(20,10,6,.34);}
  .li:hover p{color:var(--on-glass-2);}

  /* prose links: thicken the underline rather than moving anything */
  .link:hover,.src a:hover,.facts td a:hover{border-bottom-color:currentColor;}
}

/* keyboard users get the same contrast lift, plus a visible ring */
.stay-card:focus-within,.hire .card:focus-within{
  background:var(--glass-hover);border-color:var(--glass-line-hover);
  -webkit-backdrop-filter:var(--blur-hover);backdrop-filter:var(--blur-hover);}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--rock-300);outline-offset:3px;border-radius:6px;}

@media(prefers-reduced-motion:reduce){
  .stay-card,.related a,.hire .card,.credit-row,.li{transition:none;}
}

/* =============================================================
   TABLET
   ============================================================= */
@media(max-width:860px){
  nav.top .links{display:none;}
  nav.tabs{
    display:flex;position:fixed;z-index:50;
    left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));
    padding:7px;border-radius:100px;justify-content:space-between;align-items:stretch;gap:2px;
    background:var(--glass);
    -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    border:1px solid var(--glass-line);
    box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 40px -20px rgba(16,6,3,.85);}
  nav.tabs a{flex:1;min-height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;border-radius:100px;color:var(--on-glass-2);font-size:10.5px;font-weight:600;padding:6px 2px;}
  nav.tabs a.on{background:rgba(224,115,60,.20);color:var(--accent-on-glass);}
  nav.tabs svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;fill:none;
    stroke-linecap:round;stroke-linejoin:round;}
  body{padding-bottom:84px;}
  footer.site{padding-bottom:20px;}
}

/* =============================================================
   PHONE — the blur budget applies here
   ============================================================= */
@media(max-width:720px){
  /* Only the bars you are looking at keep a live blur. The big slab and
     the footer become solid chalk: over a dark photograph the eye cannot
     tell, and the GPU stops re-blurring on every scroll frame. */
  main.wrap,footer.site .wrap{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:var(--glass-solid);}
  .hero{height:auto;min-height:0;aspect-ratio:4/3;max-height:56vh;}
  .hero h1{font-size:clamp(26px,7.4vw,38px);}
  .crumbs{padding-top:calc(84px + env(safe-area-inset-top));}
  .lead{max-width:none;font-size:clamp(18px,5vw,22px);}
  .cta{display:block;width:100%;text-align:center;padding:16px 20px;}

  /* tables become stacked rows — nothing scrolls sideways */
  .facts,.facts tbody,.facts tr,.facts th,.facts td{display:block;width:auto;}
  .facts tr{padding:14px 0;border-bottom:1px solid var(--hairline);}
  .facts tr:last-child{border-bottom:0;}
  .facts th,.facts td{border:0;padding:0;width:auto;}
  .facts tr:first-child{display:none;}           /* the header row */
  .facts th{font-family:var(--font-display);font-weight:700;font-size:17px;margin-bottom:5px;}
  .facts td{font-size:14.5px;}
  .facts td + td{margin-top:6px;}

  /* Standalone link CTAs need a real tap area. Inline links inside a
     sentence are exempt from the 44px rule (WCAG 2.5.8) and are left
     alone so prose does not gain odd gaps. */
  p > .link:only-child,
  .stay-card .site,.stay-card .book,
  .related a{display:inline-block;padding-top:11px;padding-bottom:11px;}
  .related a{padding-left:18px;padding-right:18px;}
}

/* =============================================================
   ACCESSIBILITY FALLBACKS
   ============================================================= */
@media(prefers-reduced-transparency:reduce){
  .frost,main.wrap,nav.top,nav.tabs,footer.site .wrap{
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    background:rgba(24,19,17,.96) !important;}
  .related > .wrap{background:linear-gradient(150deg,#B23C17,#4A1A0C) !important;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
}

/* print: the packing list is meant to be printed */
@media print{
  .rock-bg,.rock-mottle,.rock-grain,nav.top,nav.tabs,.crumbs,.hero,.related,footer.site{display:none !important;}
  body{background:#fff;color:#000;padding:0;}
  main.wrap{background:#fff;color:#000;box-shadow:none;border:0;padding:0;max-width:none;}
  main.wrap::after{display:none;}
  p,li,td{color:#000;}
}