@import url('https://fonts.googleapis.com/css2?family=Pirata+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap');

/* ======================================================
   DEADWAX — PUNK LAYER (ASSET-DRIVEN)
   Uses external PNG assets:
   - MANIFESTO_TAPE.png
   - ERRATA_TAPE.png
   - READ_THIS_TAPE.png
====================================================== */

/* ---------------- READ THIS (PNG) ---------------- */

.panel-lead{
  position:relative;
}

/* “Beside the lead story” on all devices:
   we push slightly outside the panel on the right */
.dw-scribble{
  position:absolute;
  top:52px;          /* aligns visually with Lead Story header area */
  right:-18px;       /* sits beside the panel */
  width:132px;
  height:auto;
  z-index:5;
  pointer-events:none;
  opacity:.98;
  transform:rotate(-2deg);
  filter:contrast(1.05);
}

/* ---------------- ERRATA / MANIFESTO ---------------- */

.dw-errata,
.dw-manifesto{
  margin-top:14px;
  padding:14px 12px 12px;
  border:3px solid #000;
  background:#f3e9d7;
  box-shadow:8px 8px 0 #000;
  position:relative;
  overflow:hidden;
}

.dw-errata{ transform:rotate(-.8deg); }
.dw-manifesto{ transform:rotate(.7deg); }

/* Tape size constraints (PC: 120–150) */
.dw-tape-title{
  display:block;
  width:auto;
  max-width:150px;
  height:auto;
  margin:0 0 10px;
  pointer-events:none;
  opacity:1;
  filter:contrast(1.06);
}

.dw-tape-title--errata{ transform:rotate(-3deg); }
.dw-tape-title--manifesto{ transform:rotate(-1.5deg); }

/* Manifesto/Errata text styling like zine */
.dw-box-text{
  margin:0;
  font-size:12px;
  line-height:1.4;
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:pre-line; /* keeps \n line breaks from option */
  color:#111;
}

/* ---------------- MOBILE ---------------- */

@media (max-width:680px){

  /* Keep “beside lead” even on mobile but less outside */
  .dw-scribble{
    top:48px;
    right:-10px;
    width:112px;
  }

  /* Mobile: 100–120 */
  .dw-tape-title{
    max-width:120px;
  }
}


/* ---------------- ERRATA: darker, paper-like, crooked ---------------- */

.dw-errata{
  background:#ddd3c3;                 /* πιο “παλιό χαρτί” */
  transform:rotate(-3.2deg);          /* πιο στραβό από manifesto */
  box-shadow:5px 5px 0 #000;          /* πιο ταπεινό */
  border:3px solid #000;
  position:relative;
}

/* subtle paper grain only for errata */
.dw-errata:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,.18) 1px, transparent 1.3px);
  background-size:6px 6px;
  mix-blend-mode:multiply;
}

/* Errata text = πιο tight & πιο aggressive */
.dw-errata .dw-box-text{
  font-size:11px;
  line-height:1.45;
  letter-spacing:.08em;
  color:#000;
}





.dw-box-text{
  white-space: normal !important; /* τώρα τα breaks τα κάνει το <br> */
}





/* ---------------- BLACK NOTE (Right Column) ---------------- */

.panel-black-note .panel-title{
  font-family: 'Pirata One', serif;
  font-size:15px;
  letter-spacing:.14em;
}

.panel-black-note .headline-item h3{
  font-family: 'ANTON', serif;
  font-size:18px;
  letter-spacing:.08em;
}

.panel-black-note .headline-item p{
  font-size:12px;
  line-height:1.4;
}






/* ---------------- CORE FILE: STATUS STAMP ---------------- */

.core-status{
  display:inline-flex;
  flex-direction:column;
  gap:3px;
  margin:8px 0 10px;
  padding:8px 10px;
  border:2px solid #000;
  background:#fff;
  box-shadow:4px 4px 0 #000;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
  line-height:1.25;
  transform:rotate(-1.2deg);
  position:relative;
}

.core-status:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,.18) 1px, transparent 1.3px);
  background-size:7px 7px;
  mix-blend-mode:multiply;
}




/* ---------------- BRUTAL DIVIDER (FULL WIDTH) ---------------- */

.brutal-divider{
  width:100%;
  margin:14px 0 12px;
  text-align:center;
  font-family:"Anton", sans-serif;
  font-size:16px;
  letter-spacing:.15em;
  line-height:1;
  color:#000;
  opacity:.9;
  transform:rotate(-0.6deg);
  user-select:none;
  overflow:hidden;
  white-space:nowrap;
}








/* ---------------- CLICKABLE FEATURE IMAGE ---------------- */

.dw-img-trigger{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

.dw-img-trigger:focus-visible{
  outline:3px solid #000;
  outline-offset:4px;
}

/* ---------------- CLICKABLE FEATURE VIDEO ---------------- */

.dw-video-wrap{
  position:relative;
  display:block;
  cursor:pointer;
}

.dw-video-wrap:focus-visible{
  outline:3px solid #000;
  outline-offset:4px;
}

.dw-video{
  display:block;
  width:100%;
  height:auto;
  /* Intentionally no filter: video plays raw, as uploaded. */
}

.dw-video-mute{
  position:absolute;
  top:8px;
  right:8px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #000;
  background:#fff;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  box-shadow:3px 3px 0 #000;
}

.dw-video-mute:focus-visible{
  outline:3px solid #000;
  outline-offset:2px;
}

.dw-video-wrap--youtube{
  aspect-ratio:16/9;
}

.dw-video--youtube{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

.dw-video-click-catcher{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  cursor:pointer;
  background:transparent;
}

.dw-video-click-catcher:focus-visible{
  outline:3px solid #000;
  outline-offset:-4px;
}

/* ---------------- DEADWAX MODAL (FORCED OVERLAY) ---------------- */

.dw-modal{
  position:fixed !important;
  inset:0 !important;
  z-index:999999 !important;
  display:none;
  pointer-events:none;
}

.dw-modal.is-open{
  display:block;
  pointer-events:auto;
}

.dw-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

.dw-modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(620px, 92vw);
  background:#fff;
  border:3px solid #000;
  box-shadow:10px 10px 0 #000;
  padding:14px 14px 12px;
}

.dw-modal__panel:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background:radial-gradient(circle at 1px 1px, rgba(0,0,0,.18) 1px, transparent 1.25px);
  background-size:9px 9px;
  mix-blend-mode:multiply;
}

.dw-modal__close{
  position:absolute;
  top:10px;
  right:10px;
  border:3px solid #000;
  background:#fff;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Courier Prime", monospace;
  font-size:16px;
  line-height:1;
  box-shadow:4px 4px 0 #000;
  cursor:pointer;
  z-index:5;
}


.dw-modal__head{
  border-bottom:3px solid #000;
  padding-bottom:10px;
  margin-bottom:10px;
  position:relative;
  z-index:1;
}

.dw-modal__kicker{
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  opacity:.9;
  margin-bottom:6px;
}

.dw-modal__title{
  margin:0;
  font-family:"Anton", sans-serif;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:26px;
  line-height:1.05;
}

.dw-modal__body{
  position:relative;
  z-index:1;
  font-size:13px;
  line-height:1.45;
}

.dw-modal__small{
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
  opacity:.8;
  margin-top:10px;
}




/* ---------------- NAV RIGHT WRAP ---------------- */

.nav-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}

/* σε μικρές οθόνες να σπάει ωραία */
@media (max-width:680px){
  .nav-right{
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
}

/* ---------------- FAKE SUBSCRIBE BUTTON ---------------- */

.dw-subscribe{
  border:3px solid #000;
  background:#fff;
  padding:6px 14px;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  box-shadow:4px 4px 0 #000;
  cursor:pointer;
  line-height:1;
}

.dw-subscribe:hover{
  background:#000;
  color:#fff;
}

.dw-subscribe:focus-visible{
  outline:3px solid #000;
  outline-offset:4px;
}

/* ---------------- FAKE SUBSCRIBE OVERLAY ---------------- */

.dw-subscribe-msg{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.96);
  pointer-events:none;
}

.dw-subscribe-msg.is-open{
  display:flex;
  pointer-events:auto;
}

.dw-subscribe-msg__box{
  width:min(720px, 92vw);
  border:3px solid #000;
  background:#fff;
  box-shadow:10px 10px 0 #000;
  padding:18px 16px;
  text-align:center;
  font-family:"Anton", sans-serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:clamp(26px, 4.5vw, 64px);
  line-height:1.05;
  transform:rotate(-1deg);
  position:relative;
  overflow:hidden;
}

.dw-subscribe-msg__box:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background:radial-gradient(circle at 1px 1px, rgba(0,0,0,.18) 1px, transparent 1.25px);
  background-size:9px 9px;
  mix-blend-mode:multiply;
}







/* ---------------- HEADER: STRAPLINE TUNING ---------------- */

.strapline{
  gap:10px;
  margin-top:8px;
}

.strapline-rule{
  height:2px;
  opacity:1;
}

.strapline-text{
  letter-spacing:.22em;   /* πιο σύνθημα */
  font-size:14px;         /* πιο tight */
}

/* ---------------- HEADER: META BOX AS STAMP ---------------- */

.masthead-meta{
  transform:rotate(-1deg);
  border-width:4px;
  box-shadow:6px 6px 0 #000;
  background:#fff;
}

.masthead-meta > div{
  line-height:1.35;
}

.masthead-meta:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background:radial-gradient(circle at 1px 1px, rgba(0,0,0,.18) 1px, transparent 1.25px);
  background-size:9px 9px;
  mix-blend-mode:multiply;
}

/* κάνει το EST πιο “stamp label” */
.masthead-meta .badge{
  display:inline-block;
  padding:2px 6px;
  border:3px solid #000;
  margin-bottom:8px;
  transform:rotate(1deg);
}

/* ---------------- NAV: KICKER λίγο πιο brutal ---------------- */

.kicker{
  letter-spacing:.16em;
  font-size:11px;
}




/* ---------------- MOBILE HEADER FIX ---------------- */

@media (max-width:680px){

  /* πιο “σφιχτό” masthead */
  .masthead{
    margin:12px 0 8px;
  }

  .masthead-inner{
    padding:12px 10px 10px;
    gap:10px;
  }

  /* μικρότερο logo */
  .brand-logo img{
    height:82px;
  }

  /* strapline πιο tight */
  .strapline{
    gap:8px;
    margin-top:6px;
    max-width:92vw;
  }
  .strapline-text{
    font-size:12px;
    letter-spacing:.18em;
    white-space:nowrap;
  }
  .strapline-rule{
    height:2px;
  }

  /* META: από “κουτί” σε “stamp strip” */
  .masthead-meta{
    width:auto;
    margin:6px auto 0;
    padding:6px 10px;
    border-width:3px;
    box-shadow:4px 4px 0 #000;
    transform:rotate(-.6deg);
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 10px;
    font-size:10px;
    letter-spacing:.14em;
  }

  /* κρύβουμε το badge για να μη φουσκώνει */
  .masthead-meta .badge{
    display:none;
  }

  /* κάνουμε τα meta σε μια πιο “συμπαγή” λογική */
  .masthead-meta > div{
    margin:0;
    padding:0;
  }

  /* NAV: να γίνει καθαρό και centered */
  .navbar-inner{
    flex-direction:column;
    gap:8px;
    padding:8px 6px;
  }

  .kicker{
    font-size:10px;
    letter-spacing:.18em;
    text-align:center;
    white-space:normal;
    line-height:1.2;
  }

  /* SUBSCRIBE: σαν μικρή σφραγίδα */
  .dw-subscribe{
    padding:6px 12px;
    font-size:11px;
    box-shadow:3px 3px 0 #000;
  }
}







/* ---------------- MOBILE: LOGO + META SIDE BY SIDE ---------------- */

