/* ══════════════════════════════════════════════════
   ZECHE / ცეხი — Tbilisi
   Monochrome system. No colour, no radius, no shadow.
   ══════════════════════════════════════════════════ */

:root{
  --fg:#000;
  --bg:#fff;
  --g05:#FAFAFA;
  --g1:#F1F1F1;
  --g2:#E3E3E3;
  --g3:#B4B4B4;
  --g4:#767676;
  --g5:#3A3A3A;

  --line:#000;
  --hair:rgba(0,0,0,.14);

  --dsp:'Space Grotesk','Noto Sans Georgian',Helvetica,Arial,sans-serif;
  --txt:'Inter','Noto Sans Georgian',Helvetica,Arial,sans-serif;
  --ka:'Noto Sans Georgian',Sylfaen,'Space Grotesk',sans-serif;

  --pad:clamp(18px,4vw,56px);
  --hdr:64px;
  --e:cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  background:var(--bg); color:var(--fg);
  font-family:var(--txt); font-size:16px; line-height:1.5;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
li{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:#000; color:#fff; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:8px; top:8px; z-index:999; background:#000; color:#fff; padding:10px 16px; }

/* ── type ─────────────────────────────────────── */
.dsp{
  font-family:var(--dsp); font-weight:500;
  letter-spacing:-.045em; line-height:.86; text-transform:uppercase;
}
.mono{
  font-family:var(--dsp); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
}
.ka{ font-family:var(--ka); letter-spacing:0; }

/* ── icons (never glyphs) ─────────────────────── */
.ic{
  display:inline-block; width:1em; height:1em; flex:0 0 auto;
  vertical-align:-.11em;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:square; stroke-linejoin:miter;
  transition:transform .35s var(--e);
}
a:hover > .ic, .btn:hover .ic{ transform:translateX(2px); }
a:hover > .ic[data-ne], .more:hover .ic{ transform:translate(1px,-1px); }

/* ── layout ───────────────────────────────────── */
.wrap{ padding-inline:var(--pad); }
.bleed{ width:100%; }
.rule{ height:1px; background:var(--hair); border:0; }

/* ══════════ HEADER ══════════ */
.hd{
  position:fixed; top:0; left:0; right:0; z-index:90;
  height:var(--hdr);
  display:flex; align-items:center; gap:24px;
  padding-inline:var(--pad);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px) saturate(120%);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--e);
}
.hd.stuck{ border-bottom-color:var(--hair); }

.hd__mark{
  font-family:var(--dsp); font-weight:700; font-size:19px;
  letter-spacing:-.03em; text-transform:uppercase; line-height:1;
  display:flex; align-items:baseline; gap:9px;
}
.hd__mark .ka{ font-size:12px; font-weight:400; color:var(--g4); letter-spacing:.02em; }

.hd__nav{ margin-left:auto; display:flex; gap:clamp(12px,2vw,30px); }
.hd__nav a{ position:relative; padding:4px 0; font-family:var(--dsp); font-size:12px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--g4); transition:color .3s var(--e); }
.hd__nav a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--fg); transition:right .4s var(--e); }
.hd__nav a:hover{ color:var(--fg); }
.hd__nav a:hover::after{ right:0; }
.hd__nav a[aria-current="page"]{ color:var(--fg); }
.hd__nav a[aria-current="page"]::after{ right:0; }

.hd__st{ display:flex; align-items:center; gap:7px; font-family:var(--dsp); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--g4); }
.hd__st i{ width:6px; height:6px; background:var(--g3); display:block; }
.hd__st.open i{ background:var(--fg); }

.burger{ display:none; width:30px; height:20px; position:relative; margin-left:auto; }
.burger span{ position:absolute; left:0; right:0; height:1.5px; background:var(--fg); transition:transform .35s var(--e), opacity .2s; }
.burger span:nth-child(1){ top:3px; }
.burger span:nth-child(2){ bottom:3px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-6.5px) rotate(-45deg); }

/* ══════════ HOME HERO ══════════ */
.top{ padding-top:var(--hdr); }

.meta{
  display:flex; flex-wrap:wrap; gap:10px 28px;
  padding:14px var(--pad); border-bottom:1px solid var(--hair);
  font-family:var(--dsp); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--g4);
}
.meta span:first-child{ color:var(--fg); }
.meta .push{ margin-left:auto; }

