/* fonts */
@font-face{font-family:'Manrope';font-style:normal;font-weight:500 600;font-display:swap;src:url(/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500 600;font-display:swap;src:url(/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/unbounded-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/unbounded-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* /fonts */
/* Diana Kankanyan — portfolio. One fixed stage (1440×900 desktop, 390×844 phone) scaled to the window. */
:root{
  --green:#1F8F5F; --green-ink:#156B46; /* small green text on light surfaces (AA contrast) */ --ink:#111111; --paper:#F7F7F2; --face:#F4F5F0; --white:#FFFFFF;
  --head:'Unbounded',system-ui,sans-serif; --body:'Manrope',system-ui,sans-serif;
  --s:1; --ox:0px; --oy:0px; /* stage scale + offset, set by site.js */
  --cell:60px; --gx:40px; --gy:30px; /* grid in stage px */
  --shadow:0 12px 22px rgba(0,26,13,.32);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:var(--body);color:var(--ink);background-color:var(--bg,var(--paper));
  -webkit-font-smoothing:antialiased;
  /* grid continues outside the stage, aligned with it */
  background-image:
    linear-gradient(to right,var(--grid) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid) 1px,transparent 1px);
  background-size:calc(var(--cell)*var(--s)) calc(var(--cell)*var(--s));
  background-position:calc(var(--ox) + var(--gx)*var(--s)) calc(var(--oy) + var(--gy)*var(--s));
  --grid:rgba(17,17,17,.06);
}
body.inner{--bg:var(--green);--grid:rgba(255,255,255,.08)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.stage{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0;
  transform:translate(var(--ox),var(--oy)) scale(var(--s))}
body.phone .stage{width:390px;height:844px}
body.phone{--cell:39px;--gx:0px;--gy:4px}
.abs{position:absolute}
.seo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- chrome on inner pages ---------- */
.home{position:absolute;left:62px;top:52px;width:76px;height:76px;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.home svg{width:100%;height:100%;overflow:visible}
.home:hover{transform:rotate(-40deg)}
.vtitle{position:absolute;left:43px;bottom:90px;transform-origin:0 100%;transform:rotate(-90deg) translate(0,100%);
  font:500 44px/1 var(--head);color:var(--white);white-space:nowrap;letter-spacing:0}
.vsub{position:absolute;left:141px;bottom:90px;transform-origin:0 100%;transform:rotate(-90deg) translate(0,100%);
  font:400 13px/1 var(--head);letter-spacing:.12em;color:var(--ink);white-space:nowrap}
body.phone .home{left:24px;top:40px;width:52px;height:52px}
body.phone .vtitle{left:24px;top:124px;bottom:auto;transform:none;font-size:36px}
body.phone .vsub{left:24px;top:172px;bottom:auto;transform:none;font-size:11px}

.counter{position:absolute;left:220px;top:810px;transform:translateY(-50%);font:500 15px/1 var(--head);color:var(--white);letter-spacing:.04em}
body.phone .counter{left:24px;top:790px;font-size:13px}
.rb{position:absolute;width:60px;height:60px;border-radius:50%;background:var(--ink);color:var(--white);
  display:grid;place-items:center;overflow:hidden;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1),color .3s}
.rb::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--white);transform:scale(0);transition:transform .38s cubic-bezier(.2,.7,.2,1);z-index:-1}
.rb svg{width:22px;height:22px}
@media (hover:hover){.rb:hover{transform:scale(1.1);color:var(--ink)}.rb:hover::before{transform:scale(1)}}
.rb:disabled{opacity:.35;pointer-events:none}
.prev{left:1210px;top:780px}.next{left:1300px;top:780px}
body.phone .rb{width:52px;height:52px}
body.phone .prev{left:256px;top:764px}body.phone .next{left:312px;top:764px}

.pill{position:absolute;display:inline-flex;white-space:nowrap;align-items:center;gap:10px;height:64px;padding:0 30px;border-radius:32px;background:var(--ink);color:var(--white);
  font:500 14px/1 var(--head);letter-spacing:.06em;box-shadow:var(--shadow);overflow:hidden;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1),color .3s}
.pill::before{content:"";position:absolute;left:50%;top:50%;width:140%;aspect-ratio:1;border-radius:50%;background:var(--white);transform:translate(-50%,-50%) scale(0);transition:transform .45s cubic-bezier(.2,.7,.2,1);z-index:-1}
@media (hover:hover){.pill:hover{transform:scale(1.05);color:var(--ink)}.pill:hover::before{transform:translate(-50%,-50%) scale(1)}}

