/* ==========================================================
   GABRIELLE EMEM HARRY  ·  THE LOOM
   one loom, two threads — writer / cultural strategist
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ----------  TOKENS  ---------- */
:root{
  --maroon:#6A1D2F;
  --maroon-deep:#4A1422;
  --indigo:#1A1F4D;
  --indigo-deep:#0E1238;
  --cream:#F2EAD3;
  --cream-soft:#E6DCC0;
  --mustard:#D9A94B;
  --sienna:#B8451E;
  --fuchsia:#E5408B;
  --olive:#5C6B3A;

  --serif:'Space Grotesk', -apple-system, sans-serif;  /* unified — display falls back to weight, not style */
  --sans:'Space Grotesk', -apple-system, sans-serif;
  --mono:'JetBrains Mono', 'Courier New', monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-quart:cubic-bezier(.25,1,.5,1);
}

/* ----------  RESET  ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--indigo);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:transparent;cursor:none;color:inherit}
::selection{background:var(--mustard);color:var(--indigo)}

/* ----------  CUSTOM CURSOR  ---------- */
.cursor{
  position:fixed;top:0;left:0;width:14px;height:14px;
  border-radius:50%;
  background:var(--cream);
  mix-blend-mode:difference;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .25s var(--ease),height .25s var(--ease),background .2s ease;
}
.cursor.is-hover{width:38px;height:38px}
.cursor.is-text{width:4px;height:24px;border-radius:1px}
@media (hover:none){body{cursor:auto} .cursor{display:none}}

/* ----------  TOP CHROME  ---------- */
/* Default (landing): transparent — sits over the loom panels.
   Text is cream so it reads against both the maroon and indigo halves. */
.chrome{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 36px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);
  background:transparent;
  pointer-events:none;
}
.chrome a,.chrome button{pointer-events:auto}
.wordmark{
  font-family:var(--sans);font-weight:500;
  font-size:14px;letter-spacing:.02em;text-transform:none;
  color:var(--cream);
}
.chrome-right{display:flex;align-items:center;gap:18px;color:var(--cream)}
.mini-glyph{
  width:18px;height:18px;display:inline-block;
  background:url('images/glyphs/welcome-mustard.png') center/contain no-repeat;
  opacity:.85;
}
/* Interior pages: chrome takes the page background colour so content scrolls cleanly behind it */
.interior .chrome{
  background:var(--bg);
  color:var(--accent-strong,var(--cream));
  border-bottom:1px solid var(--accent-rule);
  pointer-events:auto;
}
.interior .chrome .wordmark,.interior .chrome-right{color:var(--accent-strong,var(--cream))}

/* ----------  STAGE / LANDING PANELS  ---------- */
.stage{
  position:relative;
  min-height:100vh;
  display:grid;grid-template-columns:1fr 1fr;
}
.panel{
  position:relative;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:140px 56px 120px;
  overflow:hidden;
  transition:flex .8s var(--ease);
}
.panel--writer{
  background:linear-gradient(180deg,var(--maroon) 0%,var(--maroon-deep) 100%);
  color:var(--cream);
}
.panel--strategist{
  background:linear-gradient(180deg,var(--indigo) 0%,var(--indigo-deep) 100%);
  color:var(--cream);
}

/* glyph in each panel */
.panel-glyph{
  width:78px;height:78px;
  margin-bottom:36px;
  opacity:0;transform:translateY(12px) scale(.96);
  animation:glyphIn 1.2s var(--ease) .25s forwards,
            glyphBreathe 7s ease-in-out 1.6s infinite;
}
.panel--writer .panel-glyph{
  background:url('images/glyphs/story-mustard.png') center/contain no-repeat;
}
/* strategist glyph rendered noticeably larger — the gathering mark wants the room */
.panel--strategist .panel-glyph{
  width:148px;height:148px;
  margin-bottom:42px;
  background:url('images/glyphs/congress-mustard.png') center/contain no-repeat;
}
@keyframes glyphIn{
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes glyphBreathe{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-3px) scale(1.015)}
}

