/* ------------------------------------------------------------------
   Milos Djordjevic, portfolio. Shared shell.

   The page is drawn on the 1440 grid of the Figma file. Anything that
   runs edge to edge there runs edge to edge here: it is a child of the
   section and spans the window. Everything else sits in a 1440 column
   centred in the window. Below 1440 the whole page is zoomed down, so
   the proportions never change.
   ------------------------------------------------------------------ */

:root{
  --bone:#FFFAD8; --plate:#FFFAD8; --cream:#CDE3E8; --paper:#FFFDEE;
  --ink:#2D120D; --dark:#3A1A14; --mute:#877E73; --wine:#2D120D;
  --green:#2D120D; --gold:#B39567; --taupe:#A89A90;
  --eyetx:#CDE3E8; --navtx:#CDE3E8; --chiptx:#CDE3E8;
  --e:cubic-bezier(.22,.61,.36,1);
  /* the phone layer is shared with the landing, so it is given the
     landing's names for the same two values */
  --casetx:#CDE3E8; --panel:#F7F1CC; --maroon:#240E0A;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bone);overflow-x:clip}
body{background:var(--bone);color:var(--ink);
  font-family:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

#page{position:relative;width:1440px}
.sec{position:relative;width:100%;overflow:hidden}
.c{position:absolute;left:50%;top:0;width:1440px;height:100%;margin-left:-720px}
.c > *{position:absolute}
.c [data-stagger] > *{position:absolute}
.bleed{position:absolute;left:0;width:100%}
/* a frame that sits on the edge of the 1440 canvas in Figma runs to the
   edge of the window, however wide the window is */
.c > .bleedR{right:calc(720px - var(--pw,1440px) / 2) !important;width:auto !important}
.c > .bleedL{left:calc(720px - var(--pw,1440px) / 2) !important;right:720px;width:auto !important}
/* an edge to edge picture keeps its Figma proportion and scales with the window */
.bleedimg{position:relative;width:100%}
.bleedimg > .frm,.bleedimg > .live{position:absolute;inset:0}
.bleedimg .frm img,.bleedimg .frm video{display:block;width:100%;height:100%;object-fit:cover}

/* ---------------- type ---------------- */
.t{position:absolute;white-space:pre-wrap}
.d94{font-size:94px;font-weight:500;letter-spacing:-.03em;line-height:92px;text-transform:uppercase}
.d88{font-size:88px;font-weight:500;letter-spacing:-.03em;line-height:82px;text-transform:uppercase}
.d88t{font-size:88px;font-weight:500;letter-spacing:-.03em;line-height:74px;text-transform:uppercase}
.h64{font-size:64px;font-weight:500;letter-spacing:-.03em;line-height:62px;text-transform:uppercase}
.h64c{font-size:64px;font-weight:500;letter-spacing:-.03em;line-height:56px;text-transform:uppercase}
.h56{font-size:56px;font-weight:500;letter-spacing:-.03em;line-height:56px;text-transform:uppercase}
.h44{font-size:44px;font-weight:500;letter-spacing:-.025em;line-height:54px;text-transform:uppercase}
.h44t{font-size:44px;font-weight:500;letter-spacing:-.03em;line-height:42px;text-transform:uppercase}
.h44r{font-size:44px;font-weight:500;letter-spacing:-.025em;line-height:60px;text-transform:uppercase}
.h32{font-size:32px;font-weight:500;letter-spacing:-.02em;line-height:40px}
.h26{font-size:26px;font-weight:400;letter-spacing:-.01em;line-height:32px;text-transform:uppercase}
.h24{font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:32px}
.h22{font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:26px;text-transform:uppercase}
.h18{font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:24px}
.bd{font-size:15px;font-weight:400;letter-spacing:-.01em;line-height:22px}
.bd27{font-size:15px;font-weight:400;letter-spacing:-.01em;line-height:23px}
.bd22{font-size:15px;font-weight:400;letter-spacing:-.01em;line-height:21px}
.bd19{font-size:17px;font-weight:400;letter-spacing:-.01em;line-height:26px}
.bd15{font-size:14px;font-weight:400;letter-spacing:-.01em;line-height:21px}
.sub{font-size:14px;font-weight:500;letter-spacing:-.01em;line-height:22px;text-transform:uppercase}
.subn{font-size:14px;font-weight:400;letter-spacing:0;line-height:19px}
.lb{font-size:12px;font-weight:500;letter-spacing:.18em;line-height:14px;text-transform:uppercase}
.lb15{font-size:12px;font-weight:500;letter-spacing:.18em;line-height:15px;text-transform:uppercase}
.lb18{font-size:12px;font-weight:500;letter-spacing:.18em;line-height:18px;text-transform:uppercase}
.lbr{font-size:12px;font-weight:400;letter-spacing:.18em;line-height:15px}
.sc{font-size:12px;font-weight:400;letter-spacing:-.005em;line-height:15px;text-transform:uppercase}
.mute{color:var(--mute)}
.ctr{text-align:center}
.rt{text-align:right}
.rule{position:absolute;height:1px;background:var(--ink);opacity:.14}

.chip{position:absolute;height:18px;background:var(--ink);color:var(--eyetx);
  font-size:11px;font-weight:500;letter-spacing:.18em;line-height:14px;
  padding:2px 5px 0 5px;white-space:nowrap}
.chip.lite{background:var(--cream);color:var(--ink)}
.chip.wine{background:var(--wine);color:var(--navtx)}

/* ---------------- chrome ---------------- */
.logo{position:absolute;font-size:22px;font-weight:700;font-style:italic;
  letter-spacing:.01em;line-height:27px;text-transform:uppercase}
.nav{position:absolute;left:1060px;top:30px;height:21px;display:flex;gap:10px;align-items:flex-start}
.nav a,.nav button{display:inline-flex;align-items:center;justify-content:center;
  padding:2px 8px;font-size:14px;font-weight:400;letter-spacing:-.01em;line-height:17px;
  text-transform:uppercase;white-space:nowrap;font-family:inherit;color:inherit;
  background:none;border:0;cursor:pointer;
  transition:background .2s var(--e),color .2s var(--e)}
.nav a:hover{background:var(--ink);color:var(--cream)}
.nav .mail{background:var(--wine);color:var(--navtx)}
.nav .mail:hover{background:var(--ink);color:var(--cream)}

.foot{position:absolute;left:561px;height:21px;display:flex;gap:30px}
.foot a{display:inline-flex;align-items:center;justify-content:center;font-size:14px;
  font-weight:400;letter-spacing:-.01em;line-height:17px;padding:2px 8px;text-transform:uppercase;
  transition:background .22s var(--e),color .22s var(--e)}
.foot a:hover{background:var(--ink);color:var(--cream)}

/* ---------------- reveals (only with script) ---------------- */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .6s var(--e),transform .75s var(--e)}
.js .rv.in{opacity:1;transform:none}
/* the wipe sits on the child, never on the observed box: an element that
   clips itself to nothing reports no intersection and would never reveal */
.js .cx > *{clip-path:inset(0 100% 0 0);transition:clip-path .9s var(--e)}
.js .cx.in > *{clip-path:inset(0 0 0 0)}
.js .dx{transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--e)}
.js .dx.in{transform:scaleX(1)}
.frm{overflow:hidden}
.js .frm img,.js .frm video{transform:scale(1.06);transition:transform 1.4s var(--e)}
.js .frm.in img,.js .frm.in video{transform:scale(1)}
.zoom img{transition:transform .9s var(--e)}
.zoom:hover img{transform:scale(1.04)}

