/* ============================================================
   farzamhd.com — site styles, built on the f/HD brand system
   (brand.css supplies palettes, the mark, .cap/.meta utilities)
   ============================================================ */

:root {
  --header-h: 76px;
  --pad-x: clamp(20px, 4.5vw, 56px);
  --hairline: color-mix(in srgb, var(--ink) 12%, transparent);
  --g-gap: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--ink); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  min-height: var(--header-h);
  padding: 10px var(--pad-x);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.brand-link { text-decoration: none; display: inline-flex; }
.brand-link .fhd-mark { font-size: 36px; }

.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 2px clamp(10px, 1.4vw, 22px); }
.site-nav a {
  font-family: var(--sans); font-weight: 300;
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--soft); text-decoration: none;
  padding: 5px 0; border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.menu-btn {
  display: none;
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 10px; margin-right: -10px;
  align-items: center; gap: 10px;
}
.menu-btn .menu-icon { display: flex; flex-direction: column; gap: 5px; }
.menu-btn .menu-icon span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; }
.menu-btn .menu-word { font-family: var(--sans); font-weight: 300; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }
.menu-btn[aria-expanded="true"] .menu-icon span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-icon span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* The nav needs ~915px to sit on one line (10 items measure 787px, plus the
   mark and page padding). Below that it wrapped to two rows and doubled the
   header height, so the hamburger takes over well before phone widths. */
@media (max-width: 980px) {
  .menu-btn { display: flex; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    display: none; flex-direction: column; align-items: flex-start;
    gap: 8px; padding: 44px var(--pad-x);
    background: var(--paper);
    border-top: 1px solid var(--hairline);
    overflow-y: auto;
  }
  .site-nav.open { display: flex; }
  .site-nav a { font-size: 15px; padding: 10px 0; }
}

/* Read by search engines and screen readers, not shown on screen. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- overview hero slideshow ---------- */
.hero {
  position: relative;
  height: calc(100svh - var(--header-h));
  min-height: 480px;
  background: var(--dark-bg);
  overflow: hidden;
}
.hero .slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity var(--hero-fade, 1.2s) ease;
}
.hero .slide.active { opacity: 1; }
.hero .slide img { width: 100%; height: 100%; object-fit: contain; }
/* Photos stop above the caption strip so the text never sits on an image;
   --hero-foot-h is measured by site.js. The filmstrip mode is full-bleed by
   design and keeps its overlay. */
.hero[data-hero-mode="fade"] .slide { bottom: var(--hero-foot-h, 56px); }
/* A slim strip: small type and arrows, so the photo keeps most of the screen. */
.hero[data-hero-mode="fade"] .hero-foot { background: none; padding: 12px var(--pad-x); align-items: center; }
.hero[data-hero-mode="fade"] .hero-foot .cap { font-size: 10px; }
.hero[data-hero-mode="fade"] .hero-counter { font-size: 11px; }
.hero[data-hero-mode="fade"] .hero-arrow { width: 32px; height: 32px; font-size: 14px; }

/* filmstrip mode — continuously moving strip; opt in with ?hero=filmstrip */
.hero-track {
  display: flex; height: 100%; width: max-content;
  animation: hero-strip linear infinite;
  will-change: transform;
}
.hero-track img { height: 100%; width: auto; flex: none; object-fit: cover; margin-right: 6px; }
@keyframes hero-strip {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .hero-track { animation: none; } }
.hero[data-hero-mode="filmstrip"] .hero-controls { display: none; }
.hero[data-hero-mode="filmstrip"] .hero-foot { background: linear-gradient(to top, rgba(10, 14, 20, 0.35), transparent); }

.hero-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 28px var(--pad-x);
  background: linear-gradient(to top, rgba(10, 14, 20, 0.45), transparent);
}
.hero-foot .cap { color: rgba(255, 255, 255, 0.85); }
.hero-controls { display: flex; align-items: center; gap: 16px; }
.hero-counter {
  font-family: var(--sans); font-weight: 300; font-size: 12px;
  letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
}
.hero-arrow {
  appearance: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent; color: #fff;
  font-size: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.18s ease;
}
.hero-arrow:hover { background: rgba(255, 255, 255, 0.16); }

