/* monmon·design, studio.itsmelody.io
   Static rebuild, phase 1 (Home). Palette cohered to itsmelody V4.
   Source of truth: Figma VUSs3SIzDtBLeKFFvfPDsQ */

:root {
  --bg: #F1F1F1;
  --ink: #0e2847;       /* was #000000 in Figma */
  --muted: #466075;     /* was #767676 in Figma */
  --orange: #FF4200;    /* unified brand orange (graphics, flowers, accents) */
  --orange-text: #C0360A; /* darker orange for text hover, ~5:1 on --bg (WCAG AA) */
  --hairline: rgba(14, 40, 71, .15);
  --scrim: rgba(0, 0, 0, .78); /* lightbox ground, black so the page reads through */
  --maxw: 1136px;
  --pad: 32px;
  --frame: #11178D;     /* cobalt trim (sampled from Figma export) */
  --frame-gap: 0px;     /* trim sits flush to the viewport edge, no gutter */
  --frame-w: clamp(8px, 1.2vw, 16px); /* trim thickness, scales with the viewport */

  /* Type scale (role tokens) */
  --text-display: 64px; /* hero H1, CTA */
  --text-heading: 36px; /* section statements: Work, About */
  --text-title: 24px;   /* service names, footer column headings */
  --text-lead: 28px;    /* hero / project body paragraph */
  --text-lg: 20px;      /* tags, larger "See Project" links */
  --text-body: 16px;    /* paragraphs, labels, nav, links, card titles */
  --text-sm: 14px;      /* mobile nav, fine print */
  --track-tight: -0.03em; /* display + headings */
  --track-base: -0.02em;  /* everything else */

  /* Spacing scale (8px-based) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --rule-space: 64px;   /* symmetric padding above AND below every horizontal rule */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
  padding: calc(var(--frame-gap) + var(--frame-w));
}

/* Blue trim: fixed frame around the whole site */
.trim {
  position: fixed;
  inset: var(--frame-gap);
  border: var(--frame-w) solid var(--frame);
  pointer-events: none;
  z-index: 1000;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, .footer__logo:focus-visible {
  outline: 2px solid var(--orange-text);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip {
  position: fixed;
  left: -9999px;
  top: var(--frame-w);
  z-index: 1100;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 4px;
  font-size: var(--text-body);
  font-weight: 500;
}
.skip:focus { left: var(--frame-w); }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

h1, h2, h3 {
  font-family: 'Yeseva One', Georgia, serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: calc(var(--frame-gap) + var(--frame-w));
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.brand { display: flex; align-items: center; }
.brand__logo { height: 24px; width: auto; display: block; }
.brand__mark { display: none; }
.nav__links { display: flex; align-items: center; gap: 36px; }
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-body);
  font-weight: 500;
  letter-spacing: var(--track-base);
  color: var(--ink);
  transition: color .15s ease;
}
.nav__links a:hover { color: var(--orange-text); }
/* Shown only on phones, and only once the toggle script is running */
.nav__toggle {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 500;
  letter-spacing: var(--track-base);
  color: var(--ink);
  transition: color .15s ease;
}
.nav__toggle:hover { color: var(--orange-text); }

/* ---------- Hero ---------- */
.hero { padding-top: var(--space-24); }
.hero__row {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  justify-content: center;
  padding-bottom: var(--rule-space);
  border-bottom: 1px solid var(--ink);
}
.hero__logo { flex-shrink: 0; width: 132px; }
.hero__logo svg { width: 100%; height: auto; display: block; }
.hero__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-2);
}
.hero__title { font-size: var(--text-display); letter-spacing: var(--track-tight); }
.hero__lead {
  font-size: var(--text-lead);
  font-weight: 300;
  line-height: 1.21;
  letter-spacing: var(--track-base);
  max-width: none;
}
.hero__lead p + p { margin-top: 1.1em; }

/* ---------- Section heading ---------- */
.section { padding-top: var(--rule-space); }
.section__head { margin-bottom: var(--space-12); }
.eyebrow {
  font-size: var(--text-body);
  font-weight: 500;
  letter-spacing: var(--track-base);
  color: var(--muted);
  margin-bottom: var(--space-3);
}
.section__title { font-size: var(--text-heading); letter-spacing: var(--track-tight); line-height: 1.05; }

