/* ============================================================
   THE BEARISH TIMES — a hand-printed doomer broadsheet
   palette pulled straight from the artwork
   ============================================================ */

:root{
  --void:    #140409;
  --void-2:  #1b070d;
  --maroon:  #250102;
  --ink:     #050406;
  --blood:   #e00000;
  --blood-d: #a90606;
  --flesh:   #ff9799;
  --flesh-d: #cf6967;
  --bone:    #efe3d6;
  --bone-2:  #d9cbbb;
  --bone-dim:#a2917f;

  --edge: 2.5px;
  --maxw: 1120px;

  --hand: "Shantell Sans", "Comic Sans MS", cursive;     /* the brand, lettered by hand */
  --serif:"Newsreader", Georgia, "Times New Roman", serif;/* the newsprint */
  --mono: "Space Mono", ui-monospace, monospace;          /* stamped data */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:#090104; color:var(--bone);
  font-family:var(--serif); font-size:clamp(15px,1.05vw,17px); line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }
.defs{ position:absolute; }
::selection{ background:var(--blood); color:var(--bone); }

/* ---------- textures ---------- */
.grain{
  position:fixed; inset:-50%; z-index:9000; pointer-events:none;
  opacity:.07; mix-blend-mode:screen;
  background-image: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.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grainshift 7s steps(6) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,2%)} 40%{transform:translate(3%,-3%)}
  60%{transform:translate(-2%,4%)} 80%{transform:translate(4%,1%)} 100%{transform:translate(0,0)}
}
.vignette{
  position:fixed; inset:0; z-index:8999; pointer-events:none;
  background:radial-gradient(130% 120% at 50% 30%, transparent 52%, rgba(0,0,0,.6) 100%);
}

/* ---------- the sheet ---------- */
.paper{
  position:relative; z-index:1;
  max-width:var(--maxw); margin:clamp(.6rem,2vw,2rem) auto; padding:clamp(1.1rem,3.5vw,2.6rem);
  background:
    radial-gradient(120% 60% at 80% -5%, #2a0509 0%, rgba(42,5,9,0) 55%),
    radial-gradient(90% 50% at 0% 105%, #1e060c 0%, rgba(30,6,12,0) 55%),
    var(--void);
  border:var(--edge) solid var(--ink);
  box-shadow:0 0 0 1px rgba(255,151,153,.05), 0 30px 80px rgba(0,0,0,.7);
}
/* faint horizontal fold */
.paper::after{
  content:""; position:absolute; left:0; right:0; top:62%; height:30px; pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.22), rgba(255,255,255,.03), rgba(0,0,0,.18));
  opacity:.5;
}

