/* The language of Ezra's paste-up posters: paper, printed label strips, prints and
   slips of paper pasted down over a fineliner drawing. The drawing and the home page's
   poster layout live in meander.css. */

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/ibm-plex-mono-latin-400-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

:root {
    color-scheme: light;
    --paper: #f6f4ef;
    --slip: #fcfbf8;
    --ink: #141312;
    --black: #121212;
    --on-black: #f2f1ee;
    --grey: #dcd9e4;
    --on-grey: #1c1b21;
    --hover: #3a3a3a;
    --hover-g: #c9c5d4;
    --shadow: 0 1px 1.5px rgba(0, 0, 0, .22);
    --lift: 0 14px 34px rgba(20, 19, 18, .2), 0 0 0 1px rgba(20, 19, 18, .08);
}

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

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font: 500 14px/1.3 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

button,
input,
textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
}

p, h1, h2, h3, h4, ul, ol, li, figure, dl, dd {
    margin: 0;
    padding: 0;
    font: inherit;
}

ul, ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

[hidden] {
    display: none !important;
}

img, video {
    display: block;
    max-width: 100%;
    height: auto;
}

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

::selection {
    background: var(--black);
    color: var(--on-black);
}

/* A printed strip. Long text wraps into a stack of separate strips, like cut labels. */
.strip {
    display: inline;
    padding: .2em .5em .28em;
    background: var(--black);
    color: var(--on-black);
    line-height: 1.95;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.strip::selection {
    background: var(--on-black);
    color: var(--black);
}

.strip.g {
    background: var(--grey);
    color: var(--on-grey);
    font-weight: 400;
}

.strip.g::selection {
    background: var(--on-grey);
    color: var(--grey);
}

.strip.big {
    font-size: 2.2em;
    padding: .08em .3em .14em;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.strip.huge {
    font-size: 5.4em;
    padding: 0 .16em .04em;
    line-height: 1.12;
    letter-spacing: -.03em;
}

a.strip:hover,
button.strip:hover,
a:hover > .strip:not(.g),
.strip.on {
    background: var(--hover);
}

a.strip.g:hover,
button.strip.g:hover,
a:hover > .strip.g {
    background: var(--hover-g);
}

/* the page you are on is printed in grey */
.strip[aria-current="page"] {
    background: var(--grey);
    color: var(--on-grey);
}

/* A slip of paper pasted down, for anything longer than a label. */
.slip {
    display: block;
    background: var(--slip);
    box-shadow: var(--shadow);
    padding: 1.05em 1.2em 1.2em;
    font-weight: 400;
    line-height: 1.6;
}

.slip p + p,
.slip p + ul,
.slip ul + p {
    margin-top: .8em;
}

.slip h3 {
    font-weight: 600;
    margin: 1.4em 0 .35em;
}

.slip h3:first-child {
    margin-top: 0;
}

.slip a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.slip a:hover {
    background: var(--black);
    color: var(--on-black);
    text-decoration: none;
}

.slip em {
    font-style: italic;
}

.slip ul li {
    position: relative;
    padding-left: 1.3em;
}

.slip ul li + li {
    margin-top: .55em;
}

/* a tiny cut strip for a bullet */
.slip ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .62em;
    width: .6em;
    height: .32em;
    background: var(--black);
}

.slip b,
.slip strong {
    font-weight: 600;
}

/* A print: a photo or screenshot pasted down. */
.shot {
    display: block;
    background: #111;
    box-shadow: var(--shadow);
}

.shot img,
.shot video {
    width: 100%;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

/* a print that moves: the work's own footage, looping without sound */
.shot video {
    display: block;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #111;
}

/* rows of strips that act as buttons or links */
.acts > * + * {
    margin-left: .45em;
}

/* Forms: the label is a strip, the field is a slip of paper with an inked edge. */
.field {
    display: block;
}

.field + .field {
    margin-top: .9em;
}

.field input,
.field textarea,
.ink-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-top: .35em;
    padding: .6em .7em;
    background: var(--slip);
    border: 1.5px solid var(--ink);
    border-radius: 0;
    font-weight: 400;
    line-height: 1.45;
    -webkit-appearance: none;
    appearance: none;
}

.field textarea {
    resize: vertical;
    min-height: 7.5em;
}

.field input::placeholder,
.field textarea::placeholder,
.ink-input::placeholder {
    color: #8c8a92;
}

.field input:focus,
.field textarea:focus,
.ink-input:focus {
    outline: none;
    box-shadow: 3px 3px 0 var(--ink);
}

/* hidden but still read aloud */
.sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 50;
}

