*{box-sizing:border-box}
:root{
  --bg:#0e1d26;
  --bg2:#0c1b23;
  --text:#e6ecf2;
  --muted:#677786;
  --line:#19242e;
  --accent:#617c8e;
}
html,body{margin:0;min-height:100%}
body{
  min-height:100vh;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(130deg, var(--bg) 0%, var(--bg2) 100%);
  background-size:32px 32px,32px 32px,auto;
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
}
.page{
  width:min(1320px, calc(100% - 48px));
  min-height:100vh;
  margin:0 auto;
  padding:18px 0 18px;
  display:flex;
  flex-direction:column;
}
.topbar, footer{
  display:flex;
  justify-content:space-between;
  gap:24px;
  color:var(--muted);
  font-family:"IBM Plex Mono", monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.topbar{padding-bottom:16px;border-bottom:1px solid var(--line)}
footer{padding-top:16px;border-top:1px solid var(--line);margin-top:auto}
.hero{
  flex:1;
  display:grid;
  grid-template-columns:minmax(320px, 420px) 1fr;
  gap:42px;
  align-items:center;
  padding:28px 0;
}
.index{
  margin:0 0 18px;
  color:var(--accent);
  font-family:"IBM Plex Mono", monospace;
  font-size:12px;
  letter-spacing:.06em;
}
h1{
  margin:0;
  font-family:"Space Grotesk", Inter, sans-serif;
  font-size: clamp(53.2px, 7vw, 106.4px);
  line-height:.86;
  letter-spacing:-.08em;
}
.links{
  margin-top:44px;
  width:min(420px,100%);
  border-top:1px solid var(--line);
}
.links a{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  font-size:18px;
  transition:background .16s ease, padding .16s ease;
}
.links a:hover{background:rgba(255,255,255,.03);padding-left:10px;padding-right:10px}
.meta{
  color:var(--muted);
  font-family:"IBM Plex Mono", monospace;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.visual{
  position:relative;
  min-height:78vh;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(0,0,0,.08);
}
.visual::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to right, var(--bg) 0%, rgba(0,0,0,0) 26%),
    linear-gradient(to bottom, rgba(0,0,0,0) 78%, var(--bg2) 100%);
  z-index:2;
}
.portrait{
  width:min(860px, 66vw);
  max-height:84vh;
  object-fit:cover;
  display:block;
  filter:saturate(1.02) contrast(1.04);
  mask-image:linear-gradient(to left, black 74%, transparent 100%);
  -webkit-mask-image:linear-gradient(to left, black 74%, transparent 100%);
}
@media (max-width:980px){
  .page{width:min(100% - 32px,920px)}
  .hero{grid-template-columns:1fr;gap:20px}
  .visual{min-height:auto;justify-content:center}
  .portrait{
    width:min(100%,760px);max-height:none;
    mask-image:linear-gradient(to bottom, black 82%, transparent 100%);
    -webkit-mask-image:linear-gradient(to bottom, black 82%, transparent 100%);
  }
  .visual::before{background:linear-gradient(to bottom, rgba(0,0,0,0) 76%, var(--bg) 100%)}
  h1{font-size:clamp(62px,15vw,110px)}
}
@media (max-width:640px){
  .page{width:calc(100% - 24px)}
  .links a{min-height:64px;font-size:17px}
  .meta{font-size:10px}
  .topbar, footer{font-size:10px}
}