/* Wanbird IT — project story pages.

   The idea: on a project page Wanbird steps back and the project speaks.
   The page wears the project's own colours, type and corners (the --p-*
   variables, set by each page), and Wanbird stays present through one thing:
   the stroke of its mark, leaning at 14 degrees. The stroke is the marker by
   the title, the handle that wipes between two states of the project, and the
   reading progress in the corner. Wanbird's own look returns at the end. */

:root {
  /* Wanbird */
  --w-paper: #F7F5F0;
  --w-ink: #000;
  --w-blue: #1DA1F2;
  --w-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --w-body: "Onest", "Helvetica Neue", Arial, sans-serif;
  --lean: 14deg;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* Project skin: defaults, overridden per page */
  --p-paper: #fff;
  --p-ink: #000;
  --p-accent: var(--w-blue);
  --p-muted: #5f5f5f;
  --p-line: #d6d6d6;
  --p-quiet: #f1f1f1;
  --p-display: var(--w-display);
  --p-body: var(--w-body);
  --p-title-case: none;
  --p-border: 1.5px solid var(--p-ink);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--p-paper);
  color: var(--p-ink);
  font-family: var(--p-body);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--p-accent);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  background: var(--p-paper);
  color: var(--p-ink);
  padding: .5rem .9rem;
  z-index: 10;
}
.skip:focus { top: .75rem; }

/* ---------- The stroke ---------- */

.blade {
  display: block;
  flex: none;
  width: .5em;
  height: .82em;
  margin-left: .2em;
  background: var(--p-accent);
  border-radius: .06em .06em .26em .26em;
  transform: skewX(var(--lean));
  transform-origin: bottom;
}

/* Reading progress: the stroke fills as the story is read. */
.progress {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 5;
  width: 1.15rem;
  height: 1.9rem;
  border: 2px solid var(--p-ink);
  border-radius: .12rem .12rem .6rem .6rem;
  box-shadow: 0 0 0 2px var(--p-paper);
  background: linear-gradient(to top, var(--p-accent) calc(var(--read, 0) * 100%), var(--p-paper) 0);
  transform: skewX(var(--lean));
  pointer-events: none;
}

/* ---------- Dark top: header, title, the wipe ---------- */

.case-top {
  background: var(--p-ink);
  color: var(--p-paper);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem var(--gutter);
  font-family: var(--w-body);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--w-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.02em;
  text-decoration: none;
}
.brand img { width: 2rem; height: auto; }
.top nav { display: flex; gap: clamp(1rem, 2.5vw, 2.25rem); font-size: .975rem; }
.top nav a { text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.top nav a:hover { border-bottom-color: var(--p-accent); }

.case-hero { padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) clamp(2.5rem, 5vw, 4.5rem); }

.case-title {
  display: flex;
  align-items: flex-start;
  gap: clamp(.9rem, 2vw, 2rem);
  font-size: clamp(3.2rem, 10vw, 10rem);
}
.case-title .blade { margin-top: .06em; }
.case-title h1 {
  font-family: var(--p-display);
  font-weight: 700;
  font-size: 1em;
  line-height: .9;
  text-transform: var(--p-title-case);
}

.case-intro {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: clamp(1.5rem, 5vw, 5rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}

.case-lede { font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.4; max-width: 40ch; }

.case-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 2rem;
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in srgb, var(--p-paper) 30%, transparent);
  font-size: 1rem;
}
.case-facts dt { color: color-mix(in srgb, var(--p-paper) 62%, transparent); font-size: .9rem; }
.case-facts dd { font-weight: 500; }

/* ---------- The wipe: two states of the project, cut on the lean ---------- */

.wipe { padding: 0 var(--gutter); }

.wipe-stage {
  --x: 50%;
  position: relative;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  background: var(--p-quiet);
  user-select: none;
}
.wipe-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
/* The cut leans like the stroke: 7.79% is half of height × tan(14°), in widths. */
.wipe-after {
  clip-path: polygon(calc(var(--x) - 7.79%) 0, 100% 0, 100% 100%, calc(var(--x) + 7.79%) 100%);
}
.wipe-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x);
  width: 4px;
  margin-left: -2px;
  background: var(--p-accent);
  transform: skewX(var(--lean));
}
.wipe-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.1rem;
  height: 3.4rem;
  margin: -1.7rem 0 0 -1.05rem;
  background: var(--p-accent);
  border: 2px solid var(--p-ink);
  border-radius: .2rem .2rem 1.05rem 1.05rem;
}
.wipe-year {
  position: absolute;
  bottom: 0;
  padding: .2rem .7rem .3rem;
  background: var(--p-ink);
  color: var(--p-paper);
  font-family: var(--p-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
}
.wipe-year-a { left: 0; }
.wipe-year-b { right: 0; }

/* A native range over the whole stage: drag anywhere, or use the arrow keys. */
.wipe-stage input {
  position: absolute;
  top: 0;
  left: -8%;
  width: 116%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}
.wipe-stage:has(input:focus-visible) { outline: 3px solid var(--p-accent); outline-offset: 4px; }

.wipe-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
}
.wipe-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.wipe-tabs button {
  padding: .3rem .9rem .4rem;
  border: 1.5px solid var(--p-paper);
  border-radius: 0;
  background: transparent;
  color: var(--p-paper);
  font: 600 1rem/1.3 var(--p-body);
  cursor: pointer;
}
.wipe-tabs button:hover { background: color-mix(in srgb, var(--p-paper) 16%, transparent); }
.wipe-tabs button[aria-pressed="true"] {
  background: var(--p-accent);
  border-color: var(--p-accent);
  color: var(--p-ink);
}
.wipe-hint { font-size: .95rem; color: color-mix(in srgb, var(--p-paper) 66%, transparent); }

