/* ==========================================================================
   The Collector's Society — Landing
   File: tcs-landing.css
   Place at: /wp-content/themes/<theme>/assets/tcs-landing.css
   ========================================================================== */

/* ── Reset (scoped where reasonable) ── */
.tcs-landing *,
.tcs-landing *::before,
.tcs-landing *::after {
    box-sizing: border-box;
}

.tcs-landing main,
.tcs-landing section,
.tcs-landing div,
.tcs-landing p,
.tcs-landing h1,
.tcs-landing h2,
.tcs-landing span,
.tcs-landing form,
.tcs-landing input,
.tcs-landing button,
.tcs-landing label {
    margin: 0;
    padding: 0;
}

/* ── Tokens ── */
.tcs-landing {
    --tcs-void:    #090807;
    --tcs-bone:    #ffeedc;
    --tcs-bone-2:  #e6d8c2;
    --tcs-bone-3:  #8a8377;
    --tcs-gold:    #b09c78;
    --tcs-ink:     #1a1714;
    --tcs-ink-2:   #2e2b27;
    --tcs-paper:   #f0ebe2;
    --tcs-paper-2: #e8e2d8;
    --tcs-serif:   'Cormorant Garamond', Georgia, serif;
    --tcs-sans:    'Jost', system-ui, -apple-system, Segoe UI, sans-serif;
    --tcs-ease:    cubic-bezier(.22, .61, .36, 1);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.tcs-landing {
    min-height: 100vh;
    background: var(--tcs-void);
    color: var(--tcs-bone);
    font-family: var(--tcs-serif);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
    scroll-behavior: smooth;
}

.tcs-main {
    overflow-x: hidden;
    width: 100%;
}

.tcs-landing p,
.tcs-landing h1,
.tcs-landing h2,
.tcs-landing h3,
.tcs-landing span {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Film grain — subtle texture overlay */
.tcs-landing::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    opacity: .42;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

.tcs-landing ::selection {
    background: rgba(176, 156, 120, .22);
    color: var(--tcs-bone);
}

/* Visually hidden — for SEO / a11y text */
.tcs-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Layout ── */
.tcs-wrap {
    width: min(720px, 92vw);
    margin-inline: auto;
}

.tcs-wrap-wide {
    width: min(880px, 92vw);
    margin-inline: auto;
}

/* ── Reveal animations ── */
.tcs-sr {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 1.45s var(--tcs-ease), transform 1.45s var(--tcs-ease);
}

.tcs-sr.is-on {
    opacity: 1;
    transform: none;
}

.tcs-sr2 { transition-delay: .18s; }
.tcs-sr3 { transition-delay: .38s; }
.tcs-sr4 { transition-delay: .62s; }

@keyframes tcs-rise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tcs-guide-in {
    0%   { opacity: 0; transform: scaleY(.4); }
    100% { opacity: 1; transform: scaleY(1); }
}

/* ══════════════════════════════════
   HERO
   ══════════════════════════════════ */
.tcs-hero {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 6svh, 5rem) 1.25rem;
    position: relative;
    width: 100%;
}

.tcs-lockup-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.tcs-hero-headline {
    margin: 0;
    line-height: 0;
    font-weight: inherit;
}

.tcs-lockup {
    display: block;
    width: clamp(260px, 42vw, 520px);
    max-width: 100%;
    height: auto;
    color: var(--tcs-bone);
    opacity: 0;
    transform: translateY(8px);
    animation: tcs-rise 2.4s var(--tcs-ease) .3s forwards;
}

.tcs-guide {
    display: block;
    width: 1px;
    height: clamp(80px, 9svh, 100px);
    margin: clamp(1.8rem, 3.5svh, 2.6rem) auto 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 238, 220, 0)    0%,
        rgba(255, 238, 220, .65)  22%,
        rgba(176, 156, 120, .88)  50%,
        rgba(255, 238, 220, .65)  78%,
        rgba(255, 238, 220, 0)    100%
    );
    opacity: 0;
    transform-origin: top center;
    animation: tcs-guide-in 2.4s var(--tcs-ease) 1.6s forwards;
}

/* ══════════════════════════════════
   EDITORIAL
   ══════════════════════════════════ */
.tcs-editorial {
    padding: clamp(4rem, 9vw, 8rem) 0 clamp(5rem, 10vw, 11rem);
    text-align: center;
}

.tcs-rule {
    display: block;
    width: 1px;
    height: clamp(3.5rem, 6vw, 5.7rem);
    margin-inline: auto;
    background: linear-gradient(to bottom, transparent, var(--tcs-gold) 48%, transparent);
    opacity: .34;
}

