@charset "UTF-8";

/* ========================================
   Reset
   ======================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, img {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block;
}

body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
img, video { display: block; }
i, em { font-style: italic; }
*, *:before, *:after { box-sizing: border-box; }

/* ========================================
   Print
   ======================================== */

@media print {
  * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

/* ========================================
   Utility
   ======================================== */

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

button {
  outline: 0;
  border: 0;
  cursor: pointer;
  background: none;
  padding: 0;
  color: var(--text);
}

/* ========================================
   Custom Properties
   ======================================== */

:root {
  --font-serif: 'Gambetta', Georgia, 'Times New Roman', serif;
  --font-display: 'Gambetta', Georgia, 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: monospace;

  --size-s: 12px;
  --line-s: 17px;
  --size-m: 16px;
  --line-m: 25px;
  --size-l: 24px;
  --line-l: 30px;
  --size-ml: 38px;
  --line-ml: 40px;
  --size-xl: 60px;
  --line-xl: 60px;

  --size-s-mobile: 12px;
  --line-s-mobile: 17px;
  --size-m-mobile: 15px;
  --line-m-mobile: 24px;
  --size-l-mobile: 24px;
  --line-l-mobile: 30px;

  --margin: 50px;
  --bounce: cubic-bezier(0, 0.73, 0.12, 1.71);
  --fast-easing: cubic-bezier(0.16, 1, 0.3, 1);

  /* Celadon × Persimmon */
  --bg: #DCE6E1;
  --text: #1A2E2C;
  --text-muted: #4D6360;
  --link: #2D4F4A;
  --link-hover: #1F3936;
  --accent: #E8633D;          /* Persimmon — used only for cursor glow */
  --accent-hover: #C24E2D;
  --symbols: #9CB0AA;
  --selection: #B8CFC6;

  /* Cursor glow controls — driven by app.js */
  --mx: 100%;
  --my: 100%;
  --glow-radius: 60px;
  --invert: 0;

  /* Symbol slot: fixed width so text aligns across rows regardless of glyph width */
  --symbol-width: 1.25em;
  --symbol-gap: 12px;
}

/* ========================================
   Base
   ======================================== */

html {
  width: 100%;
  height: 100%;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  zoom: 1;
  background: var(--bg);
  color: color-mix(in srgb, var(--text) calc((1 - var(--invert)) * 100%), var(--bg) calc(var(--invert) * 100%));
  font-family: var(--font-serif);
  font-size: var(--size-m);
  line-height: var(--line-m);
  letter-spacing: 0.005em;
  font-feature-settings: "liga" 1;
  overflow: hidden;
  transition: color 0.25s ease;
}

/* Cursor-following glow — radial gradient that scales with distance from
   the bottom-right anchor (where the hero sits). Driven by app.js setting
   --mx, --my, --glow-radius, --invert on documentElement. */
.glow {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    var(--glow-radius) circle at var(--mx) var(--my),
    var(--accent) 0%,
    var(--accent) 40%,
    transparent 75%
  );
  opacity: calc(0.05 + var(--invert) * 0.9);
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../img/texture.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 768px) {
  body {
    font-size: var(--size-m-mobile);
    line-height: var(--line-m-mobile);
  }
}

a {
  color: color-mix(in srgb, var(--link) calc((1 - var(--invert)) * 100%), var(--bg) calc(var(--invert) * 100%));
  border: 0;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--link) calc((1 - var(--invert)) * 28%), color-mix(in srgb, var(--bg) 30%, transparent) calc(var(--invert) * 100%));
  transition: color 0.2s ease, border-color 0.2s ease;
}

a:hover {
  color: color-mix(in srgb, var(--link-hover) calc((1 - var(--invert)) * 100%), var(--bg) calc(var(--invert) * 100%));
  border-bottom-color: color-mix(in srgb, var(--link-hover) calc((1 - var(--invert)) * 80%), var(--bg) calc(var(--invert) * 100%));
  text-decoration: none;
}

::selection {
  background: var(--selection);
  color: var(--text);
  text-shadow: none;
}

/* ========================================
   Layout
   ======================================== */

header {
  position: fixed;
  bottom: 4vw;
  right: 4vw;
  display: flex;
  flex-direction: column;
  width: 580px;
}

@media (max-width: 768px) {
  header {
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 0 40px 20px 20px;
    width: calc(100% - 0px);
  }
}

section {
  touch-action: none;
}

header > section {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  cursor: default;
  position: relative;
  flex-grow: 0;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

header > section:first-child {
  padding-bottom: 15px;
  cursor: help;
}

@media (max-width: 768px) {
  header > section:first-child {
    padding-bottom: 20px;
  }
}

header > section:nth-child(4) {
  padding-bottom: 15px;
}

@media (max-width: 768px) {
  header > section:nth-child(4) {
    padding-bottom: 20px;
  }
}

header > section:nth-child(6) {
  padding-top: 15px;
}

@media (max-width: 768px) {
  header > section:nth-child(6) {
    padding-top: 20px;
  }
}

/* ========================================
   Ventures (People) Section
   ======================================== */

header > section.people span {
  white-space: nowrap;
  display: inline-block;
  padding-right: 0.2ch;
}

header > section.people span:hover {
  cursor: help;
}

@media (max-width: 768px) {
  header > section.people span:hover {
    cursor: auto;
  }
}

header > section.people span .comma {
  pointer-events: none;
}

header > section.people span.is-active .comma {
  opacity: 0;
}

header > section.people.is-hovering span {
  opacity: 0;
}

header > section.people.is-hovering span.is-active {
  opacity: 1;
}

/* ========================================
   Columns
   ======================================== */

header > section .col:first-child {
  width: 160px;
  flex-grow: 0;
  flex-shrink: 0;
  text-align: left;
  padding-right: 20px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  header > section .col:first-child {
    width: 120px;
    padding-right: 28px;
  }
}

header a {
  cursor: alias;
}

/* ========================================
   Brand Section — tight stacked wordmark
   ======================================== */

/* Match line-height across the brand row so 'little bit / fantastic' stacks
   with the same rhythm as the tagline wrapping beside it. Also bottom-align
   so the tagline sits on the 'fantastic' baseline, not 'little bit'. */
header > section:first-child {
  line-height: 1.2;
  align-items: flex-end;
}

/* Slightly heavier weight on the brand wordmark so it reads as the title. */
header > section:first-child .col:first-child {
  font-weight: 500;
}

/* "fantastic" sits on line 2; indent it so it aligns under "little bit"
   by pushing it right the exact width of the symbol slot (symbol + gap). */
.brand-cont {
  display: inline-block;
  margin-left: calc(var(--symbol-width) + var(--symbol-gap));
}

/* ========================================
   Decorative Symbols
   ======================================== */

/* All symbols share a fixed-width slot so text starts at the same x across rows. */
header > section .col:first-child::before {
  display: inline-block;
  width: var(--symbol-width);
  margin-right: var(--symbol-gap);
  color: color-mix(in srgb, var(--symbols) calc((1 - var(--invert)) * 100%), var(--bg) calc(var(--invert) * 100%));
  transition: color 0.25s ease;
}

header > section:nth-child(1) .col:first-child::before {
  content: "※";
  animation: pulse 1.5s infinite ease-in-out;
}

header > section:nth-child(2) .col:first-child::before { content: "†"; }
header > section:nth-child(3) .col:first-child::before { content: "‡"; }

header > section:nth-child(4) .col:first-child::before {
  content: "○";
}

header > section.people .col:first-child::before {
  content: "§";
}

header > section:nth-child(6) .col:first-child::before {
  content: "≋";
}

@keyframes pulse {
  0%   { opacity: 0; transform: scale(1); }
  50%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* ========================================
   Hidden Panels
   ======================================== */

footer,
.excerpt,
.person-info {
  width: 390px;
  display: none;
  position: fixed;
  z-index: -1;
  pointer-events: none;
  top: 10vw;
  left: 10vw;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  footer,
  .excerpt,
  .person-info {
    width: calc(100% - 40px);
    top: 20px !important;
    left: 20px !important;
    right: 20px !important;
  }
}

footer p + p,
.excerpt p + p,
.person-info p + p {
  margin-top: 15px;
}

.person-info img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 15px;
}

/* ========================================
   Figures
   ======================================== */

figure {
  display: none;
  position: fixed;
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 768px) {
  figure {
    width: calc(100% - 40px) !important;
    top: 20px !important;
    left: 20px !important;
    right: 20px !important;
  }
}

@media (max-width: 768px) {
  figure img {
    width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 768px) {
  .figure-1 {
    width: 70vw !important;
  }
}

@media (max-width: 768px) {
  .figure-2 {
    width: 50vw !important;
    left: 20px !important;
    right: auto !important;
  }
}

/* ========================================
   Intro Splash
   ======================================== */

.splash {
  position: fixed;
  inset: 0;
  background: #120905;
  color: #F0EBE3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 4vw;
  text-align: center;
  cursor: pointer;
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
  overflow: hidden;
}

.splash::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/texture.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.07;
  pointer-events: none;
  mix-blend-mode: screen;
}

.splash.is-dismissed {
  opacity: 0;
  pointer-events: none;
}

.splash-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.04em;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(2.5rem, 9vw, 10rem);
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 95vw;
  text-wrap: balance;
}

