/* ==========================================================================
   Tanya Chopra - portfolio
   Fraunces (display, wonky + soft) · Plus Jakarta Sans (UI/body)
   Loud, colourful, playful-but-corporate. One signature colour per category.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  /* ground - warm, not blue-grey */
  --cream:    #FBF6EC;
  --cream-2:  #F2E7D5;
  --ink:      #2B2520;
  --ink-soft: #6B6055;
  --ink-faint:#A39687;

  /* earth set - saturated enough to stay loud, warm enough to sit together.
     Legacy names kept so existing markup doesn't need rewriting.            */
  --blue:   #4A6350;   /* moss  - UI/UX case studies */
  --pink:   #B0553A;   /* clay  - graphic design     */
  --yellow: #D9A63C;   /* ochre - photography        */
  --mint:   #7C8B5E;   /* olive - accents            */
  --grape:  #7B4A4F;   /* plum  - accents            */

  --moss:   #4A6350;
  --clay:   #B0553A;
  --ochre:  #D9A63C;
  --olive:  #7C8B5E;
  --plum:   #7B4A4F;
  --slate:  #3D5A80;   /* third case-study accent, keeps card 3 off moss/plum */

  --rule: rgba(43, 37, 32, 0.16);

  /* rhythm */
  --gut:     clamp(1.25rem, 4vw, 4rem);
  --section: clamp(4.5rem, 11vh, 9rem);
  --maxw:    1500px;
  --radius:  1.5rem;

  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* per-section theming; each block overrides --theme */
  --theme: var(--blue);
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

::selection { background: var(--blue); color: #fff; }

/* display face - the wonk + soft axes are what make it playful */
h1, h2, h3, .display {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 100;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ------------------------------------------------------------ utilities -- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* bright sticker pill */
.pill {
  display: inline-block;
  padding: 0.4em 0.95em;
  border-radius: 999px;
  background: var(--theme);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}
.pill--ghost { background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 1.5px var(--rule); }

.label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------------ nav -- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem var(--gut);
  background: color-mix(in srgb, var(--cream) 85%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1.5px solid transparent;
  transition: border-color .4s var(--ease);
}
.nav.stuck { border-bottom-color: var(--ink); }

.nav__mark {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}
.nav__mark b { color: var(--pink); font-weight: inherit; }

.nav__links { display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.5rem); }

.nav__link {
  padding: .5rem .85rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--spring);
}
.nav__link:hover { background: var(--ink); color: var(--cream); transform: rotate(-2deg); }
.nav__link[aria-current="page"] { color: var(--blue); }

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  padding-block: clamp(7rem, 16vh, 11rem) var(--section);
  overflow: hidden;
}

/* soft colour blobs behind the type */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.hero::before { width: 34vw; height: 34vw; background: var(--yellow); top: -6vw;  right: 6vw; }
.hero::after  { width: 26vw; height: 26vw; background: var(--mint);   bottom: 2vw; right: 26vw; }

.hero > * { position: relative; z-index: 1; }

.hero__title {
  font-size: clamp(2.75rem, 9.5vw, 9.5rem);
  max-width: 16ch;
}
.hero__title .u { color: var(--blue); }
.hero__title .p { color: var(--pink); font-style: italic; }

/* the loud bit: a word that cycles */
/* words are stacked in one grid cell; the outgoing one exits upward while the
   incoming one rises from below, so they never sit on top of each other */
.swap {
  display: inline-grid;
  justify-items: start;
  vertical-align: top;
  color: var(--grape);
}
.swap > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.4em) rotate(-3deg);
  transition: opacity .35s var(--ease), transform .5s var(--spring);
}
/* the outgoing word clears fast, the incoming one waits for it - otherwise a
   glance mid-transition catches both words stacked on each other */
.swap > span.on  { opacity: 1; transform: none; transition-delay: .16s; }
.swap > span.out {
  opacity: 0;
  transform: translateY(-0.4em) rotate(2deg);
  transition: opacity .18s var(--ease), transform .4s var(--spring);
}

.hero__sub {
  margin: 2.25rem 0 0;
  max-width: 46ch;
  font-size: clamp(1.0625rem, .5vw + 1rem, 1.375rem);
  color: var(--ink-soft);
}

.hero__tags { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2rem; }
.hero__tags .pill:nth-child(1) { background: var(--blue); }
.hero__tags .pill:nth-child(2) { background: var(--pink); }
.hero__tags .pill:nth-child(3) { background: var(--yellow); color: var(--ink); }
.hero__tags .pill:nth-child(4) { background: var(--mint); }

