/* =========================================================================
   Kristine Xie — portfolio
   Rebuilt from a Cargo export. Faithful port of the original type scale,
   greyscale swatches, and the pinned-panel composition (fixed profile +
   CV flanking a centred, scrolling work column, framed by vertical lines).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Spline+Sans+Mono:ital,wght@0,300..600;1,300..600&display=swap');

/* ---- Exported display faces -------------------------------------------- */
@font-face {
  font-family: "Retrogression";
  font-weight: 400; font-style: normal; font-display: swap;
  src: url("../assets/fonts/Retrogression-Regular.woff") format("woff");
}
@font-face {
  font-family: "Arial Narrow Web";
  font-weight: 400; font-style: normal; font-display: swap;
  src: url("../assets/fonts/arialnarrow.woff") format("woff");
}
@font-face {
  font-family: "Pixel Arial 14";
  font-weight: 400; font-style: normal; font-display: swap;
  src: url("../assets/fonts/pixel-arial-14.woff") format("woff");
}

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --narrow: "Arial Narrow Web", "Arial Narrow", var(--sans);

  --swatch-1: rgba(0, 0, 0, 0.85);
  --swatch-2: rgba(0, 0, 0, 0.75);
  --swatch-3: rgba(0, 0, 0, 0.60);
  --swatch-4: rgba(0, 0, 0, 0.40);
  --swatch-5: rgba(0, 0, 0, 0.25);
  --swatch-6: rgba(0, 0, 0, 0.15);

  --olive: #898f42;
  --violet: #542f92;
  --rule: rgba(0, 0, 0, 0.14);

  --col: 50vw;            /* central work column width  (Cargo .page-layout 50%) */
  --panel: 25vw;          /* flanking pinned panels */
  --pad: 1rem;
  --vh: 100vh;            /* overwritten by JS for mobile address-bar accuracy */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--swatch-1);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.site-locked {
  overflow: hidden;
}
body.site-locked > :not(.site-password-gate) {
  visibility: hidden;
}
.site-password-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.82)),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 1px, transparent 1px 25vw);
}
.site-password-form {
  width: min(26rem, 100%);
  padding: 1.5rem;
  border: 1px solid var(--swatch-6);
  border-radius: 0.8rem;
  background: #fff;
  box-shadow: 0 30px 80px -45px rgba(0,0,0,0.6);
  font-family: var(--mono);
}
.site-password-kicker {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--swatch-4);
  font-size: 0.95rem;
}
.site-password-form h1 {
  margin-bottom: 1.5rem;
  font-family: "Retrogression", var(--sans);
  font-size: 4rem;
  letter-spacing: 0;
}
.site-password-form label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--swatch-3);
  font-size: 1rem;
}
.site-password-row {
  display: flex;
  gap: 0.6rem;
}
.site-password-row input,
.site-password-row button {
  min-height: 2.9rem;
  border: 1px solid var(--swatch-5);
  border-radius: 0.5rem;
  font: inherit;
}
.site-password-row input {
  min-width: 0;
  flex: 1;
  padding: 0 0.85rem;
  color: var(--swatch-1);
}
.site-password-row input:focus {
  outline: 2px solid rgba(84,47,146,0.22);
  outline-offset: 2px;
}
.site-password-row button {
  padding: 0 1rem;
  background: var(--swatch-1);
  color: #fff;
  cursor: pointer;
}
.site-password-error {
  display: none;
  margin: 0.85rem 0 0;
  color: #9f2f2f;
  font-size: 0.95rem;
}
.site-password-form.has-error .site-password-error {
  display: block;
}

a { color: inherit; }
a:active, .linked:active { opacity: 0.7; }
hr {
  background: var(--rule); border: 0; height: 1px; display: block;
  margin: 1.5rem 0;
}
i { font-style: italic; }
b { font-weight: 500; }

/* ---- Cargo text styles (ported 1:1 from the export stylesheet) ---------- */
bodycopy {
  display: block;
  font-family: var(--mono);
  font-size: 14px; font-weight: 400; line-height: 1.2;
  color: var(--swatch-1);
}
bodycopy a { text-decoration: underline; text-decoration-color: var(--swatch-5); }