.hero{ padding:clamp(40px,7vw,88px) var(--pad) clamp(28px,4vw,44px); }
.hero__t{
  font-family:var(--dsp); font-weight:500; text-transform:uppercase;
  /* 2.72 = measured advance of "ZECHE" in ems at this tracking, so the word
     spans the full content column at any viewport (verified 360→2560px) */
  font-size:calc((100vw - (2 * var(--pad))) / 2.72);
  line-height:.78; letter-spacing:-.055em;
}
.hero__row{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:flex-end;
  gap:24px; margin-top:clamp(20px,3vw,34px);
}
.hero__say{ max-width:34ch; font-size:clamp(15px,1.35vw,19px); line-height:1.45; }

.shot{ overflow:hidden; }
.shot img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transition:filter .7s var(--e), transform 1.2s var(--e);
}
.shot:hover img{ filter:grayscale(0) contrast(1); }
.shot--hero{ height:clamp(280px,60vh,620px); }

/* ══════════ SECTION ══════════ */
.sec{ padding:clamp(56px,9vw,132px) 0; }
.sec--tight{ padding:clamp(40px,6vw,84px) 0; }
.sec--g{ background:var(--g05); }

.hd2{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 26px;
  padding-inline:var(--pad); margin-bottom:clamp(30px,4vw,54px);
}
.hd2 .idx{ flex:0 0 100%; font-family:var(--dsp); font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--g3); margin-bottom:6px; }
.hd2 h2{ font-family:var(--dsp); font-weight:500; font-size:clamp(30px,5.4vw,72px); line-height:.9; letter-spacing:-.045em; text-transform:uppercase; }
.hd2 .more{ margin-left:auto; font-family:var(--dsp); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; border-bottom:1px solid var(--fg); padding-bottom:3px; }
.hd2 .more:hover{ opacity:.55; }

/* ══════════ PAGE HERO (inner pages) ══════════ */
.ph{ padding:clamp(46px,8vw,110px) var(--pad) clamp(28px,4vw,52px); border-bottom:1px solid var(--hair); }
.ph .idx{ display:block; font-family:var(--dsp); font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--g3); margin-bottom:clamp(14px,2vw,26px); }
.ph h1{ font-family:var(--dsp); font-weight:500; font-size:clamp(46px,10.5vw,168px); line-height:.82; letter-spacing:-.05em; text-transform:uppercase; }
.ph__row{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px; margin-top:clamp(18px,2.6vw,34px); }
.ph__ka{ font-family:var(--ka); font-size:clamp(17px,2.4vw,30px); color:var(--g3); line-height:1; }
.ph__say{ max-width:38ch; font-size:clamp(15px,1.3vw,18px); line-height:1.45; }

/* ══════════ RESIDENT LIST (hover reveal) ══════════ */
.rl{ border-top:1px solid var(--hair); }
.rl__i{
  display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:20px;
  padding:clamp(18px,2.6vw,32px) var(--pad);
  border-bottom:1px solid var(--hair);
  position:relative; transition:color .4s var(--e);
}
.rl__i::before{
  content:''; position:absolute; inset:0; background:var(--fg);
  transform:scaleY(0); transform-origin:bottom; transition:transform .5s var(--e); z-index:0;
}
.rl__i > *{ position:relative; z-index:1; }
.rl__i:hover{ color:var(--bg); }
.rl__i:hover::before{ transform:scaleY(1); transform-origin:top; }
.rl__n{ font-family:var(--dsp); font-size:11px; font-weight:500; letter-spacing:.16em; color:var(--g3); transition:color .4s var(--e); }
.rl__i:hover .rl__n{ color:var(--g3); }
.rl__name{ font-family:var(--dsp); font-weight:500; font-size:clamp(26px,5vw,62px); line-height:1; letter-spacing:-.04em; text-transform:uppercase; display:flex; align-items:baseline; gap:.5em; flex-wrap:wrap; }
.rl__name .ka{ font-size:.32em; font-weight:400; color:var(--g3); }
.rl__k{ font-family:var(--dsp); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--g4); text-align:right; transition:color .4s var(--e); }
.rl__i:hover .rl__k{ color:var(--g3); }

/* floating cursor image */
.peek{
  position:fixed; top:0; left:0; width:230px; height:300px; z-index:80;
  pointer-events:none; opacity:0; overflow:hidden;
  transform:translate(-50%,-50%) scale(.9);
  transition:opacity .4s var(--e), transform .5s var(--e);
}
.peek.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.peek img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); }

/* ══════════ RESIDENT CARDS ══════════ */
.rc{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hair); }
.rc__i{ border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:0 0 clamp(22px,3vw,32px); }
.rc__i:nth-child(3n){ border-right:0; }
.rc__i .shot{ height:clamp(200px,26vw,330px); margin-bottom:clamp(18px,2.4vw,26px); }
.rc__b{ padding-inline:clamp(16px,2vw,28px); }
.rc__i h3{ font-family:var(--dsp); font-weight:500; font-size:clamp(21px,2.4vw,30px); letter-spacing:-.03em; text-transform:uppercase; line-height:1; display:flex; align-items:baseline; gap:.5em; flex-wrap:wrap; }
.rc__i h3 .ka{ font-size:.46em; font-weight:400; color:var(--g3); }
/* the resident's own wordmark, where they have one */
.rc__mark{ height:22px; width:auto; margin-bottom:16px; }
.rc__k{ margin-top:9px; font-family:var(--dsp); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--g4); }
.rc__i p{ margin-top:13px; font-size:15px; line-height:1.5; color:var(--g5); max-width:36ch; }
.rc__i dl{ margin-top:16px; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:12.5px; }
.rc__i dt{ font-family:var(--dsp); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--g3); padding-top:2px; }
.rc__i dd{ text-align:right; }

/* ══════════ EVENTS ══════════ */
.ev{ border-top:1px solid var(--hair); }
.ev__i{
  display:grid; grid-template-columns:140px 1fr 190px auto; align-items:center; gap:24px;
  padding:clamp(18px,2.4vw,30px) var(--pad); border-bottom:1px solid var(--hair);
  transition:background .4s var(--e), color .4s var(--e);
}
.ev__i:hover{ background:var(--fg); color:var(--bg); }
.ev__d{ font-family:var(--dsp); font-size:clamp(13px,1.4vw,16px); font-weight:500; letter-spacing:.06em; text-transform:uppercase; font-variant-numeric:tabular-nums; }
.ev__d b{ display:block; font-size:clamp(26px,3.4vw,42px); line-height:.9; letter-spacing:-.04em; font-weight:500; }
.ev__t{ font-family:var(--dsp); font-weight:500; font-size:clamp(19px,2.4vw,32px); line-height:1.05; letter-spacing:-.03em; text-transform:uppercase; }
.ev__t small{ display:block; margin-top:6px; font-family:var(--txt); font-size:14px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--g4); }
.ev__i:hover .ev__t small{ color:var(--g3); }
.ev__w{ font-family:var(--dsp); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--g4); }
.ev__i:hover .ev__w{ color:var(--g3); }
.ev__go{ font-family:var(--dsp); font-size:20px; }
.ev__empty{ padding:clamp(40px,6vw,80px) var(--pad); border-bottom:1px solid var(--hair); }
.ev__empty p{ max-width:44ch; color:var(--g4); font-size:16px; }
.ev__empty .dsp{ font-size:clamp(22px,3vw,36px); margin-bottom:14px; }

/* ══════════ GALLERY ══════════ */
/* 12-col mosaic on a fixed row unit — every row's tiles share a row-span,
   so the columns always sum to 12 and no gaps can open up. */
.gal{
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(112px,10.4vw,168px);
  gap:1px; background:var(--hair); border-block:1px solid var(--hair);
}
.gal a{ background:var(--bg); overflow:hidden; position:relative; }
.gal a img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04); transition:filter .7s var(--e), transform 1.1s var(--e); }
.gal a:hover img{ filter:grayscale(0); transform:scale(1.04); }
.gal .c3{ grid-column:span 3; } .gal .c4{ grid-column:span 4; }
.gal .c5{ grid-column:span 5; } .gal .c6{ grid-column:span 6; }
.gal .c8{ grid-column:span 8; } .gal .c12{ grid-column:span 12; }
.gal .r2{ grid-row:span 2; } .gal .r3{ grid-row:span 3; }

