/* ============================================================================
   Jarmila Králová — "Ateliér" design system.
   Warm salon aesthetic built around her own left artwork stripe (her actual
   sloupec.png tile + motiv-uvodni.jpg watercolour, no gradients, no blend
   modes — see .rail below). This file is the FOUNDATION: tokens, self-hosted
   fonts, the ribbon, the shared .mount card unit, and site chrome. Individual
   page content (hero, detail, prose…) is styled per-page in later tasks.
   Source of truth: scratchpad/mockup/refined_B3.html (approved design).
   ========================================================================== */

:root {
  --paper: #F2E9D6;
  --ink:   #3d3327;
  --soft:  #7a6c56;
  --gold:  #B07D2B;
  --blue:  #1D5379;
  --line:  #dccfb2;
  --print: #fbf7ef;
  --panel: #ECE1C8;
  --rail:  150px;

  --wrap-max: 1680px;
  --wrap-pad: clamp(40px, 4vw, 96px);
}

/* ============================================================================
   Self-hosted fonts (GDPR — no Google Fonts CDN).
   Fraunces 300/500 (+ italic) for display, Caveat 500 for her handwritten
   notes, EB Garamond 400 (+ italic) for body copy.
   ========================================================================== */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/fraunces-300.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/fraunces-300i.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-500.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-500i.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/caveat-500.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ebgaramond-400.woff2") format("woff2");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ebgaramond-400i.woff2") format("woff2");
}

/* ============================================================================
   Base
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.script { font-family: "Caveat", cursive; }
.disp   { font-family: "Fraunces", Georgia, serif; }
.eyebrow {
  letter-spacing: .34em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gold);
}

.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--print); padding: .6rem 1rem;
}
.skip-link:focus { left: 0; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}

/* ============================================================================
   PAGE = her left artwork RAIL + main
   HER stripe, reconstructed faithfully from her own two assets:
     sloupec.png     — the woven gold horizontal-line texture, tiled down the
                        column (repeat-y).
     motiv-uvodni.jpg — that same texture with her watercolour (pomegranate +
                        lily) already painted onto it, placed at the very top.
   No gradients, no blend modes, no re-derivation — these are her assets,
   used exactly as she made them.
   ========================================================================== */
.page { display: flex; align-items: stretch; min-height: 100vh; }

.rail {
  width: var(--rail); flex: none; position: relative;
  background: url("../stripe/sloupec.png") repeat-y top left;
  background-size: var(--rail) auto;
  box-shadow: inset -8px 0 18px -16px rgba(90, 60, 10, .35);
}
.rail .art {
  position: absolute; top: 0; left: 0;
  width: var(--rail); height: calc(var(--rail) * 1.48);
  background: url("../stripe/motiv-uvodni.jpg") no-repeat top left;
  background-size: var(--rail) auto;
}
.main { flex: 1; min-width: 0; }

/* ============================================================================
   Chrome — header
   ========================================================================== */
.site-head {
  border-bottom: 1px solid var(--line);
}
.site-head__inner {
  max-width: var(--wrap-max); margin: 0 auto; padding: 30px var(--wrap-pad) 14px;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
}
.wordmark { text-decoration: none; color: var(--ink); line-height: 1; }
.wordmark__name {
  display: block; font-family: "Fraunces"; font-weight: 500; font-size: 23px;
}
.wordmark__role {
  display: block; font-family: "EB Garamond"; letter-spacing: .3em;
  text-transform: uppercase; font-size: 10.5px; color: var(--soft); margin-top: 3px;
}

.site-nav { display: flex; gap: 24px; align-items: center; font-size: 15px; }
.site-nav a {
  color: var(--ink); text-decoration: none; padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
  border-color: var(--gold); color: var(--gold);
}
.lang-switch { display: inline-flex; gap: .4em; font-size: 14px; color: var(--soft); }
.lang-switch a { text-decoration: none; color: inherit; }
.lang-switch a.is-active { color: var(--gold); }

/* Vzdělávání dropdown */
.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-group__label {
  color: var(--ink); text-decoration: none; padding-bottom: 3px;
  border-bottom: 1.5px solid transparent; white-space: nowrap;
}
.nav-group:hover .nav-group__label, .nav-group:focus-within .nav-group__label,
.nav-group.is-current .nav-group__label { border-color: var(--gold); color: var(--gold); }
.nav-caret { font-size: 11px; }
.nav-submenu {
  position: absolute; top: 100%; left: -14px; min-width: 210px; padding: 10px 0; margin-top: 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 24px 44px -22px rgba(70, 50, 20, .45);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60;
}
.nav-group:hover .nav-submenu, .nav-group:focus-within .nav-submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-submenu a {
  padding: 8px 20px; border-bottom: 0; white-space: nowrap; color: var(--ink);
}
.nav-submenu a:hover, .nav-submenu a[aria-current="page"] { color: var(--gold); border-bottom: 0; }

