/*
Theme Name: Obsidian Edge
Theme URI: https://example.com/obsidian-edge
Author: Edge Press
Description: A monochrome editorial WordPress theme. Razor-thin rules, oversized index numerals, knife-edge clip paths, asymmetric grids. Pairs Bebas Neue with Inter for a sharp, magazine-grade voice.
Version: 1.0.0
License: GPLv2 or later
Text Domain: obsidian-edge
*/

:root{
  --oe-ink:#09090b;
  --oe-zinc:#3f3f46;
  --oe-mid:#a1a1aa;
  --oe-paper:#f4f4f5;
  --oe-line:rgba(9,9,11,.12);
  --oe-display:"Bebas Neue", "Oswald", sans-serif;
  --oe-body:"Inter", system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--oe-body);font-size:16px;line-height:1.65;color:var(--oe-ink);background:var(--oe-paper);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--oe-ink);text-decoration:none}
a:hover{color:var(--oe-zinc)}

/* Header */
.oe-bar{position:sticky;top:0;z-index:50;background:var(--oe-paper);border-bottom:1px solid var(--oe-ink)}
.oe-bar-inner{max-width:1320px;margin:0 auto;padding:18px 28px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
.oe-logo{font-family:var(--oe-display);font-size:34px;letter-spacing:.04em;color:var(--oe-ink);line-height:1}
.oe-logo .dot{display:inline-block;width:10px;height:10px;background:var(--oe-ink);transform:rotate(45deg);margin-right:6px;vertical-align:2px}
.oe-nav{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap}
.oe-nav a{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--oe-ink);
  position:relative;padding:6px 0;
}
.oe-nav a:not(.login)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--oe-ink);transform:scaleX(0);transform-origin:right;transition:transform .25s}
.oe-nav a:not(.login):hover::after{transform:scaleX(1);transform-origin:left}
.oe-nav .login{
  background:var(--oe-ink);color:var(--oe-paper);padding:12px 22px;letter-spacing:.18em;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%, 0% 100%);
}
.oe-nav .login:hover{background:var(--oe-zinc);color:var(--oe-paper)}

/* Hero - editorial */
.oe-hero{max-width:1320px;margin:0 auto;padding:80px 28px 60px;display:grid;grid-template-columns:140px 1fr 200px;gap:32px;align-items:end;position:relative}
@media (max-width:920px){.oe-hero{grid-template-columns:1fr}}
.oe-index{font-family:var(--oe-display);font-size:160px;line-height:.85;letter-spacing:-.02em;color:var(--oe-ink)}
.oe-index small{display:block;font-family:var(--oe-body);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--oe-zinc);font-weight:500;margin-bottom:6px}
.oe-hero h1{
  font-family:var(--oe-display);font-size:clamp(60px,11vw,180px);line-height:.86;
  letter-spacing:-.01em;color:var(--oe-ink);margin:0 0 8px;
}
.oe-hero h1 em{font-style:normal;color:var(--oe-mid)}
.oe-hero .lede{font-size:17px;line-height:1.55;color:var(--oe-zinc);max-width:340px;border-left:1px solid var(--oe-ink);padding-left:16px}
.oe-hero-meta{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--oe-zinc);max-width:1320px;margin:0 auto;padding:0 28px 24px;border-bottom:1px solid var(--oe-ink)}

.oe-cta{
  display:inline-flex;align-items:center;gap:14px;background:var(--oe-ink);color:var(--oe-paper);
  padding:18px 26px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  margin-top:24px;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%, 0% 100%);
}
.oe-cta:hover{background:var(--oe-zinc);color:var(--oe-paper)}

/* Crumbs */
.oe-crumbs{max-width:1320px;margin:0 auto;padding:18px 28px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--oe-zinc);border-bottom:1px solid var(--oe-line)}
.oe-crumbs a{color:var(--oe-ink)}
.oe-crumbs span{margin:0 12px;color:var(--oe-mid)}

/* Layout */
.oe-shell{max-width:1320px;margin:0 auto;padding:48px 28px 80px;display:grid;grid-template-columns:1fr 300px;gap:60px}
@media (max-width:980px){.oe-shell{grid-template-columns:1fr}}
.oe-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--oe-ink);border-left:1px solid var(--oe-ink)}
@media (max-width:720px){.oe-grid{grid-template-columns:1fr}}

/* Editorial cards (no rounding, hairline rules) */
.oe-card{
  border-right:1px solid var(--oe-ink);border-bottom:1px solid var(--oe-ink);
  padding:28px;background:var(--oe-paper);position:relative;display:flex;flex-direction:column;gap:14px;
  transition:background .25s, color .25s;
}
.oe-card:hover{background:var(--oe-ink);color:var(--oe-paper)}
.oe-card:hover .oe-cat,.oe-card:hover .oe-meta-line{color:var(--oe-mid)}
.oe-thumb{aspect-ratio:5/3;overflow:hidden;background:var(--oe-zinc);display:block}
.oe-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .35s, transform .8s}
.oe-card:hover .oe-thumb img{filter:grayscale(1) contrast(1.2) brightness(1.05);transform:scale(1.04)}
.oe-cat{font-family:var(--oe-body);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--oe-zinc);font-weight:600;display:flex;justify-content:space-between}
.oe-card h2{font-family:var(--oe-display);font-size:36px;line-height:1;letter-spacing:-.005em;margin:0;color:inherit}
.oe-card h2 a{color:inherit}
.oe-card p{margin:0;font-size:14px;line-height:1.55;color:inherit;opacity:.85}
.oe-meta-line{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--oe-zinc);margin-top:auto;padding-top:10px;border-top:1px solid currentColor}

