@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;450;500;600&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:#f5f1ea;
color:#1d1d1d;
font-family:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
line-height:1.7;
}

.hero{
position:relative;
height:100vh;
overflow:hidden;
}

.hero img{
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
display:block;
transform:translateX(0);
}

.overlay{
position:absolute;
left:4.5%;
bottom:6%;
background:rgba(245,241,234,.28);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
padding:1rem 1.35rem;
max-width:420px;
border-radius:22px;
}

.overlay h1{
font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
font-size:clamp(2.4rem,5.4vw,4.6rem);
font-weight:500;
letter-spacing:-0.05em;
line-height:.95;
margin-bottom:1rem;
}

.overlay p{
font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
font-style:italic;
opacity:.42;
font-size:1.05rem;
}

.intro{
width:100%;
padding:7.5rem 2rem 7rem;
}

.intro-inner{
max-width:850px;
margin:0 auto;
font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
font-size:clamp(1.15rem,1.85vw,1.55rem);
line-height:1.95;
color:#24211d;
}

.intro-inner p{
margin-bottom:2.15rem;
}

.grid{
width:min(1320px,92%);
margin:0 auto 8rem auto;
display:grid;
grid-template-columns:repeat(12,1fr);
gap:2rem;
}

.card{
background:#ece6dd;
overflow:hidden;
border-radius:24px;
min-height:360px;
}

.card img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.vertical{
grid-column:span 5;
min-height:620px;
}

.text{
grid-column:span 7;
padding:3rem;
display:flex;
flex-direction:column;
justify-content:center;
background:#e9e1d5;
}

.text-shift{
transform:translateY(20px);
}

.text h2{
font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
font-size:2.4rem;
font-weight:500;
margin-bottom:1rem;
}

.text p{
font-size:1.15rem;
opacity:.76;
max-width:520px;
}

.wide{
grid-column:span 12;
min-height:520px;
}

.card:not(.vertical):not(.wide):not(.text){
grid-column:span 6;
}

.drawing{
grid-column:span 6;
background:#f3efe7;
padding:2rem;
display:flex;
align-items:center;
justify-content:center;
}

.drawing img{
object-fit:contain;
border-radius:18px;
}

.final-note{
grid-column:span 6;
font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
font-size:1.55rem;
line-height:1.75;
}

footer{
padding:5rem 2rem;
text-align:center;
opacity:.5;
}

@media(max-width:900px){

.hero{
height:76vh;
}

.hero img{
width:100%;
object-position:56% center;
transform:translateX(0);
}

..overlay{
position:relative;
left:auto;
right:auto;
bottom:auto;
margin:0 1rem;
margin-top:-1rem;
max-width:none;
padding:1.2rem 1.3rem;
border-radius:18px;
background:#efe8dd;
backdrop-filter:none;
-webkit-backdrop-filter:none;
}

.overlay h1{
font-size:clamp(2.65rem,12vw,4.4rem);
}

.overlay p{
font-size:.95rem;
}

.intro{
padding:5rem 1.5rem;
}

.grid{
grid-template-columns:1fr;
gap:1.25rem;
}

.vertical,.wide,.card:not(.text){
grid-column:auto;
min-height:320px;
}

.text,.final-note{
grid-column:auto;
min-height:260px;
padding:2rem;
}

.text-shift{
transform:none;
}

.drawing{
grid-column:auto;
padding:1.25rem;
}
}

/* V10 — mobile-only fix for squeezed Fragments/grid blocks */
@media (max-width:900px){
  .grid{
    width:100% !important;
    max-width:430px !important;
    margin:0 auto 6rem auto !important;
    padding:0 1.25rem !important;
    display:flex !important;
    flex-direction:column !important;
    gap:1.35rem !important;
  }

  .grid > .card,
  .grid > .vertical,
  .grid > .wide,
  .grid > .text,
  .grid > .drawing,
  .grid > .final-note{
    width:100% !important;
    grid-column:1 / -1 !important;
    flex:0 0 auto !important;
  }

  .grid > .card:not(.text):not(.drawing){
    min-height:0 !important;
    aspect-ratio:4 / 5 !important;
  }

  .grid > .wide{
    aspect-ratio:4 / 5 !important;
  }

  .grid > .text,
  .grid > .final-note{
    min-height:auto !important;
    padding:2.25rem 1.9rem !important;
  }

  .grid > .text h2{
    font-size:2.25rem !important;
    line-height:1.05 !important;
  }

  .grid > .text p,
  .grid > .final-note p{
    font-size:1.05rem !important;
    line-height:1.75 !important;
    max-width:none !important;
  }
}

