/* ============================================================
   KirstenGolden.com
   ============================================================ */

:root {
  --taupe: #eec395;        /* homepage background */
  --cream: #fdf0e3;        /* inside page background */
  --ink: #161616;
  --serif: "Instrument Serif", "Didot", "Bodoni MT", serif;
  --sans: "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --frame-pad: 2.25rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

body.home { background: var(--taupe); }

a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------------
   Ambient shadow video — multiplied over the background,
   slowed (via JS), blurred, soft-light @ 20%
   ------------------------------------------------------------ */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(16px);
  mix-blend-mode: soft-light;
  opacity: 0.2;
  transform: scale(1.1); /* hide blur edges */
}

/* ------------------------------------------------------------
   Corner navigation frame
   ------------------------------------------------------------ */
.corner {
  position: fixed;
  z-index: 40;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.corner a { cursor: pointer; }

.corner--tl { top: var(--frame-pad); left: var(--frame-pad); }
.corner--tc { top: var(--frame-pad); left: 50%; transform: translateX(-50%); }
.corner--tr { top: var(--frame-pad); right: 50%; transform: translateX(50%); }
.corner--bl { bottom: var(--frame-pad); left: var(--frame-pad); }
.corner--br { bottom: var(--frame-pad); right: 50%; transform: translateX(50%); }

/* on split-layout pages the center/right corners sit inside the LEFT half;
   their right edge stops one pad-width short of the image.
   The center label stays CENTERED on the left half; the content column
   aligns to its measured left edge (--rail, set by main.js). */
.has-panel .corner--tc { left: 25vw; }
/* anchored from the LEFT in vw units so the right edge lands at the
   window's midline on every page, scrollbar or not */
.has-panel .corner--tr { left: 50vw; right: auto; transform: translateX(-100%); }
.has-panel .corner--br { left: 50vw; right: auto; transform: translateX(-100%); }

/* CV corner: the pill itself is the download control — it holds a small
   arrow, and hovering it reveals the format menu beside it. The pill's
   negative margins keep the CV text at the exact same spot as the plain
   CV link on every other page; align on the text line, not padded boxes. */
.corner--cv {
  display: flex;
  align-items: flex-start;
  gap: 2.2em;
}

.pill-cv {
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  gap: 0.55em;
}

.pill-cv svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}


/* active page pill — atomic inline-flex box so the text is truly
   centered inside the capsule instead of painted off its edge */
.corner .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 22, 22, 0.07);
  border-radius: 999px;
  /* right side is a hair narrower to offset the trailing letter-spacing
     gap — text stays optically centered without shifting off the frame */
  padding: 0.7em 1.14em 0.7em 1.2em;
  margin: -0.7em -1.14em -0.7em -1.2em;
  line-height: inherit; /* same line box as the plain corner links */
}

/* contact — opens a full-page overlay (built by main.js) with the
   links centered and a close X in the upper right */
