/* Square editorial refresh for the public shell and homepage. */
:root{
  --refresh-red:var(--red26,var(--accent,#c9372c));
  --refresh-ink:var(--ink26,var(--ink,#15201c));
  --refresh-dim:var(--dim26,var(--dim,#68736d));
  --refresh-line:var(--line26,var(--line,rgba(21,32,28,.17)));
  --refresh-sheet:var(--sheet26,var(--sheet,#faf8f4));
}

html .topbar{
  min-height:72px;
  border-bottom:1px solid var(--refresh-line);
  box-shadow:0 8px 24px rgba(11,18,14,.08);
}
html .topbar .brand{gap:11px;letter-spacing:.075em}
html .topbar .brand img{width:38px;height:38px;object-fit:contain;border:1px solid var(--refresh-line);padding:5px}
html .topbar nav>a:not(.bell):not(.me-box):not(.btn-login){
  padding:10px 11px;
  border:1px solid transparent;
  border-radius:0;
  font-family:var(--mono26,ui-monospace,monospace);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
html .topbar nav>a:not(.bell):not(.me-box):not(.btn-login):hover,
html .topbar nav>a.on,html .topbar nav>a[aria-current]{
  background:color-mix(in srgb,var(--refresh-red) 10%,transparent);
  border-color:color-mix(in srgb,var(--refresh-red) 42%,var(--refresh-line));
}
html .topbar .btn-login,html .topbar .btn-out{border-radius:0;box-shadow:none}
html .topbar .theme-toggle,html .topbar .bell{border-radius:0}
html .nav-burger{border-radius:0;border:1px solid var(--refresh-line);padding:8px}

html body{background-image:linear-gradient(var(--grid26,rgba(21,32,28,.04)) 1px,transparent 1px),linear-gradient(90deg,var(--grid26,rgba(21,32,28,.04)) 1px,transparent 1px)!important;background-size:32px 32px}
html .hx{padding-top:64px;padding-bottom:50px;gap:34px}
html .hx-main{position:relative}
html .hx-main:before{content:"01 / PROJECT CONTROL";display:block;margin-bottom:15px;color:var(--refresh-red);font:600 10px/1 var(--mono26,ui-monospace,monospace);letter-spacing:.18em}
html .hx-title{letter-spacing:.01em}
html .hx-title span{line-height:.9}
html .hx-title em{border-left:6px solid var(--refresh-ink);box-shadow:8px 8px 0 color-mix(in srgb,var(--refresh-red) 20%,transparent)}
html .hx-lead{max-width:54ch;color:var(--refresh-dim)}
html .hx-btn{border-radius:0;min-height:48px}

html .sh26-srv{
  position:relative;
  border-top-width:4px;
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 18px 30px -28px rgba(0,0,0,.9);
}
html .sh26-srv:before{content:"";position:absolute;top:0;right:0;width:34px;height:34px;border-left:1px solid color-mix(in srgb,var(--refresh-red) 42%,transparent);border-bottom:1px solid color-mix(in srgb,var(--refresh-red) 42%,transparent);pointer-events:none}
html .sh26-srv-ip{letter-spacing:.015em}
html .sh26-srv-go{font-family:var(--mono26,ui-monospace,monospace);font-size:11px;letter-spacing:.09em;text-transform:uppercase}

html .ph-board,html .ph-feat-grid{box-shadow:0 1px 0 rgba(255,255,255,.05),0 18px 34px -30px rgba(0,0,0,.8)}
html .ph-board-bar{min-height:50px}
html .ph-plate{position:relative;min-height:94px}
html .ph-plate:before{content:"";position:absolute;left:0;bottom:0;width:0;height:3px;background:var(--refresh-red);transition:width .16s ease}
html .ph-plate:hover:before{width:100%}
html .ph-feat{position:relative}
html .ph-feat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--refresh-red);transform:scaleY(.18);transform-origin:center;transition:transform .16s ease}
html .ph-feat:hover:before{transform:scaleY(1)}
html .ph-feat-ic{position:relative}
html .ph-social-btn{border-radius:0}

html a:focus-visible,html button:focus-visible,html input:focus-visible,html select:focus-visible,html textarea:focus-visible{outline:2px solid var(--refresh-red);outline-offset:3px}
@media(max-width:1000px){html .hx{padding-top:42px}html .hx-main:before{margin-bottom:12px}}
@media(max-width:700px){
  html .topbar{min-height:60px}
  html .topbar .brand img{width:32px;height:32px}
  html .hx{padding-top:34px;gap:24px}
  html .hx-title em{box-shadow:5px 5px 0 color-mix(in srgb,var(--refresh-red) 20%,transparent)}
  html .ph-board{margin-bottom:32px}
  html .ph-plate{min-height:78px}
}
@media(prefers-reduced-motion:reduce){html *,html *:before,html *:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
