/* ============================================================
   PIETRO MOTTA — pietromotta.com
   Shared stylesheet for all pages.
   Palette: darkroom near-black / gallery paper / amber safelight
   Type: Bodoni Moda (display) / Archivo (body) / Spline Sans Mono (exif)
   ============================================================ */

:root{
  --ink:        #16140f;
  --ink-2:      #1d1a13;
  --paper:      #f1efe9;
  --paper-2:    #e7e4db;
  --white:      #efece4;
  --fog:        #a09a8c;
  --stone:      #58534a;
  --safelight:  #dd8f2c;
  --safelight-deep: #b06f1a;   /* accent on light backgrounds */
  --line:       rgba(239,236,228,.14);
  --line-light: rgba(22,20,15,.16);
  --max: 1240px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

body{
  background:var(--ink);
  color:var(--white);
  font-family:"Archivo", system-ui, sans-serif;
  font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--safelight); color:var(--ink); }
img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--safelight); outline-offset:3px; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 clamp(20px, 4vw, 48px); }

/* ---------- type roles ---------- */
.display{
  font-family:"Bodoni Moda", serif;
  font-weight:500; line-height:1.02; letter-spacing:-0.01em;
}
.exif{
  font-family:"Spline Sans Mono", monospace;
  font-size:11.5px; letter-spacing:.06em; color:var(--fog);
}
.eyebrow{
  font-family:"Spline Sans Mono", monospace;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--safelight);
}

/* ---------- wordmark: all lowercase, equal weight,
              two-colour split does the differentiation ---------- */
.wordmark{
  font-family:"Bodoni Moda", serif;
  font-size:19px; font-weight:600;
  letter-spacing:.02em; text-transform:lowercase;
}
.wordmark .accent{ color:var(--safelight); font-style:normal; font-weight:600; }

/* ---------- nav ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:linear-gradient(to bottom, rgba(22,20,15,.92), rgba(22,20,15,0));
  backdrop-filter:blur(2px);
}
nav .wrap{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-top:22px; padding-bottom:22px;
}
nav ul{ display:flex; gap:clamp(16px, 3vw, 36px); list-style:none; }
nav ul a{
  font-family:"Spline Sans Mono", monospace;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fog); transition:color .25s;
}
nav ul a:hover{ color:var(--safelight); }
nav ul a[aria-current="page"]{
  color:var(--safelight);
  border-bottom:1px solid var(--safelight);
  padding-bottom:3px;
}

/* light pages (prints.html) */
body.light{ background:var(--paper); color:var(--ink); }
body.light nav{
  background:linear-gradient(to bottom, rgba(241,239,233,.94), rgba(241,239,233,0));
}
body.light nav ul a{ color:var(--stone); }
body.light nav ul a:hover,
body.light nav ul a[aria-current="page"]{ color:var(--safelight-deep); border-color:var(--safelight-deep); }
body.light .wordmark .accent{ color:var(--safelight-deep); }
body.light .eyebrow{ color:var(--safelight-deep); }
body.light .exif{ color:var(--stone); }
body.light :focus-visible{ outline-color:var(--safelight-deep); }

/* ---------- home hero ---------- */
header.hero{
  position:relative; height:100svh; min-height:560px;
  display:flex; align-items:flex-end; overflow:hidden;
}
.hero-img{
  position:absolute; inset:0; z-index:0;
  animation:develop 2.4s ease-out both;
}
.hero-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(22,20,15,.94) 0%, rgba(22,20,15,.25) 45%, rgba(22,20,15,.15) 100%);
}
@keyframes develop{
  0%   { filter:brightness(0) contrast(1.4); }
  60%  { filter:brightness(.55) contrast(1.15) sepia(.25); }
  100% { filter:brightness(1) contrast(1) sepia(0); }
}
.hero-content{
  position:relative; z-index:1; width:100%;
  padding-bottom:clamp(40px, 7vh, 84px);
}
.hero-content h1{
  font-size:clamp(52px, 10vw, 132px);
  margin:10px 0 18px;
  text-transform:lowercase;
  font-weight:500;
}
.hero-content h1 .accent{ color:var(--safelight); }
.hero-meta{
  display:flex; flex-wrap:wrap; gap:10px 28px;
  border-top:1px solid var(--line); padding-top:16px; max-width:720px;
}

