/* Alanna Mahon portfolio — v2, dark editorial theme from Captain's template.
   Palette + spacing lifted from template-extract inline CSS (authoritative).
   FONT RULE: nav menu links + ALANNA MAHON wordmark keep "Helvetica Neue"
   (v1 letterspaced caps); everything else uses the template's serif/sans. */

:root {
  --bg: #171310;
  --header-bg: rgba(23, 19, 16, 0.92);
  --ink: #F2ECE2;
  --sub: #C7BCAD;
  --muted: #948878;
  --line: #2E2721;
  --tile: #241F19;
  --panel: #1D1813;
  --accent: #E0568A;
  --accent-hover: #C84C77;
  --scrim: rgba(27, 23, 20, 0.45);
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", "Instrument Serif", serif;
  --pad-x: 32px;
}

html[data-theme="light"] {
  --bg: #FAF7F2;
  --header-bg: rgba(250, 247, 242, 0.92);
  --ink: #1B1714;
  --sub: #4A4238;
  --muted: #8A7E6F;
  --line: #E7DFD3;
  --tile: #EFE8DC;
  --panel: #F3EDE2;
  --accent: #B3305F;
  --accent-hover: #94284F;
  --scrim: rgba(27, 23, 20, 0.35);
}

* { box-sizing: border-box; }

/* In-page jumps (nav ABOUT -> index.html#about) glide instead of snapping;
   switched off for reduced-motion users below. */
html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-hover); }

img { display: block; }

.serif { font-family: var(--serif); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 10px 18px;
  font-size: 13px;
  letter-spacing: 0.1em;
}
.skip-link:focus { left: 12px; top: 12px; color: #fff; }

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

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Wordmark — Captain's font rule: Helvetica Neue, letterspaced caps (v1 style) */
.wordmark {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.wordmark:hover { color: var(--accent-hover); }

.header-right { display: flex; align-items: center; gap: 14px; }

/* Nav menu — Captain's font rule: Helvetica Neue */
.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.site-nav a { padding: 8px 0; border-bottom: 2px solid transparent; }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
/* Home-page scroll spy: once site.js arms the nav (.nav-spy), the class
   drives the underline so it can move HOME -> ABOUT while the About
   section is in view. aria-current="page" stays on HOME (semantics);
   without JS the rule above remains the fallback. */
.site-nav.nav-spy a[aria-current="page"] { border-bottom-color: transparent; }
.site-nav.nav-spy a.nav-active { border-bottom-color: var(--accent); }

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  padding: 0;
}
.theme-toggle:hover { color: var(--accent-hover); border-color: var(--accent-hover); }

/* Hamburger (mobile) — template's 3-bar button, third bar short + pink */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 8px;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--ink); }
.hamburger span:last-child { width: 14px; background: var(--accent); }

/* ---------- Mobile drawer ---------- */

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--scrim);
  animation: scrimIn 0.2s ease;
  border: none;
  padding: 0;
  cursor: pointer;
  display: none;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: min(320px, 85vw);
  background: var(--bg);
  overflow-y: auto;
  box-shadow: -12px 0 40px rgba(27, 23, 20, 0.18);
  display: none;
  flex-direction: column;
}

.drawer.open { display: flex; animation: drawerIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.drawer-scrim.open { display: block; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.drawer-head .drawer-title { font-family: var(--serif); font-size: 20px; }
.drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  padding: 8px 10px;
  color: var(--ink);
}

.drawer-nav { display: flex; flex-direction: column; padding: 12px 20px 40px; font-family: var(--sans); }
.drawer-nav > a {
  padding: 14px 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
}
.drawer-nav > a.drawer-contact { margin-top: 22px; border-bottom: none; border-top: 1px solid var(--line); }
.drawer-group-label {
  padding: 18px 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.drawer-nav > a.drawer-cat {
  padding: 10px 0 10px 12px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--sub);
  border-bottom: none;
  border-left: 2px solid var(--line);
}
.drawer-nav .drawer-cat[aria-current="page"] { color: var(--accent); border-left-color: var(--accent); }
/* Home-page scroll spy mirror: pink text is the drawer's active treatment
   (drawer-cat precedent above); tracks HOME <-> ABOUT like the header. */
.drawer-nav.nav-spy > a.nav-active { color: var(--accent); }

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

main { flex: 1; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad-x); }

.page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px var(--pad-x) 64px;
  animation: fadeUp 0.4s ease both;
}

/* ---------- Home ---------- */

.home-main { animation: fadeUp 0.5s ease both; }

.hero {
  position: relative;
  height: 82vh;
  overflow: hidden;
  background: #1B1714;
}
.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27, 23, 20, 0.72) 0%, rgba(27, 23, 20, 0.1) 55%);
}
.hero-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 var(--pad-x) 64px;
  max-width: 1200px;
  margin: 0 auto;
}
.hero-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #F2C1D4;
  margin-bottom: 12px;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 72px;
  line-height: 1.02;
  color: #FAF7F2;
  margin: 0 0 18px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  border-radius: 999px;
}
.btn-solid { background: #FAF7F2; color: #1B1714; }
.btn-solid:hover { background: #fff; color: #1B1714; }
.btn-ghost { background: transparent; color: #FAF7F2; border: 1px solid rgba(250, 247, 242, 0.6); }
.btn-ghost:hover { color: #fff; border-color: #fff; }
.hero :focus-visible { outline-color: #FAF7F2; }

.bio { padding-top: 72px; padding-bottom: 72px; }
.bio p {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.35;
  max-width: 760px;
  margin: 0;
}

.featured { border-top: 1px solid var(--line); padding-top: 56px; padding-bottom: 88px; }

/* Pink letterspaced section label — one system across home sections and
   the about page (hero keeps its own over-image tint). */
.section-eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin: 0 0 14px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  margin: 0;
}
.all-work-link { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; color: var(--accent); }

.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* ---------- Category cards (home + work) ---------- */

.cat-card { display: flex; flex-direction: column; gap: 10px; }
.cat-card .cover {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  background: var(--tile);
}
.cat-card .cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.cat-card:hover .cover img { transform: scale(1.03); }
.cat-card .card-meta { display: flex; flex-direction: column; gap: 2px; }
.cat-card .card-name { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; }
.cat-card .card-tag { font-size: 12px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }

/* ---------- Work page ---------- */

.page-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  margin: 0 0 8px;
}
.work-intro { font-size: 16px; color: var(--muted); margin: 0 0 12px; max-width: 620px; }

.group-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 40px; padding: 0; list-style: none; }
.group-chips a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--sub);
  display: inline-block;
}
.group-chips a:hover { border-color: var(--accent); color: var(--accent); }

.work-group {
  margin-bottom: 56px;
  /* Group chips and gallery breadcrumbs jump here (#g-<group>): clear the
     64px sticky header, plus room for the group heading to sit below it
     rather than flush against it. */
  scroll-margin-top: 88px;
}
.group-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 22px;
}
.group-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  margin: 0;
}
.group-count { font-size: 13px; color: var(--muted); }

.group-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.group-grid .cat-card .cover { aspect-ratio: 4 / 3; }

/* ---------- Category (gallery) pages ---------- */

.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent-hover); }
.crumbs .here { color: var(--ink); font-weight: 600; }

.gallery-title { margin-bottom: 36px; }
.gallery-title--tabbed { margin-bottom: 8px; }

/* Which gallery of the group you are looking at, under the group title.
   Serif italic so it reads as part of the title block rather than repeating
   the tab pill below it in the same voice. */
.gallery-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--sub);
  margin-bottom: 18px;
}

/* Sibling galleries in the same group, as a tab bar under the gallery title.
   Same pill vocabulary as the work page's group chips; the current gallery is
   filled rather than outlined so the set reads as "you are here, among these"
   at a glance. */
.sibling-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}
.sibling-nav a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--sub);
}
.sibling-nav a:hover { border-color: var(--accent); color: var(--accent); }
.sibling-nav a[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* Justified rows — every photo at its NATURAL aspect ratio, zero crop
   (Captain's order). build.py computes the row breaks from content.json
   dims and emits --ar (width/height) per tile: flex-grow proportional to
   --ar + aspect-ratio: --ar gives every tile in a row the same height,
   widths follow the photo, and the row fills the container at any width.
   Short (under-filled) last rows get flex:none + a percentage width from
   build.py instead, so they stay at the gallery's row height, left-aligned,
   rather than stretching to fill. */
.photo-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.jrow {
  display: flex;
  gap: 16px;
}
.jrow .ph {
  flex: var(--ar, 1) 1 0%;
  min-width: 0;
  aspect-ratio: var(--ar, auto);
  border-radius: 4px;
  overflow: hidden;
  background: var(--tile);
  display: block;
}
.jrow--short { justify-content: flex-start; }
.jrow--short .ph { flex: 0 1 auto; }
/* Tile ratio == image ratio, so 100%/100% just fits the frame — no crop */
.jrow .ph img {
  width: 100%;
  height: 100%;
  transition: transform 0.35s ease;
}
.jrow .ph:hover img { transform: scale(1.03); }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.pager a { display: flex; flex-direction: column; gap: 4px; max-width: 45%; }
.pager .next { align-items: flex-end; text-align: right; margin-left: auto; }
.pager .pager-label { font-size: 12px; letter-spacing: 0.14em; color: var(--muted); }
.pager .pager-name { font-family: var(--serif); font-size: 20px; }

/* ---------- Contact ---------- */

.contact-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px var(--pad-x) 64px;
  animation: fadeUp 0.4s ease both;
}
.contact-title { font-family: var(--serif); font-weight: 400; font-size: 56px; margin: 0 0 14px; }
.contact-lead { font-size: 17px; line-height: 1.6; color: var(--sub); margin: 0 0 36px; }
.contact-blocks { display: flex; flex-direction: column; gap: 22px; }
.contact-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}
.contact-block:last-child { border-bottom: none; padding-bottom: 0; }
.contact-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.contact-email { font-family: var(--serif); font-size: 30px; word-break: break-word; }
.contact-place { font-family: var(--serif); font-size: 24px; }
.contact-note { font-size: 16px; line-height: 1.6; color: var(--sub); }

/* ---------- About ---------- */

/* .about-wrap shares the site-wide 1200px content width (page-wrap /
   container); inner text blocks keep their own reading measures below. */
.about-wrap .page-title { margin-bottom: 20px; }
.about-bio {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.4;
  max-width: 820px;
  margin: 0 0 44px;
}

.about-feature { margin: 0 0 44px; }
.about-feature-ph {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  background: var(--tile);
}
.about-feature-ph img { width: 100%; height: auto; transition: transform 0.35s ease; }
.about-feature-ph:hover img { transform: scale(1.02); }

.about-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 26px 0;
  margin: 0 0 44px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.about-fact { display: flex; flex-direction: column; gap: 8px; }
.about-fact-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.about-fact-value { font-family: var(--serif); font-size: 19px; line-height: 1.45; word-break: break-word; }

.about-quote { margin: 0 0 44px; padding: 0 0 0 22px; border-left: 2px solid var(--accent); }
.about-quote p {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.3;
  margin: 0;
  max-width: 640px;
}

/* Two-up: columns proportional to each image's aspect ratio (set by
   build.py via --two-up-cols from content.json dims), so both photos show
   at their natural ratio — no cover-crop (one is a text graphic) — and
   still finish at exactly the same height. */
.about-grid {
  display: grid;
  grid-template-columns: var(--two-up-cols, 1fr 1fr);
  gap: 16px;
  margin: 0 0 48px;
}
.about-grid .about-ph {
  border-radius: 4px;
  overflow: hidden;
  background: var(--tile);
  display: block;
}
.about-grid .about-ph img {
  width: 100%;
  height: auto;
  transition: transform 0.35s ease;
}
.about-grid .about-ph:hover img { transform: scale(1.02); }

.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-hover); color: #fff; }

/* Home: shared About section rendered below Featured work as a full-bleed
   panel band — slightly lifted tone + hairlines make the section boundary
   read at a glance on both themes without boxing the content. */
.home-about {
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* Nav ABOUT jumps here (#about): clear the 64px sticky header so the
     section top isn't hidden underneath it. */
  scroll-margin-top: 64px;
}
.home-about .about-wrap {
  padding-top: 64px;
  padding-bottom: 72px;
}

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line); margin-top: 40px; }
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
/* Footer wordmark — Helvetica per Captain's font rule */
.footer-wordmark {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.footer-nav {
  display: flex;
  gap: 24px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
}
.footer-copy { font-size: 12px; color: var(--muted); }

/* ---------- Lightbox (v1, restyled for dark theme) ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  background: rgba(23, 19, 16, 0.96);
  align-items: center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  width: auto;
  height: auto;
  margin: auto;
}
.lb-btn {
  position: absolute;
  background: none;
  border: none;
  color: #F2ECE2;
  cursor: pointer;
  padding: 14px;
  opacity: 0.85;
}
.lb-btn:hover { opacity: 1; color: #fff; }
.lb-btn:focus-visible { outline: 2px solid #E0568A; outline-offset: 2px; }
.lb-close { top: 10px; right: 12px; }
.lb-prev { left: 6px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 6px; top: 50%; transform: translateY(-50%); }
.lb-count {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  color: #948878;
  font-size: 12px;
  letter-spacing: 0.15em;
}

/* ---------- Responsive (template breakpoints: <768 mobile, 768-1023 mid) ---------- */

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-title { font-size: 58px; }
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
  .group-grid { grid-template-columns: repeat(3, 1fr); }
  /* Justified rows scale with the container — no override needed */
}

@media (max-width: 767px) {
  :root { --pad-x: 20px; }
  .site-nav { display: none; }
  .hamburger { display: flex; }
  .wordmark { font-size: 15px; letter-spacing: 0.24em; }
  .hero { height: 78vh; }
  .hero-copy { padding: 0 var(--pad-x) 40px; }
  .hero-title { font-size: 42px; }
  .bio { padding-top: 48px; padding-bottom: 48px; }
  .bio p { font-size: 24px; }
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
  .page-wrap, .contact-wrap { padding: 36px var(--pad-x) 48px; }
  .page-title, .contact-title { font-size: 40px; }
  .group-grid { grid-template-columns: 1fr; }
  /* Galleries: single column, natural ratios, full width, uncropped.
     !important beats the inline percentage widths on short-row tiles. */
  .photo-rows { gap: 14px; }
  .jrow { flex-direction: column; gap: 14px; }
  .jrow .ph { flex: none; width: 100% !important; }
  .contact-email { font-size: 24px; }
  .about-bio { font-size: 22px; }
  .featured { padding-top: 40px; padding-bottom: 56px; }
  .home-about .about-wrap { padding-top: 44px; padding-bottom: 48px; }
  .about-facts { grid-template-columns: 1fr; gap: 20px; }
  .about-quote p { font-size: 24px; }
  .about-grid { grid-template-columns: 1fr; }
}