/*
 * The sample custom camp website (resources/views/site/website-sample.blade.php): what a high-end website the
 * studio makes for a camp looks like. Full-bleed pictures, a serif display face, quiet cream and forest tones.
 * Motion (public/js/website-sample.js, GSAP) only under html.ws-m; without it every part shows as it is.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

:root {
    --ws-ink: #1d2a24;
    --ws-forest: #21392f;
    --ws-forest-deep: #15251e;
    --ws-cream: #f6f1e7;
    --ws-sand: #e9dfcb;
    --ws-gold: #c9a45c;
    --ws-gold-deep: #a9843d;
    --ws-muted: #5b6660;
    --ws-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --ws-sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ws { font-family: var(--ws-sans); color: var(--ws-ink); background: var(--ws-cream); font-size: 1.05rem; line-height: 1.65; overflow-x: hidden; }
.ws a { color: inherit; }
.ws h1, .ws h2, .ws h3 { font-family: var(--ws-serif); font-weight: 600; line-height: 1.1; margin: 0; }
.ws h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); letter-spacing: -0.01em; }
.ws-wrap { max-width: 76rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 40rem) { .ws-wrap { padding: 0 2rem; } }
.ws-center { text-align: center; }
.ws-small { font-size: 0.85rem; color: var(--ws-muted); margin-top: 1.5rem; }

/* The note that this is a sample, above everything. */
.ws-ribbon { background: var(--ws-forest-deep); color: #efe7d6; font-size: 0.88rem; padding: 0.6rem 1rem; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; align-items: center; justify-content: center; text-align: center; }
.ws-ribbon p { margin: 0; }
.ws-ribbon-links { display: flex; gap: 1rem; }
.ws-ribbon a { color: var(--ws-gold); font-weight: 600; }

.ws-kicker { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ws-gold-deep); font-weight: 600; margin: 0 0 0.9rem; }
.ws-kicker-light { color: var(--ws-gold); }
.ws-link { display: inline-block; margin-top: 1.2rem; font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--ws-gold); padding-bottom: 0.2rem; }
.ws-link:hover { color: var(--ws-gold-deep); }

.ws-btn { display: inline-block; padding: 0.85rem 1.6rem; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.ws-btn-gold { background: var(--ws-gold); color: var(--ws-forest-deep) !important; }
.ws-btn-gold:hover { background: #d8b874; }
.ws-btn-ghost { border-color: rgba(255, 255, 255, 0.7); color: #fff !important; }
.ws-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.ws-btn-light { border-color: rgba(255, 255, 255, 0.6); color: #fff !important; padding: 0.6rem 1.1rem; }
.ws-btn-light:hover { background: #fff; color: var(--ws-forest-deep) !important; }

/* The hero: the picture fills the screen, the words sit low on a soft shade. */
.ws-hero { position: relative; isolation: isolate; min-height: min(92vh, 56rem); display: flex; flex-direction: column; color: #fff; }
.ws-hero { overflow: hidden; }
.ws-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.ws-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 20, 15, 0.72) 0%, rgba(10, 20, 15, 0.35) 45%, rgba(10, 20, 15, 0) 75%), linear-gradient(180deg, rgba(10, 20, 15, 0.55) 0%, rgba(10, 20, 15, 0.05) 30%, rgba(10, 20, 15, 0.2) 55%, rgba(10, 20, 15, 0.8) 100%); }
.ws-nav { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1rem; max-width: 80rem; width: 100%; margin: 0 auto; }
@media (min-width: 40rem) { .ws-nav { padding: 1.4rem 2rem; } }
.ws-nav ul { display: none; list-style: none; margin: 0 auto; padding: 0; gap: 2rem; }
@media (min-width: 62rem) { .ws-nav ul { display: flex; } }
.ws-nav ul a { text-decoration: none; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }
.ws-nav ul a:hover { color: var(--ws-gold); }
.ws-nav .ws-btn { margin-left: auto; }
@media (min-width: 62rem) { .ws-nav .ws-btn { margin-left: 0; } }
.ws-logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-family: var(--ws-serif); font-size: 1.45rem; font-weight: 600; }
.ws-logo .ws-mark { width: 56px; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25)); }
@media (max-width: 26rem) { .ws-nav .ws-logo span { display: none; } }

.ws-hero-copy { margin-top: auto; padding: 2rem 1rem 3.5rem; max-width: 80rem; width: 100%; margin-left: auto; margin-right: auto; }
@media (min-width: 40rem) { .ws-hero-copy { padding: 2rem 2rem 5rem; } }
.ws-eyebrow { font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; margin: 0 0 1rem; color: #f3e6c8; }
.ws-hero h1 { font-size: clamp(2.6rem, 7.5vw, 5.8rem); max-width: 14ch; font-weight: 500; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25); }
.ws-hero-lede { max-width: 38rem; font-size: clamp(1.02rem, 1.6vw, 1.2rem); margin: 1.3rem 0 0; color: #f4efe4; }
.ws-hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 2rem 0 0; }
.ws-center-row { justify-content: center; }

