/* memoria futura — terminal world: VT323 on a dark ground, phosphor green as the only accent */

:root {
    --ground: #08090a;
    --ground-raised: #101214;
    --ink: #ded9cc;
    --ink-dim: #8d8b82;
    --accent: #5cff9d;
    --accent-dim: #2f7f52;
    --rule: #262a2b;

    --measure: 68ch;
    --page: 46rem;
    --gap: 1.6rem;

    --face: "VT323", "Courier New", ui-monospace, monospace;
}

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

html {
    background: var(--ground);
    /* VT323 draws small for its em size, so the base is set above the usual 16px */
    font-size: 118%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--face);
    font-size: 1.15rem;
    line-height: 1.45;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* faint scanline texture: the world is a CRT, not a shadow-and-card page */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.028) 0 1px,
        transparent 1px 3px
    );
}

::selection {
    background: var(--accent);
    color: var(--ground);
}

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

* {
    scrollbar-color: var(--accent-dim) var(--ground);
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--ground);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-dim);
}

/* menu */

.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.1rem;
    padding: 1rem clamp(1rem, 4vw, 2rem);
    border-bottom: 1px solid var(--rule);
    background: var(--ground-raised);
}

.menu a {
    color: var(--ink-dim);
    text-decoration: none;
    padding: 0.15rem 0.35rem;
    white-space: nowrap;
}

.menu a::before {
    content: "[ ";
    color: var(--accent-dim);
}

.menu a::after {
    content: " ]";
    color: var(--accent-dim);
}

.menu a:hover,
.menu a:focus-visible {
    background: var(--accent);
    color: var(--ground);
}

.menu a:hover::before,
.menu a:hover::after,
.menu a:focus-visible::before,
.menu a:focus-visible::after {
    color: var(--ground);
}

.menu a[aria-current="page"] {
    color: var(--accent);
}

.menu a[aria-current="page"]::before,
.menu a[aria-current="page"]::after {
    color: var(--accent);
}

/* page */

main {
    flex: 1;
    width: 100%;
    max-width: var(--page);
    margin: 0 auto;
    padding: clamp(2rem, 6vw, 3.6rem) clamp(1rem, 4vw, 2rem) 4rem;
    /* the countdown sizes itself against this box so it always fits on one line */
    container-type: inline-size;
}

main > * {
    max-width: var(--measure);
}

h1,
h2,
h3 {
    font-weight: normal;
    line-height: 1.1;
    color: var(--ink);
    margin: 2.4rem 0 0.7rem;
    letter-spacing: 0.01em;
}

main > h1:first-child {
    margin-top: 0;
}

h1 {
    font-size: clamp(2.4rem, 7vw, 3.4rem);
}

h1::before {
    content: "> ";
    color: var(--accent);
}

h2 {
    font-size: 1.9rem;
    color: var(--accent);
}

h3 {
    font-size: 1.5rem;
}

p,
ul,
ol,
blockquote,
pre {
    margin: 0 0 1.1rem;
}

a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

a:hover,
a:focus-visible {
    background: var(--accent);
    color: var(--ground);
    text-decoration: none;
}

/* VT323 ships one weight: on a terminal emphasis was brightness, not thickness */
strong,
b {
    font-weight: normal;
    color: var(--accent);
}

blockquote {
    margin-left: 0;
    padding-left: 1rem;
    border-left: 1px solid var(--rule);
    color: var(--ink-dim);
}

code,
pre {
    font-family: var(--face);
    font-size: 1em;
}

/* inline code must not read as a link: same face, different ground, no green */
:not(pre) > code {
    padding: 0 0.25em;
    background: var(--ground-raised);
    border: 1px solid var(--rule);
    color: var(--ink);
}

pre {
    padding: 0.9rem 1rem;
    border: 1px solid var(--rule);
    background: var(--ground-raised);
    overflow-x: auto;
}

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 2.4rem 0;
}

img {
    max-width: 100%;
    height: auto;
}

figure {
    margin: 0 0 1.4rem;
}

figure img {
    display: block;
    border: 1px solid var(--rule);
}

figcaption {
    padding-top: 0.4rem;
    color: var(--ink-dim);
}

/* home: countdown and poster */

#countdown {
    margin: 0 0 2rem;
    /* 45 VT323 cells at 0.39em fill the container at 5.7cqi; stay under it so the line never wraps */
    font-size: min(3rem, 5.2cqi);
    color: var(--accent);
    letter-spacing: 0;
    white-space: nowrap;
    /* the fallback face is wider than VT323: clip it rather than let it scroll the page */
    overflow: hidden;
}

#countdown::before {
    content: none;
}

#countdown::after {
    content: "_";
    animation: blink 1.06s steps(1, end) infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

main > img {
    display: block;
    border: 1px solid var(--rule);
    max-width: min(100%, 25rem);
    height: auto;
    margin-bottom: 2.4rem;
}

/* the two posters sit side by side while there is room for both, and stack
   below 34rem of container; auto-fit does the switch without a media query */
.posters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: 1.4rem;
    align-items: start;
    max-width: min(100%, 36rem);
    margin-bottom: 2.4rem;
}

.posters figure {
    margin: 0;
}

.posters img {
    width: 100%;
    height: auto;
}

/* director and year sit under the title, not as a second heading */
.credits {
    margin-top: -0.5rem;
    color: var(--ink-dim);
}

/* lists of posts and blogs */

.post-list,
.blog-list {
    list-style: none;
    padding: 0;
    border-top: 1px solid var(--rule);
}

.post-list li,
.blog-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.8rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--rule);
}

.post-list time {
    color: var(--ink-dim);
    font-variant-numeric: tabular-nums;
}

.blog-tag {
    color: var(--accent-dim);
}

.blog-tag::before {
    content: "/";
}

.blog-list .count {
    margin-left: auto;
    color: var(--ink-dim);
}

.feed-link {
    margin-top: 1.4rem;
}

.post-date {
    color: var(--ink-dim);
    margin-top: -0.4rem;
}

.empty {
    color: var(--ink-dim);
}

/* footer */

footer {
    padding: 1.4rem clamp(1rem, 4vw, 2rem);
    border-top: 1px solid var(--rule);
    color: var(--ink-dim);
}

footer a + a {
    margin-left: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
    #countdown::after {
        animation: none;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }
}