/* A thin hand-rolled layer over jekyll-theme-minimal.
   Deliberately modest: warmer paper, a bookish heading face, one accent
   colour, and a dark mode. Nothing here should look like a landing page. */

:root {
  --paper:      #fbf9f4;
  --ink:        #3d3a35;
  --ink-strong: #24211d;
  --ink-soft:   #7a746b;
  --rule:       #e2dbcd;
  --link:       #2b6ea8;
  --link-hover: #1a4c78;
  --accent:     #b8892b;
  --rule-red:   #b7332a;
  --card:       #fffdf8;
  --shadow:     #ece5d6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #171614;
    --ink:        #c9c3b8;
    --ink-strong: #ebe6dc;
    --ink-soft:   #8b8479;
    --rule:       #35322c;
    --link:       #7ab3e0;
    --link-hover: #a8cdec;
    --accent:     #d3a64a;
    --rule-red:   #e2695e;
    --card:       #1e1c19;
    --shadow:     #100f0e;
  }
}

/* The fluid scale lives on the root so every rem below tracks it: 16px up
   to about 1440px wide, easing to 21px on a large monitor, which is both
   further from your eyes and about to be given a much wider page. */
html {
  font-size: clamp(16px, 0.35vw + 11px, 21px);
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  color: var(--ink-strong);
  font-weight: normal;
}

strong { color: var(--ink-strong); }

/* --- links ------------------------------------------------------------ */

a {
  color: var(--link);
  border-bottom: 1px solid transparent;
}

/* The theme bolds links on hover, which makes the text jump. Underline
   instead. */
a:hover, a:focus {
  color: var(--link-hover);
  font-weight: inherit;
  border-bottom-color: var(--accent);
}

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

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

/* The rule sits under the name itself, with the transliterations below it. */
header h1 {
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.35em;
  padding-bottom: 0.25em;
  border-bottom: 2px solid var(--rule-red);
}

header h1 a,
header h1 a:hover {
  color: var(--ink-strong);
  border-bottom: none;
}

header h2 {
  font-size: 1rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 22px;
}

/* The theme pins this column with position:fixed, which is fine for a name
   and a portrait but not for a column that now runs past the fold. Let it
   scroll with the page instead. */
header {
  position: static;
}

/* Portrait: a snapshot pinned to the page, not a UI avatar. Sits very
   slightly off-square on purpose. The child selector keeps this off the
   plaque photo below it. */
header > img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: 3px 4px 0 var(--shadow);
  transform: rotate(-0.6deg);
}

/* --- body copy -------------------------------------------------------- */

section {
  width: 520px;
  padding-bottom: 40px;
}

section > p:first-child {
  font-size: 1.06rem;
}

section ul {
  padding-left: 1.15em;
}

section li { margin-bottom: 4px; }

