/* ============================================================
   Emma Nasseri — single-page portfolio
   Warm off-white · ink · one muted terracotta accent.
   Type: Fraunces (display serif) · Inter (body) · IBM Plex Mono (labels)
   ============================================================ */

:root{
  --paper:#F5F1E8;
  --paper-2:#EFEADD;
  --ink:#1B1A17;
  --ink-soft:#4C4940;
  --ink-faint:#8C887B;
  --line:#DED7C7;
  --accent:#9C4A2F;              /* muted terracotta — used sparingly */
  --page:1080px;
  --measure:62ch;                /* comfortable reading width for prose */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  position:relative;
  isolation:isolate;
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:clamp(1rem,0.4vw + 0.95rem,1.1rem);
  line-height:1.7;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Distant pastel sky wash — a softened, Renaissance-hazy version of a cloud study.
   Decorative background, not artwork. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:url("assets/bg/sky.jpg") center 30%/cover no-repeat;
  opacity:1;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(248,246,241,0.24) 0%,
    rgba(248,246,241,0.12) 42%,
    rgba(248,246,241,0.40) 100%);
}

/* ---------- Page container ---------- */
.page{
  max-width:var(--page);
  margin:0 auto;
  padding:clamp(3rem,7vw,6rem) clamp(1.5rem,5vw,3rem) clamp(4rem,8vw,7rem);
}

/* ---------- Intro: centered reading column ---------- */
.intro{
  max-width:var(--measure);
  margin:0 auto;
}
.masthead{
  text-align:center;
  margin-bottom:clamp(2.5rem,5vw,3.75rem);
}
.wordmark{
  font-family:"Libre Caslon Display",Georgia,serif;
  font-weight:400;
  font-size:clamp(2.3rem,5.5vw,3.4rem);
  line-height:1.05;
  letter-spacing:0;
  text-transform:lowercase;
  margin:0 0 0.6rem;
}
.tagline{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:0.72rem;
  letter-spacing:0.22em;
  text-transform:lowercase;
  color:var(--ink-faint);
  margin:0;
}

/* ---------- Bio ---------- */
.bio p{
  color:var(--ink-soft);
  margin:0 0 1.3rem;
}
.bio p:first-child{           /* lead paragraph, a touch larger and darker */
  font-size:1.12em;
  line-height:1.6;
  color:var(--ink);
}
.bio p:last-child{margin-bottom:0}
.bio a{
  color:var(--accent);
  border-bottom:1px solid rgba(156,74,47,0.30);
  transition:border-color .18s ease, background-color .18s ease;
}
.bio a:hover{border-bottom-color:var(--accent);background:rgba(156,74,47,0.07)}

/* ---------- Selected work ---------- */
.work{margin-top:clamp(4.5rem,9vw,7.5rem)}
.work-head{
  text-align:center;
  margin-bottom:clamp(2.5rem,5vw,3.75rem);
}
.work-title{
  font-family:"Libre Caslon Display",Georgia,serif;
  font-weight:400;
  font-size:clamp(1.8rem,4.2vw,2.5rem);
  letter-spacing:0;
  text-transform:lowercase;
  margin:0;
}
.work-head .rule{
  width:44px;height:2px;background:var(--accent);
  margin:1.1rem auto 0;opacity:0.8;
}

/* masonry via JS (shortest-column placement); images keep their TRUE aspect ratio */
.gallery{
  display:flex;
  align-items:flex-start;
  gap:clamp(1.25rem,2.5vw,2.25rem);
}
.gallery-col{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:clamp(1.5rem,3vw,2.75rem);
}
figure.piece{
  margin:0;
  cursor:zoom-in;
}
figure.piece img{
  width:100%;
  height:auto;                 /* aspect ratio preserved (with width/height attrs) */
  background:var(--paper-2);
  transition:opacity .3s ease;
}
figure.piece:hover img{opacity:0.9}

/* Editable label: title (italic) · medium · dimensions */
figure.piece figcaption{margin-top:0.8rem}
.label .t{
  display:block;
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;
  font-size:1.05rem;
  color:var(--ink);
  line-height:1.3;
}
.label .m,
.label .d{
  display:block;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:0.68rem;
  letter-spacing:0.04em;
  text-transform:lowercase;
  color:var(--ink-faint);
  line-height:1.75;
}
.label .m{margin-top:0.25rem}

/* ---------- Lightbox ---------- */
.lb{
  position:fixed;inset:0;background:rgba(20,18,15,0.93);
  display:none;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);z-index:50;cursor:zoom-out;
}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:90vh;width:auto;height:auto;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.lb .lb-cap{
  position:absolute;bottom:clamp(1rem,4vw,2rem);left:0;right:0;text-align:center;
  color:#E9E4D8;font-family:"IBM Plex Mono",monospace;font-size:0.72rem;letter-spacing:0.08em;
}

/* ---------- Responsive ---------- */
/* Column count is handled by the masonry script (1 / 2 / 3 by width). */