/* Sidebar */
.oe-side .widget{padding:0 0 28px;margin-bottom:28px;border-bottom:1px solid var(--oe-ink)}
.oe-side h3{font-family:var(--oe-display);font-size:32px;letter-spacing:.02em;color:var(--oe-ink);margin:0 0 14px;line-height:1}
.oe-side ul{list-style:none;padding:0;margin:0}
.oe-side li{padding:10px 0;font-size:14px;border-bottom:1px solid var(--oe-line);display:flex;justify-content:space-between;align-items:center}
.oe-side li:last-child{border-bottom:0}
.oe-side li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-size:11px;letter-spacing:.18em;color:var(--oe-mid);font-weight:500}
.oe-side ul{counter-reset:s}
.oe-side a{color:var(--oe-ink);flex:1;margin-left:14px}
.oe-side a:hover{color:var(--oe-zinc)}

/* Article */
.oe-article{max-width:760px;margin:0 auto;padding:60px 28px}
.oe-article header{border-bottom:1px solid var(--oe-ink);padding-bottom:28px;margin-bottom:32px}
.oe-article .stamp{display:inline-block;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--oe-zinc);margin-bottom:18px;border-top:1px solid var(--oe-ink);padding-top:14px}
.oe-article h1{font-family:var(--oe-display);font-size:clamp(48px,7vw,96px);line-height:.92;letter-spacing:-.01em;color:var(--oe-ink);margin:0 0 16px}
.oe-article .meta{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--oe-zinc)}
.oe-article .feat{margin:30px 0;border:1px solid var(--oe-ink)}
.oe-article .feat img{filter:grayscale(1) contrast(1.05)}
.oe-article .body{font-size:18px;line-height:1.78;color:var(--oe-ink)}
.oe-article .body > p:first-of-type::first-letter{font-family:var(--oe-display);float:left;font-size:88px;line-height:.85;padding:6px 12px 0 0;color:var(--oe-ink)}
.oe-article .body h2{font-family:var(--oe-display);font-size:48px;letter-spacing:-.005em;color:var(--oe-ink)}
.oe-article .body blockquote{border-left:2px solid var(--oe-ink);padding:12px 22px;margin:30px 0;font-family:var(--oe-display);font-size:36px;line-height:1.05;letter-spacing:.005em;color:var(--oe-ink)}

/* Related */
.oe-related{max-width:1320px;margin:0 auto;padding:30px 28px 80px}
.oe-related h3{font-family:var(--oe-display);font-size:48px;letter-spacing:.005em;color:var(--oe-ink);margin:0 0 24px;border-bottom:1px solid var(--oe-ink);padding-bottom:14px}

/* Pager */
.oe-pager{display:flex;justify-content:center;gap:0;margin:30px 0;border:1px solid var(--oe-ink)}
.oe-pager a, .oe-pager span{padding:14px 22px;font-family:var(--oe-display);font-size:18px;letter-spacing:.04em;color:var(--oe-ink);border-right:1px solid var(--oe-ink)}
.oe-pager a:last-child, .oe-pager span:last-child{border-right:0}
.oe-pager .current{background:var(--oe-ink);color:var(--oe-paper)}

/* 404 */
.oe-404{max-width:1100px;margin:0 auto;padding:120px 28px;text-align:center}
.oe-404 .big{font-family:var(--oe-display);font-size:clamp(140px,28vw,320px);line-height:.86;letter-spacing:-.04em;color:var(--oe-ink)}

/* Comments */
.oe-comments{max-width:760px;margin:0 auto;padding:0 28px 80px}
.oe-comments h3{font-family:var(--oe-display);font-size:42px;letter-spacing:.005em;color:var(--oe-ink)}
.oe-comments ol{list-style:none;padding:0}
.oe-comments li{border-top:1px solid var(--oe-ink);padding:18px 0}
.oe-comments textarea, .oe-comments input[type="text"], .oe-comments input[type="email"], .oe-comments input[type="url"]{width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--oe-ink);background:transparent;font-family:var(--oe-body);outline:none}
.oe-comments .submit input{background:var(--oe-ink);color:var(--oe-paper);border:0;padding:14px 28px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;font-weight:600;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%, 0% 100%)}

/* Footer */
.oe-foot{background:var(--oe-ink);color:var(--oe-paper);margin-top:60px}
.oe-foot-inner{max-width:1320px;margin:0 auto;padding:80px 28px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;border-bottom:1px solid rgba(244,244,245,.18)}
@media (max-width:880px){.oe-foot-inner{grid-template-columns:repeat(2,1fr)}}
.oe-foot h4{font-family:var(--oe-display);font-size:28px;letter-spacing:.02em;color:var(--oe-paper);margin:0 0 16px}
.oe-foot ul{list-style:none;padding:0;margin:0}
.oe-foot li{padding:6px 0;font-size:14px;border-bottom:1px solid rgba(244,244,245,.1)}
.oe-foot a{color:var(--oe-mid)}
.oe-foot a:hover{color:var(--oe-paper)}
.oe-foot-bottom{max-width:1320px;margin:0 auto;padding:22px 28px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--oe-mid)}
@media (max-width:600px){.oe-foot-bottom{flex-direction:column;gap:8px}}