/* ==========================================================================
   Projects gallery & case studies — layout + dark academic theme
   Merged in original load order; source sections are labelled below.
   ========================================================================== */

/* ---- merged from reference.css ---- */
*{box-sizing:border-box}
:root{color-scheme:light;--paper:#fafafa;--ink:#242424;--muted:#656565;--rule:#e2e2e2;--link:#315b7b}
html{scroll-behavior:smooth;scroll-padding-top:48px}
body{margin:0;background:var(--paper);color:var(--ink);font:23px/1.6 'Cormorant Garamond',serif;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none;border-bottom:1px solid #ccd6de}
a:hover{color:#163c59;border-color:var(--link)}
a:focus-visible{outline:2px solid var(--link);outline-offset:5px}
p{margin:0 0 23px}
strong{font-weight:600}
.sidebar{position:fixed;inset:0 auto 0 0;width:210px;border-right:1px solid var(--rule);padding:50px 29px;display:flex;flex-direction:column;background:var(--paper)}
.sidebar a{border:0;font-family:Arial,sans-serif;color:var(--muted)}
.sidebar .site-name{font:24px/1.3 'Cormorant Garamond',serif;color:var(--ink)}
.sidebar nav{display:grid;gap:15px;margin-top:64px;font-size:14px;line-height:1.4}
.sidebar nav a[aria-current]{color:var(--ink)}
.sidebar nav a:hover,.sidebar-contact:hover{color:var(--link)}
.sidebar-contact{margin-top:auto;font-size:13px}
main{max-width:1110px;margin-left:calc(210px + (100vw - 1530px)/2);padding:52px 55px 0}
.page-heading{border-bottom:1px solid var(--rule);padding-bottom:32px;display:flex;justify-content:space-between;align-items:baseline;gap:25px}
h1{font-size:50px;line-height:1.2;letter-spacing:-.6px;font-weight:normal;margin:0}
.page-heading>span{font-size:16px;font-style:italic;color:var(--muted)}
.profile{display:grid;grid-template-columns:190px minmax(0,1fr);gap:30px;padding:56px 0 45px}
.section-label{font:14px/1.5 Arial,sans-serif;color:var(--muted);padding-top:9px}
.profile-links{display:flex;gap:12px;margin:32px 0 0;font-size:22px}
.profile-links span{color:#8a8a8a}
.content-section{display:block;padding:30px 0 40px;border-top:1px solid var(--rule)}
h2{font-size:40px;line-height:1.2;letter-spacing:-.3px;font-weight:400;margin:0 0 22px}
.content-section>.section-body{margin-left:220px}
.section-intro{color:var(--ink);font-size:21px;margin:0 0 33px}
article{margin:0 0 33px}
article:last-child{margin-bottom:0}
h3{font-size:23px;line-height:1.4;font-weight:normal;margin:0 0 8px}
article p{font-size:20px;line-height:1.65;margin:0 0 10px}
.project-context{color:var(--muted);font-size:15px;line-height:1.5;margin-bottom:10px}
.project-links{display:flex;gap:20px;font-size:16px}
.contact{padding-top:35px;padding-bottom:55px}
.contact p{font-size:18px}
footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--rule);padding:25px 0 35px;font:12px/1.5 Arial,sans-serif;color:var(--muted)}
footer a{border:0}
.toc{position:fixed;right:30px;top:59px;width:150px;font:12px/1.5 Arial,sans-serif;color:var(--muted)}
.toc>span{font-size:11px}
.toc nav{border-left:1px solid var(--rule);display:grid;gap:15px;margin-top:24px;padding-left:17px}
.toc a{border:0;color:var(--muted);position:relative}
.toc a[aria-current]{color:var(--ink)}
.toc a[aria-current]:before{content:'';position:absolute;left:-18px;top:0;bottom:0;width:2px;background:var(--link)}
.skip{position:fixed;top:-100px;left:20px;padding:10px 15px;background:white;z-index:10;font:14px Arial,sans-serif}
.skip:focus{top:10px}
@media(min-width:1920px){main{margin-left:auto;margin-right:auto}}
@media(max-width:1530px){main{margin-left:210px;margin-right:190px;padding-left:45px;padding-right:45px}.profile{grid-template-columns:150px minmax(0,1fr);gap:25px}.content-section>.section-body{margin-left:175px}}
@media(max-width:1150px){.toc{display:none}main{margin-right:0;max-width:950px}.profile{grid-template-columns:140px minmax(0,1fr);gap:25px}.content-section>.section-body{margin-left:165px}}
@media(max-width:760px){html{scroll-padding-top:25px}.sidebar{position:relative;width:100%;padding:22px 24px;flex-direction:row;align-items:center;gap:24px;border-right:0;border-bottom:1px solid var(--rule)}.sidebar .site-name{font-size:20px;white-space:nowrap}.sidebar nav{display:flex;gap:17px;margin:0 0 0 auto;font-size:12px}.sidebar-contact{display:none}main{margin:0;padding:35px 25px 0}.page-heading{display:block;padding-bottom:25px}h1{font-size:40px;margin-bottom:9px}.page-heading>span{font-size:15px}.profile,.content-section{display:block;padding:30px 0}.section-label{margin-bottom:22px;padding:0}.profile{font-size:22px}.content-section>.section-body{margin-left:0}h2{font-size:29px;margin-bottom:25px}.section-intro{font-size:17px}article p{font-size:17px}h3{font-size:21px}.project-context{font-size:14px}.project-links{font-size:15px}.contact{padding-bottom:35px}footer{font-size:11px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* The reference's scholarly listing: title, attribution, note, resource links. */
.projects-section{padding-bottom:45px}
.projects-section .section-intro{margin-bottom:26px}
.project-entry{margin-bottom:26px}
.project-entry h3{font-size:21px;line-height:1.3;font-weight:700;letter-spacing:.005em;margin-bottom:4px}
.project-entry h3 a{color:#204b70;border:0}
.project-entry h3 a:hover{color:#122f4a;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.project-entry .project-context{font-size:17px;line-height:1.55;color:#3d3d3d;margin-bottom:3px}
.project-entry .project-context strong{font-weight:700}
.project-entry .project-description{font-size:17px;line-height:1.55;color:#717171;margin-bottom:6px}
.project-entry .project-links{display:flex;flex-wrap:wrap;gap:17px;font-size:17px;line-height:1.4;margin:0}
.project-entry .project-links a{color:#303030;border:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.project-entry .project-links a:hover{color:var(--link)}
@media(max-width:760px){.content-section>.section-body{margin-left:0}.profile{font-size:22px}h2{font-size:34px}.section-intro{font-size:20px}article p{font-size:20px}.project-entry h3{font-size:21px}.project-entry .project-context,.project-entry .project-description,.project-entry .project-links{font-size:17px}}

/* Portrait follows the reference: a 220px circle, centred beside the biography. */
.profile{grid-template-columns:220px minmax(0,1fr);gap:30px;align-items:center}
.profile-portrait{width:220px;aspect-ratio:1;border-radius:50%;overflow:hidden;align-self:center}
.profile-portrait img{display:block;width:100%;height:100%;object-fit:cover;transform:translate(5%,2%) scale(1.18)}
.content-section>.section-body{margin-left:250px}
@media(max-width:1150px) and (min-width:761px){.profile{grid-template-columns:180px minmax(0,1fr);gap:25px}.profile-portrait{width:180px}.content-section>.section-body{margin-left:205px}}
@media(max-width:760px){.profile-portrait{width:180px;margin:0 auto 30px}.content-section>.section-body{margin-left:0}}

/* ---- merged from projects-reference.css ---- */
.reference-projects .page-heading{padding-bottom:32px}
.project-filters{display:flex;flex-wrap:wrap;align-items:center;gap:18px 38px;margin:43px 0 58px;font-size:21px}
.project-filters label{display:flex;align-items:center;gap:10px;cursor:pointer}
.project-filters input{accent-color:#3b5363;width:14px;height:14px;cursor:pointer}
.project-filters button{font:17px 'Cormorant Garamond',serif;color:#666;background:none;border:0;border-bottom:1px solid #aaa;padding:0;cursor:pointer}
.project-filters input:focus-visible,.project-filters button:focus-visible{outline:2px solid #315b7b;outline-offset:5px}
.filter-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.project-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px 52px}
.gallery-project{min-width:0;margin:0}
.gallery-project[hidden]{display:none}
.gallery-link{display:block;border:0;color:#252525}
.project-preview{aspect-ratio:1.6;overflow:hidden;background:#eeefed;border-radius:3px}
.project-preview img{width:100%;height:100%;object-fit:cover;object-position:top;filter:grayscale(1);transition:filter .3s}
.gallery-link:hover img,.gallery-link:focus-visible img{filter:grayscale(0)}
.gallery-project h2{font-size:26px;line-height:1.2;letter-spacing:0;font-weight:700;margin:20px 0 9px}
.gallery-project .gallery-caption{font-size:19px;line-height:1.5;color:#767676;font-style:italic;margin:0 0 9px}
.gallery-project .gallery-kind{font-size:16px;color:#777;line-height:1.5;margin:0 0 9px}
.gallery-resources{display:flex;gap:17px;font-size:17px;margin:0}
.gallery-resources a{color:#383838;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;border:0}
.text-preview{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#414541;background:#e8eae6;font:46px 'Cormorant Garamond',serif}
.text-preview small{font:italic 19px 'Cormorant Garamond',serif;color:#787d76;margin-top:14px}
.projects-contact{margin:75px 0 50px;padding:35px 0 0;border-top:1px solid var(--rule)}
.projects-contact h2{font-size:34px;margin-bottom:16px}
.projects-contact p{font-size:21px;max-width:660px}
.back-link{font-size:18px;margin:35px 0 23px}
.study-summary{font-size:25px;line-height:1.5;max-width:800px;margin-bottom:35px}
.study-figure{margin:0 0 35px}
.study-figure img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.study-figure figcaption{font-size:17px;color:#777;font-style:italic;margin-top:9px}
.study-section{border-top:1px solid var(--rule);padding:35px 0 25px}
.study-section>p,.study-section>ul,.study-section>ol{max-width:800px;font-size:22px;line-height:1.6}
.study-section h3{font-size:26px;font-weight:600;margin:25px 0 12px}
.study-section ul{padding-left:23px}
.study-section li{margin-bottom:12px}
.study-facts{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px;margin:35px 0}
.study-facts dt{font:12px Arial,sans-serif;color:#777;margin-bottom:7px}
.study-facts dd{font-size:20px;line-height:1.5;margin:0}
.study-view{margin-bottom:50px}
.study-view>p,.study-view ul{font-size:21px}
.study-flow{padding-left:23px}
.study-flow p{margin-top:5px}
.study-note{color:#777;font-size:18px!important}
@media(max-width:1000px){.project-gallery{gap:40px 30px}}
@media(max-width:760px){.project-filters{margin:30px 0 35px;gap:20px;font-size:20px}.project-gallery{grid-template-columns:1fr;gap:42px}.gallery-project h2{font-size:26px}.gallery-project .gallery-caption{font-size:20px}.study-summary{font-size:23px}.study-facts{grid-template-columns:1fr}.study-section>p,.study-section>ul,.study-section>ol{font-size:21px}}

/* ---- merged from academic-projects.css ---- */
/* ==========================================================================
   Dark academic theme for the Projects gallery and the case-study pages.
   Loads after css/reference.css + css/projects-reference.css and re-themes
   them to match the academic direction: graphite ground, Cormorant, brass.
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/CormorantGaramond-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/CormorantGaramond-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --paper: #1b1a17;
  --ink: #e9e3d6;
  --muted: #a39c8b;
  --rule: #37352f;
  --link: #c9a961;
  --brass: #c9a961;
  --line: #37352f;
}

body { background: var(--paper); color: var(--ink); }

a { color: var(--brass); border-bottom-color: #5a4f33; }
a:hover { color: #e6d3a6; border-color: var(--brass); }
a:focus-visible { outline-color: var(--brass); }

/* ---- Sidebar ----------------------------------------------------------- */
.sidebar { background: var(--paper); border-right-color: var(--rule); }
.sidebar a { color: var(--muted); }
.sidebar .site-name { color: var(--ink); }
.sidebar nav a[aria-current] { color: var(--ink); }
.sidebar nav a:hover,
.sidebar-contact:hover { color: var(--brass); }

/* ---- Page heading ------------------------------------------------------ */
.page-heading { border-bottom-color: var(--rule); }
.page-heading > span { color: var(--muted); }

/* ---- TOC --------------------------------------------------------------- */
.toc { color: var(--muted); }
.toc nav { border-left-color: var(--rule); }
.toc a { color: var(--muted); }
.toc a[aria-current] { color: var(--ink); }
.toc a[aria-current]:before { background: var(--brass); }

/* ---- Projects gallery -------------------------------------------------- */
.project-filters input { accent-color: var(--brass); }
.project-filters button { color: var(--muted); border-bottom-color: var(--rule); }
.project-filters input:focus-visible,
.project-filters button:focus-visible { outline-color: var(--brass); }
.gallery-link { color: var(--ink); }
.project-preview { background: #232220; border: 1px solid var(--rule); }
.gallery-project .gallery-caption { color: var(--muted); }
.gallery-project .gallery-kind { color: var(--muted); }
.gallery-resources a { color: var(--ink); }
.gallery-resources a:hover { color: var(--brass); }
.text-preview { background: #232220; color: var(--muted); }
.text-preview small { color: var(--muted); }
.projects-contact { border-top-color: var(--rule); }

/* ---- Case study -------------------------------------------------------- */
.back-link a { color: var(--brass); }
.case-study main { margin-right: 0; }
.study-lede { font-size: 25px; line-height: 1.5; max-width: 820px; margin: 0 0 40px; }
.study-prose p { font-size: 20px; line-height: 1.65; max-width: 820px; margin: 0 0 23px; }
.study-meta { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 820px; margin: 0 0 22px; }
.study-links a { font-size: 18px; }

/* ---- Case-study image carousel ---------------------------------------- */
.study-carousel { margin: 0 0 35px; }
.carousel-stage {
  /* --shot-ratio is set from the active screenshot in JS, so the frame matches
     the image instead of cropping it. Falls back to a landscape frame. */
  aspect-ratio: var(--shot-ratio, 1.6);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: #232220;
}
.carousel-stage img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top; }
/* Tall portrait screenshots (mobile) are centred in a phone-width frame. */
.carousel-stage.is-portrait { margin-inline: auto; }
.carousel-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.carousel-thumb {
  width: 84px;
  aspect-ratio: 1.6;
  padding: 0;
  border: 1px solid var(--rule);
  background: #232220;
  cursor: pointer;
  overflow: hidden;
  opacity: .55;
  transition: opacity .2s, border-color .2s;
}
.carousel-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.carousel-thumb:hover { opacity: .85; }
.carousel-thumb[aria-current="true"] { opacity: 1; border-color: var(--brass); }
.carousel-thumb:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.carousel-caption { font-size: 17px; font-style: italic; color: var(--muted); margin: 12px 0 0; }

/* ---- Two-column gallery: screenshots left, continuous notes right ------ */
.study-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin: 0 0 40px;
}
.study-gallery .study-carousel { margin: 0; position: sticky; top: 24px; }
.carousel-info-panel .kicker { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.carousel-info-panel p { font-size: 18px; line-height: 1.6; color: var(--ink); margin: 0; }
.carousel-info-panel[hidden] { display: none; }
@media (max-width: 900px) {
  .study-gallery { grid-template-columns: 1fr; gap: 24px; }
  .study-gallery .study-carousel { position: static; }
}

/* ---- Footer ------------------------------------------------------------ */
footer { border-top-color: var(--rule); color: var(--muted); }

/* ---- Left panel: match the home (panels) sizing & spacing -------------- */
@media (min-width: 761px) {
  .sidebar { width: 236px; padding: 48px 30px; }
  .sidebar nav { gap: 14px; margin-top: 58px; line-height: 1.7; }
  main { margin-left: calc(236px + (100vw - 1530px) / 2); }
}
@media (min-width: 761px) and (max-width: 1530px) {
  main { margin-left: 236px; }
}