/* ============================================================
   THEME — Gold Tie  (route /goldtie)
   ------------------------------------------------------------
   A bespoke skin for this brand only, scoped under
   .brand-page.goldtie so the shared sub-brand layout
   (brand-pages.css) and the other brands are never touched.

   CONCEPT — "Black-tie." An art-deco gala at midnight: deep
   charcoal worsted wool with fine pinstripe, lit by a gold
   sunburst, with a single gold necktie struck at the centre.
   Geometry is deco — chevrons, fans, lozenges, Roman numerals.
   Distinct on purpose: NOT the temple's silver, NOT the genie's
   violet blueprint, NOT the ballot's cream paper. Charcoal + gold.

   Display: Bodoni Moda (luxe Didone, already loaded); microcopy
   in IBM Plex Mono; body in Cormorant Garamond.
   ============================================================ */
.brand-page.goldtie {
    /* — the midnight room — */
    --noir: #0c0a06;
    --char: #15110a;
    --char-lit: #211a0f;

    /* — gold foil (stand out) — */
    --gold: #d8b24a;
    --gold-bright: #f2d588;
    --gold-deep: #9a7521;
    --gold-ink: #241a02;

    /* — red ink (power) — */
    --red: #c0392b;
    --red-bright: #e05a4b;
    --red-deep: #8a2419;

    /* — the card — */
    --cream: #f4ecd6;
    --cream-hi: #faf3df;
    --card-ink: #2c2922;
    --card-ink-soft: #6a604a;

    /* — tokens consumed by the shared brand-pages.css — */
    --bg: var(--char);
    --bg-elev: var(--char-lit);
    --fg: #efe6cf;
    --muted: #b9a87e;
    --border: #3a2f18;
    --accent: var(--gold);
    --accent-hover: var(--gold-bright);
    --accent-fg: var(--gold-ink);
    --glow: rgba(216, 178, 74, 0.22);

    isolation: isolate;
    border: none;
    border-radius: 0;
    background: var(--char);
    color: var(--fg);
    font-family: 'Hanken Grotesk', system-ui, sans-serif;
}

/* ---- atmosphere: worsted pinstripe + gold pool + grain ---- */
.brand-page.goldtie::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(90% 55% at 50% -6%, rgba(216, 178, 74, 0.16), transparent 58%),
        radial-gradient(100% 80% at 50% 120%, rgba(0, 0, 0, 0.55), transparent 60%),
        repeating-linear-gradient(90deg, rgba(244, 236, 214, 0.022) 0 1px, transparent 1px 9px),
        linear-gradient(180deg, var(--char), var(--noir));
}
.brand-page.goldtie::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.5;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.brand-page.goldtie > * { position: relative; z-index: 1; }

/* ============================================================
   HERO
   ============================================================ */
.brand-page.goldtie .gt-hero {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* ---- the stage: a gold sunburst with a struck necktie ---- */
.brand-page.goldtie .gt-stage {
    position: relative;
    width: clamp(170px, 34vw, 250px);
    height: clamp(200px, 40vw, 290px);
    display: grid;
    place-items: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
/* deco sunburst fan behind the tie */
.brand-page.goldtie .gt-burst {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        repeating-conic-gradient(from 0deg,
            rgba(216, 178, 74, 0.16) 0deg 4deg,
            transparent 4deg 12deg);
    -webkit-mask: radial-gradient(circle, #000 18%, rgba(0,0,0,0.55) 46%, transparent 72%);
            mask: radial-gradient(circle, #000 18%, rgba(0,0,0,0.55) 46%, transparent 72%);
    animation: gt-spin 60s linear infinite;
}
.brand-page.goldtie .gt-burst::after {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    border: 1px solid rgba(216, 178, 74, 0.35);
    box-shadow: 0 0 26px -6px rgba(216, 178, 74, 0.5) inset;
}
@keyframes gt-spin { to { transform: rotate(360deg); } }

/* the necktie, struck in gold foil */
.brand-page.goldtie .gt-tie {
    position: relative;
    width: clamp(64px, 13vw, 92px);
    height: clamp(150px, 30vw, 215px);
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.6));
    animation: gt-sway 6.5s ease-in-out infinite;
    transform-origin: 50% 8%;
}
.brand-page.goldtie .gt-knot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64%;
    height: 17%;
    clip-path: polygon(10% 0, 90% 0, 72% 100%, 28% 100%);
    background: linear-gradient(150deg, var(--gold-bright), var(--gold) 52%, var(--gold-deep));
    box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.6);
}
.brand-page.goldtie .gt-blade {
    position: absolute;
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 86%;
    clip-path: polygon(50% 100%, 16% 18%, 34% 6%, 66% 6%, 84% 18%);
    background:
        linear-gradient(105deg, transparent 42%, rgba(255, 246, 220, 0.5) 50%, transparent 58%),
        linear-gradient(160deg, var(--gold-bright) 4%, var(--gold) 44%, var(--gold-deep) 100%);
}
/* a deco chevron stripe down the blade */
.brand-page.goldtie .gt-sheen {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 70%;
    background: repeating-linear-gradient(180deg, rgba(36, 26, 2, 0.55) 0 6px, transparent 6px 14px);
}
@keyframes gt-sway {
    0%, 100% { transform: rotate(-1.6deg); }
    50% { transform: rotate(1.6deg); }
}

