/* ═══════════════════════════════════════════════════════════
   STUDIO 난다 — style.css
   Aesthetic: Korean kinetic-brutalist portfolio.
   Dark ink base, acid-green accent, mixed KR/Latin type.
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink: #0e0e10;
  --ink-2: #161619;
  --paper: #f2f0ea;
  --paper-dim: #b9b6ad;
  --acid: #c8f542;
  --acid-dim: rgba(200, 245, 66, .14);
  --on-accent: #0e0e10;
  --line: rgba(242, 240, 234, .14);
  --font-lat: "Archivo", sans-serif;
  --font-kr: "Noto Sans KR", sans-serif;
  --font-mono: "Space Mono", monospace;
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }
html, body { background: var(--ink); color: var(--paper); width: 100%; }
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}

body {
  font-family: var(--font-lat);
  overflow-x: clip;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}
body[data-scheme="day"] {
  --ink: #faf9f5;
  --ink-2: #f0ece2;
  --paper: #141414;
  --paper-dim: #5f5a50;
  --acid: #9a6a24;
  --acid-dim: rgba(154, 106, 36, .16);
  --on-accent: #ffffff;
  --line: rgba(20, 20, 20, .14);
  background:
    radial-gradient(circle at 14% -4%, rgba(154, 106, 36, .12), transparent 28rem),
    linear-gradient(135deg, #fffdf8, #f0ece2 62%, #f8f6f0);
}
body[data-lang="zh"], body[data-lang="ko"] { font-family: var(--font-kr); }
@media (hover: none) { body { cursor: auto; } }

a, button { cursor: none; color: inherit; }
@media (hover: none) { a, button { cursor: pointer; } }

::selection { background: var(--acid); color: var(--on-accent); }

.outline {
  -webkit-text-stroke: 1.5px var(--paper);
  color: transparent;
}
.fill { color: var(--paper); }
.serif { font-family: var(--font-kr); }
.italic { font-style: italic; font-weight: 300; }
.accent { color: var(--acid); -webkit-text-stroke-color: var(--acid); }

/* ─────────── PRELOADER ─────────── */
.preloader {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
}
.preloader__curtain {
  position: absolute; inset: 0; background: var(--ink);
}
.preloader__inner { position: relative; z-index: 2; text-align: center; }
.preloader__word { font-size: clamp(2rem, 6vw, 4.5rem); font-weight: 800; letter-spacing: .02em; }
.preloader__word span { display: inline-block; opacity: 0; transform: translateY(60%) rotate(6deg); animation: pl-in .8s var(--ease-out) forwards; }
.preloader__word span:nth-child(n) { animation-delay: calc(.05s * var(--i, 0)); }
.preloader__word .kr { font-family: var(--font-kr); color: var(--acid); margin-left: .2em; }
@keyframes pl-in { to { opacity: 1; transform: none; } }
.preloader__counter { font-family: var(--font-mono); font-size: clamp(3rem, 10vw, 7rem); margin-top: .5rem; color: var(--acid); }
.preloader__counter em { font-style: normal; font-size: .4em; vertical-align: super; }
.preloader__bar { width: min(420px, 70vw); height: 2px; background: var(--line); margin: 1rem auto; overflow: hidden; }
.preloader__bar i { display: block; height: 100%; width: 0%; background: var(--acid); }
.preloader__hint { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .25em; color: var(--paper-dim); }
.preloader.is-done { pointer-events: none; }
.preloader.is-done .preloader__inner { opacity: 0; transition: opacity .4s; }
.preloader.is-done .preloader__curtain { transform: translateY(-101%); transition: transform 1s var(--ease-io) .2s; }

/* ─────────── CURSOR ─────────── */
.cursor { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
@media (hover: none) { .cursor { display: none; } }
.cursor__dot {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--acid); transform: translate(-50%, -50%);
}
.cursor__ring {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acid) 68%, transparent); transform: translate(-50%, -50%);
  display: grid; place-items: center;
  transition: width .35s var(--ease-out), height .35s var(--ease-out),
              background-color .35s, border-color .35s;
}
.cursor__label {
  font-family: var(--font-kr); font-size: .68rem; font-weight: 700;
  color: var(--on-accent); opacity: 0; transition: opacity .2s; white-space: nowrap;
}
.cursor.is-hover .cursor__ring {
  width: 84px; height: 84px; background: var(--acid); border-color: var(--acid);
  mix-blend-mode: normal;
}
.cursor.is-hover .cursor__label { opacity: 1; }
.cursor.is-down .cursor__ring { width: 28px; height: 28px; }

