/* anframe — Users Voice single page styles (Concept C: Cinematic Poster + Masonry)
 * Scoped under body.anframe-voice-single (added by anframe_voice_body_class).
 * Uses the anframe brand tokens — kept self-contained to avoid pulling in the
 * editorial template's full CSS bundle. */

body.anframe-voice-single {
    --c-off-white: #fffffb;
    --c-cream: #faf6ee;
    --c-ivory: #f4f1eb;
    --c-champagne: #d8c6a1;
    --c-rose: #e6a6a1;
    --c-charcoal: #3a3a3a;
    --c-ink: #1a1816;
    --c-mid: #545454;
    --c-hairline: #e8e3d8;
    --f-en: 'Cormorant Garamond', 'Lato', serif;
    --f-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;

    background: var(--c-off-white);
    color: var(--c-charcoal);
    font-family: var(--f-jp);
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
}
body.anframe-voice-single * { box-sizing: border-box; }
body.anframe-voice-single img { display: block; max-width: 100%; height: auto; }
body.anframe-voice-single em { font-family: var(--f-en); font-style: italic; }
body.anframe-voice-single #smkif__header, 
body.anframe-voice-single #smkif_footer{
    font-family: "sweet-sans-pro", sans-serif;
    -webkit-font-smoothing: auto;
}
body.anframe-voice-single #smkif__header .anframe-main-arrow{
    max-width: 0.875rem;
}
/* Allow the article to break out of the theme's main column wrappers so the hero
 * and video sit edge-to-edge. We rely on the surrounding `.smoke-main-wrap`
 * being full-width on this template. */
.voice-single { display: block; }

/* HERO POSTER */
.voice-hero {
    position: relative;
    min-height: 720px;
    height: 100vh;
    background-position: center 25%;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}
.voice-hero__veil {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.55) 100%);
}
.voice-hero__inner {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    justify-content: flex-end; align-items: flex-start;
    padding: 0 8% 96px;
    z-index: 1;
}
.voice-hero__card {
    background: rgba(255, 255, 251, 0.95);
    color: var(--c-ink);
    padding: 48px 56px;
    max-width: 560px;
    border-left: 3px solid var(--c-champagne);
}
.voice-hero__eyebrow {
    font-family: var(--f-en); font-style: italic;
    letter-spacing: 0.3em; font-size: 12px;
    color: var(--c-mid); margin: 0 0 16px;
}
.voice-hero__title-jp {
    font-family: var(--f-jp); font-weight: 300;
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.55;
    letter-spacing: 0.04em;
    color: var(--c-ink);
    margin: 0 0 28px;
}
.voice-hero__meta {
    display: grid; gap: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--c-hairline);
    font-size: 12px;
    letter-spacing: 0.08em;
    margin: 0;
}
.voice-hero__meta > div { display: flex; gap: 12px; }
.voice-hero__meta dt {
    font-family: var(--f-en); font-style: italic;
    color: var(--c-mid);
    min-width: 96px;
    margin: 0;
}
.voice-hero__meta dd { color: var(--c-ink); margin: 0; }

/* VIDEO HERO */
.voice-video {
    background: var(--c-ink);
    position: relative;
}
.voice-video__embed {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #000;
}
.voice-video__embed iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0; display: block;
}
.voice-video__overlay {
    position: absolute;
    top: 24px; left: 24px;
    font-family: var(--f-en); font-style: italic;
    color: var(--c-champagne);
    letter-spacing: 0.3em;
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
}

/* 2-COL BODY */
.voice-body { background: var(--c-off-white); }
.voice-body__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 80px;
    padding: 120px 24px;
}
.voice-body__story p { font-size: 16.5px; line-height: 2.05; margin: 0 0 24px; }
.voice-body__lead {
    font-family: var(--f-en); font-style: italic;
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.6;
    color: var(--c-ink);
    margin: 0 0 32px !important;
}
.voice-body__content blockquote,
.voice-body__content .pull-quote {
    margin: 48px 0;
    padding: 24px 0 24px 32px;
    border-left: 2px solid var(--c-champagne);
    font-family: var(--f-jp);
    font-size: clamp(17px, 1.8vw, 21px);
    line-height: 1.85;
    letter-spacing: 0.04em;
    color: var(--c-ink);
}
.voice-body__content img {
    margin: 32px 0;
    width: 100%; height: auto;
}
.voice-body__meta { padding-top: 8px; }
.voice-body__meta-inner {
    position: sticky;
    top: 80px;
    background: var(--c-ivory);
    padding: 40px;
    border: 1px solid var(--c-hairline);
}
.voice-body__meta-title {
    font-family: var(--f-en); font-style: italic;
    font-size: 22px;
    color: var(--c-ink);
    font-weight: 400;
    margin: 0 0 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--c-hairline);
}
.voice-body__meta dl {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 16px 12px;
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.06em;
}
.voice-body__meta dt {
    font-family: var(--f-en); font-style: italic;
    color: var(--c-mid);
    margin: 0;
}
.voice-body__meta dd { color: var(--c-ink); margin: 0; }