.nav-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: var(--ink);
  margin: 5px 0; transition: transform .2s, opacity .2s;
}

/* ============================================================================
   Flash messages
   ========================================================================== */
.flash { max-width: var(--wrap-max); margin: 0 auto; padding: .75rem var(--wrap-pad) 0; }
.flash__item {
  margin: 0 0 .5rem; padding: .7rem 1rem; background: var(--print);
  border-left: 3px solid var(--gold); font-size: .92rem;
}

/* ============================================================================
   Masthead — home hero. Ported from scratchpad/mockup/refined_B3.html.
   ========================================================================== */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.7fr) clamp(280px, 26%, 400px);
  gap: clamp(32px, 3vw, 60px); align-items: center;
  /* padding-top/bottom only — .hero shares its element with .wrap; longhand
     top/bottom leaves .wrap's left/right gutter untouched. Kept tight so the
     title + poem + introduction all land above the fold beside the portrait. */
  padding-top: clamp(24px, 2.4vw, 44px); padding-bottom: clamp(28px, 2.6vw, 48px);
}
.hero .eyebrow { margin-bottom: clamp(12px, 1vw, 18px); }
.hero h1 {
  font-family: "Fraunces"; font-weight: 300; font-size: clamp(36px, 3.4vw, 66px);
  line-height: 1.02; letter-spacing: -.5px; margin-bottom: 6px;
}
.hero .tag {
  font-family: "Caveat"; font-size: clamp(24px, 1.8vw, 34px); color: var(--blue);
  transform: rotate(-3deg); display: inline-block; margin: 2px 0 0;
}
/* The poem + introduction, side by side inside the hero, above the fold. */
.hero__duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 2.6vw, 52px); align-items: start; margin: clamp(18px, 1.8vw, 30px) 0 clamp(20px, 2vw, 30px); }

/* Italic lede paragraph — used for the hero intro and reused for the
   "Z ateliéru" note lower on the page. white-space:pre-line preserves the
   line breaks in her hand-written intro poem (a plain textarea slot, not
   rich text). */
.lede { font-size: clamp(18px, 1.2vw, 22px); color: #5c4f3d; font-style: italic; max-width: 46ch; margin-bottom: 28px; white-space: pre-line; line-height: 1.65; }
.section-intro .lede { margin: 0 auto 24px; }
/* the hero's hand-written poem — larger + a touch more air, scales with screen */
.lede--poem { font-size: clamp(17px, 1.15vw, 21px); line-height: 1.65; max-width: 34ch; margin-bottom: clamp(20px, 1.6vw, 28px); }

.portrait { position: relative; justify-self: center; width: 100%; }
.portrait .mat {
  background: var(--print); padding: clamp(12px, 1vw, 18px) clamp(12px, 1vw, 18px) clamp(40px, 3vw, 58px);
  box-shadow: 0 34px 70px -30px rgba(70, 50, 20, .6);
  transform: rotate(2.2deg); max-width: min(100%, 380px); margin: 0 auto;
}
.portrait .mat img { width: 100%; display: block; }
.portrait .mat .cap { font-family: "Caveat"; font-size: 25px; color: var(--soft); text-align: center; margin-top: 9px; }
.portrait .tape {
  position: absolute; z-index: 3; width: 116px; height: 32px;
  background: rgba(200, 170, 110, .42); top: -13px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
}

/* ============================================================================
   Shared card unit — her paintings, "pinned" to a mat like a salon wall.
   .mount is the base card; use it bare (e.g. featured salon) or with
   .mount--wall for the denser masonry gallery-wall layout.
   ========================================================================== */
.mount {
  display: block;
  background: var(--print);
  padding: 11px 11px 38px;
  box-shadow: 0 24px 46px -26px rgba(70, 50, 20, .55);
  transition: transform .25s ease, box-shadow .25s ease;
  text-decoration: none;
}
.mount img { display: block; width: 100%; }
/* Reserve each wall image's box up front (aspect-ratio, overridden inline per
   painting from its real dimensions) so the masonry doesn't reflow/flicker as
   the images stream in. object-fit keeps the artwork undistorted in that box. */
.mount--wall img { aspect-ratio: 4 / 5; object-fit: cover; }
.mount.is-hidden { display: none; }
.mount .t {
  font-family: "Caveat"; font-size: 22px; text-align: center;
  margin-top: 7px; color: #4a4030;
}
.mount .m {
  font-size: 11.5px; letter-spacing: .05em; text-align: center;
  color: var(--soft); text-transform: uppercase; margin-top: 2px;
}
.mount:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 54px -26px rgba(70, 50, 20, .62);
}

