/* Personal project directory.
 * Uses a compact script-free layout for Achille's independent project index.
 */
@font-face { font-family: 'Space Grotesk'; src: url('./assets/fonts/space-grotesk.ttf') format('truetype'); font-style: normal; font-weight: 300 700; font-display: swap; }
@font-face { font-family: Manrope; src: url('./assets/fonts/manrope.ttf') format('truetype'); font-style: normal; font-weight: 200 800; font-display: swap; }
:root { color-scheme: light; --paper:#edf0ee; --ink:#192322; --muted:#586460; --line:#bdc8c1; --orange:#ed5129; --display:'Space Grotesk',Arial,sans-serif; --body:Manrope,'Segoe UI',sans-serif; --mono:'SFMono-Regular',Consolas,monospace; --gutter:clamp(1.25rem,4vw,4rem); --width:1120px; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font:1rem/1.65 var(--body); -webkit-font-smoothing:antialiased; } h1,h2,h3,p { margin:0; } h1,h2,h3 { font-family:var(--display); } a { color:inherit; text-decoration:none; } a:focus-visible { outline:3px solid #ad3013; outline-offset:5px; } .wrap { width:min(var(--width),calc(100% - var(--gutter) * 2)); margin-inline:auto; } .skip-link { position:fixed; transform:translateY(-160%); top:1rem; left:1rem; padding:1rem; background:var(--ink); color:var(--paper); } .skip-link:focus { transform:none; }
.site-header,.site-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:82px; border-bottom:1px solid var(--line); font-size:.875rem; }.site-footer { border-top:1px solid var(--line); border-bottom:0; color:var(--muted); }.brand { display:inline-flex; align-items:center; gap:.8rem; font-weight:650; }.roubiniol-mark { display:block; width:2rem; height:2rem; fill:var(--orange); }.github { padding:.75rem 0; }.github span { margin-left:.5rem; font-size:1.2rem; }.intro { padding:clamp(3.5rem,6vw,5.5rem) 0 clamp(3rem,5vw,4.5rem); border-bottom:1px solid var(--ink); }.eyebrow,.project-status { font:.75rem/1.5 var(--mono); letter-spacing:.065em; }.eyebrow { color:#ad3013; }.intro h1 { max-width:900px; margin-top:1.35rem; font-size:clamp(3.7rem,7vw,5.75rem); line-height:.9; letter-spacing:-.075em; font-weight:500; }.intro p:last-child { max-width:26rem; margin-top:2rem; color:var(--muted); }.directory { padding:clamp(2.5rem,4vw,4rem) 0; }.directory-heading { display:grid; grid-template-columns:.8fr 1.2fr; gap:2rem; margin-bottom:2rem; }.directory h2 { font-size:clamp(2rem,4vw,3.5rem); font-weight:400; line-height:1.05; letter-spacing:-.045em; }.project { display:grid; grid-template-columns:clamp(5rem,12vw,8rem) minmax(0,1fr) auto; gap:clamp(1.5rem,5vw,4rem); align-items:center; padding:clamp(2rem,5vw,4rem); border:1px solid var(--ink); background:#f4f6f4; }.project-mark { display:grid; place-items:center; width:100%; aspect-ratio:1; background:var(--orange); color:var(--ink); }.project-mark .atlas-symbol { width:70%; height:70%; }.project-status { color:#ad3013; }.project h3 { margin-top:.35rem; font-size:clamp(2rem,4.4vw,4rem); line-height:1; font-weight:500; letter-spacing:-.055em; }.project-copy > p:last-child { max-width:32rem; margin-top:1rem; color:var(--muted); }.project-action { display:inline-flex; align-items:center; gap:.75rem; min-height:44px; padding:.7rem 1rem; background:var(--ink); color:var(--paper); font-size:.875rem; font-weight:700; white-space:nowrap; }.project-action:hover { background:var(--orange); color:var(--ink); }
.atlas-symbol .symbol-ink { fill:var(--ink); }.atlas-symbol .symbol-soft { fill:var(--paper); }.atlas-symbol .symbol-accent { fill:var(--orange); }.atlas-symbol .symbol-line { fill:none; stroke:var(--ink); stroke-width:2.2; }.contact-link { text-decoration:underline; text-underline-offset:.2em; }
/* The fist remains visible against the orange project tile. */
.project-mark .symbol-accent { fill:#f7b19d; stroke:var(--ink); stroke-width:2.2; }
@media (max-width:44rem) { .directory-heading,.project { grid-template-columns:1fr; }.project { gap:1.5rem; }.project-mark { width:5.5rem; }.project-action { justify-self:start; }.site-footer { align-items:flex-start; flex-direction:column; padding-block:1.25rem; } }
@media (max-width:25rem) { .intro h1 { font-size:clamp(2.6rem,12.5vw,3.125rem); } }