/* role title — Space Grotesk light at very large scale */
.role{
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(56px,8.5vw,128px);
  line-height:.95;letter-spacing:-.035em;
  color:var(--cream);
  text-align:center;
  text-transform:lowercase;
  opacity:0;transform:translateY(18px);
  animation:rise 1s var(--ease) .45s forwards;
}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

/* CTA */
.cta{
  margin-top:54px;
  font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--cream);
  position:relative;padding:6px 2px;
  opacity:0;animation:rise 1s var(--ease) .8s forwards;
}
.cta::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform-origin:left;
  transition:transform .55s var(--ease);
}
.panel--writer .cta::after{background:var(--mustard)}
.panel--strategist .cta::after{background:var(--fuchsia)}
.panel:hover .cta::after{animation:underlineSweep 1.4s var(--ease) infinite}
@keyframes underlineSweep{
  0%{transform:scaleX(1);transform-origin:left}
  50%{transform:scaleX(0);transform-origin:right}
  50.01%{transform-origin:left}
  100%{transform:scaleX(1)}
}

/* hover bias on landing — gentle tilt of weight, never claustrophobic */
.stage:hover .panel{flex:.92}
.stage:hover .panel:hover{flex:1.16}
.panel:hover .panel-glyph{
  animation:glyphIn 1.2s var(--ease) forwards,
            glyphTilt 1.4s var(--ease) infinite alternate;
}
@keyframes glyphTilt{
  from{transform:rotate(-2deg) scale(1.02)}
  to{transform:rotate(2deg) scale(1.04)}
}

/* ----------  THE SEAM (vertical thread between panels) ---------- */
.seam{
  position:absolute;top:0;bottom:0;left:50%;width:64px;
  transform:translateX(-50%);
  z-index:5;
  background:url('images/glyphs/welcome-mustard.png') center/26px repeat-y;
  opacity:.18;
  pointer-events:none;
  mix-blend-mode:overlay;
}
.seam::before,.seam::after{
  content:'';position:absolute;left:50%;width:1px;background:var(--mustard);opacity:.45;
}
.seam::before{top:0;bottom:50%;transform:translateX(-50%)}
.seam::after{top:50%;bottom:0;transform:translateX(-50%)}

/* AMPERSAND — half mustard / half fuchsia, sits on the seam */
.amp{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--sans);font-weight:300;
  font-size:clamp(112px,14vw,220px);
  line-height:1;
  background:linear-gradient(90deg,var(--mustard) 0 50%,var(--fuchsia) 50% 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  z-index:6;pointer-events:none;
  opacity:0;animation:rise 1.4s var(--ease) .9s forwards,
                   ampSway 9s ease-in-out 2s infinite;
  text-shadow:0 0 60px rgba(0,0,0,.25);
}
@keyframes ampSway{
  0%,100%{transform:translate(-50%,-50%) rotate(-3deg)}
  50%{transform:translate(-50%,-50%) rotate(3deg)}
}

/* ----------  WEAVE TRANSITION  ---------- */
.weave{
  position:fixed;inset:0;z-index:200;
  display:grid;grid-template-columns:repeat(16,1fr);
  pointer-events:none;
}
.thread{
  background:var(--indigo);
  transform:scaleY(0);transform-origin:top;
}
.weave.is-out .thread{
  animation:threadDown .8s var(--ease) forwards;
}
.weave.is-out .thread:nth-child(odd){background:var(--maroon)}
.weave.is-in .thread{
  transform:scaleY(1);transform-origin:bottom;
  animation:threadUp .9s var(--ease) forwards;
}
@keyframes threadDown{
  to{transform:scaleY(1)}
}
@keyframes threadUp{
  to{transform:scaleY(0)}
}
.weave .thread:nth-child(1){animation-delay:.00s}
.weave .thread:nth-child(2){animation-delay:.04s}
.weave .thread:nth-child(3){animation-delay:.08s}
.weave .thread:nth-child(4){animation-delay:.02s}
.weave .thread:nth-child(5){animation-delay:.10s}
.weave .thread:nth-child(6){animation-delay:.06s}
.weave .thread:nth-child(7){animation-delay:.12s}
.weave .thread:nth-child(8){animation-delay:.05s}
.weave .thread:nth-child(9){animation-delay:.14s}
.weave .thread:nth-child(10){animation-delay:.07s}
.weave .thread:nth-child(11){animation-delay:.16s}
.weave .thread:nth-child(12){animation-delay:.03s}
.weave .thread:nth-child(13){animation-delay:.18s}
.weave .thread:nth-child(14){animation-delay:.09s}
.weave .thread:nth-child(15){animation-delay:.20s}
.weave .thread:nth-child(16){animation-delay:.11s}

