/* ===== Yoav OS: the workstation you scroll into ===== */
.os { background: var(--ink-2); color: var(--on-dark); position: relative; }
.os-track { position: relative; height: 240svh; }
.os-stage { position: sticky; top: 0; height: 100svh; overflow: clip; perspective: 1500px; background: radial-gradient(70% 60% at 50% 40%, #2A2C32 0%, #191A1E 55%, var(--ink-2) 100%); }
.os-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 45% at 12% 4%, rgba(255,196,128,.10), transparent 70%); pointer-events: none; }
.os-head { position: absolute; z-index: 3; left: 0; right: 0; top: clamp(1.6rem, 4.5vh, 3.4rem); padding-inline: var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; }
.os-hint { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(1rem, 2.5vh, 2rem); padding-inline: var(--gutter); text-align: center; color: var(--on-dark-mute); font-size: .92rem; }
.os-hint p { margin: 0; }
.os-head .eyebrow { color: var(--on-dark-mute); }
.os-head h2 { margin: 0; font-size: clamp(1.4rem, 2.5vw, 2.6rem); font-weight: 400; letter-spacing: -.022em; line-height: 1.12; max-width: 21ch; text-wrap: balance; }
.os-head p { margin: 0; color: var(--on-dark-mute); font-size: .95rem; max-width: 46ch; }
.scene { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; --bz: 5vmin; --chin: 13vmin; --deskTop: calc(100% + var(--chin) + 12.4vmin); }
.monitor { position: absolute; inset: 0; }

/* monitor body */
.casing { position: absolute; left: calc(-1 * var(--bz)); right: calc(-1 * var(--bz)); top: calc(-1 * var(--bz)); bottom: calc(-1 * var(--chin)); border-radius: 2.6vmin; background: linear-gradient(180deg, #E8E2D4 0%, var(--casing) 45%, var(--casing-2) 100%); box-shadow: inset 0 .4vmin 0 rgba(255,255,255,.7), inset 0 -1.4vmin 2.4vmin rgba(0,0,0,.16), 0 5vmin 9vmin rgba(0,0,0,.6); }
.casing::before { content: ""; position: absolute; left: calc(var(--bz) - 1.3vmin); right: calc(var(--bz) - 1.3vmin); top: calc(var(--bz) - 1.3vmin); bottom: calc(var(--chin) - 1.3vmin); border-radius: 1.8vmin; background: #2A2925; box-shadow: inset 0 0 0 .3vmin #8F8775, inset 0 .6vmin 1.6vmin rgba(0,0,0,.7); }
.chin-badge { position: absolute; left: 50%; bottom: calc(var(--chin) * .36); transform: translateX(-50%); font-family: var(--f-slab); font-weight: 700; font-size: 2.6vmin; letter-spacing: .3em; color: #8C8471; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.led { position: absolute; right: calc(var(--bz) + 4vmin); bottom: calc(var(--chin) * .42); width: 1.3vmin; height: 1.3vmin; border-radius: 50%; background: #4E5A40; box-shadow: inset 0 0 .2vmin rgba(0,0,0,.5); transition: background .4s, box-shadow .4s; }
.booted .led { background: #7CFF6B; box-shadow: 0 0 1.4vmin #7CFF6B; }
.knob { position: absolute; right: calc(var(--bz) + 7.5vmin); bottom: calc(var(--chin) * .34); width: 3.4vmin; height: 2.2vmin; border-radius: .5vmin; background: linear-gradient(#D5CDBB, #B4AC98); box-shadow: inset 0 .2vmin 0 rgba(255,255,255,.6), 0 .2vmin .4vmin rgba(0,0,0,.25); }
.note { position: absolute; left: calc(var(--bz) + 1vmin); bottom: 1.2vmin; width: 15vmin; padding: 1.4vmin 1.6vmin 2vmin; background: var(--note); color: var(--note-ink); font-family: var(--f-hand); font-size: 2.5vmin; line-height: 1.05; transform: rotate(-4deg); box-shadow: 0 1vmin 1.8vmin rgba(0,0,0,.3); }
.neck { position: absolute; left: 50%; top: calc(100% + var(--chin)); transform: translateX(-50%); width: 30%; height: 9vmin; background: linear-gradient(180deg, #B8B09D, #A39B88); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.base { position: absolute; left: 50%; top: calc(100% + var(--chin) + 9vmin); transform: translateX(-50%); width: 54%; height: 3.4vmin; border-radius: 1.2vmin 1.2vmin .6vmin .6vmin; background: linear-gradient(180deg, #E1DACB, #B5AD9A); box-shadow: 0 2vmin 3vmin rgba(0,0,0,.55); }


/* screen */
.screen { position: absolute; inset: 0; overflow: hidden; border-radius: var(--sr, 2.4vmin); background: #000; }
.bios { position: absolute; inset: 0; padding: clamp(18px, 5vmin, 64px) clamp(18px, 6vmin, 80px); font-family: var(--f-bios); color: var(--bios); font-size: clamp(15px, 2.7vmin, 32px); line-height: 1.22; transition: opacity .4s; }
.bios p { margin: 0; white-space: pre-wrap; }
.js .bios p:not(.on) { visibility: hidden; }
.bios .hi { color: var(--bios-hi); } .bios .ok { color: var(--bios-ok); }
.bios-logo { position: absolute; right: clamp(18px, 6vmin, 80px); top: clamp(18px, 5vmin, 64px); border: 2px solid var(--bios); padding: .1em .5em; color: var(--bios-hi); }
.cursor { display: inline-block; width: .55em; height: 1em; background: var(--bios); vertical-align: -.12em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.booted .bios { opacity: 0; visibility: hidden; }
.crt { position: absolute; inset: 0; pointer-events: none; z-index: 9800; background: repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.5) 100%); }
.glare { position: absolute; inset: 0; pointer-events: none; z-index: 9801; background: linear-gradient(128deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 28%, transparent 42%); }

/* desktop */
.desktop { position: absolute; inset: 0; background: var(--w-teal); font-family: var(--f-sys); font-size: clamp(12px, .55vw + 6.5px, 15px); color: var(--w-text); line-height: 1.3; opacity: 0; visibility: hidden; transition: opacity .6s .15s; --tbh: 2.7em; user-select: none; -webkit-user-select: none; }
.booted .desktop { opacity: 1; visibility: visible; }
.wallmark { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); text-align: center; color: rgba(255,255,255,.13); pointer-events: none; }
.wallmark b { display: block; font-family: var(--f-slab); font-size: 5.4em; letter-spacing: -.02em; line-height: 1; }
.wallmark span { font-size: 1.15em; letter-spacing: .5em; text-transform: uppercase; }
.icons { position: absolute; top: .9em; left: .7em; bottom: calc(var(--tbh) + .6em); display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 6.3em); gap: .5em .4em; }
.dicon { width: 6.8em; display: flex; flex-direction: column; align-items: center; gap: .3em; background: none; border: 0; color: var(--w-hi); padding: .2em; cursor: default; }
.dicon svg, .dicon img { width: 2.75em; height: 2.75em; }
.dicon img { border-radius: .35em; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
.dicon span { padding: .05em .25em; text-align: center; line-height: 1.2; }
.dicon.sel span { background: var(--w-navy); outline: 1px dotted var(--w-hi); }
.dicon.sel svg, .dicon.sel img { filter: brightness(.65) sepia(1) hue-rotate(190deg) saturate(3); }
.dicon:focus-visible { outline: none; } .dicon:focus-visible span { outline: 1px dotted var(--w-hi); }
.wins { position: absolute; left: 0; top: 0; right: 0; bottom: var(--tbh); pointer-events: none; }
.win { position: absolute; pointer-events: auto; background: var(--w-face); padding: 3px; box-shadow: var(--bv-out); display: flex; flex-direction: column; min-width: 13em; }
.win-title { flex: none; display: flex; align-items: center; gap: .35em; height: 1.75em; padding: 0 .2em 0 .3em; background: linear-gradient(90deg, var(--w-lo), #B4B4B4); color: var(--w-mid); font-weight: 700; touch-action: none; }
.win.active .win-title { background: linear-gradient(90deg, var(--w-navy), var(--w-navy-2)); color: var(--w-hi); }
.ti { display: inline-grid; place-items: center; flex: none; }
.ti svg, .ti img { width: 1.15em; height: 1.15em; } .ti img { border-radius: 2px; }
.tt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb { display: flex; gap: 2px; }
.tbtn { width: 1.35em; height: 1.2em; padding: 0; border: 0; background: var(--w-face); box-shadow: var(--bv-out); display: grid; place-items: center; cursor: default; color: var(--w-text); }
.tbtn:active { box-shadow: var(--bv-in); }
.tbtn svg { width: .62em; height: .58em; fill: currentColor; }
.tbtn[data-act="close"] { margin-left: 2px; }
.win-menu { flex: none; display: flex; padding: .1em 0; }
.win-menu span { padding: .12em .55em; }
.win-body { flex: 1; min-height: 0; overflow: auto; background: var(--w-paper); box-shadow: var(--bv-in); margin-top: 2px; position: relative; container-type: inline-size; user-select: text; -webkit-user-select: text; overscroll-behavior: contain; }
.win-body.face { background: var(--w-face); box-shadow: none; }
.win-status { flex: none; display: flex; gap: 2px; margin-top: 2px; }
.win-status span { flex: 1; box-shadow: var(--bv-field); padding: .1em .45em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-btn { min-width: 6.2em; padding: .35em 1em; background: var(--w-face); border: 0; box-shadow: var(--bv-out); color: var(--w-text); font-family: var(--f-sys); font-size: 1em; cursor: default; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.w-btn:active { box-shadow: var(--bv-in); }
.w-btn:focus-visible { outline: 1px dotted var(--w-text); outline-offset: -5px; }
.taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--tbh); background: var(--w-face); box-shadow: inset 0 1px var(--w-mid), inset 0 2px var(--w-hi); display: flex; align-items: center; gap: .3em; padding: .3em .25em .2em; z-index: 9000; }
.start { height: 100%; display: flex; align-items: center; gap: .35em; padding: 0 .5em; font-weight: 700; background: var(--w-face); border: 0; box-shadow: var(--bv-out); cursor: default; color: var(--w-text); font-family: var(--f-sys); font-size: 1em; }
.start.on { box-shadow: var(--bv-in); }
.start svg { width: 1.2em; height: 1.2em; }
.tasks { flex: 1; min-width: 0; display: flex; gap: .25em; height: 100%; overflow: hidden; }
.task { flex: 0 1 12em; min-width: 3em; height: 100%; display: flex; align-items: center; gap: .35em; padding: 0 .45em; background: var(--w-face); border: 0; box-shadow: var(--bv-out); color: var(--w-text); font-family: var(--f-sys); font-size: 1em; text-align: left; cursor: default; overflow: hidden; }
.task span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task.active { box-shadow: var(--bv-in); font-weight: 700; background-color: var(--w-mid); }
.tray { height: 100%; display: flex; align-items: center; gap: .55em; padding: 0 .7em; box-shadow: var(--bv-field); white-space: nowrap; }
.tray svg { width: 1.1em; height: 1.1em; }
.startmenu { position: absolute; left: .2em; bottom: calc(var(--tbh) - .2em); z-index: 9500; display: flex; background: var(--w-face); box-shadow: var(--bv-out); padding: 3px; min-width: 15.5em; }
.sm-band { width: 2.1em; background: linear-gradient(0deg, var(--w-navy), var(--w-navy-2)); color: var(--w-face); writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; padding: .5em 0; font-size: 1.25em; letter-spacing: .02em; }
.sm-band b { color: var(--w-hi); margin-bottom: .25em; }
.sm-items { flex: 1; display: flex; flex-direction: column; padding: .15em 0; }
.sm-item { display: flex; align-items: center; gap: .8em; padding: .5em 1em .5em .6em; border: 0; background: none; text-align: left; color: var(--w-text); font-family: var(--f-sys); font-size: 1em; text-decoration: none; cursor: default; }
.sm-item svg, .sm-item img { width: 1.9em; height: 1.9em; border-radius: 2px; }
.sm-item:hover, .sm-item:focus-visible { background: var(--w-navy); color: var(--w-hi); outline: none; }
.sm-sep { height: 0; border-top: 1px solid var(--w-lo); border-bottom: 1px solid var(--w-hi); margin: .2em .2em; }
.shutdown { position: absolute; inset: 0; z-index: 9900; background: #000; display: grid; place-items: center; text-align: center; padding: 2em; font-family: var(--f-bios); color: #FF9A1F; font-size: clamp(20px, 3.4vmin, 40px); line-height: 1.25; }

/* explorer, dialogs, notepad, minesweeper */
.xp { width: 100%; border-collapse: collapse; }
.xp th { position: sticky; top: 0; z-index: 1; background: var(--w-face); box-shadow: var(--bv-out); text-align: left; padding: .2em .55em; font-weight: 400; white-space: nowrap; }
.xp td { padding: .25em .55em; white-space: nowrap; vertical-align: middle; }
.xp td:first-child { display: flex; align-items: center; gap: .45em; }
.xp td.wrap { white-space: normal; min-width: 16em; }
.xp tr.sel td { background: var(--w-navy); color: var(--w-hi); }
.xp tr:focus-visible { outline: 1px dotted var(--w-text); outline-offset: -1px; }
.iconview { display: flex; flex-wrap: wrap; gap: .8em; padding: 1em; align-content: flex-start; }
.iconview .dicon { color: var(--w-text); }
.dlg { display: flex; gap: 1em; padding: 1.1em 1.1em .4em; }
.dlg-ic svg, .dlg-ic img { width: 2.75em; height: 2.75em; } .dlg-ic img { border-radius: .35em; }
.dlg p { margin: 0 0 .6em; line-height: 1.45; } .dlg .mute { color: #444; }
.dlg-img { margin: .9em 1.1em 0; box-shadow: var(--bv-field); background: var(--w-hi); padding: 2px; }
.dlg-img img, .dlg-img svg { width: 100%; height: auto; display: block; }
.dlg-btns { display: flex; justify-content: flex-end; gap: .5em; padding: .5em 1.1em 1em; }
.notepad { margin: 0; padding: .5em .7em; font-family: var(--f-mono); font-size: 1.02em; line-height: 1.35; color: var(--w-text); white-space: pre-wrap; min-height: 100%; }
.ms { display: inline-flex; flex-direction: column; gap: .55em; padding: .55em; background: var(--w-face); box-shadow: var(--bv-out); }
.ms-head { display: flex; justify-content: space-between; align-items: center; padding: .35em .4em; box-shadow: var(--bv-field); }
.ms-led { background: #000; color: #FF2A1F; font-family: var(--f-bios); font-size: 1.9em; line-height: 1; padding: 0 .12em; letter-spacing: .06em; }
.ms-face { width: 1.9em; height: 1.9em; padding: 0; border: 0; background: var(--w-face); box-shadow: var(--bv-out); display: grid; place-items: center; font-size: 1.15em; cursor: default; }
.ms-face:active { box-shadow: var(--bv-in); }
.ms-grid { display: grid; grid-template-columns: repeat(9, 1.75em); box-shadow: var(--bv-in); padding: 3px; }
.ms-cell { width: 1.75em; height: 1.75em; padding: 0; border: 0; background: var(--w-face); box-shadow: var(--bv-out); font-family: var(--f-sys); font-weight: 700; font-size: 1em; display: grid; place-items: center; cursor: default; color: var(--w-text); }
.ms-cell.open { box-shadow: inset -1px -1px 0 transparent, inset 1px 1px 0 var(--w-lo); }
.ms-cell.boom { background: #FF1A1A; }
.ms-cell[data-n="1"] { color: #0000FF; } .ms-cell[data-n="2"] { color: #008000; } .ms-cell[data-n="3"] { color: #FF0000; } .ms-cell[data-n="4"] { color: #000080; }
.ms-cell[data-n="5"] { color: #800000; } .ms-cell[data-n="6"] { color: #008080; } .ms-cell[data-n="7"] { color: #000000; } .ms-cell[data-n="8"] { color: #808080; }

/* showcase (the site inside the computer) */
.sc { min-height: 100%; display: grid; grid-template-columns: 15em minmax(0, 1fr); background: var(--sc-paper); color: var(--sc-ink); font-family: var(--f-slab-body); font-size: 1.12em; line-height: 1.5; }
.sc-side { position: sticky; top: 0; align-self: start; padding: 2.4em 1.6em 2em 2em; }
.sc-name { font-family: var(--f-slab); font-weight: 700; font-size: 2.2em; line-height: 1.02; margin: 0; letter-spacing: -.01em; }
.sc-ed { font-family: var(--f-slab); font-size: 1.25em; margin: .45em 0 2.3em; }
.sc-nav { display: flex; flex-direction: column; gap: 1.45em; }
.sc-nav a { font-family: var(--f-slab); font-weight: 700; color: var(--sc-link); text-decoration: underline; text-underline-offset: 3px; letter-spacing: .03em; font-size: .98em; cursor: pointer; display: inline-flex; align-items: center; gap: .45em; }
.sc-nav a.on { color: var(--sc-visited); }
.sc-nav a.on::before { content: ""; width: .5em; height: .5em; border-radius: 50%; border: 2px solid currentColor; }
.sc-main { padding: 2.2em 2.6em 4em 1em; min-width: 0; }
.sc-main section { padding-bottom: 3.2em; }
.sc .sc-h1 { font-family: var(--f-slab); font-weight: 700; font-size: 3.1em; line-height: 1; margin: 0 0 .35em; letter-spacing: -.015em; }
.sc h2 { font-family: var(--f-slab); font-weight: 700; font-size: 2.2em; line-height: 1.05; margin: 0 0 .5em; }
.sc h3 { font-family: var(--f-slab); font-weight: 700; font-size: 1.15em; margin: 1.6em 0 .4em; }
.sc p { margin: 0 0 .8em; text-align: justify; hyphens: auto; }
.sc .lead { font-size: 1.15em; text-align: left; }
.sc ul { margin: .3em 0 0; padding-left: 1.2em; }
.sc li { margin-bottom: .45em; text-align: justify; hyphens: auto; }
.sc a { color: var(--sc-link); }
.xp-item { margin-bottom: 2.6em; }
.xp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; flex-wrap: wrap; }
.xp-top h3 { font-size: 2.6em; margin: 0; line-height: 1; letter-spacing: -.01em; }
.xp-top a { font-family: var(--f-slab); font-weight: 700; font-size: .95em; }
.xp-sub { display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap; font-family: var(--f-slab); font-weight: 700; margin: .45em 0 .7em; }
.sc-ventures { display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: 1.6em; }
.sc-ventures figure { margin: 0; }
.sc-ventures img { width: 100%; height: auto; border: 1px solid #000; }
.sc-ventures figcaption { margin-top: .5em; } .sc-ventures b { font-family: var(--f-slab); }
.sc-tools dt { font-family: var(--f-slab); font-weight: 700; margin-top: .9em; } .sc-tools dd { margin: .1em 0 0; }
.sc-contact { display: flex; flex-wrap: wrap; gap: .6em; align-items: center; margin-top: .6em; }
.sc-contact code { font-family: var(--f-mono); background: var(--w-hi); border: 1px solid #000; padding: .3em .5em; user-select: all; }
@container (max-width: 600px) {
  .sc { grid-template-columns: 1fr; }
  .sc-side { position: static; padding: 1.6em 1.4em 0; } .sc-ed { margin-bottom: 1.2em; }
  .sc-nav { flex-direction: row; flex-wrap: wrap; gap: .7em 1.2em; }
  .sc-main { padding: 1.6em 1.4em 3em; } .sc h1 { font-size: 2.4em; } .xp-top h3 { font-size: 2em; }
}

/* static fallback (reduced motion / no GSAP) */
.os.static .os-track { height: auto; }
.os.static .os-stage { position: relative; height: auto; display: flex; flex-direction: column; perspective: none; }
.os.static .os-head { position: relative; top: auto; padding-block: clamp(4rem, 9vw, 7rem) 2.5rem; }
.os.static .scene { position: relative; height: 92svh; min-height: 560px; transform: none; }
.os.static .casing, .os.static .neck, .os.static .base, .os.static .room, .os.static .room-front, .os.static .crt, .os.static .glare { display: none; }
.os.static .screen { border-radius: 0; }
@media (max-width: 760px) { .os-head h2 { font-size: 1.35rem; } .os-hint { font-size: .78rem; } }