/* Shared PRABIN KANDEL / DIGITAL LAB footer across portfolio, games and case studies. */
.footer{position:relative;overflow:hidden;background:var(--lab-bg,var(--g-bg,var(--cs-bg,#070812)))!important;color:var(--lab-text,var(--g-text,var(--cs-text,#f5f7ff)))!important;border-top:1px solid var(--lab-line,var(--g-line,var(--cs-line,rgba(166,185,230,.15))))!important;padding:clamp(52px,7vw,86px) 0 22px!important}
.footer:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 10%,color-mix(in srgb,var(--lab-blue,var(--g-blue,var(--cs-blue,#62e9ff))) 8%,transparent),transparent 25%);pointer-events:none}
.footer-top,.footer-bottom{position:relative;z-index:1}.footer-top p{color:var(--lab-muted,var(--g-muted,var(--cs-muted,#98a4bb)))!important;font-family:"DM Mono",monospace!important}.footer-top>a:last-child{color:var(--lab-blue,var(--g-blue,var(--cs-blue,#62e9ff)))!important;font-family:"DM Mono",monospace!important}.footer-bottom{border-top:1px solid var(--lab-line,var(--g-line,var(--cs-line,rgba(166,185,230,.15))))!important;color:var(--lab-dim,var(--g-muted,var(--cs-dim,#647089)))!important}.footer .brand-word{color:var(--lab-text,var(--g-text,var(--cs-text,#f5f7ff)))!important}.footer .brand-word b{color:var(--lab-blue,var(--g-blue,var(--cs-blue,#62e9ff)))!important}.footer .brand-mark{background:linear-gradient(135deg,var(--lab-blue,var(--g-blue,var(--cs-blue,#62e9ff))),var(--lab-blue-deep,var(--g-blue2,var(--cs-blue2,#315cff))))!important}.footer-top>a:last-child:hover{color:var(--lab-text,var(--g-text,var(--cs-text,#f5f7ff)))!important;transform:translateY(-4px)}
html[data-theme=light] .footer{background:var(--lab-bg,var(--g-bg,var(--cs-bg)))!important}
.footer .container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.footer-top{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center}
.footer-top .brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.footer-top .brand-mark{display:grid;place-items:center;width:38px;height:38px;color:#06101b;font:800 11px "DM Mono",monospace;letter-spacing:-.04em}
.footer-top .brand-word{font:800 16px/1 "Space Grotesk",sans-serif;letter-spacing:-.05em}
.footer-top p{margin:0;font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:45px;padding-top:16px;font:600 8px "DM Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:760px){.footer-top,.footer-bottom{grid-template-columns:1fr;display:grid;gap:14px}.footer-top>a:last-child{justify-self:start}.footer-bottom{margin-top:32px}.footer .container{width:min(100% - 28px,1180px)}}
/* =========================================================
   MOBILE-ONLY FIXES
   Education · Capability Matrix · 2048 Touch Interaction
   ========================================================= */

@media (max-width: 767px) {

  /* -------------------------------------------------------
     1. EDUCATION — keep timeline completely inside viewport
     ------------------------------------------------------- */

  #education .timeline-row {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #education .timeline-stamp {
    min-width: 0 !important;
    max-width: 72px !important;
    overflow-wrap: normal !important;
  }

  #education .timeline-body {
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 12px !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #education .timeline-body h3,
  #education .timeline-body p,
  #education .timeline-body > span,
  #education .timeline-chip,
  #education .score-row {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }


  /* -------------------------------------------------------
     2. WHAT I BUILD WITH — one capability per row
     ------------------------------------------------------- */

  .capability-grid.capability-grid--interactive {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .capability-grid.capability-grid--interactive .capability {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-right: 0 !important;
  }

  .capability-grid.capability-grid--interactive .cap-head,
  .capability-grid.capability-grid--interactive .cap-detail,
  .capability-grid.capability-grid--interactive .cap-links {
    min-width: 0 !important;
    max-width: 100% !important;
  }


  /* -------------------------------------------------------
     3. 2048 — keep swipe gestures inside the game board
     ------------------------------------------------------- */

  .game-page .board2048 {
    touch-action: none !important;
    overscroll-behavior: contain !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }
}
/* =========================================================
   MESSAGE DESK — LIGHT MODE INPUT TEXT FIX
   ========================================================= */

html[data-theme="light"] .contact-dialog-panel .contact-form input,
html[data-theme="light"] .contact-dialog-panel .contact-form textarea {
  color: #111319 !important;
  caret-color: #111319 !important;
}

html[data-theme="light"] .contact-dialog-panel .contact-form input::placeholder,
html[data-theme="light"] .contact-dialog-panel .contact-form textarea::placeholder {
  color: #6d727c !important;
  opacity: 1 !important;
}
@media (max-width: 767px) {
  /* SELECTED WORK — prevent mobile header text overlap */
  .selected-work-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .selected-work-head > div,
  .selected-work-intro {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .selected-work-head h2 {
    max-width: 100% !important;
    overflow-wrap: normal !important;
  }

  .selected-work-intro {
    padding-bottom: 0 !important;
  }

  .selected-work-intro p {
    max-width: 100% !important;
    margin-top: 14px !important;
    overflow-wrap: break-word !important;
  }

  .selected-work-count {
    max-width: 100% !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 767px) {
  /* EDUCATION — mobile GPA scores */
  #education .score-row {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    column-gap: 10px !important;
    row-gap: 4px !important;
    align-items: baseline !important;
    margin-top: 1.5rem !important;
  }

  #education .score-row b {
    font-size: 2rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #education .score-row small {
    margin-right: 0 !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
  }
}
/* =========================================================
   MESSAGE DESK — LIGHT MODE INPUT VISIBILITY FIX
   ========================================================= */

html[data-theme="light"] .contact-dialog-panel .contact-form input,
html[data-theme="light"] .contact-dialog-panel .contact-form textarea {
  color: #111319 !important;
  -webkit-text-fill-color: #111319 !important;
  caret-color: #111319 !important;
  opacity: 1 !important;
  color-scheme: light !important;
}

html[data-theme="light"] .contact-dialog-panel .contact-form input::placeholder,
html[data-theme="light"] .contact-dialog-panel .contact-form textarea::placeholder {
  color: #6d727c !important;
  -webkit-text-fill-color: #6d727c !important;
  opacity: 1 !important;
}

/* Keep autofilled browser text visible in Light Mode */
html[data-theme="light"] .contact-dialog-panel .contact-form input:-webkit-autofill,
html[data-theme="light"] .contact-dialog-panel .contact-form textarea:-webkit-autofill {
  -webkit-text-fill-color: #111319 !important;
  color: #111319 !important;
}

/* Focused fields */
html[data-theme="light"] .contact-dialog-panel .contact-form input:focus,
html[data-theme="light"] .contact-dialog-panel .contact-form textarea:focus {
  color: #111319 !important;
  -webkit-text-fill-color: #111319 !important;
  caret-color: #111319 !important;
}
/* =========================================================
   PRABIN // CASE STUDY ENTRY SYSTEM
   Cinematic project-file transition
   ========================================================= */

:root {
  --pk-transition-bg: #080b0a;
  --pk-transition-text: #f3f5ef;
  --pk-transition-muted: #8d9891;
  --pk-transition-accent: #8fd3ad;
}

/* Full-screen transition layer */
.pk-page-transition {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  background: var(--pk-transition-bg);
  color: var(--pk-transition-text);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.pk-page-transition.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Editorial grid */
.pk-transition-grid {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(
      rgba(255,255,255,.055) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.055) 1px,
      transparent 1px
    );
  background-size: 70px 70px;
  transform: scale(1.15);
}

/* Horizontal scan line */
.pk-transition-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--pk-transition-accent);
  transform: scaleX(0);
  transform-origin: left;
  box-shadow: 0 0 30px rgba(143,211,173,.35);
}

/* Main transition content */
.pk-transition-core {
  position: relative;
  z-index: 2;
  width: min(680px, calc(100% - 42px));
}

/* Metadata */
.pk-transition-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  color: var(--pk-transition-muted);
  font: 700 8px/1.2 "DM Mono", monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Main title */
.pk-transition-title {
  margin: 0;
  font: 600 clamp(48px, 8vw, 105px)/.82 "Space Grotesk", sans-serif;
  letter-spacing: -.075em;
  text-transform: lowercase;
}

.pk-transition-title em {
  color: var(--pk-transition-accent);
  font-style: normal;
}

/* Loading/status line */
.pk-transition-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 30px;
  color: var(--pk-transition-muted);
  font: 700 8px/1 "DM Mono", monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.pk-transition-status i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--pk-transition-accent);
  box-shadow: 0 0 16px var(--pk-transition-accent);
}

/* Bottom progress indicator */
.pk-transition-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,.08);
}

.pk-transition-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--pk-transition-accent);
}

/* =========================================================
   ENTER ANIMATION
   ========================================================= */

.pk-page-transition.is-active .pk-transition-grid {
  animation:
    pkTransitionGrid
    1.2s
    cubic-bezier(.16,1,.3,1)
    forwards;
}

.pk-page-transition.is-active .pk-transition-line {
  animation:
    pkTransitionLine
    .8s
    cubic-bezier(.16,1,.3,1)
    forwards;
}

.pk-page-transition.is-active .pk-transition-core {
  animation:
    pkTransitionCore
    .75s
    cubic-bezier(.16,1,.3,1)
    forwards;
}

.pk-page-transition.is-active .pk-transition-progress span {
  animation:
    pkTransitionProgress
    1.05s
    cubic-bezier(.65,0,.35,1)
    forwards;
}

/* Grid movement */
@keyframes pkTransitionGrid {
  from {
    opacity: 0;
    transform: scale(1.35);
  }

  to {
    opacity: .16;
    transform: scale(1);
  }
}

/* Scan line */
@keyframes pkTransitionLine {
  0% {
    transform: scaleX(0);
  }

  55% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(1);
  }
}

/* Main content entrance */
@keyframes pkTransitionCore {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Progress */
@keyframes pkTransitionProgress {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* Prevent double clicking during transition */
.pk-transitioning {
  cursor: wait !important;
}

.pk-transitioning .work-text-link {
  pointer-events: none !important;
}

/* =========================================================
   LIGHT THEME
   Transition intentionally remains dark for contrast
   ========================================================= */

html[data-theme="light"] .pk-page-transition {
  background: #0b100e;
  color: #f3f5ef;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .pk-transition-core {
    width: calc(100% - 32px);
  }

  .pk-transition-meta {
    font-size: 7px;
  }

  .pk-transition-title {
    font-size: clamp(46px, 15vw, 76px);
  }

  .pk-transition-status {
    margin-top: 24px;
  }

  .pk-transition-grid {
    background-size: 45px 45px;
  }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .pk-page-transition.is-active .pk-transition-grid,
  .pk-page-transition.is-active .pk-transition-line,
  .pk-page-transition.is-active .pk-transition-core,
  .pk-page-transition.is-active .pk-transition-progress span {
    animation: none !important;
  }

  .pk-page-transition.is-active .pk-transition-progress span {
    width: 100%;
  }

  .pk-page-transition.is-active .pk-transition-line {
    transform: scaleX(1);
  }

  .pk-page-transition.is-active .pk-transition-core {
    opacity: 1;
  }
}


/* =========================================================
PRABIN KANDEL — RESUME SECTION
MATCHES ORIGINAL PORTFOLIO THEME
========================================================= */

.resume-section {
position: relative;
overflow: hidden;
background: var(--lab-bg, var(--g-bg, var(--cs-bg, #070812)));
color: var(--lab-text, var(--g-text, var(--cs-text, #f5f7ff)));
}

.resume-layout {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
gap: clamp(32px, 5vw, 76px);
align-items: start;
margin-top: clamp(40px, 6vw, 70px);
}

.resume-document {
min-width: 0;
border: 1px solid var(
--lab-line,
var(--g-line,
var(--cs-line,
rgba(166, 185, 230, 0.16)))
);
background: var(--lab-card, var(--g-card, var(--cs-card, rgba(255,255,255,.025))));
}

.resume-document-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 13px 16px;
border-bottom: 1px solid var(
--lab-line,
var(--g-line,
var(--cs-line,
rgba(166, 185, 230, 0.12)))
);
color: var(
--lab-muted,
var(--g-muted,
var(--cs-muted,
#7f8ba4))
);
font-size: 9px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.resume-paper {
position: relative;
min-height: 540px;
margin: clamp(18px, 3vw, 30px);
padding: clamp(30px, 5vw, 58px);
overflow: hidden;
background: var(--resume-paper-bg, #f4f5f1);
color: var(--resume-paper-text, #111319);
box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
}

.resume-paper::before {
content: "";
position: absolute;
top: -120px;
right: -120px;
width: 280px;
height: 280px;
border: 1px solid rgba(17, 19, 25, 0.12);
border-radius: 50%;
pointer-events: none;
}

.resume-paper::after {
content: "";
position: absolute;
right: 35px;
bottom: 35px;
width: 90px;
height: 1px;
background: rgba(17, 19, 25, 0.2);
pointer-events: none;
}

.resume-paper-mark {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: clamp(45px, 7vw, 78px);
}

.resume-paper-mark span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid rgba(17, 19, 25, 0.3);
border-radius: 50%;
color: #111319;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
}

.resume-paper-mark i {
display: block;
width: 42px;
height: 1px;
background: rgba(17, 19, 25, 0.25);
}

.resume-paper-heading {
position: relative;
z-index: 1;
}

.resume-paper-heading span {
display: block;
margin-bottom: 14px;
color: #626873;
font-size: 9px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.16em;
text-transform: uppercase;
}

.resume-paper-heading strong {
display: block;
color: #111319;
font-size: clamp(48px, 7vw, 92px);
font-weight: 700;
line-height: 0.82;
letter-spacing: -0.065em;
}

.resume-paper-heading em {
display: block;
max-width: 460px;
margin-top: 22px;
color: #4e535d;
font-size: 11px;
font-style: normal;
font-weight: 500;
line-height: 1.7;
letter-spacing: 0.04em;
}

.resume-paper-rule {
position: relative;
z-index: 1;
width: 100%;
height: 1px;
margin: clamp(42px, 6vw, 68px) 0 24px;
background: rgba(17, 19, 25, 0.18);
}

.resume-paper-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 38px;
}

.resume-paper-grid div {
display: flex;
flex-direction: column;
gap: 8px;
}

.resume-paper-grid span {
color: #777c84;
font-size: 8px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.resume-paper-grid strong {
color: #17191f;
font-size: 10px;
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.02em;
}

.resume-paper-footer {
position: absolute;
right: clamp(30px, 5vw, 58px);
bottom: 24px;
left: clamp(30px, 5vw, 58px);
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding-top: 16px;
border-top: 1px solid rgba(17, 19, 25, 0.16);
color: #70757d;
font-size: 8px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.resume-paper-footer span:last-child {
color: #111319;
font-size: 13px;
}

.resume-document-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 13px 16px;
border-top: 1px solid var(
--lab-line,
var(--g-line,
var(--cs-line,
rgba(166, 185, 230, 0.12)))
);
color: var(
--lab-muted,
var(--g-muted,
var(--cs-muted,
#737f98))
);
font-size: 9px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.1em;
text-transform: uppercase;
}

.resume-info {
min-width: 0;
}

.resume-info-block {
padding-bottom: 30px;
border-bottom: 1px solid var(
--lab-line,
var(--g-line,
var(--cs-line,
rgba(166, 185, 230, 0.14)))
);
}

.resume-label {
display: block;
margin-bottom: 18px;
color: var(
--lab-blue,
var(--g-blue,
var(--cs-blue,
#62e9ff))
);
font-size: 9px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.13em;
text-transform: uppercase;
}

.resume-info-block h3 {
margin: 0;
color: var(
--lab-text,
var(--g-text,
var(--cs-text,
#f5f7ff))
);
font-size: clamp(30px, 3.5vw, 48px);
font-weight: 600;
line-height: 0.98;
letter-spacing: -0.055em;
}

.resume-info-block h3 em {
color: var(
--lab-blue,
var(--g-blue,
var(--cs-blue,
#62e9ff))
);
font-style: normal;
}

.resume-info-block p {
max-width: 540px;
margin: 22px 0 0;
color: var(
--lab-muted,
var(--g-muted,
var(--cs-muted,
#98a4bb))
);
font-size: 12px;
line-height: 1.8;
}

.resume-meta-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-bottom: 1px solid var(
--lab-line,
var(--g-line,
var(--cs-line,
rgba(166, 185, 230, 0.14)))
);
}

.resume-meta-grid div {
min-width: 0;
padding: 20px 18px;
border-right: 1px solid var(
--lab-line,
var(--g-line,
var(--cs-line,
rgba(166, 185, 230, 0.1)))
);
border-bottom: 1px solid var(
--lab-line,
var(--g-line,
var(--cs-line,
rgba(166, 185, 230, 0.1)))
);
}

.resume-meta-grid div:nth-child(2n) {
border-right: 0;
}

.resume-meta-grid div:nth-last-child(-n + 2) {
border-bottom: 0;
}

.resume-meta-grid span {
display: block;
margin-bottom: 8px;
color: var(
--lab-dim,
var(--g-muted,
var(--cs-dim,
#647089))
);
font-size: 8px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.resume-meta-grid strong {
display: block;
color: var(
--lab-text,
var(--g-text,
var(--cs-text,
#f5f7ff))
);
font-size: 10px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.02em;
}

.resume-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding: 24px 0;
}

.resume-action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 56px;
padding: 15px 17px;
border: 1px solid var(
--lab-line,
var(--g-line,
var(--cs-line,
rgba(166, 185, 230, 0.18)))
);
background: var(
--lab-card,
var(--g-card,
var(--cs-card,
rgba(255,255,255,.025)))
);
color: var(
--lab-text,
var(--g-text,
var(--cs-text,
#f5f7ff))
);
text-decoration: none;
transition:
transform 220ms ease,
background 220ms ease,
color 220ms ease,
border-color 220ms ease;
}

.resume-action span {
font-size: 9px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.1em;
}

.resume-action b {
color: var(
--lab-blue,
var(--g-blue,
var(--cs-blue,
#62e9ff))
);
font-size: 15px;
font-weight: 400;
line-height: 1;
}

.resume-action:hover {
transform: translateY(-3px);
border-color: var(
--lab-blue,
var(--g-blue,
var(--cs-blue,
rgba(98, 233, 255, 0.45)))
);
background: var(
--lab-card-hover,
var(--g-card-hover,
var(--cs-card-hover,
rgba(255,255,255,.055)))
);
}

.resume-action--primary {
border-color: var(
--lab-blue,
var(--g-blue,
var(--cs-blue,
#62e9ff))
);
background: var(
--lab-blue,
var(--g-blue,
var(--cs-blue,
#62e9ff))
);
color: var(
--lab-blue-ink,
var(--g-blue-ink,
var(--cs-blue-ink,
#06101b))
);
}

.resume-action--primary b {
color: inherit;
}

.resume-action--primary:hover {
border-color: var(
--lab-blue-hover,
var(--g-blue-hover,
var(--cs-blue-hover,
#7aeeff))
);
background: var(
--lab-blue-hover,
var(--g-blue-hover,
var(--cs-blue-hover,
#7aeeff))
);
}

.resume-action:focus-visible {
outline: 2px solid var(
--lab-blue,
var(--g-blue,
var(--cs-blue,
#62e9ff))
);
outline-offset: 4px;
}

.resume-note {
padding-top: 24px;
border-top: 1px solid var(
--lab-line,
var(--g-line,
var(--cs-line,
rgba(166, 185, 230, 0.14)))
);
}

.resume-note > span {
display: block;
margin-bottom: 12px;
color: var(
--lab-dim,
var(--g-muted,
var(--cs-dim,
#647089))
);
font-size: 8px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.resume-note p {
max-width: 560px;
margin: 0;
color: var(
--lab-muted,
var(--g-muted,
var(--cs-muted,
#7f8ba4))
);
font-size: 10px;
line-height: 1.75;
}

/* =========================================================
LIGHT THEME
========================================================= */

html[data-theme="light"] .resume-section {
background: var(--lab-bg, var(--g-bg, var(--cs-bg, #f4f5f1)));
color: var(--lab-text, var(--g-text, var(--cs-text, #111319)));
}

html[data-theme="light"] .resume-document {
border-color: var(
--lab-line,
var(--g-line,
var(--cs-line,
rgba(17, 19, 25, 0.13)))
);
background: var(--lab-card, var(--g-card, var(--cs-card, #ffffff)));
}

html[data-theme="light"] .resume-document-top,
html[data-theme="light"] .resume-document-bottom {
border-color: rgba(17, 19, 25, 0.1);
color: var(--lab-muted, var(--g-muted, var(--cs-muted, #737780)));
}

html[data-theme="light"] .resume-info-block,
html[data-theme="light"] .resume-note {
border-color: rgba(17, 19, 25, 0.13);
}

html[data-theme="light"] .resume-info-block h3 {
color: var(--lab-text, var(--g-text, var(--cs-text, #111319)));
}

html[data-theme="light"] .resume-info-block p {
color: var(--lab-muted, var(--g-muted, var(--cs-muted, #5e646d)));
}

html[data-theme="light"] .resume-meta-grid {
border-color: rgba(17, 19, 25, 0.13);
}

html[data-theme="light"] .resume-meta-grid div {
border-color: rgba(17, 19, 25, 0.09);
}

html[data-theme="light"] .resume-meta-grid span {
color: var(--lab-dim, var(--g-muted, var(--cs-dim, #70757d)));
}

html[data-theme="light"] .resume-meta-grid strong {
color: var(--lab-text, var(--g-text, var(--cs-text, #111319)));
}

html[data-theme="light"] .resume-action {
border-color: rgba(17, 19, 25, 0.15);
background: var(--lab-card, var(--g-card, var(--cs-card, #ffffff)));
color: var(--lab-text, var(--g-text, var(--cs-text, #111319)));
}

html[data-theme="light"] .resume-action:hover {
border-color: rgba(17, 19, 25, 0.3);
background: var(--lab-card-hover, var(--g-card-hover, var(--cs-card-hover, #eef0ec)));
}

html[data-theme="light"] .resume-action--primary {
border-color: var(--lab-text, var(--g-text, var(--cs-text, #111319)));
background: var(--lab-text, var(--g-text, var(--cs-text, #111319)));
color: var(--lab-bg, var(--g-bg, var(--cs-bg, #ffffff)));
}

html[data-theme="light"] .resume-action--primary b {
color: var(
--lab-blue,
var(--g-blue,
var(--cs-blue,
#62e9ff))
);
}

html[data-theme="light"] .resume-action--primary:hover {
border-color: var(--lab-text, var(--g-text, var(--cs-text, #252a31)));
background: var(--lab-text, var(--g-text, var(--cs-text, #252a31)));
}

html[data-theme="light"] .resume-note > span {
color: var(--lab-dim, var(--g-muted, var(--cs-dim, #70757d)));
}

html[data-theme="light"] .resume-note p {
color: var(--lab-muted, var(--g-muted, var(--cs-muted, #5e646d)));
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1000px) {
.resume-layout {
grid-template-columns: 1fr;
gap: 48px;
}

.resume-paper {
min-height: 500px;
}

.resume-info {
max-width: 760px;
}
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {
.resume-document-top,
.resume-document-bottom {
align-items: flex-start;
flex-direction: column;
gap: 7px;
}

.resume-paper {
min-height: 560px;
margin: 12px;
padding: 28px 24px;
}

.resume-paper-mark {
margin-bottom: 52px;
}

.resume-paper-heading strong {
font-size: clamp(44px, 14vw, 72px);
}

.resume-paper-grid {
grid-template-columns: 1fr;
gap: 20px;
}

.resume-paper-footer {
right: 24px;
bottom: 20px;
left: 24px;
gap: 10px;
}

.resume-paper-footer span:nth-child(2) {
display: none;
}

.resume-actions {
grid-template-columns: 1fr;
}
}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
.resume-paper {
min-height: 590px;
}

.resume-paper-heading em {
max-width: 280px;
font-size: 10px;
}

.resume-meta-grid {
grid-template-columns: 1fr;
}

.resume-meta-grid div,
.resume-meta-grid div:nth-child(2n) {
border-right: 0;
border-bottom: 1px solid rgba(17, 19, 25, 0.1);
}

.resume-meta-grid div:last-child {
border-bottom: 0;
}

.resume-paper-footer span {
font-size: 7px;
}
}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
.resume-action {
transition: none;
}

.resume-action:hover {
transform: none;
}
}

/* =========================================================
END RESUME SECTION
========================================================= */