/* ===== aryamehr.com ===== */
:root {
  --black:#0a0a0a; --ink:#f2f0ea; --muted:#a3a19a; --faint:#8a8880;
  --line:#242424;
  --teal:#3D7EBB;   /* Persian azure — primary */
  --green:#5DCAA5;  /* Persian turquoise-green — secondary */
  --gold:#D9A441;   /* saffron — rare accent */
  --red:#C0453E;    /* Persian brick red — rarest accent */
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Inter', Arial, Helvetica, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--black); color:var(--ink); font-family:var(--sans);
  line-height:1.75; font-size:15px; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--green); outline-offset:3px; border-radius:2px; }
.wrap { max-width:1020px; margin:0 auto; padding:0 28px; }

/* ===== Font ===== */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400;
  font-display:swap; src:url('fonts/inter-v20-latin-regular.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500;
  font-display:swap; src:url('fonts/inter-v20-latin-500.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:500;
  font-display:swap; src:url('fonts/playfair-display-v40-latin-500.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:italic; font-weight:500;
  font-display:swap; src:url('fonts/playfair-display-v40-latin-500italic.woff2') format('woff2'); }

/* Navigation */
nav { display:flex; justify-content:space-between; align-items:center; padding:34px 0; }
.brand { display:flex; align-items:center; gap:14px; }
.brand .af { font-family:var(--serif); font-size:31px; letter-spacing:-4px; }
.brand .af b { color:var(--teal); font-weight:500; }
.brand .bname { font-family:var(--serif); font-size:17px; color:var(--muted);
  border-left:1px solid var(--line); padding-left:16px; }
.links { display:flex; gap:30px; font-size:13px; color:var(--muted); align-items:center; }
.links a { transition:color .25s; }
.links a:hover, .links a.here { color:var(--ink); }
.links .cta-link { color:var(--ink); border:1px solid #333; border-radius:3px;
  padding:8px 16px; transition:all .25s; }
.links .cta-link:hover { border-color:var(--green); color:var(--green); }

/* Type */
.eyebrow { font-size:13px; letter-spacing:4px; color:#b8b6ae; margin-bottom:18px;
  font-weight:500; }
.eyebrow b { color:var(--green); font-weight:500; margin-right:10px; font-size:14px; }
h2.eyebrow { font-family:var(--sans); font-size:13px; letter-spacing:4px;
  font-weight:500; line-height:1.75; }
h1 { font-family:var(--serif); font-weight:500; font-size:clamp(32px,4.8vw,50px);
  line-height:1.18; letter-spacing:-0.5px; }
h2 { font-family:var(--serif); font-weight:500; font-size:clamp(22px,3vw,31px);
  line-height:1.3; letter-spacing:-0.3px; }
.lede { color:var(--muted); font-size:15px; max-width:540px; }

/* Buttons */
.btn { display:inline-block; font-size:13px; padding:13px 26px; border-radius:3px;
  letter-spacing:.3px; transition:all .25s; }
.btn.solid { background:var(--ink); color:var(--black); }
.btn.solid:hover { background:var(--green); }
.btn.ghost { border:1px solid #333; color:var(--ink); }
.btn.ghost:hover { border-color:var(--teal); color:var(--teal); }

/* Sections */
section { padding:78px 0; border-bottom:3px solid var(--line); }
.sechead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:34px; }
.more { font-size:13px; color:var(--muted); transition:color .25s; }
.more:hover { color:var(--green); }

/* Cards — icons cycle through the palette */
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
@media (max-width:700px){ .grid2 { grid-template-columns:1fr; } }
.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.grid4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.card { background:#101010; border:1px solid var(--line); border-radius:5px;
  padding:26px 24px; transition:border-color .3s, background .3s; }
.card:hover { border-color:#2b4a68; background:#151515; }
.card i { font-size:20px; color:var(--teal); }
.card:nth-child(3n+2) i { color:var(--green); }
.card:nth-child(3n+2):hover { border-color:#31614f; }
.card:nth-child(3n) i { color:var(--gold); }
.card:nth-child(3n):hover { border-color:#6e5527; }
.card h3 { font-family:var(--serif); font-weight:500; font-size:17px; margin:14px 0 8px; }
.card p { font-size:13px; color:var(--muted); }

/* Entry cards — Contributions & Appearances */
.card.entry { display:flex; flex-direction:column; min-height:168px; }
.card.entry .meta { font-size:11px; letter-spacing:2px; color:var(--faint);
  text-transform:uppercase; margin-bottom:12px; }
.card.entry h3 { font-family:var(--serif); font-weight:500; font-size:19px;
  line-height:1.35; margin:0; }
.card.entry .by { margin-top:auto; padding-top:26px; text-align:right;
  font-size:12px; color:var(--muted); transition:color .3s; }
.card.entry:hover .by { color:var(--ink); }
@media (max-width:600px){ .card.entry { min-height:0; }
  .card.entry .by { padding-top:20px; } }
a.card.entry .by::after { content:" ↗"; color:var(--faint); }
a.card.entry:hover .by::after { color:inherit; }

/* Entry cards — rotating hover accent */
.card.entry:nth-child(4n+1):hover { border-color:#2b4a68; }
.card.entry:nth-child(4n+2):hover { border-color:#31614f; }
.card.entry:nth-child(4n+3):hover { border-color:#6e5527; }
.card.entry:nth-child(4n+4):hover { border-color:#663230; }

.card.entry:nth-child(4n+1):hover .by { color:var(--teal); }
.card.entry:nth-child(4n+2):hover .by { color:var(--green); }
.card.entry:nth-child(4n+3):hover .by { color:var(--gold); }
.card.entry:nth-child(4n+4):hover .by { color:var(--red); }

/* Hidden cards — must beat .card.entry's display:flex */
[hidden] { display:none !important; }

/* Search + pagination */
.filter { display:flex; gap:12px; align-items:center; margin-bottom:22px; flex-wrap:wrap; }
.filter input { flex:1; min-width:220px; background:#101010; border:1px solid var(--line);
  border-radius:3px; color:var(--ink); font-family:var(--sans); font-size:13px;
  padding:11px 14px; transition:border-color .25s; }
.filter input:focus { outline:none; border-color:var(--teal); }
.filter input::placeholder { color:var(--faint); }
.filter .count { font-size:12px; letter-spacing:1px; color:var(--faint); white-space:nowrap; }
.pager { display:flex; gap:8px; justify-content:center; align-items:center; margin-top:30px; }
.pager button { background:none; border:1px solid var(--line); border-radius:3px;
  color:var(--muted); font-family:var(--sans); font-size:13px; padding:8px 14px;
  cursor:pointer; transition:all .25s; }
.pager button:hover:not(:disabled) { color:var(--ink); border-color:#3a3a3a; }
.pager button:disabled { opacity:.3; cursor:default; }
.pager button.on { color:var(--black); background:var(--green); border-color:var(--green);
  font-weight:500; }
.noresults { color:var(--muted); font-size:14px; padding:34px 2px 0; }

/* Work list */
.wlist .row { display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:20px 2px; border-bottom:1px solid var(--line); transition:padding-left .3s; }
.wlist .row:last-child { border-bottom:none; }
.wlist .row:hover { padding-left:16px; }
.wlist .t { font-family:var(--serif); font-size:19px; color:#d8d6cf; transition:color .3s; }
.wlist .row:hover .t { color:var(--green); }
.wlist .m { font-size:11px; letter-spacing:2px; color:var(--faint); white-space:nowrap; }

/* Photo tiles */
.tile { position:relative; aspect-ratio:4/3; border-radius:4px; overflow:hidden;
  background:#151515; border:1px solid var(--line); }
.tile img, .tile .ph { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:flex; align-items:center; justify-content:center; color:#3d3d39;
  filter:grayscale(1) brightness(.8); transition:filter .45s, transform .45s; }
.tile:hover img, .tile:hover .ph { filter:none; transform:scale(1.04); }
.tile .cap { position:absolute; left:0; right:0; bottom:0; padding:9px 12px; font-size:9px;
  letter-spacing:2px; color:var(--ink); background:rgba(10,10,10,.72); }

/* Footer */
footer { padding:30px 0 46px; }
.foot { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.foot p { font-size:12px; color:var(--faint); }
.flinks { display:flex; gap:20px; font-size:12px; color:var(--muted); }
.flinks a:hover { color:var(--green); }

/* Scroll reveal */
.js .rev { opacity:0; transform:translateY(16px);
  transition:opacity .7s ease, transform .7s ease; }
.js .rev.vis { opacity:1; transform:none; }

/* Portrait + lens — KEEP YOUR OWN CALIBRATED VALUES */
.pframe { position:relative; width:290px; flex-shrink:0; margin:0 auto;
  border-radius:6px; overflow:hidden; border:1px solid var(--line);
  --lx:54%; --ly:49%; --ld:12%; }
.pframe img { width:100%; display:block; }
#lens { position:absolute; left:var(--lx); top:var(--ly);
  width:var(--ld); aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; overflow:hidden;
  background:rgba(10,16,24,.70); border:2px solid var(--teal); }
#lens .li { position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; opacity:0; transform:scale(.65);
  transition:opacity .5s, transform .5s; }
#lens .li i { font-size:20px; color:var(--teal); }
#lens .li svg { width:20px; height:20px; fill:none; stroke:var(--teal);
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#lens .li.on { opacity:1; transform:scale(1); }
#word { color:var(--teal); font-style:italic; transition:opacity .3s; }

/* Focus areas */
.focus { display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:stretch; }
.fstage { position:relative; overflow:hidden; border:1px solid var(--line);
  border-radius:6px; padding:44px 34px; display:flex; flex-direction:column;
  justify-content:center; min-height:300px;
  background:radial-gradient(circle at 30% 20%, #151a20, #101010 70%); }
.fstage #fico { font-size:52px; transition:opacity .60s, transform .60s; }
.fstage #fname { font-family:var(--serif); font-size:26px; margin:18px 0 8px;
  transition:opacity .60s; }
.fstage #fdesc { font-size:13px; color:var(--muted); max-width:320px;
  transition:opacity .60s; }
.fstage.sw #fico { opacity:0; transform:scale(.8); }
.fstage.sw #fname, .fstage.sw #fdesc { opacity:0; }
#fghost { position:absolute; right:-30px; bottom:-30px; font-size:210px;
  color:#ffffff; opacity:.03; pointer-events:none; }
.fbar { position:absolute; left:0; right:0; bottom:0; height:2px; background:#161616; }
.fbar span { display:block; height:100%; width:0; background:var(--green); }
.flist { display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
  align-content:center; }
.flist button { background:none; cursor:pointer; font-family:var(--sans);
  font-size:13px; color:var(--muted); padding:11px 10px; text-align:center;
  border:1px solid var(--line); border-radius:30px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; transition:all .60s; }
.flist button:hover { color:var(--ink); border-color:#3a3a3a; transform:translateY(-1px); }
.flist button.on { color:var(--black); background:var(--green);
  border-color:var(--green); font-weight:500; }
.flist button:last-child { grid-column:1 / -1; }
@media (max-width:820px) {
  .focus { grid-template-columns:1fr; }
  .fstage { min-height:220px; }
}

/* Ambient icon motion */
.anim-seek { display:inline-block; animation:seek 5s ease-in-out infinite; }
@keyframes seek { 0%,100%{transform:rotate(-14deg);} 50%{transform:rotate(14deg);} }
.anim-pulse { display:inline-block; animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1); opacity:1;}
  50%{transform:scale(1.18); opacity:.65;} }
.anim-float { display:inline-block; animation:floaty 4s ease-in-out infinite; }
@keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

/* Domain frieze */
.dstrip { overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.dtrack { display:flex; width:max-content; animation:frieze 55s linear infinite; }
@keyframes frieze { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.ditem { width:170px; flex-shrink:0; text-align:center; padding:0 14px; }
.ditem svg { width:100%; height:auto; opacity:1;
  transition:opacity .5s; }
.ditem svg * { fill:none; stroke-width:1.5; stroke-linecap:round;
  stroke-linejoin:round; }

/* Photo carousel — one leaves, one enters */
.pwrap { position:relative; }
.pstrip { overflow:hidden; }
.ptrack { display:flex; gap:14px; will-change:transform; }
.ptrack .tile { flex:0 0 calc((100% - 3*14px) / 4); }
@media (max-width:820px){
  .ptrack .tile { flex:0 0 calc((100% - 14px) / 2); }
}
@media (max-width:600px){
  .ptrack .tile { flex:0 0 100%; }
}
.pnav-row { display:flex; gap:8px; }
.pnav { background:none; border:1px solid var(--line); border-radius:3px;
  color:var(--muted); font-family:var(--sans); font-size:13px; padding:8px 14px;
  cursor:pointer; transition:all .25s; }
.pnav:hover { color:var(--ink); border-color:#3a3a3a; }

/* About page photo — full colour, no hover effect */
.tile.aboutpic img { filter:none; }
.tile.aboutpic:hover img { filter:none; transform:none; }

/* Mobile */
@media (max-width:820px) {
  .grid3 { grid-template-columns:1fr; }
  .grid4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

#bgstars { position:fixed; inset:0; z-index:-1; pointer-events:none; }

@media (max-width:820px) {
  nav { flex-wrap:wrap; gap:14px 0; padding:24px 0; justify-content:center; }
  .brand { flex-shrink:0; }
  .links { width:100%; gap:8px 16px; font-size:12px;
    justify-content:center; flex-wrap:wrap; }
  .links .cta-link { padding:6px 12px; }
}

@media (max-width:820px) {
  .wlist .row { flex-direction:column; gap:4px; }
  section { padding:56px 0; }
}