/* ============================================================
   THE CORRESPONDENCE ROOM
   Private literary dispatch architecture
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

:root{
  --cr-ivory: #F1E9D8;
  --cr-ivory-soft: rgba(241,233,216,.55);
  --cr-bone: #EAE2CE;
  --cr-espresso: #1A120B;
  --cr-espresso-deep: #120C07;
  --cr-espresso-warm: #1A1512;
  --cr-charcoal: #282320;
  --cr-drift: #635A52;
  --cr-ash: #928680;
  --cr-fog: #AEA291;
  --cr-amber: #B0843F;
  --cr-danger: #B05B44;
  --cr-gold: #C9A23F;
  --cr-olive: #727468;
  --cr-serif: 'Cormorant Garamond', Georgia, serif;
  --cr-sans: 'Jost', system-ui, sans-serif;
  --cr-sidebar-w: 240px;
}

html{scroll-behavior:smooth;}

body{
  background: var(--cr-espresso);
  color: var(--cr-ivory);
  font-family: var(--cr-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::after{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9000;mix-blend-mode:overlay;opacity:.4;
}

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

/* ============================================================
   PASSWORD GATE
   ============================================================ */

.cr-gate{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  background:var(--cr-espresso-deep);
}
.cr-gate-inner{
  text-align:center;max-width:360px;padding:2rem;
  opacity:0;animation:cr-fade-up 1.2s cubic-bezier(.22,.61,.36,1) .2s forwards;
}
.cr-gate-mark{
  font-family:var(--cr-serif);font-size:1.4rem;font-weight:400;
  letter-spacing:.25em;color:var(--cr-gold);opacity:.4;margin-bottom:2rem;
}
.cr-gate-eyebrow{
  font-family:var(--cr-sans);font-size:.56rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--cr-gold);opacity:.55;margin-bottom:1.2rem;
}
.cr-gate-title{
  font-family:var(--cr-serif);font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:300;font-style:italic;color:var(--cr-ivory);
  line-height:1.15;margin-bottom:.8rem;
}
.cr-gate-sub{
  font-family:var(--cr-sans);font-size:.82rem;font-weight:300;
  color:var(--cr-drift);margin-bottom:2.5rem;
}
.cr-gate-form{
  display:flex;max-width:320px;margin:0 auto;
}
.cr-gate-form input{
  flex:1;background:rgba(241,233,216,.04);
  border:1px solid rgba(241,233,216,.1);border-right:none;
  color:var(--cr-ivory);font-family:var(--cr-sans);font-size:.82rem;
  font-weight:300;padding:.85rem 1rem;outline:none;
  transition:border-color .3s;
}
.cr-gate-form input:focus{border-color:rgba(196,149,48,.4);}
.cr-gate-form button{
  background:rgba(196,149,48,.1);border:1px solid rgba(196,149,48,.25);
  color:var(--cr-gold);font-family:var(--cr-sans);font-size:.6rem;
  font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  padding:.85rem 1.4rem;cursor:pointer;transition:background .4s;
  white-space:nowrap;
}
.cr-gate-form button:hover{background:rgba(196,149,48,.2);}
.cr-gate-error{
  font-family:var(--cr-sans);font-size:.76rem;color:var(--cr-danger);
  margin-top:1rem;min-height:1.2rem;
}

/* ============================================================
   APP LAYOUT
   ============================================================ */

