/* ========================
   BLOCKS — Component styles
   ======================== */

/* ---- Grain overlay ---- */
.grain {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- Registration ticks ---- */
.tick {
    position: fixed;
    z-index: 91;
    inline-size: 16px;
    block-size: 16px;
    border: 0 solid var(--hair);
    pointer-events: none;
}

/* ---- Shared arrow affordance ---- */
.ar {
    display: inline-block;
    transition: transform .35s;
}

/* ---- Site header ---- */
.site-head {
    position: fixed;
    inset: 0 0 auto;
    z-index: 80;
    padding: 20px var(--gutter);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dim);
    mix-blend-mode: difference;
}
.site-head b {
    color: var(--ink);
    font-weight: 500;
    letter-spacing: .32em;
}

/* ---- Hero ---- */
.hero {
    position: relative;
    min-block-size: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 120px 26px 90px;
}
.seal-wrap {
    position: relative;
}
.seal-wrap::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    inline-size: 330%;
    block-size: 330%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--glow), transparent 62%);
    pointer-events: none;
}
.seal {
    position: relative;
    inline-size: clamp(116px, 21vw, 184px);
    block-size: auto;
    color: var(--ink);
}
.eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--dim);
}
.hero-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.9rem, 14vw, 9rem);
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}
.lede {
    font-family: var(--mono);
    font-weight: 400;
    font-size: clamp(.95rem, 1.7vw, 1.22rem);
    line-height: 1.62;
    color: var(--dim);
    margin-inline: auto;
}
.lede em {
    color: var(--ink);
    font-style: normal;
}
.cta {
    display: inline-flex;
    align-items: center;
    gap: .7em;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--ink);
    padding: 16px 26px;
    border: 1px solid var(--ink);
    transition: background .35s, color .35s;
}
.cta:hover {
    background: transparent;
    color: var(--ink);
}
.cta:hover .ar {
    transform: translateX(5px);
}
.scroll-cue {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--dim);
}
.scroll-cue span {
    display: block;
    margin-top: 8px;
    animation: bob 2.4s ease-in-out infinite;
}

/* ---- Credo band ---- */
.band {
    padding-block: 15px;
    border-block: 1px solid var(--bg);
    text-align: center;
}
.band-line {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(.95rem, 2vw, 1.3rem);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.band-line span {
    padding: 0 .55em;
}
.band-line .star {
    opacity: .4;
}

/* ---- Worked-with strip ---- */
.strip {
    border-top: 1px solid var(--hair);
    padding-block: clamp(40px, 7vh, 68px);
    text-align: center;
}
.strip-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--dim);
}
.strip-names {
    font-family: var(--mono);
    font-size: clamp(.9rem, 1.4vw, 1.05rem);
    line-height: 2;
    color: var(--ink);
    max-inline-size: 62ch;
    margin-inline: auto;
}
.strip-names .sep {
    color: var(--dim);
}
.strip-names .more {
    color: var(--dim);
    letter-spacing: .05em;
}

/* ---- Section index label ---- */
.index-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--dim);
    padding-bottom: 34px;
    margin-bottom: 48px;
    border-bottom: 1px solid var(--hair);
}
.index-label .no {
    color: var(--ink);
}

/* ---- Section heading ---- */
.section-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2rem, 5.4vw, 3.7rem);
    line-height: 1.02;
    letter-spacing: 0;
}

/* ---- Body prose ---- */
.prose {
    font-family: var(--mono);
    font-size: clamp(.95rem, 1.5vw, 1.1rem);
    line-height: 1.78;
    color: var(--dim);
}
.prose em {
    color: var(--ink);
    font-style: normal;
}

/* ---- Ventures ---- */
.ventures-lead {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(1.2rem, 2.6vw, 1.9rem);
    letter-spacing: 0;
    margin-bottom: 18px;
}
.venture {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 30px;
    align-items: start;
    padding: 36px 6px;
    border-top: 1px solid var(--hair);
    color: var(--ink);
    transition: padding-left .4s, background .4s;
}
.venture:last-of-type {
    border-bottom: 1px solid var(--hair);
}
.venture:hover {
    padding-left: 20px;
    background: linear-gradient(90deg, var(--wash), transparent);
}
.venture:hover .venture-link .ar {
    transform: translate(3px, -3px);
}
.venture-name {
    grid-column: 1;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2rem, 7vw, 4.4rem);
    line-height: .95;
    letter-spacing: .01em;
    text-transform: uppercase;
}
.venture-role {
    grid-column: 1;
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
}
.venture-tag {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    color: var(--dim);
    white-space: nowrap;
    padding-top: .7em;
}
.venture-desc {
    grid-column: 1;
    font-family: var(--mono);
    font-size: clamp(.85rem, 1.4vw, 1rem);
    line-height: 1.66;
    color: var(--dim);
    margin-top: 14px;
}
.venture-link {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--ink);
    margin-top: 16px;
}

/* ---- Contact ---- */
.mailbtn {
    display: inline-block;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.3rem, 4.2vw, 2.6rem);
    letter-spacing: 0;
    color: var(--ink);
    border-bottom: 2px solid var(--hair);
    padding-bottom: 6px;
    transition: border-color .35s;
}
.mailbtn:hover {
    border-color: var(--ink);
}
.place {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--dim);
}

/* ---- Footer ---- */
.site-foot {
    border-top: 1px solid var(--hair);
    padding: 34px 26px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
}
.site-foot b {
    color: var(--ink);
    font-weight: 500;
    letter-spacing: .34em;
}