/* V11 — mobile-only: lighter hero title plate so it does not eat the chin */
@media (max-width:900px){
  .hero .overlay{
    left:4.5% !important;
    right:4.5% !important;
    bottom:4.5% !important;
    max-width:none !important;
    padding:.72rem .95rem .78rem !important;
    border-radius:16px !important;
  }

  .hero .overlay h1{
    font-size:clamp(2.15rem,10.4vw,3.35rem) !important;
    line-height:.94 !important;
    margin-bottom:.42rem !important;
    letter-spacing:-0.05em !important;
  }

  .hero .overlay p{
    font-size:.82rem !important;
    line-height:1.25 !important;
  }
}

/* V13 — subtle vertical rhythm polish: more breathing room without changing layout */
.intro{
  padding-top:8rem;
  padding-bottom:7.6rem;
}

.intro-inner p{
  margin-bottom:2.35rem;
}

.grid{
  gap:2.25rem;
  margin-bottom:8.6rem;
}

.text{
  padding:3.25rem;
}

.text h2{
  margin-bottom:1.15rem;
}

footer{
  padding-top:5.6rem;
  padding-bottom:5.6rem;
}

@media (max-width:900px){
  .intro{
    padding-top:5.35rem !important;
    padding-bottom:5.65rem !important;
  }

  .intro-inner p{
    margin-bottom:2.05rem !important;
  }

  .grid{
    gap:1.55rem !important;
    margin-bottom:6.7rem !important;
  }

  .grid > .text,
  .grid > .final-note{
    padding-top:2.45rem !important;
    padding-bottom:2.45rem !important;
  }

  .grid > .text h2{
    margin-bottom:1.05rem !important;
  }

  footer{
    padding-top:4.75rem !important;
    padding-bottom:4.75rem !important;
  }
}

/* V14 — typography polish: line length, line-height and quiet editorial spacing */
body{
  font-size:16px;
  letter-spacing:-0.006em;
}

.overlay h1,
.text h2{
  letter-spacing:-0.045em;
}

.overlay p{
  letter-spacing:0.01em;
}

.intro-inner{
  max-width:790px;
  line-height:1.88;
  letter-spacing:-0.012em;
}

.text h2{
  line-height:1.02;
}

.text p{
  line-height:1.72;
  letter-spacing:-0.004em;
  max-width:500px;
}

.final-note{
  line-height:1.66;
  letter-spacing:-0.012em;
}

footer{
  font-size:.92rem;
  letter-spacing:.015em;
}

@media (max-width:900px){
  body{
    letter-spacing:-0.004em;
  }

  .intro-inner{
    max-width:36rem;
    font-size:clamp(1.16rem,5vw,1.42rem) !important;
    line-height:1.82 !important;
    letter-spacing:-0.012em !important;
  }

  .hero .overlay h1{
    letter-spacing:-0.048em !important;
  }

  .hero .overlay p{
    letter-spacing:0.012em !important;
  }

  .grid > .text h2{
    line-height:1.02 !important;
    letter-spacing:-0.045em !important;
  }

  .grid > .text p,
  .grid > .final-note p{
    line-height:1.72 !important;
    letter-spacing:-0.006em !important;
  }

  footer{
    font-size:.88rem !important;
    letter-spacing:.014em !important;
  }
}

/* V18 — desktop-only hero correction: fit the portrait vertically and return the face to the right side */
@media (min-width:901px){
  .hero{
    background:#f5f1ea;
  }

  .hero img{
    position:absolute !important;
    right:3.5vw !important;
    top:2vh !important;
    width:auto !important;
    height:96vh !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
  }

  .hero .overlay{
    left:4.5% !important;
    bottom:7% !important;
  }
}

