/* ============================================================
   jill.stream — vintage broadcast salon
   art-deco · sidebar · serif-classic · complementary · underline-draw
   ============================================================ */

:root{
  --ivory:#f4ede0;
  --lampblack:#1a1614;
  --teal:#2f5a5e;
  --rust:#b85431;
  --bronze:#8a7e6c;
  --bistre:#0d0a08;

  --serif-display:'Cormorant Garamond', Georgia, serif;
  --serif-body:'Cormorant Infant', Georgia, serif;
  --fell:'IM Fell English SC', Georgia, serif;

  --sidebar-w:260px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--lampblack);
  color:var(--lampblack);
  font-family:var(--serif-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ===== Grain overlay ===== */
.grain{
  position:fixed;
  inset:0;
  width:100vw;height:100vh;
  pointer-events:none;
  z-index:9999;
  opacity:.06;
  mix-blend-mode:multiply;
}

/* ===== Frame ===== */
.frame{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:100vh;
  position:relative;
}

/* ============ SIDEBAR ============ */
.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  background:var(--lampblack);
  color:var(--ivory);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:34px 18px 0;
  border-right:1px solid rgba(138,126,108,.35);
  overflow:hidden;
  z-index:5;
}
/* grain reads as 'screen' over the lampblack sidebar */
.sidebar::after{
  content:"";
  position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.88 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:screen;
  opacity:.05;
  pointer-events:none;
}

.seal{display:block;line-height:0;margin-bottom:22px;}
.seal svg .rays line{stroke:var(--ivory);stroke-width:1.4;}
.seal svg .rays line:nth-child(even){stroke:var(--teal);}
.seal svg .seal-base{stroke:var(--ivory);stroke-width:1.6;}
.seal svg .seal-letter{
  font-family:var(--serif-display);
  font-weight:600;
  font-size:34px;
  fill:var(--ivory);
  text-anchor:middle;
}
.seal svg .seal-lozenge{fill:var(--teal);}

.vrule{
  width:1px;height:34px;
  background:var(--teal);
  margin-bottom:24px;
}

/* nav */
.nav{
  display:flex;
  flex-direction:column;
  width:100%;
  border-top:1px solid rgba(138,126,108,.35);
}
.nav-item{
  position:relative;
  display:block;
  text-decoration:none;
  color:var(--ivory);
  font-family:var(--serif-display);
  font-variant:small-caps;
  font-weight:500;
  font-size:1.02rem;
  letter-spacing:.18em;
  padding:12px 4px 13px;
  text-align:center;
  border-bottom:1px solid rgba(138,126,108,.35);
}
.nav-item span{position:relative;z-index:2;}
.nav-line{
  position:absolute;
  left:14%;bottom:8px;
  width:72%;height:2px;
  overflow:visible;
}
.nav-line line{
  stroke:var(--teal);
  stroke-width:1;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset 420ms cubic-bezier(.65,0,.35,1);
}
.nav-item:hover .nav-line line,
.nav-item:focus .nav-line line,
.nav-item.is-current .nav-line line{stroke-dashoffset:0;}
.nav-item.is-current{color:var(--ivory);}
.nav-item.is-current span::before{
  content:"·";
  color:var(--rust);
  margin-right:.4em;
}

/* ON AIR */
.onair{
  position:relative;
  width:100%;
  margin-top:auto;
  padding:22px 0 16px;
  text-align:center;
  border-top:1px solid rgba(138,126,108,.35);
}
.onair-line{
  position:absolute;
  left:50%;top:0;
  width:2px;height:22px;
  transform:translateX(-50%);
  overflow:visible;
}
.onair-line line{
  stroke:var(--bronze);
  stroke-width:1;
  stroke-dasharray:40;
  stroke-dashoffset:40;
  transition:stroke-dashoffset 420ms cubic-bezier(.65,0,.35,1);
}
.onair:hover .onair-line line,
.onair.lit .onair-line line{stroke-dashoffset:0;}
.onair-dot{
  display:inline-block;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--teal);
  vertical-align:middle;
  margin-right:8px;
  box-shadow:0 0 0 1px rgba(244,237,224,.25);
}
.onair-label{
  font-family:var(--fell);
  font-size:.74rem;
  letter-spacing:.22em;
  color:var(--bronze);
  text-transform:uppercase;
}
.onair-time{
  display:block;
  margin-top:9px;
  font-family:var(--serif-display);
  font-weight:500;
  font-size:1.4rem;
  letter-spacing:.04em;
  color:var(--ivory);
  font-feature-settings:"onum" 1;
}

