:root {
    --story-ivory: #f8f4ec;
    --story-paper: #fffdf8;
    --story-ink: #171714;
    --story-muted: #665f54;
    --story-gold: #b88c2c;
    --story-line: #d9c9a5;
}

.stories-main {
    color: var(--story-ink);
    background: var(--story-ivory);
    border-radius: 24px;
    overflow: hidden;
}

.stories-hero {
    min-height: 470px;
    display: grid;
    place-items: center;
    padding: clamp(3rem, 8vw, 7rem) clamp(1.25rem, 5vw, 5rem);
    text-align: center;
    color: #fffdf8;
    background: linear-gradient(90deg, rgba(3, 3, 3, .93) 0%, rgba(3, 3, 3, .78) 54%, rgba(3, 3, 3, .2) 100%), url('../alignment-warm-window-light-bright.jpg') center/cover;
}

.stories-hero__inner { max-width: 780px; }
.stories-key { color: var(--story-gold); font-size: 2rem; }
.stories-kicker { color: var(--story-gold); font-size: .75rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.stories-hero h1, .story-article h1, .story-form-hero h1 { font-family: 'Fraunces', serif; font-weight: 500; letter-spacing: -.025em; }
.stories-hero h1 { margin: .25rem 0 .75rem; font-size: clamp(4rem, 11vw, 7.5rem); line-height: .95; }
.stories-hero p { margin: 1.4rem auto 0; max-width: 620px; color: #f2eadb; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.65; }
.gold-rule { width: 180px; height: 3px; margin: 1.2rem auto; background: var(--story-gold); border-radius: 999px; }

.stories-section { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 5vw, 4.5rem); }
.stories-section__heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.stories-section__heading h2 { color: var(--story-gold); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.stories-section__heading::after { content: ''; height: 1px; flex: 1; background: var(--story-line); }

.story-card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); overflow: hidden; background: var(--story-paper); border: 1px solid #e3dac9; border-radius: 18px; box-shadow: 0 20px 55px rgba(48, 38, 20, .1); }
.story-card img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.story-card__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 4rem); }
.story-card h3 { margin: .8rem 0 1rem; font-family: 'Fraunces', serif; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.08; font-weight: 500; }
.story-card p { color: var(--story-muted); line-height: 1.75; }
.story-link { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.5rem; color: #7d5d19; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.story-link:hover, .story-link:focus-visible { text-decoration: underline; }
.story-invite { margin-top: 2rem; padding: 2rem; text-align: center; border: 1px solid var(--story-line); border-radius: 18px; background: #f2e8d3; }
.story-invite h2 { font-family: 'Fraunces', serif; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.story-invite p { max-width: 650px; margin: .75rem auto 0; color: var(--story-muted); line-height: 1.7; }
.story-button { display: inline-flex; justify-content: center; margin-top: 1.25rem; padding: .85rem 1.25rem; color: #0b0b09; background: var(--story-gold); border: 1px solid var(--story-gold); border-radius: 999px; font-weight: 800; text-decoration: none; }
.story-button:hover, .story-button:focus-visible { background: #cda74e; }
.story-button--splash { position: relative; z-index: 0; min-width: min(100%, 330px); padding: 1rem 2.25rem; background: transparent; border: 0; border-radius: 0; font-family: 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.story-button--splash::before { content: ''; position: absolute; z-index: -1; inset: 0; background: url('../icons/gold-splash-wide-user.png') center / 100% 100% no-repeat; }
.story-button--splash:hover, .story-button--splash:focus-visible { background: transparent; transform: translateY(-1px); }
.story-button--splash:disabled { cursor: wait; opacity: .7; }

.story-article { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 8vw, 8rem); background: var(--story-paper); }
.story-article__header { max-width: 900px; margin: 0 auto 3rem; text-align: center; }
.story-byline { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 1.1rem 0 0; color: #6f6658; font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; }
.story-byline a { color: #6d5014; text-decoration-color: rgba(109,80,20,.35); text-underline-offset: .2em; }
.story-byline__divider { color: #b7903f; }
.story-article h1 { margin: .8rem auto 1.2rem; font-size: clamp(3rem, 8vw, 6rem); line-height: .98; }
.story-article__lede { max-width: 650px; margin: 0 auto; color: var(--story-muted); font-size: 1.2rem; line-height: 1.7; }
.story-article__image { width: 100%; max-height: 560px; object-fit: cover; border-radius: 18px; }
.story-prose { max-width: 760px; margin: 3rem auto 0; color: #27231e; font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(1.08rem, 1.7vw, 1.2rem); line-height: 1.82; }
.story-prose p { margin: 0 0 1.35rem; }
.story-prose h2 { margin: 3rem 0 1rem; color: #17140f; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.15; font-weight: 600; }
.story-prose strong { color: #6d5014; font-weight: 600; }
.story-closing { margin-top: 3.5rem; padding: 2rem; border-top: 2px solid var(--story-gold); border-bottom: 1px solid var(--story-line); text-align: center; }
.story-closing-splash { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; min-width: min(100%, 360px); padding: 1rem 2.25rem; color: #17140f; font-family: 'Inter', sans-serif; font-size: .92rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.story-closing-splash::before { content: ''; position: absolute; z-index: -1; inset: 0; background: url('../icons/gold-splash-wide-user.png') center / 100% 100% no-repeat; }
.story-closing-splash:hover, .story-closing-splash:focus-visible { transform: translateY(-1px); }

.story-form-hero { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 2rem; padding: clamp(3rem, 7vw, 6rem); color: #fffdf8; background: #080807; }
.story-form-hero h1 { margin: .75rem 0; font-size: clamp(3.3rem, 7vw, 6rem); line-height: .95; }
.story-form-hero h1 span { color: var(--story-gold); }
.story-form-hero__note { padding-left: 2rem; border-left: 1px solid var(--story-gold); font-family: 'Fraunces', serif; font-size: 1.25rem; line-height: 1.8; }
.story-form-wrap { padding: clamp(2rem, 6vw, 5rem); }
.story-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.story-option { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 1rem; padding: 1.35rem; border: 1px solid var(--story-line); border-radius: 10px; background: var(--story-paper); }
.story-option > img { width: 68px; height: 62px; object-fit: contain; }
.story-option h2 { margin-bottom: .35rem; font-family: 'Fraunces', serif; font-size: 1.55rem; }
.story-option p { color: var(--story-muted); line-height: 1.55; }
.story-option a { color: #7d5d19; font-weight: 700; text-underline-offset: .18em; }
.story-option a:hover, .story-option a:focus-visible { color: #b88a2b; }
.story-conversation-trigger { display: inline; margin: 0; padding: 0; border: 0; background: transparent; color: #7d5d19; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.story-conversation-trigger:hover, .story-conversation-trigger:focus-visible { color: #b88a2b; }
.story-form { padding: clamp(1.25rem, 4vw, 3rem); border: 1px solid var(--story-line); border-radius: 18px; background: var(--story-paper); }
.story-form__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; }
.story-form__narrative .field--story textarea { min-height: 290px; }
.story-form__narrative .field:not(.field--story) textarea { min-height: 150px; }
.field { margin-bottom: 1rem; }
.field label, .fieldset legend { display: block; margin-bottom: .45rem; font-weight: 700; }
.field input, .field textarea { width: 100%; padding: .85rem 1rem; color: var(--story-ink); background: #fffefa; border: 1px solid #cfc4b1; border-radius: 8px; font: inherit; }
.field textarea { min-height: 120px; resize: vertical; }
.field--story textarea { min-height: 250px; }
.field input:focus, .field textarea:focus { outline: 3px solid rgba(184, 140, 44, .22); border-color: var(--story-gold); }
.fieldset { margin: 1.25rem 0; padding: 0; border: 0; }
.choice { display: flex; align-items: flex-start; gap: .65rem; margin: .75rem 0; line-height: 1.45; }
.choice input { margin-top: .18rem; accent-color: var(--story-gold); }
.name-usage-field { margin: -.15rem 0 .9rem 1.7rem; padding: .8rem 1rem; border-left: 2px solid var(--story-gold); background: #f8f1e3; }
.name-usage-field label { display: block; margin-bottom: .4rem; font-size: .88rem; font-weight: 700; }
.name-usage-field select { width: 100%; padding: .65rem .75rem; color: var(--story-ink); background: #fffefa; border: 1px solid #cfc4b1; border-radius: 8px; font: inherit; }
.name-usage-field select:focus { outline: 3px solid rgba(184, 140, 44, .22); border-color: var(--story-gold); }
.permission-note { margin: -.2rem 0 0; color: var(--story-muted); font-size: .82rem; line-height: 1.5; }
.permission-note a { color: #6d5014; text-underline-offset: .16em; }
.story-form__submit { margin-top: 1.65rem; text-align: center; }
.story-form__submit .story-button { margin-top: 0; }
.form-status { min-height: 1.5rem; margin-top: 1rem; font-weight: 700; }
.form-status[data-state='error'] { color: #a32626; }
.form-status[data-state='success'] { color: #6d5014; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

@media (max-width: 800px) {
    .stories-main { border-radius: 0; }
    .stories-hero { min-height: 390px; }
    .story-card, .story-form-hero, .story-form__grid { grid-template-columns: 1fr; }
    .story-form__narrative textarea { min-height: 120px; }
    .story-form__narrative .field--story textarea { min-height: 250px; }
    .story-card img { min-height: 260px; }
    .story-form-hero__note { padding: 1.5rem 0 0; border-left: 0; border-top: 1px solid var(--story-gold); }
    .story-options { grid-template-columns: 1fr; }
    .story-option p { text-align: left; }
    .story-conversation-trigger { display: inline; width: auto; text-align: left; }
}
.story-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 1px;
    max-width: 1180px;
    margin: 4rem auto 0;
    background: #d8c9ac;
    border: 1px solid #d8c9ac;
}
.story-pagination a { display: flex; flex-direction: column; justify-content: center; min-height: 105px; padding: 1.25rem 1.5rem; color: #181510; background: #fbf8f2; font-family: 'Libre Baskerville', Georgia, serif; line-height: 1.45; text-decoration: none; }
.story-pagination a:hover, .story-pagination a:focus-visible { background: #f0e5ce; }
.story-pagination a span { margin-bottom: .35rem; color: #8c681f; font-family: Inter, sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.story-pagination__all { align-items: center; min-width: 130px; font-family: Inter, sans-serif !important; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.story-pagination__next { grid-column: 3; text-align: right; }
.story-pagination__next b, .story-pagination__previous b { color: #bd9134; }
@media (max-width: 700px) {
    .story-pagination { grid-template-columns: 1fr; }
    .story-pagination__next { grid-column: auto; text-align: left; }
    .story-pagination__all { order: 3; }
}

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

/* Upscale editorial pilot: shared visual language for a possible future site refresh. */
.stories-main--upscale { background: #f6f1e8; }
.stories-main--upscale h1,
.stories-main--upscale h2,
.stories-main--upscale h3 { font-family: 'Cormorant Garamond', serif; }
.stories-hero--framed {
    position: relative;
    min-height: 455px;
    place-items: center start;
    padding-left: clamp(3rem, 15vw, 14rem);
    background-image: linear-gradient(90deg, #050505 0%, rgba(5,5,5,.98) 29%, rgba(5,5,5,.65) 54%, rgba(5,5,5,.03) 84%), url('../stories/stories-hero-v2.jpg');
    background-position: center;
}
.stories-hero--framed::before {
    content: '';
    position: absolute;
    inset: 2.5rem clamp(2rem, 4vw, 4.5rem);
    border-top: 1px solid var(--story-gold);
    border-left: 1px solid var(--story-gold);
    border-bottom: 1px solid var(--story-gold);
    border-right: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 58%, transparent 82%);
    mask-image: linear-gradient(90deg, #000 0%, #000 58%, transparent 82%);
}
.stories-hero--framed .stories-hero__inner { position: relative; z-index: 1; width: min(580px, 100%); }
.stories-hero--framed h1 { margin: -.3rem 0 0; font-size: clamp(5rem, 10vw, 8.2rem); font-weight: 500; line-height: .9; letter-spacing: -.035em; }
.stories-hero--framed p { margin-top: 1.25rem; font-size: clamp(1rem, 1.7vw, 1.25rem); letter-spacing: .015em; }
.stories-key-mark { display: block; width: 112px; height: 50px; margin: 0 auto .25rem; }
.stories-key-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gold-brush { display: block; width: 220px; height: 18px; margin: 1rem auto 0; background: url('../icons/gold-splash-user.png') center / 100% 100% no-repeat; }
.stories-section--cards { padding-top: 2.25rem; }
.stories-section__topline { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; margin-bottom: 1.35rem; }
.stories-section__topline .stories-section__heading { margin: 0; }
.story-submit-splash { position: relative; z-index: 0; display: inline-flex; align-items: center; gap: .65rem; padding: .75rem 2.1rem; color: #15130f; font-size: .77rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.story-submit-splash::before { content: ''; position: absolute; z-index: -1; inset: 0; background: url('../icons/gold-splash-wide-user.png') center / 100% 100% no-repeat; transform: scaleY(1.45); }
.story-submit-splash:hover, .story-submit-splash:focus-visible { transform: translateY(-1px); }
.story-submit-key { width: 30px; height: 16px; object-fit: contain; filter: brightness(0) invert(1); }
.story-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.story-card--compact { display: block; border-radius: 4px; box-shadow: 0 12px 28px rgba(48,38,20,.09); }
.story-card--compact img { display: block; width: 100%; height: 205px; min-height: 0; object-fit: cover; }
.story-card--compact .story-card__copy { min-height: 315px; justify-content: flex-start; padding: 1.5rem 1.65rem 1.7rem; }
.story-card--compact h3 { margin: .55rem 0 .75rem; font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.03; }
.story-card--compact p { font-size: .92rem; line-height: 1.6; }
.story-card--compact .story-link,
.story-coming { margin-top: auto; padding-top: 1.25rem; }
.story-coming { display: block; color: #8b7c61; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.stories-journal { border-top: 1px solid #dfd3bd; background: #fbf8f2; }
.journal-card { display: grid; grid-template-columns: minmax(260px,.75fr) minmax(0,1.25fr); align-items: stretch; background: #fffdf8; border: 1px solid #e1d6c2; box-shadow: 0 12px 30px rgba(48,38,20,.07); }
.journal-card img { width: 100%; height: 100%; min-height: 310px; object-fit: cover; }
.journal-card > div { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 4rem); }
.journal-card h2 { margin: .6rem 0 1rem; font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1; font-weight: 500; }
.journal-card p { color: var(--story-muted); line-height: 1.75; }
.story-card--compact:not(.story-card--placeholder),
.journal-card { position: relative; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.story-card--compact:not(.story-card--placeholder):hover,
.journal-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(48,38,20,.13); }
.story-card--compact:not(.story-card--placeholder) .story-link::after,
.journal-card .story-link::after { content: ''; position: absolute; inset: 0; }
.story-card--compact:not(.story-card--placeholder) .story-link:focus-visible::after,
.journal-card .story-link:focus-visible::after { outline: 3px solid #b88a2b; outline-offset: 3px; }
.story-form-title { display: grid; grid-template-columns: 115px 1fr; align-items: center; gap: 1.5rem; }
.exclamation-key { width: 112px; height: 175px; }
.exclamation-key img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gold-brush--form { width: min(100%, 390px); height: 25px; margin: .65rem 0 0; background-image: url('../icons/gold-splash-user.png'); }
.story-form-hero h1 { font-family: 'Cormorant Garamond', Georgia, serif; }
.story-form-hero__note { color: #f8f2e8; font-family: 'Source Serif 4', Georgia, serif; }
.story-form-wrap { background: #f7f2e9; }
.story-form { border-radius: 10px; }
.story-thankyou { margin-top: 1.65rem; text-align: center; }
.story-thankyou__brush { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-width: min(100%, 460px); padding: .85rem 2.5rem; color: #fffdf8; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(1.45rem, 3vw, 2rem); }
.story-thankyou__brush::before { content: ''; position: absolute; z-index: -1; inset: 0; background: url('../icons/black-splash-user.png') center / 100% 100% no-repeat; }
.story-thankyou__brush img { width: 24px; height: 44px; object-fit: contain; }
.story-thankyou__accent { color: #c89b36; font-weight: 600; }
.story-thankyou > p { margin-top: .3rem; color: #6f6658; font-family: 'Source Serif 4', Georgia, serif; font-size: .85rem; }
.story-thankyou > p span { color: #bd9134; font-size: 1.15rem; }

@media (max-width: 900px) {
    .stories-hero--framed { padding-left: clamp(2rem, 9vw, 5rem); background-position: 58% center; }
    .story-card-grid { grid-template-columns: 1fr; }
    .story-card--compact { display: grid; grid-template-columns: minmax(220px,.75fr) 1fr; }
    .story-card--compact img { height: 100%; min-height: 300px; }
}
@media (max-width: 650px) {
    .stories-hero--framed { min-height: 420px; padding: 3rem 2rem; background-position: 64% center; }
    .stories-hero--framed::before { inset: 1.5rem 1rem; }
    .stories-section__topline, .journal-card, .story-card--compact { grid-template-columns: 1fr; }
    .story-submit-splash { justify-self: center; text-align: center; }
    .story-card--compact img { height: 220px; min-height: 0; }
    .story-card--compact .story-card__copy { min-height: 285px; }
    .journal-card img { min-height: 230px; }
    .story-form-title { grid-template-columns: 78px 1fr; gap: .75rem; }
    .exclamation-key { width: 78px; height: 120px; }
    .exclamation-key img { width: 100%; height: 100%; }
}

/* Article readability and reference-aligned painted accents. */
.story-article { padding-inline: clamp(1.25rem, 6vw, 6rem); }
.story-article__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    max-width: 1180px;
    margin: 0 auto 3.25rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid #d8c9ac;
}
.story-article__header { max-width: none; margin: 0; text-align: left; }
.story-article h1 {
    margin: .8rem 0 1.2rem;
    color: #17140f;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(2.55rem, 5vw, 4.65rem);
    line-height: 1.08;
    letter-spacing: -.035em;
}
.story-article__lede { margin: 0; color: #3f3a32; font-family: Inter, Arial, sans-serif; font-size: 1.08rem; line-height: 1.7; }
.story-article__image { height: clamp(300px, 34vw, 440px); max-height: none; object-fit: cover; border-radius: 2px; box-shadow: 0 18px 45px rgba(45,34,17,.13); }
.story-prose {
    max-width: 780px;
    color: #1f1c18;
    font-family: Inter, Arial, sans-serif;
    font-size: clamp(1rem, 1.3vw, 1.08rem);
    line-height: 1.85;
}
.story-prose p { color: #1f1c18; }
.story-prose h2 {
    color: #15120f;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    line-height: 1.25;
}
.story-pullquote {
    margin: 3rem -3rem;
    padding: 2rem 3rem;
    color: #17140f;
    background: #f0e5ce;
    border-left: 4px solid #bd9134;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.45;
    text-align: center;
}
.story-pullquote--gold { color: #fffdf8; background: #15130f; }
.story-inline-image { margin: 3rem -5rem; }
.story-inline-image img { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.story-inline-image figcaption { padding-top: .65rem; color: #6b6254; font-family: Inter, sans-serif; font-size: .78rem; text-align: center; }

@media (max-width: 800px) {
    .story-article__intro { grid-template-columns: 1fr; gap: 1.75rem; }
    .story-article__image { height: min(72vw, 390px); }
    .story-pullquote, .story-inline-image { margin-inline: 0; }
}