/* ---------- the Project's pages: one system for /info, /join and /faculty ----------
   Loaded after /clearing/assets/session.css, which supplies the colors, the faces and the
   page frame. The Clearing's session pages never load this file and keep their own layout.

   SIZE says rank: the higher a thing sits in the outline, the larger it is.
     page title > section title > item title (a Department, an Experiment, a person)
     > a page's lede > body > small print (link lines, notes, the foot)
   A section's lede, the line or two under its title saying what the section is, is body size.
   The marks (the Project's drawing over every page, The Clearing's script over its
   people on /faculty) are pictures, not text, and sit outside the scale.

   IBM PLEX MONO CAPITALS are not a step in that scale. They are a separate voice for
   tags and controls only: the site's menu, the eyebrow over a page title,
   the slide's word ("send"). Never a heading, a sentence, or a form question.

   MOTION, HOVER, LINKS AND CONTROLS are the whole site's, not this file's: see DESIGN.md
   (/tokens.css, /clearing/assets/links.css, controls.css, unfurl.js).

   SHADE: a lightly shaded box sets apart something inside an item that belongs to another
   part of the Project (a Faculty member's sessions at The Clearing, on their card).

   ITALIC GRAY says "this names what follows": a group's theme words, a form field's name,
   a card's "elsewhere". Always body size, always --soft.

   SPACE says belonging: the closer two things sit, the more they belong together.
     a field's name to its field  <  an item title to its text  <  a heading or caption
     to what it heads, or paragraph to paragraph  <  field to field  <  item to item
     <  group to group  <  section to section

   LINES: a hairline divides a section's largest parts from one another: the groups of
   Departments, the Experiments, the people. Nothing smaller gets one. It never comes
   between a heading or caption and what it introduces, and never above the first part
   or below the last. A section gets no line: its title already marks it. Two exceptions: a
   fold has a hairline below its last line, so a closed one doesn't float (Sha, Oct 7, 2026;
   the one above its title came off Oct 11); and a hairline above the foot closes the page.

   COLOR: DESIGN.md §8. */

:root{
  --type-section:clamp(1.75rem,5.2vw,2.1rem);  /* a section title: the Departments, join the Faculty (28-34px) */
  --type-item:clamp(1.25rem,3.4vw,1.45rem);    /* an item title: a Department, an Experiment, a person (20-23px) */
  --type-lede:1.12rem;                         /* the sentence under a page title (18px) */
  --type-body:1rem;                            /* 16px */
  --type-small:.875rem;                        /* 14px: link lines, notes, the foot */
  --type-label:.72rem;                         /* mono capitals (IBM Plex Mono); they stand as tall as body lowercase */

  --s-field:.4rem;                          /* a field's name to its field                      (6px)     */
  --s-title:.55rem;                         /* an item title to its text; the eyebrow to the title (9px)    */
  --s-head:1rem;                            /* a heading or caption to what it heads; paragraph to paragraph (16px) */
  --s-fields:1.5rem;                        /* one form field to the next                       (24px)    */
  --s-item:clamp(2.2rem,5.5vw,2.6rem);      /* item to item                                     (35-42px) */
  --s-group:clamp(3.6rem,9vw,4.4rem);       /* group to group, the hairline among it            (58-70px) */
  --s-section:clamp(5rem,12vw,6.2rem);      /* section to section                               (80-99px) */
}