/* antenna */
.antenna{margin:14px 0 18px;line-height:0;}
.antenna line{stroke:var(--ivory);stroke-width:1.4;}
.antenna line:last-child{stroke:var(--teal);}

.chevron-toggle{display:none;}

/* ===== broadcast tower (over sidebar) ===== */
.tower{
  position:fixed;
  left:0;top:0;
  width:var(--sidebar-w);
  height:100vh;
  pointer-events:none;
  z-index:4;
  opacity:.5;
}
.tower .tier{fill:none;stroke:var(--ivory);stroke-width:1;}
.tower .mast{stroke:var(--ivory);stroke-width:1;}
.tower .ping{
  fill:none;
  stroke:var(--ivory);
  stroke-width:1;
}
.tower .ping-1{stroke-dasharray:63;stroke-dashoffset:63;}
.tower .ping-2{stroke-dasharray:126;stroke-dashoffset:126;}
.tower .ping-3{stroke-dasharray:189;stroke-dashoffset:189;}
.tower.bloom .ping-1{transition:stroke-dashoffset 1100ms cubic-bezier(.65,0,.35,1) 200ms;stroke-dashoffset:0;}
.tower.bloom .ping-2{transition:stroke-dashoffset 1100ms cubic-bezier(.65,0,.35,1) 500ms;stroke-dashoffset:0;}
.tower.bloom .ping-3{transition:stroke-dashoffset 1100ms cubic-bezier(.65,0,.35,1) 800ms;stroke-dashoffset:0;}

/* ============ CANVAS ============ */
.canvas{
  position:relative;
  background:var(--ivory);
  padding:0 96px 0;
  min-height:100vh;
}
.sunburst{
  position:absolute;
  top:0;right:0;
  width:96px;height:96px;
  pointer-events:none;
}
.sunburst line{stroke:var(--ivory);stroke-width:1;}
/* the sunburst rays need to be visible — draw them on a faint backdrop */
.canvas::before{
  content:"";
  position:absolute;
  top:0;right:0;
  width:120px;height:120px;
  background:
    repeating-linear-gradient(225deg, transparent 0 9px, rgba(184,84,49,.16) 9px 10px);
  -webkit-mask:radial-gradient(120px 120px at 100% 0, #000 0, #000 100%, transparent 100%);
  mask:radial-gradient(120px 120px at 100% 0, #000 0, #000 100%, transparent 100%);
  pointer-events:none;
}
.canvas .sunburst{display:none;} /* superseded by ::before ray fan */

/* ===== transmission cell ===== */
.transmission{
  position:relative;
  max-width:680px;
  margin:0 auto;
  padding:96px 0 56px;
}
.transmission.hero{padding-top:120px;}

.margin-label{
  position:absolute;
  right:-58px;top:120px;
  transform:rotate(90deg);
  transform-origin:top right;
  white-space:nowrap;
  font-family:var(--fell);
  font-size:.7rem;
  letter-spacing:.22em;
  color:var(--bronze);
  text-transform:uppercase;
}

.numeral-row{
  display:flex;
  align-items:flex-start;
  gap:28px;
  margin-bottom:14px;
}
.issue-date{
  font-family:var(--fell);
  font-size:.72rem;
  letter-spacing:.22em;
  color:var(--bronze);
  align-self:flex-end;
  padding-bottom:1.4rem;
}

.numeral{
  position:relative;
  display:inline-block;
  line-height:.9;
}
.numeral-glyph{
  font-family:var(--serif-display);
  font-weight:500;
  letter-spacing:-.02em;
  font-size:clamp(5rem,12vw,9rem);
  color:var(--ivory);
  -webkit-text-stroke:1px var(--lampblack);
  text-shadow:0 0 .5px rgba(26,22,20,.55);
  transition:color 420ms cubic-bezier(.65,0,.35,1), -webkit-text-stroke-color 420ms;
}
.hero .numeral-glyph{font-size:clamp(8rem,18vw,14rem);}
.transmission:hover .numeral-glyph,
.transmission.is-here .numeral-glyph{
  color:var(--rust);
  -webkit-text-stroke:1px var(--rust);
}
.numeral-draw{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  pointer-events:none;
  overflow:visible;
}
.numeral-draw .nd{
  stroke:var(--lampblack);
  stroke-width:2;
  fill:none;
  stroke-dasharray:220;
  stroke-dashoffset:220;
}
.numeral.drawn .numeral-draw .nd{
  transition:stroke-dashoffset 900ms cubic-bezier(.65,0,.35,1);
  stroke-dashoffset:0;
}
.numeral.drawn .numeral-draw .nd-stem{transition-delay:120ms;}
.numeral.drawn .numeral-draw .nd-foot{transition-delay:280ms;}

/* the rust 'now playing' rubber-stamp I */
.transmission.is-here::before{
  content:"I";
  position:absolute;
  left:-46px;top:96px;
  font-family:var(--serif-display);
  font-weight:600;
  font-size:1.6rem;
  color:var(--rust);
  opacity:.7;
  transform:rotate(-7deg);
}

.dek{
  font-family:var(--serif-display);
  font-style:italic;
  font-weight:400;
  font-size:1.4rem;
  line-height:1.5;
  color:var(--lampblack);
  margin:6px 0 30px;
  max-width:30em;
}

.headline{
  font-family:var(--serif-display);
  font-variant:small-caps;
  font-weight:600;
  letter-spacing:.18em;
  font-size:1.75rem;
  color:var(--lampblack);
  margin:8px 0 22px;
}

.body p{
  font-family:var(--serif-body);
  font-weight:400;
  font-size:1.08rem;
  line-height:1.7;
  margin:0 0 1.15em;
  font-feature-settings:"onum" 1,"liga" 1;
  color:#241f1a;
}
.body em{
  font-family:var(--serif-display);
  font-style:italic;
  color:var(--rust);
}
.sidebar-quote{
  font-family:var(--serif-display)!important;
  font-style:italic;
  font-size:.92rem!important;
  line-height:1.6!important;
  color:var(--teal)!important;
  border-left:4px solid var(--teal);
  padding-left:18px;
  margin:1.6em 0 1.6em 8px!important;
  max-width:26em;
}

/* postal cancellation stamp on hero */
.cancel-stamp{
  position:absolute;
  right:-30px;bottom:18px;
  width:200px;height:110px;
  transform:rotate(8deg);
  opacity:.18;
  pointer-events:none;
}
.cancel-stamp ellipse,.cancel-stamp line{stroke:var(--teal);stroke-width:1.4;fill:none;}
.cancel-stamp .cs-text{
  font-family:var(--fell);
  font-size:15px;
  letter-spacing:.2em;
  fill:var(--teal);
  text-anchor:middle;
}
.cancel-stamp .cs-small{font-size:10px;}

/* ===== deco rule between transmissions ===== */
.deco-rule{
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:680px;
  margin:0 auto;
  padding:14px 0;
}
.deco-rule::before,
.deco-rule::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--teal);
  opacity:.55;
}
.deco-rule::before{margin-right:14px;}
.deco-rule::after{margin-left:14px;}
.lozenge{
  position:relative;
  width:6px;height:6px;
  background:var(--teal);
  transform:rotate(45deg);
  flex:0 0 auto;
}
.lozenge::before,
.lozenge::after{
  content:"";
  position:absolute;
  width:7px;height:7px;
  border-right:1px solid var(--teal);
  border-bottom:1px solid var(--teal);
}
.lozenge::before{left:-18px;top:0;transform:rotate(135deg);}
.lozenge::after{left:11px;top:0;transform:rotate(-45deg);}

