/* ---------- Self-hosted fonts (latin + latin-ext combined) ---------- */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/eb-garamond-v32-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/eb-garamond-v32-latin_latin-ext-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/eb-garamond-v32-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/eb-garamond-v32-latin_latin-ext-500italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-v20-latin_latin-ext-500.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root{
  --cream:    #F5EFE3;
  --cream-2:  #EBE1CB;
  --cream-3:  #E1D3B4;
  --wheat:    #D9B871;
  --wheat-2:  #C49A4F;
  --ochre:    #B8843B;
  --moss:     #5C6B3A;
  --moss-2:   #46541F;
  --rust:     #A0432B;
  --ink:      #3E2A1C;
  --ink-2:    #2A1B10;
  --soil-1:   #6B4A2E;
  --soil-2:   #4E351F;
  --soil-3:   #2F1F12;
  --bedrock:  #1A1108;

  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --measure: 34ch;
  --rule: 1px solid rgba(62,42,28,.18);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ background:var(--cream); }
body{
  font-family:var(--sans);
  font-size:17px;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}
::selection{ background:var(--wheat); color:var(--ink); }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
  letter-spacing:-0.005em;
}
h1{ font-size:clamp(1.9rem, 4.4vw, 3.6rem); line-height:1.1; font-weight:500; }
h2{ font-size:clamp(1.9rem, 3.4vw, 2.8rem); line-height:1.18; }
h3{ font-size:clamp(1.1rem, 1.4vw, 1.25rem); line-height:1.35; font-weight:500; }
p{ margin:0; max-width:var(--measure); }
em{ font-style:italic; color:var(--soil-2); }
a{ color:inherit; text-decoration:none; }

/* ---------- Eyebrow / small caps ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--soil-1);
  font-weight:500;
}

/* ---------- Layer scaffolding ---------- */
.layer{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.inner{
  position:relative;
  max-width:1280px;
  margin:0 auto;
  padding:clamp(72px, 13vh, 160px) clamp(24px, 6vw, 88px);
  z-index:2;
}

/* paper grain overlay shared by all layers */
.grain::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(62,42,28,.10) 1px, transparent 1.4px),
    radial-gradient(rgba(62,42,28,.05) 1px, transparent 1.6px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode:multiply;
  opacity:.45;
  pointer-events:none;
  z-index:3;
}

/* ---------- Brand mark (replacement for missing logo) ---------- */
.brand{
  display:inline-flex; align-items:center; gap:14px;
  color:var(--ink);
}
.brand-mark{
  display:block;
  width:auto;
  height:auto;
  flex:0 0 auto;
}
/* hero logo: large hand-painted wordmark */
.brand--hero .brand-mark{
  width:clamp(160px, 16vw, 240px);
  height:auto;
}
/* hides text duplicate of wordmark when the logo image already carries it */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   LAYER 1 — SKY + WHEAT (HERO)
   ============================================================ */
