/* ---------------------------------------
   Chloe Thai — Portfolio
   Simple shared stylesheet for all pages
--------------------------------------- */

:root {
  --ink: #00594e;
  --ink-soft: #5a6d92;
  --line: #dde4e6;
  --bg: #ffffff;
  --surface: #ffffff;
  --accent: #00594e;
  --accent-soft: #e7f1ee;
  --accent-panel: #2b6478;
  --link: #0f2b70;
  --link-soft: #c9d0df;
  --max-width: 780px;
  --radius: 10px;
  --font-body: "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading: "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

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

/* ---------- Layout shell ---------- */

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

header.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.site-header .brand-logo {
  width: 18px;
  height: 18px;
  display: block;
}

.hero-marks {
  display: flex;
  align-items: center;
  margin: 0 0 22px;
}

.hero-marks img {
  width: 60px;
  height: 60px;
  display: block;
}

.hero-marks img + img {
  margin-left: -16px;
}

.site-header nav {
  display: flex;
  gap: 28px;
}

.site-header nav a {
  text-decoration: underline;
  text-decoration-color: var(--link);
  text-underline-offset: 3px;
  font-size: 15px;
  font-weight: 500;
  color: var(--link);
  padding-bottom: 2px;
  transition: opacity 0.15s ease;
}

.site-header nav a:hover {
  opacity: 0.75;
}

.site-header nav a.active {
  color: var(--link);
  text-decoration-color: var(--link);
}

main {
  padding: 64px 0 96px;
}

footer.site-footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 40px;
}

footer.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-soft);
}

footer.site-footer .contact-links {
  display: flex;
  gap: 6px;
  align-items: center;
}

footer.site-footer a {
  text-decoration: underline;
  color: var(--link);
}

footer.site-footer a:hover {
  opacity: 0.75;
}

/* ---------- Landing page ---------- */

.hero {
  padding: 40px 0 8px;
}

.hero .eyebrow {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 18px;
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(26px, 4.2vw, 32px);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  font-weight: 500;
  color: var(--accent);
}

/* Forces a line break after "designer" on wider screens (where the whole
   first line would otherwise run long). On narrow screens this break is
   turned off so "designer" wraps naturally with "in Brooklyn" instead of
   sitting alone on its own line. */
.break-desktop {
  display: inline;
}

@media (max-width: 560px) {
  .break-desktop {
    display: none;
  }

  /* The shuffle button wraps onto its own line under the headline on
     narrow screens — give it a bit of breathing room above. */
  .shuffle-btn {
    display: flex;
    margin-top: 14px;
  }
}

.hero p.sub {
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  max-width: 56ch;
  margin: 0 0 32px;
}

#shuffleText {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s ease;
}

#shuffleText:hover,
#shuffleText:has(~ #shuffleBtn:hover) {
  text-decoration-color: var(--accent);
}

#shuffleText .paren {
  font-weight: 400;
}

.hero .cta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 16px;
}

.shuffle-btn,
.reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  vertical-align: middle;
  margin-top: 6px;
  padding: 7px 14px 7px 10px;
  border: none;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.shuffle-btn:hover,
.reset-btn:hover {
  background: var(--accent);
  color: #fff;
}

.shuffle-btn:active,
.reset-btn:active {
  transform: scale(0.96);
}

.shuffle-btn svg,
.reset-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.play-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
}

.play-toolbar .page-lede {
  margin: 0;
}

.play-toolbar .reset-btn {
  margin-top: 0;
}

/* On wide screens the reset button sits in its own column at the end of the
   toolbar row. On narrow screens the lede text wraps to multiple lines, so a
   second copy of the button lives inline right after the text instead (see
   .reset-btn-inline below) and this standalone copy is hidden. */
.reset-btn-inline {
  display: none;
}

@media (max-width: 560px) {
  .play-toolbar {
    display: block;
  }

  .reset-btn-standalone {
    display: none;
  }

  .reset-btn-inline {
    display: inline-flex;
    margin: 4px 0 0 8px;
  }
}

.text-link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link);
  text-underline-offset: 3px;
  font-weight: 400;
  font-style: italic;
  transition: opacity 0.15s ease;
}

.text-link:hover {
  opacity: 0.75;
}

.cta-row .sep {
  color: var(--ink-soft);
}

.cta-row .text-link {
  font-style: normal;
}

/* ---------- About page ---------- */

h2.section-title {
  font-family: var(--font-heading);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 12px;
}

.page-title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--accent);
}

.page-lede {
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0 0 32px;
}

.bio p {
  font-size: 19px;
  font-style: normal;
  font-weight: 400;
  max-width: 64ch;
  margin: 0 0 18px;
  color: var(--ink);
}

.bio p:last-child {
  margin-bottom: 0;
}

.timeline {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.timeline-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-item .when {
  font-size: 13px;
  color: var(--ink-soft);
  padding-top: 2px;
}

.timeline-item .role {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ink);
}

.timeline-item .place {
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 8px;
}

.timeline-item .desc {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 0 10px;
  max-width: 56ch;
}

.timeline-item .desc:last-child {
  margin-bottom: 0;
}

.timeline-item .desc-list {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 0 10px;
  padding-left: 20px;
  max-width: 56ch;
}

.timeline-item .desc-list:last-child {
  margin-bottom: 0;
}

.timeline-item .desc-list li {
  margin: 0 0 4px;
}