/* "Contact:" / "Content:" act as headings; the source marks them italic. */
section > p > em {
  font-style: normal;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The abandoned pledge: struck out and stepped back, not shouted. */
del {
  color: var(--ink-soft);
  text-decoration-color: currentColor;
}

del a { color: var(--ink-soft); }
del a:hover { color: var(--ink); }
del em { color: inherit; }

hr {
  background: var(--rule);
  margin: 28px 0;
}

.footnote {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* --- plaque photo, under the portrait in the left column --------------- */

header figure {
  width: 100%;
  max-width: 460px;
  margin: 22px 0 0;
}

header figure a {
  display: block;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: 3px 4px 0 var(--shadow);
  transform: rotate(0.5deg);
}

header figure a:hover { border-bottom-color: var(--rule); }

header figure img {
  display: block;
  width: 100%;
  height: auto;
}

header figcaption {
  margin-top: 12px;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* --- colophon --------------------------------------------------------- */

/* The theme pins <footer> to the bottom of the left column, where it can
   collide with the portrait. Put it back in the flow, under everything. */
footer {
  position: static;
  float: none;
  width: auto;
  clear: both;
  bottom: auto;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}

footer small { font-size: 0.75rem; }
footer a { color: var(--ink-soft); }
footer a:hover { color: var(--ink); }

/* --- anniversary calculator ------------------------------------------- */

.crumb {
  margin-bottom: 18px;
  font-size: 0.8rem;
}

.crumb a { color: var(--ink-soft); }
.crumb a:hover { color: var(--ink); }

.page-title {
  font-size: 1.6rem;
  margin-bottom: 18px;
}

.anni-form {
  margin: 24px 0;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: 3px 4px 0 var(--shadow);
}

.anni-form label {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: 10px;
}

.anni-form input {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 4px 6px;
}

.anni-form input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.anni-error {
  color: var(--accent);
  font-size: 0.88rem;
}

table.anni {
  font-size: 0.94rem;
  margin-bottom: 24px;
}

table.anni th, table.anni td {
  border-bottom-color: var(--rule);
  padding: 5px 12px 5px 0;
}

table.anni thead th {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 0.75rem;
  font-weight: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

table.anni tbody th {
  font-weight: normal;
  color: var(--ink);
}

/* A date is one thing; never break it over two lines. */
table.anni td:first-of-type { white-space: nowrap; }

table.anni td:last-child {
  text-align: right;
  padding-right: 0;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Milestones already gone by fade back; the one you are living in does not. */
.anni-past th, .anni-past td { color: var(--ink-soft); }

.anni-now th, .anni-now td {
  color: var(--accent);
  font-style: italic;
}

.anni-now th::after { content: " \2190"; }

/* --- elements the theme hard-codes light colours for --------------------
   Nothing on this page uses them yet, but a future page might. */

@media (prefers-color-scheme: dark) {
  code, pre, dt, th { color: var(--ink-strong); }

  pre {
    background: var(--card);
    border-color: var(--rule);
  }

  blockquote { border-left-color: var(--rule); }
  th, td { border-bottom-color: var(--rule); }

  kbd {
    background-color: var(--card);
    border-color: var(--rule);
    border-bottom-color: var(--rule);
    box-shadow: inset 0 -1px 0 var(--rule);
    color: var(--ink);
  }
}

/* --- the game page ------------------------------------------------------
   Its own dark, full-bleed frame: the two-column grid has nowhere sensible
   to put an 800x600 stage. */

body.game {
  background: #0e0d0c;
  color: #b3ada2;
  /* The theme never resets the UA's 8px body margin. Harmless elsewhere,
     but here it stacks on min-height:100vh and forces a 16px scroll. */
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.game-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  padding: 14px 20px;
  border-bottom: 2px solid var(--rule-red);
  font-size: 0.8rem;
}

.game-bar a {
  color: #b3ada2;
  border-bottom: 1px solid transparent;
}

.game-bar a:hover {
  color: #ebe6dc;
  border-bottom-color: var(--rule-red);
}

.game-bar span {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-style: italic;
  color: #7d776d;
}

.game-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* The slot needs a definite width, otherwise the player's own 100% resolves
   against nothing and Ruffle renders into a zero-sized box. */
#game-slot {
  /* Ruffle renders vectors, so the game scales cleanly. Grow it to fill the
     window, bounded by the viewport height so the stage never needs
     scrolling, and by 1200px so it stops before it gets silly. */
  width: min(100%, calc((100vh - 12rem) * 4 / 3), 1200px);
}

.game-stage ruffle-player {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
}

.game-note {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px 28px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #6f695f;
  text-align: center;
}

/* --- wide screens ------------------------------------------------------ */

/* The theme nails the page to 860px however big the display is, which on a
   large monitor leaves a thin ribbon of content adrift in the background.
   Take half the viewport instead. The text column is capped at a readable
   measure and the left column absorbs whatever is left over, so the extra
   width goes into the photos rather than into 120-character lines. */
@media screen and (min-width: 961px) {
  .wrapper {
    display: grid;
    /* Text capped at a readable measure; the left column takes the rest,
       which is why the extra width becomes bigger photographs rather than
       ninety-character lines. Capped at 1280px because past that the left
       column has nothing useful left to do with the space. */
    grid-template-columns: minmax(250px, 1fr) minmax(0, 36em);
    column-gap: 48px;
    width: clamp(860px, 50vw, 1280px);
    margin: 0 auto;
  }

  header {
    grid-column: 1;
    float: none;
    width: auto;
  }

  section {
    grid-column: 2;
    float: none;
    width: auto;
  }

  footer {
    grid-column: 1 / -1;
  }
}

/* --- narrow screens --------------------------------------------------- */

@media print, screen and (max-width: 960px) {
  /* Single column here: cap the measure so lines stay readable. */
  section {
    width: auto;
    max-width: 40em;
    border-color: var(--rule);
  }

  /* Single column: the two photos sit side by side under the name rather
     than stacking, so the text is not pushed below the fold. The theme also
     reserves room on the right here for a downloads box we do not have. */
  header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 20px;
    padding-right: 0;
  }

  header h1,
  header h2 {
    flex: 0 0 100%;
  }

  header > img {
    flex: 0 0 auto;
    width: 140px;
  }

  header figure {
    flex: 1 1 90px;
    max-width: 260px;
    margin-top: 0;
  }
}

@media print, screen and (max-width: 480px) {
  body { padding: 22px; }
  header h1 { font-size: 1.6rem; }
  header > img { width: 110px; }
  .page-title { font-size: 1.4rem; }

  table.anni { font-size: 0.82rem; }
  table.anni th, table.anni td { padding-right: 8px; }
  .anni-form { padding: 12px; }
  header figure a, header > img { transform: none; }
}

@media print {
  body { background: #fff; color: #000; }
  a { border-bottom: none; }
  header figure a { box-shadow: none; transform: none; }
}