/* ============================================================
   SITE LAYOUT  ·  giomessina.com
   ------------------------------------------------------------
   The design system (styles.css) owns the TOKENS and the
   COMPONENTS (.ds-nav, .ds-card, .ds-contact, …).
   This file owns PAGE COMPOSITION only: the global reset, the
   containers, the hero, section rhythm and scroll-reveal.
   Every value here is derived from a token in styles.css — no
   new colours, type or spacing are invented.
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--base);
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Bilingual toggle: i18n.js sets [hidden] on the inactive language.
   !important so component display rules can't re-show it. */
[hidden] { display: none !important; }

/* ---- Real image overlay ---------------------------------
   Sits on top of the .ds-ph diagonal-stripe placeholder inside any
   .ds-card__thumb / .proj__hero / .ds-figure__media. When the named
   file exists it covers the stripe; when it's missing, onerror hides
   it and the stripe + code label show through. Drop files into
   assets/imgs/ using the codes in assets/imgs/IMAGE-LIST.txt. */
.ds-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
/* Logos on transparent backgrounds: fit inside with padding on a clean ground */
.ds-img--contain { object-fit: contain; background: #fff; padding: clamp(20px, 6%, 64px); }

::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }


/* ---- Sticky nav shell ------------------------------------
   Positions the floating .ds-nav pill and keeps it on top. */
.nav-shell {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 12px var(--gutter) 0;
}
.btn-lang { margin-left: 8px; }


/* ---- Page container -------------------------------------- */
.page {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section       { padding-block: clamp(54px, 9vw, 116px); }
.section--tight { padding-block: clamp(38px, 6vw, 78px); }
.section + .section { border-top: 1px solid var(--line); }


/* ---- Hero / intro ---------------------------------------- */
.hero { padding-block: clamp(40px, 8vw, 100px) clamp(36px, 5vw, 68px); }
.hero__eyebrow { display: inline-flex; margin-bottom: clamp(28px, 6vw, 66px); }
.hero__h1 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.05em 0.45em;
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  letter-spacing: -0.045em;
  line-height: 0.9;
}
.hero__hello {
  font-family: var(--font-body);
  font-weight: var(--w-light);
  font-size: var(--text-sub);
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}
.hero__name { font-size: var(--text-hero); }
.period { color: var(--accent); }
.hero__sub {
  margin-top: clamp(24px, 4vw, 42px);
  max-width: 20ch;
  font-size: var(--text-sub);
  font-weight: var(--w-light);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.hero__sub { max-width: 38ch; }
.hero__clients { margin-top: clamp(32px, 5vw, 58px); display: grid; gap: 16px; }
/* Single divider above the clients block — no line between the two rows */
.hero__clients .ds-clients + .ds-clients { border-top: none; padding-top: 0; }


/* ---- About ----------------------------------------------- */
.about__grid {
  display: block;
}
.about__lead { margin-bottom: clamp(24px, 4vw, 44px); max-width: 22ch; }
.about__lead {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--text-lead);
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}
.about__lead .accent { color: var(--accent); }
.about__body { display: grid; gap: 1.2rem; }
.about__body p { color: var(--ink-soft); font-size: var(--text-body); line-height: 1.55; max-width: none; text-wrap: pretty; }
.about__body .ds-pillars { margin-top: 0.6rem; }


/* ---- Works band ------------------------------------------
   Full-bleed tinted band the .ds-card grid is designed to sit on. */
