:root {
  --cream: #fff6e8;
  --paper: #f7ecdc;
  --ink: #201719;
  --brown: #4a3730;
  --muted: #6c5e5d;
  --fuchsia: #e33b96;
  --chartreuse: #dcff45;
  --teal: #36bfa4;
  --cobalt: #4547ee;
  --coral: #ff8f9a;
  --slate: #656475;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 6% 16%, rgba(92,169,151,.13), transparent 19rem),
    radial-gradient(circle at 92% 10%, rgba(212,85,145,.10), transparent 20rem),
    linear-gradient(135deg, rgba(82,83,214,.018) 25%, transparent 25%, transparent 50%, rgba(82,83,214,.018) 50%, rgba(82,83,214,.018) 75%, transparent 75%),
    var(--cream);
  background-size: auto, auto, 34px 34px, auto;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.24em; }
a:hover { text-decoration-thickness: .16em; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 20; background: var(--ink); color: white; padding: .85rem 1rem; border-radius: 999px; }
.skip:focus { top: 1rem; }
.site-header { max-width: var(--max); margin: 0 auto; padding: 28px clamp(22px,4vw,46px); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.brand { font-family: Alegreya, Georgia, serif; font-weight: 700; font-size: clamp(1.35rem,2vw,1.75rem); letter-spacing: -.035em; text-decoration: none; }
.brand span { color: var(--fuchsia); font-style: italic; }
nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 15px 26px; font-size: .9rem; }
nav a { text-decoration: none; font-weight: 850; color: var(--brown); }
nav a:hover, nav a[aria-current="page"] { color: var(--fuchsia); }
nav a:focus-visible, .brand:focus-visible, .action:focus-visible, .page-card:focus-visible, .project-panel a:focus-visible, .friend-panel a:focus-visible, .now-panel a:focus-visible, .tech-panel a:focus-visible { outline: 4px solid var(--chartreuse); outline-offset: 5px; }
main { overflow: hidden; }
.hero, .page-hero, .section, .statement, footer { max-width: var(--max); margin: 0 auto; padding-left: clamp(22px,4vw,46px); padding-right: clamp(22px,4vw,46px); }
.hero { min-height: 585px; padding-top: clamp(44px,6vw,80px); padding-bottom: clamp(28px,4vw,48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, .84fr); gap: clamp(34px,6vw,78px); align-items: center; }
.page-hero { padding-top: clamp(56px,7vw,96px); padding-bottom: clamp(36px,5vw,66px); }
.eyebrow, .num, .page-card span, .map-node span { margin: 0 0 18px; text-transform: uppercase; letter-spacing: .17em; font-size: .74rem; font-weight: 900; color: var(--fuchsia); }
.eyebrow.magenta { color: var(--fuchsia); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Alegreya, Georgia, serif; font-weight: 700; letter-spacing: -.056em; }
h1 { max-width: 810px; font-size: clamp(3.05rem,6.85vw,6.95rem); line-height: .88; margin-bottom: 24px; }
h2 { font-size: clamp(2rem,4.2vw,4.35rem); line-height: .93; margin-bottom: 22px; }
h3 { margin: 0 0 12px; font-size: clamp(1.14rem,1.6vw,1.45rem); letter-spacing: -.035em; line-height: 1.08; font-weight: 900; }
.lede { max-width: 690px; margin: 0 0 20px; color: #4f4443; font-size: clamp(1.08rem,1.55vw,1.34rem); line-height: 1.56; }
p, .body-copy, .body-stack p, .project-panel p, .writing-panel p, .friend-panel p, .now-panel p, .page-card p, .map-node p, footer p { color: var(--muted); line-height: 1.62; font-size: clamp(1rem,1.25vw,1.08rem); }
.hero-actions, .connect-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 34px; }
.action { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 13px 19px; border-radius: 999px; text-decoration: none; font-weight: 900; box-shadow: 0 14px 36px rgba(32,23,25,.08); background: var(--chartreuse); color: var(--ink); }
.action.primary { background: var(--ink); color: white; box-shadow: 0 14px 36px rgba(32,23,25,.10); }
.action.hot { background: var(--fuchsia); color: white; box-shadow: 0 16px 40px rgba(227,59,150,.18); }
.mood-board { position: relative; min-height: 540px; }
.pattern, .portrait-card, .yes-card { position: absolute; box-shadow: 0 28px 84px rgba(32,23,25,.13); }
.pattern { border-radius: 34px; }
.textile-one { inset: 18px 56px 104px 0; transform: rotate(-3deg); background: repeating-linear-gradient(90deg, rgba(255,143,154,.68) 0 19px, rgba(255,246,232,.78) 19px 38px, rgba(54,191,164,.58) 38px 57px, rgba(255,246,232,.78) 57px 76px); }
.textile-two { inset: 92px 0 28px 84px; transform: rotate(4deg); opacity: .78; background: linear-gradient(135deg, rgba(220,255,69,.82) 0 24%, transparent 24% 35%, rgba(69,71,238,.62) 35% 55%, transparent 55% 66%, rgba(227,59,150,.70) 66% 100%); }
.portrait-card { right: 22px; top: 84px; width: 300px; height: 300px; margin: 0; border: 13px solid var(--cream); border-radius: 50%; overflow: hidden; }
.portrait-card img { display: block; width: 100%; height: 100%; object-fit: cover; filter: none; }
.yes-card { left: 36px; bottom: 28px; padding: 21px 25px; border-radius: 26px; color: white; background: var(--ink); transform: rotate(-2deg); }
.yes-card strong { display: block; font-family: Alegreya, Georgia, serif; font-size: clamp(3.25rem,6vw,5rem); line-height: .76; color: var(--chartreuse); }
.statement { padding-top: clamp(20px,3vw,38px); padding-bottom: clamp(36px,5vw,62px); }
.statement p, .context-intro p { font-family: Alegreya, Georgia, serif; font-weight: 700; letter-spacing: -.052em; font-size: clamp(1.45rem,3vw,3.05rem); line-height: 1.02; max-width: 960px; color: var(--ink); margin-bottom: 20px; }
.electric p:first-child, .thesis-strip p { color: var(--fuchsia); font-style: italic; }
.statement.electric p:not(:first-child) { font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(1.08rem,1.6vw,1.36rem); line-height: 1.58; letter-spacing: -.012em; font-weight: 500; max-width: 980px; }
.section { padding-top: clamp(50px,6vw,86px); padding-bottom: clamp(50px,6vw,86px); }
.page-grid, .map-grid { display: grid; gap: 20px; }
.page-grid { grid-template-columns: repeat(3, 1fr); }
.page-card, .project-panel, .writing-panel, .map-node { position: relative; overflow: hidden; border-radius: 32px; padding: clamp(24px,3vw,34px); background: rgba(255,255,255,.62); box-shadow: 0 22px 70px rgba(32,23,25,.07); }
.page-card { min-height: 245px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.page-card::before, .project-panel::before, .writing-panel::before, .map-node::before { content: ""; position: absolute; right: -54px; bottom: -60px; width: 170px; height: 170px; border-radius: 42px; transform: rotate(14deg); opacity: .44; background: var(--teal); }
.page-card:nth-child(2)::before, .project-panel.leni::before, .writing-panel:nth-child(2)::before { background: var(--coral); }
.page-card:nth-child(3)::before, .project-panel.waffle::before, .writing-panel:nth-child(3)::before { background: var(--chartreuse); opacity: .50; }
.page-card:nth-child(4)::before, .writing-panel:nth-child(4)::before { background: var(--cobalt); opacity: .18; }
.page-card:nth-child(5)::before { background: var(--fuchsia); opacity: .22; }
.page-card:nth-child(6)::before { background: var(--coral); opacity: .36; }
.page-card:nth-child(7)::before { background: var(--chartreuse); opacity: .42; }
.page-card > *, .project-panel > *, .writing-panel > *, .map-node > * { position: relative; z-index: 1; }
.page-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.74); box-shadow: 0 30px 84px rgba(32,23,25,.10); }
.hot-panel, .map-node.hot-node { background: var(--ink); color: white; }
.hot-panel::before, .map-node.hot-node::before { background: rgba(220,255,69,.72); opacity: .52; }
.hot-panel p, .hot-panel .num, .map-node.hot-node p, .map-node.hot-node span { color: rgba(255,255,255,.84); }
.hot-panel h2, .map-node.hot-node h2 { color: white; }
.page-card.loud { background: linear-gradient(135deg, rgba(255,246,232,.90), rgba(54,191,164,.20)); color: var(--ink); }
.page-card.loud::before { right: -56px; bottom: -68px; width: 190px; height: 190px; border-radius: 52px; background: var(--ink); opacity: .18; transform: rotate(14deg); }
.page-card.loud::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 16px; background: repeating-linear-gradient(180deg, var(--ink) 0 18px, var(--cream) 18px 34px, var(--fuchsia) 34px 52px, var(--cream) 52px 68px, var(--teal) 68px 86px); opacity: .72; z-index: 0; }
.page-card.loud p, .page-card.loud span { color: var(--muted); }
.page-card.loud h3 { color: var(--ink); }
.project-panel { margin-bottom: 24px; }
.project-panel.gedi { background: rgba(220,255,69,.42); }
.project-panel.leni { background: rgba(255,143,154,.38); }
.project-panel.waffle { background: rgba(54,191,164,.34); }
.quiet-label { display: inline-block; margin-top: 12px; font-weight: 900; color: var(--fuchsia); }
.split { display: grid; grid-template-columns: .86fr 1fr; gap: clamp(36px,8vw,110px); align-items: start; }
.hot-split { margin-top: 22px; margin-bottom: 52px; border-radius: 42px; background: var(--paper); box-shadow: 0 22px 78px rgba(32,23,25,.08); position: relative; overflow: hidden; }
.hot-split::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 16px; background: repeating-linear-gradient(180deg, rgba(212,85,145,.45) 0 20px, rgba(255,246,232,.72) 20px 40px, rgba(54,191,164,.56) 40px 60px, rgba(255,246,232,.72) 60px 80px); }
.body-stack p { margin-bottom: 22px; }
.writing-page { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.writing-panel { min-height: 245px; }
.writing-panel.pink-panel { background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,229,236,.92)); color: var(--ink); }
.writing-panel.pink-panel::before { background: rgba(255,82,139,.24); opacity: .74; }
.writing-panel.pink-panel::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 18px; background: repeating-linear-gradient(90deg, rgba(255,82,139,.30) 0 22px, rgba(255,255,255,.55) 22px 42px, rgba(255,190,118,.22) 42px 62px, rgba(255,255,255,.55) 62px 82px); opacity: .88; z-index: 0; }
.writing-panel.pink-panel h2 { color: var(--ink); }
.writing-panel.pink-panel p { color: var(--muted); }
.friend-board, .now-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: stretch; }
.friend-panel, .now-panel { position: relative; overflow: hidden; border-radius: 34px; padding: clamp(25px,3.2vw,38px); background: rgba(255,255,255,.66); box-shadow: 0 22px 70px rgba(32,23,25,.07); min-height: 260px; display: flex; flex-direction: column; align-items: flex-start; }
.friend-panel::before, .now-panel::before { content: ""; position: absolute; right: -52px; bottom: -58px; width: 188px; height: 188px; border-radius: 46px; transform: rotate(13deg); background: var(--teal); opacity: .35; }
.friend-panel > *, .now-panel > * { position: relative; z-index: 1; }
.friend-panel .action, .now-panel .action { margin-top: auto; }
.friend-panel h2, .now-panel h2 { font-size: clamp(1.9rem,3.2vw,3.35rem); }
.featured-friend, .big-now { grid-column: span 2; min-height: 310px; background: linear-gradient(135deg, rgba(255,246,232,.92), rgba(255,143,154,.24)); }
.featured-friend::before, .big-now::before { width: 260px; height: 260px; border-radius: 62px; background: repeating-linear-gradient(90deg, rgba(255,143,154,.70) 0 21px, rgba(255,246,232,.72) 21px 41px, rgba(54,191,164,.54) 41px 62px, rgba(255,246,232,.72) 62px 82px); opacity: .68; }
.friend-panel:nth-child(2)::before, .now-panel:nth-child(2)::before { background: var(--chartreuse); opacity: .46; }
.friend-panel:nth-child(3)::before, .now-panel:nth-child(3)::before { background: var(--cobalt); opacity: .16; }
.friend-panel:nth-child(4)::before, .now-panel:nth-child(4)::before { background: var(--fuchsia); opacity: .20; }
.curated-friends .friend-panel:nth-child(6n+1) { background: linear-gradient(135deg, rgba(255,246,232,.92), rgba(220,255,69,.22)); }
.curated-friends .friend-panel:nth-child(6n+2) { background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,143,154,.24)); }
.curated-friends .friend-panel:nth-child(6n+3) { background: linear-gradient(135deg, rgba(255,246,232,.88), rgba(54,191,164,.26)); }
.curated-friends .friend-panel:nth-child(6n+4) { background: linear-gradient(135deg, rgba(255,255,255,.80), rgba(82,83,214,.13)); }
.curated-friends .friend-panel:nth-child(6n+5) { background: linear-gradient(135deg, rgba(255,246,232,.90), rgba(255,190,118,.30)); }
.curated-friends .friend-panel:nth-child(6n+6) { background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(227,59,150,.16)); }
.curated-friends .friend-panel:nth-child(6n+1)::before { background: var(--chartreuse); opacity: .40; border-radius: 50%; transform: rotate(-10deg); }
.curated-friends .friend-panel:nth-child(6n+2)::before { background: var(--fuchsia); opacity: .22; border-radius: 54px 26px 54px 26px; transform: rotate(15deg); }
.curated-friends .friend-panel:nth-child(6n+3)::before { background: var(--teal); opacity: .36; border-radius: 34px 62px 34px 62px; transform: rotate(-14deg); }
.curated-friends .friend-panel:nth-child(6n+4)::before { background: var(--cobalt); opacity: .18; border-radius: 50%; transform: rotate(8deg); }
.curated-friends .friend-panel:nth-child(6n+5)::before { background: var(--coral); opacity: .34; border-radius: 58px 24px 44px 30px; transform: rotate(20deg); }
.curated-friends .friend-panel:nth-child(6n+6)::before { background: var(--fuchsia); opacity: .20; border-radius: 30px 64px 30px 64px; transform: rotate(-18deg); }
.friend-panel.soft-note, .curated-friends .friend-panel.soft-note, .now-panel.not-now { background: var(--ink); color: white; }
.friend-panel.soft-note h2, .now-panel.not-now h2 { color: white; }
.friend-panel.soft-note p, .friend-panel.soft-note .num, .now-panel.not-now p, .now-panel.not-now .num { color: rgba(255,255,255,.82); }
.friend-panel.soft-note::before, .curated-friends .friend-panel.soft-note::before, .now-panel.not-now::before { background: rgba(220,255,69,.72); opacity: .52; }
.now-stamp { display: inline-flex; align-items: center; margin-top: 14px; padding: .75rem 1rem; border-radius: 999px; font-weight: 900; color: var(--ink); background: rgba(220,255,69,.62); }
.now-list { margin: 0; padding-left: 1.2rem; color: rgba(255,255,255,.84); line-height: 1.72; font-size: clamp(1.02rem,1.3vw,1.12rem); }
.now-list li + li { margin-top: .45rem; }