/* ----------  INTERIOR PAGES  ---------- */
.interior{
  background:var(--bg,var(--cream));
  color:var(--accent-strong,var(--indigo));
  min-height:100vh;
  padding:140px 0 120px;
}
.page-writer{
  --bg:var(--maroon);
  --bg-deep:var(--maroon-deep);
  --accent-strong:var(--cream);
  --accent-soft:rgba(242,234,211,.7);
  --accent-rule:rgba(242,234,211,.18);
  --highlight:var(--mustard);
}
.page-strat{
  --bg:var(--indigo);
  --bg-deep:var(--indigo-deep);
  --accent-strong:var(--cream);
  --accent-soft:rgba(242,234,211,.7);
  --accent-rule:rgba(242,234,211,.18);
  --highlight:var(--fuchsia);
}
.page-about{
  --bg:var(--cream);
  --bg-deep:var(--cream-soft);
  --accent-strong:var(--indigo);
  --accent-soft:rgba(26,31,77,.65);
  --accent-rule:rgba(26,31,77,.18);
  --highlight:var(--sienna);
}

.wrap{
  max-width:1280px;margin:0 auto;padding:0 56px;
}
.page-head{
  display:grid;grid-template-columns:200px 1fr;gap:48px;
  padding-bottom:56px;border-bottom:1px solid var(--accent-rule);
  margin-bottom:64px;
}
.page-head .eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent-soft);padding-top:6px;
}
.page-head h1{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(48px,7vw,108px);line-height:1;letter-spacing:-.04em;
  color:var(--accent-strong);text-transform:lowercase;
}
.page-head h1 em{font-style:normal;font-weight:500;color:var(--highlight)}

/* ----------  SECTION (sticky mark on left)  ---------- */
.section{
  display:grid;grid-template-columns:200px 1fr;gap:48px;
  padding:56px 0;
  border-top:1px solid var(--accent-rule);
}
.section:first-of-type{border-top:0;padding-top:0}
.section-mark{position:sticky;top:140px;align-self:start}
.section-mark .glyph{
  width:60px;height:60px;margin-bottom:14px;opacity:.85;
}
.section-mark .label{
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent-soft);
}
.section-body h2{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(28px,3.4vw,48px);line-height:1.1;
  color:var(--accent-strong);margin-bottom:28px;letter-spacing:-.025em;
  text-transform:lowercase;
}
.section-body h2 em{font-style:normal;font-weight:500}

/* ----------  LIST (publications / engagements) ---------- */
.list{display:flex;flex-direction:column}
.list-item{
  position:relative;
  display:grid;grid-template-columns:90px 1fr auto;gap:28px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--accent-rule);
}
.list-item:last-child{border-bottom:0}
.list-item .num{
  font-family:var(--mono);font-size:10px;letter-spacing:.25em;
  color:var(--accent-soft);
}
.list-item .title{
  font-family:var(--sans);font-weight:500;font-size:19px;line-height:1.35;
  color:var(--accent-strong);letter-spacing:-.005em;
}
.list-item .title em{font-style:normal;font-weight:400;opacity:.85}
.list-item.lc .title{font-weight:300;text-transform:lowercase;font-size:18px;letter-spacing:0}
.list-item .venue{
  font-family:var(--sans);font-size:13px;color:var(--accent-soft);
  letter-spacing:.04em;text-align:right;
}

/* hover-reveal little glyph at end of row — writer page only (publications) */
.page-writer .list-item::after{
  content:'';position:absolute;right:-44px;top:50%;
  width:24px;height:24px;
  background:url('images/glyphs/calabash-mustard.png') center/contain no-repeat;
  opacity:0;transform:translate(-12px,-50%);
  transition:opacity .35s var(--ease),transform .55s var(--ease);
}
.page-writer .list-item:hover::after{opacity:.85;transform:translate(0,-50%)}
.list-item:hover .title{color:var(--highlight);transition:color .25s ease}