.contact-trigger {
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

.contact-region .contact-links { display: none; }

.contact-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.home .contact-overlay { background: var(--taupe); }

.contact-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.contact-overlay a {
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(22, 22, 22, 0.35);
  padding-bottom: 3px;
}

.overlay-close {
  position: absolute;
  top: var(--frame-pad);
  right: var(--frame-pad);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}

.overlay-close svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------
   Split layout: content left, media panel right
   ------------------------------------------------------------ */
.panel {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  padding: var(--frame-pad); /* equal inset on all four sides */
}

.panel-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.panel-inner img,
.panel-inner video,
.panel-inner iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.panel-inner iframe {
  /* a 16:9 player sized to fully cover the panel rectangle, centered so
     the overflow crops evenly — no letterboxing */
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: max(calc(100vh - 2 * var(--frame-pad)), calc((50vw - 2 * var(--frame-pad)) * 9 / 16));
  aspect-ratio: 16 / 9;
  width: auto;
}

.main {
  position: relative;
  z-index: 20;
  width: 50%;
  min-height: 100vh;
}

/* ------------------------------------------------------------
   Homepage
   ------------------------------------------------------------ */
.home .main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.site-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 3.5vw, 3.5rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.site-subtitle {
  margin-top: 0.8em;
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   CV page
   ------------------------------------------------------------ */
.cv-section-title {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 400;
  display: inline-block;
  border-bottom: 1px solid rgba(22, 22, 22, 0.35);
  padding-bottom: 0.35em;
}

/* company sections fill a viewport; their text top-aligns with the
   docked logo (both start at 50vh - 32px) */
.cv-block {
  min-height: 100vh;
  padding: calc(50vh - 32px) 0 22vh;
}

/* scrolling snaps each company's text top crisply onto the dock line,
   but stays free in between (proximity, not mandatory) */
html:has(.cv-panel) { scroll-snap-type: y proximity; }

.cv-block:not([data-media="none"]) {
  scroll-snap-align: start;
}

/* the first company section is already in view on load, so its text
   top-aligns with the docked logo immediately instead of after a
   half-viewport of scroll */
.cv-heading-block:first-child + .cv-block {
  padding-top: 0;
  margin-top: -32px;
  /* its text sits at the block's own top, so the snap line moves down */
  scroll-margin-top: calc(50vh - 32px);
}

/* logo-less reference sections (education, skills, tools) stay compact */
.cv-block[data-media="none"] {
  min-height: 0;
  padding: 2vh 0;
}

.cv-block[data-media="none"] li { margin-bottom: 0.4em; }

/* inline logos only appear in the stacked mobile layout;
   on desktop the fixed logo dock takes over */
.cv-block .logo { display: none; }

/* fixed logo dock — left-aligned on the frame line (with CV and 2026),
   top-aligned with where each section's text column begins; the next
   logo slides in as you cross into its section */
.logo-dock {
  position: fixed;
  z-index: 30;
  left: var(--frame-pad);
  top: calc(50vh - 32px);
  width: 150px;
  height: 64px;
}

.dock-logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.dock-logo.active {
  opacity: 1;
  transform: translateY(0);
}

.dock-logo img { max-width: 84px; max-height: 52px; }

/* reference sections dock a serif word instead of a logo */
.dock-word {
  font-family: var(--serif);
  font-size: 1.5rem;
  border-bottom: 1px solid rgba(22, 22, 22, 0.35);
  padding-bottom: 0.3em;
  white-space: nowrap;
}

/* the kyu mark is a soft circle — runs a bit larger than the wordmarks */
.dock-logo[data-id="kyu"] img { max-width: 100px; max-height: 64px; }

/* logos with baked white backgrounds sink into the page */
.dock-logo img,
.cv-block .logo img,
.media-placeholder img {
  mix-blend-mode: multiply;
}

/* title line first, then the date line — same size, date fainter */
.cv-role h3 {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.6em;
}

.cv-dates {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(22, 22, 22, 0.45);
  margin-bottom: 1.8em;
}

.cv-dates a {
  border-bottom: 1px solid rgba(22, 22, 22, 0.25);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.cv-dates a:hover {
  color: var(--ink);
  border-color: rgba(22, 22, 22, 0.5);
}

/* stacked sub-roles within one employer block; the bullet-list gap only
   occurs in the GDP entry, which breathes a little more */
.cv-role ul + h3 { margin-top: 4em; }
.cv-role .cv-dates + h3 { margin-top: 2em; }

.logo-word { font-family: var(--serif); font-size: 1.4rem; }
.logo-word--lg { font-size: 2rem; }

.cv-role h3 strong { font-weight: 700; }

.cv-role ul {
  list-style: disc;
  padding-left: 1.2em;
  font-weight: 400;
  line-height: 1.5;
}

.cv-role li { margin-bottom: 0.6em; }

/* the Experience title sits vertically centered between the bottom of
   the top link row (~70px) and the vertical middle of the page, where
   the first block's content lands; later headings stay close to their
   section's content */
.cv-heading-block {
  margin: 8vh 0 0;
}

.cv-heading-block:first-child {
  display: flex;
  align-items: center;
  height: calc(50vh - 70px);
  margin: 70px 0 0;
}

/* body copy shares its left edge with the centered KIRSTEN GOLDEN label
   above it; --rail is its measured left edge (set by main.js) */
.cv-content {
  padding-left: var(--rail, calc(25vw - 5em));
  padding-right: 2.5rem;
}

/* download capsules, stacked in the content column */
.dl-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2em;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dl-buttons a {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  border: 1px solid rgba(22, 22, 22, 0.45);
  border-radius: 999px;
  padding: 0.85em 1.5em;
  transition: background 0.25s ease;
}

.dl-buttons a:hover {
  background: rgba(22, 22, 22, 0.07);
}

.dl-buttons svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* format menu revealed by hovering (or tapping) the CV pill */
.dl-menu {
  display: flex;
  align-items: center;
  gap: 1.2em;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  border-radius: 999px;
  padding: 0.7em 1.1em;
  margin: -0.7em 0; /* align on the text line like the pill */
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  white-space: nowrap;
}

.corner--cv:hover .dl-menu,
.corner--cv:focus-within .dl-menu,
.corner--cv.open .dl-menu {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.dl-menu a { border-bottom: 1px solid rgba(22, 22, 22, 0.4); padding-bottom: 2px; }

/* media wipe — every layer is opaque so hidden layers can't show through */
.panel-inner .media {
  position: absolute;
  inset: 0;
  background: var(--cream);
  overflow: hidden;
  transition: clip-path 0.9s cubic-bezier(0.77, 0, 0.18, 1);
  clip-path: inset(0 0 0 100%);
  z-index: 2;
}

.panel-inner .media.active {
  clip-path: inset(0 0 0 0);
}

.panel-inner .media.was-active {
  clip-path: inset(0 0 0 0);
  z-index: 1;
  transition: none;
}

.media-placeholder {
  position: absolute;
  inset: 0;
  background: #eee0d0; /* opaque: cream + 8% ink */
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-placeholder img { position: static; width: 40%; height: auto; object-fit: contain; opacity: 0.8; }

/* ------------------------------------------------------------
   Writing
   ------------------------------------------------------------ */
.writing-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
}

.writing-list {
  list-style: none;
  margin-top: 3rem;
}

.writing-list li { margin-bottom: 2.2em; }

.writing-list a {
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.writing-list a:hover { border-bottom: 1px solid var(--ink); }

.article-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 16vh 0 12vh;
}

.article-title {
  text-align: center;
}

.article-body {
  margin-top: 4rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 3rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.7;
  text-transform: none;
}

.article-body p { margin-bottom: 1.3em; }

.article-body ul {
  list-style: disc;
  padding-left: 1.3em;
  margin-bottom: 1.6em;
}

.article-body li { margin-bottom: 0.9em; }

/* Instrument Serif has no bold — italic carries the lead-ins instead */
.article-body li strong {
  font-weight: 400;
  font-style: italic;
}

.article-intro {
  font-style: italic;
  opacity: 0.7;
  margin-bottom: 2em;
}

/* small provenance line under an article title */
.article-credit {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: rgba(22, 22, 22, 0.45);
  margin-top: 1.6em;
}

.article-credit a {
  border-bottom: 1px solid rgba(22, 22, 22, 0.3);
  padding-bottom: 1px;
}

.article-epigraph {
  font-style: italic;
  opacity: 0.7;
  margin-bottom: 0.4em;
}

.article-epigraph + p:not(.article-epigraph) { margin-top: 2.5em; }

/* private draft-mode note on unwritten articles */
.draft-note {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: 0.02em;
  border: 1px dashed rgba(22, 22, 22, 0.4);
  border-radius: 14px;
  padding: 1.3em 1.5em;
  margin-bottom: 3.5em;
}

.draft-note p { margin: 0; }

/* Q&A: questions in the small sans label style, answers in serif prose */
.qa-q {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(22, 22, 22, 0.55);
  margin: 4.5em 0 0.9em;
}

/* writing pages fade the panel toward white */
.panel-inner.light::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
}

/* ------------------------------------------------------------
   Mobile — simplified stacked version
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  :root { --frame-pad: 1.1rem; }

  .main { width: 100%; }

  /* corners keep their desktop behavior: fixed to the viewport frame */
  .has-panel .corner--tc { left: 50%; }
  .has-panel .corner--tr,
  .corner--tr { left: auto; right: var(--frame-pad); transform: none; }
  .has-panel .corner--br,
  .corner--br { left: auto; right: var(--frame-pad); transform: none; }

  /* the top bar is too tight for the download affordance; the CV ends
     on dedicated download buttons instead */
  .pill-cv svg { display: none; }
  .dl-menu { display: none; }
  .corner--cv { gap: 0; }

  /* panels stack under the content */
  .panel {
    position: static;
    width: 100%;
    height: auto;
    padding: 0;
  }

  .panel-inner { height: auto; }

  .panel-inner img,
  .panel-inner video {
    position: static;
    width: 100%;
    height: auto;
  }

  /* ------------------------------------------------------------
     home: taupe block up top — name centered, corners pinned to the
     block — with the portrait below
     ------------------------------------------------------------ */
  .home .main { min-height: 52svh; }

  .home .corner--bl,
  .home .corner--br {
    position: absolute;
    bottom: auto;
    top: calc(52svh - 2.4rem);
  }

  .home .panel { padding: 0 10px 10px; }

  /* ------------------------------------------------------------
     CV: a deck of full-screen cards, one role per swipe
     (cards are built from the desktop content by cv.js)
     ------------------------------------------------------------ */
  .cv-panel { display: none; }
  .logo-dock { display: none; }
  .cv-content { display: none; }

  /* the deck scrolls in its own container — root-scroller snap is
     unreliable on iOS (it re-snaps to the last snapped element) */
  html:has(.cv-panel) { scroll-snap-type: none; }
  html:has(.cv-panel), html:has(.cv-panel) body { overflow: hidden; }

  .m-scroll {
    position: fixed;
    inset: 0;
    z-index: 20;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y mandatory;
  }

  .m-card {
    min-height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 9rem var(--frame-pad) 5.4rem;
  }

  /* tiny entries (title + dates only) center in the lower half,
     mirroring the header centered in the top half */
  .m-card--short {
    justify-content: center;
    padding-top: 50svh;
  }

  /* fixed header: section title left, company logo right — it holds
     still while role text swipes beneath; the logo only changes when
     the company changes */
  .m-fixed {
    position: fixed;
    z-index: 30;
    /* centered in the space between the top link row and the entry
       text below — i.e., the middle of the top half */
    top: calc(25svh + 1.6rem);
    transform: translateY(-50%);
    left: var(--frame-pad);
    right: var(--frame-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
  }

  .m-fixed .cv-section-title {
    font-size: 1.7rem;
    transition: opacity 0.25s ease;
  }

  .m-dock {
    position: relative;
    width: 96px;
    height: 52px;
  }

  .m-dock-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .m-dock-logo.active { opacity: 1; transform: none; }

  .m-dock-logo img {
    max-width: 76px;
    max-height: 48px;
  }

  .m-dock-logo .logo-word { font-size: 1.3rem; }

  .m-card .cv-role { font-size: 14px; }
  .m-card .cv-role h3 { font-size: 13px; }
  .m-card .cv-dates { font-size: 13px; }
  .m-card .cv-role + .cv-role { margin-top: 2rem; }

  /* writing */
  .writing-panel { display: none; }
  .article-body { padding: 0 1.7rem; }
}