/* Center for Integrative Neuroscience — shared design system.
   Tokens and composition classes only. No element resets, so it is safe to
   add to a page that already has its own base styles. See DESIGN.md. */

:root{
  --s1:24px; --s2:36px; --s3:52px; --s4:80px; --s5:120px; --s6:160px;
  --paper:#FDFBF7; --cream:#F4F0E8; --ink:#252A2E; --slate:#5C6B73;
  --copper:#B07D3E; --oxblood:#661700; --rose:#A46F77; --hair:#DED6C8;
}

.sheet{max-width:1240px;margin:0 auto;background:var(--paper);box-shadow:0 1px 0 rgba(37,42,46,.05),0 28px 52px -26px rgba(37,42,46,.30)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 20px;font:600 15px/1 'Source Sans 3',Helvetica,sans-serif;text-decoration:none}
.skip:focus{left:0}

.field>*{min-width:0}
.field{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(16px,2vw,28px);padding-left:clamp(18px,4vw,56px);padding-right:clamp(18px,4vw,56px)}
.chapter{padding-top:var(--s5);padding-bottom:var(--s5)}
.chapter.tight{padding-top:var(--s4);padding-bottom:var(--s4)}
.chapter.cream{background:var(--cream)}
.folio{grid-column:1/3;align-self:start;position:sticky;top:var(--s2);font:700 10.5px/1.6 'Source Sans 3',Helvetica,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--slate)}
.folio b{display:block;font:600 2.4rem/1 'Source Serif 4',Georgia,serif;letter-spacing:-.03em;color:var(--copper);margin-bottom:6px}
.c-main{grid-column:3/10}
.c-wide{grid-column:3/12}
.c-full{grid-column:2/12}
.c-side{grid-column:10/13;padding-left:clamp(8px,1.4vw,18px);border-left:1px solid var(--hair)}

.lede{font-family:'Source Serif 4',Georgia,serif;font-size:clamp(1.375rem,2.4vw,1.75rem);line-height:1.42;letter-spacing:-.014em}
.body p+p{margin-top:1.05em}
.note{font:400 13px/1.62 'Source Sans 3',Helvetica,sans-serif;color:var(--slate)}
.note b,.eyebrow{display:block;font:700 9.5px/1.7 'Source Sans 3',Helvetica,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--rose);margin-bottom:6px}
.statement{padding:var(--s6) clamp(18px,4vw,56px);background:var(--paper)}
.statement p{font:600 clamp(2rem,5.6vw,4.4rem)/1.02 'Source Serif 4',Georgia,serif;letter-spacing:-.035em;max-width:17ch}
.statement em{font-style:normal;color:var(--oxblood)}
.statement.dark{background:var(--ink)}
.statement.dark p{color:var(--paper)}
.statement.dark em{color:#E8B49B}

.fig-scroll{overflow:visible}
.swipe{display:none}
figure{margin:0;min-width:0}
.fig-no{font:700 10px/1 'Source Sans 3',Helvetica,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--copper)}
.fig-title{font:600 clamp(1.125rem,2vw,1.4rem)/1.28 'Source Serif 4',Georgia,serif;letter-spacing:-.016em;margin-top:10px}
figcaption{margin-top:var(--s1);border-top:1px solid var(--hair);padding-top:12px;font:400 12px/1.6 'Source Sans 3',Helvetica,sans-serif;color:var(--slate);max-width:64ch}
figcaption .src{display:block;margin-top:6px;font:600 11px/1.5 'Source Sans 3',Helvetica,sans-serif;color:var(--ink);letter-spacing:.02em;text-transform:uppercase}
.pause img{width:100%;height:clamp(280px,42vw,520px);object-fit:cover}
.pause figcaption{border:0;max-width:none;margin:0;padding:14px clamp(18px,4vw,56px) 0;background:var(--paper)}