.page{font-size:var(--type-body); line-height:1.62;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- the header: the Project's mark, the eyebrow, the page title, the lede ---------- */
.home-ce{display:inline-block; margin-bottom:clamp(1.75rem,5vw,2.25rem); line-height:0;}   /* a mark: it doesn't answer the cursor */
.home-ce img{height:clamp(6.4rem,18vw,10.8rem); width:auto; display:block;}
html[data-theme="dark"] .home-ce img{filter:invert(1);}
.mast .eyebrow{margin:0 0 var(--s-title);}
.mast h1{margin:0 0 var(--s-head);}
.mast .lede{font-size:var(--type-lede); line-height:1.6; max-width:34rem;}
.typefx .mast:not(.typed) .lede a{border-bottom-color:transparent;}   /* the underline develops with the words */
/* the header sits a group's distance from untitled content under it; a section title
   below it brings its own, larger margin, and the two collapse to that one */
.mast{margin-bottom:var(--s-group);}

/* ---------- a section ---------- */
.section-t{font-family:var(--serif); font-weight:var(--w-head); font-size:var(--type-section); line-height:1.1;
  letter-spacing:-.01em; color:var(--ink); margin:var(--s-section) 0 var(--s-head);}
.lede{font-size:var(--type-body); line-height:1.62; color:var(--ink-2); margin:0; max-width:34rem;}   /* a section's lede */
.prose p{color:var(--ink-2); margin:0 0 var(--s-head); max-width:34rem;}
.prose p:last-child{margin-bottom:0;}

/* ---------- groups: a caption and the items it names, a hairline between two groups ----------
   A section's lede (the line or two under its title saying what the section is) is one of
   its parts too, so a hairline also falls between it and the first group (Sha, Oct 2, 2026). */
.group{max-width:34rem;}
.group + .group,.lede + .group{margin-top:calc(var(--s-group) * .6); padding-top:calc(var(--s-group) * .4);
  border-top:1px solid var(--line);}
.caption{font-family:var(--serif); font-style:italic; font-feature-settings:var(--serif-alts-italic); font-size:var(--type-body); line-height:1.55;
  color:var(--soft); margin:0 0 var(--s-head); text-wrap:balance; text-align:center;}   /* centered over its group (Sha, Oct 7, 2026) */

/* ---------- lists of items ---------- */
.list{list-style:none; margin:0; padding:0; max-width:34rem;}
.list > .item + .item{margin-top:var(--s-item);}
/* a ruled list: its items are the section's largest parts, so a hairline sits between them */
.list.ruled > .item + .item{margin-top:calc(var(--s-item) / 2); padding-top:calc(var(--s-item) / 2);
  border-top:1px solid var(--line);}
/* a section's lede is one of its parts, so the hairline falls between it and the first item too,
   as between a lede and its first group (the Experiments on /info, Sha, Oct 7, 2026) */
.lede + .list.ruled{margin-top:calc(var(--s-item) / 2); padding-top:calc(var(--s-item) / 2); border-top:1px solid var(--line);}
/* a compact list: short items set as body text, spaced like paragraphs */
.list.compact > .item{color:var(--ink-2);}
.list.compact > .item + .item{margin-top:var(--s-head);}
.list b{font-weight:calc(var(--w-read) + 100); color:var(--ink);}
/* a term that is also a page (the Faculty, Visiting Faculty on /info): the term itself is the link (links.css) */
.item-t{font-family:var(--serif); font-weight:var(--w-head); font-size:var(--type-item); line-height:1.15;
  letter-spacing:-.01em; color:var(--ink); margin:0 0 var(--s-title);}
.item-t i{font-style:italic; font-feature-settings:var(--serif-alts-italic);}
/* an item's paragraphs; :where keeps these at zero weight so the classes below still win */
:where(.list > .item) > p{margin:var(--s-head) 0 0; color:var(--ink-2); max-width:34rem;}
:where(.list > .item) > .item-t + p{margin-top:0;}

/* ---------- the Departments (on /join, and folded on /info) ---------- */
.subject{scroll-margin-top:1.5rem;}

/* ---------- a folded section: its title opens and closes it ---------- */
/* a hairline below its last line, so a closed fold reads as a section and doesn't float between
   its neighbors (Sha, Oct 7, 2026; framed above as well until Oct 11, when Sha took that line off
   on /join and /info); it keeps the text's measure, so the chevron ends where the hairline ends */
.fold{max-width:34rem; margin-top:var(--s-section); padding:0 0 var(--s-head);   /* no line above, so no padding above: the title sits a section below what's above it, like every title */
  border-bottom:1px solid var(--line); scroll-margin-top:1.5rem;}
.fold > summary{list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:.5rem; -webkit-tap-highlight-color:transparent;
  padding:.45rem 0; margin:-.45rem 0;}   /* a 44px target that takes no extra room */
.fold > summary::-webkit-details-marker{display:none;}
.fold > summary .section-t{margin:0; flex:1 1 auto;}
/* the playlists' chevron (session.css .pl-chev): it turns as the section unrolls */
.fold-chev{flex:none; width:16px; height:16px; align-self:center; color:var(--soft);
  transition:transform var(--t-exhale) var(--ease-breath), color var(--answer-hover);}
.fold-chev svg{display:block; width:100%; height:100%;}
.fold > summary:hover .fold-chev{color:var(--ink);}
.fold[open] > summary .fold-chev{transform:rotate(180deg);}
.fold.closing > summary .fold-chev{transform:none;}   /* turns back the moment the exhale begins */
.fold-body{padding:0; display:flow-root;}   /* no padding, or its height can't reach 0; flow-root keeps its first margin inside it */
.fold-body[hidden]{display:none;}
.fold > summary:focus-visible{outline:2px solid var(--ink); outline-offset:4px;}
.fold-body > :first-child{margin-top:var(--s-head);}   /* title to its intro, inside the unfurling box: a heading's distance, as under every other title (the summary's padding is already cancelled by its margin) */
.fold-body > :last-child{margin-bottom:calc(var(--s-group) * .6 - var(--s-head));}   /* open, its last line sits a group's distance above the closing hairline, inside the unfurling box */

/* ---------- mono capitals (IBM Plex Mono): tags and controls only ---------- */
.label,.eyebrow{font-family:var(--label); font-size:var(--type-label); font-weight:400; text-transform:uppercase;
  letter-spacing:.14em; line-height:1.5; color:var(--soft);}

/* ---------- italic gray: a name for what follows ---------- */
.names{font-family:var(--serif); font-style:italic; font-feature-settings:var(--serif-alts-italic); font-size:var(--type-body); text-transform:none;
  letter-spacing:0; color:var(--soft);}

/* ---------- small print ---------- */
/* a link or status line under an item: "rhapsode.art", "session archive", "coming soon" (no arrows: DESIGN.md, Links) */
.more{font-family:var(--serif); font-size:var(--type-small); line-height:1.55; color:var(--soft);}
:where(.list > .item) > p.more{margin-top:var(--s-title);}
.list + .more,.prose + .more{margin-top:var(--s-head);}
/* how links answer the cursor: /clearing/assets/links.css, the one home (Oct 7, 2026) */
.note{font-family:var(--serif); font-size:var(--type-small); line-height:1.55; color:var(--soft); margin:0; max-width:34rem;}
/* the signature: the founders sign a page at its end, above the foot (Sha, Oct 7, 2026). Each name
   is a link that opens its bio card (bio.js), set at an item's size, with the role under it */
.sign{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-head) 1.5rem; max-width:34rem;   /* side by side at every width: two people signing together */
  margin-top:var(--s-section);}