/* V19 — mobile-only cinematic hero: no glass plate, text sits directly on the image */
@media (max-width:900px){
  .hero{
    position:relative !important;
    height:76vh !important;
    overflow:hidden !important;
  }

  .hero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:42%;
    background:linear-gradient(to top, rgba(0,0,0,.48), rgba(0,0,0,.18) 48%, rgba(0,0,0,0));
    pointer-events:none;
    z-index:1;
  }

  .hero img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:56% center !important;
    transform:none !important;
  }

  .hero .overlay{
    position:absolute !important;
    left:7.2% !important;
    right:7.2% !important;
    bottom:6.2% !important;
    z-index:2 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .hero .overlay h1{
    color:#f7f0e7 !important;
    font-size:clamp(2.45rem,11.5vw,3.85rem) !important;
    line-height:.9 !important;
    margin-bottom:.45rem !important;
    letter-spacing:-0.052em !important;
    text-shadow:0 2px 18px rgba(0,0,0,.38) !important;
  }

  .hero .overlay p{
    color:#f4ede2 !important;
    opacity:.82 !important;
    font-size:.88rem !important;
    line-height:1.25 !important;
    letter-spacing:.012em !important;
    text-shadow:0 2px 14px rgba(0,0,0,.42) !important;
  }
}

/* V20 — subtle motion polish: quiet reveal, soft image life, respects reduced motion */
@media (prefers-reduced-motion: no-preference){
  .intro,
  .grid > .card,
  footer{
    opacity:0;
    transform:translateY(18px);
    transition:opacity 900ms ease, transform 900ms ease;
    will-change:opacity, transform;
  }

  .intro.is-visible,
  .grid > .card.is-visible,
  footer.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  .card img{
    transition:transform 1200ms ease, filter 1200ms ease;
  }

  .card:hover img{
    transform:scale(1.018);
  }

  .drawing:hover img{
    transform:scale(1.006);
  }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

/* V22 — mobile-only hero rendering fix: single image, no duplicated background/ghosting */
@media (max-width:900px){
  .hero{
    background-image:none !important;
    background:none !important;
  }

  .hero img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:55% 48% !important;
    transform:none !important;
    transform-origin:center center !important;
    transition:none !important;
  }
}

/* V23 — mobile-only final hero framing: slight zoom-out by reducing hero height, single image preserved */
@media (max-width:900px){
  .hero{
    height:72vh !important;
    min-height:620px !important;
    max-height:760px !important;
    overflow:hidden !important;
    background:none !important;
  }

  .hero img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:58% 47% !important;
    transform:none !important;
  }
}

/* V24 — mobile-only balanced hero framing: proportional zoom-out and more left/right air */
@media (max-width:900px){
  .hero{
    height:67vh !important;
    min-height:575px !important;
    max-height:705px !important;
    overflow:hidden !important;
    background:none !important;
  }

  .hero img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:49% 47% !important;
    transform:none !important;
    transform-origin:center center !important;
  }
}

/* V25 — desktop-only: remove the leftover glass plate from split hero */
@media (min-width:901px){
  .hero .overlay{
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    padding:0 !important;
    border-radius:0 !important;
    max-width:520px !important;
  }

  .hero .overlay h1{
    margin-bottom:.85rem !important;
  }
}

/* V27 — desktop-only: keep hero typography at the bottom, centered inside the left editorial panel */
@media (min-width:901px){
  .hero .overlay{
    left:0 !important;
    bottom:7% !important;
    top:auto !important;
    width:calc(96.5vw - 108.43vh) !important;
    min-width:360px !important;
    max-width:520px !important;
    padding:0 clamp(1.25rem,2.1vw,2.4rem) !important;
    margin:0 !important;
    text-align:center !important;
    display:block !important;
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-radius:0 !important;
    transform:none !important;
  }

  .hero .overlay h1{
    white-space:nowrap !important;
    font-size:clamp(2.55rem,3.25vw,4.05rem) !important;
    line-height:.9 !important;
    margin-bottom:.85rem !important;
    letter-spacing:-0.05em !important;
  }

  .hero .overlay p{
    max-width:24rem !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (min-width:901px) and (max-width:1120px){
  .hero .overlay{
    width:42vw !important;
    min-width:0 !important;
    max-width:none !important;
    padding-left:1.25rem !important;
    padding-right:1.25rem !important;
  }

  .hero .overlay h1{
    font-size:clamp(2.05rem,3.45vw,2.75rem) !important;
  }
}

/* V28 — mobile-only: refine hero typography so it reads more like a quiet caption over the portrait */
@media (max-width:900px){
  .hero .overlay h1{
    font-size:clamp(2.18rem,10.15vw,3.38rem) !important;
    line-height:.91 !important;
    letter-spacing:-0.052em !important;
    margin-bottom:.42rem !important;
  }

  .hero .overlay p{
    font-size:.83rem !important;
    line-height:1.25 !important;
  }
}