/* Absurdist.io – Catppuccin Mocha palette, Monaspace font family */

/* ---- Web-font embeds (Monaspace via Fontsource CDN) ---- */
@font-face{font-family:"Monaspace Neon";font-style:normal;font-display:swap;font-weight:200;src:url("https://cdn.jsdelivr.net/fontsource/fonts/monaspace-neon@latest/latin-200-normal.woff2") format("woff2")}
@font-face{font-family:"Monaspace Neon";font-style:normal;font-display:swap;font-weight:400;src:url("https://cdn.jsdelivr.net/fontsource/fonts/monaspace-neon@latest/latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Monaspace Neon";font-style:normal;font-display:swap;font-weight:500;src:url("https://cdn.jsdelivr.net/fontsource/fonts/monaspace-neon@latest/latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Monaspace Neon";font-style:normal;font-display:swap;font-weight:700;src:url("https://cdn.jsdelivr.net/fontsource/fonts/monaspace-neon@latest/latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Monaspace Neon";font-style:italic;font-display:swap;font-weight:400;src:url("https://cdn.jsdelivr.net/fontsource/fonts/monaspace-neon@latest/latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Monaspace Argon";font-style:normal;font-display:swap;font-weight:400;src:url("https://cdn.jsdelivr.net/fontsource/fonts/monaspace-argon@latest/latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Monaspace Krypton";font-style:normal;font-display:swap;font-weight:700;src:url("https://cdn.jsdelivr.net/fontsource/fonts/monaspace-krypton@latest/latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Monaspace Krypton";font-style:normal;font-display:swap;font-weight:800;src:url("https://cdn.jsdelivr.net/fontsource/fonts/monaspace-krypton@latest/latin-800-normal.woff2") format("woff2")}

/* ---- Box-model reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ---- Catppuccin design tokens (with automatic light/dark mode) ---- */
:root{
  /* Dark mode colors (Mocha) - default */
  --bg:#11111b;--surface:#1e1e2e;
  --surface-up:#313244;--border:#45475a;
  --txt:#cdd6f4;--txt-dim:#a6adc8;
  --accent:#cba6f7;--accent-hi:#b4befe;
  --ctp-base:#1e1e2e;--ctp-mantle:#181825;--ctp-crust:#11111b;
  --ctp-surface0:#313244;--ctp-surface1:#45475a;--ctp-surface2:#585b70;
  --ctp-overlay0:#6c7086;--ctp-text:#cdd6f4;
  --ctp-subtext0:#a6adc8;--ctp-subtext1:#bac2de;
  --ctp-lavender:#b4befe;--ctp-blue:#89b4fa;--ctp-sapphire:#74c7ec;
  --ctp-teal:#94e2d5;--ctp-green:#a6e3a1;--ctp-mauve:#cba6f7;
  --ctp-pink:#f5c2e7;--ctp-peach:#fab387;--ctp-red:#f38ba8;
  --ctp-yellow:#f9e2af;--ctp-flamingo:#f2cdcd;--ctp-rosewater:#f5e0dc;
  --rad:16px;
  --body-font:"Monaspace Neon",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --mono-font:"Monaspace Argon","Monaspace Neon",monospace;
  --display-font:"Monaspace Krypton","Monaspace Neon",monospace;
}

/* Light mode colors (Latte) */
@media(prefers-color-scheme:light){
  :root{
    --bg:#dce0e8;--surface:#eff1f5;
    --surface-up:#ccd0da;--border:#bcc0cc;
    --txt:#4c4f69;--txt-dim:#6c6f85;
    --accent:#8839ef;--accent-hi:#7287fd;
    --ctp-base:#eff1f5;--ctp-mantle:#e6e9ef;--ctp-crust:#dce0e8;
    --ctp-surface0:#ccd0da;--ctp-surface1:#bcc0cc;--ctp-surface2:#acb0be;
    --ctp-overlay0:#9ca0b0;--ctp-text:#4c4f69;
    --ctp-subtext0:#6c6f85;--ctp-subtext1:#5c5f77;
    --ctp-lavender:#7287fd;--ctp-blue:#1e66f5;--ctp-sapphire:#209fb5;
    --ctp-teal:#179299;--ctp-green:#40a02b;--ctp-mauve:#8839ef;
    --ctp-pink:#ea76cb;--ctp-peach:#fe640b;--ctp-red:#d20f39;
    --ctp-yellow:#df8e1d;--ctp-flamingo:#dd7878;--ctp-rosewater:#dc8a78;
  }
}

html{scroll-behavior:smooth}

body{
  font-family:var(--body-font);
  background:var(--bg);
  color:var(--txt);
  min-height:100vh;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--accent);text-decoration:none;transition:color .15s}
a:hover,a:focus-visible{color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Visually hidden but accessible to screen readers */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---- Wrapper ---- */
.site-wrap{max-width:900px;margin:0 auto;padding:0 24px}

/* ==== HERO ==== */
.hero{position:relative;text-align:center;padding:100px 24px 80px;overflow:visible}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(ellipse 70% 50% at 20% 40%,rgba(203,166,247,.14) 0%,transparent 70%),
    radial-gradient(ellipse 60% 60% at 80% 30%,rgba(137,180,250,.10) 0%,transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 80%,rgba(148,226,213,.08) 0%,transparent 70%),
    linear-gradient(170deg,var(--ctp-crust) 0%,var(--ctp-mantle) 40%,var(--ctp-base) 100%);
}
.hero>*{position:relative;z-index:1}

@media(prefers-color-scheme:light){
  .hero::before{
    background:
      radial-gradient(ellipse 70% 50% at 20% 40%,rgba(136,57,239,.08) 0%,transparent 70%),
      radial-gradient(ellipse 60% 60% at 80% 30%,rgba(30,102,245,.06) 0%,transparent 70%),
      radial-gradient(ellipse 50% 40% at 50% 80%,rgba(23,146,153,.05) 0%,transparent 70%),
      linear-gradient(170deg,var(--ctp-crust) 0%,var(--ctp-mantle) 40%,var(--ctp-base) 100%);
  }
}

/* ---- Striped / tilted logo ---- */
.logo-wrap{position:relative;display:inline-block;padding:0 12px}
.logo-wrap::before{
  content:"";position:absolute;top:50%;left:50%;
  width:115%;height:150%;
  transform:translate(-50%,-50%) rotate(3deg);
  border-radius:38% 62% 55% 45% / 50% 40% 60% 50%;
  background:linear-gradient(135deg,rgba(203,166,247,.10),rgba(137,180,250,.06) 50%,rgba(148,226,213,.08));
  z-index:-1;filter:blur(24px);
}

@media(prefers-color-scheme:light){
  .logo-wrap::before{
    background:linear-gradient(135deg,rgba(136,57,239,.12),rgba(30,102,245,.08) 50%,rgba(23,146,153,.10));
  }
}

.logo{
  font-family:var(--display-font);
  font-size:clamp(2.8rem,8vw,5.5rem);
  font-weight:800;
  letter-spacing:.06em;
  line-height:1.3;
  display:inline-block;
  margin-bottom:20px;
  padding:8px 0;
  color:var(--ctp-mauve);
  filter:drop-shadow(0 0 18px rgba(203,166,247,.25));
}

@media(prefers-color-scheme:light){
  .logo{
    filter:drop-shadow(0 0 18px rgba(136,57,239,.20));
  }
}

/* Each letter gets its own stripe gradient so rotation doesn't clip */
.logo-char{
  display:inline-block;
  background:repeating-linear-gradient(
    to bottom,
    var(--ctp-pink) 0px, var(--ctp-pink) 6px,
    var(--ctp-crust) 6px, var(--ctp-crust) 8px,
    var(--ctp-mauve) 8px, var(--ctp-mauve) 14px,
    var(--ctp-crust) 14px, var(--ctp-crust) 16px,
    var(--ctp-lavender) 16px, var(--ctp-lavender) 22px,
    var(--ctp-crust) 22px, var(--ctp-crust) 24px,
    var(--ctp-blue) 24px, var(--ctp-blue) 30px,
    var(--ctp-crust) 30px, var(--ctp-crust) 32px,
    var(--ctp-teal) 32px, var(--ctp-teal) 38px,
    var(--ctp-crust) 38px, var(--ctp-crust) 40px
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* Only the first two (Ab) and last two (io) letters are rotated */
.logo-char:nth-child(1){transform:rotate(-4deg)}
.logo-char:nth-child(2){transform:rotate(3deg)}
.logo-char:nth-child(11){transform:rotate(-3deg)}
.logo-char:nth-child(12){transform:rotate(4deg)}

/* Reusable inline branding with rotated Ab/io and colours (nav, footer) */
.brand-char{display:inline-block}
.brand-char:nth-child(1){transform:rotate(-3deg);color:var(--ctp-pink)}
.brand-char:nth-child(2){transform:rotate(2deg);color:var(--ctp-mauve)}
.brand-char:nth-child(11){transform:rotate(-2deg);color:var(--ctp-blue)}
.brand-char:nth-child(12){transform:rotate(3deg);color:var(--ctp-teal)}

.hero-tagline{
  font-size:clamp(1rem,2.5vw,1.2rem);
  color:var(--ctp-subtext1);font-weight:400;
  margin-bottom:24px;
}

.hero-blurb{
  max-width:520px;margin:0 auto;
  color:var(--txt-dim);font-size:.95rem;line-height:1.7;
}

/* ==== PEDAL CARDS ==== */
.pedals-area{padding:56px 0 48px}

.section-title{
  font-family:var(--display-font);font-size:1.4rem;
  font-weight:700;color:var(--txt);margin-bottom:24px;letter-spacing:.02em;
}

.pedal-card{
  display:block;padding:32px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--rad);text-decoration:none;color:inherit;
  box-shadow:0 2px 12px rgba(0,0,0,.15);
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
a.pedal-card:hover,a.pedal-card:focus-visible{
  transform:translateY(-3px);border-color:var(--accent);
  box-shadow:0 8px 28px rgba(203,166,247,.12);text-decoration:none;
}

@media(prefers-color-scheme:light){
  .pedal-card{
    box-shadow:0 2px 12px rgba(0,0,0,.08);
  }
  a.pedal-card:hover,a.pedal-card:focus-visible{
    box-shadow:0 8px 28px rgba(136,57,239,.15);
  }
}

.pedal-card-head{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;margin-bottom:10px;
}
.pedal-card-head h3{
  font-family:var(--display-font);color:var(--txt);
  font-size:1.35rem;font-weight:700;letter-spacing:.01em;
}

.badge{
  font-family:var(--body-font);font-size:.75rem;padding:5px 14px;
  border-radius:100px;background:var(--accent);color:var(--ctp-crust);
  font-weight:700;white-space:nowrap;
}
.badge-green{
  background:var(--ctp-green);color:var(--ctp-crust);
}

.pedal-tagline{
  font-style:italic;color:var(--ctp-lavender);
  margin-bottom:14px;font-size:.92rem;
}

.pedal-card p{
  line-height:1.7;margin-bottom:14px;
  color:var(--txt-dim);font-size:.93rem;
}

/* ==== OPEN-SOURCE CALLOUT ==== */
.oss-strip{
  padding:48px 0;border-top:1px solid var(--border);text-align:center;
}
.oss-strip p{
  max-width:520px;margin:0 auto;color:var(--txt-dim);
  font-size:.95rem;line-height:1.7;
}

/* ==== FOOTER ==== */
footer{
  text-align:center;padding:32px 0;
  border-top:1px solid var(--border);
  color:var(--txt-dim);font-size:.85rem;margin-top:16px;
}
footer a{color:var(--accent)}

/* ==== RESPONSIVE ==== */
@media(max-width:600px){
  .hero{padding:64px 16px 56px}
  .pedal-card{padding:22px}
  .site-wrap{padding:0 16px}
}