/* ============================================
   SHERYL JOYCE — Shared Stylesheet
   Soft romantic realism · natural elegance
   ============================================ */

/* ---- TOKENS ---- */
:root {
  --cream:        #faf7f4;
  --blush-light:  #f5ece8;
  --blush:        #e0ccc6;
  --rose:         #a87060;
  --rose-hover:   #7d5245;
  --text:         #1f1a18;
  --text-soft:    #7a6b66;
  --border:       #ddd0ca;
  --bg-overlay:   rgba(250, 247, 244, 0.74);
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- BACKGROUND ---- */
html {
  background-color: var(--cream);
  background-image: url('assets/backgrounds/site-portrait.png');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
html::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: 0;
  pointer-events: none;
}

body {
  position: relative;
  z-index: 1;
  background: transparent;
  color: var(--text);
  font-family: 'Jost', Georgia, "Times New Roman", serif;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 2.4em 7em;
}

/* ---- SITE HEADER / NAV ---- */
.site-header {
  padding: 2em 0 1.6em;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-brand:hover { color: var(--rose); }
.nav-links { display: flex; gap: 2.4em; }
.nav-link {
  font-family: 'Jost', sans-serif;
  font-size: 0.68em;
  font-weight: 300;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-link:hover { color: var(--text); border-bottom-color: var(--border); }
.nav-link.active { color: var(--text); border-bottom-color: var(--rose); }

/* ---- HERO ---- */
.hero {
  padding: 4.5em 0 3em;
  text-align: center;
}
.hero-overline {
  font-family: 'Jost', sans-serif;
  font-size: 0.65em;
  font-weight: 300;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.9em;
}
.hero-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 5.2em;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
  margin-bottom: 0.35em;
}
@media (max-width: 600px) { .hero-name { font-size: 2.8em; } }

.hero-tagline {
  font-family: 'Jost', sans-serif;
  font-size: 0.72em;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 2.6em;
}

/* Comp card */
.comp-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5em 1.4em;
  padding: 1.4em 2em;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  max-width: 700px;
  margin: 0 auto;
}
.comp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18em;
}
.comp-label {
  font-family: 'Jost', sans-serif;
  font-size: 0.56em;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rose);
}
.comp-value {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.85em;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text);
}
.comp-sep { font-size: 0.6em; color: var(--blush); align-self: flex-end; margin-bottom: 0.25em; }

/* ---- INTRO ---- */
.intro-section {
  max-width: 760px;
  margin: 3.2em auto 2.2em;
  text-align: center;
}
.intro-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2em;
  font-weight: 400;
  font-style: italic;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 1em;
}
.intro-body {
  font-family: 'Jost', sans-serif;
  font-size: 0.88em;
  font-weight: 300;
  line-height: 1.95;
  color: var(--text-soft);
}

/* ---- DIVIDER ---- */
.gallery-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.4em 0;
}

/* ---- GALLERY SECTIONS ---- */
.gallery-section-label {
  font-family: 'Jost', sans-serif;
  font-size: 0.64em;
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 1.4em;
  margin-top: 2.6em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--border);
}

.gallery-row {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  gap: 24px;
  padding: 0 0 16px 0;
  margin-bottom: 1em;
  scrollbar-width: thin;
  scrollbar-color: var(--blush) transparent;
  -webkit-overflow-scrolling: touch;
}
.gallery-row::-webkit-scrollbar { height: 3px; }
.gallery-row::-webkit-scrollbar-track { background: transparent; }
.gallery-row::-webkit-scrollbar-thumb { background-color: var(--blush); border-radius: 2px; }

.gallery-item {
  flex: 0 0 auto;
  width: 235px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 600px) { .gallery-item { width: 68vw; } }

.gallery-item a { display: block; width: 100%; text-decoration: none; }
.gallery-item img {
  width: 100%;
  height: 310px;
  object-fit: cover;
  display: block;
  border-radius: 1px;
  transition: opacity 0.35s ease, transform 0.45s ease;
  box-shadow: 0 4px 22px rgba(90, 50, 40, 0.09);
}
.gallery-item a:hover img { opacity: 0.87; transform: scale(1.012); }

