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

html{
scroll-padding-top:var(--desktop-nav-height, 80px);
}

body{
background:white;
font-family:'Playfair Display SC',serif;
overflow-x:hidden;
}

/* Pull-to-refresh (mobile only) */
.ptr{ display:none; }
@media (hover: none) and (pointer: coarse) {
  .ptr{
    display:block;
    position:fixed;
    left:50%;
    top:10px;
    width:min(360px, calc(100vw - 28px));
    transform:translateX(-50%) translateY(-132px);
    z-index:6000;
    pointer-events:none;
    color:black;
    transition:transform .18s ease, opacity .18s ease, filter .18s ease;
    opacity:0;
    mix-blend-mode:multiply;
    filter:drop-shadow(0 12px 24px rgba(0,0,0,0.08));
  }
  .ptr.show{
    opacity:1;
  }
  .ptr-frame{
    position:relative;
    border:1px solid rgba(0,0,0,0.26);
    outline:1px solid rgba(0,0,0,0.08);
    outline-offset:6px;
    background:rgba(255,255,255,0.76);
    backdrop-filter:blur(8px);
    padding:12px 14px 10px;
    overflow:hidden;
  }
  .ptr-frame::before{
    content:"";
    position:absolute;
    inset:8px;
    border:1px solid rgba(0,0,0,0.10);
    pointer-events:none;
  }
  .ptr-corners{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)) left 8px top 8px / 14px 1px no-repeat,
      linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)) left 8px top 8px / 1px 14px no-repeat,
      linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)) right 8px top 8px / 14px 1px no-repeat,
      linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)) right 8px top 8px / 1px 14px no-repeat,
      linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)) left 8px bottom 8px / 14px 1px no-repeat,
      linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)) left 8px bottom 8px / 1px 14px no-repeat,
      linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)) right 8px bottom 8px / 14px 1px no-repeat,
      linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)) right 8px bottom 8px / 1px 14px no-repeat;
    opacity:0.55;
  }
  .ptr-axis{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(to right, rgba(0,0,0,0.08), rgba(0,0,0,0.08)) 50% 0/1px 100% no-repeat,
      linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0.06)) 0 50%/100% 1px no-repeat;
    opacity:0.65;
    mask-image:radial-gradient(circle at 50% 50%, black 0%, black 58%, transparent 92%);
  }
  .ptr-rail{
    position:relative;
    height:8px;
    border:1px solid rgba(0,0,0,0.28);
    background:
      repeating-linear-gradient(to right, rgba(0,0,0,0.09) 0 1px, transparent 1px 18px),
      rgba(255,255,255,0.65);
    position:relative;
    overflow:hidden;
  }
  .ptr-rail::before,
  .ptr-rail::after{
    content:"";
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:5px;
    height:5px;
    border:1px solid rgba(0,0,0,0.30);
    background:white;
  }
  .ptr-rail::before{ left:-4px; }
  .ptr-rail::after{ right:-4px; }
  .ptr-progress{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:0%;
    background:
      linear-gradient(90deg, rgba(0,0,0,0.88), rgba(0,0,0,0.58)),
      repeating-linear-gradient(to right, rgba(255,255,255,0.18) 0 1px, transparent 1px 10px);
    transition:width .12s ease;
  }
  .ptr-head{
    margin-top:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .ptr-index,
  .ptr-ratio{
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(0,0,0,0.56);
    min-width:38px;
  }
  .ptr-ratio{ text-align:right; }
  .ptr-mark-wrap{
    width:24px;
    height:24px;
    border:1px solid rgba(0,0,0,0.18);
    display:grid;
    place-items:center;
    background:rgba(255,255,255,0.6);
    flex:0 0 auto;
  }
  .ptr-mark{
    width:9px;
    height:9px;
    border:1px solid rgba(0,0,0,0.55);
    background:transparent;
    transition:transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .ptr-copy{
    min-width:0;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .ptr.ready .ptr-mark{
    background:black;
    transform:rotate(45deg) scale(1.05);
  }
  .ptr.refreshing .ptr-mark{
    background:black;
    animation:ptrSpin 0.75s linear infinite;
  }
  .ptr.ready .ptr-frame{
    background:rgba(255,255,255,0.86);
  }
  .ptr.refreshing .ptr-progress{
    width:100% !important;
    animation:ptrSweep 1s linear infinite;
  }
  @keyframes ptrSpin{
    to{ transform:rotate(405deg); }
  }
  @keyframes ptrSweep{
    0%{ transform:translateX(-12%); opacity:0.85; }
    50%{ transform:translateX(0%); opacity:1; }
    100%{ transform:translateX(12%); opacity:0.85; }
  }
  .ptr-text{
    font-family:'Unbounded',sans-serif;
    font-size:11px;
    letter-spacing:3px;
    text-transform:uppercase;
    line-height:1;
  }
  .ptr-sub{
    margin-top:6px;
    text-align:center;
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(0,0,0,0.65);
  }
}

/* AESTHETIC CURSOR (19th century × futurism, strict monochrome) */
@media (hover: hover) and (pointer: fine) {
  body{
    cursor:none;
  }
  a, button, [role="button"], .lang-btn, .contact-copy{
    cursor:none;
  }
}

#aesthetic-cursor{
position:fixed;
left:0;
top:0;
width:0;
height:0;
z-index:99999;
pointer-events:none;
opacity:0;
transform:translate3d(-9999px,-9999px,0);
transition:opacity .18s ease;
mix-blend-mode:multiply;
}
#aesthetic-cursor.active{
opacity:1;
}

#aesthetic-cursor .ac-ring{
position:absolute;
left:0;
top:0;
width:44px;
height:44px;
transform:translate(-50%,-50%);
border-radius:999px;
border:1px solid rgba(0,0,0,0.55);
outline:1px solid rgba(0,0,0,0.12);
outline-offset:8px;
box-shadow:
0 0 0 1px rgba(0,0,0,0.08) inset,
0 14px 28px rgba(0,0,0,0.08);
background:
radial-gradient(circle at 50% 50%, rgba(0,0,0,0.04), transparent 60%);
transition:
transform .12s ease,
width .12s ease,
height .12s ease,
border-color .12s ease,
outline-color .12s ease,
outline-offset .12s ease,
box-shadow .12s ease;
}
#aesthetic-cursor .ac-ring::before{
content:"";
position:absolute;
inset:7px;
border-radius:999px;
border:1px dashed rgba(0,0,0,0.25);
opacity:0.75;
}

#aesthetic-cursor .ac-cross{
position:absolute;
left:0;
top:0;
width:18px;
height:18px;
transform:translate(-50%,-50%);
}
#aesthetic-cursor .ac-cross::before,
#aesthetic-cursor .ac-cross::after{
content:"";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:rgba(0,0,0,0.55);
}
#aesthetic-cursor .ac-cross::before{ width:18px; height:1px; }
#aesthetic-cursor .ac-cross::after{ width:1px; height:18px; }

#aesthetic-cursor .ac-label{
position:absolute;
left:0;
top:0;
transform:translate(-50%,-50%) translateY(34px);
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:10px;
letter-spacing:2px;
text-transform:uppercase;
color:rgba(0,0,0,0.7);
opacity:0;
transition:opacity .12s ease, transform .12s ease, color .12s ease;
white-space:nowrap;
}

/* hover state */
#aesthetic-cursor.is-hover .ac-ring{
width:56px;
height:56px;
outline-offset:10px;
border-color:rgba(0,0,0,0.75);
box-shadow:
0 0 0 1px rgba(0,0,0,0.10) inset,
0 18px 34px rgba(0,0,0,0.12);
}
#aesthetic-cursor.is-hover .ac-label{
opacity:1;
transform:translate(-50%,-50%) translateY(38px);
}

/* press state */
#aesthetic-cursor.is-down .ac-ring{
width:40px;
height:40px;
outline-offset:6px;
}

/* invert on dark sections */
#aesthetic-cursor.inverted{
mix-blend-mode:screen;
}
#aesthetic-cursor.inverted .ac-ring{
border-color:rgba(255,255,255,0.8);
outline-color:rgba(255,255,255,0.16);
box-shadow:
0 0 0 1px rgba(255,255,255,0.08) inset,
0 16px 34px rgba(0,0,0,0.25);
background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), transparent 60%);
}
#aesthetic-cursor.inverted .ac-ring::before{
border-color:rgba(255,255,255,0.35);
}
#aesthetic-cursor.inverted .ac-cross::before,
#aesthetic-cursor.inverted .ac-cross::after{
background:rgba(255,255,255,0.75);
}
#aesthetic-cursor.inverted .ac-label{
color:rgba(255,255,255,0.85);
}

:root{
--ui-hover-lift:-1px;
--ui-hover-time:.18s;
--ui-frame-fade:.25s;
--ui-frame-draw:.55s;
--ui-frame-ease:cubic-bezier(.2,1,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  #aesthetic-cursor .ac-ring,
  #aesthetic-cursor .ac-label{
    transition:none;
  }
}

/* NAVBAR */

.navbar{
background:black;
height:80px;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
width:100%;
padding:0 60px;
position:fixed;
top:0;
z-index:3000;
transition:0.3s;
}

.nav-section{
display:flex;
align-items:center;
}

.nav-section.left{justify-content:flex-end;padding-right:50px;}
.nav-section.center{justify-content:center;}
.nav-section.right{justify-content:flex-start;padding-left:50px;}

.group{
display:flex;
gap:50px;
position:relative;
align-items:center;
}

.logo-nav{
height:30px;
display:block;
}

/* TEXT */

.nav-item{
color:white!important;
text-decoration:none;
font-family:'Unbounded',sans-serif;
font-size:14px;
letter-spacing:0.5px;
position:relative;
white-space:nowrap;
height:30px;
display:flex;
align-items:center;
}

.education{ padding-top:4px; }
.plans{
font-family:'Redacted Script',cursive!important;
font-size:24px;
transform:translateY(-2px);
}

/* LANGUAGES */

.languages{ justify-content:center; }
.main-lang{ position:relative; }
.jp-lang{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
font-family:'Noto Sans JP';
font-weight:900;
opacity:0;
}

.languages:hover .main-lang{color:transparent;}
.languages:hover .main-lang::before{
content:"Languages";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
color:white;
animation:cycleLatin 3s infinite linear; /* linear убирает рывки в скорости */
}
.languages:hover .jp-lang{ 
animation:cycleJP 3s infinite linear; 
}

@keyframes cycleLatin{
    /* 0-25% Языки */
    0%   { content: "Языки"; opacity: 0; }
    5%, 20% { content: "Языки"; opacity: 1; }
    25%  { content: "Языки"; opacity: 0; }

    /* 25-50% Японский (здесь пусто) */
    26%, 49% { content: ""; opacity: 0; }

    /* 50-75% Sprachen */
    50%  { content: "Sprachen"; opacity: 0; }
    55%, 70% { content: "Sprachen"; opacity: 1; }
    75%  { content: "Sprachen"; opacity: 0; }

    /* 75-100% Мови */
    76%  { content: "Мови"; opacity: 0; }
    81%, 94% { content: "Мови"; opacity: 1; }
    100% { content: "Мови"; opacity: 0; }
}

