/* justin.fm, concept B "Assemble". Design language follows digitalmundo.org:
   paper, ink, one electric blue, hairlines, a 3-band stripe, mono labels. */
:root{
  --paper:#FAFAFA;
  --ink:#14161A;
  --muted:#5A6072;
  --faint:#9AA0AD;
  --line:rgba(20,22,26,.12);
  --blue:#2F5DFF;
  --blue-soft:#5B84FF;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.65,0,.35,1);
  --out:cubic-bezier(.2,.8,.2,1);
  --s1:var(--ink);--s2:var(--blue);--s3:var(--blue-soft);
  --gut:clamp(28px,4.6vw,72px);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}
ul{list-style:none}

/* the stripe follows whichever brand is in focus */
body[data-tint="dm"]{--s1:#14161A;--s2:#2F5DFF;--s3:#5B84FF}
body[data-tint="sb"]{--s1:#101A2E;--s2:#2450B8;--s3:#B3541E}

.page{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  height:100vh;height:100dvh;min-height:560px;
}

/* ---------- left: who ---------- */
.info{
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(24px,4.2vh,44px) var(--gut) clamp(24px,4.2vh,40px);
  min-width:0;
}
.top,.links,.cap,.where,.row-url{font-family:var(--mono);font-size:12px;letter-spacing:.02em}
.top{display:flex;justify-content:space-between;color:var(--muted)}
.mark{color:var(--ink);font-weight:500}

.intro{max-width:560px}
h1{
  font-size:clamp(44px,5.6vw,88px);font-weight:600;letter-spacing:-.045em;line-height:.95;
  margin-left:-.04em;
}
.pos{
  margin-top:clamp(16px,2.6vh,26px);max-width:27em;
  font-size:clamp(16px,1.35vw,19px);line-height:1.45;color:var(--muted);letter-spacing:-.008em;
}
.where{margin-top:clamp(10px,1.6vh,16px);color:var(--ink);text-transform:uppercase;letter-spacing:.08em;font-size:11px}

.stripe{display:flex;flex-direction:column;width:72px;margin:clamp(22px,4vh,40px) 0 0}
.stripe i{display:block;transition:background-color .6s var(--ease)}
.stripe i:nth-child(1){height:4px;background:var(--s1)}
.stripe i:nth-child(2){height:3px;background:var(--s2)}
.stripe i:nth-child(3){height:2px;background:var(--s3)}

.rows{margin-top:clamp(14px,2.4vh,22px);border-top:1px solid var(--line)}
.rows li{border-bottom:1px solid var(--line)}
.row{
  position:relative;display:flex;align-items:baseline;gap:10px;
  padding:clamp(14px,2.2vh,20px) 2px;
  transition:padding-left .45s var(--out);
}
.row::before{
  content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;
  background:var(--c);transform:scale(0);transition:transform .45s var(--out);
}
.row-name{font-size:clamp(18px,1.55vw,22px);font-weight:600;letter-spacing:-.02em;transition:color .35s}
.row-desc{color:var(--muted);font-size:clamp(14px,1.1vw,16px)}
.row-desc::before{content:"— ";color:var(--faint)}
.row-url{margin-left:auto;color:var(--faint);transition:color .35s}
.row-arrow{width:1em;text-align:right;color:var(--faint);transition:transform .45s var(--out),color .35s}
.row:hover,.row:focus-visible{padding-left:18px}
.row:hover::before,.row:focus-visible::before{transform:scale(1)}
.row:hover .row-name,.row:focus-visible .row-name,
.row:hover .row-arrow,.row:focus-visible .row-arrow{color:var(--c)}
.row:hover .row-url,.row:focus-visible .row-url{color:var(--muted)}
.row:hover .row-arrow,.row:focus-visible .row-arrow{transform:translate(2px,-2px)}
.row:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--c)}

.links{display:flex;flex-wrap:wrap;gap:6px 10px;color:var(--faint)}
.links a{color:var(--muted);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.links a:hover,.links a:focus-visible{color:var(--ink);border-bottom-color:var(--ink);outline:none}

/* ---------- right: the portrait ---------- */
.art{position:relative;min-width:0;border-left:1px solid var(--line);overflow:hidden}
#portrait{position:absolute;inset:0;width:100%;height:100%;display:block}
.cap{
  position:absolute;top:clamp(24px,4.2vh,44px);right:var(--gut);left:var(--gut);
  display:flex;justify-content:space-between;color:var(--faint);pointer-events:none;
}
#cap-tint{display:inline-flex;align-items:center;gap:8px;transition:color .4s}
#cap-tint::before{content:"";width:6px;height:6px;background:currentColor}
body[data-tint="dm"] #cap-tint{color:#2F5DFF}
body[data-tint="sb"] #cap-tint{color:#2450B8}

/* ---------- phone ---------- */
@media (max-width:760px){
  .page{grid-template-columns:1fr;grid-template-rows:46vh auto;height:auto;min-height:100vh;min-height:100svh}
  .page{grid-template-rows:46svh auto}
  .art{grid-row:1;border-left:0;border-bottom:1px solid var(--line)}
  .info{grid-row:2;padding:20px 20px 24px;gap:20px}
  .top{display:none}
  .cap{top:14px;left:20px;right:20px;font-size:11px}
  h1{font-size:44px}
  .pos{margin-top:12px;font-size:16px}
  .stripe{margin-top:18px}
  .rows{margin-top:14px}
  .row{flex-wrap:wrap;padding:13px 2px;gap:4px 8px}
  .row-url{display:none}
  .row-arrow{margin-left:auto}
}
@media (max-width:760px) and (max-height:700px){
  h1{font-size:38px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important}
}