/* -------------------------------------------------------------- marquee -- */
.marquee {
  display: flex;
  overflow: hidden;
  gap: 0;
  padding-block: .9rem;
  background: var(--ink);
  color: var(--cream);
  border-block: 2px solid var(--ink);
  user-select: none;
}
.marquee__track {
  display: flex;
  flex-shrink: 0;
  gap: 2.5rem;
  padding-right: 2.5rem;
  white-space: nowrap;
  animation: slide 34s linear infinite;
}
.marquee span {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 2rem);
}
.marquee span:nth-child(even) { color: var(--yellow); font-style: italic; }
@keyframes slide { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* -------------------------------------------------------------- section -- */
.section { padding-block: var(--section); }

.section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section__title { font-size: clamp(2rem, 5vw, 4rem); }

/* ------------------------------------------------------------ category --- */
/* Three big colour blocks: UI/UX case studies, graphic design, photography  */
.cats { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }

.cat {
  --theme: var(--blue);
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem 2rem;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border-radius: var(--radius);
  background: var(--theme);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--spring), box-shadow .5s var(--ease);
}
.cat:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: 0 1.5rem 3rem rgba(21,19,31,.22); }

.cat--pink   { --theme: var(--pink); }
.cat--yellow { --theme: var(--yellow); color: var(--ink); }

.cat__n     { font-size: .6875rem; font-weight: 800; letter-spacing: .16em; opacity: .75; }
.cat__title { font-size: clamp(1.9rem, 5.5vw, 4.25rem); margin: .35rem 0 .75rem; }
.cat__desc  { margin: 0; max-width: 44ch; opacity: .92; font-size: 1rem; line-height: 1.5; }
.cat__meta  { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.cat__meta .pill { background: rgba(255,255,255,.22); backdrop-filter: blur(4px); }
.cat--yellow .cat__meta .pill { background: rgba(21,19,31,.14); color: var(--ink); }

.cat__go {
  flex-shrink: 0;
  width: clamp(3.25rem, 6vw, 4.75rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  color: var(--theme);
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  transition: transform .5s var(--spring);
}
.cat--yellow .cat__go { background: var(--ink); color: var(--yellow); }
.cat:hover .cat__go { transform: rotate(45deg) scale(1.08); }

/* ------------------------------------------------------------ work list -- */
/* Used on the case-studies index: editorial rows + cursor-tracking preview */
.work__row {
  --theme: var(--blue);
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1.5px solid var(--rule);
  transition: color .4s var(--ease), padding-inline .4s var(--ease);
}
.work__row:first-child { border-top: 1.5px solid var(--rule); }
.work__row:hover { color: var(--theme); padding-inline: .75rem; }

.work__num   { font-size: .6875rem; font-weight: 800; letter-spacing: .12em; color: var(--ink-faint); }
.work__title { font-size: clamp(1.6rem, 4.2vw, 3rem); margin-bottom: .4rem; }
.work__desc  { margin: 0; max-width: 52ch; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.work__tags  { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.work__year  { font-size: .75rem; font-weight: 700; color: var(--ink-faint); }


/* --------------------------------------------------------------- footer -- */
.footer { padding-block: clamp(3.5rem, 8vh, 6rem) 2.5rem; background: var(--ink); color: var(--cream); }

.footer__cta {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  font-weight: 800;
  font-size: clamp(2.25rem, 8vw, 7rem);
  line-height: .95;
  letter-spacing: -.02em;
  display: inline-block;
  transition: color .35s var(--ease), transform .5s var(--spring);
}
.footer__cta:hover { color: var(--yellow); transform: rotate(-1.5deg); }

.footer__grid {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2.5rem;
  margin-top: 3rem; padding-top: 2rem; border-top: 1.5px solid rgba(255,251,242,.2);
}
.footer__grid a:hover { color: var(--yellow); }
.footer .label { color: rgba(255,251,242,.65); }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 780px) {
  .nav__links { gap: .15rem; }
  .nav__link  { padding: .45rem .55rem; font-size: .7rem; }
  .cat        { grid-template-columns: 1fr; }
  .work__row  { grid-template-columns: 1fr; gap: .4rem; }
  .work__row:hover { padding-inline: 0; }
  .hero::before { width: 55vw; height: 55vw; }
  .hero::after  { width: 45vw; height: 45vw; right: 40vw; }
}

/* ==========================================================================
   Case-study pages
   ========================================================================== */

.cs-hero {
  --theme: var(--blue);
  padding-block: clamp(7rem, 15vh, 10rem) clamp(2.5rem, 5vw, 4rem);
}
.cs-hero__title { font-size: clamp(3rem, 12vw, 10rem); margin: 1rem 0 0; }
.cs-hero__lede  { margin: 1.5rem 0 0; max-width: 54ch; font-size: clamp(1.0625rem, .5vw + 1rem, 1.3125rem); color: var(--ink-soft); }

/* role / type / date / goal */
.cs-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.75rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 2rem;
  border-top: 2px solid var(--ink);
}
.cs-meta dt { font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.cs-meta dd { margin: .5rem 0 0; font-weight: 700; font-size: 1.0625rem; }
.cs-meta dd.wide { font-weight: 400; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }

/* body sections */
.cs-block { padding-block: clamp(2.5rem, 6vw, 5rem); }
.cs-block__n     { display: block; font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--theme); margin-bottom: .85rem; }
.cs-block__title { font-size: clamp(1.75rem, 4.5vw, 3.25rem); margin-bottom: 1.25rem; }
.cs-block__body  { max-width: 62ch; }
.cs-block__body p { margin: 0 0 1.1rem; color: var(--ink-soft); }
.cs-block__body p:last-child { margin-bottom: 0; }
.cs-block__body strong { color: var(--ink); font-weight: 700; }

/* pull-out stat row */
.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem 2rem; margin-top: 2.5rem; }
.cs-stat__n { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 60, "WONK" 1;
  font-weight: 800; font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1; color: var(--theme); }
.cs-stat__l { margin: .5rem 0 0; font-size: .85rem; color: var(--ink-soft); }

/* imagery */
.cs-figure { margin: 0; padding-block: clamp(1rem, 3vw, 2rem); }
.cs-figure img { width: 100%; border-radius: var(--radius); background: var(--cream-2); }
.cs-figure figcaption { margin-top: .9rem; font-size: .8125rem; color: var(--ink-faint); }

.cs-grid { display: grid; gap: clamp(.75rem, 1.5vw, 1.25rem); }
.cs-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cs-grid--3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cs-grid img { width: 100%; border-radius: 1rem; background: var(--cream-2); }

/* a tinted band to break up the scroll */
.cs-band { background: var(--cream-2); border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 3.5rem); }