/* ----------  DEV CARDS (in-development books)  ---------- */
.dev-list{display:grid;gap:28px}
.dev-card{
  display:grid;grid-template-columns:120px 1fr;gap:32px;
  padding:32px 0;border-top:1px solid var(--accent-rule);
}
.dev-card:first-child{border-top:0;padding-top:0}
.dev-card .marker{
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent-soft);padding-top:8px;
}
.dev-card .name{
  font-family:var(--sans);font-weight:400;
  font-size:24px;line-height:1.2;color:var(--accent-strong);
  margin-bottom:10px;letter-spacing:-.015em;
}
.dev-card .name em{font-style:normal;font-weight:500;color:var(--highlight)}
.dev-card .desc{
  font-family:var(--sans);font-size:15px;color:var(--accent-soft);
  max-width:60ch;
}

/* ----------  ABOUT GRID  ---------- */
.about-grid{
  display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:start;
}
.about-portrait{
  position:relative;
}
.about-portrait img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  filter:contrast(1.02) saturate(.92);
}
.about-portrait .corner-glyph{
  position:absolute;left:-28px;bottom:-28px;
  width:96px;height:96px;
  background:url('images/glyphs/woman-mustard.png') center/contain no-repeat;
  opacity:.9;
}
.about-bio p{
  font-family:var(--sans);font-weight:400;font-size:19px;line-height:1.6;
  color:var(--accent-strong);margin-bottom:1.2em;letter-spacing:-.005em;
}
.about-bio p em{font-style:normal;font-weight:500}
.about-bio .meta{
  font-family:var(--mono);font-size:11px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--accent-soft);margin-top:36px;
}

/* ----------  INTERIOR NAV / RETURN  ---------- */
.interior-nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:48px 0 0;border-top:1px solid var(--accent-rule);
  margin-top:80px;
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent-soft);
}
.interior-nav a{position:relative;padding:6px 0}
.interior-nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.interior-nav a:hover::after{transform:scaleX(1);transform-origin:left}

/* ----------  FOOTER  ---------- */
/* Default (landing): transparent — sits over the loom panels.
   Cream text reads against both halves. */
.foot{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 36px;
  font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(242,234,211,.7);
  background:transparent;
  pointer-events:none;
}
.foot a{pointer-events:auto;color:var(--cream)}
.interior .foot{
  color:var(--accent-soft);
  background:var(--bg);
  border-top:1px solid var(--accent-rule);
  pointer-events:auto;
}
.interior .foot a{color:var(--accent-strong)}

/* ----------  REVEAL  ---------- */
.r{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.r.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.05s}.d2{transition-delay:.12s}.d3{transition-delay:.2s}
.d4{transition-delay:.28s}.d5{transition-delay:.38s}

/* ----------  REDUCED MOTION  ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .r{opacity:1;transform:none}
  .panel-glyph,.role,.cta,.amp{opacity:1;transform:none}
}

/* ----------  SUBSTACK CARD  ---------- */
.substack{
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
  padding:32px 36px;
  border:1px solid var(--accent-rule);
  background:rgba(217,169,75,.06);
  border-radius:2px;
}
.substack .lead{
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.5;
  color:var(--accent-strong);max-width:48ch;
}
.substack .lead strong{font-weight:500;color:var(--highlight)}
.substack .sub-cta{
  font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent-strong);
  padding:14px 22px;border:1px solid var(--accent-strong);
  white-space:nowrap;transition:background .25s ease,color .25s ease;
}
.substack .sub-cta:hover{background:var(--accent-strong);color:var(--bg)}

