/* ============================================================
   Huy Nguyễn (Tony) — Game Design Portfolio
   Aesthetic: Modern Vietnamese · lacquer red + gold leaf
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');

:root{
  /* paper / ink */
  --paper:        #F6EEDF;   /* warm cream */
  --paper-2:      #F0E5D0;   /* slightly deeper cream panel */
  --ink:          #271712;   /* warm near-black */
  --ink-soft:     #5a463c;   /* muted brown text */
  --ink-faint:    #8c7864;

  /* lacquer red + gold */
  --son:          #9E2A24;   /* đỏ son — lacquer red */
  --son-deep:     #6E1A17;   /* deep lacquer maroon */
  --son-bright:   #C23B2E;
  --gold:         #C9A24B;   /* thếp vàng — antique gold */
  --gold-bright:  #E3C36B;
  --gold-line:    #BE9A45;

  --maxw: 1240px;

  --serif: 'Playfair Display', Georgia, serif;
  --body:  'Lora', Georgia, serif;
  --label: 'Be Vietnam Pro', system-ui, sans-serif;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* subtle lacquer paper texture */
body::before{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.5;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(158,42,36,.05), transparent 60%),
    repeating-linear-gradient(135deg, rgba(110,26,23,.012) 0 2px, transparent 2px 6px);
}

img{ display:block; max-width:100%; }
a{ color: inherit; }

/* ---------- type helpers ---------- */
.eyebrow{
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--son);
}
.eyebrow.on-dark{ color: var(--gold-bright); }

h1,h2,h3{ font-family: var(--serif); font-weight: 600; margin:0; line-height:1.04; }

.section-title{
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 4rem);
  letter-spacing: -.5px;
}
.section-title .en{
  display:block;
  font-family: var(--label);
  font-weight:500;
  font-size: 13px;
  letter-spacing:.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top:.6rem;
}

.lead{ font-size: 1.15rem; color: var(--ink-soft); }
.en-note{ font-style: italic; color: var(--ink-faint); }

/* ---------- layout ---------- */
.wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 32px; position:relative; z-index:1; }
section{ position: relative; z-index:1; }

/* ---------- gold divider with diamond ---------- */
.divider{
  display:flex; align-items:center; gap:18px;
  margin: 0 auto;
  color: var(--gold-line);
}
.divider::before, .divider::after{
  content:""; height:1px; flex:1;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.divider .dia{
  width:9px; height:9px; transform: rotate(45deg);
  border:1.5px solid var(--gold-line);
  background: var(--gold);
  flex:none;
}

/* ---------- buttons / links ---------- */
.btn{
  font-family: var(--label);
  font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 26px;
  border:1.5px solid var(--son);
  color: var(--son); background:transparent;
  text-decoration:none; cursor:pointer;
  transition: all .25s ease;
}
.btn:hover{ background: var(--son); color: var(--paper); }
.btn.gold{ border-color: var(--gold-line); color: var(--ink); }
.btn.gold:hover{ background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn.solid{ background: var(--son); color: var(--paper); }
.btn.solid:hover{ background: var(--son-deep); }

.link-underline{
  text-decoration:none;
  background-image: linear-gradient(var(--gold-line),var(--gold-line));
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:2px;
  transition: color .2s;
}
.link-underline:hover{ color: var(--son); }

/* ---------- corner ornament frame (geometric lacquer) ---------- */
.ornframe{ position:relative; }
.ornframe .corner{
  position:absolute; width:26px; height:26px; pointer-events:none;
  border-color: var(--gold-line); border-style:solid; border-width:0;
}
.ornframe .corner.tl{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.ornframe .corner.tr{ top:-1px; right:-1px; border-top-width:2px; border-right-width:2px; }
.ornframe .corner.bl{ bottom:-1px; left:-1px; border-bottom-width:2px; border-left-width:2px; }
.ornframe .corner.br{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }

/* ---------- striped placeholder ---------- */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(45deg, rgba(110,26,23,.10) 0 10px, rgba(110,26,23,.045) 10px 20px),
    var(--paper-2);
  display:flex; align-items:center; justify-content:center;
  color: var(--son-deep);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px; letter-spacing:.05em; text-align:center;
  padding: 12px;
}
.ph.dark{
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.28) 0 10px, rgba(0,0,0,.14) 10px 20px),
    var(--son-deep);
  color: var(--gold-bright);
}
.ph span{ opacity:.8; }

/* utility */
.nowrap{ white-space:nowrap; }
.center{ text-align:center; }