/* =====================================================================
   SALSALITO — BRAND LAYER
   Design tokens + the gold/shell accent language. Loaded AFTER styles.css.
   This file is the single source of truth for spacing, type scale and the
   engraved-shell + gold accents. Base layout lives in styles.css; this layer
   refines rhythm and adds the signature punctuation. (Restraint: accents are
   used sparingly — a couple per page, never wallpaper.)
   ===================================================================== */

:root{
  /* ---------- SPACING SCALE (8px base · editorial rhythm) ----------
     Steps grow ~1.5×. Use these everywhere instead of arbitrary px. */
  --sp-2xs:8px;
  --sp-xs:16px;
  --sp-sm:24px;
  --sp-md:40px;
  --sp-lg:64px;
  --sp-xl:96px;
  /* vertical section rhythm — responsive, calm, generous */
  --section-y:clamp(96px,11vw,168px);      /* standard section top/bottom   */
  --section-y-lg:clamp(120px,14vw,200px);  /* feature / breathing sections  */
  --gutter:clamp(22px,5vw,46px);           /* page horizontal padding        */

  /* ---------- MEASURE (line-length caps — readability) ---------- */
  --maxw-prose:680px;     /* body copy / lists / menus            */
  --maxw-lead:860px;      /* large lead paragraphs               */
  --maxw-wide:1200px;     /* grids, sliders, galleries           */

  /* ---------- TYPE SCALE ---------- */
  --fs-eyebrow:11px;   --ls-eyebrow:.42em;
  --fs-micro:10.5px;   --fs-small:13.5px;
  --fs-body:16px;      --lh-body:1.9;       /* was 2.0 — 1.9 reads calmer  */
  --fs-lead:clamp(24px,2.6vw,40px);    --lh-lead:1.5;
  --fs-title:clamp(34px,4.4vw,60px);   --lh-title:1.06;   /* section headings  */
  --fs-page-title:clamp(42px,6vw,84px);                   /* inner page hero    */
  --fs-hero:clamp(46px,7vw,104px);                        /* home hero          */

  /* ---------- SHELL ACCENT SIZES ---------- */
  --shell-sm:22px; --shell-md:30px; --shell-lg:44px;
}

/* =====================================================================
   GOLD ACCENTS
   ===================================================================== */

/* centred short hairline divider */
.rule-gold{width:54px;height:1px;background:var(--gold);border:0;margin:var(--sp-md) auto;opacity:.85;}
.rule-gold.on-dark{background:var(--gold-bright);}

/* footer brand logo (the full mark, lifted on the navy) */
.footer-logo{text-align:center;padding:0 0 var(--sp-lg);}
.footer-logo img{width:min(200px,55vw);height:auto;display:inline-block;
  filter:brightness(1.35) saturate(.95);opacity:.96;}

/* footer heritage line (replaces the un-earned awards row) */
.footer-heritage{text-align:center;padding:44px 0 6px;font-family:'Figtree',sans-serif;font-weight:300;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);}

/* tracked small-caps label (the house eyebrow voice) */
.smallcaps{font-family:'Figtree',sans-serif;font-weight:300;font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--gold);}
.smallcaps.on-dark{color:var(--gold-bright);}

/* drop-initial for a lead paragraph (used once, e.g. the story opener) */
.dropcap::first-letter{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;
  font-size:3.1em;line-height:.78;float:left;margin:.04em .14em -.04em 0;color:var(--ink);}

/* =====================================================================
   SHELL ACCENTS (engraved scallop — the recurring signature)
   ===================================================================== */

/* a single gold shell mark, centred — the Salsalito brand emblem */
.shell-mark{display:block;width:var(--shell-md);height:var(--shell-md);margin:0 auto;
  background:url('shell-brand.png') center/contain no-repeat;}
.shell-mark.on-dark{filter:brightness(1.45) saturate(.92);}   /* lift the gold on navy */
.shell-mark.sm{width:var(--shell-sm);height:var(--shell-sm);}
.shell-mark.lg{width:var(--shell-lg);height:var(--shell-lg);}

/* section divider: a shell flanked by two fading gold hairlines */
.shell-divider{display:flex;align-items:center;justify-content:center;gap:24px;
  margin:var(--sp-lg) auto;max-width:var(--maxw-prose);}
.shell-divider::before,.shell-divider::after{content:'';height:1px;flex:1;max-width:130px;}
.shell-divider::before{background:linear-gradient(90deg,transparent,rgba(176,141,87,.55));}
.shell-divider::after{background:linear-gradient(90deg,rgba(176,141,87,.55),transparent);}
.shell-divider .shell-mark{margin:0;}

