/* Houman Oliaei Horizon: night sea, low tide */

:root {
  --hz-ground: #0B1113;
  --hz-surface: #121B1E;
  --hz-deep: #070B0C;
  --hz-text: #E7EDEE;
  --hz-soft: #B9C6C9;
  --hz-muted: #8FA0A4;
  --hz-rule: #263236;
  --hz-rule-strong: rgba(231, 237, 238, 0.35);
  --hz-accent: #8FC1B8;
  --hz-tone: saturate(0.6) brightness(0.72) contrast(1.08);
  --hz-letters: saturate(0.5) brightness(1.15) contrast(1.05);
  --hz-gutter: clamp(16px, 3.34vw, 48px);
  --hz-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --hz-sans: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--hz-ground); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--hz-ground);
  color: var(--hz-text);
  font-family: var(--hz-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--hz-text); text-decoration-thickness: 1px; text-underline-offset: 5px; }
a:hover { color: var(--hz-accent); }
a:focus-visible { outline: 2px solid var(--hz-accent); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed !important;
  top: 12px; left: 12px;
  width: auto; height: auto;
  clip: auto;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--hz-text);
  color: var(--hz-ground);
}

.hz-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--hz-gutter);
  padding-right: var(--hz-gutter);
}

/* Photos outside the opening (the closing strip). The opening is graded with SVG filters. */
.hz-tone { filter: var(--hz-tone); }

/* Navigation ------------------------------------------------------------ */

.hz-nav { display: flex; flex-wrap: wrap; gap: 0 32px; }
.hz-nav a { text-decoration: none; padding: 12px 0; font-size: 14px; font-weight: 500; }

/* Hero: the photo above the line, the surf through the name below it ---- */

.hz-hero { background: var(--hz-ground); }

.hz-hero__desktop { position: relative; max-width: 1680px; margin: 0 auto; }
.hz-hero__art { display: block; width: 100%; height: auto; }
.hz-hero__header {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 14px var(--hz-gutter);
  display: flex; justify-content: flex-end; align-items: center;
}

.hz-hero__mobile { display: none; position: relative; }
.hz-hero__header--mobile { padding: 8px 16px; }
.hz-hero__header--mobile .hz-nav { gap: 0 20px; }

@media (max-width: 760px) {
  .hz-hero__desktop { display: none; }
  .hz-hero__mobile { display: block; }
}

/* Opening, on every screen size: the line draws across, the photo rises from it,
   then the name and the menu fade in. */
.hz-line { stroke-dasharray: 1440; stroke-dashoffset: 1440; animation: hzDraw 1.2s cubic-bezier(.6,0,.2,1) .15s forwards; }
.hz-cover { transform-box: fill-box; transform-origin: 50% 0%; animation: hzLift 1.6s cubic-bezier(.7,0,.2,1) 1s both; }
.hz-name { animation: hzFade 1.4s ease 1.9s both; }
.hz-photo { transform-box: fill-box; transform-origin: 50% 60%; animation: hzDrift 45s ease-in-out 2.5s infinite alternate; }
.hz-rise { animation: hzFade 1s ease 2.2s both; }
@keyframes hzDraw { from { stroke-dashoffset: 1440; } to { stroke-dashoffset: 0; } }
@keyframes hzLift { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes hzFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hzDrift { from { transform: scale(1); } to { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .hz-line, .hz-cover, .hz-name, .hz-photo, .hz-rise { animation: none; }
  .hz-line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .hz-cover { display: none; }
}

/* Section labels -------------------------------------------------------- */

.hz-section { padding-top: clamp(96px, 11vw, 160px); }
#about.hz-section { padding-top: clamp(80px, 9vw, 136px); }

.hz-label {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px;
  border-top: 1px solid var(--hz-rule-strong);
  padding-top: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
}
.hz-label__num { color: var(--hz-accent); }
.hz-label__aside { margin-left: auto; font-weight: 500; color: var(--hz-muted); }

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

.hz-about {
  margin-top: 48px;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 48px clamp(32px, 4vw, 64px);
}
.hz-about__portrait { flex: 1 1 280px; max-width: 380px; margin: 0; }
.hz-about__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.hz-about__portrait figcaption {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--hz-rule);
  font-size: 13px; color: var(--hz-muted);
}
.hz-about__text {
  flex: 2 1 380px; min-width: 0; max-width: 40em;
  font-size: 17px; line-height: 1.75; color: var(--hz-soft);
}
.hz-about__text p { margin: 0 0 1em; }
.hz-about__text .hz-about__interests {
  margin: 32px 0 0; padding-top: 18px;
  border-top: 1px solid var(--hz-rule);
}
.hz-about__interests strong { font-weight: 600; color: var(--hz-text); }

/* Book ------------------------------------------------------------------ */

.hz-book { margin-top: clamp(96px, 11vw, 160px); background: var(--hz-surface); }
.hz-book__inner { padding-top: clamp(72px, 8vw, 120px); padding-bottom: clamp(72px, 8vw, 120px); }
.hz-book__grid {
  margin-top: 56px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 56px clamp(40px, 6vw, 112px);
}
.hz-book__cover {
  flex: 1 1 260px; max-width: 360px; width: 100%;
  aspect-ratio: 2 / 3; object-fit: cover;
  margin: 0 auto;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.9);
}
.hz-book__text { flex: 1.6 1 440px; min-width: 0; }
.hz-book__title {
  margin: 0;
  font-family: var(--hz-serif); font-weight: 300;
  font-size: clamp(44px, 5.2vw, 76px); line-height: 1; letter-spacing: -0.025em;
}
.hz-book__subtitle {
  margin: 14px 0 0;
  font-family: var(--hz-serif); font-style: italic; font-weight: 300; font-size: 22px;
  color: var(--hz-soft);
}
.hz-book__blurb { margin: 28px 0 0; max-width: 36em; font-size: 17px; line-height: 1.75; color: var(--hz-soft); }

.hz-quote { margin: 40px 0 0; display: flex; gap: 18px; align-items: flex-start; max-width: 34em; }
.hz-quote__mark { flex: 0 0 auto; font-family: var(--hz-serif); font-weight: 300; font-size: 84px; line-height: 0.75; color: var(--hz-accent); }
.hz-quote blockquote {
  margin: 0;
  font-family: var(--hz-serif); font-style: italic; font-weight: 300;
  font-size: clamp(21px, 1.9vw, 25px); line-height: 1.42;
}
.hz-quote figcaption { margin-top: 12px; font-size: 14px; color: var(--hz-muted); }

.hz-book__actions { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; }
.hz-book .hz-button {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 26px;
  background: var(--hz-text); color: var(--hz-ground);
  text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
}
.hz-book .hz-button:hover { background: #FFFFFF; color: var(--hz-ground); }
.hz-talk { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; text-decoration: none; }
.hz-talk__icon {
  flex: none; width: 44px; height: 44px;
  border: 1px solid rgba(231, 237, 238, 0.5); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.hz-talk:hover .hz-talk__icon { border-color: var(--hz-accent); }
.hz-talk__title { display: block; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; }
.hz-talk__meta { display: block; margin-top: 3px; font-size: 13px; color: var(--hz-muted); }

/* Selected writing ------------------------------------------------------ */

.hz-pubs { margin-top: 24px; }
.hz-pub {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hz-rule);
  text-decoration: none;
}
.hz-pub__year { flex: 0 0 64px; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--hz-muted); }
.hz-pub__title {
  flex: 999 1 440px; min-width: 0;
  font-family: var(--hz-serif); font-size: clamp(21px, 1.8vw, 25px); line-height: 1.28; letter-spacing: -0.01em;
}
.hz-pub__meta { flex: 1 1 220px; font-size: 14px; color: var(--hz-muted); }
.hz-pub:hover .hz-pub__title { color: var(--hz-accent); }

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

.hz-contact { margin-top: 40px; }
.hz-contact__email {
  display: inline-block;
  font-family: var(--hz-serif); font-weight: 300;
  font-size: clamp(40px, 5.8vw, 84px); line-height: 1.05; letter-spacing: -0.03em;
  text-decoration: none; overflow-wrap: anywhere;
}

/* Closing photo strip and footer --------------------------------------- */

.hz-strip { margin-top: clamp(96px, 11vw, 160px); border-top: 1px solid var(--hz-rule-strong); }
.hz-strip img { width: 100%; height: clamp(140px, 16vw, 240px); object-fit: cover; object-position: center 12%; }

.hz-footer { background: var(--hz-deep); color: var(--hz-muted); }
.hz-footer a { color: var(--hz-muted); padding: 12px 0; margin: -12px 0; }
.hz-footer a:hover { color: var(--hz-text); }
.hz-footer__row {
  padding-top: 20px; padding-bottom: 28px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font-size: 13px;
}

/* Other pages (anything you add in WordPress) -------------------------- */

.hz-inner-header { border-bottom: 1px solid var(--hz-rule-strong); }
.hz-inner-header__row {
  padding-top: 10px; padding-bottom: 10px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 32px;
}
.hz-inner-header__name { font-family: var(--hz-serif); font-size: 22px; text-decoration: none; padding: 10px 0; }

.hz-page { min-height: calc(100vh - 140px); padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(80px, 10vw, 140px); }
.hz-page__title {
  margin: 0 0 32px;
  font-family: var(--hz-serif); font-weight: 300;
  font-size: clamp(40px, 5vw, 72px); line-height: 1.05; letter-spacing: -0.025em;
}
.hz-page__content { max-width: 40em; font-size: 18px; line-height: 1.75; color: var(--hz-soft); }
.hz-page__content h2, .hz-page__content h3 { font-family: var(--hz-serif); font-weight: 400; color: var(--hz-text); line-height: 1.2; }
.hz-page__content img { height: auto; }