:root{
    --kraft:#EDE4D3;
    --kraft-dark:#DFD2B8;
    --navy:#1D2B4F;
    --navy-soft:#2C3E67;
    --stamp:#B23A48;
    --ink:#26241F;
    --gold:#A9822C;
    --sage:#5B7F63;
    --paper:#FBF8F1;
    --line: rgba(38,36,31,0.14);
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --font-mono: 'Courier Prime', 'Courier New', monospace;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--kraft);color:var(--ink);font-family:var(--font-body);}
  #app{min-height:100vh;position:relative;}


  /* ===== Header ===== */
  header.site{
    background:var(--navy);color:var(--kraft);
    padding:18px 28px;display:flex;align-items:center;justify-content:space-between;
    border-bottom:4px solid var(--stamp);
    position:sticky;top:0;z-index:50;
  }
  .brand{display:flex;align-items:center;gap:12px;cursor:pointer;}
  .brand .mark{
    width:36px;height:36px;border:2px solid var(--kraft);border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);
    font-size:11px;letter-spacing:0.5px;transform:rotate(-8deg);
  }
  .brand h1{font-family:var(--font-display);font-weight:700;font-size:22px;margin:0;letter-spacing:0.3px;}
  .brand .sub{font-family:var(--font-mono);font-size:10px;color:var(--kraft-dark);letter-spacing:1.5px;text-transform:uppercase;margin-top:2px;}
  nav.main{display:flex;gap:4px;align-items:center;flex-wrap:wrap;}
  nav.main button{
    background:none;border:none;color:var(--kraft);font-family:var(--font-body);font-size:14px;
    padding:8px 14px;border-radius:20px;cursor:pointer;transition:background .15s;
  }
  nav.main button:hover, nav.main button.active{background:rgba(255,255,255,0.12);}
  nav.main .pill{
    background:var(--stamp);color:white;font-weight:600;
  }
  nav.main .pill:hover{background:#9c313d;}
  .hamburger{
    display:none; background:none; border:2px solid var(--kraft); color:var(--kraft);
    font-size:20px; line-height:1; padding:8px 12px; border-radius:6px; cursor:pointer;
  }

  main{max-width:1100px;margin:0 auto;padding:36px 24px 80px;}

  /* ===== Hero ===== */
  .hero{
    display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;
    padding:40px 0 50px;
  }
  .hero h2{font-family:var(--font-display);font-size:44px;line-height:1.08;margin:0 0 16px;font-weight:700;}
  .hero p.lede{font-size:17px;line-height:1.6;color:#3a382f;max-width:46ch;margin:0 0 24px;}
  .hero .stats{display:flex;gap:28px;margin-top:22px;}
  .hero .stat b{font-family:var(--font-display);font-size:26px;display:block;color:var(--navy);}
  .hero .stat span{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#6b6656;}
  .envelope-art{
    background:var(--paper);border:1.5px solid var(--ink);position:relative;aspect-ratio:1.5/1;
    box-shadow:6px 6px 0 rgba(29,43,79,0.15);
  }
  .envelope-art::before{
    content:'';position:absolute;inset:0;
    background:
      linear-gradient(135deg, transparent 49.5%, var(--ink) 49.5%, var(--ink) 50.5%, transparent 50.5%) top left / 100% 55% no-repeat,
      linear-gradient(-135deg, transparent 49.5%, var(--ink) 49.5%, var(--ink) 50.5%, transparent 50.5%) top right / 100% 55% no-repeat;
    opacity:0.25;
  }
  .envelope-art .stamp-box{
    position:absolute;top:16px;right:16px;width:60px;height:70px;border:2px dashed var(--stamp);
    display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:9px;color:var(--stamp);text-align:center;transform:rotate(4deg);
  }
  .envelope-art .to-line{position:absolute;bottom:28px;left:24px;right:24px;font-family:var(--font-mono);font-size:13px;color:var(--ink);}
  .envelope-art .to-line .l{display:block;border-bottom:1px solid var(--line);padding:6px 0;}

  /* ===== Section headers ===== */
  .section-head{display:flex;align-items:baseline;justify-content:space-between;margin:56px 0 20px;border-bottom:2px solid var(--ink);padding-bottom:10px;}
  .section-head h3{font-family:var(--font-display);font-size:26px;margin:0;font-weight:600;}
  .section-head .eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--stamp);}

  /* ===== Filters ===== */
  .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px;}
  .filters input, .filters select{
    font-family:var(--font-body);font-size:14px;padding:9px 12px;border:1.5px solid var(--ink);
    background:var(--paper);border-radius:2px;
  }
  .filters input:focus, .filters select:focus{outline:2px solid var(--navy);outline-offset:1px;}

  /* ===== Cards grid ===== */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;}
  .card{
    background:var(--paper);border:1.5px solid var(--ink);cursor:pointer;
    position:relative;transition:transform .15s, box-shadow .15s;
    box-shadow:3px 3px 0 rgba(29,43,79,0.12);
  }
  .card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(29,43,79,0.2);}
  .card-photo{
    width:100%;height:150px;object-fit:cover;object-position:center top;display:block;border-bottom:1.5px solid var(--ink);
  }
  .card-photo.placeholder{
    display:flex;align-items:center;justify-content:center;background:var(--kraft-dark);
    font-family:var(--font-mono);font-size:10.5px;color:#8a8570;letter-spacing:0.5px;
  }
  .modal-photo{width:100%;max-height:320px;object-fit:cover;object-position:center top;display:block;border-bottom:2px solid var(--ink);}
  .photo-pending-note{font-family:var(--font-mono);font-size:10.5px;color:var(--gold);margin-top:6px;}
  .card .postmark{
    position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;
    border:1.5px solid var(--sage);display:flex;align-items:center;justify-content:center;
    font-family:var(--font-mono);font-size:8px;color:var(--sage);text-align:center;transform:rotate(-10deg);
    line-height:1.1;
  }
  .card .pending-flag{
    position:absolute;top:10px;right:10px;background:var(--gold);color:white;font-family:var(--font-mono);
    font-size:9px;padding:4px 6px;letter-spacing:0.5px;
  }
  .card .cbody{padding:16px;}
  .card h4{font-family:var(--font-display);font-size:19px;margin:0 0 4px;}
  .card .meta{font-family:var(--font-mono);font-size:11px;color:#6b6656;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:10px;}
  .card p{font-size:13.5px;line-height:1.5;color:#3a382f;margin:0;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .card .tags{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap;}
  .card .tag{font-size:10.5px;font-family:var(--font-mono);background:var(--kraft-dark);padding:3px 7px;color:var(--ink);}
  .empty{padding:50px 20px;text-align:center;font-family:var(--font-mono);color:#8a8570;border:1.5px dashed var(--line);}

  /* ===== Buttons ===== */
  .btn{
    font-family:var(--font-body);font-weight:600;font-size:14px;padding:11px 20px;
    border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;border-radius:2px;
  }
  .btn.secondary{background:transparent;color:var(--ink);}
  .btn.stamp{background:var(--stamp);border-color:var(--stamp);color:white;}
  .btn.stamp:hover{background:#9c313d;}
  .btn:disabled{opacity:0.5;cursor:not-allowed;}
  .btn.small{padding:6px 12px;font-size:12px;}

  /* ===== Modal ===== */
  .overlay{
    position:fixed;inset:0;background:rgba(29,43,79,0.55);display:flex;align-items:center;justify-content:center;
    z-index:100;padding:20px;
  }
  .modal{
    background:var(--paper);max-width:640px;width:100%;max-height:88vh;overflow-y:auto;
    border:2px solid var(--ink);box-shadow:10px 10px 0 rgba(29,43,79,0.2);position:relative;
  }
  .modal .mhead{padding:22px 26px;border-bottom:2px solid var(--ink);display:flex;justify-content:space-between;align-items:start;}
  .modal .mhead h3{font-family:var(--font-display);font-size:26px;margin:0;}
  .modal .mhead .meta{font-family:var(--font-mono);font-size:11px;color:#6b6656;margin-top:6px;text-transform:uppercase;letter-spacing:0.5px;}
  .modal .close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink);line-height:1;padding:4px;}
  .modal .mbody{padding:22px 26px;}
  .modal .mbody h5{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--stamp);margin:20px 0 8px;}
  .modal .mbody h5:first-child{margin-top:0;}
  .modal .mbody p{font-size:14.5px;line-height:1.65;margin:0;}
  .locked-box{
    margin-top:20px;padding:18px;border:1.5px dashed var(--gold);background:rgba(169,130,44,0.06);
    text-align:center;
  }
  .locked-box p{font-size:13.5px;margin-bottom:12px;color:#5a4a1f;}
  .contact-reveal{
    margin-top:20px;padding:16px;border:1.5px solid var(--sage);background:rgba(91,127,99,0.07);
    font-family:var(--font-mono);font-size:13px;line-height:1.7;
  }
  .warn-box{
    margin-top:18px;padding:14px 16px;border-left:3px solid var(--stamp);background:rgba(178,58,72,0.06);font-size:12.5px;line-height:1.6;
  }

  /* ===== Auth / account panel ===== */
  .panel{background:var(--paper);border:1.5px solid var(--ink);padding:30px;max-width:440px;margin:0 auto;box-shadow:5px 5px 0 rgba(29,43,79,0.12);}
  .panel h3{font-family:var(--font-display);font-size:24px;margin:0 0 6px;}
  .panel .sub{font-family:var(--font-mono);font-size:11px;color:#6b6656;margin-bottom:22px;text-transform:uppercase;letter-spacing:0.5px;}
  .field{margin-bottom:14px;}
  .field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px;}
  .field input, .field select, .field textarea{
    width:100%;padding:10px 12px;border:1.5px solid var(--ink);background:white;font-family:var(--font-body);font-size:14px;border-radius:2px;
  }
  .field textarea{resize:vertical;min-height:80px;}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

  /* ===== Membership cards ===== */
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0 40px;}
  .plan{border:1.5px solid var(--ink);background:var(--paper);padding:24px;text-align:center;}
  .plan.featured{border-color:var(--stamp);box-shadow:4px 4px 0 rgba(178,58,72,0.2);position:relative;}
  .plan.featured::before{content:'MOST WRITTEN';position:absolute;top:-11px;left:50%;transform:translateX(-50%);
    background:var(--stamp);color:white;font-family:var(--font-mono);font-size:9px;padding:3px 8px;letter-spacing:1px;}
  .plan h4{font-family:var(--font-display);font-size:20px;margin:0 0 6px;}
  .plan .price{font-family:var(--font-display);font-size:32px;margin:12px 0;color:var(--navy);}
  .plan .price span{font-size:13px;font-family:var(--font-mono);color:#6b6656;}
  .plan ul{list-style:none;padding:0;margin:16px 0;font-size:13px;text-align:left;line-height:2;}
  .plan ul li::before{content:'✓ ';color:var(--sage);font-weight:700;}

  /* ===== Admin ===== */
  .admin-grid{display:grid;grid-template-columns:220px 1fr;gap:24px;}
  .admin-nav{display:flex;flex-direction:column;gap:4px;}
  .admin-nav button{text-align:left;background:none;border:none;padding:10px 14px;font-size:14px;cursor:pointer;border-radius:2px;}
  .admin-nav button:hover, .admin-nav button.active{background:var(--kraft-dark);}
  table{width:100%;border-collapse:collapse;background:var(--paper);}
  table th{text-align:left;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.5px;
    border-bottom:2px solid var(--ink);padding:10px 8px;color:#6b6656;}
  table td{padding:10px 8px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top;}
  .badge{font-family:var(--font-mono);font-size:10px;padding:3px 7px;text-transform:uppercase;letter-spacing:0.5px;}
  .badge.pending{background:var(--gold);color:white;}
  .badge.approved{background:var(--sage);color:white;}
  .badge.rejected{background:var(--stamp);color:white;}

  .toast{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);
    padding:12px 22px;border-radius:3px;font-size:13.5px;z-index:200;box-shadow:0 4px 14px rgba(0,0,0,0.25);
  }
  footer.site{background:var(--navy);color:var(--kraft-dark);padding:30px 28px;margin-top:60px;font-size:12px;line-height:1.7;}
  footer.site a{color:var(--kraft);}
  .age-gate-overlay{position:fixed;inset:0;background:var(--navy);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;}
  .age-gate{background:var(--paper);max-width:420px;padding:34px;border:2px solid var(--ink);text-align:center;}
  .age-gate h2{font-family:var(--font-display);font-size:24px;margin:0 0 10px;}
  .age-gate p{font-size:13.5px;color:#3a382f;line-height:1.6;}
  @media (max-width:760px){
    .hero{grid-template-columns:1fr;} .plans{grid-template-columns:1fr;} .admin-grid{grid-template-columns:1fr;} .row2{grid-template-columns:1fr;}
    .hamburger{display:block;}
    nav.main{
      display:none; position:absolute; top:100%; left:0; right:0;
      background:var(--navy); flex-direction:column; align-items:stretch; gap:2px;
      padding:10px 16px 20px; border-bottom:4px solid var(--stamp);
      max-height:calc(100vh - 100%); overflow-y:auto;
    }
    nav.main.open{display:flex;}
    nav.main button{text-align:left; border-radius:6px;}
    nav.main .pill{text-align:center;}
  }