/* ══════════ SPLIT / PROSE ══════════ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,70px); align-items:start; padding-inline:var(--pad); }
.split--w{ grid-template-columns:1.15fr 1fr; }
.prose p{ font-size:clamp(16px,1.5vw,20px); line-height:1.5; max-width:46ch; }
.prose p + p{ margin-top:1.1em; }
.prose .big{ font-size:clamp(20px,2.3vw,30px); line-height:1.32; letter-spacing:-.015em; max-width:26ch; }

.facts{ border-top:1px solid var(--fg); }
.facts div{ display:flex; justify-content:space-between; gap:18px; padding:13px 0; border-bottom:1px solid var(--hair); }
.facts dt,.facts .k{ font-family:var(--dsp); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--g4); }
.facts dd,.facts .v{ font-size:15px; text-align:right; }

/* opening hours */
.hrs{ border-top:1px solid var(--fg); }
.hrs li{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:13px 0; border-bottom:1px solid var(--hair); transition:padding .3s var(--e); }
.hrs span{ font-family:var(--dsp); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--g4); }
.hrs b{ font-family:var(--dsp); font-weight:400; font-size:15px; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.hrs li.now{ background:var(--fg); color:var(--bg); padding-inline:14px; margin-inline:-14px; }
.hrs li.now span{ color:var(--g3); }
.hrs li.now span::after{ content:' · today'; }

/* stat row */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--hair); }
.stats div{ padding:clamp(20px,3vw,38px) var(--pad); border-right:1px solid var(--hair); }
.stats div:last-child{ border-right:0; }
.stats b{ display:block; font-family:var(--dsp); font-weight:500; font-size:clamp(28px,4vw,56px); line-height:.9; letter-spacing:-.04em; }
.stats span{ display:block; margin-top:10px; font-family:var(--dsp); font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--g4); }

/* ══════════ BUTTON ══════════ */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--dsp); font-size:11.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  padding:15px 26px; border:1px solid var(--fg); background:var(--bg); color:var(--fg);
  transition:background .35s var(--e), color .35s var(--e);
}
.btn:hover{ background:var(--fg); color:var(--bg); }
.btn--inv{ background:var(--fg); color:var(--bg); }
.btn--inv:hover{ background:var(--bg); color:var(--fg); }

/* ══════════ FOOTER ══════════ */
/* overflow:hidden contains the oversized wordmark's glyph box — at line-height
   .76 its ink box is taller than its line box and would otherwise hang past
   the body, leaving a strip of white below the footer */
.ft{ background:var(--fg); color:var(--bg); padding:clamp(46px,6vw,80px) 0 0; overflow:hidden; }
.ft a:hover{ opacity:.55; }
.ft__g{ display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:clamp(22px,3vw,44px); padding-inline:var(--pad); padding-bottom:clamp(38px,5vw,62px); }
.ft h4{ font-family:var(--dsp); font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--g4); margin-bottom:16px; }
.ft ul li + li{ margin-top:9px; }
.ft ul a, .ft address{ font-size:14.5px; font-style:normal; line-height:1.6; }
.ft__say{ font-size:15px; line-height:1.5; max-width:30ch; color:var(--g3); }
.ft__big{ padding-inline:var(--pad); }
.ft__big span{ display:block; font-family:var(--dsp); font-weight:500; font-size:calc((100vw - (2 * var(--pad))) / 2.72); line-height:.76; letter-spacing:-.055em; text-transform:uppercase; }
.ft__base{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:20px var(--pad); margin-top:clamp(24px,3vw,40px); border-top:1px solid rgba(255,255,255,.2); font-family:var(--dsp); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--g4); }

/* ══════════ LIGHTBOX ══════════ */
.lb{ position:fixed; inset:0; z-index:200; background:#fff; display:flex; align-items:center; justify-content:center; padding:clamp(40px,7vh,90px) var(--pad); }
.lb[hidden]{ display:none; }
.lb img{ max-width:100%; max-height:78vh; object-fit:contain; }
.lb figcaption{ margin-top:18px; text-align:center; font-family:var(--dsp); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--g4); }
.lb__x{ position:absolute; top:18px; right:var(--pad); font-family:var(--dsp); font-size:11px; letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid var(--fg); padding-bottom:3px; }

