/* Polaroid Audio — the whole look in one file.
   Everything here was measured off the original site, at 1400 px wide and on a
   390 px phone. The original is laid out on a 24-column grid (45 px outer
   gutters, 11 px between columns, rows 2.15% of the content width), so the
   desktop layout below uses the very same grid — that is why the numbers look
   odd. On a phone everything simply stacks. */

@font-face { font-family: 'Climate Crisis'; src: url(fonts/climate-crisis-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url(fonts/archivo-latin.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url(fonts/archivo-italic-latin.woff2) format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  --ink: #000;
  --paper: #fff;
  --button-ink: #fafafa;
  --display: 'Climate Crisis', 'Arial Black', Impact, sans-serif;
  --text: 'Archivo', Helvetica, Arial, sans-serif;
  --gutter: 4vw;                              /* side gutter: 56 px at 1400 wide */
  --gap: 11px;                                /* the grid's gap */
  --row: calc(0.0215 * min(2000px, 92vw));    /* one grid row: 27.7 px at 1400 (2.15% of the content width) */
  --hero-row: calc(0.0215 * min(2000px, 84vw)); /* the front page's top block sits in a narrower grid */
  --h1: calc(3.6vw + 1rem);                   /* page titles: 66.4 px at 1400 */
  --h4: calc(0.72vw + 1rem);                  /* small headings: 26.1 px at 1400 */
  --lead: calc(0.48vw + 1rem);                /* the big paragraphs on About / Playlists: 22.7 px */
  --entry-title: calc(2.16vw + 1rem);         /* journal list titles: 46.2 px at 1400 */
  --nav-title: calc(1.44vw + 1rem);           /* next / previous post titles: 36.2 px */
  --logo: calc(0.6vw + 1rem);                 /* 24.4 px at 1400 */
}
@media (max-width: 767px) {
  :root {
    --gutter: 6vw;                            /* 23.4 px on a 390 phone */
    --vmx: min(1vmax, 9px);                   /* on a phone the original scales type by the LONG side of the screen, capped at 900 px */
    --h1: calc(3.6 * var(--vmx) + 1rem);      /* 46.4 px on a 390 x 844 phone */
    --h4: calc(0.72 * var(--vmx) + 1rem);
    --lead: calc(0.48 * var(--vmx) + 1rem);
    --entry-title: calc(2.16 * var(--vmx) + 1rem);
    --nav-title: calc(1.44 * var(--vmx) + 1rem);
    --logo: 16px;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  font: 500 16px/1.5 var(--text);
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.056; margin: 0; overflow-wrap: anywhere; }
p { margin: 0 0 1rem; }
.skip-link { position: absolute; left: -999px; top: 0; }
.skip-link:focus { left: var(--gutter); background: var(--paper); padding: .5rem; z-index: 20; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- the grid every desktop page is drawn on ---- */
.fe { display: grid; grid-template-columns: calc(var(--gutter) - var(--gap)) repeat(24, minmax(0, 1fr)) calc(var(--gutter) - var(--gap)); column-gap: var(--gap); row-gap: var(--gap); grid-auto-rows: minmax(var(--row), auto); max-width: calc(2000px + 2 * var(--gutter)); margin: 0 auto; }
.fe .photo { position: relative; min-height: 0; overflow: hidden; background: #eee; }   /* the photo floats inside its block, so it never pushes the rows */
.fe .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- header ---- */
.site-header { position: relative; z-index: 11; display: flex; align-items: center; justify-content: space-between; padding: 2vw var(--gutter); background: var(--paper); }
.logo { font: 400 var(--logo)/1.2 var(--display); text-decoration: none; }
.site-nav { display: flex; gap: 2vw; }
.site-nav a { padding: .1em 0; text-decoration: none; white-space: nowrap; }
.site-nav a[aria-current="page"] { background-image: linear-gradient(currentColor, currentColor); background-repeat: repeat-x; background-size: 1px 1px; background-position: 0 calc(100% - .1em); }
.menu-button { display: none; position: relative; width: 47px; height: 37px; padding: 0; border: 0; background: none; cursor: pointer; }
.menu-button span { position: absolute; left: 6px; width: 35px; height: 1px; background: var(--ink); transition: transform .2s; }
.menu-button span:first-child { top: 12.5px; }
.menu-button span:last-child { top: 23.5px; }
@media (max-width: 767px) {
  .site-header { padding: var(--gutter); }
  .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: 23px;
    position: fixed; left: 0; right: 0; bottom: 0; top: calc(2 * var(--gutter) + 37px); z-index: 10; background: var(--paper);
    font-size: calc(2.04 * var(--vmx) + 1rem); line-height: 1; text-align: center;
  }
  body.menu-open .site-nav a { padding: 0; background: none; }
  body.menu-open .menu-button span:first-child { transform: translateY(5.5px) rotate(45deg); }
  body.menu-open .menu-button span:last-child { transform: translateY(-5.5px) rotate(-45deg); }
}

/* ---- buttons ---- */
.button {
  display: flex; align-items: center; justify-content: center; padding: 0 32px;
  background: var(--ink); color: var(--button-ink); text-decoration: none; text-transform: uppercase;
  border-radius: 300px; border: 0; font: inherit; line-height: normal; cursor: pointer;
}
.button:hover { opacity: .8; }

/* ---- the journal (list) ---- */
.journal { padding: var(--gutter); }
.entry { display: flex; align-items: center; margin-bottom: 30px; }
.entry-image { display: block; position: relative; flex: none; width: 40%; overflow: hidden; background: #eee; }
.entry-image::before { content: ''; display: block; height: 1px; padding-bottom: 100%; } /* the original's square is one pixel taller than wide */
.entry-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.entry-text { width: 54%; margin-left: 6%; }
.entry time { display: block; margin-bottom: 20px; }
.entry h2 { font-size: var(--entry-title); line-height: 1.2; margin: 0 0 46px; }
.entry h2 a { text-decoration: none; }
.entry p { margin: 0; }
.entry .more { display: block; width: fit-content; margin-top: 36px; line-height: 24px; text-decoration: none; }
.entry .more::after { content: ''; display: block; height: 1px; background: currentColor; }
.journal-empty { padding: 3rem var(--gutter); }
@media (max-width: 767px) {
  .journal { padding: 4vw var(--gutter); }
  .entry { display: block; }
  .entry-image { width: 100%; }
  .entry-text { width: auto; margin: 20px 0 0; }
  .entry time { margin-bottom: 8px; }
  .entry .more { margin-top: 23.8px; }
}

/* ---- one post ---- */
.post { padding: var(--gutter); }
.post-inner { max-width: 69vw; margin: 0 auto; }
.post time { display: block; margin-bottom: 32px; }
.post h1 { font-size: var(--h1); line-height: 1.2; margin: 0 0 50px; }
.post-body { margin-bottom: 3vw; }
.post-body p { margin: 16px 0; }
.post-body > :first-child { margin-top: 0; }
.post-body > :last-child { margin-bottom: 0; }
.post-body h2, .post-body h3 { margin: 2.5rem 0 1rem; line-height: 1.2; }
.post-body h2 { font-size: 2rem; }
.post-body h3 { font-size: 1.5rem; }
.post-body figure { margin: 0 0 2rem; }
.post-body figure img { width: 100%; }
.post-body figcaption { font-size: .875rem; margin-top: .5rem; }
.post-body blockquote { margin: 0 0 1rem; padding-left: 1.25rem; border-left: 2px solid var(--ink); font-size: 1.25rem; }
.post-body ul, .post-body ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.post-body iframe { max-width: 100%; margin: 1rem 0; }
.post-body hr { border: 0; border-top: 1px solid var(--ink); margin: 2rem 0; }
.post-nav { display: flex; padding: 3vw var(--gutter); }
.post-nav a { display: flex; align-items: center; width: 50%; text-decoration: none; }
.post-nav a.next { margin-left: auto; justify-content: flex-end; text-align: right; }
.post-nav strong { display: block; font: 400 var(--nav-title)/1 var(--display); overflow-wrap: anywhere; }
.post-nav svg { flex: none; width: 18px; height: 32px; }
.post-nav a.next svg { margin-left: 25px; }
.post-nav a.prev svg { margin-right: 25px; }
@media (max-width: 767px) {
  .post { padding: var(--gutter); }
  .post-inner { max-width: none; }
  .post time { margin-bottom: 19.2px; }
  .post h1 { margin-bottom: 67px; }
  .post-body { margin-bottom: 28.7px; }
  .post-nav { flex-direction: column; gap: 23px; padding: 11.7px var(--gutter); }
  .post-nav a { width: 100%; }
}

/* ---- About: title, two big paragraphs, a photo that runs off the right edge ---- */
.page-about { grid-template-rows: repeat(27, minmax(var(--row), auto)); }
.page-about h1 { grid-column: 3 / 15; grid-row: 2 / 5; align-self: center; text-align: center; font-size: var(--h1); }
.page-about .lead-block { grid-column: 4 / 13; grid-row: 6 / 21; text-align: center; }
.page-about .photo { grid-column: 16 / 27; grid-row: 2 / 26; }
.lead-block p { font-size: var(--lead); line-height: 1.5; margin: 0 0 16px; }
.lead-block > :last-child { margin-bottom: 0; }

/* ---- Playlists: photo on the right, running off the edge; title, paragraph, a button ---- */
.page-playlists { grid-template-rows: repeat(16, minmax(var(--row), auto)); }
.page-playlists .photo { grid-column: 14 / 27; grid-row: 1 / 17; }
.page-playlists h1 { grid-column: 2 / 12; grid-row: 3 / 7; text-align: center; font-size: var(--h1); }
.page-playlists .lead-block { grid-column: 2 / 12; grid-row: 8 / 12; text-align: center; }
.page-playlists .button { grid-column: 4 / 10; grid-row: 13 / 15; }

/* ---- Submissions: title, the form, a photo ---- */
.page-submissions { grid-template-rows: repeat(17, minmax(var(--row), auto)); }
.page-submissions h1 { grid-column: 2 / 14; grid-row: 2 / 5; align-self: center; text-align: center; font-size: var(--h1); }
.page-submissions .form-block { grid-column: 3 / 13; grid-row: 4 / 16; padding-top: 43px; }
.page-submissions .photo { grid-column: 15 / 26; grid-row: 2 / 16; }

/* ---- the form ---- */
.form { text-align: left; }
.form .field { margin-bottom: 20px; }
.form .caption { display: block; margin-bottom: 4px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form .row label { display: block; height: 27px; padding-top: 4px; font-size: .895em; line-height: 1.5; }
.form label.top { display: block; line-height: 24px; padding-bottom: 4px; }
.form .req { font-size: .895em; line-height: 1; opacity: .7; margin-left: .3em; }
.form .row .req { font-size: 1em; margin-left: .5em; }
.form input, .form textarea {
  display: block; width: 100%; height: 42px; padding: 8px 15px; margin: 0;
  border: 1px solid var(--ink); border-radius: 300px; background: transparent; color: inherit; font: inherit;
}
.form textarea { height: 100px; border-radius: 24px; resize: vertical; }
.form .button { display: inline-block; padding: 19.2px 32px; }
.form-note { font-size: .875rem; margin-top: 1rem; }

/* ---- the front page ---- */
.home-hero { padding: 0 var(--gutter) var(--gutter); }
.home-hero .fe { grid-auto-rows: minmax(var(--hero-row), auto); grid-template-rows: repeat(21, minmax(var(--hero-row), auto)); }
.home-hero h1 { grid-column: 3 / 25; grid-row: 1 / 4; text-align: center; font-size: var(--h1); }
.home-hero .photo { grid-column: 1 / 27; grid-row: 4 / 16; }
.home-hero .caption { grid-column: 3 / 25; grid-row: 17 / 21; margin: 0; text-align: center; font: 400 var(--h4)/1.171 var(--display); overflow-wrap: anywhere; }
.home-feature { grid-template-rows: repeat(19, minmax(var(--row), auto)); }
.home-feature .photo { grid-column: 2 / 14; grid-row: 2 / 19; }
.home-feature h2 { grid-column: 16 / 25; grid-row: 4 / 8; padding-top: 2px; text-align: center; font-size: var(--h1); }
.home-feature p { grid-column: 16 / 25; grid-row: 9 / 13; margin: 0; text-align: center; }
.home-feature .button { grid-column: 18 / 23; grid-row: 13 / 15; }

/* ---- footer ---- */
.site-footer { width: 100%; grid-template-rows: repeat(8, minmax(var(--row), auto)); }
.site-footer .name { grid-column: 2 / 17; grid-row: 4 / 7; text-align: center; font: 400 var(--h1)/1.056 var(--display); overflow-wrap: anywhere; }
.site-footer .col-location { grid-column: 17 / 21; grid-row: 3 / 6; text-align: center; }
.site-footer .col-contact { grid-column: 21 / 26; grid-row: 3 / 6; text-align: center; }
.site-footer h3 { font-size: var(--h4); line-height: 1.171; margin: 0 0 32px; }
.site-footer p { margin: 0; overflow-wrap: anywhere; }
.site-footer a { text-decoration: none; }

/* ---- on a phone the grids become one column ---- */
@media (max-width: 767px) {
  .fe { display: block; padding: 0 var(--gutter); }
  .fe .photo { height: auto; }
  .page-about, .page-submissions { padding-top: 70px; }
  .page-about { padding-bottom: 35px; }
  .page-about h1, .page-submissions h1 { margin-bottom: 11px; }
  .page-about .photo { margin-top: 45px; aspect-ratio: 343 / 479; }
  .page-submissions .form-block { padding: 17px 0; }
  .page-submissions .photo { margin-top: 11px; aspect-ratio: 343 / 479; }
  .page-playlists { padding: 0 0 35px; }
  .page-playlists h1 { margin: 0 var(--gutter) 21px; }
  .page-playlists .photo { aspect-ratio: 390 / 304; margin-bottom: 11px; }
  .page-playlists .lead-block { padding: 0 var(--gutter); }
  .page-playlists .lead-block p { margin-bottom: 11px; }
  .page-playlists .button { margin: 0 var(--gutter); height: 59px; }
  .home-hero { padding: 0 0 50.6px; }
  .home-hero h1 { margin-bottom: 11px; }
  .home-hero .photo { aspect-ratio: 312 / 199; margin-bottom: 11px; }
  .home-feature { padding: 70px var(--gutter) 35px; }
  .home-feature h2 { padding-top: 0; margin-bottom: 46px; }
  .home-feature p { margin-bottom: 11px; }
  .home-feature .button { height: 59px; margin-bottom: 46px; }
  .home-feature .photo { aspect-ratio: 343 / 304; }
  .site-footer { padding: 35px var(--gutter) 0; }
  .site-footer .name { padding: 0; margin-bottom: 46px; }
  .site-footer .col-location, .site-footer .col-contact { min-height: 94px; margin-bottom: 11px; }
  .site-footer .col-contact { margin-bottom: 0; }
}

/* ---- 404 ---- */
.not-found { padding: 4rem var(--gutter); text-align: center; }
.not-found h1 { font-size: var(--h1); margin-bottom: 2rem; }