/* ==========================================================================
   PUENTE LATINO ASSOCIATION — global.css
   Tokens, reset, typography, grid + spacing. Loaded on every page.
   ========================================================================== */

:root{
  /* Official Puente Pantone-C digital equivalents */
  --puente-317:#B1E4E3; --puente-353:#80E0A7; --puente-808:#008898;
  --puente-805:#FF7276; --puente-804:#FF6C00; --puente-810:#FFD100;
  --puente-814:#052055; --puente-0631:#BF9BDE; --puente-801:#00B0D8;
  --puente-black:#0A0A0A; --puente-white:#FFFFFF;

  /* Derived UI values — not official brand colors */
  --puente-orange:var(--puente-804);
  --puente-orange-hover:#E85F00;
  --puente-orange-press:#C24E00;
  --puente-orange-tint:#FFF2E8;
  --puente-teal:var(--puente-808);
  --puente-teal-dark:#006B78;
  --puente-ink:#111111; --puente-ink-2:#333333; --puente-ink-3:#555555; --puente-ink-4:#8A8A8A;
  --puente-rule:#E6E6E6; --puente-rule-2:#D4D4D4;
  --puente-surface-1:#FFFFFF; --puente-surface-2:#F5F5F5; --puente-surface-3:#EDEDED;

  /* Type */
  --font-sans:"Helvetica Neue","Helvetica","Arial",sans-serif;
  --puente-font:var(--font-sans);
  --fs-display:clamp(3.9rem,12vw,9.75rem);
  --fs-h1:clamp(3.2rem,8.4vw,6.5rem);
  --fs-h2:clamp(2.6rem,5.4vw,4.125rem);
  --fs-h3:clamp(2rem,3.4vw,2.6rem);
  --fs-h4:1.375rem;
  --fs-body:18.5px;
  --fs-body-sm:16px;
  --fs-caption:14px;
  --fs-label:12.5px;
  --fs-nav:13.5px;
  --lh-tight:1.0;
  --lh-snug:1.18;
  --lh-normal:1.45;
  --lh-loose:1.62;
  --ls-display:-0.028em;
  --ls-heading:-0.018em;
  --ls-nav:0.03em; /* refined: do not raise to compensate for the smaller size */
  --ls-label:0.1em;
  --measure:20em;
  --measure-narrow:15em;

  /* Layout */
  --page-margin:clamp(20px,5vw,88px);
  --content:1200px;
  --content-wide:1560px;
  --header-h:104px;
  --header-h-sm:76px;

  /* Spacing scale */
  --space-xs:8px;
  --space-sm:16px;
  --space-md:clamp(20px,3vw,32px);
  --space-lg:clamp(32px,5vw,56px);
  --space-xl:clamp(56px,9vw,128px);
  --space-2xl:clamp(88px,13vw,180px);

  /* Motion */
  --dur:180ms;
  --dur-fast:140ms;
  --ease:cubic-bezier(0.4,0,0.2,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-sans);
  font-kerning:normal;
  font-optical-sizing:auto;
  font-size:var(--fs-body);
  line-height:var(--lh-loose);
  color:var(--puente-ink);
  background:var(--puente-white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block;}
h1,h2,h3,h4{margin:0;font-weight:700;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:var(--puente-ink);text-decoration:none;}
a:hover{color:var(--puente-orange);}
/* Block-level card links carry their own coloured children — the global link
   hover must not repaint the whole card. */
a.home-area:hover,a[class*="home-project--"]:hover,a.home-event:hover,
a.pk-card:hover,a.home-podcast__frame:hover,a.home-featured__item:hover{color:inherit;}
button{font:inherit;}

/* The page wrapper is an inline-size container so the homepage's
   cqi / cqw type + spacing scale resolves against page width. */
.pk-page{container-type:inline-size;background:var(--puente-white);}

/* ---------- Accessibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--puente-804);
  outline-offset:3px;
}
.pk-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--puente-ink);color:#fff;padding:12px 18px;
  font-size:16px;font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;
}
.pk-skip:focus{left:0;color:#fff;}
.pk-visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;scroll-behavior:auto !important;
  }
}

/* ---------- Grid + containers ---------- */
.pk-shell{width:100%;padding-inline:var(--page-margin);}
.pk-container{max-width:var(--content);margin-inline:auto;padding-inline:var(--page-margin);}
.pk-container--wide{max-width:var(--content-wide);}
.pk-container--flush{padding-inline:0;}
.pk-section{padding-block:var(--space-xl);}
.pk-section--tight{padding-block:var(--space-lg) var(--space-md);}
.pk-section--tint{background:var(--puente-surface-2);}
.pk-section--ink{background:var(--puente-black);color:#fff;}
.pk-section--ink a{color:#fff;}
.pk-section--ink a:hover{color:var(--puente-orange);}
/* Block-level card links carry their own coloured children — the global link
   hover must not repaint the whole card. */
a.home-area:hover,a[class*="home-project--"]:hover,a.home-event:hover,
a.pk-card:hover,a.home-podcast__frame:hover,a.home-featured__item:hover{color:inherit;}
.pk-section + .pk-section{border-top:1px solid var(--puente-rule);}
.pk-section--ink + .pk-section,.pk-section + .pk-section--ink{border-top:0;}

.pk-grid{display:grid;gap:var(--space-md);}
.pk-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.pk-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.pk-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.pk-grid--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-lg);}
.pk-grid--sidebar{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-lg);}
@media (max-width:1024px){
  .pk-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:767px){
  .pk-grid--2,.pk-grid--3,.pk-grid--4,.pk-grid--split,.pk-grid--sidebar{grid-template-columns:minmax(0,1fr);}
}

