:root{
    --paper:#FBF3E6;
    --paper-dim:#F2E8D7;
    --ink:#2B2622;
    --coral:#FF6B4A;
    --mustard:#E8A93C;
    --sage:#7A8B6F;
    --tape:#D9D2C4;
    --white:#FFFDF9;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Work Sans',sans-serif;
    font-size:16px;
    line-height:1.55;
  }
  h1,h2,h3{
    font-family:'Fraunces',serif;
    font-weight:600;
    margin:0;
    letter-spacing:-0.01em;
  }
  .scribble{
    font-family:'Caveat',cursive;
    color:var(--coral);
    font-weight:700;
  }
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1080px;margin:0 auto;padding:0 28px;}
  ::selection{background:var(--mustard);color:var(--ink);}

  /* focus visibility */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:3px solid var(--coral); outline-offset:3px;
  }

  /* NAV */
  header{
    position:sticky; top:0; z-index:50;
    background:var(--paper);
    border-bottom:2px solid var(--ink);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px;
  }
  .logo{
    font-family:'Fraunces',serif; font-weight:600; font-size:1.35rem;
    display:flex; align-items:baseline; gap:6px;
  }
  .logo .dot{color:var(--coral);}
  .navlinks{display:flex; gap:28px; list-style:none; margin:0; padding:0; font-size:0.95rem;}
  .navlinks a{text-decoration:none; position:relative; padding-bottom:3px;}
  .navlinks a:hover{color:var(--coral);}
  .ig-btn{
    background:var(--ink); color:var(--paper); text-decoration:none;
    padding:9px 18px; border-radius:100px; font-size:0.9rem; font-weight:500;
    white-space:nowrap;
  }
  .ig-btn:hover{background:var(--coral); color:var(--ink);}
  .navtoggle{display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--ink);}

  /* HERO */
  .hero{
    padding:90px 0 70px;
    position:relative;
    overflow:hidden;
  }
  .eyebrow{
    font-family:'Caveat',cursive; font-size:1.4rem; color:var(--sage); margin-bottom:6px; display:inline-block;
    transform:rotate(-2deg);
  }
  .hero h1{
    font-size:clamp(2.6rem, 6vw, 4.6rem);
    line-height:1.04;
    max-width:13ch;
  }
  .strike{ text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness:3px; opacity:0.45;}
  .hero p.sub{
    max-width:46ch; font-size:1.15rem; margin-top:22px; color:#52483F;
  }
  .hero-cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
  .btn-primary{
    background:var(--coral); color:var(--white); text-decoration:none;
    padding:14px 26px; border-radius:100px; font-weight:600; font-size:1rem;
    border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-primary:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink);}
  .btn-ghost{
    background:transparent; color:var(--ink); text-decoration:none;
    padding:14px 26px; border-radius:100px; font-weight:600; font-size:1rem;
    border:2px solid var(--ink);
  }
  .btn-ghost:hover{background:var(--ink); color:var(--paper);}

  .torn{
    position:relative; height:34px; width:100%;
    background:var(--paper);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q20 0 40 12 T80 8 T120 14 T160 6 T200 12 T240 4 T280 14 T320 8 T360 12 T400 4 T440 14 T480 6 T520 12 T560 8 T600 14 T640 4 T680 12 T720 8 T760 14 T800 6 T840 12 T880 4 T920 14 T960 8 T1000 12 T1040 6 T1080 14 T1120 8 T1160 12 T1200 6 V30 H0 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q20 0 40 12 T80 8 T120 14 T160 6 T200 12 T240 4 T280 14 T320 8 T360 12 T400 4 T440 14 T480 6 T520 12 T560 8 T600 14 T640 4 T680 12 T720 8 T760 14 T800 6 T840 12 T880 4 T920 14 T960 8 T1000 12 T1040 6 T1080 14 T1120 8 T1160 12 T1200 6 V30 H0 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  }

  section{padding:70px 0;}
  .section-dark{background:var(--ink); color:var(--paper);}
  .section-dark .scribble{color:var(--mustard);}
  .section-head{margin-bottom:42px; max-width:60ch;}
  .section-head .tag{
    font-family:'Caveat',cursive; font-size:1.3rem; transform:rotate(-2deg); display:inline-block; margin-bottom:4px;
  }
  .section-dark .section-head .tag{color:var(--mustard);}
  .section-head:not(.section-dark .section-head) .tag{color:var(--coral);}
  .section-head h2{font-size:clamp(1.8rem,4vw,2.6rem);}
  .section-head p{margin-top:12px; color:#52483F; max-width:50ch;}
  .section-dark .section-head p{color:#D8CFC0;}

  /* MUSIC */
  .tracks{display:flex; flex-direction:column; gap:16px;}
  .track{
    background:var(--paper-dim);
    border:2px solid var(--ink);
    border-radius:14px;
    padding:18px 20px;
    display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
    position:relative;
  }
  .track-num{font-family:'Fraunces',serif; font-size:1.6rem; color:var(--tape); font-weight:600; width:34px;}
  .track-meta h3{font-size:1.15rem;}
  .track-meta span{font-size:0.88rem; color:#7A7064;}
  .track audio{width:100%; margin-top:10px;}
  .track-note{
    font-family:'Caveat',cursive; font-size:1.05rem; color:var(--sage);
    position:absolute; right:18px; top:-10px; background:var(--mustard); color:var(--ink);
    padding:2px 10px; border-radius:4px; transform:rotate(4deg); font-weight:700; font-size:0.8rem;
    font-family:'Work Sans',sans-serif;
  }
  @media (max-width:600px){
    .track{grid-template-columns:1fr;}
    .track-num{display:none;}
  }

  /* BLOG */
  .blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .post{
    background:var(--white); border:2px solid var(--ink); border-radius:14px;
    padding:22px; display:flex; flex-direction:column; gap:10px;
    transition:transform .15s ease;
  }
  .post:hover{transform:translateY(-4px);}
  .post .cat{
    font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; font-weight:600;
    color:var(--coral);
  }
  .post h3{font-size:1.25rem; line-height:1.2;}
  .post p{font-size:0.92rem; color:#5B5147; margin:0;}
  .post .meta{font-size:0.8rem; color:#9A9082; margin-top:auto;}
  @media (max-width:860px){ .blog-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:600px){ .blog-grid{grid-template-columns:1fr;} }

  /* STORY SUBMIT */
  .notebook{
    background:var(--white);
    border:2px solid var(--paper);
    border-radius:16px;
    max-width:680px;
    margin:0 auto;
    padding:40px 36px;
    background-image: repeating-linear-gradient(var(--white) 0 38px, #ECE3D2 39px);
    background-position-y: 60px;
    position:relative;
    box-shadow:0 0 0 2px var(--ink);
  }
  .notebook::before{
    content:"";
    position:absolute; left:48px; top:0; bottom:0; width:2px; background:var(--coral); opacity:0.35;
  }
  form{display:flex; flex-direction:column; gap:18px; position:relative; z-index:1;}
  label{font-size:0.85rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:#7A7064;}
  input, textarea, select{
    width:100%; font-family:'Work Sans',sans-serif; font-size:1rem;
    border:none; border-bottom:2px solid var(--ink); background:transparent;
    padding:8px 2px; color:var(--ink);
  }
  textarea{resize:vertical; min-height:110px;}
  input:focus, textarea:focus, select:focus{outline:none; border-bottom-color:var(--coral);}
  .field{display:flex; flex-direction:column; gap:6px;}
  .submit-row{display:flex; align-items:center; gap:16px; margin-top:6px;}
  .formnote{font-size:0.82rem; color:#9A9082;}
  .confirm{
    display:none; text-align:center; padding:20px;
    font-family:'Caveat',cursive; font-size:1.4rem; color:var(--sage);
  }

  /* SHOP */
  .shop-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .item{
    background:var(--white); border:2px solid var(--ink); border-radius:14px;
    overflow:hidden; display:flex; flex-direction:column;
  }
  .item-art{
    aspect-ratio:4/3; background:linear-gradient(135deg, var(--mustard), var(--coral));
    display:flex; align-items:center; justify-content:center; position:relative;
  }
  .item-art span{font-family:'Fraunces',serif; font-size:1.1rem; color:var(--white); text-align:center; padding:0 20px; font-style:italic;}
  .item-body{padding:18px 20px; display:flex; flex-direction:column; gap:6px;}
  .item-body h3{font-size:1.05rem;}
  .item-body .price{font-weight:600;}
  .item-body button{
    margin-top:10px; background:var(--ink); color:var(--paper); border:none;
    padding:11px; border-radius:100px; font-weight:600; cursor:pointer; font-size:0.9rem;
  }
  .item-body button:hover{background:var(--coral); color:var(--ink);}
  @media (max-width:860px){ .shop-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:600px){ .shop-grid{grid-template-columns:1fr;} }
  .shop-banner{
    background:var(--mustard); border:2px solid var(--ink); border-radius:14px;
    padding:14px 20px; margin-bottom:30px; font-size:0.9rem; display:flex; gap:10px; align-items:center;
  }

  footer{
    background:var(--ink); color:var(--paper-dim); padding:50px 0 30px;
  }
  .footer-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px;}
  footer h3{font-family:'Fraunces',serif; color:var(--paper);}
  .foot-links{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:8px; font-size:0.92rem;}
  .foot-links a{text-decoration:none; opacity:0.85;}
  .foot-links a:hover{opacity:1; color:var(--mustard);}
  .footer-bottom{
    margin-top:40px; padding-top:20px; border-top:1px solid #423B33;
    font-size:0.82rem; opacity:0.6; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  }

  @media (max-width:760px){
    .navlinks{
      position:absolute; top:100%; left:0; right:0; background:var(--paper);
      flex-direction:column; padding:18px 28px; border-bottom:2px solid var(--ink);
      display:none; gap:16px;
    }
    .navlinks.open{display:flex;}
    .navtoggle{display:block;}
    .footer-grid{flex-direction:column;}
  }

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

/* POST PAGE */
.post-link{ text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px; height:100%; }
.post-link:hover h3{ color:var(--coral); }
.breadcrumb{
  font-size:0.9rem; text-decoration:none; color:var(--ink); opacity:0.7;
  display:inline-flex; align-items:center; gap:6px; margin-bottom:30px;
}
.breadcrumb:hover{ opacity:1; color:var(--coral); }
.post-hero{ padding:60px 0 20px; }
.post-hero .cat{
  font-family:'Caveat',cursive; font-size:1.3rem; color:var(--coral); transform:rotate(-2deg); display:inline-block;
}
.post-hero h1{ font-size:clamp(2rem,5vw,3.2rem); margin-top:8px; max-width:18ch; }
.post-hero .post-meta{ margin-top:16px; font-size:0.9rem; color:#7A7064; }
.post-body{ padding:10px 0 80px; max-width:680px; }
.post-body p{ font-size:1.08rem; margin:0 0 22px; color:#3A332C; }
.post-body p:first-of-type::first-letter{
  font-family:'Fraunces',serif; font-size:3.2rem; float:left; line-height:0.8; padding:6px 8px 0 0; color:var(--coral);
}
.placeholder-note{
  background:var(--paper-dim); border:2px dashed var(--tape); border-radius:12px;
  padding:18px 20px; font-size:0.92rem; color:#7A7064; margin-top:10px;
}
.post-divider{ width:60px; height:3px; background:var(--coral); border:none; margin:36px 0; }