/* =========================================================
   IRENE LERA — ART DEPARTMENT
   Design tokens
   ========================================================= */
:root{
  --black:        #0E0E0D;
  --black-soft:   #171615;
  --paper:        #F3EEE4;
  --paper-dim:    #E7E0D2;
  --red:          #B31217;
  --red-bright:   #D8232B;
  --amber:        #D9A441;
  --grey:         #948C7C;
  --line:         rgba(243,238,228,0.16);
  --line-dark:    rgba(14,14,13,0.14);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --hand:  "Caveat", cursive;

  --nav-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--black);
  color:var(--paper);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

/* -------------------------------------------------------
   Top navigation — pill buttons over the hero image
   ------------------------------------------------------- */
.nav-pills{
  position:fixed;
  top:28px;
  left:0; right:0;
  z-index:40;
  display:flex;
  justify-content:center;
  gap:12px;
  pointer-events:none;
}
.nav-pills a{
  pointer-events:auto;
  font-family:var(--sans);
  font-size:12.5px;
  letter-spacing:0.14em;
  font-weight:500;
  padding:10px 22px;
  border-radius:999px;
  background:rgba(14,14,13,0.42);
  border:1px solid rgba(243,238,228,0.4);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--paper);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.nav-pills a:hover,
.nav-pills a.is-active{
  background:var(--red);
  border-color:var(--red);
  color:var(--paper);
}

/* -------------------------------------------------------
   Corner identity — fixed on interior pages
   ------------------------------------------------------- */
.corner-id{
  position:fixed;
  top:0; left:0;
  z-index:40;
  padding:22px 0 0 34px;
  display:block;
}
.corner-id .name{
  font-family:var(--hand);
  font-size:34px;
  line-height:1;
  color:var(--paper);
  letter-spacing:0.01em;
}
.corner-id .rule{
  width:118px;
  height:2px;
  background:var(--red);
  margin:6px 0 6px;
}
.corner-id .page-label{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.22em;
  color:var(--grey);
  text-transform:uppercase;
}

.corner-nav{
  position:fixed;
  top:28px;
  right:34px;
  z-index:40;
  display:flex;
  gap:10px;
}
.corner-nav a{
  font-family:var(--sans);
  font-size:11.5px;
  letter-spacing:0.14em;
  padding:9px 18px;
  border-radius:999px;
  border:1px solid var(--line);
  transition:background .25s ease, border-color .25s ease;
}
.corner-nav a:hover,
.corner-nav a.is-active{
  background:var(--red);
  border-color:var(--red);
}

@media (max-width:720px){
  .corner-id{ padding:16px 0 0 20px; }
  .corner-id .name{ font-size:26px; }
  .corner-nav{ top:18px; right:18px; gap:6px; }
  .corner-nav a{ padding:7px 12px; font-size:10px; }
}

/* -------------------------------------------------------
   Viewfinder mark — recurring motif borrowed from a
   camera monitor: corner ticks + a status dot.
   ------------------------------------------------------- */
.vf-mark{
  position:relative;
}
.vf-mark::before,
.vf-mark::after{
  content:"";
  position:absolute;
  width:14px; height:14px;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.vf-mark::before{
  top:10px; left:10px;
  border-top:1.5px solid var(--paper);
  border-left:1.5px solid var(--paper);
}
.vf-mark::after{
  bottom:10px; right:10px;
  border-bottom:1.5px solid var(--paper);
  border-right:1.5px solid var(--paper);
}
.vf-mark:hover::before,
.vf-mark:hover::after{ opacity:0.85; }

.vf-dot{
  display:inline-block;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--red-bright);
  margin-right:7px;
  box-shadow:0 0 8px rgba(216,35,43,0.7);
}