.cr-app{
  display:flex;min-height:100vh;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.cr-sidebar{
  width:var(--cr-sidebar-w);
  background:var(--cr-espresso-deep);
  border-right:1px solid rgba(241,233,216,.04);
  display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0;
  z-index:100;overflow-y:auto;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.cr-sidebar-brand{
  padding:2rem 1.5rem 1.5rem;
  border-bottom:1px solid rgba(241,233,216,.04);
}
.cr-sidebar-mark{
  font-family:var(--cr-serif);font-size:.9rem;font-weight:400;
  letter-spacing:.25em;color:var(--cr-gold);opacity:.35;margin-bottom:.5rem;
}
.cr-sidebar-title{
  font-family:var(--cr-serif);font-size:1rem;font-weight:400;
  font-style:italic;color:var(--cr-ivory);opacity:.7;
}
.cr-nav{
  flex:1;padding:1rem 0;
}
.cr-nav-section{
  font-family:var(--cr-sans);font-size:.52rem;font-weight:400;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--cr-gold);opacity:.4;
  padding:.8rem 1.5rem .4rem;
}
.cr-nav-link{
  display:block;
  font-family:var(--cr-sans);font-size:.76rem;font-weight:300;
  color:var(--cr-ash);padding:.55rem 1.5rem;
  transition:color .3s,background .3s,padding-left .3s;
  border-left:2px solid transparent;
}
.cr-nav-link:hover{
  color:var(--cr-ivory);background:rgba(241,233,216,.02);
}
.cr-nav-link.active{
  color:var(--cr-ivory);border-left-color:var(--cr-amber);
  background:rgba(176,125,26,.04);padding-left:1.7rem;
}
.cr-nav-link-dim{
  opacity:.35;font-size:.68rem;
}
.cr-sidebar-foot{
  padding:1rem 1.5rem;border-top:1px solid rgba(241,233,216,.04);
}

/* ============================================================
   TOPBAR
   ============================================================ */

.cr-topbar{
  display:flex;align-items:center;
  padding:1rem 2rem;
  border-bottom:1px solid rgba(241,233,216,.04);
  background:rgba(16,12,9,.6);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:50;
}
.cr-topbar-toggle{
  display:none;background:none;border:1px solid rgba(241,233,216,.15);
  color:var(--cr-ivory);font-family:var(--cr-sans);font-size:.6rem;
  letter-spacing:.15em;text-transform:uppercase;padding:.5rem .8rem;
  cursor:pointer;margin-right:1rem;
}
.cr-topbar-crumb{
  font-family:var(--cr-serif);font-size:1rem;font-style:italic;
  color:var(--cr-ivory);opacity:.6;flex:1;
}
.cr-topbar-btn{
  background:rgba(196,149,48,.08);border:1px solid rgba(196,149,48,.2);
  color:var(--cr-gold);font-family:var(--cr-sans);font-size:.6rem;
  font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  padding:.55rem 1.2rem;cursor:pointer;transition:background .4s;
}
.cr-topbar-btn:hover{background:rgba(196,149,48,.16);}

/* ============================================================
   MAIN CONTENT
   ============================================================ */

.cr-main{
  flex:1;margin-left:var(--cr-sidebar-w);
  min-height:100vh;display:flex;flex-direction:column;
}
.cr-content{
  padding:2.5rem 2rem;flex:1;max-width:960px;
}
.cr-module-header{
  margin-bottom:2.5rem;
}
.cr-module-title{
  font-family:var(--cr-serif);font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:300;font-style:italic;color:var(--cr-ivory);
  line-height:1.15;margin-bottom:.4rem;
}
.cr-module-sub{
  font-family:var(--cr-sans);font-size:.82rem;font-weight:300;
  color:var(--cr-drift);
}
.cr-mb{margin-bottom:1.5rem;}

/* ============================================================
   FILTERS
   ============================================================ */

.cr-filters{
  display:flex;gap:.5rem;margin-bottom:2rem;
}
.cr-filter-btn{
  background:none;border:1px solid rgba(241,233,216,.08);
  color:var(--cr-ash);font-family:var(--cr-sans);font-size:.6rem;
  font-weight:400;letter-spacing:.15em;text-transform:uppercase;
  padding:.45rem 1rem;cursor:pointer;transition:all .3s;
}
.cr-filter-btn:hover{border-color:rgba(241,233,216,.2);color:var(--cr-ivory);}
.cr-filter-btn.active{
  border-color:rgba(196,149,48,.3);color:var(--cr-gold);
  background:rgba(196,149,48,.06);
}

/* ============================================================
   ITEM LIST (Correspondence entries)
   ============================================================ */

.cr-item-list{
  display:flex;flex-direction:column;gap:1px;
  background:rgba(176,125,26,.03);
}
.cr-item{
  background:var(--cr-espresso-warm);padding:1.3rem 1.6rem;
  border-left:2px solid rgba(176,125,26,.12);
  cursor:pointer;transition:background .3s;
  display:flex;align-items:flex-start;gap:1.2rem;
}
.cr-item:hover{background:var(--cr-charcoal);}
.cr-item-main{flex:1;min-width:0;}
.cr-item-title{
  font-family:var(--cr-serif);font-size:1.05rem;font-weight:400;
  font-style:italic;color:var(--cr-ivory);line-height:1.3;
  margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cr-item-meta{
  font-family:var(--cr-sans);font-size:.66rem;font-weight:300;
  color:var(--cr-drift);display:flex;gap:1rem;flex-wrap:wrap;
}
.cr-item-status{
  font-family:var(--cr-sans);font-size:.54rem;font-weight:400;
  letter-spacing:.15em;text-transform:uppercase;
  padding:.25rem .6rem;border:1px solid;white-space:nowrap;
  align-self:center;
}
.cr-item-status[data-status="draft"]{color:var(--cr-ash);border-color:rgba(146,134,128,.2);}
.cr-item-status[data-status="sent"]{color:var(--cr-gold);border-color:rgba(196,149,48,.25);}
.cr-item-status[data-status="published"]{color:var(--cr-olive);border-color:rgba(114,116,104,.25);}
.cr-item-status[data-status="scheduled"]{color:var(--cr-fog);border-color:rgba(174,162,145,.2);}

.cr-empty{
  font-family:var(--cr-serif);font-size:1rem;font-style:italic;
  color:var(--cr-drift);padding:3rem 0;text-align:center;
}

/* ============================================================
   COMPOSE VIEW
   ============================================================ */

.cr-compose{
  max-width:720px;
}
.cr-compose-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:2rem;flex-wrap:wrap;gap:1rem;
}
.cr-back-btn{
  background:none;border:none;color:var(--cr-ash);
  font-family:var(--cr-sans);font-size:.76rem;font-weight:300;
  cursor:pointer;transition:color .3s;padding:0;
}
.cr-back-btn:hover{color:var(--cr-ivory);}
.cr-compose-actions{
  display:flex;gap:.5rem;flex-wrap:wrap;
}
.cr-action-btn{
  background:none;border:1px solid rgba(241,233,216,.1);
  color:var(--cr-ash);font-family:var(--cr-sans);font-size:.58rem;
  font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  padding:.5rem 1rem;cursor:pointer;transition:all .3s;
}
.cr-action-btn:hover{border-color:rgba(241,233,216,.25);color:var(--cr-ivory);}
.cr-action-test{border-color:rgba(174,162,145,.2);color:var(--cr-fog);}
.cr-action-test:hover{border-color:rgba(174,162,145,.4);color:var(--cr-ivory);}
.cr-action-send{border-color:rgba(196,149,48,.25);color:var(--cr-gold);}
.cr-action-send:hover{background:rgba(196,149,48,.08);border-color:rgba(196,149,48,.4);}

.cr-compose-body{
  display:flex;flex-direction:column;gap:1.2rem;
}
.cr-field{flex:1;}
.cr-field-row{display:flex;gap:1rem;}
.cr-field label{
  display:block;font-family:var(--cr-sans);font-size:.62rem;
  font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cr-ash);margin-bottom:.35rem;
}
.cr-field-hint{
  font-style:italic;letter-spacing:0;text-transform:none;
  color:var(--cr-drift);opacity:.6;
}
.cr-field input,.cr-field select,.cr-field textarea{
  width:100%;background:rgba(241,233,216,.04);
  border:1px solid rgba(241,233,216,.08);
  color:var(--cr-ivory);font-family:var(--cr-sans);
  font-size:.85rem;font-weight:300;padding:.7rem .9rem;
  outline:none;transition:border-color .3s;
}
.cr-field input:focus,.cr-field select:focus,.cr-field textarea:focus{
  border-color:rgba(196,149,48,.35);
}
.cr-field select{
  cursor:pointer;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='%23928680' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;
}
.cr-field input::placeholder,.cr-field textarea::placeholder{color:var(--cr-drift);}

