/* ============================================================
   enThrall Photo — design system
   Moody, atmospheric, editorial. Muted natural palette.
   Generous negative space. Minimal typography. Large imagery.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=Inter:wght@300;400;500&display=swap');

:root {
  /* Color — muted, natural, moody/atmospheric */
  --color-bg: #12130f;
  --color-bg-raised: #191a14;
  --color-fg: #ece7dc;
  --color-fg-muted: #a8a394;
  --color-fg-faint: #8a8674; /* kept ≥4.5:1 contrast on --color-bg / --color-bg-raised for placeholder text */
  --color-accent: #8a9a7e;      /* muted sage */
  --color-accent-2: #b98f6a;    /* muted clay */
  --color-line: rgba(236, 231, 220, 0.14);
  --color-line-strong: rgba(236, 231, 220, 0.42); /* kept ≥3:1 against bg for input/button borders (WCAG 1.4.11) */
  --color-overlay: rgba(8, 9, 6, 0.45);
  --color-overlay-strong: rgba(8, 9, 6, 0.72);
  --color-focus: #d8c9a3;

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale — generous, editorial */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 7rem;
  --space-7: 10rem;

  --content-max: 76rem;
  --measure: 38rem; /* comfortable reading width */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 500ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; margin: 0; line-height: 1.1; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

/* Visible, deliberate focus ring — accessibility */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--color-fg);
  color: var(--color-bg);
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  transition: top 200ms var(--ease);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.875rem;
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Type utilities ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  font-weight: 500;
}
.display-1 { font-size: clamp(2.6rem, 3rem + 3vw, 6.5rem); letter-spacing: -0.01em; }
.display-2 { font-size: clamp(2rem, 1.6rem + 2.4vw, 4rem); letter-spacing: -0.01em; }
.display-3 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem); }
.lede { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); color: var(--color-fg-muted); font-weight: 300; max-width: var(--measure); }
.body-text { max-width: var(--measure); color: var(--color-fg); }
.body-text + .body-text { margin-top: 1.25em; }
.muted { color: var(--color-fg-muted); }

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}
@media (min-width: 640px) { .wrap { padding-inline: var(--space-4); } }
@media (min-width: 1200px) { .wrap { padding-inline: var(--space-5); } }

.section { padding-block: var(--space-6); }
.section--tight { padding-block: var(--space-5); }
.section-head { margin-bottom: var(--space-4); }
.rule { border: 0; border-top: 1px solid var(--color-line); margin: 0; }

/* ---------- Nav ---------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding: var(--space-2) 0;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header[data-solid="true"] {
  background: rgba(18, 19, 15, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--color-line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.wordmark {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--color-fg);
  white-space: nowrap;
}
.wordmark small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-top: 0.15rem;
}
.nav-links {
  display: none;
  gap: var(--space-4);
}
.nav-links a {
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] {
  color: var(--color-fg);
  border-color: var(--color-line-strong);
}
@media (min-width: 860px) {
  .nav-links { display: flex; align-items: center; }
  .nav-toggle { display: none; }
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg);
}
.nav-toggle .bars { display: grid; gap: 4px; }
.nav-toggle .bars span { width: 20px; height: 1px; background: currentColor; display: block; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-5) var(--space-3);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.mobile-menu[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-menu[inert] { visibility: hidden; }
.mobile-menu ul { display: flex; flex-direction: column; gap: var(--space-3); }
.mobile-menu a {
  text-decoration: none;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  color: var(--color-fg);
}
.mobile-menu .mobile-menu-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Buttons / links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-line-strong);
  color: var(--color-fg);
  transition: background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
}
.btn:hover { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }
.btn--solid { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }
.btn--solid:hover { background: transparent; color: var(--color-fg); }
.text-link {
  text-decoration: underline;
  text-decoration-color: var(--color-line-strong);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.text-link:hover { text-decoration-color: currentColor; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media picture { display: block; width: 100%; height: 100%; }
/* Focal point is set per-photo from the CMS (Home Page → focal point %) via
   --hero-pos-desktop / --hero-pos-mobile custom properties on .hero-media,
   so re-pointing the crop never requires a code change. */
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos-desktop, 50% 50%);
}
@media (max-width: 700px) {
  .hero-media img { object-position: var(--hero-pos-mobile, 50% 50%); }
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,9,6,0.35) 0%, rgba(8,9,6,0.1) 35%, rgba(8,9,6,0.75) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  padding-block: var(--space-6) var(--space-5);
  width: 100%;
}
.hero-headline { color: var(--color-fg); margin-top: var(--space-2); max-width: 22ch; }
.hero-sub { margin-top: var(--space-2); color: var(--color-fg-muted); }
.hero-scroll-cue {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  writing-mode: vertical-rl;
}

/* ---------- Image blocks ---------- */
.figure { position: relative; overflow: hidden; background: var(--color-bg-raised); }
.figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}
.figure-caption {
  margin-top: 0.6rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--color-fg-muted);
}

/* Full-bleed editorial break */
.bleed {
  width: 100%;
}
.bleed .figure { aspect-ratio: 16 / 10; }
@media (min-width: 860px) { .bleed .figure { aspect-ratio: 21 / 9; } }

/* Intro / split section */
.split {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: end; }
}