/* next project */
.cs-next { display: block; padding-block: clamp(3rem, 7vw, 5rem); border-top: 2px solid var(--ink); }
.cs-next__l { font-size: .6875rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.cs-next__t { font-size: clamp(2.25rem, 7vw, 5rem); margin-top: .5rem; transition: color .35s var(--ease), transform .5s var(--spring); }
.cs-next:hover .cs-next__t { color: var(--pink); transform: translateX(1rem); }

/* a marker for copy that still needs Tanya's own words */
.todo {
  display: block;
  margin: 1.25rem 0;
  padding: 1rem 1.15rem;
  border-radius: .85rem;
  background: rgba(255, 197, 49, .22);
  box-shadow: inset 0 0 0 1.5px rgba(255, 197, 49, .8);
  font-size: .9rem;
  color: #6B4E00;
}
.todo b { display: block; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .35rem; }

/* gallery pages (graphic design / photography) */
/* a uniform grid, not masonry -- CSS columns fill top-to-bottom per column
   and can't backfill a short column once it runs out of items, which is
   exactly what read as "a lot of negative space" here. Cropping every
   image to the same square keeps the grid gapless regardless of how
   differently shaped the source screenshots are. */
/* fixed 3 columns rather than auto-fill: this page only ever shows small
   curated sets, and auto-fill was computing 5 columns on a wide desktop,
   orphaning a lone 6th image onto its own near-empty row */
.gal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}
@media (max-width: 700px) {
  .gal { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .gal { grid-template-columns: 1fr; }
}
.gal img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1rem;
  background: var(--cream-2);
  transition: transform .45s var(--spring);
}
.gal img:hover { transform: scale(1.04) rotate(-1deg); }

/* captions inside image grids */
.cs-grid figure { margin: 0; }
.cs-grid figcaption { margin-top: .6rem; font-size: .8125rem; color: var(--ink-faint); line-height: 1.4; }

/* about-page portrait */
.about-portrait {
  width: 100%;
  border-radius: var(--radius);
  background: var(--cream-2);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* the source has a lot of studio white above her - bias the crop downward */
  object-position: center 62%;
}
.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 860px) { .about-split { grid-template-columns: 1fr; } }

/* ==========================================================================
   Gallery pages - mirrors the section structure of the Behance deck
   ========================================================================== */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.gal-section { padding-block: clamp(2rem, 5vw, 4rem) 0; }

