/* ADK Studio — shared styles.
   Modern and white-dominant: white page, black type, light greys for
   structure. Colour is reserved for the logo mark (blue east ray, gold
   star) and for the project art itself. Archivo for everything, Plex
   Mono for small labels. */
:root{
  --paper:#FFFFFF;
  --paper-2:#F4F4F2;
  --ink:#0A0A0A;
  --ink-2:#6B6B6B;
  --rule:#E4E4E1;
  --blue:#1B5FAA;
  --gold:#E9A23B;

  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --maxw:1240px;
  --pad:clamp(20px,4vw,56px);
  color-scheme:light;
}

*{box-sizing:border-box;}
html{background:var(--paper);scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;}
img{max-width:100%;display:block;}
::selection{background:var(--ink);color:var(--paper);}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}

/* ---------- type ---------- */
.label{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);margin:0;
}
.display{
  font-family:var(--sans);font-weight:600;font-variation-settings:'wdth' 100;
  letter-spacing:-.035em;line-height:1.02;margin:0;
}
.lede{font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--ink-2);max-width:34em;margin:18px 0 0;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:500;font-size:15px;text-decoration:none;
  padding:13px 22px;border:1px solid var(--ink);border-radius:999px;
  transition:background-color .2s ease,color .2s ease;
}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:#2A2A2A;}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}
.btn .star{width:12px;height:12px;flex:none;}
@media (prefers-reduced-motion:reduce){.btn{transition:none;}}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule);}
.site-head .shell{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px;}
.brand{font-family:var(--sans);font-weight:600;font-size:20px;letter-spacing:-.03em;line-height:1;text-decoration:none;color:var(--ink);}
.nav{display:flex;align-items:center;gap:28px;}
.nav a.link{font-size:15px;text-decoration:none;color:var(--ink-2);padding:4px 0;border-bottom:1px solid transparent;}
.nav a.link:hover,.nav a.link[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink);}
.nav .btn{padding:9px 18px;font-size:14px;}
@media (max-width:420px){.nav{gap:18px;}}


/* East star: rests north, swings east on hover */
.brand,.wordmark{display:inline-flex;align-items:center;gap:7px;}
.brand .mark,.wordmark .mark{width:36px;height:36px;margin:-10px -10px -10px -9px;overflow:visible;}
.brand .needle,.wordmark .needle{transform:none;transition:none;}
.needle{transform:rotate(-90deg);transition:transform 1s cubic-bezier(.3,1.6,.4,1);}
.nextlinks a.live:hover .needle,.nextlinks a.live:focus-visible .needle{transform:rotate(0deg);}
@media (prefers-reduced-motion:reduce){.needle{transition:none;}}

.brand .logo,.wordmark .logo{display:block;height:auto;}
.lockup{display:flex;flex-direction:column;align-items:center;gap:3px;}
.lockup .sub{font-family:"Archivo",sans-serif;font-weight:800;font-size:7px;line-height:1;letter-spacing:.14em;margin-right:-.14em;text-transform:uppercase;color:#0A0A0A;}

/* footer line with the 東奎 mark */
.foot-line{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:8px var(--pad) 28px;margin:0;}
.foot-line{display:flex;align-items:center;justify-content:center;gap:9px;}
.foot-line .hanja{height:16px;width:auto;display:block;}
/* 東奎 in 먹 ink with a seal-red sun and clan-gold star, written in stroke order (획순) each time the footer comes into view */
.foot-line.armed .stk{stroke-dasharray:1;stroke-dashoffset:1;}
.foot-line.armed .sun,.foot-line.armed .sta{opacity:0;}
.foot-line.play .stk{animation:hj-write .32s cubic-bezier(.6,0,.3,1) forwards;animation-delay:calc(var(--n) * .16s);}
.foot-line .sun{transform-box:fill-box;transform-origin:50% 100%;}
.foot-line.play .sun{animation:hj-rise .7s cubic-bezier(.3,1.4,.5,1) .5s forwards;}
.foot-line .sta{transform-box:fill-box;transform-origin:50% 50%;}
.foot-line.play .sta{animation:hj-land .6s cubic-bezier(.3,1.8,.5,1) 1.9s forwards;}
@keyframes hj-write{to{stroke-dashoffset:0;}}
@keyframes hj-rise{from{opacity:0;transform:translateY(40%) scaleY(.6);}to{opacity:1;transform:none;}}
@keyframes hj-land{from{opacity:0;transform:scale(0) rotate(-90deg);}to{opacity:1;transform:none;}}