/* ==========================================================================
   THE MEN'S SPACE — Template 1: Timeline / Story
   ========================================================================== */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

/* ---- Tokens ---- */
:root{
    /* color */
    --c-bg:        #0a0a0b;
    --c-bg-raised: #131315;
    --c-bg-card:   #17171a;
    --c-ink:       #f4efe4;
    --c-ink-dim:   #a7a196;
    --c-ink-faint: #6f6a60;
    --c-gold:      #c8a15a;
    --c-gold-soft: #dcc084;
    --c-gold-dim:  #6d5a35;
    --c-line:      rgba(244,239,228,0.10);
    --c-line-strong: rgba(244,239,228,0.18);

    /* type */
    --f-display: 'Fraunces', serif;
    --f-body:    'Inter', sans-serif;

    /* scale */
    --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.05rem);
    --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
    --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
    --step-3: clamp(2.2rem, 1.8rem + 1.8vw, 3.2rem);
    --step-4: clamp(3rem, 2.2rem + 3.5vw, 5.2rem);

    /* layout */
    --content-max: 1180px;
    --radius: 2px;
    --transition: 420ms cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset ---- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
    margin:0;
    background:var(--c-bg);
    color:var(--c-ink);
    font-family:var(--f-body);
    font-size:var(--step-0);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4,p,figure{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--c-gold-dim); color:var(--c-ink); }

:focus-visible{
    outline:2px solid var(--c-gold);
    outline-offset:3px;
}

.u-container{
    width:100%;
    max-width:var(--content-max);
    margin-inline:auto;
    padding-inline:clamp(1.25rem, 3vw, 2.5rem);
}

.u-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.6em;
    font-family:var(--f-body);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--c-gold);
}
.u-eyebrow::before{
    content:"";
    width:22px; height:1px;
    background:var(--c-gold-dim);
}

.u-reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity 900ms ease, transform 900ms ease;
}
.u-reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   HEADER / FOOTER
   ========================================================================== */
#main-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 80px;
    background: rgba(10,10,11,0.92);
    border-bottom: 1px solid var(--c-line);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav-logo img { height: 44px; width: auto; display: block; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 40px;
}
.nav-links a {
    font-family: var(--f-body);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-ink-dim);
    text-decoration: none;
    transition: color 0.2s;
}
.nav-links a:hover  { color: var(--c-ink); }
.nav-links a.active { color: var(--c-gold); }

.nav-cta {
    color: #000 !important;
    background: #ffd633;
    padding: 10px 26px;
    letter-spacing: 0.14em;
    transition: background 0.2s !important;
}
.nav-cta:hover { background: #ffe566 !important; color: #000 !important; }

.nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
}
.nav-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--c-ink);
    transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
    #main-nav { padding: 20px 32px; }
    .nav-hamburger { display: flex; }
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        z-index: 100;
        background: rgba(10,10,11,0.97);
        flex-direction: column;
        padding: 24px 32px;
        gap: 0;
        border-bottom: 1px solid var(--c-line);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
    .nav-links.open { display: flex; }
    .nav-links a:not(.nav-cta) {
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        color: var(--c-ink);
        font-size: 12px;
    }
    .nav-links a:not(.nav-cta):last-of-type { border-bottom: none; }
    .nav-cta { display: inline-flex; margin-top: 16px; justify-content: center; }
}

/* Nav offset for fixed header */
main { padding-top: 85px; }

footer {
    background: var(--c-bg);
    border-top: 1px solid var(--c-line);
    padding: 64px 80px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
    margin-top: 6rem;
}

.footer-wordmark {
    font-family: var(--f-display);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.5em;
    color: var(--c-ink);
    text-transform: uppercase;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 40px;
}
.footer-nav a {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-ink-faint);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-nav a:hover { color: var(--c-gold); text-decoration: underline; text-underline-offset: 4px; }

.footer-copy {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-ink-faint);
}

/* ==========================================================================
   CTA / MEMBERSHIP BLOCK
   ========================================================================== */
