/* Glaucopsyche -- the palette is read off Glaucopsyche alexis, the
   green-underside blue, feature by feature:

     upperside    silvery violet-blue of the male's wings        --blue
     border       the narrow dark edge around it                 --ink-line
     fringe       the white fringe at the wing margin            --fringe
     underside    pale grey-brown of the closed wing             --underwing
     basal green  the blue-green dusting at the hindwing base    --verdigris

   One token comes from the place rather than the animal: --dusk, the violet
   crown -- the band of light that sits over the hills here at sunset, and the
   nickname Austin has carried since O. Henry. It is violet rather than amber
   on purpose. The male's upperside is already a violet-blue, so this reads as
   the same light going down rather than a second, warmer palette arriving.

   The green is what the species is named for and it is not on show -- it sits
   underneath, at the base, and you only catch it at an angle. It is used the
   same way here: never as a field, only as a low glow and the far end of a
   hairline. */

:root {
  --ink: #0b1119;
  --ink-raised: #111a25;
  --ink-line: #1d2a37;

  --blue: #a9c4e8;
  --blue-deep: #5f88b6;
  --verdigris: #52a189;
  --dusk: #9b8ad0;
  --underwing: #9a9184;
  --fringe: #f2f6fa;

  --text: #e8eff6;
  --text-dim: #93a7b8;
  --text-faint: #64798b;

  --measure: 34rem;
  --shell: 68rem;
  --serif: "Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* A faint wash at the top so the hero does not sit on flat black. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 70vh;
  background:
    radial-gradient(90rem 40rem at 50% -18%, rgba(95, 136, 182, .20), transparent 65%),
    radial-gradient(120rem 17rem at 50% 63%, rgba(155, 138, 208, .14), transparent 72%),
    radial-gradient(46rem 26rem at 84% 22%, rgba(82, 161, 137, .09), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }

main, header, footer { position: relative; z-index: 1; }

a { color: var(--blue); text-decoration-color: rgba(159, 195, 224, .35); text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink-raised); color: var(--text);
  padding: .6rem 1rem; border-radius: 0 0 .4rem 0; z-index: 10;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */

.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 1.6rem;
}
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.brand .mark { width: 2.1rem; height: auto; flex: none; }
.brand-name {
  font-family: var(--serif); font-size: 1.35rem; letter-spacing: .06em;
  font-weight: 600; color: var(--text);
}
.site-nav { display: flex; gap: 1.4rem; font-size: .85rem; letter-spacing: .09em; text-transform: uppercase; }
.site-nav a { color: var(--text-dim); text-decoration: none; }
.site-nav a:hover { color: var(--blue); }
@media (max-width: 34rem) {
  .site-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .site-nav { gap: 1.1rem; font-size: .78rem; }
}

/* ---------- hero ---------- */

.hero { padding-block: clamp(3.5rem, 12vh, 7rem) clamp(3rem, 9vh, 5.5rem); text-align: center; }
.hero .mark { width: clamp(7rem, 18vw, 11rem); height: auto; }

.hero h1 {
  color: var(--fringe);
  font-family: var(--serif);
  font-size: clamp(2.9rem, 10vw, 5.5rem);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.05;
  margin: 1.4rem 0 0;
}
.wordmark-sub {
  display: block;
  font-family: var(--sans);
  font-size: clamp(.72rem, 2.2vw, .86rem);
  font-weight: 400;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 1.1rem;
  text-indent: .42em; /* offset the trailing letter-space so it stays centred */
}

.hero .rule {
  width: 4.5rem; height: 1px; margin: 1.6rem auto;
  /* One hue only. Three across 4.5rem read as a gradient effect rather than a
     detail, and the verdigris in particular does not belong on the most
     prominent line on the page -- it is the colour you are meant to catch only
     at an angle. It stays in the panel glows. */
  background: linear-gradient(90deg, transparent, var(--dusk), transparent);
}
.hero p {
  margin: 0 auto; max-width: 30rem;
  color: var(--text-dim); font-size: 1.06rem;
}
/* Has to out-specify `.hero p` above, which sets margin, size and colour for
   every paragraph in the hero -- a bare `.hero-aside` loses to it silently. */
.hero .hero-aside {
  /* Enough air that this reads as its own line rather than as something
     hanging off the byline above it. */
  margin-top: 2.6rem;
  font-size: .92rem;
  color: var(--text-faint);
}
.hero .hero-aside a {
  color: var(--blue);
  text-decoration-color: rgba(169, 196, 232, .4);
}

.hero .byline {
  margin-top: 1.6rem; font-size: .8rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-faint);
}

/* ---------- sections ---------- */

section { padding-block: clamp(3rem, 8vh, 5rem); }
section + section { border-top: 1px solid var(--ink-line); }

.eyebrow {
  font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 .9rem;
}
h2 {
  color: var(--fringe);
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  line-height: 1.15; margin: 0 0 1.4rem; letter-spacing: .02em;
}
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.1rem; color: var(--text-dim); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 600; }
.prose em { color: var(--blue); font-style: italic; }

/* the name section: mark beside the story */
.name-grid {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 52rem) {
  .name-grid { grid-template-columns: minmax(0, 1fr) 16rem; }
}
.name-figure {
  display: grid; place-items: center; gap: 1rem;
  padding: 2rem; border: 1px solid var(--ink-line); border-radius: .75rem;
  background:
    linear-gradient(160deg, rgba(95, 136, 182, .11), transparent 68%),
    radial-gradient(14rem 8rem at 50% 108%, rgba(82, 161, 137, .13), transparent 70%);
}
.name-figure .mark { width: 8.5rem; height: auto; }
.name-figure figcaption {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint); text-align: center;
}

/* etymology list */
.gloss { margin: 1.8rem 0 1.9rem; padding: 0; list-style: none; display: grid; gap: 1rem; }
.gloss div { display: flex; gap: .9rem; align-items: baseline; }
.gloss dt {
  font-family: var(--serif); font-size: 1.2rem; color: var(--blue);
  font-style: italic; flex: none; min-width: 6.5rem;
}
.gloss dd { margin: 0; color: var(--text-dim); font-size: .96rem; }
@media (max-width: 30rem) {
  .gloss div { flex-direction: column; gap: .15rem; }
}

/* ---------- gallery ---------- */

.gallery {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin: 0; padding: 0;
}
.gallery figure { margin: 0; }
.gallery a {
  display: block; border-radius: .5rem; overflow: hidden;
  background: var(--ink-raised); border: 1px solid var(--ink-line);
}
.gallery img {
  display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; transition: transform .5s ease, opacity .3s ease;
}
.gallery a:hover img { transform: scale(1.03); }
.gallery figcaption {
  margin-top: .6rem; font-size: .85rem; color: var(--text-dim);
}
.gallery figcaption .place { color: var(--underwing); }

/* Shown while the gallery has no photographs in it yet. */
.gallery-empty {
  border: 1px dashed var(--ink-line); border-radius: .75rem;
  padding: clamp(2rem, 6vw, 3.5rem); text-align: center;
  background:
    linear-gradient(160deg, rgba(95, 136, 182, .07), transparent 68%),
    radial-gradient(20rem 9rem at 50% 112%, rgba(82, 161, 137, .10), transparent 72%);
}
.gallery-empty p { margin: 0; color: var(--text-dim); }
.gallery-empty .mark { width: 3.2rem; height: auto; margin-bottom: 1rem; opacity: .8; }

/* ---------- contact ---------- */

.contact-actions {
  display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem;
}
.button {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.3rem; border-radius: 999px;
  font-size: .9rem; letter-spacing: .04em; text-decoration: none;
  border: 1px solid var(--blue-deep); color: var(--blue);
  transition: background-color .2s ease, color .2s ease;
}
.button:hover { background: var(--dusk); border-color: var(--dusk); color: var(--ink); }
.button.secondary { border-color: var(--ink-line); color: var(--text-dim); }
.button.secondary:hover { background: var(--ink-raised); color: var(--text); }

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

.site-foot {
  border-top: 1px solid var(--ink-line);
  padding-block: 2.5rem 3rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  font-size: .85rem; color: var(--text-faint);
}
.site-foot .mark { width: 1.7rem; height: auto; opacity: .85; }
.site-foot .sig { display: inline-flex; align-items: center; gap: .6rem; }

/* ---------- photograph viewer ---------- */

/* Opens over the page on the page's own ground. Following the link to the raw
   file put the photograph on browser white with no way back but the back
   button -- jarring after a dark page, and a dead end. */
#viewer {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
#viewer[open] { display: flex; align-items: center; justify-content: center; }
#viewer::backdrop { background: rgba(7, 11, 16, .95); }

#viewer-image {
  max-width: min(94vw, 84rem);
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: .35rem;
  /* A hairline so a dark frame does not bleed into the backdrop. */
  box-shadow: 0 0 0 1px rgba(169, 196, 232, .13), 0 2rem 5rem rgba(0, 0, 0, .55);
}

#viewer button {
  position: absolute;
  background: transparent;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  line-height: 1;
  font-family: var(--sans);
  transition: color .2s ease;
}
#viewer button:hover { color: var(--fringe); }

.viewer-close { top: 1rem; right: 1.25rem; font-size: 2.4rem; padding: .3rem .6rem; }
.viewer-step {
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  padding: .4rem 1rem;
}
.viewer-step[data-step="-1"] { left: .5rem; }
.viewer-step[data-step="1"] { right: .5rem; }

.viewer-count {
  position: absolute;
  bottom: 1.4rem;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .18em;
  color: var(--text-faint);
}

/* On a phone the side arrows would sit on top of the picture, so they move to
   the bottom corners where thumbs already are. */
@media (max-width: 34rem) {
  #viewer-image { max-width: 96vw; max-height: 76vh; }
  .viewer-step { top: auto; bottom: 1rem; transform: none; font-size: 2.6rem; }
  .viewer-step[data-step="-1"] { left: 1.5rem; }
  .viewer-step[data-step="1"] { right: 1.5rem; }
  .viewer-count { bottom: 2.1rem; }
}