/* ========== Home page (#home) ==========
   Script: js/pages/home.js. Hero with the dusk city scene, Vicerium in brief, latest news and the
   "From Engineering" row, roadmap "now" strip. Shared tokens, type, buttons, chips and the shell live in css/tokens.css; the post
   cards come from css/devlog.css; the scene's own drawing styles are injected by js/scene.js (.dusk-scene)
   ahead of this file, so anything here wins.
   Sections: Hero · Readout · Scene · In brief · Latest news · From Engineering · Now · Responsive ·
   Reduced motion */

/* =====================================================================
   Hero: one idea, the copy on the left and the city block on the right
   ===================================================================== */
.hm-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding: clamp(36px, 5vw, 80px) 0 clamp(48px, 6vw, 88px);
}

/* The markup runs copy, scene, readout (the reading order on phones). Here the readout sits under the copy
   and the two are centred as one block against the scene: the 1fr rows above and below share what is left. */
.hm-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
        ".       scene"
        "copy    scene"
        "readout scene"
        ".       scene";
    align-items: center;
    gap: 0 clamp(28px, 4vw, 64px);
}
.hm-hero.is-solo .hm-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "copy" "readout";
}
/* no scene to align it to (js/scene.js missing): the grid fades in from the far side */
.hm-hero.is-solo .grid-21 {
    -webkit-mask-image: radial-gradient(ellipse 60% 100% at 100% 50%, #000 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 60% 100% at 100% 50%, #000 0%, transparent 80%);
}

.hm-copy { grid-area: copy; min-width: 0; }

/* The copy rises in once; it waits while the intro is on screen (js adds .is-waiting) */
.js .hm-fade { animation: hm-rise 0.7s var(--ease-out) both; }
.js .hm-copy > .hm-fade:nth-child(2) { animation-delay: 80ms; }
.js .hm-copy > .hm-fade:nth-child(3) { animation-delay: 180ms; }
.js .hm-copy > .hm-fade:nth-child(4) { animation-delay: 260ms; }
.js .hm-hero-grid > .hm-readout.hm-fade { animation-delay: 340ms; }
.hm-hero.is-waiting .hm-fade { animation-play-state: paused; }
@keyframes hm-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }

/* =====================================================================
   Readout "Where Vicerium stands": two Roadmap values and the newest News date, not telemetry
   ===================================================================== */
.hm-readout {
    grid-area: readout;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    row-gap: 16px;
    margin: 44px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--c-line);
    max-width: 540px;
}
.hm-readout > div { min-width: 0; padding: 0 clamp(14px, 2vw, 28px) 0 0; }
.hm-readout > div + div { padding-left: clamp(14px, 1.7vw, 24px); border-left: 1px solid var(--c-line); }
.hm-readout dt { font: 600 0.8125rem/1.2 var(--f-display); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-muted); white-space: nowrap; }
.hm-readout dd {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-height: 1.35rem;
    margin: 8px 0 0;
    font: 500 1.125rem/1.2 var(--f-mono);
    font-variant-numeric: tabular-nums;
    color: var(--c-text);
    white-space: nowrap;
}
.hm-readout dd small { font: 600 0.8125rem/1 var(--f-display); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--c-muted); }
.hm-readout dd > * { animation: hm-value 0.3s var(--ease-out) both; }
@keyframes hm-value { from { opacity: 0; } to { opacity: 1; } }

