/* ==========================================================================
   Portfolio — Crowd Conversion case study
   Figma: Portfolio / frame 157:2409 (800 column + 48 padding). The hero is
   taken out of the column: 80% of the window, flush with the top of the page.
   ========================================================================== */

/* Fonts (self-hosted, SIL Open Font License) -------------------------------- */

/* Inter 3.19, the version the Figma file is set in. (Inter 4 is spaced a
   touch wider, which shifts where lines end.) */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The caption under the apparel mockups. */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* The "Replay" label. */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Tokens -------------------------------------------------------------------- */

:root {
  --ink: #000;
  --paper: #fff;
  --line: #e6e6e6;

  --pink: #f00064;
  --peach: #feead4;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --column: 800px;
  --gutter: 48px;
  --gap-section: 36px;
  --gap-block: 24px;
}

/* Base ---------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* Figma's "auto" line height for Inter, rounded to whole pixels as Figma does. */
  font: 400 17px / 21px var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h2 {
  font-size: 21px;
  line-height: 25px;
}

figcaption,
.swatch {
  font-size: 14px;
  line-height: 17px;
  text-align: center;
}

/* The page title is the logo itself; this keeps the name for screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Page layout --------------------------------------------------------------- */

.case {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  max-width: calc(var(--column) + 2 * var(--gutter));
  margin-inline: auto;
  /* The hero sits right above, as far from the first section as the sections
     are from each other. */
  padding: var(--gap-section) var(--gutter) var(--gutter);
}

.case__group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

/* Hero ---------------------------------------------------------------------- */

/* The animated logo on a pink band at the very top of the page, centred and
   80% of the window wide. It never gets narrower than the text column, and in
   windows narrower than that column (phones, small tablets) it is full width.
   logo-animation.js draws the logo on the canvas, which fills the whole band
   so the dots have room to drift in from. */
.hero {
  position: relative;
  width: max(80%, min(100%, var(--column)));
  height: 301px; /* 237 in Figma, plus 64 */
  margin-inline: auto;
  overflow: hidden;
  background: var(--pink);
}

.hero__logo {
  display: block;
  width: 100%;
  height: 100%;
}

/* "Replay", in the band's bottom right corner. The padding is there to make
   it easier to hit; the offsets place the icon and label where Figma has them. */
.hero__replay {
  --pad: 10px;

  position: absolute;
  right: calc(26.5px - var(--pad));
  bottom: calc(28px - var(--pad));
  display: flex;
  align-items: center;
  gap: 5px;
  padding: var(--pad);
  border: 0;
  border-radius: 8px;
  background: none;
  color: rgb(255 255 255 / 0.8);
  font: 600 14px / 17px var(--font);
  cursor: pointer;
  transition: color 0.15s;
}

.hero__replay:hover {
  color: #fff;
}

.hero__replay:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.hero__replay img {
  flex: none;
}

/* One turn of the arrow, the way it points, each time the animation restarts.
   The script adds .is-turning on click and takes it off when the turn ends. */
.hero__replay.is-turning img {
  animation: replay-turn 0.6s ease-in-out;
}

@keyframes replay-turn {
  to {
    rotate: -360deg;
  }
}

/* "← Home" in the band's top left corner, 32px in from its edges, leading to
   the home page. The arrow is assets/icon-back.svg used as a mask, so it takes
   the colour of the text. As with "Replay", the padding is there to make the
   link easier to hit and the offsets put the arrow and label where they belong. */
.hero__back {
  --hit: 8px;

  position: absolute;
  top: calc(32px - var(--hit));
  left: calc(32px - var(--hit));
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--hit);
  border-radius: 8px;
  color: #fff;
  font: 400 15px / 1 var(--font);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.hero__back::before {
  content: "";
  flex: none;
  width: 10px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("../assets/icon-back.svg") center / contain no-repeat;
  mask: url("../assets/icon-back.svg") center / contain no-repeat;
}

.hero__back:hover {
  opacity: 0.6;
}

.hero__back:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* On phones the band is full width, so the link lines up with the text below. */
@media (max-width: 599.98px) {
  .hero__back {
    left: calc(var(--gutter) - var(--hit));
  }
}

/* Identity: ideas ----------------------------------------------------------- */

/* Three ideas that didn't make it and the final logo, in a row on an
   off-white panel. Each is 100px tall with its name underneath. */
.ideas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px 60px;
  padding: 40px 24px;
  border-radius: 4px;
  background: #fdfdfd;
}

.idea {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.idea img {
  width: auto;
  height: 100px;
}

/* The three sketches have no background of their own in Figma, but their
   exports are on white. Multiplying lets the panel's off-white show through
   instead. (The final logo does sit on a white card.) */
.idea:not(.idea--final) img {
  mix-blend-mode: multiply;
}

/* Identity: sizes ----------------------------------------------------------- */

/* The logo at full size and at 32px, side by side and centred. */
.sizes {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.size {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* 419 × 225. The hairline frame is part of this export. */
.size--full {
  flex: 0 1 419px;
  min-width: 0;
}

.size--small {
  flex: none;
}

.size--small figcaption {
  white-space: nowrap;
}

/* The frame around the small logo: 162.26 × 215.76 in Figma. */
.size__frame {
  padding: 17.629px;
  border: 1px solid var(--line);
}

.size__frame img {
  width: 125px;
}

/* Applications -------------------------------------------------------------- */

/* A coloured panel with artwork laid out on it. */
.showcase {
  display: grid;
  align-items: start;
  padding: 24px;
}

.showcase img {
  width: 100%;
}

/* A video cover (489.32 wide in Figma) and the mark on a card (233 wide),
   pushed to the two sides of the panel. They keep those proportions as the
   panel narrows. */
.showcase--digital {
  grid-template-columns: minmax(0, 489.319fr) minmax(0, 233fr);
  gap: 29.681px;
  background: var(--peach);
}

.showcase--merch {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  background: #e9e9e9;
}

.showcase--merch figcaption {
  grid-column: 1 / -1;
  font-style: italic;
  text-align: left;
}

/* The caption is optically centred between the mockups and the bottom edge of
   the panel. Its line box already is, but the letters sit low in that box:
   there is more room above the lowercase (30.5px) than below the baseline
   (27px), so the line reads as too close to the bottom. Lifting it 2px evens
   that out: 28.5px above the lowercase, 29px below the baseline. (A whole
   number of pixels, because browsers snap text to them.) */
.showcase--merch figcaption {
  position: relative;
  top: -2px;
}

/* Colors -------------------------------------------------------------------- */

.colors {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 32px 33px;
  border: 1px solid var(--peach);
  background: var(--paper);
}

.swatch {
  flex: 0 1 139px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.swatch::before {
  content: "";
  width: 100%;
  aspect-ratio: 139 / 86.527;
  border-radius: 12px;
  background: var(--color);
}

.swatch--black {
  --color: #000;
}

.swatch--peach {
  --color: var(--peach);
}

.swatch--pink {
  --color: var(--pink);
}

/* Export fringes ------------------------------------------------------------ */

/* The video cover has a fractional size in Figma, so its export ends in a
   one-pixel grey fringe on the right and bottom edges. Trim it off. */
.showcase__cover {
  clip-path: inset(0 1px 1px 0);
}

/* See next ------------------------------------------------------------------ */

/* The other two projects, at the very end of the page: a small label over two
   pictures, each a link to its project. Like a new part of the case study, it
   starts 67px below what comes before it (31px plus the usual 36px gap). */
.next {
  margin-top: 31px;
}

.next__label {
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
}

/* 388 × 166 each in Figma, 24px apart. The two share the row, and stack once
   there is less than 200px for each (a phone held upright). The pictures
   (assets/preview-*.jpg) are plain rectangles; the card rounds their corners. */
.next__cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-block);
}

.next__card {
  flex: 1 1 200px;
  overflow: hidden;
  border-radius: 12px;
}

.next__card img {
  width: 100%;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* The same lift as the cards on the home page. */
.next__card:hover img {
  transform: scale(1.025);
}

.next__card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Contacts ------------------------------------------------------------------ */

/* What I am open to, with the ways to get in touch right under it, as on the
   home page. */
.availability {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.availability__status {
  font-size: 15px;
  line-height: 18px;
}

/* Email, WhatsApp and LinkedIn, as on the home page: an icon and an underlined
   label each, in a row. The padding only makes the links easier to hit; the
   list's negative margin takes it back out. */
.contacts {
  --hit: 8px;

  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin-block: calc(-1 * var(--hit));
}

.contact {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-block: var(--hit);
  color: inherit;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.contact__icon {
  flex: none;
  width: 14px;
  height: 14px;
}

.contact__label {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.contact:hover {
  opacity: 0.6;
}

.contact:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

/* Responsive ---------------------------------------------------------------- */

/* Phones. (On tablets the row of ideas wraps and the full-size logo shrinks
   to fit, without any help.) */
@media (max-width: 599.98px) {
  :root {
    --gutter: 20px;
  }

  .case {
    padding-bottom: 32px;
  }

  .hero {
    height: 264px;
  }

  /* The band is full width here, so "Replay" lines up with the text below. */
  .hero__replay {
    right: calc(var(--gutter) - var(--pad));
    bottom: calc(14px - var(--pad));
  }

  /* The three sketches share the first row, a little smaller on the
     narrowest screens; the final logo takes the second. */
  .ideas {
    gap: 28px 16px;
    padding: 32px 12px;
  }

  .idea img {
    height: clamp(72px, 24vw, 100px);
  }

  /* The two sizes stack. */
  .sizes {
    flex-direction: column;
  }

  .size--full {
    flex: none;
  }

  .showcase {
    padding: 12px;
  }

  .showcase--digital {
    gap: 12px;
  }

  /* The mockups stack, each the full width of the panel. */
  .showcase--merch {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .colors {
    gap: 12px;
    padding: 24px 16px;
  }

  .next {
    margin-top: 9px;
  }

  /* The contacts stack, as on the home page. */
  .contacts {
    flex-direction: column;
    align-items: flex-start;
  }
}