/* Companion content for the Index / gaming portfolio sketch. */
.support-skip { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 12px 16px; color: var(--paper, #f4f1e8); background: var(--ink, #20221f); transform: translateY(-160%); }
.support-skip:focus { transform: translateY(0); }
.support-brand-caption { display: block; margin-top: 8px; font: 10px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--muted, #65685f); }
.support-rail-note { margin-top: auto; padding: 36px 0 18px; }
.support-rail-note p { margin: 10px 0 0; font-size: 14px; line-height: 1.3; }
.support-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 32px 0 25px; border-bottom: 1px solid var(--line, #c9cac0); }
.support-topline .arrow-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; }
.support-hero { padding: 64px 0 0; }
.support-hero > .eyebrow { margin: 0 0 28px; }
.support-hero h1 { margin: 0; font-size: clamp(84px, 11.5vw, 164px); font-weight: 500; letter-spacing: -.075em; line-height: .83; }
.support-hero h1 span { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; letter-spacing: -.065em; }
.support-hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 42px; padding-bottom: 26px; border-bottom: 1px solid var(--line, #c9cac0); }
.support-dates { font-size: 28px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.support-status { display: inline-flex; align-items: center; gap: 8px; color: var(--muted, #65685f); font: 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.support-status i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #f86c39); }
.support-intro { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; padding: 46px 0 54px; }
.support-intro-title { margin: 0; font-size: clamp(24px, 3.1vw, 42px); letter-spacing: -.045em; line-height: 1.1; }
.support-meta { margin: 0; }
.support-meta div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line, #c9cac0); }
.support-meta div:first-child { padding-top: 0; }
.support-meta dt { font: 10px/1.5 var(--mono); text-transform: uppercase; color: var(--muted, #65685f); letter-spacing: .07em; }
.support-meta dd { margin: 0; font-size: 13px; line-height: 1.45; }
.support-muted { color: var(--muted, #65685f); }
.support-placeholder { min-height: 420px; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; overflow: hidden; background: #e8e8de; background-image: linear-gradient(#c9cac044 1px, transparent 1px), linear-gradient(90deg, #c9cac044 1px, transparent 1px); background-size: 48px 48px; border: 1px solid var(--line, #c9cac0); }
.support-placeholder-top, .support-placeholder-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.support-cross { color: var(--accent, #f86c39); font: 24px/1 var(--mono); }
.support-placeholder-word { font-size: clamp(40px, 6.5vw, 98px); font-weight: 500; line-height: 1; letter-spacing: -.065em; color: #7f8377; text-align: center; }
.support-placeholder-index { font: 11px/1 var(--mono); color: var(--muted, #65685f); }
.support-next { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 66px 0 0; padding: 30px 0; border-top: 1px solid var(--line, #c9cac0); border-bottom: 1px solid var(--line, #c9cac0); }
.support-next a { display: flex; align-items: center; gap: 40px; font-size: clamp(24px, 3.3vw, 44px); line-height: 1; letter-spacing: -.055em; }
.support-next a span { display: inline-block; color: var(--accent, #f86c39); transition: transform 240ms ease; }
.support-next a:hover span { transform: translate(4px, -4px); }
.support-footer { margin-top: 86px; padding: 0 0 24px; }
.support-contact { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; max-width: 100%; font-size: clamp(20px, 4vw, 56px); line-height: 1.2; letter-spacing: -.045em; overflow-wrap: anywhere; }
.support-contact span { flex-shrink: 0; color: var(--accent, #f86c39); transition: transform 240ms ease; }
.support-contact:hover span { transform: translate(4px, -4px); }
.support-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; padding-top: 32px; margin-top: 32px; border-top: 1px solid var(--line, #c9cac0); font: 10px/1.5 var(--mono); }
.experiments-hero h1 { font-size: clamp(64px, 8.9vw, 134px); letter-spacing: -.08em; line-height: .95; }
.experiments-hero .support-hero-bottom > p { margin: 0; max-width: 330px; font-size: 19px; line-height: 1.3; letter-spacing: -.025em; }
.experiment-empty { position: relative; min-height: 490px; display: flex; flex-direction: column; justify-content: space-between; margin-top: 42px; padding: 26px; overflow: hidden; color: var(--paper, #f4f1e8); background: var(--ink, #20221f); }
.experiment-empty .eyebrow { color: #d3d5c8; }
.experiment-empty-top, .experiment-empty-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 24px; }
.experiment-empty-bottom { align-items: flex-end; }
.experiment-empty-bottom p { margin: 0; font-size: clamp(30px, 4.1vw, 58px); line-height: 1.02; letter-spacing: -.04em; }
.experiment-empty-bottom em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.experiment-orbit { position: absolute; width: 330px; height: 330px; top: 36px; right: 40px; border: 1px solid #d3d5c838; border-radius: 50%; transform: rotate(-24deg); }
.experiment-orbit span { position: absolute; inset: 26px; border: 1px solid #d3d5c84d; border-radius: 50%; }
.experiment-orbit span:nth-child(2) { inset: 56px; border-color: #d3d5c866; }
.experiment-orbit span:nth-child(3) { inset: 86px; border-color: #d3d5c87d; }
.experiment-orbit i { position: absolute; display: grid; place-items: center; inset: 0; color: var(--accent, #f86c39); font-size: 145px; font-weight: 400; font-style: normal; transform: rotate(24deg); }
.support-bio { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding: 46px 0 0; }
.support-bio p { margin: 0; font-size: clamp(24px, 3.2vw, 42px); letter-spacing: -.035em; line-height: 1.15; }
@media (max-width: 1050px) { .support-intro { gap: 32px; } .support-meta div { grid-template-columns: 85px 1fr; } .support-hero h1 { font-size: clamp(84px, 11.5vw, 164px); } .support-hero-bottom { align-items: center; } }
@media (max-width: 850px) { .support-page { padding-top: 0; } .support-rail-note, .support-brand-caption { display: none; } .support-topline { padding: 26px 0 22px; } .support-topline > .eyebrow { font-size: 9px; } .support-hero { padding-top: 42px; } .support-hero h1 { font-size: clamp(84px, 18vw, 150px); } .support-intro { padding: 30px 0 36px; } .support-placeholder { min-height: 330px; } .support-next { margin-top: 42px; } .support-footer { margin-top: 56px; } .experiments-hero h1 { font-size: clamp(50px, 11.4vw, 100px); } .experiment-empty { min-height: 430px; } }
@media (max-width: 560px) { .support-topline { gap: 12px; } .support-topline .arrow-link { font-size: 11px; gap: 5px; } .support-topline > .eyebrow { max-width: 98px; text-align: right; } .support-hero > .eyebrow { margin-bottom: 22px; } .support-hero h1 { font-size: 24vw; } .support-hero-bottom { align-items: flex-start; flex-direction: column; gap: 14px; margin-top: 28px; padding-bottom: 22px; } .support-dates { font-size: 23px; } .support-status { font-size: 9px; } .support-intro { grid-template-columns: 1fr; gap: 28px; } .support-intro-title { font-size: 28px; } .support-meta div { grid-template-columns: 100px 1fr; } .support-placeholder { min-height: 300px; padding: 18px; } .support-placeholder-word { font-size: 11vw; } .support-placeholder .eyebrow { font-size: 9px; } .support-next { align-items: flex-start; flex-direction: column; gap: 20px; padding: 24px 0; } .support-next a { justify-content: space-between; width: 100%; font-size: 31px; } .support-contact { font-size: clamp(18px, 5.4vw, 30px); } .support-footer-bottom { padding-top: 22px; margin-top: 22px; font-size: 9px; } .experiments-hero h1 { font-size: 12.4vw; } .experiments-hero .support-hero-bottom > p { font-size: 18px; } .experiment-empty { min-height: 440px; padding: 20px; margin-top: 30px; } .experiment-orbit { width: 260px; height: 260px; top: 70px; right: -60px; } .experiment-orbit i { font-size: 115px; } .experiment-orbit span { inset: 20px; } .experiment-orbit span:nth-child(2) { inset: 43px; } .experiment-orbit span:nth-child(3) { inset: 65px; } .experiment-empty-bottom { align-items: flex-start; flex-direction: column; gap: 26px; } .experiment-empty-bottom p { font-size: 37px; } .support-bio { grid-template-columns: 1fr; gap: 20px; padding-top: 32px; } .support-bio p { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .support-next a span, .support-contact span { transition: none; } }