/* ---------- Work cards ---------- */
.card { padding-bottom: var(--rule-space); }
.card + .card { border-top: 1px solid var(--hairline); padding-top: var(--rule-space); }
.card__strip { overflow: hidden; }
.card__imgs {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 30s linear infinite;
}
/* Pause on hover for pointers, on focus for keyboards (WCAG 2.2.2) */
.card__strip:hover .card__imgs,
.card__strip:focus-visible .card__imgs { animation-play-state: paused; }
.card__strip:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 3px; }
.card__imgs > div {
  flex-shrink: 0;
  width: 461.25px;
  height: 446px;
  margin-right: 20px;
}
.card__imgs img { width: 100%; height: 100%; object-fit: cover; }
.card__desc {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
  margin-top: var(--space-6);
}
.card__title {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  width: 463px;
  flex-shrink: 0;
  font-family: 'Yeseva One', serif;
  font-size: var(--text-body);
  letter-spacing: var(--track-base);
}
.card__title .lbl { color: var(--muted); white-space: nowrap; }
.card__title .titles { display: flex; flex-direction: column; gap: var(--space-1); }
.card__title .name { color: var(--ink); }
.card__title .type { color: var(--muted); }
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 360px;
  width: 316px;
  flex-shrink: 0;
}
.card__body p {
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: var(--track-base);
  color: var(--ink);
}
.card__body p + p { margin-top: .9em; }
.see {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--space-1);
  font-size: var(--text-body);
  font-weight: 500;
  letter-spacing: var(--track-base);
  color: var(--muted);
  transition: color .15s ease;
}
.see:hover { color: var(--orange-text); }

/* ---------- About / Services ---------- */
#about { border-top: 1px solid var(--ink); }
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}
.about__lead { font-size: var(--text-heading); letter-spacing: var(--track-tight); line-height: 1.05; }
.services { display: flex; flex-direction: column; }
.service { padding: var(--space-6) 0; border-top: 1px solid var(--hairline); }
.service:first-child { border-top: 0; padding-top: 0; }
.service h3 { font-size: var(--text-title); letter-spacing: var(--track-base); margin-bottom: var(--space-2); }
.service p {
  font-size: var(--text-body);
  font-weight: 300;
  letter-spacing: var(--track-base);
  color: var(--muted);
}

/* ---------- CTA ---------- */
/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--ink);
  padding: var(--rule-space) 0 var(--space-8);
}
.footer__cta {
  display: block;
  text-align: left;
  font-family: 'Yeseva One', serif;
  font-weight: 400;
  font-size: var(--text-heading);
  letter-spacing: var(--track-tight);
  line-height: 1;
  color: var(--ink);
  margin-bottom: var(--space-12);
  transition: color .15s ease;
}
.footer__cta:hover { color: var(--orange-text); }
.footer__logo { display: block; }
.footer__logo svg { width: 100%; height: auto; display: block; }

