/* ========== PROJECT PAGES ==========
   One template for every case study (projects/*.html), after 14islands.com's case pages but with more
   room for the story: a big title, a 10-second brief, sections with a label that stays in view, pictures
   that rise out of the night (case.js), and the next project at the end.
   Each project has its own night: the background's glows and wandering light take the project's colour
   (data-project on <html>), so the pages differ but stay one site. The same colours make the ink drop on
   the links that lead to the page (data-ink, ink.js). */

/* Each project's night: base.css's background tokens, retinted */
html[data-project="akakce"] {
  --glow-indigo: 52 104 186;      /* top left */
  --glow-violet: 70 140 214;      /* right */
  --glow-blue: 30 86 170;         /* bottom */
  --glow-lavender: 126 180 245;   /* the wandering light and the small lights (labels, header spot, buttons) */
}
html[data-project="orsay"] {
  --glow-indigo: 120 52 72;       /* burgundy */
  --glow-violet: 190 150 90;      /* muted gold */
  --glow-blue: 80 62 110;
  --glow-lavender: 236 196 120;   /* the card's ink rim */
}
html[data-project="bloomin"] {
  --glow-indigo: 70 84 120;
  --glow-violet: 120 140 170;
  --glow-blue: 0 120 100;         /* the brand's green, deep */
  --glow-lavender: 196 210 228;   /* the card's ink rim */
}
html[data-project="design-system"] {
  --glow-indigo: 92 52 180;
  --glow-violet: 150 92 232;
  --glow-blue: 70 40 150;
  --glow-lavender: 190 130 255;   /* the card's ink rim */
}
html[data-project="argwallet"] {
  --glow-indigo: 70 50 170;
  --glow-violet: 50 140 190;      /* the app's cyan, deep */
  --glow-blue: 46 76 220;
  --glow-lavender: 110 220 200;   /* the card's ink rim */
}
html[data-project="vendease"] {
  --glow-indigo: 40 56 150;
  --glow-violet: 30 110 230;      /* the brand's blue */
  --glow-blue: 22 50 130;
  --glow-lavender: 90 160 255;    /* the card's ink rim */
}

.case {
  --case-max: 1200px;
  --paper: #f6f6f6;   /* the documentation boards' own background: pictures on it are letterboxed in it */
  overflow-x: clip;   /* the strip bleeds to the screen edge; clip (not hidden) keeps sticky working */
}

/* ========== HERO ==========
   Small facts at the top, the project's name huge at the bottom; its words rise out of the night like the
   pictures (case.js adds .is-armed, then .is-in; later when the page opens under an ink drop). */
.case-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  max-width: calc(var(--case-max) + 2 * var(--pad));
  margin: 0 auto;
  padding: calc(var(--header-h) + 56px) var(--pad) 72px;
}

.case-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 56px;
  margin-bottom: auto;   /* to the top */
}
.case-facts dt,
.case-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.case-facts dd { margin-top: 6px; font-size: 15px; }

.case-title {
  margin: 48px 0 28px -0.04em;
  font-family: var(--font-display);
  font-size: clamp(64px, 15vw, 230px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.case-title .w { display: inline-block; }
/* One long word (ArgWallet, VendEase): a little smaller, so it stays inside the column on every width */
.case-title--long { font-size: clamp(44px, 13.5vw, 186px); }

.case-sub h2 { font-size: clamp(22px, 2.6vw, 38px); font-weight: 500; line-height: 1.15; }

.is-armed .case-title .w,
.is-armed .case-sub > * {
  opacity: 0;
  filter: blur(16px);
  transform: translateY(24%) scaleY(0.86);
  transition: opacity 1.1s var(--ease-out), filter 1.1s var(--ease-out), transform 1.4s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms + var(--wait, 100ms));
}
.ink-in .is-armed { --wait: 550ms; }   /* after the ink has begun to sink */
.is-armed.is-in .case-title .w,
.is-armed.is-in .case-sub > * { opacity: 1; filter: none; transform: none; }

/* ========== COVER ========== */
.case-cover {
  max-width: calc(var(--case-max) + 2 * var(--pad));
  margin: 0 auto;
  padding: 0 var(--pad);
}
.case-cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }

/* ========== BRIEF: the project in 10 seconds ========== */
.case-brief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 56px;
  max-width: calc(var(--case-max) + 2 * var(--pad));
  margin: 0 auto;
  padding: 120px var(--pad) 0;
}
.case-brief > div { padding-top: 20px; border-top: 1px solid var(--line); }
.case-brief dd { margin-top: 14px; font-size: 17px; line-height: 1.6; }
.case-brief dd + dd { margin-top: 10px; color: var(--text-mid); }

/* ========== STATEMENT: one sentence, lit word by word as it scrolls up (case.js) ========== */
.case-statement {
  max-width: calc(1100px + 2 * var(--pad));
  margin: 0 auto;
  padding: 180px var(--pad) 60px;
  font-family: var(--font-display);
  font-size: clamp(34px, 5.6vw, 84px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.case-statement .lit { transition: opacity 0.2s linear; }

/* ========== SECTIONS ==========
   Label on the left, staying in view while the section's text scrolls by (only the text: it leaves with
   the text's end, so it never sits over a picture); the story on the right at a reading width; wide
   pictures below, across both. */
.case-section {
  max-width: calc(var(--case-max) + 2 * var(--pad));
  margin: 0 auto;
  padding: 140px var(--pad) 0;
  scroll-margin-top: 40px;
}
.case-section__text {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 64px;
}
.case-section__text > .case-label {
  position: sticky;
  top: 112px;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 0.9em;
}
.case-section__text > .case-label::before {   /* a small light: the header spot's twin */
  content: '';
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px 1px rgb(var(--glow-lavender) / 0.95), 0 0 10px 3px rgb(var(--glow-lavender) / 0.45);
}
.case-body > * + * { margin-top: 24px; }
.case-body h2 {
  max-width: 24ch;
  font-size: clamp(28px, 3.3vw, 46px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.case-body h3 {
  margin-top: 64px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.case-body p,
.case-list li { max-width: 62ch; font-size: 18px; line-height: 1.65; color: var(--text-mid); }

.case-list { list-style: none; }
.case-list li { position: relative; padding-left: 28px; }
.case-list li + li { margin-top: 12px; }
.case-list li::before {   /* a short line of light */
  content: '';
  position: absolute;
  left: 0;
  top: 0.82em;
  width: 14px;
  height: 1px;
  background: rgb(var(--glow-lavender) / 0.8);
}

.case-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.case-card {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgb(var(--glow-lavender) / 0.04);
}
.case-card h4 { font-size: 18px; font-weight: 600; line-height: 1.25; }
.case-card p,
.case-card li { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-mid); }
.case-card .case-list li { padding-left: 20px; }
.case-card .case-list li + li { margin-top: 6px; }
.case-card .case-list li::before { width: 10px; }

.case-figure { margin-top: 56px; }
.case-figure img { width: 100%; height: auto; border-radius: 16px; }
/* A recording: plays while on screen, with a pause button (case.js) */
.case-video { position: relative; }
.case-video video { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--surface); }
.case-video__toggle { position: absolute; right: 16px; bottom: 16px; background: rgb(var(--bg-rgb) / 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.case-video__toggle svg { width: 18px; height: 18px; }
/* Board pictures (documentation pages) in a fixed frame: letterboxed on their own paper colour */
.case-figure--paper img { aspect-ratio: 4 / 3; object-fit: contain; background: var(--paper); }

/* ========== BENTO: pictures side by side (two columns; --wide spans both) ========== */
.case-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 20px;
  margin-top: 56px;
}
.case-bento > .case-figure { margin-top: 0; }
.case-bento > .case-figure--wide { grid-column: 1 / -1; }
.case-bento > .case-figure--wide.case-figure--paper img { aspect-ratio: auto; }

/* ========== STORY: steps on the left, each one's picture on the right (case.js) ==========
   On wide screens case.js moves the pictures into a frame that stays in view (.is-staged): the step
   at the middle of the screen is lit and its picture fades in. Below 1024px, and without the script,
   each step is simply its text and then its picture. */
.case-story { margin-top: 72px; }
.case-story__steps { list-style: none; counter-reset: step; }
.case-story__step { counter-increment: step; }
.case-story__step + .case-story__step { margin-top: 72px; }
.case-story__step h3 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.2;
}
.case-story__step h3::before {   /* 01, 02… */
  content: counter(step, decimal-leading-zero);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgb(var(--glow-lavender));
}
.case-story__step p { max-width: 46ch; margin-top: 14px; font-size: 17px; line-height: 1.65; color: var(--text-mid); }
.case-story__step > .case-figure { margin-top: 28px; }

.case-story.is-staged {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0 64px;
}
.is-staged .case-story__step {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.32;
  transition: opacity 0.5s var(--ease-out);
}
.is-staged .case-story__step + .case-story__step { margin-top: 0; }
.is-staged .case-story__step.is-on { opacity: 1; }
.case-story__stage {
  position: sticky;
  top: 14vh;
  align-self: start;
  height: 72vh;
}
.case-story__stage > .case-figure {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease-out), visibility 0s 0.6s;
}
.case-story__stage > .case-figure.is-on { opacity: 1; visibility: visible; transition: opacity 0.6s var(--ease-out); }
.case-story__stage > .case-figure > button { flex: 1; min-height: 0; }
.case-story__stage > .case-figure img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; background: var(--paper); }
/* --fit: every picture is 4:3 (made for the page), so the frame takes that shape instead of a fixed height */
.case-story--fit .case-story__stage { top: 16vh; height: auto; aspect-ratio: 4 / 3.3; max-height: 76vh; }

/* ========== STRIP: more pictures, scrolled sideways (case.js: the arrow buttons) ==========
   Runs out to the right edge of the screen, so the next picture peeks in. Native scrolling (trackpad,
   touch, Shift+wheel, arrow keys once focused), snapping to each picture. */
.case-strip { margin-top: 110px; }
.case-strip__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.case-strip__head h3 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.case-strip__nav { display: flex; gap: 10px; }
.case-strip__nav button { width: 44px; height: 44px; background: rgb(var(--bg-rgb) / 0.6); }
.case-strip__nav button svg { width: 18px; height: 18px; }
.case-strip__nav button:disabled { opacity: 0.35; cursor: default; }
.case-strip__track {
  display: flex;
  gap: 20px;
  margin-top: 24px;
  margin-right: calc((100% - 100vw) / 2);      /* out to the screen's right edge */
  padding: 0 calc((100vw - 100%) / 2) 18px 0;  /* … and the last picture can still come fully in */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--glow-lavender) / 0.35) transparent;
}
.case-strip__track:focus-visible { outline-offset: 6px; border-radius: 16px; }
.case-strip__track > li { flex: 0 0 clamp(260px, 40%, 500px); scroll-snap-align: start; }
.case-strip__track .case-figure { margin-top: 0; }
/* Slides: one big picture at a time, in its own shape straight on the night (no frame behind it), a
   counter beside the arrows. Same scrolling as the strip. */
.case-strip--slides .case-strip__track {
  align-items: center;
  gap: 40px;
  margin-right: 0;
  padding: 0 0 8px;
}
.case-strip--slides .case-strip__track > li { flex-basis: 100%; }
.case-strip--slides .case-figure img { width: auto; max-width: 100%; height: auto; max-height: 68vh; margin-inline: auto; border-radius: 14px; }
.case-strip--slides figcaption { max-width: 62ch; margin-inline: auto; text-align: center; }
.case-strip--slides figcaption strong { display: block; margin-bottom: 4px; font-weight: 600; color: var(--text); }
.case-strip__count { min-width: 5ch; font-size: 13px; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; text-align: right; color: var(--text-dim); }
.case-strip__nav { align-items: center; }
/* A strip of phone screens: narrower cards in the screens' own shape */
.case-strip--phones .case-strip__track > li { flex-basis: clamp(170px, 20%, 240px); }
.case-strip--phones .case-figure img { border-radius: 22px; }
.case-video .case-video__play,
.case-video.is-paused .case-video__pause { display: none; }
.case-video.is-paused .case-video__play { display: block; }
.case-figure figcaption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.case-figure > button {   /* the picture is a button that opens it large */
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.case-figure > button:focus-visible { outline-offset: 6px; border-radius: 16px; }

.case-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.case-tags li { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--text-mid); }

.case-note {
  max-width: calc(var(--case-max) + 2 * var(--pad));
  margin: 120px auto 0;
  padding: 0 var(--pad);
}
.case-note p {
  max-width: 76ch;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}

/* Hidden while the site is live (2026-10-24): Nilsu's sentences aren't written yet.
   Drop this rule to see the placeholders again. */
.case-todo,
:is(p, dd):has(> .case-todo:only-child) { display: none !important; }
.case-body > :first-child:has(> .case-todo:only-child) + * { margin-top: 0; }   /* what follows starts level with the label */

/* Prototype only: a gap Nilsu still has to fill */
.case-todo {
  display: inline-block;
  padding: 2px 10px;
  border: 1px dashed rgb(var(--glow-lavender) / 0.7);
  border-radius: 8px;
  font-size: 13px;
  color: rgb(var(--glow-lavender));
}

/* ========== NEXT PROJECT ==========
   The next case as one link: its name and facts on the left, its cover on the right (stacked on phones).
   It opens with an ink drop in that project's colour. Kept modest, so the page ends on this project. */
