/* Words & Pictures: tile index. Geometric direction (Jost). */
:root {
  --wall: #ececea;     /* gallery wall */
  --paper: #ffffff;
  --ink: #000000;
  --quiet: #5c5c58;
  --pink: #ff00b4;     /* the site's long-standing title color */
  --pink-light: #ff9ade; /* stroke on the year tiles */
  --stroke: 3px;
  --grid-line: rgba(0, 0, 0, .015); /* background diagonal grid: line color */
  --grid-size: 8px;                  /* background diagonal grid: spacing */
  --story-stroke: 1px solid #c2c2c2; /* outline on each story tile */
  --gap: clamp(12px, 1.8vw, 22px);
  --font: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--wall);
  background-image:
    repeating-linear-gradient(45deg, var(--grid-line) 0 1px, transparent 1px var(--grid-size)),
    repeating-linear-gradient(-45deg, var(--grid-line) 0 1px, transparent 1px var(--grid-size));
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }

/* Header: centered mark, nav evenly beneath */
.site-head {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 28px 16px 20px;
  background: var(--ink); color: var(--paper);
  text-align: center;
}
.mark {
  font-weight: 500; font-size: 22px; letter-spacing: .42em;
  margin-right: -.42em; /* balance the trailing letter-space so it centers true */
  text-decoration: none;
}
.site-head ul { list-style: none; margin: 0; padding: 0; }
.site-head nav > ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 2rem; }
.site-head nav a, .site-head nav button {
  font: 400 13px/1 var(--font); letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper); text-decoration: none;
  background: none; border: 0; padding: 6px 0; cursor: pointer;
}
.site-head nav a:hover, .site-head nav button:hover,
.site-head nav a[aria-current="page"] { color: var(--pink); }

.has-menu { position: relative; }
.has-menu ul {
  display: none; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  min-width: 200px; padding: 10px 0; background: var(--ink); z-index: 10;
}
.has-menu button[aria-expanded="true"] + ul,
.has-menu:focus-within ul { display: block; }
@media (hover: hover) { .has-menu:hover ul { display: block; } }
.has-menu li a { display: block; padding: 9px 16px; }

/* Intro: a title page, centered */
main { padding: 0 clamp(16px, 4vw, 48px); max-width: 1440px; margin: 0 auto; }
.intro {
  padding: clamp(48px, 8vw, 96px) 0 clamp(32px, 5vw, 56px);
  text-align: center;
}
.intro h1 {
  margin: 0 0 .7em;
  font-weight: 400; line-height: 1.1;
  font-size: clamp(30px, 4.6vw, 58px);
  letter-spacing: .14em; margin-right: -.14em;
  text-transform: uppercase;
}
.intro p { max-width: 54ch; margin: 0 auto 2em; font-size: 17px; color: var(--quiet); }
.intro p a { color: var(--ink); font-weight: 500; text-decoration-color: var(--pink); text-underline-offset: 4px; }
.years { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.years a {
  padding: 7px 16px; border: 1px solid var(--ink);
  font-weight: 400; letter-spacing: .08em; text-decoration: none; font-variant-numeric: tabular-nums;
}
.years a:hover { background: var(--ink); color: var(--paper); }

/* Grid */
.year { margin-bottom: calc(var(--gap) * 3); }
.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(176px, 216px));
  justify-content: center;
}
@media (max-width: 420px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.year-tile {
  --clip: clamp(12px, 1.3vw, 16px); /* size of the corner cut */
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  aspect-ratio: 4 / 5; padding: 12px;
  background: var(--pink-light); /* this layer shows as the stroke */
  color: var(--ink); text-align: center;
  clip-path: polygon(0 0, calc(100% - var(--clip)) 0, 100% var(--clip), 100% 100%, 0 100%);
}
/* pink fill inset by the stroke width, same clipped corner */
.year-tile::before {
  content: ""; position: absolute; inset: var(--stroke); z-index: -1;
  background: var(--pink);
  clip-path: polygon(0 0, calc(100% - var(--clip) + var(--stroke) * .41) 0, 100% calc(var(--clip) - var(--stroke) * .41), 100% 100%, 0 100%);
}
.year-tile h2 {
  margin: 0; font-weight: 600; line-height: 1;
  font-size: clamp(26px, 2.4vw, 34px); letter-spacing: .08em; margin-right: -.08em;
}
.year-tile span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }

.tile a {
  display: flex; flex-direction: column; height: 100%;
  background: var(--paper); text-decoration: none; text-align: center;
  border: var(--story-stroke);
}
.tile img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: #d6d6d2;
}
.tile-title {
  padding: 14px 12px 4px;
  font-weight: 500; font-size: 13px; line-height: 1.35;
  letter-spacing: .1em; text-transform: uppercase;
}
.tile time {
  margin-top: auto; padding: 2px 12px 14px;
  font-size: 13px; color: var(--quiet); font-variant-numeric: tabular-nums;
}
.tile a:hover .tile-title, .tile a:focus-visible .tile-title { color: var(--pink); }

/* Footer */
.site-foot {
  padding: 32px 16px; background: var(--ink); color: var(--paper);
  font-size: 13px; letter-spacing: .08em; text-align: center;
}
.site-foot p { margin: 0; }

/* ---------- Post pages ---------- */
main.post { max-width: 980px; padding-top: clamp(40px, 7vw, 80px); padding-bottom: clamp(48px, 8vw, 96px); }

.post-head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.post-head time {
  display: block; margin-bottom: 14px;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--quiet);
}
.post-head h1 {
  margin: 0;
  font-weight: 400; line-height: 1.15;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: .12em; margin-right: -.12em;
  text-transform: uppercase;
}

.post-media { margin: 0 0 clamp(32px, 5vw, 56px); }
.post-media img, .post-media video, .post-media iframe {
  display: block; width: 100%; height: auto; border: var(--story-stroke); background: var(--paper);
}
.post-media iframe { aspect-ratio: 16 / 9; }

/* Reading column: centered on the page, text set left for easy reading */
.post-body {
  max-width: 62ch; margin: 0 auto;
  font-size: 18px; line-height: 1.75;
}
.post-body p { margin: 0 0 1.4em; }
.post-body b, .post-body strong { font-weight: 600; }
.post-body a { color: var(--ink); text-decoration-color: var(--pink); text-underline-offset: 4px; }
.post-body a:hover { color: var(--pink); }
.post-body img, .post-body video, .post-body iframe { max-width: 100%; height: auto; }

/* Newer / all / older */
.post-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  max-width: 62ch; margin: clamp(40px, 6vw, 64px) auto 0; padding-top: 24px;
  border-top: 1px solid #c2c2c2;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.post-nav a { text-decoration: none; }
.post-nav a:hover { color: var(--pink); }
.post-nav span { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .16em; color: var(--quiet); }
.post-nav .newer { text-align: left; }
.post-nav .older { text-align: right; }
.post-nav .all { padding: 7px 14px; border: 1px solid var(--ink); white-space: nowrap; }
@media (max-width: 520px) {
  .post-nav { grid-template-columns: 1fr 1fr; }
  .post-nav .all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

/* Extra media: image sets, audio, embedded video, and photo notes */
.post-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.post-gallery img { aspect-ratio: 1; object-fit: cover; }
.post-media audio { display: block; width: 100%; margin-top: 12px; }
.post-media iframe { height: auto; }
.post-note { font-size: 14px; line-height: 1.6; color: var(--quiet); letter-spacing: .02em; }

/* ---------- Contact ---------- */
main.contact { max-width: 980px; padding-top: clamp(32px, 6vw, 64px); padding-bottom: clamp(56px, 9vw, 112px); }
.contact-image { margin: 0; }
.contact-image img {
  display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  border: var(--story-stroke); background: #d6d6d2;
}
.contact .intro { padding-top: clamp(36px, 6vw, 64px); }
.contact-ways {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 640px; margin: 0 auto;
}
.contact-ways a {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 16px; height: 100%;
  background: var(--paper); border: var(--story-stroke);
  text-align: center; text-decoration: none;
  font-weight: 500; font-size: 17px; letter-spacing: .04em;
}
.contact-ways span { font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--quiet); }
.contact-ways em { font-style: normal; font-size: 14px; color: var(--quiet); }
.contact-ways a:hover, .contact-ways a:focus-visible { border-color: var(--pink); }
.contact-ways a:hover em { color: var(--pink); }