/* ----------  ROLES (Cultural Strategist positions)  ---------- */
.role-card{
  padding:32px 0;border-top:1px solid var(--accent-rule);
  display:grid;grid-template-columns:170px 1fr;gap:32px;
}
.role-card:first-child{border-top:0;padding-top:0}
.role-card .role-meta{
  font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent-soft);padding-top:6px;line-height:1.6;
}
.role-card .role-meta strong{color:var(--highlight);font-weight:500;display:block;margin-bottom:6px}
.role-card .role-title{
  font-family:var(--sans);font-weight:500;font-size:21px;line-height:1.3;
  color:var(--accent-strong);margin-bottom:6px;letter-spacing:-.01em;
}
.role-card .role-org{
  font-family:var(--sans);font-weight:400;font-size:15px;
  color:var(--accent-soft);margin-bottom:14px;
}
.role-card .role-desc{
  font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.65;
  color:var(--accent-strong);max-width:62ch;opacity:.9;
}

/* ----------  ENGAGEMENTS (with optional inline poster)  ---------- */
.engagements{display:flex;flex-direction:column}
.engagement{
  display:grid;grid-template-columns:60px 160px 1fr auto;gap:28px;align-items:start;
  padding:28px 0;border-top:1px solid var(--accent-rule);
}
.engagement:first-child{border-top:0;padding-top:0}
.engagement .num{
  font-family:var(--mono);font-size:10px;letter-spacing:.25em;
  color:var(--accent-soft);padding-top:6px;
}
.engagement-poster{
  display:block;overflow:hidden;
  border:1px solid var(--accent-rule);
  background:var(--bg-deep);
  transition:transform .45s var(--ease);
}
.engagement-poster img{
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  transition:transform .8s var(--ease),filter .4s ease;
}
.engagement-poster:hover{transform:translateY(-3px)}
.engagement-poster:hover img{transform:scale(1.04);filter:brightness(1.05)}
.engagement-body{
  padding-top:4px;
}
.engagement-title{
  font-family:var(--sans);font-weight:500;font-size:19px;line-height:1.35;
  color:var(--accent-strong);letter-spacing:-.005em;margin-bottom:8px;
}
.engagement-title em{font-style:normal;font-weight:400;opacity:.85}
.engagement-meta{
  font-family:var(--sans);font-size:14px;line-height:1.5;
  color:var(--accent-soft);max-width:60ch;
}
.engagement .venue{
  font-family:var(--sans);font-size:13px;color:var(--accent-soft);
  letter-spacing:.04em;text-align:right;padding-top:6px;
  white-space:nowrap;
}
/* engagements without a poster: text spans the poster column too */
.engagement:not(.has-poster) .engagement-body{
  grid-column:2 / span 2;
}
.engagement:not(.has-poster) .engagement-poster{display:none}

/* ----------  RESPONSIVE  ---------- */
@media (max-width:1024px){
  .wrap{padding:0 36px}
  .page-head,.section{grid-template-columns:1fr;gap:24px}
  .section-mark{position:static}
  .about-grid{grid-template-columns:1fr;gap:48px}
}
@media (max-width:820px){
  .stage{grid-template-columns:1fr}
  .panel{padding:96px 32px;min-height:60vh}
  .seam{left:0;right:0;top:50%;width:auto;height:64px;
        background-size:auto 26px;background-repeat:repeat-x;background-position:center;
        transform:translateY(-50%)}
  .seam::before,.seam::after{display:none}
  .amp{font-size:96px}
  .stage:hover .panel,.stage:hover .panel:hover{flex:1}
  .list-item{grid-template-columns:60px 1fr;gap:14px}
  .list-item .venue{grid-column:1/-1;text-align:left;padding-left:74px}
  .list-item::after{display:none}
  .dev-card{grid-template-columns:1fr;gap:8px}
  .role-card{grid-template-columns:1fr;gap:8px}
  .substack{grid-template-columns:1fr;gap:18px;padding:24px 22px}
  .substack .sub-cta{justify-self:start}
  .engagement{grid-template-columns:50px 1fr;gap:14px}
  .engagement-poster{grid-column:2;max-width:200px;margin-bottom:10px}
  .engagement-body{grid-column:2 / -1}
  .engagement .venue{grid-column:2 / -1;text-align:left;padding-top:0}
  .engagement:not(.has-poster) .engagement-body{grid-column:2 / -1}
  .panel--strategist .panel-glyph{width:104px;height:104px}
  .chrome,.foot{padding:16px 20px}
}