/* ============================================================
   behnazarzani.com
   Layout : lapis navigation rail + wide reading column
   Type   : Space Grotesk (display) / Inter (text), self-hosted
   Colour : lapis, firuzeh turquoise, saffron, ivory
   Motif  : eight-point shamseh star, girih lattice
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/space-grotesk-var.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* ivory paper */
  --bg:          #fcf8ef;
  --surface:     #f4ecdc;
  --text:        #1a1c1d;
  --muted:       #656c6e;
  --rule:        #e2d9c5;
  --hair:        #ece3d0;

  /* lapis rail */
  --rail-bg:     #122a52;
  --rail-deep:   #0d1f3e;
  --rail-text:   #f4ecdd;
  --rail-muted:  #a3bcd8;
  --rule-rail:   #294a78;

  /* firuzeh + saffron */
  --accent:      #0e7580;   /* turquoise - links            */
  --accent-hov:  #0a545d;
  --accent-2:    #a8740e;   /* saffron - labels and motifs  */
  --accent-soft: #e7f1f1;   /* turquoise tint               */
  --gold-soft:   #f8eeda;   /* saffron tint                 */

  --rail-w: clamp(17rem, 21vw, 21.5rem);
  --measure: clamp(34rem, 64vw, 56rem);
  --display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --text-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12.0%2C1.0 15.2%2C4.2 19.8%2C4.2 19.8%2C8.8 23.0%2C12.0 19.8%2C15.2 19.8%2C19.8 15.2%2C19.8 12.0%2C23.0 8.8%2C19.8 4.2%2C19.8 4.2%2C15.2 1.0%2C12.0 4.2%2C8.8 4.2%2C4.2 8.8%2C4.2' fill='black'/%3E%3C/svg%3E");
  --girih: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='white' stroke-opacity='0.07' stroke-width='1'%3E%3Cpolygon points='28.0%2C15.0 31.8%2C18.8 37.2%2C18.8 37.2%2C24.2 41.0%2C28.0 37.2%2C31.8 37.2%2C37.2 31.8%2C37.2 28.0%2C41.0 24.2%2C37.2 18.8%2C37.2 18.8%2C31.8 15.0%2C28.0 18.8%2C24.2 18.8%2C18.8 24.2%2C18.8'/%3E%3Cpolygon points='0.0%2C-13.0 3.8%2C-9.2 9.2%2C-9.2 9.2%2C-3.8 13.0%2C0.0 9.2%2C3.8 9.2%2C9.2 3.8%2C9.2 0.0%2C13.0 -3.8%2C9.2 -9.2%2C9.2 -9.2%2C3.8 -13.0%2C0.0 -9.2%2C-3.8 -9.2%2C-9.2 -3.8%2C-9.2'/%3E%3Cpolygon points='56.0%2C-13.0 59.8%2C-9.2 65.2%2C-9.2 65.2%2C-3.8 69.0%2C0.0 65.2%2C3.8 65.2%2C9.2 59.8%2C9.2 56.0%2C13.0 52.2%2C9.2 46.8%2C9.2 46.8%2C3.8 43.0%2C0.0 46.8%2C-3.8 46.8%2C-9.2 52.2%2C-9.2'/%3E%3Cpolygon points='0.0%2C43.0 3.8%2C46.8 9.2%2C46.8 9.2%2C52.2 13.0%2C56.0 9.2%2C59.8 9.2%2C65.2 3.8%2C65.2 0.0%2C69.0 -3.8%2C65.2 -9.2%2C65.2 -9.2%2C59.8 -13.0%2C56.0 -9.2%2C52.2 -9.2%2C46.8 -3.8%2C46.8'/%3E%3Cpolygon points='56.0%2C43.0 59.8%2C46.8 65.2%2C46.8 65.2%2C52.2 69.0%2C56.0 65.2%2C59.8 65.2%2C65.2 59.8%2C65.2 56.0%2C69.0 52.2%2C65.2 46.8%2C65.2 46.8%2C59.8 43.0%2C56.0 46.8%2C52.2 46.8%2C46.8 52.2%2C46.8'/%3E%3Cpath d='M0 28 H56 M28 0 V56'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #14161a;
    --surface:     #1d2025;
    --text:        #e9e4d8;
    --muted:       #9aa0a2;
    --rule:        #2a2e33;
    --hair:        #22262a;

    --rail-bg:     #0c1a31;
    --rail-deep:   #081325;
    --rail-text:   #e9e4d8;
    --rail-muted:  #95afd0;
    --rule-rail:   #1a3055;

    --accent:      #4ec3ce;
    --accent-hov:  #7adbe4;
    --accent-2:    #d9a94f;
    --accent-soft: #10292c;
    --gold-soft:   #2a2216;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--text-font);
  font-size: clamp(1rem, .94rem + .28vw, 1.1875rem);
  line-height: 1.68;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .15s ease, color .15s ease;
}
a:hover { color: var(--accent-hov); background-size: 100% 2px; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 2px; }
img { max-width: 100%; height: auto; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 1rem; top: 1rem; z-index: 20; background: var(--bg); color: var(--text);
  padding: .6rem .9rem; border: 2px solid var(--accent-2); border-radius: 4px;
}

