/* =========================================================
   SH CLUB — X · THRESHOLD
   Every page before the member's own register: the gate, the
   sign-in, the application and its review, the invitation, the
   activation and the error pages. One obsidian ground with the
   Private OS V4 tokens, SHX Grotesk for words, IBM Plex Mono for
   codes and labels, one light action per page.
   ========================================================= */

@font-face{
    font-family:"IBM Plex Mono";
    src:url("../../fonts/v3/ibm-plex-mono-400-cyrillic.woff2") format("woff2");
    font-style:normal;
    font-weight:400;
    font-display:swap;
    unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face{
    font-family:"IBM Plex Mono";
    src:url("../../fonts/v3/ibm-plex-mono-400-latin.woff2") format("woff2");
    font-style:normal;
    font-weight:400;
    font-display:swap;
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
    --obsidian:#0D1115;
    --raised:#141A20;
    --on-dark:#ECE7DD;
    --on-dark-2:#B3AEA6;
    --on-dark-3:#8E8B85;
    --line:rgba(236,231,221,.14);
    --line-2:rgba(236,231,221,.44);
    --patina:#86ACA1;
    --alert:#E2ABA3;
    --ink:#111417;
    --f-sans:var(--shx-font-family,"SHX Grotesk","Segoe UI",Arial,sans-serif);
    --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --ease:cubic-bezier(.2,.7,.2,1);
    color-scheme:dark;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    -webkit-text-size-adjust:100%;
    font-synthesis:none;
    text-rendering:optimizeLegibility;
}

body{
    margin:0;
    min-height:100vh;
    background:var(--obsidian);
    color:var(--on-dark);
    font:400 16px/1.6 var(--f-sans);
    -webkit-font-smoothing:antialiased;
}

p,
h1,
h2{
    margin:0;
}

a{
    color:inherit;
}

button,
input,
textarea{
    font:inherit;
    color:inherit;
}

:focus-visible{
    outline:1px solid var(--patina);
    outline-offset:3px;
}

::selection{
    background:var(--on-dark);
    color:var(--ink);
}

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}

/* FRAME --------------------------------------------------- */

.th{
    display:grid;
    grid-template-rows:auto 1fr auto;
    min-height:100vh;
    min-height:100svh;
    padding:28px clamp(20px,5vw,64px) 32px;
}

.th-mark{
    display:inline-flex;
    align-items:center;
    gap:12px;
    justify-self:start;
    color:var(--on-dark);
    text-decoration:none;
}

.th-mark .seal{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1;
}

.th-main{
    align-self:center;
    width:100%;
    max-width:520px;
    margin:56px auto;
}

.th-wide .th-main{
    max-width:1040px;
}

.th-foot{
    color:var(--on-dark-3);
}

/* TYPE ---------------------------------------------------- */

.micro{
    font-family:var(--f-mono);
    font-size:10.5px;
    line-height:1.5;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.th-kicker{
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
    margin-bottom:22px;
    color:var(--on-dark-3);
}

.th-title{
    font-size:clamp(34px,6vw,50px);
    font-weight:400;
    line-height:1.02;
    letter-spacing:-.034em;
    overflow-wrap:break-word;
    text-wrap:balance;
}

.th-lead{
    margin-top:18px;
    color:var(--on-dark-2);
    font-size:17px;
    line-height:1.55;
}

.th-lead + .th-lead{
    margin-top:8px;
}

.th-lead strong{
    color:var(--on-dark);
    font-weight:400;
}

.th-rule{
    margin:34px 0 30px;
    border:0;
    border-top:1px solid var(--line);
}

/* FACTS: label / value rows ------------------------------- */

.th-facts{
    display:grid;
    gap:14px;
    margin:0;
}

.th-facts div{
    display:grid;
    grid-template-columns:minmax(92px,auto) 1fr;
    gap:16px;
    align-items:baseline;
}

.th-facts dt{
    color:var(--on-dark-3);
}

.th-facts dd{
    margin:0;
    min-width:0;
    overflow-wrap:anywhere;
}

/* ACTIONS ------------------------------------------------- */

.th-actions{
    display:grid;
    gap:14px;
    margin-top:34px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    width:100%;
    min-height:54px;
    padding:0 20px;
    border:1px solid var(--on-dark);
    border-radius:0;
    background:var(--on-dark);
    color:var(--ink);
    font-family:var(--f-mono);
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    text-decoration:none;
    cursor:pointer;
    transition:background-color .2s var(--ease), color .2s var(--ease);
}

.btn:hover{
    background:#FFFFFF;
}

.btn .arrow{
    font-family:var(--f-sans);
    font-size:16px;
    letter-spacing:0;
}

.btn-quiet{
    border-color:var(--line-2);
    background:transparent;
    color:var(--on-dark);
}

.btn-quiet:hover{
    border-color:var(--on-dark);
    background:transparent;
}

.btn[aria-busy="true"],
.btn:disabled{
    opacity:.6;
    cursor:progress;
}

.link{
    justify-self:start;
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:32px;
    padding:0;
    border:0;
    border-bottom:1px solid var(--line-2);
    background:none;
    color:var(--on-dark-2);
    font-family:var(--f-mono);
    font-size:10.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    text-decoration:none;
    cursor:pointer;
}

.link:hover{
    border-bottom-color:var(--on-dark);
    color:var(--on-dark);
}

.th-or{
    display:flex;
    align-items:center;
    gap:14px;
    margin:30px 0 26px;
    color:var(--on-dark-3);
}

.th-or::before,
.th-or::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--line);
}

