/* ==========================================================================
   hAIku - start page

   One edition, said plainly: what the project is, a real work with a real poem
   from it, and one thing to do. Earlier editions live in the menu.

   Same language as the edition page: a light graphite wall, works hung without
   frames, labels in a grotesque set flush left, the poem as the only serif
   voice. Nothing is a heavy block - actions are outlines and rules.

   The page scrolls. data-layout (set in index.html) only tunes proportions:
     phone - one column · wide - text beside the work · tall - one column, larger
   ========================================================================== */

:root {
    color-scheme: dark;
    --wall: #343433;
    --wall-lit: #424241;
    --wall-deep: #2a2a29;
    --panel: #2b2b2a;
    --line: rgba(255, 255, 255, .11);
    --line-2: rgba(255, 255, 255, .36);
    --ink: #f5f2ec;
    --ink-2: #c6c1b7;
    --ink-3: #ada8a0;
    --sand: #dcc297;
    --on-sand: #17130c;
    --serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --sans: 'Instrument Sans', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    --shadow-art: 0 .1rem .3rem rgba(0, 0, 0, .22), 0 1.1rem 2.2rem -.6rem rgba(0, 0, 0, .42), 0 2.8rem 5rem -1.6rem rgba(0, 0, 0, .38);
    --ease: cubic-bezier(.2, .7, .2, 1);
    /* icons: drawn once, in one stroke weight (the same set as css/edition.css) */
    --ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 12h17.5M14 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E");
    --ico-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
    --gutter: 1.25rem;
    /* a very fine grain: keeps the dark gradients from banding on large screens */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
html[data-layout="wide"] { font-size: max(14px, min(calc(100vw / 90), calc(100vh / 56))); --gutter: 3.2rem; }
html[data-layout="tall"] { font-size: max(16px, min(calc(100vw / 67.5), calc(100vh / 120))); --gutter: 2.8rem; }

body {
    color: var(--ink);
    font-family: var(--sans); font-weight: 400; line-height: 1.55;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    background: var(--wall);
}

[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
.ico, i.arrow {
    display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -.22em;
    background-color: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
i.arrow { --ico: var(--ico-arrow); transition: transform .3s var(--ease); }
.ico-cross { --ico: var(--ico-cross); }
::selection { background: var(--sand); color: var(--on-sand); }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }

.page {
    min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
    /* --cookie-room: set by start.js while the cookie notice is shown, so it never covers the footer */
    padding: 0 var(--gutter) var(--cookie-room, 0px);
    background: var(--grain), radial-gradient(120% 60rem at 62% 0, var(--wall-lit) 0%, var(--wall) 52%, var(--wall-deep) 100%);
}

.eyebrow { font-size: max(.72rem, 11px); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sand); }

/* ----------------------------------------------------------------- header */

.top { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; animation: rise .8s var(--ease) both; }
.logo-link { display: inline-flex; }
.logo { height: 1.8rem; width: auto; }
.top-nav { display: flex; align-items: center; gap: 2rem; }
.nav-link { font-size: .92rem; color: var(--ink-2); text-decoration: none; padding: .45rem 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.nav-link:hover { color: var(--ink); border-color: var(--line-2); }
#menu-open { border-bottom-color: var(--line); }

@keyframes rise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ start */

/* On top, quietly: what the project is and the way in. Below it, the thing itself:
   a work with its label directly underneath and, beside it, the poem someone's words became. */
.start { display: flex; flex-direction: column; gap: 2.1rem; padding: 1.2rem 0 3.5rem; }

.intro { display: flex; flex-direction: column; align-items: flex-start; animation: rise .9s var(--ease) .05s both; }
h1 { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.lede { margin-top: .9rem; font-size: 1rem; line-height: 1.5; color: var(--ink-2); max-width: 62ch; text-wrap: balance; }
.intro .btn { margin-top: 1.3rem; }

.btn {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6rem;
    min-height: 3.4rem; padding: .8rem 1.3rem .8rem 1.5rem;
    font-size: 1.02rem; font-weight: 500; line-height: 1.2; text-decoration: none;
    border: 1px solid transparent; border-radius: 2px;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-primary { color: var(--sand); border-color: var(--sand); }
.btn-primary:active { background: var(--sand); color: var(--on-sand); }
@media (hover: hover) {
    .btn-primary:hover { background: var(--sand); color: var(--on-sand); }
    .btn:hover .arrow { transform: translateX(.3rem); }
}

/* the example: the work, its label directly underneath, then the words and the poem */
.example { display: flex; flex-direction: column; min-width: 0; animation: rise 1s var(--ease) .15s both; }
.hang { min-width: 0; max-width: 100%; }
.hang a { display: block; }
.hang img {
    max-width: 100%; max-height: 78vh; width: auto; height: auto;
    box-shadow: var(--shadow-art);
    transition: opacity .8s var(--ease), transform .7s var(--ease);
}
.hang img.is-loading { opacity: 0; }
@media (hover: hover) { .hang a:hover img { transform: translateY(-.3rem); } }

/* the wall label, directly under the work, as in the gallery */
.label { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; max-width: 34rem; margin-top: 1.1rem; }
.label::before { content: ''; width: 2.4rem; height: 1px; background: var(--ink-2); margin-bottom: .8rem; }
.label:empty::before { display: none; }
.label-artist { font-size: 1.05rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.label-title { font-size: 1.05rem; color: var(--ink); line-height: 1.3; }
.label-title i { font-style: italic; }
.label-detail { font-size: .82rem; color: var(--ink-3); line-height: 1.45; margin-top: .3rem; }

/* beside the work: whose words these were, then the poem itself, the largest thing on the page */
.reading { display: flex; flex-direction: column; gap: 1.8rem; min-width: 0; max-width: 100%; margin-top: 2.2rem; }
.origin { font-size: 1.02rem; line-height: 1.5; color: var(--ink-2); max-width: 30em; text-wrap: pretty; }
.origin b { font-weight: 500; color: var(--sand); }
/* Verse, not a paragraph: open leading, a little air between letters and words (the italic
   is narrow), a capital at the start of every line (verse.js). */
.poem { font-family: var(--serif); font-style: italic; font-size: 2rem; line-height: 1.42; letter-spacing: .008em; word-spacing: .05em; color: var(--ink); }
.poem .line { display: block; white-space: nowrap; }
/* a line that must turn does so in two even parts, the second one indented */
.poem.wraps .line { white-space: normal; text-wrap: balance; padding-left: 1.4em; text-indent: -1.4em; }
/* the words someone gave, wherever the poem uses them */
.poem mark.hit { background: none; color: var(--sand); }
.hang, .label, .reading { transition: opacity .8s var(--ease); }
.example.is-swapping .hang, .example.is-swapping .label, .example.is-swapping .reading { opacity: 0; }

/* wide: the sentence and the way in share one band; the work hangs left, the poem beside it */
/* --art-h: as tall as the window allows with the label still in view, never more than 31rem */
html[data-layout="wide"] .start { --art-h: clamp(16rem, calc(100vh - 24rem), 31rem); gap: 2.8rem; padding: .6rem 0 4.5rem; }
html[data-layout="wide"] .intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 3rem; }
html[data-layout="wide"] h1 { grid-column: 1; font-size: 2.5rem; }
html[data-layout="wide"] .lede { grid-column: 1; font-size: 1.05rem; }
html[data-layout="wide"] .intro .btn { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
/* The first column is exactly as wide as the work (at most a little under half the page), so
   the poem always starts right beside it, whatever the work's proportions. The label takes
   that width and never widens it. The stage keeps room for the tallest work, so nothing
   below moves when the work changes.
   The poem hangs as works do, on the centre line of the work beside it: the block has no
   height of its own (it cannot stretch the row and push the label away) and spills evenly
   above and below that line. */
html[data-layout="wide"] .example {
    display: grid; grid-template-columns: fit-content(48%) minmax(0, 1fr); grid-template-rows: auto 1fr;
    column-gap: 3.5rem; align-items: start; min-height: calc(var(--art-h) + 6.8rem);
}
html[data-layout="wide"] .hang { grid-column: 1; grid-row: 1; }
html[data-layout="wide"] .hang img { max-height: var(--art-h); }
html[data-layout="wide"] .label { grid-column: 1; grid-row: 2; width: 0; min-width: 100%; }
html[data-layout="wide"] .reading { grid-column: 2; grid-row: 1; align-self: center; height: 0; justify-content: center; margin-top: 0; gap: 2.2rem; }
html[data-layout="wide"] .origin { font-size: 1.08rem; }
/* the longest line stops short of the page edge: the poem keeps a ragged right margin */
html[data-layout="wide"] .poem { font-size: 2.75rem; --verse-measure: .94; }

html[data-layout="tall"] .top { padding: 3rem 0 2rem; }
html[data-layout="tall"] .logo { height: 2.4rem; }
html[data-layout="tall"] .nav-link { font-size: 1.1rem; }
html[data-layout="tall"] .eyebrow { font-size: .85rem; }
html[data-layout="tall"] .start { gap: 3.6rem; padding: 2rem 0 5rem; }
html[data-layout="tall"] h1 { font-size: 3.6rem; }
html[data-layout="tall"] .lede { font-size: 1.45rem; }
html[data-layout="tall"] .btn { min-height: 4.4rem; font-size: 1.3rem; padding: 1rem 1.7rem 1rem 2rem; }
html[data-layout="tall"] .intro .btn { margin-top: 2.2rem; }
html[data-layout="tall"] .hang img { max-height: min(46vh, 44rem); }
html[data-layout="tall"] .label { margin-top: 1.5rem; }
html[data-layout="tall"] .reading { margin-top: 3rem; gap: 2.4rem; }
html[data-layout="tall"] .label-artist, html[data-layout="tall"] .label-title { font-size: 1.4rem; }
html[data-layout="tall"] .label-detail { font-size: 1.05rem; }
html[data-layout="tall"] .origin { font-size: 1.4rem; }
html[data-layout="tall"] .poem { font-size: 3.4rem; }

/* ------------------------------------------------------------------ about */

.about-block { display: flex; flex-direction: column; gap: 3rem; padding: 3.5rem 0 4rem; border-top: 1px solid var(--line); }
.about-copy h2 { font-family: var(--serif); font-weight: 400; font-size: 2.5rem; line-height: 1.05; letter-spacing: -.01em; margin: 0 0 1.5rem; }
.about-copy p:not(.eyebrow) { color: var(--ink-2); max-width: 36em; margin-bottom: 1rem; font-size: 1.04rem; }

.steps { list-style: none; display: flex; flex-direction: column; }
.steps li { display: flex; gap: 1.5rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.step-n { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; color: var(--sand); min-width: 2.2rem; }
.steps h3 { font-family: var(--serif); font-weight: 400; font-size: 1.55rem; line-height: 1.1; }
.steps p { color: var(--ink-2); margin-top: .4rem; font-size: .98rem; max-width: 26em; }

html[data-layout="wide"] .about-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 6rem; padding: 5.5rem 0 6rem; align-items: start; }
html[data-layout="wide"] .about-copy h2 { font-size: 3.4rem; }
html[data-layout="wide"] .steps { margin-top: 2.1rem; }
html[data-layout="tall"] .about-block { gap: 4rem; padding: 5rem 0 6rem; }
html[data-layout="tall"] .about-copy h2 { font-size: 4rem; }
html[data-layout="tall"] .about-copy p:not(.eyebrow) { font-size: 1.4rem; }
html[data-layout="tall"] .steps h3 { font-size: 2.1rem; }
html[data-layout="tall"] .steps p { font-size: 1.25rem; }
html[data-layout="tall"] .step-n { font-size: 2.1rem; min-width: 3.2rem; }

/* ----------------------------------------------------------------- footer */

.bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.4rem 2rem; padding: 2rem 0 2.2rem; border-top: 1px solid var(--line); margin-top: auto; }
.partners { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 1.2rem 2.6rem; }
.partners img { width: auto; opacity: .82; transition: opacity .2s; }
.partners a:hover img { opacity: 1; }
.logo-mnw { height: 1.5rem; }
.logo-lndm { height: 2.6rem; }
.by { font-size: .84rem; color: var(--ink-3); text-decoration: none; transition: color .2s; }
.by:hover { color: var(--ink); }
html[data-layout="tall"] .logo-mnw { height: 1.9rem; }
html[data-layout="tall"] .logo-lndm { height: 3.2rem; }
html[data-layout="tall"] .by { font-size: 1.05rem; }

/* ------------------------------------------------------------------- menu */

.sheet-wrap { position: fixed; inset: 0; z-index: 20; background: rgba(20, 20, 20, .6); display: flex; justify-content: flex-end; animation: fade .3s both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet { position: relative; width: min(100%, 30rem); height: 100%; overflow-y: auto; background: var(--grain), var(--panel); border-left: 1px solid var(--line); padding: 5rem 2.4rem 3rem; animation: sheet-in .45s var(--ease) both; }
@keyframes sheet-in { from { transform: translateX(2rem); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-close { position: absolute; top: 1.1rem; right: 1.3rem; width: 3rem; height: 3rem; display: grid; place-items: center; font-size: 1.5rem; color: var(--ink-2); }
.sheet-close:hover { color: var(--ink); }
.sheet .eyebrow { margin-top: 2.4rem; }
.sheet .eyebrow:first-of-type { margin-top: 0; }

.menu-list { list-style: none; display: flex; flex-direction: column; margin-top: .5rem; }
.menu-list a {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1.2rem;
    padding: 1rem 0; border-bottom: 1px solid var(--line);
    color: var(--ink); text-decoration: none; font-size: 1.08rem; transition: color .2s, border-color .2s;
}
.menu-list a:hover { color: var(--sand); border-color: var(--sand); }
.menu-list a:hover .arrow { transform: translateX(.3rem); }
.menu-list small { display: block; font-size: .8rem; color: var(--ink-3); margin-top: .15rem; }
html[data-layout="tall"] .sheet { width: min(100%, 44rem); padding: 6rem 3rem 3rem; }
html[data-layout="tall"] .menu-list a { font-size: 1.5rem; padding: 1.4rem 0; }
html[data-layout="tall"] .menu-list small { font-size: 1.05rem; }

/* ----------------------------------------------------------------- cookie */

.cookie {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 15; margin: 0 auto; max-width: 26rem;
    display: flex; align-items: center; gap: 1rem; padding: .7rem .8rem .7rem 1.2rem;
    background: var(--panel); border: 1px solid var(--line-2); font-size: .86rem; color: var(--ink-2);
    animation: rise .5s var(--ease) both;
}
.cookie p { flex: 1; }
.cookie button { flex: none; padding: .45rem 1rem; font-size: .88rem; font-weight: 500; color: var(--sand); border: 1px solid var(--sand); border-radius: 2px; }
.cookie button:hover { background: var(--sand); color: var(--on-sand); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}