/* ============================================================================
   styles.css — bento-grid scrapbook portfolio
   ============================================================================ */

/* Banaue — free handwritten brush font.
   Drop the font file(s) at assets/fonts/ (banaue.woff2 preferred, or banaue.otf).
   Until then it falls back to the handwritten "Caveat" so notes still read well. */
@font-face {
  font-family: "Banaue";
  src: url("assets/fonts/banaue.woff2") format("woff2"),
       url("assets/fonts/banaue.otf") format("opentype"),
       url("assets/fonts/Banaue.otf") format("opentype");
  font-display: swap;
}

/* ---- Design tokens --------------------------------------------------------- */
:root {
  --cream:#FBFAF5;  --ink:#1c1b19;  --muted:#6b6a66;  --line:#ece7e9;

  /* Pastel palette */
  --blush:#F7E1E6;  --peach:#FFE7CC; --lilac:#E6D6F7;  --sage:#D6EAD4;
  --lemon:#FEF3B0;  --mauve:#E6D6E7; --coral:#FFC1B6;  --aqua:#D0F0ED;
  --sand:#F2E9CF;   --sky:#DCE6F7;

  /* Chainlink blue (#0847F7) adapted to the pastel theme */
  --royal:#0847F7;       /* exact brand blue — accents, headings, metrics */
  --blue:#AFC2FB;        /* pastel role-header background */
  --blue-soft:#E8EDFD;   /* light tint for the achievement cards */

  /* Doodles brand pink (from the artwork) */
  --doodle:#F4A9CB;

  /* Matcha green for the Tokyo block (matches the bowl illustration) */
  --matcha:#D8E9C4;

  --radius:18px;    --gap:14px;

  --shadow: 0 10px 30px rgba(28,27,25,.10);
}

/* ---- Reset / base ---------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* Display / heading type */
h1, h2, h3, .feature-title, .hodge-name, .contact-title {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

/* ---- Layout shell ---------------------------------------------------------- */
.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px 64px;
}

/* 1. Top bar */
.topbar {
  max-width: 1040px;
  margin: 0 auto;
  padding: 22px 20px 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.logo {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 34px;
  text-decoration: none;
  line-height: 1;
}
.topbar-email {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.topbar-email:hover { color: var(--ink); text-decoration: underline; }

/* 2. Profile */
.profile {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 4px 18px;
}
.profile-photo {
  width: 92px; height: 92px;
  border-radius: 50%;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--sky);
  border: 1px solid var(--line);
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.name-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.profile-name { font-size: 30px; }
.name-alias {
  font-variant: small-caps;
  text-transform: lowercase;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.profile-tagline { color: var(--muted); margin: 4px 0 10px; font-size: 15px; }
.location-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  color: var(--ink);
}
.location-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--coral);
}

/* handwritten notes in the gap between the name block and the grid */
.hand-notes {
  margin: 18px 4px 34px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hand-note {
  font-family: "Banaue", "Caveat", cursive;
  font-size: 30px;
  line-height: 1.1;
  margin: 0;
  color: var(--muted);
}
.hand-note--accent { color: var(--ink); }

/* 3. Pill nav */
.pillnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 8px 0 26px;
}
.pillnav a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  transition: background .18s ease, color .18s ease;
}
.pillnav a:hover { background: #f1efe7; }
.pillnav a.is-active { background: var(--ink); color: var(--cream); }

/* ---- 4. Bento grid --------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px 100px;  /* shorter first band (top-row cards span these) */
  grid-auto-rows: 122px;
  grid-auto-flow: dense;
  gap: var(--gap);
}
.contents { display: contents; } /* lets a wrapper's children join the grid */

/* span helpers */
.c2   { grid-column: span 2; }
.r2   { grid-row: span 2; }
.c2r2 { grid-column: span 2; grid-row: span 2; }
.vcenter { justify-content: center; } /* vertically centre a tall card's content */