/* reusable hand-inked hairlines */
.hr{ border:0; height:0; border-top:var(--edge) solid var(--ink); filter:url(#rough2); }

/* ============================================================
   MASTHEAD
   ============================================================ */
.mast{ position:relative; text-align:center; padding:.4rem 0 .8rem; }
.mast__ears{ position:absolute; inset:0 0 auto 0; display:flex; justify-content:space-between; top:.2rem; }
.ear{
  font-family:var(--mono); font-size:.6rem; line-height:1.25; letter-spacing:.12em;
  color:var(--bone-2); border:2px solid var(--ink); padding:.3rem .5rem; text-align:center;
  background:var(--void-2);
}
.ear--l{ transform:rotate(-3deg); } .ear--r{ transform:rotate(2.5deg); color:var(--flesh); border-color:var(--blood-d); }
.mast__title{ display:block; color:var(--bone); text-decoration:none; }
.mast__the{
  display:block; font-family:var(--mono); letter-spacing:.55em; font-size:.8rem;
  color:var(--flesh-d); margin-left:.55em; margin-bottom:-.2em;
}
.mast__name{
  display:block; font-family:var(--hand); font-weight:800;
  font-size:clamp(2.7rem,11vw,6.2rem); line-height:.9; letter-spacing:.01em;
  text-shadow:4px 5px 0 var(--ink), -1px -1px 0 var(--blood);
}
.mast__motto{ font-family:var(--serif); font-style:italic; color:var(--bone-2); margin:.5rem 0 .7rem; font-size:1.02rem; }
.buybtn{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  margin:.1rem auto .8rem; padding:.5rem 1.25rem;
  font-family:var(--hand); font-weight:800; font-size:1.15rem;
  color:var(--bone); background:var(--blood); text-decoration:none;
  border:var(--edge) solid var(--ink); transform:rotate(-1.4deg);
  box-shadow:4px 5px 0 var(--ink); transition:transform .14s ease;
}
.buybtn::before{ content:""; position:absolute; inset:-1px; border:var(--edge) solid var(--ink); filter:url(#rough); pointer-events:none; }
.buybtn:hover{ transform:rotate(1.4deg) translateY(-2px) scale(1.04); }
.buybtn__arrow{ width:30px; height:18px; }
.buybtn__arrow path{ fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.mast__line{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem .8rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim);
  border-top:var(--edge) solid var(--ink); border-bottom:var(--edge) solid var(--ink);
  padding:.45rem 0; margin-top:.2rem;
}
.mast__line .dot{ color:var(--blood); }
@media(max-width:560px){ .mast__ears{ display:none; } }

/* ============================================================
   DOWN-ONLY TICKER
   ============================================================ */
.quotes{
  margin-top:.9rem; background:var(--ink); overflow:hidden; padding:.4rem 0;
  border:var(--edge) solid var(--ink); border-left:0; border-right:0;
  box-shadow:inset 0 0 0 2px rgba(255,151,153,.06);
}
.quotes__track{ display:inline-flex; gap:2.2rem; white-space:nowrap; align-items:center; animation:marquee 32s linear infinite; will-change:transform; }
.q{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono); font-weight:700; font-size:.84rem; letter-spacing:.05em; }
.q__a{ width:.95em; height:.95em; }
.q--dn{ color:var(--blood); } .q--up{ color:var(--bone-2); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   LEAD
   ============================================================ */
.front{ padding-top:1.4rem; }
.lead{ text-align:center; padding-bottom:1.1rem; border-bottom:5px double var(--ink); margin-bottom:1.3rem; }
.lead__kicker{ font-family:var(--mono); letter-spacing:.28em; font-size:.7rem; color:var(--blood); margin:0 0 .3rem; }
.lead__head{
  font-family:var(--serif); font-weight:700; color:var(--bone);
  font-size:clamp(3rem,11vw,7.2rem); line-height:.92; letter-spacing:-.02em; margin:.1rem 0;
  text-shadow:3px 4px 0 var(--ink);
}
.lead__again{ font-style:italic; font-weight:300; color:var(--flesh); font-size:.42em; vertical-align:.18em; margin-left:.2em; }
.lead__deck{ font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,2.4vw,1.45rem); color:var(--bone-2); max-width:46ch; margin:.7rem auto .6rem; line-height:1.4; }
.lead__byline{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim); margin:0; }

/* ============================================================
   BODY: ARTICLE + RAIL
   ============================================================ */
.cols{ display:grid; grid-template-columns:1.85fr 1fr; gap:clamp(1.3rem,3vw,2.6rem); align-items:start; }

.article{ column-count:2; column-gap:1.7rem; column-rule:1.5px solid rgba(239,227,214,.16); }
.article__p{ margin:0 0 .85rem; font-size:1.02rem; line-height:1.5; text-align:justify; hyphens:auto; }
.article__p--end{ font-family:var(--hand); font-weight:700; font-size:1.18rem; line-height:1.3; text-align:left; color:var(--bone); }
.contd{ display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); margin-top:.4rem; }
.dropcap{
  float:left; font-family:var(--hand); font-weight:800; color:var(--blood);
  font-size:4.2rem; line-height:.66; padding:.32rem .42rem 0 0; text-shadow:2px 3px 0 var(--ink);
}
/* front-page chart — Fig. 1, spans both columns above the fold */
.fold-chart{ column-span:all; position:relative; margin:.1rem 0 1.2rem; padding:.8rem 1rem 1rem; background:var(--void-2); border:var(--edge) solid var(--ink); }
.fold-chart::before{ content:""; position:absolute; inset:-1px; border:var(--edge) solid var(--ink); filter:url(#rough); pointer-events:none; }
.fold-chart__tag{ display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blood); margin-bottom:.5rem; }
.fold-chart__svg{ width:100%; height:auto; display:block; }
.fc-grid line{ stroke:rgba(239,227,214,.13); stroke-width:1.5; }
.fc-axis{ stroke:var(--bone-dim); stroke-width:2; }
.fc-lab{ fill:var(--bone-dim); font-family:var(--mono); font-size:13px; letter-spacing:.08em; }
.fc-line{ fill:none; stroke:var(--blood); stroke-width:5; stroke-linejoin:round; stroke-linecap:round; filter:url(#rough); }
.fc-arrow{ fill:none; stroke:var(--blood); stroke-width:5; stroke-linecap:round; }
.fc-here{ fill:var(--bone); stroke:var(--ink); stroke-width:2.5; }
.fc-here-lab{ fill:var(--flesh); font-family:var(--hand); font-weight:700; font-size:16px; }
.fold-chart figcaption{ font-family:var(--serif); font-style:italic; font-size:.86rem; line-height:1.4; color:var(--bone-2); margin-top:.6rem; }
.fold-chart figcaption b{ font-style:normal; font-weight:700; letter-spacing:.03em; color:var(--bone); }
/* pull quote spans both columns */
.pull{
  column-span:all; margin:.4rem 0 1rem; padding:.9rem 0;
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  font-family:var(--hand); font-weight:700; font-size:clamp(1.5rem,3.6vw,2.3rem);
  line-height:1.18; text-align:center; color:var(--bone);
}
.pull__hot{ color:var(--blood); }

/* ---- rail ---- */
.rail{ display:grid; gap:1.2rem; }
.box{ position:relative; background:var(--void-2); padding:1rem 1.1rem 1.1rem; border:var(--edge) solid var(--ink); }
.box::before{ /* roughen the frame */
  content:""; position:absolute; inset:-1px; border:var(--edge) solid var(--ink);
  filter:url(#rough); pointer-events:none;
}
.box:nth-child(odd){ transform:rotate(-.5deg); } .box:nth-child(even){ transform:rotate(.6deg); }
.box__title{
  font-family:var(--hand); font-weight:800; color:var(--flesh); font-size:1.45rem; line-height:1;
  margin:0 0 .55rem; padding-bottom:.4rem; border-bottom:2px solid var(--ink);
}
.box p{ margin:0 0 .4rem; font-size:.92rem; line-height:1.45; color:var(--bone-2); }
.box__sub{ font-family:var(--mono); font-size:.64rem!important; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:.5rem!important; }
.box__cap{ font-family:var(--serif); font-style:italic; font-size:.78rem!important; color:var(--bone-dim); text-align:center; margin:.4rem 0 0!important; }

.box--latest .eyes{ width:96px; height:48px; display:block; margin:.7rem auto .1rem; }

/* latest-news box (live) */
.latest__loading{ font-style:italic; color:var(--bone-dim); }
.latest .l-meta{ display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; color:var(--blood); margin-bottom:.25rem; }
.latest .l-title{ display:block; font-family:var(--serif); font-weight:700; font-size:1.06rem; line-height:1.25; color:var(--bone); text-decoration:none; }
a.latest .l-title, .latest a.l-title{ background-image:linear-gradient(var(--blood),var(--blood)); background-size:0 2px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .2s,color .15s; }
.latest a.l-title:hover{ color:var(--flesh); background-size:100% 2px; }
.latest .l-dek{ font-family:var(--serif); font-style:italic; font-size:.82rem; line-height:1.4; color:var(--bone-2); margin:.35rem 0 0; }

/* article crosshead */
.crosshead{ font-family:var(--hand); font-weight:800; font-size:1.18rem; line-height:1.15; color:var(--flesh); text-align:center; margin:.5rem 0 .55rem; break-after:avoid; }

.howto{ margin:.2rem 0 0; padding-left:1.1rem; }
.howto li{ font-size:.9rem; line-height:1.45; margin-bottom:.55rem; color:var(--bone-2); }
.howto li::marker{ font-family:var(--hand); font-weight:800; color:var(--blood); }
.howto b{ color:var(--bone); }

/* contract stamp */
.box--stamp{ text-align:center; }
.box--stamp .box__title{ border-bottom-color:var(--blood-d); }
.ca__value{
  display:block; font-family:var(--mono); font-size:.78rem; color:var(--flesh);
  border:2px dashed var(--blood-d); padding:.5rem .4rem; margin:.3rem 0 .7rem;
  word-break:break-all; line-height:1.4; background:rgba(224,0,0,.05);
}
.ca__copy{
  font-family:var(--hand); font-weight:800; font-size:1.05rem; cursor:pointer;
  background:var(--blood); color:var(--bone); border:var(--edge) solid var(--ink);
  padding:.35rem 1rem; transition:transform .12s; transform:rotate(-1.5deg);
}
.ca__copy:hover{ transform:rotate(2deg) scale(1.05); }
.ca__copy.is-done{ background:var(--flesh-d); }

.box--obit{ border-width:1px; box-shadow:0 0 0 4px var(--void-2), 0 0 0 6px var(--ink); }
.box--obit .box__title{ color:var(--bone); }

@media(max-width:820px){
  .cols{ grid-template-columns:1fr; }
  .article{ column-count:1; }
}

/* ============================================================
   FROM THE WIRES (live crypto headlines)
   ============================================================ */
.wire{ margin-top:1.8rem; padding-top:1.1rem; border-top:5px double var(--ink); }
.wire__head{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; }
.wire__title{ font-family:var(--hand); font-weight:800; font-size:clamp(1.9rem,5vw,3rem); margin:0; color:var(--bone); text-shadow:3px 4px 0 var(--ink); }
.wire__title::first-letter{ color:var(--blood); }
.wire__sub{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); border:2px solid var(--ink); padding:.18rem .6rem; transform:rotate(-1.2deg); }
.wire__feed{ column-count:3; column-gap:1.7rem; column-rule:1.5px solid rgba(239,227,214,.16); }
.wire__status{ font-family:var(--serif); font-style:italic; color:var(--bone-dim); margin:.2rem 0; }
.dispatch{ break-inside:avoid; margin:0 0 1rem; padding-bottom:.85rem; border-bottom:1.5px dashed rgba(239,227,214,.2); }
.dispatch:last-child{ border-bottom:0; }
.dispatch__meta{ display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--blood); margin-bottom:.3rem; }
.dispatch__title{ display:block; font-family:var(--serif); font-weight:700; font-size:1.04rem; line-height:1.25; color:var(--bone); text-decoration:none; }
a.dispatch__title{ background-image:linear-gradient(var(--blood),var(--blood)); background-size:0% 2px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .2s, color .15s; }
a.dispatch__title:hover{ color:var(--flesh); background-size:100% 2px; }
.dispatch__dek{ font-family:var(--serif); font-style:italic; font-size:.85rem; line-height:1.4; color:var(--bone-dim); margin:.35rem 0 0; }
.wire__credit{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim); text-align:right; margin:.9rem 0 0; }
@media(max-width:760px){ .wire__feed{ column-count:2; } }
@media(max-width:480px){ .wire__feed{ column-count:1; } }

/* ============================================================
   ART — market photo in rail + footer sign-off
   ============================================================ */
.box--photo .box__title{ border-bottom-color:var(--blood-d); }
.wirephoto{ margin:0; }
.wirephoto img{ width:100%; display:block; border:2px solid var(--ink); }
.wirephoto figcaption{ font-family:var(--serif); font-style:italic; font-size:.8rem; line-height:1.35; color:var(--bone-2); margin-top:.45rem; }

/* ============================================================
   THE PICTURE PAGE (photo essay)
   ============================================================ */
.picture{ margin-top:1.8rem; padding-top:1.1rem; border-top:5px double var(--ink); }
.picture__head{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.picture__title{ font-family:var(--hand); font-weight:800; font-size:clamp(1.9rem,5vw,3rem); margin:0; color:var(--bone); text-shadow:3px 4px 0 var(--ink); }
.picture__title::first-letter{ color:var(--blood); }
.picture__sub{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); border:2px solid var(--ink); padding:.15rem .6rem; transform:rotate(-1.5deg); }
.essay{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.6vw,1.9rem); }
.frame{ margin:0; background:var(--bone); padding:10px 10px 8px; border:var(--edge) solid var(--ink); box-shadow:6px 8px 0 rgba(0,0,0,.5); transition:transform .18s ease; }
.frame:nth-child(odd){ transform:rotate(-1.2deg); } .frame:nth-child(even){ transform:rotate(1deg); }
.frame:nth-child(3n+2){ transform:rotate(.5deg); }
.frame:hover{ transform:rotate(0) scale(1.03); z-index:5; }
.frame img{ width:100%; display:block; border:2px solid var(--ink); }
.frame figcaption{ font-family:var(--serif); font-style:italic; font-size:.85rem; line-height:1.38; color:var(--ink); padding:.55rem .15rem .1rem; }
.frame__no{ font-family:var(--hand); font-style:normal; font-weight:800; color:var(--blood); margin-right:.3rem; }
@media(max-width:760px){ .essay{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:430px){ .essay{ grid-template-columns:1fr; } }

/* watching eyes (shared) */
.eyes__white{ fill:var(--bone); stroke:var(--ink); stroke-width:3; }
.eyes__pupil{ fill:var(--ink); transition:transform .08s linear; }

/* ============================================================
   COLOPHON / FOOTER
   ============================================================ */
.colophon{ max-width:var(--maxw); margin:0 auto; padding:1.6rem clamp(1.1rem,3.5vw,2.6rem) 2.4rem; text-align:center; }
.rule-dec{ height:8px; background:repeating-linear-gradient(90deg,var(--ink) 0 14px, transparent 14px 20px); filter:url(#rough2); margin-bottom:1.3rem; }
.signoff{ max-width:280px; margin:0 auto 1.6rem; }
.signoff img{ width:100%; border:var(--edge) solid var(--ink); transform:rotate(-1.5deg); box-shadow:6px 8px 0 rgba(0,0,0,.5); }
.signoff figcaption{ font-family:var(--serif); font-style:italic; font-size:.84rem; color:var(--bone-dim); margin-top:.7rem; }
.colophon__cry{ font-family:var(--hand); font-weight:800; font-size:clamp(1.8rem,6vw,3rem); margin:0 0 1rem; color:var(--bone); text-shadow:3px 4px 0 var(--ink); }
.colophon__cry::first-letter{ color:var(--blood); }
.colophon__links{ display:flex; flex-wrap:wrap; gap:.4rem .7rem; justify-content:center; align-items:center; font-family:var(--hand); font-weight:700; font-size:1.25rem; margin-bottom:1.3rem; }
.colophon__links a{ color:var(--bone); text-decoration:none; padding:.1rem .25rem; transition:color .15s, transform .15s; display:inline-block; }
.colophon__links a:hover{ color:var(--blood); transform:rotate(-2deg) scale(1.06); }
.colophon__links .sep{ color:var(--bone-dim); }
.imprint{ font-family:var(--serif); font-size:.82rem; line-height:1.7; color:var(--bone-dim); max-width:66ch; margin:0 auto; }

/* ============================================================
   TOAST
   ============================================================ */
.copied-toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) rotate(-2deg); z-index:9500;
  font-family:var(--hand); font-weight:800; font-size:1.1rem;
  background:var(--blood); color:var(--bone); border:var(--edge) solid var(--ink);
  padding:.5rem 1.1rem; box-shadow:4px 5px 0 var(--ink); cursor:default;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.copied-toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px) rotate(-2deg); }

/* ============================================================
   MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *{ animation:none!important; }
  html{ scroll-behavior:auto; }
}