/* the shamseh star, reused as a marker and an ornament */
.star-mark {
  -webkit-mask-image: var(--star); mask-image: var(--star);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  background: var(--accent-2);
}

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}
main.wide { --measure: clamp(34rem, 82vw, 72rem); }

/* ---------- navigation rail ---------- */
.site-header {
  background-color: var(--rail-bg);
  background-image: var(--girih);
  background-size: 56px 56px;
  background-position: center top;
  color: var(--rail-text);
  padding: 2rem 0 1.75rem;
  position: relative;
}
.site-header > * { position: relative; }
/* the lattice is a whisper, not a wallpaper */
.site-header::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 100%);
  pointer-events: none;
}
.site-header .wrap { max-width: none; margin-inline: 0; padding-inline: 1.5rem; }

.site-name {
  font-family: var(--display);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 0 0 1rem;
  padding-bottom: .9rem;
  position: relative;
}
.site-name a { color: var(--rail-text); background-image: none; }
.site-name a:hover { color: var(--accent-2); }
/* saffron rule over a turquoise hairline */
.site-name::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(var(--accent-2) 0 3px, transparent 3px 4px, var(--accent) 4px 5px);
}

.site-role {
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--rail-muted);
  margin: 0 0 1.5rem;
}

.site-nav ul {
  display: flex; flex-wrap: wrap; gap: .1rem .35rem;
  list-style: none; margin: 0; padding: 0;
}
.site-nav a {
  display: block;
  font-size: .9rem;
  font-weight: 450;
  line-height: 1.35;
  color: var(--rail-muted);
  background-image: none;
  padding: .38rem .6rem;
  border-radius: 3px;
  border-left: 2px solid transparent;
}
.site-nav a:hover { color: var(--rail-text); background: rgba(255,255,255,.07); }
.site-nav a[aria-current="page"] {
  color: var(--rail-text);
  font-weight: 600;
  background: rgba(255,255,255,.08);
  border-left-color: var(--accent-2);
}

.rail-meta {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-rail);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--rail-muted);
}
.rail-meta a { color: var(--rail-muted); }
.rail-meta a:hover { color: var(--accent-2); }
.rail-meta p { margin: 0 0 .5rem; }
.rail-meta p:last-child { margin-bottom: 0; }

@media (min-width: 64rem) {
  body { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .site-header {
    grid-column: 1; grid-row: 1 / span 2;
    position: sticky; top: 0; align-self: start;
    height: 100vh; overflow-y: auto;
    padding: 3.25rem 0 2rem;
    display: flex; flex-direction: column;
    border-right: 1px solid var(--rule-rail);
  }
  .site-header .wrap { padding-inline: clamp(1.5rem, 2vw, 2.25rem); display: flex; flex-direction: column; flex: 1; }
  .site-name { font-size: clamp(1.75rem, 2vw, 2.125rem); }
  .site-nav ul { flex-direction: column; gap: .05rem; margin-left: -.6rem; }
  .rail-meta { margin-top: auto; }
  main { grid-column: 2; grid-row: 1; }
  .site-footer { grid-column: 2; grid-row: 2; }
}

/* ---------- headings and text ---------- */
main { padding: clamp(2.5rem, 5vw, 4.5rem) 0 2rem; }

h1 {
  font-family: var(--display);
  font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 0 0 1.75rem;
}

h2 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.1rem + .5vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 3.25rem 0 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  position: relative;
}
/* a small shamseh sitting on the rule */
h2::before {
  content: ""; position: absolute; left: 0; top: -.5rem;
  width: 1rem; height: 1rem;
  background: var(--accent-2);
  -webkit-mask-image: var(--star); mask-image: var(--star);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  box-shadow: 0 0 0 .4rem var(--bg);
}
h2.side-heading { border-top: 0; padding-top: 0; margin: 2rem 0 .75rem; font-size: 1rem; letter-spacing: 0; }
h2.side-heading::before { display: none; }

h3 {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.3;
  margin: 2rem 0 .4rem;
}

p { margin: 0 0 1.2rem; }
strong { font-weight: 600; }

.lede { font-size: 1.1875rem; line-height: 1.6; letter-spacing: -.011em; }

.eyebrow {
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin: 0 0 .85rem;
}

/* ---------- about page ---------- */
.about-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 58rem) {
  .about-grid { grid-template-columns: clamp(13rem, 24vw, 19rem) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.about-side { min-width: 0; }
.about-main { min-width: 0; }
.about-main > p:first-child { margin-top: 0; }

/* portrait masked into a pointed arch */
.about-side .portrait {
  width: 100%;
  /* the source photo is only 266px wide; never scale it past that or it goes soft */
  max-width: 266px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  background: var(--surface);
  border-radius: 48% 48% 5px 5px / 38% 38% 5px 5px;
  border: 1px solid var(--rule);
  outline: 1px solid var(--accent-2);
  outline-offset: -7px;
  padding: 6px;
}

/* ---------- key/value lists ---------- */
.plain { list-style: none; margin: 0; padding: 0; }
.facts li { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; padding: .7rem 0; border-bottom: 1px solid var(--hair); }
.facts li:first-child { border-top: 1px solid var(--hair); }
.facts .label {
  font-family: var(--display);
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-2); flex: 0 0 6rem; padding-top: .45rem;
}
.facts .value { flex: 1 1 14rem; min-width: 0; }
.facts--stacked li { display: block; padding: .6rem 0; }
.facts--stacked .label { display: block; padding: 0 0 .15rem; }
.facts--stacked .value { font-size: .95rem; }

/* ---------- prose lists (advice) ---------- */
.notes { list-style: none; margin: 0; padding: 0; }
.notes > li {
  position: relative;
  padding: 0 0 1.25rem 1.9rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--hair);
}
.notes > li:last-child { border-bottom: 0; }
.notes > li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: .85rem; height: .85rem;
  background: var(--accent-2);
  -webkit-mask-image: var(--star); mask-image: var(--star);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.notes p { margin: 0 0 .8rem; }
.notes p:last-child { margin-bottom: 0; }

/* ---------- numbered quotes ---------- */
.quotes { list-style: none; margin: 0; padding: 0; }
.quotes li { position: relative; padding: .75rem 0 .75rem 3.1rem; border-bottom: 1px solid var(--hair); }
.quotes li::before {
  content: attr(data-n);
  position: absolute; left: 0; top: .95rem;
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  color: var(--muted); letter-spacing: .02em;
}
.quotes li.mark {
  background: var(--gold-soft);
  border-radius: 4px;
  padding-left: 3.1rem; padding-right: 1rem;
  border-bottom-color: transparent;
  box-shadow: inset 2px 0 0 var(--accent-2);
}
.quotes li.mark::before { left: 1rem; color: var(--accent-2); }

/* ---------- publications ---------- */
.year-nav { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 2rem; }
.year-nav a {
  font-family: var(--display); font-size: .8rem; font-weight: 500;
  color: var(--muted); background-image: none;
  padding: .2rem .6rem; border: 1px solid var(--rule); border-radius: 999px;
}
.year-nav a:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

h2.year {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
  letter-spacing: -.04em;
  border-top: 2px solid var(--text);
  padding-top: 1rem;
  margin-top: 3rem;
}
h2.year::before { top: -.6rem; }

.pubs { list-style: none; margin: 0; padding: 0; }
.pubs > li { padding: 1.15rem 0; border-bottom: 1px solid var(--hair); }
.pubs .title { display: block; font-weight: 600; letter-spacing: -.015em; line-height: 1.4; }
.pubs .title a { color: var(--text); background-image: none; }
.pubs .title a:hover { color: var(--accent); }
.pubs .authors { display: block; font-size: .875rem; color: var(--muted); margin-top: .35rem; line-height: 1.6; }
.pubs .me { color: var(--text); font-weight: 650; }
.pubs .venue {
  display: block; font-family: var(--display); font-size: .74rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent-2); margin-top: .45rem;
}
.pubs .links { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.pubs .links a {
  font-size: .75rem; font-weight: 500; background-image: none;
  color: var(--muted); border: 1px solid var(--rule); border-radius: 3px; padding: .08rem .45rem;
}
.pubs .links a:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ---------- cards ---------- */
.card { padding: 1.85rem 0; border-bottom: 1px solid var(--hair); }
.card:last-child { border-bottom: 0; }
.card h3 { margin-top: 0; font-size: 1.25rem; }
.card p:last-child { margin-bottom: 0; }
.card .kicker {
  font-family: var(--display); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2);
  margin: 0 0 .5rem;
}
.card .meta { font-size: .875rem; color: var(--muted); margin-bottom: .6rem; }

/* ---------- media list (videos, podcast) ---------- */
.media { list-style: none; margin: 0; padding: 0; }
.media > li {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  padding: 1.6rem 0; border-bottom: 1px solid var(--hair);
}
.media > li:last-child { border-bottom: 0; }
.media .thumb {
  flex: 0 0 clamp(10rem, 22vw, 15rem);
  width: clamp(10rem, 22vw, 15rem);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  background: var(--surface);
}
.media .thumb--empty {
  display: flex; align-items: center; justify-content: center;
  background-color: var(--rail-bg);
  background-image: var(--girih);
  background-size: 56px 56px;
  color: var(--accent-2);
  font-family: var(--display); font-size: 1.5rem;
}
.media .body { flex: 1 1 16rem; min-width: 0; }
.media .body h3 { margin: 0 0 .4rem; }
.media .body p { margin: 0 0 .4rem; font-size: .9rem; color: var(--muted); }
.media .body p:last-child { margin-bottom: 0; }

/* ---------- gallery: a hung wall, nothing cropped ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  padding: 0; margin: 1.75rem 0 0;
  list-style: none;
}
.gallery li { margin: 0; }
.gallery figure {
  margin: 0;
  height: 100%;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: clamp(.4rem, .8vw, .7rem);
  box-shadow: inset 0 0 0 1px var(--hair);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gallery a { background-image: none; display: block; height: 100%; }
/* every frame is the same size; the painting is matted inside it, never cut */
.gallery img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: block;
  background: var(--surface);
  border-radius: 2px;
}
.gallery figure:hover {
  border-color: var(--accent-2);
  box-shadow: inset 0 0 0 1px var(--accent-2);
}
/* the one panoramic painting leads, full width, at its own proportions */
.gallery .feature { grid-column: 1 / -1; }
.gallery .feature img { aspect-ratio: auto; height: auto; object-fit: contain; }

figure.wide { margin: 1.75rem 0; }
figure.wide img { border-radius: 4px; width: 100%; box-shadow: 0 0 0 1px var(--rule); }
figure.wide figcaption { font-size: .85rem; color: var(--muted); margin-top: .5rem; }

/* ---------- callout ---------- */
.callout {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  padding: 1rem 1.25rem;
  margin: 0 0 1.5rem;
  font-size: .95rem;
}
.callout p:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */
.site-footer {
  margin-top: 4rem; padding: 1.75rem 0 3rem;
  border-top: 1px solid var(--rule);
  font-size: .85rem; color: var(--muted);
}
.site-footer a { color: var(--muted); }
.site-footer p { margin: 0 0 .35rem; }

/* ---------- print ---------- */
@media print {
  body { display: block; font-size: 11pt; color: #000; background: #fff; }
  .site-header, .site-footer, .year-nav, .skip-link { display: none; }
  main .wrap { max-width: none; padding: 0; }
  a { color: #000; background-image: none; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  h2::before, .notes > li::before { display: none; }
}