/* dekai.me home — one quiet column on warm paper, measured off yuvich.com:
   a 24rem reading column, a 34rem stage for the hero and the cabinet,
   Instrument Sans at 15/1.55, and one purple for the things that move. */

:root {
    --bg: #fafaf9;
    --ink: #121214;
    --text: #636268;
    --mute: #7d7c83;
    --rule: #e6e5e2;
    --link: #cfcdd3;
    --accent: #6b46c1;

    --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --col: 24rem;
    --wide: 34rem;
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--bg);
}

body {
    margin: 0;
    color: var(--text);
    font: 480 15px/1.55 var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color .15s;
}

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

em {
    font-style: normal;
    color: var(--ink);
}

p {
    margin: 0 0 16px;
}

/* sections are spaced by their own margins (36 / 64 / 128), never by a
   trailing paragraph's */
.page p:last-child {
    margin-bottom: 0;
}

/* Nav: the current page underlined with a squiggle; hovering draws one. */

.site-nav {
    display: flex;
    justify-content: center;
    gap: 22px;
    height: 72px;
    padding-top: 36px;
}

.site-nav a {
    position: relative;
    height: 36px;
    color: var(--mute);
    text-decoration: none;
    transition: color .15s;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
    color: var(--ink);
}

.squiggle {
    position: absolute;
    left: 0;
    top: 29px;
    overflow: visible;
}

/* a square wave on a 3px grid, drawn in pixels like everything else */
.squiggle path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
    stroke-linecap: square;
    stroke-linejoin: miter;
    shape-rendering: crispEdges;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .35s ease;
}

.site-nav a:hover .squiggle path,
.site-nav a[aria-current="page"] .squiggle path {
    stroke-dashoffset: 0;
}

/* Column and stage */

.page {
    width: var(--col);
    margin: 0 auto;
    padding-top: 28px;
}

.wide {
    width: var(--wide);
    margin-left: calc((var(--col) - var(--wide)) / 2);
}

/* The bay in pixels (pixelphoto.js): the photo ordered-dithered into the
   pencil greys, the pencil showing through under the pointer. */

.pixel-photo {
    position: relative;
    height: 337px;
    overflow: hidden;
    cursor: crosshair;
}

.pixel-photo canvas {
    display: block;
    margin: 0 auto;
    image-rendering: pixelated;
}

.pixel-photo .fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 72%;
    mix-blend-mode: multiply;
}

.pixel-photo.live .fallback {
    display: none;
}

/* The bay in glyphs (ascii.js), the pencil showing through under the pointer. */

.ascii {
    position: relative;
    height: 337px;
    overflow: hidden;
    color: var(--ink);
    cursor: crosshair;
    --ascii-font: "Fragment Mono";
    --ascii-pulse: 107, 70, 193;
    --ascii-floor: .16;
    --sketch-blend: multiply;
    --sketch-filter: none;
    /* the board fades the band out at both sides and down through the water */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, #000 66%, transparent 97%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, #000 66%, transparent 97%);
    mask-composite: intersect;
}

.ascii canvas {
    display: block;
}

.ascii .fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 72%;
    mix-blend-mode: multiply;
}

.ascii.live .fallback {
    display: none;
}

/* The marble run (marble.js): a transparent WebGL canvas in the hero's
   frame, its edges fading into the page like the bay's used to. */

.marble {
    position: relative;
    height: 337px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 86%, transparent);
    mask-composite: intersect;
    cursor: grab;
}

/* drawn in pixels (Now), its edges dither away in pixel.js instead: a soft
   mask would blur the pixels */
.marble[data-marble="pixel"] {
    -webkit-mask-image: none;
    mask-image: none;
}

.bay-block {
    margin-top: 64px;
}

.caption {
    margin: 6px 0 0;
    text-align: center;
    font-size: 13px;
    line-height: 20.15px;
    color: var(--mute);
}

.prose {
    margin-top: 36px;
}

.name {
    position: relative;
    display: inline-block;
    color: var(--accent);
}

.name svg {
    position: absolute;
    left: 0;
    top: 21px;
    opacity: .55;
    pointer-events: none;
}

.name path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.4;
    stroke-linecap: square;
    stroke-linejoin: miter;
    shape-rendering: crispEdges;
}

/* The cabinet: a pencil drawing whose screen is a hole. The game canvas sits
   underneath it, so the drawn bezel frames the glass at every size. */

.arcade-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 64px;
}

.arcade {
    display: flex;
    justify-content: center;
    margin: 0;
}

/* the cabinet: a WebGL canvas drawn as pixel art, with the CSS3D layer on
   top holding the screen (arcade.js) */
.arcade-stage {
    position: relative;
    width: min(420px, calc(100vw - 32px));
}

.arcade-stage > canvas {
    display: block;
}

.arcade-css {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* the screen: the console's 120 x 96 canvas at 4x, with a scanline under
   every pixel row and the tube's dark corners */
.crt {
    position: relative;
    width: 480px;
    height: 384px;
    overflow: hidden;
    border-radius: 26px / 22px;
    background: #0b0b0d;
    pointer-events: auto;
}

.crt::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0, 0, 0, .3) 3px 4px),
        radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .5) 100%);
}

.arcade-screen {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    cursor: pointer;
    touch-action: none;
    image-rendering: pixelated;
}

.arcade.is-playing .arcade-screen {
    cursor: crosshair;
}

/* without WebGL: just the screen, in a plain bezel */
.arcade:not(.is-3d) .crt {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    border: 14px solid #1c1c20;
}

.arcade-cap {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    margin: 14px 0 0;
}

.arcade-cap b {
    font-weight: 480;
    color: var(--ink);
}

.arcade-cap span {
    font-size: 13px;
    line-height: 20.15px;
    color: var(--mute);
}

/* Footer: the weather over the bay, and the time there. */

.site-foot .wx {
    margin-right: 7px;
    vertical-align: -2px;
    fill: var(--text);
    shape-rendering: crispEdges;
}

.site-foot .wx[data-kind="sun"] {
    fill: var(--accent);
}


.site-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: var(--col);
    margin: 128px auto 0;
    padding-bottom: 49px;
    font-size: 13px;
    line-height: 20.15px;
    color: var(--mute);
}

.ticker {
    font: 12px/18.6px var(--mono);
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    :root {
        --col: calc(100vw - 32px);
        --wide: calc(100vw - 32px);
    }

    .ascii,
    .marble {
        height: 240px;
    }

    .arcade-cap span.keys {
        display: none;
    }
}