/* Ateliér Osnova (ukázkový web): technický výkres a CAD z devadesátých let.
   Úvod je „světlotisk“ (světlý papír), deník a článek modrotisk. */
:root {
  --paper: #0b3566; --paper2: #0e4380; --ink: #eaf3ff; --muted: #9fc0e6; --line: rgba(234, 243, 255, .5);
  --grid: rgba(234, 243, 255, .07); --grid2: rgba(234, 243, 255, .13);
  --cyan: #7fe3ff; --red: #ff6a4d; --gold: #ffcf5a;
  --fd: "Barlow Condensed", "Arial Narrow", sans-serif; --fb: "IBM Plex Sans", system-ui, sans-serif;
  --fm: "IBM Plex Mono", ui-monospace, monospace; --fh: "Caveat", cursive;
  --wrap: min(1180px, 100% - 32px);
  color-scheme: dark;
}
.whiteprint {
  --paper: #f2efe4; --paper2: #e9e4d4; --ink: #123f78; --muted: #4b6488; --line: rgba(18, 63, 120, .55);
  --grid: rgba(18, 63, 120, .06); --grid2: rgba(18, 63, 120, .11);
  --cyan: #0b6fb8; --red: #cf3216; --gold: #b07a00;
  color-scheme: light;
}
* { box-sizing: border-box }
html { overflow-x: clip }
body {
  margin: 0; min-height: 100svh; overflow-x: clip; color: var(--ink); font: 17px/1.6 var(--fb);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid2) 1px, transparent 1px), linear-gradient(90deg, var(--grid2) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
a { color: inherit }
img { display: block; max-width: 100% }
:focus-visible { outline: 2px dashed var(--red); outline-offset: 4px }
.wrap { width: var(--wrap); margin-inline: auto }
h1, h2, h3 { font-family: var(--fd); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1; margin: 0 }
.mono { font-family: var(--fm) }
.label { font: 500 12px/1.2 var(--fm); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 }
.note { font: 600 22px/1.1 var(--fh); color: var(--red); transform: rotate(-3deg); display: inline-block }

/* Pruh nabídky jako v CADu pro DOS */
.cadbar { border-bottom: 2px solid var(--line); background: color-mix(in srgb, var(--paper) 88%, var(--ink)) }
.cadbar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; min-height: 52px; font: 500 14px/1 var(--fm) }
.cadbar .logo { font: 700 20px/1 var(--fd); letter-spacing: .06em; text-decoration: none; margin-right: auto; display: flex; align-items: center; gap: 10px; text-transform: uppercase }
.cadbar .logo svg { width: 26px; height: 26px }
.cadbar nav { display: flex; flex-wrap: wrap; gap: 4px }
.cadbar nav a { text-decoration: none; padding: 8px 10px; border: 1px solid transparent }
.cadbar nav a:hover { border-color: var(--line) }
.cadbar nav a[aria-current] { background: var(--ink); color: var(--paper) }

/* List výkresu s rámečkem a zónami */
.sheet { position: relative; margin: 28px auto 40px; border: 2px solid var(--line); padding: clamp(18px, 4vw, 44px); outline: 1px solid var(--line); outline-offset: 6px }
.sheet::before, .sheet::after { position: absolute; font: 500 11px/1 var(--fm); color: var(--muted); letter-spacing: 2.2em }
.sheet::before { content: "A B C D E F"; top: -22px; left: 16px }
.sheet::after { content: "1 2 3 4 5 6"; bottom: -22px; right: -16px }
.sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 28px }
.sheet-head h1 { font-size: clamp(34px, 6vw, 64px) }

/* Kótovací čára */
.dim { display: flex; align-items: center; gap: 8px; font: 12px/1 var(--fm); color: var(--muted); margin: 6px 0 }
.dim::before, .dim::after { content: ""; flex: 1; height: 0; border-top: 1px solid var(--line) }
.dim span { white-space: nowrap }