/* ─────────── GRAIN ─────────── */
.grain {
  position: fixed; inset: -100px 0; z-index: 800; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-jump .42s steps(4) infinite;
}
@keyframes grain-jump {
  0% { transform: translate(0,0); } 25% { transform: translate(-30px,20px); }
  50% { transform: translate(20px,-30px); } 75% { transform: translate(-20px,-20px); } 100% { transform: translate(0,0); }
}

/* ─────────── FIELD CANVAS ─────────── */
.field { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; }

/* ─────────── CHROME (fixed header) ─────────── */
.chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 2rem; mix-blend-mode: difference;
}
.chrome__logo { text-decoration: none; display: flex; align-items: center; gap: .5rem; font-weight: 800; }
.chrome__logo-mark { color: var(--acid); animation: spin 6s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.chrome__logo-text em { font-family: var(--font-kr); font-style: normal; color: var(--acid); margin-left: .3em; }
.chrome__nav { display: flex; gap: 1.35rem; }
.chrome__link {
  text-decoration: none; font-family: var(--font-kr); font-weight: 600; font-size: .9rem;
  display: flex; align-items: baseline; gap: .35rem; position: relative;
}
.chrome__link i { font-family: var(--font-mono); font-style: normal; font-size: .6rem; color: var(--acid); }
.chrome__link b { font: inherit; font-weight: 700; white-space: nowrap; }
.chrome__link span { font-family: var(--font-mono); font-size: .6rem; color: var(--paper-dim); }
.chrome__link::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%;
  background: var(--acid); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-io);
}
.chrome__link:hover::after, .chrome__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.chrome__meta { display: flex; align-items: center; gap: 1.2rem; }
.lang-switch {
  display: flex; align-items: center; gap: 2px;
  padding: 3px; border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 72%, transparent);
}
.lang-switch__btn {
  width: 34px; height: 28px; border: 0; border-radius: 999px;
  display: grid; place-items: center;
  background: transparent; color: var(--paper-dim);
  font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out);
}
.lang-switch__btn:hover,
.lang-switch__btn.is-active {
  background: var(--acid); color: var(--on-accent);
}
.lang-switch__btn:hover { transform: translateY(-1px); }
.chrome__clock { font-family: var(--font-mono); font-size: .7rem; text-align: right; line-height: 1.3; }
.chrome__clock span { display: block; color: var(--paper-dim); letter-spacing: .2em; font-size: .58rem; }
.chrome__sound { background: none; border: 1px solid var(--line); border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; }
.chrome__theme {
  background: none; border: 1px solid var(--line); border-radius: 50%;
  width: 38px; height: 38px; display: grid; place-items: center;
}
.chrome__theme-icon {
  width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(90deg, var(--acid) 0 50%, transparent 50% 100%);
  border: 1px solid var(--acid);
  box-shadow: 0 0 18px var(--acid-dim);
  transition: transform .35s var(--ease-out), background .35s var(--ease-out);
}
.chrome__theme.is-day .chrome__theme-icon {
  transform: rotate(180deg);
  background: var(--acid);
}
.chrome__sound-bars { display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.chrome__sound-bars i { width: 2px; background: var(--acid); height: 4px; animation: bars 1s ease-in-out infinite; }
.chrome__sound-bars i:nth-child(2) { animation-delay: .15s; }
.chrome__sound-bars i:nth-child(3) { animation-delay: .3s; }
.chrome__sound-bars i:nth-child(4) { animation-delay: .45s; }
@keyframes bars { 50% { height: 12px; } }
.chrome__sound.is-off .chrome__sound-bars i { animation-play-state: paused; height: 2px; background: var(--paper-dim); }

/* ─────────── SCROLL PROGRESS ─────────── */
.scrollbar-x { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 600; }
.scrollbar-x i { display: block; height: 100%; width: 0%; background: var(--acid); }

main { position: relative; z-index: 1; }

/* ─────────── HERO ─────────── */
.hero { min-height: 100svh; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0 4vw; overflow: clip; }
.hero__meta { position: absolute; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .18em; color: var(--paper-dim); line-height: 1.8; }
.hero__meta--tl { top: 5.5rem; left: 4vw; }
.hero__meta--tr { top: 5.5rem; right: 4vw; text-align: right; }
.hero__title { font-weight: 800; line-height: .95; user-select: none; }
.hero__line { display: block; white-space: nowrap; will-change: transform; }
.hero__line--1 { font-size: clamp(3.4rem, 13vw, 11rem); }
.hero__line--2 { font-size: clamp(3.4rem, 13vw, 11rem); margin-left: 6vw; }
.hero__line--3 { font-size: clamp(1.5rem, 5.2vw, 4.2rem); margin-left: 14vw; margin-top: 1.2rem; display: flex; gap: 1.4vw; align-items: baseline; }
.hero__word { display: inline-block; margin-right: .18em; }
body[data-lang="en"] .hero__line--2 { margin-left: 0; font-size: clamp(3.2rem, 9.2vw, 8.4rem); }
body[data-lang="en"] .hero__line--3 { margin-left: 7vw; }
.hero__word.serif { font-weight: 300; }
.hero__bottom { position: absolute; bottom: 4rem; left: 4vw; right: 4vw; display: flex; align-items: flex-end; justify-content: space-between; }
.hero__cta { text-decoration: none; }
.hero__cta-circle { position: relative; display: block; width: 130px; height: 130px; }
.hero__cta-text-ring { width: 100%; height: 100%; animation: spin 14s linear infinite; }
.hero__cta-text-ring text { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 2.5px; fill: var(--paper-dim); }
.hero__cta-arrow { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem; color: var(--acid); animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(8px); } }
.hero__scroll-hint { font-family: var(--font-kr); font-size: .7rem; color: var(--paper-dim); display: flex; align-items: center; gap: .6rem; }
.hero__scroll-hint i { display: block; width: 1px; height: 42px; background: linear-gradient(var(--acid), transparent); animation: drip 1.6s var(--ease-io) infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ─────────── MARQUEE ─────────── */
.marquee { overflow: hidden; contain: paint; white-space: nowrap; padding: 1rem 0; position: relative; z-index: 2; }
.marquee--border { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marquee--accent { background: var(--acid); color: var(--on-accent); }
.marquee__track { display: inline-block; will-change: transform; font-family: var(--font-kr); font-weight: 700; font-size: clamp(1rem, 2.6vw, 1.8rem); }
.marquee--footer { font-size: .85rem; }

/* ─────────── SECTION HEAD ─────────── */
.section-head { display: flex; align-items: baseline; gap: 1.2rem; padding: 0 4vw; margin-bottom: .6rem; }
.section-head__index { font-family: var(--font-mono); color: var(--acid); font-size: .8rem; }
.section-head__title { font-size: clamp(1.6rem, 4.6vw, 3.4rem); font-weight: 800; font-family: var(--font-kr); }
.section-head__count { font-family: var(--font-mono); color: var(--paper-dim); }
.section-head__sub { padding: 0 4vw; font-family: var(--font-mono); font-size: .68rem; color: var(--paper-dim); letter-spacing: .08em; margin-bottom: 3rem; }

/* ─────────── WORKS ─────────── */
.works { padding: 9rem 0 7rem; position: relative; }
.works__list { list-style: none; border-top: 1px solid var(--line); }
.work {
  position: relative; display: flex; align-items: center; gap: 2.4vw;
  padding: 2.1rem 4vw; border-bottom: 1px solid var(--line);
  text-decoration: none; overflow: hidden;
}
.work::before {
  content: ""; position: absolute; inset: 0; background: var(--acid);
  transform: translateY(101%); transition: transform .55s var(--ease-io); z-index: 0;
}
.work:hover::before { transform: translateY(0); }
.work > * { position: relative; z-index: 1; transition: color .35s; }
.work:hover > * { color: var(--on-accent); }
.work__idx { font-family: var(--font-mono); font-size: .75rem; color: var(--paper-dim); width: 3ch; }
.work__title { font-family: var(--font-kr); font-weight: 800; font-size: clamp(1.6rem, 4.8vw, 3.6rem); flex: 1; line-height: 1.05; transition: transform .55s var(--ease-out), color .35s; }
.work__title small { font-family: var(--font-lat); font-weight: 300; font-style: italic; font-size: .45em; margin-left: .25em; }
.work:hover .work__title { transform: translateX(1.4vw) skewX(-4deg); }
.work__cat { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; color: var(--paper-dim); text-align: right; }
.work__year { font-family: var(--font-mono); font-size: .8rem; width: 5ch; text-align: right; }
.works__float {
  position: fixed; top: 0; left: 0; z-index: 400; pointer-events: none;
  width: 240px; opacity: 0; transform: scale(.8) rotate(-4deg);
  transition: opacity .35s, transform .5s var(--ease-out);
}
.works__float.is-on { opacity: 1; transform: scale(1) rotate(-2deg); }
.works__float canvas { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.works__float-tag { font-family: var(--font-mono); font-size: .62rem; background: var(--ink); border: 1px solid var(--line); border-top: none; padding: .4rem .6rem; color: var(--acid); }
body[data-scheme="day"] .chrome {
  mix-blend-mode: normal;
  background: rgba(250, 249, 245, .78);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
body[data-scheme="day"] .field {
  opacity: .62;
}
body[data-scheme="day"] .grain {
  opacity: .045;
}
body[data-scheme="day"] .outline {
  -webkit-text-stroke-color: rgba(20, 20, 20, .72);
}
body[data-scheme="day"] .work::before {
  background: #d9c39d;
}
body[data-scheme="day"] .work:hover > * {
  color: #111;
}
body[data-scheme="day"] .works__float-tag {
  background: rgba(255, 253, 248, .92);
}

/* ─────────── ABOUT ─────────── */
.about { padding: 9rem 0; }
.about__grid { display: grid; grid-template-columns: minmax(280px, 42%) 1fr; gap: 5vw; padding: 0 4vw; align-items: start; }
.about__portrait { position: sticky; top: 12vh; }
.about__portrait canvas { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.about__portrait-caption { font-family: var(--font-mono); font-size: .6rem; color: var(--paper-dim); margin-top: .6rem; letter-spacing: .12em; line-height: 1.7; }
.about__lead { font-family: var(--font-kr); font-size: clamp(1.5rem, 3.4vw, 2.6rem); font-weight: 700; line-height: 1.35; margin-bottom: 2.4rem; }
.about__lead em { font-style: normal; color: var(--acid); }
.about__text p { font-size: 1rem; line-height: 1.9; color: var(--paper-dim); margin-bottom: 1.6rem; max-width: 56ch; }
.about__facts { list-style: none; display: flex; gap: 3vw; margin-top: 3rem; }
.about__facts li { display: flex; flex-direction: column; }
.about__facts b { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; color: var(--acid); font-family: var(--font-mono); }
.about__facts span { font-size: .68rem; color: var(--paper-dim); font-family: var(--font-kr); }
.about__stack { margin-top: 6rem; padding: 2rem 4vw 0; border-top: 1px solid var(--line); }
.about__stack-label { font-family: var(--font-mono); font-size: .62rem; color: var(--paper-dim); letter-spacing: .25em; }
.about__stack-items { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.stack-chip {
  font-family: var(--font-mono); font-size: .72rem; padding: .45rem .9rem;
  border: 1px solid var(--line); border-radius: 999px; color: var(--paper-dim);
  transition: all .3s var(--ease-out); user-select: none;
}
.stack-chip:hover { background: var(--acid); color: var(--on-accent); border-color: var(--acid); transform: translateY(-3px) rotate(-2deg); }

/* ─────────── LAB ─────────── */
.lab { padding: 9rem 0; }
.lab__stage { position: relative; margin: 0 4vw; border: 1px solid var(--line); height: 68vh; min-height: 420px; overflow: hidden; background: var(--ink-2); }
.lab__canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.lab__hud { position: absolute; top: 1rem; left: 1rem; font-family: var(--font-mono); font-size: .62rem; pointer-events: none; }
.lab__hud-row { display: flex; gap: 1rem; background: color-mix(in srgb, var(--ink) 76%, transparent); padding: .3rem .6rem; border: 1px solid var(--line); margin-bottom: .3rem; }
.lab__hud-row span { color: var(--paper-dim); letter-spacing: .15em; }
.lab__hud-row b { color: var(--acid); min-width: 7ch; }
.lab__controls { position: absolute; bottom: 1rem; left: 1rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.lab__btn {
  font-family: var(--font-kr); font-weight: 700; font-size: .78rem;
  background: color-mix(in srgb, var(--ink) 76%, transparent); color: var(--paper); border: 1px solid var(--line);
  padding: .6rem 1.1rem; border-radius: 999px; transition: all .3s;
}
.lab__btn:hover, .lab__btn.is-active { background: var(--acid); color: var(--on-accent); border-color: var(--acid); }
.lab__btn--ghost:hover { background: #c43d33; color: #fff; border-color: #c43d33; }

/* ─────────── CONTACT ─────────── */
.contact { padding: 9rem 0 6rem; }
.contact__mega { display: block; text-decoration: none; padding: 2rem 4vw 4rem; font-weight: 800; line-height: 1.02; }
.contact__mega-line { display: block; font-size: clamp(2.6rem, 9vw, 7.5rem); transition: transform .6s var(--ease-out); }
.contact__mega:hover .contact__mega-line:first-child { transform: translateX(2vw) skewX(-3deg); }
.contact__mega:hover .contact__mega-line:last-child { transform: translateX(-2vw) skewX(3deg); }
.contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; padding: 0 4vw; max-width: 1100px; }
.contact__field { display: flex; flex-direction: column; gap: .5rem; }
.contact__field--wide { grid-column: 1 / -1; }
.contact__field label { font-family: var(--font-kr); font-size: .7rem; color: var(--paper-dim); letter-spacing: .1em; }
.contact__field input, .contact__field textarea {
  background: transparent; border: none; border-bottom: 1px solid var(--line);
  color: var(--paper); font-family: var(--font-kr); font-size: 1.1rem; padding: .6rem 0;
  outline: none; transition: border-color .3s; resize: vertical; cursor: none;
}
.contact__field input:focus, .contact__field textarea:focus { border-color: var(--acid); }
.contact__submit {
  grid-column: 1 / -1; justify-self: start; position: relative;
  background: var(--acid); color: var(--on-accent); border: none; border-radius: 999px;
  font-family: var(--font-kr); font-weight: 800; font-size: 1rem;
  padding: 1rem 2.6rem; overflow: hidden; transition: transform .3s var(--ease-out);
}
.contact__submit:hover { transform: scale(1.05) rotate(-1deg); }
.contact__submit.is-sent { background: var(--paper); }
.contact__submit-state { margin-left: .6rem; font-family: var(--font-mono); font-size: .75rem; }

/* ─────────── FOOTER ─────────── */
.footer { border-top: 1px solid var(--line); position: relative; overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 3.5rem 4vw; }
.footer__col { display: flex; flex-direction: column; gap: .55rem; }
.footer__label { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .25em; color: var(--paper-dim); margin-bottom: .6rem; }
.footer__link { text-decoration: none; font-family: var(--font-kr); font-size: .9rem; color: var(--paper-dim); width: fit-content; transition: color .25s, transform .25s; }
.footer__link:hover { color: var(--acid); transform: translateX(6px); }
.footer__stats { display: flex; gap: 2.4rem; }
.footer__stats div { display: flex; flex-direction: column; }
.footer__stats b { font-family: var(--font-mono); font-size: 1.8rem; color: var(--acid); }
.footer__stats span { font-family: var(--font-kr); font-size: .66rem; color: var(--paper-dim); }
.footer__bigtype {
  font-family: var(--font-kr); font-weight: 900; text-align: center;
  font-size: clamp(8rem, 30vw, 26rem); line-height: .8;
  -webkit-text-stroke: 1px var(--line); color: transparent;
  transform: translateY(18%); user-select: none;
}

/* ─────────── REVEAL ─────────── */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ─────────── MOTION OFF ─────────── */
body.motion-off *, body.motion-off *::before, body.motion-off *::after {
  animation-play-state: paused !important;
}
body.motion-off .field, body.motion-off .grain { display: none; }

/* ─────────── RESPONSIVE ─────────── */
@media (max-width: 860px) {
  .chrome__nav { display: none; }
  .chrome { padding: .85rem 1rem; }
  .chrome__meta { gap: .7rem; }
  .about__grid { grid-template-columns: 1fr; }
  .about__portrait { position: static; max-width: 340px; }
  .contact__form { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .works__float { display: none; }
  .hero__line--3 { flex-wrap: wrap; }
}

@media (max-width: 540px) {
  .chrome__clock { display: none; }
  .lang-switch__btn { width: 31px; height: 26px; font-size: .62rem; }
}