/* a numbered sequence. Three ideas do not need three boxes. */
.seq{counter-reset:seq;margin:0;padding:0;list-style:none}
.seq li{counter-increment:seq;padding:var(--s2) 0;border-top:1px solid var(--hair);display:grid;grid-template-columns:44px 1fr;gap:0 20px;align-items:start}
.seq li::before{content:counter(seq,decimal-leading-zero);font:600 1.05rem/1.3 'Source Serif 4',Georgia,serif;color:var(--copper)}
.seq h3{font-size:clamp(1.125rem,1.9vw,1.3125rem);line-height:1.3;margin-bottom:8px}
.seq p{max-width:56ch}

/* a plain list. No borders, no boxes. */
.plain{margin:0;padding:0;list-style:none;columns:2;column-gap:clamp(24px,4vw,56px)}
.plain li{break-inside:avoid;margin:0 0 18px}
.plain b{display:block;font:600 15px/1.35 'Source Serif 4',Georgia,serif;color:var(--ink)}
.plain span{font:400 14px/1.6 'Source Sans 3',Helvetica,sans-serif;color:var(--slate)}

/* dated dispatches */
.dispatch{border-left:2px solid var(--slate);padding:2px 0 2px 16px;margin-bottom:var(--s2)}
.dispatch[data-tone="alert"]{border-left-color:#8C2A0C}
.dispatch[data-tone="copper"]{border-left-color:var(--copper)}
.dispatch h3{font-size:1.1875rem;line-height:1.3;margin:0 0 8px;max-width:26ch}
.dispatch p{font-size:15px;line-height:1.62;color:#4A423C;max-width:44ch}
.dispatch .tag{display:block;font:700 9.5px/1.7 'Source Sans 3',Helvetica,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin-bottom:8px}

.tierrow{display:grid;grid-template-columns:auto 1fr;gap:0 clamp(16px,2.4vw,32px);align-items:baseline;padding:var(--s1) 0;border-top:1px solid var(--hair)}
.tierrow .code{font:600 clamp(1.5rem,3vw,2.1rem)/1 'Source Serif 4',Georgia,serif;letter-spacing:-.02em;color:var(--oxblood)}
.tierrow p{font-size:16px;line-height:1.6;color:#4A423C;max-width:44ch}

.weektabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s2)}
.weektabs button{font:700 11px/1 'Source Sans 3',Helvetica,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:12px 16px;cursor:pointer}
.meter{height:10px;background:#EDE7DC;position:relative;margin:18px 0 10px}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--oxblood);display:block}
.calc label{display:block;font:700 10.5px/1.5 'Source Sans 3',Helvetica,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:var(--slate)}
.calc input[type=range]{width:100%;accent-color:var(--oxblood);margin:12px 0 24px}
.calc input[type=number]{width:100%;margin-top:6px;padding:9px 10px;border:1px solid #C9BFAE;background:var(--paper);font:400 15px/1.3 'Source Sans 3',Helvetica,sans-serif;color:var(--ink)}
.calc .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-bottom:var(--s2)}
.bar{height:14px;background:#EDE7DC;position:relative;margin:8px 0 20px}
.bar i{position:absolute;inset:0 auto 0 0;display:block}

footer{background:var(--ink);color:#BFB6A9;padding:var(--s4) clamp(18px,4vw,56px)}
footer a{color:#C9BCA9}

@media (max-width:900px){
  :root{--s4:56px;--s5:76px;--s6:96px}
  .field{grid-template-columns:1fr}
  .folio{position:static;grid-column:auto;display:flex;align-items:baseline;gap:12px;margin-bottom:var(--s1)}
  .folio b{margin:0;font-size:1.6rem}
  /* Every child spans the single column. Listing class names here missed the two
     chapter-02 children that set grid-column inline, and an inline grid-column
     in a one-column grid invents implicit columns, so the figure and the text
     sat side by side at 390 with the folio on top of them. Cover everything. */
  .field > *{grid-column:1 / -1 !important}
  .c-side{border-left:2px solid var(--rose);border-top:0;padding-left:14px;margin-top:var(--s2)}
  .plain{columns:1}
  .hero-img{object-position:69% 34%}
  /* Scoped to .hero on purpose. This was written for the home page, whose hero
     is a full-bleed photograph that has to fill the phone. Written as a bare
     #top it also hit every other page, and #top is just the skip-link anchor,
     so About carried 287px of dead space under its heading and Privacy carried
     385px. Only the photographic hero gets a floor. */
  section#top.hero{min-height:min(76vh,660px)}
  .fig-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(90deg,#000 calc(100% - 22px),rgba(0,0,0,0) 100%)}
  .fig-scroll svg{min-width:640px}
  .swipe{display:block;margin-top:10px;font:400 11.5px/1.5 'Source Sans 3',Helvetica,sans-serif;color:var(--slate);font-style:italic}
  .calc .grid2{grid-template-columns:1fr}
}

/* Navigation on a phone. One scrolling row with a fade edge, never a wrapped
   two-row bar.
   This has now broken three times, each time because the header markup changed
   underneath the selector: first .mast, then a header with an inner div, and
   with the August redesign a header that is itself the flex row with the link
   and the nav as direct children. So select `header` itself rather than any
   particular wrapper, and let the wrapper rules stay for the pages that still
   have one. A header taller than 140px at 390px means this stopped working;
   build/check.js asserts it on every page. */
@media (max-width:820px){
  header, header.mast{display:block !important;padding-top:10px !important;padding-bottom:0 !important}
  header > a, header.mast > a{display:inline-flex !important}
  header > div{padding-left:0 !important;padding-right:0 !important}
  header nav{width:100%;flex-wrap:nowrap !important;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
    margin-top:8px;gap:0 !important;border-top:1px solid var(--hair);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),rgba(0,0,0,0) 100%)}
  header nav::-webkit-scrollbar{display:none}
  header nav > a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:46px;padding:12px 11px !important;white-space:nowrap}
  header nav > a:first-child{padding-left:0 !important}
  header nav > a:last-child{margin-right:34px !important}
  header.mast img{height:42px !important}
  header > a img{height:42px !important}
}

/* The hero crop. The photograph is 1568 by 672 and the dog sits well right of
   centre, so a phone, which crops horizontally under object-fit:cover, loses
   him entirely at the default 50%. That shipped twice and she reported it both
   times, once as "the dog is pushed out of view" and once as "the dog is still
   off the page on mobile", the second time because an inline object-position
   outranked the stylesheet. Kept here and nowhere else, and asserted in
   build/check.js by comparing the computed value at 1440 against 390. */
[data-hero]{object-position:50% 44% !important}
@media (max-width:820px){ [data-hero]{object-position:70% 42% !important} }
@media (max-width:430px){ [data-hero]{object-position:73% 40% !important} }

/* The mobile hero, continued. Below 760px the handoff takes the copy off the
   photograph and puts it on cream underneath, which is the right call: pale
   text over a busy sunset at 390px is unreadable. It does that by setting the
   copy to position:static, and there is the catch. A static element paints
   underneath a positioned one, and the photograph is position:absolute with
   inset:0 across the whole section. So the headline, both paragraphs and the
   call to action were rendered, in the DOM, findable by a crawler, and
   invisible to a person: dark ink under a dark photograph.
   The fix is to take the photograph out of the absolute layer as well, so the
   section becomes two ordinary stacked blocks. The overlay gradient goes with
   it, since its only job was to make text readable over the image and there is
   no longer any text over the image. */
@media (max-width:760px){
  [data-hero-photo]{display:block !important;min-height:0 !important}
  [data-hero-photo] > img[data-hero]{position:relative !important;height:52svh !important;min-height:300px}
  [data-hero-photo] > div[aria-hidden="true"]{display:none !important}
}

/* A continued folio. Subordinate to the chapter above it, so the 01 to 09
   count stays readable. */
.folio.sub{color:#8E97A0}
.folio.sub b{font-size:1.5rem;color:#C9A87C}

/* The hero focal point. Kept here and nowhere else: an inline object-position on
   the img beats any stylesheet rule without !important, which is how the mobile
   crop silently reverted once already. The photo is 1568x672, so a phone frame
   shows only the middle 23 percent and a centered crop loses the dog. */
.hero-img{object-position:50% 42%}
@media (max-width:820px){ .hero-img{object-position:69% 34%} }
@media (max-width:430px){ .hero-img{object-position:71% 32%} }