h1 {
  font-family: var(--sans); font-weight: 400; margin: 0;
  font-size: 4.5rem; line-height: 1; letter-spacing: -0.02em; color: var(--swatch-1);
}
h2 {
  font-family: var(--sans); font-weight: 400; margin: 0;
  font-size: 3.8rem; line-height: 1.1; color: var(--swatch-1);
}
h2 a, h1 a { text-decoration: none; }

.caption {
  display: block; font-family: var(--sans);
  font-size: 1.1rem; font-weight: 500; line-height: 1.2; color: var(--swatch-1);
}

.name-dont-touch {
  display: block; font-family: "Retrogression", var(--sans);
  font-size: 4rem; font-weight: 400; line-height: 1.2; color: var(--swatch-1);
}
.nameee {
  display: block; font-family: var(--sans);
  font-size: 1.8rem; font-weight: 500; line-height: 1.2; color: var(--swatch-1);
}
.index {
  display: block; font-family: var(--sans);
  font-size: 2rem; font-weight: 400; line-height: 1.4; color: var(--swatch-1);
}
.index a { text-decoration: underline; text-decoration-color: var(--swatch-5); }
.cases-headers { display:block; font-family: var(--sans); font-size:1.4rem; font-weight:500; color: var(--olive); }
.heading-3 { display:block; font-family: var(--narrow); font-size:2.2rem; font-weight:400; color:#404040; }
.big-and-bold- { display:block; font-family: var(--narrow); font-size:3rem; color: var(--olive); }
.quotes { display:block; font-family: var(--sans); font-size:1.8rem; font-weight:500; color: var(--violet); }
.body-in-cases { display:block; font-family: var(--sans); font-size:1.4rem; font-weight:300; color: var(--swatch-2); }

.button-6 {
  font-family: var(--sans); font-weight: 500; font-size: 1.2rem; line-height: 1;
  letter-spacing: -0.02em; color: #575757;
  background: rgba(220, 220, 220, 0.4);
  display: inline-block; border-radius: 999rem;
  padding: 0.7rem 1.5rem;
}
.button-6 a, .button-6 a.active { text-decoration: none; }
.button-6 a.active { color: #fff; }

/* ---- Cargo custom elements --------------------------------------------- */
column-set { display: flex; gap: var(--gutter, 1rem); }
column-unit { flex: 1 1 0; min-width: 0; }
column-set[gutter="2"] { --gutter: 2rem; }
/* span weighting (Cargo column spans, 12-col feel) */
column-unit[span="3"] { flex-grow: 3; } column-unit[span="4"] { flex-grow: 4; }
column-unit[span="8"] { flex-grow: 8; } column-unit[span="9"] { flex-grow: 9; }

media-item { display: block; }
media-item img { display: block; width: 100%; height: auto; }
media-item[data-radius] img { border-radius: 2rem; }

text-icon {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em;
  background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat; opacity: 0.85;
}
text-icon[icon="eye-1"]            { --icon: url('../assets/icons/eye.svg'); }
text-icon[icon="north-east-arrow"] { --icon: url('../assets/icons/ne-arrow.svg'); }
text-icon[icon="leftwards-arrow-6"]{ --icon: url('../assets/icons/left-arrow.svg'); }
text-icon[icon="nav-close-white"]  { --icon: url('../assets/icons/close.svg'); }

ol { margin: 0; padding: 0 0 0 2.5em; list-style-type: decimal-leading-zero; }
ul { margin: 0; padding: 0 0 0 2em; }

/* =========================================================================
   COMPOSITION — fixed panels + scrolling centre column
   ========================================================================= */

/* The framing vertical lines: a centred full-height box with side borders. */
.frame-lines {
  position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: var(--col); pointer-events: none; z-index: 1;
  border-left: 0.1rem solid var(--swatch-6);
  border-right: 0.1rem solid var(--swatch-6);
}

/* Centre scrolling work column. */
.stage {
  position: relative; z-index: 2;
  width: var(--col); margin: 0 auto;
  padding: 3.5rem var(--pad) 7rem;
  text-align: left;
}

/* Pinned profile (left) + CV (right). */
.panel {
  position: fixed; top: 0; width: var(--panel); height: 100vh; z-index: 3;
  padding: 3.5rem 1.4rem; overflow-y: auto; overscroll-behavior: contain;
  text-align: left; scrollbar-width: none;
}
.panel::-webkit-scrollbar { display: none; }
.panel-left  { left: 0; }
.panel-right { right: 0; }

/* Clock pinned bottom-centre. */
.clock-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; justify-content: center;
  padding: 0.8rem; pointer-events: none;
  color: var(--swatch-4); font-family: var(--mono); font-size: 1.2rem;
}

digital-clock { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* ---- Marquee (vertical scroll, friction-free loop) --------------------- */
marquee-set {
  display: block; overflow: hidden; white-space: nowrap; width: 100%;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
marquee-inner {
  display: flex; width: max-content; will-change: transform;
  animation: marquee-left 18s linear infinite;
  color: var(--swatch-1);
}
marquee-inner span {
  flex: 0 0 auto;
  padding-right: 3rem;
}
marquee-set:hover marquee-inner { animation-play-state: paused; }
@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Work cards (clickable) -------------------------------------------- */
.stage column-set { margin-top: 0.75rem; }
.stage media-item img { border-radius: 2rem; }

.work-card {
  display: block; text-decoration: none; color: inherit;
  position: relative;
}
.cover { position: relative; border-radius: 2rem; overflow: hidden; }
.work-title { font-weight: 400; }
.is-soon { cursor: default; }
.is-soon media-item img { opacity: 0.92; }

.lead { font-size: 1.2rem; letter-spacing: 0.02em; color: var(--swatch-1); }
.lead-hint { color: var(--swatch-4); font-style: italic; }

/* =========================================================================
   OVERLAYS (recommendation letters + menu)
   ========================================================================= */
.overlay-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,0.04); backdrop-filter: blur(1.5px);
  display: none; opacity: 0; transition: opacity 0.3s ease;
}
.overlay-scrim.open { display: block; opacity: 1; }

.overlay-card {
  position: fixed; z-index: 41; left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + 14px));
  width: min(45vw, 90vw); max-height: 84vh; overflow-y: auto;
  padding: 3rem 2rem; border-radius: 3rem;
  border: 0.1rem solid var(--rule);
  background: #ffe9ef; color: var(--swatch-1);
  font-size: 1.25rem; line-height: 1.35; text-align: center;
  box-shadow: 0.4rem 0.4rem 2.17rem 0rem rgba(0,0,0,0.15);
  opacity: 0; transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.overlay-card.open { opacity: 1; transform: translate(-50%, -50%); }