/* Razítko (rohové pole výkresu) */
.titleblock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 2px solid var(--line); font: 13px/1.3 var(--fm) }
.titleblock > div { padding: 8px 10px; border: 1px solid var(--line); min-width: 0 }
.titleblock small { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.titleblock .wide { grid-column: span 2 }
.titleblock .full { grid-column: 1 / -1 }
.titleblock b { font: 700 22px/1.1 var(--fd); text-transform: uppercase; overflow-wrap: anywhere }

/* Příkazová řádka dole */
.cmdline { border-top: 2px solid var(--line); font: 13px/1.5 var(--fm); color: var(--muted); padding: 12px 0 18px }
.cmdline .wrap { display: grid; gap: 2px }
.cmdline b { color: var(--ink); font-weight: 500 }
.cmdline i { font-style: normal; animation: caret 1s steps(1) infinite }
.cmdline nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px }
@keyframes caret { 50% { opacity: 0 } }

.btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px; font: 700 20px/1 var(--fd); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; background: var(--ink); color: var(--paper); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--red) }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--red) }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: none }

/* ===== Úvod (světlotisk) ===== */
.hero { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center }
.hero h1 { font-size: clamp(46px, 7.4vw, 104px); line-height: .92; margin: 14px 0 22px }
.hero h1 em { font-style: normal; color: var(--red); position: relative }
.hero h1 em::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -.06em; height: .14em; background: var(--red); clip-path: polygon(0 40%, 100% 0, 98% 70%, 2% 100%); opacity: .8 }
.hero p.lead { font-size: clamp(18px, 1.8vw, 21px); max-width: 32em; margin: 0 0 28px }
.cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center }
.mailplain { font: 500 17px/1.3 var(--fm); overflow-wrap: anywhere }
.figure { position: relative; margin: 0 }
.figure .art { width: 100%; height: auto; display: block; border: 2px solid var(--line); background: var(--paper2); stroke: var(--ink); fill: none; stroke-width: 1.6 }
.figure figcaption { font: 13px/1.4 var(--fm); color: var(--muted); margin-top: 8px }
.figure .note { position: absolute; right: -6px; top: -26px }
.callout { position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); display: grid; place-items: center; font: 700 17px/1 var(--fd) }

.block { margin-top: clamp(48px, 8vw, 88px) }
.block > h2 { font-size: clamp(30px, 4.4vw, 48px); margin: 8px 0 22px }
.details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px }
.detail { border: 1.5px solid var(--line); padding: 20px; background: color-mix(in srgb, var(--paper) 70%, transparent) }
.detail svg { width: 100%; height: 92px; margin-bottom: 14px; stroke: var(--ink); fill: none; stroke-width: 1.5 }
.detail h3 { font-size: 26px; margin: 4px 0 8px }
.detail p { margin: 0; color: var(--muted) }
.flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: s }
.flow li { position: relative; padding: 18px 28px 18px 0; border-top: 2px solid var(--ink) }
.flow li::before { counter-increment: s; content: counter(s); position: absolute; top: -19px; left: 0; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); display: grid; place-items: center; font: 700 18px/1 var(--fd) }
.flow li:not(:last-child)::after { content: ""; position: absolute; right: 8px; top: -7px; border: 6px solid transparent; border-left: 12px solid var(--ink) }
.flow h3 { font-size: 24px; margin: 26px 0 6px }
.flow p { margin: 0; color: var(--muted) }
.work { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: center; border: 1.5px solid var(--line); padding: 18px; text-decoration: none }
.work .art { width: 100%; height: auto; display: block; border: 1px solid var(--line); stroke: var(--ink); fill: none; stroke-width: 1.4 }
.work h3 { font-size: 30px; margin: 6px 0 8px }
.work p { margin: 0 0 10px; color: var(--muted) }
.work:hover { background: var(--paper2) }
.about { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px }
.about p { margin: 0 0 14px; font-size: 18px }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 16px 0 0 }
.chips li { font: 13px/1 var(--fm); padding: 7px 9px; border: 1px solid var(--line) }
.contact .titleblock b.mail { font: 600 clamp(18px, 3vw, 30px)/1.2 var(--fm); text-transform: none }