.gallery-caption { margin-top: 13px; padding: 0 2px; width: 100%; }
.gallery-caption-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.94em;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--text);
  margin: 0 0 4px 0;
  line-height: 1.3;
}
.gallery-caption-meta {
  font-family: 'Jost', sans-serif;
  font-size: 0.66em;
  font-weight: 300;
  font-style: italic;
  color: var(--text-soft);
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.gallery-caption-text {
  font-family: 'Jost', sans-serif;
  font-size: 0.7em;
  color: var(--text-soft);
  margin-top: 5px;
  line-height: 1.6;
  font-style: italic;
}
.gallery-view-link {
  display: inline-block;
  margin-top: 9px;
  font-family: 'Jost', sans-serif;
  font-size: 0.6em;
  font-weight: 300;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rose);
  text-decoration: none;
  border-bottom: 1px solid var(--blush);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.gallery-view-link:hover { color: var(--rose-hover); border-bottom-color: var(--rose); }

/* ---- STORIES PAGE ---- */
.page-hero {
  padding: 4em 0 2.8em;
  text-align: center;
}
.page-hero-overline {
  font-family: 'Jost', sans-serif;
  font-size: 0.65em;
  font-weight: 300;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.8em;
}
.page-hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 3.6em;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1;
  margin-bottom: 0.4em;
}
.page-hero-subtitle {
  font-family: 'Jost', sans-serif;
  font-size: 0.72em;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* Featured photos strip */
.featured-label {
  font-family: 'Jost', sans-serif;
  font-size: 0.64em;
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 1.4em;
  margin-top: 1em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--border);
}
.featured-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 3em;
  scrollbar-width: thin;
  scrollbar-color: var(--blush) transparent;
}
.featured-row::-webkit-scrollbar { height: 3px; }
.featured-row::-webkit-scrollbar-thumb { background-color: var(--blush); border-radius: 2px; }
.featured-photo {
  flex: 0 0 auto;
  width: 260px;
  height: 340px;
  object-fit: cover;
  border-radius: 1px;
  box-shadow: 0 4px 20px rgba(90, 50, 40, 0.09);
  transition: opacity 0.3s;
}
.featured-photo:hover { opacity: 0.88; }

/* Stories grid */
.stories-section-label {
  font-family: 'Jost', sans-serif;
  font-size: 0.64em;
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 1.6em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--border);
}
.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 40px 32px;
}
@media (max-width: 600px) { .stories-grid { grid-template-columns: 1fr; } }

.story-card { display: flex; flex-direction: column; }
.story-card-img-wrap { position: relative; overflow: hidden; border-radius: 1px; margin-bottom: 16px; }
.story-card-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, opacity 0.3s;
  box-shadow: 0 3px 18px rgba(90, 50, 40, 0.09);
}
.story-card:hover .story-card-img { transform: scale(1.03); opacity: 0.9; }
.story-card-tag {
  font-family: 'Jost', sans-serif;
  font-size: 0.6em;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.5em;
}
.story-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35em;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 0.5em;
}
.story-card-date {
  font-family: 'Jost', sans-serif;
  font-size: 0.63em;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--text-soft);
  margin-bottom: 0.75em;
}
.story-card-excerpt {
  font-family: 'Jost', sans-serif;
  font-size: 0.82em;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-soft);
  font-style: italic;
  margin-bottom: 1em;
  flex-grow: 1;
}
.story-read-link {
  font-family: 'Jost', sans-serif;
  font-size: 0.62em;
  font-weight: 300;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rose);
  text-decoration: none;
  border-bottom: 1px solid var(--blush);
  padding-bottom: 1px;
  align-self: flex-start;
  transition: color 0.2s, border-color 0.2s;
}
.story-read-link:hover { color: var(--rose-hover); border-bottom-color: var(--rose); }