@media (max-width:680px){

  /* Κάνουμε το masthead-inner 2-column grid */
  .masthead-inner{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand meta"
      "strap strap";
    align-items:center;
    gap:10px 12px;
    padding:12px 10px 10px;
  }

  /* Brand area */
  .brand{
    grid-area: brand;
    align-items:flex-start;
    text-align:left;
  }

  .brand-logo img{
    height:74px;       /* tune */
    max-width:62vw;
  }

  /* Strapline κάτω full width */
  .strapline{
    grid-area: strap;
    justify-content:center;
    width:100%;
    margin-top:2px;
    max-width:100%;
  }

  .strapline-text{
    font-size:12px;
    letter-spacing:.18em;
    white-space:nowrap;
  }

  .strapline-rule{
    height:2px;
  }

  /* Meta stamp δεξιά */
  .masthead-meta{
    grid-area: meta;
    margin:0;
    padding:6px 8px;
    border-width:3px;
    box-shadow:4px 4px 0 #000;
    transform:rotate(-.8deg);
    font-size:10px;
    letter-spacing:.14em;
    line-height:1.25;
    min-width:108px;
  }

  .masthead-meta .badge{
    display:none; /* στο mobile το κόβουμε */
  }

  /* Nav να μείνει καθαρό */
  .navbar-inner{
    flex-direction:column;
    gap:8px;
    padding:8px 6px;
  }

  .kicker{
    font-size:10px;
    letter-spacing:.18em;
    text-align:center;
    white-space:normal;
    line-height:1.2;
  }

  .dw-subscribe{
    padding:6px 12px;
    font-size:11px;
    box-shadow:3px 3px 0 #000;
  }
}




/* ======================================================
   DESKTOP HEADER (NYPOST-ish) — PC ONLY
====================================================== */
@media (min-width:981px){

  /* kill old masthead/navbar spacing if still present somewhere */
  .masthead, .navbar{ display:none; }

  .dw-tophead{
    background:#fff;
    color:#fff;
    border-bottom:6px solid #000;
  }

  .dw-tophead__inner{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    gap:18px;
    padding:14px 6px 12px;
    min-height:92px;
  }

  /* LEFT */
  .dw-tophead__left{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:"Courier Prime", monospace;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:12px;
  }

  .dw-subscribe{
  color:#000;
  background:#fff;
  text-decoration:none;
  padding:8px 12px 7px;
  border:3px solid #000;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  box-shadow:4px 4px 0 #000;
}


 .dw-subscribe__divider{
  width:2px;
  height:18px;
  background:#000;
  opacity:.25;
  display:inline-block;
}


 .dw-subscribe__small{
  opacity:1;
  font-size:11px;
  color:#000;
}


  /* CENTER LOGO */
  .dw-tophead__brand{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
  }

  .dw-tophead__logo img{
    height:64px;
    width:auto;
    display:block;
    filter:grayscale(100%) contrast(1.2) brightness(1.2);
  }

  .dw-tophead__strap{
  font-family:"Anton", sans-serif;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:14px;
  line-height:1;
  background:#fff;            /* χαρτί */
  color:#000;                 /* μελάνι */
  padding:6px 12px 5px;
  border:3px solid #000;      /* εφημερίδα */
  box-shadow:4px 4px 0 #000;  /* brutal print */
  transform:skewX(-6deg) rotate(-1deg);
}


  /* RIGHT META BOX */
  .dw-tophead__right{
    display:flex;
    justify-content:flex-end;
  }

  .dw-metaBox{
  background:#fff;
  color:#000;
  border:3px solid #000;
  padding:10px 12px 9px;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  line-height:1.3;
  box-shadow:4px 4px 0 #000;
  text-align:left;
}


  .dw-metaBox__row{ opacity:.95; }

  /* TICKER UNDER LOGO */
  .dw-tophead__ticker{
    background:#000;
    border-top:3px solid #000;
    border-bottom:3px solid #000;
  }

  .dw-tickerBar{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 6px;
  }

  .dw-tickerBar__label{
    font-family:"Courier Prime", monospace;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:11px;
    color:#fff;
    background:#c40000;
    padding:6px 10px 5px;
    border:2px solid #fff;
    box-shadow:4px 4px 0 #000;
    flex:0 0 auto;
  }

  .dw-tickerBar__marquee{
    overflow:hidden;
    white-space:nowrap;
    flex:1 1 auto;
  }

  .dw-tickerBar__track{
    display:inline-flex;
    align-items:center;
    will-change: transform;
    animation: dwHeaderMarquee 26s linear infinite;
  }

  .dw-tickerBar__content{
    display:inline-block;
    padding-right:40px;
    color:#fff;
    font-family:"Courier Prime", monospace;
    text-transform:uppercase;
    letter-spacing:.10em;
    font-size:12px;
    opacity:.95;
  }

  .dw-tickerBar__marquee:hover .dw-tickerBar__track{ animation-play-state: paused; }

  @keyframes dwHeaderMarquee{
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* OPTIONAL NAV LINE */
  .dw-tophead__nav{
    background:#000;
    border-bottom:1px solid rgba(255,255,255,.25);
  }

  .dw-tophead__navInner{
    padding:10px 6px;
  }

  .dw-sections{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:center;
    font-family:"Courier Prime", monospace;
    text-transform:uppercase;
    letter-spacing:.10em;
    font-size:12px;
  }

  .dw-sections a{
    color:#fff;
    text-decoration:none;
    opacity:.95;
  }

  .dw-sections a:hover{ text-decoration:underline; }
}







.dw-tophead__left{
  position:relative;
}

.dw-subscribeMsg{
  position:absolute;
  left:0;
  top:44px;
  background:#fff;
  color:#000;
  border:3px solid #000;
  box-shadow:4px 4px 0 #000;
  padding:8px 10px 7px;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  line-height:1.2;
  white-space:nowrap;
  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:999;
}

.dw-subscribeMsg.is-open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}




/* ======================================================
   MOBILE HEADER LAYOUT (structure only)
   Keeps your existing colors/palette — only reflow
====================================================== */