.overlay-card#ov-joy-rec,
.overlay-card#ov-todd-rec {
  box-shadow: 1rem 1rem 3rem 0rem rgba(0,0,0,0.15);
}
.overlay-card .attrib {
  display: table; margin: 1.4rem auto 0;
  border: 0.1rem solid var(--swatch-5); border-radius: 99rem;
  padding: 0.35rem 1rem; font-size: 14px; line-height: 1.3;
  text-align: center;
}

/* the menu overlay slides in from the left, full-height, blue */
.overlay-card.menu {
  left: 0; top: 0; transform: translate(-100%, 0);
  width: 25vw; height: 100vh; max-height: none;
  padding: 1.2rem 0.8rem 1.2rem 1.2rem;
  border: 0; border-radius: 0; background: #ccdaf0;
  text-align: left;
}
.overlay-card.menu.open { transform: translate(0,0); }
.overlay-card.menu ol { font-family: var(--sans); }
.overlay-card.menu h2 { font-size: 2.4rem; }
.overlay-card .close { cursor: pointer; text-decoration: none; color: rgba(131,143,161,0.9); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
  :root { --col: 64vw; --panel: 22vw; }
  .panel { padding: 2.4rem 1rem; font-size: 0.95em; }
  h1 { font-size: 3.4rem; } h2 { font-size: 3rem; }
  .name-dont-touch { font-size: 3rem; }
}

