/* Βίκυ Θεοδωροπούλου — static port of the Cargo site.
   Sizes are in vw so the page scales like Cargo does (measured at a 1728px viewport):
   big type 81.2px = 4.7vw · nav 27.1px = 1.567vw · body 21.66px = 1.2535vw · copyright 15.2px = .877vw */
:root{
  --big:4.7vw; --mid:1.567vw; --body:1.2535vw; --small:.877vw; --rem:.787vw;
  --serif:"EB Garamond",Garamond,"Times New Roman",serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --ink:#000;
}
*{box-sizing:border-box}
html{background:#fbf8f6}
body{margin:0;background:#fbf8f6;color:var(--ink);font-family:var(--serif);font-size:var(--body);line-height:1.2;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
::selection{background:#000;color:#fff}
#app{min-height:100vh;position:relative}

/* ---------- global footer ---------- */
#homebtn{position:fixed;left:14px;bottom:19px;z-index:30;display:inline-flex;align-items:center;gap:5px;
  font:400 11.5px/1 var(--mono);letter-spacing:.01em;color:rgba(0,0,0,.75);
  border:1px solid rgba(0,0,0,.4);border-radius:2px;padding:5.4px 8px}
#homebtn:hover{background:rgba(0,0,0,.08)}
#copy{position:fixed;left:25.6vw;bottom:19px;z-index:30;font-size:var(--small);line-height:1;pointer-events:none}

/* ---------- big type ---------- */
.big{font-size:var(--big);line-height:1.05;letter-spacing:-.03em;font-weight:400;margin:0}
.big em,.big.i{font-style:italic}
.big a:hover{font-style:italic}

/* ---------- home ---------- */
.home{min-height:100vh;position:relative}
.home .l{position:absolute;left:0;right:0;text-align:center;transform:translateY(-50%)}
.home .l1{top:27.5%}
.home .l2{top:46%}
.home .l3{top:65%}
.home nav{font-size:var(--mid);line-height:1.2;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .3em;padding:0 2vw}
.home nav a:hover{font-style:italic}
.home nav .dash{opacity:1}

/* ---------- list pages (hubs) ---------- */
.list{min-height:100vh;padding:.5vw .8vw 14vh}
.list.center{text-align:center}
.list .title{font-style:italic}
.list ul{list-style:none;margin:0;padding:0}
.list li{font-size:var(--big);line-height:1.05;letter-spacing:-.03em}
.list li a:hover{font-style:italic}
.list .back{display:inline-flex;align-items:center;gap:.25em;margin-top:1.05em;font-style:italic;font-size:var(--big);line-height:1.05;letter-spacing:-.03em}
.list .back svg{width:.62em;height:.62em;flex:none}
.list.center .back{margin-left:0}
.list .gap{height:1.05em}

/* ---------- index (psychogeographical maps hub) ---------- */
.index{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 2vw 12vh}
.index .num a:hover{font-style:italic}

/* ---------- photo page (Ludens Labs) ---------- */
.photo{min-height:100vh;position:relative;background-size:cover;background-position:center;display:grid;place-items:center}
.photo::before{content:"";position:absolute;inset:0;background:var(--tint,rgba(255,235,0,.45));mix-blend-mode:multiply}
.photo .btn{position:relative;display:inline-flex;align-items:center;gap:.35em;background:#f7f000;color:#000;
  font-size:calc(var(--big)*.5);line-height:1.1;letter-spacing:-.02em;padding:.05em .18em .1em}
.photo .btn svg{width:.8em;height:.8em}
.photo .btn:hover{background:#fff}

/* ---------- side panel (σελίδες κειμένου) — τα μεγέθη είναι σε "rem του Cargo" (1rem = .787vw = 13.6px στα 1728px) ---------- */
.panel{position:fixed;top:0;right:0;width:var(--w,50vw);height:100vh;overflow-y:auto;overscroll-behavior:contain;z-index:20;
  background:var(--panel,transparent);box-shadow:0 0 calc(5*var(--rem)) rgba(0,0,0,.25);
  transform:translateX(100%);opacity:0;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .3s}
.panel.in{transform:none;opacity:1}
.panel[style*="transparent"]{box-shadow:none}
.pc{padding:var(--rem) var(--rem) calc(6*var(--rem));font-size:calc(1.6*var(--rem));line-height:1.2;text-align:left}
.pc h2{font-size:calc(2*var(--rem));font-weight:400;line-height:1.2;letter-spacing:-.008em;margin:0}
.pc hr{background:rgba(0,0,0,.6);border:0;height:1px;display:block;margin:calc(.4*var(--rem)) 0 calc(.5*var(--rem))}
.pc a:hover{opacity:.7}
.pc .lead{font-size:calc(2.2*var(--rem));line-height:1.22}
.pc .cols2{columns:2;column-gap:calc(2*var(--rem));margin:0 0 calc(1.6*var(--rem))}
.pc .cols2>div{break-inside:avoid}
.pc sub{position:relative;vertical-align:baseline;top:.3em}
.pc sup{position:relative;vertical-align:baseline;top:-.4em}
.pc .small-caps{font-variant:small-caps;text-transform:lowercase}
.pc .button-15-1{display:inline-block;font-size:calc(1.6*var(--rem));line-height:1.2;color:#fff;background:rgba(0,0,0,.6);
  padding:calc(.9*var(--rem)) calc(1.2*var(--rem))}
.pc a.navigation{font-size:calc(1.6*var(--rem))}
.pc .ico{display:inline-block;vertical-align:middle}
.pc .arr{width:1.1em;height:.55em}
.pc .bow{display:inline-block;width:1em;height:.72em;background:currentColor;vertical-align:baseline;
  clip-path:polygon(0 0,50% 50%,100% 0,100% 100%,50% 50%,0 100%)}
.pc table{border-spacing:2px}
.pc td{padding:1px;vertical-align:top}

/* στήλες (12 στήλες, κενό = gutter σε rem) */
.cs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:calc(var(--g)*var(--rem))}
.cu{grid-column:span var(--s);min-width:0}

/* εικόνες */
.mi{display:inline-block;vertical-align:baseline;margin:0;max-width:100%}
.mi img,.gi img,.ss img{width:100%;height:auto}
.gi img{display:block}
.mi figcaption{margin-top:.8em;font:450 calc(.85*var(--rem))/1.1 var(--mono);color:rgba(0,0,0,.4)}
.ss{display:block}
.ss img{width:auto;max-width:100%;height:calc(25*var(--rem))}
.gg{display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:calc(var(--g)*var(--rem));align-items:var(--va);justify-items:var(--ha)}
.gi{margin:0;width:100%}

/* ticker (Akrithakis) */
.mq{overflow:hidden;white-space:nowrap;font-size:calc(1.6*var(--rem));padding:.1em 0}
.mqi{display:inline-block;animation:mq 40s linear infinite}
.mqi span{display:inline-block;padding-right:3em}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mqi{animation:none}}

/* wallpaper πίσω από το πάνελ (map6) */
.wall{position:fixed;inset:0;z-index:15;background:var(--wb);opacity:0;transition:opacity .4s;cursor:pointer}
.wall.in{opacity:1}
.wall img{position:absolute;inset:calc(var(--wm)*var(--rem));width:calc(100% - 2*var(--wm)*var(--rem));height:calc(100% - 2*var(--wm)*var(--rem));
  object-fit:contain;opacity:0;transition:opacity 2.1s}
.wall img.on{opacity:1}

/* ---------- small screens: Cargo χρησιμοποιεί δικό του mobile scale — οι τιμές εδώ είναι πρώτη εκτίμηση ---------- */
@media (max-width:760px){
  :root{--big:11.2vw; --mid:5.2vw; --body:4.7vw; --small:3.3vw; --rem:3.1vw}
  #copy{left:auto;right:14px;bottom:24px}
  .home .l1{top:24%} .home .l2{top:46%} .home .l3{top:68%}
  .list{padding:2vw 3vw 18vh}
  .panel{width:100vw}
  .pc{font-size:calc(1.5*var(--rem))}
  .pc h2{font-size:calc(1.75*var(--rem))}
  .pc .cols2{columns:1}
  .cs:not(.ns){grid-template-columns:1fr;row-gap:calc(.6*var(--rem))}
  .cs:not(.ns):not(.he)>.cu.e{display:none}
  .cs:not(.ns)>.cu{grid-column:auto}
  .cs.ns{column-gap:calc(var(--mg)*var(--rem))}
  .gg{gap:calc(var(--mg)*var(--rem))}
  .mi{width:100%!important}
  .ss img{height:auto;width:100%}
  .index .big{letter-spacing:-.04em}
}

/* ---------- Articles: μεγάλη τυπογραφία ---------- */
.pc .art{--bs:2.1;--ls:3.1;padding-top:calc(1.2*var(--rem))}
.pc .art.m{--bs:1.85;--ls:2.7}
.pc .art.l{--bs:1.7;--ls:2.45}
.pc .art .hd{font-weight:400;letter-spacing:-.035em;line-height:.98;margin:0 0 calc(1.4*var(--rem));text-wrap:balance}
.pc .art .hd1{font-size:calc(9.4*var(--rem))}
.pc .art .hd2{font-size:calc(6.4*var(--rem))}
.pc .art .hd3{font-size:calc(4.6*var(--rem))}
.pc .art .meta{font-size:calc(1.7*var(--rem));line-height:1.25;margin:0 0 calc(1*var(--rem))}
.pc .art .alead{font-size:calc(var(--ls)*var(--rem));line-height:1.14;letter-spacing:-.015em;margin:calc(1.4*var(--rem)) 0 calc(1.6*var(--rem));text-wrap:pretty}
.pc .art .abody{font-size:calc(var(--bs)*var(--rem));line-height:1.26;margin:calc(1.6*var(--rem)) 0 calc(1.2*var(--rem))}
.pc .art.l .abody{columns:2;column-gap:calc(2.4*var(--rem))}
.pc .art .abody p{margin:0 0 .72em;hyphens:auto;-webkit-hyphens:auto}
.pc .art .abody p+p{text-indent:1.4em;margin-top:0}
.pc .art .abody .sh+p,.pc .art .abody .afig+p,.pc .art .abody .pq+p{text-indent:0}
.pc .art .abody .sh{font-size:1.3em;font-weight:400;font-style:italic;letter-spacing:-.01em;line-height:1.1;margin:1.1em 0 .4em;column-span:none;break-after:avoid}
.pc .art .abody .pq{margin:.9em 0 1.1em;padding:.5em 0 .6em;border-top:1px solid rgba(0,0,0,.6);border-bottom:1px solid rgba(0,0,0,.6);
  font-size:1.6em;font-style:italic;letter-spacing:-.025em;line-height:1.05;column-span:all;text-wrap:balance}
.pc .art .abody .cred{font:400 calc(1.25*var(--rem))/1.5 var(--mono);margin:1.2em 0 .4em;opacity:.85;column-span:all}
.pc .art .afig{display:flex;flex-wrap:wrap;gap:calc(1*var(--rem));align-items:flex-end;margin:.5em 0 1em;column-span:all}
.pc .art .afig figure{margin:0;width:calc(var(--w)*var(--rem));max-width:100%}
.pc .art .afig img{display:block;width:100%;height:auto}
@media (max-width:760px){
  .pc .art .hd1{font-size:calc(5.6*var(--rem))}.pc .art .hd2{font-size:calc(4.2*var(--rem))}.pc .art .hd3{font-size:calc(3.4*var(--rem))}
  .pc .art{--bs:1.6;--ls:2.2}.pc .art.m,.pc .art.l{--bs:1.6;--ls:2.2}
  .pc .art.l .abody{columns:1}
}
.pc .art .afig.ctr{justify-content:center}
.pc .art .afig.mult img{mix-blend-mode:multiply}
.pc .art .afig.spread{justify-content:space-between;flex-wrap:nowrap}
.pc .art .afig.one{flex-wrap:nowrap;justify-content:space-between}.pc .art .afig.one figure{flex:0 1 auto;min-width:0}
.pc .art .afig.top{align-items:flex-start}

/* Odds & Ends */
.pc .art .abody .prs{text-align:center;font-size:1.38em;line-height:1.14;letter-spacing:-.01em;margin:1.3em 0 1em;column-span:all;text-wrap:balance}
.pc .art .abody .lst{font-size:1.22em;line-height:1.22;letter-spacing:-.01em;margin:.5em 0 1em;font-style:italic;text-wrap:pretty;column-span:all}
.pc .art .abody .exc{margin:1.1em 0 1.2em;padding:.1em 0 .1em 1.1em;border-left:2px solid rgba(0,0,0,.55);column-span:all}
.pc .art .abody .exc p{text-indent:0;font-style:italic;margin:.5em 0}
.pc .art .abody .exc .src{font:400 calc(1.25*var(--rem))/1.4 var(--mono);opacity:.85;margin-top:.5em}