/* ---------- Animation ---------- */
.flower { transform-box: fill-box; transform-origin: 50% 50%; animation: flower-spin 6s linear infinite; }
@keyframes flower-spin { to { transform: rotate(360deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .flower, .card__imgs { animation: none; }
}

/* ---------- Mobile ---------- */
/* Tablet: stack the work card description before it overflows (~827px content) */
@media (max-width: 900px) {
  .card__desc { flex-direction: column; gap: var(--space-6); }
  .card__title { width: 100%; }
  .card__body { width: 100%; max-width: none; }
}

@media (max-width: 768px) {
  /* Type + spacing scale down by re-pointing the role tokens */
  :root {
    --pad: 22px;
    --text-display: 36px;
    --text-heading: 28px;
    --text-title: 20px;
    --text-lead: 20px;
    --space-24: 64px;
  }
  .nav__links { gap: var(--space-6); }
  .nav__links a { font-size: var(--text-sm); }
  .hero__row { flex-direction: column; gap: var(--space-6); }
  .hero__logo { width: 84px; }
  .brand__logo { height: 20px; }
  .section__head { margin-bottom: var(--space-8); }
  .card__imgs > div { width: 280px; height: 280px; }
  .about__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* Phones: the wordmark is too wide to sit beside the links, so it becomes
   the m-mark and the links collapse behind "Menu". Without the script the
   bar stacks instead, so every link stays reachable either way. */
@media (max-width: 620px) {
  .nav__inner {
    position: relative;
    flex-wrap: wrap;
    height: auto;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .brand__logo { display: none; }
  .brand__mark { display: block; height: 34px; width: 34px; }
  .nav__links { gap: var(--space-6); width: 100%; }

  .js .nav__inner {
    flex-wrap: nowrap;
    height: 72px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .js .nav__toggle { display: inline-flex; }
  .js .nav__links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    /* the panel starts where the bar's own rule sits, so redraw it here */
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    padding: 0 var(--pad) var(--space-4);
  }
  .js .nav[data-menu="open"] .nav__links { display: flex; }
  .js .nav__links a { min-height: 52px; font-size: var(--text-lg); }
  .js .nav__links a + a { border-top: 1px solid var(--hairline); }
}

/* ========== Case study / project detail pages ========== */
.cs-hero {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  padding-top: var(--space-24);
}
.cs-flower { width: 105px; height: auto; flex-shrink: 0; }
.cs-hero__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-2);
}
.cs-hero__titles { display: flex; flex-direction: column; }
.cs-label {
  font-family: 'Yeseva One', serif;
  font-size: var(--text-title);
  letter-spacing: var(--track-base);
  line-height: 1.1;
}
.cs-name {
  font-family: 'Yeseva One', serif;
  font-size: var(--text-display);
  letter-spacing: var(--track-tight);
  line-height: 1;
}
.cs-copy {
  font-size: var(--text-lead);
  font-weight: 300;
  line-height: 1.21;
  letter-spacing: var(--track-base);
}
.cs-copy p + p, .cs-copy .cs-results { margin-top: 1.1em; }
.cs-results {
  font-family: 'Yeseva One', serif;
  font-size: var(--text-heading);
  letter-spacing: var(--track-tight);
  line-height: 1;
}
.cs-tags {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-lg);
  font-weight: 300;
  letter-spacing: var(--track-base);
  color: var(--muted);
}

.cs-showcase { margin-top: var(--space-16); }
/* Two-up figure pair that sits inside a copy column, between paragraphs. */
.cs-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-8) 0;
}
/* Wide media pair, each with its own link. UI screenshots lose their meaning in
   the square .cs-card crop, so these keep their natural ratio. */
/* Top rule matching the Other Projects divider, for a section that has to
   separate itself from the copy above it. Defined after .cs-showcase so its
   margin-top wins. */
.cs-ruled {
  margin-top: var(--rule-space);
  border-top: 1px solid var(--ink);
  padding-top: var(--rule-space);
}
.cs-shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.cs-shots img { width: 100%; height: auto; display: block; }
.cs-shots .see { font-size: var(--text-lg); color: var(--muted); margin-top: var(--space-3); }
.cs-showcase__head { margin-bottom: var(--space-12); }
.cs-showcase__head h2 {
  font-size: var(--text-heading);
  letter-spacing: var(--track-tight);
  line-height: 1;
}
.cs-showcase__head p {
  font-size: var(--text-lead);
  font-weight: 300;
  line-height: 1.21;
  letter-spacing: var(--track-base);
  margin-top: var(--space-4);
  max-width: 62ch;
}
.cs-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-16);
}
.cs-gallery__row { display: flex; gap: var(--space-4); }
.cs-gallery__row > img { flex: 1 1 0; min-width: 0; }
.cs-gallery img { width: 100%; height: auto; display: block; }

.cs-other {
  margin-top: var(--rule-space);
  border-top: 1px solid var(--ink);
  padding-top: var(--rule-space);
  padding-bottom: var(--rule-space);
}
.cs-other h2 { font-size: var(--text-heading); margin-bottom: var(--space-12); }
.cs-other__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.cs-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.cs-card .see { font-size: var(--text-lg); color: var(--muted); margin-top: var(--space-3); }

@media (max-width: 900px) {
  .cs-hero { flex-direction: column; gap: var(--space-8); }
}
@media (max-width: 768px) {
  .cs-gallery__row { flex-direction: column; }
  .cs-figures { grid-template-columns: 1fr; gap: var(--space-8); }
  .cs-shots { grid-template-columns: 1fr; gap: var(--space-8); }
  .cs-other__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .cs-flower { width: 72px; }
}

/* ========== About page ========== */
.ab-section {
  margin-top: var(--rule-space);
  border-top: 1px solid var(--ink);
  padding-top: var(--rule-space);
}
.ab-section > h2 { font-size: var(--text-heading); margin-bottom: var(--space-12); }
.ab-services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}
.ab-svc__cat {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: var(--text-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-4);
  /* Four columns make the longest category label wrap. Reserve two lines for
     every label so all four lists start on the same line, wrapped or not. */
  min-height: 2lh;
}
.ab-svc ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.ab-svc li {
  font-size: var(--text-body);
  font-weight: 300;
  letter-spacing: var(--track-base);
  color: var(--muted);
}
.ab-services .see { margin-top: var(--space-12); }
.ab-who { padding-bottom: var(--rule-space); }
.ab-who__grid { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: var(--space-16); align-items: start; }
.ab-who__photo { width: 100%; max-width: 340px; height: auto; display: block; }
.ab-who__bio .see { margin-top: var(--space-8); }

