/* NeuroGabo brand book v2, pp. 2–8 and 11.
   This layer applies the identity to the existing page layouts. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-italic-variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
:root {
  --paper: #FEFDF7;
  --ink: #2A2D36;
  --accent: #FE6202;
  --teal: #2B7976;
  --muted: #676B73;
  --line: #BABBB6;
  --fine: #DCDCD5;
  --brand-font: "Plus Jakarta Sans", system-ui, sans-serif;
  font-family: var(--brand-font);
  font-synthesis: none;
  font-weight: 400;
  line-height: 1.6;
}
button { font-family: inherit; }
h1, h2, h3, .home-title, .page-heading h1, .member-name h3 {
  font-weight: 600;
  letter-spacing: -.035em;
}
h2, h3 { line-height: 1.25; }
p { letter-spacing: normal; }
strong, b, .project-feature .project-question { font-weight: 700; }
.site-nav, .menu-toggle, .section-links,
.profile-links, .code-rail nav, .papers-rail nav { font-weight: 500; }
.site-nav a[aria-current=page] { font-weight: 600; }

/* The approved raster stays byte-for-byte intact. Clip only its empty margins,
   using the same (411,271)-(1392,592) view as the brand-book layout. */
.site-header { min-height: 142px; gap: 32px; }
.wordmark { display: block; flex: 0 0 auto; padding: 16px; margin-left: -16px; line-height: 1; }
.brand-logo { display: block; position: relative; overflow: hidden; width: 280px; aspect-ratio: 981 / 321; }
.brand-logo img { position: absolute; width: 180.835882%; max-width: none; height: auto; left: -41.896024%; top: -84.423676%; }
.site-nav { gap: 25px; font-size: 15px; line-height: 1.5; }
.site-nav a { padding: 12px 0; }
.menu-toggle { min-height: 44px; font-size: 13px; line-height: 1.4; }

.home-title { color: var(--ink); font-size: clamp(40px, 4.4vw, 56px); line-height: 1.15; white-space: normal; }
.home-title span:after { height: 4px; bottom: -8px; left: 4%; width: 95%; }
.hero { min-height: 560px; }
.bio { padding-top: 38px; }
.intro { margin-top: 35px; }
.intro h2 { font-size: 20px; letter-spacing: -.02em; }
.description { font-size: 18px; line-height: 1.6; }
.current-role { font-size: 16px; line-height: 1.6; }
.hero-links .text-link { font-size: 17px; }
.page-heading { padding-top: 28px; padding-bottom: 34px; }
.page-heading h1 { font-size: clamp(34px, 3.5vw, 44px); font-weight: 500; line-height: 1.2; }
.page-heading > p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; letter-spacing: normal; }
.lead, .about-copy .lead, .lab-intro .lead { font-size: 22px; line-height: 1.6; letter-spacing: normal; }
.about-copy p, .software-summary, .member-bio > p:not(.meta),
.project-feature-copy > p:not(.meta) { font-size: 18px; line-height: 1.6; }
.about-copy p, .member-bio > p:not(.meta), .software-summary { max-width: 68ch; }
.section-rail h2, .project-feature h2, .section-intro h2,
.lab-intro h2, .design-heading h2, .software-entry h2,
.research-code h2 { font-size: 32px; line-height: 1.25; letter-spacing: -.035em; }
.gateway h2, .hardware-project h3, .related-strip h2,
.story-row h2, .site-footer h2 { font-size: 26px; line-height: 1.25; letter-spacing: -.025em; }
.paper h3 { font-size: 24px; line-height: 1.3; letter-spacing: -.025em; }
.paper .authors, .paper .journal { font-size: 15px; }
.project-sources { font-size: 14px; }
.project-sources summary { padding: 6px 0; }
.project-feature-copy > .project-detail, .design-description > p { color: var(--ink); }
.member-name h3 { font-size: 30px; line-height: 1.25; }
.lab-invitation { border-top: 1px solid var(--line); margin-top: 28px; padding: 42px 0 8px; }
.lab-invitation h2 { font-size: 32px; margin-bottom: 18px; }
.lab-invitation p { max-width: 66ch; font-size: 18px; line-height: 1.7; }

