/* 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%}
  section#top{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. Written to match both header structures on the site: the home
   page's flat .mast, and the inner-div header on the other four. */
@media (max-width:820px){
  header.mast{display:block !important;padding-top:10px !important;padding-bottom:0 !important}
  header.mast > a{display:inline-flex !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}
}

/* 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%} }