/* Design changes on top of the 1:1 Figma copy. */

/* Header: paddings halved (desktop/tablet 36 → 18, mobile 20 → 10) */
#container .site-header.site-header--d {
  padding-top: 18px;
  padding-bottom: 18px;
}
#container .site-header.site-header--m {
  padding-top: 10px;
  padding-bottom: 10px;
  height: 100px;
}

/* Nav items: auto width (labels changed), active state driven by scroll-spy */
#container .nav-item {
  width: auto;
  color: #6d6d6d;
  -webkit-text-fill-color: #6d6d6d;
  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-text-fill-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#container .nav-item.is-active {
  color: #13151a;
  -webkit-text-fill-color: #13151a;
  font-family: "Inter:Medium", sans-serif;
}
/* invisible bold copy of the label keeps the item width constant */
#container .nav-item p[data-label]::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-family: "Inter:Medium", sans-serif;
}
#container .nav-cv > :first-child {
  width: auto;
}

/* Case pages: the hero "← Home" pins as a pill once the Product block reaches the top */
#container .home-btn.is-pinned {
  position: fixed;
  top: 16px;
  left: var(--pin-left, 20px);
  width: auto;
  height: 38px;
  padding: 8px 18px 8px 14px;
  box-sizing: border-box;
  border-radius: 100px;
  border: 1px solid #e5e5e5;
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 10000;
  transform: none !important;
  animation: home-pin-in 0.45s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
@keyframes home-pin-in {
  from { translate: 0 -64px; }
  to { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  #container .home-btn.is-pinned { animation: none; }
}

/* Case pages: living gradient over the hero cover (palette from each cover) + film grain */
#container .hero-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}
#container .hero-aurora__blob {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  opacity: 0.9;
  will-change: transform;
  animation: aurora-1 14s ease-in-out infinite alternate;
}
#container .hero-aurora__blob--1 { left: -15%; top: -20%; width: 80%; }
#container .hero-aurora__blob--2 { right: -20%; top: 5%; animation-name: aurora-2; animation-duration: 17s; }
#container .hero-aurora__blob--3 { left: 20%; top: 35%; width: 60%; animation-name: aurora-3; animation-duration: 12s; }
#container .hero-aurora__blob--4 { left: 35%; top: -30%; width: 55%; animation-name: aurora-2; animation-duration: 19s; animation-direction: alternate-reverse; }
@keyframes aurora-1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30%, 18%) scale(1.25); }
  100% { transform: translate(10%, 36%) scale(0.9); }
}
@keyframes aurora-2 {
  0% { transform: translate(0, 0) scale(1.1); }
  50% { transform: translate(-34%, 22%) scale(0.85); }
  100% { transform: translate(-12%, -18%) scale(1.25); }
}
@keyframes aurora-3 {
  0% { transform: translate(0, 0) scale(0.85); }
  50% { transform: translate(-26%, -24%) scale(1.2); }
  100% { transform: translate(24%, -10%) scale(1); }
}
#container .hero-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-0.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.6;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce) {
  #container .hero-aurora__blob { animation: none; }
}

/* Case hero intro: full-screen pixel transition (see site.js) → gradient + grain → title & mockup */
.pixel-transition {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  pointer-events: none;
  display: block;
}
#container .case-cover .hero-aurora { transition: opacity 0.9s ease; }
#container .case-cover.intro .hero-aurora { opacity: 0; }
#container .case-cover .hero-aurora::after { transition: opacity 0.8s ease 0.35s; }
#container .case-cover.intro .hero-aurora::after { opacity: 0; }

/* About page: intro block (bio + square photo) above Experience — fits a 750px-tall viewport on every breakpoint */
#container .about-intro {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: 960px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px; /* photo 240 */
  gap: 56px;
  align-items: center;
}
#container .about-intro__hello {
  margin: 0 0 12px;
  font-family: "Inter:Regular", sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: #444445;
  -webkit-text-fill-color: #444445;
}
#container .about-intro__title {
  margin: 0 0 20px;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: #13151a;
  -webkit-text-fill-color: #13151a;
}
#container .about-intro__dot {
  color: #13151a;
  -webkit-text-fill-color: #13151a;
}
#container .about-intro__p {
  margin: 0 0 12px;
  font-family: "Inter:Regular", sans-serif;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.16px;
  color: #444445;
  -webkit-text-fill-color: #444445;
}
#container .about-intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}
#container .about-intro__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 26px;
  box-sizing: border-box;
  border-radius: 100px;
  font-family: "Inter:Medium", sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  text-decoration: none;
  white-space: nowrap;
}
#container .about-intro__btn--primary {
  background: #9b3bf6;
  border: 1px solid #9b3bf6;
  color: #fff;
  -webkit-text-fill-color: #fff;
}
#container .about-intro__btn--secondary {
  background: transparent;
  border: 1px solid #13151a;
  color: #13151a;
  -webkit-text-fill-color: #13151a;
}
#container .about-intro__arrow { display: block; flex-shrink: 0; width: 0.77em; height: 0.77em; }
#container .about-intro__btn { gap: 0.54em; }
/* square photo: full width of the picture kept, only top/bottom trimmed */
#container .about-intro__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #f4f4f5;
}
#container .about-intro__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}

/* tablet: stacked, square photo first */
@media (max-width: 1023px) {
  #container .about-intro {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
    max-width: 560px; /* same content width as the tablet header and Experience */
  }
  #container .about-intro__photo { order: -1; width: 134px; border-radius: 16px; } /* photo 134 */
  #container .about-intro__title { font-size: 34px; margin-bottom: 16px; }
  #container .about-intro__actions { margin-top: 20px; }
}
/* mobile */
@media (max-width: 799px) {
  #container .about-intro { gap: 20px; }
  #container .about-intro__photo { width: 94px; border-radius: 14px; } /* photo 94 */
  #container .about-intro__hello { font-size: 16px; line-height: 24px; margin-bottom: 8px; }
  #container .about-intro__title { font-size: 28px; margin-bottom: 12px; }
  #container .about-intro__p { font-size: 15px; line-height: 24px; margin-bottom: 10px; }
  #container .about-intro__actions { margin-top: 16px; gap: 12px; }
  #container .about-intro__btn { height: 48px; padding: 0 20px; flex: 1 1 0; min-width: 0; justify-content: center; } /* equal widths */
}

/* About: "Experience" heading uses the same style as "Hello! Nice to meet you." */
#container .page-about .about-exp-title {
  font-family: "Inter:Regular", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 28px;
  font-variation-settings: normal;
  color: #444445;
  -webkit-text-fill-color: #444445;
  height: auto;
}
@media (max-width: 799px) {
  #container .page-about .about-exp-title { font-size: 16px; line-height: 24px; }
}

/* Home: space from the menu to the hero text = space from the hero tags to the first cover
   (header 72px + 120px gap on desktop/tablet; header 100px + 96px gap on mobile) */
#container [data-breakpoint].page-home { padding-top: 192px; }
@media (max-width: 799px) {
  #container [data-breakpoint].page-home { padding-top: 196px; }
}

/* About intro: "Key Achievements" list */
#container .about-intro__achievements { margin-top: 8px; }
#container .about-intro__subtitle {
  margin: 0 0 8px;
  font-family: "Inter:Medium", sans-serif;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.16px;
  color: #13151a;
  -webkit-text-fill-color: #13151a;
}
#container .about-intro__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#container .about-intro__list li {
  position: relative;
  padding-left: 18px;
  font-family: "Inter:Regular", sans-serif;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.16px;
  color: #444445;
  -webkit-text-fill-color: #444445;
}
#container .about-intro__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #444445;
}
/* longer bio: photo aligned to the top of the text on desktop */
#container .about-intro { align-items: start; }
@media (max-width: 799px) {
  #container .about-intro__subtitle { font-size: 15px; line-height: 24px; }
  #container .about-intro__list li { font-size: 15px; line-height: 24px; padding-left: 16px; }
  #container .about-intro__list li::before { top: 10px; left: 3px; }
}

/* ---- Instrument Sans Medium replaces Fraunces (rules rewritten by customize.py) ---- */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/InstrumentSans-Medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/InstrumentSans-Medium-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/InstrumentSans-MediumItalic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/InstrumentSans-MediumItalic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* highlighted words in case headings keep the italic */
#container .case-hl { font-style: italic !important; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/InstrumentSans-Regular-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/InstrumentSans-Italic-latin.woff2") format("woff2"); }
/* headings inside case sections (the ones with highlighted words) use Regular */
#container .case-h, #container .case-h span { font-weight: 400 !important; }
/* case intro block (Product / My Role / Details / Product Impact) in Regular */
#container .intro-reg { font-weight: 400 !important; }

