/* =====================================================================
   HIDDEN ST IVES — DESIGN TOKENS + BASE  (single source of truth)
   Load before component CSS.
   ---------------------------------------------------------------------
   Fluid type: two-stage. Locks at the 1645px container, scales to 1025px
   on slope A, then a second slope from 1025px down to 375px (mobile).
   Fluid spacing: single slope, 375px -> 1645px.
   Dark sections: add class "on-ink" to flip list markers, buttons, fields.
   ===================================================================== */

:root{
  /* --- Brand primaries (constant across all Hidden locations) --- */
  --ink:    #1b333b;   /* Pantone 7546 C        */
  --cream:  #e8dfd5;   /* Pantone Cool Gray 1 C */
  --paper:  #f3efeb;   /* light background tint */
  --shell:  #ede6de;   /* raised tile surface (sits on --paper) */
  --darker: #17292F;

  /* --- Hidden St Ives local accent (warm secondary) --- */
  --accent:        #be7553;  /* terracotta */
  --accent-hover:  #a8623f;

  /* --- Warm secondary palette --- */
  --warm-charcoal:  #333030;
  --warm-sand:      #d8baa4;
  --warm-terracotta:#be7553;
  --warm-ochre:     #a07e45;
  --warm-sage:      #86aa96;

  /* --- Cool secondary palette --- */
  --cool-sage:  #cdd7ca;
  --cool-slate: #4f615e;
  --cool-lilac: #d5d1e7;
  --cool-sky:   #c1dcf4;
  --cool-grey:  #c2c3c1;

  /* --- Semantic --- */
  --color-bg:           var(--paper);
  --color-surface:      var(--cream);
  --color-surface-2:    var(--shell);   /* boxed tiles / panels */
  --color-text:         var(--ink);
  --color-text-muted:   #717577;
  --color-line:         rgba(27,51,59,.10);
  --color-on-ink:       var(--cream);
  --color-on-ink-muted: rgba(232,223,213,.66);
  --color-line-on-ink:  rgba(232,223,213,.28);

  /* --- Type families --- */
  --font-heading: "Attila Sans Classic", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif:   "Fraunces", Georgia, "Times New Roman", serif;

  /* --- Weights --- */
  --w-light:300; --w-regular:400; --w-medium:500;

  /* --- Tracking --- */
  --track-tight:-0.012em;
  --track-snug:-0.006em;
  --track-normal:0;
  --track-wide:0.08em;
  --track-over:0.18em;
  --track-body:0.012em;

  /* --- Fluid spacing (375 -> 1645) --- */
  --space-4xs: 0.125rem;
  --space-3xs: 0.25rem;
  --space-2xs: clamp(0.375rem, 0.3381rem + 0.1575vw, 0.5rem);
  --space-xs:  clamp(0.625rem, 0.5881rem + 0.1575vw, 0.75rem);
  --space-s:   clamp(0.875rem, 0.8381rem + 0.1575vw, 1rem);
  --space-m:   clamp(1.25rem, 1.176rem + 0.315vw, 1.5rem);
  --space-l:   clamp(1.75rem, 1.602rem + 0.6299vw, 2.25rem);
  --space-xl:  clamp(2.5rem, 2.205rem + 1.26vw, 3.5rem);
  --space-2xl: clamp(3.5rem, 3.057rem + 1.89vw, 5rem);
  --space-3xl: clamp(4.5rem, 3.614rem + 3.78vw, 7.5rem);
  --space-4xl: clamp(6rem, 4.819rem + 5.039vw, 10rem);
  --space-5xl: clamp(8rem, 6.228rem + 7.559vw, 14rem);
  --space-section: clamp(4rem, 2.819rem + 5.039vw, 8rem);

  /* --- Radius --- */
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    10px;
  --radius-pill:  999px;
  --radius-circle:50%;

  /* --- Layout --- */
  --container-max:1645px;
  --container-pad:clamp(1.25rem, 4vw, 3.5rem);
  --hair:1px;

  /* --- Motion --- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.4s;

  /* --- Fluid type: slope B (mobile-first) 375 -> 1025 --- */
  --fs-display:   clamp(2.125rem, 1.764rem + 1.538vw, 2.75rem);
  --fs-statement: clamp(1.688rem, 1.471rem + 0.9231vw, 2.062rem);
  --fs-h1:        clamp(1.688rem, 1.543rem + 0.6154vw, 1.938rem);
  --fs-h2:        clamp(1.375rem, 1.267rem + 0.4615vw, 1.562rem);
  --fs-h3:        clamp(1.188rem, 1.151rem + 0.1538vw, 1.25rem);
  --fs-h4:        clamp(1rem, 0.9639rem + 0.1538vw, 1.062rem);
  --fs-eyebrow:   clamp(0.8125rem, 0.7764rem + 0.1538vw, 0.875rem);
  --fs-overline:  clamp(0.6875rem, 0.6514rem + 0.1538vw, 0.75rem);
  --fs-body-lg:   clamp(1rem, 0.9639rem + 0.1538vw, 1.062rem);
  --fs-body:      clamp(0.9062rem, 0.8882rem + 0.07692vw, 0.9375rem);
  --fs-body-sm:   clamp(0.8125rem, 0.7764rem + 0.1538vw, 0.875rem);
  --fs-button:    0.72rem;
}