/* ===== Blog (deník dílny, ozvěna PHP webů) ===== */
.phpbar { font: 13px/1.4 var(--fm); color: var(--muted); border: 1px solid var(--line); padding: 8px 12px; margin-bottom: 20px; overflow-wrap: anywhere }
.phpbar b { color: var(--cyan); font-weight: 500 }
.blog { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start }
.side { display: grid; gap: 18px }
.box { border: 1.5px solid var(--line) }
.box h2 { font-size: 17px; letter-spacing: .14em; background: var(--ink); color: var(--paper); padding: 7px 10px }
.box ul { list-style: none; margin: 0; padding: 8px 10px; font: 14px/1.9 var(--fm) }
.box ul a { text-decoration: none } .box ul a:hover { color: var(--cyan); text-decoration: underline }
.box ul a::before { content: "» "; color: var(--red) }
.box .inner { padding: 10px; font-size: 14px }
.poll label { display: block; font-size: 14px; margin: 6px 0 2px }
.poll .bar { height: 8px; border: 1px solid var(--line) }
.poll .bar i { display: block; height: 100%; width: var(--v); background: var(--cyan) }
.counter { display: inline-flex; gap: 2px; font: 600 18px/1 var(--fm) }
.counter b { background: var(--ink); color: var(--paper); padding: 4px 5px }
.post { border: 1.5px solid var(--line); margin-bottom: 18px }
.post-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--paper2) }
.post-head h2 { font-size: clamp(24px, 3vw, 30px) }
.post-head h2 a { text-decoration: none } .post-head h2 a:hover { color: var(--cyan) }
.post-head .label { align-self: center }
.post .txt { padding: 12px 14px; margin: 0 }
.post-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 14px; border-top: 1px dashed var(--line); font: 12px/1.5 var(--fm); color: var(--muted) }
.post-foot a { margin-left: auto; color: var(--cyan) }
.pager { display: flex; gap: 6px; font: 14px/1 var(--fm) }
.pager a, .pager b { padding: 8px 11px; border: 1px solid var(--line); text-decoration: none }
.pager b { background: var(--ink); color: var(--paper) }

/* Článek */
.article { max-width: 720px }
.article h1 { font-size: clamp(40px, 6vw, 68px); margin: 8px 0 12px }
.article .lead { font-size: 20px; color: var(--muted); margin: 0 0 18px }
.article h2 { font-size: 30px; margin: 34px 0 10px }
.article ul { padding-left: 22px } .article li { margin: 4px 0 }
.article li::marker { content: "⌀ "; color: var(--cyan) }
.article pre { font: 14px/1.6 var(--fm); border: 1.5px solid var(--line); border-left: 6px solid var(--cyan); padding: 14px 16px; overflow-x: auto; background: var(--paper2); margin: 18px 0 6px }
.article code { font-family: var(--fm); font-size: .92em }
.article figure { margin: 26px 0; border: 1.5px solid var(--line); padding: 14px }
.article figure svg { width: 100%; height: auto; stroke: var(--ink); fill: none; stroke-width: 1.4 }
.article figcaption { font: 12px/1.4 var(--fm); color: var(--muted); margin-top: 8px }
.comments { margin-top: 40px }
.comment { display: grid; grid-template-columns: 54px 1fr; border: 1px solid var(--line); margin-bottom: 10px }
.comment .av { display: grid; place-items: center; font: 700 26px/1 var(--fd); background: var(--paper2); border-right: 1px solid var(--line) }
.comment div:last-child { padding: 8px 12px }
.comment p { margin: 4px 0 0 }
.form { display: grid; gap: 10px; border: 1.5px dashed var(--line); padding: 14px; margin-top: 16px }
.form input, .form textarea { font: 15px var(--fm); color: var(--ink); background: transparent; border: 1px solid var(--line); padding: 9px }

/* Poznámka, že jde o ukázkový web */
.concepts { font: 12px/1.6 var(--fm); text-align: center; padding: 10px 16px 26px; color: var(--muted) }
.concepts a { margin: 0 6px }

@media (max-width: 860px) {
  .hero, .about, .work, .blog { grid-template-columns: 1fr }
  .blog .side { order: 2 }
  .figure { max-width: 340px }
  .details, .flow { grid-template-columns: 1fr }
  .flow { gap: 30px }
  .flow li::after { display: none }
  .titleblock { grid-template-columns: 1fr 1fr }
  .sheet::before, .sheet::after { display: none }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }