/* the middle club — homepage in the Yorkshicana look, 20 Oct 2026
   Glass pills and grain carried over from the Minimum site (the Skylrk theme's .glass block,
   its two-pass canvas: field, then living grain). No Suisse files from the Minimum build are used here.
   Type: BEATTLE ONLY (Cameron, 10 Nov 2026, Sacre Bleu dropped). Was: lock of 20 Oct 2026, Sacre Bleu for the name and titles,
   Beattle (his file, self-hosted in /fonts) for everything else. His rules for using them are still to come;
   which words count as titles here is the Design Room's reading until he says. Picked up from the Manager
   door's first cut (Gill Sans placeholder) by the Design Room, 20 Oct, 10:45. */
html, body, input, textarea, button, select { text-transform: lowercase; }  /* Cameron, 10 Nov 2026: "i never want uppercase letters" */


@font-face {
  font-family: "beattle";
  src: url("/fonts/beattle-webfont.woff2") format("woff2"), url("/fonts/beattle-webfont.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --paper: #f6f2ea;
  --ink: #141414;
  --white: #fbfbfb;
  --duration-slow: .6s;
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --font: "beattle", Georgia, "Times New Roman", serif;
  --font-title: "beattle", Georgia, serif;   /* Sacre Bleu dropped, his 10 Nov 2026 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--white);
  background: #2a2f33;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* the field: one fixed canvas under everything (same idea as #gradient-canvas on Minimum) */
#field {
  position: fixed; inset: 0;
  width: 100%; height: 100dvh; min-height: 100dvh;
  z-index: 0;
  display: block;
}

/* no WebGL: plain picture per section, cover-fit on the figure. With WebGL the canvas is the picture. */
/* evening 22 Oct: on phones the canvas is the full screen height and never changes as the address bar moves */
@media (pointer: coarse) { #field { height: 100lvh; min-height: 100lvh; } }
body.no-gl #field { display: none; }
body.no-gl .panel { background-size: cover; background-repeat: no-repeat; }
body:not(.no-gl) .panel { background-image: none !important; }

/* ---- glass, from the Minimum / Skylrk theme ---- */
.glass {
  --c-glass: #bbbbbc; --c-light: #fff; --c-dark: #000;
  --glass-reflex-dark: 1; --glass-reflex-light: 1;
  --glass-blur: 8px; --glass-tint: 20%; --glass-saturation: 150%;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  background: #fbfbfb1a;
  position: relative; overflow: hidden;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -.3px -1px 4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2.5px 0 -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0 1px 5px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0 6px 16px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}
.glass-opacity { background: #fbfbfb33; }
.glass-pill { --glass-radius: 22px; border-radius: var(--glass-radius); align-items: center; }

/* ---- header ---- */
.site-header {
  position: fixed; top: 16px; left: 16px; right: 16px; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.header-logo-pill {
  height: 40px; padding: 0 18px 0 12px;
  display: flex; align-items: center; gap: 10px;
  color: var(--white); text-decoration: none;
  transition: color var(--duration-slow) var(--ease-in-out);
}
.header-logo-pill img.duck { height: 30px; width: auto; display: block; }
.header-logo-pill img.wordmark { height: 16px; width: auto; display: block; }
.header-menu-pill {
  height: 40px; padding: 6px 16px;
  display: flex; align-items: center; gap: 16px;
}
.header-menu-pill a {
  color: var(--white); text-decoration: none; font-size: 13px;
  opacity: .92; transition: opacity .3s;
}
.header-menu-pill a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* the header pills darken their words over a pale field */
body[data-ink="dark"] .header-logo-pill,
body[data-ink="dark"] .header-menu-pill a { color: var(--ink); }
body[data-ink="dark"] .header-logo-pill img.light { display: none; }
body[data-ink="light"] .header-logo-pill img.dark { display: none; }

/* the lockup in the hero: his logo file, light on a dark field, dark on a pale one (the panel's ink) */
.words .name img.lockup { display: block; width: 170px; height: auto; }
/* 21 Oct: the hero's line wordmark (his order) sits wider and lower than the stacked lockup did */
.words .name img.lockup.line { width: 230px; }
/* 21 Oct: the duck's landing box above the signature lines (the flight is js/duck-flight.js). Frames share one canvas
   (720 x 690) with the bird at ~87% of its width, so the box is a little wider than the mark reads. */
.words .name.duck-stage { width: 210px; aspect-ratio: 720 / 690; margin-bottom: 6px; position: relative; }
.words .name.duck-stage img.mark { display: none; width: 100%; height: auto; }
.words .name.duck-stage.landed img.mark { display: block; }
.panel[data-ink="light"] .words img.lockup.dark { display: none; }
.panel[data-ink="dark"] .words img.lockup.light { display: none; }

/* ---- panels: one field each, full viewport, words in the quiet zone ---- */
main { position: relative; z-index: 1; }
.panel {
  position: relative;
  height: 100dvh; min-height: 100dvh;
  width: 100%;
  display: flex;
}
.panel .words {
  position: absolute;
  max-width: 34ch;
  color: var(--white);
  transition: color var(--duration-slow) var(--ease-in-out);
}
.panel[data-ink="dark"] .words { color: var(--ink); }
.words p { margin: 0; }
.words .label {
  font-size: 11px; letter-spacing: .08em; opacity: .75; margin-bottom: 10px;
}
.words .name { margin-bottom: 16px; }
.words .line { font-size: 15px; }
.words .line + .line { margin-top: 2px; }
.words a { color: inherit; text-decoration: none; }
.words a:hover { text-decoration: underline; text-underline-offset: 3px; }
.words .small { font-size: 11px; opacity: .7; margin-top: 14px; }

/* placements, phone first */
.panel-hero .words    { left: 20px; bottom: 7dvh; }
.panel-studio .words  { left: 20px; bottom: 10dvh; }
.panel-work .words    { left: 20px; bottom: 9dvh; }
.panel-film .words    { left: 20px; bottom: 10dvh; }
.panel-contact .words { left: 20px; bottom: 11dvh; }

@media (min-width: 900px) {
  body { font-size: 15px; }
  .panel .words { max-width: 40ch; }
  .words .name img.lockup { width: 260px; }
  .words .name img.lockup.line { width: 340px; }
  .words .name.duck-stage { width: 320px; }
  .words .line { font-size: 16px; }
  .panel-hero .words    { left: 5vw;  top: 50%; transform: translateY(-50%); bottom: auto; }
  .panel-studio .words  { left: 5vw;  bottom: 9vh; }
  .panel-work .words    { left: 5vw;  bottom: 9vh; }
  .panel-film .words    { left: 5vw;  bottom: 14vh; }
  .panel-contact .words { left: 5vw;  bottom: 9vh; }
  .header-logo-pill img { height: 32px; }
}
@media (max-width: 420px) {
  .header-logo-pill { padding: 0 12px 0 10px; gap: 8px; }
  .header-menu-pill { padding: 6px 12px; gap: 12px; }
  .header-menu-pill a, .header-logo-pill span { font-size: 12px; }
}

/* the bottom edge: a hairline sign-off, nothing else */
footer {
  position: relative; z-index: 1;
  padding: 18px 20px 26px;
  font-size: 11px; opacity: .75; color: var(--white);
  display: flex; justify-content: space-between; gap: 12px;
}
body[data-ink="dark"] footer { color: var(--ink); }
footer a { color: inherit; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* words the field reacts to: a hairline under them on hover, nothing else */
.react { cursor: pointer; text-decoration: none; }
.react:hover { text-decoration: underline; text-underline-offset: 3px; }