.timeline-item .desc-list li:last-child {
  margin-bottom: 0;
}

.timeline-item .text-link {
  font-style: normal;
}

@media (max-width: 560px) {
  .timeline-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ---------- Gallery page ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}

@media (max-width: 560px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

.gallery-tile {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.gallery-tile:hover {
  border-color: var(--accent);
}

/* These tiles don't lead anywhere yet (no case study pages), so avoid any
   "selected" look after a click/tap — no focus outline or lingering border. */
.gallery-tile:focus,
.gallery-tile:focus-visible,
.gallery-tile:active {
  outline: none;
  border-color: var(--line);
}

.gallery-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--accent-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #eaf3f1;
  font-size: 13px;
  text-align: center;
  padding: 16px;
  overflow: hidden;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumb:has(img) {
  padding: 0;
}

.gallery-caption {
  padding: 14px 16px 16px;
}

.gallery-caption .title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--link);
}

.gallery-caption .title-text {
  text-decoration: underline;
  text-decoration-color: var(--link);
}

.gallery-caption .tag {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}

.info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  color: var(--ink-soft);
  text-decoration: none;
  vertical-align: -3px;
  cursor: help;
}

.info-icon svg {
  width: 15px;
  height: 15px;
}

.info-icon:hover,
.info-icon:focus {
  color: var(--accent);
  outline: none;
}

/* Fixed (not absolute) so the tooltip can float free of any ancestor's
   "overflow: hidden" (e.g. the gallery tile, which clips its thumbnail
   image) instead of being cut off. script.js sets its exact top/left on
   hover/focus, clamped to stay within the viewport. */
.info-icon .tooltip {
  position: fixed;
  width: 230px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #39485c;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  text-decoration: none;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 50;
}

.info-icon:hover .tooltip,
.info-icon:focus .tooltip {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 560px) {
  .info-icon .tooltip {
    width: 180px;
  }
}

/* ---------- Case study page ---------- */

.case-title {
  font-weight: 700;
}

.case-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  margin: 8px 0 20px;
}

.case-back:hover {
  color: var(--accent);
}

.case-hero {
  aspect-ratio: 4 / 3;
  max-width: 50%;
  margin: 0 auto 24px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--accent-panel);
}

@media (max-width: 560px) {
  .case-hero {
    max-width: 75%;
  }
}

.case-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Plain grey placeholder for a case study hero that doesn't have a real
   image yet — remove "case-hero-placeholder" (and add an <img> back in)
   once a screenshot is ready. */
.case-hero-placeholder {
  background: #e2e2e2;
}

.case-tag {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 28px;
}

.case-metric {
  margin-bottom: 28px;
}

.case-metric-label,
.case-section-label {
  font-family: var(--font-heading);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 6px;
}

.case-metric-value {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.7;
}

.case-metric-value span {
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.case-section {
  margin-bottom: 28px;
}

.case-body {
  font-size: 17px;
  color: var(--ink);
  margin: 0;
}

.case-body + .case-body {
  margin-top: 12px;
}

.case-meta {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 560px) {
  .case-metric-value {
    font-size: 17px;
  }

  .case-body {
    font-size: 16px;
  }
}

/* ---------- Play page (sticker board) ---------- */

.sticker-board {
  position: relative;
  width: 100%;
  height: 900px;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--surface);
  background-image: radial-gradient(circle, var(--line) 1.3px, transparent 1.3px);
  background-size: 26px 26px;
  background-position: 13px 13px;
  overflow: hidden;
  touch-action: none;
}

.sticker-sheet {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, 60px);
  justify-content: center;
  gap: 16px;
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.sticker-sheet img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  cursor: grab;
  user-select: none;
  touch-action: none;
  filter: drop-shadow(0 8px 14px rgba(15, 43, 112, 0.18));
  transition: transform 0.15s ease;
}

.sticker-sheet img:hover {
  transform: translateY(-2px);
}

.sticker-sheet img:active {
  cursor: grabbing;
}

.sticker {
  --rot: 0deg;
  position: absolute;
  width: 150px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transform: rotate(var(--rot));
}

.sticker.dragging {
  cursor: grabbing;
  transform: rotate(var(--rot)) scale(1.04);
  z-index: 50;
}

.sticker img {
  width: 100%;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(15, 43, 112, 0.18));
}

/* Photo-style stickers (whole rectangular snapshots, not cutouts) get a
   white "frame" and rounded corners so they read as a pinned photo rather
   than a raw rectangle. */
.sticker-sheet img.sticker-photo,
.sticker img.sticker-photo {
  border-radius: 8px;
  border: 3px solid #fff;
  box-sizing: border-box;
  background: #fff;
}

/* The sheet thumbnail box is a fixed 60x60 square — force non-square photos
   to fill it (cropping slightly) instead of "contain", which would letterbox
   and show odd white bars on whichever sides don't fill the square. */
.sticker-sheet img.sticker-photo {
  object-fit: cover;
}

.sticker-title {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 8px 0 0;
  pointer-events: none;
}

@media (max-width: 560px) {
  .sticker-board {
    height: 780px;
  }

  .sticker-sheet {
    top: 16px;
    left: 16px;
    right: 16px;
    padding: 14px;
    gap: 12px;
    grid-template-columns: repeat(5, 46px);
  }

  .sticker-sheet img {
    width: 46px;
    height: 46px;
  }

  .sticker {
    width: 110px;
  }
}