/* ==========================================================================
   site.css

   The old site was a photograph of physical things: kraft board, taped
   paper, typed labels, an industrial pushbutton panel. This keeps that
   vocabulary but draws it precisely instead of photographing it.

   Ground is the cool enamel grey of the button plate, not kraft cream.
   Kraft is an accent. The five button colours are a system: each section
   owns one, and carries it onto its own pages.
   ========================================================================== */

:root {
  --enamel:      #e7e5e0;
  --enamel-deep: #d5d2cb;
  --plate:       #cfccc5;
  --kraft:       #b07d4d;
  --ink:         #16130f;
  --ink-soft:    #5c554c;
  --rule:        #b8b3aa;

  --red:   #cf3327;
  --yellow:#c9be00;
  --green: #2f8f45;
  --blue:  #2a4f9e;
  --steel: #7d838a;
  /* Yellow is a fine button and a terrible text colour; this is its ink. */
  --yellow-ink: #857b00;

  --measure: 34rem;
  --gap: clamp(1.5rem, 4vw, 3rem);

  --display: "Courier Prime", "Courier New", monospace;
  --body: "Newsreader", Georgia, "Times New Roman", serif;
}

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

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

body {
  margin: 0;
  background: var(--enamel);
  color: var(--ink);
  font: 300 1.125rem/1.65 var(--body);
  /* The plate's brushed grain, at almost nothing. */
  background-image: repeating-linear-gradient(
    90deg, rgba(0,0,0,.014) 0 1px, transparent 1px 3px);
}

.sheet {
  max-width: 62rem;
  margin: 0 auto;
  padding: var(--gap) var(--gap) 0;
}

a { color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--enamel);
  padding: .6em 1em; font: 400 .8rem/1 var(--display);
}
.skip:focus { left: .5rem; top: .5rem; }

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


/* --------------------------------------------------------------------------
   Typed labels — the structural device. Machine-set, tracked wide, small.
   -------------------------------------------------------------------------- */

.eyebrow {
  font: 400 .72rem/1 var(--display);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .9rem;
  display: flex; align-items: center; gap: .55rem;
}
.eyebrow::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--steel);
}
.eyebrow--red::before    { background: var(--red); }
.eyebrow--yellow::before { background: var(--yellow); }
.eyebrow--green::before  { background: var(--green); }
.eyebrow--blue::before   { background: var(--blue); }
.eyebrow--kraft::before  { background: var(--kraft); }


/* --------------------------------------------------------------------------
   Home marquee
   -------------------------------------------------------------------------- */

.marquee { padding: clamp(2rem, 7vw, 5rem) 0 clamp(1.5rem, 4vw, 2.5rem); }

.marquee__name {
  font: 700 clamp(2rem, 7vw, 3.4rem)/1 var(--display);
  letter-spacing: .04em;
  margin: 0;
}

.marquee__where {
  font: 400 .72rem/1 var(--display);
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: .9rem 0 0;
}

.marquee__intro {
  font-size: 1.35rem; font-weight: 300;
  max-width: var(--measure);
  margin: 1.6rem 0 0;
}


/* --------------------------------------------------------------------------
   The panel — the signature. Five keys on an enamel plate, screwed down.
   -------------------------------------------------------------------------- */

.panel {
  background: linear-gradient(180deg, var(--plate), var(--enamel-deep));
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.6rem 1.4rem;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.12);
}

/* Four screws, because the plate is bolted to something. */
.panel::before, .panel::after {
  content: ""; position: absolute; width: 100%; left: 0;
  height: 7px; pointer-events: none;
  background:
    radial-gradient(circle at 14px 50%, #8f8b83 0 3.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 14px) 50%, #8f8b83 0 3.5px, transparent 3.5px);
}
.panel::before { top: 10px; }
.panel::after  { bottom: 10px; }

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

.key a {
  display: flex; align-items: center; gap: 1.1rem;
  padding: .6rem .5rem;
  text-decoration: none;
  border-radius: 2px;
}
.key a:hover { background: rgba(255,255,255,.4); }

.key__button {
  flex: none;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--steel);
  border: 3px solid #f2f1ee;
  box-shadow:
    inset 0 3px 5px rgba(255,255,255,.35),
    inset 0 -3px 6px rgba(0,0,0,.28),
    0 2px 3px rgba(0,0,0,.28);
  transition: transform .08s ease, box-shadow .08s ease;
}
.key--red    .key__button { background: var(--red); }
.key--yellow .key__button { background: var(--yellow); }
.key--green  .key__button { background: var(--green); }
.key--blue   .key__button { background: var(--blue); }
.key--steel  .key__button { background: #dcdad5; }

.key a:active .key__button {
  transform: translateY(2px);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.4), 0 0 0 rgba(0,0,0,0);
}

.key__text { display: flex; flex-direction: column; gap: .15rem; }

.key__label {
  font: 700 1rem/1 var(--display);
  letter-spacing: .13em; text-transform: uppercase;
}

.key__note {
  font: 400 .78rem/1.3 var(--display);
  color: var(--ink-soft);
}

