:root{
  --paper: #ffffff;
  --ink: #0d0d0d;
  --mid: #6f6f6f;
  --hair: #dcdcdc;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
}

body{
  font-family: 'Space Grotesk', sans-serif;
}

/* ---- layout: fixed split-screen, image at full strength, no wash ---- */

.grid{
  display: grid;
  grid-template-columns: 46% 54%;
  min-height: 100vh;
}

.panel{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px;
  border-right: 1px solid var(--hair);
}

.visual{
  position: relative;
  overflow: hidden;
  background: #efefef;
}

.visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 48%;
  display: block;
}

/* ---- header lockup ---- */

.mark{
  position: absolute;
  top: 40px;
  left: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mark-logo{
  border-radius: 30%;
  display: block;
}

.mark span{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.meta{
  position: absolute;
  bottom: 40px;
  left: 48px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: var(--mid);
}

/* ---- hero content ---- */

.content{
  max-width: 420px;
}

.wordmark{
  font-weight: 700;
  font-size: clamp(2.8rem, 6.4vw, 4.6rem);
  letter-spacing: -0.035em;
  line-height: 0.92;
  margin: 0;
  color: var(--ink);
}

.wordmark .dot{
  color: var(--ink);
}

.status{
  margin: 22px 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  color: var(--mid);
}

.status b{
  color: var(--ink);
  font-weight: 500;
}

.rule{
  width: 36px;
  height: 1px;
  background: var(--hair);
  margin: 26px 0;
}

.contact{
  display: inline-flex;
  align-items: center;
  line-height: 1;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
}

.contact span{
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
}

.contact span::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact:hover span::after,
.contact:focus-visible span::after{
  transform: scaleX(1);
}

.contact .arrow{
  flex-shrink: 0;
  display: block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact:hover .arrow,
.contact:focus-visible .arrow{
  transform: translate(2px, -2px);
}

.contact:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* one deliberate load-in moment, nothing scattered */

.mark, .content > *, .meta{
  opacity: 0;
  animation: rise 0.6s ease-out forwards;
}

.mark{ animation-delay: 0.05s; }
.wordmark{ animation-delay: 0.15s; }
.status{ animation-delay: 0.32s; }
.rule{ animation-delay: 0.42s; }
.contact{ animation-delay: 0.5s; }
.meta{ animation-delay: 0.6s; }

@keyframes rise{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .mark, .content > *, .meta{ animation: none; opacity: 1; }
}

/* ---- responsive ---- */

@media (max-width: 1100px){
  .panel{ padding: 44px 36px; }
  .content{ max-width: 380px; }
}

@media (max-width: 980px){
  .grid{
    grid-template-columns: 1fr;
    grid-template-rows: 46vh 1fr;
  }
  .panel{
    border-right: none;
    border-top: 1px solid var(--hair);
    order: 2;
    padding: 40px 32px;
  }
  .visual{ order: 1; }
  .mark{ top: 28px; left: 32px; }
  .mark-logo{ width: 38px; height: 38px; }
  .meta{ position: static; margin-top: 40px; }
}

@media (max-width: 720px){
  .grid{ grid-template-rows: 42vh 1fr; }
  .content{ max-width: 460px; }
  .wordmark{ font-size: clamp(2.6rem, 8vw, 3.6rem); }
}

@media (max-width: 560px){
  .grid{ grid-template-rows: 38vh 1fr; }
  .panel{ padding: 32px 22px; }
  .mark{ top: 22px; left: 22px; gap: 8px; }
  .mark-logo{ width: 34px; height: 34px; }
  .mark span{ font-size: 0.72rem; }
  .wordmark{ font-size: 2.5rem; }
  .status{ font-size: 0.8rem; }
  .rule{ margin: 20px 0; }
  .contact{ font-size: 0.82rem; }
  .visual img{ object-position: 55% 45%; }
}

@media (max-width: 400px){
  .grid{ grid-template-rows: 34vh 1fr; }
  .panel{ padding: 28px 18px; }
  .mark-logo{ width: 30px; height: 30px; }
  .wordmark{ font-size: 2.1rem; }
  .contact{ font-size: 0.76rem; }
  .contact span{ word-break: break-all; }
}

@media (max-width: 340px){
  .wordmark{ font-size: 1.9rem; }
  .meta{ display: none; }
}

@media (min-width: 1400px){
  .content{ max-width: 480px; }
  .panel{ padding: 60px; }
}