@font-face { font-family:"Montserrat"; font-style:normal; font-weight:300 500; font-display:swap; src:url("/assets/fonts/montserrat-latin-var.woff2") format("woff2"); }
/* Shared social navigation and artwork banner on both pages. */
:root { --gutter: clamp(16px, 4vw, 56px); --ease: cubic-bezier(0.16, 1, 0.3, 1); --brand: "Montserrat", var(--sans); }
.profile-links { display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; margin-right:auto; }
.profile-links a { display:inline-flex; align-items:center; gap:6px; min-height:40px; font:400 12px/1.3 var(--sans); text-decoration:none; white-space:nowrap; }
.profile-links .ico { width:15px; height:15px; fill:currentColor; flex:none; }
.topbar { padding:16px var(--gutter); flex-wrap:wrap; }
.topbar .presentation-links { display:flex; gap:20px; }
.nav-bar { flex-wrap:wrap; }
.hero { padding:0; }
button.hero-art { border:0; padding:0; background:transparent; cursor:zoom-in; color:inherit; }
button.hero-art:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.hero-copy p { color:inherit; }
@media(max-width:1100px) { .nav-bar .tabs { flex-basis:100%; } }
@media(max-width:767px) {
.profile-links { gap:0 12px; }
.profile-links a { font-size:11px; }
.topbar .profile-links { gap:0 12px; }
.topbar .presentation-links { width:100%; justify-content:space-between; gap:12px; }
.topbar .presentation-links a { font-size:12px; }
}
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  height: clamp(340px, 36vw, 520px);
  background: radial-gradient(ellipse 60% 90% at 30% 50%, #0f0d0c 0%, transparent 70%), url("/assets/brand/hero-texture.svg?v=890f4aee") center / cover, #110f0d;
  border-bottom: 1px solid var(--line);
}
.hero-art { position: absolute; top: 0; bottom: 0; right: var(--gutter); width: calc(56% - var(--gutter)); }
.hero-art img {
  position: absolute; top: 0; right: 0; bottom: 0; margin: auto 0;
  width: 100%; height: 100%; object-fit: contain; object-position: center; max-width: 100%; max-height: 100%;
  -webkit-mask:
    linear-gradient(transparent, #000 7%, #000 93%, transparent),
    url("/assets/brand/hero-edge.svg?v=17439d66") 0 0 / 50% 100% no-repeat,
    linear-gradient(#000, #000) 100% 0 / 50.5% 100% no-repeat;
  -webkit-mask-composite: source-in, source-over;
  mask:
    linear-gradient(transparent, #000 7%, #000 93%, transparent),
    url("/assets/brand/hero-edge.svg?v=17439d66") 0 0 / 50% 100% no-repeat,
    linear-gradient(#000, #000) 100% 0 / 50.5% 100% no-repeat;
  mask-composite: intersect, add;
  opacity: 0; transform: scale(1.04); transform-origin: 100% 50%;
  transition: opacity 1.6s var(--ease), transform 9s linear;
}
.hero-art img.on { opacity: 1; transform: none; }
.hero-art img:not([src]) { display: none; }
.hero-copy {
  position: relative; z-index: 1; height: 100%; width: 44%;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 0 0 0 var(--gutter); text-align: left;
}
.hero-mark { width: min(100%, 460px); height: auto; }
.hero-by {
  margin: clamp(12px, 1.4vw, 20px) 0 0;
  font: 400 clamp(0.625rem, 1.15vw, 1.0625rem)/1 var(--brand); letter-spacing: 0.34em; text-transform: uppercase;
}
.hero-url {
  margin: clamp(10px, 1.2vw, 16px) 0 0;
  font: 400 clamp(0.6875rem, 1vw, 0.9375rem)/1 var(--brand); letter-spacing: 0.3em; color: #b9b0a3;
}
.hero-url::before {
  content: ""; display: block; width: clamp(70px, 11vw, 170px); height: 1px; margin: 0 0 clamp(10px, 1.2vw, 16px);
  background: linear-gradient(90deg, #b9b0a3 0%, #b9b0a3 60%, transparent);
}


@media(max-width:767px) {
  .hero { height: clamp(220px, 62vw, 320px); }
  .hero-art { top: 0; bottom: 0; width: calc(50% - var(--gutter)); }
  .hero-copy { width: 50%; padding-right: 10px; }
  .hero-by { letter-spacing: 0.24em; }
  .hero-url { letter-spacing: 0.16em; }
}
@media(prefers-reduced-motion:reduce) { .hero-art img { transition:none; transform:none; } }

/* The showcase uses the same site navigation as the homepage. */
.nav { --fg:#ece5d9; --dim:#8f8578; position:sticky;top:0;z-index:6;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line); }
.nav .nav-bar { display:flex;align-items:center;gap:clamp(14px,3vw,32px);padding:16px var(--gutter); }
.nav .tabs { display:flex;align-items:center;gap:clamp(14px,3vw,32px); }
.nav .tabs a,.nav .nav-years a { text-decoration:none;color:var(--dim);transition:color .3s var(--ease); }
.nav .tabs a { font-size:.875rem;text-underline-offset:7px;text-decoration-thickness:1px; }
.nav .tabs a:hover,.nav .nav-years a:hover { color:var(--fg); }
.nav .tabs a[aria-current="page"] { color:var(--fg);text-decoration:underline;text-decoration-color:var(--accent); }
.nav .nav-years { display:flex;gap:12px;padding:10px var(--gutter) 12px;border-top:1px solid var(--line);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none; }
.nav .nav-years[hidden] { display:none; }
.nav .nav-years a { font:400 .8125rem/1.6 var(--mono);padding:2px 0;white-space:nowrap; }
.nav .nav-years-data { display:contents; }
.contest-sections { display:flex;flex-wrap:wrap;gap:20px;padding:16px var(--gutter);border-bottom:1px solid var(--line);font-size:13px; }
.contest-sections a { text-decoration:none; }
@media(max-width:767px) {
.nav .nav-bar { row-gap:0;padding-bottom:0; }
.nav .tabs { order:3;flex:0 0 calc(100% + 2 * var(--gutter));margin:14px calc(-1 * var(--gutter)) 0;justify-content:space-between;gap:12px;padding:6px var(--gutter);border-top:1px solid var(--line); }
.nav .tabs a { font-size:.8125rem;padding:6px 0; }
}
@media(max-width:399px) { .nav .tabs { flex-wrap:wrap; justify-content:flex-start; column-gap:16px; } }
/* tap targets: header links are at least 44px tall */
.nav .tabs a, .profile-links a { min-height:44px; display:inline-flex; align-items:center; }