/* arc.css - Euro Decor, Eli 21 Oct: "a progressive - we start during the day, and until the end we are going darker and darker till we
   reach the night". One light down the whole page, like one sky from noon to night: the tour by day, the real world through the window
   in the afternoon, the projects in the late afternoon, Systems in the afternoon blue, the Factory deeper, the team at dusk, the walk
   back through the window at sunset, then the evening film into the night. Each part ends in the colour the next one begins with. */
:root{--arc-p1:#D3DFEC;--arc-p2:#E3E9F0;--arc-p3:#EEE8DE;--arc-s1:#D2DDEA;--arc-s2:#C1CFDF;--arc-f2:#A3B5CB;--arc-f3:#7D92B0;--arc-f4:#596D90;
  --arc-ink:#14181F;--arc-soft:#3D4656;--arc-navy:#0B1B3F}
/* the projects: late afternoon - a light sky over the street, the windows in their dark frames */
#work{color:var(--arc-ink)}
#work .pan.proj,#work .pan.end{background:linear-gradient(to bottom,var(--arc-p1) 0%,var(--arc-p2) 56%,var(--arc-p3) 100%)}
#work .pan.intro{background:linear-gradient(90deg,rgba(228,234,241,.95) 0%,rgba(228,234,241,.66) 58%,rgba(228,234,241,0) 100%)}
#work .pan.intro p{color:var(--arc-soft)}
#work .pan.intro .eye,#work .eye{color:#092E7F}
#work .pan.proj+.pan.proj{border-left-color:rgba(11,27,63,.07)}
#work .win{box-shadow:0 32px 60px -20px rgba(24,38,62,.42)}
#work .meta .n{color:#56627A}
#work .meta .where{color:#092E7F}
#work .meta p,#work .pan.end p{color:var(--arc-soft)}
#work .tags span{border-color:rgba(11,27,63,.22);color:#24314A}
#wctl{color:#24314A}
#wctl button{background:rgba(255,255,255,.74);border-color:rgba(11,27,63,.24);color:var(--arc-navy)}
#wctl button:hover{border-color:#092E7F}
#wbar{background:rgba(11,27,63,.16)}
/* the street under the projects, in the afternoon haze instead of the night */
#skyline{opacity:1}
#skyline rect[fill="#0d1420"]{fill:#B9C7D7}
#skyline rect[fill="#131c2b"]{fill:#AAB9CC}
#skyline path[stroke="#16202f"]{stroke:#98AAC0}
#skyline rect[fill="#ffb27d"]{fill:#FFF8EC}
#skyline rect[fill="#26354d"]{fill:#A0B1C6}
#skyline rect[fill="#9BB3E7"]{fill:#8497B2}
/* the walk out of the projects: from their warm haze, along the street, into the afternoon blue of Systems */
#dl-walkout{background:linear-gradient(to bottom,var(--arc-p3) 0%,rgba(238,232,222,0) 26%,rgba(210,221,234,0) 64%,var(--arc-s1) 100%),url(media/drone_f0.jpg) center 70%/cover}
/* Systems: the afternoon blue, with grain and a low sun from the left; the facade of openings in light aluminium stands out of it */
#systems.dl{position:relative;isolation:isolate;background:radial-gradient(120% 70% at 8% 0%,rgba(255,246,228,.5),rgba(255,246,228,0) 62%),linear-gradient(to bottom,var(--arc-s1),var(--arc-s2))}
#systems.dl::before,#factory.dl::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .27  0 0 0 0 .4  0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#systems .dl-facade{background:linear-gradient(to bottom,rgba(255,255,255,.55),rgba(255,255,255,0) 40%),
  repeating-linear-gradient(to bottom,transparent 0 118px,rgba(50,70,100,.12) 118px 119px,rgba(255,255,255,.85) 119px 120px),
  repeating-linear-gradient(to right,transparent 0 238px,rgba(50,70,100,.12) 238px 239px,rgba(255,255,255,.85) 239px 240px),
  linear-gradient(100deg,#EEF1F4 0%,#E2E7ED 48%,#EAEDF1 100%);box-shadow:0 36px 70px -30px rgba(25,40,65,.5),0 0 0 1px rgba(255,255,255,.6) inset}
/* the Factory: later in the day, deeper, and the team at dusk; it ends in the sunset of the walk back through the window */
#factory.dl{position:relative;isolation:isolate;background:linear-gradient(to bottom,var(--arc-s2) 0,var(--arc-f2) 40%,var(--arc-f3) 72%,var(--arc-f4) calc(100% - 34vh),rgba(89,109,144,0) 100%)}
#factory .dl-team h2,#factory .dl-team h3{color:#F4F6FA}
#factory .dl-team p,#factory .dl-team figcaption p,#factory .dl-team .lead{color:#DCE3EE}
#factory .dl-team .eye{color:#C9D8F5}
/* the top bar over the light parts: a soft frosted band that takes the colour of the sky under it, not a pale strip */
#hd.dl-light::before{background:linear-gradient(rgba(232,238,245,.8) 0%,rgba(232,238,245,.46) 62%,rgba(232,238,245,0) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* r12 (Eli 22 Oct): 'Skip all' beside the projects' arrows - past every project into Systems */
#wctl #wskip{width:auto;padding:0 12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
@media (max-width:560px){#wctl{gap:8px}#wbar{display:none}#wnum{white-space:nowrap}#wctl #wskip{padding:0 10px}}   /* r12c: one line on a phone, inside the screen */
html.r2lock{touch-action:pan-x}   /* r12: phones - the page's own vertical panning off while in the film and the projects (one swipe = one stop) */