/* --- Fluid type: slope A 1025 -> 1645 (locks at container max) --- */
@media (min-width:1025px){
  :root{
    --fs-display:   clamp(2.75rem, 1.097rem + 2.581vw, 3.75rem);
    --fs-statement: clamp(2.062rem, 1.339rem + 1.129vw, 2.5rem);
    --fs-h1:        clamp(1.938rem, 1.421rem + 0.8065vw, 2.25rem);
    --fs-h2:        clamp(1.562rem, 1.253rem + 0.4839vw, 1.75rem);
    --fs-h3:        clamp(1.25rem, 1.043rem + 0.3226vw, 1.375rem);
    --fs-h4:        clamp(1.062rem, 0.9592rem + 0.1613vw, 1.125rem);
    --fs-eyebrow:   clamp(0.875rem, 0.7717rem + 0.1613vw, 0.9375rem);
    --fs-overline:  clamp(0.75rem, 0.6983rem + 0.08065vw, 0.7812rem);
    --fs-body-lg:   clamp(1.062rem, 0.9592rem + 0.1613vw, 1.125rem);
    --fs-body:      clamp(0.9375rem, 0.8858rem + 0.08065vw, 0.9688rem);
    --fs-body-sm:   0.875rem;
  }
}

/* --- Reset / base --- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-body); font-weight:var(--w-regular);
  font-size:var(--fs-body); line-height:1.62; letter-spacing:var(--track-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;}
a{color:inherit;}

/* --- Container --- */
.container{width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--container-pad);}

/* =====================================================================
   TYPE ROLES
   ===================================================================== */
.t-display{font-family:var(--font-heading); font-weight:var(--w-regular); font-size:var(--fs-display); line-height:1.08; letter-spacing:var(--track-tight);}
.t-statement{font-family:var(--font-heading); font-weight:var(--w-regular); font-size:var(--fs-statement); line-height:1.18; letter-spacing:var(--track-snug);}
.t-h1{font-family:var(--font-heading); font-weight:var(--w-regular); font-size:var(--fs-h1); line-height:1.3; letter-spacing:var(--track-tight);}
.t-h2{font-family:var(--font-heading); font-weight:var(--w-regular); font-size:var(--fs-h2); line-height:1.35; letter-spacing:var(--track-snug);}
.t-h3{font-family:var(--font-heading); font-weight:var(--w-medium); font-size:var(--fs-h3); line-height:1.4; letter-spacing:var(--track-snug);}
.t-h4,.t-subhead{font-family:var(--font-body); font-weight:var(--w-medium); font-size:var(--fs-h4); line-height:1.45; letter-spacing:var(--track-normal);}
.t-eyebrow{font-family:var(--font-serif); font-weight:var(--w-regular); font-style:italic; font-size:var(--fs-eyebrow); line-height:1.3; color:var(--color-text-muted);}
.t-overline{font-family:var(--font-body); font-weight:var(--w-medium); font-size:var(--fs-overline); line-height:1; letter-spacing:var(--track-over); text-transform:uppercase;}
.t-serif{font-family:var(--font-serif); font-weight:var(--w-regular); font-size:var(--fs-statement); line-height:1.3;}
.t-lead{font-family:var(--font-body); font-weight:var(--w-regular); font-size:var(--fs-body-lg); line-height:1.55; letter-spacing:var(--track-body);}
.t-body{font-family:var(--font-body); font-weight:var(--w-regular); font-size:var(--fs-body); line-height:1.62; letter-spacing:var(--track-body);}
.t-small{font-family:var(--font-body); font-weight:var(--w-regular); font-size:var(--fs-body-sm); line-height:1.5; letter-spacing:var(--track-body); color:var(--color-text-muted);}
.is-muted{color:var(--color-text-muted);}

/* =====================================================================
   LISTS
   ===================================================================== */
.list{list-style:none; padding:0; margin:0; display:grid; gap:var(--space-xs);}
.list li{position:relative; padding-left:1.5em; font-family:var(--font-body); font-weight:var(--w-regular); font-size:var(--fs-body); line-height:1.5; letter-spacing:var(--track-body);}
.list li::before{content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--accent);}
.on-ink .list li{color:var(--cream);}

/* cycling markers - light backgrounds: saturated / darker secondaries */
.list--cycle li:nth-child(5n+1)::before{background:var(--warm-terracotta);}
.list--cycle li:nth-child(5n+2)::before{background:var(--warm-sage);}
.list--cycle li:nth-child(5n+3)::before{background:var(--warm-ochre);}
.list--cycle li:nth-child(5n+4)::before{background:var(--cool-slate);}
.list--cycle li:nth-child(5n+5)::before{background:var(--warm-charcoal);}
/* cycling markers - dark backgrounds: paler / cooler secondaries */
.on-ink .list--cycle li:nth-child(5n+1)::before{background:var(--warm-terracotta);}
.on-ink .list--cycle li:nth-child(5n+2)::before{background:var(--cool-sage);}
.on-ink .list--cycle li:nth-child(5n+3)::before{background:var(--warm-sand);}
.on-ink .list--cycle li:nth-child(5n+4)::before{background:var(--cool-sky);}
.on-ink .list--cycle li:nth-child(5n+5)::before{background:var(--cool-lilac);}

