/* home.css — the front page. Loaded after style.css; everything is scoped under body.home.
 *
 * Layout: full-bleed bands (hero, memory map, about) with a centered .wrap column.
 * The hero is a printed "plate": the artwork keeps its left ~40% empty so the wordmark
 * can sit on the paper. Container query units (cqw) scale that overlay with the plate.
 */

html.home { max-width: none; padding: 0; }
/* Only the memory band is clipped (its map draws past its box). Clipping the whole body hid real
   overflow, such as enlarged text or a long title, instead of letting it scroll. The hero is not
   clipped: its registration marks sit 11px outside the plate, inside the page gutter. */
.home .memory { overflow-x: clip; }
.home .wrap {
  width: min(100% - 2 * clamp(1rem, 4vw, 2rem), 75rem);
  margin-inline: auto;
}

.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  padding: 0.6rem 1rem; background: var(--bg); color: var(--fg);
  font-family: var(--f-mono); font-size: 0.8rem;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ── Masthead ────────────────────────────────────────────────────────────── */
.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-top: 1.7rem;
}
.brand {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--head);
  text-decoration: none;
}
.brand:hover { color: var(--head); text-decoration: none; }
.site-nav {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.site-nav a, .site-nav muninn-search {
  color: var(--fg-2);
  text-decoration: none;
  font: inherit;
  letter-spacing: inherit;
}
.site-nav a { padding: 0.2rem 0; background: linear-gradient(var(--coral), var(--coral)) 0 100% / 0 2px no-repeat; transition: background-size 0.25s, color 0.15s; }
.site-nav a:hover { color: var(--head); background-size: 100% 2px; text-decoration: none; }
.site-nav muninn-search { display: inline-block; float: none; margin: 0; }

/* ── Hero plate ──────────────────────────────────────────────────────────── */
.hero { margin-top: 1.6rem; }
.plate {
  position: relative;
  margin: 0;
  container-type: inline-size;
}
.plate picture { display: block; }
.plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2400 / 1018;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: var(--shadow);
  background: var(--bg-2);
}
/* registration marks at the corners of the printed image */
.plate picture { position: relative; }
.plate picture::before, .plate picture::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 6px, var(--coral) 6.5px 7.5px, transparent 8px),
    linear-gradient(var(--coral), var(--coral)) 50% 50% / 1px 100% no-repeat,
    linear-gradient(var(--coral), var(--coral)) 50% 50% / 100% 1px no-repeat;
  opacity: 0.8;
}
.plate picture::before { top: -11px; left: -11px; }
.plate picture::after { bottom: -11px; right: -11px; }

.plate-copy {
  position: absolute;
  left: 4.5%;
  left: 4.5cqw;
  top: 35%;
  transform: translateY(-50%);
  width: 38%;
  width: 38cqw;
  max-width: 34rem;
}
.plate-copy .eyebrow { margin-bottom: 0.9rem; font-size: 0.72rem; }
@supports (width: 1cqw) { .plate-copy .eyebrow { margin-bottom: 1.4cqw; font-size: clamp(0.62rem, 0.9cqw, 0.74rem); } }
.wordmark {
  margin: 0;
  font-size: clamp(3.4rem, 9vw, 9.6rem);
  font-size: clamp(3.4rem, 12.4cqw, 9.6rem);
  font-weight: 650;
  line-height: 0.88;
  letter-spacing: -0.038em;
  text-shadow: 0.028em 0.022em 0 var(--coral-a);
  color: var(--head);
}
.deck {
  margin: 0.8rem 0 0;
  margin-top: 1.1cqw;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 2rem);
  font-size: clamp(1.15rem, 2.6cqw, 2rem);
  line-height: 1.15;
  color: var(--fg);
}
/* The light art prints the memory graph's first nodes and hairlines just under the deck. A paper
   halo keeps them from running through the letters. The night art is clear, so dark has none,
   and the stacked layout (760px and below) has no art behind the copy. */
@media (min-width: 761px) and (prefers-color-scheme: light) {
  .deck { text-shadow: 0 0 0.3em var(--plate), 0 0 0.6em var(--plate), 0 0 1em var(--plate); }
  .wordmark { text-shadow: 0.028em 0.022em 0 var(--coral-a), 0 0 0.12em var(--plate), 0 0 0.3em var(--plate); }
}
/* intro row under the plate: statement left, buttons right */
.hero-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem 2.4rem;
  margin-top: 1.7rem;
}
.hero-intro .statement {
  margin: 0;
  max-width: 40rem;
  font-size: clamp(1.08rem, 0.98rem + 0.5vw, 1.34rem);
  line-height: 1.5;
  color: var(--fg);
}
.cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0; }
.btn {
  display: inline-block;
  padding: 0.62rem 1.15rem;
  border: 1.5px solid var(--head);
  border-radius: 999px;
  background: var(--head);
  color: var(--bg);
  font-family: var(--f-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--link); border-color: var(--link); color: var(--bg); text-decoration: none; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--head); }