.c-cta{
    margin-block:5rem;
    padding:clamp(2.4rem,5vw,4rem);
    background:var(--c-bg-raised);
    border:1px solid var(--c-line);
    text-align:center;
}
.c-cta__title{
    font-family:var(--f-display);
    font-size:var(--step-2);
    font-weight:500;
    margin-bottom:.8rem;
}
.c-cta__body{
    color:var(--c-ink-dim);
    max-width:38ch; margin-inline:auto; margin-bottom:1.8rem;
}
.c-cta__button{
    display:inline-block;
    background:var(--c-gold);
    color:var(--c-bg);
    padding:.9em 2em;
    font-weight:600; font-size:.85rem; letter-spacing:.03em;
    transition:background var(--transition), transform var(--transition);
}
.c-cta__button:hover{ background:var(--c-gold-soft); transform:translateY(-2px); }

.c-cta--inline{
    margin-block:3rem;
    padding:1.4rem 1.8rem;
    display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
    text-align:left; flex-wrap:wrap;
}
.c-cta--inline .c-cta__title{ font-size:1.15rem; margin:0; }
.c-cta--inline .c-cta__button{ padding:.7em 1.5em; font-size:.78rem; white-space:nowrap; }

/* ==========================================================================
   HERO VARIANTS
   ========================================================================== */
.c-hero{ position:relative; }

/* Hero — Full (image-forward, centered text) */
.c-hero--full{
    min-height:78vh;
    display:flex; align-items:flex-end;
    padding-bottom:clamp(2.5rem,6vw,5rem);
}
.c-hero--full__img{
    position:absolute; inset:0;
    z-index:0;
    overflow:hidden;
}
.c-hero--full__img img{
    width:100%; height:100%; object-fit:cover; object-position:center;
    filter:grayscale(0.65) brightness(0.7);
}
.c-hero--full::before{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(0deg, rgba(10,10,11,.96) 0%, rgba(10,10,11,.55) 55%, rgba(10,10,11,.2) 100%);
}
.c-hero--full .u-container{ position:relative; z-index:2; }
.c-hero--full .u-container{ position:relative; }
.c-hero--full .c-hero__title{
    font-family:var(--f-display);
    font-size:var(--step-4);
    font-weight:500;
    line-height:1.02;
    max-width:16ch;
    margin-block:.6rem 1rem;
}
.c-hero--full .c-hero__dek{ color:var(--c-ink-dim); max-width:52ch; font-size:var(--step-1); }

/* Hero — Split (image right / text left) */
.c-hero--split{ padding-block:clamp(3rem,8vh,6rem) 0; }
.c-hero--split .u-container{
    display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
.c-hero--split .c-hero__title{
    font-family:var(--f-display); font-weight:500;
    font-size:var(--step-4); line-height:1.04; margin-block:.6rem 1.1rem;
}
.c-hero--split .c-hero__dek{ color:var(--c-ink-dim); font-size:var(--step-1); max-width:42ch; }
.c-hero--split .c-hero__figure{ aspect-ratio:4/5; overflow:hidden; }
.c-hero--split .c-hero__figure img{ width:100%; height:105%; object-fit:cover; filter:grayscale(0.15) brightness(0.75); transition:filter 0.6s; }
.c-hero--split .c-hero__figure:hover img{ filter:grayscale(0) brightness(1); }
@media (max-width:860px){
    .c-hero--split .u-container{ grid-template-columns:1fr; }
    .c-hero--split .c-hero__figure{ order:-1; aspect-ratio:16/10; }
}

/* Hero — Minimal (typography only, editorial) */
.c-hero--minimal{
    padding-block:clamp(4rem,12vh,7.5rem) clamp(3rem,8vh,5rem);
    border-bottom:1px solid var(--c-line);
    position:relative; overflow:hidden;
}
.c-hero--minimal .c-hero__issue{
    display:flex; justify-content:space-between; align-items:center;
    font-size:.78rem; letter-spacing:.08em; color:var(--c-ink-faint);
    margin-bottom:clamp(2rem,6vh,4rem);
    padding-bottom:1.2rem; border-bottom:1px solid var(--c-line);
}
.c-hero--minimal .c-hero__issue b{ color:var(--c-gold); font-weight:600; }
.c-hero--minimal .c-hero__title{
    font-family:var(--f-display);
    font-style:italic;
    font-weight:400;
    font-size:clamp(2.6rem, 2rem + 5vw, 6.4rem);
    line-height:.98;
    max-width:20ch;
}
.c-hero--minimal .c-hero__dek{
    margin-top:1.6rem; color:var(--c-ink-dim); font-size:var(--step-1); max-width:46ch;
}

/* ==========================================================================
   STAT STRIP
   ========================================================================== */
.c-stats{
    display:flex; flex-wrap:wrap;
    border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line);
    margin-block:0;
}
.c-stats__item{
    flex:1 1 0; min-width:140px;
    padding:1.6rem clamp(1rem,3vw,2rem);
    border-right:1px solid var(--c-line);
}
.c-stats__item:last-child{ border-right:0; }
.c-stats__value{
    font-family:var(--f-display); font-size:var(--step-2); font-weight:500; color:var(--c-gold-soft);
    display:block;
}
.c-stats__label{
    font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-ink-faint);
    margin-top:.3rem; display:block;
}
@media (max-width:640px){
    .c-stats__item{ flex:1 1 50%; border-bottom:1px solid var(--c-line); }
}

