/* tomashink.cz – osobní stránka ve stejném klidném stylu jako veřejný web HINKIF (tmavý pás, světlý obsah).
   Statický web bez skriptů; písma Newsreader a Source Sans 3 (licence OFL) z vlastního serveru. */

@font-face { font-family: "Newsreader"; font-weight: 200 800; font-display: swap; src: url(fonts/newsreader-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: "Newsreader"; font-weight: 200 800; font-display: swap; src: url(fonts/newsreader-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: "Source Sans 3"; font-weight: 200 900; font-display: swap; src: url(fonts/source-sans-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: "Source Sans 3"; font-weight: 200 900; font-display: swap; src: url(fonts/source-sans-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; }

:root {
  --band: #121b27;
  --band-ink: #f3f5f8;
  --band-ink-2: #a9b4c2;
  --band-line: rgba(255, 255, 255, .12);
  --rule: #c9ab8e;
  --page: #ffffff;
  --foot: #f5f6f8;
  --ink: #1b2430;
  --ink-2: #4a5566;
  --ink-3: #5d6878;
  --grid: #e4e8ed;
  --accent: #35597a;
  --gutter: 16px;
  --label-col: 200px;
  --serif: "Newsreader", ui-serif, Georgia, serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --band: #070a0f;
    --band-ink: #e8ecf1;
    --band-ink-2: #9aa6b4;
    --band-line: rgba(255, 255, 255, .08);
    --rule: #b99373;
    --page: #151c26;
    --foot: #10161f;
    --ink: #e8ecf1;
    --ink-2: #b3bdc9;
    --ink-3: #939eac;
    --grid: #273345;
    --accent: #8db4dc;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--page);
  color: var(--ink);
  font: 17px/28px var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.band a:focus-visible { outline-color: var(--band-ink); }
main:focus { outline: none; }
.nw { white-space: nowrap; }
cite { font-style: italic; }
.print-only { display: none; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--page); padding: 4px 8px; z-index: 1; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.cols { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 900px) {
  :root { --gutter: 32px; }
  .cols { grid-template-columns: var(--label-col) minmax(0, 1fr); gap: 32px; }
}

/* Pás */
.band { background: var(--band); color: var(--band-ink); padding-top: env(safe-area-inset-top); }
.strip { display: flex; justify-content: space-between; align-items: center; height: 56px; font-size: 15px; }
.mono { font-family: var(--serif); font-size: 20px; letter-spacing: .02em; color: var(--band-ink); text-decoration: none; }
.lang { color: var(--band-ink-2); text-decoration: none; }
.lang:hover { color: var(--band-ink); text-decoration: underline; }
.hero { padding-block: 56px 72px; }
@media (min-width: 900px) { .hero { padding-block: 104px 120px; } }
.hero-short { padding-block: 40px 48px; }
@media (min-width: 900px) { .hero-short { padding-block: 64px 72px; } }
.eyebrow { margin: 0; font-size: 12px; line-height: 20px; letter-spacing: .14em; text-transform: uppercase; color: var(--band-ink-2); font-weight: 600; }
.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(38px, 7vw, 64px);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.hero h1::before { content: ""; display: block; width: 28px; height: 2px; background: var(--rule); margin-bottom: 20px; }
.role { margin: 16px 0 0; font-family: var(--serif); font-size: clamp(20px, 3vw, 26px); line-height: 1.35; color: var(--band-ink); font-weight: 350; }
.lead { margin: 24px 0 0; max-width: 620px; color: var(--band-ink-2); font-size: 18px; line-height: 30px; }

/* Obsah */
main { flex: 1; }
.section { padding-block: 48px 0; }
.section:last-of-type { padding-bottom: 72px; }
@media (min-width: 900px) { .section { padding-top: 64px; } .section:last-of-type { padding-bottom: 104px; } }
.label { margin: 4px 0 0; font-size: 12px; line-height: 20px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.list { list-style: none; margin: 0; padding: 0; max-width: 760px; border-top: 1px solid var(--grid); }
.list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--grid); }
.list .what { font-weight: 600; }
.list .detail { grid-column: 1; color: var(--ink-2); }
.list .when { grid-column: 2; grid-row: 1; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prose { max-width: 680px; margin: 0; }
.grade { font-weight: 600; color: var(--ink); }
.more { margin: 16px 0 0; font-size: 15px; }
@media (min-width: 900px) { .more { grid-column: 2; } }
.list .detail a { overflow-wrap: anywhere; }

.prose p { margin: 0 0 16px; }
.bio { margin: 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--rule); }
.bio p { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 30px; color: var(--ink); }
.contact-intro { margin: 0 0 12px; max-width: 680px; }
.contact { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 24px; max-width: 760px; }
.contact dt { color: var(--ink-3); }
.contact dd { margin: 0; }

/* Patička */
footer { background: var(--foot); border-top: 1px solid var(--grid); color: var(--ink-3); font-size: 14px; line-height: 22px; padding: 28px 0 max(28px, env(safe-area-inset-bottom)); }
footer p { margin: 0; max-width: 760px; }

@media print {
  /* Životopis v PDF a tisk: bez tmavé plochy, dva sloupce jako na počítači, nic se nedělí uprostřed položky. */
  :root { color-scheme: light; --page: #fff; --ink: #111820; --ink-2: #3a4452; --ink-3: #56606e; --grid: #d9dee5; --accent: #1f3f5f; --rule: #b08d6a; }
  html, body { background: #fff; }
  body { font-size: 10.5pt; line-height: 1.5; min-height: 0; display: block; }
  .skip, .lang, .no-print, .screen-only { display: none !important; }
  .print-only { display: block; }
  span.print-only { display: inline; }
  .print-contact { margin: 3mm 0 0; font-size: 10.5pt; color: var(--ink); }
  .print-updated { margin: 6mm 0 0; font-size: 8.5pt; color: var(--ink-3); }
  .band { background: none; color: var(--ink); padding: 0; }
  .strip { display: none; }
  .wrap { max-width: none; padding-inline: 0; }
  .cols { grid-template-columns: 34mm minmax(0, 1fr); gap: 8mm; }
  .hero, .hero-short { padding-block: 0 4mm; }
  .hero h1 { font-size: 26pt; }
  .hero h1::before { margin-bottom: 4mm; }
  .role { font-size: 13pt; color: var(--ink-2); margin-top: 2mm; }
  .lead { color: var(--ink-2); font-size: 10.5pt; line-height: 1.5; margin-top: 3mm; max-width: none; }
  .eyebrow, .label { color: var(--ink-3); letter-spacing: .04em; }
  .section, .section:last-of-type { padding-block: 4mm 0; }
  .more { font-size: 9pt; grid-column: 2; margin-top: 2mm; }
  .list li, .contact > * { break-inside: avoid; }
  .list li { padding: 1.6mm 0; }
  .list .detail { font-size: 9.5pt; }
  h2 { break-after: avoid; }
  a { color: var(--ink); text-decoration: none; }
  footer { display: none; }
}