.tcs-rule-short {
    height: clamp(2rem, 3.5vw, 3.1rem);
    opacity: .23;
}

.tcs-sp-xl { height: clamp(3rem, 6vw, 5.5rem); }
.tcs-sp-lg { height: clamp(2.2rem, 4.5vw, 4.3rem); }
.tcs-sp-md { height: clamp(1.4rem, 2.8vw, 2.5rem); }
.tcs-sp-sm { height: clamp(.7rem, 1.4vw, 1.1rem); }

.tcs-lede {
    font-family: var(--tcs-sans);
    font-size: clamp(.6rem, 1.2vw, .68rem);
    font-weight: 200;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--tcs-gold);
}

.tcs-strong {
    font-size: clamp(1.6rem, 4.2vw, 3.8rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -.018em;
    color: var(--tcs-bone);
}

.tcs-pair {
    font-size: clamp(1.35rem, 3.4vw, 2.9rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -.012em;
    color: var(--tcs-bone);
}

.tcs-pair .tcs-half { display: inline-block; }

.tcs-pair .tcs-amp {
    display: inline-block;
    font-style: italic;
    color: var(--tcs-gold);
    opacity: .82;
    margin: 0 .55em;
    font-size: .75em;
    transform: translateY(-.08em);
}

.tcs-mid {
    font-size: clamp(1.15rem, 2.8vw, 2.4rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.28;
    color: var(--tcs-bone-2);
}

.tcs-quiet {
    font-size: clamp(1rem, 2.1vw, 1.55rem);
    font-weight: 300;
    line-height: 1.55;
    color: var(--tcs-bone-2);
    letter-spacing: .015em;
}

.tcs-quiet em {
    font-style: italic;
    color: var(--tcs-bone);
}

.tcs-symbol-pause {
    display: flex;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.tcs-symbol-mark {
    width: clamp(38px, 5vw, 56px);
    height: auto;
    display: block;
    opacity: .72;
}

/* ══════════════════════════════════
   INVITATION
   ══════════════════════════════════ */
.tcs-invite {
    background: var(--tcs-paper);
    padding: clamp(4rem, 9vw, 8.5rem) 0 clamp(4.5rem, 10vw, 9rem);
    text-align: center;
    border-top: 1px solid rgba(26, 23, 20, .08);
}

.tcs-invite-line {
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-style: italic;
    color: rgba(26, 23, 20, .78);
    letter-spacing: .04em;
    margin-bottom: clamp(2rem, 3.5vw, 2.8rem);
    line-height: 1.45;
}

.tcs-form-inner {
    width: min(420px, 100%);
    margin-inline: auto;
}

.tcs-form { width: 100%; }

.tcs-field {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid rgba(26, 23, 20, .28);
    transition: border-color .5s var(--tcs-ease);
}

.tcs-field:focus-within {
    border-bottom-color: rgba(26, 23, 20, .6);
}

.tcs-field input {
    flex: 1;
    min-width: 0;
    width: 100%;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--tcs-ink);
    font-family: var(--tcs-sans);
    font-size: 16px; /* prevent iOS zoom on focus */
    font-weight: 300;
    letter-spacing: .09em;
    padding: 1rem 0;
    caret-color: var(--tcs-ink-2);
}

.tcs-field input::placeholder {
    color: rgba(26, 23, 20, .32);
}

.tcs-submit {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: var(--tcs-ink-2);
    font-family: var(--tcs-sans);
    font-size: clamp(.6rem, 1.1vw, .68rem);
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 1rem 0 1rem 1.2rem;
    cursor: pointer;
    transition: color .45s var(--tcs-ease), letter-spacing .45s var(--tcs-ease), background .45s var(--tcs-ease);
    white-space: nowrap;
    min-height: 44px;
}

.tcs-submit:hover,
.tcs-submit:focus-visible {
    color: var(--tcs-ink);
    letter-spacing: .28em;
    outline: 0;
}

.tcs-submit:focus-visible {
    outline: 2px solid var(--tcs-ink-2);
    outline-offset: 3px;
    border-radius: 1px;
}

.tcs-note {
    margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
    font-family: var(--tcs-serif);
    font-size: clamp(1rem, 1.85vw, 1.15rem);
    font-style: italic;
    font-weight: 300;
    letter-spacing: .015em;
    line-height: 1.55;
    color: rgba(26, 23, 20, .68);
}

.tcs-success {
    display: none;
    font-size: clamp(1.2rem, 2.8vw, 1.9rem);
    font-style: italic;
    line-height: 1.55;
    color: var(--tcs-ink-2);
    padding: 0 .5rem;
}

.tcs-success.is-on {
    display: block;
    animation: tcs-rise 1.2s var(--tcs-ease) forwards;
}

/* ══════════════════════════════════
   SIGNATURE
   ══════════════════════════════════ */
.tcs-signature {
    padding: clamp(1.2rem, 3vw, 2rem) 0 clamp(3rem, 6vw, 5rem);
    text-align: center;
    background: var(--tcs-paper);
    border-top: 1px solid rgba(26, 23, 20, .06);
}

.tcs-symbol-foot {
    width: 32px;
    height: auto;
    display: block;
    margin-inline: auto;
    opacity: .42;
}

/* ══════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
    .tcs-lockup { width: clamp(240px, 54vw, 460px); }
}

/* Mobile (iPhone Pro Max ~430px and below) */
@media (max-width: 600px) {
    .tcs-hero {
        justify-content: flex-start;
        padding: 16dvh 1.25rem 2rem;
        padding-top: 16svh;
        padding-top: 16dvh;
    }

    .tcs-lockup { width: min(68vw, 260px); }

    .tcs-guide {
        height: clamp(60px, 8svh, 68px);
        margin-top: clamp(1rem, 2.4svh, 1.4rem);
    }

    .tcs-pair {
        font-size: clamp(1.25rem, 6vw, 1.95rem);
        line-height: 1.3;
    }

    .tcs-pair .tcs-half { display: block; }

    .tcs-pair .tcs-amp {
        display: block;
        margin: .25em auto;
        font-size: .8em;
        transform: none;
    }

    .tcs-strong { font-size: clamp(1.4rem, 6.5vw, 2.2rem); }
    .tcs-mid    { font-size: clamp(1.05rem, 5vw, 1.6rem); }
    .tcs-quiet  { font-size: clamp(.95rem, 4.4vw, 1.2rem); }

    .tcs-lede {
        letter-spacing: .22em;
        font-size: clamp(.58rem, 2.6vw, .68rem);
        padding: 0 .5rem;
    }

    .tcs-editorial {
        padding: clamp(2.5rem, 7vw, 4rem) 0 clamp(3rem, 8vw, 5rem);
    }

    .tcs-sp-xl { height: clamp(1.6rem, 4vw, 2.4rem); }
    .tcs-sp-lg { height: clamp(1.2rem, 3vw, 1.8rem); }
    .tcs-sp-md { height: clamp(.9rem, 2vw, 1.3rem); }

    .tcs-rule       { height: clamp(2rem, 4vw, 3rem); }
    .tcs-rule-short { height: clamp(1.2rem, 2.5vw, 1.8rem); }

    .tcs-invite {
        padding: clamp(2.5rem, 7vw, 4rem) 0 clamp(3rem, 8vw, 5rem);
    }

    .tcs-form-inner {
        width: 100%;
        max-width: 420px;
    }
}

/* iPhone 12/13/14/15 (390px) and below */
@media (max-width: 480px) {
    .tcs-wrap      { width: min(720px, 88vw); }
    .tcs-wrap-wide { width: min(880px, 88vw); }

    .tcs-hero {
        padding-top: 15dvh;
        padding-top: 15svh;
    }

    .tcs-lockup { width: min(68vw, 260px); }

    .tcs-guide {
        height: clamp(56px, 7.5svh, 64px);
        margin-top: clamp(.9rem, 2.2svh, 1.3rem);
    }

    .tcs-pair       { font-size: clamp(1.15rem, 6.8vw, 1.7rem); }
    .tcs-strong     { font-size: clamp(1.3rem, 7vw, 1.8rem); }
    .tcs-mid        { font-size: clamp(1rem, 5.5vw, 1.4rem); }
    .tcs-quiet      { font-size: clamp(.9rem, 4.6vw, 1.1rem); }
    .tcs-invite-line { font-size: clamp(.95rem, 4.4vw, 1.15rem); }
    .tcs-note       { font-size: clamp(.92rem, 4vw, 1.05rem); }

    .tcs-form-inner {
        width: 100%;
        max-width: none;
    }

    .tcs-field {
        flex-direction: column;
        align-items: stretch;
        border-bottom: none;
        gap: 0;
    }

    .tcs-field input {
        width: 100%;
        border-bottom: 1px solid rgba(26, 23, 20, .28);
        transition: border-color .5s var(--tcs-ease);
        padding: 1rem 0;
        font-size: 16px;
    }

    .tcs-field input:focus {
        border-bottom-color: rgba(26, 23, 20, .6);
    }

    .tcs-submit {
        width: 100%;
        text-align: center;
        padding: 1.05rem 1rem;
        margin-top: 1rem;
        letter-spacing: .22em;
        min-height: 48px;
        border: 1px solid rgba(26, 23, 20, .35);
        color: var(--tcs-ink);
    }

    .tcs-submit:hover,
    .tcs-submit:focus-visible {
        background: var(--tcs-ink);
        color: var(--tcs-paper);
        letter-spacing: .26em;
    }
}

/* iPhone SE (320px) */
@media (max-width: 360px) {
    .tcs-lockup { width: min(70vw, 220px); }

    .tcs-hero {
        padding-top: 13dvh;
        padding-top: 13svh;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .tcs-guide {
        height: clamp(52px, 7svh, 60px);
        margin-top: clamp(.8rem, 2svh, 1.1rem);
    }

    .tcs-pair        { font-size: clamp(1rem, 7vw, 1.4rem); }
    .tcs-strong      { font-size: clamp(1.2rem, 7.5vw, 1.6rem); }
    .tcs-invite-line { font-size: 1rem; }
    .tcs-lede        { letter-spacing: .2em; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tcs-landing *,
    .tcs-landing *::before,
    .tcs-landing *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    .tcs-sr,
    .tcs-lockup,
    .tcs-guide {
        opacity: 1;
        transform: none;
    }
}

/* Contact Form 7 integration */
.tcs-landing .wpcf7 { width: 100%; }
.tcs-landing .wpcf7-form { width: 100%; margin: 0; }
.tcs-landing .wpcf7 .tcs-field p { display: contents; }
.tcs-landing .wpcf7-form-control-wrap { flex: 1; min-width: 0; display: block; }
.tcs-landing .wpcf7 input[type="email"],
.tcs-landing .wpcf7 input[type="text"],
.tcs-landing .wpcf7 input[type="tel"],
.tcs-landing .wpcf7 textarea {
    width: 100%; background: transparent; border: 0; outline: 0; color: var(--tcs-ink);
    font-family: var(--tcs-sans); font-size: 16px; font-weight: 300; letter-spacing: .09em;
    padding: 1rem 0; caret-color: var(--tcs-ink-2);
}
.tcs-landing .wpcf7 input::placeholder,
.tcs-landing .wpcf7 textarea::placeholder { color: rgba(26, 23, 20, .32); }
.tcs-landing .wpcf7 input[type="submit"],
.tcs-landing .wpcf7 .wpcf7-submit {
    flex-shrink: 0; background: transparent; border: 0; color: var(--tcs-ink-2);
    font-family: var(--tcs-sans); font-size: clamp(.6rem, 1.1vw, .68rem); font-weight: 400;
    letter-spacing: .22em; text-transform: uppercase; padding: 1rem 0 1rem 1.2rem;
    cursor: pointer; transition: color .45s var(--tcs-ease), letter-spacing .45s var(--tcs-ease), background .45s var(--tcs-ease);
    white-space: nowrap; min-height: 44px;
}
.tcs-landing .wpcf7 input[type="submit"]:hover,
.tcs-landing .wpcf7 input[type="submit"]:focus-visible,
.tcs-landing .wpcf7 .wpcf7-submit:hover,
.tcs-landing .wpcf7 .wpcf7-submit:focus-visible { color: var(--tcs-ink); letter-spacing: .28em; outline: 0; }
.tcs-landing .wpcf7-not-valid-tip { margin-top: .55rem; color: #7b2d20; font-family: var(--tcs-sans); font-size: .75rem; letter-spacing: .04em; text-align: left; }
.tcs-landing .wpcf7 form .wpcf7-response-output { margin: 1.2rem 0 0; padding: 0; border: 0; color: rgba(26,23,20,.68); font-family: var(--tcs-serif); font-style: italic; font-size: 1rem; }
.tcs-landing .wpcf7-spinner { margin: 1rem auto 0; display: block; }
@media (max-width: 480px) {
    .tcs-landing .wpcf7 .tcs-field { flex-direction: column; align-items: stretch; border-bottom: none; }
    .tcs-landing .wpcf7 input[type="email"] { border-bottom: 1px solid rgba(26,23,20,.22); }
    .tcs-landing .wpcf7 input[type="submit"], .tcs-landing .wpcf7 .wpcf7-submit { width: 100%; text-align: center; padding: 1.05rem 1rem; margin-top: 1rem; border: 1px solid rgba(26,23,20,.35); color: var(--tcs-ink); }
    .tcs-landing .wpcf7 input[type="submit"]:hover, .tcs-landing .wpcf7 .wpcf7-submit:hover { background: var(--tcs-ink); color: var(--tcs-paper); letter-spacing: .26em; }
}