/* DIStopia.ie shared styles */
:root{--cloth:#131416;--cloth-raised:#242528;--rule:#3a3b3f;--butter:#EEDDB6;--bee:#FFC03B;--muted:#B3A07A;--glitch:#29D6E8;--island:#3DAA6E;
--f-display:"Barlow Condensed","Arial Narrow","Helvetica Neue",sans-serif;--f-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;--f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-padding-top:1rem}
body{margin:0;background-color:var(--cloth);background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);color:var(--butter);font-family:var(--f-body);font-size:1.0625rem;line-height:1.65}
a{color:var(--glitch)}a:hover{color:var(--bee)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--glitch);outline-offset:2px}
.site-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:20px max(16px,5vw);border-bottom:1px solid rgba(238,221,182,.18);font-family:var(--f-display);font-weight:800}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:40px;line-height:1;color:var(--butter);text-decoration:none}
.brand:hover{color:var(--butter)}
.palm{width:34px;height:40px;flex:none}
.dis{color:var(--bee);text-shadow:.04em .02em 0 #131416,.12em .04em 0 var(--glitch)}
.brand small{font-size:20px;color:var(--glitch)}
.site-nav{display:flex;gap:28px;font-size:24px;letter-spacing:2px;text-transform:uppercase}
.site-nav a{color:var(--muted);text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--bee)}
.site-footer{margin-top:3rem;padding:1.5rem max(16px,5vw) 3rem;border-top:1px solid var(--rule);font-family:var(--f-mono);font-size:.78rem;color:var(--muted);letter-spacing:.06em}
/* home grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(270px,auto);gap:16px;padding:32px max(16px,5vw) 0;font-family:var(--f-display);font-weight:800}
.tile{position:relative;display:flex;align-items:flex-end;overflow:hidden;min-height:270px;background:#1b1d1f;border:1px solid rgba(238,221,182,.18);text-decoration:none;color:var(--bee)}
.tile:hover{border-color:var(--bee);color:var(--bee)}
.tile.big{grid-column:span 2;grid-row:span 2;min-height:420px}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .txt{position:relative;width:100%;padding:56px 22px 20px;background:linear-gradient(to top,rgba(19,20,22,.96) 20%,rgba(19,20,22,0))}
.kick{font-size:20px;font-weight:700;letter-spacing:3px;color:var(--glitch)}
.head{margin-top:8px;line-height:.98;text-transform:uppercase;font-size:30px;text-shadow:.02em .01em 0 #131416,.055em .02em 0 #178593}
.tile.big .head{font-size:56px;max-width:80%}
.badge{margin-top:12px;display:inline-block;padding:2px 10px;border:2px solid var(--glitch);font-size:18px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--glitch);transition:opacity .2s,transform .2s}
@media (hover:hover){.badge{opacity:0;transform:translateY(6px)}.tile:hover .badge,.tile:focus-visible .badge{opacity:1;transform:none}}
@media (max-width:720px){.grid{grid-template-columns:1fr}.tile.big{grid-column:auto;grid-row:auto}.tile.big .head{font-size:44px;max-width:100%}.site-nav{gap:18px;font-size:20px}}
/* plain pages */
.page{max-width:44rem;margin:0 auto;padding:3rem max(16px,5vw) 2rem}
.page h1{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(3rem,10vw,6rem);line-height:.95;color:var(--bee);margin:0 0 1.5rem;text-shadow:.02em .01em 0 #131416,.055em .02em 0 #178593}
.contact{margin-top:3.5rem;padding:2rem;border:2px solid rgba(41,214,232,.7);background:rgba(0,0,0,.25)}
.contact h2{margin:0;font-family:var(--f-display);font-size:2.5rem;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--glitch)}
.contact .sub{margin:.5rem 0 1.5rem;color:var(--muted)}
.contact label{display:block;margin:0 0 6px;font-family:var(--f-display);font-size:1.4rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--bee)}
.contact input,.contact textarea{width:100%;padding:12px 14px;margin-bottom:1.25rem;font:inherit;color:var(--butter);background:#1b1d1f;border:2px solid rgba(238,221,182,.35)}
.contact button{padding:12px 28px;font-family:var(--f-display);font-size:1.5rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#131416;background:var(--bee);border:0;cursor:pointer}
.contact button:hover{background:var(--butter)}
/* articles */
.wrap{max-width:44rem;margin:0 auto;padding:1rem max(16px,5vw) 2rem}
figure.hero{margin:0 0 2rem}
figure.hero img{display:block;width:100%;height:auto;border:1px solid rgba(238,221,182,.18)}
figure.hero figcaption{margin-top:8px;font-size:.95rem;color:var(--muted)}
article blockquote{margin:2em 0;padding:4px 0 4px 28px;border-left:6px solid var(--glitch);font-family:var(--f-display);font-size:clamp(1.8rem,6vw,2.75rem);font-weight:700;line-height:1.1;text-transform:uppercase;color:var(--bee)}
article h2.dis-h{margin:1.6em 0 .6em;font-family:var(--f-display);font-size:2.25rem;font-weight:800;text-transform:uppercase;color:var(--bee)}
sup.ref a,a.ref{font-weight:700;font-size:.75em;vertical-align:super;text-decoration:none}
.src-badge{display:inline-block;padding:4px 14px;border:2px solid var(--glitch);text-decoration:none}
.share{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.share a,.share button{padding:6px 14px;font:inherit;color:var(--glitch);background:none;border:2px solid var(--glitch);text-decoration:none;cursor:pointer}
.share a:hover,.share button:hover{color:var(--bee);border-color:var(--bee)}

/* Layout: single reading column on charcoal cloth; glitch headline, five numbered threats, sources ledger at the foot */

header.article { padding-block: 2.6rem 1.6rem; display: grid; gap: 1rem; }
.kicker { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--glitch); }
h1 {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: 0.95; letter-spacing: 0.005em;
  color: var(--bee); margin: 0; text-wrap: balance;
  text-shadow: -2px 0 0 rgba(63, 224, 232, 0.55), 2px 0 0 rgba(255, 70, 110, 0.18);
}
.dek { font-size: 1.2rem; line-height: 1.5; margin: 0; color: var(--butter); max-width: 36rem; }
.byline { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--muted); display: flex; gap: 0.4rem 1rem; flex-wrap: wrap; }
.byline strong { color: var(--butter); font-weight: 500; }

article p { margin: 0 0 1.1rem; max-width: 65ch; }
article a { color: var(--glitch); text-underline-offset: 3px; text-decoration-thickness: 1px; }
article a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--glitch); outline-offset: 2px; }