.gal-section__head {
  display: flex;
  align-items: baseline;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--theme);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.gal-section__title {
  font-size: clamp(1.5rem, 3.6vw, 2.75rem);
  /* the raw ochre is too pale on cream - pull every theme toward ink so all
     three section colours stay readable */
  color: color-mix(in srgb, var(--theme) 72%, var(--ink));
}
.gal-section__count { font-size: .6875rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin-left: auto; }

/* logos want air and a light card; everything else is masonry */
.gal-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}
.gal-logos img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  border-radius: 1rem;
  padding: clamp(1rem, 2.5vw, 2rem);
  transition: transform .45s var(--spring);
}
.gal-logos img:hover { transform: scale(1.04) rotate(-1deg); }

/* ==========================================================================
   Case-study cards - replaces the old hover-thumbnail list
   ========================================================================== */

.cs-cards { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }

.cs-card {
  --theme: var(--moss);
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--theme);
  color: #fff;
  isolation: isolate;
  transition: transform .55s var(--spring), box-shadow .55s var(--ease);
}
.cs-card:nth-child(even) { --theme: var(--plum); direction: rtl; }
.cs-card:nth-child(even) > * { direction: ltr; }
.cs-card:hover { transform: translateY(-6px); box-shadow: 0 1.5rem 3.5rem rgba(43,37,32,.28); }

.cs-card__media { position: relative; overflow: hidden; min-height: clamp(240px, 34vw, 420px); background: rgba(0,0,0,.15); }
.cs-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.cs-card:hover .cs-card__media img { transform: scale(1.06); }

.cs-card__body { padding: clamp(1.5rem, 3.5vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.cs-card__year  { font-size: .6875rem; font-weight: 800; letter-spacing: .16em; opacity: .8; }
.cs-card__title { font-size: clamp(2rem, 5.5vw, 4rem); margin: .4rem 0 .85rem; }
.cs-card__desc  { margin: 0; opacity: .93; font-size: 1rem; line-height: 1.55; }
.cs-card__tags  { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }
.cs-card__tags .pill { background: rgba(255,255,255,.2); backdrop-filter: blur(4px); }
.cs-card__go {
  margin-top: 1.75rem;
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em;
}
.cs-card__go::after {
  content: "→";
  transition: transform .45s var(--spring);
}
.cs-card:hover .cs-card__go::after { transform: translateX(.45rem); }

@media (max-width: 820px) {
  .cs-card, .cs-card:nth-child(even) { grid-template-columns: 1fr; direction: ltr; }
  .cs-card__media { min-height: 220px; }
}

/* credibility strip under the hero */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 2rem;
  border-top: 2px solid var(--ink);
}
.facts__n { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 60, "WONK" 1;
  font-weight: 800; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1; color: var(--moss); }
.facts__l { margin: .45rem 0 0; font-size: .8125rem; line-height: 1.4; color: var(--ink-soft); }

/* ==========================================================================
   Homepage pizzazz pass
   Case-study badges: a big stamped number, sticker-style.
   ========================================================================== */
.cs-card { position: relative; overflow: visible; }

.cs-card__badge {
  position: absolute;
  top: -1rem; left: 1.75rem;
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(3.25rem, 6vw, 4.25rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 .6rem 1.4rem rgba(43, 37, 32, .28), 0 0 0 3px var(--cream);
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 70, "WONK" 1;
  font-weight: 800;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  color: var(--theme);
  transform: rotate(-9deg);
  transition: transform .5s var(--spring);
}
.cs-card:nth-child(even) .cs-card__badge { left: auto; right: 1.75rem; transform: rotate(9deg); }
.cs-card:hover .cs-card__badge { transform: rotate(0deg) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .cs-card__badge { transition: none; }
}

/* Website Design section: real browser screenshots, landscape not square -
   forcing these into the same 1:1 crop as logos/social posts hid almost the
   entire design. 1.9 matches the actual source screenshots (1200x623). */
.gal--sites { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.gal--sites img { aspect-ratio: 1.9; box-shadow: 0 .5rem 1.5rem rgba(43, 37, 32, .12); }

/* placeholder for a screen/image not supplied yet -- reads as intentional,
   not a broken <img> */
.img-pending {
  display: grid;
  place-items: center;
  min-height: 220px;
  border-radius: var(--radius);
  background: var(--cream-2);
  box-shadow: inset 0 0 0 2px dashed var(--rule);
  outline: 2px dashed var(--rule);
  outline-offset: -2px;
  text-align: center;
  padding: 1.5rem;
  color: var(--ink-faint);
  font-size: .8125rem;
  line-height: 1.5;
}
.img-pending b { display: block; color: var(--ink-soft); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: .4rem; }