@font-face{
  font-family:"Equateur";
  src:url("fonts/Equateur-Regular.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Neutral Face";
  src:url("fonts/NeutralFace.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Neutral Face";
  src:url("fonts/NeutralFaceBold.otf") format("opentype");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  --bg:#000;
  --fg:#f2f2f2;
  --dim:#8a8a8a;
  --pad:clamp(20px,3.4vw,42px);

  /* subtle accent palette — surfaces only on hover */
  --blue:#236bb4;
  --black:#0f1015;
  --red:#d74134;
  --green:#4a9754;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:"Neutral Face","Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}

.page{
  position:relative;
  min-height:100vh;
  padding:var(--pad);
  display:flex;
  flex-direction:column;
}

/* ---- portrait ---- */
.portrait{
  position:absolute;
  top:var(--pad);
  right:var(--pad);
  width:clamp(96px,11vw,150px);
  height:auto;
  display:block;
  filter:grayscale(1) contrast(1.03);
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;       /* not draggable / not interactive */
}

/* ---- wordmark ---- */
.wordmark{
  font-family:"Neutral Face","Helvetica Neue",Arial,sans-serif;
  font-weight:700;
  font-size:clamp(64px,15vw,230px);
  line-height:.86;
  letter-spacing:-.03em;
  text-transform:uppercase;
}

/* ---- body row ---- */
.content{
  margin-top:auto;            /* push bio + contact to lower half, like the reference */
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,6vw,120px);
  align-items:end;
}

.bio{max-width:46ch;user-select:none;-webkit-user-select:none}
.bio p{
  font-family:"Equateur",Georgia,"Times New Roman",serif;
  font-size:clamp(14px,1.15vw,17px);
  line-height:1.5;
  letter-spacing:0;
  text-wrap:pretty;          /* avoid orphans / awkward last lines */
  hyphens:none;
}
.bio p + p{margin-top:1.05em}

.meta{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:18px;
  font-size:clamp(12px,1vw,14.5px);
  line-height:1.45;
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.role{letter-spacing:.04em}

.contact{list-style:none}
.contact li{line-height:1.5}
.contact a{
  color:var(--dim);
  transition:color .35s ease;
}
.contact li:nth-child(1) a:hover{color:var(--blue)}
.contact li:nth-child(2) a:hover{color:var(--green)}
.contact li:nth-child(3) a:hover{color:var(--red)}

.place{color:var(--dim)}
.clock{font-variant-numeric:tabular-nums;letter-spacing:.02em}

.portfolio{
  align-self:flex-end;
  position:relative;
  padding-bottom:2px;
  transition:color .35s ease;
}
.portfolio:hover{color:var(--blue)}

/* ---- imprint ---- */
.imprint{margin-top:6px}
.imprint summary{
  list-style:none;
  cursor:pointer;
  color:var(--dim);
  transition:color .35s ease;
}
.imprint summary::-webkit-details-marker{display:none}
.imprint summary::marker{content:""}
.imprint summary:hover,
.imprint[open] summary{color:var(--fg)}
.imprint-body{
  margin-top:12px;
  font-family:"Equateur",Georgia,"Times New Roman",serif;
  font-size:13px;
  line-height:1.55;
  letter-spacing:0;
  color:var(--dim);
  white-space:normal;
  text-transform:none;         /* legal text stays sentence case */
  max-width:34ch;
  margin-left:auto;            /* keep right-aligned block tidy on desktop */
}
.imprint-body p{margin:0}
.imprint-body p + p{margin-top:7px}
.portfolio::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:1px;background:currentColor;
  transform:scaleX(1);transform-origin:right;
  transition:transform .35s cubic-bezier(.6,.1,.2,1);
}
.portfolio:hover::after{transform:scaleX(0);transform-origin:left}

/* ---- responsive ---- */
@media (max-width:720px){
  /* portrait into normal flow, under the name — no overlap with the wordmark */
  .portrait{
    position:static;
    order:2;
    align-self:flex-start;
    width:clamp(120px,34vw,180px);
    margin-top:18px;
  }
  .wordmark{order:1}
  .content{
    order:3;
    margin-top:clamp(40px,13vw,80px);   /* clear gap between portrait and bio */
    grid-template-columns:1fr;
    align-items:start;
    gap:34px;
  }
  .meta{text-align:left;white-space:normal}
  .portfolio{align-self:flex-start}
  .imprint-body{margin-left:0}
}