@font-face{
  font-family: "Inter";
  src: url("fonts/inter/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face{
  font-family: "Inter";
  src: url("fonts/inter/InterVariable-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face{
  font-family: "Tiempos";
  src:
    url("fonts/tiempos/Tiempos-VF-Subset.woff2") format("woff2"),
    url("fonts/tiempos/Tiempos-VF-Subset.woff") format("woff");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

@font-face{
  font-family: "Tiempos";
  src:
    url("fonts/tiempos/Tiempos-VF-Subset-Italic.woff2") format("woff2"),
    url("fonts/tiempos/Tiempos-VF-Subset-Italic.woff") format("woff");
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
}

:root{
  --ggq-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ggq-font-display: 'Tiempos', ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --ggq-font-scale: 1;
  --ggq-body-size: 18px;
  --ggq-leading: 1.62;
  --ggq-dropcap-lines: 3;
  --ggq-dropcap-scale: 1.04;
  /* Baseline-perfect dropcap via 2-part formula:
     - font-size uses `--ggq-dropcap-scale`
     - (line-height + padding-top) is tuned so the float height stays ~3 lines */
  --ggq-dropcap-height-factor: 0.9615; /* ~= 1 / --ggq-dropcap-scale */
  --ggq-dropcap-pad-top: 0.155; /* in em of the dropcap */
  --ggq-dropcap-letter-leading: calc(var(--ggq-dropcap-height-factor) - var(--ggq-dropcap-pad-top));
  --ggq-dropcap-gap: 12px;
  --ggq-dropcap-color: #c7493a;
  /* Hover paragraph guide (left rail): keep a plain rgba fallback for clients without `color-mix()`. */
  --ggq-paragraph-guide-color: rgba(199, 73, 58, 0.4);
  --ggq-paragraph-guide-width: 4px;
  --ggq-paragraph-guide-inset: 14px;
}

@supports (color: color-mix(in srgb, #000 50%, transparent)){
  :root{
    --ggq-paragraph-guide-color: color-mix(in srgb, var(--ggq-dropcap-color) 40%, transparent);
  }
}

body.demo-v9{
  font-family: var(--ggq-font-body);
  font-size: calc(var(--ggq-body-size) * var(--ggq-font-scale));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.demo-v9 .ggq-page-title{
  font-family: var(--ggq-font-display);
  font-weight: 700;
  text-wrap: balance;
}

.demo-v9 .hero-title,
.demo-v9 .section h2,
.demo-v9 .article h1,
.demo-v9 .article h2,
.demo-v9 .card h3:not(.ggq-side-rail-title){
  font-family: var(--ggq-font-display);
}

.demo-v9 .hero-title{font-weight: 700;}
.demo-v9 .section h2{font-weight: 700;}
.demo-v9 .card h3:not(.ggq-side-rail-title){font-weight: 600;}
.demo-v9 h3.ggq-side-rail-title{
  font-family: var(--ggq-font-body);
  font-weight: 850;
}

.demo-v9 .article{
  font-family: var(--ggq-font-body);
  font-size: 1em;
  font-weight: 500;
  font-style: normal;
  line-height: var(--ggq-leading);
}

.demo-v9 .article.ggq-two-col:not(.hero-article) > p{
  margin: 0 0 0.9em;
  /* Allow paragraph fragmentation so column heights can balance better. */
  break-inside: auto;
  -webkit-column-break-inside: auto;
  orphans: 2;
  widows: 2;
}
.demo-v9 .article.ggq-two-col:not(.hero-article) > p:last-child{
  margin-bottom: 0;
}
.demo-v9 .article.ggq-two-col:not(.hero-article) > p.ggq-callout{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.demo-v9 .article > p,
.demo-v9 .article li{
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Paragraph hover guide (left rail).
   Note: do not gate behind hover media queries; some clients ignore them. */
.demo-v9 .article p{position: relative;}
.demo-v9 .article p:hover::before{
  content:"";
  position:absolute;
  left: calc(-1 * var(--ggq-paragraph-guide-inset));
  top: 0.15em;
  bottom: 0.15em;
  width: var(--ggq-paragraph-guide-width);
  border-radius: 999px;
  background: var(--ggq-paragraph-guide-color);
  pointer-events:none;
}

@media (hover:none) and (pointer:coarse){
  /* Avoid sticky :hover on touch-first devices unless a mouse is detected. */
  .demo-v9:not(.ggq-pointer-mouse) .article p:hover::before{content:none;}
}

@media (max-width: 820px){
  .demo-v9 .article > p,
  .demo-v9 .article li{text-align: left;}
}

/* Article lead: a bit larger, the rest slightly smaller. */
.demo-v9 .article > p.lead{
  font-size: 1.12em;
  line-height: 1.55;
}

.demo-v9 .article-head{
  display:flex;
  gap: 18px;
  align-items:flex-start;
  margin: 0 0 12px;
}
.demo-v9 .article-head__main{flex: 1; min-width: 0;}
.demo-v9 .article-head__aside{flex: 0 0 280px; min-width: 0;}
.demo-v9 .article-head h1{text-wrap: balance;}
.demo-v9 .article > .article-standfirst{
  margin: 10px 0 14px;
  font-size: 1.08em;
  line-height: 1.52;
  color: color-mix(in srgb, var(--fg) 87%, var(--muted) 13%);
  text-wrap: pretty;
}
.demo-v9 .article.ggq-two-col > .article-standfirst{
  margin-bottom: 22px;
}
.demo-v9 .article.ggq-two-col > p.lead{
  margin-bottom: 18px;
}

@media (max-width: 820px){
  .demo-v9 .article-head{flex-direction: column;}
  .demo-v9 .article-head__aside{flex-basis: auto; width: 100%;}
}

/* v9: avoid dropcaps inside nested blocks (cards, etc.). */
.demo-v9 .article.dropcap p:first-of-type::first-letter,
.demo-v9 .article.dropcap p.lead + p::first-letter,
.demo-v9 .article.dropcap p.lead + figure + p::first-letter,
.demo-v9 .article.dropcap p.lead + figure + figure + p::first-letter{
  float:none;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  text-transform: inherit;
  font-family: inherit;
}

/* v9: dropcap only once, at the start of the article body (direct children). */
  .demo-v9 .article.dropcap > p:first-of-type::first-letter,
  .demo-v9 .article.dropcap > p.lead + p::first-letter,
  .demo-v9 .article.dropcap > p.lead + figure + p::first-letter,
  .demo-v9 .article.dropcap > p.lead + figure + figure + p::first-letter{
	  float:left;
	  font-size: calc(var(--ggq-dropcap-lines) * var(--ggq-leading) * var(--ggq-dropcap-scale) * 1em);
	  line-height: var(--ggq-dropcap-letter-leading);
	  padding: calc(var(--ggq-dropcap-pad-top) * 1em) var(--ggq-dropcap-gap) 0 0;
	  font-weight: 800;
	  font-family: var(--ggq-font-display);
	  color: var(--ggq-dropcap-color);
	  text-transform: uppercase;
	}

.demo-v9 .ggq-news-item.article.dropcap{
  /* News columns use a different rhythm; nudge the dropcap baseline down slightly. */
  --ggq-dropcap-pad-top: 0.19;
}

.demo-v9 .article.dropcap > p.lead::first-letter{
  float:none;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  text-transform: inherit;
  font-family: inherit;
}

.demo-v9 .ggq-dest-intro-body.article.dropcap{
  --ggq-dropcap-gap: 8px;
}

/* v9: floated hero image should sit on the article rhythm (baseline grid + gutter). */
.demo-v9 .article figure.float-right{
  margin: 2px 0 10px 16px;
}
.demo-v9 .article figure.float-right img{
	  display:block;
	  width:100%;
	  height: auto;
	  object-fit: contain;
	  border-radius: 14px;
}
.demo-v9 .article figure.float-right figcaption{
  margin-top: 8px;
}

/* v9: hero image centered in the column gutter (InDesign-like). */
.demo-v9 .article figure.ggq-hero-between{
  margin: 14px 0;
}
.demo-v9 .ggq-article-page > figure.ggq-hero-between[hidden],
.demo-v9 .ggq-article-page.ggq-two-col:not(.ggq-has-between-hero) > figure.ggq-hero-between{
  display:none;
}
.demo-v9 .article figure.ggq-hero-between img{
  display:block;
  width:100%;
  height: 230px;
  object-fit: cover;
  object-position: center;
	  border-radius: 14px;
}
.demo-v9 .article figure.ggq-hero-between img[hidden]{
  display:none !important;
}
.demo-v9 .article figure.ggq-hero-between .ggq-hero-video{
  display:block;
  position:relative;
  width:100%;
  height:230px;
  --ggq-video-frame-h: 230px;
  overflow:hidden;
  border-radius:14px;
  background:#000;
}
.demo-v9 .article figure.ggq-hero-between .ggq-hero-video[hidden]{
  display:none !important;
}
.demo-v9 .article figure.ggq-hero-between .ggq-hero-video iframe{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  min-width:calc(var(--ggq-video-frame-h) * 1.7777778);
  height:100%;
  min-height:100%;
  transform:translate(-50%, -50%);
  display:block;
  border:0;
  background:#000;
}
.demo-v9 .article figure.ggq-hero-between figcaption{
	  margin-top: 8px;
}

/* v9: blog post media blocks (sanitized HTML, auto layout). */
.demo-v9 .ggq-media{
  margin: 14px 0;
  break-inside: avoid;
}
.demo-v9 .ggq-media img{
  display:block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: color-mix(in srgb, var(--border) 22%, transparent);
}
.demo-v9 .ggq-media--span-all{
  column-span: all;
}
.demo-v9 .ggq-media--logo{
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}
.demo-v9 .ggq-media--mention img{
  height: 160px;
  object-fit: cover;
}
.demo-v9 .ggq-media--mention.ggq-media--person{
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}
.demo-v9 .ggq-media--mention.ggq-media--person img{
  height: 220px;
  object-fit: contain;
}
.demo-v9 .ggq-media--mention figcaption a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.demo-v9 .ggq-media--mention figcaption a:hover{text-decoration-thickness: 2px;}
.demo-v9 .ggq-media.ggq-dest-hero-inline img{
  height: 210px;
  object-fit: cover;
}
.demo-v9 .ggq-media.ggq-dest-hero-inline figcaption{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}

/* v9: magazine-like floats inside full articles (no multi-column newspaper flow). */
.demo-v9 .ggq-media--float-right,
.demo-v9 .ggq-media--float-left{
  break-inside: avoid;
}
.demo-v9 .ggq-media--fixed-left{
  float:left;
  width: clamp(190px, 32%, 260px);
  margin: 6px 18px 12px 0;
  clear: both;
  break-inside: avoid;
  shape-outside: inset(0 round 14px);
}

.demo-v9 .ggq-article-page > h2,
.demo-v9 .ggq-article-page > h3,
.demo-v9 .ggq-article-page > blockquote,
.demo-v9 .ggq-article-page > ul,
.demo-v9 .ggq-article-page > ol,
.demo-v9 .ggq-article-page > [data-article-related]{
  clear: both;
}

@media (min-width: 1024px){
  .demo-v9 .ggq-article-page > figure.ggq-hero-between{
    float: none;
    width: auto;
    margin: 6px 0 14px;
    shape-outside: none;
    column-span: all;
    break-inside: avoid;
  }

  .demo-v9 .ggq-article-page > figure.ggq-hero-between figcaption{
    text-align: left;
  }

  .demo-v9 .ggq-article-page > figure.ggq-hero-between img{
    height: 230px;
    object-fit: cover;
  }

  .demo-v9 .ggq-article-page figure.ggq-media--float-right{
    float: right;
    width: clamp(190px, 32%, 260px);
    margin: 6px 0 12px 18px;
    clear: both;
    shape-outside: inset(0 round 14px);
  }

  .demo-v9 .ggq-article-page figure.ggq-media--float-left{
    float: left;
    width: clamp(190px, 32%, 260px);
    margin: 6px 18px 12px 0;
    clear: both;
    shape-outside: inset(0 round 14px);
  }

  .demo-v9 .ggq-article-page figure.ggq-media--square{
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }

  .demo-v9 .ggq-article-page figure.ggq-media--square img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 1023px){
  .demo-v9 .ggq-article-page > figure.ggq-hero-between{
    float: none;
    width: auto;
    margin: 14px 0;
    shape-outside: none;
  }

  .demo-v9 .ggq-article-page > figure.ggq-hero-between img{
    height: 230px;
    object-fit: cover;
  }

  .demo-v9 .ggq-article-page figure.ggq-media--float-right,
  .demo-v9 .ggq-article-page figure.ggq-media--float-left,
  .demo-v9 .ggq-article-page figure.ggq-media--fixed-left{
    float: none;
    width: auto;
    margin: 14px 0;
    clear: both;
    shape-outside: none;
  }

  .demo-v9 .ggq-article-page figure.ggq-media--square{
    aspect-ratio: auto;
  }

  .demo-v9 .ggq-article-page figure.ggq-media--square img{
    height: auto;
    object-fit: cover;
  }
}
.demo-v9 .ggq-gallery{
  display:grid;
  gap: 10px;
}
.demo-v9 .ggq-gallery--cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.demo-v9 .ggq-gallery--cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 820px){
  .demo-v9 .ggq-gallery--cols-3{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.demo-v9 .ggq-dest-gallery > figure{margin:0;}
.demo-v9 .ggq-dest-gallery img{
  display:block;
  width:100%;
  height: 180px;
  object-fit: cover;
  border-radius: 14px;
  background: color-mix(in srgb, var(--border) 22%, transparent);
}
.demo-v9 .ggq-dest-gallery figcaption{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}
@media (max-width: 820px){
  .demo-v9 .ggq-dest-gallery img{height: 150px;}
}

@media (max-width: 820px){
  .demo-v9 .article figure.float-right{margin: 10px 0;}
  .demo-v9 .article figure.float-right img{height: auto;}
}

@media (min-width: 1024px){
  .demo-v9 main .article.ggq-two-col{
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }

  .demo-v9 .article.ggq-two-col{
    column-count: 2;
    column-gap: 44px;
    column-fill: balance;
  }

  .demo-v9 .ggq-dest-intro-body.article.ggq-two-col,
  .demo-v9 .ggq-est-intro-body.article.ggq-two-col{
    column-fill: balance;
  }

  .demo-v9 .article.ggq-two-col > .article-head{
    column-span: all;
  }

  .demo-v9 .article.ggq-two-col > .breadcrumbs,
  .demo-v9 .article.ggq-two-col > h1,
  .demo-v9 .article.ggq-two-col > .meta,
  .demo-v9 .article.ggq-two-col > .article-dests,
  .demo-v9 .article.ggq-two-col > .article-standfirst,
  .demo-v9 .article.ggq-two-col > p.lead,
  .demo-v9 .article.ggq-two-col > figure.ggq-hero-between,
  .demo-v9 .article.ggq-two-col > [data-article-related]{
    column-span: all;
  }

  .demo-v9 .article.ggq-two-col > h2,
  .demo-v9 .article.ggq-two-col > figure,
  .demo-v9 .article.ggq-two-col > .card,
  .demo-v9 .article.ggq-two-col > ul,
  .demo-v9 .article.ggq-two-col > ol{
    break-inside: avoid;
  }

  .demo-v9 .article.ggq-two-col > figure.ggq-dest-hero-inline{
    break-before: auto;
  }
}

/* GGQ: callout blocks inside destination/article intros. */
.demo-v9 .article > p.ggq-callout{
  text-align: left;
  padding: 0.9em 1em;
  border-left: 5px solid var(--ggq-dropcap-color);
  background: color-mix(in srgb, var(--ggq-dropcap-color) 8%, transparent);
  border-radius: 14px;
}

.demo-v9 .article > p.ggq-callout strong{
  font-family: var(--ggq-font-display);
  font-weight: 750;
}

/* Never apply the dropcap treatment inside callouts. */
.demo-v9 .article.dropcap > p.ggq-callout::first-letter{
  float:none;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  text-transform: inherit;
  font-family: inherit;
}