/* ---------------- the globe ---------------- */
#gl{position:absolute;left:503px;top:151px;width:435px;height:435px;opacity:0}
#globeCv{position:absolute;left:0;top:0;width:435px;height:435px;display:block}
#flags{position:absolute;left:0;top:0;width:435px;height:435px;transform-origin:0 0;pointer-events:none}
.flag{position:absolute;left:0;top:0;width:0;height:0}
.flag i{position:absolute;left:0;bottom:0;width:1px;background:var(--wine);display:block}
.flag b{position:absolute;left:-4px;height:16px;background:var(--wine);color:var(--cream);
  font-size:10px;font-weight:500;letter-spacing:.18em;line-height:12px;padding:2px 4px 2px 4px;
  white-space:nowrap;text-transform:uppercase}
.flag::after{content:"";position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;background:var(--wine)}
.flag.base i,.flag.base b{background:var(--green)}
.flag.base::after{background:var(--green)}
.garrow{position:absolute;width:34px;height:34px;border:1px solid var(--ink);
  display:grid;place-items:center;cursor:pointer;transition:background .22s var(--e)}
.garrow:hover{background:var(--ink)}
.garrow:hover svg path{stroke:var(--cream)}

/* ---------------- lightbox ---------------- */
#lb{position:fixed;inset:0;background:rgba(21,18,15,.94);z-index:400;display:none;
  align-items:center;justify-content:center;cursor:zoom-out}