/* base card */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* clickable cards lift on hover */
a.card, .card[role="button"], .card.is-clickable {
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
  cursor: pointer;
}
a.card:hover, .card.is-clickable:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 22px 48px rgba(28,27,25,.22);
}

/* colour variants — all pastel, dark ink text throughout */
.card--blush  { background: var(--blush); border-color: transparent; }
.card--peach  { background: var(--peach); border-color: transparent; }
.card--lilac  { background: var(--lilac); border-color: transparent; }
.card--sage   { background: var(--sage); border-color: transparent; }
.card--lemon  { background: var(--lemon); border-color: transparent; }
.card--mauve  { background: var(--mauve); border-color: transparent; }
.card--coral  { background: var(--coral); border-color: transparent; }
.card--aqua   { background: var(--aqua); border-color: transparent; }
.card--sand   { background: var(--sand); border-color: transparent; }
.card--sky    { background: var(--sky); border-color: transparent; }
.card--matcha { background: var(--matcha); border-color: transparent; }
.card--blue   { background: var(--blue); border-color: transparent; }
.card--blue-soft { background: var(--blue-soft); border-color: transparent; }
.card--doodle { background: var(--doodle); border-color: transparent; }
.card--paper  { background: #fff; }

/* shared text bits */
.card-title { font-size: 18px; }
.card-title.on-dark { color: var(--ink); }
.kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 6px; }
.card-lead { font-size: 17px; font-weight: 600; margin: 0; }
.muted-line { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .02em; opacity: .92; margin: 0 0 8px; }

/* tag pill (e.g. "About me") */
.tag {
  align-self: flex-start;
  background: rgba(255,255,255,.7);
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  margin-top: auto;
}

/* ---- About cluster --------------------------------------------------------- */
/* drop the folder body so the tab sits in the gap above it —
   the tab's top then lines up with the top of the neighbouring blocks */
