/* ---------------------------------------------------------------------------
   ronyefrat.work
   Recoded from the original Tumblr build. Layout, type and palette are
   reproduced 1:1; the motion layer is new.
   --------------------------------------------------------------------------- */

:root {
    --ink: #000000;
    --ink-soft: #6f766f;   /* the neutral, nudged toward the accent */
    --paper: #ffffff;
    --accent: #00CC00;   /* green screen green */
    --sidebar-w: 17%;
    --gutter: 3%;
    --meta-gap: 20px;
    --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Consolas where it exists (Windows, and Macs with Office); Inconsolata —
   drawn as a free counterpart to Consolas — everywhere else, so the page reads
   the same on every platform. One variable file per subset covers 400 to 700.
   Self-hosted: the site makes no third-party requests. */
@font-face {
    font-family: "Inconsolata";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/inconsolata-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inconsolata";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/inconsolata-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font: 400 13px/1.4 Consolas, Inconsolata, Menlo, Monaco, "Courier New", monospace;
    color: var(--ink);
    background: var(--paper);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.no-scroll { overflow: hidden; }

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

img { display: block; width: 100%; height: auto; border: 0; }

h1, h2, h3, h4, h5, h6 { font-size: 30px; margin: 0; color: var(--ink); }

ul { margin: 0; padding: 0; list-style: none; }

p { margin: 0 0 14px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Load bar --------------------------------------------------------------
   Replaces the original blocking spinner: a hairline of accent that runs
   across the top and dissolves once the first paint is done. */

.loadbar {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 100%;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: 10000;
    transition: transform 0.5s var(--ease-out), opacity 0.4s linear 0.25s;
    pointer-events: none;
}
.loadbar.run { transform: scaleX(0.7); }
.loadbar.done { transform: scaleX(1); opacity: 0; }

/* --- Header ---------------------------------------------------------------- */

#header {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-w);
    z-index: 100;
    font-size: 16px;
    font-weight: 700;
    text-transform: lowercase;
    transition: top 0.4s var(--ease-out), opacity 0.4s var(--ease-out), visibility 0.4s;
    backface-visibility: hidden;
}

#header > .wrap { padding: 70px 25px 70px 50px; }

.logo { margin-bottom: 30px; line-height: 1.1; font-size: 20px; }
.logo a {
    font-weight: 700;
    display: inline-block;
    color: var(--accent);
    transition: transform 0.4s var(--ease-out);
}
.logo a:hover { transform: translateX(3px); }

/* When the header is asking a question rather than stating the name it wraps.
   Three lines are reserved so the nav below sits in the same place from one
   question to the next; only the two longest run past it. */
.logo.is-question a { line-height: 1.25; }
.logo.is-question {
    min-height: 3.75em;     /* 3 lines at 1.25 */
    margin-bottom: 26px;
}

.navigation { margin-bottom: 30px; }
.navigation li { line-height: 1.4; }

/* Nav links behave like every other link: they take the accent. Nothing on
   this site is underlined. */
.nav-link { transition: color 0.3s linear; }
.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current="page"] { color: var(--accent); }

.social { margin-bottom: 30px; }
.social ul { display: flex; align-items: center; gap: 12px; }
.social a {
    display: flex;
    align-items: center;
    height: 22px;
    transition: transform 0.35s var(--ease-out), color 0.3s linear;
}
.social a:hover { transform: translateY(-3px); opacity: 0.65; }
.social svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.social a { color: var(--accent); }

.header-description {
    margin: 0;
    max-width: 90%;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
}
.header-description blockquote { margin: 0; }
.header-description p { margin: 0; }
.header-description figcaption {
    margin-top: 10px;
    color: var(--ink-soft);
}

.nav-toggle { display: none; }

/* the drawer is a mobile-only construct */
#drawer { display: none; }

/* --- Main / grid ----------------------------------------------------------- */

#main { margin-top: 70px; }
#main > .wrap { padding: 0 125px 0 21.5%; }
body.text-page #main > .wrap { padding-left: 20.5%; }

.grid-wrap { container-type: inline-size; }

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--gutter);
    /* The original theme left a 20px meta slot under every tile, which made the
       rows breathe a little wider than the columns. Kept. */
    row-gap: calc(3cqw + var(--meta-gap));
}

.tile {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;   /* keeps the screen blend inside the tile */
    background: #f2f2f2;
    aspect-ratio: 1 / 1;
    /* entrance state; cleared by .in */
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity 0.75s var(--ease-soft), transform 0.75s var(--ease-soft);
    transition-delay: var(--stagger, 0ms);
}
.tile.in { opacity: 1; transform: none; }

.tile img {
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-soft), filter 0.45s var(--ease-out);
    will-change: transform;
}

/* Hover: the image eases in and turns into a two-colour print — the accent in
   the shadows, white in the highlights, the way a duotone works.

   Desaturating the photograph and screening a flat accent over it is exactly
   that mapping: screen gives 1-(1-a)(1-b), so with #00CC00 over grey L the
   result runs from the accent itself at L=0 to white at L=1. No second copy of
   the image and no SVG filter — and unlike filter: url(), both grayscale() and
   opacity interpolate, so it cross-fades instead of snapping. */
.tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.45s var(--ease-out);
    pointer-events: none;
}
.tile:hover img,
.tile:focus-visible img {
    transform: scale(1.045);
    filter: grayscale(1);
}
.tile:hover::after,
.tile:focus-visible::after { opacity: 1; }

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

