/* Molly Grogan Rawls — site stylesheet
   Tokens are documented in DESIGN.md. Hex values are fallbacks; OKLCH
   overrides them where supported. */

/* ---------- Fonts (self-hosted, Latin subsets, SIL Open Font License) ---------- */

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Old Standard TT";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/old-standard-tt-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Old Standard TT";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/old-standard-tt-italic.woff2") format("woff2");
}

:root {
  --bg: #f9f6f1;
  --surface: #f0ece4;
  --ink: #1b1923;
  --muted: #565265;
  --primary: #36275b;
  --on-primary: #f1eee7;
  --on-primary-muted: #c5c1d6;
  --accent: #8a5600;
  --accent-light: #d49838;

  --font-display: "Old Standard TT", "Iowan Old Style", "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;

  --measure: 58ch;

  /* Type roles below body size. Body itself is 1.125rem / 1.1875rem. */
  --text-caption: 1.0625rem; /* photograph captions: story content, read closely */
  --text-meta: 1rem;         /* dates, publication names, years, footer */
  --container: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(3rem, 8vw, 6rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --fade: 1000ms;

  --z-skip-link: 10;
}

@supports (color: oklch(0 0 0)) {
  :root {
    --bg: oklch(0.975 0.008 85);
    --surface: oklch(0.945 0.012 85);
    --ink: oklch(0.22 0.02 294);
    --muted: oklch(0.45 0.03 294);
    --primary: oklch(0.32 0.09 294);
    --on-primary: oklch(0.95 0.01 85);
    --on-primary-muted: oklch(0.82 0.03 294);
    --accent: oklch(0.50 0.11 70);
    --accent-light: oklch(0.72 0.13 75);
  }
}

/* ---------- Base ---------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

@media (min-width: 48em) {
  body {
    font-size: 1.1875rem;
  }
}

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

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: 2.75rem;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 2rem;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

h3 {
  font-size: 1.5rem;
}

p {
  margin: 0 0 1.25em;
  max-width: var(--measure);
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-light);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: color 200ms var(--ease-out), text-decoration-color 200ms var(--ease-out);
}

a:hover {
  color: var(--primary);
  text-decoration-color: currentColor;
}

/* Browsers without :focus-visible keep the ring on every focus; the
   second rule is dropped by those browsers and removes the mouse-click
   ring everywhere else. */
:focus {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  padding: 0.5rem 1rem;
  background: var(--primary);
  color: var(--on-primary);
  z-index: var(--z-skip-link);
}

.skip-link:focus {
  top: 0.5rem;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.lead {
  font-size: 1.15em;
  line-height: 1.5;
}

/* ---------- Header ---------- */

/* Nameplate: the name sits large on the cream band, and a brass hairline
   closes the header above the plum, as a newspaper nameplate rule would. */
.site-header {
  padding-block: 1.25rem 1rem;
  border-bottom: 1px solid var(--accent-light);
}

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark:hover {
  color: var(--accent);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a[aria-current] {
  color: var(--primary);
  border-bottom-color: var(--accent-light);
}

/* ---------- Hero ---------- */

.hero {
  --hero-overlap: clamp(5rem, 14vw, 10rem);
  background: var(--primary);
  color: var(--on-primary);
  padding-top: clamp(2.5rem, 4vw, 3rem);
  /* leaves room for the slideshow frame to overlap the band's bottom edge */
  padding-bottom: var(--hero-overlap);
  margin-bottom: calc(-1 * var(--hero-overlap) + 1.5rem);
}

.hero h1 {
  max-width: 18ch;
  letter-spacing: 0;
}

/* ---------- Slideshow ---------- */

.slideshow {
  margin: 0;
  position: relative;
}

.slideshow-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink);
  outline: 1px solid var(--accent-light);
  outline-offset: -1px;
}

@media (min-width: 40em) {
  .slideshow-frame {
    aspect-ratio: 5 / 2;
  }
}

/* Browsers without aspect-ratio (Safari before 15) get the same box from
   padding, so the absolutely positioned slides still have a height. */
@supports not (aspect-ratio: 1 / 1) {
  .slideshow-frame {
    height: 0;
    padding-top: 66.667%;
  }

  @media (min-width: 40em) {
    .slideshow-frame {
      padding-top: 40%;
    }
  }
}

.slideshow-frame img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity var(--fade) var(--ease-out);
}

.slideshow-frame img.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .slideshow-frame img {
    transition: none;
  }
}

.slideshow-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 0.75rem;
  color: var(--muted);
  font-size: var(--text-caption);
  line-height: 1.5;
}

/* Reserve room for the longest caption so the sections below do not move
   as the photographs change: three lines on phones, two from 40em. */
.slideshow-caption p {
  margin: 0;
  max-width: 60ch;
  min-height: 4.5em;
}

@media (min-width: 40em) {
  .slideshow-caption p {
    min-height: 3em;
  }
}

.slideshow-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

.slideshow-controls button {
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-grid;
  place-items: center;
  color: var(--primary);
}

@media (hover: hover) {
  .slideshow-controls button:hover {
    border-color: var(--accent-light);
  }
}