/* ---------- interior page header ---------- */
header.page{
  padding:clamp(140px, 22vh, 200px) 0 clamp(36px, 6vh, 60px);
}
header.page h1{
  font-size:clamp(40px, 6.5vw, 76px);
  margin-top:12px;
}
header.page .intro{
  max-width:620px; margin-top:18px; color:var(--fog); font-size:17px;
}
body.light header.page .intro{ color:var(--stone); }

/* ---------- section scaffolding ---------- */
section{ padding:clamp(64px, 10vh, 120px) 0; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:14px;
  margin-bottom:clamp(32px, 5vh, 56px);
}
.section-head h2{ font-size:clamp(34px, 5vw, 60px); margin-top:10px; }

/* ---------- home: doorways to the three rooms ---------- */
.doorways{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(12px, 1.6vw, 22px);
}
.doorway{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--ink-2);
}
.doorway img{
  transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .6s;
  filter:brightness(.82);
}
.doorway:hover img{ transform:scale(1.04); filter:brightness(.55); }
.doorway .label{
  position:absolute; left:20px; bottom:18px; right:20px;
  display:flex; justify-content:space-between; align-items:baseline;
}
.doorway .label h3{
  font-family:"Bodoni Moda", serif; font-weight:500; font-size:26px;
  text-transform:lowercase;
}
.doorway .label .exif{ color:var(--safelight); }

/* ---------- work grid ---------- */
.filters{ display:flex; gap:10px; flex-wrap:wrap; }
.filters button{
  font-family:"Spline Sans Mono", monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  background:none; border:1px solid var(--line); color:var(--fog);
  padding:9px 18px; border-radius:999px; cursor:pointer;
  transition:color .25s, border-color .25s;
}
.filters button:hover{ color:var(--white); }
.filters button[aria-pressed="true"]{
  color:var(--ink); background:var(--safelight); border-color:var(--safelight);
}
.grid{
  display:grid; grid-template-columns:repeat(6, 1fr);
  gap:clamp(12px, 1.6vw, 22px);
}
.work{
  position:relative; overflow:hidden; cursor:zoom-in;
  background:var(--ink-2);
  border:0; padding:0; text-align:left; color:inherit; font:inherit;
}
.work.landscape{ grid-column:span 4; aspect-ratio:3/2; }
.work.portrait { grid-column:span 2; aspect-ratio:4/5.4; }
.work img{ transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .6s; }
.work:hover img{ transform:scale(1.035); filter:brightness(.7); }
.work figure{ height:100%; }
.work figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px;
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  background:linear-gradient(to top, rgba(22,20,15,.85), transparent);
  opacity:0; transform:translateY(6px);
  transition:opacity .35s, transform .35s;
}
.work:hover figcaption, .work:focus-visible figcaption{ opacity:1; transform:none; }
.work .frame{ color:var(--safelight); }
.work.hidden{ display:none; }

/* ---------- film ---------- */
.film-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px, 2vw, 26px); }
.film-card{ position:relative; }
.film-card .screen{ aspect-ratio:16/9; background:#0c0b08; position:relative; overflow:hidden; }
.film-card .screen img{ opacity:.85; }
.play{
  position:absolute; inset:0; margin:auto;
  width:64px; height:64px; border-radius:50%;
  border:1px solid rgba(239,236,228,.6);
  background:rgba(22,20,15,.45);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, border-color .3s;
}
.play::before{
  content:""; display:block;
  border-left:14px solid var(--white);
  border-top:9px solid transparent; border-bottom:9px solid transparent;
  margin-left:4px;
}
.film-card a:hover .play{ background:var(--safelight); border-color:var(--safelight); }
.film-card a:hover .play::before{ border-left-color:var(--ink); }
.film-card .film-meta{
  display:flex; justify-content:space-between; align-items:baseline; padding-top:12px;
}
.film-card h3{ font-family:"Bodoni Moda", serif; font-weight:500; font-size:21px; }

/* ---------- print room ---------- */
.prints-intro{ max-width:640px; color:var(--stone); font-size:17px; }
.print-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px, 2.6vw, 34px);
  margin-top:clamp(36px, 6vh, 64px);
}
.print-card{ background:var(--paper-2); padding:clamp(18px, 2vw, 26px); }
.print-card .mat{
  background:#fbfaf7;
  padding:clamp(14px, 1.6vw, 22px);
  box-shadow:0 1px 3px rgba(22,20,15,.14), 0 10px 28px rgba(22,20,15,.10);
}
.print-card .mat > div{ aspect-ratio:4/5; overflow:hidden; }
.print-card h3{
  font-family:"Bodoni Moda", serif; font-weight:500; font-size:22px;
  margin:20px 0 4px;
}
.print-card .editions{
  border-top:1px solid var(--line-light);
  margin-top:14px; padding-top:6px; list-style:none;
}
.print-card .editions li{
  display:flex; justify-content:space-between;
  padding:7px 0; font-size:14.5px; color:var(--stone);
  border-bottom:1px solid var(--line-light);
}
.print-card .editions li strong{ color:var(--ink); font-weight:500; }
.buy{
  display:inline-block; margin-top:18px;
  font-family:"Spline Sans Mono", monospace;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); background:none;
  border:1px solid var(--ink); border-radius:999px;
  padding:11px 22px; cursor:pointer;
  transition:background .25s, color .25s;
}
.buy:hover{ background:var(--ink); color:var(--paper); }
.print-note{
  margin-top:clamp(32px, 5vh, 52px);
  color:var(--stone); font-size:14.5px; max-width:640px;
}
.print-note a{ border-bottom:1px solid var(--ink); }

