:root{color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body)}

.page{
  min-height:100vh;display:flex;flex-direction:column;gap:24px;
  padding:36px clamp(20px,5vw,56px) 28px;
}

.page-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--font-heading);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb, var(--color-text) 50%, transparent);
}

.page-body{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(24px,4vh,36px);padding:24px 0;
}

.mark{text-align:center}
.mark h1{
  font-family:var(--font-heading);font-weight:700;
  font-size:clamp(56px,10vw,96px);line-height:.9;letter-spacing:.02em;margin:0;
}
.mark p{
  font-family:var(--font-heading);font-size:clamp(12px,1.6vw,15px);
  letter-spacing:.34em;text-transform:uppercase;color:var(--color-accent-700);margin:10px 0 0;
}

/* link tree — a blueprint plate of hairline-separated rows */
.tree{width:100%;max-width:460px;background:transparent}
.tree-row{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;color:var(--color-text);text-decoration:none;
  border-bottom:1px solid var(--color-divider);
}
.tree-row:last-child{border-bottom:0}
.tree-row img{width:28px;height:28px;object-fit:contain;display:block}
.tree-name{font-family:var(--font-heading);font-size:19px;flex:1}
.tree-meta{font-size:12px;color:var(--color-neutral-800)}
a.tree-row:hover{background:var(--color-accent-100)}
a.tree-row:active{background:var(--color-accent-200)}

.page-foot{
  text-align:center;font-size:12px;letter-spacing:.04em;
  color:color-mix(in srgb, var(--color-text) 55%, transparent);
}