.slideshow-controls svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slideshow-dots {
  display: flex;
  gap: 0.125rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.slideshow-dots button {
  min-width: 2rem;
  min-height: 2.75rem;
}

.slideshow-dots button::before {
  content: "";
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: transparent;
  transition: background 200ms var(--ease-out);
}

.slideshow-dots button[aria-current="true"]::before {
  background: var(--accent-light);
  border-color: var(--accent-light);
}

.slideshow:not([data-ready]) .slideshow-controls {
  display: none;
}

.slideshow[data-playing="false"] .icon-pause,
.slideshow:not([data-playing="false"]) .icon-play {
  display: none;
}

/* ---------- Sections ---------- */

.section {
  padding-block: var(--section);
}

.section-head {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.section-head p {
  margin-top: 0.75rem;
  color: var(--muted);
}

/* ---------- Books ---------- */

.books {
  background: var(--surface);
}

.shelf {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

/* Each book is one link to the publisher's page. The title carries the
   underline; the cover and year ride along. */
/* li and link are one-cell grids so each level stretches to the row height
   without percentage heights. */
.shelf li,
.shelf .book {
  display: grid;
}

.shelf .book {
  color: inherit;
  text-decoration: none;
}

.shelf .title {
  text-decoration: underline;
  text-decoration-color: var(--accent-light);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: color 200ms var(--ease-out), text-decoration-color 200ms var(--ease-out);
}

.shelf .book:hover .title {
  color: var(--primary);
  text-decoration-color: currentColor;
}

.shelf .book:hover img {
  border-color: var(--primary);
}

/* Phones: each book is a row, cover beside title, so all five are visible
   without a horizontal gesture. */
.shelf figure {
  margin: 0;
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
}

.shelf img {
  width: 100%;
  height: auto;
  border: 1px solid var(--accent-light);
  transition: border-color 200ms var(--ease-out);
}

.shelf figcaption {
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
}

/* From 48em the five covers stand in one row. Grid rows stretch every book
   to the same height, and the year sits at the bottom of each, so the five
   years share one line however the titles wrap. */
@media (min-width: 48em) {
  .shelf {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
  }

  .shelf figure {
    display: flex;
    flex-direction: column;
  }

  .shelf figcaption {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: 0.75rem;
  }
}

/* In the wide row the figcaption is a flex column, so the auto margin pushes
   the year to the bottom; in the phone list it is block flow, where an auto
   top margin is zero. */
.shelf .year {
  display: block;
  margin-top: auto;
  padding-top: 0.25rem;
  font-family: var(--font-body);
  font-size: var(--text-meta);
  color: var(--muted);
}

.shelf-note {
  margin-top: 1.5rem;
  color: var(--muted);
}

/* ---------- Writing ---------- */

.featured {
  display: grid;
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 48em) {
  .featured {
    grid-template-columns: minmax(16rem, 2fr) 3fr;
  }
}

.featured figure {
  margin: 0;
}

.featured img {
  width: 100%;
  border: 1px solid var(--accent-light);
}

.featured figcaption {
  margin-top: 0.5rem;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--muted);
}

.featured .date {
  color: var(--muted);
  font-size: var(--text-meta);
  margin-bottom: 0.5rem;
}

.featured h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 0.75rem;
}

.press {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--accent-light);
}

.press li {
  display: grid;
  gap: 0.125rem 2rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--accent-light);
}

.press li > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 40em) {
  .press li {
    grid-template-columns: 8rem 1fr;
    align-items: baseline;
  }
}

.press time,
.press .source {
  color: var(--muted);
  font-size: var(--text-meta);
}

.press .source {
  display: block;
}

.press .unavailable {
  color: var(--muted);
}

/* ---------- About ---------- */

.about .container {
  display: grid;
  gap: 2.5rem clamp(2rem, 6vw, 5rem);
}

@media (min-width: 64em) {
  .about .container {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.about h2 {
  margin-bottom: 1rem;
}

.contact {
  background: var(--surface);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  align-self: start;
}

.contact h3 {
  margin-bottom: 0.5rem;
}

.contact p:last-child {
  margin-bottom: 0;
}

.contact .email {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  overflow-wrap: anywhere;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--primary);
  color: var(--on-primary-muted);
  padding-block: 2.5rem;
  font-size: var(--text-meta);
  line-height: 1.7;
  letter-spacing: 0.01em;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem 2rem;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: var(--on-primary);
  text-decoration-color: var(--accent-light);
}

.site-footer a:hover {
  color: var(--accent-light);
}

/* ---------- Article page ---------- */

.article {
  padding-block: clamp(2rem, 6vw, 4rem) var(--section);
}

.article-head {
  margin-bottom: 2rem;
}

.article-head .back {
  display: inline-block;
  margin-bottom: 1.5rem;
}

.article-head .date {
  margin-top: 0.75rem;
  color: var(--muted);
}

.prose {
  max-width: var(--measure);
}

.prose figure {
  margin: 0 0 1.5rem;
}

.prose figure img {
  border: 1px solid var(--accent-light);
}

.prose figcaption {
  margin-top: 0.5rem;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--muted);
}

@media (min-width: 48em) {
  .prose figure.float {
    float: left;
    width: 17rem;
    margin: 0.35rem 2rem 1rem 0;
  }
}

.prose blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--accent-light);
  font-family: var(--font-display);
  font-size: 1.1em;
  font-style: italic;
}

.prose blockquote p {
  margin-bottom: 0.5em;
}

.article-foot {
  clear: both;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--accent-light);
}