.mount--wall {
  break-inside: avoid;
  margin: 0 0 22px;
  padding: 8px 8px 28px;
  box-shadow: 0 18px 38px -24px rgba(70, 50, 20, .5);
}
.mount--wall .t { font-size: 19px; margin-top: 5px; }
.mount--wall .m { font-size: 10.5px; letter-spacing: normal; text-transform: none; }
.mount--wall:hover { box-shadow: 0 22px 42px -24px rgba(70, 50, 20, .58); }

/* ============================================================================
   Featured salon — a handful of paintings pinned at gentle, varied angles.
   ========================================================================== */
.section-intro { text-align: center; max-width: 640px; margin: 0 auto; padding: clamp(18px, 2.2vw, 30px) 0 6px; }
.section-intro .eyebrow { margin-bottom: 12px; }
.section-intro h1, .section-intro h2 { font-family: "Fraunces"; font-weight: 300; font-size: 46px; margin-bottom: 10px; }
.section-intro .note { font-family: "Caveat"; font-size: 25px; color: var(--blue); }

/* "Z ateliéru" studio photo + intro prose, pinned side by side like a small
   salon corner. Mirrors the .mat/.tape "mounted photo-print" treatment from
   .portrait (masthead), scaled down, inside the otherwise centered
   .section-intro. */
.section-intro.process {
  max-width: var(--wrap-max); display: flex; align-items: center;
  justify-content: center; gap: 48px; text-align: left; flex-wrap: wrap;
}
.section-intro.process .lede,
.section-intro.process .cta { flex: 1 1 320px; max-width: 420px; margin-left: auto; margin-right: auto; }
.process-photo { position: relative; flex: 0 0 auto; }
.process-photo .mat {
  background: var(--print); padding: 12px 12px 40px;
  box-shadow: 0 28px 50px -28px rgba(70, 50, 20, .6);
  transform: rotate(-2deg); max-width: 220px;
}
.process-photo .mat img { width: 100%; display: block; }
.process-photo .mat .cap { font-family: "Caveat"; font-size: 22px; color: var(--soft); text-align: center; margin-top: 8px; }
.process-photo .tape {
  position: absolute; z-index: 3; width: 96px; height: 28px;
  background: rgba(200, 170, 110, .42); top: -12px; left: 50%;
  transform: translateX(-50%) rotate(2deg);
}

/* Salon hang — a wall of featured works. Fixed-ish card width that flex-wraps,
   so more cards fit per row on wider screens (fills the page); the staggered
   heights + slight rotations come from nth-child, so it works for any count. */
.salon { display: flex; justify-content: center; align-items: flex-start; gap: clamp(24px, 2.4vw, 44px); flex-wrap: wrap; padding: 44px 0 20px; }
.salon .mount { width: clamp(210px, 19vw, 290px); }
.salon .mount:nth-child(5n+1) { transform: rotate(-2.2deg); margin-top: 22px; }
.salon .mount:nth-child(5n+2) { transform: rotate(1.6deg); margin-top: 62px; }
.salon .mount:nth-child(5n+3) { transform: rotate(-1deg); margin-top: 4px; }
.salon .mount:nth-child(5n+4) { transform: rotate(2.4deg); margin-top: 52px; }
.salon .mount:nth-child(5n+5) { transform: rotate(-1.8deg); margin-top: 16px; }
.salon .mount:hover { transform: translateY(-5px) rotate(0); }

/* Intro — the hand-written poem and the printed introduction, side by side,
   deliberately in DIFFERENT faces: the poem is verse (Fraunces italic, set off
   by a gold rule), the introduction is upright body serif (EB Garamond). */
.poem-verse {
  font-family: "Fraunces"; font-style: italic; font-weight: 300;
  font-size: clamp(16px, 1.15vw, 21px); line-height: 1.62; color: #4a3f30;
  white-space: pre-line; margin: 0;
  border-left: 2px solid var(--gold); padding-left: clamp(16px, 1.4vw, 26px);
}
.intro-body {
  font-family: "EB Garamond"; font-style: normal; font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.72; color: #5c4f3d; margin: 0;
}
.intro-duo__photo .mat { background: var(--print); padding: 13px 13px 42px; box-shadow: 0 28px 52px -28px rgba(70,50,20,.6); transform: rotate(-2deg); }
.intro-duo__photo .mat img { width: 100%; display: block; }
.intro-duo__photo .mat .cap { font-family: "Caveat"; font-size: clamp(19px, 1.4vw, 23px); color: var(--soft); text-align: center; margin-top: 8px; }
.intro-duo__photo .tape { position: absolute; z-index: 3; width: 104px; height: 28px; background: rgba(200,170,110,.42); top: -12px; left: 50%; transform: translateX(-50%) rotate(2deg); }

