/* Site layer for Chip & Petal.
 *
 * The system owns tokens and components; nothing here redefines either. This
 * file holds only what a portfolio needs that a design system does not ship:
 * the opening stage, the sticky header, page scaffolding, the case-study note
 * columns, and the card lightbox.
 *
 * One deliberate EXTENSION is marked below — `.cp-card__media`. The system's
 * card block is "flat chip, or nothing — no image in the block", but a
 * portfolio is screenshots. The media slot follows the block's own rules
 * (2px ink stroke, chip radius, same clearance under the hole) so it reads as
 * part of the system rather than an exception to it.
 */

/* ---------- page scaffolding ---------- */

body { background: var(--surface-page); }

.page {
  position: relative;
  --split: 0;      /* eased scroll progress, 0 -> 1 */
  --pin-y: 0px;    /* how far the revealed page is held back */
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--cp-space-3);
}

/* Sections are paper sheets on the dark canvas — the system's own stacking
   order. The old cream/blush alternation is gone with Sweet & Loud; contrast
   between sections now comes from the canvas gaps between sheets. */
.sheet { margin-bottom: var(--cp-space-4); }

.site-h1 {
  font: var(--cp-display);
  letter-spacing: var(--cp-track-display);
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}
.site-h2 {
  font: var(--cp-h2);
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}
.site-h3 {
  font: var(--cp-title);
  color: var(--text-strong);
  margin: 0;
}
.prose {
  font: var(--cp-body);
  color: var(--text-body);
  max-width: var(--cp-measure);
  margin: 0;
  text-wrap: pretty;
}
/* NOTE: the system's --text-mute (#8A8E96) is 3.18:1 on paper — below AA for
   text. Credit lines are content, so they take --text-body instead. */
.meta {
  font: var(--cp-label);
  letter-spacing: var(--cp-track-label);
  text-transform: uppercase;
  color: var(--text-body);
  margin: 0;
}

/* ---------- opening stage ---------- */

.stage {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
}
.stage[data-done='true'] { visibility: hidden; pointer-events: none; }

.stage__layer { position: absolute; inset: 0; will-change: transform; }
.stage__layer > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.stage__dark  { transform: translate(calc(var(--split) * -58vw), calc(var(--split) * -30vh)); }
.stage__light { transform: translate(calc(var(--split) *  58vw), calc(var(--split) *  30vh)); }

.hero {
  position: absolute;
  inset: 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__body { max-width: min(54vw, 720px); }
.hero__title {
  font: var(--cp-display);
  font-size: clamp(30px, 4.6vw, 56px);
  letter-spacing: var(--cp-track-display);
  color: var(--text-on-canvas);
  margin: 0;
  text-wrap: balance;
}
.hero__title i { font-style: normal; color: var(--cp-coral); }
.hero__title .nobreak { white-space: nowrap; }

.opener-contact {
  position: absolute;
  right: clamp(1.5rem, 4vw, 3rem);
  left: clamp(1.5rem, 4vw, 3rem);
  bottom: clamp(1.5rem, 5vh, 3rem);
  display: flex;
  justify-content: flex-end;
}
.opener-contact__inner { display: flex; flex-flow: row wrap; gap: var(--cp-space-2); }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: var(--cp-space-3);
  transform: translateX(-50%);
  font: var(--cp-label);
  letter-spacing: var(--cp-track-label);
  text-transform: uppercase;
  color: var(--cp-ink);
  margin: 0;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--surface-page);
  border-bottom: 1px solid var(--stroke-hairline);
  opacity: var(--split);
}
.site-header[data-interactive='false'] { pointer-events: none; }

.site-header__bar {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--cp-space-2) var(--cp-space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cp-space-2);
}
.site-header__wordmark {
  font: var(--cp-title);
  color: var(--text-on-canvas);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav { display: flex; align-items: center; gap: var(--cp-space-1); }
.site-nav a {
  font: var(--cp-body-sm);
  color: var(--text-on-canvas);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: var(--cp-chip-sm);
  white-space: nowrap;
  transition: var(--cp-transition);
}
.site-nav a:hover { background: var(--cp-canvas-raised); }
.site-nav a.is-contact {
  background: var(--action-fill);
  color: var(--cp-ink);
  border: var(--cp-stroke) solid var(--stroke-ink);
}
.site-nav a.is-contact:hover { background: var(--action-fill-hover); }

.menu-toggle {
  display: none;
  background: transparent;
  color: var(--text-on-canvas);
  border: var(--cp-stroke) solid var(--cp-ink-line);
  border-radius: var(--cp-chip-sm);
  min-height: var(--tap-min, 44px);
  padding: 0 16px;
  font: var(--cp-label);
  letter-spacing: var(--cp-track-label);
  text-transform: uppercase;
  cursor: pointer;
}

.site-menu {
  display: flex;
  flex-direction: column;
  background: var(--cp-canvas-raised);
  border-top: 1px solid var(--stroke-hairline);
}
.site-menu[hidden] { display: none; }
.site-menu a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 var(--cp-space-3);
  font: var(--cp-body);
  color: var(--text-on-canvas);
  text-decoration: none;
  border-bottom: 1px solid var(--stroke-hairline);
}
.site-menu a:last-child { color: var(--cp-coral); border-bottom: 0; }

/* ---------- revealed page ---------- */

