@font-face {
  font-family: "Playfair Display";
  src: url("./fonts/indoaryan/playfair-display.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("./fonts/indoaryan/source-sans-3.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("./fonts/indoaryan/ibm-plex-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.ia-theme {
  color-scheme: light;

  --ia-paper: #f9f6f0;
  --ia-charcoal: #1c1917;
  --ia-obsidian: #0c0a09;
  --ia-light-ink: #e7e5e4;
  --ia-terracotta: #c2410c;
  --ia-ochre: #d97706;
  --ia-teal: #0d9488;

  --ia-bg: var(--ia-paper);
  --ia-ink: var(--ia-charcoal);
  --ia-muted: #57534e;
  --ia-rule: #d6cbbd;
  --ia-accent: var(--ia-terracotta);
  --ia-link: #9a3412;
  --ia-focus: #0f766e;
  --ia-card: #fcf9f2;
  --ia-card-feature: #f3ebdd;

  --ia-serif: "Playfair Display", Georgia, serif;
  --ia-sans: "Source Sans 3", system-ui, sans-serif;
  --ia-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ia-display-size: clamp(2rem, 1.45rem + 2.25vw, 3.65rem);
  --ia-heading-size: clamp(1.55rem, 1.25rem + 1.15vw, 2.35rem);
  --ia-title-size: clamp(1.125rem, 1.015rem + .45vw, 1.45rem);
  --ia-body-size: clamp(1rem, .95rem + .22vw, 1.125rem);
  --ia-detail-size: clamp(.8125rem, .79rem + .12vw, .9rem);
  --ia-gutter: clamp(1rem, 4vw, 3rem);

  --ia-map-bg: #131310;
  --ia-map-ink: #f4ede3;
  --ia-map-muted: #cdc2b5;
  --ia-map-panel: #211b17;
  --ia-map-rule: rgb(234 213 192 / .27);
  --ia-map-focus: #5eead4;
  --ia-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='144' viewBox='0 0 144 144'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23806d5d' filter='url(%23g)' opacity='.04' d='M0 0h144v144H0z'/%3E%3C/svg%3E");
}

@supports (color: light-dark(black, white)) {
  .ia-theme {
    --ia-bg: light-dark(var(--ia-paper), var(--ia-obsidian));
    --ia-ink: light-dark(var(--ia-charcoal), var(--ia-light-ink));
    --ia-muted: light-dark(#57534e, #b8aea6);
    --ia-rule: light-dark(#d6cbbd, #463a32);
    --ia-accent: light-dark(var(--ia-terracotta), var(--ia-ochre));
    --ia-link: light-dark(#9a3412, #fdba74);
    --ia-focus: light-dark(#0f766e, #5eead4);
    --ia-card: light-dark(#fcf9f2, #181411);
    --ia-card-feature: light-dark(#f3ebdd, #211a15);
  }
}

.ia-theme[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  .ia-theme:not([data-theme]) { color-scheme: dark; }
}

.ia-paper {
  background-color: var(--ia-bg);
  background-image: var(--ia-grain);
  color: var(--ia-ink);
  font: 400 var(--ia-body-size)/1.55 var(--ia-sans);
}

.ia-display,
.ia-heading,
.ia-title {
  margin: 0;
  font-family: var(--ia-serif);
  font-weight: 600;
  text-wrap: balance;
}

.ia-display { font-size: var(--ia-display-size); line-height: 1.1; }
.ia-heading { font-size: var(--ia-heading-size); line-height: 1.2; }
.ia-title { font-size: var(--ia-title-size); line-height: 1.3; }

.ia-data {
  font: 400 var(--ia-detail-size)/1.45 var(--ia-mono);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.ia-glass {
  --ia-focus: var(--ia-map-focus);
  --ia-link: var(--ia-map-focus);
  background-color: var(--ia-map-panel);
  color: var(--ia-map-ink);
  border: 1px solid var(--ia-map-rule);
  border-radius: .625rem;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 .5rem 1.125rem rgb(12 10 9 / .24);
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .ia-glass {
    background-color: rgb(33 27 23 / .9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .ia-glass {
    background-color: var(--ia-map-panel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.ia-home {
  margin: 0;
  min-block-size: 100vh;
}

.ia-home,
.ia-home * { box-sizing: border-box; }

.ia-home a {
  color: var(--ia-link);
  text-underline-offset: .2em;
}

.ia-home :focus-visible {
  outline: 2px solid var(--ia-focus);
  outline-offset: 4px;
}

.ia-shell,
.ia-home main {
  max-inline-size: 76rem;
  margin-inline: auto;
  padding-inline: var(--ia-gutter);
}

.ia-masthead { border-block-end: 1px solid var(--ia-rule); }

.ia-masthead .ia-shell,
.ia-masthead nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .35rem 1rem;
}

.ia-masthead .ia-shell { min-block-size: 3.5rem; padding-block: .2rem; }

.ia-home .ia-brand {
  color: var(--ia-ink);
  font: 700 clamp(1rem, .9rem + .4vw, 1.25rem)/1.2 var(--ia-serif);
  text-decoration: none;
}

.ia-masthead nav { font-weight: 650; font-size: var(--ia-detail-size); }

.ia-theme-toggle {
  background: transparent;
  color: var(--ia-ink);
  font: inherit;
  border: 1px solid var(--ia-rule);
  padding: .45rem .65rem;
  min-block-size: 2.75rem;
  cursor: pointer;
}

.ia-theme-toggle[aria-pressed="true"] { border-color: var(--ia-focus); }

.ia-home .skip {
  position: absolute;
  inset: .5rem auto auto .5rem;
  transform: translateY(-150%);
  z-index: 2;
  padding: .5rem .75rem;
  background: var(--ia-bg);
}

.ia-home .skip:focus { transform: none; }

.ia-home main { padding-block: clamp(1rem, 3vw, 2.25rem) 3rem; }

.ia-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--ia-map-bg);
  border: 1px solid var(--ia-map-rule);
  border-radius: .875rem;
}

.ia-hero-card {
  margin: .75rem;
  padding: clamp(.75rem, 2vw, 1.4rem);
}

.ia-hero-card .ia-display { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.65rem); }
.ia-hero-card p { margin: .45rem 0 .35rem; color: var(--ia-map-muted); }
.ia-hero-card a { display: inline-block; padding-block: .35rem; font-weight: 650; }
.ia-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .75rem; }
.ia-home .ia-atlas-link,
.ia-home .ia-map-activate {
  padding: .45rem .65rem;
  min-block-size: 2.75rem;
  border: 1px solid transparent;
  border-radius: .35rem;
  font: 700 .9rem/1.2 var(--ia-sans);
}

.ia-home .ia-atlas-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--ia-obsidian);
  background: #a7d8cd;
  text-decoration: none;
}

.ia-home .ia-atlas-link:hover { text-decoration: underline; }

.ia-home .ia-map-activate {
  color: var(--ia-map-ink);
  background: transparent;
  border-color: var(--ia-map-rule);
  cursor: pointer;
}

.ia-home .ia-map-activate:hover { border-color: var(--ia-map-focus); }

.ia-map-notice { color: var(--ia-map-muted); padding-inline: 1rem; }

.ia-atlas {
  display: block;
  width: 100%;
  block-size: clamp(365px, 55svh, 525px);
  background-color: var(--ia-map-bg);
  border: 0;
}
.ia-atlas[hidden] { display: none; }
.ia-atlas-preview { object-fit: cover; }

.ia-posts { margin-block-start: clamp(1.4rem, 4vw, 2.75rem); }
.ia-posts h2 { margin-block-end: .8rem; }

.ia-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(.7rem, 1.55vw, 1.2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ia-tile {
  position: relative;
  grid-column: span 4;
  min-inline-size: 0;
  background: var(--ia-card);
  border: 1px solid var(--ia-rule);
  border-radius: .75rem;
  transition: transform .18s ease-out;
}

.ia-tile::after {
  position: absolute;
  inset: -1px;
  border: 1px solid var(--ia-accent);
  border-radius: inherit;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--ia-accent) 12%, transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease-out;
}

.ia-tile:focus-within::after { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .ia-tile:hover { transform: translateY(-3px); }
  .ia-tile:hover::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ia-tile,
  .ia-tile::after { transition: none; }
  .ia-tile:hover { transform: none; }
}

.ia-feature,
.ia-wide { grid-column: span 8; }
.ia-feature { grid-row: span 2; background: var(--ia-card-feature); }

.ia-home .ia-post-link {
  display: flex;
  flex-direction: column;
  min-block-size: 100%;
  color: var(--ia-ink);
  border-radius: inherit;
  text-decoration: none;
}

.ia-tile-copy { padding: clamp(.9rem, 2.2vw, 1.6rem); }
.ia-post-link .ia-tile-copy { padding-inline-end: clamp(2.4rem, 4.4vw, 3.3rem); }
.ia-tile h3 { text-wrap: pretty; }
.ia-feature h3 { font-size: clamp(1.45rem, 1.14rem + 1.12vw, 2.05rem); line-height: 1.2; }
.ia-tile p { margin: .35rem 0 0; color: var(--ia-muted); }
.ia-meta,
.ia-reference,
.ia-route-links { display: flex; flex-wrap: wrap; gap: .4rem .75rem; }
.ia-meta { margin-block-end: .75rem; color: var(--ia-muted); }
.ia-meta span { padding: .13rem .4rem; border: 1px solid var(--ia-rule); border-radius: .25rem; }
.ia-tile .ia-reference { margin-block-start: .7rem; align-items: baseline; font-size: var(--ia-detail-size); }
.ia-tile-arrow { position: absolute; inset: .85rem 1rem auto auto; color: var(--ia-link); }
.ia-route-links { margin-block-start: .5rem; }
.ia-route-links a { padding-block: .15rem; }

.ia-map-preview {
  display: block;
  inline-size: calc(100% - 2 * clamp(.9rem, 2.2vw, 1.6rem));
  block-size: auto;
  aspect-ratio: 1496 / 892;
  margin: auto auto clamp(.9rem, 2.2vw, 1.6rem);
  background: var(--ia-paper);
  border-radius: .35rem;
  view-transition-name: editorial-z93-map;
}

.ia-map-preview img { display: block; inline-size: 100%; block-size: auto; border-radius: inherit; }

@media (min-width: 64rem) {
  .ia-hero:has(iframe[hidden]) .ia-hero-card {
    position: absolute;
    z-index: 1;
    inset: 4.55rem 4.4rem auto auto;
    inline-size: min(22rem, 36%);
    margin: 0;
    pointer-events: none;
  }

  .ia-hero:has(iframe[hidden]) .ia-hero-card :is(a, button) { pointer-events: auto; }
}

@media (max-width: 60rem) {
  .ia-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ia-tile { grid-column: span 1; }
  .ia-feature, .ia-wide { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 35rem) {
  .ia-bento { grid-template-columns: minmax(0, 1fr); }
  .ia-atlas { block-size: clamp(365px, 45svh, 400px); }
  .ia-masthead nav { column-gap: .65rem; }
}

@media (width < 48rem) {
  .ia-home .ia-post-link { min-block-size: 11rem; }
  .ia-tile-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .ia-reference > span, .ia-meta > span { min-inline-size: 0; overflow-wrap: anywhere; }
}

.ia-meta { flex-wrap: wrap; }