/* ==========================================================================
   Reformation Louisiana Conference
   Single stylesheet. Plain CSS, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts, self hosted so there is no third party request at runtime.
   Amarna for headings and eyebrows (variable weight 100 to 700).
   Special Gothic for body copy (variable weight 400 to 700).
   Both are variable fonts, so one file per subset covers every weight used.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Amarna';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/amarna-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Amarna';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/amarna-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Special Gothic';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/special-gothic-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Special Gothic';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/special-gothic-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette. Mostly black and white, carrying two accents that do different jobs:

       --accent  the blue from the Louisiana state flag. Structure and emphasis:
                 eyebrows, text links, focus outlines, the rule above section titles.
       --brand   the original deep red. Action only, which in practice means the
                 register buttons and nothing else. Keeping it to the one thing the
                 page is asking you to do is what stops the two accents competing.

     The paper is a warm off white rather than pure #FFF on purpose. The three
     photographs had their white point mapped to this tone, so on pure white they
     would read as grey rectangles sitting on top of the page instead of on it. */
  --paper: #FBFAF7;
  --ink: #111110;
  --muted: #5C574E;
  --rule: #E2DDD2;
  --accent: #01447B;
  --accent-deep: #01325C;
  --brand: #780612;
  --brand-deep: #5C040E;

  --font-display: 'Amarna', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Special Gothic', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale, roughly a 1.2 ratio, fluid so mobile needs no extra queries. */
  --size-h1: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --size-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --size-h3: 1.1875rem;
  --size-lead: clamp(1.1875rem, 1.1rem + 0.5vw, 1.4375rem);
  --size-body: 1.0625rem;
  --size-small: 0.9375rem;
  /* A touch larger than the old eyebrow. These are set in Amarna Light, and 300 weight
     needs a little more size to hold up in all caps at this scale. */
  --size-eyebrow: 0.875rem;

  --space: 1rem;
  --section-gap: clamp(4.5rem, 3rem + 7vw, 9rem);

  --container: 68rem;
  --measure: 33rem; /* holds body copy near 65 characters per line */
}

/* --------------------------------------------------------------------------
   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-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

p {
  margin: 0 0 1.15em;
}

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

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

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-deep);
}

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* Fixed, not absolute. Absolute would place it at the top of the document, so tabbing
   back to it partway down the page would reveal it off screen. */
.skip-link {
  position: fixed;
  left: -9999px;
  top: 0;
  background-color: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 10;
}

.skip-link:focus {
  left: 0;
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */

/* Amarna Light in all caps, in the flag blue. This is the one place the accent
   carries text rather than just marking an edge. */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--size-eyebrow);
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.lead {
  font-size: var(--size-lead);
  line-height: 1.45;
}

/* The register buttons are the one place the deep red appears. There are only two of
   them on the page, which is what keeps it an accent rather than a theme. */
.button {
  display: inline-block;
  background-color: var(--brand);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--size-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 2rem;
  border: 1px solid var(--brand);
}

.button:hover {
  background-color: var(--brand-deep);
  border-color: var(--brand-deep);
  color: var(--paper);
}

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

.plain-list {
  list-style: none;
  margin: 0 0 1.15em;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.plain-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}

.note {
  color: var(--muted);
  font-size: var(--size-small);
}

/* --------------------------------------------------------------------------
   Masthead. A thin band, not a navigation menu.
   -------------------------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
}

.masthead__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
}

/* 40px rather than the 28px the old mark used. This mark is fine line art carrying
   "Ref LA" inside the state outline, and below roughly 40px those letters stop
   resolving and the whole thing greys out. */
.masthead__mark {
  width: 2.5rem;
  height: auto;
  flex: none;
}

.masthead__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
}

/* Padded out to a comfortable target. The text alone is only about 21px tall, which is
   under the 24px minimum and awkward to tap on a phone. The negative inline margin keeps
   the word itself flush with the container edge despite the padding. */
.masthead__link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.65rem 0.5rem;
  margin-block: -0.65rem;
  margin-inline-end: -0.5rem;
}

.masthead__link:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Hero, composed like the title page of a printed program.
   -------------------------------------------------------------------------- */

.hero {
  text-align: center;
  /* Deliberately tighter than --section-gap so the title sits high on first paint
     and the hero photo stays closer to the fold. */
  padding-top: clamp(2rem, 1.25rem + 3vw, 4rem);
}

.hero__title {
  font-size: var(--size-h1);
  max-width: 18ch;
  margin-inline: auto;
}

.hero__lead {
  max-width: 44ch;
  margin: 1.75rem auto 0;
  color: var(--muted);
  font-size: var(--size-lead);
  line-height: 1.5;
}

.hero__cta {
  margin: 2.5rem 0 0;
}

.hero__figure {
  margin: var(--section-gap) 0 0;
}

/* --------------------------------------------------------------------------
   Sections. Heading sits in its own column on wide screens.
   -------------------------------------------------------------------------- */

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

.section__title {
  font-size: var(--size-h2);
  margin-bottom: 1.75rem;
}

/* The one divider that carries the accent. Short, above the title, so the blue reads
   as a mark rather than as a band across the page. */
.section__title::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: 1rem;
  background-color: var(--accent);
}

@media (min-width: 56rem) {
  .section__grid {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: 4rem;
    align-items: start;
  }

  .section__title {
    margin-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   Schedule
   -------------------------------------------------------------------------- */

.day {
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.day__title {
  font-size: var(--size-h3);
  margin-bottom: 0.75rem;
}

.day__list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem 1.5rem;
}

.day__list dt {
  color: var(--muted);
  font-size: var(--size-small);
}

.day__list dd {
  margin: 0 0 0.6rem;
}

.day__list dd:last-child {
  margin-bottom: 0;
}

@media (min-width: 34rem) {
  .day__list {
    grid-template-columns: 9rem 1fr;
  }

  .day__list dt {
    grid-column: 1;
  }

  .day__list dd {
    grid-column: 2;
    margin-bottom: 0.35rem;
  }
}

/* --------------------------------------------------------------------------
   Venue
   -------------------------------------------------------------------------- */

.address {
  font-style: normal;
  font-size: var(--size-lead);
  line-height: 1.5;
  margin-bottom: 1.15em;
}

/* --------------------------------------------------------------------------
   Images. Full width bands, no frames or shadows.
   -------------------------------------------------------------------------- */

.figure-band {
  margin: 0;
}

.figure-band img,
.hero__figure img {
  width: 100%;
}

.section > .figure-band {
  margin-top: var(--section-gap);
}

/* --------------------------------------------------------------------------
   Registration
   -------------------------------------------------------------------------- */

.register {
  text-align: center;
  border-top: 1px solid var(--rule);
}

.register__title {
  font-size: var(--size-h2);
  margin-bottom: 1.25rem;
}

.register__detail {
  color: var(--muted);
  max-width: 40ch;
  margin-inline: auto;
  margin-bottom: 2.25rem;
}

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

.footer {
  border-top: 1px solid var(--rule);
  padding-block: 3rem;
  color: var(--muted);
  font-size: var(--size-small);
  text-align: center;
}

.footer p {
  margin: 0;
}

.footer__hosts {
  margin-bottom: 0.35rem;
}

/* A very small maker's credit, set apart from the address above it. "Built by" stays in
   the muted grey; only the Page50 name carries the brand amber, matching how the credit
   reads on Page50's other sites. */
.footer__credit {
  margin-top: 1.5rem;
  font-size: 0.6875rem;
  color: var(--muted);
}

/* Page50's brand amber is #FFAA00, but that reads pale on this warm off white footer.
   This is the same hue deepened so it holds up on the light background while still
   clearly being the Page50 gold. */
.footer__credit-link {
  color: #CC8800;
  text-decoration: none;
}

.footer__credit-link:hover {
  color: #CC8800;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Print. Someone will print this to put the dates and the address on a
   refrigerator, so keep the text and drop everything that only works on screen.
   -------------------------------------------------------------------------- */

@media print {
  body {
    font-size: 11pt;
    line-height: 1.45;
  }

  /* The photographs are large and dark, and a register button prints as a solid
     block of ink that says nothing on paper. */
  .hero__figure,
  .figure-band,
  .button,
  .skip-link {
    display: none;
  }

  .hero,
  .section {
    padding-block: 1.5rem;
  }

  .hero__figure {
    margin: 0;
  }

  /* Spell out where the register links actually go, since a printed page cannot
     be clicked. */
  .masthead__link::after {
    content: ' (eventbrite.com)';
    letter-spacing: normal;
    text-transform: none;
  }

  .section__grid {
    display: block;
  }

  .prose {
    max-width: none;
  }

  /* Keep a day's heading with its times rather than orphaning it at a page break. */
  .day {
    break-inside: avoid;
  }
}