:root {
  --bg: #e8e8e6;   /* light grey ground */
  --ink: #141414;  /* near-black headline text */
  --muted: #6b6b6b; /* dark grey secondary text */
  --line: rgba(0, 0, 0, 0.55); /* outlines on the light ground */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Lato", system-ui, sans-serif;
  overflow: hidden;
}

/* Full-screen weave canvas — the back layer, behind the content frame (home) */
#weave {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

/* Content frame (home) */
.frame {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: clamp(20px, 3.5vw, 46px);
  display: flex;
  flex-direction: column;
}

/* ---- Top bar: tagline (left) + block nav (right) ---- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.tagline {
  max-width: 34ch;
  font-weight: 300;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.55;
  color: #3a3a3a;
}

.tagline .pos {
  color: var(--muted);
  font-style: italic;
  font-size: 0.85em;
}

.tagline em { color: var(--ink); font-style: italic; }

/* ---- Block nav — square-cornered outlined tiles echoing the logo ---- */
.blocks {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: clamp(140px, 12vw, 168px);
}

.blocks a {
  font-family: "Lato", system-ui, sans-serif;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 11px 16px;
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
  text-align: left;
  transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.blocks a:hover,
.blocks a.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ---- Hero statement (home) ---- */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.statement {
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.statement .lead {
  display: block;
  white-space: nowrap;
  font-family: "Lato", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(38px, 6.8vw, 108px);
}

.statement .rotator {
  display: block;
  font-size: clamp(40px, 7.4vw, 120px);
  line-height: 1.08;
  color: var(--ink);
  transition: opacity 0.28s ease;
  will-change: opacity;
}

.statement .tail {
  display: block;
  white-space: nowrap;
  font-family: "Lato", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(34px, 6vw, 96px);
  color: #3a3a3a;
}

/* ---- Footer: email (left) + logo (right) ---- */
.foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.email {
  pointer-events: auto;
  font-family: "Lato", system-ui, sans-serif;
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: 0.02em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.22s ease;
}

.email:hover { color: var(--ink); }

.logo {
  user-select: none;
  line-height: 0;
}

/* The logo art is white-on-transparent; invert it to black for the light theme. */
.logo img {
  display: block;
  width: clamp(140px, 12vw, 168px);
  height: auto;
  filter: invert(1);
}

/* ============================================================================
   Work page — full-screen snap panels (no woven canvas, no scrollbar)
   ========================================================================= */

/* The whole page is the scroll container; one project snaps into view at a
   time. The scrollbar is hidden per the design. */
.work-page {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* legacy Edge */
}
.work-page::-webkit-scrollbar { width: 0; height: 0; display: none; } /* WebKit */

/* Persistent chrome pinned to the four corners, above the panels. */
.chrome { position: fixed; z-index: 10; }
.chrome-tl { top: clamp(20px, 3.5vw, 46px); left: clamp(20px, 3.5vw, 46px); }
.chrome-tr { top: clamp(20px, 3.5vw, 46px); right: clamp(20px, 3.5vw, 46px); }
.chrome-bl { bottom: clamp(20px, 3.5vw, 46px); left: clamp(20px, 3.5vw, 46px); }
.chrome-br { bottom: clamp(20px, 3.5vw, 46px); right: clamp(20px, 3.5vw, 46px); }

/* Each panel fills the viewport and snaps. Generous top/bottom padding keeps
   the content clear of the corner chrome. */
.panel {
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(92px, 13vh, 128px) clamp(38px, 5vw, 74px);
}

/* Intro / title panel — big, left-aligned title block, vertically centred so it
   clears the top/bottom corner chrome. */
.panel-intro { align-items: center; justify-content: flex-start; }
.intro-inner { max-width: min(62vw, 820px); }

.work-label {
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

/* The weave line: thin base with the five "threads" set bold in ink. */
.work-weave {
  font-family: "Lato", system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.13;
  letter-spacing: -0.01em;
  color: #3a3a3a;
}
.work-weave b { font-weight: 700; color: var(--ink); }

.scrollcue {
  margin-top: clamp(24px, 4vh, 44px);
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Project panels: text column + big media */
.ptext { flex: 0 0 clamp(280px, 32%, 440px); }

.pnum {
  font-family: "Michroma", sans-serif;
  font-size: clamp(12px, 1.05vw, 15px);
  color: var(--muted);
  margin-bottom: 14px;
}

.ptitle {
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin-bottom: 12px;
}

.ptitle a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--line);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ptitle a:hover { color: var(--muted); border-color: var(--muted); }

.pmeta {
  font-weight: 300;
  color: var(--muted);
  font-size: 0.5em;
  letter-spacing: 0.02em;
}

.pdesc {
  font-weight: 300;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.6;
  color: #3a3a3a;
  max-width: 46ch;
  margin-bottom: 16px;
}

.ptags { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.ptags li {
  font-size: clamp(10px, 0.85vw, 12px);
  letter-spacing: 0.06em;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.4);
}

/* Media: one big hero + a small row of supporting shots */
.pmedia {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vh, 18px);
}

/* Hero and the supporting row share ONE width so the thumbs line up flush under
   the hero. The thumbs split that width into equal columns (however many there
   are). */
.phero {
  display: block;
  width: min(100%, clamp(400px, 42vw, 640px));
  height: auto;
  max-height: 54vh;
  object-fit: contain;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.14);
}

/* The League's hero is three live animated app screens (iframe). The wrapper
   holds a ~3:2 box — the natural aspect of three tall phones in a row — and
   pointer-events off so the wheel still snaps. */
.league-frame-wrap {
  width: min(100%, clamp(520px, 66vw, 1040px));
  aspect-ratio: 3 / 2;
  position: relative;
  background: #e8e8e6;
}
.league-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}