/* shell bullets — replaces list dots on feature lists */
.shell-list{list-style:none;padding:0;margin:0;}
.shell-list li{position:relative;padding-left:34px;margin:0 0 var(--sp-sm);
  font-size:var(--fs-body);line-height:var(--lh-body);}
.shell-list li::before{content:'';position:absolute;left:0;top:.18em;width:20px;height:20px;
  background:url('shell-brand.png') center/contain no-repeat;opacity:.9;}

/* =====================================================================
   RHYTHM HELPERS (apply the scale without touching base rules)
   ===================================================================== */
.u-section{padding-top:var(--section-y);padding-bottom:var(--section-y);}
.u-section-lg{padding-top:var(--section-y-lg);padding-bottom:var(--section-y-lg);}
.u-prose{max-width:var(--maxw-prose);margin-inline:auto;}
.u-lead{max-width:var(--maxw-lead);margin-inline:auto;}

/* =====================================================================
   ROOMS — 9 entries, each with a swipeable 5-image gallery
   ===================================================================== */
.rooms-list{padding:var(--section-y) var(--gutter);}
.room{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,5vw,72px);align-items:center;
  max-width:var(--maxw-wide);margin:0 auto;padding:var(--section-y) 0;border-bottom:var(--hair-light);}
.room:last-child{border-bottom:0;}
.room:nth-child(even) .room-gallery{order:2;}     /* alternate sides for editorial rhythm */
.room-meta{text-align:center;}
.room-meta .shell-mark{margin-bottom:var(--sp-sm);}
.room-tag{font-size:var(--fs-eyebrow);letter-spacing:.28em;text-transform:uppercase;color:#9a8050;margin-bottom:12px;}
.room-name{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(30px,3.4vw,46px);
  color:#16202E;margin:0 0 var(--sp-sm);line-height:1.05;}
.room-desc{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--on-light-2);max-width:42ch;margin:0 auto var(--sp-md);}
.room-price{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:var(--gold);margin-bottom:var(--sp-md);}

/* gallery (native scroll-snap = free swipe; shell buttons + keyboard) */
.gallery{position:relative;}
.gallery-viewport{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;border:1px solid rgba(176,141,87,.5);
  border-radius:46% 46% 10px 10px / 30% 30% 10px 10px;}
.gallery-viewport::-webkit-scrollbar{display:none;}
.gallery-viewport:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;}
.gslide{flex:0 0 100%;scroll-snap-align:center;position:relative;}
.gimg{height:clamp(360px,50vh,560px);background-position:center;background-size:cover;background-repeat:no-repeat;}
.gcap{position:absolute;left:0;bottom:0;width:100%;box-sizing:border-box;margin:0;padding:20px 24px;
  background:linear-gradient(0deg,rgba(10,24,56,.72),transparent);color:var(--cream);
  font-size:var(--fs-micro);letter-spacing:.24em;text-transform:uppercase;}
.gnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;display:flex;align-items:center;
  justify-content:center;color:var(--cream);background:rgba(10,24,56,.30);border:0;border-radius:50%;cursor:pointer;
  transition:color .3s ease,background .3s ease;}
.gnav:hover{color:var(--gold-bright);background:rgba(10,24,56,.5);}
.gnav.prev{left:12px;} .gnav.next{right:12px;}
.gnav svg{width:30px;height:30px;}
/* brand-shell prev/next arrows (gold, lifted on the dark backdrops) */
.brand-arrow{display:block;object-fit:contain;filter:brightness(0) invert(1);transition:filter .3s ease;}  /* white by default */
.brand-arrow.left{transform:rotate(-90deg);}   /* points left  */
.brand-arrow.right{transform:rotate(90deg);}   /* points right */
.shell-btn .brand-arrow{width:100%;height:100%;}
.gnav .brand-arrow{width:34px;height:34px;}
.shell-btn:hover .brand-arrow,.gnav:hover .brand-arrow,
.shell-btn:active .brand-arrow,.gnav:active .brand-arrow{filter:brightness(1.6) saturate(.9);}  /* gold on hover / press */
.gcount{position:absolute;right:14px;bottom:14px;color:var(--cream);font-size:var(--fs-micro);letter-spacing:.2em;
  background:rgba(10,24,56,.42);padding:5px 11px;border-radius:20px;}
@media (prefers-reduced-motion:reduce){ .gallery-viewport{scroll-behavior:auto;} }
@media (max-width:860px){
  .room{grid-template-columns:1fr;gap:var(--sp-md);}
  .room:nth-child(even) .room-gallery{order:0;}
}