/* Discourage casual saving: no drag-out, no long-press "Save image" on iOS.
   site.js blocks the right-click menu on photos. */
img { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }

/* ---------- intro strip under hero ---------- */
.intro-strip {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(56px, 9vw, 120px) var(--pad-x);
  max-width: 1320px; margin: 0 auto;
  align-items: baseline;
}
.intro-strip h1 {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(34px, 4.2vw, 56px); line-height: 1.12;
  margin: 0; letter-spacing: 0.005em;
}
.intro-strip p { margin: 0; color: var(--soft); font-size: 17px; max-width: 52ch; text-wrap: pretty; }
.intro-cta { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 860px) { .intro-strip { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 400;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--ink);
  padding: 13px 26px; border-radius: 999px;
  background: transparent;
  transition: background 0.18s ease, color 0.18s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: color-mix(in srgb, var(--ink) 84%, var(--paper)); }
.btn.quiet { border-color: var(--hairline); color: var(--soft); }
.btn.quiet:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

/* ---------- page head (gallery + content pages) ---------- */
.page-head {
  max-width: 1320px; margin: 0 auto;
  padding: clamp(44px, 7vw, 88px) var(--pad-x) clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column; gap: 14px;
}
.page-head h1 {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(38px, 5vw, 64px); line-height: 1.06; margin: 0;
}
.page-head .lede { margin: 0; color: var(--soft); font-size: 17px; max-width: 62ch; text-wrap: pretty; }

/* ---------- galleries ---------- */
.gallery-wrap { padding: 0 var(--pad-x) clamp(56px, 8vw, 100px); max-width: 1480px; margin: 0 auto; }

/* Masonry columns are built by site.js (shortest-column placement, so the
   photos read left to right). Breakpoints live in masonryCols() there. */
.gallery[data-layout="masonry"] { display: flex; align-items: flex-start; gap: var(--g-gap); }
.gallery[data-layout="masonry"] .m-col { flex: 1 1 0; min-width: 0; }
.gallery[data-layout="masonry"] .g-item { margin: 0 0 var(--g-gap); }

.gallery[data-layout="rows"] { display: flex; flex-wrap: wrap; gap: var(--g-gap); }
.gallery[data-layout="rows"] .g-item { flex: 1 1 auto; height: 360px; margin: 0; }
.gallery[data-layout="rows"] .g-item img { height: 100%; width: 100%; object-fit: cover; }
@media (max-width: 720px) { .gallery[data-layout="rows"] .g-item { height: 240px; } }

.gallery[data-layout="editorial"] { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 64px); max-width: 940px; margin: 0 auto; }
.gallery[data-layout="editorial"] .g-item { margin: 0; }

.g-item { position: relative; cursor: zoom-in; overflow: hidden; }
/* height:auto is REQUIRED, not optional. The img carries width/height
   attributes so the browser can reserve the right space before the file
   arrives; without height:auto the raw attribute height becomes the used
   height while width:100% shrinks the width, squashing every photo. */
.g-item img { width: 100%; height: auto; transition: transform 0.5s ease, opacity 0.4s ease; }
.g-item:hover img { transform: scale(1.015); }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--dark-bg) 94%, transparent);
}
.lightbox.open { display: flex; }
.lightbox img { max-width: min(92vw, 1400px); max-height: 88vh; object-fit: contain; }
.lb-btn {
  appearance: none; cursor: pointer; position: absolute;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent; color: #fff; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.14); }
.lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 22px; top: 50%; transform: translateY(-50%); }
.lb-close { right: 22px; top: 22px; }
@media (max-width: 720px) { .lb-prev, .lb-next { display: none; } }