/* =========================================================
   PORTADA
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--black);
}
.hero-bg{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0.88;
}
.hero-veil{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(14,14,13,0.55) 0%, rgba(14,14,13,0.25) 38%, rgba(14,14,13,0.65) 100%);
}
.hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  padding:0 24px;
}
.hero-name{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(48px, 11vw, 128px);
  letter-spacing:0.03em;
  color:var(--paper);
  line-height:0.95;
}
.hero-rule{
  width:min(360px, 60vw);
  height:2px;
  background:var(--red-bright);
  margin:20px auto 18px;
}
.hero-sub{
  font-family:var(--sans);
  font-size:clamp(12px, 1.6vw, 15px);
  letter-spacing:0.42em;
  color:var(--paper);
  text-transform:uppercase;
  opacity:0.92;
}
.hero-placeholder-tag{
  position:absolute;
  bottom:22px; right:22px;
  z-index:2;
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:0.1em;
  color:rgba(243,238,228,0.55);
}

/* =========================================================
   INTERIOR PAGE SHELL
   ========================================================= */
.page{
  min-height:100vh;
  padding-top:150px;
}
.page-wide{ max-width:1240px; margin:0 auto; padding-left:34px; padding-right:34px; }
@media (max-width:720px){
  .page{ padding-top:120px; }
  .page-wide{ padding-left:20px; padding-right:20px; }
}

.section-heading{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(34px, 6vw, 58px);
  margin-bottom:46px;
}

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:70px;
  align-items:start;
}
@media (max-width:860px){
  .about-grid{ grid-template-columns:1fr; gap:34px; }
}
.about-portrait{
  width:240px; height:240px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid var(--red);
}
.about-portrait img{ width:100%; height:100%; object-fit:cover; }
.about-portrait-note{
  font-size:11px;
  color:var(--grey);
  margin-top:12px;
  max-width:240px;
  line-height:1.5;
}
.about-copy p{
  font-family:var(--serif);
  font-size:19px;
  line-height:1.65;
  max-width:62ch;
  margin-bottom:22px;
  color:var(--paper);
}
.about-copy p.lede{
  font-size:24px;
  color:var(--paper);
}
.about-meta{
  margin-top:38px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:26px 40px;
  max-width:560px;
}
.about-meta h4{
  font-size:10.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:8px;
  font-weight:500;
}
.about-meta p{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.6;
  color:var(--paper);
}
.cv-download{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:36px;
  padding:14px 26px;
  border-radius:999px;
  background:var(--red);
  font-size:13px;
  letter-spacing:0.08em;
  font-weight:500;
}
.cv-download:hover{ background:var(--red-bright); }

.about-working{
  margin-top:90px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:4px;
}
.about-working img{
  width:100%; height:340px; object-fit:cover;
  filter:grayscale(0.15);
}
@media (max-width:720px){
  .about-working{ grid-template-columns:1fr; }
  .about-working img{ height:280px; }
}
.page-footer-space{ height:100px; }

/* =========================================================
   WORKS
   ========================================================= */
