*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:         #0d1117;
    --surface:    #161b22;
    --border:     #21262d;
    --border-hi:  #30363d;
    --text:       #c9d1d9;
    --muted:      #8b949e;
    --heading:    #f0f6fc;
    --accent:     #58a6ff;
    --accent-dim: #1f3d5c;
    --tag-bg:     #1c2d3e;
    --radius:     6px;
    --font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

body {
    background:  var(--bg);
    color:       var(--text);
    font-family: var(--font);
    font-size:   15px;
    line-height: 1.6;
    min-height:  100vh;
    display:     flex;
    flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Masthead ── */
.masthead {
    border-bottom: 1px solid var(--border);
    padding:       1rem 1.5rem;
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           1rem;
}
.masthead-brand {
    font-size:    1.05rem;
    font-weight:  700;
    letter-spacing: -0.02em;
    color:        var(--heading);
    white-space:  nowrap;
}
.masthead-brand span { color: var(--accent); }
.masthead-sub {
    font-size:  0.75rem;
    color:      var(--muted);
    margin-top: 1px;
}

/* ── Hero ── */
.hero {
    padding:    3.5rem 1.5rem 2.5rem;
    max-width:  720px;
    margin:     0 auto;
    text-align: center;
}
.hero-eyebrow {
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--accent);
    margin-bottom:  0.75rem;
}
.hero h1 {
    font-size:      clamp(1.8rem, 4vw, 2.6rem);
    font-weight:    800;
    color:          var(--heading);
    letter-spacing: -0.03em;
    line-height:    1.15;
    margin-bottom:  0.9rem;
}
.hero p {
    font-size:  1rem;
    color:      var(--muted);
    max-width:  500px;
    margin:     0 auto;
}

/* ── Industry filter tabs ── */
.filter-wrap {
    border-top:    1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background:    var(--surface);
    padding:       0 1.5rem;
    overflow-x:    auto;
    white-space:   nowrap;
}
.filter-tabs {
    display: inline-flex;
    gap:     0;
    list-style: none;
}
.filter-tabs li a {
    display:        inline-block;
    padding:        0.7rem 1.1rem;
    font-size:      0.82rem;
    font-weight:    500;
    color:          var(--muted);
    border-bottom:  2px solid transparent;
    transition:     color .15s, border-color .15s;
}
.filter-tabs li a:hover {
    color:           var(--heading);
    text-decoration: none;
}
.filter-tabs li a.active {
    color:        var(--accent);
    border-bottom-color: var(--accent);
}
.filter-count {
    display:       inline-block;
    background:    var(--border-hi);
    color:         var(--muted);
    font-size:     0.68rem;
    font-weight:   600;
    border-radius: 10px;
    padding:       1px 6px;
    margin-left:   5px;
    vertical-align: middle;
}

/* ── Main layout ── */
.main {
    flex:       1;
    max-width:  1100px;
    margin:     0 auto;
    padding:    2rem 1.5rem 3rem;
    width:      100%;
}
.section-label {
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--muted);
    margin-bottom:  1.25rem;
}

/* ── Edition grid ── */
.editions-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   1rem;
}

/* ── Edition card ── */
.card {
    background:     var(--surface);
    border:         1px solid var(--border);
    border-radius:  var(--radius);
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    transition:     border-color .18s, box-shadow .18s;
}
.card:hover {
    border-color: var(--border-hi);
    box-shadow:   0 4px 24px rgba(0,0,0,.4);
}
.card-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    padding:         1rem 1.1rem 0.6rem;
    gap:             0.5rem;
}
.card-tag {
    font-size:      0.67rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--accent);
    background:     var(--tag-bg);
    border:         1px solid var(--accent-dim);
    border-radius:  3px;
    padding:        2px 7px;
    white-space:    nowrap;
}
.card-date {
    font-size:   0.72rem;
    color:       var(--muted);
    white-space: nowrap;
}
.card-body {
    padding: 0 1.1rem 0.8rem;
    flex:    1;
}
.card-items {
    list-style:     none;
    display:        flex;
    flex-direction: column;
    gap:            0.55rem;
}
.card-items li {
    display:     flex;
    align-items: baseline;
    gap:         0.5rem;
    font-size:   0.83rem;
    color:       var(--text);
    line-height: 1.4;
}
.card-items li::before {
    content:    "→";
    color:      var(--accent);
    flex-shrink: 0;
    font-size:  0.75rem;
}
.card-items li span {
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}
.card-more {
    font-size:   0.72rem;
    color:       var(--muted);
    margin-top:  0.55rem;
    padding-left: 1.2rem;
}
.card-footer {
    padding:         0.65rem 1.1rem;
    border-top:      1px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.5rem;
}
.card-reads {
    font-size: 0.72rem;
    color:     var(--muted);
}
.card-cta {
    font-size:   0.78rem;
    font-weight: 600;
    color:       var(--accent);
}
.card-cta:hover { text-decoration: underline; }

/* ── Empty state ── */
.empty {
    text-align:    center;
    padding:       4rem 1.5rem;
    color:         var(--muted);
    border:        1px dashed var(--border-hi);
    border-radius: var(--radius);
}
.empty strong {
    display:       block;
    color:         var(--heading);
    font-size:     1.05rem;
    margin-bottom: 0.4rem;
}

/* ── Edition page ── */
.back-link {
    display:     inline-flex;
    align-items: center;
    gap:         0.35rem;
    font-size:   0.8rem;
    color:       var(--muted);
    margin-bottom: 1.75rem;
    transition:  color .15s;
}
.back-link:hover { color: var(--accent); text-decoration: none; }

.edition-header {
    border-bottom:  1px solid var(--border);
    padding-bottom: 1.5rem;
    margin-bottom:  2rem;
}
.edition-header .card-tag { display: inline-block; margin-bottom: 0.75rem; }
.edition-title {
    font-size:      clamp(1.4rem, 3vw, 2rem);
    font-weight:    800;
    color:          var(--heading);
    letter-spacing: -0.02em;
    line-height:    1.2;
    margin-bottom:  0.5rem;
}
.edition-meta {
    font-size: 0.8rem;
    color:     var(--muted);
    display:   flex;
    gap:       1.25rem;
    flex-wrap: wrap;
}

.story-list {
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
}
.story {
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       1.4rem 1.5rem;
    transition:    border-color .18s;
}
.story:hover { border-color: var(--border-hi); }
.story-number {
    font-size:      0.68rem;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--accent);
    margin-bottom:  0.4rem;
}
.story-title {
    font-size:     1.05rem;
    font-weight:   700;
    color:         var(--heading);
    line-height:   1.3;
    margin-bottom: 0.65rem;
}
.story-summary {
    font-size:   0.88rem;
    color:       var(--text);
    line-height: 1.65;
    white-space: pre-line;
}

/* ── Footer ── */
footer {
    border-top: 1px solid var(--border);
    padding:    1.5rem;
    text-align: center;
    font-size:  0.78rem;
    color:      var(--muted);
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .editions-grid { grid-template-columns: 1fr; }
    .hero          { padding: 2.5rem 1rem 1.5rem; }
    .filter-wrap   { padding: 0 1rem; }
    .main          { padding: 1.5rem 1rem 2.5rem; }
}