.l-sky{
  background:
    linear-gradient(180deg,
      #F8F2E5 0%,
      #F4ECD8 55%,
      #EFE3C4 100%);
  min-height:100vh;
  min-height:100svh;
  max-height:920px;
  display:grid;
  grid-template-rows:60% 40%;
  position:relative;
}
.l-sky .inner{
  grid-row:1;
  padding-top:clamp(28px, 4vh, 52px);
  display:flex;
  flex-direction:column;
  min-height:0;
  z-index:1;
}
.sky-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:clamp(24px,4vh,52px);
}
.sky-meta{
  text-align:right;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--soil-1);
  line-height:1.6;
}
.sky-meta em{ font-style:italic; letter-spacing:0; text-transform:none; color:var(--soil-2); font-size:.95rem; }
.hero-stack{
  margin-top:clamp(56px, 9vh, 120px);
  margin-bottom:0;
}
.hero-headline{
  margin:0;
  max-width:none;
  white-space:nowrap;
}
.hero-tag{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.9rem, 4.4vw, 3.6rem);
  line-height:1.1;
  color:var(--ink);
  max-width:none;
  white-space:nowrap;
  margin:clamp(28px, 4.5vh, 56px) 0 18px;
  letter-spacing:-0.005em;
}
.hero-tag em{
  font-style:italic;
  color:var(--rust);
}
.hero-body{
  font-size:clamp(1.15rem, 1.6vw, 1.55rem);
  line-height:1.5;
  color:var(--soil-2);
  max-width:42ch;
  margin:0;
}
.hero-headline em{
  font-family:var(--serif);
  font-style:italic;
  color:var(--rust);
  font-weight:500;
}
.scroll-cue{
  position:absolute;
  left:50%;
  bottom:clamp(20px,3vh,40px);
  transform:translateX(-50%);
  text-align:center;
  color:var(--soil-1);
  z-index:5;
}
.scroll-cue .arrow{
  display:block;
  font-family:var(--serif);
  font-size:1.7rem;
  line-height:1;
  margin-top:8px;
  animation:bob 2.6s ease-in-out infinite;
}
.scroll-cue small{
  font-size:.7rem;
  letter-spacing:.32em;
  text-transform:uppercase;
}
@keyframes bob{
  0%,100%{ transform:translateY(0); opacity:.7; }
  50%   { transform:translateY(7px); opacity:1; }
}

/* wheat field — anchor u dolního okraje, SVG v přirozeném aspect ratiu,
   overflow visible aby vrcholy klasů nebyly ořezané sliceí. */
.wheat-field{
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  pointer-events:none;
  z-index:10;
  overflow:visible;
}
.wheat-field svg{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:auto;
  display:block;
}

/* sun: skryto, logo přesunuto do .brand-corner na jeho místo */
.sun{ display:none; }

/* brand corner — pravý horní roh hero, na místě bývalého slunce */
.brand-corner{
  position:absolute;
  top:clamp(24px, 4vh, 56px);
  right:clamp(24px, 5vw, 72px);
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:clamp(10px, 1.4vh, 18px);
  pointer-events:auto;
}
.brand-corner .sky-meta{
  text-align:right;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--soil-1);
  line-height:1.6;
}
.brand-corner .sky-meta em{
  font-style:italic;
  letter-spacing:0;
  text-transform:none;
  color:var(--soil-2);
  font-size:.95rem;
}

/* ============================================================
   LAYER 3 — LIVING SOIL (main, dense)
   ============================================================ */
.l-soil{
  background:linear-gradient(180deg,
    #9D7240 0%,
    #7E5630 10%,
    #5A3E22 25%,
    #4E351F 50%,
    #3B2715 75%,
    #2A1B10 100%);
  color:#EBDDC2;
  padding:0;
  position:relative;
}
.l-soil h2, .l-soil h3{ color:#F2E6CB; }
.l-soil .eyebrow{ color:#C9A876; }

/* the soil scene — full width, roots aligned to hero plants */
.soil-scene{
  position:relative;
  width:100%;
  height:clamp(1280px, 192vh, 1960px);
  margin:0;
  max-width:none;
  overflow:hidden;
}

/* overlay text blocks inside soil */
.soil-block{
  position:absolute;
  z-index:3;
  color:#F4E8CB;
  max-width:clamp(360px, 36vw, 560px);
  padding:0 clamp(20px, 3vw, 36px);
}

/* small card-style info blocks */
.soil-card{
  position:absolute;
  z-index:3;
  color:#F4E8CB;
  max-width:clamp(320px, 34vw, 460px);
  padding:clamp(22px, 2.6vw, 32px) clamp(22px, 3vw, 36px);
  background:rgba(244, 232, 203, 0.06);
  border:1px solid rgba(244, 232, 203, 0.12);
  border-radius:14px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.soil-card .icon{
  display:block;
  width:42px;
  height:42px;
  margin-bottom:16px;
  color:var(--wheat);
}
.soil-card .icon svg{
  width:100%;
  height:100%;
  display:block;
  stroke:currentColor;
  fill:none;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.soil-card h4{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.35rem, 2vw, 1.75rem);
  line-height:1.2;
  color:#F6EBD0;
  margin:0 0 14px;
  letter-spacing:-0.005em;
}
.soil-card h4 em{ color:var(--wheat); font-style:italic; font-weight:500; }
.soil-card p{
  font-family:var(--sans);
  font-size:clamp(.98rem, 1.1vw, 1.08rem);
  line-height:1.55;
  color:#D8C8A4;
  margin:0;
  max-width:34ch;
}
.soil-card--1{ top:3%;  left:4%; }
.soil-card--2{ top:19%; right:4%; text-align:right; }
.soil-card--2 p, .soil-card--2 h4{ margin-left:auto; }
.soil-card--3{ top:35%; left:4%; }
.soil-card--4{ top:51%; right:4%; text-align:right; }
.soil-card--4 p, .soil-card--4 h4{ margin-left:auto; }
.soil-card--5{ top:67%; left:4%; }
.soil-block .eyebrow{ color:#C9A876; }
.soil-block h3{
  font-family:var(--serif);
  font-weight:500;
  font-style:italic;
  font-size:clamp(1.7rem, 3vw, 2.6rem);
  line-height:1.15;
  color:#F6EBD0;
  margin:14px 0 22px;
  letter-spacing:-0.005em;
}
.soil-block h3 em{ color:var(--wheat); }
.soil-block ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.soil-block li{
  font-size:clamp(1rem, 1.2vw, 1.18rem);
  line-height:1.5;
  color:#E8D8B0;
  padding-left:22px;
  position:relative;
}
.soil-block li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:10px;
  height:1px;
  background:var(--wheat);
}
.soil-block li strong{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  color:#F6EBD0;
  font-size:1.08em;
}
.soil-block p{
  font-family:var(--serif);
  font-size:clamp(1.2rem, 1.8vw, 1.6rem);
  line-height:1.4;
  color:#F4E8CB;
  max-width:24ch;
  margin:0;
}
.soil-block p em{ font-style:italic; color:var(--wheat); }

.soil-block--list .lines{
  display:flex;
  flex-direction:column;
  gap:clamp(14px, 1.8vh, 22px);
}
.soil-block--list p{
  max-width:32ch;
  font-size:clamp(1.05rem, 1.4vw, 1.3rem);
  line-height:1.45;
}

.soil-block--list{
  top:6%;
  right:5%;
  text-align:left;
}
.soil-block--mill{
  bottom:3%;
  right:4%;
  text-align:right;
  max-width:clamp(480px, 52vw, 760px);
}
.soil-block--mill p{
  margin-left:auto;
  max-width:none;
  font-family:var(--serif);
  font-size:clamp(1.9rem, 3.4vw, 2.8rem);
  line-height:1.18;
  font-style:italic;
  color:#F4E8CB;
}
.soil-block--mill p::before{
  content:'„';
  color:var(--wheat);
}
.soil-block--mill p::after{
  content:'"';
  color:var(--wheat);
}

@media (max-width:880px){
  .soil-block, .soil-card{
    position:relative;
    max-width:none;
    top:auto; left:auto; right:auto; bottom:auto;
    margin:36px clamp(18px, 5vw, 40px);
    text-align:left;
  }
  .soil-card--2 p, .soil-card--2 h4,
  .soil-card--4 p, .soil-card--4 h4,
  .soil-block--mill p{ margin-left:0; }
  /* ikony karet vždy vlevo na mobilu (override inline style="margin-left:auto") */
  .soil-card--2 .icon,
  .soil-card--4 .icon{ margin-left:0 !important; }
  .soil-block--list{ top:auto; right:auto; }
  .soil-block--mill{ top:auto; right:auto; bottom:auto; }
}
.soil-scene > svg.soil-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}

/* botanical labels overlaid on soil */
.soil-label{
  position:absolute;
  max-width:18ch;
  color:#F4E8CB;
  z-index:4;
}
.soil-label .num{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  color:var(--wheat);
  margin-right:6px;
}
.soil-label h3{
  font-family:var(--serif);
  font-weight:500;
  font-style:italic;
  font-size:1.55rem;
  letter-spacing:.005em;
  text-transform:none;
  color:#F6EBD0;
  margin-bottom:6px;
}
.soil-label p{
  font-size:.94rem;
  line-height:1.55;
  color:#D8C8A4;
  max-width:24ch;
}
.soil-label .ledger{
  display:block;
  width:60px; height:1px;
  background:rgba(217,184,113,.65);
  margin:10px 0;
}
.soil-label--1{ top:6%; left:4%; }
.soil-label--2{ top:46%; right:5%; text-align:right; }
.soil-label--2 .ledger{ margin-left:auto; }

@media (max-width:880px){
  /* mobile: uvolnit fixed height + overflow, aby všech 5 karet pod SVG mělo místo */
  .soil-scene{ height:auto !important; overflow:visible; padding-bottom:0; }
  .soil-label{ position:relative; max-width:none; margin:24px 18px; }
  .soil-label--1, .soil-label--2{ position:relative; top:auto; left:auto; right:auto; text-align:left; }
  .soil-label--2 .ledger{ margin-left:0; }
  /* SVG: ostrá pevná výška via !important, jinak desktopová pravidla
     (position:absolute; inset:0; height:100%) přebíjejí mobile.
     xMidYMin slice ořízne spodek SVG = top-anchored */
  .soil-scene > svg.soil-bg{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    height:clamp(320px, 56vh, 480px) !important;
    max-height:50vh;
    display:block;
  }
  /* první karta hned za SVG, bez extra horního marginu */
  .soil-scene > .soil-card:first-of-type,
  .soil-scene > .soil-block:first-of-type{
    margin-top:24px;
  }
}

/* ============================================================
   LAYER 6 — FOOTER / CONTACT
   ============================================================ */
.l-foot{
  background:linear-gradient(180deg, #2A1B10 0%, #1A1108 50%, #0D0805 100%);
  color:#EBDDC2;
}
.l-foot .inner{
  padding-top:clamp(80px,12vh,140px);
  padding-bottom:clamp(60px,9vh,100px);
}
.foot-head{
  max-width:36ch;
  margin:0 0 clamp(40px,7vh,80px);
  color:#F4E8CB;
}
.foot-head .eyebrow{ color:#C9A876; }
.foot-head h2{ color:#F4E8CB; margin-top:14px; font-style:italic; }
.cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:clamp(24px,3vw,40px);
}
@media (max-width:780px){
  .cards{ grid-template-columns:1fr; }
}
.card{
  border-top:1px solid rgba(244,232,203,.3);
  padding-top:22px;
  color:#EBDDC2;
}
.card .name{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:1.55rem;
  color:#F4E8CB;
  letter-spacing:0;
  line-height:1.15;
}
.card .role{
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#C9A876;
  margin-top:8px;
}
.card .lines{ margin-top:18px; display:flex; flex-direction:column; gap:6px; }
.card a{
  font-family:var(--serif);
  font-size:1.05rem;
  color:#F4E8CB;
  display:inline-block;
  padding:2px 0;
  border-bottom:1px solid rgba(244,232,203,.18);
  width:max-content;
  transition: border-color .25s ease, color .25s ease;
}
.card a:hover{ color:var(--wheat); border-color:var(--wheat); }

.tagline{
  margin-top:clamp(56px,8vh,90px);
  text-align:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.15rem;
  color:#D8C8A4;
}

.colophon{
  margin-top:clamp(40px,6vh,70px);
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; flex-wrap:wrap;
  padding-top:24px;
  border-top:1px solid rgba(244,232,203,.18);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#A9967A;
}
/* footer logo: mask the brown logo to cream so it reads on dark bedrock */
.colophon .brand-mark{
  width:88px;
  height:auto;
  aspect-ratio: 1001 / 895;
  background-color:#F2E6CB;
  -webkit-mask: url("/img/logo.webp") center / contain no-repeat;
          mask: url("/img/logo.webp") center / contain no-repeat;
  opacity:.92;
}

/* roots continuing into footer — one main root descends through contact */
.root-deepen{
  position:absolute;
  left:0; right:0;
  top:-1px;
  width:100%;
  height:clamp(360px, 56vh, 560px);
  z-index:1;
  pointer-events:none;
}
.root-deepen svg{ width:100%; height:100%; display:block; }

/* ---------- Tiny animations ---------- */
@media (prefers-reduced-motion: no-preference){
  .sway-1{ transform-origin:50% 100%; animation:sway 9.4s ease-in-out infinite; }
  .sway-2{ transform-origin:50% 100%; animation:sway 11.2s ease-in-out infinite -1.4s; }
  .sway-3{ transform-origin:50% 100%; animation:sway 8.2s ease-in-out infinite -3.1s; }
  @keyframes sway{
    0%,100%{ transform:rotate(-0.8deg); }
    50%   { transform:rotate(0.9deg); }
  }

  .wriggle{ animation:wriggle 9s ease-in-out infinite; transform-origin:50% 50%; }
  @keyframes wriggle{
    0%,100%{ transform:translate(0,0) rotate(0); }
    25%   { transform:translate(2px,-1px) rotate(.6deg); }
    50%   { transform:translate(-1px,1px) rotate(-.4deg); }
    75%   { transform:translate(1px,0) rotate(.3deg); }
  }
  .myc-pulse path{
    stroke-dasharray:1200;
    stroke-dashoffset:1200;
    animation:dash 5s ease-out forwards;
  }
  .myc-pulse path:nth-child(2n){ animation-delay:.6s; }
  .myc-pulse path:nth-child(3n){ animation-delay:1.2s; }
  @keyframes dash{ to{ stroke-dashoffset:0; } }
}

/* parallax */
[data-parallax]{ will-change:transform; }

/* small screen polish */
@media (max-width:880px){
  /* mobile: brand-corner do normal flow nad hero textem, aby logo+meta
     nepřekrývaly text */
  .l-sky{
    display:flex;
    flex-direction:column;
    grid-template-rows:none;
    /* explicitní svh override — stabilní pixel value odpovídající
       URL-bar-visible stavu. Wheat (bottom:0) zůstává v stabilní
       pozici během URL bar collapse → žádný jump. */
    min-height:100svh;
    max-height:none;
  }
  .brand-corner{
    position:relative;
    top:auto;
    right:auto;
    align-items:center;
    width:100%;
    padding:clamp(20px, 4vh, 40px) clamp(20px, 5vw, 32px) 0;
    box-sizing:border-box;
  }
  .brand-corner .sky-meta{
    text-align:center;
  }
  .brand--hero .brand-mark{
    width:clamp(140px, 30vw, 200px);
  }
  .l-sky .inner{
    grid-row:auto;
  }
  .hero-stack{
    margin-top:clamp(28px, 5vh, 48px);
  }
  /* hero text musí wrapovat na úzkých viewportech, jinak přetéká vpravo */
  .hero-headline{
    white-space:normal;
    max-width:none;
  }
  .hero-tag{
    white-space:normal;
    max-width:none;
  }
  .hero-body{
    max-width:none;
  }
}

@media (max-width:560px){
  body{ font-size:16px; }
  h1{ font-size:clamp(1.5rem, 7vw, 2.4rem); }
  .brand-corner{
    padding-top:clamp(16px, 3vh, 28px);
  }
}