@media (max-width:680px){

  /* Let the header breathe */
  .dw-tophead{
    padding-top:8px;
  }

  /* Turn desktop grid into mobile layout */
  .dw-tophead__inner{
    display:grid;
    grid-template-columns: 1fr auto;   /* logo | meta */
    grid-template-areas:
      "brand right"
      "left  left";
    align-items:center;
    gap:10px 10px;
    padding:10px 6px 8px;
    min-height:auto;
  }

  /* Place items */
  .dw-tophead__brand{ grid-area: brand; justify-self:start; text-align:left; }
  .dw-tophead__right{ grid-area: right; justify-self:end; }
  .dw-tophead__left{
    grid-area: left;
    justify-self:start;
    align-self:start;
    display:flex;
    align-items:center;
    gap:10px;
    padding-top:4px;
  }

  /* Logo smaller for mobile */
  .dw-tophead__logo img{
    height:44px;
    max-width:60vw;
  }

  /* Strapline stays under logo but tighter */
  .dw-tophead__strap{
    margin-top:6px;
    font-size:12px;
    letter-spacing:.14em;
    transform:skewX(-6deg) rotate(-1deg);
  }

  /* Meta box: compact */
  .dw-metaBox{
    padding:8px 10px 7px;
    font-size:10px;
    line-height:1.25;
    box-shadow:3px 3px 0 #000;
  }

  /* Subscribe button stays as-is but scaled a bit */
  .dw-subscribe{
    padding:7px 10px 6px;
    font-size:11px;
    box-shadow:3px 3px 0 #000;
  }

  .dw-subscribe__divider{
    height:16px;
  }

  .dw-subscribe__small{
    font-size:10px;
    opacity:1;
  }

  /* Ticker sits under subscribe, full width */
  .dw-tophead__ticker{
    margin-top:8px;
  }

  .dw-tickerBar{
    padding:10px 6px;
    gap:10px;
  }

  .dw-tickerBar__label{
    font-size:10px;
    padding:6px 8px 5px;
    box-shadow:3px 3px 0 #000;
  }

  .dw-tickerBar__content{
    font-size:11px;
    padding-right:32px;
  }
}



/* ======================================================
   FIX MOBILE TICKER BREAK (NO WRAP + INLINE CONTENT)
====================================================== */
@media (max-width:680px){

  .dw-tickerBar{
    align-items:center;
  }

  /* the marquee area must NEVER wrap */
  .dw-tickerBar__marquee{
    overflow:hidden;
    white-space:nowrap;
    flex:1 1 auto;
    min-width:0; /* important in flex layouts */
  }

  /* keep the track as a single horizontal strip */
  .dw-tickerBar__track{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
  }

  /* your HTML uses <div> twice (for looping) -> force inline behavior */
  .dw-tickerBar__content{
    display:inline-block;
    white-space:nowrap;
    line-height:1;
    padding-right:32px;
  }
}








   MOBILE HEADER — FIXED (ticker anim + colors + meta box)
====================================================== */

/* Make sure marquee animation exists globally (not only desktop) */
@keyframes dwHeaderMarquee{
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width:680px){

  /* --- layout: logo+meta row, subscribe row, ticker row --- */
  .dw-tophead__inner{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand right"
      "left left";
    align-items:center;
    gap:10px 10px;
    padding:10px 6px 8px;
    min-height:auto;
  }

  .dw-tophead__brand{ grid-area: brand; justify-self:start; text-align:left; }
  .dw-tophead__right{ grid-area: right; justify-self:end; }
  .dw-tophead__left{
    grid-area: left;
    display:flex;
    align-items:center;
    gap:10px;
    padding-top:6px;
    position:relative;
  }

  /* Logo */
  .dw-tophead__logo img{
    height:44px;
    width:auto;
    max-width:60vw;
    display:block;
  }

  /* Strapline */
  .dw-tophead__strap{
    margin-top:6px;
    font-size:12px;
    letter-spacing:.14em;
    background:#fff;
    color:#000;
    border:3px solid #000;
    box-shadow:3px 3px 0 #000;
    padding:6px 10px 5px;
    transform:skewX(-6deg) rotate(-1deg);
    display:inline-block;
  }

  /* --- META BOX: force it to be a proper "box" like PC --- */
  .dw-metaBox{
    display:inline-block;
    background:#fff;
    color:#000;
    border:3px solid #000;
    box-shadow:3px 3px 0 #000;
    padding:8px 10px 7px;
    font-size:10px;
    line-height:1.25;
    letter-spacing:.14em;
    text-align:left;
    max-width:42vw; /* prevents ugly wrap */
  }

  .dw-metaBox__row{
    white-space:nowrap;
  }

  /* Subscribe button */
  .dw-subscribe{
    padding:7px 10px 6px;
    font-size:11px;
    box-shadow:3px 3px 0 #000;
  }

  .dw-subscribe__divider{
    width:2px;
    height:16px;
    background:#000;
    opacity:.25;
    display:inline-block;
  }

  .dw-subscribe__small{
    font-size:10px;
    opacity:1;
    color:#000;
    white-space:nowrap;
  }

  /* --- TICKER: black strip + red "breaking" label, and ALWAYS scroll --- */
  .dw-tophead__ticker{
    margin-top:10px;
    background:#000;
    border-top:3px solid #000;
    border-bottom:3px solid #000;
  }

  .dw-tickerBar{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 6px;
  }

  .dw-tickerBar__label{
    flex:0 0 auto;
    background:#c40000; /* red label */
    color:#fff;
    border:2px solid #fff;
    box-shadow:3px 3px 0 #000;
    padding:6px 8px 5px;
    font-family:"Courier Prime", monospace;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:10px;
    line-height:1;
    white-space:nowrap;
  }

  /* Critical: marquee must not wrap + must be flex-shrink safe */
  .dw-tickerBar__marquee{
    overflow:hidden;
    white-space:nowrap;
    flex:1 1 auto;
    min-width:0;
  }

  .dw-tickerBar__track{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    will-change:transform;
    animation: dwHeaderMarquee 22s linear infinite;
  }

  /* Your HTML uses two <div class="dw-tickerBar__content"> for loop
     => force inline-block so they stay on ONE line */
  .dw-tickerBar__content{
    display:inline-block;
    white-space:nowrap;
    color:#fff;
    font-family:"Courier Prime", monospace;
    text-transform:uppercase;
    letter-spacing:.10em;
    font-size:11px;
    line-height:1;
    padding-right:32px;
    opacity:.95;
  }

  /* Optional: pause on touch hold */
  .dw-tickerBar__marquee:active .dw-tickerBar__track{
    animation-play-state:paused;
  }
}






