:root{
  --paper:#F2ECE3; --paper2:#E9E1D5; --ink:#1E1A18; --soft:#5E554F; --line:#D6CCBE;
  --neg:#E08A4F; --safe:#B8412F; --rose:#E7C8BF; --dark:#171211;
  --serif:'Fraunces',Georgia,serif; --sans:'Manrope',system-ui,sans-serif; --mono:'Share Tech Mono',ui-monospace,monospace;
  --ka:'Noto Sans Georgian','Manrope',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.1}
[lang=ka]{font-family:var(--ka)}

.btn{display:inline-flex;align-items:center;gap:.5em;background:var(--ink);color:var(--paper);padding:.85em 1.4em;border-radius:3px;font-weight:600;font-size:.95rem;text-decoration:none;transition:background .25s,color .25s}
.btn:hover{background:var(--safe)}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-sm{padding:.6em 1.05em;font-size:.85rem}
.link-btn{text-decoration:underline;text-underline-offset:3px;font-weight:600;font-size:.9rem}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px clamp(18px,4vw,48px);background:rgba(242,236,227,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(30,26,24,.07)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:600 1.35rem var(--serif)}
.brand img{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--neg)}
.nav-links{display:flex;gap:2rem}
.nav-links a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--soft)}
.nav-links a:hover{color:var(--ink)}