/* ---- kicker ---- */
.brand-page.goldtie .gt-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--gold-bright);
}
.brand-page.goldtie .gt-diamond {
    width: 5px; height: 5px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
    box-shadow: 0 0 8px rgba(216, 178, 74, 0.5);
}

/* ---- wordmark ---- */
.brand-page.goldtie .gt-wordmark {
    margin: 1.1rem 0 0;
    font-family: 'Bodoni Moda', Didot, 'Times New Roman', serif;
    font-weight: 600;
    font-size: clamp(2.4rem, 8.6vw, 5.2rem);
    line-height: 0.95;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: linear-gradient(180deg, var(--gold-bright) 18%, var(--gold) 55%, var(--gold-deep) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.6));
}

.brand-page.goldtie .gt-creed {
    margin: 0.9rem 0 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.25rem, 2.8vw, 1.7rem);
    color: var(--fg);
}

/* ---- the transformation: handcuffs struck, tie struck in gold ---- */
.brand-page.goldtie .gt-trade {
    margin: 1.5rem 0 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem 1.1rem;
    font-family: 'Bodoni Moda', Didot, serif;
    font-size: clamp(1.15rem, 3vw, 1.7rem);
}
.brand-page.goldtie .gt-trade-off {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: var(--gold-deep);
    text-decoration-thickness: 2px;
    opacity: 0.85;
}
.brand-page.goldtie .gt-trade-arrow {
    color: var(--gold);
    font-size: 1.05em;
    transform: translateY(-0.02em);
}
.brand-page.goldtie .gt-trade-on {
    font-style: italic;
    font-weight: 600;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
}

.brand-page.goldtie .gt-lit { color: var(--gold-bright); font-weight: 600; }

/* ---- status chip ---- */
.brand-page.goldtie .gt-status {
    margin: 1.7rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 1rem;
    border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
    border-radius: 999px;
    background: rgba(216, 178, 74, 0.06);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--gold-bright);
}
.brand-page.goldtie .gt-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 8px rgba(242, 213, 136, 0.9);
    animation: gt-pulse 2.6s ease-out infinite;
}
@keyframes gt-pulse {
    0% { box-shadow: 0 0 0 0 rgba(242, 213, 136, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(242, 213, 136, 0); }
    100% { box-shadow: 0 0 0 0 rgba(242, 213, 136, 0); }
}

.brand-page.goldtie .gt-desc {
    margin: 1.6rem auto 0;
    max-width: 40rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    line-height: 1.6;
    color: var(--muted);
}

/* ---- deco rule ---- */
.brand-page.goldtie .gt-rule {
    margin: 2.4rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    width: min(340px, 70%);
}
.brand-page.goldtie .gt-rule-line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}
.brand-page.goldtie .gt-rule-gem {
    width: 11px; height: 11px;
    flex: 0 0 auto;
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
    box-shadow: 0 0 12px rgba(216, 178, 74, 0.5);
}