/* Labels and editorial notes use Jakarta too; code fragments can remain monospace. */
.meta, .number, .colophon, figcaption, .carousel-count,
.software-stack, .software-facts dt, .project-facts dt,
.paper-year, .paper-type, .code-number {
  font-family: var(--brand-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .01em;
}
.hardware-project figcaption { font-size: 13px; line-height: 1.45; }
.software-stack { color: var(--muted); }
.sketchbook figcaption, .hand-note {
  font-family: var(--brand-font);
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
  transform: none;
}
.sketchbook figcaption { font-size: 14px; }
.project-feature .project-question { color: var(--ink); }
.carousel-controls button:hover { background: var(--fine); border-color: var(--ink); }

.about-introduction { align-items: center; }
.about-portrait { width: 100%; max-width: 360px; margin: 0 auto; }
.about-portrait img { width: 100%; height: auto; }
.about-portrait figcaption { font-family: var(--brand-font); font-size: 14px; line-height: 1.5; text-align: center; }
.about-jump-links { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 30px; font-size: 15px; }
.about-jump-links a { border-bottom: 1px solid var(--fine); padding-bottom: 5px; }
.about-chapter { padding: 46px 0; border-top: 1px solid var(--fine); scroll-margin-top: 28px; }
.about-chapter h2 { font-size: 32px; line-height: 1.25; margin-bottom: 30px; }
.about-chapter p { max-width: 68ch; font-size: 18px; line-height: 1.7; }
.about-chapter p + p { margin-top: 22px; }
.about-chapter:last-child { padding-bottom: 60px; }
.about-story-copy p { max-width: 68ch; }
.about-chapter--daily-life .about-chapter-content { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 56px; }
.about-chapter--daily-life .about-chapter-content > p,
.about-subsection--pets { grid-column: 1 / -1; }
.about-citation { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.about-subsection { margin-top: 42px; scroll-margin-top: 28px; }
.about-subsection--pets { margin-top: 24px; }
.about-subsection--pets .pet-profiles { margin-top: 0; }
.about-subsection + .about-subsection { padding-top: 36px; border-top: 1px solid var(--fine); }
.about-subsection > h3 { font-size: 26px; line-height: 1.3; margin: 0 0 22px; }
.teaching-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 38px; margin-top: 30px; }
.teaching-links { display: flex; flex-wrap: wrap; column-gap: 24px; }
.teaching-course { min-width: 0; padding-top: 24px; border-top: 1px solid var(--fine); }
.teaching-course h3 { margin: 9px 0 16px; font-size: 25px; line-height: 1.35; }
.teaching-course .teaching-institution { color: var(--muted); font-size: 14px; font-weight: 500; }
.teaching-course .inline-link { display: inline-block; margin-top: 18px; font-size: 15px; border-bottom: 1px solid var(--fine); padding-bottom: 4px; }
.book-pick { margin-top: 30px; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent); }
.book-pick .book-label { color: var(--muted); font-size: 13px; letter-spacing: .035em; }
.book-pick .book-title { font-size: clamp(23px, 2.1vw, 28px); line-height: 1.3; margin: 12px 0 8px; }
.book-pick .book-title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.book-pick .book-author { font-size: 15px; color: var(--muted); }
.book-pick .book-description { margin-top: 15px; font-size: 17px; }
.channel-picks { list-style: none; margin: 28px 0 0; padding: 0; }
.channel-picks li { padding: 22px 0; border-top: 1px solid var(--fine); }
.channel-picks li:last-child { padding-bottom: 0; }
.channel-picks .channel-title { margin: 0 0 8px; font-size: 21px; line-height: 1.35; }
.channel-picks .channel-title a { display: flex; gap: 18px; justify-content: space-between; align-items: baseline; }
.channel-picks .channel-title span { font-size: 20px; color: var(--teal); }
.channel-picks p { font-size: 16px; color: var(--muted); line-height: 1.6; }
.design-description > .design-detail { margin-top: 18px; }
.design-description > .design-credit { margin-top: 22px; font-size: 14px; line-height: 1.6; color: var(--ink); }
.project-index { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 56px; padding: 28px 0 34px; border-bottom: 1px solid var(--fine); }
.project-index h2 { font-size: 15px; line-height: 1.5; margin-bottom: 12px; color: var(--muted); letter-spacing: 0; }
.project-index ul { list-style: none; margin: 0; padding: 0; }
.project-index a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 15px; line-height: 1.5; }
.project-index a:hover { color: var(--teal); }
.project-index a span { color: var(--teal); }
.design-study, .design-carousel.is-ready .design-study { grid-template-areas: 'heading visual' 'description visual'; grid-template-rows: auto 1fr; row-gap: 18px; align-items: start; }
.design-heading { grid-area: heading; }
.design-heading h2 { margin: 12px 0 0; }
.design-description { grid-area: description; }
.design-study > .design-visual, .design-carousel.is-ready .design-study > .design-visual { grid-area: visual; }
.pet-profiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 56px; margin-top: 32px; }
.pet-profile { border-top: 1px solid var(--fine); padding-top: 22px; }
.pet-portrait { display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; object-fit: contain; margin: 0 auto 24px; }
.about-chapter .pet-art-note { margin-top: 24px; font-size: 13px; color: var(--muted); }
.pet-profile .pet-name { font-size: 26px; margin-bottom: 12px; }
.pet-profile p { font-size: 17px; }
.pet-profile .pet-label { font-size: 14px; font-weight: 500; color: var(--muted); }

