/* ==========================================================================
   Luna — Ibiza Hikes · ibiza.css
   --------------------------------------------------------------------------
   Ibiza Bohemia poster meets MoMoney wall-type. Bone cream paper, deep
   forest-ink green, terracotta flower, a crackle of Assouline hot-pink and
   Miami butter-yellow, and the big wall of MoMoney electric-blue for
   monumental display type. Quirky chunky sans, hairline supporting text.
   Structure:
     1. Custom properties (palette, type, radii, shadows, motion)
     2. Reset + base typography
     3. Selection + focus ring + scrollbars
     4. Utility helpers used across components
   Partner files: animations.css (motion), components.css (UI surfaces).
   ========================================================================== */

:root {
  /* --- Paper stack ------------------------------------------------------ */
  --paper:       #F1E8D4;   /* Assouline cream, slightly warmer than bone */
  --paper-deep:  #E8DDC3;
  --bone:        #F8F0DB;   /* lightest cream, behind display type */
  --linen:       #E0D4B8;
  --rule:        #1E1F1A;   /* rules are inked, not hairline-soft */
  --rule-soft:   #C9B98F;

  /* --- Inks ------------------------------------------------------------- */
  --ink:         #14160F;   /* near-black, for body copy and chrome */
  --ink-soft:    #545548;
  --ink-faint:   #8B8A77;

  /* --- The "poster" greens — the Assouline IBIZA/SPAIN deep forest. --- */
  --forest:      #1E3A2C;   /* the big IBIZA wordmark green */
  --forest-deep: #12271D;   /* darkest, for photo-section backgrounds */
  --forest-mid:  #2A5240;

  /* --- Terracotta flower — the poster silhouette ---------------------- */
  --clay:        #C36A3A;   /* the flower orange */
  --clay-deep:   #9A4A24;
  --clay-light:  #E39A72;

  /* --- Assouline hot pink (Bohemia cover) + Miami butter ------------- */
  --magenta:     #E8457D;   /* hot Bohemia pink, for accents + CTAs */
  --magenta-deep:#B52B5A;
  --butter:      #F5D24F;   /* Miami cover yellow, used sparingly */
  --butter-deep: #E6B72E;

  /* --- MoMoney electric-blue for the monumental wall-of-type -------- */
  --blue:        #6F74F7;   /* MoMoney cornflower/periwinkle */
  --blue-deep:   #4248D6;
  --blue-wash:   #D6D8FA;   /* the pale background under the wall type */

  /* --- Semantic --------------------------------------------------------- */
  --bg:          var(--paper);
  --fg:          var(--ink);
  --fg-muted:    var(--ink-soft);
  --brand:       var(--forest);
  --on-brand:    var(--bone);
  --accent:      var(--clay);
  --accent-ink:  var(--clay-deep);

  --easy:        #6F8F5E;
  --moderate:    var(--butter-deep);
  --hard:        var(--clay);

  /* --- Typography ------------------------------------------------------- */
  /* Display: Bricolage Grotesque — modern-quirky geometric sans with a
     little wobble at big sizes. This is the "Assouline IBIZA/BOHEMIA/BALI
     /SPAIN" voice + the MoMoney WALL type. Heavy weights for poster scale.
     It also ships a small handful of optical-size variants, so the same
     face feels different at 200px vs 16px. */
  --font-display: "Bricolage Grotesque", "Archivo Black", "Helvetica Neue",
                  "Arial Black", sans-serif;
  /* A tighter small-caps / label voice for the parenthetical MoMoney inserts
     ("OR A BENJAMIN..."). */
  --font-mono-caps: "Space Grotesk", "Inter", ui-monospace, Menlo,
                    monospace;
  /* Body: Inter, slightly heavier than editorial mode. */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
                  sans-serif;
  --font-accent:  var(--font-display);

  /* Fluid type scale — hero goes HUGE, MoMoney wall size. */
  --fs-wall:   clamp(3.75rem, 14vw + 0.5rem, 11rem);   /* 60 → 176 */
  --fs-hero:   clamp(3rem, 10vw, 8.5rem);              /* 48 → 136 */
  --fs-h1:     clamp(2.25rem, 3.5vw + 1rem, 4.5rem);   /* 36 → 72 */
  --fs-h2:     clamp(1.5rem, 2vw + 0.8rem, 2.5rem);    /* 24 → 40 */
  --fs-h3:     clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
  --fs-body:   clamp(0.9375rem, 0.2vw + 0.875rem, 1rem);
  --fs-caption:0.75rem;
  --fs-stat:   clamp(1.5rem, 1vw + 1rem, 2rem);
  --fs-eyebrow: 0.6875rem;
  --fs-paren:  clamp(0.6875rem, 0.25vw + 0.6rem, 0.8125rem);

  /* --- Radii — poster-flat ---------------------------------------------- */
  /* Assouline covers are rectangles. Pages are rectangles. Photos are
     rectangles (slightly rounded on the Polaroid tilt). */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-xl: 16px;
  --r-pill: 999px;
  --r-photo: 2px;
  --r-poster: 4px;
  --r-polaroid: 4px;

  /* --- Borders --------------------------------------------------------- */
  --bd-hair:  1px solid var(--rule-soft);
  --bd-ink:   2px solid var(--ink);
  --bd-ink-thick: 3px solid var(--ink);

  /* --- Shadows — ink-inked, poster-flat with Polaroid lift ------------ */
  --shadow-poster: 8px 12px 0 rgba(20, 22, 15, 0.14);
  --shadow-card:   4px 6px 0 rgba(20, 22, 15, 0.10);
  --shadow-polaroid: 0 14px 30px -16px rgba(20, 22, 15, 0.55),
                     0 4px 8px -4px rgba(20, 22, 15, 0.28);
  --shadow-float:  0 24px 48px -20px rgba(20, 22, 15, 0.35);

  /* --- Motion curves + durations --------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.9, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.6, 1);
  --t-fast: 160ms;
  --t-med:  280ms;
  --t-slow: 500ms;

  /* --- Layout ---------------------------------------------------------- */
  --content-max: 1240px;
  --gutter:      clamp(1.25rem, 3vw, 3rem);
  --nav-h:       72px;
  --nav-h-mobile: 58px;

  /* --- Letter-spacing / tracking --------------------------------------- */
  --track-tight: -0.035em;    /* display headlines, poster-scale */
  --track-tighter: -0.05em;   /* the wall type */
  --track-normal: 0;
  --track-wide:  0.08em;
  --track-wider: 0.18em;      /* eyebrows + parenthetical smallcaps */

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }

a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--t-fast) ease;
}
a:hover { color: var(--magenta-deep); } /* 5.3:1 on bone vs 3.1:1 for bright magenta */

/* Headlines — Bricolage, heavy, poster-scale, very tight tracking. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--forest);
  margin: 0 0 0.35em;
  line-height: 0.95;
  letter-spacing: var(--track-tight);
  font-variation-settings: "wdth" 100, "opsz" 48;
}

h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }

p { margin: 0 0 1em; }

em { font-style: italic; }

/* Inline accent — magenta wordmark chunk, like IBIZA BOHEMIA's BOHEMIA
   tag. No serif italic, no handwriting. Same face, different colour. */
.em {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: normal;
  color: var(--magenta);
  letter-spacing: inherit;
}

/* Parenthetical small-caps, the MoMoney "( OR A BENJAMIN... )" treatment. */
.paren {
  font-family: var(--font-mono-caps);
  font-size: var(--fs-paren);
  font-weight: 600;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink);
  font-feature-settings: "ss01";
  line-height: 1.2;
  display: inline-block;
  vertical-align: middle;
  max-width: 18ch;
}
.paren::before { content: "("; margin-right: 2px; color: inherit; }
.paren::after  { content: ")"; margin-left: 2px; color: inherit; }
.paren--stack { white-space: normal; }

/* All-caps eyebrow — tracked smallcaps, inked not faded */
.eyebrow {
  font-family: var(--font-mono-caps);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-wider);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

code, kbd { font-family: "Menlo", ui-monospace, Consolas, monospace; }

/* --------------------------------------------------------------------------
   3. Selection + focus + scrollbars
   -------------------------------------------------------------------------- */

::selection {
  background: var(--magenta);
  color: var(--bone);
}

:focus-visible {
  /* ink ring reads on every surface incl. the magenta CTA (4.8:1) where a
     magenta ring was invisible. */
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

:focus:not(:focus-visible) { outline: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--ink);
  border-radius: var(--r-pill);
  border: 2px solid var(--paper);
}
::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------------------
   4. Utility helpers
   -------------------------------------------------------------------------- */

.app {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 32px) var(--gutter) 120px;
}

.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.stack > * + * { margin-top: 1rem; }
.row { display: flex; gap: 0.75rem; align-items: center; }
.grow { flex: 1 1 auto; }

.display { font-family: var(--font-display); font-weight: 800; letter-spacing: var(--track-tight); }
.muted  { color: var(--fg-muted); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — off-screen until focused, then a real pill at top-left. */
.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 1000;
  transform: translateY(-150%);
  background: var(--ink);
  color: var(--bone);
  padding: 10px 16px;
  border-radius: var(--r-pill, 999px);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--butter); outline-offset: 2px; }
#app:focus { outline: none; } /* programmatic focus target, no ring needed */

.tabular { font-variant-numeric: tabular-nums; }

.rule {
  border: 0;
  height: 2px;
  background: var(--ink);
  margin: 56px 0;
}

.block {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(56px, 9vw, 120px) var(--gutter);
}
.block--forest { background: var(--forest); color: var(--bone); }
.block--forest h1, .block--forest h2, .block--forest h3 { color: var(--butter); }
.block--forest .eyebrow { color: var(--butter); }
.block--forest a { color: var(--butter); }
.block--forest a:hover { color: var(--clay-light); }
.block--blue { background: var(--blue); color: var(--ink); }
.block--blue h1, .block--blue h2 { color: var(--ink); }
.block--cream { background: var(--bone); }
.block--magenta { background: var(--magenta); color: var(--bone); }
.block--magenta h1, .block--magenta h2 { color: var(--bone); }

@media (max-width: 640px) {
  .hide-sm { display: none !important; }
}
@media (min-width: 901px) {
  .hide-lg { display: none !important; }
}