/* ============================================================
   Katya Kotaro — single-screen card
   desktop 1.jpg (name left / links right) · mobile 2.jpg (top)
   shadow-overlay + light text
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
:root{
  --ink:#f5f0e8;
  --muted:rgba(245,240,232,.72);
  --gold:#d9b884;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:#171310;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.hero{position:relative; min-height:100vh; min-height:100svh; overflow:hidden;}

/* ---------- background photo ---------- */
.bg{position:fixed; inset:0; z-index:0;}
.bg img{width:100%; height:100%; object-fit:cover; object-position:center;}

/* ---------- shadow overlay ----------
   darkens the (so-so) photo and deepens under the text: left+right on
   desktop, so light text always reads on a clean field. */
.hero::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(14,10,7,.68) 0%, rgba(14,10,7,.22) 24%,
      rgba(14,10,7,0) 44%, rgba(14,10,7,0) 56%,
      rgba(14,10,7,.22) 76%, rgba(14,10,7,.68) 100%),
    linear-gradient(0deg, rgba(14,10,7,.22), rgba(14,10,7,.22));
}

/* ---------- content ---------- */
.content{
  position:relative; z-index:2;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:clamp(28px,5vw,72px) clamp(30px,6vw,96px);
}

.kicker{
  font-size:clamp(.66rem,1.4vw,.76rem);
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); margin-bottom:clamp(12px,1.6vw,18px);
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
.name{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.4rem,6vw,5.2rem);
  line-height:1.0; letter-spacing:-.01em;
  text-shadow:0 2px 28px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45);
}
.tagline{
  margin-top:clamp(14px,1.8vw,20px);
  font-size:clamp(.78rem,1.5vw,1rem);
  letter-spacing:.05em; color:var(--muted);
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.brand{ max-width:min(40%,470px); }

/* ---------- links ---------- */
.links{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:clamp(16px,2vw,22px); text-align:right;
}
.link{
  display:inline-flex; flex-direction:column; align-items:flex-end;
  text-decoration:none; color:var(--ink);
  transition:color .35s ease;
  text-shadow:0 2px 20px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.45);
}
.ln{
  position:relative;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.15rem,1.7vw,1.5rem); letter-spacing:.01em;
}
.ln::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s cubic-bezier(.19,1,.22,1);
}
.hn{
  font-size:clamp(.66rem,1.2vw,.76rem); letter-spacing:.04em;
  color:var(--muted); margin-top:4px; transition:color .35s ease;
}
@media (hover:hover) and (pointer:fine){
  .link:hover .ln::after, .link:focus-visible .ln::after{
    transform:scaleX(1); transform-origin:left;
  }
  .link:hover, .link:focus-visible{ color:#fff; }
  .link:hover .hn, .link:focus-visible .hn{ color:var(--ink); }
}
.link:focus-visible{ outline:1px solid rgba(255,255,255,.55); outline-offset:6px; border-radius:2px; }

/* ---------- mobile: content on top, above the face ---------- */
@media (max-width:820px){
  .hero::before{
    background:
      linear-gradient(180deg,
        rgba(14,10,7,.72) 0%, rgba(14,10,7,.3) 30%, rgba(14,10,7,0) 54%),
      linear-gradient(0deg, rgba(14,10,7,.16), rgba(14,10,7,.16));
  }
  .content{
    flex-direction:column; align-items:center; justify-content:flex-start;
    text-align:center;
    padding-top:clamp(30px,7vh,68px);
    gap:clamp(18px,3.4vh,30px);
  }
  .brand{ max-width:100%; }
  .name{ font-size:clamp(2.5rem,10vw,3.4rem); }
  .links{
    flex-direction:row; align-items:center; justify-content:center;
    gap:clamp(20px,6vw,34px); text-align:center;
  }
  .link{ align-items:center; }
  .hn{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}