/* bungeetaco.com — Frutiger Aero over a real field: one Aero-glass slab, Windows-7-grade glass, on a photograph. */
@font-face { font-family: "Selawik"; font-weight: 400; src: url("../fonts/selawik-regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Selawik"; font-weight: 600; src: url("../fonts/selawik-semibold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Selawik"; font-weight: 700; src: url("../fonts/selawik-bold.woff2") format("woff2"); font-display: swap; }

:root {
  --glass: rgba(150, 196, 236, .46);      /* Aero's default blue tint */
  --pane: rgba(255, 255, 255, .5);
  --ink: #0b2440; --ink-2: #163a5c; --aqua: #4fd1ff;
  color-scheme: light; accent-color: var(--aqua);
}
* { box-sizing: border-box; }
html { height: 100%; scrollbar-width: thin; scrollbar-color: rgba(14,42,70,.35) transparent; }
body {
  margin: 0; min-height: 100svh; font: 400 15px/1.5 "Selawik", "Segoe UI", system-ui, sans-serif; color: var(--ink);
  background: #4a9fe0 url("../img/field-2560.jpg") center 62% / cover no-repeat;
  background-image: image-set(url("../img/field-2560.webp") type("image/webp"), url("../img/field-2560.jpg") type("image/jpeg"));
  display: grid; place-items: center; padding: 48px 16px 18vh; position: relative; overflow-x: hidden;
}
::selection { background: var(--aqua); color: #fff; }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }

/* Light on the photograph: a sun bloom at the top right and a soft vignette; nothing animated on the picture itself. */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60vmin 60vmin at 88% -6%, rgba(255,250,225,.85), rgba(255,250,225,.35) 30%, rgba(255,250,225,0) 62%),
    radial-gradient(120% 90% at 50% 40%, rgba(0,20,60,0) 55%, rgba(0,20,60,.28) 100%); }
.flare { position: absolute; border-radius: 50%; }
.flare.f1 { width: 16vmin; height: 16vmin; right: 24vw; top: 16vh; background: radial-gradient(circle, rgba(255,255,255,0) 56%, rgba(220,245,255,.55) 61%, rgba(220,245,255,0) 69%); }
.flare.f2 { width: 6vmin; height: 6vmin; right: 33vw; top: 29vh; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(200,240,255,.3) 55%, rgba(200,240,255,0) 72%); }

/* ---------- The slab: Windows-7 glass. Tinted, blurred, with the reflection streaks and the glowing captions. ---------- */
.slab { position: relative; z-index: 1; width: min(100%, max(860px, min(50vw, 1100px))); border-radius: 14px; padding: 34px 34px 22px;
  background: var(--glass); -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.85),          /* inner bright line */
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(10,40,90,.6),                    /* dark outer frame line */
    0 0 0 2px rgba(255,255,255,.35),                /* outer glass edge */
    0 24px 60px rgba(5,30,70,.55), 0 4px 12px rgba(5,30,70,.35); }
/* Aero streaks: the diagonal reflections Windows 7 painted across every frame */
.slab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 30%, rgba(255,255,255,0) 50%),
    linear-gradient(-32deg, rgba(255,255,255,0) 36%, rgba(255,255,255,.62) 44%, rgba(255,255,255,.1) 49%, rgba(255,255,255,0) 52%),
    linear-gradient(-32deg, rgba(255,255,255,0) 58%, rgba(255,255,255,.42) 64%, rgba(255,255,255,0) 70%),
    linear-gradient(-32deg, rgba(255,255,255,0) 78%, rgba(255,255,255,.28) 83%, rgba(255,255,255,0) 88%); }
.slab > * { position: relative; z-index: 1; }