/* ---------- motion (video) page ---------- */
.video-feature, .video-cell { position: relative; background: var(--dark-bg); overflow: hidden; }
.video-feature { aspect-ratio: 16 / 9; max-width: 1480px; margin: 0 auto; }
.video-grid {
  max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--g-gap); padding-top: var(--g-gap);
}
.video-cell { aspect-ratio: 16 / 9; }
.video-feature iframe, .video-cell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: repeating-linear-gradient(-45deg,
    color-mix(in srgb, var(--dark-bg) 92%, white),
    color-mix(in srgb, var(--dark-bg) 92%, white) 14px,
    var(--dark-bg) 14px, var(--dark-bg) 28px);
}
.video-placeholder .play-ring {
  width: 58px; height: 58px; border-radius: 50%;
  border: 1px solid var(--dark-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--dark-soft); font-size: 16px;
}
.video-placeholder code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--dark-sub); text-align: center; padding: 0 18px;
}
.video-title { margin: 10px 2px 0; }

/* ---------- behind the runway slots ---------- */
.slot-grid {
  max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--g-gap);
}
.slot-grid image-slot { width: 100%; }
.slot-tall { height: 560px; }
.slot-short { height: 273px; }
.slot-col { display: grid; gap: var(--g-gap); }
@media (max-width: 1080px) { .slot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .slot-grid { grid-template-columns: 1fr; } .slot-tall { height: 440px; } }

/* ---------- content pages (about / faq / journal) ---------- */
.content {
  max-width: 1320px; margin: 0 auto;
  padding: 0 var(--pad-x) clamp(64px, 9vw, 120px);
}
.two-col {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px); align-items: start;
}
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

.about-portrait { width: 100%; height: 620px; }
@media (max-width: 900px) { .about-portrait { height: 460px; } }

.prose p { margin: 0 0 1.1em; color: color-mix(in srgb, var(--ink) 86%, var(--paper)); max-width: 64ch; text-wrap: pretty; }
.prose p.aside { color: var(--sub); font-size: 14px; }
.prose strong { font-weight: 500; }

.sig {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 30px; margin: 18px 0 0;
}

.section-rule {
  border: 0; border-top: 1px solid var(--hairline);
  margin: clamp(48px, 7vw, 88px) 0;
}
.section-kicker { margin: 0 0 8px; }
.section-title {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; margin: 0 0 18px;
}

/* travel dates */
.dates-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; }
.dates-list li {
  display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--hairline);
}
.dates-list .where { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 19px; }
.dates-list .when { color: var(--sub); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }

/* how-it-works steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 36px); margin-top: 28px; }
.step .num {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 38px; color: var(--sub); line-height: 1;
}
.step h3 { font-family: var(--sans); font-weight: 400; font-size: 15px; letter-spacing: 0.04em; margin: 10px 0 6px; }
.step p { margin: 0; color: var(--soft); font-size: 14.5px; text-wrap: pretty; }

/* pricing */
.price-table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.price-table td {
  padding: 13px 0; border-bottom: 1px solid var(--hairline);
  font-size: 15px; vertical-align: baseline;
}
.price-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-table .label { color: color-mix(in srgb, var(--ink) 82%, var(--paper)); }
.price-table .note { color: var(--sub); font-size: 13px; }
.price-base {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 18px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hairline);
}
.price-base .amount {
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 34px;
  white-space: nowrap; /* keep ranges like $600-800 on one line */
}
.price-base .label { max-width: 62ch; }
/* .note is defined for table cells; the base row needs it too */
.price-base .note {
  display: block; color: var(--sub); font-size: 13px;
  margin-top: 5px; line-height: 1.5;
}

/* faq */
.faq-list { max-width: 860px; }
.faq-list details { border-bottom: 1px solid var(--hairline); }
.faq-list summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 22px 0;
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(19px, 2.2vw, 24px);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--sans); font-weight: 300; font-size: 22px; color: var(--sub); transition: transform 0.2s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .answer { padding: 0 0 24px; color: var(--soft); max-width: 60ch; text-wrap: pretty; }
.faq-list .answer p { margin: 0; }