/* ---- GALLERY DETAIL PAGES ---- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Jost', sans-serif;
  font-size: 0.64em;
  font-weight: 300;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
  margin-bottom: 2.8em;
  transition: color 0.2s;
}
.back-link:hover { color: var(--rose); }
.portfolio-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.6em;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.2em;
  margin-top: 0.5em;
}
.portfolio-subtitle {
  font-family: 'Jost', sans-serif;
  font-size: 0.65em;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.8em;
}
.portfolio-caption {
  font-family: 'Jost', sans-serif;
  font-size: 0.9em;
  font-weight: 300;
  line-height: 1.85;
  color: var(--text-soft);
  max-width: 720px;
  margin-bottom: 0.5em;
  font-style: italic;
}
.portfolio-meta {
  font-family: 'Jost', sans-serif;
  font-size: 0.68em;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  margin-bottom: 2em;
}
.portfolio-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.6em 0 2.8em 0;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}
@media (max-width: 600px) { .photo-grid { grid-template-columns: 1fr; } }
.photo-item { display: flex; flex-direction: column; }
.photo-item img {
  width: 100%;
  display: block;
  border-radius: 1px;
  box-shadow: 0 3px 18px rgba(90, 50, 40, 0.09);
  transition: opacity 0.3s;
  object-fit: cover;
}
.photo-item img:hover { opacity: 0.89; }
.photo-info { margin-top: 11px; padding: 0 2px; }
.photo-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.88em;
  font-weight: 400;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
  line-height: 1.3;
}
.photo-caption {
  font-family: 'Jost', sans-serif;
  font-size: 0.72em;
  font-weight: 300;
  color: var(--text-soft);
  line-height: 1.6;
  font-style: italic;
}
.photo-meta {
  font-family: 'Jost', sans-serif;
  font-size: 0.64em;
  font-weight: 300;
  color: var(--text-soft);
  margin-top: 3px;
  letter-spacing: 0.06em;
}
.empty-notice {
  font-family: 'Jost', sans-serif;
  font-size: 0.88em;
  font-weight: 300;
  color: var(--text-soft);
  font-style: italic;
  padding: 2em 0;
}

/* ============================================
   MAGAZINE COVER INTRO — "Ang Halaga Mo"
   Alternating photo/text editorial manifesto
   ============================================ */

.mag-intro {
  margin: 0 0 3.5em;
}

/* ---- COVER ---- */
.mag-cover {
  position: relative;
  width: 100%;
  min-height: 74vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.2em 2em 2.6em;
  margin-bottom: 4em;
  border-radius: 2px;
  overflow: hidden;
  background-size: cover;
  background-position: center 22%;
  box-shadow: 0 10px 40px rgba(31, 26, 24, 0.28);
}
.mag-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(20, 14, 12, 0.28) 0%,
    rgba(20, 14, 12, 0.08) 40%,
    rgba(20, 14, 12, 0.62) 100%);
  z-index: 0;
}
.mag-cover > * { position: relative; z-index: 1; }

.mag-masthead {
  position: absolute;
  top: 1.6em;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255, 250, 247, 0.92);
  z-index: 1;
}
.mag-issue {
  position: absolute;
  top: 3.1em;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-weight: 200;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 250, 247, 0.6);
  z-index: 1;
}
.mag-cover-kicker {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  color: rgba(255, 250, 247, 0.94);
  margin-bottom: 0.35em;
  max-width: 22ch;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}
.mag-cover-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(3rem, 11vw, 7rem);
  line-height: 0.94;
  letter-spacing: 0.01em;
  color: #fffaf7;
  margin-bottom: 0.18em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
.mag-cover-sub {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: clamp(0.8rem, 1.8vw, 1rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 250, 247, 0.85);
}

/* ---- ALTERNATING ROWS ---- */
.mag-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.6em, 4vw, 3.4em);
  margin-bottom: clamp(3em, 6vw, 5em);
}
.mag-row.reverse .mag-photo { order: 2; }
.mag-row.reverse .mag-text  { order: 1; }

.mag-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  box-shadow: 0 8px 32px rgba(31, 26, 24, 0.22);
}

.mag-label {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 1.1em;
  display: flex;
  align-items: center;
  gap: 0.9em;
}
.mag-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.mag-body {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(1.15rem, 1.7vw, 1.42rem);
  line-height: 1.66;
  color: var(--text);
}
.mag-body .em {
  font-style: italic;
  color: var(--rose-hover);
}

/* ---- CLOSING STATEMENT ---- */
.mag-closing {
  text-align: center;
  padding: 2.4em 1em 1em;
  margin-bottom: 1.5em;
}
.mag-closing-line {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  line-height: 1.18;
  color: var(--text);
}
.mag-closing-line .strike {
  color: var(--rose);
}
.mag-signoff {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 1.8em;
}

@media (max-width: 720px) {
  .mag-row { grid-template-columns: 1fr; gap: 1.4em; }
  .mag-row.reverse .mag-photo { order: 0; }
  .mag-row.reverse .mag-text  { order: 0; }
  .mag-photo { aspect-ratio: 3 / 4; max-height: 78vh; margin: 0 auto; }
  .mag-cover { min-height: 68vh; }
}