/* Sculpino design tokens and the Liquid Glass material.
   Web translation of Apple's Liquid Glass rules: glass is for controls and floating surfaces, it sits over real
   content rather than opaque fills, interactive pieces respond to the pointer, sibling controls share one container
   and selection morphs instead of jumping. */

@font-face { font-family: 'Outfit'; src: url('../assets/fonts/outfit.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('../assets/fonts/outfit-ext.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1EFF; }
@font-face { font-family: 'Figtree'; src: url('../assets/fonts/figtree.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../assets/fonts/figtree-ext.woff2') format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0100-02BA, U+1E00-1EFF; }

:root {
  --ink: #2b2d2c;
  --ink-soft: color-mix(in srgb, var(--ink) 74%, transparent);
  --paper: #fff8f0;
  --peach: #f2a98f;
  --peach-deep: #e58b6d;
  --sage: #a8b5a0;
  --sage-deep: #5e6b57;
  --sand: #efdfc6;
  --sky: #b7c6d3;
  --danger: #a93a22;

  --font-display: 'Outfit', 'Avenir Next', 'Segoe UI', sans-serif;
  --font-body: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --text-hero: clamp(3rem, 1.2rem + 6.4vw, 6.6rem);
  --text-h2: clamp(2.1rem, 1.3rem + 3vw, 4rem);
  --text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);

  --gutter: clamp(18px, 4.5vw, 64px);
  --section: clamp(72px, 5rem + 5vw, 168px);
  --r-xl: 40px;
  --r-lg: 28px;
  --r-md: 18px;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --glass-fill: linear-gradient(140deg, rgb(255 255 255 / 0.58), rgb(255 255 255 / 0.22) 55%, rgb(255 255 255 / 0.34));
  --glass-edge:
    inset 0 1px 0.5px rgb(255 255 255 / 0.95),
    inset 1px 0 0.5px rgb(255 255 255 / 0.45),
    inset 0 -1px 1px rgb(255 255 255 / 0.5),
    inset 0 -10px 22px -14px rgb(255 255 255 / 0.85),
    inset 0 10px 26px -18px rgb(255 255 255 / 0.9);
  --glass-drop: 0 1px 2px rgb(60 45 30 / 0.08), 0 22px 54px -22px rgb(60 45 30 / 0.38);
}

/* ---------- The material ---------- */
.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(20px) saturate(185%);
  backdrop-filter: blur(20px) saturate(185%);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-edge), var(--glass-drop);
}
/* Pointer-tracked specular highlight */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 30%) var(--my, 0%), rgb(255 255 255 / 0.6), transparent 70%);
  opacity: 0.75;
  transition: opacity 0.4s;
}
/* Chromium only (class set by site.js): real refraction of what is behind the glass. */
.can-refract .glass--lens {
  -webkit-backdrop-filter: url(#lg-refract) blur(5px) saturate(185%);
  backdrop-filter: url(#lg-refract) blur(5px) saturate(185%);
}

.btn {
  --btn-bg: var(--glass-fill);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--ink);
  font: 600 1rem/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  box-shadow: var(--glass-edge), 0 10px 24px -12px rgb(60 45 30 / 0.4);
  transition: transform 0.45s var(--spring), box-shadow 0.3s;
}
.btn:hover { transform: scale(1.04); }
.btn:active { transform: scale(0.96); transition-duration: 0.12s; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform 0.45s var(--spring); }
.btn:hover svg { transform: translateX(3px); }
.btn--tint {
  --btn-bg: linear-gradient(140deg, rgb(248 186 160 / 0.95), rgb(236 145 113 / 0.82));
  box-shadow: var(--glass-edge), 0 14px 30px -12px rgb(214 110 75 / 0.7);
}
.btn--ink {
  --btn-bg: linear-gradient(140deg, #3b3e3c, #222423);
  color: var(--paper);
  box-shadow: inset 0 1px 0.5px rgb(255 255 255 / 0.35), 0 16px 32px -14px rgb(20 20 20 / 0.7);
}
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 1.06rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: progress; transform: none; }

/* Morphing segmented control: real radios, one sliding bead. */
.seg {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 4px;
  border: 0;
  margin: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.28);
  box-shadow: inset 0 1px 3px rgb(60 45 30 / 0.16), inset 0 -1px 0.5px rgb(255 255 255 / 0.7);
}
.seg__bead {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: linear-gradient(140deg, rgb(255 255 255 / 0.96), rgb(255 255 255 / 0.68));
  box-shadow: var(--glass-edge), 0 6px 16px -6px rgb(60 45 30 / 0.45);
  transition: transform 0.55s var(--spring);
}
.seg:has(label:nth-of-type(2) input:checked) .seg__bead { transform: translateX(100%); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span {
  display: block;
  padding: 11px 14px;
  border-radius: 999px;
  text-align: center;
  font: 600 0.96rem/1.1 var(--font-body);
  color: var(--ink-soft);
  transition: color 0.25s;
}
.seg input:checked + span { color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--sage-deep); outline-offset: 2px; }

:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 3px; }

/* Readability first for people who ask for it, and where backdrop blur is missing. */
@media (prefers-reduced-transparency: reduce) {
  .glass, .btn:not(.btn--tint, .btn--ink) { background: rgb(255 250 244 / 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .btn:not(.btn--tint, .btn--ink) { background: rgb(255 250 244 / 0.94); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}