/* page enter */
.row>*{opacity:0;transform:translateY(24px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.row>*:nth-child(2){animation-delay:.06s}.row>*:nth-child(3){animation-delay:.12s}.row>*:nth-child(4){animation-delay:.18s}.row>*:nth-child(5){animation-delay:.24s}
@keyframes rise{to{opacity:1;transform:none}}
.row.out>*{animation:fall .3s ease forwards}
@keyframes fall{to{opacity:0;transform:translateY(-16px)}}

/* ---------- labels under objects ---------- */
.lbl{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font:500 14px/1 var(--head);letter-spacing:.06em;color:var(--white);transition:transform .45s cubic-bezier(.2,.7,.2,1)}

/* ---------- clocks (UI/UX) ---------- */
.clock{position:absolute;width:208px;height:208px;margin:-104px 0 0 -104px;cursor:pointer;z-index:1}
.clock .case{position:absolute;inset:0;border-radius:50%;background:var(--ink);box-shadow:0 14px 22px rgba(0,20,10,.32);
  transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.clock .dial{position:absolute;inset:8px;border-radius:50%;background:var(--face);box-shadow:inset 0 2px 6px rgba(0,0,0,.12);overflow:hidden;transition:background .3s,box-shadow .3s}
.clock .dial svg{width:100%;height:100%;display:block}
.clock .pic{position:absolute;inset:-2px;border-radius:50%;background:var(--ink) center/cover no-repeat;opacity:0;transition:opacity .35s}
.clock .lbl{top:242px}
@media (hover:hover){
  .clock:hover{z-index:3}
  .clock:hover .case{transform:scale(1.5)}
  .clock:hover .pic{opacity:1}
  .clock:hover .dial{background:var(--ink);box-shadow:none}
  .clock:hover .lbl{transform:translate(-50%,58px)}
}
.clock:focus-visible .case{outline:3px solid var(--white);outline-offset:6px}
body.phone .clock{scale:.85}

/* ---------- switches (Web) ---------- */
.switch{position:absolute;width:150px;height:300px;margin:-150px 0 0 -75px;display:block}
.switch .plate{position:absolute;inset:0;border-radius:28px;background:var(--ink) center/cover no-repeat;box-shadow:0 10px 18px rgba(0,26,13,.3);overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.switch .shot{position:absolute;inset:-2px;background:center/cover no-repeat;opacity:0;transition:opacity .35s}
.switch .slot{position:absolute;left:47px;top:52px;width:56px;height:196px;border-radius:28px;background:#2A2A2A;box-shadow:inset 0 3px 6px rgba(0,0,0,.45);transition:background .35s}
.switch .knob{position:absolute;left:51px;top:202px;width:48px;height:48px;border-radius:50%;background:var(--paper);box-shadow:0 3px 5px rgba(0,0,0,.35);transition:top .45s cubic-bezier(.3,1.4,.4,1)}
.switch .on,.switch .off{position:absolute;left:0;right:0;text-align:center;font:500 10px/1 var(--head);letter-spacing:.12em;color:var(--paper);transition:opacity .3s}
.switch .on{top:22px;opacity:.55}.switch .off{bottom:22px}
.switch .lbl{top:340px}
@media (hover:hover){
  .switch:hover .plate{transform:scale(1.08)}
  .switch:hover .shot{opacity:1}
  .switch:hover .slot{background:var(--green)}
  .switch:hover .knob{top:56px}
  .switch:hover .on{opacity:1}.switch:hover .off{opacity:.35}
  .switch:hover .lbl{transform:translate(-50%,14px)}
}
.switch:focus-visible .knob{top:56px}

/* ---------- viewer (open project) ---------- */
.viewer{position:absolute;inset:0;z-index:20;background-color:var(--green);
  background-image:linear-gradient(to right,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);background-position:var(--gx) var(--gy);visibility:hidden;opacity:0;transition:opacity .35s,visibility 0s .35s}
.viewer.open{visibility:visible;opacity:1;transition:opacity .35s}
.viewer .bezel{position:absolute;left:290px;top:130px;width:1000px;height:634px;border-radius:28px;background:var(--ink);box-shadow:0 14px 24px rgba(0,26,13,.3);padding:12px}
.viewer .screen{width:100%;height:100%;border-radius:18px;overflow:hidden;background:var(--face)}
.viewer .screen img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s}
.viewer .cap{position:absolute;left:300px;top:810px;transform:translateY(-50%);font:500 15px/1.2 var(--body);color:rgba(255,255,255,.8)}
.viewer .close{left:1300px;top:60px}
body.phone .viewer .bezel{left:24px;top:330px;width:342px;height:226px;border-radius:18px;padding:8px}
body.phone .viewer .screen{border-radius:12px}
body.phone .viewer .cap{left:24px;top:590px}
body.phone .viewer .close{left:312px;top:40px}

/* ---------- about ---------- */
.photo{position:absolute;left:420px;top:450px;width:435px;height:435px;margin:-217.5px 0 0 -217.5px}
.photo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 20px rgba(0,26,13,.3))}
.photo .ph{position:absolute;left:50%;top:50%;width:270px;height:270px;margin:-135px 0 0 -135px;border-radius:50%;background:#DADDD6 center/cover no-repeat}
.aplate{position:absolute;left:660px;top:450px;width:700px;transform:translateY(-50%);background:var(--paper);border-radius:28px;padding:64px 60px;box-shadow:var(--shadow)}
.aplate h2{font:500 30px/1.1 var(--head)}
.aplate .tag{margin-top:10px;font:400 14px/1 var(--head);letter-spacing:.04em;color:var(--green-ink)}
.aplate .intro{margin-top:28px;font:500 18px/28px var(--body);color:rgba(17,17,17,.75);max-width:580px}
.facts{margin-top:36px;border-radius:16px;background:rgba(17,17,17,.06);padding:12px 24px}
.facts div{display:flex;align-items:baseline;padding:10px 0}
.facts dt{width:166px;flex:none;font:500 11px/1 var(--head);letter-spacing:.1em;color:var(--green-ink)}
.facts dd{font:500 16px/1.3 var(--body)}
.screw{position:absolute;width:27px;height:27px;opacity:.55}
.screw.a{left:15px;top:15px}.screw.b{right:15px;top:15px}.screw.c{left:15px;bottom:15px}.screw.d{right:15px;bottom:15px}
body.phone .photo{left:195px;top:318px;scale:.42}
body.phone .aplate{left:24px;top:438px;width:342px;transform:none;padding:24px;border-radius:22px}
body.phone .aplate h2,body.phone .aplate .tag{display:none}
body.phone .aplate .intro{margin-top:0;font-size:15px;line-height:22px}
body.phone .facts{margin-top:18px;background:none;padding:0}
body.phone .facts div{display:block;border-top:1px solid rgba(17,17,17,.12);padding:12px 0}
body.phone .facts dt{font-size:10px;margin-bottom:6px}
body.phone .facts dd{font-size:15px}
body.phone .screw{display:none}

/* ---------- resume ---------- */
.entry{position:absolute;left:0;top:0;width:100%;height:0}
.entry svg.gear{position:absolute;left:258px;width:144px;height:144px;margin-top:-72px;overflow:visible;filter:drop-shadow(0 8px 12px rgba(0,26,13,.3))}
.entry .shaft{position:absolute;left:337px;width:113px;height:3px;margin-top:-1.5px;background:var(--ink)}
.entry .card{position:absolute;left:450px;width:910px;height:112px;margin-top:-56px;background:var(--paper);border-radius:20px;box-shadow:0 8px 14px rgba(0,26,13,.3);padding:24px 36px}
.entry .yr{font:500 12px/1 var(--head);letter-spacing:.08em;color:var(--green-ink)}
.entry h2{margin-top:10px;font:500 22px/1 var(--head)}
.entry .d{position:absolute;left:420px;top:50%;transform:translateY(-50%);font:500 16px/1.4 var(--body);color:rgba(17,17,17,.65);max-width:450px}
.cv{right:80px;top:778px}
body.phone .entry svg.gear{left:16px;width:63px;height:63px;margin-top:-31.5px}
body.phone .entry .shaft{left:48px;width:42px}
body.phone .entry .card{left:90px;width:276px;height:auto;min-height:100px;transform:translateY(-50%);margin-top:0;border-radius:16px;padding:16px 18px}
body.phone .entry .yr{font-size:10px}
body.phone .entry h2{margin-top:6px;font-size:16px}
body.phone .entry .d{position:static;transform:none;margin-top:6px;font-size:13px;line-height:18px}
body.phone .cv{right:auto;left:50%;top:762px;transform:translateX(-50%);height:56px;font-size:13px}
@media (hover:hover){body.phone .cv:hover{transform:translateX(-50%) scale(1.05)}}

/* ---------- contact ---------- */
.cbtn{position:absolute;width:221px;height:221px;margin:-110.5px 0 0 -110.5px;display:block}
.cbtn .g{position:absolute;inset:0;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cbtn svg.gear{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 18px rgba(0,26,13,.3))}
.cbtn .face{position:absolute;left:50%;top:50%;width:169px;height:169px;margin:-84.5px 0 0 -84.5px;border-radius:50%;background:var(--face);box-shadow:inset 0 3px 6px rgba(0,0,0,.18)}
.cbtn .disc{position:absolute;left:50%;top:50%;width:136px;height:136px;margin:-68px 0 0 -68px;border-radius:50%;background:var(--white);box-shadow:0 5px 8px rgba(0,0,0,.22);
  display:grid;place-items:center;color:var(--green);transition:background .3s,color .3s}
.cbtn .disc svg{width:56px;height:56px}
.cbtn .disc b{font:700 30px/1 var(--head)}
.cbtn .lbl{top:252px}
@media (hover:hover){.cbtn:hover .g{transform:scale(1.1) rotate(20deg)}.cbtn:hover .disc{background:var(--green);color:var(--white)}.cbtn:hover .lbl{transform:translate(-50%,12px)}}
body.phone .cbtn{scale:.62}

/* ---------- 404 ---------- */
.big-clock{position:absolute;left:560px;top:430px;width:333px;height:333px;margin:-166.5px 0 0 -166.5px}
.big-clock .case{position:absolute;inset:0;border-radius:50%;background:var(--ink);box-shadow:0 16px 26px rgba(0,20,10,.32)}
.big-clock .dial{position:absolute;inset:13px;border-radius:50%;background:var(--face);box-shadow:inset 0 2px 6px rgba(0,0,0,.12)}
.big-clock .dial svg{width:100%;height:100%;display:block}
.nf{position:absolute;left:820px;top:330px}
.nf h2{font:500 44px/54px var(--head);color:var(--white)}
.nf p{margin-top:20px;font:500 18px/1.4 var(--body);color:rgba(255,255,255,.8)}
.nf .pill{position:relative;margin-top:36px}
body.phone .big-clock{left:195px;top:370px;scale:.6}
body.phone .nf{left:24px;top:560px}
body.phone .nf h2{font-size:24px;line-height:30px}
body.phone .nf p{margin-top:10px;font-size:15px}
body.phone .nf .pill{margin-top:28px;height:56px;font-size:13px}

/* ---------- page transitions: a black gear-edged panel sweeps across ---------- */
.sweep{position:fixed;top:0;left:0;height:100%;width:calc(100vw + 2 * var(--ew));z-index:50;pointer-events:none;
  --ew:22vh;transform:translateX(calc(-1 * var(--ew)));will-change:transform}
.sweep .solid{position:absolute;left:var(--ew);top:0;width:100vw;height:100%;background:var(--ink)}
.sweep svg.edge{position:absolute;top:0;height:100%;width:var(--ew);display:block}
.sweep svg.edge.l{left:0}.sweep svg.edge.r{right:0}
.sweep.out{transition:transform 1.05s cubic-bezier(.65,0,.25,1);transform:translateX(calc(-100vw - 2 * var(--ew)))}
.sweep.from-right{transition:none;transform:translateX(100vw)}
.sweep.cover{transition:transform .95s cubic-bezier(.6,0,.3,1);transform:translateX(calc(-1 * var(--ew)))}
.sweep .load{position:absolute;left:calc(var(--ew) + 50vw);top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;opacity:0;transition:opacity .3s}
.sweep.loading .load{opacity:1}
.sweep .load svg{width:100%;height:100%;overflow:visible;animation:spin 1.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
body:not(.ready) .stage{visibility:hidden}
.row>*{animation-play-state:paused}
.ready .row>*{animation-play-state:running}
.vsub,.home,.counter,.rb:not(.viewer .rb),.pill{opacity:0}
.ready .vsub,.ready .home,.ready .counter,.ready .rb:not(.viewer .rb),.ready .pill{animation:fadein .7s .25s ease forwards}
/* the page title is never transparent (it is the first real paint); it slides in instead */
.ready .vtitle{animation:slidein .8s .15s cubic-bezier(.2,.7,.2,1) both}
@keyframes slidein{from{translate:0 40px}to{translate:0 0}}
@keyframes fadein{to{opacity:1}}
.leaving .row>*{animation:fall .4s ease forwards!important}
.leaving .vtitle,.leaving .vsub,.leaving .home,.leaving .counter,.leaving .rb,.leaving .pill{animation:fadeout .3s ease forwards!important}
@keyframes fadeout{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.sweep{display:none}body:not(.ready) .stage{visibility:visible}}

/* skills: the same switch, always ON; hover flicks it off and back */
.switch.lit .slot{background:var(--green)}
.switch.lit .knob{top:56px}
.switch.lit .on{opacity:1}.switch.lit .off{opacity:.55}
@media (hover:hover){.switch.lit:hover .knob{animation:flick .6s cubic-bezier(.3,1.4,.4,1)}}
@keyframes flick{40%{top:150px}100%{top:56px}}