.cr-body-editor{
  min-height:400px;resize:vertical;
  font-family:var(--cr-serif)!important;
  font-size:1.05rem!important;font-weight:300;
  font-style:italic;line-height:1.9;
  color:var(--cr-bone)!important;
  background:rgba(241,233,216,.025)!important;
  border:1px solid rgba(241,233,216,.06)!important;
  padding:2rem!important;
}
.cr-body-editor:focus{
  border-color:rgba(196,149,48,.2)!important;
  background:rgba(241,233,216,.035)!important;
}

/* ============================================================
   PREVIEW
   ============================================================ */

.cr-preview-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(16,12,9,.92);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  padding:2rem;
}
.cr-preview-frame{
  width:100%;max-width:680px;height:85vh;
  display:flex;flex-direction:column;
  border:1px solid rgba(241,233,216,.06);
  background:var(--cr-espresso);
}
.cr-preview-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1.2rem;border-bottom:1px solid rgba(241,233,216,.06);
}
.cr-preview-label{
  font-family:var(--cr-sans);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cr-ash);
}
.cr-preview-close{
  background:none;border:none;color:var(--cr-ash);font-size:1.2rem;
  cursor:pointer;padding:.2rem .5rem;transition:color .3s;
}
.cr-preview-close:hover{color:var(--cr-ivory);}
.cr-preview-iframe{
  flex:1;border:none;background:#F1E9D8;width:100%;
}

/* ============================================================
   SUBSCRIBERS
   ============================================================ */