====================================================== */

@keyframes dwHeaderMarqueeMobile{
  0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50%,0,0); }
}

@media (max-width:680px){
  .dw-tickerBar__track{
    width:max-content; /* critical: make it as wide as its content */
    animation: dwHeaderMarqueeMobile 18s linear infinite !important;
    transform: translate3d(0,0,0);
  }

  .dw-tickerBar__marquee{
    overflow:hidden;
    white-space:nowrap;
  }

  .dw-tickerBar__content{
    display:inline-block;
    white-space:nowrap;
  }
}






/* ======================================================
   FORCE HEADER TICKER MARQUEE (NO NEW FILES)
====================================================== */

@keyframes dwTickerLoop{
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-50%,0,0); }
}

/* desktop + mobile */
.dw-tickerBar__marquee{
  overflow:hidden;
  white-space:nowrap;
  min-width:0;
}

.dw-tickerBar__track{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  will-change:transform;
  animation: dwTickerLoop 22s linear infinite !important;
}

.dw-tickerBar__content{
  display:inline-block;
  white-space:nowrap;
  flex:0 0 auto;
  padding-right:40px;
}





/* ======================================================
   CENSORED TRACK (CORE FILE panel)
====================================================== */

.dw-censoredTrack{
  margin-top:6px;
  padding:12px 12px 10px;
  border:3px solid #000;
  background:#fff;
  box-shadow:6px 6px 0 #000;
  transform:rotate(-.4deg);
  position:relative;
  overflow:hidden;
}

/* subtle gritty print texture */
.dw-censoredTrack:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.10;
  mix-blend-mode:multiply;
  background:radial-gradient(circle at 1px 1px, rgba(0,0,0,.22) 1px, transparent 1.25px);
  background-size:9px 9px;
}

.dw-ct-artist{
  position:relative;
  z-index:1;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  opacity:.9;
  margin-bottom:8px;
}

.dw-ct-title{
  position:relative;
  z-index:1;
  font-family:"Anton", sans-serif;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:24px;
  line-height:1.05;
  margin:0 0 10px;
}

.dw-ct-meta{
  position:relative;
  z-index:1;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  border-top:3px solid #000;
  padding-top:10px;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
}

.dw-ct-label{
  opacity:.75;
  margin-right:6px;
}

.dw-ct-albumTitle{
  opacity:.95;
}

.dw-ct-duration{
  white-space:nowrap;
  opacity:.95;
}

/* empty state */
.dw-censoredTrack.is-empty .dw-ct-title{
  font-size:18px;
}

@media (max-width:680px){
  .dw-ct-title{ font-size:22px; }
  .dw-ct-meta{ font-size:10px; }
}



/* multiple entries inside one censored track box */
.dw-ct-entry{
  padding:8px 0;
}

.dw-ct-divider{
  height:3px;
  background:#000;
  margin:8px 0;
  opacity:.9;
}




/* ARCHIVE CUT flag */
.dw-ct-flag{
  display:inline-block;
  margin:0 0 8px;
  padding:5px 8px 4px;
  border:3px solid #000;
  box-shadow:3px 3px 0 #000;
  background:#fff;
  color:#000;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:10px;
  transform:rotate(-2deg);
}

/* Divider BETWEEN entries (not a line) */
.dw-ct-entryDivider{
  height:14px;
  margin:10px 0;
  background:
    repeating-linear-gradient(
      90deg,
      #000 0 7px,
      transparent 7px 13px
    );
  opacity:.95;
  transform:skewX(-12deg) rotate(-0.25deg);
  filter: blur(.15px);
}





/* =========================
   CENSORED TRACK HEADER
========================= */

.panel-title--censored{
  background:#000;
  color:#fff;
  border:3px solid #000;
  padding:10px 14px 9px;
  margin-bottom:14px;

  font-family:"Anton", sans-serif;
  font-size:22px;
  letter-spacing:.18em;
  text-align:center;

  box-shadow:6px 6px 0 #000;
  position:relative;
}

/* print dirt */
.panel-title--censored:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.08) 0 2px,
      transparent 2px 6px
    );
  mix-blend-mode:screen;
}

/* slight misalignment */
.panel-title--censored{
  transform:rotate(-0.6deg);
}

/* mobile */
@media (max-width:680px){
  .panel-title--censored{
    font-size:18px;
    letter-spacing:.14em;
    padding:9px 12px 8px;
  }
}






.deck--full{
  margin-top:10px;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}

.deck--full p{
  margin:0 0 10px;
}

.deck--full p:last-child{
  margin-bottom:0;
}

.deck--full strong{
  font-weight:700;
}

.deck--full a{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}





/* ===== CENSORED TRACK: status line ===== */
.dw-ct-status{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:-6px 0 12px;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  opacity:.9;
}
.dw-ct-status__right{ white-space:nowrap; }

/* ===== TAPE READY: compact tracklist artifact ===== */
.dw-censoredTrack--tape{
  padding:12px 12px 10px;
}

.dw-tapeSide__title{
  font-family:"Anton", sans-serif;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:18px;
  margin:0 0 10px;
}

.dw-tapeList{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:11px;
}

.dw-tapeItem{
  display:flex;
  align-items:baseline;
  gap:10px;
}

.dw-tapeItem__num{
  width:30px;
  flex:0 0 30px;
  opacity:.85;
}

.dw-tapeItem__main{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dw-tapeItem__dur{
  flex:0 0 auto;
  white-space:nowrap;
  opacity:.9;
}

/* splice between SIDE A and SIDE B */
.dw-tapeSplice{
  height:14px;
  margin:12px 0;
  background:repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 13px);
  opacity:.95;
  transform:skewX(-12deg) rotate(-0.25deg);
  filter:blur(.15px);
}

@media (max-width:680px){
  .dw-ct-status{ font-size:10px; }
  .dw-tapeSide__title{ font-size:16px; }
  .dw-tapeList{ font-size:10px; }
}




/* GENRE line (preview cards) */
.dw-ct-genre{
  margin:0 0 6px;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  opacity:.95;
}
.dw-ct-genreName{ opacity:.95; }

