@font-face{
  font-family: "Whispers";
  src: url("/fonts/SourceSerif4-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

@font-face{
  font-family: "Whispers";
  src: url("/fonts/SourceSerif4-Italic-Variable.woff2") format("woff2");
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
}

:root{
  --ff: "Whispers", serif;
}

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

html{
  margin: 0;
  padding: 0;

  font-family: var(--ff);
  line-height: 1.5;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  font-synthesis: none;

  font-optical-sizing: none;
  font-variation-settings: "opsz" 16;
}

body{
  margin: 0;
  padding: 0;
  font-family: inherit;
}

img { max-width: 100%; height: auto; display: block; }

button, input, textarea, select { font: inherit; color: inherit; }

a { color: inherit; text-decoration-skip-ink: auto; }

* { -webkit-tap-highlight-color: transparent; }
a, button { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }

:root{
  --bg: #1a1a1a;
  --fg: #0b0c10;

  --page-surface: #fff;
  --text: #2c2b29;
  --text-muted: rgba(44,43,41,.78);

  --ff-ui: var(--ff);
  --ff-serif: var(--ff);

  --wrap-max: 1200px;
  --wrap-pad: 20px;
  --vh: 1vh;

  --motion-fast: 140ms;
  --motion-normal: 240ms;
  --motion-slow: 360ms;
  --ease-soft: cubic-bezier(.16, .84, .44, 1);
  --ease-smooth: cubic-bezier(.33, 1, .68, 1);

  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);

  --glass-bg: rgba(255, 214, 140, 0.22);
  --glass-bg-2: rgba(255, 214, 140, 0.14);
  --glass-border: rgba(255, 232, 190, 0.22);
  --glass-shadow: 0 10px 30px rgba(0,0,0,.18);
  --glass-inset: inset 0 1px 8px rgba(255,255,255,.18);

  --glass-fallback-bg:
    radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.16), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    rgba(255, 214, 140, 0.30);
  --glass-fallback-shadow: 0 10px 26px rgba(0,0,0,.14), inset 0 1px 8px rgba(255,255,255,.18);

  --glass-blur: 10px;
  --glass-sat: 1.40;

  --nav-glass: rgba(255,255,255,.15);
  --nav-border: rgba(255,255,255,.18);
  --nav-shadow: 0 8px 26px rgba(0,0,0,.20);
  --nav-text: #1a1917;
  --nav-text-hover: #111111;

  --btn-bg: rgba(255,255,255,.32);
  --btn-bg-hover: rgba(255,255,255,.44);
  --btn-border: rgba(255,255,255,.45);
  --btn-border-hover: rgba(255,255,255,.60);
  --btn-text: #2b2a27;
  --btn-radius: 12px;

  --scrollbar-thumb: rgba(255,255,255,.44);
  --scrollbar-thumb-hover: rgba(255,255,255,.75);
  --scrollbar-track: #3a3a3abb;
  --scrollbar-width: 7px;

  --nav-margin: 10px 0 10px;
}

html{
  background: var(--bg);
  font-size: 16px;
  scroll-behavior: smooth;

  overflow-x: hidden;
  overscroll-behavior-x: none;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  position: relative;
  z-index: 1;

  overflow-x: hidden;
  overscroll-behavior-x: none;

  min-height: 100vh;
  min-height: 100dvh;

  overflow-x: hidden;

  background: var(--page-surface);
  color: var(--fg);

  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-optical-sizing: auto;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  opacity: 0;
  transition: opacity var(--motion-normal) var(--ease-soft);
}

body.is-active{ opacity: 1; }

body::before{
  content: "";
  position: fixed;
  inset: 0;
  width: 100%;
  height: calc(100vh + 200px);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;

  background:
    var(--page-bg-desktop, none) center / cover no-repeat,
    radial-gradient(1200px 600px at 50% 0%, rgba(255,205,90,.14), transparent 60%);
  background-attachment: fixed;

  transform: translateZ(0);
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (hover: none) and (pointer: coarse) {
  body::before { background-attachment: scroll !important; }
}

.wrap{
  position: relative;
  z-index: 1;

  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: var(--wrap-pad);
}

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

.nav{
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--nav-margin);
}

.nav .menu{
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 28px);
  padding: clamp(6px, 1vw, 10px) clamp(12px, 2.4vw, 22px);
  border-radius: 999px;

  background: var(--nav-glass);
  border: transparent;
  box-shadow: var(--nav-shadow);

  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.nav .menu a{
  text-transform: uppercase;
  font-size: 1.22rem;
  letter-spacing: .12em;
  font-weight: 650;
  font-family: var(--ff);
  text-decoration: none;

  color: var(--nav-text);
  opacity: .95;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);

  transition:
    color var(--motion-fast) var(--ease-soft),
    opacity var(--motion-fast) var(--ease-soft),
    transform var(--motion-fast) var(--ease-soft);
}

.nav .menu a:hover{
  color: var(--nav-text-hover);
  opacity: 1;
  transform: translateY(-1px);
}