.reveal {
  position: relative;
  z-index: 1;
  transform: translateY(var(--pin-y));
  will-change: transform;
  padding-top: var(--cp-space-4);
}
.reveal-spacer { height: 90vh; }

/* ---------- EXTENSION: an image in the card's colour block ---------- *
 * The system ships a flat colour block and rules images out of it. A
 * portfolio cannot be built without screenshots, so the media slot takes the
 * block's exact geometry — chip radius, 2px ink stroke, the same clearance
 * under the punched hole — and fills it with the image instead of a colour.  */

.cp-card__media {
  position: relative;
  margin-top: var(--cp-card-block-clear, 20px);
  aspect-ratio: 16 / 9;
  background: var(--cp-card-block);
  border: var(--cp-stroke) solid var(--stroke-ink);
  border-radius: var(--cp-chip);
  overflow: hidden;
  flex: none;
}
.cp-card__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cp-card--no-hole .cp-card__media { margin-top: 0; }

/* A card that opens the lightbox is a control. */
.cp-card.is-zoomable { cursor: pointer; transition: var(--cp-transition); }
.cp-card.is-zoomable:hover { transform: translateY(-2px); }

.cp-card__actions { margin-top: auto; padding-top: var(--cp-space-2); }

/* ---------- case-study note columns ---------- */

/* Two columns that stack independently. A plain grid would tie the blocks
   into rows, so a short note left dead space beside a tall one; each column
   flows on its own instead. */
.notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cp-space-4);
  align-items: start;
}
.notes__col {
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-3);
}
.note { display: flex; flex-direction: column; gap: var(--cp-space-2); }

/* ---------- contact ---------- */

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: inherit;
  text-decoration: none;
  transition: var(--cp-transition);
}
.contact-link:hover { color: var(--cp-marine); }
.contact-link__mark { width: 1em; height: 1em; flex: none; }

/* ---------- card lightbox ---------- */

.lightbox {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
}
.lightbox::backdrop { background: rgb(16 17 19 / 0.86); }

.lightbox__panel {
  position: relative;
  width: min(920px, 92vw);
  max-height: 90vh;
  overflow: auto;
  background: var(--surface-panel);
  border: var(--cp-stroke) solid var(--stroke-ink);
  border-radius: var(--cp-petal);
  --focus-ring: var(--cp-marine);
}

.lightbox__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cp-paper-press);
  border-bottom: var(--cp-stroke) solid var(--stroke-ink);
}
.lightbox__image { display: block; max-width: 100%; max-height: 62vh; object-fit: contain; }

.lightbox__step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-card);
  color: var(--cp-ink);
  border: var(--cp-stroke) solid var(--stroke-ink);
  border-radius: var(--cp-chip);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: var(--cp-transition);
}
.lightbox__step:hover { background: var(--cp-paper-press); }
.lightbox__step[hidden] { display: none; }
.lightbox__step--prev { left: var(--cp-space-2); }
.lightbox__step--next { right: var(--cp-space-2); }

.lightbox__body {
  padding: var(--cp-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--cp-space-2);
}
.lightbox__count {
  margin: 0;
  padding: 0 var(--cp-space-3) var(--cp-space-3);
  font: var(--cp-label);
  letter-spacing: var(--cp-track-label);
  text-transform: uppercase;
  color: var(--text-body);
}
.lightbox__count[hidden] { display: none; }

.lightbox__close {
  position: absolute;
  top: var(--cp-space-2);
  right: var(--cp-space-2);
  z-index: 1;
  min-height: 44px;
  padding: 0 18px;
  background: var(--action-fill);
  color: var(--cp-ink);
  border: var(--cp-stroke) solid var(--stroke-ink);
  border-radius: var(--cp-chip);
  font: var(--cp-label);
  letter-spacing: var(--cp-track-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--cp-transition);
}
.lightbox__close:hover { background: var(--action-fill-hover); }

/* ---------- phone ---------- */

@media (max-width: 760px) {
  /* The curve is transposed to run left-to-right (see opening.js), so the two
     halves separate vertically instead of diagonally. */
  .stage__dark  { transform: translate(0, calc(var(--split) * -70vh)); }
  .stage__light { transform: translate(0, calc(var(--split) *  70vh)); }

  .hero__body { max-width: 100%; max-height: 55vh; }
  .hero__title { font-size: clamp(26px, 7.5vw, 40px); }

  /* The hint keeps the bottom edge; the buttons sit clear above it. Both are
     lifted off the very bottom so the pair reads as a group, not as chrome. */
  .opener-contact {
    justify-content: center;
    bottom: calc(var(--cp-space-4) + 11px + var(--cp-space-3));
  }
  .scroll-hint { bottom: var(--cp-space-4); }

  .site-nav { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; }

  .notes { grid-template-columns: minmax(0, 1fr); gap: var(--cp-space-3); }

  /* The system's panel padding is desktop-scale — 48px a side eats a phone. */
  .cp-panel { padding: var(--cp-space-3) var(--cp-space-3) var(--cp-space-4); }
  .cp-grid { grid-template-columns: minmax(0, 1fr); gap: var(--cp-space-3); }
  .wrap { padding: 0 var(--cp-space-2); }
}

/* Divider styling for the drawn curve, kept from the opening artboard. */
[data-curve='stroke'] {
  stroke: var(--cp-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}