/* =========================================================
   TOKENS
========================================================= */
:root{
  /* palette */
  --ink:       #311E1E;
  --ink-soft:  #4a3230;
  --slate:     #546581;
  --taupe:     #8B6465;
  --rosy:      #CE999B;
  --blush:     #FCB5B7;
  --paper:     #F7F1EC;

  /* type */
  --font-display: 'Fraunces', serif;
  --font-body: 'Work Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* spacing */
  --pad-section: clamp(4rem, 9vw, 9rem);
  --pad-side: clamp(1.25rem, 5vw, 4rem);

  /* motion */
  --ease: cubic-bezier(.16,.8,.28,1);
  --dur-s: .35s;
  --dur-m: .6s;
  --dur-l: 1s;
}

/* =========================================================
   BASE
========================================================= */
*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html:not([data-motion="on"]){ scroll-behavior:auto; }
}
html[data-motion="reduced"]{ scroll-behavior:auto; }

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img, video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }

::selection{ background:var(--rosy); color:var(--ink); }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */
.label{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.65;
}

h1, h2, h3{
  font-family:var(--font-display);
  margin:0;
  line-height:1.05;
}

p{ margin:0; line-height:1.6; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}

/* =========================================================
   LAYOUT / UTILITIES
========================================================= */
.wrap{
  max-width:1240px;
  margin:0 auto;
  padding-left:var(--pad-side);
  padding-right:var(--pad-side);
}

.section{ padding-top:var(--pad-section); padding-bottom:var(--pad-section); }

.hairline{ border-top:1px solid; opacity:.18; }

/* =========================================================
   SHARED HEADER / FOOTER
========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.25rem var(--pad-side);
  backdrop-filter:blur(6px);
}

.site-header .mark{
  font-family:var(--font-display);
  font-size:1.15rem;
  letter-spacing:.02em;
}

.site-header nav{ display:flex; align-items:center; gap:clamp(1rem,3vw,2.25rem); }

.site-header nav a{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.75;
  transition:opacity var(--dur-s) var(--ease);
}
.site-header nav a:hover{ opacity:1; }

.back-link{
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.back-link .arrow{ transition:transform var(--dur-s) var(--ease); display:inline-block; }
.back-link:hover .arrow{ transform:translateX(-4px); }
html[data-motion="reduced"] .back-link:hover .arrow{ transform:none; }

.site-footer{
  padding:2.5rem var(--pad-side) 3rem;
  display:flex;
  flex-wrap:wrap;
  gap:1.25rem;
  align-items:center;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.05em;
  opacity:.7;
}

.motion-toggle{
  background:none;
  border:1px solid currentColor;
  color:inherit;
  opacity:.8;
  padding:.5em 1em;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:opacity var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.motion-toggle:hover{ opacity:1; }

/* progress bar (work page) */
.scroll-progress{
  position:fixed;
  top:0; left:0;
  height:2px;
  width:0%;
  background:var(--rosy);
  z-index:60;
  transition:width .1s linear;
}
html[data-motion="reduced"] .scroll-progress{ display:none; }

/* =========================================================
   SCROLL REVEAL
========================================================= */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);
}
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html:not([data-motion="on"]) .reveal{ opacity:1; transform:none; transition:none; }
}
html[data-motion="reduced"] .reveal{ opacity:1; transform:none; transition:none; }

/* =========================================================
   GATEWAY PAGE
========================================================= */
.gateway{
  position:relative;
  height:100svh;
  display:flex;
  flex-direction:column;
}

.gateway-wordmark{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(3rem, 16vw, 13rem);
  letter-spacing:-.02em;
  color:var(--paper);
  opacity:.16;
  mix-blend-mode:overlay;
  white-space:nowrap;
  pointer-events:none;
  z-index:5;
  user-select:none;
}

.gateway-top{
  position:relative;
  z-index:2;
  text-align:center;
  padding:2.5rem 1.5rem 1rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--paper);
  opacity:.6;
}

.split{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  min-height:0;
}

@media (max-width:760px){
  .split{ flex-direction:column; }
}

.split-half{
  position:relative;
  flex:1 1 0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:flex-grow var(--dur-l) var(--ease);
  min-height:280px;
}

.split-half:hover{ flex-grow:1.35; }
html[data-motion="reduced"] .split-half{ transition:none; }
html[data-motion="reduced"] .split-half:hover{ flex-grow:1; }

