/* Angus Lewington — lewington.site (link hub)
   Same olive "benchmark" brand as lewington.online, but a centered hub layout. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage.woff2') format('woff2');
  font-weight: 500 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fonts/hanken.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spline Sans Mono';
  src: url('/assets/fonts/spline.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
}

:root {
  --bg:        oklch(0.992 0 0);
  --surface:   oklch(0.970 0.006 115);
  --line:      oklch(0.895 0.010 115);
  --ink:       oklch(0.235 0.012 110);
  --ink-soft:  oklch(0.405 0.014 112);
  --ink-mute:  oklch(0.530 0.013 112);
  --olive:     oklch(0.500 0.098 116);
  --olive-ink: oklch(0.430 0.090 118);
  --olive-deep:oklch(0.270 0.038 124);
  --paper:     oklch(0.955 0.010 110);
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fbfbf9;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 6vw, 3rem) 1.25rem;
  position: relative;
  overflow-x: hidden;
}

::selection { background: oklch(0.800 0.140 116); color: var(--olive-deep); }
:focus-visible { outline: 2.5px solid var(--olive); outline-offset: 3px; border-radius: 10px; }

/* faint benchmark motif behind everything */
.bg {
  position: fixed; inset: 0; z-index: 0;
  display: grid; place-items: center;
  color: var(--olive); pointer-events: none;
}
.bg svg { width: min(132vw, 880px); height: auto; opacity: 0.06; }

.hub {
  position: relative; z-index: 1;
  width: 100%; max-width: 27rem;
  text-align: center;
}

/* head */
.hub__head { margin-bottom: clamp(1.75rem, 5vw, 2.5rem); }
.mark {
  display: inline-grid; place-items: center;
  width: 3.25rem; height: 3.25rem; border-radius: 14px;
  background: var(--olive-deep); color: var(--paper);
  font-family: var(--font-display); font-weight: 700; font-size: 1.35rem;
  letter-spacing: -0.02em; margin-bottom: 1.1rem;
}
.hub__head h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.85rem, 1.4rem + 2.4vw, 2.5rem);
  letter-spacing: -0.035em; line-height: 1; margin: 0 0 0.55rem;
  text-wrap: balance;
}
.role {
  margin: 0; color: var(--ink-soft);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.0625rem);
  text-wrap: balance;
}

/* links */
.links { display: flex; flex-direction: column; gap: 0.7rem; }
.link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  text-align: left; text-decoration: none; color: var(--ink);
  background: oklch(1 0 0);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 0.95rem 1.15rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
.link:hover {
  border-color: var(--olive);
  background: var(--surface);
  transform: translateY(-2px);
}
.link__text { display: grid; gap: 0.15rem; min-width: 0; }
.link__label { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.015em; }
.link__sub { font-size: 0.86rem; color: var(--ink-mute); line-height: 1.35; }
.link__go {
  flex: none; color: var(--olive); font-size: 1.2rem; font-weight: 500;
  transition: transform 0.2s var(--ease);
}
.link:hover .link__go { transform: translateX(4px); }

/* footer */
.hub__foot {
  margin-top: clamp(1.75rem, 5vw, 2.5rem);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-mute);
}

/* entrance — element default is visible; keyframe animates from hidden, so
   if anything stops the animation the content is still shown (never blank) */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.hub__head, .link, .hub__foot { animation: rise 0.55s var(--ease) backwards; }
.hub__head { animation-delay: 0.02s; }
.link:nth-child(1) { animation-delay: 0.10s; }
.link:nth-child(2) { animation-delay: 0.17s; }
.link:nth-child(3) { animation-delay: 0.24s; }
.link:nth-child(4) { animation-delay: 0.31s; }
.hub__foot { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .hub__head, .link, .hub__foot { animation: none; }
  .link:hover { transform: none; }
  .link:hover .link__go { transform: none; }
}