.lede p:first-child::first-letter {
  font-family: var(--f-display); font-weight: 800; color: var(--bee);
  float: left; font-size: 3.6rem; line-height: 0.85; padding: 0.3rem 0.5rem 0 0;
}
.sources-line { font-family: var(--f-mono); font-size: 0.85rem; color: var(--glitch); letter-spacing: 0.04em; }

section.threat { padding-top: 2.4rem; margin-top: 2.2rem; border-top: 1px solid var(--rule); }
.threat-head { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; align-items: baseline; margin-bottom: 1.1rem; }
.num { font-family: var(--f-display); font-weight: 800; font-size: 3.2rem; line-height: 0.8; color: var(--glitch); grid-row: span 2; }
h2 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.7rem, 5vw, 2.2rem); line-height: 1; color: var(--bee); margin: 0; text-wrap: balance; min-width: 0; }
.picture { font-style: italic; color: var(--muted); margin: 0; min-width: 0; font-size: 0.98rem; }
h3 { font-family: var(--f-mono); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--island); margin: 1.6rem 0 0.5rem; }

.point {
  background: var(--cloth-raised); border-left: 3px solid var(--bee);
  padding: 1rem 1.2rem; margin: 1.4rem 0 0; font-size: 1rem;
}
.point p { margin: 0; }
.point b { color: var(--bee); font-family: var(--f-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 0.3rem; }

.closer { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.closer p:last-child { font-family: var(--f-display); font-weight: 600; font-size: 1.6rem; line-height: 1.15; color: var(--bee); text-transform: uppercase; }

.ledger { margin-top: 3rem; padding-top: 1.5rem; border-top: 2px solid var(--glitch); }
.ledger h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.ledger ol { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.45rem; font-size: 0.92rem; }
.ledger li { min-width: 0; overflow-wrap: anywhere; }
.ledger li::marker { font-family: var(--f-mono); color: var(--muted); }
.ledger a { color: var(--glitch); }
.ledger .src { color: var(--muted); font-family: var(--f-mono); font-size: 0.78rem; }

footer { margin-top: 3rem; font-family: var(--f-mono); font-size: 0.75rem; color: var(--muted); letter-spacing: 0.06em; }

@media (max-width: 480px) {
  .num { font-size: 2.4rem; }
  .lede p:first-child::first-letter { font-size: 3rem; }
}
@media (prefers-reduced-motion: no-preference) {
  h1 { animation: jitter 6s steps(1) infinite; }
  @keyframes jitter {
    0%, 96%, 100% { text-shadow: -2px 0 0 rgba(63,224,232,.55), 2px 0 0 rgba(255,70,110,.18); }
    97% { text-shadow: -5px 0 0 rgba(63,224,232,.8), 4px 0 0 rgba(255,70,110,.35); }
    98% { text-shadow: 3px 0 0 rgba(63,224,232,.7), -3px 0 0 rgba(255,70,110,.3); }
  }
}