/* ---- the three facets (deco numerals) ---- */
.brand-page.goldtie .gt-facets {
    list-style: none;
    margin: 2.4rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    width: 100%;
    max-width: 46rem;
    border: 1px solid var(--border);
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}
@media (min-width: 640px) {
    .brand-page.goldtie .gt-facets { grid-template-columns: repeat(3, 1fr); }
}
.brand-page.goldtie .gt-facet {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.6rem 1.2rem;
    background: linear-gradient(180deg, var(--char-lit), var(--char));
    transition: background 0.4s ease;
}
.brand-page.goldtie .gt-facet:hover { background: linear-gradient(180deg, #261d10, var(--char-lit)); }
.brand-page.goldtie .gt-facet-mark {
    font-family: 'Bodoni Moda', Didot, serif;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.brand-page.goldtie .gt-facet-name {
    font-family: 'Bodoni Moda', Didot, serif;
    font-weight: 600;
    font-size: 1.18rem;
    color: var(--fg);
}
.brand-page.goldtie .gt-facet-note {
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--muted);
    max-width: 16rem;
}

/* ---- actions ---- */
.brand-page.goldtie .gt-actions {
    margin: 2.6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
}
.brand-page.goldtie .gt-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.7rem;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
    color: var(--gold-ink);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(255, 244, 214, 0.5) inset, 0 12px 30px -12px rgba(216, 178, 74, 0.6);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.brand-page.goldtie .gt-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255, 244, 214, 0.6) inset, 0 16px 36px -10px rgba(216, 178, 74, 0.7);
}
.brand-page.goldtie .gt-back {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.25s ease, gap 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.brand-page.goldtie .gt-back:hover { color: var(--gold-bright); }

/* ============================================================
   SECTION SCAFFOLD — tighten the stacked brand-inner blocks
   ============================================================ */
.brand-page.goldtie .gt-card-section,
.brand-page.goldtie .gt-what-section,
.brand-page.goldtie .gt-who-section,
.brand-page.goldtie .gt-cta-section {
    text-align: center;
    padding-top: clamp(1.4rem, 3.5vw, 2.6rem);
    padding-bottom: clamp(1.4rem, 3.5vw, 2.6rem);
}
.brand-page.goldtie .gt-cta-section { padding-bottom: clamp(3rem, 6vw, 5rem); }
.brand-page.goldtie .gt-section-kicker {
    justify-content: center;
    margin-bottom: 1.4rem;
}

/* ============================================================
   THE CARD — a handwritten note from a mentor
   ============================================================ */
.brand-page.goldtie .gt-card-wrap { display: flex; justify-content: center; }
.brand-page.goldtie .gt-card {
    position: relative;
    max-width: min(34rem, 92%);
    margin-top: 0.4rem;
    padding: 2.3rem 2.5rem 2.7rem;
    text-align: left;
    color: var(--card-ink);
    border-radius: 3px;
    transform: rotate(-2.2deg);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(160deg, var(--cream-hi), var(--cream) 60%, #e7dcbf 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 30px 60px -30px rgba(0, 0, 0, 0.85),
        0 10px 22px -16px rgba(0, 0, 0, 0.6);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.brand-page.goldtie .gt-card:hover { transform: rotate(-0.6deg) translateY(-3px); }
/* a faint baseline rule, like a notecard */
.brand-page.goldtie .gt-card::after {
    content: "";
    position: absolute;
    inset: 1.6rem 1.4rem 3.4rem;
    background: repeating-linear-gradient(180deg, transparent 0 2.05rem, rgba(120, 90, 40, 0.16) 2.05rem 2.1rem);
    pointer-events: none;
    opacity: 0.5;
}
/* washi tape pinning the top corner */
.brand-page.goldtie .gt-tape {
    position: absolute;
    top: -12px;
    left: 1.7rem;
    width: 92px;
    height: 26px;
    transform: rotate(-7deg);
    background: linear-gradient(180deg, rgba(242, 213, 136, 0.5), rgba(216, 178, 74, 0.4));
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.35);
    border-left: 1px dashed rgba(255, 255, 255, 0.5);
    border-right: 1px dashed rgba(255, 255, 255, 0.5);
}
.brand-page.goldtie .gt-card-line {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: 'Caveat', 'Segoe Script', cursive;
    font-weight: 600;
    font-size: clamp(1.7rem, 4.6vw, 2.5rem);
    line-height: 1.45;
    color: var(--card-ink);
}
.brand-page.goldtie .gt-ink-red { color: var(--red-deep); }
.brand-page.goldtie .gt-ink-gold { color: #9a6f12; }
.brand-page.goldtie .gt-card-sign {
    display: block;
    margin-top: 1.1rem;
    text-align: right;
    font-family: 'Caveat', 'Segoe Script', cursive;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    color: var(--card-ink-soft);
}
/* a little doodle of the two ties in the corner */
.brand-page.goldtie .gt-card-ties {
    position: absolute;
    bottom: 1rem;
    left: 1.6rem;
    display: flex;
    gap: 0.35rem;
    align-items: flex-end;
}
.brand-page.goldtie .gt-mini {
    width: 13px;
    height: 34px;
    clip-path: polygon(50% 100%, 18% 22%, 34% 8%, 66% 8%, 82% 22%);
}
.brand-page.goldtie .gt-mini-red { background: linear-gradient(160deg, var(--red-bright), var(--red) 55%, var(--red-deep)); transform: rotate(-9deg); }
.brand-page.goldtie .gt-mini-gold { background: linear-gradient(160deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep)); transform: rotate(9deg); }

.brand-page.goldtie .gt-card-caption {
    margin: 2rem auto 0;
    max-width: 38rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.1rem, 2.1vw, 1.32rem);
    line-height: 1.6;
    color: var(--muted);
}

/* ============================================================
   WHO IT'S FOR — the fork in the road
   ============================================================ */
.brand-page.goldtie .gt-who-title {
    margin: 0;
    font-family: 'Bodoni Moda', Didot, serif;
    font-weight: 600;
    font-size: clamp(1.7rem, 4.4vw, 2.6rem);
    color: var(--fg);
}
.brand-page.goldtie .gt-fork {
    display: block;
    width: clamp(120px, 24vw, 180px);
    height: auto;
    margin: 1.4rem auto 0.4rem;
    overflow: visible;
}
.brand-page.goldtie .gt-fork path {
    fill: none;
    stroke: var(--gold);
    stroke-width: 2.4;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(216, 178, 74, 0.5));
}
.brand-page.goldtie .gt-fork-base { fill: var(--gold-deep); }
.brand-page.goldtie .gt-fork-end {
    fill: var(--gold-bright);
    filter: drop-shadow(0 0 5px rgba(242, 213, 136, 0.8));
    animation: gt-pulse 2.8s ease-out infinite;
}
.brand-page.goldtie .gt-fork-end:last-of-type { animation-delay: 1.4s; }