/* ==========================================================================
   BYLINE
   ========================================================================== */
.c-byline{ display:flex; align-items:center; gap:.9rem; }
.c-byline__avatar{
    width:40px; height:40px; border-radius:50%;
    background:var(--c-bg-card); border:1px solid var(--c-line-strong);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--f-display); font-size:.85rem; color:var(--c-gold);
}
.c-byline__name{ font-size:.88rem; font-weight:600; }
.c-byline__meta{ font-size:.76rem; color:var(--c-ink-faint); }

/* ==========================================================================
   BODY COPY MODULE
   ========================================================================== */
.c-copy{ max-width:68ch; color:var(--c-ink-dim); font-size:1.05rem; }
.c-copy p{ margin-bottom:1.35em; }
.c-copy p:last-child{ margin-bottom:0; }
.c-copy strong{ color:var(--c-ink); font-weight:600; }
.c-copy--dropcap p:first-of-type::first-letter{
    font-family:var(--f-display);
    font-size:4.6rem;
    font-weight:600;
    color:var(--c-gold);
    float:left;
    line-height:.82;
    margin:.05em .1em 0 0;
}

/* ==========================================================================
   PULL QUOTE
   ========================================================================== */
.c-quote--breakout{
    margin:clamp(3rem,7vw,5rem) auto;
    max-width:56ch;
    text-align:center;
}
.c-quote--breakout p{
    font-family:var(--f-display); font-style:italic; font-weight:400;
    font-size:clamp(1.5rem,1.1rem + 2vw,2.4rem); line-height:1.28; color:var(--c-ink);
}
.c-quote--breakout cite{ display:block; margin-top:1.2rem; font-style:normal; font-size:.8rem; letter-spacing:.06em; color:var(--c-gold); text-transform:uppercase; }

.c-quote--border{
    border-left:2px solid var(--c-gold-dim);
    padding-left:1.6rem;
    margin-block:2.2rem;
}
.c-quote--border p{ font-family:var(--f-display); font-style:italic; font-size:1.3rem; color:var(--c-ink); }

/* ==========================================================================
   IMAGE BREAK
   ========================================================================== */
.c-image-break{ margin-block:clamp(2.5rem,6vw,4.5rem); }
.c-image-break--full img{ width:100%; aspect-ratio:16/8; object-fit:cover; filter:grayscale(0.6) brightness(0.75); }
.c-image-break__caption{ margin-top:.7rem; font-size:.78rem; color:var(--c-ink-faint); }

.c-image-break--diptych{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--c-line); }
.c-image-break--diptych figure{ margin:0; background:var(--c-bg); }
.c-image-break--diptych img{ width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(0.6) brightness(0.75); }
@media (max-width:640px){ .c-image-break--diptych{ grid-template-columns:1fr; } }

/* ==========================================================================
   NUMBERED CARD
   ========================================================================== */
.c-card{
    display:flex; gap:1.5rem;
    padding-block:1.8rem;
    border-bottom:1px solid var(--c-line);
}
.c-card__index{
    font-family:var(--f-display); font-size:1.6rem; color:var(--c-gold-dim); flex:0 0 auto; width:2.2ch;
}
.c-card__figure{ flex:0 0 108px; aspect-ratio:1/1; overflow:hidden; background:var(--c-bg-card); }
.c-card__figure img{ width:100%; height:100%; object-fit:cover; filter:grayscale(0.6) brightness(0.75); transition:filter 0.5s; }
.c-card:hover .c-card__figure img{ filter:grayscale(0.1) brightness(0.95); }
.c-card__body{ flex:1; min-width:0; }
.c-card__eyebrow{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--c-ink-faint); }
.c-card__title{ font-family:var(--f-display); font-size:1.3rem; font-weight:500; margin-block:.25rem .5rem; }
.c-card__text{ color:var(--c-ink-dim); font-size:.94rem; }

