/* Linda Morgenstern — Paintings. Palette drawn from the work:
   grey-bone ground, ink, putty, a dark land band, one small gold. */
:root{
  --ground:#E9E6DF;
  --ground-lift:#F0EEE8;
  --ink:#2C2A26;
  --putty:#746F66;
  --band:#34382E;
  --gold:#A5791C;
  --row-h:290px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:'Spectral',Georgia,serif;
  font-weight:400;
  line-height:1.6;
}
img{display:block}
a{color:inherit;text-decoration:none}

/* ---- nav: name left, hamburger right, menu drops from the bars ---- */
.nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.05rem clamp(1.2rem,4vw,3rem);
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
}
.nav .name{font-size:1.05rem;letter-spacing:.04em;font-weight:500;white-space:nowrap}

/* the bars */
.menu-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:34px;height:26px;padding:0;border:0;background:none;cursor:pointer;
}
.menu-toggle span{
  display:block;height:1.5px;width:100%;background:var(--ink);
  transition:transform .28s ease,opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* the panel the bars reveal */
.menu{
  position:absolute;top:100%;right:clamp(1.2rem,4vw,3rem);
  min-width:220px;
  background:var(--ground-lift);
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  box-shadow:0 18px 50px rgba(44,42,38,.16);
  padding:1.1rem 1.4rem 1.3rem;
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
.menu.open{opacity:1;transform:translateY(0);pointer-events:auto}
.menu ul{list-style:none;display:flex;flex-direction:column;gap:.15rem}
.menu a{
  display:block;padding:.5rem .2rem;
  font-family:'Archivo',system-ui,sans-serif;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--putty);
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.menu a:hover,.menu a:focus-visible{color:var(--ink);border-color:var(--gold)}
.menu .divider{height:1px;background:color-mix(in srgb,var(--ink) 12%,transparent);margin:.5rem 0}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Instagram link on the landing */
.ig{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem;
  font-family:'Archivo',sans-serif;font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--putty);transition:color .2s}
.ig:hover,.ig:focus-visible{color:var(--gold)}
.ig svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ---- hero: the painting hung whole on the wall ---- */
.hero{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:center;gap:clamp(1.5rem,4vw,4rem);
  min-height:min(82vh,780px);
  padding:3rem clamp(1.2rem,5vw,4.5rem) 3.6rem;
}
.hero .eyebrow{
  font-family:'Archivo',system-ui,sans-serif;font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--putty);margin-bottom:1.1rem}
.hero h1{font-weight:300;font-size:clamp(2.6rem,5.5vw,4.6rem);letter-spacing:.01em;line-height:1.03}
.hero .line{margin-top:1rem;font-style:italic;font-size:clamp(1.05rem,1.7vw,1.3rem)}
.hero-work{justify-self:center}
.hero-work img{
  max-height:min(62vh,620px);max-width:100%;width:auto;height:auto;
  box-shadow:0 2px 5px rgba(44,42,38,.22),0 22px 55px rgba(44,42,38,.18)}
.hero-work figcaption{
  margin-top:.7rem;text-align:right;font-size:.85rem;font-style:italic;color:var(--putty)}
@media (max-width:780px){
  .hero{grid-template-columns:1fr;min-height:0;gap:2.2rem;padding-top:2.4rem}
  .hero-work img{max-height:52vh}
}

/* ---- the land band: the dark line that holds sky and field apart ---- */
.band{height:12px;background:var(--band)}

/* ---- sections ---- */
main{padding:0 clamp(1.2rem,4vw,3rem) 4rem}
.section{padding-top:4.2rem}
.section-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.9rem}
.section-head::before{content:"";width:46px;height:5px;background:var(--band);flex:none}
.section-head h2{font-weight:500;font-size:1.45rem;letter-spacing:.02em}
.section-intro{max-width:62ch;margin:0 0 1.6rem;font-family:'Spectral',serif;font-size:1.02rem;line-height:1.65;color:var(--ink)}
.section-intro p{margin:0 0 .9em}
.statement-link{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold)}
.statement-link:hover{opacity:.75}
.section-head .count{
  font-family:'Archivo',sans-serif;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--putty);
}

/* single centered column: one painting per row at every width, uniform width, never a grid */
.works{display:flex;flex-direction:column;align-items:center;gap:clamp(2.4rem,5vw,3.6rem)}
.work{border:0;background:none;cursor:pointer;text-align:center;font:inherit;color:inherit;width:min(90vw,32rem)}
.work img{width:100%;height:auto;object-fit:contain;
  box-shadow:0 1px 3px rgba(44,42,38,.18),0 6px 18px rgba(44,42,38,.10);
  transition:transform .25s ease}