.case-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 32px 56px;
  align-items: center;
  max-width: calc(var(--case-max) + 2 * var(--pad));
  margin: 180px auto 0;
  padding: 0 var(--pad);
  color: inherit;
  text-decoration: none;
}
.case-next__text { display: block; }
.case-next__title {
  display: block;
  margin: 14px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 64px);
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
}
.case-next__arrow { display: inline-block; margin-left: 0.25em; font-size: 0.6em; vertical-align: 0.15em; transition: translate 0.6s var(--ease-out); }
.case-next:hover .case-next__arrow,
.case-next:focus-visible .case-next__arrow { translate: 10px 0; }
.case-next__meta { display: block; font-size: 15px; color: var(--text-mid); }
.case-next__media { display: block; overflow: hidden; border-radius: 16px; }
.case-next__media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.case-next:hover .case-next__media img { scale: 1.03; }
.case-next:focus-visible { outline-offset: 8px; border-radius: 16px; }

/* ========== ALL PROJECTS (projects/index.html) ==========
   Every project as a card, two to a row: the cover, then its name, year and one line. The hero is the
   case pages' one, shorter. Each card opens its page with an ink drop in that project's colour. */
.case-hero--short { min-height: 0; padding-top: calc(var(--header-h) + 120px); padding-bottom: 24px; }
.projects {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px 40px;
  max-width: calc(var(--case-max) + 2 * var(--pad));
  margin: 56px auto 0;
  padding: 0 var(--pad);
}
.projects__card { display: block; color: inherit; text-decoration: none; }
a.projects__card:focus-visible { outline-offset: 8px; border-radius: 16px; }
.projects__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface);
}
.projects__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  a.projects__card:hover .projects__media img { scale: 1.03; }
}
.projects__badge {   /* 'In progress · coming soon', as on the homepage */
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(var(--bg-rgb) / 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.projects__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--glow-lavender));
  box-shadow: 0 0 10px 2px rgb(var(--glow-lavender) / 0.7);
}
.projects__info { display: grid; gap: 6px; margin-top: 20px; }
.projects__title { font-size: 20px; font-weight: 600; line-height: 1.3; }
.projects__meta { font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-mid); }
.projects__desc { max-width: 52ch; font-size: 15px; color: var(--text-mid); }

/* ========== RISE: pictures come out of the night (case.js adds .js-rise, then .is-in) ========== */
.js-rise {
  opacity: 0;
  filter: blur(14px);
  transform: scaleY(0.92);
  transform-origin: 50% 100%;
  transition: opacity 1.2s var(--ease-out), filter 1.2s var(--ease-out), transform 1.4s var(--ease-out);
}
.js-rise.is-in { opacity: 1; filter: none; transform: none; }

/* ========== LIGHTBOX ========== */
.lightbox {
  max-width: 96vw;
  max-height: 94vh;
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}
.lightbox::backdrop { background: rgb(var(--bg-rgb) / 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox img { display: block; max-width: 96vw; max-height: 94vh; width: auto; height: auto; border-radius: 12px; }
.lightbox__close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgb(var(--bg-rgb) / 0.6);
  color: var(--text);
  font: inherit;
  font-size: 22px;
  cursor: pointer;
}

/* ========== HEADER ON PROJECT PAGES ==========
   The menu becomes the page's contents: back to the work, then the sections (the light under the one
   being read, header.js). Below 1024px only the way back and the current section are shown. */
.site-header__back .arrow { display: inline-block; transition: translate 0.4s var(--ease-out); }
.site-header__back:hover .arrow { translate: -3px 0; }
.case-page .site-header__nav { gap: 26px; }
@media (max-width: 1023px) {
  .case-page .site-header__nav a[href^="#"]:not([aria-current]) { display: none; }
}

/* ========== SMALLER SCREENS ========== */
@media (max-width: 1023px) {
  .case-brief { grid-template-columns: 1fr; gap: 28px; }
  .case-section { padding-top: 110px; }
  .case-section__text { grid-template-columns: 1fr; }
  .case-section__text > .case-label { position: static; margin-bottom: 18px; padding-top: 0; }
}
@media (max-width: 767px) {
  .case-hero { padding-bottom: 48px; }
  .case-facts { gap: 14px 32px; }
  .case-statement { padding-top: 120px; }
  .case-section { padding-top: 88px; }
  .case-body p, .case-list li { font-size: 17px; }
  .case-figure { margin-top: 40px; }
  .case-bento { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .case-strip__track > li { flex-basis: 82%; }
  .case-strip--phones .case-strip__track > li { flex-basis: 52%; }
  .case-strip--slides .case-strip__track > li { flex-basis: 100%; }
  .case-next { grid-template-columns: 1fr; margin-top: 140px; }
  .case-hero--short { padding-top: calc(var(--header-h) + 72px); }
  .projects { grid-template-columns: 1fr; gap: 56px; margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .is-armed .case-title .w, .is-armed .case-sub > *, .js-rise { opacity: 1; filter: none; transform: none; transition: none; }
  .is-staged .case-story__step, .case-story__stage > .case-figure { transition: none; }
}