@font-face { font-family: "Beethoven"; src: url("/Beethoven.ttf") format("truetype"); font-display: swap; }
:root { --ink:#17141d; --paper:#f4ecdc; --coral:#ff4f5e; --cyan:#12c8ec; --yellow:#ffc940; --wine:#7a143f; --muted:#544d57; --display:"Beethoven","Bungee",Impact,sans-serif; font-family:"Outfit",system-ui,sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background-color:var(--paper); background-image:radial-gradient(circle,rgba(23,20,29,.075) 0 1px,transparent 1.2px); background-size:6px 6px; }
a { color:inherit; }
img { display:block; max-width:100%; }
.project-header,.project-shell,.project-footer { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.project-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0; border-bottom:3px solid var(--ink); }
.project-brand { display:inline-flex; align-items:center; gap:12px; font-weight:900; text-decoration:none; text-transform:uppercase; letter-spacing:.08em; }
.project-brand img { width:48px; height:48px; object-fit:contain; }
.project-back { font-weight:800; text-decoration-thickness:3px; text-decoration-color:var(--coral); text-underline-offset:6px; }
.project-shell { padding:clamp(58px,8vw,112px) 0 80px; }
.project-eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 18px; font-size:.78rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.project-eyebrow::before { content:""; width:48px; height:6px; background:var(--coral); }
h1 { max-width:950px; margin:0; font-family:var(--display); font-size:clamp(3.8rem,11vw,8.8rem); font-weight:400; line-height:.88; text-transform:uppercase; }
.project-role { margin:24px 0 42px; color:var(--wine); font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.project-hero { position:relative; border:4px solid var(--ink); box-shadow:12px 12px 0 var(--coral),-8px -8px 0 var(--cyan); overflow:hidden; }
.project-hero img { width:100%; max-height:760px; object-fit:cover; }
.project-body { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(250px,.7fr); gap:clamp(38px,7vw,100px); padding-top:clamp(54px,8vw,96px); }
.project-copy h2 { margin:0 0 20px; font-family:var(--display); font-size:clamp(2rem,5vw,4rem); font-weight:400; text-transform:uppercase; }
.project-copy p { max-width:720px; margin:0; color:var(--muted); font-size:clamp(1.05rem,2vw,1.25rem); line-height:1.75; }
.project-details { align-self:start; padding:26px; border:3px solid var(--ink); background:rgba(255,255,255,.34); box-shadow:8px 8px 0 var(--yellow); }
.project-details h2 { margin:0 0 16px; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; }
.project-tags { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; padding:0; list-style:none; }
.project-tags li { padding:7px 10px; border:2px solid var(--ink); background:var(--paper); font-size:.78rem; font-weight:800; }
.project-cta { display:inline-flex; align-items:center; justify-content:center; width:100%; padding:16px 20px; border:3px solid var(--ink); background:var(--coral); box-shadow:5px 5px 0 var(--ink); font-weight:900; text-decoration:none; }
.project-cta:hover,.project-cta:focus-visible { background:var(--cyan); }
.project-footer { display:flex; justify-content:space-between; gap:20px; padding:26px 0 38px; border-top:3px solid var(--ink); font-size:.85rem; font-weight:700; }
:focus-visible { outline:3px solid var(--coral); outline-offset:5px; }
@media (max-width:760px) { .project-header,.project-shell,.project-footer { width:min(100% - 28px,1180px); } .project-header { padding:16px 0; } .project-brand span { display:none; } .project-shell { padding-top:50px; } h1 { font-size:clamp(3.35rem,19vw,6rem); } .project-hero { box-shadow:7px 7px 0 var(--coral),-5px -5px 0 var(--cyan); } .project-body { grid-template-columns:1fr; } .project-footer { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }