/* Base & tokens */
*,*:before,*:after{box-sizing:inherit;-webkit-user-select:inherit;user-select:inherit;-webkit-user-drag:inherit;-webkit-tap-highlight-color:rgba(0,0,0,0)}
*{margin:0;padding:0}
html{line-height:1;box-sizing:border-box}
main,canvas{display:block}
h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit}
a{color:inherit;text-decoration:none}
ol,ul{list-style:none}

:root{
  --c-bg:hsl(0 0% 90%);
  --c-text:hsl(0 0% 10%);
  --pad:max(20px,4vmin);
  --fs-text:12px;
}
@media(prefers-color-scheme:dark){
  :root{ --c-bg:hsl(0 0% 5%); --c-text:hsl(0 0% 95%); }
}

html,body{height:100%;overscroll-behavior:none}
body{
  background-color:var(--c-bg);
  color:var(--c-text);
  font:600 var(--fs-text)/1.35 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust:none;text-size-adjust:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body.is-monospaced{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Root */
#Page{position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden;background-color:var(--c-bg);color:#fff;white-space:nowrap;transition:background-color .9s cubic-bezier(.1,.4,.2,1)}

/* Background shader host */
#Background{position:fixed;z-index:1;left:var(--pad);right:var(--pad);top:var(--pad);bottom:var(--pad);pointer-events:none;overflow:hidden}

/* Masks + frame */
.mask{position:fixed;z-index:3;left:0;top:0;width:100%;height:100%;pointer-events:none}
.mask_top,.mask_bottom{position:absolute;left:0;width:100%;height:var(--pad);background-color:var(--c-bg);opacity:.9;transition:background-color .9s cubic-bezier(.1,.4,.2,1)}
.mask_top{top:0}.mask_bottom{bottom:0}

.frame {
  position: fixed;
  z-index: 50; /* bring clearly above shader and masks */
  left: var(--pad);
  right: var(--pad);
  top: var(--pad);
  bottom: var(--pad);
  pointer-events: none;

  /* isolate its own blend context so 'difference' behaves predictably */
  isolation: isolate;
  mix-blend-mode: difference;
}
.frame_line{position:absolute;background-color:#fff;opacity:.5}
.frame_line-left{left:0;top:0;width:1px;height:100%}
.frame_line-right{right:0;top:0;width:1px;height:100%}
.frame_line-top{left:0;top:0;width:100%;height:1px}
.frame_line-bottom{left:0;bottom:0;width:100%}

/* Toggles (rotated) */
.theme{position:fixed;z-index:10;left:calc(var(--pad) - .15em);bottom:var(--pad);transform-origin:left bottom;transform:rotate(-90deg);white-space:nowrap;display:flex;gap:15px;mix-blend-mode:difference}
.theme_colors{display:flex;gap:15px}
.theme_btn{display:flex;gap:3px;font-weight:400;text-transform:uppercase;cursor:pointer}
.theme_btn ._box::before{content:"□"}
.theme_btn.is-selected ._box::before{content:"■"}

/* Footer */
#Copyright{position:fixed;z-index:10;left:var(--pad);bottom:calc(var(--pad)*.5 - .5em);font-size:80%;opacity:.5;mix-blend-mode:difference}
@media not all and (min-width:640px){#Copyright{display:none}}

/* Content layer */
.content{position:fixed;z-index:2;left:0;top:0;width:100%;height:100%;overflow:hidden;mix-blend-mode:difference}
.content_inner{position:relative;min-height:100%}
.text-btn{transition:opacity .4s cubic-bezier(.1,.4,.2,1)}
@media(hover:hover){.text-btn:hover{opacity:.25}}

/* Header + nav */
.siteHeader{position:fixed;z-index:10;left:calc(var(--pad)*2);top:calc(var(--pad)*2);mix-blend-mode:difference}
.siteHeader_title{margin:-0.1em 0 0 -0.04em;font-weight:300;font-size:30px}
@media(min-width:1280px){.siteHeader_title{font-size:60px}}
.siteHeader_label{margin-top:5px;font-weight:400}
.siteHeader_nav{margin-top:50px}
.siteHeader_nav ol{display:flex;flex-direction:column;row-gap:15px}
.siteHeader_nav ol li{position:relative}
.siteHeader_nav ol li ._dot{position:absolute;left:0;top:2px;font-size:10px;opacity:0;pointer-events:none;transition:opacity .4s cubic-bezier(.1,.4,.2,1)}
.siteHeader_nav ol li ._text{position:relative;transition:opacity .4s cubic-bezier(.1,.4,.2,1)}
@media(hover:hover){.siteHeader_nav ol li ._text:hover{opacity:.25}}
.siteHeader_nav ol li.is-selected{pointer-events:none}
.siteHeader_nav ol li.is-selected ._dot{opacity:1}
.siteHeader_nav ol li.is-selected ._text{opacity:0}

/* Pages — animated transitions */
.page{
  display:none;width:100%;min-height:calc(var(--vh, 1vh)*100);
  opacity:0;transform:translateY(8px);
  transition:opacity .55s cubic-bezier(.1,.4,.2,1),transform .60s cubic-bezier(.1,.4,.2,1);
}
.page.is-active{display:block;opacity:1;transform:none}
.page.is-leaving{position:absolute;left:0;top:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){.page{transition:none;transform:none}}

/* Home */
.home{position:absolute;right:calc(var(--pad)*2);bottom:calc(var(--pad)*2);white-space:nowrap}
.home_aboutme{line-height:1.5}
.home_aboutme span{display:block}

/* Projects */
.project{padding:calc(var(--pad)*2 + 96px) calc(var(--pad)*2);text-align:right;white-space:nowrap}
@media(min-width:1280px){.project{padding:calc(var(--pad)*2 + 125px) calc(var(--pad)*2)}}
.project_list{display:flex;flex-direction:column;align-items:flex-end;row-gap:30px}
@media(min-width:800px){.project_list{row-gap:45px}}
.project_title{font-weight:300;font-size:6.5vw;text-align:right}
@media(min-width:800px){.project_title{font-size:60px}}
.project_info{margin-top:2vw}
@media(min-width:800px){.project_info{margin-top:15px}}
.project_info.mt-plus{margin-top:2.5vw}
@media(min-width:800px){.project_info.mt-plus{margin-top:20px}}

/* Info (layout anchors) */
.info{position:absolute;left:calc(var(--pad)*2);bottom:calc(var(--pad)*2);white-space:nowrap}
@media(min-width:1280px){.info{position:relative;left:auto;bottom:auto;height:calc(var(--vh, 1vh)*100)}}
@media(min-width:1280px){.info_item{position:absolute}}
.info_item+.info_item{margin-top:50px}
@media(min-width:1280px){.info_item+.info_item{margin-top:0}}
/* Hide the middle block on the Info page */
.info_item-1{display:none !important;}
@media(min-width:1280px){.info_item-2{right:calc(var(--pad)*2);top:calc(var(--pad)*2)}}
@media(min-width:1280px){.info_item-3{right:calc(var(--pad)*2);bottom:calc(var(--pad)*2)}}
.info_content{line-height:1.5}
.info_content .is-light{font-weight:400}

/* Contact */
.contact{position:absolute;right:calc(var(--pad)*2);bottom:calc(var(--pad)*2);white-space:nowrap}
.contact_text{display:block}
.contact_text+.contact_text{margin-top:1em}

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



/* ——— Info selector & details ——— */
.info_tabs{display:flex;gap:15px;justify-content:center;align-items:center;text-transform:uppercase}
.info_tab{display:flex;gap:6px;cursor:pointer;font-weight:400;background:none;border:0;padding:0}
.info_tab:focus-visible{outline:1px dashed currentColor;outline-offset:4px}
.info_tab ._dot{font-size:10px;opacity:0;transition:opacity .3s}
.info_tab ._text{transition:opacity .3s}
@media(hover:hover){.info_tab:hover ._text{opacity:.5}}
.info_tab.is-active ._dot{opacity:1}
.info_tab.is-active ._text{opacity:0.5};

.info_panel{line-height:1.5;animation:infoFade .35s both}
.info_list{margin-top:.75em;display:grid;row-gap:.5em}
@keyframes infoFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ——— FORCE INFO TABS TO BE VISIBLE ——— */
/* Render the top-right selector with normal blending and guaranteed contrast */
.info_item-2,
.info_item-2 .info_tabs,
.info_item-2 .info_tab { 
  color: var(--c-text) !important;          /* uses your light/dark token */
  z-index: 99;                               /* ensure above shader */
}


/* Give the selector a teeny contrast boost without a boxy background */


/* Keep bottom-right details visible when tabs are on (you already needed this) */
.has-info-tabs .info_item-3 { display: block !important; }

/* (Optional) if you want the center block hidden on Info */
.info_item-1 { display: none !important; }

/* 1) Stop blending the entire content layer */
.content { mix-blend-mode: difference !important; }

/* 2) Re-enable the difference blend on the sections that need it */
.siteHeader,
.home,
.project,
.contact,
.info { mix-blend-mode: difference; }

/* Info page: solid rendering + theme-aware text color */
.info .info_item-2,
.info .info_item-2 .info_tabs,
.info .info_item-2 .info_tab,
.info .info_item-3 {
  mix-blend-mode: normal !important;  /* don't difference-blend these */
  color: var(--c-text) !important;    /* dark in light theme, light in dark theme */
  opacity: 1 !important;
  z-index: 99;
}

/* keep labels fully visible */
.info_tab ._text{ opacity: 1; font-weight: 600; }
.info_tab.is-active ._text{ opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* optional micro-contrast for light theme */
.info .info_item-2 .info_tabs{ text-shadow: 0 0 1px rgba(0,0,0,.35); }

/* Break Info UI out of the parent's difference blend */
.info .info_item-2,
.info .info_item-3{
  isolation: isolate;                 /* new compositing group */
  mix-blend-mode: normal !important;  /* no 'difference' here */
  color: var(--c-text) !important;    /* black in light, white in dark */
  opacity: 1 !important;
  z-index: 99;
}

/* Keep all children normal too */
.info .info_item-2 .info_tabs,
.info .info_item-2 .info_tab,
.info .info_item-3 *{
  mix-blend-mode: normal !important;
}

/* Make labels fully readable (no fading) */
.info_tab ._text{ opacity: 1; font-weight: 600; }
.info_tab.is-active ._text{ opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* If you added a text-shadow earlier and it looks 'soft', remove it */
.info .info_item-2 .info_tabs{ text-shadow: none; }

/* Keep 'difference' everywhere... */
.content { mix-blend-mode: difference; }

/* ...but disable it when the Info page is active */
.content:has(.page[data-page="info"].is-active) {
  mix-blend-mode: normal !important;
}

/* ===== Resume cards & layout (Info page) ===== */

/* The panel that swaps in the bottom-right */
.info_panel{
  line-height: 1.55;
  animation: infoFade .35s both;
  /* readable width + proper wrapping */
  max-width: 40rem;
  white-space: normal;
  word-break: normal;
  text-wrap: pretty;
}

/* generic list spacing */
.info_list{ margin-top: .8em; display: grid; row-gap: .5em; }

/* Card container stacks (work, education) */
.r-stack{ display: grid; gap: 14px; margin-top: .8em; }

/* A single card */
.r-card{
  padding: 12px 14px;
  border: 1px solid color-mix(in oklab, var(--c-text) 20%, transparent);
  border-radius: 10px;
  background: color-mix(in oklab, var(--c-bg) 96%, transparent);
  backdrop-filter: saturate(120%);
}

/* Card header = title row and meta row */
.r-h{ display: grid; gap: 6px; }
.r-title{ font-weight: 600; }
.r-sub{ opacity: .8; }

/* meta (location / dates) in one soft row, wraps nicely */
.r-meta{ display: flex; flex-wrap: wrap; gap: 8px 12px; opacity: .75; }

/* bullets */
.r-bul{ margin-top: 8px; display: grid; gap: 6px; }
.r-bul li{ list-style: disc; margin-left: 1.2em; }

/* small badges (skills, tech) */
.badges{ margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.badge{
  font-weight: 600; font-size: 11px; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--c-text) 20%, transparent);
  background: color-mix(in oklab, var(--c-bg) 92%, transparent);
  white-space: nowrap;
}

/* Top-right tab row: keep it crisp and wrapping-safe */
.info_tabs{
  display:flex; gap:15px; justify-content:center; align-items:center;
  text-transform:uppercase;max-width:85%;
}
.info_tab ._text{ opacity:1; }                 /* keep labels visible */
.info_tab.is-active ._text{ text-decoration: underline; text-underline-offset: 3px; }

/* Ensure long lines don’t clip in bottom-right corner */
.info_item-3 .info_content{ white-space: normal; max-width: 42rem; }

/* (Optional) slightly larger legibility for the details area */
@media (min-width: 1024px){
  .info_panel{ font-size: 13px; }
}

/* Paragraph rhythm inside resume cards */
.r-card > p { margin-top: .55em; }
.r-card > p + .r-bul { margin-top: .6em; }
.r-card .badges { margin-top: .6em; }

/* Let long cards breathe on narrow screens */
@media (max-width: 480px){
  .r-card{ padding: 11px 12px; }
}

/* Keep the bottom-right details scrollable but hide scrollbars */
#infoDetails {
  max-width: 90%;
  max-height: clamp(260px, 52vh, 560px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  white-space: normal;
  padding-right: 4px;
  scrollbar-width: none; /* Firefox */
}

#infoDetails::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* Make sure the selector never gets overlapped visually */
.info_item-2{ z-index: 99; }
.info_item-2 .info_tabs{ flex-wrap: wrap; }

/* Resume cards: keep copy comfy inside the scroll area */
.r-card > p { margin-top: .55em; }
.r-card > p + .r-bul { margin-top: .6em; }
.r-card .badges { margin-top: .6em; }

/* --- Projects page alignment --- */

/* Constrain height and allow scroll just like info page */
.project_list {
  max-height: clamp(300px, 90vh, 600px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  white-space: normal;
  text-align: left;
  padding-right: 4px;
  scrollbar-width: none; /* Firefox */
}

/* Hide scrollbars (still scrollable) */
.project_list::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

/* Make titles scale sanely across screen sizes */
.project_title {
  font-size: clamp(1.1rem, 2.5vw, 1.8rem);
  line-height: 1.3;
  font-weight: 600;
  margin-bottom: 0.4em;
  text-transform: none;
}

/* Project description text smaller, same feel as info details */
.project_info {
  font-size: clamp(0.9rem, 1.6vw, 1rem);
  color: var(--c-text);
  opacity: 0.9;
  margin-top: 0.4em;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
}

@media (max-width: 600px){
  .info_item-2{
    max-width:250px;position:relative;left:100px;top:30px;
  }
}