/* grid variant */
.c-card-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    background:var(--c-line); border:1px solid var(--c-line);
}
.c-card-grid .c-card{
    flex-direction:column; gap:1rem;
    background:var(--c-bg); padding:1.8rem; border-bottom:0;
}
.c-card-grid .c-card__figure{ flex:none; width:100%; aspect-ratio:4/5; }
@media (max-width:640px){ .c-card-grid{ grid-template-columns:1fr; } }

.c-notes{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem; }
.c-notes__chip{
    font-size:.72rem; letter-spacing:.03em; color:var(--c-gold-soft);
    border:1px solid var(--c-gold-dim); padding:.3em .8em;
}

/* ==========================================================================
   TIMELINE / MILESTONE NODE
   ========================================================================== */
.c-timeline{ position:relative; padding-block:1rem; }
.c-timeline__spine{
    position:absolute; left:50%; top:0; bottom:0; width:1px;
    background:linear-gradient(var(--c-line-strong), var(--c-line-strong));
    transform:translateX(-50%);
}
.c-timeline__spine-fill{
    position:absolute; left:0; top:0; width:100%; height:0%;
    background:var(--c-gold);
    transition:height 120ms linear;
}
.c-timeline__node{
    position:relative;
    display:grid; grid-template-columns:1fr 60px 1fr; align-items:start;
    gap:0 clamp(1rem,3vw,3rem);
    padding-block:clamp(2.5rem,6vw,4.5rem);
}
.c-timeline__dot{
    grid-column:2; justify-self:center;
    width:14px; height:14px; border-radius:50%;
    background:var(--c-bg); border:2px solid var(--c-gold-dim);
    margin-top:.4rem;
    transition:border-color var(--transition), background var(--transition);
    position:relative; z-index:1;
}
.c-timeline__node.is-active .c-timeline__dot{ border-color:var(--c-gold); background:var(--c-gold); box-shadow:0 0 0 6px rgba(200,161,90,0.15); }
.c-timeline__content{ grid-column:1; text-align:right; }
.c-timeline__node:nth-child(even) .c-timeline__content{ grid-column:3; text-align:left; }
.c-timeline__node:nth-child(even) .c-timeline__spacer{ grid-column:1; }
.c-timeline__date{ font-family:var(--f-display); color:var(--c-gold); font-size:1.05rem; font-weight:600; letter-spacing:.03em; }
.c-timeline__title{ font-family:var(--f-display); font-size:1.5rem; font-weight:500; margin-block:.4rem .6rem; }
.c-timeline__text{ color:var(--c-ink-dim); font-size:.94rem; }
.c-timeline__figure{ margin-top:1rem; aspect-ratio:16/10; overflow:hidden; }
.c-timeline__figure img{ width:100%; height:115%; object-fit:cover; filter:grayscale(0.1) brightness(0.75); }

@media (max-width:760px){
    .c-timeline__spine{ left:20px; }
    .c-timeline__node, .c-timeline__node:nth-child(even){
        grid-template-columns:40px 1fr; gap:0 1.2rem;
    }
    .c-timeline__dot{ grid-column:1; margin-top:.35rem; }
    .c-timeline__content, .c-timeline__node:nth-child(even) .c-timeline__content{
        grid-column:2; text-align:left;
    }
}

/* condensed "history strip" variant */
.c-strip{ display:flex; overflow-x:auto; gap:0; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); scrollbar-width:thin; }
.c-strip__item{
    flex:1 1 220px; min-width:200px;
    padding:1.6rem 1.6rem; border-right:1px solid var(--c-line);
}
.c-strip__item:last-child{ border-right:0; }
.c-strip__date{ font-family:var(--f-display); color:var(--c-gold); font-weight:600; }
.c-strip__title{ font-weight:600; margin-block:.4rem .3rem; font-size:.95rem; }
.c-strip__text{ font-size:.85rem; color:var(--c-ink-faint); }

