:root { --ink: #090909; --paper: #eeeae0; --acid: #d9ff43; --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #151513; }
body { margin: 0; color: var(--paper); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.skip-link { position: fixed; z-index: 100; left: 12px; top: 12px; transform: translateY(-160%); background: var(--acid); color: var(--ink); padding: 10px 14px; font-weight: 800; }
.skip-link:focus { transform: none; }

.intro { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; background: #050505; animation: intro-out .22s 1.08s ease forwards; }
.intro-grid { position: relative; width: min(66vw, 250px); aspect-ratio: 4/5; display: grid; place-items: center; }
.intro-grid > p { position: absolute; bottom: -30px; font: 500 8px/1 var(--mono); letter-spacing: .18em; color: #918f87; }
.intro-corner { position: absolute; width: 24px; height: 24px; border-color: #77766f; }
.intro-tl { inset: 0 auto auto 0; border-left: 1px solid; border-top: 1px solid; }.intro-tr { inset: 0 0 auto auto; border-right: 1px solid; border-top: 1px solid; }.intro-bl { inset: auto auto 0 0; border-left: 1px solid; border-bottom: 1px solid; }.intro-br { inset: auto 0 0 auto; border-right: 1px solid; border-bottom: 1px solid; }
.focus-box { position: relative; width: 74px; height: 74px; animation: focus-lock .78s cubic-bezier(.2,.8,.2,1) both; }
.focus-box span { position: absolute; width: 17px; height: 17px; border-color: var(--acid); }.focus-box span:nth-child(1) { border-left: 2px solid; border-top: 2px solid; }.focus-box span:nth-child(2) { right: 0; border-right: 2px solid; border-top: 2px solid; }.focus-box span:nth-child(3) { bottom: 0; border-left: 2px solid; border-bottom: 2px solid; }.focus-box span:nth-child(4) { right: 0; bottom: 0; border-right: 2px solid; border-bottom: 2px solid; }
.flash { position: fixed; z-index: 90; inset: 0; pointer-events: none; background: white; opacity: 0; animation: flash .34s .88s ease-out both; }

.card { position: relative; isolation: isolate; width: 100%; max-width: 520px; height: 100svh; min-height: 480px; max-height: 100svh; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 18px max(13px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 30px 12px auto auto minmax(0, 1fr); gap: 4px; overflow: hidden; background: #fff; color: var(--paper); box-shadow: 0 0 80px rgba(0,0,0,.5); }
.card::before { content: ""; position: absolute; z-index: 1; grid-row: 1 / 5; inset: -40px -18px -5px; pointer-events: none; border-bottom: 1px solid #191813; background: linear-gradient(180deg, #e8ad26 0 18%, #1a1914 18% 77%, #e8ad26 77% 86%, #2879aa 86% 91%, #d44225 91% 96%, #e8ad26 96% 100%); box-shadow: inset 0 0 0 1px rgba(53,39,8,.28), 0 12px 30px rgba(0,0,0,.14); }.card::after { content: ""; position: absolute; z-index: 1; grid-row: 1 / 5; inset: -40px -18px -5px; pointer-events: none; opacity: .13; background-image: repeating-linear-gradient(96deg, transparent 0 3px, rgba(42,31,7,.18) 3px 4px); mix-blend-mode: multiply; }
.hero-art { position: relative; z-index: 0; grid-row: 5; min-height: 0; margin: 0 -18px calc(0px - max(13px, env(safe-area-inset-bottom))); display: grid; place-items: center; overflow: hidden; border-top: 1px solid rgba(9,9,9,.16); background: #fff; }
.film-frame { position: relative; width: min(78%, 330px); margin: 0; padding: 20px 13px 22px; background: #050504; outline: 1px solid rgba(238,234,224,.1); outline-offset: -1px; box-shadow: var(--film-shadow-x, 0px) var(--film-shadow-y, 18px) 24px 5px rgba(0,0,0,.74), 0 12px 12px rgba(0,0,0,.38); transform: rotate(-.35deg); transition: box-shadow .12s linear; will-change: box-shadow; }
.film-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .19; background-image: repeating-radial-gradient(circle at 25% 35%, transparent 0 1px, rgba(255,255,255,.2) 1px 1.5px); background-size: 4px 4px; mix-blend-mode: screen; }
.film-aperture { position: relative; width: 100%; aspect-ratio: 6/7; overflow: hidden; background: #151513; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.film-edge { position: absolute; z-index: 2; left: 13px; right: 13px; display: flex; align-items: center; color: #b5a96c; font: 600 6px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; opacity: .82; }
.film-edge-top { top: 7px; justify-content: flex-start; }.film-edge-bottom { bottom: 8px; justify-content: flex-end; }.film-edge b { margin-right: auto; color: #c8b75c; font: inherit; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.025); transition: opacity .9s ease, transform 5s ease; }
.hero-photo.is-active { opacity: 1; transform: scale(1); }
.hero-art.has-photos .orb, .hero-art.has-photos .silhouette { display: none; }
.orb { position: absolute; border-radius: 50%; }.orb-one { width: min(88vw, 440px); height: min(88vw, 440px); top: 10%; left: 43%; transform: translateX(-50%); background: radial-gradient(circle at 38% 35%, rgba(219,255,67,.2), rgba(75,76,66,.14) 39%, rgba(2,2,2,.96) 72%); box-shadow: 0 0 100px rgba(219,255,67,.08); }.orb-two { width: 30vw; height: 60vw; right: -10%; top: 22%; background: #d9ff43; filter: blur(55px); opacity: .12; }
.silhouette { position: absolute; left: 50%; top: 17%; width: min(54vw, 270px); height: 54%; transform: translateX(-47%); border-radius: 48% 48% 7% 7%; background: linear-gradient(100deg, #0d0e0c 0 35%, #24261f 52%, #090a08 78%); box-shadow: -30px 0 70px rgba(0,0,0,.65); }
.grain { position: absolute; inset: -50%; opacity: .17; background-image: repeating-radial-gradient(circle at 30% 40%, transparent 0 1px, rgba(255,255,255,.22) 1px 2px); background-size: 5px 5px; mix-blend-mode: overlay; transform: rotate(7deg); }
.hero-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.055) 100%); }

.viewfinder { display: none; }
.corner { position: absolute; width: 19px; height: 19px; border-color: rgba(238,234,224,.44); }.corner-tl { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }.corner-tr { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }.corner-bl { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }.corner-br { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }
.focus-mark { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); font: 200 22px/1 var(--mono); color: rgba(238,234,224,.52); }

.card-header, .camera-meta { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.card-header { width: 100%; min-width: 0; gap: 10px; transform: translateY(-5px); }
.card-header, .camera-meta { color: #171611; }.wordmark { font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-size: 17px; font-weight: 900; letter-spacing: -.08em; }.wordmark span { color: #c93620; }
.header-ticker { min-width: 0; flex: 1; overflow: hidden; padding: 3px 0; border-block: 1px solid rgba(23,22,17,.28); font: 800 6px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker-track { width: max-content; display: flex; animation: ticker-scroll 12s linear infinite; }.ticker-track span { padding-right: 32px; }
.available { min-height: 27px; padding: 0 10px; flex: 0 0 auto; display: flex; align-items: center; gap: 7px; border: 1px solid rgba(23,22,17,.68); border-radius: 2px; background: rgba(246,193,55,.55); box-shadow: inset 0 0 0 1px rgba(255,232,151,.28); font: 800 8px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.available i { width: 6px; height: 6px; border-radius: 50%; background: #c93620; box-shadow: 0 0 0 1px rgba(23,22,17,.3); }
.camera-meta { font: 600 7px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; opacity: .72; }.camera-meta b { font: inherit; }

.identity { position: relative; z-index: 2; align-self: start; padding: clamp(8px, 1.6vh, 14px) 0 5px; color: #efbd36; }
.identity p { margin: 0 0 5px; color: #f1d17b; font: 800 clamp(7px, 2.25vw, 9px)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.identity h1 { width: max-content; max-width: 100%; margin: 0 0 0 -.035em; font-family: "Arial Narrow", "Helvetica Neue Condensed", Arial, Helvetica, sans-serif; font-size: clamp(76px, 26vw, 124px); font-weight: 900; line-height: .72; letter-spacing: -.025em; white-space: nowrap; }

.action-panel { position: relative; z-index: 2; align-self: start; }
.primary-actions { display: grid; grid-template-columns: 1.15fr 1fr; gap: 7px; margin-bottom: 8px; }
.view-work, .save-contact { min-height: clamp(44px, 6.3vh, 52px); padding: 0 14px; border-radius: 100px; display: flex; align-items: center; justify-content: space-between; text-transform: uppercase; font-size: 9px; font-weight: 900; letter-spacing: .045em; cursor: pointer; }
.view-work { background: #efbd36; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(23,22,17,.25); }.save-contact { border: 1px solid #ff5148; background: #e2231a; color: #fff; box-shadow: inset 0 0 0 1px rgba(70,0,0,.3), 0 5px 16px rgba(226,35,26,.25); transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }.save-contact:hover { background: #ef2b21; box-shadow: inset 0 0 0 1px rgba(70,0,0,.25), 0 7px 20px rgba(226,35,26,.34); }.save-contact:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }.save-contact:active { transform: translateY(1px) scale(.985); box-shadow: inset 0 2px 5px rgba(70,0,0,.45), 0 2px 8px rgba(226,35,26,.2); }.view-work span { font-size: 16px; }.save-contact span { position: relative; width: 29px; height: 29px; flex: 0 0 29px; overflow: hidden; border: 2px solid rgba(255,255,255,.95); border-radius: 50%; color: transparent; box-shadow: inset 0 0 0 3px #e2231a, inset 0 0 0 5px rgba(255,255,255,.82), 0 0 0 1px rgba(100,0,0,.25); }.save-contact span::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.quick-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 5px; border: 1px solid #30302c; border-radius: 5px; background: #11110f; box-shadow: inset 0 1px 5px rgba(0,0,0,.8); }
.quick-links a { position: relative; min-width: 0; height: clamp(57px, 7.8vh, 66px); padding: 7px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid #747c6c; border-radius: 4px; background: linear-gradient(145deg, #c8d1b9, #aeb9a3); color: #172018; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -3px 7px rgba(43,54,40,.16), 0 1px 0 #3a3b35; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .18s ease, box-shadow .18s ease, transform .14s ease; }
.quick-links a::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .13; background-image: repeating-linear-gradient(0deg, transparent 0 3px, #263025 3px 4px), repeating-linear-gradient(90deg, transparent 0 7px, #263025 7px 8px); }.quick-links a:hover { z-index: 1; background: linear-gradient(145deg, #dce5ce, #bdc8b0); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 0 -3px 7px rgba(43,54,40,.12), 0 0 0 1px var(--acid); }.quick-links a:focus-visible { z-index: 1; outline: 2px solid var(--acid); outline-offset: 2px; }.quick-links a:active { transform: translateY(1px) scale(.975); background: #a7b39d; box-shadow: inset 0 2px 6px rgba(32,42,30,.28); }.link-icon { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; color: #162018; }.link-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }.link-icon svg .icon-dot { fill: currentColor; stroke: none; }.link-icon em { font: 900 9px/1 var(--mono); font-style: normal; letter-spacing: .08em; }.quick-links b { position: relative; z-index: 1; overflow: hidden; color: #111811; font: 900 clamp(8px, 2.45vw, 10px)/1 var(--mono); letter-spacing: -.055em; text-overflow: ellipsis; text-transform: uppercase; }
.action-panel footer { height: 24px; display: flex; align-items: flex-end; justify-content: space-between; color: #171611; font: 800 6px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .82; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translate(-50%, 25px); opacity: 0; padding: 11px 16px; border-radius: 100px; background: var(--paper); color: var(--ink); font: 700 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; pointer-events: none; transition: .25s ease; }.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes focus-lock { 0% { transform: scale(2.2); opacity: 0; } 55% { transform: scale(.78); opacity: 1; } 75% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes flash { 0%, 10% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }

@media (max-height: 680px) {
  .card { padding-top: max(10px, env(safe-area-inset-top)); grid-template-rows: 28px 10px auto auto minmax(0, 1fr); gap: 3px; }
  .available { min-height: 25px; }.viewfinder { inset: 11px 0 13px; }.silhouette { top: 13%; height: 49%; }
  .identity { padding: 6px 0 3px; }.identity h1 { font-size: clamp(68px, 23vw, 94px); }.identity p { margin-bottom: 3px; }
  .primary-actions { margin-bottom: 6px; }.action-panel footer { height: 18px; }.quick-links a { padding-top: 7px; }
  .film-frame { width: min(68%, 275px); padding: 16px 10px 18px; }.film-edge { left: 10px; right: 10px; font-size: 5px; }.film-edge-top { top: 6px; }.film-edge-bottom { bottom: 7px; }
}
@media (max-height: 540px) { .film-frame { width: min(48%, 205px); padding-top: 13px; padding-bottom: 15px; }.film-edge { font-size: 4px; }.film-edge-top { top: 5px; }.film-edge-bottom { bottom: 6px; } }
@media (min-width: 760px) { body { display: grid; place-items: center; }.card { border-left: 1px solid #2b2b27; border-right: 1px solid #2b2b27; } }
@media (prefers-reduced-motion: reduce) { .intro, .flash { display: none; }.ticker-track { animation: none; } * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }