/* cisstudio.eu — the one sheet of its four pages (home and privacy policy,
   French and English). Themes follow the visitor's system alone, no switch and
   no script. Every value below is the app's (src/css/tokens.css, under the
   same token name) except the ones site/README.md § "Design decisions" lists. */

/* Inter Tight 400 and 600, latin + latin-ext — the app's own files, deposited
   beside the pages with their licence (fonts/OFL.txt). Newsreader is not
   deposited: no page writes a Czech word, so none needs the serif signature. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-tight-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-tight-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-tight-600-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-tight-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Colours — the app's light theme. */
  --bg:        #f7f5f1;
  --text:      #11141a;
  --muted:     #5a5d65;
  --line:      #d8d4cc;
  --line-soft: #e7e3da;
  --chip:      #ecebe6;

  /* The stone's ramp — the app's `.about-mark`. Two ramps swapped positionally,
     the silhouette sharing --mark-3, so one is never reordered. */
  --mark-1: #6887cb;
  --mark-2: #5676bc;
  --mark-3: #4564ad;
  --mark-4: #3959a4;
  --mark-5: #2d4b98;
  --mark-6: #1d3a8a;

  /* Type and spacing the pages take from the app. */
  --font-ui:       'Inter Tight', system-ui, sans-serif;
  --fs-eyebrow:    11px;
  --fs-meta:       13px;
  --fs-body:       17px;
  --fs-about-name: 27px;
  --ls-eyebrow:    1.5px;
  --r-pill:        999px;
  --kaik-src-pv:   6px;   /* the chip: the word card's source pill */
  --kaik-src-ph:   11px;
  --kaik-src-gap:  5px;   /* label → outgoing arrow */

  /* The values the pages add — site/README.md § "Design decisions". */
  --measure:    34rem;
  --gutter:     22px;
  --page-pt:    22px;
  --fs-title:   var(--fs-about-name);
  --lh-prose:   1.6;
  --section-mt: 34px;
  --section-mb: 10px;
  --mark-mt:    32px;
  --foot-mt:    40px;
  --foot-pb:    28px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0e1014;
    --text:      #ecedef;
    --muted:     #9aa0aa;
    --line:      #262a32;
    --line-soft: #1c2028;
    --chip:      #1f232b;

    --mark-1: #f7f5f1;
    --mark-2: #d3dff3;
    --mark-3: #b4c7ec;
    --mark-4: #a0b8e6;
    --mark-5: #8aa6de;
    --mark-6: #6f8fd3;
  }
}

/* Past 600px the page has room: the gutter opens, the title grows a step and
   the vertical rhythm relaxes — the mockup's 1024px boards. */
@media (min-width: 601px) {
  :root {
    --gutter:   40px;
    --page-pt:  56px;
    --fs-title: 34px;
    --mark-mt:  44px;
    --foot-mt:  56px;
    --foot-pb:  40px;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  /* The app's Inter Tight alternates, so the site's letterforms are the app's. */
  font-feature-settings: "ss01", "cv11";
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--page-pt) var(--gutter) 0;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: var(--fs-meta);
}

.studio {
  font-weight: 600;
  color: var(--muted);
}

h1 {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.2;
}

/* The policy has no mark: its title takes the mark's place under the header,
   at the mark's narrow distance whatever the width. */
.policy h1 {
  margin-top: 32px;
}

/* The stone opens the Lemma block, not the page: it is the app's mark, not the
   studio's. 67 × 40 keeps the drawing's own ratio (design/logo/README.md). */
.mark {
  display: block;
  margin: var(--mark-mt) 0 16px;
}

.tag {
  margin: 4px 0 0;
  color: var(--muted);
}

.state {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  font-size: var(--fs-meta);
  color: var(--muted);
}

/* Exactly the word card's source pill, the one filled object of « À propos ». */
.chip {
  padding: var(--kaik-src-pv) var(--kaik-src-ph);
  border-radius: var(--r-pill);
  background: var(--chip);
  color: var(--muted);
}

/* Section titles: the eyebrow of « À propos ». */
h2 {
  margin: var(--section-mt) 0 var(--section-mb);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

p {
  margin: 0 0 10px;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

.lede {
  margin-top: 26px;
}

.sub {
  margin: 6px 0 0;
  color: var(--muted);
}

.date {
  margin: 14px 0 0;
  font-size: var(--fs-meta);
  color: var(--muted);
}

/* One recipient of « Ce qui quitte le téléphone »: a title over a paragraph,
   the « D'où viennent les données » template. */
.blk {
  margin: 18px 0 0;
}

.blk-t {
  margin: 0 0 2px;
  font-weight: 600;
}

.link-row {
  margin-top: 14px;
}

/* Links: the weight, and the outgoing arrow when one leaves the site — never
   the colour (design/about.md § "No accent on this screen"). The underline is
   the web's addition: on a page, the weight alone does not read as a link. */
a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentColor;
}

.out {
  margin-left: var(--kaik-src-gap);
  vertical-align: baseline;
}

.foot {
  margin-top: var(--foot-mt);
  border-top: 1px solid var(--line-soft);
  padding: 16px 0 var(--foot-pb);
  font-size: var(--fs-meta);
  color: var(--muted);
}