/* ============================================================================
   ACE LABS — acelabs.ai
   Editorial serif. Warm paper, a large Newsreader display, Archivo carrying
   the UI register. One print on the homepage — an oxblood CBD engraving,
   uncaptioned, bleeding onto the paper itself — is the one departure from
   type alone.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-var.woff2') format('woff2-variations');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-italic-var.woff2') format('woff2-variations');
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper:  #FBF9F5;
  --ink:    #1C1A16;
  --ink-70: #4D473C;
  --ink-45: #787263;   /* darkened from the draft's #8a8272 — that read 3.62:1, under the 4.5:1 floor for 12.5px labels */
  --ink-18: #CFC6B0;
  --ink-08: #E8E2D6;
  --accent: #8B3528;   /* oxblood — ledger-red, not the cool tech blue this world replaced */

  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --gutter: clamp(22px, 6vw, 108px);
  --max: 1200px;
  --rhythm: clamp(72px, 10vh, 128px);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--paper);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--paper); }
:root { caret-color: var(--accent); accent-color: var(--accent); }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

* { scrollbar-width: thin; scrollbar-color: var(--ink-18) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-18); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-45); }

/* ---------- Shell -------------------------------------------------------- */

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Masthead ------------------------------------------------------ */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
}
.masthead.is-scrolled { border-bottom-color: var(--ink-08); }
.masthead__in {
  max-width: var(--max); margin-inline: auto; padding: 20px var(--gutter);
  display: flex; align-items: center; gap: 64px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-style: normal;
  font-size: 24px; font-weight: 650; letter-spacing: 0;
  color: var(--ink); text-decoration: none; white-space: nowrap; flex: none;
}
.wordmark img { display: block; width: 132px; height: auto; object-fit: contain; flex: none; }
.navigation { flex: 1; min-width: 0; }
.menu-toggle { display: none; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-family: var(--sans); font-size: 16px; color: var(--ink-70);
  text-decoration: none; text-underline-offset: 6px;
}
.nav a:hover, .nav a[aria-current='location'] { color: var(--ink); text-decoration: underline; }
.nav .nav__cta { margin-left: auto; color: var(--ink); }
.nav__cta img { flex: none; }
summary { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
@media (max-width: 700px) {
  .masthead__in { position: relative; padding-block: 14px; gap: 18px; }
  .wordmark { font-size: 22px; }
  .masthead .wordmark img { width: 112px; }
  .navigation { flex: none; margin-left: auto; }
  .menu-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; list-style: none;
  }
  .menu-close, .navigation[open] .menu-open { display: none; }
  .navigation[open] .menu-close { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px;
    padding: 12px var(--gutter) 20px;
    background: var(--paper); border-bottom: 1px solid var(--ink-18);
  }
  .nav .nav__cta { margin-left: 0; }
}

/* ---------- Type ----------------------------------------------------------- */

.h-hero, .h-sec, .h-sub { margin: 0; text-wrap: balance; font-family: var(--serif); }

.h-hero {
  font-size: 64px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
  max-width: 15.5ch;
}
.h-sec {
  font-style: italic;
  font-size: 46.4px;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0;
  max-width: 20ch;
}
.h-sub {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
}