.split-half.is-work{ background:var(--ink); color:var(--paper); }
.split-half.is-personal{ background:var(--blush); color:var(--ink); }

.split-half a{
  position:relative;
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
  text-align:center;
  padding:2rem;
}

.split-half h2{
  font-size:clamp(2.1rem, 6vw, 4.2rem);
  transition:transform var(--dur-m) var(--ease), letter-spacing var(--dur-m) var(--ease);
}
.split-half:hover h2{ transform:scale(1.04); }
html[data-motion="reduced"] .split-half:hover h2{ transform:none; }

.split-half .sub{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.65;
}

.split-half .cue{
  margin-top:.5rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  opacity:0;
  transform:translateY(6px);
  transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.split-half:hover .cue{ opacity:.8; transform:none; }
html[data-motion="reduced"] .split-half .cue{ opacity:.8; transform:none; }

.split-divider{
  position:absolute;
  top:0; bottom:0; left:50%;
  width:1px;
  background:var(--paper);
  opacity:.15;
  z-index:3;
}
@media (max-width:760px){ .split-divider{ display:none; } }

/* =========================================================
   WORK PAGE
========================================================= */
body.theme-work{ background:var(--ink); color:var(--paper); }

.work-hero{
  padding-top:clamp(3rem, 8vw, 6rem);
  padding-bottom:var(--pad-section);
}

.work-hero h1{
  font-size:clamp(2.6rem, 6.5vw, 5.4rem);
  font-weight:500;
  max-width:16ch;
}

.work-hero .lede{
  margin-top:1.75rem;
  max-width:52ch;
  font-size:1.15rem;
  color:var(--paper);
  opacity:.85;
}

.cta-row{
  margin-top:2.25rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.85em 1.5em;
  border-radius:2px;
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
  border:1px solid currentColor;
}
.btn:hover{ transform:translateY(-2px); }
html[data-motion="reduced"] .btn:hover{ transform:none; }

.btn-primary{ background:var(--rosy); border-color:var(--rosy); color:var(--ink); }
.btn-primary:hover{ background:var(--blush); border-color:var(--blush); }

.btn-ghost{ color:var(--paper); }
.btn-ghost:hover{ background:rgba(247,241,236,.08); }

/* numbered editorial rows */
.numbered-row{
  display:grid;
  grid-template-columns:5rem 1fr;
  gap:2rem;
  padding:2.75rem 0;
  border-top:1px solid rgba(247,241,236,.16);
}
.numbered-row:last-child{ border-bottom:1px solid rgba(247,241,236,.16); }

.numbered-row .num{
  font-family:var(--font-mono);
  font-size:1rem;
  color:var(--rosy);
  transition:transform var(--dur-s) var(--ease);
}
.numbered-row:hover .num{ transform:scale(1.25); }
html[data-motion="reduced"] .numbered-row:hover .num{ transform:none; }

.numbered-row h3{
  font-size:clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight:500;
}

.numbered-row .meta{
  margin-top:.4rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.6;
}

.numbered-row p.desc{
  margin-top:.9rem;
  max-width:60ch;
  opacity:.85;
}

/* stack readout */
.stack-panel{
  border:1px solid rgba(247,241,236,.18);
  padding:2.25rem clamp(1.5rem,4vw,2.75rem);
}

.stack-status{
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1.75rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.7;
}

.status-dot{
  width:8px; height:8px; border-radius:50%;
  background:#8fd19e;
  box-shadow:0 0 0 3px rgba(143,209,158,.18);
}
html[data-motion="on"] .status-dot{ animation:pulse 2.4s ease-in-out infinite; }

@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(143,209,158,.18); }
  50%{ box-shadow:0 0 0 6px rgba(143,209,158,.06); }
}

.stack-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
  gap:.75rem 1rem;
}

