/* The gavinwye.com design system (https://brnd.gvn.sh), shared by every page on
   gavin.is that uses it. The old pages still use style.css.

   Tokens first, copied from the Tokens section of the design system. Then the
   base styles and the few components this site needs. */

/* ---- Tokens (copied from brnd.gvn.sh) ---- */

:root {
  --ink: #1a1a1a;
  --charcoal: #2a2a2a;
  --body-grey: #3a3836;
  --kollektiv-charcoal: #3e3d3d;
  --paper: #f7f5f0;
  --white: #ffffff;
  --evidence: #3a3446;
  --line: #dcdbd9;
  --font-head: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --radius: 4px;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 6rem;
}

[data-accent="sky"] { --accent: #00a8ff; --on-accent: #1a1a1a; --accent-text: #007cbd; }
[data-accent="blue"] { --accent: #2e3bff; --on-accent: #ffffff; --accent-text: #2e3bff; }
[data-accent="violet"] { --accent: #8300ff; --on-accent: #ffffff; --accent-text: #8300ff; }
[data-accent="purple"] { --accent: #bc00ff; --on-accent: #ffffff; --accent-text: #bc00ff; }
[data-accent="magenta"] { --accent: #e600de; --on-accent: #1a1a1a; --accent-text: #d300cb; }
[data-accent="pink"] { --accent: #ff08a1; --on-accent: #1a1a1a; --accent-text: #e3008d; }
[data-accent="red"] { --accent: #ff3852; --on-accent: #1a1a1a; --accent-text: #ee001f; }
[data-accent="orange"] { --accent: #ff5a19; --on-accent: #1a1a1a; --accent-text: #d93d00; }
[data-accent="amber"] { --accent: #ff8300; --on-accent: #1a1a1a; --accent-text: #b85e00; }
[data-accent="yellow"] { --accent: #ffc400; --on-accent: #1a1a1a; --accent-text: #947200; }

/* The day palettes and the mesh are in the design system but not used on this site. */

/* ---- Light and dark ----
   Components use these names, not the tokens above, so one block switches the
   page. The dark values are the design system's own (brnd.gvn.sh). The page
   follows the device setting; there is no toggle. */

:root {
  color-scheme: light dark;
  --bg: var(--paper);
  --fg: var(--charcoal);
  --muted: var(--body-grey);
  --card: var(--white);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161515;
    --fg: #f2f1ef;
    --muted: #b4b2af;
    --line: #34322f;
    --card: #1f1e1d;
  }
}

/* ---- Fonts: self-hosted, so no request goes to a third party ---- */

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2");
}

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

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

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

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--fg);
  text-wrap: balance;
}
p { margin: 0; max-width: 68ch; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 2px; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

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

.skip-link {
  position: absolute;
  left: var(--space-16);
  top: var(--space-8);
  z-index: 10;
  padding: var(--space-12) var(--space-16);
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--radius);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---- Layout ---- */

.page { position: relative; z-index: 1; }

/* 16px margins on a phone. The column stops growing at 640px. */
.wrap { max-width: 40rem; margin-inline: auto; padding-inline: var(--space-16); }

/* ---- Header and footer ---- */

/* The thin line under the header is the accent. */
.site-header { border-bottom: 1px solid var(--accent); }
.home-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 48px;
  color: inherit;
  text-decoration: none;
}
.home-link:hover .name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 4rem;
  padding-block: var(--space-12);
}
.avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.name { font-family: var(--font-head); font-weight: 700; font-size: 28px; line-height: 1; }

.site-footer { margin-top: var(--space-64); border-top: 1px solid var(--accent); }
.site-footer .wrap { padding-block: var(--space-32) var(--space-48); }
.site-footer p { font-size: 16px; color: var(--muted); }
.site-footer .elsewhere { margin-top: var(--space-8); }
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
}

/* ---- Intro ---- */

.intro { padding-block: var(--space-40) 0; }
.intro h1 { font-size: 32px; line-height: 1.1; }
.intro p { margin-top: var(--space-16); color: var(--muted); }

/* ---- Section headings ---- */

.section { margin-top: var(--space-48); }
.section h2 { font-size: 40px; line-height: 1.05; }

/* Every line on the site is 1px and the accent red: the one under the header, the one above the
   footer, under a heading, between photos and between routes. */
.bar {
  width: 100%;
  height: 1px;
  margin-block: var(--space-12) var(--space-16);
  background: var(--accent);
}

/* ---- Photos: a plain grid, 4px radius, no borders or shadows ---- */

.photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin-top: var(--space-24); }
.photos li { margin: 0; }
.photos li:first-child { grid-column: 1 / -1; }
/* With an even number of photos the last would sit alone, so it takes the row. */
.photos li:last-child:nth-child(even):not(.wide) { grid-column: 1 / -1; }
.photos img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--line);
}
.photos li:first-child img,
.photos li:last-child:nth-child(even):not(.wide) img { aspect-ratio: 1 / 1; }

/* Each photo links to its own page. The focus ring sits inside the tile so it is never clipped. */
.photo-link { display: block; height: 100%; }
.photo-link:focus-visible { outline-offset: -3px; }

/* The place a photo was taken: small, bottom left, shown on hover or keyboard focus.
   Only some photos have a place, and a phone has no hover, so on a phone the gallery shows none;
   a photo's place is on its own page. */
.photos li { position: relative; }
.loc {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: var(--space-4) var(--space-8);
  background: rgba(22, 21, 21, 0.78);
  color: #f2f1ef;
  font-size: 14px;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
}
.photos li:hover .loc, .photos li:focus-within .loc { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .loc { transition: opacity 0.15s; } }

/* The link at the end of the gallery to the page with the rest of the photos: a row between two 1px red lines. */
.more-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  font: 700 24px/1 var(--font-head);
  text-decoration: none;
}
.more-link:hover span:first-child { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* The More photos page: a plain grid, without the special first and last tiles of the picks. */
.photos.more li:first-child:not(.wide),
.photos.more li:last-child:nth-child(even):not(.wide) { grid-column: auto; }
.photos.more li:first-child:not(.wide) img,
.photos.more li:last-child:nth-child(even):not(.wide) img { aspect-ratio: 4 / 5; }

/* A landscape photo takes two columns. 13:8 makes it as tall as a 4:5 tile beside it. */
.photos { grid-auto-flow: dense; }
.photos li.wide { grid-column: span 2; }
.photos li.wide img { aspect-ratio: 13 / 8; }

/* ---- Cards: white, 1px red border ---- */

.card {
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-24) var(--space-16);
}
.card h2 { font-size: 40px; }
.card .bar { margin-bottom: var(--space-8); }

