/* ═════════════════════════════════════════════════════════════════════════
   ABOUT — About · Team (Family & Friends) · Contact
   Three pages over the site, one at a time. Each is a spread with two sides:
   home on the left (Prague, the studio, the family) and the other side on
   the right (where the work goes, the friends we bring in, the address you
   write to). No labels over the pages and no rules for show: the few lines
   there are mean something.
     About    "Prague is home." with who we are; "The work travels." with
              how we work from afar, tucked in beside the first one's short
              last line (about.js), the two together in the middle
     Team     the family and the friends side by side in the middle, flush
              right; Family twice as big (it leads), & Friends at its size,
              sitting on Family's baseline; each role set small over its
              name; the friends' names on one line, a slot-machine reel
              (about.js) that the wheel or a finger spins faster
     Contact  the message top left, a big Say Hi! with the address to write to
              in the middle, the P.S. (the time in Prague and where you are)
              bottom right; the footer carries the postal address
   The pages are plain white paper. (The wallpaper of SC marks — the eight faces at random, a brick
   pattern, the text with a halo of paper — is switched off since 22. 10. 2026: <html class="ab-wall">
   brings it back.) A push past a page's end scrolls the pages on as one sheet, motion-blurred
   (about.js; with reduced motion: a plain fade).
   Behaviour: about.js · copy: texty/ABOUT.md (the Czech: data-cs in index.html)
   ═════════════════════════════════════════════════════════════════════════ */

#about-view {
  --ink: #1B1819;
  --paper: #FFFFFF;
  --soft: color-mix(in srgb, var(--ink) 56%, transparent);    /* roles */
  --rule: color-mix(in srgb, var(--ink) 26%, transparent);    /* the postcard's lines */
  --g: max(16px, 2.5vw);                                     /* outer gutter (= the panels' side margin) */
  --cg: clamp(10px, 1.35vw, 26px);                           /* column gap */
  --pad-y: calc(3vh + 96px);                                 /* clear of the corner logo (+ language) and the timeline */
  --head: clamp(40px, min(5.4vw, 9.2vh), 104px);             /* the two sides' heads */
  --text: clamp(17px, min(1.5vw, 2.7vh), 26px);              /* the text: one size for all of it */
  --name: clamp(26px, min(3.5vw, 6vh), 60px);                /* the team's names */
  --say: clamp(28px, min(3.7vw, 6.6vh), 66px);               /* the postcard's message */
  --mail: clamp(22px, min(2.5vw, 4.4vh), 44px);              /* the address to write to */
  --hi: clamp(72px, min(11vw, 19vh), 210px);                 /* Contact's Say Hi! */
  --note: 13px;                                              /* the roles (the labels' type) */
  position: fixed;
  inset: 0;
  z-index: 90;                              /* like Services / a project: above the wheel, below logo (95) + menu (150) */
  background: var(--paper);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#about-view.open { opacity: 1; pointer-events: auto; }

#about-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#about-scroll::-webkit-scrollbar { display: none; }
#about-scroll:focus { outline: none; }
/* plain white paper: the text fades out under the chrome — logo + timeline on top, the menu below */
html:not(.ab-wall) #about-view::before, html:not(.ab-wall) #about-view::after { content: ''; position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none; }
html:not(.ab-wall) #about-view::before { top: 0; height: calc(2.4vh + 70px); background: linear-gradient(var(--paper) 62%, color-mix(in srgb, var(--paper) 0%, transparent)); }
html:not(.ab-wall) #about-view::after { bottom: 0; height: calc(3vh + 84px); background: linear-gradient(color-mix(in srgb, var(--paper) 0%, transparent), var(--paper) 58%); }

/* (switched off) with the wallpaper: a halo of paper keeps everything readable over it — the text, the
   timeline and the corner logo (no bands of paper top and bottom: the wallpaper runs everywhere) */
.ab-wall #about-view { --halo: 0 0 1px var(--paper), 0 0 3px var(--paper), 0 0 6px var(--paper), 0 0 10px var(--paper), 0 0 16px var(--paper); }
.ab-wall #about-timeline :is(a, button) { text-shadow: var(--halo); }
.ab-wall #about-timeline .tl-bar { box-shadow: 0 0 0 3px var(--paper), 0 0 10px 5px var(--paper); }
.ab-wall body.ab-open #corner-logo .cl-name { text-shadow: 0 0 2px #FFFFFF, 0 0 5px #FFFFFF, 0 0 10px #FFFFFF, 0 0 16px #FFFFFF; }
.ab-wall body.ab-open #corner-logo .cl-sc { filter: drop-shadow(0 0 3px #FFFFFF) drop-shadow(0 0 7px #FFFFFF); }

/* ── chrome: the timeline (no × — About is a page of its own, like Services) ── */
#about-timeline { z-index: 5; }

/* ── the pages ─────────────────────────────────────────────────────────── */
.ab-sec {
  box-sizing: border-box;
  min-height: 100%;                                        /* one page = at least the screen */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--cg);
  align-content: start;
  padding: var(--pad-y) var(--g) calc(3vh + 108px);
  transition: opacity 0.4s ease;
  /* papered with the SC marks (about.js draws the tile; a page carries its own, so the marks move with it) */
  background-image: var(--ab-wall, none);
  background-size: var(--ab-wall-size, auto);
  background-position: 50% var(--wall-y, 0px);
  background-repeat: repeat;
  text-shadow: var(--halo, none);                        /* (with the wallpaper: the text reads as on a blank page) */
}
/* the wallpaper between two pages while the sheet scrolls from one to the other (about.js) */
.ab-fill { position: absolute; left: 0; right: 0; display: none; pointer-events: none;
  background: var(--ab-wall, none) 50% var(--wall-y, 0px) / var(--ab-wall-size, auto) repeat; }
.ab-sec[hidden] { display: none !important; }
/* the change: the page on screen fades out, the next one fades in (about.js) — nothing slides */
#about-scroll.leaving > .ab-sec:not([hidden]) { opacity: 0; transition: opacity 0.32s ease; }
.ab-sec.arriving { opacity: 0; transition: none; }

/* for screen readers only (the page's heading in one piece; the surname to each first name) */
.ab-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── the two sides ─────────────────────────────────────────────────────── */
.ab-here { grid-column: 1 / 7; }
.ab-there { grid-column: 7 / 13; }
.ab-head {
  margin: 0;
  font-weight: 700;
  font-size: var(--head);
  line-height: 0.95;
  letter-spacing: -0.045em;
}
.ab-text {
  margin: calc(var(--head) * 0.42) 0 0;
  max-width: 29em;
  font-size: var(--text);
  line-height: 1.38;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.ab-text + .ab-text { margin-top: 0; text-indent: 1.6em; }   /* a new paragraph: an indent, as in a book */

/* ── About: home here, the work over there ─────────────────────────────── */
#ab-about .ab-there { margin-top: max(calc(var(--head) * 1.55 + var(--text) * 3.4), 30vh); }   /* (phones, portrait tablets: below) */
/* Desktop: the two in the middle, the second one tucked in beside the short last line of the first, like
   a piece of Tetris (about.js: layoutAbout places them; this is only the frame for it) */
#ab-about.tetris { display: block; position: relative; }
#ab-about.tetris .ab-here, #ab-about.tetris .ab-there { position: absolute; margin: 0; }
#ab-about.tetris .ab-head { white-space: nowrap; }

/* ── Team: the family and the friends side by side in the middle, set flush right ─────────── */
/* Family leads: its word twice the size, its names bigger; & Friends stays the size it was and sits on
   Family's baseline (so it hangs a little lower). The family's photos will come under its word, each
   name under its photo — no room kept for them until they're here. */
#ab-team {
  display: flex;
  flex-wrap: wrap;                                         /* (so the pair sits in the middle of the page) */
  justify-content: center;
  align-content: center;
  align-items: baseline;                                   /* Family's and & Friends' bottom lines on one line */
  column-gap: clamp(56px, 8vw, 150px);
  text-align: right;
}
#ab-team .ab-here, #ab-team .ab-there { display: flex; flex-direction: column; align-items: flex-end; max-width: min(42vw, 34em); }
#ab-team .ab-head { white-space: nowrap; }
#ab-team .ab-here .ab-head { font-size: calc(var(--head) * 2); line-height: 0.9; letter-spacing: -0.05em; }
#ab-team .ab-text { max-width: 20em; }
.ab-lock { margin-top: calc(var(--head) * 0.75); }
.ab-fam, .ab-cast { list-style: none; margin: 0; padding: 0; font-size: var(--name); }
.ab-fam { font-size: calc(var(--name) * 1.4); }
.ab-fam .ab-role { font-size: calc(var(--note) * 1.15); }
.ab-cast { margin-top: calc(var(--head) * 0.75); }
/* each role over its name */
.ab-fam li, .ab-cast li { display: flex; flex-direction: column; align-items: flex-end; row-gap: 2px; }
.ab-fam li + li, .ab-cast li + li { margin-top: calc(var(--name) * 0.42); }
.ab-role {
  font: 500 var(--note)/1.25 var(--lbl);
  letter-spacing: -0.005em;
  text-transform: lowercase;
  color: var(--soft);
}
.ab-name {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

/* the friends' reel (about.js): one name at a time in a window one line tall; the names spin through it
   like a slot machine's reel and stop with a little kick. The list itself stays for screen readers. */
.ab-cast.reeled { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ab-reel {
  --pad: calc(var(--name) * 0.24);                         /* the window's lip above and below the name (where it fades) */
  position: relative;
  margin: calc(var(--head) * 0.75 - var(--pad)) 0 calc(0px - var(--pad));
  height: calc(var(--note) * 1.25 + 2px + var(--name) * 1.08 + var(--pad) * 2);
  font-size: var(--name);
  overflow: hidden;
  touch-action: none;                                      /* (a finger on it spins it; the page stays) */
  -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(transparent, #000 var(--pad), #000 calc(100% - var(--pad)), transparent);
          mask-image: linear-gradient(transparent, #000 var(--pad), #000 calc(100% - var(--pad)), transparent);
}
.ab-reel-strip { position: absolute; left: 0; right: 0; top: var(--pad); will-change: transform; }
.ab-reel-item {
  position: absolute; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: flex-end; row-gap: 2px;
}

/* ── Contact: the message top left, Say Hi! in the middle, the P.S. bottom right ──────────── */
#ab-contact { grid-template-rows: auto 1fr auto auto; padding-bottom: 0; }
.ab-say {
  grid-column: 1 / 9;
  grid-row: 1;
  margin: 0;
  max-width: 13em;
  font-weight: 700;
  font-size: var(--say);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.ab-hi {                                                   /* the whole of it writes to us */
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--mail) * 0.5);
  padding: 4vh 0;
  color: inherit;
  text-decoration: none;
  text-align: center;
}
.ab-hi-say {
  font-weight: 700;
  font-size: var(--hi);
  line-height: 0.9;
  letter-spacing: -0.055em;
  white-space: nowrap;
}
.ab-mail {
  font-weight: 700;
  font-size: var(--mail);
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent);
  transition: text-decoration-color 0.3s ease;
}
.ab-hi:hover .ab-mail, .ab-hi:focus-visible .ab-mail { text-decoration-color: var(--ink); }
.ab-ps {
  grid-column: 7 / -1;
  grid-row: 3;
  justify-self: end;
  margin: 0 0 6vh;
  max-width: 24em;
  font-size: var(--text);
  line-height: 1.38;
  letter-spacing: -0.01em;
  text-align: right;
}
.ab-ps time { font-variant-numeric: tabular-nums; }
#ab-contact > .sc-foot { grid-column: 1 / -1; grid-row: 4; margin: 0; }

/* ── tablets / small laptops ────────────────────────────────────────────── */


/* ── phones (and portrait tablets: one column) ─────────────────────────── */
@media (max-width: 767px), (max-width: 1099px) and (orientation: portrait) {
  #about-view {
    --g: 20px;
    --pad-y: calc(2.4vh + 116px);
    --head: clamp(38px, 11.2vw, 60px);
    --text: 17px;
    --name: clamp(28px, 8.2vw, 40px);
    --say: clamp(30px, 8.8vw, 44px);
    --mail: clamp(21px, 6.4vw, 30px);
  }
  .ab-here, .ab-there { grid-column: 1 / -1; }
  #ab-about .ab-there { margin-top: 7vh; }
  /* Team: one under the other, set flush left as the rest of the column; each role over its name */
  #ab-team { flex-direction: column; flex-wrap: nowrap; align-content: stretch; justify-content: flex-start; text-align: left; }
  #ab-team .ab-here, #ab-team .ab-there { align-items: flex-start; max-width: none; }
  #ab-team .ab-there { margin-top: 9vh; }
  .ab-lock, .ab-cast { margin-top: 4.5vh; }
  .ab-reel { margin-top: calc(4.5vh - var(--pad)); }
  /* (the corner logo and the pill are taller here: the paper fades out lower) */
  html:not(.ab-wall) #about-view::before { height: calc(2.4vh + 104px); background: linear-gradient(var(--paper) 72%, color-mix(in srgb, var(--paper) 0%, transparent)); }
  .ab-fam li, .ab-cast li, .ab-reel-item { align-items: flex-start; }
  #ab-team .ab-here .ab-head { font-size: min(calc(var(--head) * 2), 24vw); }
  .ab-fam { font-size: min(calc(var(--name) * 1.4), 11vw); }
  /* Contact: the message, Say Hi!, the P.S. (still to the right), the footer */
  #about-view { --hi: clamp(64px, 21vw, 120px); }
  .ab-say { grid-column: 1 / -1; }
  .ab-hi { padding: 7vh 0; }
  .ab-ps { grid-column: 1 / -1; margin-bottom: 5vh; }
  #ab-contact > .sc-foot { margin-top: 2vh; }
}
/* portrait tablets: the phones' column, tablet type */
@media (min-width: 768px) and (max-width: 1099px) and (orientation: portrait) {
  #about-view {
    --g: max(20px, 2.5vw);
    --pad-y: calc(2.4vh + 124px);
    --head: clamp(56px, 8.6vw, 92px);
    --text: 21px;
    --name: clamp(34px, 5vw, 50px);
    --say: clamp(40px, 6vw, 60px);
    --mail: clamp(26px, 3.8vw, 38px);
  }
  .ab-text { max-width: 30em; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-sec, #about-scroll.leaving > .ab-sec:not([hidden]) { transition: opacity 0.14s ease; }
}