@keyframes cycleJP{
    /* Появляется ровно когда Языки ушли (25%) и исчезает когда приходит Sprachen (50%) */
    0%, 20%  { opacity: 0; }
    25%      { opacity: 0; }
    31%, 44% { opacity: 1; }
    50%      { opacity: 0; }
    55%, 100%{ opacity: 0; }
}

/* UNDERLINES */

.languages::after, .education::after, .group::before{
content:"";
position:absolute;
bottom:0;
height:1px;
background:white;
transform:scaleX(0);
transition:transform .4s cubic-bezier(.25,1,.5,1);
}
.languages::after, .education::after{width:100%;left:0;}
.languages::after{transform-origin:right;}
.education::after{transform-origin:left;}
.languages:hover::after, .education:hover::after{ transform:scaleX(1); }
.group::before{width:100%;left:0;}
.group-left::before{transform-origin:right;}
.group-right::before{transform-origin:left;}
.group-left:has(.contact:hover)::before{transform:scaleX(1);}
.group-right:has(.plans:hover)::before{transform:scaleX(1);}
.group-left:has(.contact:hover) .languages::after{opacity:0;}
.group-right:has(.plans:hover) .education::after{opacity:0;}

/* PARTICLES */

.question-particle{
position:absolute;
font-family:'Unbounded';
font-size:14px;
pointer-events:none;
z-index:9999;
animation:flyOut 1s ease-out forwards;
color:white;
}
.question-particle.inverted{ color:black; }
@keyframes flyOut{
0%{opacity:1;transform:translate(0,0) scale(1);}
100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.5) rotate(0deg);}
}

   /* SECTIONS */
   :root{ 
   --desktop-nav-height:80px; 
   --desktop-nav-coef:0.82; 
   }

   .hero, 
   .contactme-section, 
   .languages-section, 
   .education-section, 
   .plans-section {
   height:100vh;
   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:center;
   gap:30px;
   }
   .contactme-section, 
   .languages-section, 
   .education-section, 
   .plans-section{
   height:calc(100vh - (var(--desktop-nav-height) * var(--desktop-nav-coef)));
   }
   .contactme-section, 
   .education-section{ 
   background:black; 
   }

   .contact-shell,
   .lang-shell,
   .edu-shell,
   .plans-shell{
   display:flex;
   justify-content:center;
   }

/* HERO BACKGROUND (SUBTLE 19TH CENTURY CLASSICISM) */
.hero{
position:relative;
isolation:isolate;
--hero-frame-inset:42px;
background:
radial-gradient(1200px 700px at 50% 40%, rgba(0,0,0,0.045), rgba(0,0,0,0) 60%),
radial-gradient(900px 520px at 50% 60%, rgba(0,0,0,0.03), rgba(0,0,0,0) 62%),
linear-gradient(180deg, rgba(0,0,0,0.018), rgba(0,0,0,0));
}
.hero .hero-logo{
filter:drop-shadow(0 18px 40px rgba(0,0,0,0.08));
}
.hero .portfolio-title{
text-shadow:0 1px 0 rgba(0,0,0,0.04);
}

/* subtle “paper” noise + corner ornaments */
.hero::before{
background:
radial-gradient(8px 8px at 16px 16px, rgba(0,0,0,0.08), transparent 70%) top left / 26px 26px no-repeat,
radial-gradient(8px 8px at calc(100% - 16px) 16px, rgba(0,0,0,0.08), transparent 70%) top right / 26px 26px no-repeat,
radial-gradient(8px 8px at 16px calc(100% - 16px), rgba(0,0,0,0.08), transparent 70%) bottom left / 26px 26px no-repeat,
radial-gradient(8px 8px at calc(100% - 16px) calc(100% - 16px), rgba(0,0,0,0.08), transparent 70%) bottom right / 26px 26px no-repeat;
}
.hero::after{
filter:blur(0.2px);
animation:heroDrift 14s ease-in-out infinite;
}
@keyframes heroDrift{
0%,100%{ opacity:0.52; transform:translateY(0); }
50%{ opacity:0.60; transform:translateY(-8px); }
}
.hero::before{
content:"";
position:absolute;
inset:42px;
border:1px solid rgba(0,0,0,0.16);
outline:1px solid rgba(0,0,0,0.08);
outline-offset:10px;
z-index:0;
pointer-events:none;
inset:var(--hero-frame-inset);
}
.hero::after{
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
opacity:0.55;
background:
/* center axes */
linear-gradient(to right, rgba(0,0,0,0.10), rgba(0,0,0,0.10)) 50% 0/1px 100% no-repeat,
linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0.08)) 0 50%/100% 1px no-repeat,
/* “engraving” hatch */
repeating-linear-gradient(45deg, rgba(0,0,0,0.018) 0 1px, transparent 1px 10px),
repeating-linear-gradient(-45deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 12px);
mask-image:radial-gradient(circle at 50% 50%, black 0%, black 55%, transparent 86%);
}
.hero > *{
position:relative;
z-index:1;
}

.portfolio-title{
position:relative;
display:flex;
justify-content:center;
width:100%;
}

/* LANGUAGES (INTERACTIVE / STRICT) */
.languages-section{
position:relative;
isolation:isolate;
background:
radial-gradient(1100px 640px at 50% 42%, rgba(0,0,0,0.035), rgba(0,0,0,0) 62%),
linear-gradient(180deg, rgba(0,0,0,0.015), rgba(0,0,0,0));
color:#111;
}
.lang-bg{
position:absolute;
inset:0;
z-index:0;
display:none;
}

.lang-shell{
width:min(1040px, calc(100vw - 120px));
z-index:1;
display:flex;
flex-direction:column;
gap:22px;
}
.lang-top{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
border-bottom:2px solid rgba(0,0,0,0.75);
padding-bottom:14px;
}
.lang-title{
font-family:'Unbounded',sans-serif;
font-weight:400;
letter-spacing:3px;
text-transform:uppercase;
font-size:clamp(34px, 5vw, 64px);
line-height:0.95;
}
.lang-top-meta{
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:flex-end;
}
.lang-chip{
border:1px solid rgba(0,0,0,0.35);
padding:8px 10px;
color:rgba(0,0,0,0.75);
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
background:transparent;
}

.lang-layout{
display:grid;
grid-template-columns:320px 26px 1fr;
gap:0;
align-items:stretch;
}
.lang-divider{
position:relative;
}
.lang-divider::before{
content:"";
position:absolute;
left:50%;
top:0;
bottom:0;
width:2px;
transform:translateX(-50%);
background:rgba(0,0,0,0.75);
}

/* make Languages divider feel “instrument-like” */
.lang-divider::after{
content:"";
position:absolute;
left:50%;
top:6%;
bottom:6%;
width:2px;
transform:translateX(-50%);
background:
repeating-linear-gradient(to bottom, rgba(0,0,0,0.75) 0 10px, transparent 10px 16px);
opacity:0.45;
}

.lang-nav{
border:2px solid rgba(0,0,0,0.75);
background:transparent;
padding:16px 16px;
display:flex;
flex-direction:column;
gap:10px;
position:relative;
}
.lang-nav::after{
content:"";
position:absolute;
inset:-2px;
border:2px solid transparent;
background:
linear-gradient(90deg, rgba(0,0,0,0.82) 0 30%, transparent 30% 100%) top left / 0% 2px no-repeat,
linear-gradient(180deg, rgba(0,0,0,0.82) 0 30%, transparent 30% 100%) top right / 2px 0% no-repeat,
linear-gradient(270deg, rgba(0,0,0,0.82) 0 30%, transparent 30% 100%) bottom right / 0% 2px no-repeat,
linear-gradient(0deg, rgba(0,0,0,0.82) 0 30%, transparent 30% 100%) bottom left / 2px 0% no-repeat;
opacity:0;
transition:opacity var(--ui-frame-fade) ease;
pointer-events:none;
}
.lang-nav:hover::after{
opacity:1;
animation:contactFrame var(--ui-frame-draw) var(--ui-frame-ease) forwards;
}
.lang-btn{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
width:100%;
text-align:left;
border:1px solid rgba(0,0,0,0.28);
background:transparent;
padding:14px 12px;
cursor:pointer;
transition:transform var(--ui-hover-time) ease, background var(--ui-hover-time) ease, border-color var(--ui-hover-time) ease, box-shadow var(--ui-hover-time) ease;
position:relative;
}
.lang-btn:hover{
transform:translateY(var(--ui-hover-lift));
border-color:rgba(0,0,0,0.55);
box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08);
}
.lang-btn.active{
background:black;
border-color:black;
box-shadow:inset 3px 0 0 rgba(255,255,255,0.92);
}
.lang-btn-name{
font-family:'Playfair Display SC',serif;
letter-spacing:1.5px;
text-transform:uppercase;
font-size:16px;
color:rgba(0,0,0,0.92);
}
.lang-btn-meta{
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:12px;
letter-spacing:1.6px;
text-transform:uppercase;
color:rgba(0,0,0,0.65);
}
.lang-btn.active .lang-btn-name,
.lang-btn.active .lang-btn-meta{
color:white;
}
.lang-btn.secret .lang-btn-meta{
letter-spacing:2px;
}
.lang-btn:focus-visible{
outline:2px solid black;
outline-offset:3px;
}

.lang-nav-footer{
margin-top:auto;
border-top:1px solid rgba(0,0,0,0.18);
padding-top:12px;
}
.lang-nav-footer-row{
display:flex;
justify-content:space-between;
gap:10px;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:11px;
letter-spacing:1.6px;
text-transform:uppercase;
color:rgba(0,0,0,0.6);
}

.lang-details{
border:2px solid rgba(0,0,0,0.75);
background:transparent;
padding:18px 18px;
position:relative;
overflow:hidden;
}
.lang-details::before{
content:"";
position:absolute;
inset:-2px;
border:2px solid transparent;
background:
linear-gradient(90deg, rgba(0,0,0,0.82) 0 30%, transparent 30% 100%) top left / 0% 2px no-repeat,
linear-gradient(180deg, rgba(0,0,0,0.82) 0 30%, transparent 30% 100%) top right / 2px 0% no-repeat,
linear-gradient(270deg, rgba(0,0,0,0.82) 0 30%, transparent 30% 100%) bottom right / 0% 2px no-repeat,
linear-gradient(0deg, rgba(0,0,0,0.82) 0 30%, transparent 30% 100%) bottom left / 2px 0% no-repeat;
opacity:0;
transition:opacity var(--ui-frame-fade) ease;
pointer-events:none;
}
.lang-details::after{
display:none;
}
.lang-details:hover::before{
opacity:1;
animation:contactFrame var(--ui-frame-draw) var(--ui-frame-ease) forwards;
}
.lang-card{
display:none;
flex-direction:column;
gap:10px;
animation:langIn .22s ease both;
}
.lang-card.active{ display:flex; }
@keyframes langIn{
0%{ opacity:0; transform:translateY(6px); }
100%{ opacity:1; transform:translateY(0); }
}
.lang-card-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding-bottom:10px;
border-bottom:1px solid rgba(0,0,0,0.18);
}
.lang-kicker{
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:12px;
letter-spacing:1.6px;
text-transform:uppercase;
color:rgba(0,0,0,0.6);
}
.lang-stamp{
border:2px solid rgba(0,0,0,0.6);
padding:8px 10px;
font-family:'Unbounded',sans-serif;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
transform:rotate(-6deg);
mix-blend-mode:multiply;
}
.lang-name{
font-family:'Playfair Display SC',serif;
font-size:34px;
letter-spacing:2px;
text-transform:uppercase;
line-height:1.05;
margin-top:6px;
}
.lang-level{
font-family:'Unbounded',sans-serif;
font-size:14px;
letter-spacing:2px;
text-transform:uppercase;
color:rgba(0,0,0,0.72);
}

.lang-meter{
margin-top:6px;
display:grid;
grid-template-columns:repeat(6, 1fr);
gap:10px;
}
.lang-meter .seg{
height:12px;
border:1px solid rgba(0,0,0,0.45);
background:rgba(255,255,255,0.55);
position:relative;
overflow:hidden;
}
.lang-meter .seg::after{
content:"";
position:absolute;
inset:0;
background:black;
transform:translateX(-110%);
}
.lang-card.active .lang-meter .seg::after{
animation:langFill 0.7s cubic-bezier(.2,1,.2,1) both;
}
@keyframes langFill{
0%{ transform:translateX(-110%); }
100%{ transform:translateX(0); }
}
/* Fill segments based on --lvl (0..6) */
.lang-meter{ --lvl:0; }
.lang-meter .seg:nth-child(1)::after{ opacity:clamp(0, (var(--lvl) - 0), 1); }
.lang-meter .seg:nth-child(2)::after{ opacity:clamp(0, (var(--lvl) - 1), 1); }
.lang-meter .seg:nth-child(3)::after{ opacity:clamp(0, (var(--lvl) - 2), 1); }
.lang-meter .seg:nth-child(4)::after{ opacity:clamp(0, (var(--lvl) - 3), 1); }
.lang-meter .seg:nth-child(5)::after{ opacity:clamp(0, (var(--lvl) - 4), 1); }
.lang-meter .seg:nth-child(6)::after{ opacity:clamp(0, (var(--lvl) - 5), 1); }
.lang-meter.blur .seg::after{ opacity:0.18; }

.lang-notes{
margin-top:12px;
border-top:1px solid rgba(0,0,0,0.18);
padding-top:12px;
display:flex;
flex-direction:column;
gap:10px;
}
.lang-note-row{
display:flex;
justify-content:space-between;
gap:14px;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
color:rgba(0,0,0,0.7);
}
.lang-note-row span:last-child{ color:rgba(0,0,0,0.9); text-align:right; }

.lang-card .blur{
filter:blur(6px);
opacity:0.62;
transition:filter .2s ease, opacity .2s ease;
}
.lang-card.secret:hover .blur,
.lang-card.secret.reveal .blur{
filter:blur(0);
opacity:1;
}
.lang-reveal-hint{
margin-top:10px;
border-top:1px solid rgba(0,0,0,0.16);
padding-top:10px;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:rgba(0,0,0,0.55);
display:flex;
justify-content:space-between;
}
.lang-reveal-hint::after{ content:"[ PRESS ]"; }

.lang-bottom{
display:flex;
justify-content:space-between;
gap:18px;
padding-top:12px;
border-top:2px solid rgba(0,0,0,0.75);
color:rgba(0,0,0,0.65);
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
}
.lang-bottom-right{ color:rgba(0,0,0,0.85); }

/* EDUCATION (XIX CENTURY CLASSICISM — DARK, INTERACTIVE) */
.education-section{
position:relative;
isolation:isolate;
color:white;
}
.education-section::before{
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
opacity:0.55;
background:
linear-gradient(to right, rgba(255,255,255,0.08), rgba(255,255,255,0.08)) 50% 0/1px 100% no-repeat,
linear-gradient(to bottom, rgba(255,255,255,0.06), rgba(255,255,255,0.06)) 0 50%/100% 1px no-repeat;
mask-image:radial-gradient(circle at 50% 50%, black 0%, black 52%, transparent 82%);
}
.education-section::after{
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
opacity:0.22;
background:
repeating-linear-gradient(45deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 14px),
repeating-linear-gradient(-45deg, rgba(255,255,255,0.010) 0 1px, transparent 1px 16px);
mask-image:radial-gradient(circle at 50% 50%, black 0%, black 55%, transparent 86%);
}

/* background layer */
.edu-bg{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
overflow:hidden;
}
.edu-gridlines{
position:absolute;
inset:-10%;
background:
linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size:72px 72px;
opacity:0.22;
mask-image:radial-gradient(circle at 50% 45%, black 0%, black 56%, transparent 86%);
}

/* shell */
.edu-shell{
width:min(1040px, calc(100vw - 120px));
z-index:1;
display:flex;
flex-direction:column;
gap:22px;
}

/* header row */
.edu-header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
border-bottom:2px solid rgba(255,255,255,0.85);
padding-bottom:14px;
}
.edu-title{
font-family:'Unbounded',sans-serif;
font-weight:400;
letter-spacing:3px;
text-transform:uppercase;
font-size:clamp(34px, 5vw, 64px);
line-height:0.95;
}
.edu-header-meta{
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:flex-end;
}
.edu-chip{
border:1px solid rgba(255,255,255,0.45);
padding:8px 10px;
color:rgba(255,255,255,0.85);
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
background:rgba(0,0,0,0.15);
backdrop-filter:blur(4px);
}

/* two-column layout with divider */
.edu-layout{
display:grid;
grid-template-columns:340px 26px 1fr;
gap:0;
align-items:stretch;
}
.edu-divider{
position:relative;
}
.edu-divider::before{
content:"";
position:absolute;
left:50%;
top:0;
bottom:0;
width:2px;
transform:translateX(-50%);
background:rgba(255,255,255,0.75);
}
.edu-divider::after{
content:"";
position:absolute;
left:50%;
top:6%;
bottom:6%;
width:2px;
transform:translateX(-50%);
background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.65) 0 10px, transparent 10px 16px);
opacity:0.40;
}

/* left column: institution + seal */
.edu-col-left{
border:2px solid rgba(255,255,255,0.80);
padding:22px 20px;
display:flex;
flex-direction:column;
gap:14px;
background:rgba(0,0,0,0.32);
backdrop-filter:blur(6px);
position:relative;
}
.edu-col-left::after{
content:"";
position:absolute;
inset:-2px;
border:2px solid transparent;
background:
linear-gradient(90deg, white 0 30%, transparent 30% 100%) top left / 0% 2px no-repeat,
linear-gradient(180deg, white 0 30%, transparent 30% 100%) top right / 2px 0% no-repeat,
linear-gradient(270deg, white 0 30%, transparent 30% 100%) bottom right / 0% 2px no-repeat,
linear-gradient(0deg, white 0 30%, transparent 30% 100%) bottom left / 2px 0% no-repeat;
opacity:0;
transition:opacity var(--ui-frame-fade) ease;
pointer-events:none;
}
.edu-col-left:hover::after{
opacity:1;
animation:contactFrame var(--ui-frame-draw) var(--ui-frame-ease) forwards;
}
.edu-panel-head{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:14px;
padding-bottom:12px;
border-bottom:1px solid rgba(255,255,255,0.30);
}
.edu-panel-kicker{
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:12px;
letter-spacing:1.2px;
text-transform:uppercase;
color:rgba(255,255,255,0.68);
}
.edu-panel-title{
color:white;
font-family:'Unbounded',sans-serif;
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
text-align:right;
}
.edu-inst-kicker{
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:12px;
letter-spacing:1.6px;
text-transform:uppercase;
color:rgba(255,255,255,0.65);
}
.edu-inst-name{
font-family:'Playfair Display SC',serif;
font-size:28px;
letter-spacing:2px;
text-transform:uppercase;
line-height:1.05;
margin-top:2px;
}
.edu-inst-location{
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
color:rgba(255,255,255,0.70);
}
.edu-inst-rule{
height:1px;
background:rgba(255,255,255,0.20);
margin:4px 0;
}

.edu-status-row{
display:flex;
align-items:center;
gap:10px;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
color:rgba(255,255,255,0.85);
}
.edu-pulse{
width:8px;
height:8px;
background:white;
box-shadow:0 0 0 0 rgba(255,255,255,0.45);
animation:eduPulse 1.6s ease-in-out infinite;
}
@keyframes eduPulse{
0%{ box-shadow:0 0 0 0 rgba(255,255,255,0.45); opacity:0.9; }
70%{ box-shadow:0 0 0 10px rgba(255,255,255,0); opacity:1; }
100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); opacity:0.9; }
}

/* right column: focus subjects — interactive */
.edu-col-right{
border:2px solid rgba(255,255,255,0.80);
padding:22px 20px;
display:flex;
flex-direction:column;
gap:14px;
background:rgba(0,0,0,0.32);
backdrop-filter:blur(6px);
position:relative;
overflow:hidden;
}
.edu-col-right::after{
content:"";
position:absolute;
inset:-2px;
border:2px solid transparent;
background:
linear-gradient(90deg, white 0 30%, transparent 30% 100%) top left / 0% 2px no-repeat,
linear-gradient(180deg, white 0 30%, transparent 30% 100%) top right / 2px 0% no-repeat,
linear-gradient(270deg, white 0 30%, transparent 30% 100%) bottom right / 0% 2px no-repeat,
linear-gradient(0deg, white 0 30%, transparent 30% 100%) bottom left / 2px 0% no-repeat;
opacity:0;
transition:opacity var(--ui-frame-fade) ease;
pointer-events:none;
}
.edu-col-right:hover::after{
opacity:1;
animation:contactFrame var(--ui-frame-draw) var(--ui-frame-ease) forwards;
}
.edu-focus-kicker{
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:12px;
letter-spacing:1.6px;
text-transform:uppercase;
color:rgba(255,255,255,0.65);
}
.edu-focus-list{
display:flex;
flex-direction:column;
gap:10px;
}
.edu-focus-btn{
appearance:none;
border:1px solid rgba(255,255,255,0.22);
background:rgba(0,0,0,0.18);
color:white;
padding:14px 14px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
transition:transform var(--ui-hover-time) ease, border-color var(--ui-hover-time) ease, background var(--ui-hover-time) ease, box-shadow var(--ui-hover-time) ease;
text-align:left;
position:relative;
}
.edu-focus-btn::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:0;
background:rgba(255,255,255,0.06);
transition:width var(--ui-frame-fade) var(--ui-frame-ease);
}
.edu-focus-btn.active::before{
width:100%;
}
.edu-focus-name{
font-family:'Playfair Display SC',serif;
letter-spacing:2px;
text-transform:uppercase;
font-size:15px;
position:relative;
z-index:1;
}
.edu-focus-level{
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:11px;
letter-spacing:1.6px;
text-transform:uppercase;
color:rgba(255,255,255,0.55);
position:relative;
z-index:1;
}
.edu-focus-btn:hover{
transform:translateY(var(--ui-hover-lift));
border-color:rgba(255,255,255,0.45);
background:rgba(0,0,0,0.26);
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
}
.edu-focus-btn.active{
border-color:rgba(255,255,255,0.85);
box-shadow:inset 3px 0 0 rgba(255,255,255,0.92);
}
.edu-focus-btn.active .edu-focus-level{
color:rgba(255,255,255,0.90);
}
.edu-focus-btn:focus-visible{
outline:2px solid white;
outline-offset:4px;
}