.stack-item{
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.02em;
  padding:.7em .9em;
  border:1px solid rgba(247,241,236,.14);
  transition:transform var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.stack-item:hover{
  transform:scale(1.06);
  border-color:var(--rosy);
  color:var(--rosy);
}
html[data-motion="reduced"] .stack-item:hover{ transform:none; }

/* consulting plug */
.plug{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
@media (max-width:820px){ .plug{ grid-template-columns:1fr; } }

.plug .tag{
  display:inline-block;
  margin-bottom:1.25rem;
}

.plug h2{ font-size:clamp(1.9rem, 4vw, 3rem); font-weight:500; max-width:14ch; }
.plug p{ margin-top:1.25rem; max-width:48ch; opacity:.85; }

.plug-card{
  border:1px solid rgba(247,241,236,.18);
  padding:clamp(1.75rem, 4vw, 2.5rem);
}
.plug-card .label{ display:block; margin-bottom:1rem; }
.plug-card p{ opacity:.85; }
.plug-card .btn{ margin-top:1.5rem; }

/* contact section */
.contact-block{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(2rem,6vw,5rem);
  align-items:flex-end;
  justify-content:space-between;
}

.contact-links{ display:flex; flex-direction:column; gap:.9rem; }

.contact-links a{
  font-family:var(--font-display);
  font-size:clamp(1.4rem, 3vw, 2.1rem);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.contact-links a:hover{ border-color:var(--rosy); color:var(--rosy); }

/* =========================================================
   GG (PERSONAL) PAGE
========================================================= */
body.theme-gg{ background:var(--blush); color:var(--ink); }
body.theme-gg .site-header{ background:rgba(252,181,183,.85); }
body.theme-gg .site-header nav a,
body.theme-gg .label{ color:var(--ink); }

.gg-hero{
  padding-top:clamp(3rem, 8vw, 5.5rem);
  padding-bottom:calc(var(--pad-section) * .8);
}

.gg-hero h1{
  font-style:italic;
  font-weight:400;
  font-size:clamp(2.6rem, 7vw, 5.6rem);
  letter-spacing:-.01em;
  max-width:18ch;
}

.gg-hero .lede{
  margin-top:1.5rem;
  max-width:56ch;
  font-size:1.15rem;
  opacity:.85;
}

.gg-section-title{
  display:flex;
  align-items:baseline;
  gap:1rem;
  margin-bottom:2.5rem;
}
.gg-section-title h2{
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.8rem, 4vw, 2.8rem);
}

/* achievement cards */
.achv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:1.25rem;
}

.achv-card{
  position:relative;
  background:var(--paper);
  border:1px solid rgba(49,30,30,.12);
  overflow:hidden;
  transform:translateY(18px) scale(.97);
  opacity:0;
  transition:transform var(--dur-m) var(--ease), opacity var(--dur-m) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.achv-card.in{ transform:none; opacity:1; }
html[data-motion="reduced"] .achv-card{ transform:none; opacity:1; transition:none; }

.achv-card:hover{ box-shadow:0 10px 26px rgba(49,30,30,.14); }

.achv-media{
  width:100%;
  aspect-ratio:16/10;
  background:var(--ink);
  overflow:hidden;
}
.achv-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform var(--dur-m) var(--ease);
}
.achv-media.is-contain img{ object-fit:contain; }
.achv-card:hover .achv-media img{ transform:scale(1.05); }
html[data-motion="reduced"] .achv-card:hover .achv-media img{ transform:none; }

.achv-body{ padding:1.5rem 1.4rem 1.75rem; }

.achv-card .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.4rem; height:2.4rem;
  border-radius:50%;
  background:var(--rosy);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:.85rem;
  margin-bottom:1rem;
}

.achv-card .achv-label{
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--taupe);
  margin-bottom:.4rem;
  display:block;
}

.achv-card h3{
  font-size:1.15rem;
  font-weight:500;
  font-style:normal;
}

.achv-card p{ margin-top:.6rem; font-size:.9rem; opacity:.75; }
.achv-card p a{ color:var(--taupe); border-bottom:1px solid currentColor; transition:color var(--dur-s) var(--ease); }
.achv-card p a:hover{ color:var(--rosy); }

/* clip mood / game grouping */
.clip-mood-group{ margin-bottom:3rem; }
.clip-mood-group:last-child{ margin-bottom:0; }

.clip-mood-heading{
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.4rem, 3vw, 2rem);
  margin-bottom:1.5rem;
}

.clip-game-group{ margin-bottom:2.25rem; }
.clip-game-group:last-child{ margin-bottom:0; }

.clip-game-label{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--taupe);
  margin-bottom:.9rem;
}

/* video / clip grid */
.clip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:1.5rem;
}

.clip-card{
  display:block;
  width:100%;
  background:var(--ink);
  color:var(--paper);
  border:0;
  padding:0;
  overflow:hidden;
  cursor:pointer;
  transition:transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.clip-card:hover, .clip-card:focus-visible{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(49,30,30,.22); }
html[data-motion="reduced"] .clip-card:hover, html[data-motion="reduced"] .clip-card:focus-visible{ transform:none; box-shadow:none; }
.clip-card:focus-visible{ outline:2px solid var(--rosy); outline-offset:-2px; }

.clip-thumb{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
}
.clip-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform var(--dur-m) var(--ease);
}
.clip-card:hover .clip-thumb img, .clip-card:focus-visible .clip-thumb img{ transform:scale(1.05); }
html[data-motion="reduced"] .clip-card:hover .clip-thumb img{ transform:none; }

.play-badge{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:3rem;
  height:3rem;
  border-radius:50%;
  background:rgba(247,241,236,.92);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  transition:transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.clip-card:hover .play-badge, .clip-card:focus-visible .play-badge{
  transform:translate(-50%,-50%) scale(1.12);
  background:var(--rosy);
  color:var(--paper);
}
html[data-motion="reduced"] .clip-card:hover .play-badge{ transform:translate(-50%,-50%); }

.clip-card .clip-meta{ padding:.9rem 1.1rem 1.15rem; }
.clip-card .clip-meta .label{ opacity:.7; color:var(--paper); display:block; margin-bottom:.3rem; }
.clip-card h4{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.1rem;
  margin:0;
}

/* clip player modal */
.clip-player{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
}
.clip-player[hidden]{ display:none; }

.clip-player-backdrop{
  position:absolute;
  inset:0;
  background:rgba(20,12,12,.82);
  border:0;
  padding:0;
}

.clip-player-panel{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1100px;
  max-height:90vh;
  background:var(--ink);
  color:var(--paper);
  display:grid;
  grid-template-columns:2fr 1fr;
  overflow:hidden;
  border:1px solid rgba(247,241,236,.15);
}
@media (max-width:760px){
  .clip-player-panel{ grid-template-columns:1fr; overflow-y:auto; max-height:85vh; }
}

.clip-player-video{ position:relative; aspect-ratio:16/9; background:#000; }
.clip-player-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.clip-player-list{
  padding:1.5rem;
  overflow-y:auto;
  max-height:90vh;
  border-left:1px solid rgba(247,241,236,.15);
}
@media (max-width:760px){
  .clip-player-list{ border-left:0; border-top:1px solid rgba(247,241,236,.15); max-height:none; }
}

.clip-player-list-title{ margin-bottom:1rem; }

.clip-player-list ul{ display:flex; flex-direction:column; gap:.35rem; }

.clip-player-list li button{
  width:100%;
  text-align:left;
  background:none;
  border:0;
  color:var(--paper);
  opacity:.7;
  padding:.6em .7em;
  font-family:var(--font-body);
  font-size:.92rem;
  border-radius:2px;
  cursor:pointer;
  transition:background var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.clip-player-list li button:hover{ background:rgba(247,241,236,.08); opacity:1; }
.clip-player-list li button.is-active{ background:var(--rosy); color:var(--ink); opacity:1; font-weight:500; }

.clip-player-close{
  position:absolute;
  top:.75rem;
  right:.75rem;
  z-index:3;
  width:2.2rem;
  height:2.2rem;
  border-radius:50%;
  background:rgba(20,12,12,.65);
  color:var(--paper);
  border:0;
  font-size:1.3rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.clip-player-close:hover{ background:var(--rosy); color:var(--ink); }

/* socials chips */
.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.8em 1.4em;
  border:1px solid var(--ink);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.04em;
  transition:transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.chip:hover{
  background:var(--ink);
  color:var(--blush);
  transform:translateY(-2px);
}
html[data-motion="reduced"] .chip:hover{ transform:none; }

/* =========================================================
   404
========================================================= */
.error-page{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:1.5rem;
  padding:2rem;
}
.error-page h1{ font-size:clamp(4rem, 14vw, 9rem); }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:600px){
  .numbered-row{ grid-template-columns:3rem 1fr; gap:1.25rem; }
  .contact-block{ flex-direction:column; align-items:flex-start; gap:2rem; }
}