/* MASONRY GALLERY */
.voice-masonry { background: var(--c-cream); padding: 96px 24px; }
.voice-masonry__head { text-align: center; margin-bottom: 56px; }
.voice-masonry__eyebrow {
    font-family: var(--f-en); font-style: italic;
    letter-spacing: 0.3em; font-size: 13px;
    color: var(--c-mid); margin: 0 0 12px;
}
.voice-masonry__title {
    font-family: var(--f-en); font-style: italic;
    font-size: clamp(30px, 3.4vw, 44px);
    color: var(--c-ink); font-weight: 400; margin: 0;
}
.voice-masonry__grid {
    max-width: 1400px; margin: 0 auto;
    columns: 4; column-gap: 16px;
}
.voice-masonry__item {
    display: block;
    margin-bottom: 16px;
    break-inside: avoid;
    overflow: hidden;
}
.voice-masonry__item img {
    width: 100%; height: auto;
    transition: opacity .25s ease, transform .35s ease;
}
.voice-masonry__item:hover img { opacity: 0.92; transform: scale(1.015); }

/* PHOTOGRAPHER NOTE */
.voice-note { background: var(--c-ivory); padding: 120px 24px; }
.voice-note__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.voice-note__eyebrow {
    font-family: var(--f-en); font-style: italic;
    letter-spacing: 0.3em; font-size: 13px;
    color: var(--c-mid); margin: 0 0 16px;
}
.voice-note__title {
    font-family: var(--f-en); font-style: italic;
    font-size: clamp(28px, 3.2vw, 40px);
    color: var(--c-ink); font-weight: 400;
    margin: 0 0 56px;
    line-height: 1.3;
}
.voice-note__body {
    text-align: left;
    font-size: 16px;
    line-height: 2.05;
    color: var(--c-charcoal);
}
.voice-note__body p { margin: 0 0 24px; }
.voice-note__signature {
    margin: 40px 0 0;
    text-align: right;
    font-family: var(--f-en); font-style: italic;
    color: var(--c-mid);
    font-size: 18px;
    letter-spacing: 0.08em;
}

/* CTA */
.voice-cta {
    padding: 120px 24px;
    position: relative;
    text-align: center;
    color: var(--c-off-white);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.voice-cta__veil {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.voice-cta__inner { position: relative; }
.voice-cta__title {
    font-family: var(--f-en); font-style: italic;
    font-size: clamp(36px, 5vw, 64px);
    margin: 0 0 40px;
    font-weight: 400;
    color: var(--c-off-white);
}
.voice-cta__buttons {
    display: flex; gap: 14px;
    justify-content: center; flex-wrap: wrap;
}
.voice-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 18px 42px;
    font-family: var(--f-jp);
    font-size: 13px; letter-spacing: 0.12em;
    text-decoration: none;
    border: 1px solid var(--c-off-white);
    color: var(--c-off-white);
    background: transparent;
    transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.voice-btn:hover { transform: translateY(-2px); }
.voice-btn--filled { background: var(--c-off-white); color: var(--c-ink); }
.voice-btn--filled:hover { background: var(--c-champagne); color: var(--c-ink); }
.voice-btn .arrow { transition: transform .25s ease; }
.voice-btn:hover .arrow { transform: translateX(4px); }

/* Strip the default content/sidebar wrappers from single.php so the article
 * can render edge-to-edge. */
body.anframe-voice-single #single-post,
body.anframe-voice-single .content-area,
body.anframe-voice-single .mdport-right-sidebar {
    all: revert;
}
body.anframe-voice-single #single-post {
    display: block !important;
    grid-template-columns: none !important;
}
body.anframe-voice-single .mdport-right-sidebar { display: none !important; }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .voice-hero { min-height: 600px; }
    .voice-hero__inner { padding: 0 24px 60px; }
    .voice-hero__card { padding: 36px 32px; }
    .voice-body__inner { grid-template-columns: 1fr; gap: 48px; padding: 80px 24px; }
    .voice-body__meta-inner { position: static; padding: 32px; }
    .voice-masonry__grid { columns: 3; }
}
@media (max-width: 720px) {
    .voice-hero { min-height: 540px; }
    .voice-hero__card { padding: 28px 24px; }
    .voice-hero__title-jp { font-size: 19px; }
    .voice-body__inner { padding: 64px 20px; gap: 40px; }
    .voice-body__story p { font-size: 15.5px; line-height: 1.95; }
    .voice-masonry { padding: 64px 16px; }
    .voice-masonry__grid { columns: 2; column-gap: 8px; }
    .voice-masonry__item { margin-bottom: 8px; }
    .voice-note { padding: 80px 24px; }
    .voice-note__body { font-size: 15px; line-height: 1.95; }
    .voice-cta { padding: 80px 24px; }
    .voice-cta__buttons { flex-direction: column; align-items: center; }
    .voice-btn { width: 100%; max-width: 320px; justify-content: center; }
}