/* Coast Botanique — Visual Identity tokens */
/* Grounded in the brand board: sea foam · warm stone · bone · taupe · butter · stainless */
/* Pushed with refined deep tones (eucalyptus ink, deep sea foam) for contrast + depth. */
/* Type: Manrope (body/UI) + a chunky display serif (Roca substitute, swappable). */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=DM+Serif+Display:ital@0;1&family=Yeseva+One&family=JetBrains+Mono:wght@400&display=swap');

:root {
  /* ─── COAST BOTANIQUE BRAND PALETTE (from the board, refined) ─────── */

  /* Bone — primary neutral surface (board: Bone #F6F3ED) */
  --cb-chalk:        #F6F3ED;
  --cb-chalk-soft:   #EFEADF;
  --cb-chalk-paper:  #E6DFCF;

  /* Warm Stone — secondary warm neutral (board: #DBD3C7) */
  --cb-warmstone:    #DBD3C7;
  --cb-warmstone-deep: #C4BAA9;

  /* Eucalyptus Ink — type + single dark scroll-rest moment (refined deep) */
  --cb-ink:          #28332E;
  --cb-ink-soft:     #3C4942;

  /* Sea Foam — the signature. Deep cut is the hero/CTA surface,           */
  /* the board's light sea foam (#9FBEB8) lives as the soft tint + mist.   */
  --cb-powder:       #9FBEB8;     /* light sea foam — THE lead surface (board colour) */
  --cb-powder-soft:  #9FBEB8;     /* board sea foam */
  --cb-powder-mist:  #E3ECE7;     /* sea foam tint surface */
  --cb-powder-paper: #DBD3C7;     /* warm stone — light section bg */
  --cb-powder-deep:  #38544B;     /* borders · quiet detail · captions */

  /* Sea Foam (board literal) explicit aliases */
  --cb-seafoam:      #9FBEB8;
  --cb-seafoam-deep: #4C6E63;

  /* Sage — botanical embellishment (sprigs, marks) */
  --cb-olive:        #6E7A66;
  --cb-olive-deep:   #49513F;

  /* Taupe — warmth (board: #8B857B) proposals, stationery, photography */
  --cb-tobacco:      #8B857B;
  --cb-tobacco-soft: #B4AEA4;
  --cb-taupe:        #8B857B;
  --cb-taupe-deep:   #5A554D;

  /* Dark surface partner to sea foam — deep taupe (was near-black ink). */
  --cb-surface-dark: #5A554D;

  /* Butter — warm accent (board: #EAD39A) fine rules, highlights */
  --cb-butter:       #EAD39A;
  --cb-butter-deep:  #C9A24A;

  /* Stainless — cool grey companion (board: #C7C9CC) */
  --cb-stainless:    #C7C9CC;

  /* Aliases retained for backward compat */
  --cb-blue:         #4C6E63;
  --cb-blue-mist:    #E3ECE7;
  --cb-blue-paper:   #DBD3C7;
  --cb-accent:       #C9A24A;
  --cb-espresso:     #28332E;

  /* Type */
  --cb-sans:  "Manrope", "Helvetica Neue", -apple-system, sans-serif;
  --cb-serif: "Playfair Display", "Roca", Georgia, serif;   /* display + italic accent */
  --cb-mono:  "JetBrains Mono", ui-monospace, monospace;

  /* Tracking */
  --cb-track-display: -0.01em;
  --cb-track-eyebrow: 0.26em;
  --cb-track-tag: 0.22em;
}

/* Generic helpers used throughout the artboards */
.cb-eyebrow {
  font-family: var(--cb-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--cb-track-eyebrow);
  text-transform: uppercase;
  color: var(--cb-ink);
}

.cb-tag {
  font-family: var(--cb-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--cb-track-tag);
  text-transform: uppercase;
  color: var(--cb-ink);
  opacity: 0.62;
}

.cb-rule {
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  border: 0;
}

/* Display headline — chunky high-contrast serif, the brand voice */
.cb-display {
  font-family: var(--cb-serif);
  font-weight: 600;
  letter-spacing: var(--cb-track-display);
  line-height: 1.0;
  color: var(--cb-ink);
}

.cb-serif-italic {
  font-family: var(--cb-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* Atmospheric placeholder — moody photo stand-in built from gradients */
.cb-photo {
  position: relative;
  overflow: hidden;
  background: var(--cb-warmstone);
  isolation: isolate;
}
.cb-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 80% 18%, rgba(250, 246, 236, 0.6), transparent 60%),
    radial-gradient(80% 60% at 18% 92%, rgba(76, 110, 99, 0.28), transparent 70%),
    linear-gradient(180deg, #E6DFCF 0%, #C7BFB0 58%, #8B857B 100%);
  z-index: 0;
}
.cb-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.55;
  z-index: 1;
}
.cb-photo > * { position: relative; z-index: 2; }

