/* Aesthmaris homepage v3 — "voyage & crown" (from mockup A3).
   Navy + royal blue + gold. All ornaments are static. */
:root{
  --ink:#06102a;
  --navy:#0b1a3e;
  --royal:#1a3478;
  --gold:#caa86f;
  --gold-light:#e3c992;
  --gold-line:rgba(202,168,111,.55);
  --gold-faint:rgba(202,168,111,.28);
  --cream:#fbfbdb;
  --parchment:#f3ecd3;
  --parchment-ink:#1a2a52;
  --parchment-muted:#5a6175;
  --text:#dcd7c0;
  --muted:#a9a58f;

  --yeo-bg:#151a3c;  --yeo-accent:#dba869;
  --umb-bg:#070f26;  --umb-accent:#caa86f;
  --dok-bg:#0d2552;  --dok-accent:#b4cfdc;

  --max:1200px;
  --sans:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --serif:'Noto Serif KR',serif;
  --caps:'Cinzel','Noto Serif KR',serif;
  --waves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Cg fill='none' stroke='%23caa86f' stroke-width='1'%3E%3Cpath d='M0 5 Q10 0 20 5 T40 5'/%3E%3Cpath d='M0 11 Q10 6 20 11 T40 11' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
}
html:lang(ja){
  --sans:'Noto Sans JP','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
  --serif:'Noto Serif JP',serif;
  --caps:'Cinzel','Noto Serif JP',serif;
}
html:lang(zh-CN){
  --sans:'Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --serif:'Noto Serif SC',serif;
  --caps:'Cinzel','Noto Serif SC',serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--ink);color:var(--text);font:400 16px/1.7 var(--sans);word-break:keep-all;-webkit-font-smoothing:antialiased}
html:lang(ja) body,html:lang(zh-CN) body{word-break:normal;line-break:strict}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,figure,blockquote{margin:0}
h1,h2,h3{color:var(--cream)}
.wrap{width:min(var(--max),100% - 48px);margin-inline:auto}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
.skip-link{position:fixed;left:16px;top:12px;z-index:100;padding:10px 14px;background:var(--gold);color:var(--ink);font-weight:600;text-decoration:none;transform:translateY(-200%)}
.skip-link:focus{transform:none}
.hidden-field{display:none}
.svg-defs{position:absolute;width:0;height:0}

/* ---------- ornaments (static) ---------- */
.rose{color:var(--gold)}
.waves{height:14px;background:var(--waves) repeat-x center;opacity:.45}
.orn{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold)}
.orn::before,.orn::after{content:"";width:72px;height:1px;background:var(--gold-line)}
.orn svg{width:18px;height:18px}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:20;background:var(--navy);border-bottom:1px solid var(--gold-line)}
.header::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--gold-faint)}
.header .wrap{display:flex;align-items:center;gap:32px;height:70px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--cream);white-space:nowrap}
.brand img{width:38px;height:38px;object-fit:contain}
.brand b{font-family:'Cinzel',serif;font-weight:600;font-size:1.1rem;letter-spacing:.14em}
.brand span{color:var(--gold);font-family:'Cinzel',serif;font-size:.78rem;letter-spacing:.2em}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{text-decoration:none;font-size:.95rem;padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--cream);border-bottom-color:var(--gold)}
.lang{display:flex;gap:2px}
.lang-btn{padding:4px 7px;border:0;background:none;color:var(--muted);font:inherit;font-size:.85rem;cursor:pointer}
.lang-btn:hover{color:var(--cream)}
.lang-btn[aria-pressed="true"]{color:var(--gold-light);font-weight:600}

/* ---------- buttons: engraved plaques ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:1px solid var(--gold);border-radius:0;font:inherit;font-weight:600;font-size:.95rem;letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s}
.btn-sm{min-height:38px;padding:0 16px;font-size:.88rem}
.btn-primary{background:var(--gold);color:var(--ink);box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 0 4px rgba(6,16,42,.45)}
.btn-primary:hover{background:var(--gold-light);box-shadow:inset 0 0 0 3px var(--gold-light),inset 0 0 0 4px rgba(6,16,42,.45)}
.btn-secondary{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 3px transparent,inset 0 0 0 4px var(--gold-faint)}
.btn-secondary:hover{background:rgba(202,168,111,.12)}
.text-link{color:var(--gold-light);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold-line);text-decoration-thickness:1px;text-underline-offset:5px}
.text-link:hover{color:var(--cream);text-decoration-color:var(--gold)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:30px}

/* framed pictures, like paintings in a gallery */
.frame{display:block;padding:7px;border:1px solid var(--gold-line);background:rgba(6,16,42,.5)}
.frame>img{outline:1px solid var(--gold-faint);outline-offset:3px}
.frame-sm{padding:4px}
.lift img{filter:brightness(.86);transition:filter .25s ease}
.lift:hover img,a.lift:focus-visible img{filter:brightness(1)}

.quote{font-family:var(--serif);font-weight:500;color:var(--cream);line-height:1.65}

/* TESTER:START — tester recruitment notice under the header */
.notice{background:var(--royal);border-bottom:1px solid var(--gold-line)}
.notice .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;padding:14px 0}
.notice-star{width:16px;height:16px;flex:none;color:var(--gold)}
.notice p{font-family:var(--serif);font-weight:700;font-size:1.08rem;color:var(--cream)}
@media (max-width:520px){
  .notice .wrap{gap:10px 12px;padding:12px 0}
  .notice p{font-size:1rem}
}
/* TESTER:END */

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink);isolation:isolate;border-bottom:1px solid var(--gold-faint)}
.chart{position:absolute;z-index:-1;left:120px;top:50%;width:0;height:0;pointer-events:none}
.chart svg{position:absolute;left:0;top:0;transform:translate(-50%,-50%)}
.chart .rhumbs{width:2600px;height:2600px;color:var(--gold);opacity:.1}
.chart .rose{width:640px;height:640px;opacity:.2}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:60px;align-items:center;padding:92px 0 96px}
.status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;color:var(--gold-light);font-weight:600;font-size:.92rem}
.status span{color:var(--muted);font-weight:400}
.status .status-main{color:inherit;font-weight:600}
.hero h1{margin-top:14px;font-family:'Cinzel',serif;font-size:clamp(2.8rem,5.6vw,4.8rem);font-weight:700;line-height:1;letter-spacing:.04em}
.hero .quote{margin-top:24px;padding-left:18px;border-left:1px solid var(--gold);font-size:1.2rem}
.hero .desc{margin-top:18px;max-width:32em}
.video{position:relative;aspect-ratio:16/9;background:#000}
.video button{position:absolute;inset:0;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.video button img{width:100%;height:100%;object-fit:cover;filter:brightness(.8);transition:filter .25s}
.video button:hover img,.video button:focus-visible img{filter:brightness(.95)}
.play{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px 0 14px;border:1px solid var(--gold);background:var(--gold);color:var(--ink);font-weight:600;font-size:.95rem;box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 0 4px rgba(6,16,42,.45)}
.play svg{width:16px;height:16px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-caption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-top:14px;color:var(--muted);font-size:.9rem}
.video-caption em{font-family:'Cinzel',serif;font-style:normal;letter-spacing:.08em;color:var(--text)}

/* ---------- section headings ---------- */
.sec-head{text-align:center}
.sec-head h2{margin-top:16px;font-family:var(--serif);font-size:clamp(2rem,3.4vw,2.7rem);font-weight:700}
.sec-head p{margin-top:8px;color:var(--muted)}

/* ---------- games ---------- */
.games-intro{padding:80px 0 48px;background:var(--ink)}
.game{position:relative;border-top:1px solid var(--gold-faint)}
.game .wrap{display:grid;gap:60px;align-items:center}
.meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.92rem;color:var(--muted)}
.meta strong{font-weight:600}
.game h3{margin-top:10px;line-height:1.15}
.game h3 small{margin-left:12px;font-family:var(--caps);font-size:.4em;font-weight:500;letter-spacing:.12em;color:var(--muted)}
.game .quote{margin-top:18px}
.game .desc{margin-top:14px;max-width:36em}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;margin:22px 0 0;padding-top:16px;border-top:1px solid var(--gold-faint);font-size:.93rem}
.facts dt{color:var(--muted)}
.facts dd{margin:0;color:var(--cream)}
.main-shot img{width:100%;aspect-ratio:16/9;object-fit:cover}
.shots{display:grid;gap:18px}
.shots img{width:100%;aspect-ratio:16/9;object-fit:cover}
.shots figcaption{margin-top:10px;color:var(--muted);font-size:.86rem}


.g-yeo{background:var(--yeo-bg)}
.g-yeo .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr);padding:80px 0 56px}
.g-yeo .meta strong{color:var(--yeo-accent)}
.g-yeo h3{font-family:var(--serif);font-weight:700;font-size:clamp(2.4rem,4.4vw,3.4rem)}
.g-yeo .quote{font-size:1.2rem}
.g-yeo .shots{grid-template-columns:repeat(4,1fr);padding:0 0 80px}

.g-umb{background:var(--umb-bg)}
.g-umb .wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr);padding:72px 0}
.g-umb .meta strong{color:var(--umb-accent)}
.g-umb h3{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.04em;font-size:clamp(2rem,3.4vw,2.7rem)}

.g-dok{background:var(--dok-bg)}
.g-dok .wrap{grid-template-columns:minmax(0,4fr) minmax(0,5fr);padding:64px 0 48px}
.g-dok .meta strong{color:var(--dok-accent)}
.g-dok h3{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.04em;font-size:clamp(1.9rem,3vw,2.4rem)}
.g-dok .quote{font-size:1.05rem}
.g-dok .shots{grid-template-columns:repeat(3,1fr);padding:0 0 64px}
.g-dok + .waves{background-color:var(--dok-bg)}

/* ---------- news: a sealed letter on parchment ---------- */
.news{padding:96px 0}
.letter{position:relative;margin-top:44px;padding:52px 56px 48px;background:var(--parchment);color:var(--parchment-ink);border:1px solid var(--gold);box-shadow:inset 0 0 0 6px var(--parchment),inset 0 0 0 7px var(--gold-line)}
.letter h3{color:var(--parchment-ink)}
.seal{position:absolute;right:40px;top:-34px;width:84px;height:84px;border-radius:50%;object-fit:cover;border:3px solid var(--gold);box-shadow:0 0 0 1px var(--parchment)}
.letter-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px}
.letter-grid.is-single{grid-template-columns:1fr}
.letter time{color:#8a6a33;font-size:.9rem;font-weight:600;font-variant-numeric:tabular-nums}
.lead-news h3{margin-top:6px;font-family:var(--serif);font-size:1.8rem;font-weight:700}
.lead-news p{margin-top:12px;color:var(--parchment-ink)}
.lead-news a{display:inline-block;margin-top:18px;color:#7a5a24;font-weight:600;text-underline-offset:5px}
.lead-news a:hover{color:var(--parchment-ink)}
.news-list{list-style:none;margin:0;padding:0 0 0 40px;border-left:1px solid rgba(138,106,51,.35)}
.news-list li{padding:14px 0;border-bottom:1px solid rgba(138,106,51,.25)}
.news-list li:first-child{padding-top:0}
.news-list li:last-child{border-bottom:0}
.news-list h3{margin-top:2px;font-size:1.05rem;font-weight:700}
.news-list p{margin-top:2px;color:var(--parchment-muted);font-size:.95rem}

/* ---------- studio: royal blue with a large compass rose ---------- */
.studio{position:relative;overflow:hidden;background:var(--royal);isolation:isolate;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
.studio>.rose{position:absolute;z-index:-1;right:-160px;top:50%;width:620px;height:620px;transform:translateY(-50%);opacity:.16}
.studio .wrap{display:grid;grid-template-columns:300px 1fr;gap:72px;align-items:center;padding:100px 0}
.crest{position:relative;width:300px;height:300px;padding:10px;border:1px solid var(--gold);border-radius:50%}
.crest::after{content:"";position:absolute;inset:4px;border:1px solid var(--gold-faint);border-radius:50%}
.crest img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.studio .name{font-family:'Cinzel',serif;font-weight:600;letter-spacing:.16em;color:var(--gold-light);font-size:.95rem}
.studio h2{margin-top:12px;font-family:var(--serif);font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:700}
.studio p.body{margin-top:20px;max-width:38em;font-size:1.06rem;color:#e6e1cb}
.studio .text-link{display:inline-block;margin-top:26px}

/* ---------- contact ---------- */
.contact{background:var(--navy)}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:72px;padding:96px 0}
.contact h2{font-family:var(--serif);font-size:clamp(1.9rem,3.2vw,2.6rem);font-weight:700}
.contact .lead{margin-top:14px}
.contact .mail{display:inline-block;margin-top:26px;color:var(--cream);font-size:1.35rem;text-decoration-color:var(--gold-line);text-underline-offset:6px}
.contact .mail:hover{color:var(--gold-light)}
.links{display:flex;flex-wrap:wrap;gap:22px;margin-top:18px}
.contact-form{display:grid;gap:18px;padding:32px;border:1px solid var(--gold-line);box-shadow:inset 0 0 0 5px var(--navy),inset 0 0 0 6px var(--gold-faint)}
.contact-form label{display:grid;gap:6px;color:var(--cream);font-size:.92rem}
.contact-form input,.contact-form textarea{width:100%;padding:12px 14px;border:1px solid #31457a;border-radius:0;background:var(--ink);color:var(--cream);font:inherit}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--gold);outline:none}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-form .btn{justify-self:start}

/* ---------- footer ---------- */
.footer{background:var(--royal);color:#c9c6b4;font-size:.9rem}
.footer .waves{background-color:var(--navy)}
.footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:40px 0 48px}
.footer .mark{display:flex;align-items:center;gap:14px;color:var(--cream)}
.footer .mark img{width:48px;height:48px;object-fit:contain}
.footer .mark b{display:block;font-family:'Cinzel',serif;font-weight:600;letter-spacing:.16em;font-size:1.05rem}
.footer .mark small{font-size:.85rem}
.footer nav{display:flex;flex-wrap:wrap;gap:22px}
.footer a{text-decoration:none}
.footer a:hover{color:var(--gold-light)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .header .wrap{flex-wrap:wrap;height:auto;padding:12px 0;gap:8px 20px}
  .nav{order:3;width:100%;margin-left:0;gap:22px}
  .lang{margin-left:auto}
  .header .btn{display:none}
  .chart{left:auto;right:40px;top:120px}
  .chart .rose{width:360px;height:360px;opacity:.14}
  .hero .wrap,.g-yeo .wrap,.g-umb .wrap,.g-dok .wrap,.letter-grid,.contact .wrap{grid-template-columns:1fr;gap:28px}
  .hero .wrap{padding:36px 0 60px}
  .hero .video-wrap{order:-1}
  .g-yeo .wrap,.g-umb .wrap{padding:48px 0}
  .g-umb .main-shot,.g-dok .main-shot{order:-1}
  .g-yeo .wrap:first-child{padding-bottom:32px}
  .g-dok .wrap:first-child{padding:48px 0 28px}
  .g-yeo .shots{grid-template-columns:1fr 1fr;gap:12px;padding:0 0 48px}
  .g-dok .shots{grid-template-columns:repeat(3,1fr);gap:8px;padding:0 0 48px}
  .shots figcaption{font-size:.8rem}
  .games-intro{padding:60px 0 36px}
  .news{padding:64px 0}
  .letter{padding:56px 22px 32px}
  .seal{right:20px;width:68px;height:68px;top:-28px}
  .news-list{border-left:0;padding-left:0;border-top:1px solid rgba(138,106,51,.35);padding-top:20px}
  .studio .wrap{grid-template-columns:1fr;gap:36px;padding:72px 0}
  .studio>.rose{right:-200px;top:140px;transform:none;width:460px;height:460px}
  .crest{width:200px;height:200px}
  .studio .name{font-size:.8rem;letter-spacing:.1em}
  .contact .wrap{padding:72px 0}
  .contact-form{padding:22px}
  .play{left:10px;bottom:10px;min-height:40px;font-size:.88rem}
}
@media (max-width:520px){
  .brand span{display:none}
  .brand b{font-size:1rem;letter-spacing:.1em}
  .lang-btn{padding:4px 5px;font-size:.8rem}
  .orn::before,.orn::after{width:44px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}