/* =====================================================================
   WORK.CSS — the Selected Work page (work.html) only
   Loaded after styles.css. Everything here starts with .work-page so it
   can't affect other pages.

   HOW THIS FILE IS ORGANISED
     1  Page layout and title ("Selected work.")
     2  Fishbowl, "Psstt…" note and Mr. Blue's name tag
     3  Section headings (UX / Product, Graphic Design)
     4  Project cards (paper, hover, featured United card)
     5  Card grids
     6  Tablet and phone layouts (@media blocks)

   Tip: card background colours are set per project, e.g. ".work-yelp".
   ===================================================================== */

/* =====================================================================
   1 — PAGE LAYOUT AND TITLE
   ===================================================================== */
.work-page {
  width: min(90%, 1600px);
  margin-inline: auto;
  padding-block: clamp(36px, 5vw, 80px) clamp(64px, 7vw, 112px);
  text-align: left;
}

.work-page h1,
.work-page h2,
.work-page h3 {
  font-family: salted, Gabarito, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--blue);
  overflow-wrap: anywhere;
}

.work-page p {
  margin: 0;
}

.work-page h1 {
  font-size: clamp(3rem, 6vw, 6.5rem);
  margin: 14px 0 0;
}

.work-page h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  margin: 0;
}

.work-page h3 {
  font-size: clamp(1.8rem, 2.2vw, 2.65rem);
  margin: 12px 0 16px;
  line-height: 1.18;
}

.work-page .work-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* the bowl always sits to the right of the title */
  align-items: end;
  gap: 32px;
  padding-bottom: clamp(28px, 4vw, 56px);
}

.work-page .work-kicker {
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--blue);
}

/* =====================================================================
   2 — FISHBOWL
   Size: change --bowl-w. Behaviour: see assets/work-fishbowl.js.
   ===================================================================== */

/* FISHBOWL — a small pixel-art moment beside the title (drawn by work-fishbowl.js).
   The canvas is 96 × 101 pixels, scaled up with crisp pixel edges. */
.work-page .work-fishbowl {
  --bowl-w: clamp(160px, 26vw, 384px);
  /* shrinks gently on smaller screens */
  position: relative;
  justify-self: end;
  align-self: end;
  /* Let the empty sky above the bowl tuck into the page's top padding,
     so the bowl doesn't push the title down. */
  margin-top: calc(var(--bowl-w) * -0.2 + 16px);
  /* Pull the bowl down through the heading's bottom padding and the next section's
     top margin, so it rests on the rule above "UX / Product". */
  margin-bottom: calc(-1 * (clamp(28px, 4vw, 56px) + clamp(32px, 5vw, 72px)));
  z-index: 1;
}

/* The note hangs to the left of the bowl, level with the water line
   (the top third of the canvas is empty sky for the fish to jump into). */
.work-page .fishbowl-note {
  position: absolute;
  right: calc(100% + 8px);
  top: 44%;
  white-space: nowrap;
  font: 400 clamp(18px, 1.4vw, 22px)/1.2 salted, Gabarito, sans-serif;
  color: var(--blue);
  transform: rotate(-4deg);
  pointer-events: none;
}

.work-page .fishbowl {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform .18s steps(3);
}

.work-page .fishbowl canvas {
  display: block;
  width: var(--bowl-w);
  height: auto;
  image-rendering: pixelated;
}

.work-page .fishbowl:hover {
  transform: translateY(-4px);
}

.work-page .fishbowl:active {
  transform: translateY(2px);
}

.work-page .fishbowl:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 6px;
}

/* Mr. Blue's name tag, propped against the front of the bowl (shown 1 visit in 5). */
.work-page .fish-tag {
  position: absolute;
  left: 50%;
  bottom: 7%;
  padding: .2em .7em .25em 1.1em;
  background: #fffbee;
  box-shadow: 0 0 0 2px #b9b9a8, 3px 4px 0 #8f877444;
  color: var(--ink);
  font: 500 clamp(11px, calc(var(--bowl-w) * .055), 20px)/1.2 Determination, 'Pixelify Sans', monospace;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-4deg);
  pointer-events: none;
}

/* Punched hole for the tag's string. */
.work-page .fish-tag::before {
  content: "";
  position: absolute;
  left: .4em;
  top: 50%;
  width: .3em;
  height: .3em;
  margin-top: -.15em;
  background: #b9b9a8;
}

.work-page .fish-tag[hidden] {
  display: none;
}

/* =====================================================================
   3 — SECTION HEADINGS
   ===================================================================== */
.work-page .work-section {
  margin-top: clamp(32px, 5vw, 72px);
  scroll-margin-top: 28px;
}

.work-page .work-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding-block: 24px;
  border-top: 1px solid #b8beb8;
}

.work-page .work-reveal {
  min-width: 0;
}

/* The whole paper responds to focus/hover; the artwork stays still. */

/* =====================================================================
   4 — PROJECT CARDS
   ===================================================================== */
.work-page .work-paper {
  color: var(--ink);
  background: #fffdf5;
  border: 1px solid #d7cfba;
  box-shadow: 0 0 0 #bcb39800;   /* no shadow at rest; it appears on hover */
  text-decoration: none;
  position: relative;
  min-width: 0;
}

/* Hover/keyboard shadow. paper-motion.js animates the same shadow (with the
   lift) when GSAP is available; this rule covers the case when it isn't. */
@media (hover: hover) {
  .work-page a.work-paper:hover {
    box-shadow: 6px 10px 0 #bcb3984d;
  }
}

.work-page a.work-paper:focus-visible {
  box-shadow: 6px 10px 0 #bcb3984d;
}

.work-page a.work-paper {
  display: grid;
  height: 100%;
}

.work-page a.work-paper:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 6px;
}

.work-page .work-feature {
  grid-template-columns: 1.12fr 1fr;
  align-items: center;
}

/* Featured United card: a wide cover on desktop and a tall cover below
   900px (swapped by the <picture> in work.html). Each frame matches its
   image's shape, so the cover fills it with nothing cut off. */
.work-page .work-feature-art {
  position: relative;
  min-width: 0;
  margin: clamp(16px, 1.7vw, 28px);
  margin-right: 0;
  overflow: hidden;
  background: #e4ebf1;
}

.work-page .work-feature-art picture {
  display: block;
}

.work-page .work-feature-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 1014;   /* wide cover (united-featured.webp) */
  object-fit: cover;
}

.work-page .work-stamp {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  color: var(--blue);
  font: 1.125rem/1.2 Determination, 'Pixelify Sans', monospace;
  background: #fffdf5;
  border: 1px solid #37639980;
  padding: 7px 10px;
}

.work-page .work-feature-copy {
  padding: clamp(24px, 3.5vw, 56px);
  align-self: center;
}

.work-page .work-feature-copy h3 {
  font-size: clamp(2.4rem, 3.5vw, 4rem);
}

.work-page .work-feature-premise {
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
  line-height: 1.35;
  margin-bottom: 16px;
}

.work-page .work-contribution {
  border-top: 1px solid #dbd6c7;
  margin-top: 24px;
  padding-top: 18px;
}

.work-page .work-contribution p {
  font-size: 1rem;
}

/* =====================================================================
   5 — CARD GRIDS
   ===================================================================== */
.work-page .work-grid {
  display: grid;
  gap: clamp(20px, 2.5vw, 40px);
}

.work-page .work-ux-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 32px;
}

.work-page .work-design-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* LEVEL DIVIDERS: every card in a row shares the same five rows (image,
   kicker, title, description, contribution line) through CSS subgrid, so
   the tallest description in the row sets that row's height for all of
   them. The divider above the contribution line therefore sits at exactly
   the same height on every card, however much text each one has.
   (article.work-reveal > a.work-card > .work-art + .work-card-copy) */
.work-page .work-grid > .work-reveal {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
}

.work-page .work-card {
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: clamp(16px, 1.7vw, 28px);
}

.work-page .work-card-copy {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  justify-items: start;
  padding-top: 24px;
}

.work-page .work-card-copy .work-contribution {
  padding-top: 18px;
  width: 100%;
}

.work-page .work-purpose {
  margin-bottom: 24px;
}

/* Card thumbnails fill their frame edge to edge (shapes set in styles.css).
   The background colour only shows while the image is loading. */
.work-page .work-art {
  background: #e7e9df;
  aspect-ratio: var(--thumb-ratio);
  overflow: hidden;
}

.work-page .work-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-page .work-ux-grid .work-art {
  aspect-ratio: var(--thumb-ratio-wide);
}

.work-page .work-yelp .work-art {
  background: #efe3de;
}

.work-page .work-cura .work-art {
  background: #e3eadc;
}

.work-page .work-scope .work-art {
  background: #e8e0d1;
}

.work-page .work-cinnamon .work-art {
  background: #eee1d9;
}

.work-page .work-bauhaus .work-art {
  background: #dfe5d7;
}

/* Mobile uses a single reading order. No essential information needs hover. */

/* =====================================================================
   6 — TABLET AND PHONE LAYOUTS
   max-width: 1000px = tablets and small laptops; 767px = phones.
   ===================================================================== */
@media (max-width: 1000px) {
  .work-page .work-design-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-page .work-feature {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tablets and phones: the tall cover (united-mobile.webp, 4:5) takes over. */
@media (max-width: 899px) {
  .work-page .work-feature {
    grid-template-columns: minmax(0, 0.9fr) 1fr;
  }

  .work-page .work-feature-art img {
    aspect-ratio: 4 / 5;
  }
}

/* Large phones / small tablets (one column, 480–767px): a square crop keeps
   the tall cover from filling the whole screen. Only empty gradient above
   the logo and below the phones is trimmed. */
@media (min-width: 480px) and (max-width: 767px) {
  .work-page .work-feature-art img {
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 767px) {
  .work-page {
    width: auto;
    margin-inline: 20px;
  }

  .work-page .work-feature {
    grid-template-columns: 1fr;
  }

  .work-page .work-ux-grid,
  .work-page .work-design-grid {
    grid-template-columns: 1fr;
  }

  .work-page .work-heading {
    gap: 12px;
    padding-bottom: 16px;
  }

  .work-page .work-section {
    margin-top: 24px;
  }

  .work-page h1 {
    font-size: clamp(2rem, 10vw, 3rem);
    overflow-wrap: normal;
  }

  /* never split "Selected" mid-word */
  .work-page .work-fishbowl {
    --bowl-w: clamp(128px, 40vw, 200px);
    margin-bottom: -40px;
  }

  /* 16px heading padding + 24px section margin */

  /* No room beside the bowl on phones, so the note floats in the sky above it. */
  .work-page .fishbowl-note {
    right: auto;
    left: 50%;
    top: 8%;
    transform: translateX(-50%) rotate(-4deg);
  }

  .work-page .work-feature-art {
    margin: 16px 16px 0;
  }

  .work-page .work-stamp {
    top: 8px;
    left: 8px;
    padding: 4px 7px;
    font-size: .8125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-page .fishbowl {
    transition: none;
  }

  .work-page .fishbowl:hover,
  .work-page .fishbowl:active {
    transform: none;
  }

  .work-page .work-reveal,
  .work-page a.work-paper {
    transform: none !important;
    opacity: 1 !important;
  }
}