/* Photo variants — different moods, all from the brand palette */
.cb-photo--candle::before {
  background:
    radial-gradient(50% 60% at 70% 28%, rgba(234, 211, 154, 0.55), transparent 60%),
    radial-gradient(80% 80% at 40% 72%, rgba(30, 36, 32, 0.66), transparent 70%),
    linear-gradient(180deg, #3A453E 0%, #20281F 100%);
}
.cb-photo--blooms::before {
  background:
    radial-gradient(60% 50% at 30% 25%, rgba(246, 243, 237, 0.72), transparent 60%),
    radial-gradient(70% 60% at 76% 82%, rgba(159, 190, 184, 0.5), transparent 70%),
    linear-gradient(160deg, #ECE6D8 0%, #C3BCAE 60%, #8B857B 100%);
}
.cb-photo--linen::before {
  background:
    radial-gradient(70% 90% at 60% 40%, rgba(246, 243, 237, 0.85), transparent 60%),
    radial-gradient(60% 50% at 20% 90%, rgba(199, 201, 204, 0.5), transparent 70%),
    linear-gradient(140deg, #EFEADF 0%, #CDC6BA 60%, #908A80 100%);
}
.cb-photo--olive::before {
  background:
    radial-gradient(50% 50% at 70% 30%, rgba(246, 243, 237, 0.42), transparent 60%),
    radial-gradient(80% 70% at 30% 80%, rgba(36, 42, 30, 0.7), transparent 70%),
    linear-gradient(170deg, #6E7A66 0%, #3E4530 100%);
}
.cb-photo--tobacco::before {
  background:
    radial-gradient(50% 50% at 70% 30%, rgba(234, 211, 154, 0.5), transparent 60%),
    radial-gradient(80% 70% at 30% 80%, rgba(60, 50, 38, 0.68), transparent 70%),
    linear-gradient(170deg, #8B857B 0%, #4F4940 100%);
}
.cb-photo--mist::before {
  background:
    radial-gradient(70% 60% at 50% 28%, rgba(246, 243, 237, 0.7), transparent 70%),
    linear-gradient(180deg, #E3ECE7 0%, #9FBEB8 52%, #4C6E63 100%);
}
.cb-photo--paper::before {
  background:
    radial-gradient(100% 80% at 50% 40%, rgba(252, 250, 244, 0.5), transparent 70%),
    linear-gradient(180deg, #F6F3ED 0%, #DBD3C7 100%);
}

/* Optional subtle vignette over photo */
.cb-photo--vignette::after {
  background-image:
    radial-gradient(100% 100% at 50% 50%, transparent 45%, rgba(0,0,0,0.24) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: normal;
  opacity: 1;
}

/* hide scrollbars inside artboards */
.cb-noscroll::-webkit-scrollbar { display: none; }
.cb-noscroll { scrollbar-width: none; }

/* clickable selected-work tiles */
.cb-work-tile img,
.cb-work-tile image-slot { transition: transform 200ms cubic-bezier(0.3, 0, 0, 1); }
.cb-work-tile:hover img,
.cb-work-tile:hover image-slot { transform: scale(1.02); }

/* gallery masonry — responsive columns */
@media (max-width: 900px) { .cb-gallery-cols { column-count: 2 !important; } }
@media (max-width: 560px) { .cb-gallery-cols { column-count: 1 !important; } }

/* ─────────────────────────────────────────────────────────────────────
   Responsive layer for the live website (#root pages).
   Collapses multi-column grids, shrinks margins + display type, wraps nav.
   ───────────────────────────────────────────────────────────────────── */

/* Tablet — multi-column grids step down to two */
@media (max-width: 1024px) {
  #root [style*="grid-template-columns: repeat(5"],
  #root [style*="grid-template-columns: repeat(4"],
  #root [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  #root nav { padding-left: 32px !important; padding-right: 32px !important; }
  #root section { padding-left: 40px !important; padding-right: 40px !important; }
}

/* Phone — single column, tighter margins, smaller display type */
@media (max-width: 680px) {
  /* Collapse every grid to a single column */
  #root [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  /* Tighter horizontal padding on every section */
  #root section { padding-left: 22px !important; padding-right: 22px !important; }
  /* Cap oversized display + headings so they never overflow */
  #root .cb-display { font-size: clamp(30px, 8.5vw, 46px) !important; line-height: 1.06 !important; }
  #root h1 { font-size: clamp(34px, 11vw, 56px) !important; line-height: 1.03 !important; }
  #root h2 { font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.08 !important; }
  /* Nav: hide desktop links, show hamburger */
  #root .cb-nav-desktop { display: none !important; }
  #root .cb-nav-burger { display: flex !important; }
  #root nav { padding: 18px 22px !important; }
  /* Stacked image+text heroes: drop the giant gaps */
  #root [style*="gap: 80px"],
  #root [style*="gap: 72px"] { gap: 36px !important; }
}