/* journal */
.journal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(24px, 3vw, 40px); }
.journal-card { display: flex; flex-direction: column; gap: 12px; }
.journal-card image-slot { width: 100%; height: 380px; }
.journal-card h2 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 26px; line-height: 1.15; margin: 0; }
.journal-card p { margin: 0; color: var(--soft); font-size: 14.5px; }

/* subscribe strip */
.subscribe {
  border-top: 1px solid var(--hairline);
  padding: clamp(44px, 6vw, 72px) var(--pad-x);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  max-width: 1320px; margin: 0 auto;
}
.subscribe .blurb h2 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 28px; margin: 0 0 4px; }
.subscribe .blurb p { margin: 0; color: var(--sub); font-size: 14px; }
.subscribe form { display: flex; gap: 10px; flex-wrap: wrap; }
.subscribe input {
  font-family: var(--sans); font-weight: 300; font-size: 14px;
  color: var(--ink); background: transparent;
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 12px 22px; min-width: 260px; outline: none;
}
.subscribe input:focus { border-color: var(--ink); }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding: clamp(44px, 6vw, 72px) var(--pad-x) 36px;
}
.footer-grid {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: clamp(28px, 5vw, 72px); align-items: start;
}
.footer-grid .fhd-mark { font-size: 52px; }
.footer-blurb { margin: 0; color: var(--soft); font-size: 14.5px; max-width: 44ch; text-wrap: pretty; }
.footer-links { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.footer-links a {
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--soft); text-decoration: none;
}
.footer-links a:hover { color: var(--ink); }
.footer-pages { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 32px; }
.footer-pages a {
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--soft); text-decoration: none;
}
.footer-pages a:hover { color: var(--ink); }

.site-footer.slim { padding: 20px var(--pad-x); }
.site-footer.slim .footer-legal { margin-top: 0; }
.footer-legal a { color: var(--sub); text-decoration: none; }
.footer-legal a:hover { color: var(--ink); }
.footer-legal {
  max-width: 1320px; margin: 40px auto 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--sub); font-size: 12px; letter-spacing: 0.06em;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- reveal-on-scroll (subtle) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

/* ---------- contact form ---------- */
.contact-grid {
  display: grid; grid-template-columns: 1.25fr 1fr;
  gap: clamp(32px, 6vw, 80px); align-items: start;
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

.form-row { display: grid; gap: 7px; margin-bottom: 20px; }
.form-row.pair { grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .form-row.pair { grid-template-columns: 1fr; } }
.form-row label {
  font-family: var(--sans); font-weight: 300; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--sub);
}
.form-row label .req { color: var(--soft); }
.form-row input, .form-row select, .form-row textarea {
  font-family: var(--sans); font-weight: 300; font-size: 15px;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--hairline);
  padding: 9px 0; outline: none; width: 100%;
  border-radius: 0; /* iOS rounds inputs by default */
  transition: border-color 0.2s ease;
}
.form-row textarea { resize: vertical; min-height: 128px; line-height: 1.55; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-bottom-color: var(--ink); }
.form-row input:user-invalid, .form-row textarea:user-invalid { border-bottom-color: #B4472F; }
.form-row .hint { font-size: 12px; color: var(--sub); }

/* Honeypot: hidden from people, irresistible to bots. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  margin-top: 18px; font-family: var(--sans); font-size: 14px;
  padding: 14px 18px; border: 1px solid var(--hairline); display: none;
}
.form-status.show { display: block; }
.form-status.ok { border-color: var(--ink); }
.form-status.err { border-color: #B4472F; color: #B4472F; }

.contact-aside .dates-list { margin-top: 10px; }
.contact-aside p { font-size: 15px; }

/* ---------- about: single column until there is a portrait of Farzam ---------- */
.about-intro { max-width: 760px; }

/* ---------- motion: self-hosted film ---------- */
.video-feature { margin: 0 auto; }
.video-feature video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--dark-bg); }