/* Ween’s Projects — refined pink, not plastic */

:root{
  --bg: #fff7fb;
  --paper: rgba(255,255,255,.78);
  --paper2: rgba(255,255,255,.90);

  --ink: #1e1226;
  --muted: rgba(30, 18, 38, .68);
  --line: rgba(30, 18, 38, .12);

  --pink: #ff3ea5;
  --pink2: #ff66b9;
  --hot: #ff0a8a;
  --plum: #2a0f26;

  --shadow: 0 20px 60px rgba(16, 8, 22, .16);
  --shadow2: 0 10px 26px rgba(16, 8, 22, .12);

  --radius: 18px;
  --radius2: 26px;

  --max: 1020px;
  --headerH: 74px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1100px 700px at 12% 10%, rgba(255, 62, 165, .16), transparent 60%),
    radial-gradient(900px 650px at 86% 16%, rgba(255, 102, 185, .14), transparent 62%),
    radial-gradient(1100px 800px at 62% 92%, rgba(255, 62, 165, .10), transparent 62%),
    linear-gradient(180deg, var(--bg), #fffaf2);
  font-family: "Fraunces", serif;
  font-variation-settings: "opsz" 80;
}

/* restrained grain (was too loud) */
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  opacity:.035;
}

a{ color:inherit; text-decoration:none; }

.container{
  max-width:var(--max);
  margin:0 auto;
  padding: calc(var(--headerH) + 32px) 18px 76px;
}

/* Header */
.header{
  position:fixed;
  inset:0 0 auto 0;
  height: var(--headerH);
  display:flex;
  align-items:center;
  z-index: 50;
  background:
    linear-gradient(90deg, rgba(255, 62, 165, .94), rgba(255, 102, 185, .90));
  border-bottom: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 34px rgba(16, 8, 22, .18);
  backdrop-filter: blur(10px);
}

.header-inner{
  max-width:var(--max);
  margin:0 auto;
  width:100%;
  padding: 0 14px;
  display:flex;
  align-items:center;
  gap: 14px;
}

.brand{
  display:flex;
  align-items:baseline;
  gap: 10px;
  color: #fff;
  white-space:nowrap;
}

.brand .title{
  font-family:"Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 20px;
  line-height:1;
  text-shadow: 0 1px 0 rgba(0,0,0,.08);
}

.brand .tag{
  font-family:"Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  opacity:.88;
}

.hamburger{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow: 0 12px 18px rgba(0,0,0,.12);
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
}
.hamburger:hover{ transform: translateY(-1px); background: rgba(255,255,255,.22); box-shadow: 0 16px 22px rgba(0,0,0,.14); }
.hamburger:active{ transform: translateY(0px) scale(.99); }

.hamburger .lines{
  width: 20px;
  height: 14px;
  position:relative;
}
.hamburger .lines span{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background: rgba(255,255,255,.96);
  border-radius: 999px;
}
.hamburger .lines span:nth-child(1){ top:0; }
.hamburger .lines span:nth-child(2){ top:6px; width: 78%; }
.hamburger .lines span:nth-child(3){ bottom:0; }

.header-spacer{ flex:1; }

/* Drawer */
.drawer-backdrop{
  position:fixed;
  inset:0;
  background: rgba(16, 8, 22, .46);
  backdrop-filter: blur(6px);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index: 55;
}
.drawer{
  position:fixed;
  top: 12px;
  left: 12px;
  width: min(440px, calc(100vw - 24px));
  height: calc(100vh - 24px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
  border: 1px solid rgba(30, 18, 38, .12);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  transform: translateX(-110%);
  transition: transform .22s cubic-bezier(.18,.9,.2,1);
  z-index: 60;
  overflow:hidden;
}
.drawer.open{ transform: translateX(0); }
.drawer-backdrop.open{ opacity:1; pointer-events:auto; }

.drawer-header{
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--line);
  display:flex;
  align-items:center;
  gap: 12px;
}
.drawer-header .drawer-title{
  font-family:"Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing:.2px;
}
.drawer-header .drawer-close{
  margin-left:auto;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 62, 165, .08);
  cursor:pointer;
  transition: transform .14s ease, background .14s ease;
}
.drawer-header .drawer-close:hover{ transform: translateY(-1px); background: rgba(255, 62, 165, .12); }