@media (max-width: 900px) {
  .teaching-list { grid-template-columns: 1fr; gap: 30px; }
  .about-chapter--daily-life .about-chapter-content { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .about-chapter { padding: 32px 0; }
  .about-chapter h2 { font-size: 28px; margin-bottom: 23px; }
  .about-chapter p { font-size: 17px; }
  .about-chapter:last-child { padding-bottom: 40px; }
  .pet-profiles { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 1100px) {
  .site-nav { gap: 18px; font-size: 14px; }
  .hardware-project { grid-template-columns: 120px minmax(0,1fr); gap: 22px; }
}
@media (max-width: 1200px) {
  .site-header { min-height: 132px; flex-wrap: wrap; gap: 8px 24px; padding: 8px 0; }
  .site-nav { width: 100%; flex-wrap: wrap; gap: 10px 25px; padding: 5px 0 18px; font-size: 15px; }
  .site-nav a { padding: 8px 0; }
  .menu-toggle:not([hidden]) { display: block; }
}
@media (max-width: 760px) {
  .page-heading { padding: 26px 0; }
  .page-heading h1 { font-size: clamp(34px, 5.8vw, 40px); }
  .home-title { font-size: clamp(40px, 7.8vw, 52px); line-height: 1.15; }
  .page-heading > p { font-size: 19px; }
  .hero { min-height: 0; }
  .bio { padding-top: 28px; }
  .sketchbook figcaption { font-size: 13px; }
  .hardware-project { grid-template-columns: 140px minmax(0,1fr); gap: 24px; }
  .hardware-project h3 { font-size: 24px; }
  .hardware-project p { font-size: 16px; }
  .section-rail h2, .project-feature h2, .section-intro h2,
  .lab-intro h2, .design-heading h2, .software-entry h2 { font-size: 28px; }
  .project-index { grid-template-columns: 1fr; gap: 24px; padding: 24px 0; }
  .design-study, .design-carousel.is-ready .design-study { grid-template-areas: 'heading' 'visual' 'description'; grid-template-rows: auto auto auto; row-gap: 24px; }
  .about-copy p, .member-bio > p:not(.meta), .software-summary { font-size: 17px; }
  .gateway p { min-height: 0; }
  .member-name h3 { font-size: 26px; }
  .paper h3 { font-size: 21px; line-height: 1.4; }
  .view-frames figcaption { font-size: 13px; }
  .view-thumbnails span { font-size: 12px; }
  .lab-invitation { padding-top: 32px; }
  .lab-invitation h2 { font-size: 28px; }
  .lab-invitation p { font-size: 17px; }
  .site-footer h2 { white-space: normal; }
}
@media (max-width: 440px) {
  .site-header { min-height: 110px; gap: 8px; }
  .wordmark { padding: 12px; margin-left: -12px; }
  .brand-logo { width: 220px; }
  .menu-toggle { padding: 9px; }
  .menu-toggle span { margin-left: 5px; }
  .hardware-project { grid-template-columns: 1fr; gap: 18px; }
  .hardware-project figure { max-width: 240px; }
  .hardware-project figure img { height: 180px; }
  .software-facts > div { grid-template-columns: 1fr; gap: 6px; }
  .software-heading .meta { font-size: 13px; }
  .home-title { font-size: 40px; }
}
@media (max-width: 359px) {
  .site-header { justify-content: flex-start; }
  .menu-toggle { margin-left: auto; }
  .page-heading h1 { font-size: 32px; }
  .home-title { font-size: 38px; }
}
/* Collaboration and the editorial notebook. */
.action-button { display:inline-flex; justify-content:center; align-items:center; gap:20px; padding:15px 22px; min-height:50px; background:var(--ink); color:var(--paper); border:1px solid var(--ink); border-radius:3px; font:600 15px/1.4 var(--brand-font); text-decoration:none; cursor:pointer; }
.action-button:hover { background:var(--teal); border-color:var(--teal); color:var(--paper); text-decoration:none; }
.action-button span { color:var(--accent); font-size:21px; }
.site-nav { gap:18px; }
.site-nav a[href='/contact/'] { border:1px solid var(--ink); padding:10px 14px; border-radius:3px; }
.collaboration-band { display:flex; align-items:center; justify-content:space-between; gap:40px; margin:70px 0 16px; padding:48px; background:#F0E6D8; border-top:3px solid var(--accent); }
.collaboration-band h2 { font-size:clamp(28px,3vw,42px); margin:12px 0 18px; }
.collaboration-band p:not(.meta) { max-width:52ch; font-size:17px; }
.collaboration-band .action-button { flex-shrink:0; }
.home-journal { display:grid; grid-template-columns:1fr 1.4fr; gap:10%; padding:64px 0 15px; }
.home-journal h2 { font-size:32px; margin:12px 0; }
.journal-card { border-top:1px solid var(--line); padding:24px 0 32px; }
.journal-card h2 { font-size:32px; margin:15px 0; }
.journal-card > p:not(.meta) { max-width:52ch; color:var(--muted); font-size:18px; }
.journal-heading { display:flex; justify-content:space-between; align-items:end; gap:35px; }
.journal-heading h1 { font-size:clamp(40px,5vw,68px); margin-top:20px; }
.journal-heading > p { padding-bottom:5px; }
.journal-layout { display:grid; grid-template-columns:1fr 2fr; gap:10%; margin:48px 0; }
.journal-rail > p + p { margin-top:20px; font-size:23px; line-height:1.6; }
.preview-note { background:#E8EAF2; border-left:3px solid var(--teal); padding:14px 18px; font-size:14px; line-height:1.6; }
.contact-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:10%; margin:22px 0 70px; }
.contact-intro { padding-top:28px; }
.contact-intro h2 { font-size:27px; margin-bottom:20px; }
.contact-intro > p { font-size:18px; max-width:35ch; }
.contact-alternative { border-top:1px solid var(--line); margin-top:40px; padding-top:24px; }
.contact-form { border-top:2px solid var(--ink); padding-top:24px; min-width:0; }
.contact-address { font-size:clamp(19px,2vw,26px); overflow-wrap:anywhere; }
.contact-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:22px; }
.contact-actions .secondary-button { margin-top:0; font:600 15px/1.4 var(--brand-font); }
.contact-form fieldset { border:0; padding:0; margin:24px 0 0; min-width:0; }
.form-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-field { margin-bottom:24px; min-width:0; }
.form-field label { display:block; font-weight:600; font-size:15px; margin-bottom:9px; }
.form-field label span { font-size:12px; font-weight:400; color:var(--muted); }
.form-field input,.form-field select,.form-field textarea { width:100%; border:1px solid #92958F; border-radius:3px; background:var(--paper); color:var(--ink); padding:13px 12px; font:400 16px/1.5 var(--brand-font); min-height:48px; }
.form-field textarea { resize:vertical; }
.form-field :is(input,select,textarea):focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.field-hint { font-size:13px; color:var(--muted); margin-top:12px; line-height:1.6; overflow-wrap:anywhere; }
.field-hint a { text-decoration:underline; }
.message-preview h2 { margin:12px 0 20px; }
.message-preview > p { margin-bottom:18px; overflow-wrap:anywhere; }
.message-body { white-space:pre-wrap; border-block:1px solid var(--line); padding:22px 0; }
.secondary-button { padding:12px 18px; min-height:44px; border:1px solid var(--ink); border-radius:3px; background:transparent; margin-top:16px; cursor:pointer; }
.journal-article { max-width:800px; margin:32px auto 0; }
.journal-article h1 { font-size:clamp(36px,4.5vw,60px); line-height:1.1; margin:20px 0; }
.article-deck { font-size:23px; color:var(--muted); line-height:1.5; }
.article-byline { margin:24px 0; font-size:13px; }
.article-art { margin:30px 0; }
.article-art img { width:100%; max-height:330px; object-fit:contain; mix-blend-mode:multiply; }
.article-art figcaption { text-align:center; margin-top:12px; }
.article-body { max-width:65ch; margin:auto; }
.article-body section { margin:36px 0; }
.article-body h2 { font-size:27px; margin-bottom:18px; }
.article-body p { font-size:19px; line-height:1.85; margin:16px 0; }
.article-source { color:var(--muted); font-size:14px; line-height:1.7; max-width:65ch; }
.article-source a,.article-body a,.article-resources a { color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
.article-contents { margin:28px 0 40px; padding:18px 0; border-block:1px solid var(--line); font-size:15px; }
.article-contents summary { cursor:pointer; font-weight:600; }
.article-contents nav { display:grid; gap:12px; padding:22px 0 4px; }
.article-body > h2 { margin-top:56px; scroll-margin-top:24px; line-height:1.3; }
.article-body figure { margin:34px 0; }
.article-body figure img { display:block; width:100%; height:auto; }
.article-body figcaption { margin-top:12px; font-size:14px; line-height:1.7; color:var(--muted); }
.article-body :is(ul,ol) { padding-left:24px; font-size:18px; line-height:1.8; }
.article-body li + li { margin-top:12px; }
.article-body blockquote { margin:28px 0; padding:4px 20px; border-left:3px solid var(--accent); background:#F0E6D833; }
.article-resources { border-top:3px solid var(--accent); margin-top:48px; padding:26px 0; }
.article-resources h2 { font-size:26px; margin-bottom:16px; }
.article-resources li { margin-top:14px; }
@media(max-width:1200px) { .site-nav { gap:10px 22px; } }
@media(max-width:760px) {
  .collaboration-band { display:block; padding:28px 24px; margin-top:40px; }
  .collaboration-band .action-button { margin-top:25px; }
  .home-journal,.journal-layout,.contact-layout { grid-template-columns:1fr; gap:30px; }
  .home-journal { padding-top:40px; }
  .journal-heading { display:block; }
  .journal-heading > p { margin-top:25px; }
  .journal-rail { border-bottom:1px solid var(--line); padding-bottom:20px; }
  .journal-rail > p + p { font-size:18px; }
  .journal-rail br { display:none; }
  .journal-card h2 { font-size:28px; }
  .contact-layout { margin-top:0; }
  .contact-intro { padding-top:0; }
  .form-pair { grid-template-columns:1fr; gap:0; }
  .article-deck { font-size:20px; }
  .article-body p { font-size:18px; }
}
.contact-heading { display:flex; align-items:end; justify-content:space-between; gap:35px; }
.contact-heading h1 { margin-top:16px; font-size:clamp(38px,4.5vw,60px); }
@media(max-width:760px) {
  .contact-heading { display:block; }
  .contact-heading > p { margin-top:22px; }
  .contact-heading > p br { display:none; }
  .contact-intro { order:2; }
}