.tech-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: stretch; padding-top: clamp(22px,4vw,56px); }
.tech-panel { position: relative; overflow: hidden; border-radius: 34px; padding: clamp(25px,3.2vw,38px); background: rgba(255,255,255,.66); box-shadow: 0 22px 70px rgba(32,23,25,.07); min-height: 250px; display: flex; flex-direction: column; align-items: flex-start; }
.tech-panel::before { content: ""; position: absolute; right: -52px; bottom: -58px; width: 188px; height: 188px; border-radius: 46px; transform: rotate(13deg); background: var(--teal); opacity: .35; }
.tech-panel > * { position: relative; z-index: 1; }
.tech-panel h2 { font-size: clamp(1.9rem,3.2vw,3.35rem); }
.tech-panel:nth-child(2n) { background: linear-gradient(135deg, rgba(255,255,255,.80), rgba(255,143,154,.24)); }
.tech-panel:nth-child(3n) { background: linear-gradient(135deg, rgba(255,246,232,.88), rgba(220,255,69,.28)); }
.tech-panel:nth-child(4n) { background: linear-gradient(135deg, rgba(255,255,255,.80), rgba(69,71,238,.13)); }
.tech-panel:nth-child(5n) { background: linear-gradient(135deg, rgba(255,246,232,.90), rgba(54,191,164,.24)); }
.tech-panel:nth-child(2)::before { background: var(--fuchsia); opacity: .20; border-radius: 54px 26px 54px 26px; }
.tech-panel:nth-child(3)::before { background: var(--chartreuse); opacity: .46; border-radius: 50%; }
.tech-panel:nth-child(4)::before { background: var(--cobalt); opacity: .16; }
.tech-panel:nth-child(5)::before { background: var(--coral); opacity: .34; border-radius: 58px 24px 44px 30px; }
.tech-panel:nth-child(6)::before { background: var(--teal); opacity: .38; border-radius: 34px 62px 34px 62px; }
.tech-panel:nth-child(7)::before { background: var(--ink); opacity: .18; }
.tech-panel:nth-child(8)::before { background: var(--fuchsia); opacity: .22; border-radius: 30px 64px 30px 64px; }
.featured-tech { grid-column: span 2; min-height: 310px; background: linear-gradient(135deg, rgba(255,246,232,.92), rgba(255,143,154,.24)); }
.featured-tech::before { width: 260px; height: 260px; border-radius: 62px; background: repeating-linear-gradient(90deg, rgba(255,143,154,.70) 0 21px, rgba(255,246,232,.72) 21px 41px, rgba(54,191,164,.54) 41px 62px, rgba(255,246,232,.72) 62px 82px); opacity: .68; }
.stack-strip { display: grid; grid-template-columns: .72fr 1fr; gap: clamp(32px,6vw,78px); align-items: start; }
.tech-cloud span:nth-child(1) { flex: 0 1 38%; }
.tech-cloud span:nth-child(2) { flex: 0 1 50%; }
.tech-cloud span:nth-child(3) { flex: 0 1 44%; }
.tech-cloud span:nth-child(4) { flex: 0 1 39%; }
.tech-cloud span:nth-child(5) { flex: 0 1 50%; }
.tech-cloud span:nth-child(6) { flex: 0 1 55%; }