/* detail card (appears on click) */
.edu-detail{
border-top:1px solid rgba(255,255,255,0.20);
padding-top:14px;
display:flex;
flex-direction:column;
gap:10px;
min-height:90px;
}
.edu-detail-card{
display:none;
flex-direction:column;
gap:8px;
animation:eduCardIn .22s ease both;
}
.edu-detail-card.active{
display:flex;
}
@keyframes eduCardIn{
0%{ opacity:0; transform:translateY(4px); }
100%{ opacity:1; transform:translateY(0); }
}
.edu-detail-title{
font-family:'Playfair Display SC',serif;
font-size:22px;
letter-spacing:2px;
text-transform:uppercase;
line-height:1.1;
}
.edu-detail-desc{
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
color:rgba(255,255,255,0.75);
line-height:1.6;
}
.edu-detail-row{
display:flex;
justify-content:space-between;
gap:14px;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:11px;
letter-spacing:1px;
text-transform:uppercase;
}
.edu-detail-label{ color:rgba(255,255,255,0.60); }
.edu-detail-value{ color:rgba(255,255,255,0.92); text-align:right; }

/* bottom bar */
.edu-footer{
display:flex;
justify-content:space-between;
gap:18px;
padding-top:12px;
border-top:2px solid rgba(255,255,255,0.85);
color:rgba(255,255,255,0.70);
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
}
.edu-footer-right{ color:rgba(255,255,255,0.92); }

/* PLANS (SECRET DOSSIER) */
.plans-section{
position:relative;
isolation:isolate;
background:#f7f7f5;
color:#111;
}
.plans-section::before{
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
background:
radial-gradient(600px 340px at 20% 30%, rgba(0,0,0,0.03), transparent 60%),
radial-gradient(520px 320px at 82% 62%, rgba(0,0,0,0.028), transparent 62%);
opacity:0.8;
}
.plans-bg{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
overflow:hidden;
}
.plans-grid{
position:absolute;
inset:-10%;
background:
linear-gradient(to right, rgba(0,0,0,0.08) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0,0,0,0.08) 1px, transparent 1px);
background-size:48px 48px;
opacity:0.25;
}
.plans-vignette{
position:absolute;
inset:0;
background:
radial-gradient(1200px 700px at 50% 50%, rgba(0,0,0,0.03), rgba(0,0,0,0) 60%),
radial-gradient(900px 520px at 50% 45%, rgba(0,0,0,0.05), rgba(0,0,0,0) 62%),
linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0));
mix-blend-mode:multiply;
}
.plans-scanline{
position:absolute;
left:-10%;
right:-10%;
top:-20%;
height:22%;
background:linear-gradient(to bottom, transparent, rgba(0,0,0,0.06), transparent);
transform:skewY(-6deg);
opacity:0.55;
animation:plansScan 7.5s linear infinite;
}
@keyframes plansScan{
0%{ transform:translateY(-10%) skewY(-6deg); }
100%{ transform:translateY(620%) skewY(-6deg); }
}

.plans-shell{
width:min(980px, calc(100vw - 120px));
z-index:1;
display:flex;
flex-direction:column;
align-items:center;
gap:22px;
}
.plans-topmark{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
position:relative;
}
.plans-scribble{
font-family:'Redacted Script',cursive;
font-size:32px;
color:rgba(0,0,0,0.58);
transform:translateY(2px) rotate(-3deg);
}
.plans-topmark-label{
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:12px;
letter-spacing:3px;
text-transform:uppercase;
color:rgba(0,0,0,0.78);
}
.plans-rule{
width:min(780px, 88vw);
height:1px;
background:linear-gradient(to right, transparent, rgba(0,0,0,0.24), rgba(0,0,0,0.52), rgba(0,0,0,0.24), transparent);
}

.dossier{
width:min(820px, 92vw);
background:linear-gradient(180deg, rgba(255,255,255,0.90), rgba(248,246,240,0.92));
backdrop-filter: blur(10px);
border:1px solid rgba(0,0,0,0.28);
box-shadow:
0 28px 70px rgba(0,0,0,0.14),
0 3px 0 rgba(0,0,0,0.08),
0 0 0 1px rgba(255,255,255,0.55) inset;
position:relative;
padding:30px 30px 20px;
transform-style:preserve-3d;
}
.dossier{
clip-path:polygon(0% 0%, 100% 0%, 100% 96.5%, 98.5% 100%, 1.5% 100%, 0% 96.5%);
}
.dossier::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 6px);
opacity:0.28;
mix-blend-mode:multiply;
}
.dossier::before{
content:"";
position:absolute;
inset:12px;
border:1px solid rgba(0,0,0,0.12);
box-shadow:0 0 0 1px rgba(0,0,0,0.03) inset;
pointer-events:none;
}
.dossier-corner{
position:absolute;
width:20px;
height:20px;
border:1px solid rgba(0,0,0,0.34);
background:transparent;
}
.dossier-corner.top-left{ top:10px; left:10px; border-right:none; border-bottom:none; }
.dossier-corner.top-right{ top:10px; right:10px; border-left:none; border-bottom:none; }
.dossier-corner.bottom-left{ bottom:10px; left:10px; border-right:none; border-top:none; }
.dossier-corner.bottom-right{ bottom:10px; right:10px; border-left:none; border-top:none; }

.dossier-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:26px;
position:relative;
}
.dossier-meta{
display:flex;
gap:24px;
flex-wrap:wrap;
}
.meta-block{
min-width:240px;
display:flex;
flex-direction:column;
gap:8px;
}
.meta-block-right{ text-align:right; }
.meta-kicker{
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:10px;
letter-spacing:2.4px;
text-transform:uppercase;
color:rgba(0,0,0,0.55);
}
.meta-value{
font-family:'Unbounded',sans-serif;
font-size:13px;
letter-spacing:1.8px;
text-transform:uppercase;
color:rgba(0,0,0,0.85);
}

.stamp{
transform:rotate(-12deg);
border:2px solid rgba(0,0,0,0.65);
padding:12px 16px;
position:relative;
mix-blend-mode:multiply;
animation:stampSettle 1.1s cubic-bezier(.2,1,.2,1) both;
background:rgba(255,255,255,0.35);
}
.stamp::before{
content:"";
position:absolute;
inset:4px;
border:1px dashed rgba(0,0,0,0.35);
}
.stamp-text{
font-family:'Unbounded',sans-serif;
letter-spacing:2.6px;
text-transform:uppercase;
font-size:12px;
}
@keyframes stampSettle{
0%{ transform:rotate(-28deg) translateY(-6px); opacity:0; }
100%{ transform:rotate(-12deg) translateY(0); opacity:1; }
}
.stamp:hover{
animation:stampJitter 0.18s steps(2,end) 6;
}
@keyframes stampJitter{
0%{ transform:rotate(-12deg) translate(0,0); }
100%{ transform:rotate(-12deg) translate(1px,-1px); }
}

.dossier-divider{
height:1px;
background:linear-gradient(to right, transparent, rgba(0,0,0,0.20), rgba(0,0,0,0.40), rgba(0,0,0,0.20), transparent);
margin:20px 0;
}
.dossier-divider.thin{
opacity:0.7;
margin:18px 0;
}

.dossier-body{
display:flex;
flex-direction:column;
gap:12px;
}
.section-kicker{
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:10px;
letter-spacing:2.6px;
text-transform:uppercase;
color:rgba(0,0,0,0.55);
}
.objective-title{
font-family:'Playfair Display SC',serif;
font-weight:700;
letter-spacing:2.4px;
text-transform:uppercase;
font-size:36px;
line-height:1.02;
margin-top:6px;
}
.objective-subtitle{
font-family:'Playfair Display SC',serif;
letter-spacing:1.4px;
text-transform:uppercase;
font-size:15px;
color:rgba(0,0,0,0.64);
}

.progress{
display:flex;
flex-direction:column;
gap:12px;
}
.progress-labels{
display:flex;
justify-content:space-between;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:rgba(0,0,0,0.65);
}
.progress-mid{ opacity:0.85; }
.progress-track{
position:relative;
height:16px;
border:1px solid rgba(0,0,0,0.42);
background:
repeating-linear-gradient(to right, rgba(0,0,0,0.05) 0 14px, transparent 14px 28px),
rgba(255,255,255,0.68);
overflow:hidden;
}
.progress-fill{
height:100%;
width:var(--p);
background:linear-gradient(90deg, rgba(0,0,0,0.92), rgba(0,0,0,0.68));
transform-origin:left;
animation:progressLoad 1.2s cubic-bezier(.2,1,.2,1) both;
position:relative;
}
.progress-fill::after{
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
width:18px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35));
}
@keyframes progressLoad{
0%{ transform:scaleX(0); }
100%{ transform:scaleX(1); }
}
.progress-tick.now{
position:absolute;
top:-8px;
bottom:-8px;
left:50%;
width:1px;
background:rgba(0,0,0,0.46);
box-shadow:0 0 0 1px rgba(255,255,255,0.5);
}

.intel{
border:1px solid rgba(0,0,0,0.18);
padding:16px 16px 38px;
position:relative;
background:linear-gradient(180deg, rgba(255,255,255,0.60), rgba(255,255,255,0.42));
overflow:hidden;
}
.intel::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(115deg, transparent 0 42%, rgba(0,0,0,0.035) 46%, transparent 52%),
repeating-linear-gradient(0deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 7px);
opacity:0.55;
pointer-events:none;
}
.intel::after{
content:"";
position:absolute;
inset:-1px;
border:1px solid transparent;
background:
linear-gradient(90deg, rgba(0,0,0,0.68) 0 30%, transparent 30% 100%) top left / 0% 1px no-repeat,
linear-gradient(180deg, rgba(0,0,0,0.68) 0 30%, transparent 30% 100%) top right / 1px 0% no-repeat,
linear-gradient(270deg, rgba(0,0,0,0.68) 0 30%, transparent 30% 100%) bottom right / 0% 1px no-repeat,
linear-gradient(0deg, rgba(0,0,0,0.68) 0 30%, transparent 30% 100%) bottom left / 1px 0% no-repeat;
opacity:0;
transition:opacity var(--ui-frame-fade) ease;
pointer-events:none;
}
.intel:hover::after,
.intel.reveal::after{
opacity:1;
animation:contactFrame var(--ui-frame-draw) var(--ui-frame-ease) forwards;
}
.intel-row{
display:grid;
grid-template-columns:120px 1fr;
gap:14px;
padding:12px 0;
border-bottom:1px solid rgba(0,0,0,0.10);
position:relative;
z-index:1;
}
.intel-row:last-child{ border-bottom:none; }
.intel-label{
font-family:'Unbounded',sans-serif;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:rgba(0,0,0,0.62);
}
.intel-value{
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:13px;
letter-spacing:0.2px;
color:rgba(0,0,0,0.9);
}
.intel-value.blur{
filter:blur(6px);
opacity:0.65;
transition:filter var(--ui-hover-time) ease, opacity var(--ui-hover-time) ease;
}
.intel:hover .intel-value.blur,
.intel.reveal .intel-value.blur{
filter:blur(0);
opacity:1;
}
.intel-hint{
position:absolute;
left:14px;
right:14px;
bottom:10px;
display:flex;
justify-content:space-between;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:10px;
letter-spacing:2.4px;
text-transform:uppercase;
color:rgba(0,0,0,0.55);
z-index:1;
}
.intel-hint::after{
content:"[ PRESS ]";
}
.intel:hover .intel-hint{ color:rgba(0,0,0,0.75); }