/* Genre tag inside tape list (TAPE READY) */
.dw-tapeItem__genre{
  margin-left:10px;
  opacity:.85;
  letter-spacing:.14em;
  font-size:10px;
  white-space:nowrap;
}






/* =========================
   CENSORED TRACK META LAYOUT
   GENRE πάνω από ALBUM σε ΟΛΕΣ τις οθόνες
========================= */

.dw-ct-meta{
  display:grid;
  grid-template-columns: 1fr auto; /* left stack + right duration */
  grid-template-areas:
    "genre dur"
    "album dur";
  column-gap:12px;
  row-gap:1px;
  align-items:start;
}

.dw-ct-genre{ grid-area: genre; margin:0; }
.dw-ct-album{ grid-area: album; margin:0; }
.dw-ct-duration{
  grid-area: dur;
  align-self:center;
  white-space:nowrap;
}

/* προαιρετικό: αν θες πιο “strict” line breaks */
.dw-ct-genre,
.dw-ct-album{
  display:block;
}


.blacknote-body{
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}
.blacknote-body p{ margin:6px 0 0; }
.blacknote-body p:first-child{ margin-top:6px; }
.blacknote-body a{ color:inherit; text-decoration:underline; }
.blacknote-body strong{ font-weight:700; }



/* =========================================
   MOBILE ORDER: CENTER -> LEFT -> RIGHT
========================================= */
@media (max-width:680px){
  #lead{ order:1; }     /* CENTER */
  #latest{ order:2; }   /* LEFT */
  #radar{ order:3; }    /* RIGHT */
}




/* =========================================
   ARCHIVED TAPES — OVERLAY (UI)
========================================= */

.dw-tapeOverlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
}

.dw-tapeOverlay.is-open{
  display:block;
}

.dw-tapeOverlay__bg{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.92);
}

.dw-tapeOverlay__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(980px, 92vw);
  max-height:min(86vh, 980px);
  overflow:auto;

  background:#fff;
  border:4px solid #000;
  box-shadow:12px 12px 0 #000;
  padding:16px 16px 14px;

  /* newspaper-ish grain */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,.10) 1px, transparent 1.25px);
  background-size:9px 9px;
}

.dw-tapeOverlay__close{
  position:sticky;
  top:8px;
  left:8px;
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;

  border:3px solid #000;
  background:#fff;
  box-shadow:6px 6px 0 #000;
  cursor:pointer;
  font-family:"Courier Prime", monospace;
}

.dw-tapeOverlay__head{
  margin-top:10px;
  border-top:3px solid #000;
  border-bottom:3px solid #000;
  padding:12px 10px;
  background:#fff;
}

.dw-tapeOverlay__kicker{
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  opacity:.9;
}

.dw-tapeOverlay__title{
  margin:8px 0 8px;
  font-family:"Anton", sans-serif;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:clamp(22px, 3.8vw, 44px);
  line-height:1.05;
}

.dw-tapeOverlay__meta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:11px;
  opacity:.85;
}

.dw-tapeOverlay__body{
  padding:14px 10px 10px;
}

.dw-tapeSide__title{
  font-family:"Anton", sans-serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:18px;
  margin:0 0 8px;
  border-bottom:3px solid #000;
  padding-bottom:8px;
}

.dw-tapeList{
  list-style:none;
  margin:0;
  padding:0;
}

.dw-tapeItem{
  display:grid;
  grid-template-columns: 44px 1fr 64px;
  gap:10px;
  padding:6px 0;
  border-bottom:1px dashed rgba(0,0,0,.35);
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:12px;
}

.dw-tapeItem:last-child{
  border-bottom:none;
}

.dw-tapeItem__dur{
  text-align:right;
}

.dw-tapeSplice{
  height:16px;
  margin:14px 0;
  background:
    repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 14px);
}

/* footer strip */
.dw-tapeOverlay__foot{
  margin-top:12px;
  border-top:3px solid #000;
  padding-top:10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:11px;
  opacity:.85;
}

/* Mobile */
@media (max-width:680px){
  .dw-tapeOverlay__panel{
    width:94vw;
    max-height:88vh;
    padding:14px 14px 12px;
  }

  .dw-tapeItem{
    grid-template-columns: 40px 1fr 56px;
    font-size:11px;
    gap:8px;
  }

  .dw-tapeOverlay__close{
    width:36px;
    height:36px;
  }
}



/* =========================================
   ARCHIVED TAPES — FOOTER SHELF (UI)
========================================= */
.dw-archShelf{
  margin:10px auto 0;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:11px;
}

.dw-archShelf__link{
  color:inherit;
  text-decoration:none;
  border-bottom:2px solid #000;
  padding:2px 6px;            /* ⬅ ΜΠΑΙΝΕΙ ΕΞ ΑΡΧΗΣ */
  line-height:1;
}

.dw-archShelf__link:hover{
  background:#000;
  color:#fff;
  border-bottom-color:transparent;
}

.dw-archShelf__sep{
  opacity:.7;
}


/* =========================================
   TAPE OVERLAY — CLOSE BUTTON HIT AREA FIX
   Makes the whole X button clickable
========================================= */

.dw-tapeOverlay__close{
  position:absolute;
  top:14px;
  left:14px;
  z-index:10;

  /* the hit area */
  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0;
  margin:0;

  border:3px solid #000;
  background:#fff;
  color:#000;

  font-family:"Courier Prime", monospace;
  font-size:18px;
  line-height:1;

  cursor:pointer;
  -webkit-tap-highlight-color: transparent;

  /* brutal */
  box-shadow:5px 5px 0 #000;
}

.dw-tapeOverlay__close:hover,
.dw-tapeOverlay__close:focus-visible{
  background:#000;
  color:#fff;
  outline:none;
}

/* ensure the glyph doesn't shrink the button hit area */
.dw-tapeOverlay__close::before{
  content:"✖";
  display:block;
  transform: translateY(-1px);
}

/* if your HTML already contains ✖ inside the button,
   hide it to avoid double glyphs */
.dw-tapeOverlay__close{
  font-size:0; /* hides inner text node */
}
.dw-tapeOverlay__close::before{
  font-size:18px;
}

