/* Fix footer to bottom of page for modular_building.html */
.page-footer {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background: #fff;
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
    padding-bottom: 4px;
}
.box28 {
    grid-area: box28;
    background-color: rgb(255, 255, 255);
}
.box29 {
    grid-area: box29;
    background-color: rgb(255, 255, 255);
}
.box30 {
    grid-area: box30;
    background-color: rgb(255, 255, 255);
}
.box31 {
    grid-area: box31;
    background-color: rgb(255, 255, 255);
}
.box32 {
    grid-area: box32;
    background-color: rgb(255, 255, 255);
}
.box33 {
    grid-area: box33;
    background-color: rgb(255, 255, 255);
}
.box34 {
    grid-area: box34;
    background-color: rgb(255, 255, 255);
}
/* Vertically center content in storyboard.html box10 */
#theme-storyboard .box10 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
/* Highlighted text for theme.html */
.highlight {
    background-color: #ffe066;
    padding: 0.1em 0.4em;
    border-radius: 0.2em;
}
/* Junior and Senior response styling for theme.html */
.junior-response {
    background: #e3f2fd !important;
    color: #222 !important;
    border-radius: 8px;
    padding: 1em;
    margin-bottom: 1.5em;
    font-weight: bold;
    display: block;
}
.senior-response {
    background: #e0f7fa !important;
    color: #222 !important;
    border-radius: 8px;
    padding: 1em;
    font-weight: bold;
    display: block;
}
/* Theme development question and example highlighting */
.theme-question {
    font-family: 'JosefinSans', sans-serif;
    font-size: 2em;
    color: #b0b0b0;
    font-weight: 500;
    margin-bottom: 0.5em;
    line-height: 1.1;
}
.theme-advanced {
    font-family: 'Quicksand-VariableFont_wght', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, "Noto Sans", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 1.1em;
    color: #222;
    margin-top: 0.5em;
    margin-bottom: 2em;
    border-radius: 8px;
    padding: 1em;
}
/* New container for theme.html with even columns from box1 and box2 down */
.container-theme-even {
    display: grid;
    height: auto;
    grid-template-columns: 56px 320px auto auto auto auto auto 56px;
    grid-template-rows: 24px 200px repeat(9, 1fr);
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        ". . . . . . . ."
        ". logo header header header header header ."
        ". sidebar box1 box1 box1 box2 box2 ."
        ". sidebar box3 box3 box3 box4 box4 ."
        ". sidebar box5 box5 box5 box6 box6 ."
        ". sidebar box7 box7 box7 box8 box8 ."
        ". sidebar box9 box9 box9 box10 box10 ."
        ". sidebar box11 box11 box11 box12 box12 ."
        ". sidebar box13 box13 box13 box14 box14 ."
        ". sidebar box15 box15 box15 box16 box16 .";
}
html, body {
    height: 100%;
    margin: 0;
    font-family: 'Quicksand-VariableFont_wght', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, "Noto Sans", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* Prevent flash of unfiltered content - hide nav items initially when in course mode */
html.nav-loading .sidebar nav ul li {
    opacity: 0;
}

html:not(.nav-loading) .sidebar nav ul li {
    opacity: 1;
    transition: opacity 0.05s ease-out;
}

@font-face {
    font-family: 'JosefinSans';
    src: url('../fonts/JosefinSans-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'JosefinSans-Italic';
    src: url('../fonts/JosefinSans-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

/* Canonical pixel sizes for row1, row2, row3, col1, col2, col6 */
:root {
    --row1: 24px;
    --row2: 100px;
    --row3: 320px;
    --col1: 56px;
    --col2: 320px;
    --col6: 56px;
}

.container {
    display: grid;
    height: 100vh;
    grid-template-columns: 56px 320px 3fr 3fr 3fr 56px;
    grid-template-rows: 24px 200px 320px 0.5fr 1.6875fr 0.5fr;
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . ."
    ". logo header header header ."
    ". sidebar title box1 box1 ."
    ". sidebar text1 text2 text3 ."
    ". sidebar box4 box5 box6 ."
    ". sidebar text4 text5 text6 .";
}

.container2 {
    display: grid;
    grid-template-columns: 56px 320px minmax(0,1fr) minmax(0,1fr) 56px;
    grid-template-rows: 24px 200px auto auto;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    ". . . . ."
    ". logo header header ."
    ". sidebar text1 text2 ."
    ". sidebar text3 text4 .";
}

.access-notice {
    margin: 12px 16px;
    padding: 18px 16px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #dbe2ef;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.access-notice h2 {
    margin: 0 0 10px;
    font-family: 'JosefinSans', sans-serif;
    font-size: 1.3rem;
}

.access-notice p {
    margin: 0 0 10px;
    line-height: 1.5;
}

.access-notice p:last-child {
    margin-bottom: 0;
}

.container3 {
    display: grid;
    height: 100vh;
    grid-template-columns: 56px 320px 3fr 3fr 3fr 56px;
    grid-template-rows: 24px 200px 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . ."
    ". logo header header header ."
    ". sidebar text1 text5 text9 ."
    ". sidebar text1 text6 text10 ."
    ". sidebar text2 text7 text11 ."
    ". sidebar text2 text8 text12 .";
}

.containerprojects {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 56px 320px auto auto auto 56px;
    grid-template-rows: 24px 200px auto auto auto auto auto auto auto auto auto auto auto auto;
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . ."
    ". logo header header header ."
    ". sidebar text1 video1 ."
    ". sidebar text2 video2 ."
    ". sidebar text3 video3 ."
    ". sidebar text4 video4 ."
    ". sidebar text5 video5 ."
    ". sidebar text6 video6 ."
    ". sidebar text7 video7 ."
    ". sidebar text8 video8 ."
    ". sidebar text9 video9 ."
    ". sidebar text10 video10 ."
    ". sidebar text11 video11 ."
    ". sidebar text12 video12 .";
}

.container4 {
    display: grid;
    height: 100vh;
    grid-template-columns: 56px 320px 3fr 3fr 3fr 56px;
    grid-template-rows: 24px 200px 320px 1fr 1fr 1fr;
    gap: 0px 0px; 
  grid-template-areas: 
    ". . . . . ."
    ". logo header header header ."
    ". sidebar text1 text5 text9 ."
    ". sidebar text1 text6 text10 ."
    ". sidebar text3 text7 text11 ."
    ". sidebar text4 text8 text12 .";
}

.container5 {
    display: grid;
    height: 100vh;
    grid-template-columns: 56px 320px 3fr 3fr 3fr 56px;
    grid-template-rows: 24px 200px 1fr 1fr 1fr;
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . ."
    ". logo header header header ."
    ". sidebar box1 box2 box3 ."
    ". sidebar box4 box5 box6 ."
    ". sidebar box7 box8 box9 .";
}

.container6 {
    display: grid;
    height: auto;
    grid-template-columns: 56px 320px 3fr 3fr 56px;
        grid-template-rows: 24px 200px repeat(39, auto);
    gap: 0px 0px;
  grid-auto-flow: row;
    grid-template-areas:
    ". . . . . "
    ". logo header header ."
    ". sidebar box1 box2 ."
    ". sidebar box3 box4 ."
    ". sidebar box5 box6 ."
    ". sidebar box7 box8 ."
    ". sidebar box9 box10 ."
    ". sidebar box11 box12 ."
    ". sidebar box13 box14 ."
    ". sidebar box15 box16 ."
    ". sidebar box17 box18 ."
    ". sidebar box19 box20 ."
    ". sidebar box21 box22 ."
    ". sidebar box23 box24 ."
    ". sidebar box25 box26 ."
    ". sidebar box27 box28 ."
    ". sidebar box29 box30 ."
    ". sidebar box31 box32 ."
    ". sidebar box33 box34 ."
    ". sidebar box35 box36 ."
    ". sidebar box37 box38 ."
    ". sidebar box39 box40 ."
    ". sidebar box41 box42 ."
    ". sidebar box43 box44 ."
    ". sidebar box45 box46 ."
    ". sidebar box47 box48 ."
    ". sidebar box49 box50 ."
    ". sidebar box51 box52 ."
    ". sidebar box53 box54 ."
    ". sidebar box55 box56 ."
    ". sidebar box57 box58 ."
    ". sidebar box59 box60 ."
    ". sidebar box61 box62 ."
    ". sidebar box63 box64 ."
    ". sidebar box65 box66 ."
    ". sidebar box67 box68 ."
    ". sidebar box69 box70 ."
    ". sidebar box71 box72 ."
    ". sidebar box73 box74 ."
    ". sidebar box75 box76 ."
    ". sidebar box77 box78 .";
}

.container7 {
    display: grid;
    height: auto;
    grid-template-columns: 56px 320px 3fr 3fr 3fr 3fr 3fr 56px;
    grid-template-rows: 24px 200px auto auto auto auto auto auto auto auto auto auto auto auto;
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . . . ."
    ". logo header header header header header ."
    ". sidebar box1 box1 box1 box2 box2 ."
    ". sidebar box3 box3 box3 box4 box4 ."
    ". sidebar box5 box5 box5 box6 box6 ."
    ". sidebar box7 box7 box7 box8 box8 ."
    ". sidebar box9 box9 box9 box10 box10 ."
    ". sidebar box11 box11 box11 box12 box12 ."
    ". sidebar box13 box13 box13 box14 box14 ."
    ". sidebar box15 box15 box15 box16 box16 ."
    ". sidebar box17 box17 box17 box18 box18 ."
    ". sidebar box19 box19 box19 box20 box20 ."
    ". sidebar box21 box21 box21 box22 box22 ."
    ". sidebar box23 box23 box23 box24 box24 .";
}

.container5050 {
    display: grid;
    height: auto;
    grid-template-columns: 56px 320px 3fr 3fr 3fr 3fr 56px;
    grid-template-rows: 24px 200px auto auto auto auto auto auto auto auto auto auto auto auto;
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . . ."
    ". logo header header header header ."
    ". sidebar box1 box1 box2 box2 ."
    ". sidebar box3 box3 box4 box4 ."
    ". sidebar box5 box5 box6 box6 ."
    ". sidebar box7 box7 box8 box8 ."
    ". sidebar box9 box9 box10 box10 ."
    ". sidebar box11 box11 box12 box12 ."
    ". sidebar box13 box13 box14 box14 ."
    ". sidebar box15 box15 box16 box16 ."
    ". sidebar box17 box17 box18 box18 ."
    ". sidebar box19 box19 box20 box20 ."
    ". sidebar box21 box21 box22 box22 ."
    ". sidebar box23 box23 box24 box24 .";
}

.container25252525 {
    display: grid;
    height: auto;
    grid-template-columns: 56px 320px 3fr 3fr 3fr 3fr 56px;
    grid-template-rows: 24px 200px auto auto auto auto auto auto auto auto auto auto auto auto;
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . . ."
    ". logo header header header header ."
    ". sidebar box1 box2 box3 box4 ."
    ". sidebar box5 box6 box7 box8 ."
    ". sidebar box9 box10 box11 box12 ."
    ". sidebar box13 box14 box15 box16 ."
    ". sidebar box17 box18 box19 box20 ."
    ". sidebar box21 box22 box23 box24 .";
}

.container10 {
    display: grid;
    height: auto;
    grid-template-columns: 56px 320px 3fr 3fr 3fr 56px;
    grid-template-rows: 24px 200px auto auto auto auto auto auto auto auto;
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . . ."
    ". logo header header header ."
    ". sidebar box1 box2 box3 ."
    ". sidebar img1 img2 img3 ."
    ". sidebar box4 box5 box6 ."
    ". sidebar img4 img5 img6 ."
    ". sidebar box7 box8 box9 ."
    ". sidebar box10 box11 box12 ."
    ". sidebar box13 box14 box15 ."
    ". sidebar box18 img13 img14 .";
}

.container9 {
        display: grid;
        height: auto;
        grid-template-columns: 56px 320px 3fr 3fr 3fr 3fr 3fr 56px;
        grid-template-rows: auto auto auto auto auto auto auto auto;
        gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        ". . box1 img1 img1 img2 img2 ."
        ". . box1 box2 box3 box4 box5 ."
        ". . box6 img3 img3 img4 img4 ."
        ". . box6 box7 box7 box8 box8 ."
        ". . box11 img5 img5 img6 img6 ."
        ". . box11 box12 box13 box14 box15 ."
        ". . box16 img7 img7 img8 img8 ."
        ". . box16 box17 box18 box19 box20 ."
        ". . box21 img9 img9 img10 img10 ."
        ". . box21 box22 box23 box24 box25 .";
}

.container8 {
    display: grid;
    height: auto;
    grid-template-columns: 56px 320px 3fr 3fr 3fr 3fr 3fr 56px;
    grid-template-rows: repeat(5, 1fr);
    gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . box1 box2 box3 box4 box5 ."
    ". . box6 box7 box8 box9 box10 ."
    ". . box11 box12 box13 box14 box15 ."
    ". . box16 box17 box18 box19 box20 ."
    ". . box21 box22 box23 box24 box25 .";
}

.container-videogame {
    display: grid;
    height: 100vh;
    overflow: hidden;
    grid-template-columns: 160px 1fr;
    grid-template-rows: 44px 1fr;
    gap: 0;
    grid-template-areas:
        "logo embed"
        "nav  embed";
}

.container-videogame .sidebar {
    grid-area: nav;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    background: #ffffff;
}

.container-videogame .sidebar nav,
.container-videogame .sidebar nav ul {
    width: 100%;
    margin: 0;
    padding: 0;
}

.container-videogame .sidebar nav ul li {
    display: block;
    width: 100%;
    margin: 0;
}

.container-videogame .sidebar nav ul li a {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    padding: 0;
    white-space: nowrap;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1.1;
}

.container-videogame .logo {
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.container-videogame .logo img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.vtitle {
    grid-area: vtitle;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    font-weight: 700;
    color: #475569;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    white-space: nowrap;
    letter-spacing: 0.04em;
    user-select: none;
    font-family: 'Bebas Neue', system-ui, sans-serif;
    padding: 0;
    line-height: 80px;
}

.embed-area {
    grid-area: embed;
    overflow: hidden;
}

.logo { 
    grid-area: logo;
    color: #bebebe;
    background-color: rgb(255, 255, 255); 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 2em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    max-width: 320px;
}

.logo a {
    color: inherit;
    text-decoration: none;
}

.logo img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

/* Subtle "return to top" button */
.scroll-to-top {
    background: transparent;
    border: none;
    color: #bebebe;
    font-size: 36px;
    cursor: pointer;
    padding: 0;
    opacity: 0.5;
    transition: opacity 200ms ease;
}
.scroll-to-top:hover {
    opacity: 1;
}
.scroll-to-top:focus {
    outline: 1px solid rgba(0,0,0,0.1);
    border-radius: 3px;
}

.sidebar { 
    grid-area: sidebar;
    background-color: #ffffff; /* richer purple for contrast */
    color: #000000;
    padding: 20px;
}

.sidebar nav ul { list-style: none; padding: 0; margin: 8px 0 0 0; }
.sidebar nav li { margin: 6px 0; }
.sidebar nav h2 {
    margin: 0 0 8px 0;
    padding: 6px 8px;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar nav a {
    color: #000000;
    text-decoration: none;
    display: block;
    /* leave space on the left for the active indicator */
    padding: 6px 8px 6px 14px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.9);
    background: #8f0cbb; /* dark grey interior */
    position: relative;
    font-weight: 300;
    font-style: normal;
    font-size: 1.5em;
}
.sidebar nav a:hover { 
    background: #3a3a3a; 
    color: #000000;
}
.sidebar nav a[data-color="in"] { background: rgba(254, 5, 162, 0.45); }
.sidebar nav a[data-color="introduction"] { background: rgba(56, 118, 29, 0.45); }
.sidebar nav a[data-color="research"] { background: rgba(103, 78, 167, 0.45); }
.sidebar nav a[data-color="thematic"] { background: rgba(11, 83, 148, 0.45); }
.sidebar nav a[data-color="design"] { background: rgba(12, 179, 67, 0.45); }
.sidebar nav a[data-color="dvc"] { background: rgba(17, 85, 204, 0.45); }
.sidebar nav a[data-color="comp"] { background: rgba(40, 147, 131, 0.75); }
.sidebar nav a[data-color="documentation"] { background: rgba(116, 27, 71, 0.65); color: white; }
.sidebar nav a[data-color="technical"] { background: rgba(230, 145, 56, 0.45); }
.sidebar nav a[data-color="y9dt"] { background: rgba(230, 144, 56, 0.45); }
.sidebar nav a[data-color="y10dt"] { background: rgba(241, 194, 51, 0.45); }
.sidebar nav a[data-color="y11dt"] { background: rgba(216, 234, 211, 0.45); }
.sidebar nav a[data-color="y11dtdt"] { background: rgba(216, 234, 211, 0.45); }
.sidebar nav a[data-color="y11dtmp"] { background: rgba(216, 234, 211, 0.45); }
.sidebar nav a[data-color="y12dt"] { background: rgba(164, 194, 244, 0.45); }
.sidebar nav a[data-color="y13dt"] { background: rgba(142, 124, 195, 0.45); }
.sidebar nav a[data-color="y10arc"] { background: rgba(241, 194, 51, 0.45); }
.sidebar nav a[data-color="y11dvc"] { background: rgba(182, 215, 168, 0.45); }
.sidebar nav a[data-color="y12dvc"] { background: rgba(108, 158, 235, 0.45); }
.sidebar nav a[data-color="y13dvc"] { background: rgba(103, 78, 166, 0.45); }
.sidebar nav a[data-color="eval"] { background: rgba(169, 12, 88, 0.893); color: white; }


/* Active link highlight: light green background for the current page */
.sidebar nav a.active,
.sidebar nav a[aria-current="page"] {
    background: #f2ff02; /* pale light green */
    color: #053607; /* dark green for contrast */
    border-color: rgba(0,0,0,0.08);
}
.sidebar nav a.active:hover,
.sidebar nav a[aria-current="page"]:hover {
    background: #fe0295;
}

/* left-side bullet / indicator for active link */
.sidebar nav a.active::before,
.sidebar nav a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 1px; /* sits inside the left padding */
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 40%;
    background: #fe0295; /* brighter light-green */
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;
}

.sidebar nav a.active::after,
.sidebar nav a[aria-current="page"]::after {
    /* subtle outline on the left to increase contrast on pale backgrounds */
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 100%;
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(255, 221, 0, 0.08) inset;
    pointer-events: none;
}

.header { 
    grid-area: header;
    background-color: rgb(255, 255, 255);
    padding: 12px 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.header h1 {
    text-align: center;
    width: 100%;
    margin: 0;
    font-family: 'JosefinSans-Italic';
    font-weight: 600;
    font-style: italic;
}

.header h1 u {
    text-decoration-color: #f2ff02;
}

.header > .header-text {
    display: block;
    line-height: 1;
        white-space: nowrap;
        transition: font-size 220ms cubic-bezier(.2,.9,.3,1);
        will-change: font-size;
}

.title {
    grid-area: title;
    background: #ffffff;
    font-family: 'JosefinSans';
    font-weight: 300;
    color: #000000;
    align-items: center;
    justify-content: left;
    display: flex;
    font-size: clamp(1rem, 2vw + 1rem, 2rem); 
}

.img {
    text-align: center;
}

/* Shared styling for the new functional zoning tables in box9 and box10. */
.zoning-table {
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
    line-height: 1.5;
    margin-top: 1em;
}

.zoning-table th {
    padding: 12px 16px;
    border: 1px solid #e4e4e7;
    background-color: #f4f4f5;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
}

.zoning-table th h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.zoning-table td {
    padding: 12px 16px;
    border: 1px solid #e4e4e7;
    vertical-align: top;
}

.zoning-table td:first-child {
    width: 34%;
    background-color: #fafafa;
}

#box9 .zoning-table td p,
#box10 .zoning-table td p,
#box11 .zoning-table td p,
#box12 .zoning-table td p,
#box13 .zoning-table td p,
#box14 .zoning-table td p,
#box15 .zoning-table td p,
#box16 .zoning-table td p {
    margin: 0;
}

#box9 .zoning-table td:first-child,
#box10 .zoning-table td:first-child,
#box11 .zoning-table td:first-child,
#box12 .zoning-table td:first-child,
#box13 .zoning-table td:first-child,
#box14 .zoning-table td:first-child,
#box15 .zoning-table td:first-child,
#box16 .zoning-table td:first-child {
    text-align: center;
    vertical-align: middle;
    width: 34%;
}

#box9 .zoning-table td:first-child h2,
#box10 .zoning-table td:first-child h2,
#box11 .zoning-table td:first-child h2,
#box12 .zoning-table td:first-child h2,
#box13 .zoning-table td:first-child h2,
#box14 .zoning-table td:first-child h2,
#box15 .zoning-table td:first-child h2,
#box16 .zoning-table td:first-child h2 {
    margin: 0;
    font-family: 'JosefinSans';
    font-weight: 300;
    line-height: 1.5;
    text-align: center;
}

.zoning-table .zoning-table-gap td {
    padding: 0;
    border: none;
    height: var(--gap-height, 24px);
    background: transparent;
}

/* Site-wide continuity styling for content tables in box regions. */
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    font-family: sans-serif !important;
    line-height: 1.5 !important;
    margin-top: 1em !important;
    margin-bottom: 10px !important;
}

[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tbody > tr > td:not([colspan]):not(:first-child),
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tr > td:not([colspan]):not(:first-child),
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tbody > tr > th:not([colspan]):not(:first-child),
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tr > th:not([colspan]):not(:first-child) {
    padding: 12px !important;
    border: 1px solid #e4e4e7 !important;
    background: #fff !important;
    vertical-align: top;
}

[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tbody > tr > td:first-child:not([colspan]),
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tbody > tr > th:first-child:not([colspan]),
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tr > td:first-child:not([colspan]),
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tr > th:first-child:not([colspan]) {
    padding: 12px 14px !important;
    border: 1px solid #e4e4e7 !important;
    background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
    vertical-align: top;
}

[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tbody > tr > td:first-child:not([colspan]) h1,
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tbody > tr > td:first-child:not([colspan]) h2,
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tbody > tr > td:first-child:not([colspan]) h3,
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tbody > tr > th:first-child:not([colspan]) h1,
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tbody > tr > th:first-child:not([colspan]) h2,
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tbody > tr > th:first-child:not([colspan]) h3,
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tr > td:first-child:not([colspan]) h1,
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tr > td:first-child:not([colspan]) h2,
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tr > td:first-child:not([colspan]) h3,
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tr > th:first-child:not([colspan]) h1,
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tr > th:first-child:not([colspan]) h2,
[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) > tr > th:first-child:not([colspan]) h3 {
    margin: 0;
    line-height: 1.35;
    font-size: 1.02em;
    color: #18181b;
}

[class^="container"] > [id^="box"] > table:not(.zoning-table):not(.brief-points) p {
    margin: 0;
}

/* Distinct title colors for each section in box9 and box10 */
#box9 .zoning-table tr.title-row-1 th { background-color: #bfdbfe; }
#box9 .zoning-table tr.title-row-2 th { background-color: #d4d4d8; }
#box9 .zoning-table tr.title-row-3 th { background-color: #bbf7d0; }
#box9 .zoning-table tr.title-row-4 th { background-color: #fef08a; }
#box9 .zoning-table tr.title-row-5 th { background-color: #e9d5ff; }
#box9 .zoning-table tr.title-row-6 th { background-color: #fed7aa; }

#box10 .zoning-table tr.title-row-1 th { background-color: #fecaca; }
#box10 .zoning-table tr.title-row-2 th { background-color: #fbcfe8; }
#box10 .zoning-table tr.title-row-3 th { background-color: #fef08a; }
#box10 .zoning-table tr.title-row-4 th { background-color: #e9d5ff; }
#box10 .zoning-table tr.title-row-5 th { background-color: #fed7aa; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .logo > .logo-text,
    .header > .header-text {
        transition: none !important;
        will-change: auto;
    }
}

.box1 { 
    grid-area: box1;
    background-color: rgb(255, 255, 255);
}

.box2 { 
    grid-area: box2;
    background-color: rgb(255, 255, 255);
}

.box3 { 
    grid-area: box3;
    background-color: rgb(255, 255, 255);
}

.box4 { 
    grid-area: box4;
    background-color: rgb(255, 255, 255);
}

.box5 { 
    grid-area: box5;
    background-color: rgb(255, 255, 255);
}

.box6 { 
    grid-area: box6;
    background-color: rgb(255, 255, 255);
}

.box7 { 
    grid-area: box7;
    background-color: rgb(255, 255, 255);
}

.box8 { 
    grid-area: box8;
    background-color: rgb(255, 255, 255);
}

.box9 { 
    grid-area: box9;
    background-color: rgb(255, 255, 255);
}

.box10 { 
    grid-area: box10;
    background-color: rgb(255, 255, 255);
}

.box11 { 
    grid-area: box11;
    background-color: rgb(255, 255, 255);
}

.box12 { 
    grid-area: box12;
    background-color: rgb(255, 255, 255);
}

.box13 { 
    grid-area: box13;
    background-color: rgb(255, 255, 255);
}

.box14 { 
    grid-area: box14;
    background-color: rgb(255, 255, 255);
}

.box15 { 
    grid-area: box15;
    background-color: rgb(255, 255, 255);
}

.box16 { 
    grid-area: box16;
    background-color: rgb(255, 255, 255);
}

.box17 { 
    grid-area: box17;
    background-color: rgb(255, 255, 255);
}

.box18 { 
    grid-area: box18;
    background-color: rgb(255, 255, 255);
}

.box19 { 
    grid-area: box19;
    background-color: rgb(255, 255, 255);
}

.box20 { 
    grid-area: box20;
    background-color: rgb(255, 255, 255);
}

.box21 { 
    grid-area: box21;
    background-color: rgb(255, 255, 255);
}

.box22 { 
    grid-area: box22;
    background-color: rgb(255, 255, 255);
}

.box23 { 
    grid-area: box23;
    background-color: rgb(255, 255, 255);
}

.box24 { 
    grid-area: box24;
    background-color: rgb(255, 255, 255);
}

.box25 { 
    grid-area: box25;
    background-color: rgb(255, 255, 255);
}

.box26 { 
    grid-area: box26;
    background-color: rgb(255, 255, 255);
}

.box27 { 
    grid-area: box27;
    background-color: rgb(255, 255, 255);
}

.box28 { 
    grid-area: box28;
    background-color: rgb(255, 255, 255);
}

#box35 { grid-area: box35; background-color: rgb(255, 255, 255); }
#box36 { grid-area: box36; background-color: rgb(255, 255, 255); }
#box37 { grid-area: box37; background-color: rgb(255, 255, 255); }
#box38 { grid-area: box38; background-color: rgb(255, 255, 255); }
#box39 { grid-area: box39; background-color: rgb(255, 255, 255); }
#box40 { grid-area: box40; background-color: rgb(255, 255, 255); }
#box41 { grid-area: box41; background-color: rgb(255, 255, 255); }
#box42 { grid-area: box42; background-color: rgb(255, 255, 255); }
#box43 { grid-area: box43; background-color: rgb(255, 255, 255); }
#box44 { grid-area: box44; background-color: rgb(255, 255, 255); }
#box45 { grid-area: box45; background-color: rgb(255, 255, 255); }
#box46 { grid-area: box46; background-color: rgb(255, 255, 255); }
#box47 { grid-area: box47; background-color: rgb(255, 255, 255); }
#box48 { grid-area: box48; background-color: rgb(255, 255, 255); }
#box49 { grid-area: box49; background-color: rgb(255, 255, 255); }
#box50 { grid-area: box50; background-color: rgb(255, 255, 255); }
#box51 { grid-area: box51; background-color: rgb(255, 255, 255); }
#box52 { grid-area: box52; background-color: rgb(255, 255, 255); }
#box53 { grid-area: box53; background-color: rgb(255, 255, 255); }
#box54 { grid-area: box54; background-color: rgb(255, 255, 255); }
#box55 { grid-area: box55; background-color: rgb(255, 255, 255); }
#box56 { grid-area: box56; background-color: rgb(255, 255, 255); }
#box57 { grid-area: box57; background-color: rgb(255, 255, 255); }
#box58 { grid-area: box58; background-color: rgb(255, 255, 255); }
#box59 { grid-area: box59; background-color: rgb(255, 255, 255); }
#box60 { grid-area: box60; background-color: rgb(255, 255, 255); }
#box61 { grid-area: box61; background-color: rgb(255, 255, 255); }
#box62 { grid-area: box62; background-color: rgb(255, 255, 255); }
#box63 { grid-area: box63; background-color: rgb(255, 255, 255); }
#box64 { grid-area: box64; background-color: rgb(255, 255, 255); }
#box65 { grid-area: box65; background-color: rgb(255, 255, 255); }
#box66 { grid-area: box66; background-color: rgb(255, 255, 255); }
#box67 { grid-area: box67; background-color: rgb(255, 255, 255); }
#box68 { grid-area: box68; background-color: rgb(255, 255, 255); }
#box69 { grid-area: box69; background-color: rgb(255, 255, 255); }
#box70 { grid-area: box70; background-color: rgb(255, 255, 255); }
#box71 { grid-area: box71; background-color: rgb(255, 255, 255); }
#box72 { grid-area: box72; background-color: rgb(255, 255, 255); }
#box73 { grid-area: box73; background-color: rgb(255, 255, 255); }
#box74 { grid-area: box74; background-color: rgb(255, 255, 255); }
#box75 { grid-area: box75; background-color: rgb(255, 255, 255); }
#box76 { grid-area: box76; background-color: rgb(255, 255, 255); }
#box77 { grid-area: box77; background-color: rgb(255, 255, 255); }
#box78 { grid-area: box78; background-color: rgb(255, 255, 255); }

/** Image boxes **/

.img1, .img2, .img3, .img4, .img5, .img6, .img7, .img8, .img9, .img10, .img11, .img12, .img13, .img14, .img15, .img16, .img17, .img18, .img19, .img20, .img21, .img22, .img23, .img24, .img25, .img26, .img27 {
    border: 5px solid rgb(255, 255, 255);
    box-sizing: border-box;
    min-height: 120px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.img1 { 
    grid-area: img1;
    background-color: rgb(255, 255, 255);
}

.img2 { 
    grid-area: img2;
    background-color: rgb(255, 255, 255);
}

.img3 { 
    grid-area: img3;
    background-color: rgb(255, 255, 255);
}

.img4 { 
    grid-area: img4;
    background-color: rgb(255, 255, 255);
}

.img5 { 
    grid-area: img5;
    background-color: rgb(255, 255, 255);
}

.img6 { 
    grid-area: img6;
    background-color: rgb(255, 255, 255);
}

.img7 { 
    grid-area: img7;
    background-color: rgb(255, 255, 255);
}

.img8 { 
    grid-area: img8;
    background-color: rgb(255, 255, 255);
}

.img9 { 
    grid-area: img9;
    background-color: rgb(255, 255, 255);
}

.img10 { 
    grid-area: img10;
    background-color: rgb(255, 255, 255);
}

.img11 { 
    grid-area: img11;
    background-color: rgb(255, 255, 255);
}

.img12 { 
    grid-area: img12;
    background-color: rgb(255, 255, 255);
}

.img13 { 
    grid-area: img13;
    background-color: rgb(255, 255, 255);
}

.img14 { 
    grid-area: img14;
    background-color: rgb(255, 255, 255);
}

.img15 { 
    grid-area: img15;
    background-color: rgb(255, 255, 255);
}

.img16 { 
    grid-area: img16;
    background-color: rgb(255, 255, 255);
}

.img17 { 
    grid-area: img17;
    background-color: rgb(255, 255, 255);
}

.img18 { 
    grid-area: img18;
    background-color: rgb(255, 255, 255);
}

.img19 { 
    grid-area: img19;
    background-color: rgb(255, 255, 255);
}

.img20 { 
    grid-area: img20;
    background-color: rgb(255, 255, 255);
}

.img21 { 
    grid-area: img21;
    background-color: rgb(255, 255, 255);
}

.img22 { 
    grid-area: img22;
    background-color: rgb(255, 255, 255);
}

.img23 { 
    grid-area: img23;
    background-color: rgb(255, 255, 255);
}

.img24 { 
    grid-area: img24;
    background-color: rgb(255, 255, 255);
}

.img25 { 
    grid-area: img25;
    background-color: rgb(255, 255, 255);
}

.img26 { 
    grid-area: img26;
    background-color: rgb(255, 255, 255);
}

.img27 { 
    grid-area: img27;
    background-color: rgb(255, 255, 255);
}
/* Add thin white borders to boxes for visual separation */
 .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10, .box11, .box12, .box13, .box14, .box15, .box16, .box17, .box18, .box19, .box20, .box21, .box22, .box23, .box24, .box25, .box26, .box27, .box28, .box29, .box30, .box31, .box32, .box33, .box34 {
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    padding: 30px;
    line-height: 1;
    text-align: justify;
    font-family: 'Quicksand-VariableFont_wght', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, "Noto Sans", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

.text1 { 
    grid-area: text1; 
    background-color: rgb(255, 255, 255);
    text-align: center;
}

.text1 li {
  height: 25px;      /* Set a fixed height */
  line-height: .5;  /* Reduce space between lines of text within the item */
  margin-bottom: .5;  /* Remove gap below the item */
  margin-left: 30px;
  padding: 0px;        /* Remove internal spacing */
}

.text1, .text2, .text3, .text4, .text5, .text6, .text7, .text8, .text9, .text10, .text11, .text12, h1 {
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 0;
    line-height: .5; 
    font-family: 'JosefinSans';
    font-weight: 300;
    justify-content: center;

}

.text2 { 
    grid-area: text2; 
    background-color: rgb(255, 255, 255);
}

.text3 { 
    grid-area: text3; 
    background-color: rgb(255, 255, 255);
}
.text4 { 
    grid-area: text4; 
    background-color: rgb(255, 255, 255);
}

.text5 { grid-area: text5; 
    background-color: rgb(255, 255, 255);
}

.text6 {
    grid-area: text6; 
    background-color: rgb(255, 255, 255);
}

.text7 { 
    grid-area: text7;
    background-color: rgb(255, 255, 255);
}

.text8 { 
    grid-area: text8;
    background-color: rgb(255, 255, 255);
}

.text9 { 
    grid-area: text9;
    background-color: rgb(255, 255, 255);

}

.text10 { 
    grid-area: text10;
    background-color: rgb(255, 255, 255);

}

.text11 { 
    grid-area: text11;
    background-color: rgb(255, 255, 255);

}

.text12 { 
    grid-area: text12;
    background-color: rgb(255, 255, 255);

}

/* Add consistent padding to text areas and ensure padding doesn't increase layout size */
.text1, .text2, .text3, .text4, .text5, .text6, .text7, .text8, .text9, .text10, .text11, .text12 {
    padding: 14px 18px;
    box-sizing: border-box;
    /* Font size: 12pt ≈ 16px for readable body text */
    font-size: 14pt;
    line-height: 1.5;
    color: #000000;
    /* Justify paragraph text and enable hyphenation for better wrapping */
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    /* Keep last line left-aligned for readability */
    text-align-last: left;
    -moz-text-align-last: left;
}



h1 { 
    margin-top: 0;
    margin-bottom: 0px;
    text-align: center;
    margin-bottom: 0px; /* add space below headings */
    line-height: 1;   /* comfortable line spacing within h2 */
    
}

h2 { 
    font-family: 'JosefinSans';
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 0px; /* add space below headings */
    line-height: 1.5;   /* comfortable line spacing within h2 */
    text-align: left;
}
h3 {
    font-family: 'JosefinSans';
    font-size: 1.12em;
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 0.5em;
    color: #222;
}

p {
    font-family: 'Quicksand-VariableFont_wght', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, "Noto Sans", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* Make box index markers very subtle (e.g., <p>10</p> at the top of each box). */
.container6 [id^="box"] > p:first-child {
    color: #d0d0d0;
    opacity: 0.55;
}

p2 {
    font-family: 'Quicksand-VariableFont_wght', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, "Noto Sans", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 1.2rem;
    padding-top: 10px; 
    display: block;
    margin-top: 10px;
}

li {
    margin-left: 30px;
    font-family: 'JosefinSans';
    font-weight: 500;
    font-style: normal;
    text-align: left;
}

.centered-item {
  align-self: center; /* This specifically centers this single item vertically */
  justify-self: center; /* Use this to center it horizontally as well, if desired */
}

img {
    padding-top: 2%;
}

/* Global figure and figcaption styling */
figure {
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 100%;
    height: auto;
}

figcaption {
    font-size: 0.9rem;
    text-align: left;
    padding: 8px;
    margin-top: 8px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Grid area assignments for containerprojects layout */
.text1 { grid-area: text1; }
.text2 { grid-area: text2; }
.text3 { grid-area: text3; }
.text4 { grid-area: text4; }
.text5 { grid-area: text5; }
.text6 { grid-area: text6; }
.text7 { grid-area: text7; }
.text8 { grid-area: text8; }
.text9 { grid-area: text9; }
.text10 { grid-area: text10; }
.text11 { grid-area: text11; }
.text12 { grid-area: text12; }

.video1 { grid-area: video1; }
.video2 { grid-area: video2; }
.video3 { grid-area: video3; }
.video4 { grid-area: video4; }
.video5 { grid-area: video5; }
.video6 { grid-area: video6; }
.video7 { grid-area: video7; }
.video8 { grid-area: video8; }
.video9 { grid-area: video9; }
.video10 { grid-area: video10; }
.video11 { grid-area: video11; }
.video12 { grid-area: video12; }

/* Video container styles for embedded YouTube videos */
.video1, .video2, .video3, .video4, .video5, .video6,
.video7, .video8, .video9, .video10, .video11, .video12 {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
}

/* Hide empty video containers */
.video1:empty, .video2:empty, .video3:empty, .video4:empty, 
.video5:empty, .video6:empty, .video7:empty, .video8:empty,
.video9:empty, .video10:empty, .video11:empty, .video12:empty {
    display: none;
}

/* Hide empty text containers */
.text1:empty, .text2:empty, .text3:empty, .text4:empty,
.text5:empty, .text6:empty, .text7:empty, .text8:empty,
.text9:empty, .text10:empty, .text11:empty, .text12:empty {
    display: none;
}

.video1 iframe, .video2 iframe, .video3 iframe, .video4 iframe, 
.video5 iframe, .video6 iframe, .video7 iframe, .video8 iframe,
.video9 iframe, .video10 iframe, .video11 iframe, .video12 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.course-component {
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
    font-family: sans-serif;
  }
  .course-component h1 {
    margin-top: 0;
    font-size: 24px; /* Adjusted size to keep it neat */
    color: #333;
  }
  .course-component table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background-color: #fff;
  }
  .course-component th, .course-component td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
    vertical-align: top;
  }
  .course-component th {
    background-color: #eee;
    font-weight: bold;
  }

  .image-container {
    display: flex;
    flex-direction: column;
    width: 100%; /* Ensures the container fills its parent div */
    height: 100%; /* Ensures the container fills its parent div (if parent height is defined) */
    padding: 0;
    border: none;
    margin: 0;
}

.imgrow {
    display: flex;
    flex: 1; /* Each row takes up an equal amount of vertical space */
    margin: 0;
    padding: 0;
    border: none;
}

.imgcell {
    flex: 1; /* Each cell takes up an equal amount of horizontal space in the row */
    padding: 0;
    border: none;
    line-height: 0; /* Helps remove extra space under images */
}

.cell img {
    width: 100%;
    height: 100%;
    display: block; /* Removes default inline image spacing issues */
    object-fit: cover; /* Ensures the image covers the entire cell while maintaining aspect ratio, cropping if necessary */
    padding: 0;
    border: none;
    margin: 0;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    }

    .video-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: none;
    border: none;
    box-shadow: none;
    overflow: hidden;
    }

    .video-wrapper iframe, 
    .video-wrapper video {
    width: 100%;
    max-width: 560px;
    height: 315px;
    border: none;
    box-shadow: none;
    object-fit: cover;
    }