.works { background: var(--works-bg); }
.works__inner { padding-block: clamp(54px, 8vw, 104px); }
.works__foot { margin-top: clamp(28px, 4vw, 46px); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---- Works carousel (home): 3 cards in view, scrollable ---- */
.ds-card-grid--carousel {
  display: flex;
  gap: clamp(16px, 2vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 10px 2px 20px;
  margin: -10px -2px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.ds-card-grid--carousel::-webkit-scrollbar { height: 8px; }
.ds-card-grid--carousel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.ds-card-grid--carousel::-webkit-scrollbar-track { background: transparent; }
.ds-card-grid--carousel .ds-card {
  flex: 0 0 calc((100% - 2 * clamp(16px, 2vw, 22px)) / 3);
  scroll-snap-align: start;
}
@media (max-width: 880px) {
  .ds-card-grid--carousel .ds-card { flex-basis: 84%; }
}
.works__nav { display: flex; gap: 8px; }
.works__arrow {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-card);
  background: var(--card-bg);
  border-radius: 999px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), background 0.2s var(--ease);
}
.works__arrow:hover { border-color: #b9c5e6; transform: translateY(-2px); }
.works__arrow:active { transform: translateY(0); }


/* ---- Contact + colophon ---------------------------------- */
.contact { padding-block: clamp(54px, 8vw, 100px) clamp(40px, 5vw, 64px); }

.colophon {
  border-top: 1px solid var(--line-strong);
  padding: clamp(44px, 7vw, 82px) 0 clamp(30px, 4vw, 44px);
  display: grid;
  gap: clamp(20px, 3vw, 30px);
}
.colophon__tag {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.colophon__text {
  max-width: 62ch;
  font-size: var(--text-lead);
  font-family: var(--font-display);
  font-weight: var(--w-light);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: pretty;
}
.colophon__text .accent { color: var(--accent); }


/* ---- Project page ---------------------------------------- */
.proj { padding-top: clamp(26px, 5vw, 54px); }
.proj__crumb   { display: flex; width: fit-content; margin-bottom: clamp(26px, 5vw, 46px); }
.proj__eyebrow { display: flex; width: fit-content; margin-bottom: clamp(16px, 3vw, 26px); }
.proj__title {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--text-hero);
  letter-spacing: -0.045em;
  line-height: 0.9;
  margin-bottom: clamp(18px, 3vw, 30px);
}
.proj__lead {
  max-width: var(--measure);
  font-size: var(--text-sub);
  font-weight: var(--w-light);
  line-height: 1.26;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  margin-bottom: clamp(36px, 6vw, 66px);
  text-wrap: pretty;
}
.proj__hero {
  position: relative;
  height: clamp(280px, 44vw, 520px);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #eef0f5;
}
/* Caption shown under a hero image — same mono treatment as figcaption */
.proj__cap {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-faint);
  text-wrap: pretty;
}

/* Rich content inside .ds-proj-body (the system only styles <p>) */
.ds-proj-body h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: clamp(18px, 1.6vw, 21px);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 1.7rem 0 0.5rem;
  color: var(--ink);
}
.ds-proj-body > :first-child { margin-top: 0; }
.ds-proj-body ul { margin: 0 0 1.4rem; padding-left: 1.15rem; }
.ds-proj-body ul:last-child { margin-bottom: 0; }
.ds-proj-body li {
  color: var(--ink-soft);
  font-size: var(--text-body);
  line-height: 1.5;
  margin-bottom: 0.55rem;
}
.ds-proj-body li::marker { color: var(--accent); }


/* ---- "More" page : filters + bullets --------------------- */
.bp { padding-top: clamp(26px, 5vw, 54px); }
.bp__intro { margin-bottom: clamp(26px, 4vw, 44px); }
.bp__intro p { margin-top: 0.8rem; max-width: 52ch; font-size: var(--text-body); color: var(--ink-soft); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(26px, 4vw, 42px); }
.filter-button.is-off { opacity: 1; }      /* default look from .btn-filter */
.is-hidden { display: none !important; }


/* ---- Scroll reveal --------------------------------------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: 0.07s; }
[data-delay="2"] { transition-delay: 0.14s; }
[data-delay="3"] { transition-delay: 0.21s; }


/* ---- Small screens --------------------------------------- */
@media (max-width: 620px) {
  .ds-nav__links { gap: 18px; }
  .ds-nav__links a { font-size: 15px; }
  .hero__hello { font-size: var(--text-body); }
}