/* ══════════ MOTION ══════════ */
.rv{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--e), transform .9s var(--e); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.07s; } .rv-d2{ transition-delay:.14s; } .rv-d3{ transition-delay:.21s; }

/* Clip the image, never the figure: a figure clipped to zero height stops
   intersecting the viewport, so the observer would never un-clip it. */
.clip img{
  clip-path:inset(0 0 100% 0);
  transition:filter .7s var(--e), transform 1.2s var(--e), clip-path 1.1s var(--e);
}
.clip.in img{ clip-path:inset(0 0 0 0); }
.clip.rv-d1 img{ transition-delay:.07s; }
.clip.rv-d2 img{ transition-delay:.14s; }
.clip.rv-d3 img{ transition-delay:.21s; }

/* page fade */
.pt{ position:fixed; inset:0; background:#000; z-index:300; pointer-events:none; transform:scaleY(0); transform-origin:bottom; }
.pt.go{ transform:scaleY(1); transform-origin:bottom; transition:transform .5s var(--e); }
body.enter .pt{ transform:scaleY(1); transform-origin:top; }
body.enter.ready .pt{ transform:scaleY(0); transform-origin:top; transition:transform .6s var(--e); }

/* cursor */
.cur{ position:fixed; top:0; left:0; width:9px; height:9px; background:var(--fg); border-radius:50%; z-index:250; pointer-events:none; transform:translate(-50%,-50%); transition:width .3s var(--e), height .3s var(--e), opacity .3s; mix-blend-mode:difference; opacity:0; }
.cur.on{ opacity:1; }
.cur.big{ width:38px; height:38px; }
@media (pointer:coarse){ .cur{ display:none; } }

@media (prefers-reduced-motion:reduce){
  .rv,.clip{ opacity:1; transform:none; transition:none; }
  .clip img{ clip-path:none; transition:none; }
  .ic{ transition:none; }
  .pt{ display:none; }
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1040px){
  .rc{ grid-template-columns:repeat(2,1fr); }
  .rc__i:nth-child(3n){ border-right:1px solid var(--hair); }
  .rc__i:nth-child(2n){ border-right:0; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stats div:nth-child(2n){ border-right:0; }
  .stats div:nth-child(-n+2){ border-bottom:1px solid var(--hair); }
  .ft__g{ grid-template-columns:1fr 1fr; }
  .ev__i{ grid-template-columns:110px 1fr auto; }
  .ev__w{ display:none; }
}

@media (max-width:760px){
  .hd__nav{
    position:fixed; inset:var(--hdr) 0 auto 0; flex-direction:column; gap:0;
    background:var(--bg); border-bottom:1px solid var(--hair);
    padding:6px var(--pad) 22px; margin:0;
    clip-path:inset(0 0 100% 0); transition:clip-path .45s var(--e);
  }
  .hd__nav.open{ clip-path:inset(0 0 0 0); }
  .hd__nav a{ padding:15px 0; font-size:15px; border-bottom:1px solid var(--hair); }
  .hd__nav a::after{ display:none; }
  .burger{ display:block; }
  .hd__st{ display:none; }

  /* the strap of facts wraps to two ragged rows on a phone — drop it */
  .meta{ display:none; }
  .hero__row{ justify-content:flex-start; }

  .split, .split--w{ grid-template-columns:1fr; }
  .rc{ grid-template-columns:1fr; }
  .rc__i{ border-right:0 !important; }
  .rl__i{ grid-template-columns:36px 1fr; gap:14px; }
  .rl__k{ grid-column:2; text-align:left; margin-top:6px; }
  .ev__i{ grid-template-columns:82px 1fr; gap:16px; }
  .ev__go{ display:none; }
  /* two-up on phones: uniform row-span so the columns can never leave a hole */
  .gal{ grid-auto-rows:clamp(96px,26vw,150px); }
  .gal .c3,.gal .c4,.gal .c5,.gal .c6{ grid-column:span 6; }
  .gal .c8,.gal .c12{ grid-column:span 12; }
  .gal .r2,.gal .r3{ grid-row:span 2; }
  .ft__g{ grid-template-columns:1fr; }
  .peek{ display:none; }
}