/* georgejpappas.org — Penn Navy #011F5B, Penn Red #990000; Source Serif 4 headings, Source Sans 3 body */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FFFFFF; }
img { max-width: 100%; }
a { color: #990000; text-decoration: none; }
a:hover { color: #011F5B; text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid #990000; outline-offset: 2px; }
[hidden] { display: none !important; }
.skip-link { position: absolute; left: -9999px; top: 0; background: #011F5B; color: #FFFFFF; padding: 10px 16px; z-index: 100; font-family: 'Source Sans 3', system-ui, sans-serif; }
.skip-link:focus { left: 8px; top: 8px; color: #FFFFFF; }

.nav-mobile { display: none; }
summary::-webkit-details-marker { display: none; }
@media (max-width: 1160px) { .nav-full { display: none !important; } .nav-mobile { display: block !important; } }
@media (max-width: 600px) {
  [style*="max-width: 1200px"], [style*="max-width: 860px"] { padding-left: 16px !important; padding-right: 16px !important; }
  .brand-logo { height: 32px !important; }
  .brand-div { display: none !important; }
  .brand-name { font-size: 20px !important; }
  .hero-name { font-size: 42px !important; }
  .page-h1 { font-size: 32px !important; }
}

/* Research: six area tiles act as tabs; each panel is figure + projects on the left, text and papers on the right */
.area-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.area-tab { font: inherit; text-align: left; cursor: pointer; background: #FFFFFF; color: #1B1F2A; border: 1px solid #C5CBD6; border-top: 4px solid #C5CBD6; padding: 14px 16px; min-height: 44px; display: flex; flex-direction: column; gap: 4px; }
.area-tab:hover { border-top-color: #990000; }
.area-tab[aria-selected="true"] { background: #011F5B; color: #FFFFFF; border-color: #011F5B; border-top-color: #990000; }
.area-tab-name { font-family: 'Source Serif 4', Georgia, serif; font-size: 19px; font-weight: 600; color: #011F5B; }
.area-tab-line { font-size: 14px; line-height: 1.4; color: #4A5263; }
.area-tab[aria-selected="true"] .area-tab-name { color: #FFFFFF; }
.area-tab[aria-selected="true"] .area-tab-line { color: #DCE3F0; }
.area-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "fig text" "side text"; column-gap: 48px; row-gap: 28px; align-items: start; grid-template-rows: auto 1fr; scroll-margin-top: 16px; }
.area-fig { grid-area: fig; min-width: 0; }
.area-text { grid-area: text; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.area-side { grid-area: side; min-width: 0; background: #F3F5F9; padding: 20px; display: flex; flex-direction: column; gap: 28px; }
.side-block { display: flex; flex-direction: column; gap: 12px; }
.side-h { margin: 0; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: #011F5B; }
.side-item { padding: 12px 0 0; border-top: 1px solid #DDE1E8; display: flex; flex-direction: column; gap: 3px; }
.side-meta { font-size: 14px; color: #4A5263; }
.project-link, .project-name { font-weight: 600; color: #011F5B; }
.project-link span { color: #990000; }
@media (max-width: 900px) {
  .area-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fig" "text" "side"; grid-template-rows: none; }
}
@media (max-width: 520px) {
  .area-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .area-tab-line { display: none; }
  .area-tab { padding: 10px 14px; }
}

/* Filter buttons (News, Publications) */
.filter-btn { font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; padding: 10px 16px; min-height: 44px; border: 1px solid #011F5B; background: #FFFFFF; color: #011F5B; }
.filter-btn[aria-pressed="true"] { background: #011F5B; color: #FFFFFF; }
.pub-filter { text-align: left; font: inherit; font-size: 16px; padding: 10px 14px; cursor: pointer; border: 1px solid #C5CBD6; min-height: 44px; background: #FFFFFF; color: #1B1F2A; }
.pub-filter[aria-pressed="true"] { background: #011F5B; color: #FFFFFF; border-color: #011F5B; font-weight: 700; }

@media print {
  .nav-full, .nav-mobile, .skip-link { display: none !important; }
}

/* Cover band for research areas that do not have a figure yet */
.area-cover { height: 200px; flex: 0 0 auto; background-color: #011F5B;
  background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 28px 28px; border-bottom: 4px solid #990000; }

/* Publications list */
li.pub { display: flex; gap: 16px; align-items: baseline; }
.pub-id { flex: 0 0 56px; font-size: 14px; font-weight: 700; color: #4A5263; }
.pub-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pub-cite { font-size: 16px; }
.pub-cite a { font-weight: 600; }
.pub-award { font-size: 15px; color: #990000; font-weight: 700; }
.pub-award::after { content: "."; }
.pub-links { font-size: 14px; font-weight: 600; white-space: normal; }
.bib-btn { font: inherit; font-weight: 600; color: #990000; background: none; border: 0; padding: 0; cursor: pointer; }
.bib-btn:hover { color: #011F5B; text-decoration: underline; }
.bib-box { margin-top: 6px; background: #F3F5F9; border-left: 3px solid #011F5B; padding: 10px 12px; }
.bib-box pre { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.bib-copy { margin-top: 8px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; background: #FFFFFF; color: #011F5B; border: 1px solid #011F5B; padding: 4px 10px; }
@media (max-width: 600px) { li.pub { gap: 10px; } .pub-id { flex-basis: 44px; } }

/* Social icons in the header */
.social { display: block; padding: 4px; opacity: 0.9; }
.social:hover { opacity: 1; text-decoration: none; }

/* Bio: line the photo up with the first paragraph, not the heading, when side by side */
@media (min-width: 920px) { .bio-aside { margin-top: 65px; } }
.nav-full > * { flex-shrink: 0; }
.pub-title { font-weight: 600; color: #1B1F2A; }
.video-card { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid #DDE1E8; text-decoration: none; }
.video-card:hover { text-decoration: none; }
.video-card:hover .project-link { text-decoration: underline; }
.video-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #011F5B; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 40px; border-radius: 8px; background: rgba(153,0,0,0.92); color: #FFFFFF; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.video-inline { width: 100%; height: auto; display: block; background: #011F5B; }

/* Calmer citations: navy titles, quiet links, one accent colour for awards */
.pub-list { gap: 22px !important; }
.pub-cite { line-height: 1.55; color: #1B1F2A; }
.pub-cite .pub-text a { color: #011F5B; font-weight: 600; }
.pub-cite .pub-text a:hover { color: #990000; }
.pub-id { font-size: 13px; font-weight: 600; color: #8A93A6; }
.pub-award { font-size: 14px; font-weight: 600; }
.pub-links { font-size: 13px; font-weight: 400; color: #8A93A6; letter-spacing: 0.01em; }
.pub-links a, .pub-links .bib-btn { color: #4A5263; font-weight: 500; }
.pub-links a:hover, .pub-links .bib-btn:hover { color: #990000; }
.area-side .project-link { font-size: 16px; line-height: 1.4; }
.area-side .side-item { gap: 2px; }
.pub-filter { font-size: 15px; padding: 8px 12px; min-height: 40px; }

/* Press lists: outlet as a quiet label, headline in navy */
.press-outlet { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #4A5263; }
.press-headline { font-size: 17px; font-weight: 600; color: #011F5B; line-height: 1.35; }
a.press-headline:hover { color: #990000; }

/* Links inside running text: navy with a light underline instead of red */
main p a, p a, .in-text a { color: #011F5B; text-decoration: underline; text-decoration-color: rgba(1, 31, 91, 0.28); text-underline-offset: 3px; text-decoration-thickness: 1px; }
main p a:hover, p a:hover, .in-text a:hover { color: #990000; text-decoration-color: #990000; }

/* Five area tiles in one row on wide screens; two columns on tablets; stacked on phones */
.area-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.area-tiles .area-tab { grid-column: auto; }
.area-tab-name { font-size: 18px; line-height: 1.25; }
.area-tab-line { font-size: 13.5px; }
@media (max-width: 1100px) {
  .area-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-tiles .area-tab:last-child { grid-column: span 2; }
}
@media (max-width: 520px) {
  .area-tiles { grid-template-columns: minmax(0, 1fr); }
  .area-tiles .area-tab:last-child { grid-column: auto; }
}

/* Home: five research cards in one even row (two columns on tablets, stacked on phones) */
.home-areas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.area-card { border: 1px solid #DDE1E8; color: #1B1F2A; display: flex; flex-direction: column; text-decoration: none; }
.area-card:hover { text-decoration: none; border-color: #011F5B; }
.area-card:hover h3 { color: #990000 !important; }
.area-card h3 { font-size: 20px !important; line-height: 1.25; }
@media (max-width: 1100px) {
  .home-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-areas .area-card:last-child { grid-column: span 2; }
  .home-areas .area-card:last-child img { height: 200px !important; }
}
@media (max-width: 600px) {
  .home-areas { grid-template-columns: minmax(0, 1fr); }
  .home-areas .area-card:last-child { grid-column: auto; }
}