/* Shared shell: same navigation and footer on every page, without JavaScript.
   Footer follows content directly (no forced full-viewport stretch): on short
   pages captured at an oversized screenshot window this used to leave a large
   empty gap between the last section and the footer. */
body{display:flex;flex-direction:column}
/* Short pages (e.g. the empty journal) have no scrollbar; reserve its space so the
   header does not jump sideways when moving between pages on desktop. */
html{scrollbar-gutter:stable}
main{width:100%}
.site-header,footer{width:100%;margin:0 auto}
.site-header{gap:28px}
.site-header .logo{min-height:44px;display:inline-flex;align-items:center}
.site-header .language-switch{flex-shrink:0}
/* Wordmark: "TerezAI" handwritten-note style — a small tilted light-blue paper note with a strip of sand tape
   and a sand offset shadow (same as the notes on the home page, gallery and journal), a hand-drawn rust underline
   and a hand-drawn spark next to it. Text stays real text; the drawings are aria-hidden SVG. */
.site-header .logo{gap:12px;font-size:28px;letter-spacing:-1.4px;line-height:1;-webkit-tap-highlight-color:transparent}
.site-header .logo .logo-note{position:relative;display:inline-block;padding:9px 16px 13px 13px;background:var(--blue);box-shadow:4px 5px 0 var(--sand);transform:rotate(-2deg);font:700 1em/1 Arial,Helvetica,sans-serif;font-style:normal;color:var(--ink);letter-spacing:inherit}
.site-header .logo .logo-note::before{content:'';position:absolute;top:-7px;left:34%;width:38px;height:13px;background:var(--sand);opacity:.92;transform:rotate(-6deg)}
.site-header .logo .logo-ai{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;color:var(--rust);letter-spacing:-1px;margin-left:1px}
.site-header .logo .logo-line{position:absolute;left:11px;right:12px;bottom:5px;width:calc(100% - 23px);height:7px;overflow:visible;fill:none}
.site-header .logo .logo-line path{fill:none;stroke:var(--rust);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.site-header .logo .logo-spark{width:22px;height:22px;flex:none;fill:none;stroke:var(--rust);stroke-width:2.2;stroke-linecap:round;transform:rotate(-8deg)}
.site-header .logo:hover,.site-header .logo:active{color:var(--ink)}
/* Mouse only: the note lifts and straightens a little, the underline is drawn again, the spark turns. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .site-header .logo .logo-note{transition:transform 240ms ease,box-shadow 240ms ease}
  .site-header .logo .logo-spark{transition:transform 320ms ease}
  .site-header .logo:hover .logo-note{transform:translateY(-2px) rotate(-.6deg);box-shadow:5px 7px 0 var(--sand)}
  .site-header .logo:hover .logo-spark{transform:rotate(40deg) scale(1.08)}
  .site-header .logo:hover .logo-line path{animation:logo-redraw 480ms ease-out both}
}
@keyframes logo-redraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* Scroll: while the page scrolls, the spark slowly turns (one quiet quarter turn over the whole page). */
@supports(animation-timeline:scroll()){
  @media(prefers-reduced-motion:no-preference){
    .site-header .logo .logo-spark{animation:logo-spark-turn linear both;animation-timeline:scroll(root block)}
    @keyframes logo-spark-turn{from{rotate:0deg}to{rotate:90deg}}
  }
}
@media(prefers-reduced-motion:reduce){.site-header .logo .logo-note,.site-header .logo .logo-spark{transition:none}}
.site-header .logo:focus-visible{outline-offset:8px}
/* Footer = a quiet sign-off at the end of every page (not a second hero, no links): the small tilted blue
   paper note with tape carrying the signature (the same note as the logo in the header, so each page opens
   and closes with it) and a short subline; the year sits apart on the right, on the note's bottom line. */
footer{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 48px;min-height:0;padding-top:48px;padding-bottom:48px}
footer .footer-note{position:relative;background:var(--blue);box-shadow:5px 6px 0 var(--sand);transform:rotate(-2deg);padding:16px 22px 14px 18px}
footer .footer-note::before{content:'';position:absolute;top:-8px;left:38%;width:44px;height:14px;background:var(--sand);opacity:.92;transform:rotate(-6deg)}
footer .footer-signature{position:relative;width:fit-content;margin:0 0 8px;font:italic 26px/1.3 Georgia,serif;color:var(--ink);padding-bottom:8px}
footer .footer-signature span{color:var(--rust)}
footer .footer-signature::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;border-bottom:2px solid var(--rust);border-radius:0 0 48% 22%;transform:rotate(-3deg)}
footer .footer-tagline{margin:0;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--brown)}
footer .footer-year{margin:0 0 4px;font-size:12px;letter-spacing:2px;color:var(--muted)}
/* Movement only for a real mouse: on a phone a tap would leave the note "stuck" mid-hover. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  footer .footer-note{transition:transform 240ms ease,box-shadow 240ms ease}
  footer .footer-note:hover{transform:translateY(-2px) rotate(-.6deg);box-shadow:6px 8px 0 var(--sand)}
}
@media(prefers-reduced-motion:reduce){footer .footer-note{transition:none}}
/* Phone: stacked, the year under the note, both on the left edge. */
@media(max-width:600px){
  footer{flex-direction:column;align-items:flex-start;gap:20px;padding-top:40px;padding-bottom:32px}
}
/* End of Galerie / Články / O mně: one "continue" link to the next numbered page (01 → 02 → 03 → 01),
   so a visitor on a phone never hits a dead end before the footer. Same eyebrow + Georgia title +
   rust arrow and hand-drawn underline as the rest of the site; no box, no card. */
