/* CCAA 14th iteration: ivory surface through the statement, compact weather,
   restrained typography changes. Loaded last to override legacy declarations. */
:root { --ccaa-top-ivory: #FAF8F3; }

/* The hero section already contains the banner, the weather + three cards,
   and the association statement; keep the following education section white. */
#main > .hero {
  background: var(--ccaa-top-ivory) !important;
  padding-bottom: clamp(38px, 4.5vw, 72px) !important;
  overflow: visible;
}
#main > .hero::before,
#main > .hero::after { display:none !important; }
#main > .intro-section {background:#fff !important;}

/* WeatherWidget.io keeps its own inner layout in an iframe. We cannot change
   internal icon/text spacing directly, but can make the displayed area tighter. */
#main .weather-showcase.quick-access-row {
  grid-template-columns: minmax(266px, 285px) minmax(0,1fr);
  column-gap: 17px;
  margin-top: 17px !important;
}
#main .weather-showcase .quick-weather {
  height: 102px !important;
  max-width: 285px;
}
#main .weather-showcase .quick-weather .ccaa-weather {
  height:102px !important;
  max-width:285px !important;
  overflow:hidden;
}
#main .weather-showcase .quick-weather .ccaa-weather-title {
  height:17px !important;
  line-height:17px !important;
  margin:0 !important;
  font-size:14px !important;
}
#main .weather-showcase .quick-weather .ccaa-weather-viewport {
  height:85px !important;
  overflow:hidden;
}
#main .weather-showcase .quick-weather .ccaa-weather-scale {
  width:112% !important;
  min-height:92px !important;
  transform:translateY(-5px) scale(.86) !important;
  transform-origin:top left !important;
}
#main .weather-showcase .quick-weather .ccaa-weather-scale .weatherwidget-io,
#main .weather-showcase .quick-weather .ccaa-weather-scale iframe {
  height:92px !important;
  min-height:92px !important;
  max-height:92px !important;
}

/* Slightly larger typography for the existing quote, without making it bulky. */
#main .creative-statement {
  padding:clamp(28px,3.4vw,43px) 2px clamp(14px,2vw,24px) !important;
  gap:clamp(18px,2vw,35px) !important;
}
#main .creative-statement .signature-quotation {font-size:45px !important;}
#main .creative-statement .signature-english {
  font-size:12px !important;
  line-height:1.55 !important;
  letter-spacing:.15em !important;
}
#main .creative-statement .creative-statement-korean {
  font-size:clamp(18px,1.47vw,22px) !important;
  line-height:1.58 !important;
}

@media (max-width:1100px) and (min-width:961px) {
  #main .weather-showcase.quick-access-row {
    grid-template-columns:minmax(245px,260px) minmax(0,1fr);
    column-gap:13px;
  }
  #main .weather-showcase .quick-weather {max-width:260px;}
  #main .weather-showcase .quick-weather .ccaa-weather {max-width:260px !important;}
}
@media (max-width:960px) {
  #main .weather-showcase.quick-access-row {
    grid-template-columns:minmax(0,1fr);
    gap:12px;
  }
  #main .weather-showcase .quick-weather {max-width:285px;}
  #main .weather-showcase .quick-weather .ccaa-weather {max-width:285px !important;}
}
@media (max-width:650px) {
  #main > .hero {padding-bottom:38px !important;}
  #main .weather-showcase.quick-access-row {margin-top:14px !important; gap:10px;}
  #main .creative-statement {
    padding:26px 2px 7px !important;
    gap:9px !important;
  }
  #main .creative-statement .signature-quotation {font-size:38px !important;}
  #main .creative-statement .signature-english {font-size:10.5px !important;}
  #main .creative-statement .creative-statement-korean {
    font-size:clamp(17px,4.3vw,20px) !important;
    line-height:1.57 !important;
    text-align:left !important;
  }
}
@media (max-width:355px) {
  #main .creative-statement .creative-statement-korean{font-size:16px !important;}
}