#lb.on{display:flex}
#lb img{width:88vw;height:84vh;object-fit:contain}
#lbcap{position:fixed;left:24px;bottom:22px;color:var(--cream);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;opacity:.7}

/* ---------------- a page of a site, filling the window ----------------
   The section holds the window while the page inside the frame runs from
   its top to its bottom. The frame is half the window and the full height
   of it, edge to edge; the words keep their Figma places in a 780 tall
   block centred on the window. pf.js sets the height of the section. */
.pf{position:relative;width:100%;height:var(--vp,100vh)}
.pfin{position:sticky;top:0;height:var(--vp,100vh);overflow:hidden}
.pfpane{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:var(--pfbg,#EEF0EA)}
.pf.R .pfpane{right:0}
.pf.L .pfpane{left:0}
.pfpane > img{position:absolute;left:0;top:0;width:100%;height:auto;will-change:transform;backface-visibility:hidden}
.pf.still .pfpane > .frm{position:absolute;inset:0}
.pf.still .pfpane img{height:auto;transform-origin:50% 0}
.pfc{position:absolute;left:50%;top:50%;width:1440px;height:780px;margin:-390px 0 0 -720px;pointer-events:none}
.pfc > *{position:absolute;pointer-events:auto}

/* the footer runs to the edges of the window like the bar at the top:
   the mark 60px from the left edge, the copyright 60px from the right */
.c > .edgeL{left:calc(780px - var(--pw,1440px) / 2) !important}
.c > .edgeR{left:auto !important;right:calc(780px - var(--pw,1440px) / 2) !important;text-align:right}

/* the same page frame on a phone: a box in the column, the page runs inside */
.mpf{position:relative;overflow:hidden;background:var(--pfbg,#EEF0EA)}
.mpf > img{position:absolute;left:0;top:0;width:100%;height:auto;will-change:transform}

/* ---------------- a band that runs sideways while the section holds ---------------- */
.hrun{position:relative;width:100%}
.hrin{position:sticky;top:0;height:var(--vp,100vh);overflow:hidden;display:flex;align-items:center;justify-content:center}
.hrblk{position:relative;flex:0 0 auto;width:100%;transform-origin:center center}
.hrband{position:absolute;left:0;width:100%;overflow:hidden}
.hrtrack{position:absolute;left:0;top:0;height:100%;will-change:transform}

/* copied: the chip turns green for a moment */
.sw.ok,#topbar nav .sw.ok,#pagebar nav .sw.ok{background:#2D120D !important;color:#CDE3E8 !important}

/* palette: coffee bean, lemon chiffon, botticelli. The big dark surfaces are
   coffee bean with botticelli type; the small tags are botticelli with dark type */
.chip--num,.num,.row .nm,.mnote .n,.mrow .n,.mnum,.wnum{background:#CDE3E8 !important;color:#2D120D !important}
.flag.base i,.flag.base b,.flag.base::after{background:#CDE3E8 !important;color:#2D120D !important}
.chip.wine,.mchip[style*="var(--wine)"]{background:#CDE3E8 !important;color:#2D120D !important}
.s-hero .cta{background:#CDE3E8 !important;color:#2D120D !important}
.s-hero .cta:hover{background:#FFFAD8 !important;color:#2D120D !important}
.mhero .mcta{background:#CDE3E8 !important;color:#2D120D !important}
#pagebar.onwine nav a:hover{background:#CDE3E8 !important;color:#2D120D !important}
#pagebar.onwine nav .mail:hover{background:#FFFAD8 !important;color:#2D120D !important}