.map-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.map-node { min-height: 235px; display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 0; }

.map-node h2 { font-size: clamp(1.45rem,2.4vw,2.45rem); }
.map-node.origin, .map-node.big-node { grid-column: span 2; background: var(--paper); }
.map-node.origin::before, .map-node.big-node::before { background: linear-gradient(135deg, rgba(255,143,154,.70) 0 20%, rgba(255,246,232,.66) 20% 38%, rgba(54,191,164,.56) 38% 56%, rgba(255,246,232,.66) 56% 70%, rgba(220,255,69,.62) 70% 100%); opacity: .68; }
.map-node.closing-node { grid-column: span 3; min-height: auto; background: var(--ink); color: white; }
.map-node.closing-node::before { background: rgba(82,83,214,.26); }
.map-node.closing-node p, .map-node.closing-node span { color: rgba(255,255,255,.82); }

.context-page-body .context-hero { padding-bottom: clamp(18px,3vw,36px); }
.context-page-body .map-grid { padding-top: clamp(22px,4vw,56px); }
.context-page-body .map-node { isolation: isolate; }
.context-page-body .map-node::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.context-page-body .map-node span { display: inline-flex; align-items: center; justify-content: center; width: 3.1rem; height: 3.1rem; margin-bottom: 22px; border-radius: 50%; font-family: Alegreya, Georgia, serif; font-size: 1.3rem; line-height: 1; letter-spacing: -.04em; background: rgba(255,255,255,.74); color: var(--ink); box-shadow: 0 12px 32px rgba(32,23,25,.08); }
.context-page-body .node-01 { background: linear-gradient(135deg, rgba(255,246,232,.92), rgba(255,143,154,.30)); border-radius: 52px 28px 36px 36px; }
.context-page-body .node-01::before { inset: auto -44px -54px auto; width: 230px; height: 230px; border-radius: 54px; background: repeating-linear-gradient(90deg, rgba(255,143,154,.72) 0 18px, rgba(255,246,232,.72) 18px 36px, rgba(54,191,164,.58) 36px 54px, rgba(255,246,232,.72) 54px 72px); transform: rotate(-8deg); opacity: .72; }
.context-page-body .node-01::after { left: 28px; bottom: 22px; width: 116px; height: 20px; border-radius: 999px; background: var(--fuchsia); opacity: .22; }
.context-page-body .node-02 { background: rgba(255,143,154,.36); border-radius: 28px 54px 30px 38px; }
.context-page-body .node-02::before { right: -42px; top: -52px; bottom: auto; width: 170px; height: 170px; border-radius: 50%; background: var(--chartreuse); opacity: .54; transform: none; }
.context-page-body .node-02::after { right: 28px; bottom: 28px; width: 72px; height: 72px; border-radius: 22px; background: var(--cobalt); opacity: .16; transform: rotate(16deg); }
.context-page-body .node-03 { background: linear-gradient(135deg, rgba(255,246,232,.88), rgba(220,255,69,.28)); border-radius: 34px 34px 58px 28px; }
.context-page-body .node-03::before { right: -34px; bottom: -42px; width: 184px; height: 184px; border-radius: 42px; background: var(--ink); opacity: .20; transform: rotate(20deg); }
.context-page-body .node-03::after { left: 0; top: 0; width: 18px; height: 100%; background: repeating-linear-gradient(180deg, var(--ink) 0 22px, var(--cream) 22px 40px, var(--teal) 40px 62px, var(--cream) 62px 80px, var(--fuchsia) 80px 102px); opacity: .74; }
.context-page-body .node-04 { background: rgba(54,191,164,.30); border-radius: 52px 30px 52px 30px; }
.context-page-body .node-04::before { right: -20px; bottom: -62px; width: 190px; height: 190px; border-radius: 50%; background: var(--fuchsia); opacity: .22; transform: none; }
.context-page-body .node-04::after { left: 0; bottom: 0; width: 100%; height: 14px; background: repeating-linear-gradient(90deg, var(--teal) 0 24px, transparent 24px 42px, var(--chartreuse) 42px 66px, transparent 66px 84px); opacity: .65; }
.context-page-body .node-05 { background: linear-gradient(135deg, rgba(220,255,69,.58), rgba(255,246,232,.78)); border-radius: 30px 64px 38px 38px; }
.context-page-body .node-05::before { right: -68px; top: 30px; bottom: auto; width: 210px; height: 210px; border-radius: 44px; background: var(--cobalt); opacity: .18; transform: rotate(10deg); }
.context-page-body .node-05::after { left: 0; top: 0; width: 18px; height: 100%; background: repeating-linear-gradient(180deg, var(--fuchsia) 0 20px, var(--cream) 20px 40px, var(--teal) 40px 60px, var(--cream) 60px 80px); opacity: .66; }
.context-page-body .node-06 { background: linear-gradient(150deg, rgba(69,71,238,.18), rgba(255,255,255,.68)); border-radius: 34px 26px 60px 34px; }
.context-page-body .node-06::before { right: -38px; bottom: -44px; width: 170px; height: 170px; border-radius: 34px; background: var(--coral); opacity: .44; transform: rotate(-18deg); }
.context-page-body .node-06::after { right: 30px; top: 30px; width: 64px; height: 20px; border-radius: 999px; background: var(--cobalt); opacity: .32; }
.context-page-body .node-07 { background: linear-gradient(135deg, rgba(255,143,154,.30), rgba(54,191,164,.22)); border-radius: 30px 46px 30px 62px; }
.context-page-body .node-07::before { right: -60px; bottom: 8px; width: 195px; height: 112px; border-radius: 999px; background: var(--teal); opacity: .42; transform: rotate(-20deg); }
.context-page-body .node-07::after { left: 28px; bottom: 28px; width: 58px; height: 58px; border-radius: 18px; background: var(--chartreuse); opacity: .52; transform: rotate(12deg); }
.context-page-body .node-08 { background: linear-gradient(135deg, rgba(255,246,232,.86), rgba(255,143,154,.32)); border-radius: 58px 30px 34px 34px; }
.context-page-body .node-08::before { right: -54px; bottom: -50px; width: 190px; height: 190px; border-radius: 46px; background: repeating-linear-gradient(135deg, rgba(220,255,69,.72) 0 22px, rgba(255,246,232,.72) 22px 42px, rgba(54,191,164,.54) 42px 64px, rgba(255,246,232,.72) 64px 84px); opacity: .62; transform: rotate(10deg); }
.context-page-body .node-08::after { left: 28px; bottom: 26px; width: 88px; height: 88px; border-radius: 28px; background: var(--cobalt); opacity: .14; transform: rotate(-14deg); }
.context-page-body .node-09 { background: linear-gradient(135deg, rgba(54,191,164,.30), rgba(255,246,232,.82)); border-radius: 34px 58px 34px 30px; }
.context-page-body .node-09::before { right: -54px; bottom: -56px; width: 200px; height: 200px; border-radius: 52px; background: var(--coral); opacity: .36; transform: rotate(-14deg); }
.context-page-body .node-09::after { left: 0; top: 0; width: 100%; height: 16px; background: repeating-linear-gradient(90deg, var(--fuchsia) 0 24px, transparent 24px 44px, var(--chartreuse) 44px 68px, transparent 68px 88px, var(--teal) 88px 112px); opacity: .58; }
.context-page-body .node-03 span { background: var(--ink); color: white; }
.thesis-strip { padding-top: 30px; }
.thesis-strip p { font-family: Alegreya, Georgia, serif; font-size: clamp(1.5rem,3.35vw,3.45rem); line-height: 1.06; letter-spacing: -.052em; font-weight: 700; }
.principle-cloud { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 20px; max-width: 1080px; }
.principle-cloud span { display: inline-flex; align-items: center; justify-content: flex-start; font-size: clamp(1.16rem,2.02vw,2.05rem); line-height: 1.04; letter-spacing: -.046em; font-weight: 900; color: var(--ink); border-radius: 30px 44px 34px 42px; padding: .46em .78em .54em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.26), 0 8px 24px rgba(32,23,25,.035); }
.principle-cloud span:nth-child(1) { flex: 0 1 55%; background: rgba(255,255,255,.64); border-radius: 36px 52px 30px 44px; }
.principle-cloud span:nth-child(2) { flex: 0 1 35%; background: rgba(255,143,154,.34); border-radius: 42px 30px 46px 32px; }
.principle-cloud span:nth-child(3) { flex: 0 1 41%; background: rgba(220,255,69,.42); border-radius: 30px 44px 36px 48px; }
.principle-cloud span:nth-child(4) { flex: 0 1 46%; background: rgba(227,59,150,.17); border-radius: 48px 34px 42px 30px; }
.principle-cloud span:nth-child(5) { flex: 0 1 41%; background: rgba(54,191,164,.32); border-radius: 34px 50px 30px 40px; }
.principle-cloud span:nth-child(6) { flex: 0 1 39%; background: rgba(69,71,238,.13); border-radius: 44px 32px 48px 34px; }
.principle-cloud span:nth-child(7) { flex: 0 1 46%; background: rgba(255,190,118,.33); border-radius: 32px 46px 40px 30px; }
.principle-cloud span:nth-child(8) { flex: 0 1 42%; background: rgba(181,138,255,.22); border-radius: 50px 34px 30px 44px; }
footer { padding-top: 34px; padding-bottom: 52px; }
footer p { font-size: .95rem; }
@media (max-width: 980px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  nav { justify-content: flex-start; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .mood-board { min-height: 440px; max-width: 560px; }
  .page-grid { grid-template-columns: repeat(2,1fr); }
  .map-grid, .writing-page, .split, .friend-board, .now-grid, .tech-grid, .stack-strip { grid-template-columns: 1fr; }
  .map-node.origin, .map-node.big-node, .map-node.closing-node, .featured-friend, .big-now, .featured-tech { grid-column: span 1; }
}
@media (max-width: 560px) {
  nav { gap: 12px 15px; font-size: .84rem; }
  h1 { font-size: clamp(2.85rem,13vw,4.4rem); }
  h2 { font-size: clamp(1.9rem,9vw,3rem); }
  .hero, .page-hero, .section, .statement, footer { padding-left: 20px; padding-right: 20px; }
  .mood-board { min-height: 370px; }
  .portrait-card { right: 18px; top: 82px; width: 205px; height: 205px; border-width: 9px; }
  .yes-card { left: 14px; bottom: 10px; }
  .textile-one { inset: 12px 40px 94px 0; }
  .textile-two { inset: 86px 0 28px 50px; }
  .page-grid { grid-template-columns: 1fr; }
  .principle-cloud { gap: 14px; }
  .principle-cloud span { flex-basis: 100% !important; min-height: 0; border-radius: 24px 32px 26px 34px; }
  .page-card { min-height: 210px; }
  .statement p, .context-intro p { font-size: clamp(1.38rem,6.5vw,2.15rem); }
}