.featured{
  position:relative;
  border-radius:2px;
  overflow:hidden;
  margin-bottom:110px;
}
.featured-track{
  display:flex;
  transition:transform .6s cubic-bezier(.65,0,.35,1);
}
.featured-track img{
  width:100%; flex:0 0 100%;
  height:min(640px, 72vh);
  object-fit:cover;
}
.featured-info{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  padding:34px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  background:linear-gradient(0deg, rgba(14,14,13,0.82) 0%, rgba(14,14,13,0) 100%);
}
.featured-info .role{
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:8px;
}
.featured-info h3{
  font-family:var(--serif);
  font-size:clamp(28px,5vw,46px);
  font-weight:600;
}
.featured-nav{
  display:flex;
  gap:8px;
}
.featured-nav button{
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid rgba(243,238,228,0.5);
  background:rgba(14,14,13,0.4);
  color:var(--paper);
  font-family:var(--sans);
  font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.featured-nav button:hover{ background:var(--red); border-color:var(--red); }
.featured-cta{
  position:absolute;
  top:30px; right:30px;
  z-index:3;
  font-size:11px;
  letter-spacing:0.14em;
  padding:10px 20px;
  border-radius:999px;
  border:1px solid rgba(243,238,228,0.55);
  background:rgba(14,14,13,0.35);
}
.featured-cta:hover{ background:var(--red); border-color:var(--red); }

.works-collage{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:4px;
  margin-bottom:60px;
}
.works-tile{
  position:relative;
  overflow:hidden;
  height:420px;
}
.works-tile.tall{ grid-row:span 2; height:auto; }
.works-tile img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s ease, filter .5s ease;
}
.works-tile:hover img{
  transform:scale(1.045);
  filter:brightness(0.42) saturate(0.9);
}
.works-tile-info{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px;
  opacity:0;
  transition:opacity .35s ease;
}
.works-tile:hover .works-tile-info{ opacity:1; }
.works-tile-info .role{
  font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--amber); margin-bottom:6px;
}
.works-tile-info h4{
  font-family:var(--serif);
  font-size:24px;
  font-weight:600;
}
.works-tile-tag{
  position:absolute; top:16px; left:16px;
  font-size:10px; letter-spacing:0.1em;
  color:rgba(243,238,228,0.75);
}

@media (max-width:860px){
  .works-collage{ grid-template-columns:repeat(2,1fr); }
  .works-tile{ height:300px; }
  .works-tile.tall{ grid-row:auto; }
}
@media (max-width:520px){
  .works-collage{ grid-template-columns:1fr; }
}

.works-more{
  text-align:center;
  padding:50px 0 20px;
  color:var(--grey);
  font-size:13px;
  letter-spacing:0.04em;
  line-height:1.7;
}

/* =========================================================
   PROJECT DETAIL
   ========================================================= */
.project-hero{
  position:relative;
  height:64vh;
  min-height:380px;
  overflow:hidden;
}
.project-hero img{ width:100%; height:100%; object-fit:cover; }
.project-hero-veil{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(14,14,13,0.9) 0%, rgba(14,14,13,0.15) 60%);
}
.project-hero-info{
  position:absolute; left:0; right:0; bottom:0;
  padding:40px 34px;
}
.project-hero-info .role{
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--amber); margin-bottom:10px;
}
.project-hero-info h1{
  font-family:var(--serif);
  font-size:clamp(34px,6vw,64px);
  font-weight:600;
}
.project-body{
  max-width:1240px;
  margin:60px auto 0;
  padding:0 34px 100px;
  display:grid;
  grid-template-columns:1fr 300px;
  gap:70px;
}
@media (max-width:900px){
  .project-body{ grid-template-columns:1fr; gap:40px; }
}
.project-desc p{
  font-family:var(--serif);
  font-size:19px;
  line-height:1.7;
  max-width:64ch;
  margin-bottom:20px;
}
.project-gallery{
  margin-top:44px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.project-gallery img{ width:100%; height:340px; object-fit:cover; }
@media (max-width:600px){
  .project-gallery{ grid-template-columns:1fr; }
}
.project-facts h4{
  font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--amber); margin-bottom:6px; margin-top:26px;
}
.project-facts h4:first-child{ margin-top:0; }
.project-facts p{ font-size:14px; line-height:1.6; color:var(--paper); }
.project-facts a.trailer{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:8px;
  padding:11px 20px;
  border-radius:999px;
  background:var(--red);
  font-size:12.5px; letter-spacing:0.06em;
}
.project-facts a.trailer:hover{ background:var(--red-bright); }
.back-link{
  display:inline-block;
  margin:40px 34px 0;
  font-size:12px; letter-spacing:0.1em; color:var(--grey);
}
.back-link:hover{ color:var(--paper); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.contact-content{
  position:relative; z-index:2;
  text-align:center;
}
.contact-content h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(40px,8vw,84px);
  margin-bottom:30px;
}
.contact-links{
  display:flex; flex-direction:column; gap:14px;
  align-items:center;
}
.contact-links a{
  font-family:var(--sans);
  font-size:clamp(15px,2vw,19px);
  letter-spacing:0.04em;
  padding:14px 30px;
  border-radius:999px;
  border:1px solid rgba(243,238,228,0.5);
  transition:background .25s ease, border-color .25s ease;
}
.contact-links a:hover{ background:var(--red); border-color:var(--red); }
.contact-note{
  margin-top:34px;
  font-size:11px;
  letter-spacing:0.06em;
  color:rgba(243,238,228,0.55);
}