.folder-card { overflow: visible; margin-top: 18px; }  /* reusable folder mechanics */
.folder { justify-content: flex-end; }                 /* About-me body alignment */
.folder-tab {
  position: absolute;
  top: -18px; left: 16px;       /* fills the gap; top edge = neighbouring cards' top */
  width: 78px; height: 20px;
  background: inherit;          /* matches each block's own colour */
  filter: brightness(.92);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); /* trapezium — narrower at the top */
}
.folder-blurb { font-size: 13.5px; margin: 12px 0; color: #34323a; }

/* ---- Born in Hong Kong (enlarged background illustration, bleeds right) ----- */
.born { position: relative; overflow: hidden; padding: 16px; min-height: 170px; }
.born-img { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.born-img .media { width: 100%; height: 100%; }
.born-img .media img {
  position: absolute;
  top: 0; right: 0;      /* top & right edges just touch the card borders */
  height: 150%; width: auto; max-width: none;
  object-fit: contain;
}
.born-label {
  position: relative; z-index: 1; display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800; letter-spacing: -0.02em;
  font-size: 16px; line-height: 1.1;
}
.born-sub { position: relative; z-index: 1; display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* Floating language chips that pop out around the Born block on click.
   Rendered in a body-level overlay so they escape the card's overflow:hidden. */
.lang-chips { position: absolute; top: 0; left: 0; z-index: 60; pointer-events: none; }
.lang-chip {
  position: absolute;
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
  transition: opacity .2s ease, transform .4s cubic-bezier(.2,.9,.3,1.5);
  transition-delay: calc(var(--i) * .07s);
}
.lang-chips.is-open .lang-chip { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lang-chip-inner {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(28,27,25,.18);
}
.chip-ico { width: 1.2em; height: 1.2em; flex: 0 0 auto; display: block; }
/* logo badge variant — a circular white chip holding a platform logo */
.lang-chip-logo { padding: 8px; border-radius: 12px; }   /* app-icon: rounded square */
.lang-chip-logo img { width: 30px; height: 30px; object-fit: contain; display: block; flex: 0 0 auto; }
.lang-chips.is-open .lang-chip-inner {
  animation: lang-bob 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * .35s);
}
@keyframes lang-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Clickable variant (e.g. About-me social links) — reset a/button chrome,
   make them interactive, and give a clear hover affordance. */
.lang-chips--links .lang-chip {
  pointer-events: auto; cursor: pointer;
  border: 0; background: none; padding: 0;
  font: inherit; color: inherit; text-decoration: none;
}
.lang-chips--links .lang-chip:hover .lang-chip-inner,
.lang-chips--links .lang-chip:focus-visible .lang-chip-inner {
  background: var(--ink); color: #fff;
  box-shadow: 0 12px 26px rgba(28,27,25,.28);
}
.lang-chips--links .lang-chip:hover .chip-ico path,
.lang-chips--links .lang-chip:focus-visible .chip-ico path { fill: #fff; }
.lang-chips--links .lang-chip:focus-visible { outline: none; }

.pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.pill-row .pill {
  background: #f1efe7;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 500;
}

/* ---- Chainlink role cluster (blue) ----------------------------------------- */
.role-head { justify-content: center; }
.role-logo {
  background: var(--royal);            /* white symbol reads on brand blue */
  box-shadow: 0 6px 16px rgba(8,71,247,.28);
}
.role-logo img { width: 26px; height: auto; }

/* Universal folder-block logo badge: same size, square shape, same position
   (top-right corner) across Chainlink, Doodles and PHD. */
.role-logo, .doodles-avatar, .phd-logo {
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.role-logo, .doodles-avatar, .phd-logos {
  position: absolute; top: 14px; right: 16px;
}
.role-org {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--royal); margin: 0;
}
.role-title { font-size: 26px; margin: 4px 0 0; }
.role-head .pill { background: #fff; color: var(--royal); font-weight: 600; }
.role-head .muted-line { color: #3a4a78; }

/* capability cards — eyebrow label, bold headline, muted one-line proof */
.role-point { justify-content: flex-start; }
.point-eyebrow {
  margin: 0 0 10px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted);
}
.point-headline {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800; letter-spacing: -0.02em;
  font-size: 18px; line-height: 1.18;
  margin: 0 0 8px; color: var(--ink);
}
.point-proof { font-size: 12px; line-height: 1.45; color: var(--muted); margin: 0; }

/* ---- Slideshow card (e.g. Speaker Panel Curation) ------------------------- */
.slides-card {
  justify-content: space-between;
  background-color: transparent;
  background-image: url("assets/bg/9472a8254d41b85b771ea43396850fce.jpg");
  background-size: cover;
  background-position: center;
  background-origin: border-box;   /* cover the full edge — no border line */
  background-clip: border-box;
}
/* Ambassador programming — teal water bg lightened with a 40% white overlay so
   the dark slide text stays readable */
.card--ambassador.slides-card {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .4)),
    url("assets/bg/3450083cb428563c30f4544d5e5a7e82.jpg");
}
/* smaller display header to fit the half-width (1-column) card */
.card--ambassador .slide-header { font-size: 30px; line-height: 1.08; }
.card--ambassador .slide-title { font-size: 22px; }
.card--ambassador .slide-body { font-size: 14px; }
.slides-viewport { flex: 1 1 auto; display: flex; min-height: 0; }
.slide { display: none; flex-direction: column; justify-content: center; width: 100%; }
.slide.is-active { display: flex; }
.slide--header { justify-content: center; }
/* top-align every slide so the header/title sits at the same level (a
   consistent gap below the chips + card-title label) on every slide card */
.slides-card .slide { justify-content: flex-start; }
.slide-header {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800; letter-spacing: -0.02em;
  font-size: 52px; line-height: 1.02; margin: 0; color: var(--ink);
}
.slide-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800; letter-spacing: -0.02em;
  font-size: 30px; line-height: 1.12; margin: 0 0 10px; color: var(--ink);
}
.slide-body { font-size: 16px; line-height: 1.5; color: var(--muted); margin: 0; }
/* header-slide subtext — follows the header's typeface, smaller */
.slide-subheader {
  margin: 14px 0 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700; letter-spacing: -0.01em;
  font-size: 20px; line-height: 1.25; color: var(--ink); opacity: .72;
}
/* content-slide icon — floated to the top-right so text wraps to its LEFT and
   then flows full-width BELOW it. Text never sits over the image (no overlap),
   and gains the right-hand space the old fixed corner used to waste. The image
   stays on a lower layer than the text (z-index) as a safety net. */
.slide-img {
  float: right;
  width: 138px; height: 138px;
  margin: 2px 0 6px 14px;
  position: relative; z-index: 0; pointer-events: none;
  shape-outside: inset(0);
}
.slide-img.is-big { width: 160px; height: 138px; }
.slide-img img { width: 100%; height: 100%; object-fit: contain; object-position: top right; display: block; }
/* content slides flow as a block (so the float works) and top-align, which
   also lines every slide's header up at the same level for consistency. */
.slide:has(.slide-img).is-active { display: block; }
.slide:has(.slide-img) > :not(.slide-img) { position: relative; z-index: 1; }
.slide-note {
  margin: 3px 0 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
/* card-title label, shown under the chips on content slides */
.slide-toplabel { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 12px; }
/* per-market pills on a content slide — enlarged for legibility */
.slide-pills { margin-top: 14px; gap: 7px; }
.slide-pills .pill { background: rgba(255,255,255,.82); font-size: 14px; padding: 7px 13px; font-weight: 600; }
.slide-tags { display: flex; gap: 6px; margin: 0 0 8px; }
.slide-tag {
  background: rgba(255,255,255,.78);
  border-radius: 999px; padding: 4px 11px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink);
}
.slides-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 12px;
}
.slides-count { font-size: 11px; font-weight: 600; color: var(--muted); }
.slides-btn {
  width: 30px; height: 30px; flex: 0 0 auto;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.7); color: var(--ink);
  font-size: 17px; line-height: 1; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.slides-btn:hover { background: #fff; transform: translateY(-1px); }

/* ---- Checklist card (e.g. Full-cycle event programming) ------------------- */
.checklist-card {
  cursor: pointer; justify-content: flex-start; overflow: visible;
  background-color: transparent;
  background-image: url("assets/bg/fullcycle-bg.jpg");   /* rotated 90° clockwise */
  background-size: cover; background-position: left top;  /* left corner → card's left corner */
  background-origin: border-box; background-clip: border-box;
}
.checklist-card.is-open { z-index: 50; }   /* lift the dropped panel above neighbours */
.checklist-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.checklist-heading { min-width: 0; }
.checklist-card .slide-header { font-size: 52px; line-height: 1.02; }
.checklist-subheader {
  margin: 6px 0 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700; letter-spacing: -0.01em;
  font-size: 22px; line-height: 1.1; color: var(--muted);
}
.checklist-card.is-open .slide-header { font-size: 22px; line-height: 1.1; }
.checklist-card.is-open .slide-header br { display: none; }   /* one line when open */
.checklist-card.is-open .checklist-subheader { font-size: 15px; margin-top: 3px; }
.checklist-toggle {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.7); color: var(--ink);
  font-size: 17px; line-height: 1;
  transition: transform .2s ease;
}
.checklist-card.is-open .checklist-toggle { transform: rotate(90deg); }
/* hidden until opened — then it drops OUT of the card as a full, non-scrolling
   white panel (overflows the card box, lifted above neighbours) */
.checklist {
  list-style: none; margin: 12px 0 0; padding: 16px 18px;
  display: none; flex-direction: column;
  background: #fff; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(28,27,25,.20);
}
.checklist-card.is-open .checklist { display: flex; }
.check-item {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding-bottom: 16px;
  font-size: 14.5px; line-height: 1.25; color: var(--ink);
}
/* connecting line between nodes */
.check-item:not(:last-child)::before {
  content: ""; position: absolute;
  left: 20px; top: 40px; bottom: 0;
  width: 2px; background: #e8e8ee; transform: translateX(-50%);
}
.check-node {
  flex: 0 0 auto; position: relative; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f3f4f7; border: 1.5px solid #e8e8ee;
  font-size: 21px;
}
.check-text { flex: 1 1 auto; min-width: 0; font-weight: 600; }
/* "done" state — for the live delivery animation (add .is-done to a .check-item) */
.check-item.is-done .check-node { background: #2bb673; border-color: #2bb673; }
.check-item.is-done .check-icon { opacity: 0; }
.check-item.is-done .check-node::after {
  content: ""; position: absolute; left: 15px; top: 10px;
  width: 7px; height: 13px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.check-item.is-done .check-text { color: var(--muted); }

/* ---- Doodles (pink) -------------------------------------------------------- */
.doodles { grid-row: span 2; }
.doodles-avatar { background: rgba(255,255,255,.55); }
.doodles-avatar > *, .doodles-avatar img { width: 100%; height: 100%; object-fit: cover; }
.doodles-text { min-width: 0; }
.doodles .role-org { color: #b03a72; }
.doodles .role-title { font-size: 22px; }
.doodles .muted-line { color: #7a3257; }
.doodles .pill { background: #fff; color: #b03a72; font-weight: 600; }

/* ---- footer "built with AI" note ------------------------------------------ */
.vibe-emoji { font-size: 1.2em; line-height: 1; }

/* ---- PHD · HSBC ----------------------------------------------------------- */
.phd { justify-content: center; }
.phd .role-org { color: #1f8378; }
.phd .role-title { font-size: 22px; line-height: 1.15; }
.phd .muted-line { color: #3f6b65; }
.phd .pill { background: #fff; color: #1f8378; font-weight: 600; }
.phd-logos { display: flex; align-items: center; gap: 8px; }
.phd-logo {
  background: #fff;
  box-shadow: 0 4px 12px rgba(28,27,25,.10);
}
.phd-logo img { max-width: 38px; max-height: 34px; width: auto; height: auto; object-fit: contain; }
.doodles-blurb { font-size: 13px; color: #6a2f4c; margin: 8px 0 0; }

/* keep folder-card headings clear of the absolute top-right logo (matters most
   on narrow screens, where the title would otherwise run under the logo) */
.role-head .role-title,
.doodles-text .role-title { padding-right: 60px; }
.phd .role-org,
.phd .role-title { padding-right: 104px; }

/* ---- Currently (matcha bowl background, bleeds off the bottom-right) -------- */
.currently { position: relative; }
.cur-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cur-bg .media { width: 100%; height: 100%; }
.cur-bg .media img {
  position: absolute;
  right: 0; bottom: 0;          /* same size as the siu-mai bowl (150%) … */
  height: 150%; width: auto; max-width: none;
  object-fit: contain;
  /* …then shift the bowl itself (the PNG has lots of transparent padding)
     into the bottom-right corner so the card borders clip it only minimally */
  transform: translate(20%, 34%);
}
.currently .kicker, .currently .card-lead,
.currently .cur-sub, .currently .cur-meta { position: relative; z-index: 1; }
.cur-sub { margin: 5px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.cur-meta { margin: 8px 0 0; font-size: 13px; color: var(--muted); }

/* ---- "Built communities in" rotating city roll ----------------------------- */
.roll-card { justify-content: center; gap: 4px; }
.roll-eyebrow {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700; letter-spacing: -0.01em;
  font-size: 15px; color: #5a5444; margin: 0;
}
.roll {
  height: 1.25em;           /* one line — clips to a single visible city */
  overflow: hidden;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800; letter-spacing: -0.02em;
  font-size: 30px; line-height: 1.25;
  color: var(--ink);
}
.roll-list { list-style: none; margin: 0; padding: 0; will-change: transform; }
.roll-item { height: 1.25em; line-height: 1.25; white-space: nowrap; }

/* ---- Open Desk feature ----------------------------------------------------- */
/* span 3 rows so the full body copy fits in the colour panel at any width */
.feature { grid-row: span 3; flex-direction: row; padding: 0; }
.feature-img { flex: 1 1 44%; min-width: 0; }
.feature-img > * { width: 100%; height: 100%; }
.feature-panel {
  flex: 1 1 56%;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.feature-title { font-size: 32px; margin: 2px 0 10px; }
.feature-body { font-size: 13px; line-height: 1.5; opacity: .72; margin: 0; } /* muted proof */

/* Open Desk — slideshow on a marble background */
#opendesk {
  grid-row: span 3;
  background-color: transparent;
  background-image: url("assets/bg/opendesk-bg.jpg");   /* download.png, rotated 90° clockwise, brightened */
  background-size: cover; background-position: center;
  background-origin: border-box; background-clip: border-box;
}

/* stat tiles */
.stat { align-items: flex-start; justify-content: center; }
.stat-num {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ---- Events ---------------------------------------------------------------- */
.events { gap: 0; }
/* Compact when collapsed (light ribbon); taller when expanded for the gallery. */
.events.is-expanded { grid-row: span 4; }
.events-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: #f1efe7; }

/* collapsed logo ribbon */
.logo-ribbon {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.logo-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  height: 56px;
  min-width: 84px;
  display: flex; align-items: center; justify-content: center;
  background: #fbf9f3;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 14px;
  opacity: .85;
}
.logo-chip img { max-height: 30px; width: auto; object-fit: contain; filter: grayscale(.2); }
.logo-chip .logo-text { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* expanded gallery — fills the block height so the square covers are as tall
   as the block allows */
.events-gallery-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
.events-gallery {
  display: flex;
  gap: 12px;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 10px;
}
.event-card {
  position: relative;
  flex: 0 0 auto;
  height: 100%;            /* match the gallery (block) height */
  aspect-ratio: 1 / 1;     /* square */
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #f1efe7;
  cursor: zoom-in;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* cover photo / video fills the whole card */
.event-card--video { aspect-ratio: 3 / 4; }   /* video stays portrait, not square */
.event-card .event-photo { position: absolute; inset: 0; }
.event-card .event-photo > * { width: 100%; height: 100%; }
.event-card .event-photo img,
.event-card .event-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-meta {
  position: relative;
  padding: 14px 12px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
  color: #fff;
}
.event-meta .e-title { font-weight: 700; font-size: 14px; line-height: 1.25; }
.event-meta .e-date { font-size: 12px; opacity: .85; margin-top: 2px; }

/* ---- Logo conveyor belts (bottom of the Events block) -------------------- */
.belts-label {
  margin: 18px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.logo-belts {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.belt {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.belt-track { display: flex; width: max-content; will-change: transform; }
.belt--ltr .belt-track { animation: beltRoll 38s linear infinite reverse; }
.belt--rtl .belt-track { animation: beltRoll 38s linear infinite; }
.belt:hover .belt-track { animation-play-state: paused; }
@keyframes beltRoll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.belt-logo {
  flex: 0 0 auto;
  margin-right: 12px;
  height: 48px;
  min-width: 92px;
  display: flex; align-items: center; justify-content: center;
  background: #fbf9f3;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 16px;
}
.belt-logo img { max-height: 28px; width: auto; object-fit: contain; }
.belt-logo--text {
  font-weight: 700; font-size: 13px; color: var(--muted);
  white-space: nowrap; letter-spacing: -0.01em;
}
@media (prefers-reduced-motion: reduce) {
  .belt--ltr .belt-track, .belt--rtl .belt-track { animation: none; }
}

/* arrow buttons */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.95);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.arrow--left { left: -6px; }
.arrow--right { right: -6px; }
.arrow:hover { background: #fff; }

/* ---- AMAs ------------------------------------------------------------------ */
.amas { background: var(--sage); justify-content: center; gap: 14px; }
.amas-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800; letter-spacing: -0.02em;
  font-size: 52px; line-height: 1.02; margin: 0; color: var(--ink);
}
.amas-body {
  font-size: 16px; line-height: 1.55; margin: 0;
  color: var(--ink); opacity: .82; max-width: 48ch;
}
.ama-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin-top: 12px;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.ama-item {
  flex: 0 0 168px;
  scroll-snap-align: start;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 12px;
  padding: 12px;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
a.ama-item { transition: transform .18s ease, box-shadow .18s ease; }
a.ama-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ama-head { display: flex; align-items: center; gap: 9px; }
.ama-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  overflow: hidden; flex: 0 0 auto; background: var(--line);
}
.ama-avatar > * { width: 100%; height: 100%; object-fit: cover; }
.ama-guest { font-weight: 600; font-size: 13.5px; line-height: 1.1; }
.ama-org { font-size: 12px; color: var(--muted); }
.ama-platform {
  align-self: flex-start;
  font-size: 11px;
  background: rgba(28,27,25,.08);
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 9px;
}

/* ---- Tokyo ----------------------------------------------------------------- */
.tokyo { grid-row: span 3; } /* photo-led: give the photos real height */
.tokyo-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin-top: 12px;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.tokyo-card {
  position: relative;
  flex: 0 0 210px;
  height: 250px;
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  text-decoration: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
a.tokyo-card { transition: transform .18s ease, box-shadow .18s ease; }
a.tokyo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tokyo-card .tokyo-photo { position: absolute; inset: 0; }
.tokyo-card .tokyo-photo > * { width: 100%; height: 100%; object-fit: cover; }
.tokyo-cap {
  position: relative;
  padding: 12px;
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0));
}
.tokyo-label { font-weight: 700; font-size: 14px; }
.tokyo-sub { font-size: 12px; opacity: .9; }

/* ---- Hodge ----------------------------------------------------------------- */
.hodge { grid-row: span 3; flex-direction: row; gap: 16px; align-items: center; }
.hodge-text { flex: 1 1 50%; }
.badge {
  display: inline-block;
  background: var(--ink);
  color: var(--cream);
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 10px;
}
.hodge-name { font-size: 28px; margin-bottom: 8px; }
.hodge-blurb { font-size: 13.5px; color: #46394e; margin: 0 0 14px; }
.btn--plum {
  display: inline-block;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  border: none;
  width: auto;
}
.btn--plum:hover { background: #000; }

/* phone frame */
.phone {
  flex: none; /* fixed size in both row (desktop) and column (mobile) layouts */
  width: 132px;
  height: 248px;
  background: #15101a;
  border-radius: 26px;
  padding: 10px;
  position: relative;
  box-shadow: 0 12px 30px rgba(44,15,58,.32);
}
.phone-notch {
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 6px;
  background: #2b2233;
  border-radius: 999px;
  z-index: 2;
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  scroll-snap-type: x mandatory;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.phone-shot { flex: 0 0 100%; scroll-snap-align: start; height: 100%; }
.phone-shot > * { width: 100%; height: 100%; object-fit: cover; }

/* ---- Education (enlarged Big Ben background, bleeds off the bottom) --------- */
.education {
  grid-row: span 2;          /* room for heading + both items */
  position: relative;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 200px;
}
.edu-illus { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.edu-illus .media { width: 100%; height: 100%; }
.edu-illus .media img {
  position: absolute;
  right: 2%;
  bottom: -1%;           /* bottom edge sits just over the block border */
  height: 124%; width: auto; max-width: none;   /* enlarged */
  object-fit: contain;
}
.edu-body { position: relative; z-index: 1; max-width: 60%; }
.edu-items { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.edu-item { display: flex; align-items: center; gap: 12px; }
.edu-name { font-weight: 600; font-size: 14.5px; }
.edu-detail { font-size: 12.5px; color: var(--muted); }
.edu-note { font-size: 11px; color: var(--muted); opacity: .8; margin: 12px 0 0; letter-spacing: .02em; }

/* ---- Contact + CV ---------------------------------------------------------- */
.contact { justify-content: center; }
.contact-title { font-size: 24px; margin-bottom: 0; }
/* email stays hidden until the card is clicked (.is-revealed) */
.contact-email {
  font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none;
  opacity: 0; max-height: 0; margin-top: 0; overflow: hidden;
  transition: opacity .2s ease, max-height .25s ease, margin-top .2s ease;
}
.contact.is-revealed .contact-email { opacity: 1; max-height: 40px; margin-top: 8px; }
.contact-email:hover { text-decoration: underline; }
.cv { justify-content: center; }
.cv-label { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.cv-sub { font-size: 12px; opacity: .7; margin-top: 4px; }

/* ---- Footer ---------------------------------------------------------------- */
.footer {
  max-width: 1040px;
  margin: 18px auto 0;
  padding: 24px 20px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.footer-built {
  flex-basis: 100%;
  text-align: center;
  color: #a98467;
}
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }

/* ---- Media fill (real images cover their container) ------------------------ */
.media { width: 100%; height: 100%; }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Image placeholders (missing files) ------------------------------------ */
.ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: var(--ink);
  opacity: .55;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .01em;
  padding: 8px;
}
.ph--initials { font-family: "Bricolage Grotesque", sans-serif; font-size: 26px; font-weight: 800; }

/* ---- Lightbox -------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(20,18,16,.86);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox-inner {
  max-width: 88vw; max-height: 86vh;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.lightbox-inner img, .lightbox-inner .ph {
  max-width: 88vw; max-height: 86vh;
  width: auto; height: auto;
}
.lightbox-inner .ph { width: 70vw; height: 60vh; }
/* QR codes show small (≈25% of a full-size image) */
.lightbox--qr .lightbox-inner img { width: 170px; height: auto; max-width: 60vw; }
.lightbox-close {
  position: absolute; top: 18px; right: 22px;
  width: 42px; height: 42px;
  border-radius: 50%; border: none;
  background: rgba(255,255,255,.16);
  color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,.28); }

/* ---- Focus visibility ------------------------------------------------------ */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===========================================================================
   RESPONSIVE — 4 cols → 2 (≤820) → 1 (≤480). Strips stay horizontal.
   =========================================================================== */
@media (max-width: 820px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .c2, .c2r2 { grid-column: span 2; }
  /* Stacked feature needs more vertical room for image + copy. */
  .feature { flex-direction: column; grid-row: span 3; }
  .feature-img { min-height: 180px; }
}

@media (max-width: 480px) {
  /* Single column: let rows size to content so nothing clips.
     Horizontal strips inside cards still scroll sideways. */
  .bento { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; gap: 12px; }
  .c2, .c2r2, .r2, .feature, .tokyo, .hodge, .events.is-expanded { grid-column: span 1; grid-row: auto; }
  .folder { min-height: 150px; }
  /* shrink the big display headers so long words don't clip on phones */
  .slide-header, .checklist-card .slide-header { font-size: 42px; }
  .amas-title { font-size: 42px; }
  .hodge { flex-direction: column; align-items: flex-start; }
  .phone { align-self: center; }
  .profile { flex-direction: column; text-align: center; align-items: center; }
  .feature-img { min-height: 200px; }
  /* events block: a touch shorter so the square covers aren't oversized */
  .events.is-expanded { min-height: 360px; }
}

/* ===========================================================================
   REDUCED MOTION — disable transforms, transitions, smooth scroll.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    transition: none !important;
    animation: none !important;
  }
  a.card:hover, .card.is-clickable:hover,
  a.ama-item:hover, a.tokyo-card:hover { transform: none; }
}