/* ============================================================================
   Gallery wall — the full catalogue, masonry-hung.
   ========================================================================== */
.wall-band { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 66px; padding: 8px 0 66px; }
.rooms { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 30px 0 8px; }
.rooms .room {
  font-family: inherit; font-size: 15px; color: var(--ink); padding: 8px 20px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .4);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.rooms .room:hover { border-color: var(--gold); color: var(--gold); }
.rooms .room.is-on { background: var(--gold); color: var(--print); border-color: var(--gold); }
.rooms .room small { opacity: .7; }
.count { text-align: center; font-family: "Caveat"; font-size: 23px; color: var(--soft); margin-bottom: 22px; }
/* column-WIDTH (not a fixed count) so the wall auto-fills the full page width —
   ~6-7 columns on a wide screen, gracefully fewer as it narrows. */
.wall { columns: 232px; column-gap: 24px; padding-top: 6px; }
/* Photo walls (Momentky z výstav, Život v ateliéru) use UNIFORM 4/5 tiles, so a
   grid fills rows left-to-right with a clean, left-aligned last row — no ragged
   column bottoms. (The paintings gallery keeps real per-image aspect + masonry.) */
.wall--photos {
  columns: initial; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 24px; padding-top: 6px; align-items: start;
}
.wall--photos .mount--wall { margin-bottom: 0; break-inside: auto; }
.wall .mount--wall:nth-child(3n) { transform: rotate(-.8deg); }
.wall .mount--wall:nth-child(4n) { transform: rotate(.8deg); }
.more { text-align: center; margin-top: 24px; }

/* ============================================================================
   Painting detail — the work matted large on the wall, then a note-to-artist
   enquiry underneath. Reuses the .mat/.mount "pinned print" language sized up
   for a single painting, inside the same .wall-band panel as the gallery.
   ========================================================================== */
/* .detail shares its element with .wrap ("wrap detail" in painting_detail.html)
   — padding-top/bottom only, same reasoning as .hero above. */
.detail { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: start; padding-top: 34px; padding-bottom: 80px; }
.detail__back {
  grid-column: 1 / -1; justify-self: start; margin-bottom: 4px;
  font-size: 15px; color: var(--blue); text-decoration: none;
}
.detail__back:hover { color: var(--gold); }

.detail__mat {
  background: var(--print); padding: 20px 20px 26px;
  box-shadow: 0 34px 68px -30px rgba(70, 50, 20, .6);
  transform: rotate(-1deg);
}
.detail__mat img { width: 100%; display: block; }

.detail__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.detail__thumb {
  width: 64px; height: 64px; object-fit: cover; cursor: pointer;
  background: var(--print); padding: 4px;
  box-shadow: 0 10px 20px -12px rgba(70, 50, 20, .55);
  opacity: .68; transition: opacity .2s ease, transform .2s ease;
}
.detail__thumb:hover, .detail__thumb.is-active { opacity: 1; transform: translateY(-2px); }

.detail__aside { padding-top: 4px; }
.detail__title { font-weight: 300; font-size: 50px; line-height: 1.03; letter-spacing: -.3px; margin: 8px 0 6px; }
.detail__series { font-size: 19px; color: var(--blue); transform: rotate(-1.5deg); display: inline-block; margin-bottom: 14px; }
.detail__meta { font-size: 14px; letter-spacing: .03em; color: var(--soft); margin-bottom: 18px; }

.badge {
  display: inline-block; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--print); background: var(--gold); border-radius: 999px;
  padding: 7px 18px; margin-bottom: 28px;
}
.badge--sold, .badge--not_for_sale { background: var(--soft); }
.badge--reserved { background: var(--blue); }

