/* elisasswimwear.com — site.css
   Personality: airy, editorial. Accent emphasis: INK + ROSE, gold kept for CTAs only (lightest touch of the family).
   Signature detail: magazine "issue line", triptych hero, horizontal look strip, drop cap spread. */
.site-swim { --accent: var(--rose); --accent-2: var(--ink-deep); }
.logo-sub { font-weight: 300; letter-spacing: .3em; text-transform: uppercase; font-size: .85rem; }
.small { font-size: .85rem; }
.site-swim section { padding-block: clamp(4.5rem, 10vw, 8rem); }
.site-swim .s-hero { padding: 0 0 3rem; }
.site-swim h2 { font-weight: 300; }

/* Hero */
.hero-swim { background: linear-gradient(180deg, transparent 70%, var(--bg) 100%); }
.issue { display: flex; justify-content: space-between; padding: 1.1rem 0; font-size: .66rem; letter-spacing: .34em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.triptych { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 6px; height: min(68vh, 640px); margin-top: 6px; }
.triptych img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.triptych img:nth-child(2) { object-position: center 10%; }
.hero-swim-copy { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: end; margin-top: -4.2rem; position: relative; }
.hero-swim-copy h1 { font-weight: 300; font-size: clamp(3rem, 8.4vw, 6.8rem); line-height: .9; margin: 0; padding: 1.2rem 1.4rem 0 0; background: linear-gradient(180deg, rgba(246, 240, 232, .92), var(--bg)); max-width: 11ch; }
.hero-swim-copy h1 em { color: var(--rose); }
@media (max-width: 860px) {
  .triptych { grid-template-columns: 1fr 1fr; height: 70vh; } .triptych img:nth-child(3) { display: none; }
  .hero-swim-copy { grid-template-columns: 1fr; margin-top: -2.5rem; }
  .issue span:nth-child(3) { display: none; }
}

/* Look strip */
.strip { display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 max(1rem, calc((100vw - var(--max)) / 2)) 1rem; scrollbar-width: thin; }
.look { flex: 0 0 min(320px, 72vw); margin: 0; scroll-snap-align: start; }
.look img { width: 100%; aspect-ratio: 3 / 4.4; object-fit: cover; object-position: center 15%; }
.look figcaption { display: flex; gap: .9rem; align-items: baseline; padding-top: .8rem; font-family: var(--serif); font-size: 1.5rem; font-weight: 300; border-top: 1px solid var(--fg); margin-top: .8rem; }
.look figcaption span { font-family: var(--sans); font-size: .68rem; letter-spacing: .2em; color: var(--rose); }

/* Spread */
.spread { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 7vw, 6rem); align-items: center; }
.spread-img { margin: 0; }
.spread-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.spread-img figcaption { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin-top: .7rem; }
.dropcap { font-size: 1.12rem; line-height: 1.75; }
.dropcap::first-letter { float: left; font-family: var(--serif); font-size: 4.6rem; line-height: .8; padding: .35rem .6rem 0 0; color: var(--rose); }
@media (max-width: 860px) { .spread { grid-template-columns: 1fr; } }

/* Ink drops */
.drop-grid { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 2rem; align-items: center; }
.drop-card h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.drop-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.drop-mosaic img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.drop-mosaic img:nth-child(2) { margin-top: 3rem; }
.drop-cast { border-left: 1px solid rgba(246, 240, 232, .2); padding-left: 2rem; }
.drop-cast h3 { font-size: 1.7rem; margin: 0 0 .4rem; font-weight: 300; }
@media (max-width: 900px) { .drop-grid { grid-template-columns: 1fr; } .drop-cast { border-left: 0; padding-left: 0; } }