/* --- Text pages ------------------------------------------------------------
   Metrics taken from the original: 800px column, 30px headings at normal
   weight, 13px/1.4 body, bold un-underlined links. */

.page {
    max-width: 800px;
    padding-bottom: 90px;
}
.page h1 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    margin: 0 0 20px;
    text-transform: lowercase;
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    animation: rise 0.7s var(--ease-soft) 0.05s forwards;
}
.page .page-body {
    font-size: 13px;
    line-height: 1.4;
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    animation: rise 0.7s var(--ease-soft) 0.18s forwards;
}
.page .page-body h2 {
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 10px;
}
.page .page-body p { margin: 0 0 20px; }
.page .page-body p:last-child { margin-bottom: 0; }
.page .page-body a,
.project .project-text a {
    font-weight: 700;
    transition: color 0.25s linear;
}
.page .page-body a:hover,
.project .project-text a:hover { color: var(--accent); }
.page .page-body iframe {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    display: block;
    margin: 20px 0;
}

@keyframes rise { to { opacity: 1; transform: none; } }

/* --- Permalink (project) page ---------------------------------------------- */

.project { padding-bottom: 90px; }
.project .project-text {
    max-width: 800px;   /* the same measure the text pages use */
    font-size: 13px;
    line-height: 1.4;
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    animation: rise 0.8s var(--ease-soft) 0.14s forwards;
}
.project h1,
.project .subtitle {
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    margin: 0 0 10px;
}
.project h1 {
    color: var(--accent);
    text-transform: lowercase;
}

/* An embedded player stands in for the link that used to point at it. */
.embed {
    position: relative;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    margin: 0 0 20px;
    background: #000;
}
.embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.project .project-text p { margin: 0 0 20px; }

/* --- Mobile ---------------------------------------------------------------- */

@media (max-width: 740px) {
    #header {
        width: 100%;
        height: 50px;
        padding: 10px 0;
        background: var(--paper);
        z-index: 9999;
        transition: transform 0.4s var(--ease-out);
    }
    /* the bar retracts as you read down, and returns the moment you scroll up */
    body.nav-hidden #header { transform: translateY(-100%); }

    #header > .wrap {
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 30px;
    }
    .logo { margin: 0; line-height: 30px; }
    /* a question is longer than a name: shrink it and hold it to two lines
       so the bar keeps its height */
    .logo.is-question {
        flex: 1;
        min-width: 0;
        padding-right: 14px;
        /* the desktop two-line reservation must not apply inside the 50px bar */
        min-height: 0;
        margin: 0;
    }
    .logo.is-question a {
        font-size: 12px;
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    #header .navigation,
    #header .social,
    #header .header-description { display: none; }

    .nav-toggle {
        display: block;
        background: none;
        border: 0;
        padding: 6px 0 6px 12px;
        cursor: pointer;
        color: var(--ink);
        line-height: 0;
    }
    .nav-toggle span {
        display: block;
        width: 20px; height: 2px;
        background: currentColor;
        margin: 4px 0;
        transition: transform 0.35s var(--ease-out), opacity 0.25s linear;
    }
    body.drawer-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    body.drawer-open .nav-toggle span:nth-child(2) { opacity: 0; }
    body.drawer-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    #drawer {
        display: block;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: var(--paper);
        z-index: 9000;
        padding: 65px 15px 30px;
        transform: translateX(-100%);
        transition: transform 0.4s var(--ease-out);
        overflow-y: auto;
        font-size: 16px;
        font-weight: 700;
        text-transform: lowercase;
    }
    body.drawer-open #drawer { transform: none; }
    #drawer li { line-height: 1.6; }
    /* drawer links cascade in behind the panel */
    #drawer .navigation li,
    #drawer .social,
    #drawer .header-description {
        opacity: 0;
        transform: translate3d(-14px, 0, 0);
        transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
    }
    body.drawer-open #drawer .navigation li,
    body.drawer-open #drawer .social,
    body.drawer-open #drawer .header-description { opacity: 1; transform: none; }
    #drawer .navigation li:nth-child(1) { transition-delay: 0.10s; }
    #drawer .navigation li:nth-child(2) { transition-delay: 0.15s; }
    #drawer .navigation li:nth-child(3) { transition-delay: 0.20s; }
    #drawer .navigation li:nth-child(4) { transition-delay: 0.25s; }
    #drawer .navigation li:nth-child(5) { transition-delay: 0.30s; }
    #drawer .navigation li:nth-child(6) { transition-delay: 0.35s; }
    #drawer .social { transition-delay: 0.40s; margin-top: 24px; }
    #drawer .header-description { transition-delay: 0.45s; margin-top: 24px; display: block; }
    #drawer .social svg { width: 18px; height: 18px; }

    #main { margin-top: 70px; }
    #main > .wrap { padding: 0 15px; }
    .grid { row-gap: calc(3cqw + 10px); }
    /* no hover treatment on touch — the duotone is pointer-only */
    .tile:hover img { transform: none; filter: none; }
    .tile:hover::after { opacity: 0; }

    .page { max-width: 100%; }
    body.text-page #main > .wrap { padding-left: 15px; }
    .page .page-body h2, .project h1, .project .subtitle { font-size: 22px; }

}

/* --- Reduced motion -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0ms !important;
    }
    .tile { opacity: 1; transform: none; }
    .page h1, .page .page-body,
    .project .project-media, .project .project-text { opacity: 1; transform: none; }
    .loadbar { display: none; }
}