/* Umbrella homepage only (index.html). Loaded last.
   This is the ONE page where both branch accents coexist, so the split
   halves carry their palette as literal values (diagnostic blue vs
   hinomaru red) rather than through the :root theme layer. */

/* The umbrella must not take a side. --accent drives the nav rule, the logo
   mark and the eyebrow hairlines; leaving it at the japanese red made the
   chooser page read as the japanese bay with a german option bolted on.
   Neutral chrome here; the halves below supply the only colour on the page.
   Nothing on this page uses --accent as a button fill, so a low-chroma
   accent costs no affordance. */
:root {
  --accent:      #C9CDD5;
  --accent-lt:   #E4E7EC;
  --accent-pale: #F4F6F9;
  --accent-rgb:  201,205,213;
}

/* Resume banner — shown by umbrella.js only for returning visitors */
.resume {
  display: none;
  align-items: center; justify-content: center; gap: 14px;
  padding: 12px 20px;
  background: var(--bg-mid);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.82rem; color: var(--text-body);
  text-align: center;
}
.resume.show { display: flex; }
.resume a {
  color: var(--warm-white); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.resume .resume-dismiss {
  background: none; border: 0; color: var(--text-muted);
  cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 4px;
}

/* Umbrella hero */
.u-hero {
  padding: 120px 0 48px;
  text-align: center;
  position: relative;
}
.u-eyebrow {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 22px;
}
.u-title {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4.2vw, 3.2rem);
  font-weight: 700; line-height: 0.98;
  text-transform: uppercase; letter-spacing: -0.01em;
  color: var(--warm-white);
  max-width: 20ch; margin: 0 auto 20px;
}
/* Named hl-de/hl-jp, not g/j: a bare `.g` collides with the gallery tile
   class in components.css, which painted a panel and a pseudo-element rule
   straight through the headline. */
.u-title .hl-de { color: #5C8CFF; }  /* German diagnostic blue */
.u-title .hl-jp { color: #F03A3A; }  /* Japanese hinomaru red */
.u-urdu {
  font-size: 1.05rem; color: var(--text-body);
  direction: rtl; margin-bottom: 16px;
}
.u-sub {
  font-size: 0.95rem; color: var(--text-body);
  max-width: 46ch; margin: 0 auto; line-height: 1.7;
}

/* ── The split field ───────────────────────────────
   One full-width band cut by a skewed seam, echoing the chevron motif that
   already runs through the brand. Each half is a single link the size of
   half the screen, and hovering or focusing one lets it take ground from
   the other. Because this is the only page where both accents are allowed
   to coexist, the halves carry their palette as literal values rather than
   through the :root theme layer. */
.u-split {
  display: flex;
  min-height: min(78svh, 720px);
  margin-bottom: 40px;
  overflow: hidden;
}
.u-half {
  --h-accent: var(--accent-lt);
  --h-bg: var(--bg-mid);
  position: relative;
  flex: 1 1 50%;
  display: flex; align-items: flex-end;
  padding: 56px 48px 48px;
  background: var(--h-bg);
  text-decoration: none;
  isolation: isolate;
  transition: flex-grow 0.45s cubic-bezier(0.22,0.61,0.36,1);
}
.u-de { --h-accent: #5C8CFF; --h-bg: #0B0C0E; }
.u-jp { --h-accent: #F03A3A; --h-bg: #120F0E; }

/* The seam: left half is cut back, right half slides under it. */
.u-de { clip-path: polygon(0 0, 100% 0, calc(100% - 72px) 100%, 0 100%); }
.u-jp { margin-left: -72px; clip-path: polygon(72px 0, 100% 0, 100% 100%, 0 100%); }

.u-split:hover .u-half        { flex-grow: 0.82; }
.u-split .u-half:hover,
.u-split .u-half:focus-visible { flex-grow: 1.28; }

.u-half img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.30;
  filter: saturate(0.8);
  transform: scale(1.06);
  transition: opacity 0.45s ease, transform 6s ease;
}
.u-half:hover img { opacity: 0.42; transform: scale(1.0); }
.u-half::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--h-accent) 16%, transparent) 0%,
    transparent 62%);
}

.u-half-in { position: relative; max-width: 30ch; }

.u-origin {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--h-accent);
  padding-bottom: 10px; margin-bottom: 18px;
  border-bottom: 1px solid var(--h-accent);
}
.u-div-name {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  font-weight: 700; line-height: 0.95;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--warm-white);
}
.u-owner {
  font-size: 0.82rem; color: var(--text-body);
  margin: 12px 0 20px;
}
.u-makes {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin-bottom: 14px;
}
.u-makes li {
  font-size: 0.68rem; letter-spacing: 0.06em;
  color: var(--chrome-lt);
  padding: 5px 9px;
  border: 1px solid var(--rule-strong);
}
.u-tools {
  font-family: var(--mono);
  font-size: 0.64rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 28px;
}
.u-enter {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--warm-white);
  padding: 13px 24px;
  border: 1px solid var(--h-accent);
  transition: background 0.25s, color 0.25s;
}
.u-half:hover .u-enter,
.u-half:focus-visible .u-enter { background: var(--h-accent); color: #0B0A0A; }

/* Shared trust strip */
.u-trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  margin: 40px 0;
}
.u-trust .t-item {
  padding: 28px 22px; background: var(--bg-mid);
  border: 1px solid rgba(255,255,255,0.05);
}
.u-trust h4 {
  font-family: var(--serif); font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.01em;
  color: var(--warm-white); margin-bottom: 8px;
}
.u-trust p { font-size: 0.78rem; color: var(--text-body); line-height: 1.6; }

.u-flink {
  color: var(--warm-white); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  font-size: 0.8rem;
}
.u-flink:hover { border-bottom-color: currentColor; }

@media (max-width: 768px) {
  .u-split { flex-direction: column; min-height: 0; }
  .u-half  { flex: none; padding: 40px 24px; min-height: 62svh; }
  .u-de, .u-jp { clip-path: none; margin-left: 0; }
  .u-jp { border-top: 2px solid var(--h-accent); }
  .u-split:hover .u-half,
  .u-split .u-half:hover,
  .u-split .u-half:focus-visible { flex-grow: 0; }
  .u-half-in { max-width: none; }
  .u-enter { width: 100%; justify-content: center; }
  .u-trust { grid-template-columns: 1fr 1fr; }
  .u-hero { padding: 90px 0 48px; }
}
@media (max-width: 400px) {
  .u-trust { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .u-half, .u-half img { transition: none; }
  .u-split:hover .u-half,
  .u-split .u-half:hover,
  .u-split .u-half:focus-visible { flex-grow: 1; }
}