/* Gallery layer: the original coal / fire palette and four photos stay intact. */
:root { color-scheme:dark; }
a { color:var(--gold); }
button, input, a { -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:default; }
:focus-visible { outline:3px solid var(--gold); outline-offset:5px; }
.skip { position:fixed; top:10px; left:10px; transform:translateY(-160%); z-index:20; padding:12px; background:var(--coal); }
.skip:focus { transform:none; }
h2 { font:400 clamp(20px,3vw,28px)/1.25 Bungee,Rubik,sans-serif; margin:0; }
.eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:var(--gold); margin:0 0 30px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.small { font-size:14px; color:var(--mut); }
.pill { font-size:12px; color:var(--gold); border:1px solid var(--line); border-radius:99px; padding:5px 10px; display:inline-block; }
.gallery { margin-top:26px; }
.gallery figure { aspect-ratio: .86; }
.gallery figcaption { padding:0; inset:0; background:linear-gradient(transparent 25%,rgba(0,0,0,.93)); font-family:Rubik,system-ui,sans-serif; }
.photo-card { width:100%; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; text-align:left; background:transparent; box-shadow:none; padding:16px 12px; color:var(--fg); border-radius:12px; }
.photo-card:hover,.photo-card:active { transform:none; box-shadow:none; background:linear-gradient(transparent,rgba(255,77,26,.14)); }
.photo-card:focus-visible { outline-offset:-6px; }
.photo-name { font:400 clamp(18px,2.5vw,25px)/1.2 Bungee,sans-serif; overflow-wrap:anywhere; }
.photo-meta { font:500 12px/1.5 Rubik,system-ui,sans-serif; color:var(--gold); margin-top:9px; }
.gallery figure:focus-within { transform:rotate(0); border-color:var(--gold); }
#catalog { scroll-margin-top:20px; padding-top:18px; }
.search-label { font:500 14px/1.5 Rubik,system-ui,sans-serif; margin:20px 0 8px; }
input[type=search] { width:100%; border:2px solid var(--line); border-radius:12px; color:var(--fg); background:#0c0806; font:16px/1.5 Rubik,system-ui,sans-serif; padding:13px 16px; }
input::placeholder { color:var(--mut); }
.catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.catalog-card { display:flex; flex-direction:column; gap:9px; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:14px; color:var(--fg); box-shadow:none; padding:18px; font:400 14px/1.5 Rubik,system-ui,sans-serif; min-width:0; }
.catalog-card:hover { border-color:var(--ember); background:#291a12; }
.catalog-card:active { transform:none; box-shadow:none; }
.catalog-name { font:400 18px/1.3 Bungee,sans-serif; overflow-wrap:anywhere; }
.catalog-meta { font-size:12px; color:var(--mut); }
.catalog-headline { flex:1; }
.catalog-cta { color:var(--gold); font-weight:700; margin-top:6px; }
.custom-idea { margin-top:48px; }
.custom-idea h2 { margin-top:18px; }
.custom-idea p { position:relative; }
.action { display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding:10px 14px; background:var(--gold); color:#2a0b00; border-radius:10px; text-decoration:none; font-weight:700; font-size:14px; position:relative; }
.action:hover { background:var(--ember); }
.action.secondary { background:#352216; color:var(--gold); border:1px solid #735036; }
footer { color:var(--mut); }
dialog { width:min(840px,calc(100% - 24px)); max-height:90vh; max-height:90dvh; border:2px solid #794326; border-radius:20px; background:var(--coal); color:var(--fg); padding:24px; overscroll-behavior:contain; }
dialog::backdrop { background:rgba(0,0,0,.82); }
body:has(dialog[open]) { overflow:hidden; }
.dialog-top { display:flex; align-items:center; justify-content:space-between; gap:14px; position:sticky; top:0; z-index:3; background:var(--coal); padding:8px 0; box-shadow:0 -24px 0 var(--coal),0 8px 12px var(--coal); }
#detail-title { margin:24px 0 8px; }
#detail-content p { white-space:pre-line; overflow-wrap:anywhere; }
#detail-content h3 { margin-top:25px; }
.detail-meta { color:var(--gold); font-weight:700; }
.scope { border-left:3px solid var(--ember); background:#24160e; padding:14px 18px; margin:22px 0; }
.scope h3 { margin-top:0!important; }
summary { cursor:pointer; color:var(--gold); padding:12px 0; }
.disclaimer { border-top:1px solid var(--line); padding-top:18px; }
#skill-text { user-select:text; }
@media(max-width:700px) { .photo-name.long-name { font-size:15px; } .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .wrap { padding-top:28px; } dialog { padding:18px; } }
@media(max-width:400px) { .catalog-grid { grid-template-columns:1fr; } .photo-card { padding:12px 9px; } .photo-meta { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after { animation-play-state:paused!important; }