/* ==============================================================
   Thought entry page — long-form reading layout.
   Designed against v3 tokens (tokens.css) + global.css chrome.
   ============================================================== */

/* ---------- Topbar: mono name + time (matches home variant D) ---------- */
.thought-page .wordmark{
    font-family:var(--font-mono);
    font-size:.78rem;
    font-weight:400;
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    color:var(--fg);
    line-height:1.25;
}
.thought-page .wordmark .name{ font-weight:400; }
.thought-page .wordmark .star,
.thought-page .wordmark .role{ display:none; }

.thought-page .topbar-time{
    justify-self:end;
    text-align:right;
    font-family:var(--font-mono);
    font-size:.78rem;
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    line-height:1.25;
    color:var(--fg);
}
.thought-page .topbar-time .topbar-time__label{ display:block; color:var(--fg); }
.thought-page .topbar-time .topbar-time__value{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    color:var(--fg);
}
.thought-page .topbar-time .topbar-time__icon{
    width:.95em;
    height:.95em;
    flex:none;
}

/* ---------- Page wrapper ---------- */
.thought-page main{
    padding-inline:var(--space-page);
    padding-block:1rem 2rem;
    display:block;
}

.thought-page main > .thought-entry{
    width:100%;
    max-width:var(--col-wide);
    box-sizing:border-box;
    margin-inline:auto;
}

/* ---------- Header (eyebrow / title / date) ---------- */
.thought-entry-header{
    padding-block:2rem .5rem;
    margin-block-end:0;
}

.thought-entry-eyebrow{
    font-family:var(--font-mono);
    font-size:var(--t-mono);
    letter-spacing:var(--ls-mono);
    text-transform:uppercase;
    color:var(--fg-muted);
    margin-block-end:1.5rem;
}

.thought-entry-title{
    font-family:var(--font-sans);
    font-weight:500;
    font-size:3rem !important;
    line-height:1.05;
    letter-spacing:-.025em;
    margin-block-end:1rem;
    max-width:24ch;
    color:var(--fg);
}

.thought-entry-date{
    font-family:var(--font-mono);
    font-size:var(--t-meta);
    letter-spacing:var(--ls-mono);
    color:var(--fg-faint);
}

/* ---------- Body ---------- */
.thought-entry-body{
    padding-block:0 2rem;
}

/* Bottom "back to thoughts" link — visible on mobile only (desktop keeps it
   in the eyebrow at the top). */
.thought-entry-back{
    display:none;
    margin-block:1.5rem 0;
}
@media (max-width:899.98px){
    .thought-entry-back{ display:block; }
    .thought-entry-eyebrow{ display:none; }
}

.thought-entry-body p{
    line-height:1.75;
    margin-block:2.25rem;
    max-width:68ch;
    text-wrap:pretty;
    hyphens:none;
    word-break:normal;
    overflow-wrap:normal;
    font-weight:500;
    font-variation-settings:'wght' 500;
    color:var(--fg);
}
.thought-entry-body > p:first-child{
    margin-block-start:2.25rem;
}

.thought-entry-body p.lede{
    font-size:1.15rem;
    line-height:1.55;
    color:var(--fg);
}

/* ---------- Bottombar: in-flow at end of essay (not fixed) ----------
   Lives inside the article, so on desktop it sits at the bottom of the
   essay column and on mobile it follows the "back to thoughts" link. */
.thought-page .bottombar{
    position:static;
    left:auto;
    right:auto;
    bottom:auto;
    padding-inline:0;
    padding-top:2.5rem;
    background:none;
    pointer-events:auto;
}

/* ---------- Back-home link ---------- */
.back-home{
    display:inline-flex;
    align-items:center;
    gap:.4em;
    color:var(--fg-muted);
    transition:color var(--dur) var(--ease);
}

.back-home:hover{
    color:var(--accent);
}

.back-home-arrow{
    display:inline-block;
    transform:translateX(-.05em);
}

/* ---------- Vertical-nav sidebar layout (desktop) ----------
   Above 900px, the topbar becomes a fixed left sidebar:
   wordmark, time, and nav stack vertically. The essay flows
   to the right of the rail.
   ------------------------------------------------------------ */
@media (min-width:900px){
    .thought-page .topbar{
        position:fixed;
        inset:0 auto 0 0;
        width:14rem;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:1.75rem;
        padding:var(--space-page);
        background:var(--bg);
        z-index:50;
    }

    .thought-page .topbar-time{
        justify-self:start;
        text-align:left;
        order:2;
        margin-top:auto;
    }

    .thought-page .topbar-nav{
        flex-direction:column;
        align-items:flex-start;
        gap:.85rem;
    }
    .thought-page .topbar-nav a{
        font-weight:500;
        font-variation-settings:'wght' 500;
    }
    .thought-page .topbar-nav a.is-active::before{ display:none; }

    /* Same chrome as the case study: main is offset to the right of the
       fixed sidebar, and the entry is capped + centered within main with
       the same max-width as case-study content blocks. */
    .thought-page main{
        margin-inline-start:clamp(18rem, 24vw, 24rem);
    }
    .thought-page main > .thought-entry{
        max-width:55vw;
    }
}

/* ---------- Wordmark letter base — duplicated from v3/home.css since the
   thought page doesn't load that stylesheet. Positions the .lt--swap .lo
   (lowercase variant) absolutely behind .up so it's invisible at rest;
   .lt elements collapse cleanly via the case-study hover rules. */
.thought-page .wordmark .name{ white-space:nowrap; }
.thought-page .wordmark .name .lt{
    display:inline-block;
    overflow:hidden;
    line-height:1;
    vertical-align:baseline;
}
.thought-page .wordmark .name .lt--swap{ position:relative; }
.thought-page .wordmark .name .lt--swap .up,
.thought-page .wordmark .name .lt--swap .lo{ display:inline-block; }
.thought-page .wordmark .name .lt--swap .lo{
    position:absolute;
    left:0;
    top:0;
    opacity:0;
}
.thought-page .wordmark .name .lt--drop{ max-width:1.2em; }

/* Case-study-style hover behavior (mirrored from v3/home.css). The wordmark
   sits at "Sophia Bae" by default and collapses to the blue "soba" pill while
   hovered. */
.thought-page .wordmark .name{
    background:transparent;
    color:var(--fg);
    padding:0;
    transition:background-color 240ms var(--ease),
               color 240ms var(--ease),
               padding 240ms var(--ease);
}
.thought-page .wordmark .name .lt--drop{
    opacity:1;
    font-size:1em;
    transition:max-width 320ms var(--ease),
               opacity 240ms var(--ease),
               font-size 320ms var(--ease);
}
.thought-page .wordmark .name .lt--swap .up{
    opacity:1;
    transition:opacity 240ms var(--ease);
}
.thought-page .wordmark .name .lt--swap .lo{
    transition:opacity 240ms var(--ease);
}
.thought-page .wordmark:hover .name{
    background:var(--accent);
    color:#fff;
    padding:.25em .25em .15em;
}
.thought-page .wordmark:hover .name .lt--drop{
    max-width:0;
    opacity:0;
    font-size:0;
}
.thought-page .wordmark:hover .name .lt--swap .up{ opacity:0; }
.thought-page .wordmark:hover .name .lt--swap .lo{ opacity:1; }
/* Extend hover hit-area so the cursor doesn't fall off as letters collapse. */
.thought-page .wordmark{
    padding-right:6em;
    margin-right:-6em;
}

/* Wordmark + time typography — same scale on every viewport (mirrors oryn /
   variant-D). The !important beats the universal `* { font-size:1rem !important }`
   lock in type.css. */
.thought-page .wordmark,
.thought-page .wordmark .name{
    font-size:1.5rem !important;
    font-weight:600;
    font-variation-settings:'wght' 600;
}
.thought-page .wordmark .name .lt,
.thought-page .wordmark .name .lt .up,
.thought-page .wordmark .name .lt .lo{
    font-size:1.5rem !important;
}
.thought-page .topbar-time,
.thought-page .topbar-time .topbar-time__label,
.thought-page .topbar-time .topbar-time__value{
    font-size:14px !important;
}
.thought-page .topbar-time .topbar-time__value{
    font-weight:500;
    font-variation-settings:'wght' 500;
}

/* ---------- Mobile topbar — mirrors home page (variant D) at ≤899px ----------
   Grid with 2 columns: logo|time on row 1, full-width nav on row 2.
   The home page achieves this with [data-variant="d"] rules in home.css
   at @media (max-width:800px). We mirror it here scoped to .thought-page so
   the thought pages inherit the same nav structure. */
@media (max-width:899.98px){
    .thought-page .topbar{
        position:fixed;
        top:0;
        left:0;
        right:0;
        z-index:50;
        background:var(--bg);
        display:grid;
        grid-template-columns:1fr auto;
        grid-template-areas:
            "logo time"
            "nav  nav";
        align-items:center;
        column-gap:1rem;
        row-gap:.85rem;
        padding:clamp(1.25rem, 2.5vw, 2rem) var(--space-page);
    }
    /* Push content below the fixed topbar so it doesn't slide underneath. */
    .thought-page main{
        padding-block-start:9rem;
    }
    .thought-page .wordmark{
        grid-area:logo;
        justify-self:start;
    }
    .thought-page .topbar-time{
        grid-area:time;
        justify-self:end;
        text-align:right;
    }
    .thought-page .topbar-nav{
        grid-area:nav;
        display:flex;
        justify-content:space-between;
        align-items:center;
        flex-wrap:wrap;
        font-family:var(--font-mono);
        font-size:.78rem;
        letter-spacing:var(--ls-mono);
        text-transform:uppercase;
        gap:clamp(1rem, 3vw, 2rem);
    }
    .thought-page .topbar-nav a{
        color:var(--fg);
        padding:0;
        border:none;
        transition:color var(--dur) var(--ease);
    }
    .thought-page .topbar-nav a:hover,
    .thought-page .topbar-nav a.is-active{
        color:var(--accent);
    }
    /* Match the home variant-D treatment: render via the data-mono attr so
       link spacing/typography is consistent. */
    .thought-page .topbar-nav a[data-mono]{
        font-size:0 !important;
    }
    .thought-page .topbar-nav a[data-mono]::before{
        content:attr(data-mono);
        font-size:.78rem;
        font-weight:500;
        font-variation-settings:'wght' 500;
        text-transform:uppercase;
        letter-spacing:var(--ls-mono);
    }
}