.pthumbs {
  width: min(100%, clamp(400px, 42vw, 640px));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: clamp(10px, 1vw, 16px);
}
.pthumbs img {
  display: block;
  width: 100%;
  height: clamp(120px, 21vh, 240px);
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ============================================================================
   One-page site — Home + Work + About stitched into a single snapping scroll.
   The woven canvas persists behind every section; nav highlights via scrollspy.
   ========================================================================= */

/* Smooth-scroll when the nav anchors jump between sections. */
.work-page { scroll-behavior: smooth; }

/* Content sits above the fixed canvas (z-index:0); panels are transparent so
   the canvas shows through, but their text/images paint on top. */
.snap { position: relative; z-index: 1; }

/* Home hero as the opening snap section: the big rotating statement, centred. */
.panel-hero { justify-content: flex-start; }
.panel-hero .statement { max-width: min(92vw, 1100px); }

/* ============================================================================
   About page — reuses .work-page snap + .chrome + .panel. Adds intro copy,
   a "numbers at a glance" grid (count-up on scroll), and a contact panel.
   ========================================================================= */

/* Intro copy panel — like .panel-intro but with a body block under the head. */
.about-inner { max-width: min(66vw, 900px); }
.about-lead { font-size: clamp(28px, 3.9vw, 54px); margin-bottom: clamp(20px, 3vh, 34px); }
.about-body {
  max-width: 62ch;
  font-weight: 300;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.62;
  color: #3a3a3a;
}
.about-body p + p { margin-top: 0.9em; }
.about-body em { font-style: italic; color: var(--ink); }

/* --- Numbers at a glance --- */
.stats-panel { flex-direction: column; align-items: flex-start; justify-content: center; }
.stats-inner { width: 100%; max-width: min(92vw, 1120px); margin: 0 auto; }

.stats-title {
  font-weight: 300;
  font-size: clamp(22px, 3vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 20ch;
  margin: 10px 0 clamp(26px, 4vh, 48px);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 44px) clamp(24px, 4vw, 64px);
}

.stat { border-top: 1.5px solid var(--line); padding-top: clamp(12px, 1.6vh, 18px); }

.stat-fig { display: flex; align-items: baseline; gap: 0.4em; margin-bottom: 8px; }
.stat-num {
  font-family: "Michroma", sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 82px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-unit {
  font-size: clamp(12px, 1.05vw, 15px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-label {
  font-weight: 300;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.45;
  color: #3a3a3a;
  max-width: 26ch;
}

.stats-note {
  margin-top: clamp(24px, 4vh, 46px);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
}

/* --- Contact --- */
.contact-panel { flex-direction: column; align-items: flex-start; justify-content: center; }
.contact-inner { width: 100%; max-width: min(74vw, 860px); }

.contact-title {
  font-weight: 300;
  font-size: clamp(30px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 10px 0 clamp(18px, 2.6vh, 28px);
}

.contact-body {
  font-weight: 300;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.6;
  color: #3a3a3a;
  max-width: 54ch;
  margin-bottom: clamp(24px, 3.4vh, 40px);
}

.contact-email {
  display: inline-block;
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--line);
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.contact-email:hover { color: var(--muted); border-color: var(--muted); }

.contact-meta {
  margin-top: clamp(22px, 3.4vh, 36px);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* ---- Responsive (phones) ---- */
@media (max-width: 640px) {
  /* Flowing layout: each section grows to fit its content instead of being
     locked to one screen height (which clipped and overlapped tall content on
     phones). Natural scroll rather than hard snapping. */
  .work-page { height: 100dvh; scroll-snap-type: y proximity; scroll-behavior: smooth; }
  .panel {
    height: auto;
    min-height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: normal;   /* not "always" — lets sections taller than the screen scroll through */
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(18px, 3vh, 28px);
    padding: clamp(94px, 15vh, 120px) 22px clamp(44px, 8vh, 72px);
  }

  /* Corner chrome → a slim top bar: small logo left, nav right. The long
     tagline and the footer email are dropped on phones (the email still lives
     in the Contact section, so nothing is lost) to keep the top uncluttered. */
  .chrome-tl,
  .chrome-bl { display: none; }
  .chrome-br { top: 16px; left: 16px; right: auto; bottom: auto; }
  .logo img { width: auto; height: 64px; }   /* tall stacked mark → cap by height for a slim top bar */
  .chrome-tr { top: 17px; right: 14px; }
  .chrome-tr.blocks {            /* the nav element itself (was a broken descendant selector) */
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
    width: auto;
  }
  .chrome-tr.blocks a { padding: 7px 10px; font-size: 10.5px; letter-spacing: 0.1em; }

  /* Home hero: push the statement into the lower half so the (smaller) mandala
     sits in the upper band, between the top bar and the "We weave…" line. */
  .panel-hero { justify-content: flex-start; padding-top: 46vh; }
  .panel-hero .statement,
  .statement { max-width: 100%; }

  /* Work — text stacks over full-width media */
  .ptext { flex: none; width: 100%; }
  .pmedia { flex: none; width: 100%; height: auto; }
  .phero { width: 100%; max-height: 44vh; }
  .pthumbs { width: 100%; }
  .pthumbs img { height: clamp(90px, 15vh, 140px); }
  .league-frame-wrap { width: 100%; }
  .intro-inner { max-width: 100%; }
  .work-weave { font-size: clamp(24px, 7.5vw, 36px); }

  /* About + stats + contact */
  .about-inner { max-width: 100%; }
  .about-lead { font-size: clamp(22px, 6.6vw, 32px); }
  .about-body { max-width: 100%; font-size: 14.5px; line-height: 1.55; }
  .stats-inner,
  .contact-inner { max-width: 100%; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 18px; }
  .stat-num { font-size: clamp(34px, 12vw, 52px); }
  .stats-title { font-size: clamp(20px, 6.4vw, 30px); max-width: 100%; }
  .contact-title { font-size: clamp(28px, 8vw, 44px); }
  .contact-body { max-width: 100%; font-size: 15px; }
  .contact-email { font-size: clamp(20px, 6vw, 32px); }
}

/* Respect reduced-motion: the canvas script also honors this */
@media (prefers-reduced-motion: reduce) {
  .statement .rotator { transition: none; }
  .work-page { scroll-snap-type: none; }
}