/* General Sans — self-hosted (ITF Free Font License).
   Font files live in assets/fonts/. No external font request is made. */
@font-face{font-family:"General Sans";src:url("../fonts/GeneralSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"General Sans";src:url("../fonts/GeneralSans-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"General Sans";src:url("../fonts/GeneralSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"General Sans";src:url("../fonts/GeneralSans-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"General Sans";src:url("../fonts/GeneralSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}


/* ============================================================
   TERRITORIO — Latin American Urban Policy Association at MIT
   Brand system: General Sans / block-shape geometry / color field
   ============================================================ */

:root{
  --green:#038A00;
  --orange:#FB4601;
  --yellow:#FDE03C;
  --pink:#FDB0D0;
  --blue:#0279E3;
  --paper:#F3F4EF;
  --ink:#000000;

  --accent:var(--blue);
  --on-accent:#fff;

  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --rule: 1.5px solid var(--ink);

  --font: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-weight:500;
  font-size:clamp(1rem,.95rem + .2vw,1.125rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}

/* ---------- type ---------- */
.display{
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(2.75rem,10.5vw,9rem);
  line-height:.86;
  letter-spacing:-.025em;
  margin:0;
}
h2.section-title{
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.9rem,5.2vw,4.25rem);
  line-height:.92;
  letter-spacing:-.02em;
  margin:0 0 .6em;
  max-width:18ch;
  text-wrap:balance;
}
h3{
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(1.15rem,2vw,1.6rem);
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0 0 .5rem;
}
.subtitle{
  text-transform:lowercase;
  font-weight:500;
  font-size:clamp(1.05rem,2.4vw,1.9rem);
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0;
}
.eyebrow{
  text-transform:uppercase;
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.14em;
  margin:0 0 1.5rem;
}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}
.lede{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.45;letter-spacing:-.005em;}
.measure{max-width:62ch;}
strong{font-weight:700;}

/* ---------- layout ---------- */
.wrap{padding-inline:var(--gut);}
section{padding-block:clamp(3.5rem,9vw,8rem);}
.rule-top{border-top:var(--rule);}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:var(--rule);
  position:relative;
  display:flex;align-items:center;
  gap:1rem;
  padding:calc(30px * 1.8889 * 0.4706) var(--gut);
}
.site-header .brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex-shrink:0;}
.site-header .brand svg,.site-header .brand img{height:20px;width:auto;}
nav.main{display:flex;gap:clamp(.9rem,2.2vw,2rem);align-items:center;min-width:0;}
/* above the mobile breakpoint the page links sit centred in the header, and the
   language switcher tucks up against the MIT mark at its clear-space distance */
@media (min-width:961px){
  nav.main{position:absolute;left:50%;transform:translateX(-50%);}
  .site-header{gap:0;}                 /* the mark's own clear space sets the spacing */
  .langs{margin-left:auto;}
}

/* ---------- language switcher ---------- */
.langs{display:flex;align-items:center;gap:.15rem;flex-shrink:0;}
.langs button{
  font:inherit;font-weight:600;font-size:.76rem;letter-spacing:.08em;
  padding:.3rem .38rem;background:transparent;border:none;cursor:pointer;
  color:inherit;opacity:.45;line-height:1;
}
.langs button:hover{opacity:1;}
.langs button[aria-pressed="true"]{opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;}
nav.main a{
  text-decoration:none;text-transform:uppercase;font-weight:600;
  font-size:.82rem;letter-spacing:.1em;padding-block:.35rem;
  border-bottom:2px solid transparent;white-space:nowrap;
}
nav.main a:hover{border-bottom-color:var(--ink);}
nav.main a[aria-current="page"]{border-bottom-color:var(--accent);}


/* ---------- MIT logo, top right of every page ----------
   Clear space per brand.mit.edu = the width of the M, which is 47.06% of the
   logo's width. Logo height is kept above the 30px digital minimum. */
.mit-logo{
  --mit-h:30px;
  --mit-clear:calc(var(--mit-h) * 1.8889 * 0.4706);   /* width of the M */
  flex-shrink:0;
  display:block;
  margin-left:var(--mit-clear);
}
.mit-logo img{height:var(--mit-h);width:auto;}

/* ---------- block shapes (traced from the brand map assets) ---------- */
.shape{background:var(--accent);width:100%;aspect-ratio:1/1;}
.shape--a{clip-path:polygon(99.97% 99.95%,29.54% 99.95%,0% 21.53%,65.99% 0%,92.1% 36.89%);}
.shape--b{clip-path:polygon(24.48% 98.43%,13.18% 75.36%,6.63% 25.55%,9.44% 14.43%,32.62% 1.5%,41.25% 9.6%,60.67% 18.82%,90.06% 31.18%,86.43% 49.95%,83.15% 73.24%,79.67% 89.79%);}
.shape--c{clip-path:polygon(80.42% 94.85%,27.56% 94.85%,13.67% 75.57%,22.03% 36.21%,18.04% 33.85%,19.89% 14.38%,25.42% 14.36%,25.45% 9.87%,55.77% 14.33%,55.85% 21.06%,59.21% 23.61%,62.61% 5.08%,80.43% 6.38%);}

/* ---------- hero (brand layout system: title TL / shape centre / subtitle BR) ---------- */
.hero{
  position:relative;
  min-height:calc(100svh - 56px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(.75rem,1.8vw,1.5rem) var(--gut) clamp(2rem,4vw,3.5rem);
  overflow:hidden;
}
/* the wordmark drifts inside the hero box and bounces off its edges */
.hero__mark{
  position:absolute;
  top:0;left:0;
  width:clamp(220px,44vw,560px);
  z-index:2;
  will-change:transform;
  pointer-events:none;
}
.hero__mark svg,.hero__mark img{width:100%;height:auto;}
.hero__shape{
  position:absolute;
  inset:0;
  display:grid;place-items:center;
  pointer-events:none;
  z-index:0;
}
.hero__shape .shape{width:clamp(230px,34vw,460px);}
.hero__foot{position:relative;z-index:2;}
.hero__foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.25rem;
}
.hero__foot .subtitle{margin-left:auto;text-align:right;max-width:22ch;}

/* ---------- color-field sections ---------- */
.field{background:var(--accent);color:var(--on-accent);}
.field--ink{color:var(--ink);}
.field .eyebrow{opacity:.75;}

/* ---------- grids ---------- */
.two{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.two--sticky > :first-child{position:sticky;top:5rem;}

/* ---------- stat ---------- */
.stat{font-weight:700;font-size:clamp(4rem,15vw,12rem);line-height:.8;letter-spacing:-.04em;margin:0;}
.stat-note{text-transform:lowercase;font-size:clamp(1rem,1.6vw,1.3rem);max-width:24ch;margin-top:1rem;}

/* ---------- pillar cards ---------- */
.pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));
  gap:clamp(1.75rem,2.8vw,2.5rem);
}
.pillar{padding:0;}
.pillar__bar{height:10px;margin-bottom:1.1rem;}
.pillar p{font-size:1rem;}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:clamp(1.5rem,3vw,2.5rem);}
.person{display:flex;flex-direction:column;}
.person__img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;margin-bottom:1rem;}
.person__role{text-transform:lowercase;font-size:.95rem;line-height:1.3;margin:.15rem 0 0;}
.person__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;
  margin-top:.7rem;
}
.person__flag{
  display:inline-block;padding:.22rem .55rem;
  font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);
}
.person__link{
  display:inline-block;
  font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:1px;
  white-space:nowrap;
}
.person__link:hover{color:var(--accent);}
.bio{border-top:var(--rule);padding-block:clamp(2rem,4vw,3rem);}
.bio__link{margin-left:auto;text-decoration:none;}
.bio__link:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.bio__head{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;margin-bottom:1.25rem;}
.bio__head h3{margin:0;}
.bio__meta{text-transform:lowercase;font-size:.95rem;}

/* ---------- events / posts ---------- */
.card-list{border-top:var(--rule);}
.card{
  display:grid;grid-template-columns:minmax(0,7rem) 1fr auto;
  gap:clamp(1rem,3vw,2.5rem);align-items:start;
  padding-block:clamp(1.5rem,3vw,2.25rem);
  border-bottom:var(--rule);
  text-decoration:none;
}
a.card:hover{background:var(--ink);color:var(--paper);}
a.card:hover .tag{background:var(--paper);color:var(--ink);}
.card__date{text-transform:uppercase;font-size:.72rem;font-weight:600;letter-spacing:.11em;padding-top:.35rem;}
.card__body h3{margin-bottom:.35rem;}
.card__body p{font-size:.98rem;max-width:60ch;margin:0;}
.card__with{text-transform:lowercase;font-size:1.05rem;margin:0 0 .5rem;}
.tag{
  display:inline-block;padding:.25rem .6rem;
  font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  border:1.5px solid currentColor;white-space:nowrap;
}
.tag--filled{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ---------- poster (event visual, per brand layout system) ---------- */
.poster{
  aspect-ratio:1/1;position:relative;overflow:hidden;
  padding:clamp(1rem,2.2vw,1.75rem);
  display:flex;flex-direction:column;justify-content:space-between;
  background:var(--accent);
}
.poster__shape{position:absolute;inset:22% 10% 22% 12%;z-index:0;}
.poster > *{position:relative;z-index:1;}
.poster h3{font-size:clamp(1rem,2.4vw,1.7rem);}
.poster__meta{text-transform:lowercase;font-size:clamp(.8rem,1.4vw,1rem);text-align:right;line-height:1.25;}

/* ---------- events: click a row to open its description ---------- */
.event-list{border-top:var(--rule);}
.event{border-bottom:var(--rule);}
.event__h{margin:0;font-size:inherit;font-weight:inherit;}
.event__head{
  display:grid;
  grid-template-columns:minmax(0,13rem) 1fr auto auto;
  gap:clamp(1rem,3vw,2.5rem);
  align-items:center;
  width:100%;
  padding:clamp(1.35rem,2.6vw,2rem) 0;
  background:none;border:none;text-align:left;color:inherit;font:inherit;
  cursor:pointer;
}
.event__head:hover .event__title{text-decoration:underline;text-underline-offset:4px;}
.event__date{
  text-transform:uppercase;font-size:.72rem;font-weight:600;letter-spacing:.11em;
}
.event__title{
  font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;
  font-size:clamp(1.1rem,1.9vw,1.55rem);
}
.event__mark{
  position:relative;width:16px;height:16px;flex-shrink:0;
}
.event__mark::before,.event__mark::after{
  content:"";position:absolute;background:currentColor;
  left:0;top:7px;width:16px;height:2px;
}
.event__mark::after{transform:rotate(90deg);transition:transform .18s ease;}
.event.is-open .event__mark::after{transform:rotate(0deg);}
.event__body{padding-bottom:clamp(2rem,4vw,3rem);}

@media (max-width:720px){
  .event__head{grid-template-columns:1fr auto;gap:.5rem .75rem;align-items:start;}
  .event__date{grid-column:1/-1;}
  .event__title{grid-column:1;}
  .event__head .tag{grid-column:1;justify-self:start;margin-top:.35rem;}
  .event__mark{grid-column:2;grid-row:2;align-self:start;margin-top:.35rem;}
}


/* a quieter section heading, for secondary blocks */
h2.section-title--sm{
  font-size:clamp(1.35rem,2.6vw,2.1rem);
  max-width:22ch;
}

/* blog card: byline and source line */
.card__author{
  text-transform:lowercase;font-size:.95rem;margin:0 0 .45rem;
}
.card__source{
  font-size:.8rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;margin:.7rem 0 0;opacity:.65;
}
a.card:hover .card__source{opacity:1;}


/* ---------- long-form article ---------- */
.article__title{
  font-weight:700;text-transform:uppercase;
  font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:.95;letter-spacing:-.02em;
  margin:0 0 1rem;max-width:20ch;text-wrap:balance;
}
.article__standfirst{
  font-size:clamp(1.1rem,2vw,1.55rem);line-height:1.35;
  max-width:46ch;margin:0 0 1.75rem;
}
.article__byline{
  text-transform:lowercase;font-size:.98rem;margin:0;
  padding-top:1.25rem;border-top:var(--rule);max-width:46ch;
}
.article__body{max-width:none;}
.article__body > p,.article__body > ol{max-width:64ch;font-size:1.05rem;line-height:1.7;}
.article__body > p{margin:0 0 1.4em;}
.article__lead{
  font-weight:700;font-size:clamp(1.15rem,2.1vw,1.6rem) !important;
  line-height:1.3;border-left:10px solid var(--accent);
  padding-left:1.25rem;margin:2.25rem 0 2rem !important;
}
.article__h{
  font-weight:700;text-transform:uppercase;
  font-size:clamp(1.2rem,2.2vw,1.75rem);line-height:1.1;letter-spacing:-.01em;
  margin:2.75rem 0 1rem;max-width:26ch;
}
.article__list{padding-left:1.3rem;margin:0 0 1.4em;}
.article__list li{margin-bottom:.8em;}
.article__source{
  margin-top:clamp(2.5rem,5vw,4rem) !important;padding-top:1.5rem;border-top:var(--rule);
  font-size:.95rem;
}
.article__source a{text-decoration:underline;text-underline-offset:3px;}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem;}
.filters button{
  font:inherit;font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.5rem .9rem;background:transparent;border:1.5px solid var(--ink);
  cursor:pointer;color:inherit;
}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:0;border-top:var(--rule);}
.contact-cell{
  padding:clamp(2rem,4vw,3.25rem) clamp(1.25rem,2.5vw,2.25rem);
  border-bottom:var(--rule);border-right:var(--rule);
  text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;
  min-height:clamp(11rem,20vw,15rem);
}
.contact-cell:last-child{border-right:none;}
.contact-cell:hover{background:var(--ink);color:var(--paper);}
.contact-cell__val{font-weight:700;font-size:clamp(1.05rem,2.2vw,1.6rem);letter-spacing:-.01em;word-break:break-word;margin-top:2rem;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--paper);padding:clamp(3rem,6vw,5rem) var(--gut) 2rem;}
.site-footer a{text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:2.5rem;margin-bottom:3.5rem;}
.site-footer .mark{max-width:320px;margin-bottom:1.25rem;}
.site-footer .mark svg path,.site-footer .mark img{fill:var(--paper);}
.footer-h{text-transform:uppercase;font-size:.7rem;font-weight:600;letter-spacing:.14em;margin:0 0 1rem;opacity:.6;}
.footer-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.95rem;}
.colorbar{display:flex;height:8px;margin-bottom:1.5rem;}
.colorbar span{flex:1;}
.footer-legal{display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;font-size:.78rem;opacity:.65;border-top:1px solid rgba(243,244,239,.25);padding-top:1.5rem;}
.footer-legal a{text-decoration:underline;text-underline-offset:3px;}

