/* ==========================================================
   Our Story — Katha Photography
   One flat background colour throughout (per brief). Every
   image is width:100% / height:auto — nothing is ever
   cropped to fill a box; layout is built around each photo's
   own proportions instead.
   ========================================================== */

:root{
  --bg:     #fbf8f4;   /* single background colour, page-wide */
  --ink:    #2a241f;
  --muted:  #8c8177;
  --accent: #7c3140;   /* deep wine — used sparingly */
  --hair:   rgba(42,36,31,0.13);
}

*{ box-sizing: border-box; }

.story{
  margin: 0;
  background-color: var(--bg);
  /* a whisper of paper grain so the flat colour has some tooth to it,
     the way the reference screenshots read as printed paper, not a
     flat digital fill */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/></svg>");
  color: var(--ink);
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* the one script moment, reserved for the two bookends (cover + closing) */
.script-title{
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 500;
  line-height: 1.1;
}
.cover-title.script-title{ font-size: clamp(3.4rem, 10vw, 6rem); }
.chapter-title.script-title{ font-size: clamp(2.6rem, 6vw, 4rem); }

/* roman-numeral chapter marks, replacing a spelled-out "Chapter N" */
.mark{
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-size: 1.3rem;
  color: var(--accent);
  margin: 0 0 0.9rem;
  letter-spacing: 0.04em;
}
.mark::after{
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
  margin-top: 0.65rem;
}
.mark--center::after{ margin-left: auto; margin-right: auto; }

/* a thin line-art sprig, used once, at the cover */
.sprig{
  width: 30px;
  height: 30px;
  fill: none;
  stroke: white;
  stroke-width: 1;
  /* opacity: 0.55; */
}

/* an oversized, faint ampersand behind the closing letter — the only
   other decorative flourish on the page, bookending the sprig above */
.letter--closing{ position: relative; }
.watermark{
  position: absolute;
  top: -2.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-size: 9rem;
  color: var(--accent);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.letter--closing > *:not(.watermark){ position: relative; z-index: 1; }

/* framed treatment for intimate detail shots — thin hairline mount,
   soft corners — kept off the full-bleed hero/banner photos so the
   two feel deliberately different: bold moments vs. quiet ones */
.framed{
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 0.4rem;
  background: var(--bg);
}
.framed img{ border-radius: 1px; }

img{ max-width: 100%; }

/* ---------- shared type ---------- */

.kicker{
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: white;
  margin: 0 0 0.6rem;
}

.kicker--sub{
  margin-top: -0.6rem;
}

.chapter-title{
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.9rem, 4vw, 2.85rem);
  line-height: 1.15;
  margin: 0 0 1.4rem;
}

.letter-text{
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.85;
  color: var(--ink);
  max-width: 46ch;
  margin: 0 auto;
}

.signature{
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-size: 1.35rem;
  color: var(--accent);
  margin: 1.75rem 0 0;
}

/* ---------- cover ---------- */

.story-cover{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.4rem;
  padding: 13vh 6vw 9vh;
}

.cover-frame{
  width: min(60vw, 340px);
}
.cover-frame img{ width: 100%; height: auto; display: block; }

.cover-title{
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  color: white;
  font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  margin: 0.4rem 0;
}

/* ---------- hero chapters (full-width photo, letter below) ---------- */

.hero-chapter{
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid var(--hair);
}

.hero-frame{ width: 100%; }
.hero-frame img{ width: 100%; height: auto; display: block; }

.hero-chapter .letter{
  max-width: 620px;
  text-align: center;
  padding: 5rem 6vw 3rem;
}

.duo{
  display: flex;
  gap: 2.2rem;
  width: 100%;
  padding: 0 6vw 9vh;
}
.duo-item{ flex: 1; }
.duo-item img{ width: 100%; height: auto; display: block; }

/* ---------- banner chapters (title/quote, then full-width photo) ---------- */

.banner-chapter{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3.2rem;
  padding: 9vh 6vw 9vh;
  border-top: 1px solid var(--hair);
}

.banner-chapter .letter{ max-width: 560px; }

.banner-frame{ width: 100%; }
.banner-frame img{ width: 100%; height: auto; display: block; }

.banner-secondary{
  width: 46%;
  align-self: flex-end;
}
.banner-secondary img{ width: 100%; height: auto; display: block; }

/* ---------- mosaic chapters (uneven two-up, text beside) ---------- */

.mosaic-chapter{
  display: flex;
  align-items: center;
  gap: 4.5rem;
  padding: 9vh 6vw;
  border-top: 1px solid var(--hair);
  background: linear-gradient(243deg, #3a271426, transparent);
}

.mosaic-chapter--reverse{ flex-direction: row-reverse; }

.mosaic-chapter .letter{
  flex: 0 0 30%;
  text-align: left;
}
.mosaic-chapter .letter-text{ margin: 0; }

.mosaic{
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
}

.mosaic-item--lg{ flex: 1.35; }
.mosaic-item--sm{ flex: 1; margin-top: 3.5rem; }

.mosaic-item img{ width: 100%; height: auto; display: block; }

/* ---------- maroon panel (interlude, image-centred) ---------- */

.panel-chapter{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3rem;
  padding: 10vh 6vw;
  border-top: 1px solid var(--hair);
  /* background: linear-gradient(45deg, black, #0000009c), url(./images/bg1.png) center / cover no-repeat; */
  background: #150e0b;
  color: #fff7f0;
}

.panel-frame{
  width: min(40%, 820px);
}
.panel-frame img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
      border: 1px solid white;
}

.panel-chapter .letter{ max-width: 580px; }
.panel-chapter .chapter-title,
.panel-chapter .letter-text{ color: #fff7f0; }

/* ---------- closing ---------- */

.story-closing{
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid var(--hair);
  padding-bottom: 11vh;
}

.story-closing .letter{
  max-width: 600px;
  text-align: center;
  padding: 5rem 6vw 1rem;
}

/* ---------- showcase (two vertical frames, content between) ---------- */

.showcase{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 11vh 6vw;
  border-top: 1px solid var(--hair);
  background: linear-gradient(117deg, #3a271426, transparent);
}

.showcase .letter{
  flex: 0 1 360px;
  text-align: center;
}

.showcase-media{
  flex: 0 1 26%;
}
.showcase-media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1px;
}

/* ---------- triptych (three balanced frames) ---------- */

.triptych{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1.6rem;
  padding: 11vh 6vw;
  border-top: 1px solid var(--hair);
  background: #542B23;;
}

.triptych-tile{
  flex: 1;
  max-width: 30%;
}
.triptych-tile:nth-child(2){ margin-top: 3.5rem; }
.triptych-tile img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1px;
}

/* ---------- responsive ---------- */

@media (max-width: 860px){
  .mosaic-chapter,
  .mosaic-chapter--reverse{
    flex-direction: column;
    gap: 2.4rem;
    text-align: center;
  }
  .mosaic-chapter .letter{ flex: none; text-align: center; }
  .mosaic-chapter .letter-text{ margin: 0 auto; }
  .mosaic{ flex-direction: column; width: 100%; }
  .mosaic-item--sm{ margin-top: 0; }

  .duo{ flex-direction: column; gap: 1.6rem; }
  .banner-secondary{ width: 72%; align-self: center; }

  .showcase{ flex-direction: column; gap: 2.4rem; }
  .showcase-media{ flex: none; width: min(72%, 360px); }

  .triptych{ flex-direction: column; align-items: center; gap: 2rem; }
  .triptych-tile{ max-width: min(72%, 360px); }
  .triptych-tile:nth-child(2){ margin-top: 0; }
}

/* fixed back-to-home button (auto-inverts over light/dark panels) */
.story-back{
  position: fixed;
  top: 28px;
  left: 32px;
  z-index: 2000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  mix-blend-mode: difference;
  transition: opacity 0.3s ease;
}
.story-back svg{
  display: block;
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}
.story-back:hover svg{ transform: translateX(-4px); }
.story-back:hover{ opacity: 0.75; }
@media (max-width: 560px){
  .story-back{ top: 20px; left: 20px; }
}