/* ===================================================================
   Evan Purnama — classic paper, black ink
   =================================================================== */
:root{
  --paper:#f3efe4;
  --paper-2:#ece7d8;
  --ink:#171512;
  --ink-soft:#3a3630;
  --ink-faint:#6b655b;
  --line:#c9c2b0;
  --accent:#171512; /* black only, per brief */
  --maxw:1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
html,body{overflow-x:hidden; max-width:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Newsreader",Georgia,serif;
  font-size:19px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* subtle paper texture */
.paper-grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.015) 0, transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.02) 0, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:1;}

/* ===== TOP BAR ===== */
.topbar{
  position:sticky; top:0; z-index:10;
  background:rgba(243,239,228,.86);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; height:64px;}
.mark{
  font-family:"Fraunces",serif; font-weight:700; font-size:22px;
  letter-spacing:.04em; color:var(--ink); text-decoration:none;
  border:1.5px solid var(--ink); border-radius:50%;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
}
.nav{display:flex; gap:30px;}
.nav a{
  font-family:"JetBrains Mono",monospace; font-size:12.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); text-decoration:none;
  padding-bottom:2px; border-bottom:1px solid transparent; transition:border-color .2s;
}
.nav a:hover{border-color:var(--ink);}

/* ===== HERO ===== */
.hero{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px;
  align-items:center; padding:82px 32px 70px;
}
.hero-portrait{display:flex; flex-direction:column; align-items:flex-start; margin:0;}
.portrait-frame{
  position:relative;
  width:100%; max-width:340px;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--paper-2);
}
.portrait-frame::after{
  /* thin editorial keyline, offset like a print register mark */
  content:""; position:absolute; inset:0;
  border:1px solid var(--ink);
  transform:translate(12px,12px);
  pointer-events:none;
}
.portrait-frame img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:cover; object-position:50% 30%;
  display:block;
  filter:saturate(0) contrast(1.04);
  mix-blend-mode:multiply;
}
.portrait-caption{
  margin-top:26px;
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-faint);
  border-top:1px solid var(--line); padding-top:12px; width:100%; max-width:340px;
}

.eyebrow{
  font-family:"JetBrains Mono",monospace; font-size:12.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 20px;
}
h1{
  font-family:"Fraunces",serif; font-weight:600;
  font-size:clamp(32px, 6vw, 52px); line-height:1.08;
  letter-spacing:-.015em; margin:0 0 26px;
}
h1 em{font-style:italic; font-weight:500;}
.lede{font-size:20px; color:var(--ink-soft); max-width:34ch; margin:0 0 32px;}
.hero-cta{display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:22px;}

.btn{
  display:inline-block; background:var(--ink); color:var(--paper);
  font-family:"JetBrains Mono",monospace; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none;
  padding:15px 30px; border:1.5px solid var(--ink); border-radius:2px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 rgba(23,21,18,.25);}
.btn-ghost{
  font-family:"JetBrains Mono",monospace; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  border-bottom:1.5px solid var(--ink); padding-bottom:3px;
}
.scarcity{
  font-family:"Newsreader",serif; font-style:italic; font-size:16px;
  color:var(--ink-faint); margin:0;
}
.urgency{
  display:inline-flex; align-items:center; gap:9px; margin:16px 0 0;
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink);
  border:1px solid var(--ink); border-radius:2px; padding:8px 14px;
}
.pulse{
  width:8px; height:8px; border-radius:50%; background:var(--ink);
  box-shadow:0 0 0 0 rgba(23,21,18,.5); animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(23,21,18,.45);}
  70%{box-shadow:0 0 0 7px rgba(23,21,18,0);}
  100%{box-shadow:0 0 0 0 rgba(23,21,18,0);}
}
@media(prefers-reduced-motion:reduce){.pulse{animation:none;}}

/* ===== MEMBERSHIP BAND ===== */
.membership{
  margin-top:44px; padding:38px 40px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:3px;
  position:relative;
}
.membership-tag{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px;
}
.membership h3{
  font-family:"Fraunces",serif; font-weight:600; font-size:clamp(23px,3vw,30px);
  line-height:1.2; margin:0 0 16px;
}
.membership > p{margin:0 0 20px; color:var(--ink-soft); font-size:18px; max-width:62ch;}
.membership-points{list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:12px;}
.membership-points li{position:relative; padding-left:24px; font-size:17px; line-height:1.5; color:var(--ink);}
.membership-points li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:8px; height:8px; border:1.5px solid var(--ink); border-radius:50%;
}
.membership-fine{
  margin:0; font-family:"Newsreader",serif; font-style:italic;
  font-size:15px; color:var(--ink-faint);
}

