/* Ælfheim studio site
   Layout: one quiet column over the garden photograph; the photograph is the only loud thing.
   Deep time, old knowledge, new ways: an inscriptional display face, a book face for reading,
   and a mono for the small working labels (shared with A⁷'s page elements). */
:root {
  color-scheme: dark;
  --night: #0b1411;      /* shadow under the far bank */
  --pond: #11201b;       /* deep water */
  --stone: #e7e5d9;      /* lichen on the stones: main text */
  --moss: #a4ab9d;       /* secondary text */
  --reed: #6c7568;       /* faint text, hairlines */
  --water: #7fb1a3;      /* reflection teal: links and accents */
  --maple: #c65a43;      /* the one red tree: used once */
  --rule: rgba(231, 229, 217, 0.16);

  --display: "Cormorant Garamond", "Cormorant", "EB Garamond", Garamond, Georgia, serif;
  --text: "Spectral", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --measure: 34rem;
  --wide: 72rem;
}

* { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--stone);
  font-family: var(--text);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--water); outline-offset: 4px; }

.wrap { width: min(100% - 3rem, var(--wide)); margin-inline: auto; }

/* ---------- Header ---------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  padding-top: env(safe-area-inset-top, 0px);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.75rem;
}
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  text-decoration: none;
}
.mark img { width: 14px; height: 42px; }
.nav { display: flex; gap: clamp(1.1rem, 3vw, 2.25rem); }
.nav a, .label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav a { color: var(--stone); opacity: 0.8; transition: opacity .2s ease; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; }
.nav a[aria-current="page"] { border-bottom: 1px solid var(--water); padding-bottom: 2px; }

/* ---------- Hero: the garden ---------- */
.hero {
  position: relative;
  min-height: clamp(34rem, 88svh, 60rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero > picture, .hero > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 78%;
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,20,17,.55) 0%, rgba(11,20,17,0) 22%),
    linear-gradient(0deg, var(--night) 0%, rgba(11,20,17,.6) 14%, rgba(11,20,17,0) 40%),
    rgba(11,20,17,.38);
}
.hero .wrap { padding-block: clamp(6rem, 12vh, 8rem) clamp(3rem, 8vh, 5.5rem); }
.lockup { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(1.5rem, 4vh, 2.75rem); }
.lockup-rune { width: clamp(30px, 3.4vw, 46px); height: auto; filter: drop-shadow(0 2px 18px rgba(0,0,0,.35)); }
.wordmark { margin: 0; line-height: 0; }
.wordmark img { width: clamp(260px, 48vw, 720px); height: auto; filter: drop-shadow(0 2px 24px rgba(0,0,0,.4)); }
.tagline {
  margin: 0;
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--stone);
  opacity: .9;
}

/* ---------- Sections ---------- */
section { padding-block: clamp(4rem, 10vw, 7.5rem); }
section + section { border-top: 1px solid var(--rule); }
.label { display: block; color: var(--water); margin-bottom: 1.4rem; }

.statement p {
  margin: 0;
  max-width: 30ch;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.85rem, 4vw, 2.9rem);
  line-height: 1.22;
  text-wrap: balance;
}
.statement .more { margin-top: 2rem; }

.text-link {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--water);
  border-bottom: 1px solid rgba(127, 177, 163, .45);
  padding-bottom: 3px;
  transition: color .2s ease, border-color .2s ease;
}
.text-link:hover { color: var(--stone); border-color: var(--stone); }

/* ---------- Project: A⁷ ---------- */
.project {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.project figure { margin: 0; }
.project figure img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.project figcaption { margin-top: .9rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--reed); text-transform: uppercase; }
.project-copy { min-width: 0; }
.project h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(3.4rem, 7vw, 5.5rem);
  line-height: 1;
  letter-spacing: .02em;
}
.project .sub { margin: .5rem 0 1.6rem; font-style: italic; color: var(--moss); font-size: 1.2rem; }
.project p { margin: 0 0 1.1rem; max-width: var(--measure); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.25rem .8rem;
  border: 1px solid rgba(231, 229, 217, .35);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--stone);
  transition: background .2s ease, border-color .2s ease;
}
.button:hover { background: rgba(231, 229, 217, .07); border-color: var(--stone); }
.button.primary { border-color: var(--water); color: var(--water); }
.button.primary:hover { background: rgba(127, 177, 163, .12); color: var(--stone); }

.sup { font-size: .5em; vertical-align: .82em; margin-left: .04em; letter-spacing: 0; }

.a7-logo { line-height: 0; }
.a7-logo img { width: clamp(104px, 11vw, 148px); height: auto; }
.a7-tagline { margin: 1.4rem 0 0 !important; font-family: var(--mono); font-size: .74rem; letter-spacing: .32em; text-transform: uppercase; color: var(--stone); }

.pillars { margin: 1.6rem 0 1.8rem; display: grid; gap: 0; max-width: var(--measure); }
.pillars div { padding: .9rem 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; }
.pillars div:last-child { border-bottom: 1px solid var(--rule); }
.pillars dt { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--water); padding-top: .3rem; }
.pillars dd { margin: 0; font-size: 1.02rem; line-height: 1.55; }
@media (max-width: 560px) { .pillars div { grid-template-columns: 1fr; gap: .3rem; } }

.world { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.world-intro p { margin: 0 0 1.1rem; max-width: 40rem; }
.world-intro .lede-line { margin-top: 1.6rem; font-family: var(--display); font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.25; text-wrap: balance; }
.world .pillars { margin: 0 0 1.1rem; }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.way { min-width: 0; display: flex; flex-direction: column; }
.way-image { display: block; margin-bottom: 1.6rem; }
.way-image img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; border-radius: 3px; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.way .label { margin-bottom: .7rem; }
.way h3 { margin: 0 0 .8rem; font-family: var(--display); font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.1; }
.way p { margin: 0; max-width: 34rem; }
.way .actions { margin-top: 1.6rem; }

/* ---------- A⁷ showcase ---------- */
.showcase { padding-top: 0; border-top: 0 !important; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.5rem, 1.2vw, 1rem); margin: 0; padding: 0; list-style: none; }
.gallery li { min-width: 0; }
.gallery.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gallery img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 3px; }
.gallery-note { margin: 1rem 0 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--reed); }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; }
.contact h2 { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; }
.contact .address { margin: 1rem 0 0; font-size: 1.25rem; }
.contact .address a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.contact .address a:hover { border-color: var(--water); }
.elsewhere { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--rule); padding-block: 2rem calc(2rem + env(safe-area-inset-bottom, 0px)); }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.site-footer p { margin: 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--reed); }
.site-footer .red { color: var(--maple); }

/* ---------- Studio page ---------- */
.page-head { padding-block: calc(8rem + env(safe-area-inset-top, 0px)) 0; }
.page-head h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.page-head .lede { margin: 1.5rem 0 0; max-width: 36ch; font-size: clamp(1.2rem, 2.4vw, 1.55rem); line-height: 1.5; color: var(--stone); text-wrap: balance; }
.band { margin-top: clamp(3rem, 7vw, 5rem); }
.band img { width: 100%; height: clamp(9rem, 22vw, 17rem); object-fit: cover; object-position: 20% 60%; }

.chapters { display: grid; gap: 0; }
.chapter {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  padding-block: clamp(2.75rem, 6vw, 4.25rem);
  border-top: 1px solid var(--rule);
}
.chapter:first-child { border-top: 0; }
.chapter h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.85rem; line-height: 1.2; }
.chapter .body { min-width: 0; max-width: var(--measure); }
.chapter .body p { margin: 0 0 1.1rem; }
.chapter .body p:last-child { margin-bottom: 0; }
.chapter .word { font-family: var(--display); font-weight: 500; font-size: 1.6rem; color: var(--stone); }
.chapter .say { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; color: var(--moss); }
.triad { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.triad li { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--water); }

/* ---------- Narrow ---------- */
@media (max-width: 860px) {
  .project { grid-template-columns: 1fr; }
  .world, .ways { grid-template-columns: 1fr; }
  .gallery, .gallery.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery.three li:first-child { grid-column: 1 / -1; }
  .contact { grid-template-columns: 1fr; align-items: start; }
  .chapter { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 560px) {
  .wrap { width: min(100% - 2.25rem, var(--wide)); }
  .site-header .wrap { padding-block: 1.25rem; }
  .hero { min-height: clamp(30rem, 82svh, 44rem); }
  .page-head { padding-top: calc(6.5rem + env(safe-area-inset-top, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}