/* =====================================================================
   GOKUDO coming-soon screen, rendered by coming-soon.php. This file loads on the
   'coming-soon' context in inc/assets.php, with style.css and no chrome stylesheet.
   base.css does not load, so this file states its own body reset.

   3 layers, bottom to top: .cs-bg, then .cs-title and .cs-logo, then .cs-subject.
   The shoe covers part of the slogan. .cs-rail sits above all 3, so no crop hides it.
   The 2 images share one 3840x2160 frame. They take the same object-fit and
   object-position, so the cut-out shoe stays on its background at every viewport shape.
   ===================================================================== */
body.gokudo-coming-soon{margin:0;background:var(--ink);color:var(--on-dark)}

.cs{position:relative;height:100vh;height:100svh;overflow:hidden}
.cs-bg,.cs-subject{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 50%;user-select:none;pointer-events:none}
.cs-bg{z-index:0}
.cs-subject{z-index:2}

/* The slogan sits between the 2 images, so the shoe covers part of it: the collar
   covers the end of the first line, and the sole crosses the foot of the third. Each
   line sits on its own anchor: the first high, the second at the left edge on the
   middle, the third low at the right edge. The second line stands clear of .cs-rail.
   The size follows the viewport with no cap, because the images do too. */
.cs-title{position:absolute;inset:0;z-index:1;margin:0;font-family:var(--display);font-weight:900;
	font-size:max(64px,min(28vh,18vw));line-height:.8;letter-spacing:var(--track-xl);
	text-transform:uppercase;color:var(--on-dark);white-space:nowrap}
.cs-title span{position:absolute}
.cs-l1{left:31vw;top:5vh}
.cs-l2{left:4.5vw;top:50%;translate:0 -50%}
.cs-l3{right:3vw;bottom:7vh}

.cs-logo{position:absolute;z-index:1;top:clamp(20px,5vh,56px);right:clamp(20px,3.5vw,72px);
	width:max(140px,9vw);height:auto}

/* The label rail: the 2 labels run up the left edge, read from the bottom, with the foot
   of each letter to the right. vertical-rl runs the text down with the foot to the
   left, and the half turn reverses both. The rail spans the same top and bottom margin
   that the logo keeps from the top edge. base.css does not load here, so the label
   treatment from its .label class is stated again, scaled with the viewport. */
.cs-rail{position:absolute;z-index:3;top:clamp(20px,5vh,56px);bottom:clamp(20px,5vh,56px);left:clamp(12px,1.6vw,36px);
	margin:0;display:flex;justify-content:space-between;writing-mode:vertical-rl;rotate:180deg;
	font-family:var(--label);font-size:clamp(11px,1vw,20px);font-weight:600;line-height:1;
	letter-spacing:.28em;text-transform:uppercase;color:var(--on-dark);white-space:nowrap}
.cs-rail .cs-brand{color:var(--gold)}

/* Portrait: the crop keeps little more than the shoe, so the 3 anchors above would put
   2 lines behind it. The lines stack in the open ground at the top left instead, and the
   collar still covers the end of the longest line. The collar also rises into the top
   right corner, so the logo moves above the slogan, on the same left edge. That edge
   stands clear of .cs-rail. */
@media(max-aspect-ratio:1/1){
	.cs-title{inset:14vh auto auto 12vw;font-size:min(22vw,12vh);line-height:.86}
	.cs-title span{position:static;display:block;translate:none}
	.cs-logo{left:12vw;right:auto}
}