/* ===== WHY / FAQ ===== */
.why-thesis{
  font-family:"Fraunces",serif; font-weight:500; font-size:clamp(21px,2.6vw,27px);
  line-height:1.4; max-width:30ch; margin:0 0 44px; color:var(--ink);
}
.why-thesis em{font-style:italic;}
.faq{display:flex; flex-direction:column;}
.faq-item{border-top:1px solid var(--line); padding:26px 0;}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item h3{
  font-family:"Fraunces",serif; font-weight:600; font-size:21px;
  margin:0 0 10px; line-height:1.25;
}
.faq-item p{margin:0; color:var(--ink-soft); font-size:17.5px; max-width:64ch;}
.apply-note{
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.08em;
  color:var(--ink-faint); margin:0 0 14px; text-transform:uppercase;
}

/* ===== RULES / SECTION HEADS ===== */
.rule{height:0; border-top:1px solid var(--line); margin:0 auto; max-width:calc(var(--maxw) - 0px);}
.rule.wrap{padding:0 32px;}
section.wrap{padding-top:70px; padding-bottom:70px;}

.section-head{display:flex; align-items:baseline; gap:18px; margin-bottom:38px;}
.section-head .num{
  font-family:"JetBrains Mono",monospace; font-size:13px; letter-spacing:.15em;
  color:var(--ink-faint); border:1px solid var(--line); border-radius:2px;
  padding:3px 8px;
}
.section-head h2{
  font-family:"Fraunces",serif; font-weight:600;
  font-size:clamp(26px, 5vw, 34px); letter-spacing:-.01em;
  margin:0;
}

/* ===== ABOUT ===== */
.about-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:start;}
.about-lead p{margin:0 0 20px;}
.about-lead .claim{
  font-family:"Fraunces",serif; font-style:italic; font-size:23px; line-height:1.4;
  border-left:2px solid var(--ink); padding-left:20px; color:var(--ink); margin-top:28px;
}
.about-facts{
  border:1px solid var(--line); background:var(--paper-2);
  padding:26px 28px; border-radius:3px;
}
.about-facts ul{list-style:none; margin:0; padding:0;}
.about-facts li{
  padding:14px 0; border-bottom:1px solid var(--line);
  font-size:18px;
}
.about-facts li:last-child{border-bottom:0;}
.about-facts span{
  display:block; font-family:"JetBrains Mono",monospace; font-size:11px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:3px;
}

/* ===== SESSION ===== */
.tiers{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:44px;}
.tier{
  border:1.5px solid var(--ink); border-radius:3px;
  padding:32px 30px 30px; display:flex; flex-direction:column;
  background:var(--paper);
  box-shadow:6px 8px 0 rgba(23,21,18,.1);
}
.tier-team{background:var(--ink); color:var(--paper); box-shadow:6px 8px 0 rgba(23,21,18,.25);}
.tier-tag{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px;
}
.tier-team .tier-tag{color:rgba(243,239,228,.65);}
.tier-price{display:flex; flex-direction:column; margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line);}
.tier-team .tier-price{border-bottom-color:rgba(243,239,228,.2);}
.tier-price .price{font-family:"Fraunces",serif; font-weight:600; font-size:36px; line-height:1;}
.tier-price .price-sub{
  font-family:"JetBrains Mono",monospace; font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:10px;
}
.tier-team .tier-price .price-sub{color:rgba(243,239,228,.7);}
.tier-points{list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:13px; flex:1;}
.tier-points li{position:relative; padding-left:24px; font-size:17px; line-height:1.5;}
.tier-points li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; background:var(--ink); border-radius:50%;
}
.tier-team .tier-points li::before{background:var(--paper);}
.tier-cta{align-self:flex-start;}
.tier-team .tier-cta{background:var(--paper); color:var(--ink); border-color:var(--paper);}
.tier-team .tier-cta:hover{box-shadow:4px 4px 0 rgba(243,239,228,.25);}