/* STATES -------------------------------------------------- */

.th-status{
    display:inline-flex;
    align-items:center;
    min-height:36px;
    margin-top:34px;
    padding:0 14px;
    border:1px solid var(--line-2);
    color:var(--on-dark);
}

.th-note{
    margin-top:18px;
    color:var(--on-dark-3);
    font-size:14px;
    line-height:1.55;
}

.th-notice,
.th-error{
    margin:0 0 26px;
    padding:2px 0 2px 16px;
    border-left:1px solid var(--patina);
    color:var(--patina);
    font-size:15px;
    line-height:1.5;
}

.th-error{
    border-left-color:var(--alert);
    color:var(--alert);
}

.field-error{
    color:var(--alert);
    font-size:14px;
    line-height:1.45;
}

/* FORMS --------------------------------------------------- */

.th-form{
    display:grid;
    gap:26px;
}

.field{
    display:grid;
    gap:8px;
    min-width:0;
    margin:0;
    padding:0;
    border:0;
}

.field > label,
.field > legend{
    padding:0;
    color:var(--on-dark-2);
    font-size:12px;
}

.input{
    width:100%;
    height:50px;
    padding:0;
    border:0;
    border-bottom:1px solid var(--line-2);
    border-radius:0;
    background:transparent;
    font-size:18px;
}

.input:focus,
.area:focus{
    outline:none;
    border-color:var(--patina);
    box-shadow:0 1px 0 var(--patina);
}

.area{
    width:100%;
    min-height:128px;
    padding:14px 16px;
    border:1px solid var(--line-2);
    border-radius:0;
    background:var(--raised);
    font-size:17px;
    line-height:1.55;
    resize:vertical;
}

.area:focus{
    box-shadow:0 0 0 1px var(--patina);
}

.input::placeholder,
.area::placeholder{
    color:var(--on-dark-3);
    opacity:1;
}

.input[aria-invalid="true"],
.area[aria-invalid="true"]{
    border-color:var(--alert);
}

input:-webkit-autofill{
    -webkit-text-fill-color:var(--on-dark);
    -webkit-box-shadow:0 0 0 1000px var(--obsidian) inset;
    caret-color:var(--on-dark);
}

/* one choice among a few: native radios, styled as a register */
.choices{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:4px;
}

.choices label{
    position:relative;
    display:flex;
    align-items:center;
    min-height:48px;
    padding:10px 14px;
    border:1px solid var(--line);
    color:var(--on-dark-2);
    font-size:15px;
    line-height:1.3;
    cursor:pointer;
    transition:border-color .15s var(--ease), color .15s var(--ease);
}

.choices input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.choices label:hover{
    border-color:var(--line-2);
    color:var(--on-dark);
}

.choices label:has(input:checked){
    border-color:var(--on-dark);
    color:var(--on-dark);
}

.choices label:has(input:focus-visible){
    outline:1px solid var(--patina);
    outline-offset:3px;
}

.check{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:32px;
    color:var(--on-dark-2);
    font-size:14px;
    cursor:pointer;
}

.check input{
    width:18px;
    height:18px;
    margin:0;
    accent-color:var(--on-dark);
}

.th-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:10px 20px;
}

/* APPLICATION: intro beside the form on wide screens ------- */

.th-split{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
    gap:clamp(40px,7vw,96px);
    align-items:start;
}

.th-price{
    margin-top:34px;
    padding-top:22px;
    border-top:1px solid var(--line);
    font-size:26px;
    line-height:1.1;
    letter-spacing:-.02em;
}

.th-price .micro{
    display:block;
    margin-top:8px;
    color:var(--on-dark-3);
}

.th-list{
    display:grid;
    gap:10px;
    margin:30px 0 0;
    padding:0;
    list-style:none;
    color:var(--on-dark-2);
}

.th-list li::before{
    content:"—";
    margin-right:12px;
    color:var(--on-dark-3);
}

/* LETTER: SH's words on the access page ------------------- */

.th-letter{
    display:grid;
    gap:18px;
    margin:0 0 30px;
    padding:0;
    list-style:none;
}

.th-letter li{
    display:grid;
    gap:6px;
}

.th-letter .micro{
    color:var(--on-dark-3);
}

.th-letter p{
    white-space:pre-line;
    overflow-wrap:anywhere;
}

/* PHONES -------------------------------------------------- */

@media (max-width:860px){
    .th-split{
        grid-template-columns:1fr;
    }
}

@media (max-width:520px){
    .th{
        padding:22px 20px 26px;
    }

    .th-main{
        margin:40px auto 32px;
    }

    .th-title{
        font-size:clamp(30px,9vw,38px);
    }

    .th-lead{
        font-size:16px;
    }

    .choices{
        grid-template-columns:1fr;
    }

    .th-facts div{
        grid-template-columns:1fr;
        gap:2px;
    }

    .link{
        min-height:44px;
    }
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        transition:none !important;
        animation:none !important;
        scroll-behavior:auto !important;
    }
}