.work:hover img,.work:focus-visible img{transform:translateY(-3px)}
.work figcaption{
  margin-top:.55rem;display:block;line-height:1.35;
}
.work .wtitle{
  font-size:1.1rem;color:var(--ink);
  border-bottom:1px solid transparent;display:inline-block;transition:border-color .2s;
}
.work:hover .wtitle,.work:focus-visible .wtitle{border-color:var(--gold)}
.work .wmeta{
  display:block;margin-top:.15rem;
  font-family:'Archivo',sans-serif;font-size:.8rem;letter-spacing:.03em;color:var(--putty);
}
.work .wsold{
  display:block;margin-top:.12rem;
  font-family:'Archivo',sans-serif;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
@media (max-width:640px){
  /* phone: single centered column, every painting the same width */
  .works{flex-direction:column;align-items:center;gap:2.6rem}
  .work{width:82vw;max-width:360px}
  .work img{height:auto;width:100%;max-width:none;object-fit:contain}
  .work .wtitle{font-size:.8rem}
  .work .wmeta{font-size:.62rem}
}

/* ---- lightbox ---- */
.lb{position:fixed;inset:0;z-index:50;display:none;background:rgba(240,238,232,.985)}
.lb.open{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3.4rem 1rem 2rem}
.lb img{max-height:68vh;max-width:min(92vw,1100px);width:auto;
  box-shadow:0 2px 6px rgba(44,42,38,.2),0 18px 50px rgba(44,42,38,.16)}
.lb .meta{max-width:62ch;margin-top:1.4rem;text-align:center}
.lb .meta .sec{display:none}
.lb .meta h3{font-weight:500;font-size:1.3rem;margin:.6rem 0 .55rem}
.lb .meta p{font-size:1rem;color:#4A463F;line-height:1.65}
.lb button{
  position:absolute;background:none;border:0;cursor:pointer;color:var(--ink);
  font-family:'Spectral',serif;line-height:1;padding:.6rem;transition:color .2s}
.lb button:hover{color:var(--gold)}
.lb .close{top:.9rem;right:1.1rem;font-size:1.9rem}
.lb .prev,.lb .next{top:50%;transform:translateY(-50%);font-size:2.6rem;font-weight:300}
.lb .prev{left:.6rem}.lb .next{right:.6rem}
@media (max-width:640px){
  .lb.open{padding-top:3rem}
  .lb img{max-height:52vh}
  .lb .prev{left:.1rem}.lb .next{right:.1rem}
}

/* ---- about ---- */
.about{max-width:1060px;margin:0 auto;padding:4rem 0 2rem;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3.2rem;align-items:start}
.about h1{font-weight:300;font-size:clamp(2rem,4.5vw,3rem);margin-bottom:1.6rem}
.about .statement p{margin-bottom:1.15rem;font-size:1.04rem}
.about .statement p:first-of-type::first-letter{
  font-size:2.9em;float:left;line-height:.85;padding-right:.09em;font-weight:300}
.about .note{margin-top:1.8rem;padding-top:1.4rem;
  border-top:1px solid color-mix(in srgb,var(--ink) 15%,transparent);
  font-size:.95rem;color:var(--putty)}
.about figure{text-align:center;margin:3.4rem 0 0}
.about figure img{width:70%;max-width:20rem;height:auto;display:block;margin:0 auto;
  box-shadow:0 1px 3px rgba(44,42,38,.18),0 8px 24px rgba(44,42,38,.12)}
.about figcaption{margin-top:.6rem;font-size:.85rem;font-style:italic;color:var(--putty)}
/* about page: single centered column — heading, large centered portrait, gap, then bio */
.about-solo{display:block;max-width:68ch}
.about-solo h1{text-align:center}
.about-solo figure{margin:0 0 1.6rem}
.about-solo figure img{width:100%;max-width:26rem}
@media (max-width:780px){.about{grid-template-columns:1fr;gap:2.2rem}}

/* ---- footer ---- */
footer{background:var(--band);color:#D8D5CC;margin-top:4rem;
  padding:2rem clamp(1.2rem,4vw,3rem);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:baseline}
footer .fname{font-size:.98rem;letter-spacing:.03em}
footer .fnote{font-family:'Archivo',sans-serif;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}

/* ---- single-column text pages (statement, writing, contact) ---- */
.about.single{grid-template-columns:minmax(0,68ch);justify-content:center}
.bio-lead{font-size:1.08rem;line-height:1.7;margin-bottom:1.8rem}
.note-label{font-family:'Archivo',sans-serif;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--putty);margin:1.5rem 0 .35rem}
.note-list{font-size:1rem;color:var(--ink);margin-bottom:.4rem}
.press{margin:.4rem 0 0;padding-left:1.1rem;border-left:2px solid var(--gold);
  font-style:italic;font-size:1.04rem;color:#4A463F;line-height:1.6}
.press cite{display:block;margin-top:.55rem;font-style:normal;
  font-family:'Archivo',sans-serif;font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--putty)}
.press-cite{margin:0 0 .5rem;padding-left:1.1rem;font-family:'Archivo',sans-serif;
  font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--putty)}

