/* Project pages on the B system. Loads after b.css.
   Old page code and the shared carousel read these variable names,
   so they are aliased onto the Obsidian, Ash, Ghost White tokens. */

:root {
  --bg: #5a5a5a;
  --bg-elev: #4f4f4f;
  --ink: #000000;
  --ink-soft: rgba(0, 0, 0, 0.66);
  --rule: rgba(0, 0, 0, .5);
  --accent: #000000;
  --accent-deep: rgba(0, 0, 0, 0.66);
  --serif: "Satoshi", "Inter", ui-sans-serif, system-ui, sans-serif;
  --sans: "Satoshi", "Inter", ui-sans-serif, system-ui, sans-serif;
  /* Two text sizes on a detail page: prose, and the small labels beside it.
     Headings are the only thing allowed to sit outside them. */
  --body: 20px;
  --label: 18px;
}
body.is-dark { background: var(--bg); color: var(--ink); }

/* The bar is fixed and only turns solid behind the home page's loop. There is
   no loop here, so it is solid from the start and the page clears its height. */
.bar--top { background: var(--ash-bg); border-bottom: 1px solid var(--line); }
.project {
  padding-top: var(--bar);
  overflow-x: clip;
  /* Same four rules as the home page, on the same pixel as a cell border. */
  background-image: linear-gradient(to right,
    transparent calc(25% - 1px), var(--rule) calc(25% - 1px), var(--rule) 25%,
    transparent 25%, transparent calc(50% - 1px), var(--rule) calc(50% - 1px), var(--rule) 50%,
    transparent 50%, transparent calc(75% - 1px), var(--rule) calc(75% - 1px), var(--rule) 75%,
    transparent 75%);
}

/* Sheet layout: four columns, ash seams */
.project {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 0;
}
.project > * { min-width: 0; }

.project__back {
  grid-column: 1;
  grid-row: 1;
  padding: 18px var(--gutter);
  font-size: var(--body);
  color: var(--ink);
  align-self: stretch;
}
.project__back:hover { color: var(--ash); }

.project__head {
  grid-column: 2 / -1;
  grid-row: 1;
  padding: 18px var(--gutter) 54px;
  margin: 0;
}
.project__kicker {
  font-size: var(--label);
  color: var(--ink-soft);
  margin: 0 0 45px;
  text-transform: none;
  letter-spacing: 0;
}
.project__title {
  font-weight: 500;
  font-size: clamp(56px, 8vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.056em;
  margin: 0 0 32px -3px;
}
.project__lede {
  font-size: var(--body);
  line-height: 1.2;
  letter-spacing: -0.037em;
  color: var(--ink);
  max-width: 28em;
  margin: 0;
}

.project__cta { display: inline-block; width: auto; margin-top: 32px; font-size: var(--body); line-height: 1.2; }

.project__hero {
  grid-column: 1 / -1;
  margin: 0;
  width: 100%;
  max-width: none;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.project__hero img { width: 100%; height: auto; border-radius: 0; display: block; }

.project__meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: var(--body);
}
.project__meta dt,
.project__meta dd {
  padding: 14px var(--gutter) 18px;
  margin: 0;
}
.project__meta dt {
  font-size: var(--label);
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
  padding-top: 14px;
  padding-bottom: 0;
}
.project__meta dd { grid-row: 2; font-size: var(--body); letter-spacing: -0.029em; line-height: 1.2; padding-top: 0; }
.project__meta dt:nth-of-type(1), .project__meta dd:nth-of-type(1) { grid-column: 1; }
.project__meta dt:nth-of-type(2), .project__meta dd:nth-of-type(2) { grid-column: 2; }
.project__meta dt:nth-of-type(3), .project__meta dd:nth-of-type(3) { grid-column: 3; }
.project__meta dt:nth-of-type(4), .project__meta dd:nth-of-type(4) { grid-column: 4; }
.project__meta dt:nth-of-type(n+5), .project__meta dd:nth-of-type(n+5) { display: none; }
.project__meta dd a { border-bottom: 1px solid var(--ink); }
.project__meta dd a:hover { color: var(--ash); border-color: var(--ash); }

.project__body {
  grid-column: 2 / span 2;
  padding: 54px var(--gutter) 96px;
}
.project__body h2 {
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.037em;
  margin: 72px 0 18px;
}
.project__body h2:first-child { margin-top: 0; }
.project__body p { font-size: var(--body); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 1.2em; }
.project__body a { border-bottom: 1px solid var(--ink); }
.project__body a:hover { color: var(--ash); border-color: var(--ash); }

.project__figure { margin: 45px 0; }
.project__figure img { width: 100%; height: auto; border-radius: 0; display: block; }
.project__figure figcaption { margin-top: 9px; font-size: var(--label); color: var(--ink-soft); font-style: normal; }
.project__figure--wide { margin-left: 0; margin-right: 0; width: 100%; max-width: none; }

/* Device carousel placed directly in the grid ( six pages ): full width, centered device */
.project > .device-figure,
.project > .video-figure {
  grid-column: 1 / -1;
  margin: 0 !important;
  padding: 45px 0 32px;
  width: 100% !important;
  max-width: none !important;
  border-top: 1px solid var(--rule);
}
.project > .device-figure .slider-shell { margin: 0 auto; }
.project > .video-figure { padding: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.project > .video-figure .video-figure__player { display: block; width: 100%; height: auto; background: var(--obsidian); }
.project > .video-figure figcaption { padding: 9px var(--gutter) 14px; }
.project > .video-figure { position: relative; }
.project > .video-figure .video-figure__player[data-sound] { cursor: pointer; }
.video-figure__sound {
  position: absolute; left: var(--gutter); bottom: 84px;
  background: var(--obsidian); color: var(--ghost);
  font-family: var(--font); cursor: pointer;
}
.video-figure__sound:hover { background: var(--ghost); color: var(--obsidian); }
.project > .device-figure figcaption,
.project > .video-figure figcaption { padding: 0 var(--gutter); }

/* Shared device carousel and page mockups: caption and matte tweaks only */
main.case-study .device-figure figcaption,
main.case-study .video-figure figcaption { font-style: normal; text-align: left; font-size: var(--label); color: var(--ink-soft); }


.project__pager {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.project__pager a {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 14px;
  padding: 18px var(--gutter);
}
.project__pager__next { justify-content: flex-end; text-align: right; }
.project__pager__label { font-size: var(--label); color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
.project__pager__name { font-size: 27px; line-height: 1; letter-spacing: -0.032em; color: var(--ink); }
.project__pager a:hover .project__pager__name { color: var(--ash); }

.footer {
  display: flex;
  justify-content: space-between;
  padding: 18px var(--gutter) 24px;
  font-size: var(--label);
  color: var(--ash);
  border-top: 1px solid var(--rule);
}

@media (max-width: 900px) {
  .project { grid-template-columns: 1fr; }
  .project__back, .project__head, .project__body { grid-column: 1; }
  .project__back { grid-row: 1; border-bottom: 1px solid var(--rule); }
  .project__head { grid-row: 2; }
  .project__meta { grid-template-columns: 1fr 1fr; }
  .project__meta dt:nth-of-type(3), .project__meta dd:nth-of-type(3),
  .project__meta dt:nth-of-type(4), .project__meta dd:nth-of-type(4) { display: none; }
  .project__pager { grid-template-columns: 1fr; }
  .project__pager__prev { border-bottom: 1px solid var(--rule); }
  /* With no Next link the rule below would land on the footer's top border. */
  .project__pager__prev:last-child { border-bottom: 0; }
  .project__pager__next { justify-content: flex-start; text-align: left; }
}

/* ─────────────────────────────────────────────────────────
   Carousel, flat. The laptop chrome is gone: no radius, no
   shadow, no sheen. A full-width plate on black between two
   hairlines, with square controls in the same system.
   Selectors carry .project.case-study so they beat the
   inline copy of the old device CSS on the Nudge page.
   ───────────────────────────────────────────────────────── */

.project.case-study .slider-shell {
  --device-w:   100vw;
  --bezel:      0px;
  --bottom-lip: 0px;
  --kbd-h:      0px;
  --screen-w:   100vw;
  --screen-h:   min(calc(100vw * 10 / 16), 86vh);
  max-width: none;
  margin: 0;
  padding: 0;
}
.project.case-study .device-row {
  height: var(--screen-h);
  filter: none;
}
.project.case-study .slider-track {
  column-gap: 0;
  padding-left: 0;
  padding-right: 0;
}
.project.case-study .slide {
  flex: 0 0 100vw;
  border-radius: 0;
  background: var(--obsidian);
}
.project.case-study .slide__inset { border-radius: 0; max-width: 92%; max-height: 92%; }
.project.case-study .slide__fill { object-position: center; }

/* Square hairline controls, seated inside the plate */
.project.case-study .slider__btn {
  top: calc(var(--screen-h) / 2);
  width: 44px; height: 44px;
  border-radius: 0;
  background: transparent;
  border: 0;
  color: var(--ghost);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* no chip, so the stroke inverts against whatever plate is behind it */
  mix-blend-mode: difference;
}
/* Drawn, not set. The font's arrow glyph sits above the optical center of its
   box; an SVG whose ink is symmetric in its viewBox centers exactly. */
.project.case-study .slider__btn svg {
  display: block;
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.project.case-study .slider__btn--prev { left: var(--gutter); }
.project.case-study .slider__btn--next { right: var(--gutter); }
.project.case-study .slider__btn:hover {
  background: transparent;
  color: var(--ghost);
  transform: translateY(-50%) scale(1.12);
}

.project.case-study .slider__dots { gap: 6px; margin: 0; padding: 18px 0 0; }
.project.case-study .slider__dot {
  width: 9px; height: 9px;
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--ink-soft);
  transition: background .2s ease, border-color .2s ease;
}
.project.case-study .slider__dot.is-active,
.project.case-study .slider__dot:hover {
  background: var(--obsidian);
  border-color: var(--obsidian);
  transform: none;
}

.project.case-study .slider__hint {
  margin-top: 12px;
  font-size: var(--label);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}
.project.case-study .slider__hint kbd {
  font-size: var(--label);
  border-radius: 0;
  border-color: var(--ink-soft);
  padding: 1px 6px;
}

/* Full bleed wherever the figure sits: directly in the page grid on six pages,
   inside the reading column on Imperva and Nudge. */
.project.case-study .device-figure,
.project.case-study .video-figure {
  width: 100vw;
  max-width: none;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 45px 0 40px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transform: none;
}
.project.case-study .video-figure__player {
  border-radius: 0;
  box-shadow: none;
}
.project.case-study .device-figure figcaption,
.project.case-study .video-figure figcaption {
  padding: 0 var(--gutter);
  text-align: left;
  font-style: normal;
  font-size: var(--label);
  color: var(--ink-soft);
}


/* The color cycle on the name stays here, on the project pages only. */
.bar__name .name { animation: name-cycle 32s linear infinite; will-change: color; }
.bar__name .name--offset { animation-delay: -16s; }
@media (prefers-reduced-motion: reduce) { .bar__name .name { animation: none; } }

/* Body copy: 8px larger on the phone, reference leading. */
/* Both text tiers carry their own leading; nothing inherits the 1.43. */
.project__back,
.project__lede,
.project__meta dd { line-height: 1.2; }

/* The label tier tracks the body's leading rather than the inherited 1.43. */
.project__kicker,
.project__meta dt,
.project__figure figcaption,
.project__pager__label,
.project.case-study .slider__hint,
main.case-study figcaption,
.project.case-study .step__n,
.project.case-study .outcome-item__label { line-height: 1.25; }

@media (max-width: 560px) {
  :root { --body: 26px; }
  /* headings have to stay clear of a 26px body */
  .project__body h2 { font-size: 38px; }
  .project__pager__name { font-size: 34px; }
}

/* Collapse the seams where two bordered blocks meet: the lower one's top
   border would otherwise land on the upper one's bottom border. */
.project.case-study :is(.device-figure, .video-figure) + :is(.device-figure, .video-figure),
:is(.project__hero, .device-figure, .video-figure) + .project__meta { border-top: 0; }

/* The pager's last row and the footer's top edge meet on the same seam. */
.project__pager + .footer { margin-top: -1px; }

/* The carousel says what it is on its own: the caption goes everywhere, and on
   a phone the dots and the keyboard hint go with it ( there is no keyboard ). */
.project.case-study .device-figure figcaption,
.project.case-study .video-figure figcaption,
main.case-study .device-figure figcaption,
main.case-study .video-figure figcaption { display: none; }

@media (max-width: 560px) {
  .project.case-study .slider__dots,
  .project.case-study .slider__hint { display: none; }
}