.skip:focus {
    top: 12px;
}

@media print {
    .no-print {
        display: none !important;
    }
}

/* ================================================================ page layouts
   Pieces sit on the sheet with room between them, so the drawing shows around them. */

.board {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.piece {
    pointer-events: auto;
    transform: rotate(var(--r, 0deg));
}

.mail {
    user-select: text;
    -webkit-user-select: text;
}

/* ------------------------------------------------------------ header and footer */

.head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px 28px;
    flex-wrap: wrap;
    padding: calc(env(safe-area-inset-top) + 22px) calc(env(safe-area-inset-right) + 24px) 0 calc(env(safe-area-inset-left) + 24px);
}

.head .name {
    --r: -.4deg;
}

.head .nav {
    --r: .3deg;
    margin-top: .5em;
}

/* (on its own, as on the about page, the nav still sits at the right) */
.head .nav:only-child {
    margin-left: auto;
}

.nav .strip + .strip {
    margin-left: .3em;
}

.foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 40px calc(env(safe-area-inset-right) + 24px) calc(env(safe-area-inset-bottom) + 26px) calc(env(safe-area-inset-left) + 24px);
}

.foot .piece:first-child { --r: .3deg; }
.foot .piece:last-child { --r: -.4deg; }

/* ------------------------------------------------------------ inner pages */

.sheet {
    box-sizing: border-box;
    max-width: 1240px;
    margin: 0 auto;
    padding: 64px calc(env(safe-area-inset-right) + 24px) 40px calc(env(safe-area-inset-left) + 24px);
}

.sheet h2 {
    margin-bottom: .2em;
}

/* about */
.about {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 64px 36px;
    align-items: start;
}

.about .portrait { grid-column: 1 / 5; grid-row: 1 / 3; --r: -1.1deg; max-width: 440px; }
.about .lead { grid-column: 7 / 13; align-self: end; --r: .4deg; }
.about .lead h1 { margin-bottom: .15em; }
.about .bio { grid-column: 6 / 11; --r: -.3deg; max-width: 34em; }
.about .links { grid-column: 1 / 6; --r: .5deg; }
.about .contact { grid-column: 2 / 8; --r: -.35deg; }
.about .letter { grid-column: 9 / 13; --r: .6deg; margin-top: 90px; }
.about .portrait figcaption { margin-top: .5em; }

.links li + li { margin-top: .55em; }
.links .strip.g { display: inline-block; min-width: 5.5em; }

.contact h2,
.letter h2 { margin-bottom: .9em; }
.contact .send,
.letter .send { margin-top: 1em; }
.letter p { margin-bottom: .6em; }
.sent { margin-top: .6em; }
.newsletter-sink { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; }

/* cv */
.cvpage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}

.cvpage .cv-acts { --r: -.3deg; align-self: center; }

.cv {
    box-sizing: border-box;
    width: min(100%, 210mm);
    padding: 44px 48px 52px;
    --r: -.25deg;
    font-size: 13px;
    line-height: 1.55;
}