/* ---------- Portfolio grid ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-4);
}
.filter-btn {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.filter-btn[aria-pressed="true"] { color: var(--color-fg); border-color: var(--color-accent); }
.filter-btn:hover { color: var(--color-fg); }

/* Justified gallery: each photo keeps its own aspect ratio (set once, from
   the real file, as --item-aspect/--item-grow/--item-basis inline on the
   <li>) instead of being force-cropped into a uniform tile. On desktop,
   rows share a fixed height and photos flex-grow proportionally to their
   width — a wide shot and a tall one can sit in the same row, edge to
   edge, each still reading as its real shape. Sequence always follows
   document order, so it holds across every screen size. Emphasis (an
   editorial, per-photo choice made in the CMS — not automatic) gives a
   photo the full row width at its own height instead. */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4) var(--space-3);
  --row-h: 300px;
}
.gallery-grid::after {
  content: "";
  flex: 999 1 0;
}
.gallery-item {
  flex-grow: var(--item-grow, 150);
  flex-basis: var(--item-basis, 300px);
  min-width: 200px;
}
.gallery-item .figure { height: auto; aspect-ratio: var(--item-aspect, 1.5); }
.gallery-item[data-emphasize="true"] {
  flex-basis: 100%;
  flex-grow: 0;
  width: 100%;
}
.gallery-item[data-emphasize="true"] .figure { height: auto; aspect-ratio: var(--item-aspect, 16 / 9); }
@media (max-width: 699px) {
  .gallery-grid { flex-direction: column; }
  .gallery-grid::after { display: none; }
  .gallery-item { flex-basis: auto; width: 100%; min-width: 0; }
  .gallery-item .figure,
  .gallery-item[data-emphasize="true"] .figure { height: auto; aspect-ratio: var(--item-aspect, 1); }
}
.gallery-item[hidden] { display: none; }
.gallery-item button.figure-trigger {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
}
.gallery-item button.figure-trigger:hover .figure img,
.gallery-item button.figure-trigger:focus-visible .figure img { transform: scale(1.035); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 9, 6, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox[data-open="true"] { opacity: 1; pointer-events: auto; }
/* The image fills whatever space is available (viewport minus the caption's
   natural height) while object-fit: contain keeps its real aspect ratio —
   nothing is cropped, and both a wide panorama and a tall portrait use the
   screen well. */
.lightbox-inner {
  width: min(94vw, 1600px);
  height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.lightbox-inner picture {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: block;
}
.lightbox-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.lightbox-caption {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--color-fg-muted);
  font-size: 0.8rem;
  gap: 0.4rem 1rem;
  text-align: center;
}
/* Title, location, and category each render only when that photo actually
   has the data — no empty dashes or "Untitled" placeholders. */
.lightbox-caption span:empty { display: none; }
.lightbox-place:not(:empty) + .lightbox-category:not(:empty)::before,
.lightbox-title:not(:empty) + .lightbox-place:empty + .lightbox-category:not(:empty)::before {
  content: "· ";
  margin-right: 0.4rem;
  opacity: 0.6;
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: fixed;
  color: var(--color-fg);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lightbox-prev, .lightbox-next {
  z-index: 1;
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: 2rem;
}
.lightbox-close { top: var(--space-3); right: var(--space-3); }
.lightbox-prev { left: var(--space-3); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--space-3); top: 50%; transform: translateY(-50%); }

/* ---------- Facts / list rows ---------- */
.fact-list { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.fact-row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-top: 1px solid var(--color-line);
  font-size: 0.9rem;
}
.fact-row:last-child { border-bottom: 1px solid var(--color-line); }
.fact-row dt { color: var(--color-fg-muted); }
.fact-row dd { margin: 0; }

/* ---------- Print shop ---------- */
.shop-print-collection {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}
.shop-print-collection > .body-text { max-width: 44rem; }
.shop-print-grid { margin-bottom: var(--space-5); }
.shop-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3);
}
.shop-style-card {
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-line-strong);
  background: var(--color-bg-raised);
}
.shop-style-card > p:not(.eyebrow) { color: var(--color-fg-muted); }
.shop-sizes {
  margin-top: auto;
  font-size: 0.78rem;
  line-height: 1.8;
}
.shop-order-layout {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}
@media (min-width: 860px) {
  .shop-order-layout { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
  .shop-order-layout .form-grid { margin-top: 0; }
}

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: var(--space-3); max-width: 34rem; margin-top: var(--space-4); }
.field { display: grid; gap: 0.5rem; }
.field label { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-fg-muted); }
.field input, .field textarea, .field select {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-line-strong);
  color: var(--color-fg);
  padding: 0.85rem 1rem;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-fg-faint); }
.form-note { font-size: 0.8rem; color: var(--color-fg-muted); margin-top: var(--space-2); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: var(--space-3); font-size: 0.9rem; }
.form-status[data-state="success"] { color: var(--color-accent); }
.form-status[data-state="error"] { color: var(--color-accent-2); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-line);
  padding-block: var(--space-4);
  color: var(--color-fg-muted);
  font-size: 0.8rem;
}
.footer-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
@media (min-width: 640px) {
  .footer-grid { flex-direction: row; justify-content: space-between; align-items: center; }
}
.footer-links { display: flex; gap: var(--space-3); }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--color-fg); }

/* ---------- Utility ---------- */
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.center-col { max-width: var(--measure); }