.nav .menu a[aria-current="page"]{
  text-decoration: underline;
  text-underline-offset: 6px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav .menu{
    background:
      radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.16), rgba(255,255,255,0) 55%),
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
      rgba(255, 214, 140, 0.30);
    box-shadow: 0 10px 26px rgba(0,0,0,.14), inset 0 1px 8px rgba(255,255,255,.18);
  }
}

.read-btn,
.btn-primary,
.btn-secondary{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 8px 26px;
  border-radius: var(--btn-radius);

  background-color: var(--btn-bg);
  border: transparent;

  color: var(--btn-text);
  -webkit-text-fill-color: var(--btn-text);
  text-decoration: none;

  font-family: var(--ff);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.12em;

  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);

  box-shadow:
    0 6px 18px rgba(0,0,0,.15),
    inset 0 1px 8px rgba(255,255,255,.25);

  transition:
    transform var(--motion-normal) var(--ease-soft),
    box-shadow var(--motion-normal) var(--ease-soft),
    opacity var(--motion-fast) var(--ease-soft);

  will-change: transform, opacity;
}

@media (hover:hover) and (pointer:fine){
  .read-btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover{
    transform: translateY(-1px);
    box-shadow:
      0 8px 24px rgba(0,0,0,.22),
      inset 0 1px 10px rgba(255,255,255,.28);
  }
}

.read-btn:active,
.btn-primary:active,
.btn-secondary:active{ transform: translateY(0); }

.read-btn:disabled,
.read-btn[aria-disabled="true"],
.btn-primary:disabled,
.btn-primary[aria-disabled="true"],
.btn-secondary:disabled,
.btn-secondary[aria-disabled="true"]{
  opacity: .65;
  pointer-events: none;
}

html, body{
  scrollbar-width: auto;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{ background: var(--scrollbar-track); }

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{ background: var(--scrollbar-thumb-hover); }

@media (max-width: 1024px), (hover: none){
  :root{
    --glass-blur: 0px;
    --glass-sat: 1.00;
    --scrollbar-width: 6px;

    --glass-bg: rgba(255, 214, 140, 0.30);
    --glass-bg-2: rgba(255, 214, 140, 0.20);
    --glass-border: rgba(255, 232, 190, 0.28);

  }

  .nav .menu,
  .read-btn,
  .btn-primary,
  .btn-secondary{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    background: rgba(255, 255, 255, 0.33);
    box-shadow: var(--glass-fallback-shadow);
  }

  body::before{
    background:
      var(--page-bg-mobile, var(--page-bg-desktop, none)) center/cover no-repeat,
      radial-gradient(1200px 600px at 50% 0%, rgba(255,205,90,.14), transparent 60%);
  }
}

@media (max-width:399px){ 
  :root{ --wrap-pad: clamp(12px, calc(3.899px + 2.531646vw), 14px); } 
  .nav .menu a{ font-size: clamp(0.97rem, calc(0.524253rem + 2.227848vw), 1.08rem); letter-spacing: clamp(0.07em, calc(0.120506em - 0.012658vw), 0.08em); }
  .nav .menu{ gap: clamp(8px, calc(3.949px + 1.265823vw), 9px); padding: clamp(6px, calc(1.949px + 1.265823vw), 7px) clamp(12px, calc(3.899px + 2.531646vw), 14px); }
}

@media (min-width: 400px) and (max-width: 767px){
  :root{ --wrap-pad: clamp(14px, calc(11.820163px + 0.544959vw), 16px); }
  .nav .menu a{ font-size: clamp(1.08rem, calc(0.731226rem + 1.395095vw), 1.4rem); letter-spacing: clamp(0.07em, calc(0.090899em - 0.027248vw), 0.08em); }
  .nav .menu{ gap: clamp(9px, calc(5.729427px + 0.817438vw), 12px); padding: clamp(7px, calc(4.820163px + 0.544959vw), 9px) clamp(14px, calc(7.458039px + 1.634877vw), 20px); }
}

@media (min-width: 768px) and (max-width: 1024px){
  :root{ --wrap-pad: clamp(16px, calc(-14px + 3.90625vw), 26px); }
  .nav .menu a{ font-size: clamp(1.4rem, calc(-0.4rem + 3.75vw), 2rem); letter-spacing: clamp(0.07em, calc(0.11em - 0.00390625vw), 0.08em); }
  .nav .menu{ gap: clamp(12px, calc(3px + 1.171875vw), 15px); padding: clamp(9px, calc(6px + 0.390625vw), 10px) clamp(20px, calc(14px + 0.78125vw), 22px); }
}

@media (min-width: 1025px) and (max-width: 2560px){
  :root{ --wrap-pad: clamp(10px, calc(6.6612px + 0.3257vw), 15px); --wrap-max: clamp(900px, calc(365.7980px + 52.1173vw), 1700px); }
  .nav .menu a{ font-size: clamp(1.2rem, calc(0.6658rem + 0.8339vw), 2rem); letter-spacing: clamp(.06em, calc(0.0466em + 0.0208vw), .08em); }
  .nav .menu{ gap: clamp(15px, calc(11.6612px + 0.3257vw), 20px); padding: clamp(7px,  calc(4.997px + 0.1954vw), 10px) clamp(15px, calc(11.661px + 0.3257vw), 20px); }
}

@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}