/* =========================================================
   V2 — SINGLE PAGE REDESIGN
   ========================================================= */
:root{
  --ink:      #141414;
  --white:    #FDFCFA;
  --yellow:   #E7B93C;
  --grey-line:#D8D5CE;
  --font-hand: "Mrs Saint Delafield", cursive;
  --display: "Anton", "Impact", sans-serif;
  --font-dm: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-caption: "Oswald", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- HOME (hero with baked-in title/nav image) ---------- */
.v2-hero{
  position:relative;
  height:100vh;
  min-height:560px;
  overflow:hidden;
}
.v2-hero img{
  width:100%; height:100%; object-fit:cover;
}
.v2-hotspots{
  position:absolute; inset:0;
}
.v2-hotspot{
  position:absolute;
  display:block;
  /* fully invisible — no background, no border, no line on hover,
     per the client's request. Just a clickable region. */
}
/* position tuned to the supplied hero image (percentages of the frame) */
.hs-about{   top:5%;  right:2%;  width:15%; height:9%;  }
.hs-work{    top:15%; right:2%;  width:15%; height:9%;  }
.hs-contact{ top:27%; right:2%;  width:15%; height:10%;  }

/* ---------- Sticky section headers (corner id) ---------- */
.v2-section{
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
}
.v2-sticky-wrap{
  position:relative;
  padding-bottom:0.1px; /* prevents the last child's bottom margin from
                             collapsing through and revealing the white
                             site-frame background instead of the section's
                             own beige background */
}
.v2-corner{
  position:sticky;
  top:0;
  z-index:20;
  padding:26px 0 0 34px;
  background:linear-gradient(180deg, var(--white) 60%, rgba(253,252,250,0));
  pointer-events:none;
}
.v2-corner .name{
  font-family:var(--serif);
  font-weight:600;
  font-size:22px;
  letter-spacing:0.02em;
  color:var(--ink);
  display:block;
}
.v2-corner .label{
  font-family:var(--font-hand);
  font-size:30px;
  color:var(--ink);
  display:block;
  line-height:1;
  margin-top:-2px;
}
@media (max-width:720px){
  .v2-corner{ padding:18px 0 0 20px; }
  .v2-corner .name{ font-size:18px; }
  .v2-corner .label{ font-size:24px; }
}

/* top-right nav repeated on interior sections, same invisible-button language */
.v2-nav{
  position:fixed;
  top:26px; right:34px;
  z-index:30;
  display:flex; gap:22px;
}
.v2-nav a{
  font-family:var(--font-hand);
  font-size:20px;
  color:var(--ink);
  transition:opacity .2s ease;
}
.v2-nav a:hover{ opacity:0.55; }
.v2-nav.on-dark a{ color:var(--white); }
@media (max-width:720px){
  .v2-nav{ top:18px; right:20px; gap:14px; }
  .v2-nav a{ font-size:16px; }
}

/* ---------- About ---------- */
.about2-body{
  max-width:1180px;
  margin:0 auto;
  padding:10px 34px 0;
}
.about2-copy p{
  font-family:var(--font-body);
  font-weight:400;
  font-size:18px;
  line-height:1.7;
  max-width:70ch;
  margin-bottom:20px;
  color:var(--ink);
}
.about2-columns{
  margin-top:36px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  max-width:640px;
}
.about2-columns h4{
  font-family:var(--font-body);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.about2-columns p{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
}
.about2-jobs{
  margin-top:46px;
  max-width:760px;
}
.about2-jobs h4{
  font-family:var(--font-body);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:14px;
}
.about2-jobs .job{
  font-family:var(--font-body);
  color:var(--yellow);
  font-size:15.5px;
  line-height:1.55;
  margin-bottom:10px;
}
.about2-jobs .job b{ font-weight:600; }
.about2-jobs .job span.role{
  color:#4A463E;
}
.cv2-download{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:34px;
  padding:13px 26px;
  border-radius:999px;
  background:var(--white);
  border:1px solid #9c9c9c;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:13px;
  letter-spacing:0.05em;
}
.cv2-download:hover{ background:#f1f0ec; }

.about2-working{
  margin-top:80px;
  margin-bottom:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
}
.about2-working img{ width:100%; height:320px; object-fit:cover; }
.about2-working img:nth-child(3){ object-position:50% 15%; }
@media (max-width:820px){
  .about2-columns{ grid-template-columns:1fr; max-width:420px; }
  .about2-working{ grid-template-columns:1fr; }
  .about2-working img{ height:260px; }
}

/* ---------- Works ---------- */
.works2-featured{
  display:block;
  position:relative;
  height:auto;
  aspect-ratio:20/7;
  min-height:0;
  overflow:hidden;
}
.works2-track{
  position:absolute; inset:0;
  display:flex;
  transition:transform 1s cubic-bezier(.6,0,.3,1);
}
.works2-track img{
  width:100%; height:100%;
  object-fit:cover;
  flex:0 0 100%;
}
.works2-featured-label{
  position:absolute;
  bottom:8%;
  right:6%;
  z-index:3;
  text-align:right;
}
.works2-featured-label .role{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:8px;
  opacity:0.9;
}
.works2-featured-label h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(30px,5vw,54px);
  color:#fff;
  margin:0;
}
.works2-featured-veil{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 45%);
  z-index:2;
}

.works2-grid{
  max-width:1240px;
  margin:70px auto 0;
  padding:0 34px 120px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.works2-tile{
  display:block;
  background:#fff;
  border:1px solid var(--grey-line);
}
.works2-tile .frame{
  aspect-ratio:4/5;
  overflow:hidden;
}
.works2-tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.works2-tile:hover img{ transform:scale(1.03); }
.works2-tile .cap{
  background:#111;
  color:#fff;
  padding:10px 12px;
  font-family:var(--font-caption);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
@media (max-width:860px){
  .works2-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:540px){
  .works2-grid{ grid-template-columns:1fr; }
}

/* ---------- Contact v2 ---------- */
.contact2-hero{
  position:relative;
  height:78vh;
  min-height:440px;
  overflow:hidden;
}
.contact2-hero img{ width:100%; height:100%; object-fit:cover; }

.contact2-body{
  background:var(--white);
  color:var(--ink);
  padding:80px 34px 120px;
  text-align:center;
}
.contact2-body .email{
  font-family:var(--font-body);
  font-size:19px;
  color:var(--ink);
}
.contact2-body .email:hover{ opacity:0.6; }
.phone-reveal{
  margin-top:26px;
  display:inline-block;
  padding:14px 28px;
  border-radius:999px;
  background:rgba(20,20,20,0.06);
  border:1px solid rgba(20,20,20,0.28);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px;
  letter-spacing:0.03em;
}
.phone-reveal:hover{ background:rgba(20,20,20,0.1); }

/* ---------- Project detail v2 (light) ---------- */
.proj2-hero{ position:relative; height:56vh; min-height:340px; overflow:hidden; }
.proj2-hero img{ width:100%; height:100%; object-fit:cover; }
.proj2-body{
  max-width:1000px; margin:0 auto; padding:56px 34px 120px;
  background:var(--white); color:var(--ink);
}
.proj2-body h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(32px,5vw,52px);
}
.proj2-body .role{
  font-family:var(--font-dm); font-weight:500; letter-spacing:0.06em; text-transform:uppercase;
  font-size:14px; color:#666; margin-top:8px; display:block;
}
.proj2-body p.desc{
  font-family:var(--font-body); font-size:17px; line-height:1.7; max-width:68ch; margin-top:26px;
}
.proj2-gallery{
  margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.proj2-gallery img{ width:100%; height:360px; object-fit:cover; }
.proj2-back{
  display:inline-block; margin-bottom:20px; font-family:var(--font-body);
  font-size:13px; color:#777;
}
.proj2-back:hover{ color:var(--ink); }

/* =========================================================
   V3 — REFINEMENTS (frame, fades, unified type, palette)
   ========================================================= */
:root{
  --beige:      #F3EEE3;
  --navy:       #1E3A44;
  --mustard:    #B8860B;
  --cream:      #F3EEE3;
  --charcoal:   #1B1814;
  --charcoal-2: #26221C;
  --font-hand2: "Caveat", cursive;
}

body{ background:var(--beige); }

/* Fixed "canvas" frame so proportions never stretch/crop differently
   on large monitors — everything sits inside a capped width and the
   rest of a wide screen just shows the site background as a margin. */
.site-frame{
  max-width:1440px;
  margin:0 auto;
  background:var(--white);
  position:relative;
  /* NOTE: no overflow:hidden here — it breaks position:sticky for the
     corner headers below, since it makes the browser treat this frame
     as the sticky scroll container instead of the real page scroll. */
}

/* Hero + contact photos: fixed aspect ratio matching the source
   images exactly, so they scale together and are NEVER cropped
   top/bottom regardless of screen size. */
.v2-hero{
  height:auto;
  aspect-ratio:16/9;
  min-height:0;
}
.v2-hero img{ object-fit:cover; }
.hero-fade-bottom{
  position:absolute; left:0; right:0; bottom:0; height:7%;
  background:linear-gradient(0deg, var(--beige) 0%, rgba(243,238,227,0) 100%);
  pointer-events:none;
}

/* ---------- corner id / nav — same two typefaces as the portada:
   the serif from "IRENE LERA" + the script from "Art department" ---------- */
.v2-corner{
  background:linear-gradient(180deg, var(--beige) 55%, rgba(243,238,227,0));
  padding:44px 0 0 34px;
}
.v2-corner .name{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:0.02em;
  font-size:23px;
  color:var(--navy);
}
.v2-corner .label{
  font-family:var(--font-hand);
  font-size:52px;
  color:var(--navy);
  margin-top:2px;
}
.v2-corner.corner-on-dark{
  background:linear-gradient(180deg, rgba(20,20,20,0.55) 0%, rgba(20,20,20,0) 100%);
  padding-bottom:30px;
}
.v2-corner.corner-on-dark .name,
.v2-corner.corner-on-dark .label{ color:#fff; }
.v2-corner.corner-on-photo .name,
.v2-corner.corner-on-photo .label{
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,0.65), 0 0 3px rgba(0,0,0,0.4);
}

.v2-nav a{
  font-family:var(--font-hand);
  font-size:27px;
  color:var(--navy);
  text-decoration:underline;
  text-decoration-color:rgba(30,58,68,0.28);
  text-underline-offset:6px;
}
.v2-nav a:hover{ text-decoration-color:rgba(30,58,68,0.8); opacity:1; }

/* ---------- scroll cue on the hero (works without hovering the baked-in nav) ---------- */
.scroll-cue{
  position:absolute;
  left:50%; bottom:26px;
  transform:translateX(-50%);
  z-index:3;
  display:flex; gap:7px;
  padding:10px;
}
.scroll-cue .dot{
  width:6px; height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.85);
  animation:cueBounce 1.4s ease-in-out infinite;
}
.scroll-cue .dot:nth-child(2){ animation-delay:.15s; }
.scroll-cue .dot:nth-child(3){ animation-delay:.3s; }
@keyframes cueBounce{
  0%,60%,100%{ transform:translateY(0); opacity:0.6; }
  30%{ transform:translateY(-6px); opacity:1; }
}

/* ---------- About v3 ---------- */
.v2-section{ background:var(--beige); }
.about2-body{ padding-top:26px; padding-left:140px; }
@media (max-width:900px){
  .about2-body{ padding-left:34px; }
}
.about2-copy p{ font-family:var(--font-body); }
.about2-columns h4,
.about2-jobs h4{ font-family:var(--font-body); font-weight:700; }
.about2-jobs .job{ color:#4A463E; }
.about2-jobs h4{ font-weight:700; }
.about2-jobs .job .proj-title{
  color:#4A463E;
  font-weight:400;
}
.cv2-download{ background:var(--white); }

/* ---------- Works v4 — every row is its own film-strip ---------- */
.works-dark{
  background:var(--beige);
  padding:0 22px 26px;
}
.works-fade-in{
  height:70px;
  background:linear-gradient(180deg, var(--beige) 0%, var(--charcoal) 100%);
}
.works-dark .v2-sticky-wrap{
  background:var(--charcoal);
  border-radius:3px;
  overflow:hidden;
}

.filmstrip-edge{
  height:14px;
  background:
    repeating-linear-gradient(90deg,
      var(--charcoal-2) 0 9px,
      var(--charcoal) 9px 18px);
}

.film-row{ padding:0 18px; }
.film-row-inner{ padding:6px 0; }

/* Row 1 — Ets i Uts, single wide carousel cell */
.works2-featured{ margin:0; border-radius:0; }
.works2-featured-veil{
  background:linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.05) 55%);
}
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:4;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.5);
  background:rgba(0,0,0,0.3);
  color:#fff;
  font-size:16px;
  display:flex; align-items:center; justify-content:center;
}
.carousel-arrow:hover{ background:rgba(184,134,11,0.55); border-color:var(--mustard); }
.carousel-arrow.prev{ left:16px; }
.carousel-arrow.next{ right:16px; }