.cv-head { margin-bottom: 1.6em; }
.cv-head h1 { margin-bottom: .2em; }
.cv-head .strip.big { font-size: 2.4em; }
.cv-contact { margin-top: .6em; }
.cv-contact a { text-decoration: none; }
.cv-practice { font-weight: 600; font-size: 1.15em; margin-bottom: 1.6em; }
.cv section + section { margin-top: 1.8em; }
.cv h2 { margin-bottom: .75em; }
.cv-entry + .cv-entry { margin-top: 1em; }
.cv-entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cv-entry-head h3 { font-weight: 600; margin: 0; }
.cv-entry-head .date { flex-shrink: 0; white-space: nowrap; color: #58565d; }
.cv-entry p { margin-top: .2em; }
.cv-skills li + li { margin-top: .45em; }
.cv-skills b { font-weight: 600; }

@media print {
    @page { margin: 14mm 16mm; }
    html, body { background: #fff !important; }
    #ink, #agar, .head, .foot, .cv-acts, .skip { display: none !important; }
    .sheet { padding: 0 !important; max-width: none; }
    .cv { box-shadow: none !important; transform: none !important; width: 100%; padding: 0 !important; background: #fff !important; font-size: 9.5pt; }
    .strip { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* articles (project pages) */
.article {
    max-width: 1060px;
}

.article .title { --r: -.5deg; margin-bottom: 18px; }
.article .title .meta { margin-top: .5em; }
.article section { margin-top: 90px; }
.article section > h2 { --r: .4deg; display: inline-block; }
.article section > h2 .strip { font-size: 1.5em; }
.article .slip { max-width: 38em; margin-top: 34px; }
.article .shot { margin-top: 44px; }
.article .pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    margin-top: 44px;
}
.article .pair > * { margin-top: 0; }
.article .pair.flip > :first-child { order: 2; }
.article .pair.top { align-items: start; }
.article .logo { background: #0b0a0a; --r: -.4deg; }
.article .logo video { width: 100%; }
.article .film { --r: .3deg; }
.article .hero { --r: .35deg; margin-top: 40px; }
.article .embed { position: relative; aspect-ratio: 16 / 9; }
.article .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.article .end { margin-top: 90px; --r: -.3deg; }
.article .note { margin-top: .5em; }

@media (max-width: 760px) {
    .article .pair { grid-template-columns: 1fr; gap: 30px; }
    .article .pair.flip > :first-child { order: 0; }
}

/* 404 */
.lost {
    min-height: calc(100vh - 260px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 34px;
}

.lost .code { --r: -1deg; }
.lost .say { --r: .5deg; }
.lost .acts { --r: -.3deg; }

/* ------------------------------------------------------------ narrow screens */

@media (max-width: 760px) {
    .sheet { padding-top: 40px; }
    .about { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .about > * { grid-column: 1 / -1 !important; grid-row: auto !important; margin-top: 0 !important; }
    .about .portrait { width: 78%; }
    .about .lead { width: 94%; margin-left: 4%; }
    .about .links { margin-left: 6%; }
    .about .letter { width: 88%; margin-left: 6% !important; }
    .cv { padding: 26px 20px 30px; font-size: 12.5px; }
    .cv-entry-head { flex-direction: column; gap: 0; }
    .strip.huge { font-size: 3.6em; }
}

/* ------------------------------------------------------------ nooks: a hidden gallery */

/* Every tile is a print of its own seed (js/nooks.js), pasted in rows that never end.
   The footer's full stop and the ? key lead here. */
.page-nooks {
    --bg-color: #121212;
    --fg-color: #f2f1ee;
    --accent-color: #dcd9e4;
}
.nooks-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 30px;
    margin-top: 40px;
}
.nook-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    transform: rotate(var(--r, 0deg));
}
.nook-tile:nth-child(3n+1) { --r: -.6deg; }
.nook-tile:nth-child(3n+2) { --r: .4deg; }
.nook-tile:nth-child(4n) { --r: .8deg; }
.nook-tile canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.nook-tile .nook-seed {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: .2em .5em .28em;
    background: var(--grey);
    color: var(--on-grey);
    font-size: 12px;
    line-height: 1.4;
    pointer-events: none;
}
.door {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
@media (max-width: 900px) {
    .nooks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .nooks-grid { grid-template-columns: 1fr; gap: 26px; }
}