@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,650;12..96,800&family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{--ink:#271b42;--accent:#5934a3;--paper:#fffaf4;--line:#d3c1e3;--violet:#e9dcf6;--mono:"IBM Plex Mono",monospace;--display:"Bricolage Grotesque",system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;background:#eee4f9}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #673bc1;outline-offset:4px}
a{color:inherit}
.menu{height:52px;display:flex;align-items:center;gap:32px;padding:0 4vw;background:var(--paper);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:800;text-decoration:none;white-space:nowrap}
.brand-logo{display:block;width:44px;height:44px;border-radius:8px;object-fit:contain}
@media(max-width:490px){.brand-logo{width:36px;height:36px}}
.menu nav{display:flex;gap:20px}
.menu button{border:0;background:none;padding:4px 0;font-size:.88rem;font-weight:600}
.menu button:hover{text-decoration:underline;text-underline-offset:5px}
#clock{margin-left:auto;font:500 .8rem var(--mono);white-space:nowrap}
#desktop{min-height:calc(100svh - 52px);position:relative;padding:clamp(46px,10vh,120px) 6vw 126px;background:radial-gradient(ellipse at 16% 28%,#fff5e9aa,transparent 47%),radial-gradient(ellipse at 85% 72%,#d5b9f39c,transparent 48%),radial-gradient(#9c79c36b 1px,transparent 1px);background-size:auto,auto,19px 19px}
.workspace{max-width:1220px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(36px,6vw,105px)}
.signature,.shelf-head h2,.location{font:600 .8rem var(--mono);letter-spacing:.12em;text-transform:uppercase}
.signature span{color:var(--accent);margin-right:8px}
.intro h1{font:800 clamp(4.3rem,9.6vw,9.5rem)/.79 var(--display);letter-spacing:-.085em;margin:25px 0 27px}
.intro h1 em{font-style:normal;color:var(--accent)}
.intro h1 em span{color:#a2558b}
.lede{font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.55;max-width:335px;margin:0 0 26px}
.primary{display:inline-flex;align-items:center;gap:26px;color:white;background:var(--ink);border:1px solid var(--ink);padding:12px 17px;border-radius:7px;font-weight:700}
.primary:hover{background:var(--accent)}
.shelf{background:#fffaf4d9;border:1px solid #ae96c7;border-radius:16px;box-shadow:8px 9px 0 #7549a825;overflow:hidden}
.shelf-head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:#f9f0fc;border-bottom:1px solid var(--line)}
.shelf-head h2{margin:0}.shelf-head span{font-size:1.3rem}
.folders{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.folder{border:1px solid var(--line);background:var(--paper);border-radius:10px;text-align:left;overflow:hidden;padding:0;transition:transform .17s,border-color .17s;min-width:0}
.folder:hover{transform:translateY(-3px);border-color:var(--accent)}
.folder strong{display:block;padding:10px 12px;font-size:.95rem}
.tile{height:clamp(75px,12vh,112px);display:grid;place-items:center;overflow:hidden;background:var(--violet)}
.tile.peach{background:#f8ccb6}.tile.yellow{background:#f5dfa1}.tile.mint{background:#d5e9d4}
.folder-shape{width:65px;height:43px;border:2px solid var(--ink);border-radius:5px;position:relative;background:#fffaf4a8;box-shadow:4px 4px 0 #271b4235;transform:rotate(var(--tilt,-8deg));display:grid;place-items:center;font-size:1.3rem}
.folder-shape::before{content:"";position:absolute;top:-9px;left:2px;width:24px;height:8px;border:2px solid var(--ink);border-bottom:0;border-radius:4px 5px 0 0;background:var(--paper)}
.peach .folder-shape{--tilt:8deg}.yellow .folder-shape{--tilt:4deg}.mint .folder-shape{--tilt:-5deg}
.location{position:absolute;bottom:24px;left:6vw;color:#513c6b;margin:0}
.dock{position:fixed;bottom:17px;left:50%;transform:translateX(-50%);display:flex;gap:12px;padding:8px 12px;background:#fffaf4f0;border:1px solid var(--line);border-radius:15px;box-shadow:0 8px 25px #34214c29;z-index:2}
.dock button{min-width:52px;border:0;background:none;font-size:.72rem;font-weight:700;padding:2px 4px}
.dock-icon{display:grid;place-items:center;width:34px;height:32px;border:1px solid #271b4244;border-radius:7px;margin:0 auto 4px;font-size:1.05rem}
.yellow{background:#f5dfa1}.peach{background:#f8ccb6}.lavender{background:var(--violet)}
.dock button:hover .dock-icon{transform:translateY(-2px)}
dialog{width:min(710px,calc(100% - 28px));max-height:min(82svh,820px);padding:0;background:var(--paper);color:var(--ink);border:1px solid #9b7ab7;border-radius:15px;box-shadow:0 20px 90px #2414364d;overflow:hidden}
dialog[open]{display:flex;flex-direction:column}
dialog::backdrop{background:#35204e55}
.titlebar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--violet);border-bottom:1px solid var(--line);touch-action:none;cursor:grab}
.titlebar h2{margin:0;flex:1;font:600 .86rem var(--mono)}
.lights{display:flex;gap:5px}.lights i{width:8px;height:8px;border-radius:50%;background:#b187d2}.lights i+ i{background:#e5a78a}
#close{background:none;border:0;border-radius:5px;font-size:1.55rem;line-height:1;padding:3px 7px}
#close:hover{background:#d5bcee}
.window-body{overflow:auto;overscroll-behavior:contain;padding:clamp(16px,4vw,33px)}
.window-body h3{font:800 clamp(1.65rem,5vw,2.5rem)/1.05 var(--display);margin:0 0 12px}
.window-body p{line-height:1.55}.window-body .folders{padding:0}
.project{margin-top:15px;padding:14px;border:1px solid var(--line);border-radius:9px;background:#fff}
.project img{display:block;width:100%;max-height:530px;object-fit:contain;background:#f4edf8;border-radius:6px;margin-bottom:12px}
.project h4{font-size:1.15rem;margin:0 0 5px}.project p{white-space:pre-wrap;margin:8px 0}
.project small{font:500 .72rem var(--mono);color:#684a81}
form{display:grid;gap:13px}
label{display:grid;gap:5px;font-weight:700;font-size:.88rem}
input,select,textarea{width:100%;border:1px solid #a88dbc;border-radius:6px;padding:9px;background:white;font-weight:400}
textarea{min-height:78px;resize:vertical}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.actions button:not(.primary){border:1px solid var(--line);padding:8px 12px;background:#f7effc;border-radius:6px}
#notice{color:#60437a}
@media(max-width:790px){.workspace{grid-template-columns:1fr;gap:34px;max-width:530px}.intro h1{font-size:clamp(4.25rem,14vw,7rem)}.location{display:none}}
@media(max-width:490px){.menu{gap:13px}.menu nav{gap:10px;margin-left:auto}.menu button{font-size:.77rem}#clock{display:none}.brand{font-size:.83rem}.folders{padding:11px;gap:8px}.folder strong{font-size:.82rem}.titlebar{cursor:default}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.project-gallery{margin-top:20px}
.project-gallery details{border-top:1px solid var(--line)}
.project-gallery summary{padding:12px 0;cursor:pointer;font-weight:700}
.project-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-bottom:18px}
.gallery-art{display:block;border-radius:8px;text-decoration:none}
.gallery-art:hover span{text-decoration:underline;text-underline-offset:3px}
.gallery-art img{aspect-ratio:1;margin-bottom:6px}
.gallery-art span{display:block;font-size:.84rem;font-weight:600;line-height:1.3}
@media(max-width:420px){.project-gallery-grid{grid-template-columns:1fr}}
.project-gallery-portrait .gallery-art img{aspect-ratio:2 / 3}
.tile.rose{background:#f3d5e6}
.rose .folder-shape{--tilt:3deg}
.project-gallery-landscape .gallery-art img{aspect-ratio:17 / 11}
.project-pdf{display:inline-block;font-weight:700;text-underline-offset:3px}

.about-profile{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(18px,4vw,30px);align-items:center}
.about-portrait{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px}
.about-profile p{margin:0}
@media(max-width:520px){.about-profile{grid-template-columns:1fr}.about-portrait{max-width:240px}}

.contact-links{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.contact-links li{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:white}
.contact-links strong{min-width:72px}
.contact-links a{overflow-wrap:anywhere;text-underline-offset:3px}
.tile.sky{background:#d6e7f7}
.ux-portfolio-link{text-decoration:none}

.hero-ux{display:block;margin-top:.28em;font-size:.47em;line-height:1;letter-spacing:-.06em}
.hero-ux span{color:#a2558b}

.poll h2{font-size:1rem;font-weight:800;letter-spacing:.03em;margin:0 0 10px}
.poll-options{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:7px}
.poll-options button{
  min-width:84px;min-height:44px;border:1px solid var(--button-edge);
  border-radius:999px;padding:8px 20px;font-weight:800;
  background:
    radial-gradient(ellipse at 25% 21%, #ffffffc9 0%, #ffffff00 38%) center top / 84% 45% no-repeat,
    linear-gradient(180deg, #ffffff42 0%, #ffffff14 44%, #230c3a12 48%, #ffffff00 75%),
    linear-gradient(180deg,var(--button-highlight),var(--button-face));
  box-shadow:inset 0 2px 0 #ffffff40,0 6px 0 var(--button-base),0 8px 0 var(--button-edge);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.poll-options [data-vote=yes]{
  --button-highlight:#f4e8ff;--button-face:#d8b9f5;--button-base:#a278ce;
  --button-edge:#77539f;color:#3b2262;
}
.poll-options [data-vote=no]{
  --button-highlight:#7752ad;--button-face:#502e80;--button-base:#3a205f;
  --button-edge:#2d174e;color:white;
}
.poll-options button:not(:disabled):hover{filter:brightness(1.05)}
.poll-options button:not(:disabled):active{
  transform:translateY(5px);
  box-shadow:inset 0 2px 0 #ffffff40,0 1px 0 var(--button-base),0 3px 0 var(--button-edge);
}
.poll-options button[aria-pressed=true]{outline:2px solid #68429a;outline-offset:3px}
.poll-options button:focus-visible{outline:3px solid #281541;outline-offset:4px}
.poll-options button:disabled{cursor:default}
.poll p{margin:9px 0 0;font-size:.88rem}
#poll-totals{font-weight:700}
#poll-status:empty{display:none}