/* ==========================================================================
   phoenixofdreams.com
   Shared stylesheet. Every page links to this one file.

   Change a color or a font here and it changes everywhere on the site.
   The values you are most likely to want to change are in the block
   directly below, between the two rows of equals signs.
   ========================================================================== */

:root {

  /* ---- COLORS (edit these to recolor the whole site) ---- */
  --paper:  #E3E5E2;   /* page background, cool grey with a green cast */
  --ink:    #1A1D1C;   /* body text */
  --iron:   #4A5350;   /* secondary text, rules, captions */
  --ember:  #A33A22;   /* the one accent. links, the plumb line, markers */
  --panel:  #D7DAD6;   /* slightly darker block background */

  /* ---- TYPE ---- */
  --display: "Bricolage Grotesque", "Arial Narrow", Helvetica, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", "Courier New", monospace;

  /* ---- MEASUREMENTS ---- */
  --column:  40rem;    /* width of the reading column */
  --gutter:  2.25rem;  /* space between the plumb line and the text */
}

/* ---- reset and base ---------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.65;
  font-optical-sizing: auto;
}

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

a {
  color: var(--ember);
  text-decoration: none;
  border-bottom: 1px solid rgba(163, 58, 34, 0.35);
  transition: border-color 120ms linear, background-color 120ms linear;
}

a:hover { border-bottom-color: var(--ember); }

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

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- masthead ---------------------------------------------------------- */

/* The masthead, the reading column, and the footer all share the same
   left edge. That is why they use the same max-width and the same
   left padding. If you change --column, they all move together. */
.masthead {
  max-width: var(--column);
  margin: 0 auto;
  padding: 2rem 1.5rem 0 calc(1.5rem + var(--gutter));
}

.masthead-top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1.75rem;
}

.masthead-logo { width: 60px; flex: 0 0 auto; }

.masthead-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.masthead-name a { color: var(--ink); border: 0; }

.masthead-role {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--iron);
  margin: 0.3rem 0 0;
}

.nav {
  border-top: 1px solid rgba(74, 83, 80, 0.3);
  padding-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}

.nav a {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--iron);
  border: 0;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.nav a:hover { color: var(--ink); border-bottom-color: var(--ember); }

.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ember); }

/* ---- the column and the plumb line ------------------------------------ */
/* A plumb line is a weight on a string. It finds true vertical by using a
   force you cannot see. That thin red line down the left is the whole idea
   of the site, so try not to delete it.                                    */

.column {
  max-width: var(--column);
  margin: 3.5rem auto 0;
  padding: 0 1.5rem 0 calc(1.5rem + var(--gutter));
  border-left: 1px solid var(--ember);
  position: relative;
}

@media (max-width: 46rem) {
  .column, .masthead, .footer {
    --gutter: 1.4rem;
    padding-left: calc(1rem + 1.4rem);
    padding-right: 1rem;
  }
  .column { margin-top: 2.5rem; }
  .footer { flex-direction: column; }
}

.block { margin-bottom: 4.5rem; }

.block:last-child { margin-bottom: 0; }

/* a marker hangs off the plumb line like a tag on a wire */
.marker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0 0 0.9rem;
  position: relative;
}

.marker::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: calc((var(--gutter) + 1px) * -1);
  width: calc(var(--gutter) - 0.5rem);
  height: 1px;
  background: var(--ember);
}

/* ---- headings and text ------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--display);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 1rem;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 6.5vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }

.lead {
  font-size: 1.28rem;
  line-height: 1.5;
  color: var(--ink);
}

p { margin: 0 0 1.15rem; }

.column > .block > p:last-child { margin-bottom: 0; }

.note {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--iron);
}

ul.plain { list-style: none; padding: 0; margin: 0 0 1.15rem; }

ul.plain li {
  padding-left: 1.1rem;
  position: relative;
  margin-bottom: 0.5rem;
}

ul.plain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 1px;
  background: var(--iron);
}

/* ---- calls to action --------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.btn {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.8rem 1.3rem;
  border: 1px solid var(--ember);
  background: var(--ember);
  color: var(--paper);
  line-height: 1.5;
  max-width: 100%;
}

.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.btn-quiet {
  background: transparent;
  color: var(--ember);
}

.btn-quiet:hover { background: var(--ember); color: var(--paper); }

/* ---- article index ---------------------------------------------------- */

.piece {
  padding: 1.4rem 0;
  border-top: 1px solid rgba(74, 83, 80, 0.25);
}

.piece:last-of-type { border-bottom: 1px solid rgba(74, 83, 80, 0.25); }

.piece-date {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--iron);
  margin: 0 0 0.35rem;
}

.piece-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 0.4rem;
}

.piece-title a { color: var(--ink); border-bottom-color: rgba(26, 29, 28, 0.25); }

.piece-title a:hover { color: var(--ember); border-bottom-color: var(--ember); }

.piece p { margin: 0; color: var(--iron); font-size: 1.02rem; }

/* ---- book ------------------------------------------------------------- */

.book {
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.book-cover { width: 160px; flex: 0 0 auto; }

.book-copy { flex: 1 1 14rem; }

@media (max-width: 34rem) {
  .book { flex-direction: column; gap: 1.25rem; }
  .book-cover { width: 130px; }
}

/* ---- panel (for pull-out info, swipe copy, and so on) ----------------- */

.panel {
  background: var(--panel);
  padding: 1.5rem 1.6rem;
  margin: 1.5rem 0;
}

.panel :last-child { margin-bottom: 0; }

.panel h3 { margin-bottom: 0.6rem; }

pre.swipe {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.7;
  white-space: pre-wrap;
  margin: 0;
  color: var(--ink);
}

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

.footer {
  max-width: var(--column);
  margin: 3.5rem auto 0;
  padding: 1.5rem 1.5rem 3rem calc(1.5rem + var(--gutter));
  border-top: 1px solid rgba(74, 83, 80, 0.3);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: var(--iron);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  justify-content: space-between;
}

.footer a { color: var(--iron); border-bottom-color: rgba(74, 83, 80, 0.35); }

.footer a:hover { color: var(--ember); border-bottom-color: var(--ember); }

/* ---- skip link -------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  position: static;
  display: inline-block;
  margin: 0.5rem 1.5rem;
  padding: 0.5rem 0.9rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.8rem;
  border: 0;
}

/* ---- images ------------------------------------------------------------ */
/* Two kinds.
   .plate sits inside the reading column, same width as the text.
   .band  breaks out to the full width of the window. Use it sparingly,
          once per page at most, or it stops meaning anything.          */

.plate {
  margin: 2.75rem 0;
}

.plate img { width: 100%; display: block; }

.plate figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--iron);
  margin-top: 0.7rem;
}

.band {
  margin: 4.5rem 0 0;   /* air above it, nothing below: the footer follows */
  width: 100%;
}

.band img {
  width: 100%;
  height: clamp(240px, 42vh, 460px);
  object-fit: cover;
  object-position: 50% 88%;   /* keeps the horizon and the wires in frame */
  display: block;
}

/* the portrait on the about page wants to be a little smaller than
   full width, so it does not shout over the writing next to it */
.portrait { max-width: 26rem; }