.dossier-footer{
display:flex;
justify-content:space-between;
gap:14px;
margin-top:20px;
padding-top:14px;
border-top:1px solid rgba(0,0,0,0.18);
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:10px;
letter-spacing:2.4px;
text-transform:uppercase;
color:rgba(0,0,0,0.65);
}
.mono{ font-variant-numeric: tabular-nums; }

/* Dossier micro motion via CSS variables */
#dossier{
--rx:0deg;
--ry:0deg;
transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
transition:transform var(--ui-hover-time) ease, box-shadow var(--ui-hover-time) ease, filter var(--ui-hover-time) ease;
}
#dossier:hover{
transition:transform var(--ui-hover-time) ease, box-shadow var(--ui-hover-time) ease, filter var(--ui-hover-time) ease;
box-shadow:
0 38px 90px rgba(0,0,0,0.18),
0 3px 0 rgba(0,0,0,0.10),
0 0 0 1px rgba(255,255,255,0.65) inset;
filter:saturate(1.02);
}
.hero-logo{ width:500px; }
.SOON{ width:300px; }
.portfolio-title{
font-size:28px;
color:black;
letter-spacing:4px;
text-transform:uppercase;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.portfolio-toggle{
cursor:pointer;
user-select:none;
position:relative;
display:flex;
align-items:center;
justify-content:center;
gap:14px;
padding:10px 12px;
width:min(760px, 86vw);
margin:0 auto;
}
.portfolio-toggle::before,
.portfolio-toggle::after{
content:"";
position:absolute;
top:50%;
transform:translateY(-50%);
height:1px;
background:rgba(0,0,0,0.24);
pointer-events:none;
}
/* lines from hero frame to arrows */
.portfolio-toggle::before{
right:100%;
width:calc(50vw - var(--hero-frame-inset));
margin-right:14px; /* gap to the left arrow */
}
.portfolio-toggle::after{
left:100%;
width:calc(50vw - var(--hero-frame-inset));
margin-left:14px; /* gap to the right arrow */
}
.portfolio-toggle:focus-visible{
outline:2px solid rgba(0,0,0,0.75);
outline-offset:6px;
}

.portfolio-bracket{
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:13px;
letter-spacing:2px;
color:rgba(0,0,0,0.55);
transform:translateY(-1px);
opacity:0.9;
}

.portfolio-toggle{
border-radius:14px;
padding-left:22px;
padding-right:22px;
}

/* Idle shimmer (always, subtle) */
.portfolio-text{
position:relative;
display:inline-block;
/* Text shimmer (CSS port of your React version) */
--base-color: rgba(0,0,0,0.35);
--base-gradient-color: rgba(0,0,0,0.95);
--spread: clamp(18px, 2.2vw, 34px);

background-image:
linear-gradient(90deg,
transparent calc(50% - var(--spread)),
var(--base-gradient-color),
transparent calc(50% + var(--spread))
),
linear-gradient(var(--base-color), var(--base-color));
background-repeat:no-repeat, padding-box;
background-size:250% 100%, auto;
background-position:100% 50%, 0 0;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
animation:portfolioShimmer 1.35s linear infinite;
}
@keyframes portfolioShimmer{
0%{ background-position:100% 50%, 0 0; }
100%{ background-position:0% 50%, 0 0; }
}

/* Hover: stop shimmer, show engraved clarity */
.portfolio-toggle:hover .portfolio-text,
.portfolio-toggle:focus-visible .portfolio-text{
animation:none;
color:rgba(0,0,0,0.92);
background:none;
}
.portfolio-toggle:hover .portfolio-text{
animation:portfolioHoverInk 0.75s cubic-bezier(.2,1,.2,1) both;
}
@keyframes portfolioHoverInk{
0%{ letter-spacing:4px; text-shadow:0 0 0 rgba(0,0,0,0); }
55%{ letter-spacing:4.4px; text-shadow:0 10px 24px rgba(0,0,0,0.12); }
100%{ letter-spacing:4px; text-shadow:0 6px 18px rgba(0,0,0,0.10); }
}
.portfolio-toggle:hover::before,
.portfolio-toggle:hover::after{
background:rgba(0,0,0,0.32);
}
.portfolio-toggle:hover .portfolio-bracket{
color:rgba(0,0,0,0.72);
opacity:1;
}
.portfolio-toggle:hover{
background:rgba(255,255,255,0.40);
box-shadow:0 18px 40px rgba(0,0,0,0.10);
}

/* HERO -> ABOUT MODE */
.hero.about-mode{
align-items:center;
justify-content:flex-start;
padding-top:110px;
gap:14px;
}
.hero.about-mode .hero-logo{
opacity:0;
transform:translateY(-10px);
pointer-events:none;
}
.hero.about-mode .portfolio-title{ opacity:0.95; }
.hero.about-mode .portfolio-toggle{
background:rgba(255,255,255,0.18);
}

.hero.about-mode::after{
opacity:0.62;
}

.about-panel{
display:none;
width:min(1040px, calc(100vw - 120px));
max-height:none;
height:auto;
overflow:visible;
overscroll-behavior:auto;
scrollbar-gutter:auto;

border:1px solid rgba(0,0,0,0.32);
outline:1px solid rgba(0,0,0,0.10);
outline-offset:10px;
padding:26px 26px 18px;
background:rgba(255,255,255,0.66);
backdrop-filter: blur(10px);
box-shadow:
0 18px 42px rgba(0,0,0,0.10),
0 2px 0 rgba(0,0,0,0.06);
position:relative;
}
.hero.about-mode .about-panel{
display:block;
animation:aboutIn .22s ease both;
}
@keyframes aboutIn{
0%{ opacity:0; transform:translateY(6px); }
100%{ opacity:1; transform:translateY(0); }
}
.hero.about-mode .about-panel{
animation:aboutIn .22s ease both, pageSheen 1.1s ease both;
}
@keyframes pageSheen{
0%{ background-position:-140px 0; }
100%{ background-position:calc(100% + 140px) 0; }
}
.about-panel::before{
content:"";
position:absolute;
inset:12px;
border:1px solid rgba(0,0,0,0.14);
pointer-events:none;
}
.about-panel::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:0.55;
background:
linear-gradient(115deg, transparent 0 42%, rgba(0,0,0,0.035) 46%, transparent 52%),
repeating-linear-gradient(0deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 7px);
mix-blend-mode:multiply;
}
.hero.about-mode .about-panel::after{
animation:paperDrift 8.5s ease-in-out infinite;
}
@keyframes paperDrift{
0%,100%{ opacity:0.50; transform:translateY(0); }
50%{ opacity:0.62; transform:translateY(-6px); }
}

/* XIX-century ornament + margin rules (animated subtly) */
.about-panel{
background-image:
radial-gradient(10px 10px at 24px 24px, rgba(0,0,0,0.06), transparent 70%),
radial-gradient(10px 10px at calc(100% - 24px) 24px, rgba(0,0,0,0.06), transparent 70%),
radial-gradient(10px 10px at 24px calc(100% - 24px), rgba(0,0,0,0.06), transparent 70%),
radial-gradient(10px 10px at calc(100% - 24px) calc(100% - 24px), rgba(0,0,0,0.06), transparent 70%);
background-repeat:no-repeat;
background-size:34px 34px;
background-position:0 0, 100% 0, 0 100%, 100% 100%;
}
.about-panel .about-title{
position:relative;
}
.about-panel .about-title::before{
content:"";
position:absolute;
left:0;
right:0;
bottom:-1px;
height:1px;
background:linear-gradient(90deg, transparent, rgba(0,0,0,0.24), transparent);
transform:scaleX(0.72);
transform-origin:center;
opacity:0.8;
}
.about-panel .about-title::after{
content:"❦";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
font-size:14px;
opacity:0.22;
animation:ornamentFloat 6.2s ease-in-out infinite;
}
@keyframes ornamentFloat{
0%,100%{ transform:translate(-50%,-50%) translateY(0); opacity:0.18; }
50%{ transform:translate(-50%,-50%) translateY(-4px); opacity:0.26; }
}

.about-panel .about-foot{
position:relative;
}
.about-panel .about-foot::before{
content:"";
position:absolute;
left:0;
right:0;
top:-1px;
height:1px;
background:linear-gradient(90deg, transparent, rgba(0,0,0,0.22), transparent);
transform:scaleX(0.82);
transform-origin:center;
opacity:0.7;
}

/* gentle “ink shimmer” on margins while idle */
.hero.about-mode .about-panel{
animation:aboutIn .22s ease both, pageSheen 1.1s ease both, inkBreath 9s ease-in-out infinite;
}
@keyframes inkBreath{
0%,100%{ box-shadow:0 18px 42px rgba(0,0,0,0.10), 0 2px 0 rgba(0,0,0,0.06); }
50%{ box-shadow:0 22px 48px rgba(0,0,0,0.12), 0 2px 0 rgba(0,0,0,0.06); }
}
.about-title{
font-family:'Unbounded',sans-serif;
font-size:14px;
letter-spacing:3px;
text-transform:uppercase;
color:rgba(0,0,0,0.78);
padding-bottom:12px;
border-bottom:1px solid rgba(0,0,0,0.18);
}
.about-title{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
.about-title::after{
content:"MDCCCXIX";
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:11px;
letter-spacing:2px;
opacity:0.55;
}
.about-body{
margin-top:14px;
font-family:'Playfair Display SC',serif;
font-size:18px;
line-height:1.8;
letter-spacing:0.2px;
color:rgba(0,0,0,0.86);
}
.about-body{
hyphens:auto;
}
@media (min-width: 980px) {
  .about-body{
    column-count:2;
    column-gap:44px;
    column-rule:1px solid rgba(0,0,0,0.14);
  }
}
.about-body::first-letter{
float:left;
font-family:'Playfair Display SC',serif;
font-size:52px;
line-height:0.9;
padding-right:10px;
padding-top:6px;
letter-spacing:2px;
color:rgba(0,0,0,0.82);
}
.about-body::first-line{
letter-spacing:0.6px;
}
.about-foot{
margin-top:18px;
padding-top:12px;
border-top:1px solid rgba(0,0,0,0.18);
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:rgba(0,0,0,0.55);
display:flex;
justify-content:space-between;
}

.about-end{
appearance:none;
border:none;
background:transparent;
padding:0;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:transparent;
position:relative;
cursor:pointer;
--about-end-base: rgba(0,0,0,0.42);
--about-end-highlight: rgba(0,0,0,0.96);
--about-end-spread: 18px;
background-image:
linear-gradient(90deg,
transparent calc(50% - var(--about-end-spread)),
var(--about-end-highlight),
transparent calc(50% + var(--about-end-spread))
),
linear-gradient(var(--about-end-base), var(--about-end-base));
background-repeat:no-repeat, padding-box;
background-size:220% 100%, auto;
background-position:100% 50%, 0 0;
-webkit-background-clip:text;
background-clip:text;
animation:aboutEndShimmer 1.35s linear infinite;
transition:transform .16s ease, opacity .16s ease;
}
.about-end:hover{
transform:translateY(-1px);
}
.about-end:focus-visible{
outline:2px solid rgba(0,0,0,0.75);
outline-offset:6px;
}
.about-end:active{
transform:translateY(0);
}
@keyframes aboutEndShimmer{
0%{ background-position:100% 50%, 0 0; }
100%{ background-position:0% 50%, 0 0; }
}

.about-panel::-webkit-scrollbar{ width:10px; }
.about-panel::-webkit-scrollbar-thumb{
background:rgba(0,0,0,0.22);
border-radius:10px;
border:2px solid rgba(255,255,255,0.55);
}
.about-panel::-webkit-scrollbar-track{ background:transparent; }

.text-changing {
opacity: 0;
transform: translateY(10px);
}

/* CONTACT (BRUTAL / CLASSIC, FULLSCREEN) */
.contactme-section{
position:relative;
isolation:isolate;
}
.contactme-section::before{
content:none;
}

.contact-bg{
position:absolute;
inset:0;
z-index:0;
display:none;
}
.contact-marquee{
position:absolute;
left:-10%;
right:-10%;
top:18%;
font-family:'Unbounded',sans-serif;
font-size:clamp(34px, 7vw, 96px);
letter-spacing:4px;
text-transform:uppercase;
color:rgba(255,255,255,0.07);
white-space:nowrap;
transform:skewY(-6deg);
animation:contactMarquee 18s linear infinite;
}
@keyframes contactMarquee{
0%{ transform:translateX(0) skewY(-6deg); }
100%{ transform:translateX(-40%) skewY(-6deg); }
}
.contact-gridlines{
position:absolute;
inset:0;
background:
linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
background-size:64px 64px, 64px 64px;
opacity:0.35;
mask-image:radial-gradient(circle at 50% 45%, black 0%, black 55%, transparent 82%);
}
.contact-gridlines{
background:
repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 64px),
repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 64px),
repeating-linear-gradient(135deg, rgba(255,255,255,0.020) 0 1px, transparent 1px 18px);
}
.contact-marquee{
top:14%;
opacity:0.92;
}

.contact-shell{
width:min(1040px, calc(100vw - 120px));
z-index:1;
display:flex;
flex-direction:column;
gap:22px;
}

.contact-top{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
border-bottom:2px solid rgba(255,255,255,0.85);
padding-bottom:14px;
}
.contact-title{
color:white;
font-family:'Unbounded',sans-serif;
font-weight:400;
letter-spacing:3px;
text-transform:uppercase;
font-size:clamp(34px, 5vw, 64px);
line-height:0.95;
}
.contact-top-meta{
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:flex-end;
}
.contact-chip{
border:1px solid rgba(255,255,255,0.55);
padding:8px 10px;
color:rgba(255,255,255,0.85);
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
background:rgba(0,0,0,0.15);
backdrop-filter: blur(4px);
}

.contact-panels{
display:grid;
grid-template-columns:1fr 26px 1fr;
align-items:stretch;
gap:0;
}
.contact-panel-divider{
position:relative;
}
.contact-panel-divider::before{
content:"";
position:absolute;
left:50%;
top:0;
bottom:0;
width:2px;
transform:translateX(-50%);
background:rgba(255,255,255,0.85);
}
.contact-panel{
border:2px solid rgba(255,255,255,0.9);
padding:22px 22px;
display:flex;
flex-direction:column;
gap:16px;
background:transparent;
position:relative;
}
.contact-panel::after{
content:"";
position:absolute;
inset:-2px;
border:2px solid transparent;
background:
linear-gradient(90deg, white 0 30%, transparent 30% 100%) top left / 0% 2px no-repeat,
linear-gradient(180deg, white 0 30%, transparent 30% 100%) top right / 2px 0% no-repeat,
linear-gradient(270deg, white 0 30%, transparent 30% 100%) bottom right / 0% 2px no-repeat,
linear-gradient(0deg, white 0 30%, transparent 30% 100%) bottom left / 2px 0% no-repeat;
opacity:0;
transition:opacity var(--ui-frame-fade) ease;
pointer-events:none;
}
.contact-panel:hover::after{
opacity:1;
animation:contactFrame var(--ui-frame-draw) var(--ui-frame-ease) forwards;
}
@keyframes contactFrame{
0%{
background-size:0% 2px, 2px 0%, 0% 2px, 2px 0%;
}
100%{
background-size:100% 2px, 2px 100%, 100% 2px, 2px 100%;
}
}

.contact-panel-head{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:14px;
padding-bottom:12px;
border-bottom:1px solid rgba(255,255,255,0.35);
}
.contact-panel-kicker{
color:rgba(255,255,255,0.7);
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:12px;
letter-spacing:1.2px;
text-transform:uppercase;
}
@media (max-width: 768px) {
.contact-panel-kicker{ font-size:clamp(8px, 2vw, 10px); letter-spacing:0.8px; }
.contact-panel-title{ font-size:clamp(12px, 3.2vw, 16px); letter-spacing:1.2px; }
.contact-item-label{ font-size:clamp(9px, 2.2vw, 11px); letter-spacing:1px; }
}
.contact-panel-title{
color:white;
font-family:'Unbounded',sans-serif;
font-size:18px;
letter-spacing:2px;
text-transform:uppercase;
}

.contact-item{
display:grid;
grid-template-columns:120px 1fr;
gap:16px;
align-items:center;
padding:14px 0;
border-bottom:1px solid rgba(255,255,255,0.25);
}
.contact-item:last-child{ border-bottom:none; padding-bottom:0; }
.contact-item:first-of-type{ padding-top:0; }
.contact-item-label{
color:rgba(255,255,255,0.75);
font-family:'Unbounded',sans-serif;
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
}
.contact-item-main{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
min-width:0;
}
.contact-link{
color:white;
text-decoration:none;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:16px;
letter-spacing:0.2px;
border-bottom:1px solid rgba(255,255,255,0.65);
padding-bottom:2px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.contact-link:hover{
border-bottom-color:white;
}
.contact-link:focus-visible{
outline:2px solid white;
outline-offset:4px;
}

.contact-copy{
appearance:none;
border:1px solid rgba(255,255,255,0.75);
background:transparent;
color:white;
font-family:'Unbounded',sans-serif;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
padding:10px 12px;
min-width:92px;
position:relative;
overflow:hidden;
cursor:pointer;
transition:transform var(--ui-hover-time) ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.contact-copy::after{
content:"";
position:absolute;
top:-1px;
bottom:-1px;
left:-32%;
width:30%;
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.88), transparent);
opacity:0;
transform:skewX(-18deg);
pointer-events:none;
}
.contact-copy:hover{
background:rgba(255,255,255,0.08);
border-color:white;
transform:translateY(var(--ui-hover-lift));
box-shadow:inset 3px 0 0 rgba(255,255,255,0.92);
}
.contact-copy:active{
transform:translateY(0);
}
.contact-copy:focus-visible{
outline:2px solid white;
outline-offset:4px;
}

.contact-copy.copied{
background:rgba(255,255,255,0.98);
color:black;
border-color:white;
transform:none;
box-shadow:
  0 0 0 1px rgba(255,255,255,0.22),
  0 10px 26px rgba(255,255,255,0.16),
  inset 0 0 0 1px rgba(0,0,0,0.08);
}
.contact-copy.copied::after{
opacity:1;
animation:copySweep 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes copySweep{
0%{ left:-36%; opacity:0; }
18%{ opacity:0.95; }
100%{ left:112%; opacity:0; }
}

.contact-bottom{
display:flex;
justify-content:space-between;
gap:18px;
padding-top:12px;
border-top:2px solid rgba(255,255,255,0.85);
color:rgba(255,255,255,0.75);
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
}
.contact-bottom-right{ color:rgba(255,255,255,0.9); }


/* INVERT NAVBAR */

.navbar.inverted{ background:white; }
.navbar.inverted .nav-item{ color:black!important; }
.navbar.inverted .languages::after, .navbar.inverted .education::after, .navbar.inverted .group::before{ background:black; }
.navbar.inverted .languages:hover .main-lang::before{ color:black; }

.burger-menu { display: none; }
.mobile-overlay { display: none; }
.dot-menu{ display:none; }

/* SIDE NAV (DESKTOP ONLY, MINIMAL XIX CENTURY MARGINS) */
.sidenav{ display:none; }
@media (hover: hover) and (pointer: fine) {
  .sidenav{
    --sn-fg: rgba(0,0,0,0.85);
    --sn-muted: rgba(0,0,0,0.40);
    --sn-rail: rgba(0,0,0,0.20);

    display:flex;
    position:fixed;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    flex-direction:column;
    gap:12px;
    z-index:3600;
    pointer-events:auto;
    padding:10px 0;
  }
  .sidenav::before{
    content:"";
    position:absolute;
    right:6px;
    top:0;
    bottom:0;
    width:1px;
    background:var(--sn-rail);
    opacity:0.95;
  }
}
@media (max-width: 768px) {
  .sidenav{ display:none !important; }
}

.sidenav-item{
position:relative;
width:28px;
height:16px;
display:block;
text-decoration:none;
}
.sidenav-mark{
position:absolute;
right:3px;
top:50%;
transform:translateY(-50%);
width:6px;
height:6px;
border-radius:99px;
border:1px solid var(--sn-muted);
background:transparent;
transition:transform .16s ease, background .16s ease, border-color .16s ease;
}
.sidenav-mark::after{
content:"";
position:absolute;
inset:-6px;
border:1px dotted rgba(0,0,0,0.18);
opacity:0;
transition:opacity .16s ease;
}
.sidenav-label{
position:absolute;
right:22px;
top:50%;
transform:translateY(-50%) translateX(6px);
font-family:'Playfair Display SC',serif;
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--sn-fg);
opacity:0;
white-space:nowrap;
transition:opacity .16s ease, transform .16s ease;
}
.sidenav-item:hover .sidenav-label,
.sidenav-item.active .sidenav-label{
opacity:1;
transform:translateY(-50%) translateX(0);
}
.sidenav-item:hover .sidenav-mark{
background:var(--sn-fg);
border-color:var(--sn-fg);
transform:translateY(-50%) scale(1.15);
}
.sidenav-item:hover .sidenav-mark::after{ opacity:1; }
.sidenav-item.active .sidenav-mark{
background:var(--sn-fg);
border-color:var(--sn-fg);
transform:translateY(-50%) scale(1.25);
}
.sidenav-item:focus-visible{
outline:2px solid var(--sn-fg);
outline-offset:6px;
border-radius:10px;
}

/* Invert on dark sections */
.sidenav.inverted{
--sn-fg: rgba(255,255,255,0.92);
--sn-muted: rgba(255,255,255,0.45);
--sn-rail: rgba(255,255,255,0.22);
}
.sidenav.inverted .sidenav-mark::after{
border-color:rgba(255,255,255,0.16);
}

.logo-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 40px;
cursor: pointer;
}

.lang-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
width: 172px;
background: rgba(28, 28, 30, 0.85);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-radius: 14px;
border: 0.5px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
padding: 7px;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
}

.logo-wrapper:hover .lang-dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(5px);
}

.dropdown-item {
padding: 10px 12px;
color: white;
font-family: -apple-system, system-ui, sans-serif;
font-size: 13px;
border-radius: 8px;
transition: 0.2s;
text-align: center;
}

.dropdown-item:hover {
background: rgba(255, 255, 255, 0.1);
}

.dropdown-divider {
height: 1px;
margin: 6px 6px 4px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.18), transparent);
}

.dropdown-absolute {
display: flex;
align-items: center;
justify-content: center;
padding: 11px 12px;
margin: 2px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
color: white;
text-decoration: none;
font-family: 'Unbounded', sans-serif;
font-size: 11px;
letter-spacing: 1.8px;
text-transform: uppercase;
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dropdown-absolute:hover {
transform: translateY(-1px);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
border-color: rgba(255, 255, 255, 0.28);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 18px rgba(0, 0, 0, 0.18);
}

.navbar.inverted .lang-dropdown {
background: rgba(255, 255, 255, 0.7);
border: 0.5px solid rgba(0, 0, 0, 0.05);
}
.navbar.inverted .dropdown-item { color: black; }
.navbar.inverted .dropdown-divider {
background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.10), transparent);
}
.navbar.inverted .dropdown-absolute {
color: black;
border-color: rgba(0, 0, 0, 0.10);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.02));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.navbar.inverted .dropdown-absolute:hover {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.04));
border-color: rgba(0, 0, 0, 0.18);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 18px rgba(0, 0, 0, 0.10);
}

/* Global language state */
html[data-lang="jp"] body{
font-family:'Noto Sans JP','Unbounded',sans-serif;
}
html[data-lang="jp"] .nav-item,
html[data-lang="jp"] .mobile-nav-item,
html[data-lang="jp"] .contact-title,
html[data-lang="jp"] .lang-title,
html[data-lang="jp"] .edu-title,
html[data-lang="jp"] .contact-panel-title,
html[data-lang="jp"] .edu-panel-title,
html[data-lang="jp"] .about-title,
html[data-lang="jp"] .ptr-text,
html[data-lang="jp"] .lang-stamp,
html[data-lang="jp"] .lang-level,
html[data-lang="jp"] .contact-item-label,
html[data-lang="jp"] .contact-copy,
html[data-lang="jp"] .edu-seal-inner,
html[data-lang="jp"] .plans-topmark-label,
html[data-lang="jp"] .meta-value,
html[data-lang="jp"] .stamp-text,
html[data-lang="jp"] .intel-label{
font-family:'Noto Sans JP','Inter','Helvetica Neue',Arial,sans-serif;
letter-spacing:1px;
}
html[data-lang="jp"] .portfolio-text,
html[data-lang="jp"] #nav-languages,
html[data-lang="jp"] #nav-education,
html[data-lang="jp"] #nav-contact,
html[data-lang="jp"] #m-nav-contact,
html[data-lang="jp"] #m-nav-languages,
html[data-lang="jp"] #m-nav-education{
font-family:'Noto Sans JP','Inter','Helvetica Neue',Arial,sans-serif;
letter-spacing:1px;
}

/* ═══════════════════════════════════════════════════
   SCROLL-TRIGGERED ANIMATIONS
   ═══════════════════════════════════════════════════ */

/* --- Base hidden states --- */
[data-scroll]{
  opacity:0;
  will-change:transform, opacity;
  transition:
    opacity   0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter    0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-scroll].in-view{ opacity:1; }

/* --- Fade up --- */
[data-scroll="fade-up"]{ transform:translateY(48px); }
[data-scroll="fade-up"].in-view{ transform:translateY(0); }

/* --- Fade down --- */
[data-scroll="fade-down"]{ transform:translateY(-36px); }
[data-scroll="fade-down"].in-view{ transform:translateY(0); }

/* --- Fade left --- */
[data-scroll="fade-left"]{ transform:translateX(-60px); }
[data-scroll="fade-left"].in-view{ transform:translateX(0); }

/* --- Fade right --- */
[data-scroll="fade-right"]{ transform:translateX(60px); }
[data-scroll="fade-right"].in-view{ transform:translateX(0); }

/* --- Scale up (from smaller) --- */
[data-scroll="scale-up"]{ transform:scale(0.88); filter:blur(4px); }
[data-scroll="scale-up"].in-view{ transform:scale(1); filter:blur(0); }

/* --- Scale down (from larger) --- */
[data-scroll="scale-down"]{ transform:scale(1.08); filter:blur(3px); }
[data-scroll="scale-down"].in-view{ transform:scale(1); filter:blur(0); }

/* --- Blur in --- */
[data-scroll="blur-in"]{ filter:blur(12px); transform:translateY(10px); }
[data-scroll="blur-in"].in-view{ filter:blur(0); transform:translateY(0); }

/* --- Clip reveal (curtain from left) --- */
[data-scroll="clip-left"]{
  clip-path:inset(0 100% 0 0);
  opacity:1;
  transition:clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-scroll="clip-left"].in-view{ clip-path:inset(0 0% 0 0); }

/* --- Clip reveal (curtain from right) --- */
[data-scroll="clip-right"]{
  clip-path:inset(0 0 0 100%);
  opacity:1;
  transition:clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-scroll="clip-right"].in-view{ clip-path:inset(0 0 0 0%); }

/* --- Clip reveal (curtain from bottom) --- */
[data-scroll="clip-up"]{
  clip-path:inset(100% 0 0 0);
  opacity:1;
  transition:clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-scroll="clip-up"].in-view{ clip-path:inset(0 0 0 0); }

/* --- Draw line (horizontal rule) --- */
[data-scroll="draw-line"]{
  transform:scaleX(0);
  opacity:1;
  transform-origin:left center;
  transition:transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-scroll="draw-line"].in-view{ transform:scaleX(1); }

/* --- Typewriter tracking expand --- */
[data-scroll="tracking-in"]{
  letter-spacing:0.6em;
  opacity:0;
  filter:blur(6px);
}
[data-scroll="tracking-in"].in-view{
  letter-spacing:inherit;
  opacity:1;
  filter:blur(0);
}

/* --- Flip in (subtle 3D) --- */
[data-scroll="flip-up"]{
  transform:perspective(800px) rotateX(12deg) translateY(30px);
  opacity:0;
}
[data-scroll="flip-up"].in-view{
  transform:perspective(800px) rotateX(0) translateY(0);
  opacity:1;
}

/* --- Stagger children --- */
[data-scroll-stagger] > *{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity   0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-scroll-stagger].in-view > *{ opacity:1; transform:translateY(0); }
[data-scroll-stagger].in-view > *:nth-child(1){ transition-delay:0.05s; }
[data-scroll-stagger].in-view > *:nth-child(2){ transition-delay:0.12s; }
[data-scroll-stagger].in-view > *:nth-child(3){ transition-delay:0.19s; }
[data-scroll-stagger].in-view > *:nth-child(4){ transition-delay:0.26s; }
[data-scroll-stagger].in-view > *:nth-child(5){ transition-delay:0.33s; }
[data-scroll-stagger].in-view > *:nth-child(6){ transition-delay:0.40s; }
[data-scroll-stagger].in-view > *:nth-child(7){ transition-delay:0.47s; }
[data-scroll-stagger].in-view > *:nth-child(8){ transition-delay:0.54s; }

/* Delay modifiers */
[data-scroll-delay="100"]{ transition-delay:0.1s !important; }
[data-scroll-delay="200"]{ transition-delay:0.2s !important; }
[data-scroll-delay="300"]{ transition-delay:0.3s !important; }
[data-scroll-delay="400"]{ transition-delay:0.4s !important; }
[data-scroll-delay="500"]{ transition-delay:0.5s !important; }
[data-scroll-delay="600"]{ transition-delay:0.6s !important; }
[data-scroll-delay="700"]{ transition-delay:0.7s !important; }
[data-scroll-delay="800"]{ transition-delay:0.8s !important; }

/* Speed modifiers */
[data-scroll-speed="fast"]{
  transition-duration:0.5s !important;
}
[data-scroll-speed="slow"]{
  transition-duration:1.2s !important;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  [data-scroll],
  [data-scroll-stagger] > *{
    transition-duration:0.01s !important;
    transform:none !important;
    filter:none !important;
    clip-path:none !important;
    opacity:1 !important;
  }
}

@media (max-width: 768px) {
.nav-section.left,
.nav-section.right,
.lang-dropdown {
display: none !important;
pointer-events: none;
}

.burger-menu {
display: flex;
}

html,
body{
overflow-x:clip;
width:100%;
max-width:100%;
}

.navbar {
padding: 0 20px;
justify-content: space-between;
grid-template-columns:44px 1fr 44px;
overflow: visible;
}

.navbar::before{
content:"";
grid-column:1;
grid-row:1;
width:44px;
height:1px;
}

.nav-section.center {
grid-column:2;
grid-row:1;
justify-self:center;
margin: 0;
}

.logo-nav { height: 24px; }

.burger-menu {
display:flex;
flex-direction:column;
justify-content:space-between;
width:28px;
height:18px;
cursor:pointer;
z-index:4000;
position:static;
grid-column:3;
grid-row:1;
justify-self:end;
align-self:center;
}

.burger-menu span {
display:block;
height:2px;
width:100%;
background:white;
border-radius:2px;
transition:all 0.35s ease;
}

/* Pro burger: variable line lengths + end caps */
.burger-menu span{
position:relative;
transform-origin:center;
width:100%;
}
.burger-menu span::after{
content:"";
position:absolute;
right:0;
top:50%;
width:3px;
height:3px;
transform:translate(50%,-50%);
border-radius:99px;
background:white;
opacity:0.9;
transition:all 0.35s ease;
}
.burger-menu span:nth-child(1){ transform:scaleX(0.92); transform-origin:left; }
.burger-menu span:nth-child(2){ transform:scaleX(0.78); transform-origin:right; }
.burger-menu span:nth-child(3){ transform:scaleX(0.92); transform-origin:left; }
.burger-menu span:nth-child(2)::after{ opacity:0.65; }

.navbar.inverted .burger-menu span { background: black; }
.navbar.inverted .burger-menu span::after { background: black; }
.burger-menu.active span { background: white !important; }
.burger-menu.active span::after { background: white !important; opacity:1; }

.burger-menu.active span:nth-child(1) { transform: translateY(8px) rotate(45deg) scaleX(1); transform-origin:center; }
.burger-menu.active span:nth-child(2) { opacity: 0; transform:scaleX(0.2); }
.burger-menu.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg) scaleX(1); transform-origin:center; }
.burger-menu.active span:nth-child(1)::after,
.burger-menu.active span:nth-child(3)::after{ opacity:0.9; transform:translate(50%,-50%) scale(1); }


