Something went wrong. Try again.
My website. cameron.stream
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510@font-face { font-family: "Processional"; src: url("/public/fonts/processional-regular.woff2?v=20260724-2") format("woff2"), url("/public/fonts/processional-regular.ttf?v=20260724-2") format("truetype"); font-style: normal; font-weight: 700; font-display: swap;}
.proc-page { --proc-black: #050505; --proc-white: #f5f5f0; --proc-stone: #d8d8d0; --proc-gray: #aaa9a2; --proc-line: #30302e; width: 100%; overflow: hidden; background: var(--proc-black); color: var(--proc-white); font-family: "Inter", system-ui, sans-serif;}
.proc-page *, .proc-page *::before, .proc-page *::after { box-sizing: border-box; }.proc-page a { color: inherit; }body:has(.proc-page) > .theme-toggle,body:has(.proc-page) > .theme-preferences { display: none; }
.proc-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.proc-nav,.proc-label,.proc-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;}
.proc-nav { min-height: 66px; padding: 0 2rem; border-bottom: 1px solid var(--proc-line);}
.proc-nav a { text-underline-offset: 0.35em; }.proc-nav a:first-child { text-decoration: none; }
.proc-hero { position: relative; min-height: min(920px, 92svh); padding: clamp(7rem, 14vw, 13rem) 2rem 2rem; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate;}
.proc-hero::before { content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(to bottom, transparent 2%, var(--proc-line) 24%, var(--proc-line) 100%);}
.proc-hero-aperture { position: absolute; z-index: -1; top: clamp(2rem, 4vw, 4rem); left: 50%; width: clamp(210px, 24vw, 360px); aspect-ratio: 1; transform: translateX(-50%); border: clamp(18px, 2.5vw, 38px) solid var(--proc-white); border-radius: 50%; box-shadow: 0 0 0 1px var(--proc-line), 0 0 0 clamp(28px, 4vw, 62px) var(--proc-black), 0 0 0 calc(clamp(28px, 4vw, 62px) + 1px) var(--proc-line);}
.proc-hero-aperture span { position: absolute; top: calc(100% + clamp(44px, 8vw, 110px)); left: 50%; width: 1px; height: clamp(100px, 13vw, 190px); background: var(--proc-line);}
.proc-hero h1 { margin: 0; font-family: "Processional", sans-serif; font-size: clamp(4.25rem, 13vw, 13rem); font-weight: 700; line-height: 0.82; letter-spacing: 0.035em; text-align: center; white-space: nowrap; font-synthesis: none;}
.proc-hero-deck { width: min(610px, 100%); margin: clamp(2.5rem, 5vw, 4.5rem) auto 4rem; color: var(--proc-stone); font-size: clamp(1.05rem, 1.8vw, 1.4rem); line-height: 1.5; text-align: center;}
.proc-hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 0.9rem; border-top: 1px solid var(--proc-line); font-family: "Processional", sans-serif; font-size: 0.78rem; letter-spacing: 0.08em;}
.proc-hero-meta span:nth-child(2) { text-align: center; }.proc-hero-meta span:last-child { text-align: right; }
.proc-label { padding-bottom: 0.85rem; border-bottom: 1px solid var(--proc-line); color: var(--proc-gray);}
.proc-tester,.proc-construction,.proc-glyphs,.proc-uses,.proc-download { padding: clamp(4rem, 8vw, 8rem) 2rem;}
.proc-tester > p { min-height: 1em; margin: clamp(3.5rem, 7vw, 7rem) 0 0; outline: none; font-family: "Processional", sans-serif; font-size: clamp(4rem, 10.8vw, 10rem); font-weight: 700; line-height: 0.92; letter-spacing: 0.025em; overflow-wrap: anywhere; font-synthesis: none;}
.proc-tester > p:focus-visible { outline: 1px solid var(--proc-white); outline-offset: 0.2em;}
.proc-poster { position: relative; min-height: min(800px, 72vw); overflow: hidden; border-block: 1px solid var(--proc-line); background: var(--proc-black);}
.proc-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5, 5, 5, 0.08) 18%, rgba(5, 5, 5, 0.42) 52%, rgba(5, 5, 5, 0.96) 100%); pointer-events: none;}
.proc-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: contrast(1.08);}
.proc-poster-copy { position: absolute; z-index: 1; right: 2rem; bottom: clamp(4rem, 8vw, 8rem); left: 2rem; font-family: "Processional", sans-serif; font-size: clamp(4rem, 11.5vw, 11rem); font-weight: 700; line-height: 0.83; letter-spacing: 0.025em; text-align: center; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.75); font-synthesis: none;}
.proc-poster-copy p { margin: 0; white-space: nowrap; }.proc-poster-copy p:last-child { color: var(--proc-white); }
.proc-poster-mark { position: absolute; z-index: 2; right: 2rem; bottom: 1.5rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em;}
.proc-construction-lead { width: min(760px, 78%); margin: clamp(4rem, 8vw, 7rem) 0 clamp(4rem, 7vw, 6rem) auto; font-size: clamp(1.6rem, 3.2vw, 3rem); line-height: 1.2; letter-spacing: -0.025em;}
.proc-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--proc-line); border-left: 1px solid var(--proc-line);}
.proc-rule-grid article { min-height: 540px; padding: 1.25rem; display: flex; flex-direction: column; border-right: 1px solid var(--proc-line); border-bottom: 1px solid var(--proc-line);}
.proc-rule-number { color: var(--proc-gray); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;}
.proc-rule-glyph { margin: auto 0; font-family: "Processional", sans-serif; font-size: clamp(8rem, 17vw, 17rem); line-height: 0.8; text-align: center; font-synthesis: none;}
.proc-rule-grid h2 { margin: 0 0 0.65rem; font-family: "Processional", sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.055em;}
.proc-rule-grid p { margin: 0; color: var(--proc-gray); font-size: 0.83rem; line-height: 1.5;}
.proc-procession { position: relative; min-height: 1350px; padding: 10rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; border-block: 1px solid var(--proc-line);}
.proc-procession::before { content: ""; position: absolute; top: 5rem; left: 50%; width: 170px; height: 170px; transform: translateX(-50%); border: 22px solid var(--proc-white); border-radius: 50%; background: var(--proc-black);}
.proc-procession-axis { position: absolute; top: 13rem; bottom: 0; left: 50%; width: 1px; background: var(--proc-line);}
.proc-procession p { position: relative; z-index: 1; margin: 0; padding: 0 0.16em; background: var(--proc-black); font-family: "Processional", sans-serif; font-size: clamp(5rem, 13vw, 13rem); font-weight: 700; line-height: 0.84; letter-spacing: 0.035em; text-align: center; font-synthesis: none;}
.proc-procession p span { position: absolute; top: 50%; right: calc(100% + 2rem); color: var(--proc-gray); font-family: "Inter", sans-serif; font-size: 0.65rem; letter-spacing: 0.14em;}
.proc-alphabet { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); margin-top: clamp(3rem, 6vw, 6rem); border-top: 1px solid var(--proc-line); border-left: 1px solid var(--proc-line);}
.proc-alphabet span { min-width: 0; aspect-ratio: 0.82; display: grid; place-items: center; border-right: 1px solid var(--proc-line); border-bottom: 1px solid var(--proc-line); font-family: "Processional", sans-serif; font-size: clamp(1.8rem, 4.5vw, 4.5rem); font-synthesis: none;}
.proc-numerals { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; margin-top: 3rem; font-family: "Processional", sans-serif; font-size: clamp(2.5rem, 7vw, 7rem); line-height: 1; letter-spacing: 0.04em; font-synthesis: none;}
.proc-numerals p { margin: 0; overflow-wrap: anywhere; }
.proc-uses { border-top: 1px solid var(--proc-line); }.proc-uses-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(3rem, 8vw, 8rem); margin-top: clamp(4rem, 7vw, 7rem); align-items: end;}
.proc-use-large { margin: 0; font-family: "Processional", sans-serif; font-size: clamp(5rem, 11vw, 11rem); line-height: 0.84; letter-spacing: 0.03em; font-synthesis: none;}
.proc-use-small { border-top: 1px solid var(--proc-white); font-family: "Processional", sans-serif; font-size: clamp(0.85rem, 1.3vw, 1.1rem); letter-spacing: 0.08em;}
.proc-use-small p { margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--proc-line);}
.proc-download { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(4rem, 9vw, 9rem); border-top: 1px solid var(--proc-line); background: var(--proc-white); color: var(--proc-black);}
.proc-download h2 { margin: 0; font-family: "Processional", sans-serif; font-size: clamp(4rem, 8.5vw, 8rem); font-weight: 700; line-height: 0.86; letter-spacing: 0.035em; font-synthesis: none;}
.proc-download > div:first-child > p { width: min(480px, 100%); margin: 2.5rem 0 0; font-size: 0.95rem; line-height: 1.6;}
.proc-download-actions { display: flex; flex-direction: column; justify-content: flex-end;}
.proc-download-actions a { padding: 1.25rem 0; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--proc-black); text-decoration: none; transition: padding 150ms ease;}
.proc-download-actions a:last-child { border-bottom: 1px solid var(--proc-black); }.proc-download-actions a:hover { padding-left: 0.75rem; }.proc-download-actions span { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; }.proc-download-actions strong { font-family: "Processional", sans-serif; font-size: 0.9rem; letter-spacing: 0.05em; }
.proc-footer { padding: 1.5rem 2rem; border-top: 1px solid var(--proc-line);}
.proc-footer a { text-underline-offset: 0.35em; }
@media (max-width: 900px) { .proc-rule-grid { grid-template-columns: 1fr; } .proc-rule-grid article { min-height: 430px; } .proc-alphabet { grid-template-columns: repeat(7, minmax(0, 1fr)); } .proc-uses-grid, .proc-download { grid-template-columns: 1fr; } .proc-construction-lead { width: 100%; }}
@media (max-width: 600px) { .proc-nav, .proc-tester, .proc-construction, .proc-glyphs, .proc-uses, .proc-download, .proc-footer { padding-left: 1rem; padding-right: 1rem; }
.proc-nav span, .proc-label span:last-child, .proc-footer span:nth-child(2) { display: none; } .proc-hero { min-height: 720px; padding-left: 1rem; padding-right: 1rem; } .proc-hero h1 { font-size: min(6rem, calc((100vw - 2rem) / 6.8)); } .proc-hero-deck { margin-bottom: 2.75rem; } .proc-hero-meta { grid-template-columns: 1fr 1fr; } .proc-hero-meta span:nth-child(2) { text-align: right; } .proc-hero-meta span:last-child { grid-column: 1 / -1; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--proc-line); text-align: center; } .proc-tester > p { font-size: min(5.5rem, 14.2vw); } .proc-poster { min-height: 112vw; } .proc-poster-copy { right: 1rem; left: 1rem; font-size: min(5.8rem, 13.5vw); } .proc-poster-mark { right: 1rem; bottom: 1rem; } .proc-procession { min-height: 1050px; padding-inline: 1rem; } .proc-procession::before { width: 130px; height: 130px; border-width: 17px; } .proc-procession-axis { top: 11rem; } .proc-procession p { font-size: min(7rem, 19vw); } .proc-procession p span { display: none; } .proc-alphabet { grid-template-columns: repeat(4, minmax(0, 1fr)); } .proc-alphabet span:nth-last-child(2) { grid-column: 2; } .proc-numerals { grid-template-columns: 1fr; } .proc-footer span:first-child { display: none; }}
@media (prefers-reduced-motion: reduce) { .proc-page *, .proc-page *::before, .proc-page *::after { scroll-behavior: auto !important; }}