/* Our story. */
.ws-story { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.ws-story-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 56rem) { .ws-story-grid { grid-template-columns: 1fr 1.05fr; gap: 5rem; } }
.ws-story h2 { max-width: 18ch; margin-bottom: 1.4rem; }
.ws-story p { color: var(--ws-muted); max-width: 34rem; }
.ws-story-pic { margin: 0; position: relative; }
.ws-story-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 56rem) { .ws-story-pic::before { content: ""; position: absolute; inset: 1.5rem -1.5rem -1.5rem 1.5rem; border: 1px solid var(--ws-gold); z-index: -1; } .ws-story-pic { isolation: isolate; } }

/* Why families choose us. */
.ws-why { background: var(--ws-sand); padding: clamp(4rem, 8vw, 6.5rem) 0; }
.ws-why h2 { max-width: 22ch; margin: 0 auto; }
.ws-why-grid { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.ws-why-grid li { border-top: 1px solid rgba(29, 42, 36, 0.25); padding-top: 1.3rem; }
.ws-num { font-family: var(--ws-serif); font-size: 1.1rem; color: var(--ws-gold-deep); }
.ws-why-grid h3 { font-size: 1.6rem; margin: 0.4rem 0 0.5rem; }
.ws-why-grid p { margin: 0; color: var(--ws-muted); }

/* Divisions: picture cards. */
.ws-divisions { padding: clamp(4rem, 9vw, 7rem) 0; }
.ws-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 2.5rem; }
.ws-head-row .ws-link { margin-top: 0; }
.ws-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ws-card { background: #fff; overflow: hidden; }
.ws-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s ease; }
@media (prefers-reduced-motion: no-preference) { .ws-card:hover img { transform: scale(1.04); } }
.ws-card > div { padding: 1.3rem 1.3rem 1.6rem; position: relative; background: #fff; }
.ws-tag { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ws-gold-deep); font-weight: 600; margin: 0 0 0.4rem; }
.ws-card h3 { font-size: 1.8rem; margin-bottom: 0.4rem; }
.ws-card p:last-child { margin: 0; color: var(--ws-muted); font-size: 0.97rem; }

/* A day at camp: picture and timeline side by side on a dark band. */
.ws-day { display: grid; background: var(--ws-forest); color: #efe7d6; }
@media (min-width: 56rem) { .ws-day { grid-template-columns: 1fr 1fr; } }
.ws-day-pic img { width: 100%; height: 100%; min-height: 18rem; object-fit: cover; }
.ws-day-copy { padding: clamp(3rem, 7vw, 5.5rem) 1rem; }
@media (min-width: 40rem) { .ws-day-copy { padding-left: clamp(2rem, 6vw, 5rem); padding-right: clamp(2rem, 6vw, 5rem); } }
.ws-day .ws-kicker { color: var(--ws-gold); }
.ws-timeline { list-style: none; margin: 2.2rem 0 0; padding: 0; }
.ws-timeline li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 1rem; padding: 0.95rem 0; border-top: 1px solid rgba(239, 231, 214, 0.18); }
.ws-timeline time { font-family: var(--ws-serif); font-size: 1.35rem; color: var(--ws-gold); line-height: 1.2; }

/* Gallery strip. */
.ws-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; background: var(--ws-cream); }
@media (min-width: 48rem) { .ws-gallery { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(9rem, 16rem)); } .ws-gallery figure:first-child { grid-row: span 2; } }
.ws-gallery figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
@media (min-width: 48rem) { .ws-gallery figure { aspect-ratio: auto; } }
.ws-gallery figure:last-child:nth-child(odd) { grid-column: span 2; }
@media (min-width: 48rem) { .ws-gallery figure:last-child:nth-child(odd) { grid-column: auto; } }
.ws-gallery img { width: 100%; height: 100%; object-fit: cover; }