.mobile-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
min-height: 100vh;
min-height: 100svh;
background: black;
z-index: 2500;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
clip-path: inset(0 0 100% 0);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: clip-path .45s cubic-bezier(0.76, 0, 0.24, 1),
            opacity .35s ease,
            visibility 0s .45s;
}

.mobile-overlay.active {
clip-path: inset(0 0 0 0);
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: clip-path .45s cubic-bezier(0.76, 0, 0.24, 1),
            opacity .35s ease,
            visibility 0s 0s;
}

.mobile-links-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}

/* Staggered entry for overlay items */
.mobile-overlay .mobile-menu-logo-link,
.mobile-overlay .mobile-nav-item,
.mobile-overlay .mobile-nav-divider,
.mobile-overlay .mobile-lang-bar{
opacity: 0;
transform: translateY(18px);
transition: opacity .35s ease, transform .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-overlay.active .mobile-menu-logo-link,
.mobile-overlay.active .mobile-nav-item,
.mobile-overlay.active .mobile-nav-divider,
.mobile-overlay.active .mobile-lang-bar{
opacity: 1;
transform: translateY(0);
}
.mobile-overlay.active .mobile-menu-logo-link{ transition-delay: .08s; }
.mobile-overlay.active .mobile-nav-item:nth-child(2){ transition-delay: .12s; }
.mobile-overlay.active .mobile-nav-item:nth-child(3){ transition-delay: .16s; }
.mobile-overlay.active .mobile-nav-item:nth-child(4){ transition-delay: .20s; }
.mobile-overlay.active .mobile-nav-item:nth-child(5){ transition-delay: .24s; }
.mobile-overlay.active .mobile-nav-divider{ transition-delay: .28s; }
.mobile-overlay.active .mobile-nav-item:nth-child(7){ transition-delay: .32s; }
.mobile-overlay.active .mobile-lang-bar{ transition-delay: .36s; }

.mobile-menu-logo { height: 45px; display: block; }

/* Mobile language bar */
.mobile-lang-bar{
position:absolute;
left:0;
right:0;
bottom:22px;
display:flex;
justify-content:center;
gap:10px;
padding:10px 14px;
border-top:1px solid rgba(255,255,255,0.25);
background:linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.50));
}
.mobile-lang-pill{
appearance:none;
border-radius:999px;
border:1px solid rgba(255,255,255,0.55);
background:transparent;
color:white;
font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
padding:6px 10px;
cursor:pointer;
opacity:0.85;
transition:background .16s ease, border-color .16s ease, opacity .16s ease;
}
.mobile-lang-pill.active{
background:white;
color:black;
border-color:white;
opacity:1;
}
.mobile-lang-pill:focus-visible{
outline:2px solid white;
outline-offset:2px;
}

.mobile-nav-item {
color: white;
text-decoration: none;
font-family: 'Unbounded', sans-serif;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
padding: 5px 0;
}

.mobile-plans {
font-family: 'Redacted Script', cursive !important;
font-size: 32px !important;
transform: translateY(-2px);
}

.mobile-nav-item::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 1px;
background: white;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.4s ease;
}

.mobile-nav-item:active::after { transform: scaleX(1); }

.mobile-nav-divider{
width:28px;
height:1px;
background:rgba(255,255,255,0.25);
margin:2px 0;
}
.mobile-absolute{
font-family:var(--sans,'Unbounded',sans-serif) !important;
font-size:13px !important;
letter-spacing:3px !important;
opacity:0.55;
transition:opacity .2s ease;
}
.mobile-absolute:active{ opacity:1; }

.hero-logo { width: min(340px, 70vw); }
.portfolio-title { font-size: clamp(24px, 7vw, 34px); letter-spacing: 2.6px; }
.SOON { width: 240px; }

/* Compact sections on mobile */
:root{ --mobile-nav-height:80px; --mobile-nav-coef:0.82; }

.hero,
.contactme-section,
.languages-section,
.education-section,
.plans-section{
height:100svh;
min-height:100svh;
box-sizing:border-box;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:20px;
padding:0 14px;
}

.contactme-section,
.languages-section,
.education-section,
.plans-section{
height:calc(100svh - (var(--mobile-nav-height) * var(--mobile-nav-coef)));
min-height:calc(100svh - (var(--mobile-nav-height) * var(--mobile-nav-coef)));
overflow:hidden;
}

.hero,
.contactme-section,
.languages-section,
.education-section,
.plans-section{
scroll-margin-top:var(--mobile-nav-height);
}

.contact-shell,
.lang-shell,
.edu-shell,
.plans-shell{
width:100%;
max-width:none;
display:flex;
flex-direction:column;
align-items:stretch;
justify-content:center;
gap:clamp(6px, 1.2vh, 12px);
padding:clamp(8px, 1.8vh, 18px) clamp(8px, 2vw, 14px);
box-sizing:border-box;
min-height:0;
}

.lang-title,
.edu-title,
.contact-title{
font-size:clamp(16px, 4.2vw, 28px);
letter-spacing:clamp(1px, 0.3vw, 2px);
}

.plans-topmark{
font-size:clamp(14px, 3.8vw, 24px);
letter-spacing:clamp(1px, 0.3vw, 2px);
}

.hero.about-mode{
justify-content:center;
padding-top:calc(68px + env(safe-area-inset-top, 0px));
gap:14px;
}

.about-panel{
width:calc(100% - 24px);
max-width:calc(100% - 24px);
height:calc(100svh - 120px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
max-height:calc(100svh - 120px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
outline-offset:6px;
padding:18px 16px 14px;
overflow:auto;
}
.about-panel .about-title::after{
content:none;
}
.about-title{ font-size:17px; letter-spacing:2.8px; }
.about-body{ font-size:17px; line-height:1.68; }
.about-body::first-letter{ font-size:40px; }
.about-foot{ margin-top:14px; padding-top:12px; font-size:12px; }

.hero::before{ 
inset:16px;
outline-offset:6px;
}
.hero::after{ 
opacity:0.4;
}
.hero{ --hero-frame-inset:16px; }


.contact-top{ align-items:flex-start; flex-direction:column; gap:clamp(3px, 0.6vh, 6px); padding-bottom:clamp(6px, 1.2vh, 10px); }
.contact-panels{ grid-template-columns:1fr; gap:clamp(5px, 1vh, 8px); }
.contact-panel-divider{ display:none; }
.contact-item{ grid-template-columns:clamp(55px, 14vw, 75px) 1fr; gap:clamp(5px, 1.8vw, 8px); padding:clamp(5px, 1vh, 8px) 0; }
.contact-link{ font-size:clamp(10px, 2.5vw, 13px); }
.contact-copy{ padding:clamp(5px, 1.2vh, 8px) clamp(7px, 1.8vw, 10px); font-size:clamp(8px, 2vw, 10px); min-width:70px; }
.contact-bottom{ flex-direction:column; gap:clamp(2px, 0.5vh, 4px); font-size:clamp(8px, 2vw, 10px); padding-top:clamp(6px, 1.2vh, 10px); }
.contact-chip{ padding:2px 5px; font-size:clamp(7px, 1.8vw, 9px); letter-spacing:0.4px; }
.contact-panel{ padding:clamp(8px, 1.8vh, 12px) clamp(8px, 2vw, 12px); gap:clamp(6px, 1.4vh, 10px); }

/* Plans mobile */
.plans-rule{ width:calc(100% - clamp(60px, 20vw, 96px)); max-width:100%; }
.dossier{ padding:clamp(10px, 2.5vh, 14px) clamp(8px, 2vw, 12px) clamp(6px, 1.5vh, 10px); }
.meta-block{ min-width:unset; width:100%; font-size:clamp(10px, 2.5vw, 12px); }
.meta-block-right{ text-align:left; }
.objective-title{ font-size:clamp(14px, 3.8vw, 18px); }
.intel-row{ grid-template-columns:clamp(60px, 15vw, 80px) 1fr; gap:clamp(6px, 2vw, 10px); padding:clamp(5px, 1.2vh, 8px) 0; }
.intel{ padding:clamp(8px, 2vh, 12px) clamp(8px, 2vw, 12px) clamp(18px, 4vh, 28px); }
.plans-grid{ background-size:clamp(40px, 12vw, 60px) clamp(40px, 12vw, 60px); }

/* Education mobile */
.edu-header{ align-items:flex-start; flex-direction:column; gap:clamp(3px, 0.6vh, 6px); }
.edu-bg{ display:none; }
.education-section::before,
.education-section::after{ display:none; }
.edu-layout{ grid-template-columns:1fr; gap:clamp(5px, 1vh, 8px); }
.edu-divider{ display:none; }
.edu-inst-name{ font-size:clamp(14px, 3.8vw, 18px); }
.edu-col-left,
.edu-col-right{ padding:clamp(8px, 1.8vh, 12px) clamp(8px, 2vw, 12px); gap:clamp(5px, 1vh, 8px); }
.edu-seal{ width:clamp(50px, 13vw, 70px); height:clamp(50px, 13vw, 70px); }
.edu-chip{ padding:2px 5px; font-size:clamp(7px, 1.8vw, 9px); letter-spacing:0.4px; }
.edu-focus-btn{ padding:clamp(9px, 2.2vh, 13px) clamp(10px, 2.5vw, 14px); }
.edu-footer{ flex-direction:column; gap:clamp(4px, 1vh, 8px); font-size:clamp(9px, 2.2vw, 11px); }

/* Languages mobile */
.lang-top{ align-items:flex-start; flex-direction:column; gap:clamp(2px, 0.4vh, 4px); }
.lang-layout{ grid-template-columns:1fr; gap:clamp(4px, 0.8vh, 6px); }
.lang-divider{ display:none; }
.lang-chip{ padding:2px 5px; font-size:clamp(7px, 1.8vw, 9px); letter-spacing:0.4px; }
.lang-nav{ padding:clamp(6px, 1.8vh, 10px) clamp(6px, 1.8vw, 10px); }
.lang-btn{ padding:clamp(8px, 2.2vh, 12px) clamp(9px, 2.5vw, 13px); }
.lang-option{ padding:clamp(6px, 1.8vh, 10px) clamp(6px, 1.8vw, 10px); }
.lang-details{ padding:clamp(6px, 1.8vh, 10px) clamp(6px, 1.8vw, 10px); }
.lang-name{ font-size:clamp(12px, 3.5vw, 18px); }
.lang-meter{ gap:clamp(4px, 1.2vw, 6px); }
.lang-meter .seg{ height:clamp(6px, 1.8vh, 10px); }
.lang-bottom{ font-size:clamp(8px, 2vw, 10px); gap:clamp(2px, 0.6vh, 4px); }

/* Scale down section content on smaller phones */
.contact-shell,
.lang-shell,
.edu-shell,
.plans-shell{
transform:scale(0.75);
transform-origin:center center;
}

}

/* Even smaller phones (short viewport) */
@media (max-width: 768px) and (max-height: 700px) {
.contact-shell,
.lang-shell,
.edu-shell,
.plans-shell{
transform:scale(0.65);
transform-origin:center center;
}
}

@media (max-width: 768px) and (max-height: 600px) {
.contact-shell,
.lang-shell,
.edu-shell,
.plans-shell{
transform:scale(0.55);
transform-origin:center center;
}
}