/* =========================================
   TAPE OVERLAY — HEADER LAYOUT (fix overlap)
========================================= */

.dw-tapeOverlay__panel{
  position:relative; /* ensure close anchors to panel */
}

/* Give the header space for the close button */
.dw-tapeOverlay__head{
  position:relative;
  padding-left:72px;           /* space for 44px button + gap */
  min-height:60px;             /* keeps kicker/title from sliding up */
}

/* Close button sits in its own pocket */
.dw-tapeOverlay__close{
  top:14px;
  left:14px;
}

/* Kicker never goes under the button */
.dw-tapeOverlay__kicker{
  display:inline-block;
  margin-top:2px;
}

/* Mobile: a bit tighter but still safe */
@media (max-width:680px){
  .dw-tapeOverlay__head{
    padding-left:74px;         /* close is bigger on mobile */
    min-height:64px;
  }
  .dw-tapeOverlay__close{
    top:12px;
    left:12px;
  }
}


.dw-image-source{
  margin-top:6px;
  text-align:right;
  font-family:"Courier Prime", monospace;
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  opacity:.9;
}


/* ======================================================
   DEADWAX — INDEX CARD (shared notice component)
   Flat catalog-card look: title, thin rule, body.
   Used by the returning-visitor archive notice.
====================================================== */

.dw-card{
  position:relative;
  display:block;
  border:2px solid #000;
  box-shadow:4px 4px 0 #000;
  background:#fff;
  padding:10px 34px 10px 12px;
}

.dw-card__title{
  display:block;
  font-family:"Anton", sans-serif;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:12px;
  border-bottom:2px solid #000;
  padding-bottom:5px;
  margin-bottom:5px;
}

.dw-card__body{
  display:block;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:10.5px;
  line-height:1.45;
  opacity:.9;
}

.dw-card__close{
  position:absolute;
  top:6px;
  right:6px;
  width:22px;
  height:22px;
  padding:0;
  border:2px solid #000;
  background:#fff;
  font-family:"Courier Prime", monospace;
  font-size:11px;
  line-height:1;
  cursor:pointer;
}

.dw-card__close:hover,
.dw-card__close:focus-visible{
  background:#000;
  color:#fff;
  outline:none;
}

.dw-card__close:focus-visible{
  outline:2px solid #000;
  outline-offset:2px;
}

/* ---- returning-visitor toast: floating, temporary ---- */

.dw-toast{
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:9990;
  max-width:280px;
}

.dw-toast .dw-card{
  opacity:0;
  transform:translateY(8px);
  animation:dwToastIn .22s ease forwards;
}

@keyframes dwToastIn{
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .dw-toast .dw-card{
    animation:none;
    opacity:1;
    transform:none;
  }
}

@media (max-width:640px){
  .dw-toast{
    left:12px;
    right:12px;
    bottom:12px;
    max-width:none;
  }
}


/* ======================================================
   DEADWAX — LEAVE A MARK
   Anonymous "mark" instead of a like button. A scratch,
   anchored to the lead panel's corner (.panel-lead is
   already position:relative), accumulates in density as
   the post's anonymous aggregate count grows.
====================================================== */

.dw-mark-wrap{
  margin-top:16px;
  padding-top:12px;
  border-top:3px solid #000;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.dw-mark-btn{
  border:2px solid #000;
  background:#fff;
  padding:8px 14px 7px;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11.5px;
  box-shadow:4px 4px 0 #000;
  cursor:pointer;
}

.dw-mark-btn:hover{
  background:#000;
  color:#fff;
}

.dw-mark-btn:focus-visible{
  outline:3px solid #900;
  outline-offset:2px;
}

.dw-mark-btn.is-marked{
  background:#000;
  color:#fff;
  cursor:default;
  box-shadow:2px 2px 0 #000;
}

.dw-mark-btn.is-marked:hover{
  background:#000;
}

.dw-mark-status{
  font-family:"Courier Prime", monospace;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.75;
}

.dw-mark-scratches{
  position:relative;
  display:inline-block;
  width:60px;
  height:28px;
  pointer-events:none;
  flex:0 0 auto;
}

.dw-mark-scratches span{
  position:absolute;
  height:2px;
  background:#fff;
  mix-blend-mode:difference;
  opacity:0;
  transition:opacity .25s ease;
}

.dw-mark-scratches span.on{ opacity:1; }

.dw-mark-scratches span:nth-child(1){ width:24px; top:2px;  left:4px;  transform:rotate(-8deg); }
.dw-mark-scratches span:nth-child(2){ width:16px; top:15px; left:22px; transform:rotate(12deg); }
.dw-mark-scratches span:nth-child(3){ width:26px; top:0;    left:30px; transform:rotate(-5deg); }
.dw-mark-scratches span:nth-child(4){ width:14px; top:18px; left:6px;  transform:rotate(18deg); }

@media (prefers-reduced-motion: reduce){
  .dw-mark-scratches span{ transition:none; }
}

@media (max-width:640px){
  .dw-mark-scratches{ width:52px; height:26px; }
}


/* ======================================================
   DEADWAX — OPTIMISM PAYWALL (easter egg)
   A discreet "classified ad" trigger and a brutal-print
   parody paywall dialog. Standalone: its own dialog/focus
   logic, no shared component with the image or tape modals.
====================================================== */

/* ---- trigger: classified-ad box in Black Note
   (same brutal-print treatment as .dw-errata/.dw-manifesto:
   aged paper, rotated, bordered, shadowed, grain texture) ---- */

.dw-classifieds{
  margin-top:14px;
  padding:14px 12px 12px;
  border:3px solid #000;
  background:#ddd3c3;
  box-shadow:6px 6px 0 #000;
  position:relative;
  overflow:hidden;
  transform:rotate(1.3deg);
}

.dw-classifieds:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background:radial-gradient(circle at 1px 1px, rgba(0,0,0,.18) 1px, transparent 1.3px);
  background-size:6px 6px;
  mix-blend-mode:multiply;
}

.dw-classifieds__kicker{
  position:relative;
  z-index:1;
  display:inline-block;
  font-family:"Anton", sans-serif;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:22px;
  line-height:1;
  color:#000;
  margin:0 0 10px;
  transform:rotate(-1.5deg);
}