.detail__desc { color: #5c4f3d; margin-bottom: 8px; }
.detail__desc p { margin: 0 0 1.1rem; }
.detail__desc p:last-child { margin-bottom: 0; }

/* Note-to-artist enquiry block. */
.note-block { margin-top: 30px; padding-top: 30px; border-top: 1px dashed var(--line); }
.note-block__title { font-size: 28px; color: var(--blue); transform: rotate(-1.2deg); display: inline-block; margin-bottom: 18px; }

.note-form {
  background: var(--print); padding: 26px 26px 28px;
  box-shadow: 0 22px 44px -28px rgba(70, 50, 20, .55);
  max-width: 460px;
}
.note-form__field { margin-bottom: 18px; }
.note-form__field:last-of-type { margin-bottom: 0; }
.note-form label {
  display: block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--soft); margin-bottom: 6px;
}
.note-form input[type="text"],
.note-form input[type="email"],
.note-form textarea {
  display: block; width: 100%;
  font-family: "EB Garamond", Georgia, serif; font-size: 16px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  padding: 6px 2px; resize: vertical;
}
.note-form textarea { min-height: 100px; }
.note-form input:focus, .note-form textarea:focus { outline: none; border-color: var(--gold); }
.note-form__errors { list-style: none; color: #a5432c; font-size: 12.5px; margin: 6px 0 0; }
.note-form .cta { margin-top: 22px; }

/* ============================================================================
   O mně — masthead mirrors the home .hero/.portrait pattern (smaller heading,
   same mounted-photo treatment), then a bio + wings-poem pull-quote below.
   ========================================================================== */
/* .about-hero/.about-body share their element with .wrap ("wrap about-hero" /
   "wrap about-body" in about.html) — padding-top/bottom only, same reasoning
   as .hero above. */
/* Single two-column masthead: LEFT = one running text column (heading, short
   intro, full bio, signature, CTA); RIGHT = portrait with the wings-poem pinned
   to the bottom of the column so the text and the poem bottom-align and no dead
   space is left beside the portrait. align-items:stretch makes both columns the
   same height; the poem's margin-top:auto drops it to the shared bottom edge. */
.about-hero {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: stretch;
  padding-top: 56px; padding-bottom: 56px;
}
.about-hero .eyebrow { margin-bottom: 18px; }
.about-hero h1 {
  font-family: "Fraunces"; font-weight: 300; font-size: 56px; line-height: 1.05;
  letter-spacing: -.3px; margin-bottom: 16px;
}
.about-hero__side { display: flex; flex-direction: column; gap: 32px; }
.about-hero__side .poem { margin-top: auto; }
.about-hero__cta { margin-top: 30px; }

.about-body { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: start; padding-top: 10px; padding-bottom: 64px; }

/* Body prose is now real rich-text <p> HTML (richtext slots + References),
   so white-space is normal — NOT pre-line (pre-line would turn any source
   newline into a spurious break and fights the <p> markup). Keeps a readable
   line length (~66ch) even though the page/grid around it runs full-width. */
.prose-text { color: #5c4f3d; font-size: 17px; white-space: normal; max-width: 66ch; }
.prose-text p { margin: 0 0 1.1rem; }
.prose-text p:last-child { margin-bottom: 0; }

.about-sig { font-family: "Caveat"; font-size: 34px; color: var(--blue); transform: rotate(-2deg); display: inline-block; margin-top: 18px; }

/* The wings poem — same seeded home.hero.intro slot as the homepage masthead,
   restyled here as a handwritten pull-quote pinned to the paper. */
.poem {
  background: var(--print); padding: 36px 36px 40px;
  box-shadow: 0 28px 52px -28px rgba(70, 50, 20, .55);
  transform: rotate(-1.4deg);
  font-family: "Caveat"; font-size: 26px; line-height: 1.55; color: var(--blue);
  white-space: pre-line;
}

/* ============================================================================
   Kontakt — contact facts beside the note-to-artist form, practical info below.
   ========================================================================== */
/* Contact page — selling text at the very top-left; the Kontakt heading, the
   contact facts and the message form stacked on the right, above the form. */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(40px, 4.5vw, 72px); align-items: start; padding: clamp(16px, 2vw, 28px) 0 44px; }
.contact-side { display: flex; flex-direction: column; gap: 26px; }
.contact-head h1 { font-family: "Fraunces"; font-weight: 300; font-size: clamp(30px, 3vw, 42px); line-height: 1.05; letter-spacing: -.3px; margin-bottom: 6px; }
.contact-head .lede { margin: 0; }
.contact-facts dl { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 40px; justify-content: start; }
.contact-facts__row dt {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin-bottom: 3px;
}
.contact-facts__row dd { font-size: 17px; }
.contact-facts__row dd a { text-decoration: none; color: var(--ink); }
.contact-facts__row dd a:hover { color: var(--gold); }

/* Kontakt's note-form isn't preceded by a description like the painting-detail
   one is, so it doesn't need the dashed divider/top margin. */
.note-block--standalone { margin-top: 0; padding-top: 0; border-top: 0; }

/* Selling info is the very top-left element now — no divider above it. Two
   columns so it fills the left column and is fully in view on open. */
.contact-practical { padding-top: 0; }
.contact-practical h2 { font-weight: 300; font-size: 26px; margin: 0 0 14px; }
.contact-practical .prose-text {
  font-size: 17px; line-height: 1.65; max-width: none;
  columns: 2; column-gap: clamp(32px, 3.5vw, 56px);
}
.contact-practical .prose-text p { break-inside: avoid; }

.contact-portrait { position: relative; width: 100%; align-self: start; }
.contact-portrait .mat {
  background: var(--print); padding: 12px 12px 30px;
  box-shadow: 0 30px 56px -28px rgba(70, 50, 20, .55); transform: rotate(-1.8deg);
}
.contact-portrait .mat img { width: 100%; display: block; }
.contact-portrait .cap {
  font-family: "Caveat"; font-size: 22px; color: var(--soft); text-align: center; margin-top: 8px;
}
.contact-portrait .tape {
  position: absolute; z-index: 3; width: 112px; height: 31px;
  background: rgba(200, 170, 110, .42); top: -12px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
}

/* ============================================================================
   Děti — the gallery wall's warmest cousin: children's camp/workshop work
   pinned up like a classroom corkboard. Reuses .wall + .mount--wall (the same
   masonry "pinned print" card as the paintings wall) with a small pin dot
   instead of tape and a wider, more playful rotation spread.
   ========================================================================== */
.kids-intro { max-width: 60ch; margin: 0 auto; }

/* Vzdělávání — alternating photo/text bands, one per teaching area. Image side
   flips each row (--imgleft / --imgright); reuses the .mat/.tape pinned print. */
.edu-band {
  display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: clamp(36px, 4vw, 72px);
  align-items: center; padding: clamp(30px, 3.6vw, 52px) 0;
  border-bottom: 1px dashed var(--line);
}
.edu-band:last-of-type { border-bottom: 0; }
.edu-band--imgright { grid-template-columns: 1fr minmax(0, 460px); }
.edu-band--imgright .edu-band__text { order: 1; }
.edu-band--imgright .edu-band__photo { order: 2; }
.edu-band__photo { position: relative; width: 100%; }
.edu-band__photo .mat {
  background: var(--print); padding: 13px 13px 16px;
  box-shadow: 0 30px 56px -28px rgba(70, 50, 20, .55);
}
.edu-band--imgleft  .edu-band__photo .mat { transform: rotate(-1.6deg); }
.edu-band--imgright .edu-band__photo .mat { transform: rotate(1.6deg); }
.edu-band__photo .mat img { width: 100%; display: block; }
.edu-band__photo .tape {
  position: absolute; z-index: 3; width: 116px; height: 32px;
  background: rgba(200, 170, 110, .42); top: -13px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
}
.edu-band__text h2 { font-family: "Fraunces"; font-weight: 300; font-size: clamp(28px, 2.4vw, 38px); margin-bottom: 14px; }
.edu-band__text .prose-text { max-width: 54ch; }
/* solo band (a single activity page) — no dashed divider, tighter top */
.edu-band--solo { border-bottom: 0; padding-top: 8px; }

/* Vzdělávání hub — cards linking to each activity page. */
.edu-hub {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.4vw, 34px);
  max-width: 940px; margin: 6px auto 20px; padding-bottom: 20px;
}
.edu-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--print); border: 1px solid var(--line);
  box-shadow: 0 22px 44px -30px rgba(70, 50, 20, .5);
  transition: transform .18s ease, box-shadow .18s ease;
}
.edu-card:hover { transform: translateY(-4px); box-shadow: 0 30px 54px -28px rgba(70, 50, 20, .55); }
.edu-card__photo { aspect-ratio: 3 / 2; overflow: hidden; }
.edu-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edu-card__body { padding: 22px 24px 26px; }
.edu-card__body h2 { font-family: "Fraunces"; font-weight: 300; font-size: 27px; margin-bottom: 8px; }
.edu-card__body p { color: #5c4f3d; font-size: 16px; margin-bottom: 14px; }
.edu-card__more { color: var(--gold); font-size: 14px; letter-spacing: .04em; }
.edu-card--plain { background: var(--panel); justify-content: center; min-height: 190px; }
.edu-card--plain .edu-card__body { padding: 30px 26px; }

.calendar-body { max-width: 620px; margin: 0 auto; padding: 10px 0 48px; color: #5c4f3d; }
.calendar-body h3 {
  font-family: "Fraunces"; font-weight: 300; font-size: 24px; color: var(--ink);
  margin: 26px 0 10px; padding-bottom: 8px; border-bottom: 1px dashed var(--line);
}
.calendar-body h3:first-child { margin-top: 0; }
.calendar-body ul { list-style: none; margin: 0; padding: 0; }
.calendar-body li { font-size: 17px; padding: 5px 0; }

/* Dětské práce is a deliberate, even grid (not the paintings' viewport-driven
   masonry) so it always reads as tidy rows of four on desktop — never dropping
   to three on a narrower/un-maximised window. Tiles are uniform 4/5 crops, so
   rows stay clean. Keeps the pushpins + slight pin-board rotations. */
.wall--kids {
  columns: initial;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
  align-items: start;
}
.wall--kids .mount--kid { margin: 0; }
@media (max-width: 1080px) { .wall--kids { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .wall--kids { grid-template-columns: repeat(2, 1fr); } }

.wall--kids .mount--kid { position: relative; }
.wall--kids .mount--kid::before {
  content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px;
  margin-left: -6px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 3px 5px rgba(70, 50, 20, .5), inset 0 -2px 2px rgba(0, 0, 0, .15);
}
.wall--kids .mount--kid:nth-child(2n) { transform: rotate(-1.6deg); }
.wall--kids .mount--kid:nth-child(3n) { transform: rotate(1.4deg); }
.wall--kids .mount--kid:nth-child(5n) { transform: rotate(-2.2deg); }
.wall--kids .mount--kid:nth-child(7n) { transform: rotate(2deg); }
.wall--kids .mount--kid:hover { transform: translateY(-4px) rotate(0deg); }

/* ============================================================================
   Výstavy — one woven exhibition timeline: year · title · place entries with a
   few photos pinned in between (alternating sides) so the images read as part
   of the story rather than a separate photo grid. Reuses the .mat "pinned
   print" treatment.
   ========================================================================== */
/* Výstavy — the exhibition list stays ONE connected column; a few pinned photos
   ride in a rail beside it (not woven into the list, not a separate grid). */
.exhib-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: clamp(36px, 4vw, 72px);
  align-items: start; max-width: 1060px; margin: 0 auto; padding: 30px 0 50px;
}
.exhib-entry {
  display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px dashed var(--line);
}
.exhib-entry:first-child { padding-top: 0; }
.exhib-entry:last-child { border-bottom: 0; }
.exhib-entry__year { font-size: 30px; font-weight: 300; color: var(--gold); }
.exhib-entry__title { font-style: italic; font-weight: 300; font-size: 20px; margin-bottom: 3px; }
.exhib-entry__place { font-size: 19px; color: var(--blue); }

/* Photo rail — a small stack of pinned prints, gently staggered, beside the list. */
.exhib-rail { display: flex; flex-direction: column; gap: 30px; padding-top: 4px; }
.exhib-rail__photo { position: relative; width: 100%; }
.exhib-rail__photo .mat {
  background: var(--print); padding: 12px 12px 38px;
  box-shadow: 0 26px 48px -26px rgba(70, 50, 20, .55);
}
.exhib-rail__photo:nth-child(odd)  .mat { transform: rotate(-1.8deg); }
.exhib-rail__photo:nth-child(even) .mat { transform: rotate(1.8deg); }
.exhib-rail__photo .mat img { width: 100%; display: block; }
.exhib-rail__photo .cap {
  font-family: "Caveat"; font-size: clamp(18px, 1.3vw, 22px); color: var(--soft);
  text-align: center; margin-top: 8px;
}
.exhib-rail__photo .tape {
  position: absolute; z-index: 3; width: 108px; height: 30px;
  background: rgba(200, 170, 110, .42); top: -12px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
}

/* ============================================================================
   Reference — testimonials as handwritten notes pinned to the wall: the
   .print "pinned print" surface from .mount, sized for text instead of an
   image, with the same gentle per-card rotation as the featured .salon.
   ========================================================================== */
/* auto-FIT (not auto-fill): with only a few testimonials the empty column
   tracks collapse, so the cards stretch to fill the full width instead of
   hugging the left with dead space on a wide screen. justify-items:center +
   a per-card max-width keep the line length readable when tracks get wide. */
.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; padding: 50px 0 66px; justify-items: center; }
.note-card {
  width: 100%; max-width: 620px;
  background: var(--print); padding: 30px 28px 24px;
  box-shadow: 0 22px 44px -26px rgba(70, 50, 20, .55);
  transition: transform .25s ease, box-shadow .25s ease;
}
.note-card.n1 { transform: rotate(-1.2deg); }
.note-card.n2 { transform: rotate(1deg); }
.note-card.n3 { transform: rotate(-.6deg); }
.note-card:hover { transform: translateY(-4px) rotate(0deg); box-shadow: 0 28px 50px -26px rgba(70, 50, 20, .6); }
.note-card__text { margin-bottom: 14px; }
.note-card__text p:last-child { margin-bottom: 0; }
.note-card__author { font-size: 24px; color: var(--blue); text-align: right; }

/* ============================================================================
   CTA button — also used as the enquiry submit (a <button>, so reset UA chrome).
   ========================================================================== */
.cta {
  display: inline-block; letter-spacing: .16em; text-transform: uppercase;
  font-size: 12.5px; color: var(--print); background: var(--gold);
  padding: 14px 26px; text-decoration: none; border: 0; font-family: inherit; cursor: pointer;
  box-shadow: 0 12px 26px -12px rgba(140, 90, 20, .7);
}
.cta.ghost { background: transparent; color: var(--blue); border: 1px solid var(--line); margin-left: 8px; box-shadow: none; }

/* ============================================================================
   Chrome — footer
   ========================================================================== */
.site-foot { border-top: 1px solid var(--line); margin-top: 40px; padding: 56px 0; text-align: center; }
.site-foot__inner { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); display: grid; gap: 14px; justify-items: center; }
.site-foot__note { font-size: 26px; color: var(--blue); transform: rotate(-1.5deg); max-width: 40ch; }
.site-foot__links { display: flex; gap: 1.5rem; font-size: 15px; }
.site-foot__links a { text-decoration: none; color: var(--ink); }
.site-foot__links a:hover { color: var(--gold); }
.site-foot__mm { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--soft); }
.site-foot__mm a { color: var(--soft); }
.site-foot__mm a:hover { color: var(--gold); }

/* ============================================================================
   Responsive — collapse the rail into a short top band, nav behind a toggle.
   ========================================================================== */
@media (max-width: 900px) {
  .page { flex-direction: column; min-height: 0; }

  .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; padding-bottom: 44px; }
  .hero h1 { font-size: 44px; }
  .hero .tag { font-size: 30px; }
  .portrait { justify-self: center; }
  .portrait .mat { max-width: 340px; }
  .hero__duo { grid-template-columns: 1fr; gap: 22px; }
  .intro-duo__photo { max-width: 300px; }
  .salon .mount { width: min(82%, 300px); }
  .salon .mount:nth-child(n) { margin-top: 0; }
  /* The decorative side stripe is a desktop-only brand element. On a phone the
     column layout turned it into a horizontal band across the top, eating space
     on an already-narrow screen — hide it entirely below the mobile breakpoint. */
  .rail { display: none; }

  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 20rem); z-index: 50;
    background: var(--paper); border-left: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    padding: 5rem var(--wrap-pad) 2rem; gap: 1.5rem;
    transform: translateX(100%); transition: transform .3s ease;
    box-shadow: -20px 0 60px rgba(0, 0, 0, .12);
  }
  .site-nav.is-open { transform: translateX(0); }
  .site-nav a { font-size: 1.15rem; font-family: "Fraunces"; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }

  .wall { columns: 2; }
  .site-head__inner, .site-foot__inner, .wrap, .flash { padding-left: 24px; padding-right: 24px; }

  .detail { grid-template-columns: 1fr; gap: 34px; padding-top: 36px; padding-bottom: 50px; }
  .detail__title { font-size: 36px; }
  .note-form { max-width: none; }

  .about-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; padding-bottom: 30px; }
  .about-hero h1 { font-size: 38px; }
  .about-body { grid-template-columns: 1fr; gap: 30px; padding-top: 0; padding-bottom: 44px; }
  .contact-grid { grid-template-columns: 1fr; gap: 34px; padding: 20px 0 44px; }

  .wall--kids { columns: 2; }
  .exhib-layout { grid-template-columns: 1fr; gap: 34px; }
  .exhib-entry { grid-template-columns: 56px 1fr; }
  .exhib-rail { flex-direction: row; flex-wrap: wrap; gap: 20px; }
  .exhib-rail__photo { width: calc(50% - 10px); }
  .notes { grid-template-columns: 1fr; }

  .edu-band, .edu-band--imgright { grid-template-columns: 1fr; gap: 24px; }
  .edu-band__photo { max-width: 460px; }
  /* stack photo above text on both alignments for a consistent rhythm */
  .edu-band--imgright .edu-band__photo { order: 0; }
  .edu-band--imgright .edu-band__text { order: 1; }

  .edu-hub { grid-template-columns: 1fr; }
  .edu-card--plain { min-height: 0; }

  /* dropdown becomes an inline, indented group inside the slide-in drawer */
  .nav-group { display: block; position: static; }
  .nav-caret { display: none; }
  .nav-submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; background: none; padding: .6rem 0 0 1rem; margin: 0;
    gap: .9rem;
  }
  .nav-submenu a { padding: 0; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .mount:hover,
  .wall--kids .mount--kid:hover,
  .note-card:hover { transform: none; }
}