/* ---------- Fonts (put your files in /fonts, see fonts/README.txt) ---------- */
@font-face{
  font-family:'Neue Machina';
  src:url('fonts/NeueMachina-Regular.woff2') format('woff2'),
      url('fonts/NeueMachina-Regular.otf') format('opentype'),
      url('fonts/NeueMachina-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Authenia Textured';
  src:url('fonts/AutheniaTextured.woff2') format('woff2'),
      url('fonts/AutheniaTextured.otf') format('opentype'),
      url('fonts/AutheniaTextured.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}

/* ---------- Base + background ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{background:#9C3B38}
body{
  min-height:100vh; min-height:100dvh;
  color:#fff;
  overflow-x:hidden;
}

/* Background texture. On landscape screens it is turned 90deg so the
   portrait image fills a wide screen. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:url("images/background.jpeg") center/cover no-repeat;
}
@media (orientation:landscape){
  body::before{
    inset:auto; top:50%; left:50%;
    width:100vh; width:100dvh; height:100vw; height:100dvw;
    transform:translate(-50%,-50%) rotate(90deg);
  }
}

/* ---------- Layout: photo left, text right ---------- */
.scene{
  min-height:100vh; min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(0,37.5fr) minmax(0,47fr);
  column-gap:3vw;
  align-items:center;
  padding:0 6vw 0 8vw;
}
.photo{display:block; width:100%; height:auto}

/* ---------- Text ---------- */
.text{
  font-family:var(--f,'Neue Machina'), system-ui, sans-serif;
  font-weight:400;
  line-height:1.05;
  transition:opacity .3s;
}
body:not(.ready) .text{opacity:0}
h1{font:inherit}
h1 span{display:block}

.l1,.l2{font-size:calc(clamp(2.2rem,5.3vw,7rem) * var(--s,1))}
.name  {font-size:calc(clamp(2.8rem,6.9vw,9rem) * var(--s,1))}
.note  {
  font-size:calc(clamp(1.05rem,2.9vw,3.6rem) * var(--s,1));
  line-height:1.12;
  margin-top:1.2vw;
  text-wrap:pretty;
}

.swap .text{animation:in .4s ease both}
@keyframes in{from{opacity:0; transform:translateY(.25em)} to{opacity:1; transform:none}}

/* ---------- Translate (plain text) ---------- */
.translate{
  position:fixed; left:50%; bottom:6vh; transform:translateX(-50%);
  font-family:'Authenia Textured','Segoe Script','Brush Script MT',cursive;
  font-size:clamp(1.7rem,3.3vw,3.6rem);
  line-height:1;
  color:#fff; background:none; border:0; padding:.2em .4em;
  cursor:pointer;
}
.translate:focus-visible{outline:2px solid #fff; outline-offset:4px}

/* ---------- Per-language font tuning ---------- */
.l-hi{--f:'Noto Sans Devanagari'}
.l-ja{--f:'Noto Sans JP';       --s:.8}
.l-th{--f:'Noto Sans Thai';     --s:.82}
.l-ta{--f:'Noto Sans Tamil';    --s:.78}
.l-ur{--f:'Noto Nastaliq Urdu'; --s:.75}
.l-ur .text{line-height:1.9}

@media (prefers-reduced-motion:reduce){
  .swap .text{animation:none}
  .text{transition:none}
}

/* ---------- Phones: photo on top, text below, Translate last ---------- */
@media (max-width:760px){
  body{display:flex; flex-direction:column}
  .scene{
    flex:1; min-height:0;
    grid-template-columns:1fr; row-gap:1.6rem;
    align-content:center;
    padding:2.5rem 7vw 0;
  }
  .photo{width:80%; margin:0 auto}
  .l1,.l2{font-size:calc(clamp(2rem,9.5vw,3.4rem) * var(--s,1))}
  .name  {font-size:calc(clamp(2.6rem,12.5vw,4.4rem) * var(--s,1))}
  .note  {font-size:calc(clamp(1.1rem,4.8vw,1.7rem) * var(--s,1)); margin-top:.8rem}
  .translate{
    position:static; transform:none;
    display:block; margin:2rem auto 2.5rem;
    font-size:clamp(1.8rem,8vw,2.6rem);
  }
}