.dw-optimism-trigger{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  text-align:left;
  padding:8px 0 0;
  border:0;
  border-top:2px dashed rgba(0,0,0,.4);
  background:none;
  font-family:"Courier Prime", monospace;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#000;
  cursor:pointer;
}

.dw-optimism-trigger:before{ content:"» "; }
.dw-optimism-trigger:after{ content:" «"; }
.dw-optimism-trigger:hover{ opacity:.6; }

.dw-optimism-trigger:focus-visible{
  outline:2px solid #000;
  outline-offset:3px;
}

/* ---- dialog ---- */

.dw-optimism{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.dw-optimism.is-open{ display:flex; }

.dw-optimism__bg{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
}

.dw-optimism__panel{
  position:relative;
  width:min(460px, 100%);
  max-height:88vh;
  overflow:auto;
  background:#fff;
  border:3px solid #000;
  box-shadow:10px 10px 0 #000;
  padding:18px 18px 16px;
}

.dw-optimism__panel:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background:radial-gradient(circle at 1px 1px, rgba(0,0,0,.2) 1px, transparent 1.25px);
  background-size:8px 8px;
  mix-blend-mode:multiply;
}

@keyframes dwOptimismFlicker{
  0%{ opacity:0; transform:translate(2px,-2px); filter:contrast(1.4) brightness(1.3); }
  30%{ opacity:1; transform:translate(-1px,1px); }
  100%{ opacity:1; transform:translate(0,0); filter:none; }
}

.dw-optimism.is-open .dw-optimism__panel{
  animation:dwOptimismFlicker .22s steps(3, end);
}

@media (prefers-reduced-motion: reduce){
  .dw-optimism.is-open .dw-optimism__panel{ animation:none; }
}

.dw-optimism__close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  width:32px;
  height:32px;
  border:2px solid #000;
  background:#fff;
  font-family:"Courier Prime", monospace;
  font-size:14px;
  cursor:pointer;
}

.dw-optimism__close:hover{ background:#000; color:#fff; }

.dw-optimism__close:focus-visible{
  outline:3px solid #900;
  outline-offset:2px;
}

.dw-optimism__kicker{
  position:relative;
  z-index:1;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10.5px;
  border-bottom:3px solid #000;
  padding-bottom:9px;
  padding-right:40px;
  margin-bottom:12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.dw-optimism__title{
  position:relative;
  z-index:1;
  font-family:"Anton", sans-serif;
  text-transform:uppercase;
  letter-spacing:.01em;
  font-size:clamp(22px, 5vw, 30px);
  line-height:1.05;
  margin:0 0 4px;
  text-wrap:balance;
}


.dw-optimism__sub{
  position:relative;
  z-index:1;
  font-family:"Courier Prime", monospace;
  font-size:11.5px;
  letter-spacing:.04em;
  margin:0 0 14px;
  opacity:.85;
}

.dw-optimism__meta{
  position:relative;
  z-index:1;
  border-top:2px solid #000;
  border-bottom:2px solid #000;
  padding:10px 0;
  margin-bottom:14px;
  font-family:"Courier Prime", monospace;
  font-size:10.5px;
  letter-spacing:.04em;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 10px;
}

.dw-optimism__meta div b{ opacity:.6; font-weight:400; }

.dw-optimism__plans{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:16px;
}

.dw-plan{ border:2px solid #000; padding:8px 9px; }

.dw-plan__name{
  font-family:"Anton", sans-serif;
  font-size:12.5px;
  text-transform:uppercase;
  border-bottom:2px solid #000;
  padding-bottom:5px;
  margin-bottom:6px;
}

.dw-plan ul{
  list-style:none;
  margin:0;
  padding:0;
  font-family:"Courier Prime", monospace;
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.7;
}

.dw-plan.is-premium{ position:relative; opacity:.7; }

.dw-plan__stamp{
  display:inline-block;
  margin-top:6px;
  padding:3px 6px;
  border:2px solid #900;
  color:#900;
  font-family:"Courier Prime", monospace;
  font-size:8.5px;
  letter-spacing:.06em;
  transform:rotate(-2deg);
}

.dw-optimism__action{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  border:2px solid #000;
  background:#000;
  color:#fff;
  padding:11px 14px;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  cursor:pointer;
  box-shadow:4px 4px 0 #000;
}

.dw-optimism__action:hover{ background:#fff; color:#000; }
.dw-optimism__action.is-secondary{ background:#fff; color:#000; }
.dw-optimism__action.is-secondary:hover{ background:#000; color:#fff; }

.dw-optimism__action:focus-visible{
  outline:3px solid #900;
  outline-offset:2px;
}

/* ---- closing toast ---- */

.dw-optimism-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:99999;
  max-width:calc(100vw - 32px);
  border:2px solid #000;
  background:#fff;
  box-shadow:5px 5px 0 #000;
  padding:9px 14px;
  font-family:"Courier Prime", monospace;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  text-align:center;
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}

.dw-optimism-toast.is-open{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .dw-optimism-toast{ transition:none; }
}

@media (max-width:480px){
  .dw-optimism__plans{ grid-template-columns:1fr; }
  .dw-optimism__meta{ grid-template-columns:1fr; }
  .dw-optimism__panel{ padding:16px 14px 14px; }
}

/* Desktop: the 460px cap read as cramped/undersized on wide screens */
@media (min-width:900px){
  .dw-optimism__panel{
    width:min(640px, 90vw);
    padding:26px 28px 24px;
  }
  .dw-optimism__kicker{ font-size:12px; }
  .dw-optimism__title{ font-size:clamp(28px, 3.4vw, 40px); }
  .dw-optimism__sub{ font-size:13.5px; margin-bottom:18px; }
  .dw-optimism__meta{ font-size:12px; padding:14px 0; }
  .dw-plan{ padding:12px 14px; }
  .dw-plan__name{ font-size:15px; }
  .dw-plan ul{ font-size:11px; }
  .dw-plan__stamp{ font-size:9.5px; }
  .dw-optimism__action{ font-size:13px; padding:13px 16px; }
}