.btn--ghost:hover { background: var(--head); border-color: var(--head); color: var(--bg); }

.plate figcaption {
  margin-top: 0.75rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* ── Section labels ──────────────────────────────────────────────────────── */
.section-label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1.4rem;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-ink);
}
.section-label::before { content: ""; width: 1.7rem; height: 5px; background: var(--sage); flex: none; }
.section-label::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.section-label a { color: inherit; text-decoration: none; margin-left: auto; padding-left: 1rem; order: 3; }
.section-label a:hover { color: var(--link); text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

/* ── Latest writing ──────────────────────────────────────────────────────── */
.latest { margin-top: clamp(3.2rem, 7vw, 5.5rem); }
.latest-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: repeat(4, auto);
  gap: 0 clamp(1.5rem, 4vw, 3.2rem);
}
.latest-list > li { margin: 0; }
.latest-list > li:first-child { grid-row: 1 / span 4; }
.card {
  position: relative;
  display: grid;
  color: inherit;
  text-decoration: none;
}
.card:hover { color: inherit; text-decoration: none; }
.card-art {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: var(--bg-2);
  aspect-ratio: 4 / 3;
}
.card-art img {
  display: block; width: 100%; height: 100%; margin: 0;
  object-fit: cover; border-radius: 0; background: var(--plate);
  transition: transform 0.6s ease;
}
.card:hover .card-art img { transform: scale(1.04); }
.card-body { display: block; min-width: 0; }
.card time {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.card-title {
  display: block;
  margin: 0.35rem 0 0.4rem;
  font-family: var(--f-display);
  font-size: 1.22rem;
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--head);
  text-wrap: balance;
  overflow-wrap: anywhere;
  background: linear-gradient(var(--coral), var(--coral)) 0 100% / 0 2px no-repeat;
  transition: background-size 0.3s ease;
  width: fit-content;
  max-width: 100%;
}
.card:hover .card-title { background-size: 100% 2px; }
.card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.latest-list > li:first-child .card { gap: 1.2rem; }
.latest-list > li:first-child .card-art { aspect-ratio: 16 / 8; } /* a sigil at poster scale reads as a placeholder; this keeps it a banner */
.latest-list > li:first-child .card-title { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.6rem); line-height: 1.07; letter-spacing: -0.02em; margin-top: 0.5rem; }
.latest-list > li:first-child .card-desc { -webkit-line-clamp: 4; font-size: 1.02rem; }
.latest-list > li:not(:first-child) .card {
  grid-template-columns: min(6.6rem, 28vw) minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.latest-list > li:nth-child(2) .card { border-top: 2px solid var(--head); padding-top: 1.05rem; }
.latest-list > li:not(:first-child) .card-title { font-size: 1.1rem; margin-top: 0.25rem; }
.latest-list > li:not(:first-child) .card-desc { -webkit-line-clamp: 2; font-size: 0.88rem; }

/* ── Memory map ──────────────────────────────────────────────────────────── */
.memory {
  margin-top: clamp(3.4rem, 8vw, 6rem);
  padding: clamp(2.6rem, 6vw, 4.4rem) 0 clamp(2rem, 4vw, 3rem);
  background: #0c1226 var(--grain);
  color: #e8e2d4;
  border-block: 1px solid #1d2748;
}
:root:not([data-theme="light"]) .memory { --on-night: #e8e2d4; }
.memory-head { max-width: 40rem; }
/* the eyebrow holds running text with two counts in it, so it is a block with an inline mark, not a flex row
   (a flex row made each count and each phrase its own column at 320px) */
.memory .eyebrow { display: block; color: #9fc7a3; }
.memory .eyebrow::before { display: inline-block; margin-right: 0.7rem; vertical-align: middle; background: #9fc7a3; }
.memory h2 {
  margin: 0 0 0.7rem;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.028em;
  color: #e8e2d4;
  text-shadow: 0.035em 0.028em 0 rgba(240, 138, 115, 0.35);
}
.memory-head > p:not(.eyebrow) { margin: 0; font-size: 1.02rem; color: #c9c3b4; }
.memory-stage {
  display: block;
  margin-top: 2rem;
  min-height: min(70vh, 38rem);
  border: 1px solid #1d2748;
  border-radius: 3px;
  background: radial-gradient(ellipse at 50% 40%, #121a35, #0a0f20);
  position: relative;
}
/* reserve the height the map takes on narrow screens (memory-map.js switches to its narrow stage below 610px) */
@media (max-width: 610px) { .memory-stage { min-height: max(min(86vh, 52rem), 34rem); } }
.memory-note { margin: 1rem 0 0; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: #a8a291; }
.memory a { color: #f08a73; }
/* Forced colors (Windows high contrast) swap the band's night ground for the system Canvas, but the
   map draws its points, rings and labels in fixed cream and coral. With a light Canvas those vanish.
   The band is one self-contained picture with its own ground, so it keeps its own palette; the
   property inherits into the map's shadow tree. */
@media (forced-colors: active) {
  .memory, .memory memory-map { forced-color-adjust: none; }
}

/* ── Rooms ───────────────────────────────────────────────────────────────── */
.rooms { margin-top: clamp(3.4rem, 8vw, 6rem); }
.room-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.8rem);
}
.room-grid > li { margin: 0; }
.room { position: relative; display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.room:hover { color: inherit; text-decoration: none; }
.room-art {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  background: var(--bg-2);
  box-shadow: var(--shadow);
}
.room-art img {
  display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: 0;
  background: var(--plate);
  transition: transform 0.7s ease;
}
.room:hover .room-art img { transform: scale(1.05) rotate(-0.4deg); }
.room-name {
  display: block;
  margin: 0.9rem 0 0.2rem;
  font-family: var(--f-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--head);
  width: fit-content;
  background: linear-gradient(var(--coral), var(--coral)) 0 100% / 0 3px no-repeat;
  transition: background-size 0.3s;
}
.room:hover .room-name { background-size: 100% 3px; }
.room-desc { display: block; font-size: 0.92rem; line-height: 1.5; color: var(--fg-2); }
.room-count {
  display: block;
  margin-top: auto; /* the count sits at the foot of every card, whatever the description's length */
  padding-top: 0.55rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ── About ───────────────────────────────────────────────────────────────── */
.about { margin-top: clamp(3.4rem, 8vw, 6rem); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.6rem, 5vw, 4rem);
  align-items: center;
}
.about-art { margin: 0; }
.about-art img { display: block; width: 100%; border-radius: 3px; box-shadow: var(--shadow); background: var(--plate); }
.about-copy h2 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.026em;
}
.about-copy p { max-width: 34rem; }
.about-copy .small { font-size: 0.9rem; color: var(--fg-2); }
.links { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; margin-top: 1.4rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-foot { margin-top: clamp(3.4rem, 8vw, 6rem); padding-bottom: 3rem; }
.site-foot footer { margin-top: 0; }
.site-foot .cols { display: flex; flex-wrap: wrap; gap: 0.6rem 2.4rem; justify-content: space-between; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .latest-list { grid-template-columns: 1fr; grid-template-rows: none; }
  .latest-list > li:first-child { grid-row: auto; margin-bottom: 1.4rem; }
  .about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .plate { display: flex; flex-direction: column; }
  .plate picture { order: 0; }
  .plate figcaption { order: 1; }
  .plate-copy { order: 2; }
  /* a landscape crop of the portrait art, so the wordmark starts on the first screen; the height
     cap keeps it from filling a tall tablet-width window */
  .plate img { aspect-ratio: 4 / 3; max-height: 30rem; max-height: min(60svh, 30rem); object-position: 50% 8%; }
  .plate-copy {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    padding-top: 1.6rem;
  }
  .plate-copy .eyebrow { font-size: 0.72rem; margin-bottom: 0.7rem; }
  .wordmark { font-size: min(24vw, 7rem); }
  .deck { font-size: 1.45rem; margin-top: 0.6rem; }
  .hero-intro { grid-template-columns: 1fr; margin-top: 1.2rem; }
  .hero-intro .statement { font-size: 1.1rem; }
  .masthead { padding-top: 1.3rem; }
  /* 44px touch targets for the primary navigation; the underline stays under the text */
  .site-nav { row-gap: 0; }
  .site-nav a { padding-block: 0.74rem; background-position: 0 calc(100% - 0.55rem); }
  /* the section link grows its hit area with padding that margin takes back, so the heading row does not move */
  .section-label a { padding-block: 0.9rem; margin-block: -0.9rem; }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) {
  .plate img { object-position: 50% 62%; } /* the night art sits lower in its frame */
}
/* Landscape phones: lead with the title, then the art. */
@media (max-width: 760px) and (max-height: 520px) {
  .plate-copy { order: -1; padding: 0 0 1.2rem; }
}
@media (max-width: 400px) {
  .section-label::before { display: none; }
  .section-label { letter-spacing: 0.08em; }
}
@media (max-width: 640px) {
  .plate figcaption { flex-direction: column; gap: 0.2rem; }
}
@media (max-width: 480px) {
  .site-nav { gap: 0.3rem 1.05rem; font-size: 0.7rem; letter-spacing: 0.06em; }
  .section-label { flex-wrap: wrap; row-gap: 0.3rem; }
  .section-label::after { display: none; }
  .room-grid { grid-template-columns: 1fr; }
  .latest-list > li:not(:first-child) .card { grid-template-columns: min(5.4rem, 28vw) minmax(0, 1fr); }
}
@media (max-width: 360px) {
  .site-nav { column-gap: 0.65rem; font-size: 0.68rem; letter-spacing: 0.02em; } /* all five links fit on one row at 320px */
}
@media (prefers-reduced-motion: reduce) {
  .card-art img, .room-art img, .btn, .site-nav a, .card-title, .room-name { transition: none; }
  .room:hover .room-art img, .card:hover .card-art img { transform: none; }
}