/* holon.css: shared base and objects for the holon research sub pages
   (research, research/netineti, attention, people, privacy, manifesto).
   layers: tokens.css > this file (base, shared objects) > longform.css (long form pages) >
   pages/*.css (components) > utilities.css. the home page (index.html) does not load this
   file; its base and objects live in home.css. this file only holds what repeated byte for
   byte across the sub pages, so each page's own css keeps just its own layout. */

/* no page on this site scrolls sideways */
html { overflow-x: clip; }

/* focus ring: wayfinding for keyboards, identical everywhere */
:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; border-radius: 2px; }

/* press feedback lives on pointer down, for everything that acts: in fast (60 ms),
   out a touch slower (150 ms). summary is inert on pages with no <details> */
a:active, summary:active { opacity: 0.55; transition-duration: 60ms; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
summary { transition: opacity 150ms var(--ease); }

/* hover only where a pointer hovers; the resting/focus colour always stays inherited
   (this also beats foundation's default link colour on pages that load style.css, eg people) */
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-color: currentColor; } }
a:hover, a:focus { color: inherit; }

/* small links reach a 44 px tap target without moving the layout. the selector list is
   the union of every page's own link containers; a page without a given class just never
   matches that part of it */
.top a, .crumb a, nav.toc a, footer a, .go a, .refs a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.top a { color: var(--quiet); }

/* footer: same quiet, small type everywhere. each page keeps its own margin/padding,
   since footer position differs with each page's layout */
footer { font-size: 14px; color: var(--quiet); }
footer a { color: var(--quiet); }

/* reduced motion: every page agrees link/summary opacity fades instead of snapping.
   page-specific reduced-motion rules (hairlines, folds, smooth scroll resets) stay inline,
   next to the feature they turn off */
@media (prefers-reduced-motion: reduce) {
  a, summary { transition: opacity 0.2s var(--ease); }
}

/* -----------------------------------------------------------------------
   shared only between the long-form pages (dhyan, research/netineti).
   none of these class names are reused with a different meaning by research,
   people or privacy, so the rules below are simply inert there. */

.wide { max-width: 36rem; margin-left: var(--gutter); padding-right: 28px; }
.it { font-style: italic; }
.small { font-size: 15px; line-height: 1.6; }
.mid { font-size: clamp(27px, 3.4vw, 36px); line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 1.4rem; text-wrap: balance; }
.part { margin-top: 14vh; }
.crumb { font-size: 15px; letter-spacing: 0.04em; color: var(--quiet); margin: 0 0 1.6rem; }
.crumb a { color: inherit; }
main.paper { padding: 18vh 0 4vh; }

/* pairs: a term and its gloss, on hairlines */
.techs { list-style: none; margin: 1.2rem 0 0; padding: 0; max-width: 36rem; }
.techs li { display: grid; grid-template-columns: 11rem 1fr; gap: 0 1.6rem; padding: 1rem 0; border-top: 1px solid rgba(25,25,24,0.12); }
.techs b { font-weight: 400; }
.techs span { color: var(--quiet); }
.techs.tight li { padding: 0.6rem 0; }
.techs.tight { font-size: 17px; }

/* a fold: details.layer is the card, details.fold is the panel that opens and closes.
   the js that drives it (wraps .in's children in .in-b, toggles .is-open on click,
   settles on transitionend) is identical in dhyan.html and research-netineti.html and
   stays inline there, next to the markup it walks (see docs/motion-audit.md) */
details.layer { border: 1px solid rgba(25,25,24,0.16); border-radius: 6px; padding: 1.3rem 3rem 1.3rem 1.4rem; margin: 0 0 1rem; position: relative; max-width: 36rem; }
details.layer summary { list-style: none; cursor: pointer; }
details.layer summary::-webkit-details-marker { display: none; }
details.layer .t { display: block; font-size: 22px; }
details.layer .b { display: block; color: var(--quiet); }
details.layer .chev { position: absolute; right: 1.2rem; top: 1.7rem; width: 14px; height: 14px; color: var(--quiet); transition: transform 0.4s var(--ease); }
html:not(.js) details.layer[open] .chev, details.layer.is-open .chev { transform: rotate(180deg); }
/* the card is something you touch: it presses to 0.985 on pointer down */
details.layer { transition: transform 150ms var(--ease); }
details.layer:has(> summary:active) { transform: scale(0.985); }
details.layer > summary:active { opacity: 1; }
details.layer { --gap: 1.2rem; }
/* the panel's height and opacity open on the zen curve (400 ms) and close the same way.
   a transition, so a second tap mid-way turns it round from where it is */
.js details.fold > .in { display: grid; grid-template-rows: 0fr; margin-top: 0; opacity: 0; transition: grid-template-rows 0.4s var(--ease), opacity 0.4s var(--ease); }
.js details.fold.is-open > .in { grid-template-rows: 1fr; opacity: 1; }
.js details.fold > .in > .in-b { min-height: 0; min-width: 0; }
.js details.fold.moving > .in > .in-b { overflow: hidden; }
/* the gap above the panel travels inside the clip, so it closes with it */
.js details.fold > .in > .in-b::before { content: ''; display: block; height: var(--gap, 1.2rem); }

/* the product name uses the same face as the holon logo (gilroy is declared in tokens.css) */
.k-mark { font-family: "Gilroy-ExtraBold", "Helvetica Neue", sans-serif !important; font-weight: 800; font-style: normal; letter-spacing: -0.03em; text-transform: lowercase; }