.page-next{border-top:1px solid var(--line);margin-top:24px;padding-top:40px}
.page-next a{display:inline-flex;flex-direction:column;gap:10px;min-height:44px;-webkit-tap-highlight-color:transparent}
.page-next .eyebrow{margin:0}
.page-next-title{position:relative;display:inline-flex;align-items:baseline;gap:14px;width:fit-content;padding-bottom:10px;font:normal 40px/1.15 Georgia,serif;letter-spacing:-1px;color:var(--ink)}
.page-next-title::after{content:"";position:absolute;left:0;right:30px;bottom:0;height:6px;border-bottom:2px solid var(--rust);border-radius:0 0 48% 22%/0 0 6px 4px;transform:rotate(-1.5deg);transform-origin:left}
.page-next-arrow{font-size:28px;color:var(--rust)}
.page-next a:hover .page-next-title,.page-next a:active .page-next-title{color:var(--rust)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .page-next-arrow,.page-next-title::after{transition:transform .22s ease}
  .page-next a:hover .page-next-arrow{transform:translate(3px,-3px)}
  .page-next a:hover .page-next-title::after{transform:rotate(-1.5deg) scaleX(1.08)}
}
@media(max-width:600px){.page-next{padding-top:32px}.page-next-title{font-size:32px}.page-next-arrow{font-size:24px}}
/* Active language = olive chip only; the rust underline belongs to the current
   page in the main menu, so the two markers never mix. */
.site-header .language-switch a[aria-current]{text-decoration:none}
/* Main menu in the paper-note language of the site: Georgia like the footer links, the current page marked
   by the same hand-drawn rust underline as in the footer and on Pokračovat (not a plain text underline).
   Language switch = its own small tilted clay paper note with sand tape and sand shadow (a counterpart to the
   blue logo note on the other side of the header); the current language sits on an olive chip. Every language
   link is at least 48 × 44 px with a gap between the two, so a thumb never hits the wrong one. */