/* ---------- utility ---------- */
.skip{position:absolute;left:-9999px;}
.skip:focus{left:var(--gut);top:.5rem;z-index:100;background:var(--ink);color:var(--paper);padding:.6rem 1rem;}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
.hidden{display:none !important;}

/* header: swap to the icon mark and tighten nav on narrow screens */
.site-header .brand .mark-icon{display:none;height:22px;}
@media (max-width:960px){
  .site-header{
    padding-inline:clamp(.9rem,3vw,1.5rem);
    gap:calc(30px * 1.8889 * 0.4706);   /* MIT clear space between items */
    flex-wrap:nowrap;
  }
  .site-header .brand .mark-word{display:none;}
  .site-header .brand .mark-icon{display:block;}
  .mit-logo{margin-left:0;order:0;}
  nav.main{
    position:static;transform:none;
    flex:1 1 auto;
    min-width:0;                        /* lets the nav shrink instead of pushing the mark */
    gap:clamp(.5rem,2.4vw,1rem);
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    margin-inline:-.25rem;padding-inline:.25rem;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1.25rem),transparent 100%);
            mask-image:linear-gradient(to right,#000 calc(100% - 1.25rem),transparent 100%);
  }
  nav.main::-webkit-scrollbar{display:none;}
  nav.main a{font-size:.72rem;letter-spacing:.06em;}
  .langs{margin-left:0;}
  .langs button{padding:.3rem .24rem;font-size:.68rem;letter-spacing:.04em;}
}

@media (max-width:640px){
  .card{grid-template-columns:1fr;gap:.75rem;}
  .card__date{padding-top:0;}
  .hero__foot .subtitle{margin-left:0;text-align:left;}
  .pillar{border-right:none;}
  .contact-cell{border-right:none;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
}