/* hero */
.hero{min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(24px,5vw,80px);padding:110px clamp(18px,6vw,96px) 60px;max-width:1440px;margin:0 auto}
.hero-hi{color:var(--soft);font-weight:500;margin-bottom:1.1rem}
.hero-hi a{color:var(--ink);font-weight:600;text-decoration-color:var(--neg);text-underline-offset:3px}
.hero h1{font-size:clamp(2.2rem,4.2vw,3.7rem);max-width:15ch}
.hero-sub{margin-top:1.3rem;font-size:1.1rem;color:var(--soft);max-width:44ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

.print{justify-self:center;background:#FBF8F3;padding:16px 16px 14px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 30px 60px -30px rgba(40,25,15,.45),0 10px 20px -12px rgba(40,25,15,.25);transform:rotate(1.2deg);width:min(420px,100%)}
.print-img{position:relative;aspect-ratio:720/1040;background:#2a1a10;overflow:hidden;touch-action:none;cursor:crosshair}
.print-img canvas{width:100%;height:100%}
.stamp{position:absolute;right:14px;bottom:12px;font:1.25rem var(--mono);color:#FF8A3D;text-shadow:0 0 6px rgba(255,120,40,.7);letter-spacing:.06em;opacity:0;transition:opacity 1.2s}
.print.done .stamp{opacity:1}
.print figcaption{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:12px;font:500 .88rem var(--sans);color:var(--soft);min-height:34px}

/* roll */
.roll{position:relative;height:520vh;background:var(--dark);color:#F4ECE2}
.roll-pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(300px,.8fr) 1.2fr;align-items:center;gap:2rem;padding:80px clamp(18px,6vw,96px) 40px;overflow:hidden}
.roll-kicker{font:1rem var(--mono);color:var(--neg);letter-spacing:.08em}
.roll h2{font-size:clamp(2rem,3.6vw,3rem);margin-top:.6rem}
.roll-type{color:#BFB2A6;font-weight:600;margin-top:.3rem}
.roll blockquote{font:500 clamp(1.15rem,1.7vw,1.45rem)/1.35 var(--serif);margin-top:1.4rem;max-width:30ch}
.roll-what{color:#CFC4B8;margin-top:1rem;max-width:40ch}
.roll-text{position:relative;z-index:2}
.roll-text>*{transition:opacity .35s}
.roll-text.swap>*:not(.roll-nav){opacity:.15}
.roll-nav{display:flex;align-items:center;gap:.6rem;margin-top:2rem}
.round{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(244,236,226,.5);font-size:1.1rem}
.round:hover{background:#F4ECE2;color:var(--dark)}
.roll-hint{font-size:.85rem;color:#9C9086;margin-left:.6rem}
.spool{position:relative;height:100%;perspective:1400px;display:flex;align-items:center;justify-content:center}
.strip{position:relative;width:1px;height:1px;transform-style:preserve-3d}
.frame{position:absolute;left:0;top:0;width:var(--fw,280px);background:#0E0B0A;padding:26px 12px;cursor:pointer;will-change:transform;
  background-image:radial-gradient(circle at 50% 50%,#3A302A 0 3px,transparent 3.5px),radial-gradient(circle at 50% 50%,#3A302A 0 3px,transparent 3.5px);
  background-size:18px 18px;background-repeat:repeat-x;background-position:0 4px,0 calc(100% - 4px);border-radius:3px}
.frame .shot{position:relative;aspect-ratio:9/16;overflow:hidden;background:#000}
.frame video,.frame img{width:100%;height:100%;object-fit:cover}
.frame video{position:absolute;inset:0}
.frame .edge{position:absolute;left:14px;right:14px;top:5px;display:flex;justify-content:space-between;font:.72rem var(--mono);color:var(--neg);opacity:.85}
.frame .edge.b{top:auto;bottom:5px}

/* prints */
.prints{background:#211816;color:#F4ECE2;padding:120px 0 90px;position:relative;overflow:hidden}
.prints::before{content:"";position:absolute;inset:-20% -10% auto;height:70%;background:radial-gradient(50% 60% at 50% 0,rgba(184,65,47,.35),transparent 70%);pointer-events:none}
.prints-head{position:relative;max-width:760px;padding:0 clamp(18px,6vw,96px)}
.prints h2{font-size:clamp(2rem,3.6vw,3rem)}
.prints-head p{margin-top:1rem;color:#D3C6BA;max-width:52ch}
.lines{position:relative;margin-top:60px}
.line-row{position:relative;height:clamp(330px,31vw,440px);display:flex;justify-content:center;gap:clamp(18px,3vw,48px);padding:0 24px}
.line-row::before{content:"";position:absolute;left:-5%;right:-5%;top:14px;height:2px;background:#8C7B6E;transform:rotate(-.6deg);box-shadow:0 2px 3px rgba(0,0,0,.4)}
.line-row:nth-child(2)::before{transform:rotate(.5deg)}
.hang{position:relative;top:4px;align-self:flex-start;display:block;flex:0 0 auto;transform-origin:50% 0;cursor:zoom-in;transition:filter .3s}
.hang .peg{position:absolute;left:50%;top:-4px;width:14px;height:36px;margin-left:-7px;background:linear-gradient(90deg,#C9A57D,#E4C9A4 45%,#B8926A);border-radius:2px;z-index:2;box-shadow:0 2px 3px rgba(0,0,0,.4)}
.hang .ph{display:block;background:#FBF8F3;padding:9px 9px 26px;margin-top:18px;box-shadow:0 18px 30px -12px rgba(0,0,0,.6)}
.hang img{width:clamp(150px,15vw,210px);aspect-ratio:4/5;object-fit:cover}
.hang.tall img{aspect-ratio:9/13;width:clamp(140px,13vw,190px)}
.hang .ph small{display:block;font:.72rem var(--mono);color:#8a7d72;margin-top:6px;text-align:right}
.hang:hover{filter:brightness(1.06)}
.prints-note{text-align:center;color:#9C8E82;font-size:.85rem;margin-top:24px;padding:0 24px}

/* work / envelope */
.work{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,6vw,90px);padding:120px clamp(18px,6vw,96px);max-width:1440px;margin:0 auto;align-items:start}
.work h2{font-size:clamp(2rem,3.6vw,3rem)}
.work-copy p{margin-top:1.1rem;color:var(--soft);max-width:46ch;font-size:1.05rem}
.work-copy .work-contact a{color:var(--ink);font-weight:600}
.envelope{position:relative;background:#D9C3A1;background-image:linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.04));padding:44px clamp(18px,3vw,36px) 30px;border-radius:4px;box-shadow:0 30px 60px -30px rgba(60,35,15,.55);color:#2B2118}
.env-flap{position:absolute;inset:0 0 auto;height:30px;background:linear-gradient(180deg,#CDB38E,#D9C3A1);clip-path:polygon(0 0,100% 0,96% 100%,4% 100%);border-radius:4px 4px 0 0}
.env-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #2B2118;padding-bottom:8px;margin-bottom:6px}
.env-title{font:600 1.35rem var(--serif)}
.env-no{font:1rem var(--mono)}
.env-no b{color:var(--safe);font-weight:400}
fieldset{border:0;padding:14px 0 10px;border-bottom:1px dashed rgba(43,33,24,.35)}
legend{font:.8rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#6E5A45;padding:0;margin-bottom:4px;float:left;width:100%}
.line{display:flex;align-items:baseline;gap:.8rem;margin-top:8px;clear:both}
.line span{flex:0 0 118px;font-weight:600;font-size:.9rem}
.line input{flex:1;min-width:0;background:transparent;border:0;border-bottom:1.5px solid rgba(43,33,24,.45);padding:4px 2px;font:500 1rem var(--sans);color:#2B2118;border-radius:0}
.line input:focus{outline:none;border-bottom-color:var(--safe)}
.ticks{display:flex;flex-wrap:wrap;gap:6px 18px;clear:both;padding-top:4px}
.ticks label{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:.95rem;cursor:pointer;padding:3px 0}
.ticks input{position:absolute;opacity:0;pointer-events:none}
.ticks i{width:18px;height:18px;border:1.8px solid #2B2118;position:relative;flex:0 0 auto}
.ticks input:checked+i::after{content:"";position:absolute;left:2px;top:-6px;width:9px;height:17px;border:solid var(--safe);border-width:0 3px 3px 0;transform:rotate(40deg)}
.ticks input:focus-visible+i{outline:2px solid var(--safe);outline-offset:2px}
.env-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:22px}
.env-msg{flex-basis:100%;font-size:.9rem;min-height:1.4em;color:#5A3A22}
.envelope.sealed{animation:seal .6s ease}
@keyframes seal{40%{transform:scale(.98) rotate(-.6deg)}}

/* footer */
.foot{background:var(--ink);color:var(--paper);text-align:center;padding:80px 24px 110px}
.foot-name{font:500 clamp(2.6rem,6vw,4.2rem) var(--serif)}
.foot-line{color:#BDB2A6;margin-top:.6rem}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2rem;margin-top:1.6rem;font-weight:600}
.foot-links a{text-decoration-color:var(--neg);text-underline-offset:4px}
.foot-small{color:#8C8177;font-size:.8rem;margin-top:2rem}

/* assistant */
.fab{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:50;display:flex;align-items:center;gap:.6rem;background:var(--ink);color:var(--paper);padding:7px 18px 7px 7px;border-radius:40px;font-weight:600;font-size:.92rem;box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
.fab img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.fab[aria-expanded=true]{opacity:0;pointer-events:none}
.desk{position:fixed;right:clamp(10px,2vw,26px);bottom:clamp(10px,2vw,26px);z-index:60;width:min(390px,calc(100vw - 20px));height:min(600px,calc(100svh - 90px));background:#FBF8F3;border-radius:10px;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden}
.desk[hidden]{display:none}
.desk-head{display:flex;align-items:center;gap:.7rem;padding:12px 14px;background:var(--ink);color:var(--paper)}
.desk-head img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.desk-head div{flex:1;line-height:1.25}
.desk-head small{display:block;color:#BDB2A6;font-size:.78rem}
.desk-x{font-size:1.6rem;line-height:1;width:34px;height:34px}
.desk-log{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.msg{max-width:86%;padding:9px 13px;border-radius:12px;font-size:.93rem;line-height:1.45}
.msg.bot{background:var(--paper2);align-self:flex-start;border-bottom-left-radius:3px}
.msg.me{background:var(--ink);color:var(--paper);align-self:flex-end;border-bottom-right-radius:3px}
.msg a{font-weight:700}
.msg .sum{margin-top:6px;font-size:.86rem;white-space:pre-line;color:var(--soft)}
.desk-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.desk-chips button{font-size:.84rem;font-weight:600;padding:6px 11px;border-radius:6px;box-shadow:inset 0 0 0 1.3px var(--line);background:#fff}
.desk-chips button:hover{box-shadow:inset 0 0 0 1.3px var(--ink)}
.desk-say{display:flex;border-top:1px solid var(--line)}
.desk-say input{flex:1;min-width:0;border:0;padding:14px;font:500 16px var(--sans);background:transparent}
.desk-say input:focus{outline:none}
.desk-say button{width:52px;font-size:1.2rem}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:70;background:rgba(20,14,12,.92);display:flex;align-items:center;justify-content:center;padding:24px}
.lightbox[hidden]{display:none}
.lightbox figure{display:flex;gap:28px;align-items:center;max-width:980px;width:100%;color:#F4ECE2}
.lightbox img{max-height:80svh;max-width:55%;object-fit:contain;background:#FBF8F3;padding:10px 10px 30px}
.lightbox figcaption p:first-child{font:500 clamp(1.3rem,2vw,1.7rem)/1.3 var(--serif)}
.lightbox figcaption p[lang]{margin-top:1rem;color:#CBBEB2;font-size:.95rem}
.lightbox small{display:block;margin-top:1rem;color:#9C8E82;font:.85rem var(--mono)}
.lb-x{position:absolute;top:14px;right:18px;font-size:2rem;color:#F4ECE2;width:48px;height:48px}

:focus-visible{outline:2px solid var(--safe);outline-offset:3px}

/* responsive */
@media (max-width:980px){
  .nav-links{display:none}
  .hero{grid-template-columns:1fr;padding-top:96px;gap:36px}
  .print{width:min(340px,86vw)}
  .roll-pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:74px 20px 20px;gap:0;align-content:start}
  .roll-text{order:2}
  .spool{order:1;height:clamp(300px,50svh,440px)}
  .roll h2{font-size:1.7rem;margin-top:.2rem}
  .roll blockquote{margin-top:.6rem;font-size:1.05rem}
  .roll-what{font-size:.92rem;margin-top:.5rem}
  .roll-nav{margin-top:.9rem}
  .work{grid-template-columns:1fr;padding:90px 20px}
  .line-row{height:auto;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:0 20px 20px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .line-row::before{left:0;right:0}
  .hang{scroll-snap-align:center}
  .hang img{width:170px}
  .lightbox figure{flex-direction:column;gap:14px}
  .lightbox img{max-width:100%;max-height:56svh}
}
@media (max-width:520px){
  .line span{flex-basis:92px}
  .fab span{display:none}
  .fab{padding:7px}
  .hero h1{font-size:2.05rem}
}