.head { display: grid; grid-template-columns: 84px 1fr; column-gap: 22px; align-items: center; margin-bottom: 22px; }
.head img { width: 84px; height: 84px; border-radius: 10px; display: block; object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 0 0 1px rgba(10,40,90,.5), 0 8px 18px rgba(5,30,70,.4); }
/* Windows 7 caption glow: the white halo that kept titles legible on any glass */
.head h1 { margin: 0; font-weight: 700; font-size: clamp(2.6rem, 5vw, 4.2rem); letter-spacing: -0.02em; line-height: 1;
  text-shadow: 0 0 14px #fff, 0 0 14px #fff, 0 0 28px rgba(255,255,255,.9), 0 1px 0 #fff; }
.head p { margin: 6px 0 0; font-size: 17px; color: var(--ink-2); text-shadow: 0 0 10px #fff, 0 0 10px #fff; }

/* ---------- Links: one opaque-white pane on the glass, rows lit as Aero selection ---------- */
.links { list-style: none; margin: 0; padding: 7px; border-radius: 8px; background: var(--pane);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), inset 0 1px 0 #fff, 0 0 0 1px rgba(10,40,90,.35), 0 6px 18px rgba(5,30,70,.2); }
.links li + li { margin-top: 2px; }
.links li.sep { height: 1px; margin: 7px 14px; background: linear-gradient(90deg, rgba(11,36,64,0), rgba(11,36,64,.2) 20%, rgba(11,36,64,.2) 80%, rgba(11,36,64,0)); }
.links a { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  padding: 10px 14px; border-radius: 5px; color: var(--ink); text-decoration: none; position: relative; }
.links a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, #f5fbff 0%, #e1f3ff 48%, #c2e6ff 52%, #d6efff 100%);
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #7fb8e8, 0 2px 12px rgba(79,170,230,.45); }
.links a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--near, 0);
  background: radial-gradient(260px 120px at var(--mx, 50%) var(--my, 50%), rgba(120,215,255,.95), rgba(120,215,255,.55) 35%, rgba(120,215,255,0) 72%); }
.links a > * { position: relative; z-index: 1; }
.links svg { width: 44px; height: 44px; grid-row: 1 / 3; display: block; filter: drop-shadow(0 3px 4px rgba(5,30,70,.35)) drop-shadow(0 0 1px rgba(255,255,255,.8)); }
.links .l { font-weight: 600; font-size: 16px; line-height: 1.2; }
.links .w { font-weight: 400; color: var(--ink-2); font-size: 13px; margin-left: 8px; }
.links .d { font-size: 13px; color: var(--ink-2); line-height: 1.35; margin-top: 2px; }
.links a.one { grid-template-rows: auto; padding: 8px 14px; }
.links a.one svg { width: 32px; height: 32px; grid-row: auto; margin-left: 6px; }
.links a:hover::before, .links a:focus-visible::before, .links li.lit a::before { opacity: 1; }
.links a:hover::after { opacity: 0; }
.links:hover li.lit a:not(:hover)::before, .links:focus-within li.lit a:not(:focus-visible)::before { opacity: .3; }
@media (prefers-reduced-motion: no-preference) {
  .links a::before { transition: opacity 140ms ease-out; }
  .links a::after { transition: opacity 120ms linear; }
}

.about { margin: 20px 4px 0; font-size: 15px; max-width: 60ch; color: var(--ink); text-shadow: 0 0 8px rgba(255,255,255,.9), 0 0 8px rgba(255,255,255,.9); }
.about p { margin: 0 0 6px; }
.about a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .15em; }
.foot { margin: 16px 4px 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.75); font-size: 12.5px; color: var(--ink-2);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; text-shadow: 0 0 8px rgba(255,255,255,.9), 0 0 8px rgba(255,255,255,.9); }
.foot a { color: inherit; }

@media (max-width: 720px) {
  body { padding: 20px 12px 14vh; background-image: url("../img/field-1280.jpg"); background-image: image-set(url("../img/field-1280.webp") type("image/webp"), url("../img/field-1280.jpg") type("image/jpeg")); background-position: 62% center; }
  .slab { padding: 22px 18px 16px; border-radius: 12px; }
  .head { grid-template-columns: 60px 1fr; column-gap: 14px; margin-bottom: 16px; }
  .head img { width: 60px; height: 60px; border-radius: 8px; }
  .head p { font-size: 15px; }
  .links a { grid-template-columns: 36px 1fr; column-gap: 12px; padding: 10px 10px; }
  .links svg { width: 36px; height: 36px; }
  .links a.one svg { width: 28px; height: 28px; margin-left: 4px; }
  .flare { display: none; }
}