/* ---- contact form ---- */
.contact-intro{font-size:1.06rem;line-height:1.65;margin-bottom:2rem;max-width:52ch}
.contact-form{display:flex;flex-direction:column;gap:1.3rem;max-width:34rem}
.contact-form .field{display:flex;flex-direction:column;gap:.4rem;
  font-family:'Archivo',sans-serif;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--putty)}
.contact-form input,.contact-form textarea{
  font-family:'Spectral',serif;font-size:1rem;color:var(--ink);
  background:var(--ground-lift);
  border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);
  padding:.7rem .8rem;border-radius:2px;width:100%;
  transition:border-color .2s}
.contact-form textarea{resize:vertical;line-height:1.55}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--gold)}
.contact-form button{
  align-self:flex-start;margin-top:.3rem;cursor:pointer;
  font-family:'Archivo',sans-serif;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ground-lift);background:var(--band);
  border:0;padding:.75rem 1.7rem;border-radius:2px;transition:background .2s}
.contact-form button:hover{background:var(--gold)}
.hp{position:absolute;left:-9999px}

/* ---- dedicated gallery pages ---- */
.gallery-head{text-align:center;padding-top:1rem;margin-bottom:2.2rem}
.gallery-head h1{font-weight:300;font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:.02em}
/* ---- landing page: centered stack — name, subheading, then image ---- */
.landing-hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  min-height:calc(100vh - 160px);gap:0;
  padding-top:clamp(1.6rem,4vh,3rem)}
.landing-hero .lede{display:block}
.landing-hero h1{font-weight:300;font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:.01em;line-height:1.08}
.landing-hero .role{margin-top:.7rem;font-family:'Spectral',serif;
  font-size:clamp(1.15rem,2.6vw,1.45rem);letter-spacing:.04em;
  text-transform:none;color:var(--putty)}
.landing-hero .hero-work{margin-top:clamp(1.8rem,6vh,3.6rem)}
.landing-hero .hero-work img{width:auto;height:auto;
  max-width:min(80vw,480px);max-height:min(52vh,520px)}
.landing-hero .ig{margin-top:1.9rem}
/* landing only: hide the small top-left nav name so the big centered name is the sole title (hamburger stays right) */
body.landing .nav .name{visibility:hidden}


/* ---- exhibitions ---- */
.exh-list{margin:.1rem 0 .4rem}
.exh{margin-bottom:.85rem}
.exh-title{margin:0;font-size:1rem;color:var(--ink)}
.exh-meta{margin:.12rem 0 0;font-family:'Archivo',sans-serif;font-size:.66rem;
  letter-spacing:.02em;line-height:1.5;color:var(--putty)}


/* ---- acquire line at top of each gallery ---- */
.acquire{text-align:center;margin:-1rem 0 2rem;
  font-family:'Archivo',sans-serif;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--putty)}
.acquire a{color:var(--putty);border-bottom:1px solid var(--gold);padding-bottom:1px;transition:color .2s}
.acquire a:hover,.acquire a:focus-visible{color:var(--ink)}


/* ---- writing page ---- */
.writing{max-width:52rem;margin:0 auto;padding:0 clamp(1.2rem,4vw,2rem)}
.piece{margin-top:2.4rem}
.piece + .piece{margin-top:5rem;padding-top:3.2rem;
  border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.piece-text{max-width:34rem;margin:0 auto 2.6rem}
.piece-text p{font-size:clamp(1.3rem,2.8vw,1.55rem);line-height:1.55;margin:0 0 2.9rem;color:var(--ink);font-weight:700}
.piece-text p:last-child{margin-bottom:0}
.piece-figure{margin:0 auto;max-width:26rem}
.piece-figure img{display:block;width:100%;height:auto;
  box-shadow:0 1px 3px rgba(44,42,38,.18),0 8px 22px rgba(44,42,38,.12)}
.piece-figure figcaption{margin-top:.6rem;text-align:center;
  font-family:'Archivo',sans-serif;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--putty)}