/* ==========================================================================
   COMPARISON / VERDICT PANEL
   ========================================================================== */
.c-verdict{
    border:1px solid var(--c-line); padding:clamp(1.8rem,4vw,3rem); margin-block:clamp(2.5rem,6vw,4.5rem);
    background:var(--c-bg-raised);
}
.c-verdict__head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.6rem; gap:1rem; flex-wrap:wrap; }
.c-verdict__title{ font-family:var(--f-display); font-size:var(--step-2); font-weight:500; }

/* scorecard variant */
.c-verdict__row{ display:grid; grid-template-columns:140px 1fr 3ch; align-items:center; gap:1rem; margin-block:.9rem; }
.c-verdict__label{ font-size:.82rem; color:var(--c-ink-dim); }
.c-verdict__bar{ height:4px; background:var(--c-line); position:relative; }
.c-verdict__bar-fill{ position:absolute; inset:0; width:0; background:var(--c-gold); transition:width 1100ms cubic-bezier(.22,.61,.36,1); }
.c-verdict__score{ font-family:var(--f-display); color:var(--c-gold-soft); font-size:.9rem; text-align:right; }
.c-verdict__text{ margin-top:1.6rem; color:var(--c-ink-dim); }

/* then-vs-now variant */
.c-verdict--split{ display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0; overflow:hidden; }
.c-verdict--split .c-verdict__col{ padding:clamp(1.8rem,4vw,2.6rem); }
.c-verdict--split .c-verdict__col + .c-verdict__col{ border-left:1px solid var(--c-line); }
.c-verdict--split .c-verdict__tag{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-ink-faint); }
.c-verdict--split .c-verdict__col--now .c-verdict__tag{ color:var(--c-gold); }
.c-verdict--split .c-verdict__big{ font-family:var(--f-display); font-size:1.7rem; margin-block:.5rem .6rem; }
@media (max-width:640px){ .c-verdict--split{ grid-template-columns:1fr; } .c-verdict--split .c-verdict__col + .c-verdict__col{ border-left:0; border-top:1px solid var(--c-line); } }

/* ==========================================================================
   SECTION HELPERS
   ========================================================================== */
.c-section{ padding-block:clamp(3rem,7vw,5.5rem); }
.c-section__head{ margin-bottom:clamp(2rem,5vw,3rem); }
.c-section__title{ font-family:var(--f-display); font-size:var(--step-3); font-weight:500; margin-top:.5rem; max-width:20ch; }

/* ghosted numeral */
.c-section--ghost{ position:relative; }
.c-section--ghost .c-section__ghost-num{
    position:absolute; top:-1.6rem; left:-.2rem;
    font-family:var(--f-display); font-weight:600; font-size:clamp(5rem,10vw,9rem);
    color:transparent; -webkit-text-stroke:1px var(--c-line-strong);
    line-height:1; z-index:0; user-select:none;
}
.c-section--ghost .c-section__head{ position:relative; z-index:1; }

/* asymmetric editorial layout */
.c-editorial-grid{
    display:grid; grid-template-columns:minmax(0,66ch) 1fr; gap:clamp(2rem,5vw,4rem);
    align-items:start;
}
.c-editorial-grid__margin{ position:sticky; top:6rem; }
.c-editorial-grid__margin .c-notes{ margin-top:0; }
@media (max-width:900px){
    .c-editorial-grid{ grid-template-columns:1fr; }
    .c-editorial-grid__margin{ position:static; margin-top:1rem; padding-top:1.5rem; border-top:1px solid var(--c-line); }
}

.c-marginalia{
    font-size:.85rem; color:var(--c-ink-faint); border-left:1px solid var(--c-line); padding-left:1.2rem;
}
.c-marginalia + .c-marginalia{ margin-top:2rem; }

/* era selector */
.c-era-nav{ display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); }
.c-era-nav a{
    flex:1; text-align:center; padding:1rem .5rem; font-size:.8rem; letter-spacing:.04em;
    color:var(--c-ink-faint); border-right:1px solid var(--c-line); transition:color var(--transition), background var(--transition);
}
.c-era-nav a:last-child{ border-right:0; }
.c-era-nav a:hover, .c-era-nav a.is-current{ color:var(--c-gold); background:var(--c-bg-raised); }