/* Coming-soon page. Layout and the under-construction drawing. Colours, type and spacing come from tokens.css; the language switch from bundle.css. */
html,body{margin:0;background:var(--surface)}
.cs{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "art" "main" "foot";min-height:100vh;min-height:100svh}
.cs__top,.cs__main,.cs__foot{padding-inline:var(--space-4)}
.cs__top{grid-area:top;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-6)}
.cs__logo{display:block;height:48px}
.cs__logo img{display:block;height:100%;width:auto}
.cs__art{grid-area:art;display:flex;align-items:center;justify-content:center;padding:var(--space-8) var(--space-4);background:var(--surface-subtle)}
.cs__art svg{display:block;width:100%;max-width:340px;height:auto}
.cs__main{grid-area:main;padding-block:var(--space-8)}
.cs__title{margin:0;font:800 clamp(40px,13.5vw,56px)/1.07 var(--font-sans);letter-spacing:-.03em}
.cs__title:lang(am){line-height:1.3;letter-spacing:0}
.cs__status{margin:var(--space-4) 0 0;font:700 24px/30px var(--font-sans);letter-spacing:-.01em;color:var(--text)}
.cs__status:lang(am){line-height:1.5;letter-spacing:0}
.cs__line{margin:var(--space-3) 0 0;max-width:34em;font:400 18px/28px var(--font-sans);color:var(--text-muted)}
.cs__line:lang(am){font-size:19px;line-height:1.75}
.cs__foot{grid-area:foot;align-self:end;padding-bottom:var(--space-8)}
.cs__contact{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);margin:0;padding-top:var(--space-6);border-top:1px solid var(--border)}
.cs__contact dt{margin:0 0 var(--space-1);font:600 14px/20px var(--font-sans);color:var(--text-muted)}
.cs__contact dd{margin:0;font:400 16px/26px var(--font-sans);color:var(--text)}
.cs__contact dt:lang(am),.cs__contact dd:lang(am){font-size:16px;line-height:1.75}
.cs__phone{display:inline-block;font:700 24px/30px var(--font-sans);letter-spacing:-.01em;color:var(--action);text-decoration:none;white-space:nowrap}
.cs__phone:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.cs__phone:focus-visible,.cs__logo:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* The drawing: a web page being put together, block by block */
.cs-d__frame{fill:var(--surface);stroke:var(--text);stroke-width:2}
.cs-d__line{fill:none;stroke:var(--text);stroke-width:2}
.cs-d__deep{fill:var(--green-900)}
.cs-d__green{fill:var(--accent)}
.cs-d__mist{fill:var(--mist-200)}
.cs-d__todo{fill:none;stroke:var(--mist-300);stroke-width:2;stroke-dasharray:6 6}
.cs-d__build{opacity:0;animation:cs-build 9s linear infinite}
.cs-d__build--2{animation-name:cs-build-2}
.cs-d__build--3{animation-name:cs-build-3}
@keyframes cs-build{0%,12%{opacity:0}18%,92%{opacity:1}100%{opacity:0}}
@keyframes cs-build-2{0%,36%{opacity:0}42%,92%{opacity:1}100%{opacity:0}}
@keyframes cs-build-3{0%,60%{opacity:0}66%,92%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cs-d__build{animation:none;opacity:0}.cs-d__build--1{opacity:1}}

@media (min-width:900px){
  .cs{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr auto;grid-template-areas:"top art" "main art" "foot art"}
  .cs__top,.cs__main,.cs__foot{padding-left:max(var(--space-8),calc((100vw - 1200px) / 2));padding-right:var(--space-12)}
  .cs__top{padding-block:var(--space-8)}
  .cs__main{align-self:center}
  .cs__foot{padding-bottom:var(--space-12)}
  .cs__art{padding:var(--space-12)}
  .cs__art svg{max-width:460px}
  .cs__contact{grid-template-columns:auto minmax(0,1fr);gap:var(--space-16)}
}
@media (min-width:1024px){.cs__title{font-size:88px;line-height:92px}.cs__title:lang(am){font-size:72px}}