.cr-subscriber-list{
  display:flex;flex-direction:column;gap:1px;
  background:rgba(176,125,26,.03);
}
.cr-sub-row{
  background:var(--cr-espresso-warm);padding:1rem 1.4rem;
  border-left:2px solid rgba(176,125,26,.1);
  display:flex;align-items:center;gap:1.2rem;
  transition:background .3s;
}
.cr-sub-row:hover{background:var(--cr-charcoal);}
.cr-sub-main{flex:1;min-width:0;}
.cr-sub-name{
  font-family:var(--cr-serif);font-size:1rem;font-weight:400;
  font-style:italic;color:var(--cr-ivory);margin-bottom:.15rem;
}
.cr-sub-email{
  font-family:var(--cr-sans);font-size:.76rem;font-weight:300;
  color:var(--cr-drift);
}
.cr-sub-tags{
  font-family:var(--cr-sans);font-size:.58rem;font-weight:300;
  color:var(--cr-ash);
}
.cr-sub-role{
  font-family:var(--cr-sans);font-size:.52rem;font-weight:400;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--cr-gold);opacity:.6;border:1px solid rgba(196,149,48,.15);
  padding:.2rem .5rem;white-space:nowrap;
}
.cr-sub-del{
  background:none;border:1px solid rgba(194,80,80,.15);
  color:rgba(194,80,80,.5);font-family:var(--cr-sans);font-size:.54rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.3rem .6rem;
  cursor:pointer;transition:all .3s;
}
.cr-sub-del:hover{border-color:rgba(194,80,80,.4);color:rgba(194,80,80,.8);}

.cr-sub-form-wrap{
  background:rgba(241,233,216,.025);border:1px solid rgba(241,233,216,.06);
  padding:2rem;margin-top:2rem;
}
.cr-sub-form-title{
  font-family:var(--cr-serif);font-size:1.2rem;font-weight:400;
  font-style:italic;color:var(--cr-ivory);margin-bottom:1.5rem;
}

/* ============================================================
   DELIVERY LOG
   ============================================================ */

.cr-delivery-list{
  display:flex;flex-direction:column;gap:1px;
  background:rgba(176,125,26,.03);
}
.cr-delivery-row{
  background:var(--cr-espresso-warm);padding:1rem 1.4rem;
  border-left:2px solid rgba(176,125,26,.08);
  display:grid;grid-template-columns:1fr 1fr auto;
  gap:1rem;align-items:center;
  transition:background .3s;
}
.cr-delivery-row:hover{background:var(--cr-charcoal);}
.cr-delivery-recipient{
  font-family:var(--cr-serif);font-size:.95rem;font-style:italic;
  color:var(--cr-ivory);
}
.cr-delivery-subject{
  font-family:var(--cr-sans);font-size:.76rem;font-weight:300;
  color:var(--cr-drift);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cr-delivery-date{
  font-family:var(--cr-sans);font-size:.62rem;font-weight:300;
  color:var(--cr-ash);white-space:nowrap;
}
.cr-delivery-status{
  font-family:var(--cr-sans);font-size:.52rem;letter-spacing:.12em;
  text-transform:uppercase;
}
.cr-delivery-status[data-status="sent"]{color:var(--cr-gold);}
.cr-delivery-status[data-status="opened"]{color:var(--cr-olive);}
.cr-delivery-status[data-status="error"]{color:var(--cr-danger);}

/* ============================================================
   TOAST
   ============================================================ */

.cr-toast{
  position:fixed;bottom:2rem;right:2rem;z-index:3000;
  background:rgba(196,149,48,.12);border:1px solid rgba(196,149,48,.25);
  color:var(--cr-gold);font-family:var(--cr-sans);font-size:.78rem;
  font-weight:300;padding:.8rem 1.4rem;
  opacity:0;transform:translateY(10px);
  transition:opacity .4s,transform .4s;pointer-events:none;
}
.cr-toast.show{opacity:1;transform:none;pointer-events:auto;}
.cr-toast.error{
  background:rgba(194,80,80,.1);border-color:rgba(194,80,80,.25);
  color:var(--cr-danger);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes cr-fade-up{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:none;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:768px){
  .cr-sidebar{
    transform:translateX(-100%);
    width:280px;
  }
  .cr-sidebar.open{transform:none;}
  .cr-main{margin-left:0;}
  .cr-topbar-toggle{display:block;}
  .cr-content{padding:1.5rem 1rem;}
  .cr-field-row{flex-direction:column;gap:1rem;}
  .cr-compose-header{flex-direction:column;align-items:flex-start;}
  .cr-delivery-row{grid-template-columns:1fr;gap:.4rem;}
  .cr-preview-frame{max-width:100%;height:90vh;}
}