/* Rows 2+ — four tiles, small, landscape "frame" ratio */
.works2-grid-4{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  margin:0;
  padding:0;
  max-width:none;
}
.works2-tile{
  background:var(--charcoal-2);
  border:1px solid rgba(243,238,227,0.1);
  transition:box-shadow .3s ease, border-color .3s ease;
}
.works2-tile:hover{
  border-color:rgba(184,134,11,0.55);
  box-shadow:0 0 0 1px rgba(184,134,11,0.35), 0 8px 20px rgba(0,0,0,0.45);
}
.works2-tile .frame{ aspect-ratio:4/3; overflow:hidden; }
.works2-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .5s ease; }
.works2-tile:hover img{ transform:scale(1.08); filter:brightness(1.12) saturate(1.05); }
.works2-tile .cap{
  background:var(--charcoal);
  color:var(--cream);
  padding:7px 10px;
  font-size:10.5px;
}
@media (max-width:700px){
  .works2-featured{ aspect-ratio:4/3; }
}
@media (max-width:900px){
  .works2-grid-4{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:600px){
  .works2-grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:380px){
  .works2-grid-4{ grid-template-columns:1fr; }
}

/* ---------- Contact v4 — contained panoramic band, name added, quiet button ---------- */
/* ---------- Contact v6 — client's own final photo, real image ratio,
   invisible hotspots over the baked-in email/button, no fade ---------- */
.contact2-frame{
  padding:0;
}
.contact2-hero{ position:relative; height:auto; aspect-ratio:1913/675; overflow:hidden; }
.contact2-hero img{ width:100%; height:100%; object-fit:cover; }
.contact2-name{
  position:absolute; left:0; right:0; top:10%; z-index:3;
  text-align:center;
  font-family:var(--display);
  font-weight:400;
  letter-spacing:0.04em;
  font-size:clamp(16px,2.2vw,24px);
  color:#fff;
  opacity:0.9;
}
.contact-hotspot{
  position:absolute;
  display:block;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
.contact-hs-email{ left:32%; width:36%; top:50%; height:9%; }
.contact-hs-phone{ left:30%; width:40%; top:62%; height:13%; }
.phone-reveal-pill{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(120,116,104,0.92);
  border:1px solid rgba(255,255,255,0.35);
  border-radius:999px;
  color:#fff;
  font-family:var(--font-body);
  font-size:14px;
  letter-spacing:0.03em;
  opacity:0;
  transition:opacity .2s ease;
}
.phone-reveal-pill.is-active{ opacity:1; }
@media (max-width:700px){
  .contact2-hero{ aspect-ratio:4/3; }
  .contact-hs-email{ top:56%; height:8%; }
  .contact-hs-phone{ top:66%; height:10%; }
}
@media (max-width:700px){
  .contact2-hero{ aspect-ratio:4/3; }
}

/* =========================================================
   V5 — Works as beige grid (no film-strip), DM Sans overlays,
   project detail corner header, credits/links
   ========================================================= */
.works-featured-wrap{
  position:relative;
  margin:0 0 10px;
  border-radius:0;
  overflow:hidden;
}
.works-featured-wrap .works2-featured{ margin:0; border-radius:0; }

.works3-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  background:transparent;
  margin:0 0 10px;
}
.works3-tile{
  position:relative;
  display:block;
  overflow:hidden;
}
.works3-tile .frame{ aspect-ratio:16/10; overflow:hidden; }
.works3-tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease, filter .5s ease;
}
.works3-tile:hover img{ transform:scale(1.06); filter:brightness(0.72); }
.works3-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:0 14px;
  pointer-events:none;
}
.works3-overlay h4{
  font-family:var(--font-dm);
  font-weight:700;
  font-size:clamp(15px,1.6vw,20px);
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#fff;
  margin:0;
  text-shadow:0 1px 10px rgba(0,0,0,0.5);
}
.works3-overlay p{
  font-family:var(--font-dm);
  font-weight:400;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#fff;
  margin:2px 0 0;
  text-shadow:0 1px 8px rgba(0,0,0,0.5);
}
@media (max-width:820px){
  .works3-row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .works3-row{ grid-template-columns:1fr; }
}