/*
   Splash choreography (master animation = 9s, all spans share it).
   Percentages below are (T/9)*100.
     T=0.5s  line 1 "We're all different"   fade in
     T=1.25s line 2 "but there's something" fade in
     T=2.75s line 1 fade OUT  +  line 3 "kind of fantastic" fade in
     T=4.25s line 2 fade OUT  +  line 4 "about that..."     fade in
     T=5.75s "kind of "      fade OUT  (fantastic stays)
     T=6.75s line 4          fade OUT  (fantastic still visible alone)
     T=7.5s  line 5 "isn't there?"      fade in
     T=8.5s  line 5 settled; fantastic + isn't there? held to end
     T=9s    animation ends; fill-forwards keeps fantastic + line 5 visible
     (splash container then holds ~1.5s and fades via JS)
*/

.splash-line,
.splash-word-a,
.splash-word-b {
  opacity: 0;
  will-change: opacity, transform, filter;
  animation-duration: 9s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-iteration-count: 1;
}

.splash-line {
  display: block;
}

.splash-word-a,
.splash-word-b {
  display: inline;
}

.splash-line-1 { animation-name: splash-line-1; }
.splash-line-2 { animation-name: splash-line-2; }
.splash-line-4 { animation-name: splash-line-4; }
.splash-line-5 { animation-name: splash-line-5; }
.splash-word-a { animation-name: splash-word-a; }
.splash-word-b { animation-name: splash-word-b; }

/* Line 3 wrapper shouldn't animate itself — words do. */
.splash-line-3 {
  opacity: 1;
  animation: none;
}

@keyframes splash-line-1 {
  0%     { opacity: 0; transform: translateY(80px); filter: blur(6px); }
  5.56%  { opacity: 0; transform: translateY(80px); filter: blur(6px); }
  13.89% { opacity: 1; transform: translateY(0);   filter: blur(0); }
  30.56% { opacity: 1; }
  38.89% { opacity: 0; }
  100%   { opacity: 0; }
}

@keyframes splash-line-2 {
  0%     { opacity: 0; transform: translateY(80px); filter: blur(6px); }
  13.89% { opacity: 0; transform: translateY(80px); filter: blur(6px); }
  22.22% { opacity: 1; transform: translateY(0);   filter: blur(0); }
  47.22% { opacity: 1; }
  55.56% { opacity: 0; }
  100%   { opacity: 0; }
}

@keyframes splash-word-a {
  0%     { opacity: 0; transform: translateY(80px); filter: blur(6px); }
  30.56% { opacity: 0; transform: translateY(80px); filter: blur(6px); }
  38.89% { opacity: 1; transform: translateY(0);   filter: blur(0); }
  63.89% { opacity: 1; }
  72.22% { opacity: 0; }
  100%   { opacity: 0; }
}

@keyframes splash-word-b {
  /* "fantastic" stays visible from settle through end of animation. */
  0%     { opacity: 0; transform: translateY(80px); filter: blur(6px); }
  30.56% { opacity: 0; transform: translateY(80px); filter: blur(6px); }
  38.89% { opacity: 1; transform: translateY(0);   filter: blur(0); }
  100%   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}

@keyframes splash-line-4 {
  0%     { opacity: 0; transform: translateY(80px); filter: blur(6px); }
  47.22% { opacity: 0; transform: translateY(80px); filter: blur(6px); }
  55.56% { opacity: 1; transform: translateY(0);   filter: blur(0); }
  75%    { opacity: 1; }
  83.33% { opacity: 0; }
  100%   { opacity: 0; }
}

@keyframes splash-line-5 {
  0%     { opacity: 0; transform: translateY(80px); filter: blur(6px); }
  83.33% { opacity: 0; transform: translateY(80px); filter: blur(6px); }
  94.44% { opacity: 1; transform: translateY(0);   filter: blur(0); }
  100%   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}

@media (max-width: 768px) {
  .splash-quote {
    font-size: clamp(2rem, 11.5vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash { transition: opacity 0.2s linear; }
  .splash-line,
  .splash-word-a,
  .splash-word-b {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ========================================
   Animal Icons (game-icons, MIT)
   CSS mask-based so the SVG inherits currentColor via background.
   Set .lbf-icon width/height in the consumer; set color on the parent
   to change the tint. Used by /alt/* pages.
   ======================================== */

.lbf-icon {
  display: inline-block;
  background: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  vertical-align: middle;
}
.lbf-icon-fox      { -webkit-mask-image: url("/assets/img/icons/fox.svg");      mask-image: url("/assets/img/icons/fox.svg"); }
.lbf-icon-squirrel { -webkit-mask-image: url("/assets/img/icons/squirrel.svg"); mask-image: url("/assets/img/icons/squirrel.svg"); }
.lbf-icon-rabbit   { -webkit-mask-image: url("/assets/img/icons/rabbit.svg");   mask-image: url("/assets/img/icons/rabbit.svg"); }
.lbf-icon-octopus  { -webkit-mask-image: url("/assets/img/icons/octopus.svg");  mask-image: url("/assets/img/icons/octopus.svg"); }