/* ---------- Typography ---------- */
.pk-display{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--ls-display);}
.pk-h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-display);}
.pk-h2{font-size:var(--fs-h2);line-height:var(--lh-snug);letter-spacing:var(--ls-heading);}
.pk-h3{font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:var(--ls-heading);}
.pk-h4{font-size:var(--fs-h4);line-height:1.3;letter-spacing:0;}
.pk-lead{font-size:clamp(19px,5.4vw,25px);line-height:1.45;letter-spacing:-0.008em;color:var(--puente-ink-2);max-width:17em;}
.pk-body{font-size:var(--fs-body);line-height:var(--lh-loose);color:var(--puente-ink-2);max-width:var(--measure);}
.pk-body + .pk-body{margin-top:1em;}
.pk-caption{font-size:var(--fs-caption);line-height:1.5;color:var(--puente-ink-3);}
.pk-label{
  font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--puente-orange);
}
.pk-label--quiet{color:var(--puente-ink-4);}
.pk-label--ink{color:var(--puente-ink);}
.pk-body a,.pk-lead a{
  text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:var(--puente-orange);text-underline-offset:3px;
}
.pk-measure{max-width:var(--measure);}
.pk-measure--narrow{max-width:var(--measure-narrow);}

/* ---------- Page header (inner pages) ---------- */
.pk-pagehead{padding-block:var(--space-lg) var(--space-md);}
.pk-pagehead__crumbs{
  font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--puente-ink-4);margin-bottom:var(--space-lg);
}
.pk-pagehead__crumbs a{color:var(--puente-ink-4);}
.pk-pagehead__crumbs a:hover{color:var(--puente-ink);}
.pk-pagehead__crumbs span{padding-inline:8px;}
.pk-pagehead h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-display);max-width:14em;}
.pk-pagehead__intro{margin-top:var(--space-lg);}
.pk-pagehead__intro{margin-top:var(--space-md);}

/* Small screens: type steps down a notch and measures widen. */
@media (max-width:767px){
  :root{
    --fs-body:16px; --fs-body-sm:14px; --fs-caption:13px; --fs-label:11px;
    --fs-h4:1.25rem; --measure:22em; --measure-narrow:17em;
  }
  .pk-lead{font-size:18px;max-width:20em;}
}