/* What parents tell us. */
.ws-quotes { padding: clamp(4rem, 9vw, 7rem) 0; }
.ws-quote-grid { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.ws-quote-grid li { background: #fff; padding: 2rem 1.6rem; border-top: 3px solid var(--ws-gold); }
.ws-quote-grid blockquote { margin: 0; font-family: var(--ws-serif); font-size: 1.45rem; line-height: 1.35; font-style: italic; }
.ws-quote-grid p { margin: 1.1rem 0 0; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ws-muted); }

/* Applications are open, on the camp at dusk. */
.ws-apply { position: relative; isolation: isolate; color: #fff; padding: clamp(5rem, 11vw, 8.5rem) 0; background: #15251e url(../images/site/summer-dusk.webp) center / cover no-repeat; }
.ws-apply::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12, 22, 17, 0.62); }
.ws-apply p { max-width: 34rem; margin: 1rem auto 0; color: #efe7d6; }

/* Footer. */
.ws-foot { background: var(--ws-forest-deep); color: #cfc6b2; padding: 4rem 0 2rem; font-size: 0.95rem; }
.ws-foot-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.ws-foot h3 { font-family: var(--ws-sans); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ws-gold); margin-bottom: 0.9rem; }
.ws-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.ws-foot a { text-decoration: none; }
.ws-foot a:hover { color: #fff; }
.ws-logo-foot { color: #fff; margin: 0 0 0.8rem; }
.ws-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(207, 198, 178, 0.18); font-size: 0.85rem; }
.ws-foot-base p { margin: 0; }
.ws-foot-base p a { color: var(--ws-gold); }

.ws a:focus-visible { outline: 2px solid var(--ws-gold); outline-offset: 3px; }

/* Motion and the parts made for it (public/js/website-sample.js). */
.ws-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--ws-gold); transform: scaleX(0); transform-origin: 0 50%; z-index: 80; }
html:not(.ws-m) .ws-progress { display: none; }
.ws-scroll-cue { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); margin: 0; font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: #f3e6c8; display: none; flex-direction: column; align-items: center; gap: 0.5rem; }
.ws-scroll-cue span { width: 1px; height: 2.4rem; background: linear-gradient(var(--ws-gold), transparent); }
@media (min-width: 62rem) { .ws-m .ws-scroll-cue { display: flex; } }
.ws-split .ws-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.ws-split .ws-w > span { display: inline-block; will-change: transform; }

/* A moving band of what fills the summer. */
.ws-marquee { background: var(--ws-gold); color: var(--ws-forest-deep); overflow: hidden; padding: 1.1rem 0; border-block: 1px solid var(--ws-gold-deep); }
.ws-marquee-track { display: flex; width: max-content; }
.ws-marquee-group { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; }
.ws-marquee-group[aria-hidden] { display: none; }
.ws-marquee-group span { font-family: var(--ws-serif); font-size: clamp(1.4rem, 3vw, 2.2rem); font-style: italic; padding: 0 1.4rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 2.8rem; }
.ws-marquee-group span::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ws-forest-deep); opacity: 0.55; }
html:not(.ws-m) .ws-marquee-track { width: auto; justify-content: center; }
.ws-m .ws-marquee-group { flex-wrap: nowrap; }
.ws-m .ws-marquee-group[aria-hidden] { display: flex; }

/* Camp in numbers. */
.ws-stats { list-style: none; margin-top: clamp(3rem, 7vw, 5.5rem); padding-top: 2rem; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); border-top: 1px solid rgba(29, 42, 36, 0.18); }
.ws-stats li { display: grid; gap: 0.2rem; }
.ws-stats b { font-family: var(--ws-serif); font-weight: 600; font-size: clamp(2.8rem, 6vw, 4.4rem); line-height: 1; color: var(--ws-forest); font-variant-numeric: tabular-nums; }
.ws-stats span { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ws-muted); }

/* Divisions slide sideways while the section holds still (wide screens with motion). */
.ws-bar { display: none; height: 2px; background: rgba(29, 42, 36, 0.15); margin: 2rem 0 0; overflow: hidden; }
.ws-bar i { display: block; height: 100%; background: var(--ws-gold-deep); transform: scaleX(0); transform-origin: 0 50%; }
.ws-cards { max-width: 76rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 40rem) { .ws-cards { padding-inline: 2rem; } }
.ws-hz .ws-divisions { padding: 0; overflow: hidden; }
.ws-hz .ws-divisions-pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.ws-hz .ws-cards { display: flex; gap: 2.5vw; width: max-content; max-width: none; margin: 0; padding-left: max(2rem, calc((100vw - 76rem) / 2 + 2rem)); padding-right: 8vw; }
.ws-hz .ws-card { width: min(34rem, 42vw); flex: none; }
.ws-hz .ws-card img { aspect-ratio: 16 / 10; }
.ws-hz .ws-bar { display: block; }

/* A day at camp: each hour lights up as you reach it. */
.ws-m .ws-timeline li { opacity: 0.35; transition: opacity 0.4s ease; }
.ws-m .ws-timeline li.is-on { opacity: 1; }
.ws-day-pic { overflow: hidden; }

.ws-story-frame { display: block; overflow: hidden; }
.ws-m [data-drift] { transform: scale(1.12); will-change: transform; }

/* The sun over the apply band, and the logo in the footer. */
.ws-apply { overflow: hidden; }
.ws-apply-sun { position: absolute; z-index: -1; width: clamp(9rem, 22vw, 16rem); right: max(1rem, 6vw); top: clamp(1.5rem, 4vw, 3rem); opacity: 0.9; }
@media (max-width: 40rem) { .ws-apply-sun { opacity: 0.35; } }
.ws-foot-logo { width: 9rem; height: auto; margin-bottom: 1rem; background: #f6f1e7; border-radius: 1.2rem; padding: 0.8rem; }

/* Parts that rise in, hidden only while motion is on, until the script shows them. */
.ws-m [data-rise], .ws-m [data-hero] { opacity: 0; transform: translateY(2rem); }
.ws-m [data-wipe] { clip-path: inset(0 0 100% 0); }