@font-face { font-family: "Archivo Black"; src: url("./assets/archivo-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("./assets/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("./assets/jetbrains-mono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root { --gold:#d4af37; --ink:#050505; --white:#f7f5ee; --line:rgba(247,245,238,.15); --display:"Archivo Black",system-ui,sans-serif; --mono:"JetBrains Mono",monospace; color-scheme:dark; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--ink); color:var(--white); }
body { padding:clamp(20px,4vw,60px); font-family:var(--display); }
.gallery-header { max-width:1440px; margin:0 auto clamp(32px,5vw,68px); display:grid; grid-template-columns:150px minmax(320px,1fr) minmax(240px,420px); gap:clamp(20px,4vw,70px); align-items:end; }
.brand { display:flex; align-items:center; gap:12px; font-size:20px; }
.mark { width:27px; height:27px; border:2px solid var(--gold); rotate:45deg; position:relative; }
.mark::after { content:""; position:absolute; inset:8px; background:var(--gold); }
.gallery-header small,.concept-card small,footer { font-family:var(--mono); }
.gallery-header small { color:var(--gold); font-size:9px; letter-spacing:.18em; }
h1 { margin:13px 0 0; font-size:clamp(30px,4.3vw,68px); line-height:.92; letter-spacing:-.04em; }
.gallery-header p { margin:0; color:rgba(247,245,238,.58); font:400 10px/1.7 var(--mono); }
.concept-grid { max-width:1440px; margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.concept-card { position:relative; min-height:280px; display:grid; grid-template-columns:100px 1fr; grid-template-rows:1fr auto; gap:20px; padding:clamp(20px,3vw,42px); color:inherit; text-decoration:none; border-right:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; transition:background 120ms linear,color 120ms linear; }
.concept-card::after { content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform 180ms ease-out; }
.concept-card:hover { background:#0d0d0d; }
.concept-card:hover::after { transform:scaleX(1); }
.letter { font-size:86px; line-height:.8; color:var(--gold); }
.concept-card small { color:rgba(247,245,238,.48); font-size:8px; letter-spacing:.16em; }
.concept-card h2 { margin:9px 0 13px; font-size:clamp(24px,3vw,46px); line-height:.9; }
.concept-card p { max-width:480px; margin:0; color:rgba(247,245,238,.58); font:400 9px/1.6 var(--mono); }
.concept-card>b { grid-column:2; justify-self:start; color:var(--gold); font:700 8px/1 var(--mono); letter-spacing:.11em; }
footer { max-width:1440px; margin:22px auto 0; display:flex; justify-content:space-between; gap:20px; color:rgba(247,245,238,.42); font-size:8px; letter-spacing:.12em; }
footer b { color:var(--gold); }
@media(max-width:800px){ body{padding:18px}.gallery-header{grid-template-columns:1fr;gap:22px}.brand{order:-1}.concept-grid{grid-template-columns:1fr}.concept-card{min-height:230px;grid-template-columns:70px 1fr;padding:24px 18px}.letter{font-size:60px}.gallery-header p{max-width:520px}footer{flex-direction:column}}