/* ---- Routes ---- */

.routes li { padding-block: var(--space-16); border-top: 1px solid var(--accent); }
.routes li:first-child { border-top: 0; }
.route-name { font-family: var(--font-head); font-weight: 700; font-size: 24px; line-height: 1.1; }
.route-meta { margin-top: var(--space-4); font-size: 16px; color: var(--muted); }
.route-note { margin-top: var(--space-8); color: var(--muted); }

/* ---- A photo's own page ---- */

/* The title and date come first, then the photo. The header's name and photo link back to the gallery. */
.photo-page { padding-block: var(--space-24) 0; }
.photo-figure { margin: var(--space-16) 0 0; }
/* The photo fills the whole column, from the same left edge as the profile picture. */
.photo-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--line);
}
.photo-page h1 { font-size: 32px; line-height: 1.1; }
.photo-line { margin-top: var(--space-8); color: var(--muted); }
/* The details sit on the page, not in a box: a small heading with a 1px red line under it, then the list. */
.photo-details { margin-top: var(--space-40); max-width: 40rem; }
.photo-details h2 {
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--accent);
  font-size: 24px;
  line-height: 1.1;
}
.photo-details dl {
  display: grid;
  grid-template-columns: minmax(4.5rem, 6rem) 1fr;
  gap: var(--space-8) var(--space-16);
  margin: var(--space-16) 0 0;
  font-size: 16px;
  line-height: 1.4;
}
.photo-details dt { color: var(--muted); }
.photo-details dd { margin: 0; overflow-wrap: anywhere; }
.photo-nav {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-32);
  border-top: 1px solid var(--accent);
}
.photo-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-top: var(--space-8);
  font: 700 20px/1 var(--font-head);
}

/* ---- Instagram link: a red icon and the handle in the text colour ----
   The icon is a graphic, so the bright accent is fine on Paper. */

.icon-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 48px;
  color: var(--fg);
  font: 700 22px/1 var(--font-head);
  text-decoration: none;
}
.icon-link span:not(.visually-hidden) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.icon-link svg { flex: none; width: 28px; height: 28px; color: var(--accent); }
.icon-link:hover svg { color: var(--accent-text); }

/* ---- Wider screens: most visitors are on a phone, but it should still hold ---- */

@media (min-width: 760px) {
  body { font-size: 20px; }
  .wrap { max-width: 60rem; padding-inline: var(--space-24); }
  .intro { padding-top: var(--space-64); }
  .intro h1 { font-size: 48px; }
  .photo-page h1 { font-size: 48px; }
  .intro p { max-width: 36rem; }
  .section h2, .card h2 { font-size: 52px; }
  .photos { grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }
  .photos li:first-child,
  .photos li:last-child:nth-child(even):not(.wide) { grid-column: auto; }
  .photos li:first-child img,
  .photos li:last-child:nth-child(even):not(.wide) img { aspect-ratio: 4 / 5; }
  .photos li.wide { grid-column: span 2; }
  .photos li.wide img { aspect-ratio: 13 / 8; }
  .card { padding: var(--space-32); }
  .routes, .links { max-width: 40rem; }
}

/* Desktop: a four-column gallery on a wider column. */
@media (min-width: 1000px) {
  .wrap { max-width: 72rem; }
  .photos { grid-template-columns: repeat(4, 1fr); }
}