/* Hypothesis cards (card background, paddings and radius unchanged) */
#container .hypothesis-label {
  font-family: "Inter:Semi Bold", "Inter", sans-serif !important;
  font-weight: 600 !important; font-size: 16px !important; line-height: 24px !important;
  letter-spacing: 0.0016em !important; text-transform: uppercase;
  color: #AD4F09 !important; -webkit-text-fill-color: #AD4F09 !important;
}
#container .hypothesis-text, #container .hypothesis-text span {
  font-family: "Instrument Sans", "Inter", sans-serif !important;
  font-weight: 400 !important; font-style: normal !important;
  font-size: 28px !important; line-height: 36px !important; letter-spacing: 0 !important;
  color: #7D6557 !important; -webkit-text-fill-color: #7D6557 !important;
}
#container .hypothesis-text .case-hl {
  font-style: italic !important;
  color: #13151A !important; -webkit-text-fill-color: #13151A !important;
}
@media (max-width: 1023px) {
  #container .hypothesis-text, #container .hypothesis-text span { font-size: 20px !important; line-height: 28px !important; }
}
/* Product Impact card = Figma frame "Impact" (432:2751) */
#container p.impact-head { font-weight: 400 !important; font-style: normal !important; letter-spacing: 0 !important; }
#container p.impact-sub { font-weight: 400 !important; font-style: italic !important; letter-spacing: 0 !important; }
#container p.impact-num { font-weight: 400 !important; font-style: italic !important; letter-spacing: 0 !important; }
#container p.impact-title { font-weight: 500 !important; font-style: normal !important; letter-spacing: 0 !important; }
@media (max-width: 799px) { #container .impact-br { display: none; } }
/* "Product Umico" / "My Role End to end": same styles as "Product Impact results after launch" */
#container .meta-head, #container .meta-head span { font-weight: 400 !important; font-style: normal !important; letter-spacing: 0 !important; }
#container .meta-head .meta-val { font-style: italic !important; }

/* ================= Site nav (fixed, top right) — mechanics of gabrielvaldivia.com =================
   top of the page: inline links; after scrolling they fly into a round burger that opens a blurred panel.
   Mobile (<800px): burger only. Position (--sn-top / --sn-right) is measured by site.js. */
#container .site-header { position: absolute !important; background: transparent !important; }
#container .site-header > :nth-child(2) { display: none !important; }
#container .site-header.site-header--m { height: auto; }
@media (max-width: 799px) {
  /* header lost its nav row (100 → 51px): keep the same gap from the header to the content */
  #container [data-breakpoint].page-home { padding-top: 147px; }
  #container [data-breakpoint].page-about { padding-top: 131px !important; }
}
.sn {
  position: fixed; z-index: 10001;
  top: var(--sn-top, 16px); right: var(--sn-right, 40px);
  height: 40px; display: flex; align-items: center; justify-content: flex-end;
  font-family: "Instrument Sans", "Inter", sans-serif; font-weight: 400; /* menu items in Instrument Sans */
}
.sn-inline {
  position: absolute; right: 0; top: 0; height: 40px;
  display: flex; align-items: center; gap: 32px; white-space: nowrap;
}
.sn-link {
  display: inline-flex; align-items: center; gap: 0;
  font-size: 16px; line-height: 28px; color: #6d6d6d; text-decoration: none;
  transform-origin: right center;
  transition: opacity .2s ease-out, transform .2s ease-out, color .15s;
}
.sn-link:hover, .sn-link:focus-visible { color: #13151a; }
.sn-arrow { flex: none; width: 0.77em; height: 0.77em; margin-left: 0.54em; } /* arrow: 0.77em icon, 0.54em gap */
.sn-item .sn-arrow { margin-left: calc(0.54em - 8px); } /* the panel row already has an 8px gap */
.sn-burger {
  position: relative; width: 40px; height: 40px;
  transform-origin: top right; opacity: 0; transform: scale(.82); pointer-events: none;
  transition: opacity .2s ease-out, transform .2s ease-out;
}
.sn.is-collapsed .sn-burger { opacity: 1; transform: none; pointer-events: auto; }
.sn.is-collapsed .sn-inline { pointer-events: none; }
.sn.is-collapsed .sn-link { opacity: 0; transform: translateX(var(--sn-fly, 0px)) scale(.82); }
.sn-btn {
  position: absolute; right: 0; top: 0; z-index: 1; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 0; padding: 0; margin: 0; background: transparent; border-radius: 50%;
  color: #13151a; cursor: pointer;
}
.sn-btn:focus-visible { outline: 2px solid #13151a; outline-offset: 2px; }
.sn-lines { position: relative; width: 16px; height: 12px; display: block; }
.sn-lines i {
  position: absolute; left: 50%; height: 1.5px; background: currentColor; border-radius: 1px;
  transform: translateX(-50%); transition: all .3s ease-out;
}
.sn-lines i:first-child { width: 16px; top: 2px; }
.sn-lines i:last-child { width: 10px; top: 9px; }
.sn.is-open .sn-lines i { width: 16px; top: 5px; }
.sn.is-open .sn-lines i:first-child { transform: translateX(-50%) rotate(45deg); }
.sn.is-open .sn-lines i:last-child { transform: translateX(-50%) rotate(-45deg); }
.sn-panel {
  position: absolute; right: 0; top: 0; min-width: 200px; box-sizing: border-box;
  display: flex; flex-direction: column; padding: 4px 48px 8px 16px; border-radius: 20px;
  background: rgba(212, 212, 212, .45);
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  clip-path: inset(0 0 calc(100% - 40px) calc(100% - 40px) round 20px);
  transition: clip-path .3s cubic-bezier(.32, .72, 0, 1), background-color .3s cubic-bezier(.32, .72, 0, 1);
}
.sn-btn:hover + .sn-panel { background: rgba(212, 212, 212, .6); }
.sn.is-open .sn-panel { clip-path: inset(0 round 20px); }
.sn-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 0; white-space: nowrap;
  font-size: 20px; line-height: 28px; color: rgba(0, 0, 0, .4); text-decoration: none;
  opacity: 0; transition: color .2s, opacity .2s;
}
.sn-item i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: transparent; }
.sn-item:hover, .sn-item:focus-visible { color: #13151a; }
.sn-item.is-active { color: #13151a; }
.sn-item.is-active i { background: #13151a; }
.sn.is-open .sn-item { opacity: 1; transition-delay: .075s; }
@media (max-width: 799px) {
  .sn-inline { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sn *, .sn-panel { transition-duration: 0s !important; }
}

/* ↗ next to Contact links and Experience company names (replaces Figma's corner+diagonal icon);
   site.js fits it to the label: 0.77em, 0.54em gap, centred on the text line */
#container .ext-arrow { display: block; flex: none; width: 12px; height: 12px; overflow: visible; }

/* no "fi"/"fl" ligatures anywhere (Instrument Sans joins f+i at letter-spacing 0) */
body, #container, .sn { font-variant-ligatures: no-common-ligatures; }

/* Logistics, tablet: the two phone videos side by side (like desktop) instead of stacked */
#container .vid-pair { flex-direction: row !important; align-items: center !important; justify-content: center; gap: 24px !important; }
#container .vid-pair > .vid-pair__item { flex: 1 1 0 !important; width: auto !important; min-width: 0; }

/* Home hero: sizes from Figma PUBLISH › Home (new copy, 2026-11-12) */
#container .home-hero__title p, #container .home-hero__title span { font-size: 48px !important; line-height: 1.2 !important; }
@media (max-width: 1023px) {
  #container .home-hero__title p, #container .home-hero__title span { font-size: 40px !important; }
  #container .home-hero__text p { font-size: 16px !important; line-height: 24px !important; }
}
@media (max-width: 799px) {
  #container .home-hero__title p, #container .home-hero__title span { font-size: 24px !important; }
  #container .home-hero__text p { font-size: 14px !important; line-height: 22px !important; }
}

/* Mobile layout on wider phones / small windows (<800px): header, hero, Contact, About Experience
   get the same 560px column as the project covers, so every block has the same side margins */
@media (max-width: 799px) {
  #container [data-breakpoint].page-home > *, #container [data-breakpoint].page-about > * { max-width: 560px; width: 100%; }
  #container .site-header.site-header--m { width: auto; left: 20px; right: 20px; margin-inline: auto; }
}

/* mobile case hero title: full column width (see widen_case_titles in customize.py) */
#container .case-title-wide { left: 0 !important; width: 100% !important; }

/* Home, tablet: header → eyebrow and text → first cover gaps halved (120 → 60) */
@media (min-width: 800px) and (max-width: 1023px) {
  #container [data-breakpoint].page-home { padding-top: 132px; }
  #container [data-breakpoint].page-home > [data-section="home"] { margin-bottom: -60px; }
}