/* ---- writing piece title + centering ---- */
.piece-title{text-align:center;font-weight:400;font-size:clamp(1.9rem,4vw,2.5rem);
  letter-spacing:.02em;margin:0 0 2.4rem}
.piece-text{text-align:center}
/* Handrail (.fit): poem in Helvetica, left-justified; a script scales the whole composition (via --fs) so poem + photo fit the VISIBLE window (full image shows on load), capped by width on the phone; top-aligned, no leftover redistribution. Photo width locked to the LONGEST poem line (registered both edges). Block centered on page. */
.piece.fit{--fs:1.6rem;width:auto;max-width:97vw;margin:0 auto;padding-top:3rem;text-align:left}
.piece.fit .piece-text{text-align:left;max-width:none;margin:0}
.piece.fit .piece-text p{margin:0 0 calc(var(--fs)*0.5)}
.piece.fit .piece-text p:last-child{margin-bottom:0}
.piece.fit .ln{display:block;width:max-content;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;font-style:normal;
  font-size:var(--fs);line-height:1.4}
.piece.fit .piece-figure{width:100%;max-width:none;margin:1.5rem 0 0}
.piece.fit .piece-figure .frame{position:relative;display:block;width:100%;padding-bottom:75%}
.piece.fit .piece-figure .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.piece.fit .piece-byline{margin-top:calc(var(--fs)*0.5);font-size:calc(var(--fs)*0.42);text-align:left}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* prose writing piece (memoir/essay) — readable measure, not the poem treatment */
.piece-prose{max-width:38rem;margin:0 auto;text-align:left}
.piece-prose .piece-title{text-align:left;margin:0 0 .35rem}
.piece-note{font-family:'Spectral',serif;font-style:italic;font-size:.95rem;
  line-height:1.6;color:var(--putty);margin:0 0 2.2rem}
.piece-note em{font-style:normal}
.piece-note a{font-style:normal;color:var(--putty);border-bottom:1px solid var(--gold);transition:color .2s}
.piece-note a:hover,.piece-note a:focus-visible{color:var(--gold)}
.piece-prose .piece-text{text-align:left}
.piece-prose .piece-text p{font-size:1.06rem;line-height:1.72;font-weight:400;
  font-style:normal;margin:0 0 1.15rem;color:var(--ink)}


/* ---- writing index (titles only) ---- */
.writing-index{list-style:none;text-align:center;margin:2.6rem 0 0;padding:0}
.writing-index li{margin:0 0 1.15rem}
.writing-index a{font-size:1.3rem;color:var(--ink);
  border-bottom:1px solid transparent;transition:border-color .2s}
.writing-index a:hover,.writing-index a:focus-visible{border-color:var(--gold)}
.piece-byline{text-align:left;margin-top:2.4rem;
  font-family:'Archivo',sans-serif;font-size:.72rem;letter-spacing:.08em;
  line-height:1.7;color:var(--putty)}
.writing-back{text-align:center;margin-top:3.2rem}
.writing-back a{font-family:'Archivo',sans-serif;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--putty);transition:color .2s}
.writing-back a:hover,.writing-back a:focus-visible{color:var(--gold)}
/* writing sub-page footer: list of all pieces to move between them */
.piece-nav{text-align:center;margin-top:2rem;padding-top:1.4rem;
  border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.piece-nav-label{font-family:'Archivo',sans-serif;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--putty);margin:0 0 1.1rem}
.piece-nav-label a{color:var(--putty);border-bottom:1px solid transparent;transition:border-color .2s}
.piece-nav-label a:hover,.piece-nav-label a:focus-visible{border-color:var(--gold)}
.piece-nav-list{list-style:none;margin:0;padding:0}
.piece-nav-list li{margin:0 0 .85rem;font-family:'Spectral',serif;font-size:1.2rem;line-height:1.3}
.piece-nav-list li.current{color:var(--putty)}
.piece-nav-list a{color:var(--ink);border-bottom:1px solid transparent;transition:border-color .2s}
.piece-nav-list a:hover,.piece-nav-list a:focus-visible{border-color:var(--gold)}

/* v69: About-page coda — short centered hairline + closing line */
.coda-rule{width:72px;height:1px;background:color-mix(in srgb,var(--ink) 25%,transparent);margin:2.2rem auto 1.8rem}
.coda{text-align:center}
.coda a{text-decoration-thickness:1px;text-underline-offset:3px}
