/* _base.css — the STRUCTURE every look shares. build.mjs puts this in front of
   each look's own file (themes/<look>.css), so a look only has to say what it
   looks like: colours, type, decoration. No colour or typeface lives here.

   The markup, for reference (lib/site.mjs):
     header.site-header > a.logo > img · button.menu-button · nav.site-nav > a
     the journal:  h1.journal-title · section.strip > .film > .holes · .markings > span,span · .frames > article.entry* · .holes
                   article.entry > a.neg > img · .frame-no > time · h2 > a · .tag · p · a.more
     one post:     article.post > .print > img · .post-text > time · h1 · .tag · .post-body · nav.post-nav
     front page:   section.home-hero > h1 · .print · p.caption ;  section.home-strip > .film > … article.home-feature (same as .entry)
     the others:   section.page > div > h1 · .lead-block · form.form? · a.button? ;  .print
     footer.site-footer > .film > .holes · .markings > span,span · .holes */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; width: 100%; max-width: var(--max, 1400px); margin: 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; overflow-wrap: anywhere; }
p { margin: 0 0 1rem; }
:root { --pad: 4vw; --max: 1400px; }
@media (max-width: 767px) { :root { --pad: 6vw; } }
.skip-link { position: absolute; left: -999px; top: 0; }
.skip-link:focus { left: var(--pad); padding: .5rem; z-index: 20; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- header and the phone menu ---- */
.site-header { position: relative; z-index: 11; width: 100%; max-width: var(--max, 1400px); margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding: 1.6rem var(--pad) 1.2rem; }
.logo { display: block; text-decoration: none; }
.logo img { width: 150px; }
.site-nav { display: flex; gap: 1.5rem; }
.site-nav a { text-decoration: none; white-space: nowrap; }
.menu-button { display: none; position: relative; width: 44px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.menu-button span { position: absolute; left: 6px; width: 32px; height: 2px; background: currentColor; transition: transform .2s; }
.menu-button span:first-child { top: 12px; }
.menu-button span:last-child { top: 22px; }
@media (max-width: 767px) {
  .site-header { padding: 1.2rem var(--pad) .9rem; align-items: center; }
  .logo img { width: 104px; }
  .menu-button { display: block; }
  .site-nav { display: none; }
  body.menu-open { overflow: hidden; }
  body.menu-open .site-nav { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.6rem; position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 10; font-size: 1.1rem; }
  body.menu-open .menu-button, body.menu-open .logo { position: relative; z-index: 12; }
  body.menu-open .menu-button span:first-child { transform: translateY(5px) rotate(45deg); }
  body.menu-open .menu-button span:last-child { transform: translateY(-5px) rotate(-45deg); }
}

/* ---- the journal: a strip of frames ---- */
.journal-title { padding: 1rem var(--pad) 0; }
.strip { padding: 1rem var(--pad) 0; }
.holes { display: none; }
.markings { display: flex; justify-content: space-between; gap: 1rem; }
.markings span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
.entry, .home-feature { position: relative; min-width: 0; }
.neg { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.neg img { width: 100%; height: 100%; object-fit: cover; }
.frame-no time { display: inline; }
.entry h2 a { text-decoration: none; }
.entry p, .home-feature p { margin: 0 0 .7rem; }
.more { text-decoration: none; }
.journal-empty { padding: 3rem var(--pad); }
.legend { padding: .8rem 0 2.5rem; }
@media (max-width: 1000px) { .frames { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .frames { grid-template-columns: 1fr; gap: 1.6rem; } .markings span:last-child { display: none; } .strip { padding-top: .4rem; } }

/* ---- one post ---- */
.post { display: grid; grid-template-columns: minmax(260px, 44%) 1fr; gap: 2.5rem 3.5rem; padding: 1rem var(--pad) 3rem; align-items: start; }
.print { position: sticky; top: 1.5rem; min-width: 0; }
.print img { width: 100%; height: auto; }   /* the photo, whole — never cropped: tapping it opens the full-size file */
.post > .post-text:first-child { grid-column: 1 / -1; }   /* a review that opens with its own photo has no print beside it */
.post-text { min-width: 0; }
.post time { display: block; }
.post-body { max-width: 64ch; }
.post-body > :last-child { margin-bottom: 0; }
.post-body figure { margin: 0 0 1.6rem; }
.post-body figure img { width: 100%; }
.post-body ul, .post-body ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.post-body iframe { max-width: 100%; margin: .6rem 0 1.2rem; border: 0; }
.post-body hr { border: 0; margin: 2rem 0; }
.post-nav { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; padding-top: 1rem; }
.post-nav a { display: flex; align-items: center; gap: .5rem; text-decoration: none; max-width: 48%; }
.post-nav a.next { margin-left: auto; text-align: right; }
.post-nav svg { flex: none; width: 8px; height: 14px; }
@media (max-width: 900px) { .post { grid-template-columns: 1fr; gap: 1.6rem; } .print { position: static; max-width: 560px; } .post-nav a { max-width: 100%; } }

/* ---- the front page ---- */
.home-hero { padding: .6rem var(--pad) 0; }
.home-hero .print { position: static; }
.home-hero .print img { aspect-ratio: 3 / 2; }
.home-hero .caption { max-width: 60ch; margin: 1.2rem 0 0; }
.home-strip { padding: 2.4rem var(--pad) 3rem; }
.home-strip .frames { grid-template-columns: 1fr 1fr; gap: 2rem 24px; }
.home-feature .neg { aspect-ratio: 3 / 2; }
@media (max-width: 767px) { .home-strip .frames { grid-template-columns: 1fr; } .home-strip { padding: 1.6rem var(--pad) 2.4rem; } }

/* ---- About, Playlists, Submissions ---- */
.page { display: grid; grid-template-columns: 1fr minmax(260px, 42%); gap: 2rem 3.5rem; padding: 1rem var(--pad) 3.5rem; align-items: start; }
.page > div { min-width: 0; }
.page .lead-block { max-width: 60ch; }
.lead-block > :last-child { margin-bottom: 0; }
.page .print { position: static; }
.page .print img { aspect-ratio: auto; }
.page .button { margin-top: 1.6rem; }
@media (max-width: 900px) { .page { grid-template-columns: 1fr; } .page .print { max-width: 480px; } }

/* ---- buttons and the form ---- */
.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; font: inherit; }
.form { text-align: left; }
.form .field { margin-bottom: 1.1rem; }
.form .caption, .form label { display: block; margin-bottom: .35rem; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form input, .form textarea { display: block; width: 100%; margin: 0; font: inherit; font-size: max(1em, 16px); }   /* under 16px iOS zooms the page when a field is tapped */
.form textarea { min-height: 140px; resize: vertical; }
@media (max-width: 480px) { .form .row { grid-template-columns: 1fr; } }

/* ---- footer ---- */
.site-footer { width: 100%; max-width: var(--max, 1400px); margin: 0 auto; padding: 0 var(--pad) 2rem; }
.site-footer a { text-decoration: none; }
@media (max-width: 767px) { .site-footer .markings span { white-space: normal; line-height: 1.6; } .site-footer .markings span:last-child { display: none; } }

/* ---- 404 and the sign-in page ---- */
.not-found { padding: 2rem var(--pad) 4rem; max-width: 60ch; }

/* ---- the phone floor every look shares: links and buttons at least 44px tall (Apple's target size; WCAG
        2.5.8 asks 24), the phone menu's links big, no two-column post narrower than a hand. Type sizes are
        each look's own job (body 17px, small print 13px+, lines 1.5-1.65) — see its phone block. ---- */
@media (max-width: 767px) {
  .lead-block p, .home-hero .caption { line-height: 1.55; }
  .more, .post-nav a, .button { min-height: 44px; }
  .more { display: inline-flex; align-items: center; }
  .post-nav a { min-height: 44px; }
  .post-nav a, .post-nav a.next { max-width: 100%; }
  body.menu-open .site-nav a { font-size: max(1em, 20px); padding: .2em 0; }
}

/* THE FLYER WALL — show flyers stapled to a pole outside the venue. Newsprint,
   black ink, one red; photos xeroxed to black-and-white halftone; a headliner
   and a support line on every flyer; a date stamp; torn bottom edges. */

@font-face { font-family: 'Anton'; src: url(../fonts/anton-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url(../fonts/courier-prime-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url(../fonts/courier-prime-bold-latin.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --paper: #ede6d6; --sheet: #f9f5ea; --ink: #141414; --red: #e2371d;
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --text: 'Courier Prime', 'Courier New', monospace;
  --tear: polygon(0 0, 100% 0, 100% 100.00%, 98% 99.44%, 96% 100.00%, 94% 99.49%, 92% 100.00%, 90% 99.18%, 88% 100.00%, 86% 99.27%, 84% 100.00%, 82% 99.41%, 80% 100.00%, 78% 99.45%, 76% 100.00%, 74% 99.15%, 72% 100.00%, 70% 99.33%, 68% 100.00%, 66% 99.55%, 64% 100.00%, 62% 99.21%, 60% 100.00%, 58% 99.49%, 56% 100.00%, 54% 99.11%, 52% 100.00%, 50% 99.62%, 48% 100.00%, 46% 99.33%, 44% 100.00%, 42% 99.58%, 40% 100.00%, 38% 99.20%, 36% 100.00%, 34% 99.47%, 32% 100.00%, 30% 99.70%, 28% 100.00%, 26% 99.14%, 24% 100.00%, 22% 99.39%, 20% 100.00%, 18% 99.66%, 16% 100.00%, 14% 99.26%, 12% 100.00%, 10% 99.52%, 8% 100.00%, 6% 99.17%, 4% 100.00%, 2% 99.44%, 0% 100.00%);
}
body { background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); color: var(--ink); font: 400 15px/1.5 var(--text); }
h1, h2, h3, .site-nav a, .more, .button, .markings, .frame-no, .post time, .post-nav a, .form label, .form .caption { font-family: var(--display); font-weight: 400; text-transform: uppercase; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* the masthead: the logo big, a red tape line, the menu as tape labels */
.site-header { flex-direction: column; align-items: center; gap: 1rem; padding: 1.4rem var(--pad) 1.4rem; border-bottom: 3px solid var(--ink); text-align: center; }
.logo img { width: 190px; filter: invert(1); }
.site-nav { flex-wrap: wrap; justify-content: center; gap: .7rem; }
.site-nav a { background: var(--ink); color: var(--sheet); font-size: 1rem; letter-spacing: .1em; padding: .35em .9em .3em; }
.site-nav a:nth-child(odd) { transform: rotate(-1deg); } .site-nav a:nth-child(even) { transform: rotate(1.2deg); }
.site-nav a[aria-current="page"] { background: var(--red); }
/* the wall of flyers */
.journal-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.strip { padding-top: 1.6rem; }
.markings { font-size: .8rem; letter-spacing: .14em; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: .35rem 0; margin-bottom: 2.4rem; }
.frames { gap: 3.2rem 3rem; padding-bottom: 2.6rem; }
@media (min-width: 768px) { .frames, .home-strip .frames { grid-template-columns: 1fr 1fr; } }
.entry, .home-feature { background: var(--sheet); padding: 1.5rem 1.5rem 2.4rem; clip-path: var(--tear); transform: rotate(var(--r, -1.2deg)); }
.entry:nth-child(2n) { --r: 1.1deg; } .entry:nth-child(3n) { --r: .8deg; } .entry:nth-child(4n) { --r: -.9deg; }
.entry::before, .entry::after, .home-feature::before, .home-feature::after { content: ''; position: absolute; top: .55rem; width: 15px; height: 5px; background: #9a9a9a; border: 1px solid #5d5d5d; border-radius: 1px; z-index: 3; }
.entry::before, .home-feature::before { left: 1.1rem; transform: rotate(-9deg); }
.entry::after, .home-feature::after { right: 1.1rem; transform: rotate(7deg); }
.neg { background: #000; }
.neg img { filter: grayscale(1) contrast(1.5) brightness(1.04); }
.neg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #000 .9px, transparent 1.2px) 0 0/4px 4px; mix-blend-mode: multiply; opacity: .55; pointer-events: none; }
.print { position: relative; }
.print img { border: 2px solid var(--ink); }
.frame-no { position: absolute; z-index: 3; top: 1.1rem; right: 1.5rem; color: var(--red); border: 3px double var(--red); padding: .3em .6em .2em; font-size: .95rem; letter-spacing: .16em; transform: rotate(-7deg); background: rgba(249, 245, 234, .7); }
.entry h2, .home-feature h2 { font-size: clamp(1.9rem, 2.9vw, 2.9rem); line-height: .95; margin: 1.1rem 0 .35rem; letter-spacing: .01em; }
.tag { font-family: var(--display); text-transform: uppercase; font-size: 1.05rem; letter-spacing: .12em; line-height: 1.15; margin-bottom: .9rem; padding-bottom: .6rem; border-bottom: 2px solid var(--ink); }
.entry p, .home-feature p { margin: 0 0 1.1rem; }
.more, .button { display: inline-block; background: var(--ink); color: var(--sheet); font-size: .95rem; letter-spacing: .1em; padding: .35em .9em .3em; transform: rotate(-1deg); border: 0; }
.more:hover, .button:hover { background: var(--red); }
.journal-empty { font-family: var(--display); text-transform: uppercase; }
/* a flyer opened flat */
.post { background: var(--sheet); margin: 1.6rem var(--pad) 3.5rem; padding: 2rem clamp(1.5rem, 5vw, 4rem) 3rem; clip-path: var(--tear); transform: rotate(-.4deg); gap: 2rem 3rem; }
@media (min-width: 901px) { .post { grid-template-columns: minmax(260px, 40%) 1fr; } }
.post .print { position: relative; top: auto; }
.post time { font-size: 1rem; letter-spacing: .16em; color: var(--red); margin-bottom: .6rem; }
.post h1 { font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: .92; margin: 0 0 .5rem; }
.post .tag { font-size: clamp(1.05rem, 1.6vw, 1.5rem); max-width: 40ch; margin-bottom: 1.6rem; }
.post-body { font-size: 16.5px; line-height: 1.65; }
.post-body p { margin: 0 0 1.1rem; }
.post-body h2, .post-body h3 { margin: 2rem 0 .6rem; }
.post-body h2 { font-size: 1.8rem; } .post-body h3 { font-size: 1.3rem; }
.post-body blockquote { margin: 0 0 1.1rem; padding-left: 1rem; border-left: 3px solid var(--ink); }
.post-body figcaption { font-family: var(--display); text-transform: uppercase; font-size: .8rem; letter-spacing: .1em; margin-top: .4rem; }
.post-body hr { border-top: 2px dashed var(--ink); }
.post-nav { border-top: 2px dashed var(--ink); padding-top: 1.4rem; }
.post-nav a { background: var(--ink); color: var(--sheet); font-size: .95rem; letter-spacing: .1em; padding: .35em .9em .3em; }
.post-nav a:hover { background: var(--red); }
.post-nav svg { display: none; }
/* the front page and the other pages */
.home-hero h1 { font-size: clamp(2.8rem, 9vw, 7.5rem); line-height: .92; margin: .6rem 0 1rem; text-align: center; }
.home-hero .print img { aspect-ratio: 16 / 9; }
.home-hero .caption { max-width: 60ch; margin: 1.4rem auto 0; text-align: center; font-size: 1.05rem; }
.home-strip { padding-top: 2.4rem; }
.page h1 { font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: .92; margin: .6rem 0 1.2rem; }
.lead-block p { font-size: 1.1rem; line-height: 1.55; }
.page .print { position: relative; }
.form input, .form textarea { padding: .7rem .9rem; border: 2px solid var(--ink); border-radius: 0; background: var(--sheet); color: var(--ink); }
.form label, .form .caption { font-size: .95rem; letter-spacing: .12em; }
.form .req { font-family: var(--text); text-transform: none; letter-spacing: 0; opacity: .8; margin-left: .3em; }
.form .button { margin-top: .4rem; }
.not-found h1 { font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: 1rem; }

/* the tear-off strip at the bottom */
.site-footer { border-top: 3px solid var(--ink); padding-top: 1.2rem; }
.site-footer .markings { border: 0; margin: 0; font-size: .85rem; letter-spacing: .14em; padding: 0; }
.site-footer .markings span:first-child { background: var(--ink); color: var(--sheet); padding: .15em .5em; }

/* ---- on a phone (last, so it wins over the rules above) ---- */
@media (max-width: 767px) {
  .site-header { flex-direction: row; align-items: center; text-align: left; padding: 1rem var(--pad); }
  .logo img { width: 120px; }
  .menu-button { color: var(--ink); }
  body.menu-open .site-nav { background: var(--paper); gap: 1.2rem; }
  body.menu-open .site-nav a { transform: none; font-size: 1.3rem; }
}
@media (max-width: 767px) { body { font-size: 17px; } .markings { font-size: .85rem; } .frames { gap: 2.6rem; } .entry, .home-feature { padding: 1.2rem 1.1rem 2rem; } .entry h2 { font-size: 2rem; } .tag { font-size: 1rem; } .entry p, .home-feature p { font-size: 17px; line-height: 1.55; } .frame-no { font-size: .85rem; top: .9rem; right: 1.1rem; } .more, .button { font-size: 1.05rem; padding: .5em 1em .45em; } }
@media (max-width: 767px) { .post { margin: 1rem var(--pad) 2.5rem; padding: 1.4rem 1.1rem 2.2rem; } .post h1 { font-size: 2.4rem; } .post-body { font-size: 17px; line-height: 1.6; } .post .tag { font-size: 1rem; } }