.hm-ro-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-amber);
    text-decoration: none;
    border-radius: 4px;
}
.hm-ro-link .i { width: 15px; height: 15px; transition: transform var(--t-ui) var(--ease-out); }
.hm-ro-link:hover .i { transform: translateX(3px); }
.hm-ro-link:hover time { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* =====================================================================
   Scene: the city block (js/scene.js draws it), its hint and clock, and its caption
   ===================================================================== */
.hm-scene {
    grid-area: scene;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    margin: 0;
    width: 100%;
    max-width: 700px;
    justify-self: end;
}
.hm-scene > * { grid-column: 1 / -1; min-width: 0; }
.hm-scene .scene-art { position: relative; }
/* the hint on the left, the clock on the right; one text line tall, so the caption follows close */
.hm-scene .scene-bar { min-height: 20px; }
.hm-scene-note {
    margin: 10px 0 0;
    color: var(--c-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
    text-wrap: pretty;
}
/* A still (reduced motion): no hint, so the caption and the clock share one row */
.hm-scene.is-still > .scene-bar { grid-column: 2; grid-row: 2; }
.hm-scene.is-still > .hm-scene-note { grid-column: 1; grid-row: 2; align-self: center; margin-top: 6px; }

/* =====================================================================
   Vicerium in brief: three pillars, no frames
   ===================================================================== */
.hm-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    margin: 0 0 28px;
}
.hm-row-head h2 { margin: 0; }

.hm-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--c-line);
}
.hm-pillars li { min-width: 0; padding: 28px 32px 0 0; }
.hm-pillars li + li { padding-left: 32px; border-left: 1px solid var(--c-line); }
.hm-pillars .i { width: 26px; height: 26px; color: var(--c-body); stroke-width: 1.6; }
.hm-pillars h3 { margin: 16px 0 0; font: 600 1.625rem/1.1 var(--f-display); color: var(--c-text); }
.hm-pillars p { margin: 10px 0 0; max-width: 30ch; color: var(--c-body); }

/* =====================================================================
   Latest news: the cards are css/devlog.css's .post-card. The row is hidden while News has no post.
   ===================================================================== */
/* two cards share the row in halves instead of leaving a third empty */
.post-grid.hm-grid-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* one card takes the whole row, its picture beside the text on wide screens (as a card alone in the
   News hub's last row, css/devlog.css) */
.post-grid.hm-grid-solo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 861px) {
    .hm-grid-solo > .post-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hm-grid-solo > .post-card .pc-media {
        aspect-ratio: auto;
        min-height: clamp(260px, 24vw, 340px);
        border-radius: calc(var(--r-md) - 1px) 0 0 calc(var(--r-md) - 1px);
        border-bottom: 0;
        border-right: 1px solid var(--c-line);
    }
    .hm-grid-solo > .post-card .pc-media img { position: absolute; inset: 0; object-position: 0 25%; }
    .hm-grid-solo > .post-card .pc-body { padding: clamp(26px, 3vw, 40px); }
}

/* =====================================================================
   From Engineering: one row with the newest article's title, thesis and reading time, hidden while
   there is none. Neutral, like the roadmap's engine card: no amber (that is for "newest") and no teal
   fill. A section of its own: under the news cards it sits closer, as part of the same block.
   ===================================================================== */
.hm-latest:not([hidden]) + .hm-eng { padding-top: clamp(40px, 5vw, 56px); }
.hm-eng-kicker { margin: 0 0 16px; }
.hm-eng-row {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px 22px;
    padding: 24px 26px;
    border-radius: var(--r-md);
    border: 1px solid var(--c-line);
    background: var(--c-panel);
    transition: border-color var(--t-ui) var(--ease-out);
}
.hm-eng-row:hover, .hm-eng-row:focus-within { border-color: var(--c-line-3); }
.js .hm-eng-row.reveal.is-in {
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), border-color var(--t-ui) var(--ease-out);
}
.hm-eng-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-line-2);
    color: var(--c-body);
}
.hm-eng-icon .i { width: 22px; height: 22px; }
.hm-eng-row:hover .hm-eng-icon { border-color: var(--c-line-3); color: var(--c-text); }
.hm-eng-text { min-width: 0; }
.hm-eng-title { margin: 0; font: 600 1.625rem/1.1 var(--f-display); color: var(--c-text); overflow-wrap: break-word; text-wrap: balance; }
.hm-eng-link { color: inherit; text-decoration: none; }
/* the whole row is the link's target area */
.hm-eng-link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--r-md); }
.hm-eng-link:focus-visible { outline: none; }
.hm-eng-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.hm-eng-thesis { margin: 10px 0 0; max-width: 68ch; font-size: 0.9375rem; line-height: 1.65; color: var(--c-body); text-wrap: pretty; }
.hm-eng-meta { margin: 12px 0 0; font: 400 0.8125rem/1 var(--f-mono); color: var(--c-muted); }
.hm-eng-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: center;
    color: var(--c-text);
    font: 600 1rem/1 var(--f-display);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
}
.hm-eng-go .i { width: 16px; height: 16px; transition: transform var(--t-ui) var(--ease-out); }
.hm-eng-row:hover .hm-eng-go .i { transform: translateX(3px); }

