@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@100..900&family=Space+Mono:wght@400;700&display=swap");

:root { --ol-ease: cubic-bezier(.2,.7,.2,1); --ol-fast: 180ms; --ol-slow: 420ms; }

/* Button: bitmap. Density steps inward, all INSIDE the button box so it sits on the grid: outer ring 6%, ring 25%, body 50%, core 100%. Rings are the (transparent) border; every size is a multiple of the pixel. */
.ol-btn { --bm-c:var(--cobalt); --bm-px:var(--bitmap-px, 4px); --bm-e:calc(var(--bm-px) * 2);
  position:relative; isolation:isolate; box-sizing:border-box; display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; height:56px; padding:0 32px; border:calc(var(--bm-px) * 2) solid transparent; border-radius:var(--radius-0); cursor:pointer; color:var(--on-cobalt); background-color:transparent; background-clip:padding-box; background-origin:padding-box;
  background-image:linear-gradient(var(--bm-c), var(--bm-c)), conic-gradient(var(--bm-c) 25%, transparent 0 50%, var(--bm-c) 0 75%, transparent 0);
  background-repeat:no-repeat, repeat;
  background-position:center, 0 0;
  background-size:calc(100% - var(--bm-e) * 4) calc(100% - var(--bm-e) * 2), calc(var(--bm-px) * 2) calc(var(--bm-px) * 2);
  transition:background-size var(--ol-slow) steps(3, end), transform var(--ol-fast) var(--ol-ease); }
.ol-btn::before, .ol-btn::after { content:""; position:absolute; z-index:-1; pointer-events:none; box-sizing:border-box; padding:var(--bm-px); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); transition:opacity var(--ol-fast); }
.ol-btn::before { inset:calc(var(--bm-px) * -1); background-image:conic-gradient(at var(--bm-px) var(--bm-px), transparent 75%, var(--bm-c) 0); background-size:calc(var(--bm-px) * 2) calc(var(--bm-px) * 2); background-position:var(--bm-px) var(--bm-px); }
.ol-btn::after { inset:calc(var(--bm-px) * -2); background-image:conic-gradient(at var(--bm-px) var(--bm-px), transparent 75%, var(--bm-c) 0); background-size:calc(var(--bm-px) * 4) calc(var(--bm-px) * 4); }
.ol-btn--sm { height:44px; padding:0 20px; font-size:11px; --bm-px:3px; }
.ol-btn--primary { --bm-c:var(--cobalt); color:var(--on-cobalt); }
.ol-btn--signal { --bm-c:var(--signal-orange); color:var(--on-accent); }
.ol-btn--ghost { --bm-c:var(--sky); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); background-size:0 0, 0 0; }
.ol-btn--ghost::before, .ol-btn--ghost::after { opacity:0; }
.ol-btn:hover { background-size:100% 100%, calc(var(--bm-px) * 2) calc(var(--bm-px) * 2); }
.ol-btn--ghost:hover { background-size:0 0, calc(var(--bm-px) * 2) calc(var(--bm-px) * 2); }
.ol-btn--ghost:hover::before, .ol-btn--ghost:hover::after { opacity:1; }
.ol-btn:active { transform:translate(1px,1px); }
.ol-btn:focus-visible, .ol-card:focus-visible, .ol-nav a:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.ol-btn__arrow { font-family:var(--font-sans); font-size:16px; letter-spacing:0; transition:transform var(--ol-fast) var(--ol-ease); }
.ol-btn:hover .ol-btn__arrow { transform:translateX(3px); }

/* Sticker */
.ol-sticker { display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; line-height:1; padding:6px 10px; border-radius:var(--radius-pill); border:1.5px solid var(--ink); color:var(--on-accent); box-shadow:var(--shadow-sticker-sm); white-space:nowrap; }
.ol-sticker--mustard { background:var(--mustard); }
.ol-sticker--sky { background:var(--sky); }
.ol-sticker--orange { background:var(--signal-orange); }
.ol-sticker--cream { background:var(--cream); }
.ol-sticker--paper { background:var(--paper); }
.ol-sticker--cobalt { background:var(--cobalt); color:var(--on-cobalt); }

/* HoverText */
.ol-ht { cursor:default; }
.ol-ht__w { display:inline-block; white-space:nowrap; }
.ol-ht__l { display:inline-block; transition:font-weight var(--ol-slow) var(--ol-ease), color var(--ol-slow) var(--ol-ease), transform var(--ol-slow) var(--ol-ease); }
.ol-ht--swell .ol-ht__l:hover { font-weight:900; color:var(--ht-tone); transform:translateY(-.04em); transition-duration:120ms; }
.ol-ht--swell .ol-ht__l:hover + .ol-ht__l, .ol-ht--swell .ol-ht__l:has(+ .ol-ht__l:hover) { font-weight:800; color:var(--ht-tone); transition-duration:160ms; }
.ol-ht--marker { background-image:linear-gradient(var(--ht-tone), var(--ht-tone)); background-repeat:no-repeat; background-position:0 88%; background-size:0% 38%; transition:background-size var(--ol-slow) var(--ol-ease); padding:0 .06em; }
.ol-ht--marker:hover, a:hover > .ol-ht--marker, a:focus-visible > .ol-ht--marker, .ol-card:hover .ol-ht--marker, .ol-card:focus-visible .ol-ht--marker { background-size:100% 38%; }
.ol-ht--slide { position:relative; display:inline-block; overflow:hidden; vertical-align:bottom; }
.ol-ht--slide .ol-ht__a, .ol-ht--slide .ol-ht__b { display:block; transition:transform var(--ol-slow) var(--ol-ease); }
.ol-ht--slide .ol-ht__b { position:absolute; left:0; top:0; transform:translateY(105%); color:var(--ht-tone); font-weight:900; }
.ol-ht--slide:hover .ol-ht__a, a:hover > .ol-ht--slide .ol-ht__a { transform:translateY(-105%); }
.ol-ht--slide:hover .ol-ht__b, a:hover > .ol-ht--slide .ol-ht__b { transform:translateY(0); }
@media (prefers-reduced-motion: reduce) { .ol-ht__l, .ol-ht--marker, .ol-ht__a, .ol-ht__b, .ol-btn, .ol-btn::before, .ol-btn::after { transition:none; } }

/* Halftone */
.ol-halftone { position:relative; overflow:hidden; background:var(--ht-base); isolation:isolate; }
.ol-halftone::before { content:""; position:absolute; inset:0; z-index:-1; background-image:radial-gradient(circle at center, var(--ht-tone) 0 var(--halftone-dot), transparent calc(var(--halftone-dot) + .6px)); background-size:var(--ht-pitch) var(--ht-pitch); }
.ol-halftone--down::before { -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 45%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 45%, transparent 100%); }
.ol-halftone--radial::before { -webkit-mask-image:radial-gradient(ellipse 60% 70% at 35% 45%, #000 0 30%, transparent 75%); mask-image:radial-gradient(ellipse 60% 70% at 35% 45%, #000 0 30%, transparent 75%); }
.ol-halftone--wave::before { -webkit-mask-image:radial-gradient(ellipse 22% 60% at 15% 30%, #000 0 35%, transparent 70%), radial-gradient(ellipse 20% 55% at 50% 70%, #000 0 35%, transparent 70%), radial-gradient(ellipse 22% 60% at 85% 35%, #000 0 35%, transparent 70%); mask-image:radial-gradient(ellipse 22% 60% at 15% 30%, #000 0 35%, transparent 70%), radial-gradient(ellipse 20% 55% at 50% 70%, #000 0 35%, transparent 70%), radial-gradient(ellipse 22% 60% at 85% 35%, #000 0 35%, transparent 70%); }
.ol-halftone--grain::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.22; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ol-halftone__inner { position:relative; height:100%; }

/* GridLines */
.ol-grid { position:relative; }
.ol-grid__lines { position:absolute; inset:0; pointer-events:none; display:grid; z-index:0; }
.ol-grid--vertical > .ol-grid__lines { grid-template-columns:repeat(var(--ol-n), 1fr); }
.ol-grid--horizontal > .ol-grid__lines { grid-template-rows:repeat(var(--ol-n), 1fr); }
.ol-grid--vertical > .ol-grid__lines > i { border-left:var(--rule-width) solid var(--rule); }
.ol-grid--vertical > .ol-grid__lines > i:last-child { border-right:var(--rule-width) solid var(--rule); }
.ol-grid--horizontal > .ol-grid__lines > i { border-top:var(--rule-width) solid var(--rule); }
.ol-grid--horizontal > .ol-grid__lines > i:last-child { border-bottom:var(--rule-width) solid var(--rule); }
.ol-grid__content { position:relative; z-index:1; }

/* SectionLabel */
.ol-label { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3); padding-bottom:var(--space-2); border-bottom:1.5px solid var(--ink); font-family:var(--font-mono); color:var(--ink); }
.ol-label__text { font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.ol-label__index { font-size:13px; letter-spacing:.04em; color:var(--ink-muted); }
.ol-label__text--cobalt { color:var(--cobalt); }

/* ProjectCard */
.ol-card { display:block; color:var(--ink); text-decoration:none; }
.ol-card__media { position:relative; aspect-ratio:4 / 3; background:var(--cream); overflow:hidden; border:var(--rule-width) solid var(--rule); transition:transform var(--ol-fast) var(--ol-ease), box-shadow var(--ol-fast) var(--ol-ease); }
.ol-card__media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--ol-slow) var(--ol-ease); }
.ol-card:hover .ol-card__media { transform:translate(-3px,-3px); box-shadow:4px 4px 0 rgba(18,18,18,.22); }
.ol-card:hover .ol-card__media img { transform:scale(1.03); }
.ol-card__tags { position:absolute; left:var(--space-3); top:var(--space-3); display:flex; gap:var(--space-2); flex-wrap:wrap; }
.ol-card__row { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3); margin-top:var(--space-3); }
.ol-card__title { margin:0; font-family:var(--font-sans); font-size:28px; line-height:1.15; font-weight:600; }
.ol-card__meta { font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; color:var(--ink-muted); white-space:nowrap; }

/* Nav */
.ol-nav { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-3) 0; border-bottom:1.5px solid var(--ink); }
.ol-nav__name { font-family:var(--font-sans); font-weight:900; font-size:22px; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.ol-nav__links { display:flex; gap:var(--space-4); list-style:none; margin:0; padding:0; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.ol-nav__links a { color:var(--ink); text-decoration:none; }
.ol-nav__links a[aria-current="page"] { color:var(--cobalt); }