.sign-who{margin:0; color:var(--ink);}
.sign-who > a{font-family:var(--serif); font-weight:var(--w-head); font-size:var(--type-item); line-height:1.25; letter-spacing:-.01em;}
.sign-role{display:block; margin-top:.35rem; font-style:italic; font-feature-settings:var(--serif-alts-italic); color:var(--soft);}
/* the foot of every Project page: a hairline, the Project's monogram, the colophon (Sha, Oct 7, 2026).
   The hairline is the one line that sits below a page's last part: it closes the page. */
.foot{display:flex; align-items:center; gap:.9rem; margin:var(--s-section) 0 0; padding-top:1.4rem;
  border-top:1px solid var(--line); font-family:var(--serif); font-size:var(--type-small); line-height:1.6; color:var(--soft);}
.foot p{margin:0;}
.foot-mark{display:block; flex:none; width:32px; height:32px;}
html[data-theme="dark"] .foot-mark{filter:invert(1);}

/* ---------- a form: each field's name in italic gray above it ---------- */
.form{max-width:34rem; margin-top:var(--s-head); display:grid; gap:var(--s-fields);}
.form label{display:block;}
.form .names{display:block; margin:0 0 var(--s-field); line-height:1.4;}
.form fieldset{border:0; margin:0; padding:0; min-width:0;}
.form legend{padding:0;}
.form input[type=text],.form input[type=email],.form textarea{width:100%; font:inherit; font-size:var(--type-body); color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:3px; padding:.62rem .75rem; transition:border-color var(--answer);}
.form textarea{min-height:7rem; resize:vertical; line-height:1.55;}
.form input::placeholder,.form textarea::placeholder{color:var(--soft); opacity:1;}
.form input:not([type=checkbox]):focus,.form textarea:focus{outline:none; border-color:var(--ink);}
.form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
/* a form sends with the slide, never a button (/clearing/assets/controls.css; DESIGN.md, Controls) */
.form .note{margin-top:calc(var(--s-head) - var(--s-fields));}
/* a field's error line is a control's, so it lives in /clearing/assets/controls.css (.err) */
.form .done{color:var(--ink-2); margin:0;}