/* ---------- Chapters ---------- */

.chapter {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  padding: clamp(3.5rem, 8vw, 7rem) var(--gutter);
}
.chapter + .chapter,
.tour + .chapter { border-top: 2px solid var(--p-ink); }

.chapter h2,
.tour-head h2 {
  font-family: var(--p-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 4.2rem);
  line-height: .98;
  text-transform: var(--p-title-case);
  text-wrap: balance;
}
.chapter-body > p { max-width: 58ch; }
.chapter-body > p + p { margin-top: 1.1em; }
.wide { grid-column: 1 / -1; }

figure.shot img { width: 100%; border: var(--p-border); }
figcaption { margin-top: .7rem; font-size: .95rem; color: var(--p-muted); max-width: 60ch; }

/* ---------- The tour: text scrolls, the screen stays ---------- */

.tour { border-top: 2px solid var(--p-ink); padding: clamp(3.5rem, 8vw, 7rem) var(--gutter) 0; }
.tour-head p { margin-top: 1rem; max-width: 52ch; color: var(--p-muted); }

.tour-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 5vw, 5rem);
}

.step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 78vh;
}
.step-card {
  padding: .4rem 0 .6rem 1.4rem;
  border-left: 10px solid var(--p-line);
  transition: border-left-color .2s;
}
.step.is-active .step-card { border-left-color: var(--p-accent); }
.step h3 {
  font-family: var(--p-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.05;
}
.step p { margin-top: .6rem; max-width: 40ch; }
.step-shot { display: none; }

.tour-screen {
  position: sticky;
  top: 11vh;
  height: 78vh;
  align-self: start;
  border: var(--p-border);
  background: var(--p-quiet);
  overflow: hidden;
}
.tour-screen img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity .35s;
}
.tour-screen img.is-active { opacity: 1; }

/* ---------- Phones ---------- */

.phones {
  display: flex;
  gap: clamp(.75rem, 1.6vw, 1.5rem);
  overflow-x: auto;
  padding-bottom: 1rem;
  scrollbar-color: var(--p-ink) var(--p-quiet);
}
.phones img {
  flex: none;
  width: clamp(150px, 15vw, 215px);
  height: auto;
  border: var(--p-border);
}

/* ---------- Built with ---------- */

.stack { display: grid; gap: 0; border-top: var(--p-border); }
.stack div {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--p-line);
}
.stack dt { font-weight: 600; }

.commits { margin-top: 2.5rem; }
.commit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.commit-row i {
  width: 9px;
  height: 34px;
  background: var(--p-ink);
}
.commit-row i.later { background: var(--p-accent); box-shadow: inset 0 0 0 1.5px var(--p-ink); }
.commit-row .gap {
  flex: 0 0 3.5rem;
  border-top: 2px dashed var(--p-ink);
  margin: 0 .5rem;
}
.commits p { margin-top: .9rem; font-size: .95rem; color: var(--p-muted); max-width: 58ch; }
.js .commits:not(.is-seen) .commit-row i { opacity: 0; transform: scaleY(.2); }
.commit-row i {
  transform-origin: bottom;
  transition: opacity .25s, transform .35s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i) * 28ms);
}

/* ---------- Wanbird returns ---------- */

.contact {
  padding: clamp(4rem, 9vw, 8rem) var(--gutter);
  background: var(--w-blue);
  color: var(--w-ink);
  font-family: var(--w-body);
  font-size: 1.0625rem;
}
.contact h2 {
  font-family: var(--w-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  max-width: 17ch;
  text-wrap: balance;
}
.contact p { margin-top: 1.25rem; max-width: 44ch; font-size: 1.15rem; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2.25rem; }
.button {
  display: inline-block;
  padding: 1rem 1.6rem;
  background: var(--w-ink);
  color: var(--w-paper);
  font-weight: 600;
  text-decoration: none;
  border-radius: .2rem .2rem .9rem .9rem;
  transition: background-color .15s, color .15s;
}
.button:hover { background: var(--w-paper); color: var(--w-ink); }
.contact-actions a:not(.button) { font-weight: 600; text-underline-offset: .22em; text-decoration-thickness: 2px; }
.contact :focus-visible, .foot :focus-visible { outline-color: var(--w-ink); }

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem var(--gutter);
  background: var(--w-blue);
  color: var(--w-ink);
  border-top: 1px solid rgba(0, 0, 0, .25);
  padding-right: calc(var(--gutter) + 3rem); /* room for the progress stroke */
  font-family: var(--w-body);
  font-size: .95rem;
}

/* ---------- Smaller screens ---------- */

@media (max-width: 900px) {
  .case-intro, .chapter, .tour-grid { grid-template-columns: minmax(0, 1fr); }

  .progress { display: none; }

  /* No sticky screen: each step carries its own picture. */
  .tour { padding-bottom: clamp(3.5rem, 8vw, 7rem); }
  .tour-grid { margin-top: 2.5rem; row-gap: 3rem; }
  .tour-screen { display: none; }
  .step { min-height: 0; }
  .step + .step { margin-top: 3rem; }
  .step-card { border-left-color: var(--p-accent); }
  .step-shot {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-top: 1.25rem;
    object-fit: cover;
    object-position: top;
    border: var(--p-border);
  }
  .stack div { grid-template-columns: 6rem minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .wipe-handle { width: 1.6rem; height: 2.6rem; margin: -1.3rem 0 0 -.8rem; }
  .foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tour-screen img, .step-card, .commit-row i, .button { transition: none; }
}