: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 ---- */
@media (max-width: 640px) {
  /* Home */
  .topbar { flex-direction: column; gap: 18px; }
  .blocks {
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
  }
  .blocks a { flex: 1 1 40%; text-align: center; }
  .tagline { max-width: 30ch; }
  .statement { max-width: 100%; }
  .foot { align-items: flex-end; }
  .logo img { width: clamp(120px, 45vw, 200px); height: auto; }

  /* Work: stack text over media; compact corner chrome */
  .panel {
    flex-direction: column;
    justify-content: center;
    gap: clamp(16px, 3vh, 26px);
    padding: clamp(78px, 12vh, 104px) clamp(20px, 6vw, 30px);
  }
  .ptext { flex: none; width: 100%; }
  .pmedia { flex: none; width: 100%; height: auto; }
  .phero { max-height: 38vh; }
  .pthumbs img { height: clamp(84px, 13vh, 130px); }
  .work-weave { font-size: clamp(24px, 7.5vw, 36px); }
  .intro-inner { max-width: 100%; }

  /* One-page: gentler snapping on phones (a long mandatory scroll feels heavy). */
  .work-page { scroll-snap-type: y proximity; }
  .panel-hero .statement { max-width: 100%; }

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

  .chrome-tl .tagline,
  .chrome-tl { max-width: 46vw; }
  .chrome-tl .tagline { font-size: 13px; }
  .chrome-tr .blocks {
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    max-width: 48vw;
    justify-content: flex-end;
  }
  .chrome-tr .blocks a { padding: 7px 10px; }
  .logo img { width: clamp(96px, 28vw, 130px); }
}

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