@media (max-width: 1200px) {
  .ab-services__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-12); }
}
@media (max-width: 900px) {
  .ab-services__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .ab-who__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ========== Agency years (agency.html) ==========
   Its own page, reachable only from the About link, never from the nav.
   Reuses the home page work marquee: same @keyframes marquee, same
   hover-pause, smaller cells. Items are buttons so they open in a dialog. */

/* Each brand is a .card, so it inherits the home page rhythm and hairline,
   and its description row reuses .card__desc / .card__title / .card__body
   verbatim rather than a lookalike. */
.ag-strip { overflow: hidden; }
.ag-strip__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  animation: marquee 45s linear infinite;
}
.ag-strip:hover .ag-strip__track,
.ag-strip:focus-within .ag-strip__track { animation-play-state: paused; }

.ag-item {
  flex-shrink: 0;
  width: 340px;
  height: 330px;
  margin-right: var(--space-3);
  padding: 0;
  border: 1px solid var(--hairline);
  background: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  font-family: inherit;
}
.ag-item > img,
.ag-item > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ag-item:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 3px; }

/* Play affordance, only on items that open a film */
.ag-item__play {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  background: var(--ink);
  color: var(--bg);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--track-base);
  pointer-events: none;
}

/* ---------- Lightbox: full screen, dimmed, arrows fixed in place ----------
   The arrows get their own grid columns, so they sit in exactly the same spot
   for every item. Sizing them off the artwork made them jump on every next,
   which is unusable when clicking through a set. The whole side column is the
   hit area, so a click anywhere left or right of the artwork moves through. */
.ag-dialog {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: var(--scrim);
  color: var(--bg);
}
/* display only on [open], or it would override the UA display:none when closed */
.ag-dialog[open] {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  display: grid;
  grid-template-columns: clamp(56px, 9vw, 132px) minmax(0, 1fr) clamp(56px, 9vw, 132px);
  grid-template-rows: minmax(0, 1fr) auto;
}
/* the dialog itself carries the scrim, so the backdrop must stay clear or the
   two translucent layers stack and the page stops reading through */
.ag-dialog::backdrop { background: transparent; }

.ag-dialog__nav {
  position: relative;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1;
  color: rgba(241, 241, 241, .7);
  transition: color .15s ease;
}
.ag-dialog__nav[data-dir="-1"] { grid-column: 1; }
.ag-dialog__nav[data-dir="1"] { grid-column: 3; }
.ag-dialog__nav:hover { color: var(--bg); }
/* the button is a full-height hit column, so ring the glyph rather than the
   column, which would draw a box the height of the screen */
.ag-dialog__nav:focus-visible { outline: none; }
.ag-dialog__nav:focus-visible::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--bg);
}
.ag-dialog__nav[hidden] { display: none; }

.ag-dialog__slot {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: var(--space-6) 0;
}
/* fills the space it is given, but never grows past its own pixels */
.ag-dialog__media {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.ag-dialog__bar {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  gap: var(--space-6);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-4) clamp(20px, 4vw, 44px) var(--space-6);
}
.ag-dialog__cap {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--text-body);
  color: rgba(241, 241, 241, .74);
}
.ag-dialog__meta {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--space-6);
  align-items: baseline;
}
.ag-dialog__count {
  font-size: var(--text-body);
  color: rgba(241, 241, 241, .74);
  white-space: nowrap;
}
.ag-dialog__close {
  flex: 0 1 auto;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 500;
  letter-spacing: var(--track-base);
  color: var(--bg);
  white-space: nowrap;
}
.ag-dialog__close:hover { color: var(--orange); }

/* Touch has no hover to pause with, so swap the marquee for a real scroller
   and drop the duplicated half that only exists to make the loop seamless. */
@media (pointer: coarse) {
  .ag-strip {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .ag-strip__track { animation: none; }
  .ag-strip__track > [data-dup] { display: none; }
  .ag-item { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-strip__track { animation: none; }
}

@media (max-width: 768px) {
  .ag-item { width: 280px; height: 272px; }
}