:root {
  --bg: #0d120f;
  --plate: #171f1c;
  --ink: #e0e8e0;
  --muted: #85998f;
  --crest: #db8547;
  --ridge: #619e85;
  --line: #2c3832;
  --edge: 28px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  line-height: 1.5;
}

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

a { color: var(--crest); }

.margin-dots {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 4;
}

.margin-dots a {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--crest);
  display: grid;
  place-items: center;
}

.margin-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}

.margin-dots a:hover span,
.margin-dots a:focus-visible span,
.margin-dots a[aria-current="true"] span {
  background: var(--crest);
}

.crest {
  position: relative;
  min-height: 88vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: 32px;
  padding: 12vh var(--edge) 10vh 8vw;
  overflow: hidden;
}

.crest-band {
  position: absolute;
  left: -10%;
  top: 18%;
  width: 78%;
  height: 46%;
  background: linear-gradient(115deg, transparent 0%, rgba(219, 133, 71, 0.28) 42%, rgba(97, 158, 133, 0.18) 100%);
  transform: rotate(-8deg);
  z-index: 0;
}

.crest-copy,
.crest-plate { position: relative; z-index: 1; }

.kicker,
.index {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  color: var(--crest);
}

h1 {
  font-size: clamp(4.2rem, 10vw, 8rem);
  line-height: 0.86;
  margin: 0.1em 0 0.15em;
  font-weight: 500;
}

.tagline {
  max-width: 28ch;
  font-size: 1.35rem;
  color: var(--muted);
}

.crest-plate {
  margin: 0;
  border: 1px solid var(--line);
  transform: translateY(-8%) rotate(2.5deg);
}

.crest-plate img { aspect-ratio: 16 / 10; object-fit: cover; }

.shape,
.prints,
.notes {
  padding: 72px var(--edge) 80px 8vw;
}

.intro { max-width: 36rem; margin-bottom: 28px; }

.intro-right { margin-left: auto; text-align: right; }

.intro h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: 0.1em 0; font-weight: 500; }

.bento {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 14px;
}

.tile {
  background: var(--plate);
  border: 1px solid var(--line);
  padding: 22px;
}

.tile h3 { margin: 0 0 8px; font-size: 1.35rem; font-weight: 500; }

.tile p { margin: 0; color: var(--muted); }

.tile-tall {
  grid-row: span 2;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.tile-tall img { aspect-ratio: 1 / 1; object-fit: cover; }

.tile-tall h3,
.tile-tall p { padding: 0 22px; }

.tile-tall h3 { padding-top: 18px; }

.tile-tall p { padding-bottom: 22px; }

.tile-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  align-items: center;
  padding: 0 22px 0 0;
}

.tile-wide img { height: 100%; min-height: 140px; object-fit: cover; }

.scatter {
  position: relative;
  min-height: 640px;
  margin-right: 36px;
}

.polaroid {
  position: absolute;
  width: min(240px, 42vw);
  background: #efe8dc;
  color: #1a221c;
  padding: 10px 10px 28px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.polaroid img { aspect-ratio: 9 / 16; object-fit: cover; }

.polaroid figcaption {
  margin-top: 8px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.tilt-a { left: 2%; top: 10px; transform: rotate(-7deg); }
.tilt-b { left: 36%; top: 70px; transform: rotate(5deg); }
.tilt-c { right: 4%; top: 24px; transform: rotate(-3deg); }

.accordion { max-width: 46rem; }

.accordion details {
  border-top: 1px solid var(--line);
}

.accordion summary {
  cursor: pointer;
  padding: 18px 0;
  font-size: 1.6rem;
  list-style: none;
}

.accordion summary::-webkit-details-marker { display: none; }

.panel { padding: 0 0 22px; max-width: 62ch; }

.panel p { color: var(--muted); }

.notes {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 28px;
  align-items: start;
}

.notes .intro,
.notes .accordion { grid-column: 1; }

.notes-still {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  border: 1px solid var(--line);
}

.notes-still img { aspect-ratio: 1 / 1; object-fit: cover; }

.colophon {
  display: flex;
  gap: 22px;
  padding: 28px 8vw 48px;
  border-top: 1px solid var(--line);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.8rem;
}

@media (max-width: 800px) {
  .crest,
  .bento,
  .notes,
  .tile-wide {
    grid-template-columns: 1fr;
  }

  .tile-tall { grid-row: auto; }

  .crest { padding-top: 18vh; }

  .scatter { min-height: 0; display: flex; flex-direction: column; gap: 18px; }

  .polaroid { position: static; width: min(280px, 80%); }

  .tilt-a, .tilt-b, .tilt-c, .tilt-d, .tilt-e { transform: none; }

  .tilt-b { align-self: flex-end; }

  .notes-still { grid-column: 1; grid-row: auto; }

  .intro-right { text-align: left; margin-left: 0; }

  .margin-dots { right: 8px; }
}