/* ===== footer ===== */
.footer{
  position:relative;
  background:var(--lampblack);
  color:var(--ivory);
  margin:60px -96px 0;
  padding:64px 96px 56px;
  text-align:center;
  overflow:hidden;
}
.footer::after{ /* grain screen over lampblack footer */
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.88 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:screen;opacity:.05;pointer-events:none;
}
.arches{
  display:block;
  width:100%;max-width:480px;
  height:auto;
  margin:0 auto 20px;
}
.arches path{fill:none;stroke:var(--ivory);stroke-width:1;}
.arches path:nth-child(2){stroke:var(--teal);}
.footer-seal{line-height:0;margin-bottom:12px;}
.footer-seal .rays line{stroke:var(--ivory);stroke-width:1.4;}
.footer-seal .rays line:nth-child(even){stroke:var(--teal);}
.footer-seal .seal-base{stroke:var(--ivory);stroke-width:1.6;}
.footer-seal .seal-letter{font-family:var(--serif-display);font-weight:600;font-size:34px;fill:var(--ivory);text-anchor:middle;}
.footer-seal .seal-lozenge{fill:var(--teal);}
.colophon-line{
  font-family:var(--serif-display);
  font-variant:small-caps;
  letter-spacing:.18em;
  font-size:1.05rem;
  color:var(--ivory);
  margin:0 0 14px;
}
.postal-stamp{
  font-family:var(--fell);
  font-size:.78rem;
  letter-spacing:.2em;
  color:var(--teal);
  text-transform:uppercase;
  display:inline-block;
  transform:rotate(-2deg);
  margin:0;
}

/* ===== mobile nav overlay ===== */
.nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(13,10,8,.97);
  z-index:10000;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.nav-overlay.open{display:flex;}
.overlay-close{
  position:absolute;
  top:18px;right:24px;
  background:none;border:none;
  color:var(--ivory);
  font-size:2.2rem;
  cursor:pointer;
  line-height:1;
}
.overlay-nav{display:flex;flex-direction:column;text-align:center;gap:4px;}
.overlay-nav a{
  font-family:var(--serif-display);
  font-variant:small-caps;
  letter-spacing:.2em;
  font-size:1.8rem;
  color:var(--ivory);
  text-decoration:none;
  padding:10px 0;
  border-bottom:1px solid rgba(138,126,108,.3);
}
.overlay-nav a:hover{color:var(--teal);}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
  .canvas{padding:0 56px;}
  .footer{margin:60px -56px 0;padding:56px 56px 48px;}
  .margin-label{right:-46px;}
}

@media (max-width:900px){
  :root{--sidebar-w:64px;}
  .sidebar{padding:24px 6px 0;}
  .seal{margin-bottom:14px;}
  .seal svg{width:40px;height:40px;}
  .nav,.onair,.antenna{display:none;}
  .vrule{height:60vh;margin:14px 0;}
  .tower{display:none;}
  .chevron-toggle{
    display:flex;
    flex-direction:column;
    gap:5px;
    background:none;border:none;
    cursor:pointer;
    margin-top:auto;margin-bottom:20px;
    padding:8px;
  }
  .chevron-toggle span{
    width:18px;height:0;
    border-top:1px solid var(--ivory);
    border-right:1px solid var(--ivory);
    transform:rotate(45deg) skew(-8deg,-8deg);
    padding:5px;
  }
}

@media (max-width:640px){
  .canvas{padding:0 24px;}
  .footer{margin:48px -24px 0;padding:48px 24px 40px;}
  .transmission{padding:64px 0 40px;}
  .transmission.hero{padding-top:80px;}
  .margin-label{
    position:static;
    transform:none;
    display:block;
    margin-bottom:8px;
    text-align:left;
  }
  .transmission.is-here::before{display:none;}
  .numeral-row{gap:16px;}
  .issue-date{padding-bottom:.8rem;font-size:.66rem;}
  .dek{font-size:1.2rem;}
  .headline{font-size:1.4rem;}
  .cancel-stamp{right:-10px;width:150px;}
  .canvas::before{width:80px;height:80px;}
}