:root {
  --ink:#f5f1e9; --soft:#c0b6aa; --line:#f5f1e933;
  --accent:#d1aa7f; --base:#1b1410;
  --sans:'Manrope','Noto Sans Georgian',sans-serif;
  --georgian:'Noto Sans Georgian',sans-serif;
  --ease:cubic-bezier(.2,.75,.25,1);
  --gutter:clamp(20px,4vw,80px);
}
* { box-sizing:border-box; }
html { background:var(--base); color:var(--ink); }
body { margin:0; font-family:var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; }
a,button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }

.scene {
  position:relative; isolation:isolate; background:var(--base);
  height:100vh; height:100svh; height:100dvh;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px)
          env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}
.scene-picture,.scene-shade { position:absolute; inset:0; z-index:-2; pointer-events:none; }
.scene-picture { overflow:hidden; }
.scene-picture img {
  display:block; width:100%; height:100%; object-fit:cover; object-position:65% center;
  transition:transform 1.2s var(--ease);
}
.scene-shade {
  z-index:-1;
  background:linear-gradient(90deg,#140e0ac2,#140e0a6e 34%,transparent 72%),
             linear-gradient(0deg,#130d0aeb,transparent 42%);
}
.header {
  min-width:0; height:clamp(60px,10dvh,110px); margin:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-bottom:1px solid var(--line); position:relative; z-index:2;
}
.logo { position:relative; flex:none; font-size:24px; font-weight:800; letter-spacing:-1px; line-height:1; padding-right:19px; }
.registered { position:absolute; top:-3px; right:2px; font-weight:500; font-size:12px; }
.logo-ge { display:block; font-size:8px; font-weight:400; letter-spacing:.29em; margin-top:8px; }
.header-caption { color:#d2c5b9; font-size:10px; letter-spacing:.035em; font-family:var(--georgian); }
.languages { flex:none; display:flex; gap:13px; align-items:center; font-size:11px; }
.languages button { border:0; background:none; opacity:.45; cursor:pointer; min-height:44px; min-width:28px; padding:8px 0; transition:opacity .2s; }
.languages button[aria-pressed=true],.languages button:hover { opacity:1; }
.languages>span { opacity:.25; }
.hero {
  min-height:0; min-width:0; width:63%; margin-left:7.2vw;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:clamp(12px,2dvh,26px) 0;

  container-type:size;
}
.hero-topline {
  flex:none; display:flex; gap:28px; font-size:10px; letter-spacing:.02em;
  align-items:center; color:#d0bda8; margin-bottom:clamp(14px,2.6dvh,27px);
  font-family:var(--georgian);
}
.hero-index { flex:none; font-family:var(--sans); font-size:9px; letter-spacing:.08em; }
h1 {
  flex:none; font-family:var(--georgian); font-weight:600; margin:0;
  letter-spacing:-.072em; font-size:min(6.2vw,11dvh,110px); line-height:1.16;
}
@supports (font-size:1cqh) { h1 { font-size:min(6.2vw,16cqh,110px); } }
h1 span { display:block; white-space:nowrap; }
.last-line { color:#d8b693; }
.hero-bottomline { flex:none; display:flex; gap:20px; align-items:flex-start; margin-top:clamp(14px,3dvh,33px); }
.hero-dash { flex:none; height:1px; width:0px; background:var(--accent); margin-top:12px; }
.hero-bottomline p { margin:0; font-family:var(--georgian); font-size:11px; color:#d4c9bc; line-height:1.9; white-space:pre-line; }
.image-credit { position:absolute; right:var(--gutter); top:45%; writing-mode:vertical-rl; display:flex; gap:25px; font-size:8px; letter-spacing:.18em; color:#e0c5ae; opacity:.7; pointer-events:none; }
.chapters {
  min-width:0; margin:0 var(--gutter); display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.7fr);
  border-top:1px solid var(--line);
}
.chapter { min-width:0; position:relative; display:block; padding:clamp(14px,2.6dvh,27px) 32px clamp(16px,2.6dvh,27px) 0; border-right:1px solid var(--line); transition:background .4s; }
.chapter+.chapter { padding-left:32px; }
.chapter:before { content:''; position:absolute; top:-1px; left:0; right:0; height:1px; transform:scaleX(0); transform-origin:left; background:var(--accent); transition:transform .55s var(--ease); }
.chapter:hover:before,.chapter:focus-visible:before { transform:scaleX(1); }
.chapter:hover,.chapter:focus-visible { background:#e3c2a006; }
.chapter-meta { display:flex; gap:24px; align-items:center; font-size:9px; line-height:1.5; color:#c1b0a0; letter-spacing:.04em; font-family:var(--georgian); }
.chapter-meta>span:first-child { flex:none; font-family:var(--sans); font-size:10px; color:#907c6a; }
.chapter-main { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:clamp(10px,1.8dvh,18px); }
.chapter h2 { min-width:0; font-family:var(--georgian); font-size:clamp(27px,2.5vw,44px); line-height:1.35; font-weight:500; letter-spacing:-.06em; margin:0; }
.chapter-arrow { flex:none; width:32px; height:32px; transition:transform .5s var(--ease); color:#e5cfb8; }
.chapter-arrow svg { display:block; width:100%; height:100%; }
.chapter:hover .chapter-arrow,.chapter:focus-visible .chapter-arrow { transform:translate(3px,-3px); }
.chapter-action { display:inline-block; font-family:var(--georgian); font-size:9px; line-height:1.6; letter-spacing:.02em; margin-top:clamp(10px,1.8dvh,20px); color:#c8b3a0; }
.chapter-note { min-width:0; padding:clamp(14px,2.6dvh,27px) 0 clamp(16px,2.6dvh,27px) 32px; display:flex; flex-direction:column; justify-content:space-between; }
.chapter-note-label { font-size:8px; letter-spacing:.12em; color:#9e8877; }
.chapter-note p { font-size:13px; font-family:var(--georgian); line-height:1.65; margin:10px 0; color:#d0c1b2; white-space:pre-line; }
.chapter-note-bottom { font-size:7px; letter-spacing:.13em; color:#927b69; }
body[data-active=wheat] .scene-picture img { transform:scale(1.015) translateX(.3%); }
body[data-active=wine] .scene-picture img { transform:scale(1.015) translateX(-.3%); }
@media(prefers-reduced-motion:no-preference) {
  .hero-topline { animation:enter .8s .08s both; }
  .hero h1 { animation:enter .95s .15s both; }
  .hero-bottomline { animation:enter .9s .27s both; }
  .chapters { animation:fade .95s .3s both; }
}
@keyframes enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
html[lang=en] h1 { font-family:var(--sans); font-weight:600; font-size:min(7.5vw,12dvh,130px); letter-spacing:-.075em; line-height:1.03; }
@supports(font-size:1cqh) { html[lang=en] h1 { font-size:min(7.5vw,18cqh,130px); } }
html[lang=en] .hero-bottomline p,html[lang=en] .chapter-note p,html[lang=en] .chapter h2 { font-family:var(--sans); }
@media(max-width:1050px) {
  .hero { width:76%; }
  h1 { font-size:min(7.7vw,11dvh,85px); }
  @supports(font-size:1cqh) { h1 { font-size:min(7.7vw,16cqh,85px); } }
  .scene-picture img { object-position:59% center; }
  .chapters { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.55fr); }
  .chapter-note { padding-left:24px; }
  .chapter-note p { font-size:11px; }
  .chapter+.chapter { padding-left:24px; }
  .chapter { padding-right:24px; }
  .chapter-meta { gap:16px; font-size:8px; }
}
@media(max-width:640px) {
  :root { --gutter:clamp(16px,5.8vw,27px); }
  .header { height:clamp(58px,9dvh,82px); gap:15px; }
  .logo { font-size:21px; }
  .header-caption { display:none; }
  .languages { font-size:10px; gap:8px; }
  .hero { width:auto; margin:0 var(--gutter); justify-content:flex-start; padding-top:clamp(23px,5dvh,48px); padding-bottom:12px; }
  .hero-topline { font-size:8px; gap:20px; margin-bottom:clamp(15px,2.8dvh,29px); }
  .hero-index { font-size:8px; }
  h1 { font-size:min(11.3vw,8dvh,69px); line-height:1.22; letter-spacing:-.07em; }
  @supports(font-size:1cqh) { h1 { font-size:min(11.3vw,17cqh,69px); } }
  .hero-bottomline { margin-top:clamp(14px,2.8dvh,24px); gap:16px; }
  .hero-bottomline p { font-size:10px; }
  .hero-dash { width:0px; margin-top:10px; }
  .scene-picture { top:18%; bottom:0; left:-30%; right:0; }
  .scene-picture img { object-position:70% center; }
  .scene-shade { background:linear-gradient(180deg,#1b1410 0%,#1b1410e8 25%,#1b141030 49%,#1b141008 62%,#1b1410e8 82%,#1b1410 100%),linear-gradient(90deg,#1b141080,transparent 70%); }
  .image-credit { top:57%; font-size:6px; }
  .chapters { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .chapter { padding:clamp(14px,2.5dvh,22px) 16px clamp(14px,2.5dvh,22px) 0; }
  .chapter+.chapter { padding-left:16px; padding-right:0; border-right:0; }
  .chapter-main { margin-top:12px; gap:8px; }
  .chapter h2 { font-size:clamp(22px,6.5vw,29px); }
  .chapter-arrow { width:24px; height:24px; }
  .chapter-meta { gap:10px; font-size:8px; letter-spacing:0; }
  .chapter-meta>span:first-child { font-size:8px; }
  .chapter-action { font-size:9px; margin-top:12px; }
  .chapter-note { grid-column:1/-1; flex-direction:row; align-items:center; border-top:1px solid #f5f1e91c; padding:clamp(10px,1.8dvh,17px) 0; gap:18px; }
  .chapter-note p { margin:0; white-space:normal; font-size:8px; line-height:1.6; }
  .chapter-note-bottom { display:none; }
  .chapter-note-label { font-size:7px; }
  html[lang=en] h1 { font-size:min(15vw,9dvh,89px); line-height:1.06; }
  @supports(font-size:1cqh) { html[lang=en] h1 { font-size:min(15vw,19cqh,89px); } }
}

@media(max-height:540px) {
  .header { height:52px; }
  .logo { font-size:20px; }
  .logo-ge { font-size:7px; margin-top:5px; }
  .hero { justify-content:center; padding:8px 0; }
  .hero-topline { margin-bottom:12px; font-size:8px; line-height:1.5; }
  h1 { font-size:min(7.7vw,8dvh,85px); }
  html[lang=en] h1 { font-size:min(9vw,9dvh,100px); }
  @supports(font-size:1cqh) {
    h1 { font-size:min(7.7vw,calc((100cqh - 76px)/3.66),85px); }
    html[lang=en] h1 { font-size:min(9vw,calc((100cqh - 76px)/3.18),100px); }
  }
  .hero-bottomline { margin-top:12px; gap:14px; }
  .hero-bottomline p { font-size:10px; line-height:1.6; }
  .hero-dash { margin-top:8px; width:0px; }
  .chapters { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .chapter { padding-top:11px; padding-bottom:13px; }
  .chapter+.chapter { border-right:0; }
  .chapter-main { margin-top:7px; }
  .chapter h2 { font-size:24px; }
  .chapter-action { margin-top:6px; font-size:9px; }
  .chapter-arrow { width:24px; height:24px; }
  .chapter-note { display:none; }
  .image-credit { display:none; }
}

@media(max-height:300px), (max-width:279px) {
  .scene { height:auto; min-height:100dvh; grid-template-rows:auto auto auto; }
  .hero { container-type:normal; min-height:220px; width:auto; margin:0 var(--gutter); }
  h1,html[lang=en] h1 { font-size:28px; }
  .hero-topline { flex-wrap:wrap; gap:8px; }
  .chapter-meta { flex-wrap:wrap; gap:6px; }
  .chapter-main { gap:4px; }
  .chapter h2 { font-size:18px; }
  .chapter-arrow { width:18px; height:18px; }
  .chapter,.chapter+.chapter { padding-left:8px; padding-right:8px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation:none!important; transition:none!important; }
  .scene-picture img { transform:none!important; }
}


.scene.allow-scroll { height:auto; min-height:100dvh; grid-template-rows:auto auto auto; }
.scene.allow-scroll .hero { container-type:normal; min-height:240px; }