.site-header .main-nav a{position:relative;font:normal 17px/1.2 Georgia,'Times New Roman',serif;letter-spacing:-.2px}
.site-header .main-nav a[aria-current]{text-decoration:none}
.site-header .main-nav a span{position:relative;display:inline-block;padding:4px 0 7px}
.site-header .main-nav a[aria-current] span::after{content:"";position:absolute;left:-2px;right:-2px;bottom:1px;height:4px;border-bottom:2px solid var(--rust);border-radius:0 0 40% 30%;transform:rotate(-2deg)}
.site-header .language-switch{position:relative;align-items:center;gap:6px;padding:5px;margin-left:8px;border-left:0;background:var(--clay);box-shadow:4px 5px 0 var(--sand);transform:rotate(1.5deg)}
.site-header .language-switch::before{content:'';position:absolute;top:-7px;left:40%;width:34px;height:12px;background:var(--sand);opacity:.92;transform:rotate(5deg)}
.site-header .language-switch a{min-width:56px;min-height:44px;padding:0 12px;font-size:14px;color:var(--ink)}
.site-header .language-switch a[aria-current]{background:var(--olive)}
.site-header .language-switch a:not([aria-current]):hover{color:var(--rust)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .site-header .language-switch{transition:transform 240ms ease,box-shadow 240ms ease}
  .site-header .language-switch:hover{transform:translateY(-2px) rotate(.6deg);box-shadow:5px 7px 0 var(--sand)}
}
@media(prefers-reduced-motion:reduce){.site-header .language-switch{transition:none}}
/* Touch: no grey/blue system flash on tap, the link turns rust instead
   (same colour as hover with a mouse). */
.site-header a{-webkit-tap-highlight-color:transparent}
.site-header a:active{color:var(--rust)}
@media(max-width:1000px){
  .site-header{flex-wrap:wrap;justify-content:space-between;gap:0;padding-top:14px;padding-bottom:10px}
  /* Menu items touch each other: the space between words is part of the tap area,
     so a tap between two items still lands on one. The nav is pulled left by the
     padding so "Úvod" lines up with the logo and the last item with the edge. */
  .site-header .main-nav{order:3;width:calc(100% + 24px);margin:8px -12px 0;gap:0;justify-content:flex-start;flex-wrap:wrap}
  .site-header .main-nav a{padding:0 12px}
  .site-header .language-switch{order:2;width:auto;margin:0 4px 0 0;gap:6px;padding:4px;border:0}
}
/* Phone: the four items share the full width and touch each other, so there is no
   dead space between them; outer ones keep their text at the logo / right edge. */
@media(max-width:600px){
  .site-header .main-nav a{flex:1 1 auto}
  .site-header .main-nav a:first-child{justify-content:flex-start}
  .site-header .main-nav a:last-child{justify-content:flex-end}
}
@media(max-width:380px){
  .site-header .logo{font-size:22px;gap:8px}
  .site-header .logo .logo-spark{display:none}
  .site-header .main-nav{width:calc(100% + 16px);margin:8px -8px 0}
  .site-header .main-nav a{padding:0 8px}
  .language-switch a{padding:0 7px}
  .site-header .language-switch a{min-width:52px;padding:0 8px;font-size:13px}
}
/* Page to page (same-origin links, Chromium/Safari with cross-document view transitions; elsewhere a normal jump):
   a short quiet cross-fade instead of a white flash, and the paper note of a work / story glides between the list
   and its own page (gallery preview ↔ work paper, list note ↔ article note share one view-transition-name).
   Reduced motion: the switch is instant (no animation); the opt-in itself stays on, so a preference change
   between two pages never aborts a transition. No JavaScript. */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:180ms;animation-timing-function:ease}
  ::view-transition-group(*){animation-duration:320ms;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none}
}
/* Back from a work / story lands on its own row in the list; keep a little air above it. */
.gallery-work,.article-list>li{scroll-margin-top:32px}
/* "Next" link with a very long title: wraps under the eyebrow instead of running off a phone screen. */
.page-next a,.page-next-title{max-width:100%}
.page-next-title{overflow-wrap:anywhere}
/* the tilted hand-drawn line stays a short stroke under the start of a long (two-line) title instead of cutting
   through its second line; every title up to ~420 px (all of today's) keeps exactly the same line */
.page-next-title::after{max-width:420px}