/* ---------- about ---------- */
.about-grid{
  display:grid; grid-template-columns:2fr 3fr;
  gap:clamp(28px, 5vw, 72px); align-items:start;
}
.about-grid .photo{ aspect-ratio:4/5; overflow:hidden; }
.about-grid h2{ font-size:clamp(30px, 4vw, 48px); margin:10px 0 22px; }
.about-grid p{ color:var(--fog); max-width:56ch; margin-bottom:16px; font-size:16.5px; }
.about-grid p strong{ color:var(--white); font-weight:500; }

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:clamp(56px, 9vh, 96px) 0 40px;
}
body.light footer{ border-top-color:var(--line-light); }
.contact-line{
  font-family:"Bodoni Moda", serif; font-weight:500;
  font-size:clamp(30px, 4.6vw, 56px);
  margin:12px 0 34px;
}
.contact-line a{
  /* tricolore underline — green / white / red */
  padding-bottom:8px;
  background-image:linear-gradient(to right,
    #009246 0 33.33%,
    #f4f5f0 33.33% 66.66%,
    #ce2b37 66.66% 100%);
  background-repeat:no-repeat;
  background-size:100% 3px;
  background-position:0 100%;
  transition:color .25s, background-size .25s;
}
.contact-line a:hover{ color:var(--safelight); background-size:100% 5px; }
body.light .contact-line a:hover{ color:var(--safelight-deep); }
.foot-meta{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 28px;
  border-top:1px solid var(--line); padding-top:20px;
}
body.light .foot-meta{ border-top-color:var(--line-light); }

/* ---------- lightbox ---------- */
dialog#lightbox{
  border:0; padding:0; background:rgba(12,11,8,.96);
  width:100vw; height:100vh; max-width:100vw; max-height:100vh;
}
dialog#lightbox::backdrop{ background:rgba(12,11,8,.96); }
#lightbox figure{
  height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  padding:clamp(20px, 5vh, 56px);
}
#lightbox img{
  max-width:min(1100px, 92vw); max-height:78vh;
  width:auto; height:auto; object-fit:contain;
}
#lightbox figcaption{ display:flex; gap:26px; }
#lightbox .close{
  position:absolute; top:20px; right:24px;
  background:none; border:1px solid var(--line); border-radius:999px;
  color:var(--white); font-family:"Spline Sans Mono", monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:10px 18px; cursor:pointer;
}
#lightbox .close:hover{ border-color:var(--safelight); color:var(--safelight); }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .work.landscape{ grid-column:span 6; }
  .work.portrait{ grid-column:span 3; }
  .film-grid{ grid-template-columns:1fr; }
  .print-grid{ grid-template-columns:1fr; max-width:480px; }
  .about-grid{ grid-template-columns:1fr; }
  .about-grid .photo{ max-width:420px; }
  .doorways{ grid-template-columns:1fr; }
  .doorway{ aspect-ratio:3/2; }
  nav ul li:nth-child(n+4){ display:none; }
}