@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/assignment-font-0.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/assignment-font-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/assignment-font-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Niconne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/assignment-font-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Oxygen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/assignment-font-4.ttf) format('truetype');
}
/* Layout and typography aligned to the assessment's annotated examples. */
body { background:#041e17; }
.navbar { margin:0; }
.footer { background:#000; color:#fff!important; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.6rem; padding:.6rem; }
.footer > .container { width:auto; margin:0; padding:0; }
.footer a { color:white; font-size:.8rem; }
.footer-icons { margin:0; gap:.3rem; }
.footer-icons a { width:28px; height:28px; border-radius:0; background:#1478a0; }
.footer-icons a:nth-child(-n+2) { background:#c83528; }
.sustainability-hero { min-height:0; padding:0 2vw 6vw; }
.sustainability-hero h1 { font-family:Anton,sans-serif; font-size:7vw; padding:9vw 2vw 0; background-image:linear-gradient(to right,brown,brown,yellow,white,yellow,brown,brown); -webkit-text-stroke:1px brown; line-height:1.3; }
.hero-content { max-width:none; }
.hero-description { font-family:Montserrat,sans-serif; font-size:2vw; max-width:90%; line-height:1.6; }
.topic-section { padding:3vw 2vw; }
.topic-row { max-width:none; gap:2vw; grid-template-columns:2fr 1fr 1fr; }
.topic-row-reversed { grid-template-columns:1fr 1fr 2fr; }
.topic-description h2 { font-family:Anton,sans-serif; font-size:4vw; text-shadow:2px 2px 0 navy,2px 2px 4px white; }
.topic-description p { font-family:Lato,sans-serif; font-size:1.5vw; max-width:none; }
.topic-description .image-note { font-size:1vw; }
.topic-card { max-width:none; width:100%; }
.topic-card:hover { opacity:.9; transition:2s ease; }
.card-overlay span { font:normal 1.2vw Arial; }
.home-uploads,.assignment-gallery,.assignment-form-page { background:linear-gradient(#041e17bc,#041e17bc),url('../images/sustainability-background.jpg') center/cover fixed; color:white; }
.home-uploads { padding:2vw; text-align:center; }
.home-uploads h2,.assignment-gallery-header h1,.assignment-form-page h1 { font-family:Anton,sans-serif; color:#f8bd08; font-size:4vw; text-shadow:4px 4px 0 navy,4px 4px 8px white; padding:3vw 0 2vw; text-align:center; margin:0; }
.home-uploads a,.assignment-gallery-header a,.assignment-back { color:white; }
.home-upload-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1.5vw; padding:2vw 0; }
.home-upload-tile { position:relative; aspect-ratio:1; background:linear-gradient(90deg,#888,#eee,#888); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.home-upload-tile span { color:navy; text-shadow:1px 1px white; text-align:center; padding:.3rem; position:relative; font-size:1vw; }
.home-upload-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 2s; }
.home-upload-tile:hover img,.home-upload-tile:focus-visible img { opacity:1; }
.home-upload-tile:hover span,.home-upload-tile:focus-visible span { opacity:0; }
.assignment-gallery-header { text-align:center; padding-bottom:3vw; }
.image-band { display:grid; grid-template-columns:1fr 2fr; scroll-margin-top:0; }
.image-band:nth-of-type(even) { grid-template-columns:2fr 1fr; }
.image-band:nth-of-type(even) .image-strip { order:2; }
.image-strip { display:flex; overflow:hidden; min-width:0; }
.image-strip img { flex:none; height:100%; width:auto; object-fit:cover; max-width:none; }
.image-band-info { padding:2vw; color:black; min-width:0; }
.band-orange .image-band-info { background:linear-gradient(to bottom,#ff9933,#ffe6cc,white,white); }
.band-blue .image-band-info { background:linear-gradient(to bottom,#3333ff,#ccccff,white,white); }
.image-band-info h3 { font-family:Oxygen,sans-serif; color:navy; text-shadow:2px 2px 0 white,2px 2px 4px navy; letter-spacing:7px; text-transform:uppercase; text-align:center; padding-bottom:20px; overflow-wrap:anywhere; }
.image-band-info p { font:1vw Arial; overflow-wrap:anywhere; }
.band-actions { display:flex; gap:.4rem; flex-wrap:wrap; }
.assignment-form-page { min-height:80vh; padding-bottom:2vw; }
.assignment-form-grid { width:84%; margin:auto; display:grid; grid-template-columns:2fr 1fr; gap:2vw; align-items:center; }
.assignment-form-grid label { display:block; margin-top:.3rem; }
.assignment-form-grid .form-control { border-radius:0; }
.assignment-form-grid input[readonly] { background:#ddd; }
.assignment-form-grid .btn { margin-top:.5rem; }
.assignment-form-grid small { display:block; }
.assignment-form-grid > img { width:100%; max-height:65vh; object-fit:contain; }
.assignment-back { display:block; margin:1rem 8%; }
.contact-page { background-attachment:fixed; }
.contact-title { font-family:Anton,sans-serif; font-size:7vw; -webkit-text-stroke:0; }
.contact-panel h2 { font-family:Niconne,cursive; font-size:2.5rem; color:yellow; text-shadow:2px 2px 0 navy,2px 2px 2px white; text-align:center; border-bottom:1px solid yellow; padding-bottom:.5rem; }
.contact-panel p,.contact-panel li { font:1vw Arial; line-height:1.6; text-align:center; }
.contact-panel { border:1px solid white; box-shadow:10px 10px 0 #f8f6b0; border-radius:0; }
@media (max-width:767.98px) {
 .topic-row,.topic-row-reversed { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .topic-description { grid-column:1/-1; }
 .topic-row-reversed .topic-description { order:3; }
 .topic-card { max-width:none; }
 .topic-description h2 { font-size:6vw; }
 .topic-description p { font-size:2.5vw; }
 .topic-description .image-note { font-size:2vw; }
 .card-overlay { padding:.5rem; gap:.3rem; }
 .card-overlay span { font-size:2vw; }
 .card-overlay strong { font-size:2.8vw; }
 .home-upload-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .home-upload-tile span { font-size:2vw; }
 .assignment-form-grid { grid-template-columns:1fr; gap:1.5rem; }
 .assignment-form-grid > img { max-height:none; }
 .image-band,.image-band:nth-of-type(even) { grid-template-columns:1fr; }
 .image-strip { height:160px; }
 .image-strip img { height:160px; }
 .image-band-info { padding:1.5rem; }
 .image-band-info p { font-size:14px; }
 .image-band-info h3 { font-size:1.1rem; letter-spacing:4px; }
 .assignment-gallery-header h1,.assignment-form-page h1,.home-uploads h2 { font-size:7vw; }
 .contact-panel { box-shadow:none; border:0; background:transparent; }
 .contact-content { background:#082c24d9; width:90%; }
 .contact-panel p,.contact-panel li { font-size:14px; }
 .hero-description { font-size:3vw; }
}
@media (max-width:575.98px) {
 .sustainability-hero h1 { font-size:7vw; }
 .topic-row,.topic-row-reversed { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .home-upload-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .home-upload-tile span { font-size:3vw; }
 .topic-description p { font-size:3.5vw; }
 .topic-description .image-note { font-size:2.8vw; }
 .card-title { font-size:.8rem; padding:.4rem; }
 .card-overlay span { font-size:2.8vw; }
}
@media (prefers-reduced-motion:reduce) { .home-upload-tile img { transition:none; } }
@media (min-width:768px) { .image-strip img { height:max(240px,20vw); } }
.assignment-record-page h2 { font-family:Anton,sans-serif; color:yellow; font-size:2em; text-shadow:2px 2px 0 navy,2px 2px 4px white; text-align:center; }
.assignment-record { display:grid; grid-template-columns:1fr 4fr; gap:.5rem 1rem; width:84%; margin:1.5rem auto; }
.assignment-record dd { overflow-wrap:anywhere; margin:0; }
.assignment-record-actions { width:84%; margin:auto; }
.assignment-record-actions a { color:white; }
.contact-panel details { text-align:center; }
.contact-panel summary { color:yellow; text-decoration:underline; cursor:pointer; }