@media (max-width: 760px) {
  :root { --col: 100vw; }
  .frame-lines, .clock-bar { display: none; }
  body { font-size: 14px; }

  /* Panels stop being pinned and fold into the single scrolling column,
     in document order: profile -> work -> CV. */
  .panel, .stage {
    position: static; width: 100%; height: auto; max-width: 100%;
    overflow: visible; margin: 0; scroll-margin-top: 1rem;
  }
  .panel { padding: 2rem 1.3rem; }
  .panel-left  { border-bottom: 0.1rem solid var(--swatch-6); }
  .panel-right { border-top: 0.1rem solid var(--swatch-6); }
  .stage { padding: 2rem 1.3rem; }
  body { padding-bottom: 5rem; }      /* clear the fixed mobile nav */

  /* bottom nav bar (ported from mobile-nav page) */
  .mobile-nav {
    display: flex; gap: 1rem; justify-content: space-between;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 1.2rem; background: #fff;
    border-top: 0.1rem solid var(--swatch-6);
    font-family: var(--mono); font-size: 1rem; letter-spacing: 0.03em;
  }
  .mobile-nav a { text-decoration: none; }
  .name-dont-touch { font-size: 2.8rem; }
  h1 { font-size: 2.6rem; } h2 { font-size: 2.2rem; }
  .overlay-card { width: 92vw; padding: 1.6rem; }
}
@media (min-width: 761px) { .mobile-nav { display: none; } }

/* page load reveal */
.stage > *, .panel > * { animation: rise 0.7s both; }
.panel-left  > * { animation-delay: 0.05s; }
.panel-right > * { animation-delay: 0.12s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, marquee-inner { animation: none !important; }
}

/* =========================================================================
   CASE STUDY PAGES  (sticky table-of-contents + scrolling body)
   ========================================================================= */
.case { display: grid; grid-template-columns: 25vw 1fr; gap: 0; }
.case-nav {
  position: sticky; top: 0; align-self: start; height: 100vh;
  padding: 3.5rem 1.4rem; overflow-y: auto;
}
.case-nav .index a { display: inline-block; padding: 0.1rem 0; }
.case-nav .index a:hover { color: var(--swatch-4); }
.case-return { font-family: var(--mono); font-size: 1.1rem; text-decoration: none; }
.case-return text-icon { vertical-align: -0.1em; }
.case-body { max-width: 50rem; padding: 3.5rem var(--pad) 7rem; }
.case-body section { scroll-margin-top: 2rem; padding: 2.5rem 0; border-bottom: 1px solid var(--rule); }
.case-body section:first-of-type { padding-top: 0.5rem; }
.case-body h2 { margin-bottom: 1rem; }
.case-body media-item img { border-radius: 1.5rem; margin: 1.5rem 0; }
.case-hero img { border-radius: 2rem; width: 100%; height: auto; display: block; margin-bottom: 2rem; }
.case-note {
  font-family: var(--mono); font-size: 0.95rem; color: var(--swatch-4);
  border: 1px dashed var(--swatch-5); border-radius: 0.8rem; padding: 0.8rem 1rem;
}
@media (max-width: 760px) {
  .case { grid-template-columns: 1fr; }
  .case-nav { position: static; height: auto; padding: 1.5rem 1.3rem; border-bottom: 0.1rem solid var(--swatch-6); }
  .case-body { padding: 1.5rem 1.3rem 6rem; }
}

/* ---- additional Cargo text styles used in case studies ----------------- */
.h3, .h4-but-is-bigger { display:block; font-family: var(--sans); font-size:1.6rem; font-weight:500; color: var(--swatch-1); }
.body-but-black { color: var(--swatch-1); }
.mono { font-family: var(--mono); }
text-icon[icon="pointer-2"] { --icon: url('../assets/icons/pointer.svg'); }

/* ---- galleries (gallery-justify / gallery-grid) ------------------------ */
gallery-justify, gallery-grid {
  display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0;
}
gallery-justify media-item, gallery-grid media-item { flex: 1 1 30%; min-width: 220px; }
gallery-justify media-item img, gallery-grid media-item img { border-radius: 1rem; object-fit: cover; height: 100%; }
.media-placeholder {
  background: repeating-linear-gradient(45deg, #f3f3f3 0 10px, #ececec 10px 20px);
  border-radius: 1rem; min-height: 220px; flex: 1 1 30%;
}
.case-body media-item[data-scale] { margin-inline: auto; }
blockquote { margin: 0; padding: 0 0 0 2em; }