/* =============================================================================
   Go Gabriel X — public pages
   Link tree, password gate and error pages. No frameworks, no webfonts.
   ============================================================================= */

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

/* Defaults for standalone pages. The link tree overrides these from the theme
   via inline CSS custom properties on <body>. */
:root {
    --accent:     #4f46e5;
    --bg:         #f4f5f7;
    --radius-btn: 14px;
    --font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --ink:        #14161a;
    --ink-dim:    #5b6472;
    --ink-faint:  #8b939f;
    --surface:    #ffffff;
    --line:       #e3e6eb;
    --danger:     #b42318;
}

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

body.lt {
    margin: 0;
    min-height: 100dvh;
    font: 16px/1.6 var(--font);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }

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

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ============================================================== link tree === */
.lt-main {
    max-width: 520px;
    margin: 0 auto;
    padding: 24px 18px 56px;
}

.lt-banner { margin-bottom: 22px; }
.lt-banner img {
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(20, 22, 26, .1);
}

.lt-header { text-align: center; margin-bottom: 26px; }

.lt-title {
    margin: 0 0 8px;
    font-size: clamp(23px, 5.6vw, 30px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--ink);
}

.lt-bio {
    margin: 0 auto;
    max-width: 42ch;
    font-size: 15px;
    color: var(--ink-dim);
    line-height: 1.65;
}

/* --- buttons --- */
.lt-links { display: flex; flex-direction: column; gap: 12px; }

.lt-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-btn);
    color: var(--ink);
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(20, 22, 26, .05);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
    min-height: 54px;   /* comfortable 44px+ touch target */
}

.lt-btn:hover,
.lt-btn:focus-visible {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 10px 24px rgba(20, 22, 26, .12);
    text-decoration: none;
}

.lt-btn:active { transform: translateY(0); }

/* Accent stripe on the leading edge: colour without breaking contrast —
   the label stays dark-on-white, so it stays readable on any accent. */
.lt-btn::before {
    content: "";
    width: 4px;
    align-self: stretch;
    border-radius: 999px;
    background: var(--accent);
    flex: none;
    margin: -3px 2px -3px -6px;
}

.lt-icon { width: 22px; height: 22px; flex: none; object-fit: contain; border-radius: 4px; }
.lt-label { flex: 1; text-align: left; }
.lt-arrow {
    color: var(--accent);
    font-weight: 700;
    opacity: .55;
    transition: transform .14s ease, opacity .14s ease;
    flex: none;
}
.lt-btn:hover .lt-arrow { transform: translateX(3px); opacity: 1; }

.lt-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--ink-faint);
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: 16px;
}

.lt-foot {
    margin-top: 40px;
    text-align: center;
    font-size: 12.5px;
    color: var(--ink-faint);
}

/* ========================================================== password gate === */
.lt-gate { display: flex; align-items: center; justify-content: center; padding: 24px; }

.gate-card {
    width: 100%;
    max-width: 380px;
    padding: 34px 28px 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(20, 22, 26, .1);
    text-align: center;
}

.gate-icon { font-size: 30px; line-height: 1; margin-bottom: 14px; }
.gate-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; word-break: break-word; }
.gate-sub { margin: 0 0 20px; font-size: 14px; color: var(--ink-dim); }

.gate-error {
    margin: 0 0 16px;
    padding: 10px 13px;
    background: #fef3f2;
    border: 1px solid #fda29b;
    border-radius: 10px;
    color: var(--danger);
    font-size: 13.5px;
    text-align: left;
}

.gate-form { display: flex; flex-direction: column; gap: 10px; }

.gate-form input[type="password"] {
    width: 100%;
    padding: 13px 14px;
    font-size: 16px;   /* 16px keeps iOS Safari from zooming on focus */
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fbfbfc;
    color: var(--ink);
    text-align: center;
}
.gate-form input[type="password"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.gate-submit {
    width: 100%;
    padding: 13px 16px;
    font-size: 15px;
    font-weight: 650;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    transition: filter .14s ease, transform .06s ease;
}
.gate-submit:hover { filter: brightness(1.07); }
.gate-submit:active { transform: translateY(1px); }
.gate-submit:disabled, .gate-form input:disabled { opacity: .55; cursor: not-allowed; }

.gate-hint { margin: 18px 0 0; font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; }

/* ============================================================ error pages === */
.lt-error { display: flex; align-items: center; justify-content: center; padding: 24px; }

.error-card {
    max-width: 460px;
    padding: 40px 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(20, 22, 26, .08);
    text-align: center;
}

.error-code {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--accent);
    opacity: .22;
    margin-bottom: 12px;
}

.error-title { margin: 0 0 12px; font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.error-message { margin: 0 0 14px; font-size: 15px; color: var(--ink-dim); line-height: 1.6; }
.error-hint { margin: 0; font-size: 13px; color: var(--ink-faint); line-height: 1.55; }
.error-host { margin: 26px 0 0; font-size: 12px; color: var(--ink-faint); }

/* =============================================================== responsive === */
@media (max-width: 420px) {
    .lt-main { padding: 18px 14px 44px; }
    .lt-btn { padding: 14px 15px; font-size: 15px; }
    .lt-banner img { border-radius: 14px; }
    .gate-card, .error-card { padding: 26px 20px 22px; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ==================================================================== print === */
@media print {
    body.lt { background: #fff; }
    .lt-btn { box-shadow: none; }
}