.key a[aria-current] .key__label { text-decoration: underline; text-underline-offset: 4px; }


/* --------------------------------------------------------------------------
   Home layout: marquee full width, then panel beside the prose.
   -------------------------------------------------------------------------- */

@media (min-width: 56rem) {
  .is-home .panel { float: left; width: 20rem; margin: 0 var(--gap) var(--gap) 0; }
  .is-home main { overflow: hidden; }
}

.recent { margin: var(--gap) 0 0; }
.recent__list { list-style: none; margin: 0; padding: 0; }

.recent__item a {
  display: grid; gap: .1rem .9rem;
  grid-template-columns: 6.5rem 1fr auto;
  align-items: baseline;
  padding: .8rem 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
}
.recent__item:last-child a { border-bottom: 1px solid var(--rule); }
.recent__item a:hover .recent__title { text-decoration: underline; text-underline-offset: 3px; }

.recent__kind {
  font: 400 .68rem/1.6 var(--display);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft);
}
.recent__item--red    .recent__kind { color: var(--red); }
.recent__item--green  .recent__kind { color: var(--green); }
.recent__item--blue   .recent__kind { color: var(--blue); }
.recent__item--yellow .recent__kind { color: var(--yellow-ink); }

.recent__title { font-size: 1.15rem; }
.recent time { font: 400 .72rem/1.6 var(--display); color: var(--ink-soft); }


/* --------------------------------------------------------------------------
   Interior pages
   -------------------------------------------------------------------------- */

.head { padding: clamp(1.5rem, 5vw, 3.5rem) 0 clamp(1rem, 3vw, 2rem); }

.crumb {
  font: 400 .74rem/1 var(--display);
  letter-spacing: .1em; margin: 0 0 1.6rem;
}
.crumb a { text-decoration: none; color: var(--ink-soft); }
.crumb a:hover { color: var(--ink); }

.head__title {
  font: 400 clamp(1.9rem, 5vw, 2.9rem)/1.12 var(--body);
  margin: 0; max-width: 22ch;
}

.stamp {
  display: block; margin-top: 1rem;
  font: 400 .74rem/1 var(--display);
  letter-spacing: .14em; color: var(--ink-soft);
}


/* --------------------------------------------------------------------------
   Prose
   -------------------------------------------------------------------------- */

.prose { max-width: var(--measure); }
/* Galleries need the full column, not the reading measure. */
.prose--wide { max-width: none; }
.prose > * + * { margin-top: 1.15em; }
.prose h2, .prose h3 {
  font: 400 1.4rem/1.25 var(--body);
  margin-top: 2.4em; margin-bottom: -.3em;
}
.prose h3 { font-size: 1.15rem; font-style: italic; }
.prose a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose blockquote {
  margin-left: 0; padding-left: 1.2rem;
  border-left: 2px solid var(--kraft);
  font-style: italic; color: var(--ink-soft);
}
.prose code { font: 400 .9em/1 var(--display); background: var(--enamel-deep); padding: .15em .35em; }
.prose pre { background: var(--enamel-deep); padding: 1rem; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5em 0; }
.prose img { max-width: 100%; height: auto; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li + li { margin-top: .4em; }

/* Poems keep their own line breaks and never justify. */
.prose--poem p {
  font-size: 1.2rem; line-height: 1.75;
  white-space: normal;
}

.missing {
  font: 400 .9rem/1.6 var(--display);
  color: var(--ink-soft);
  border: 1px dashed var(--rule);
  padding: 1rem 1.2rem;
  max-width: var(--measure);
}


/* --------------------------------------------------------------------------
   Listings and galleries
   -------------------------------------------------------------------------- */

.index { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.index li + li { border-top: 1px solid var(--rule); }
.index a {
  display: block; padding: 1.1rem 0; text-decoration: none;
}
.index a:hover .index__title { text-decoration: underline; text-underline-offset: 3px; }
.index__title { display: block; font-size: 1.3rem; }
.index__meta {
  display: block; margin-top: .3rem;
  font: 400 .74rem/1.5 var(--display);
  letter-spacing: .08em; color: var(--ink-soft);
}

.gallery {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  max-width: none;
}
.shot {
  display: block; background: #fbfaf8;
  padding: .55rem .55rem 1.6rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 6px 14px rgba(0,0,0,.14);
  transition: transform .16s ease;
}
.shot img { display: block; width: 100%; height: auto; }
.shot:hover { transform: translateY(-3px) rotate(-.4deg); }


/* --------------------------------------------------------------------------
   Foot
   -------------------------------------------------------------------------- */

.foot {
  margin-top: clamp(3rem, 10vw, 6rem);
  padding: 1.4rem 0 2.5rem;
  border-top: 3px double var(--rule);
}
.foot__links a {
  font: 400 .74rem/1.8 var(--display);
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; margin-right: 1.6rem;
}
.foot__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__note {
  font: 400 .72rem/1.6 var(--display);
  color: var(--ink-soft); margin: .6rem 0 0;
}


/* --------------------------------------------------------------------------
   Preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

@media print {
  .panel, .skip, .foot__links { display: none; }
  body { background: #fff; }
}