/* =====================================================================
   Now: the roadmap's one line with an amber rule, and since when
   ===================================================================== */
.hm-now .hm-row-head { padding-bottom: 28px; border-bottom: 1px solid var(--c-line); }
.hm-now-block {
    max-width: 48em;
    padding: 6px 0 6px 22px;
    border-left: 3px solid var(--c-amber);
}
.hm-now-line {
    margin: 0;
    font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--f-display);
    color: var(--c-text);
}
.hm-now-line b { color: var(--c-amber); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; }
.hm-now-meta { margin: 10px 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--c-body); }

/* =====================================================================
   Responsive
   ===================================================================== */
/* (.hm-hero.is-solo keeps its one column at every width: its rule above outranks these) */
@media (max-width: 1180px) {
    .hm-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* One column in reading order: the copy, the city, then the readout */
@media (max-width: 960px) {
    .hm-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "copy" "scene" "readout";
    }
    /* the figure spans the column so its bar and caption line up with the gutter; js/scene.js keeps the
       drawing itself at 620px and centred */
    .hm-scene { justify-self: stretch; max-width: none; margin-top: 40px; }
    .hm-readout { margin-top: 36px; }
    .hm-hero.is-solo .hm-readout { margin-top: 44px; }

    .hm-pillars { grid-template-columns: minmax(0, 1fr); border-top: 0; }
    .hm-pillars li, .hm-pillars li + li {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 16px;
        padding: 22px 0;
        border-left: 0;
        border-top: 1px solid var(--c-line);
    }
    .hm-pillars .i { grid-row: 1 / 3; margin-top: 4px; }
    .hm-pillars h3 { margin: 0; }
    .hm-pillars p { max-width: 46ch; }
}

@media (max-width: 680px) {
    /* phones: the cards stack (css/devlog.css), and so does the Engineering row: icon and text, then Read */
    .post-grid.hm-grid-pair { grid-template-columns: minmax(0, 1fr); }
    .hm-eng-row { grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; padding: 20px 18px; }
    .hm-eng-icon { width: 40px; height: 40px; }
    .hm-eng-icon .i { width: 20px; height: 20px; }
    .hm-eng-title { font-size: 1.375rem; }
    .hm-eng-go { grid-column: 2; justify-self: start; margin-top: 10px; }
}

@media (max-width: 560px) {
    .hm-hero { padding: 28px 0 40px; }
    .hm-copy > .kicker { display: flex; }     /* no line box around it: the city starts a little higher */
    .hm-hero .display { margin-top: 18px; }
    .hm-hero .hm-scene { margin-top: 28px; }
    .hm-hero .hm-readout { margin-top: 24px; }
    /* the three values stay on one row: a label may take two lines, and the values line up along the bottom */
    .hm-readout { flex-wrap: nowrap; }
    .hm-readout > div { display: flex; flex-direction: column; padding-right: 14px; }
    .hm-readout > div + div { padding-left: 14px; }
    .hm-readout dt { white-space: normal; }
    .hm-readout dd { margin-top: auto; padding-top: 8px; font-size: 1rem; }
    .hm-scene-note { margin-top: 8px; }

    .hm-now-block { padding-left: 16px; }
}

/* the narrowest phones: the three readout values share the row evenly */
@media (max-width: 400px) {
    .hm-readout > div { padding-right: 10px; }
    .hm-readout > div + div { padding-left: 10px; }
    .hm-readout dt { font-size: 0.75rem; }
}

/* =====================================================================
   Reduced motion: tokens.css stops every animation and transition; the scene shows its still
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .hm-ro-link:hover .i, .hm-eng-row:hover .hm-eng-go .i { transform: none; }
}