/* ============================================================
   JOEMSCA — Writing / Reading layer
   TEROS "Rustic Future" · shared by both site designs
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --void:#000000;
  --canvas:#0A0A0B;
  --surface:#161618;
  --raised:#1F1F22;
  --oscura:#2D2D2D;
  --paper:#E8E4DD;
  --paper-dim:#B7B2A8;
  --steel:#8B9299;
  --steel-line:#3a3d40;
  --teal:#00cbbb;
  --teal-deep:#005f63;
  --ember:#c33a2d;
  --copper:#b87333;
  --gold:#c9a24b;
  --measure:66ch;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--canvas);
  color:var(--paper);
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:19px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
  min-height:100vh;
}
/* paper-grain over the dark canvas */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
/* faint atmospheric wash */
body::after{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 80% at 50% -10%, rgba(0,203,187,.06), transparent 60%);
}

.wrap{position:relative;z-index:2;max-width:var(--measure);margin:0 auto;padding:0 28px}

/* ---- top bar — mirrors the homepage nav (refined/index.html) ---- */
header.nav{
  position:sticky;top:0;z-index:30;
  background:linear-gradient(to bottom,rgba(10,10,11,.92),rgba(10,10,11,.62));
  backdrop-filter:blur(12px);
  border-bottom:1px solid #26282b;
}
.nav .row{max-width:1180px;margin:0 auto;padding:22px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.stamp{width:32px;height:28px;background:var(--teal-deep);transition:background .3s ease,filter .3s ease;
  -webkit-mask:url(../assets/mark.svg) center/contain no-repeat;mask:url(../assets/mark.svg) center/contain no-repeat}
.brand:hover .stamp{background:var(--teal);filter:drop-shadow(0 0 7px rgba(0,203,187,.55))}
.brand .wm{font-family:'JetBrains Mono',monospace;font-weight:500;letter-spacing:.32em;font-size:13px;color:var(--paper-dim)}
.brand .wm b{color:var(--paper)}
nav.links{display:flex;align-items:center;gap:4px}
nav.links a{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);padding:10px 14px;position:relative;transition:color .25s;text-decoration:none}
nav.links a::after{content:"";position:absolute;left:14px;right:14px;bottom:7px;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .3s}
nav.links a:hover{color:var(--paper)}
nav.links a:hover::after{transform:scaleX(1)}
.navcta{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);
  border:1px solid #2f3236;padding:11px 18px;transition:.3s;text-decoration:none;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.navcta:hover{border-color:#128a86;color:var(--teal);background:rgba(0,203,187,.05)}
@media(max-width:900px){nav.links{display:none}.nav .row{padding:20px 26px}}
@media(max-width:560px){.navcta{display:none}}

/* ---- article header ---- */
article{padding:64px 0 40px}
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--teal);display:flex;align-items:center;gap:14px;margin-bottom:26px;
}
.eyebrow::after{content:"";height:1px;flex:1;background:linear-gradient(to right,var(--teal-deep),transparent)}
h1{
  font-size:clamp(34px,6vw,58px);line-height:1.06;font-weight:700;letter-spacing:-.02em;
  color:var(--paper);margin-bottom:22px;
}
.meta{
  font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.08em;
  color:var(--steel);display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;
  padding-bottom:30px;margin-bottom:44px;border-bottom:1px solid var(--steel-line);
}
.meta .dot{width:4px;height:4px;background:var(--copper);border-radius:0}
.meta time{color:var(--paper-dim)}

/* ---- hero image ---- */
/* Restrained editorial banner: uniform wide ratio + height cap regardless of the
   source dimensions (one original is square), so heroes never dominate the page. */
.hero{margin:0 0 46px}
.hero img{
  display:block;width:100%;height:auto;
  aspect-ratio:21/9;object-fit:cover;object-position:50% 38%;
  max-height:300px;
  border:1px solid var(--steel-line);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  filter:saturate(.94);
}

/* ---- body copy ---- */
.body p{margin:0 0 26px;color:#DAD5CB}
.body p:first-of-type{color:var(--paper)}
/* drop cap on the opening paragraph */
.body p.lead::first-letter{
  font-weight:700;font-size:3.6em;line-height:.82;float:left;margin:6px 14px 0 0;
  color:var(--teal);
}
.body em{font-style:italic;color:var(--paper)}
.body a{color:var(--teal);text-decoration:none;border-bottom:1px solid var(--teal-deep)}
.body a:hover{border-bottom-color:var(--teal)}

/* ---- end stamp ---- */
.endstamp{
  margin:56px 0 20px;display:flex;align-items:center;gap:16px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);
}
.endstamp .line{height:1px;flex:1;background:var(--steel-line)}
.endstamp .mark{
  width:26px;height:26px;border:1px solid var(--copper);color:var(--copper);
  display:grid;place-items:center;font-size:12px;letter-spacing:0;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}

/* ---- prev/next + footer ---- */
.postnav{display:flex;gap:16px;flex-wrap:wrap;padding:8px 0 72px}
.postnav a{
  flex:1;min-width:220px;text-decoration:none;color:var(--paper);
  border:1px solid var(--steel-line);padding:18px 20px;background:var(--surface);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  transition:border-color .25s ease,transform .25s ease,background .25s ease;
}
.postnav a:hover{border-color:var(--teal-deep);transform:translateY(-2px);background:var(--raised)}
.postnav .k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);display:block;margin-bottom:8px}
.postnav .t{font-weight:500;font-size:16px;line-height:1.3}
.postnav a.next{text-align:right}

footer.site{border-top:1px solid var(--steel-line);padding:26px 0 60px}
footer.site .row{max-width:var(--measure);margin:0 auto;padding:0 28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
footer.site a{color:var(--paper-dim);text-decoration:none}
footer.site a:hover{color:var(--teal)}

/* ---- writing index list ---- */
.idx-head{padding:80px 0 40px}
.idx-list{list-style:none;padding-bottom:80px}
.idx-list li{border-top:1px solid var(--steel-line)}
.idx-list li:last-child{border-bottom:1px solid var(--steel-line)}
.idx-list a{
  display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:baseline;
  padding:28px 6px;text-decoration:none;color:var(--paper);
  transition:padding .3s ease,background .3s ease;
}
.idx-list a:hover{padding-left:20px;background:linear-gradient(to right,rgba(0,203,187,.05),transparent)}
.idx-list .num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--teal);letter-spacing:.1em}
.idx-list .ttl{font-size:clamp(22px,3.4vw,30px);font-weight:500;line-height:1.15;letter-spacing:-.01em}
.idx-list .ttl small{display:block;font-family:'Space Grotesk';font-weight:300;font-size:15px;color:var(--paper-dim);margin-top:8px;letter-spacing:0}
.idx-list .dt{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--steel);white-space:nowrap}
.idx-list a:hover .ttl{color:var(--teal)}

.reading-progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(to right,var(--teal-deep),var(--teal));z-index:40;box-shadow:0 0 10px rgba(0,203,187,.6)}

@media(max-width:600px){
  body{font-size:17px}
  .idx-list a{grid-template-columns:auto 1fr;gap:14px}
  .idx-list .dt{grid-column:2;color:var(--steel)}
}