.prose {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.64;
  letter-spacing: 0;
  color: var(--ink-70);
  max-width: 46ch;
  margin: 0;
  text-wrap: pretty;
}
.prose--wide { max-width: 64ch; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose + .prose { margin-top: 1.3em; }

.label {
  font-family: var(--sans);
  font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: uppercase;
  color: var(--ink-45); margin: 0;
}

a { color: inherit; }

/* ---------- Sections -------------------------------------------------------- */

.section { padding-block: var(--rhythm); }
.section--first { padding-top: clamp(56px, 10vh, 120px); }
.section--rule { border-top: 1px solid var(--ink-08); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1.6fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* Split labels already carry the rule. The section hairline
     would sit on top of them as a second line. */
  .section--rule { border-top: none; }
}

.split > .label {
  padding-top: 10px;
  border-top: 1px solid var(--ink);
  position: sticky; top: 96px;
}
@media (max-width: 900px) { .split > .label { position: static; } }

/* ---------- Hero: copy left, the print right --------------------------------
   The copy column carries the wider share so the display sets in two lines:
   "finance's best minds" needs 14.7ch, which the old 1.08fr column never gave
   it at any width, so the head always broke three ways. The print keeps its
   480px height cap and simply reads a little smaller. -------------------- */

.hero { padding-top: clamp(44px, 7vh, 96px); padding-bottom: clamp(52px, 8vh, 112px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.33fr) minmax(0, 0.67fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.hero .h-hero { max-width: 15.5ch; }
.hero .prose { margin-top: clamp(26px, 3.4vw, 40px); }

/* ---------- The hero print: no frame, no caption — it sits on the page itself, not in a card.
   Four landmark plates share the one print position and turn in a slow loop;
   site.js advances the track and appends the inert wrap copy. ---------- */

@keyframes plate-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero-figure {
  margin: 0;
  overflow: hidden;
  opacity: 1; transform: none;
  animation: plate-in 900ms cubic-bezier(.19,1,.22,1) 160ms both;
}
.hero-plates {
  display: flex;
  width: 100%;
  transition: transform 1200ms cubic-bezier(.19,1,.22,1);
}
.hero-figure img { display: block; flex: 0 0 100%; width: 100%; height: auto; max-height: 480px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .hero-figure { animation: none; opacity: 1; transform: none; }
  .hero-plates { transition: none; }
  .hero-copy, .hero-figure { transition: none; }
}

.hero-peek { display: none; }

/* Tablet: keep the spread, just a tighter second column. */
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: clamp(28px, 4vw, 52px);
  }
}

/* Phone: the print is a field in the paper, not a pane behind the type.
   No overlay on the copy — overlays make a box. The engraving itself
   feathers out before it can meet the section's top and bottom. */
@media (max-width: 700px) {
  .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .hero-copy {
    position: relative;
    z-index: 1;
    transition: opacity 480ms cubic-bezier(.19,1,.22,1);
  }
  .hero-peek {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hero-peek:focus-visible { outline-offset: -8px; }
  .hero-figure {
    position: absolute;
    z-index: 0;
    top: 14%;
    right: -20%;
    bottom: 16%;
    left: 6%;
    width: auto;
    height: auto;
    margin: 0;
    pointer-events: none;
    animation: none;
    opacity: 0.28;
    filter: blur(6px);
    mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(ellipse 92% 80% at 78% 50%, #000 0%, #000 48%, transparent 78%);
            mask-image: radial-gradient(ellipse 92% 80% at 78% 50%, #000 0%, #000 48%, transparent 78%);
    transition:
      opacity 560ms cubic-bezier(.19,1,.22,1),
      filter 560ms cubic-bezier(.19,1,.22,1),
      top 560ms cubic-bezier(.19,1,.22,1),
      right 560ms cubic-bezier(.19,1,.22,1),
      bottom 560ms cubic-bezier(.19,1,.22,1),
      left 560ms cubic-bezier(.19,1,.22,1);
  }
  .hero-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 64% 48%;
  }
  .hero-plates { height: 100%; }
  .hero.is-revealed .hero-copy { opacity: 0; }
  .hero.is-revealed .hero-figure {
    z-index: 2;
    opacity: 1;
    top: 6%;
    right: 6%;
    bottom: 6%;
    left: 6%;
    filter: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero.is-revealed .hero-figure img { object-position: center; }
}
@media (max-width: 700px) and (prefers-reduced-transparency: reduce) {
  .hero-figure {
    filter: none;
    opacity: 0.12;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero.is-revealed .hero-figure { opacity: 1; }
}

/* ---------- Team experience ------------------------------------------------ */

.company { background: #F3F5F3; padding-block: 64px 42px; }
.spaced { margin-top: 24px; }
.provenance { margin-top: 40px; }
.logo-window { overflow: auto; border-block: 1px solid #D5DDD7; }
.logo-track { display: flex; }
.logo-list {
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center;
  width: 100%; list-style: none; margin: 0; padding: 0;
}
.team-logo {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex: 0 0 var(--logo-cell); height: 104px; padding: 14px;
}
.team-logo img { display: block; object-fit: contain; width: var(--logo-width); height: auto; max-width: 100%; max-height: 52px; flex: none; }
.team-logo span { font: 500 21px/1.15 var(--sans); color: #24282A; }
.team-logo small { font: 400 11px/1.2 var(--sans); }
.team-logo--meta { --logo-cell: 228px; --logo-width: 46px; gap: 12px; }
.team-logo--meta span { font-size: 23px; }
.team-logo--apple { --logo-cell: 88px; --logo-width: 36px; }
.team-logo--apple img { transform: translateY(-2px); }
/* Morgan Stanley's original canvas includes large margins; size the visible wordmark. */
.team-logo--morgan-stanley { --logo-cell: 240px; --logo-width: 208px; }
.team-logo--jpmorgan { --logo-cell: 202px; --logo-width: 144px; }
.team-logo--jpmorgan img { transform: translateY(1px); }
.team-logo--cambridge { --logo-cell: 234px; --logo-width: 174px; }
.team-logo--oxford { --logo-cell: 220px; --logo-width: 164px; }
.team-logo--columbia { --logo-cell: 272px; --logo-width: 216px; }
.team-logo--columbia img { transform: translateY(2px); }
.team-logo--eth { --logo-cell: 236px; --logo-width: 180px; }
/* Berkeley's canvas is 16:9 with the seal and name in its middle band; let the box run taller than 52px so the ink lands near 38px. */
.team-logo--ucb { --logo-cell: 206px; --logo-width: 150px; padding-block: 8px; }
.team-logo--ucb img { max-height: 88px; }
.team-logo--ubs { --logo-cell: 166px; --logo-width: 110px; }
.team-logo--cmu { --logo-cell: 128px; --logo-width: 72px; }
.team-logo--nomura { --logo-cell: 216px; --logo-width: 160px; }
.team-logo--macquarie { --logo-cell: 222px; --logo-width: 165px; }
.team-logo--evercore { --logo-cell: 220px; --logo-width: 164px; }
.team-logo--oracle { --logo-cell: 224px; --logo-width: 168px; }
.provenance.is-animated .logo-window { overflow: hidden; }
.provenance.is-animated .logo-track { width: max-content; animation: logo-loop 88s linear infinite; }
.provenance.is-animated .logo-list { flex-wrap: nowrap; width: auto; }
.provenance.is-animated:hover .logo-track,
.provenance.is-animated:focus-within .logo-track { animation-play-state: paused; }
/* Keyboard browsing removes the transform so every original logo is reachable. */
.provenance.is-browsing .logo-window { overflow: auto; }
.provenance.is-browsing .logo-track { animation: none; }
.provenance.is-browsing .logo-list[aria-hidden='true'] { display: none; }
@keyframes logo-loop { to { transform: translateX(-50%); } }

/* ---------- News ------------------------------------------------------------- */

/* Stacked index rows: a narrow uppercase category column, the title in a wide
   middle column, and the month in a slim trailing column, all on one baseline.
   Column gaps stay small so the title gets the width; long titles wrap greedily,
   filling the first line before breaking. Titles match the prose size. */
.news-section { padding-block: 16px 48px; }
.news__item {
  display: grid; grid-template-columns: 124px minmax(0, 1fr) minmax(64px, auto);
  gap: 8px 32px; align-items: baseline;
  border-top: 1px solid var(--ink-18); padding-block: 20px 22px;
}
.news__kicker {
  margin: 0; font: 500 14px/1.6 var(--sans); letter-spacing: 0; text-transform: uppercase; color: var(--ink-45); white-space: nowrap;
}
.news__link {
  font: 500 20px/1.45 var(--serif); color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--ink-18); text-underline-offset: 5px;
}
.news__link:hover, .news__link:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
.news__mark { display: inline-block; vertical-align: -2px; margin-left: 6px; }
.news__note { margin: 0; font: 400 20px/1.45 var(--serif); color: var(--ink-70); }
.news__date { margin: 0; font: 14px/1.6 var(--sans); color: var(--ink-45); text-align: right; white-space: nowrap; }
/* Below the split breakpoint: category and month share the first line, the
   title runs full width beneath. Declared after the row rule so it wins. */
@media (max-width: 900px) {
  .news__item { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; }
  .news__kicker { grid-area: 1 / 1; }
  .news__date { grid-area: 1 / 2; }
  .news__link, .news__note { grid-area: 2 / 1 / 3 / 3; }
}

/* ---------- Careers ---------------------------------------------------------- */

.roles { margin-top: 32px; }
.role { border-top: 1px solid var(--ink-18); }
.role:last-child { border-bottom: 1px solid var(--ink-18); }
.role summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; min-height: 84px; list-style: none;
}
.role summary:hover { color: var(--accent); }
.role__title { font: 500 25px/1.25 var(--serif); }
.role__icon { flex: none; transition: transform 180ms ease; }
.role[open] .role__icon { transform: rotate(45deg); }
.role__detail { display: flex; flex-direction: column; align-items: flex-start; padding: 0 0 20px; }
.role__actions { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.text-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 500 14px/1.5 var(--sans); text-underline-offset: 5px;
}
.text-link img { flex: none; }
.text-link:hover { color: var(--accent); }
.open-application { margin-top: 42px; }
.open-application .spaced { margin-top: 14px; }
.open-application .text-link { margin-top: 16px; }

/* ---------- Compact contact / footer --------------------------------------- */

.foot { border-top: 1px solid var(--ink-08); background: var(--paper); font-family: var(--sans); }
.foot__row { display: flex; align-items: center; min-height: 87px; gap: 28px; }
.foot .wordmark { font-size: 20px; min-height: 44px; gap: 8px; }
.foot .wordmark img { width: 112px; height: auto; }
.foot__copyright {
  display: inline-flex; align-items: center; min-width: 44px; min-height: 44px;
  margin-left: auto; font-size: 14px; color: var(--ink-45); text-decoration: none; white-space: nowrap;
}
.contact-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  flex: none; font-size: 14px; text-decoration: none;
}
.foot__copyright:hover, .contact-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.contact-link img { flex: none; }

/* ---------- Copyright and credits ------------------------------------------ */

.credits-header, .jd-header { border-bottom: 1px solid var(--ink-08); }
.credits-header .wrap, .jd-header .wrap { display: flex; align-items: center; min-height: 88px; }
.credits-header .wordmark, .jd-header .wordmark { min-height: 44px; }
.credits { padding-block: 48px 64px; }
.credits article { max-width: 68ch; }
.credits h1 { margin: 0 0 24px; font-size: 40px; font-weight: 500; line-height: 1.15; }
.credits h2 { margin: 36px 0 16px; font-size: 26px; font-weight: 500; line-height: 1.25; }
.credits p { margin: 16px 0; color: var(--ink-70); font-size: 19px; }
.credits a { overflow-wrap: anywhere; text-underline-offset: 4px; }
.credits .text-link { margin-top: 24px; }

/* ---------- Job descriptions ------------------------------------------------
   One reading column on the paper, under the same header as the credits
   document. The role's terms sit beneath the title; the application link
   appears at the head and again at the foot. ------------------------------ */

.jd-header .text-link { margin-left: auto; color: var(--ink-70); text-decoration: none; }
.jd-header .text-link:hover { color: var(--ink); text-decoration: underline; }
.jd { padding-block: 48px 80px; }
/* 800px gives bullets about 780px of text: the supplied JD's mid-length points
   (up to about 752px in 19px Newsreader) hold one line; only the three longest wrap. */
.jd article { max-width: 800px; }
.jd__head { padding-bottom: 32px; border-bottom: 1px solid var(--ink-18); }
.jd__head .label { margin-bottom: 18px; }
.jd__title { margin: 0; font-size: 44px; font-weight: 500; line-height: 1.12; letter-spacing: 0; text-wrap: balance; }
.jd__focus { margin: 8px 0 0; font-style: italic; font-size: 26px; font-weight: 400; line-height: 1.3; letter-spacing: 0; color: var(--ink-70); }
.jd__meta { margin: 18px 0 0; font: 14px/1.6 var(--sans); color: var(--ink-45); }
.jd__head .text-link { margin-top: 20px; }
.jd h2 { margin: 40px 0 12px; font-size: 26px; font-weight: 500; line-height: 1.25; letter-spacing: 0; }
.jd article > p, .jd article > ul, .jd__apply p { margin: 14px 0; color: var(--ink-70); font-size: 19px; line-height: 1.6; text-wrap: pretty; }
.jd ul { padding-left: 1.15em; }
.jd li { margin: 8px 0; padding-left: 4px; }
.jd li::marker { color: var(--accent); }
.jd__apply { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--ink-18); }
.jd__apply h2 { margin-top: 0; }
.jd__back { margin-top: 40px; }

.redirect { padding-block: 80px; }
[id] { scroll-margin-top: 104px; }
.section:focus-visible, main:focus-visible, .roles:focus-visible { outline: none; }
[hidden] { display: none !important; }

@media (max-width: 980px) {
  .h-hero { font-size: 52px; }
}
@media (max-width: 700px) {
  .h-hero { font-size: 40px; }
  .h-sec { font-size: 32px; }
  .prose { font-size: 18px; }
  .company { padding-block: 48px 32px; }
  .provenance { margin-top: 28px; }
  .news-section { padding-block: 8px 36px; }
  .news__item { padding-block: 16px 18px; }
  .news__link, .news__note { font-size: 18px; }
  .role__title { font-size: 23px; }
  .role summary { gap: 12px; }
  .foot__row { min-height: 79px; gap: 16px; }
  .credits-header .wrap, .jd-header .wrap { min-height: 72px; }
  .credits { padding-block: 36px 48px; }
  .credits h1 { font-size: 32px; }
  .jd { padding-block: 36px 56px; }
  .jd__title { font-size: 34px; }
  .jd__focus { font-size: 22px; }
  .jd h2 { font-size: 23px; }
  .jd article > p, .jd article > ul, .jd__apply p { font-size: 18px; }
  [id] { scroll-margin-top: 92px; }
}

/* ---------- Motion ---------------------------------------------------------------------- */

.js-motion .rise { opacity: 0; transform: translateY(22px); filter: blur(6px); }
.js-motion .rise.in { opacity: 1; transform: none; filter: none; animation: rise 980ms cubic-bezier(.19,1,.22,1) both; }
.rise:nth-child(2) { animation-delay: 90ms; }
.rise:nth-child(3) { animation-delay: 180ms; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) {
  .js-motion .rise, .js-motion .rise.in { animation: none; opacity: 1; transform: none; filter: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .provenance.is-animated .logo-track { width: 100%; transform: none; }
  .provenance.is-animated .logo-list { flex-wrap: wrap; width: 100%; }
  .logo-list[aria-hidden='true'] { display: none; }
}

.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; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 18px; font-family: var(--sans); font-size: 14px; }
.skip:focus { left: 12px; top: 12px; }