/* ---------- Project detail corner header (fixed, click = back) ---------- */
.proj2-corner{
  position:fixed;
  top:0; left:0;
  z-index:40;
  padding:26px 0 0 34px;
  display:block;
  background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);
}
.proj2-corner .name{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:0.02em;
  font-size:22px;
  color:#fff;
  display:block;
}
.proj2-corner .label{
  font-family:var(--font-hand);
  font-size:28px;
  color:#fff;
  display:block;
  margin-top:-2px;
}
@media (max-width:720px){
  .proj2-corner{ padding:16px 0 0 20px; }
  .proj2-corner .name{ font-size:18px; }
  .proj2-corner .label{ font-size:22px; }
}

.proj2-body h1{ font-family:var(--display); font-weight:400; text-transform:none; }
.proj2-body h1 .subtitle{ font-family:var(--font-body); font-weight:400; font-size:0.45em; color:#777; margin-left:10px; }
.proj-link{ color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.proj-link:hover{ opacity:0.7; }
.proj2-credits{
  margin-top:36px;
  font-family:var(--font-body);
  font-size:13px;
  color:#777;
  line-height:1.6;
}
.proj2-subhead{
  font-family:var(--display);
  font-weight:400;
  font-size:22px;
  color:var(--ink);
  margin-top:56px;
  margin-bottom:6px;
}