.list-ordered{list-style:none; padding:0; margin:0; counter-reset:hl; display:grid; gap:var(--space-s);}
.list-ordered li{position:relative; padding-left:2.2em; font-family:var(--font-body); font-weight:var(--w-regular); font-size:var(--fs-body); line-height:1.5; counter-increment:hl; letter-spacing:var(--track-body);}
.list-ordered li::before{content:counter(hl,decimal-leading-zero); position:absolute; left:0; top:0; font-family:var(--font-serif); font-style:italic; font-weight:var(--w-regular); font-size:.9em; color:var(--accent);}
.on-ink .list-ordered li{color:var(--cream);}

/* =====================================================================
   LETTER-ROLL MECHANICS (shared by text link + pill; JS splits [data-roll])
   ===================================================================== */
.roll{display:inline-block; overflow:hidden; height:1em; line-height:1; vertical-align:top;}
.roll--space{width:.3em;}
.roll__col{display:flex; flex-direction:column;}
.roll__col > span{height:1em; line-height:1; display:block;}

.btn-base{
  position:relative; display:inline-flex; align-items:center; line-height:1;
  font-family:var(--font-body); font-weight:var(--w-medium); font-size:var(--fs-button);
  letter-spacing:var(--track-over); text-transform:uppercase; text-decoration:none; cursor:pointer;
  border-radius:var(--radius-md);
}
.btn__txt{position:relative; z-index:2; display:inline-flex; white-space:nowrap;}

/* --- text link (plain + arrow) --- */
.btn--text{color:var(--color-text);}
.btn--text .roll__col > span:last-child{color:var(--accent);}
.on-ink .btn--text{color:var(--cream);}
.on-ink .btn--text .roll__col > span:last-child{color:var(--accent);}
.btn__arw{position:relative; z-index:2; display:inline-flex; margin-left:.7em; transition:transform var(--dur) var(--ease);}
.btn--text:hover .btn__arw{transform:translateX(.35em);}

/* --- square button with travelling arrow (primary) ---
   Transparent + bordered by default. On hover the whole button fills cream
   with primary-blue (ink) text + arrow. Padding gives ~50px height on
   desktop, eased back on small screens. Arrow slides right (see .btn__circle). */
.btn--pill{
  --bg:transparent; --fg:var(--ink); --bd:var(--color-line);
  gap:.9em; padding:1.5em 2em; 
  font-size:var(--fs-button); font-weight:var(--w-medium);
  background:var(--bg); color:var(--fg); border:var(--hair) solid var(--bd);
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* arrow only (no circle): follows the button colour, travels right on hover */
.btn--pill .btn__circle{
  z-index:2; flex:0 0 auto; display:inline-flex; align-items:center;
  transition:transform var(--dur) var(--ease);
}
.btn--pill:hover{--bg:var(--cream); --bd:var(--cream); --fg:var(--ink);}
.btn--pill:hover .btn__circle{transform:translateX(.35em);}
.on-ink .btn--pill{--fg:var(--cream); --bd:var(--color-line-on-ink);}
.on-ink .btn--pill:hover{--bg:var(--cream); --bd:var(--cream); --fg:var(--ink);}
@media (max-width:640px){ .btn--pill{padding:1.25em 1.6em;} }

/* =====================================================================
   FORM CONTROLS (booking bar fields)
   ===================================================================== */
.field{display:grid; gap:var(--space-4xs);}
.field > .t-overline{color:var(--color-text-muted);}
.field select,.field input{
  appearance:none; -webkit-appearance:none;
  font-family:var(--font-body); font-weight:var(--w-regular); font-size:var(--fs-body); letter-spacing:var(--track-body);
  color:var(--color-text); background:transparent; border:0;
  border-bottom:var(--hair) solid var(--color-line);
  padding:.6em 1.4em .6em 0; border-radius:0; width:100%;
  background-image:linear-gradient(45deg,transparent 50%,var(--color-text) 50%),
                   linear-gradient(135deg,var(--color-text) 50%,transparent 50%);
  background-position:right 15px center, right 10px center;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  transition:border-color var(--dur) var(--ease);
}
.field select:focus,.field input:focus{outline:none; border-color:var(--accent);}
.on-ink .field > .t-overline{color:var(--color-on-ink-muted);}
.on-ink .field select,.on-ink .field input{
  color:var(--cream); border-bottom-color:var(--color-line-on-ink);
  background-image:linear-gradient(45deg,transparent 50%,var(--cream) 50%),
                   linear-gradient(135deg,var(--cream) 50%,transparent 50%);
}

/* --- quality floor --- */
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:1px;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important;}
  .btn--text:hover .btn__arw{transform:translateX(.35em);}
}