.drawer-content{
  padding: 14px 18px 18px;
  height: calc(100% - 70px);
  overflow:auto;
}

.nav-section{ margin: 12px 0 18px; }
.nav-label{
  font-family:"Bricolage Grotesque", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.nav-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(30, 18, 38, .10);
  background:
    linear-gradient(180deg, rgba(255, 233, 244, .72), rgba(255,255,255,.70));
  box-shadow: var(--shadow2);
  margin-bottom: 10px;
  transition: transform .14s ease, background .14s ease;
}
.nav-link:hover{ transform: translateY(-1px); background: rgba(255, 233, 244, .92); }

.nav-link .name{
  font-family:"Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 820;
}
.nav-link .meta{
  font-family:"Fraunces", serif;
  font-style: italic;
  color: var(--muted);
  font-size: 12px;
}

/* Content blocks */
.hero{
  border: 1px solid rgba(30, 18, 38, .12);
  border-radius: var(--radius2);
  background: linear-gradient(180deg, var(--paper2), var(--paper));
  box-shadow: var(--shadow);
  padding: 26px 24px;
  overflow:hidden;
  position:relative;
}
.hero:after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 260px at 14% 18%, rgba(255, 62, 165, .14), transparent 60%),
    radial-gradient(650px 300px at 78% 18%, rgba(255, 102, 185, .12), transparent 62%);
  pointer-events:none;
}

.hero h1{
  position:relative;
  margin: 0 0 10px;
  font-family:"Bricolage Grotesque", system-ui, sans-serif;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.hero p{
  position:relative;
  margin:0;
  color: var(--muted);
  font-size: 16px;
  line-height:1.6;
  max-width: 68ch;
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 18px;
}

.card{
  border: 1px solid rgba(30, 18, 38, .12);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.84);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.card-inner{ padding: 22px 22px; }

.post-title{
  font-family:"Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 3.2vw, 38px);
  margin:0 0 10px;
  letter-spacing: -0.02em;
}

.post-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px 10px;
  align-items:center;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 62, 165, .10);
  border: 1px solid rgba(255, 62, 165, .18);
}

.markdown{
  font-family:"Fraunces", serif;
  line-height: 1.75;
  font-size: 16px;
}
.markdown h2,.markdown h3{
  font-family:"Bricolage Grotesque", system-ui, sans-serif;
  letter-spacing: -0.01em;
  margin-top: 26px;
}
.markdown a{ color: var(--hot); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.markdown code{ background: rgba(30,18,38,.08); padding: 2px 6px; border-radius: 10px; }
.markdown pre{
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(30,18,38,.06);
  overflow:auto;
  border: 1px solid rgba(30,18,38,.10);
}

.markdown img{
  max-width: 100%;
  height:auto;
  border-radius: 18px;
  border: 1px solid rgba(30,18,38,.10);
  box-shadow: var(--shadow2);
  margin: 12px 0;
}

.footer-nav{
  display:flex;
  gap: 12px;
  justify-content: space-between;
  align-items:center;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,233,244,.30));
}

.btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(30, 18, 38, .14);
  background: rgba(255,255,255,.88);
  cursor:pointer;
  box-shadow: var(--shadow2);
  transition: transform .14s ease, background .14s ease;
  font-family:"Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 900;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.98); }
.btn:active{ transform: translateY(0px) scale(.99); }
.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

.small{ font-size: 12px; color: var(--muted); }

/* focus */
:focus-visible{ outline: 3px solid rgba(255, 62, 165, .45); outline-offset: 3px; border-radius: 12px; }

@media (min-width: 900px){
  .grid{ grid-template-columns: 1.1fr .9fr; }
}

@media (max-width: 520px){
  .brand .tag{ display:none; }
  .card-inner{ padding: 18px 18px; }
  .hero{ padding: 22px 18px; }
}