body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin-top:3px; background-color:#ffffff; }
p { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
input { font-family: Arial, Helvetica, sans-serif; font-size: 10px; }
select { font-family: Arial, Helvetica, sans-serif; font-size: 10px; }
ul { list-style-type: square; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }

a:link { color: #c00404; }
a:visited { color: #663366; }
a:active { color: #990000; }
a:hover { color: #990000; }

/* WCAG 2.4.7 / 2.4.11 — visible, non-obscured focus indicator.
   !important is needed because brownduplicate.css contains legacy `outline:none` rules. */
a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus, summary:focus {
    outline: 3px solid #ff6600 !important;
    outline-offset: 2px !important;
    background-color: #fff8e0;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
    outline: 3px solid #ff6600 !important;
    outline-offset: 2px !important;
}

/* Brown masthead branding */
#brown-masthead {
    background: transparent;
    padding: 8px 0;
}
.brown-brand-link {
    margin: 0;
    padding: 0 16px;
}
.brown-brand-link a {
    display: inline-block;
    text-decoration: none;
}
.brown-brand-link img {
    display: block;
    height: auto;
    max-height: 77px;
}

/* WCAG 1.1.1 / 4.1.2 — visually-hidden but accessible labels */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* WCAG 2.5.8 — minimum target size 24x24 CSS px for inline interactive controls */
button, input[type="button"], input[type="submit"], input[type="reset"], select {
    min-height: 24px;
}
input[type="checkbox"], input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
}

/* WCAG 1.4.3 — improve nav link contrast on focus */
td.oldNav a:focus { color: #000; background: #fff8e0; outline: 3px solid #ff6600; }

/* WCAG 2.4.13 — ensure aria-current is visually identifiable */
[aria-current="page"] {
    text-decoration: underline;
    font-weight: bold;
}

/* Teach nav link styling (moved from inline styles for accessibility/maintainability) */
.teach-link, .teach-link:link, .teach-link:visited {
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #0e6c6b;
    text-decoration: none;
}
.teach-link:hover, .teach-link:focus { color: #a3331b; text-decoration: underline; }

h1 { font-size:175%; }
h2 { font-size:150%;}
h3 { font-size:125%; }
h4 { font-size:110%; }

/* Background Colors - DO NOT EDIT! */
.bgAbout { background-color: #cccc99; padding:5px; }
.bgBrochureSidebar { background-color: #ffffef; padding:5px; } /* f2e6b2 */ 

td.oldNav {height: 24px; background: #eaf3e9; border-bottom: 1px solid #bdc5bd; padding:0; margin:0;}
td.oldNav a:link, td.oldNav a:visited {font-weight: bold; color: #425059; text-decoration:none; font-family: Arial,Helvetica,Verdana,Sans-serif; font-size:11px;}
td.oldNav a:hover { color: #a3331b; text-decoration: none;}

#idTable td.webHead {background: #a2b7b0; height: 46px; border: 0; padding: 0; margin: 0; }
.left {float:left; margin: 0 0 0 0;}
.right {float:right; margin: 0 0 0 0}
#idTable { background: #a2b7b0; border: 0; padding: 0; width: 100%; table-layout: fixed; }
td.fkhead img { max-width: 100%; height: auto; }
#idTable img {border: 0;}

td.oldschool {width: 80px; border: 1px solid #bdc5bd; padding:10px; margin:0; font-size: 10px;}
td.older {width: 90%; border: 0px solid #bdc5bd; padding:10px; margin:0;}
td.fkhead {width: 100%; border: 0px solid #bdc5bd; padding:0; margin:0;}
td.fkright {width: 108px; border-spacing: 0px; border: 0px solid #bdc5bd; padding:0px; margin:0px;}
td.fkright img { display: block; max-width: 100%; height: auto; }

/* Keep media (images/iframes/videos) from forcing horizontal scroll on small screens.
   Images and <video> have intrinsic aspect ratios, so height:auto rescales them
   when the width is capped. Iframes don't — height:auto would collapse them — so
   we only cap their width and let the markup keep its height attribute. */
img, video { max-width: 100%; height: auto; }
iframe, object, embed { max-width: 100%; }

/* Many pages put prose directly inside <td> cells used for layout, and
   brownduplicate.css shrinks td to 0.75em. Make cell text inherit the body
   size so it stays readable; preserve the smaller font on legacy nav cells. */
td { font-size: inherit; }
td.oldNav, td.oldNav a, td.teachNav { font-size: 11px; }

/* Lecture-video embeds: scale to fill the column at proper 16:9 aspect ratio
   instead of rendering at their HTML width/height pixel attributes (which on
   wide screens left them awkwardly short). Stacks multiple videos vertically;
   each one centers within its column up to ~720px wide. */
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"],
iframe[src*="vimeo.com"] {
    display: block;
    width: 100%;
    max-width: 720px;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 0.5em auto;
    border: 0;
}

/* Home-page top section. Desktop: photo + quicklinks at top-left, Google
   search below them, main text spans the right column. Phones: photo +
   quicklinks at top, then text, then Google search at the bottom. */
.home-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "side   text"
        "search text";
    gap: 1em 1.5em;
    margin: 1em 0;
    align-items: start;
}
.home-side {
    grid-area: side;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    /* min-width:0 lets the grid item shrink below its content's intrinsic
       width — needed because the <select> below auto-sizes to its widest
       option, and at large accessibility text sizes it would otherwise push
       the whole grid (and the prose text) wider than the viewport. */
    min-width: 0;
}
/* Belt-and-suspenders: keep the dropdown from exceeding its column even at
   large iOS accessibility text sizes. */
.home-quicklinks select { max-width: 100%; }
.home-photo { text-align: center; }
.home-photo img { max-width: 100%; height: auto; }
.home-text { grid-area: text; min-width: 0; }
/* Force the same typeface for the title and its tagline. brownduplicate.css
   gives bare h2 a Georgia serif and bare h3 a Lucida sans-serif via `font:`
   shorthand, so we use class selectors here to win on specificity. */
.home-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2em;
    font-weight: bold;
    line-height: 1.2;
    margin: 0.5em 0 0.1em 0;
}
.home-subtitle {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.25em;
    font-weight: normal;
    font-style: italic;
    line-height: 1.2;
    margin: 0 0 1em 0;
    color: #555;
}
.home-search { grid-area: search; justify-self: center; }
.home-quicklinks, .home-search { text-align: center; font-size: 11px; }
.home-quicklinks select, .home-quicklinks input,
.home-search select, .home-search input { font-size: 11px; }
.home-search .search-box { padding: 4px; width: 20em; max-width: 100%; }
@media (max-width: 700px) {
    .home-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "side"
            "text"
            "search";
    }
    .home-side { width: 100%; }
    .home-quicklinks, .home-search { font-size: 14px; }
    .home-quicklinks select, .home-quicklinks input,
    .home-search select, .home-search input { font-size: 14px; }
}

/* Master class index list (classes/index.shtml): photo + bio side-by-side on
   desktop, stacked on phones — same pattern as .people-list. */
.class-list { list-style: none; padding: 0; margin: 0 0 1em 0; }
.class-list > li {
    display: flex;
    gap: 1em;
    align-items: flex-start;
    padding: 1em;
    margin: 0;
}
.class-list > li:nth-child(odd)  { background: #ffffff; }
.class-list > li:nth-child(even) { background: #efece4; }
.class-list .photo { flex: 0 0 296px; text-align: center; }
.class-list .photo img { max-width: 100%; height: auto; }
.class-list .bio { flex: 1; min-width: 0; }
.class-list .bio h2,
.class-list .bio h3,
.class-list .bio h4 { margin: 0 0 .35em 0; }
.class-list .bio p:first-of-type { margin-top: 0; }
@media (max-width: 700px) {
    .class-list > li { flex-direction: column; align-items: stretch; }
    .class-list .photo { flex: 0 0 auto; }
}

/* Featured Papers section on pubs/index.shtml: text + figure side-by-side on
   desktop, stacked on phones. */
.featured-papers {
    display: flex;
    gap: 1.5em;
    align-items: flex-start;
    margin-bottom: 1em;
}
.featured-papers .featured-text { flex: 1; min-width: 0; }
.featured-papers .featured-figure { flex: 0 0 auto; text-align: center; }
.featured-papers .featured-figure img { max-width: 100%; height: auto; }
@media (max-width: 700px) {
    .featured-papers { flex-direction: column; align-items: stretch; }
    .featured-papers .featured-figure { text-align: center; }
}

/* Hero image at the top of each class page's heading.inc. Every image is
   rendered exactly 276px wide (the displayed width of MPE.jpg in the canonical
   EEPS2300_21 example). Height is computed from each image's intrinsic aspect
   ratio. max-width:none is required because the image often sits inside a
   layout <td> whose auto-table-layout has squeezed it below 276px to make
   room for the adjacent text cell — without this override the global
   img{max-width:100%} rule would shrink the image to that squeezed width.
   On phones the mobile media query below restores max-width:100%. */
.course-photo {
    display: block;
    width: 276px;
    max-width: none;
    height: auto;
    margin: 0 auto;
}

/* Mobile layout: stack the legacy two-column table cells, let the nav wrap,
   and bump the tiny base font sizes to something readable on a phone. */
@media (max-width: 700px) {
    body, p, ul { font-size: 16px; }
    input, select { font-size: 14px; }

    /* Stack the two-column content tables used on most pages. */
    #TemplateTable3C, #TemplateTable3C tbody,
    #TemplateTable3C tr, #TemplateTable3C td,
    #TemplateTable2LA, #TemplateTable2LA tbody,
    #TemplateTable2LA tr, #TemplateTable2LA td {
        display: block;
        width: auto !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    #TemplateTable3C td.oldschool { width: auto; }
    #TemplateTable3C td.older { width: auto; padding: 10px 0; }
    #TemplateTable2LA td { padding: 6px 0; }
    #TemplateTable2LA img { max-width: 100%; height: auto; }

    /* Keep the banner on a single row at every viewport: with
       table-layout:fixed the right image stays in its 169px column on the
       right while the banner image scales down via max-width:100%. */

    /* Give the nav strip room to wrap its links on narrow screens. */
    td.oldNav {
        height: auto;
        padding: 6px 8px;
        line-height: 2;
    }
    td.oldNav nav { white-space: normal; }

    /* The home-page sidebar widgets are wrapped in a 20em fixed-width div. */
    .oldschool form > div[style*="20em"] { width: auto !important; }

    /* Outer container margin */
    #container { margin: 0 8px !important; }

    /* brownduplicate.css sets .marginator { width: 58.75em } (~940px), which
       forces the page wider than a phone viewport and pushes prose text past
       the right edge. Let it shrink to the viewport on small screens. */
    .marginator { width: auto; max-width: 100%; }

    /* On phones, shrink the class hero image so it doesn't dominate the
       screen. Desktop renders at 276px wide; phone caps to 180px (similar
       in scale to .people-list photos on phones) while still scaling down
       with the viewport via max-width:100%. */
    .course-photo {
        width: 180px;
        max-width: 100%;
    }
}