.agenda{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.agenda-item{border:1px solid var(--line); background:var(--paper-2); padding:30px 30px; border-radius:3px;}
.agenda-tag{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px;
}
.agenda-item h3{font-family:"Fraunces",serif; font-weight:600; font-size:25px; margin:0 0 12px;}
.agenda-item p{margin:0; color:var(--ink-soft); font-size:17.5px;}
.agenda-note{
  font-family:"Newsreader",serif; font-style:italic; color:var(--ink-faint);
  margin-top:24px; font-size:16px;
}

/* ===== WHO ===== */
.who-intro{max-width:60ch; font-size:19px; color:var(--ink-soft); margin:0 0 34px;}
.who-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:30px;}
.who-col{border-top:2px solid var(--ink); padding-top:20px;}
.who-col h4{font-family:"Fraunces",serif; font-weight:600; font-size:22px; margin:0 0 12px;}
.who-col p{margin:0; color:var(--ink-soft); font-size:18px;}
.who-foot{
  font-family:"Fraunces",serif; font-style:italic; font-size:20px;
  border-left:2px solid var(--ink); padding-left:20px; margin:0;
}

/* ===== APPLY / FORM ===== */
.apply-intro{max-width:58ch; font-size:19px; color:var(--ink-soft); margin:0 0 38px;}
.apply-form{max-width:640px;}
.field{margin-bottom:22px; display:flex; flex-direction:column;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
label{
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:9px;
}
label .opt{text-transform:none; letter-spacing:0; color:var(--ink-faint); font-size:11px;}
input,select,textarea{
  font-family:"Newsreader",serif; font-size:18px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:2px;
  padding:13px 14px; width:100%; transition:border-color .18s;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--ink);}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23171512' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:38px;}
textarea{resize:vertical;}
.btn-submit{margin-top:8px; cursor:pointer; font-family:"JetBrains Mono",monospace;}
.form-fine{font-size:14px; color:var(--ink-faint); font-style:italic; margin-top:18px; max-width:52ch;}
.form-error{margin-top:16px; padding:12px 16px; border:1.5px solid #7a1f1f; color:#7a1f1f; background:rgba(122,31,31,.06); border-radius:2px; font-size:15px;}
.btn-submit:disabled{opacity:.55; cursor:default; transform:none; box-shadow:none;}

.form-thanks{
  border:1.5px solid var(--ink); padding:40px; border-radius:3px; max-width:640px;
  background:var(--paper-2);
}
.form-thanks h3{font-family:"Fraunces",serif; font-size:28px; margin:0 0 12px;}
.form-thanks p{margin:0; color:var(--ink-soft);}

/* ===== FOOTER ===== */
.footer{border-top:1px solid var(--line); margin-top:20px; padding:34px 0;}
.footer-inner{display:flex; justify-content:space-between; align-items:center;
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint);}
.foot-mid{color:var(--ink-soft);}

/* ===== RESPONSIVE ===== */
@media(max-width:860px){
  body{font-size:18px;}
  .hero{grid-template-columns:1fr; gap:40px; padding:52px 26px 50px; text-align:center;}
  .hero-copy{display:flex; flex-direction:column; align-items:center;}
  .hero-portrait{align-items:center;}
  .portrait-frame{max-width:280px;}
  .portrait-caption{max-width:280px; text-align:center;}
  .lede{max-width:100%;}
  .hero-cta{justify-content:center;}
  h1{font-size:38px;}
  .about-grid{grid-template-columns:1fr; gap:32px;}
  .tiers{grid-template-columns:1fr;}
  .agenda{grid-template-columns:1fr;}
  .who-grid{grid-template-columns:1fr;}
  .nav{display:none;}
  .wrap{padding:0 24px;}
}
@media(max-width:480px){
  body{font-size:17px;}
  h1{font-size:30px;}
  .lede{font-size:18px;}
  .portrait-frame{max-width:220px;}
  .portrait-caption{max-width:220px;}
  .tier{padding:26px 22px 24px;}
  .tier-price .price{font-size:30px;}
  .field-row{grid-template-columns:1fr; gap:0;}
  .section-head h2{font-size:27px;}
  .footer-inner{flex-direction:column; gap:8px;}
  .hero{padding:44px 20px 44px;}
  .wrap{padding:0 20px;}
}