.brand-page.goldtie .gt-paths {
    list-style: none;
    margin: 1.6rem auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    max-width: 50rem;
    border: 1px solid var(--border);
    background: var(--border);
    border-radius: 6px;
    overflow: hidden;
}
@media (min-width: 680px) {
    .brand-page.goldtie .gt-paths { grid-template-columns: 1fr 1fr; }
}
.brand-page.goldtie .gt-path {
    text-align: left;
    padding: 1.8rem 1.7rem;
    background: linear-gradient(180deg, var(--char-lit), var(--char));
    transition: background 0.4s ease;
}
.brand-page.goldtie .gt-path:hover { background: linear-gradient(180deg, #261d10, var(--char-lit)); }
.brand-page.goldtie .gt-path-no {
    display: block;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--gold-bright);
}
.brand-page.goldtie .gt-path-name {
    margin: 0.5rem 0 0;
    font-family: 'Bodoni Moda', Didot, serif;
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--fg);
}
.brand-page.goldtie .gt-path-note {
    margin: 0.7rem 0 0;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--muted);
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .brand-page.goldtie .gt-burst,
    .brand-page.goldtie .gt-tie,
    .brand-page.goldtie .gt-status-dot,
    .brand-page.goldtie .gt-fork-end { animation: none !important; }
    .brand-page.goldtie .gt-card { transition: none !important; }
}