/* nokhr.in - personal page of Ivan Nokhrin. Layout and components; the typeface is in fonts.css. */
/* Layout concept: the portrait sets the palette. Warm near-black, the amber of
   the lights behind him as the single accent, calm light sections in between. */
:root{
  color-scheme:light;
  --ink:#171310; --ink-2:#241e1a; --ink-3:#40372f;
  --paper:#f6f3ef; --white:#ffffff; --rule:#e4ddd4;
  --muted:#6b6058; --muted-d:#b9aea5;
  --accent:#f0701f; --accent-d:#d85c0e; --accent-l:#ffa35c;
  --sans:"Instrument Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(1.125rem,4vw,2.5rem);
  --shell:75rem;
  --r:.875rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:600;letter-spacing:-.028em;line-height:1.06;text-wrap:balance}
h2{font-size:clamp(1.9rem,4vw,2.9rem)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.shell{width:100%;max-width:calc(var(--shell) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.ic{width:.8em;height:.8em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--ink);padding:.6rem 1rem;z-index:20}
.skip:focus{left:var(--gutter);top:.5rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.btn{display:inline-flex;align-items:center;gap:.6rem;min-height:3.125rem;padding:.65rem 1.35rem;border-radius:.625rem;border:1.5px solid var(--ink);font:600 1rem/1.1 var(--sans);text-decoration:none;cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn-accent:hover{background:var(--accent-l);border-color:var(--accent-l)}
.btn-line{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.btn-line:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn small{font-size:.875rem;font-weight:500;opacity:.7}

/* ---------- header + hero ---------- */
.bar-wrap{position:relative;z-index:5;background:var(--ink);color:#fff}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.4rem}
.brand{font-weight:700;font-size:1.25rem;letter-spacing:-.02em;text-decoration:none}
.nav{display:flex;gap:clamp(1rem,2.2vw,2rem);font-weight:500;font-size:.975rem}
.nav a{text-decoration:none;padding:.35rem 0;border-bottom:1.5px solid transparent;color:rgba(255,255,255,.82);transition:border-color .18s ease,color .18s ease}
.nav a:hover{border-color:var(--accent);color:#fff}
.bar .btn{min-height:2.6rem;padding:.45rem 1rem;font-size:.9375rem}

/* The photo is the hero's background: fitted to the hero's height and anchored to the
   right, so the whole figure is always in frame. The copy sits on the left over a
   translucent shade, so the room behind it stays visible. */
.hero-wrap{position:relative;background:var(--ink);color:#fff;container-type:inline-size;overflow:hidden}
.hero{position:relative;display:flex;min-height:min(clamp(34rem,calc(100vh - 5.4rem),76rem),66vw);min-height:min(clamp(34rem,calc(100svh - 5.4rem),76rem),66cqw)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(23,19,16,.74) 0,rgba(23,19,16,.56) 26%,rgba(23,19,16,.2) 42%,rgba(23,19,16,0) 52%)}
.hero-copy{position:relative;z-index:2;align-self:center;flex:none;min-width:0;max-width:58%;padding-block:clamp(3rem,6vw,5rem);
  padding-left:max(var(--gutter),calc((100vw - var(--shell)) / 2));padding-right:clamp(1rem,2vw,2rem);
  padding-left:max(var(--gutter),calc((100cqw - var(--shell)) / 2))}
.hero h1{font-size:clamp(2.5rem,5.1vw,4.5rem);font-weight:700;letter-spacing:-.04em;line-height:1.02;overflow-wrap:break-word;text-shadow:0 2px 24px rgba(23,19,16,.45)}
.hero h1>span{display:block;white-space:nowrap}
.sub{margin-top:1.6rem;max-width:27rem;font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.4;color:#d9cfc6;text-shadow:0 1px 14px rgba(23,19,16,.6)}
.sub strong{color:#fff;font-weight:600}
.cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}
.hero .btn-line{background:rgba(23,19,16,.35)}
.hero .btn-line:hover{background:#fff}
.hero-figure{position:absolute;inset:0;z-index:0;margin:0;overflow:hidden}
.hero-figure img{position:absolute;top:0;right:0;height:100%;width:auto;max-width:none;transform:translateX(6%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}

/* ---------- sections ---------- */
.sec{padding-block:clamp(4rem,8vw,6.5rem)}
.sec-head{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.25rem 3.5rem;align-items:end}
.sec-head p{font-size:1.125rem;max-width:36rem;color:var(--muted)}

.rgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2.5rem clamp(2rem,6vw,5.5rem);align-items:start}
.record .intro{margin-top:1.3rem;color:var(--muted);font-size:1.125rem;max-width:30rem}
.nums{margin-top:2.25rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1.5rem}
.nums dt{font-weight:700;font-size:clamp(2.2rem,4vw,3.1rem);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.nums dd{margin-top:.4rem;color:var(--muted);font-size:.975rem;line-height:1.4;max-width:15rem}
.path{position:relative;display:grid;gap:2.1rem;padding-left:2rem;border-left:2px solid var(--rule)}
.path li{position:relative}
.path li::before{content:"";position:absolute;left:calc(-2rem - 6px);top:.45rem;width:10px;height:10px;border-radius:50%;background:var(--ink)}
.path li:first-child::before{background:var(--accent)}
.path .yrs{font-weight:600;font-size:.9375rem;color:var(--muted);font-variant-numeric:tabular-nums}
.path h3{margin-top:.2rem;font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.15}
.path p{margin-top:.5rem;color:var(--ink-3);max-width:34rem}

.ventures{background:var(--white)}
.vgrid{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.vcard{display:flex;flex-direction:column;gap:.75rem;background:var(--paper);border-radius:var(--r);padding:2rem 1.8rem 1.6rem;text-decoration:none;box-shadow:0 0 0 1px rgba(23,19,16,.06);transition:box-shadow .2s ease,transform .2s ease,background-color .2s ease}
.vcard:hover{transform:translateY(-3px);background:#fff;box-shadow:0 0 0 1px rgba(23,19,16,.08),0 1.5rem 2.75rem -1.25rem rgba(23,19,16,.32)}
.vlogo{height:2.3rem;display:flex;align-items:center;margin-bottom:.6rem}
.vlogo img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.vlogo.apilize{height:2.9rem;margin-block:-.3rem .3rem}
.vlogo.wiredhut{height:2.5rem;margin-block:-.1rem .5rem}
.vlogo img{mix-blend-mode:multiply}
.vlogo.winniio{height:1.75rem;margin-block:.3rem .85rem}
.vlogo.exquance{height:2.2rem}
.vlogo.ptr{height:3.3rem;margin-block:-.5rem .1rem}
.vcard.exited{position:relative}
.vcard.exited .vlogo{max-width:calc(100% - 6.75rem)}
.vcard.exited:hover{transform:none;background:var(--paper);box-shadow:0 0 0 1px rgba(23,19,16,.06)}
.vcard.exited .vlogo img{filter:grayscale(1);opacity:.5}
.vcard.exited .what,.vcard.exited p{color:#9a9089}
.stamp{position:absolute;top:1.35rem;right:1.3rem;transform:rotate(-8deg);padding:.3rem .7rem .26rem;border:2.5px solid var(--accent-d);border-radius:.35rem;outline:1px solid var(--accent-d);outline-offset:2px;color:var(--accent-d);font-weight:700;font-size:.875rem;letter-spacing:.16em;text-transform:uppercase;line-height:1;opacity:.9}
.vcard .what{font-weight:600;font-size:.9375rem;color:var(--accent-d)}
.vcard p{color:var(--ink-3);font-size:1.02rem}
.vcard .go{margin-top:auto;padding-top:.7rem;display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.975rem}
.vcard:hover .go{color:var(--accent-d)}

.duo{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.25rem}
.panel{background:var(--white);border-radius:var(--r);box-shadow:0 0 0 1px rgba(23,19,16,.07);padding:clamp(1.5rem,3vw,2.5rem);display:flex;flex-direction:column;gap:1rem;min-width:0}
.panel h3{font-size:clamp(1.65rem,2.8vw,2.2rem);font-weight:700}
.panel .kind{font-weight:600;font-size:.9375rem;color:var(--accent-d)}
.panel>p{color:var(--ink-3)}
.rows{border-top:1px solid var(--rule);font-weight:500;line-height:1.3}
.rows>*{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--rule);text-decoration:none}
.rows a:hover{color:var(--accent-d)}
.panel .btn{align-self:flex-start;margin-top:auto}
.logo-row{display:flex;align-items:center;gap:1rem}
.logo-row img{width:3.5rem;height:3.5rem;border-radius:.75rem}

.edu{background:var(--accent);color:var(--ink)}
.edu-grid{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:1.5rem 3.5rem;align-items:start}
.edu blockquote{font-weight:600;font-size:clamp(1.45rem,2.85vw,2.25rem);line-height:1.16;letter-spacing:-.028em;text-wrap:balance}
.edu blockquote>span{display:block}
.edu .w{color:#fff;font-weight:inherit}
.edu blockquote>span+span{margin-top:.42em}
.degrees{grid-column:1/-1;margin-top:clamp(1.5rem,3vw,2.5rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem 2.5rem;border-top:1.5px solid rgba(23,19,16,.35);padding-top:1.6rem}
.deg{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.9rem;align-items:start}
.deg .cap{grid-row:1/3;width:2.1rem;height:2.1rem;stroke-width:1.7;margin-top:.05rem;overflow:visible}
.deg h3,.deg p{grid-column:2}
.degrees h3{font-size:1.25rem;letter-spacing:-.015em;line-height:1.2;font-weight:700}
.degrees p{margin-top:.35rem;font-size:1.02rem;line-height:1.45;color:rgba(23,19,16,.82)}

.speaking{background:#000;color:#fff}
.speaking .sec-head p{color:var(--muted-d)}
.speaking .sec-head p+p{margin-top:.9rem}
.collage{margin-top:clamp(2rem,4vw,3rem)}
.collage img{width:100%;height:auto;border-radius:.5rem}
.talks{margin-top:1.25rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.talk{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:.5rem;color:#fff;text-decoration:none;background:var(--ink-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);isolation:isolate}
.talk .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.talk::before{content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:soft-light;background:radial-gradient(70% 90% at 80% 35%,rgba(240,112,31,.75),rgba(240,112,31,0) 72%);pointer-events:none}
.talk::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(23,19,16,.9) 0,rgba(23,19,16,.62) 36%,rgba(23,19,16,0) 64%),linear-gradient(0deg,rgba(23,19,16,.6) 0,rgba(23,19,16,0) 38%)}
.talk-meta{position:absolute;z-index:3;left:6%;top:9%;font-weight:600;font-size:.875rem;color:var(--accent-l)}
.talk-text{position:absolute;z-index:3;left:6%;bottom:9%;width:56%;display:grid;gap:.7rem}
.talk h3{font-size:clamp(1.25rem,2.5vw,2rem);font-weight:700;letter-spacing:-.03em;line-height:1.08}
.talk-go{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.9375rem;color:var(--muted-d);transition:color .2s ease}
.play{position:absolute;z-index:3;right:6%;bottom:10%;width:clamp(3rem,5.2vw,4.25rem);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 .75rem 2rem rgba(0,0,0,.5);transition:transform .25s ease,background-color .25s ease,box-shadow .25s ease}
.play svg{width:46%;height:46%;margin-left:6%}
.talk:hover .play,.talk:focus-visible .play{transform:scale(1.12);background:var(--accent);box-shadow:0 0 0 .6rem rgba(240,112,31,.25),0 .75rem 2rem rgba(0,0,0,.5)}
.talk:hover .shot{transform:scale(1.05)}
.talk:hover .talk-go{color:#fff}
.speak-cta{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;color:var(--muted-d)}

.contact{background:var(--ink);color:#fff}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem clamp(2rem,4vw,3.5rem);align-items:end}
.contact h2{font-size:clamp(2.2rem,4.8vw,3.9rem);font-weight:700;letter-spacing:-.04em}
.contact p{font-size:1.125rem;max-width:30rem;color:var(--muted-d)}
.mail{margin-top:1.4rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.mail .addr{font-weight:600;font-size:clamp(1.4rem,2.8vw,1.9rem);letter-spacing:-.02em;text-decoration:none;border-bottom:2px solid var(--accent);user-select:all}
.copy{min-height:2.4rem;padding:.3rem .9rem;border-radius:.5rem;border:1.5px solid rgba(255,255,255,.45);background:transparent;color:#fff;font:600 .9rem var(--sans);cursor:pointer}
.copy:hover{background:#fff;color:var(--ink)}
.contact .cta{margin-top:1.4rem}
.contact h2>span{display:block}
.reach .btn{padding-inline:1.05rem;gap:.55rem}
.ic.gl{width:1.15em;height:1.15em;stroke-width:1.8}

.foot{background:var(--ink);color:var(--muted-d);padding-block:1.5rem;font-size:.9375rem;border-top:1px solid rgba(255,255,255,.12)}
.foot .shell{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem}
.foot a{text-decoration:none;color:#fff}
.foot a:hover{color:var(--accent-l)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ---------- responsive ---------- */
@media (max-width:64rem){.nav{display:none}}
@media (max-width:56rem){
  .hero{display:block;min-height:0}
  .hero::before{display:none}
  .hero-copy{max-width:none;padding:2.75rem var(--gutter) 2.5rem}
  .hero h1>span{white-space:normal}
  .hero h1,.sub{text-shadow:none}
  .hero-figure{position:relative;inset:auto;aspect-ratio:4/5;max-height:82vh;max-height:82svh;width:100%}
  .hero-figure img{inset:0;right:auto;width:100%;height:100%;object-fit:cover;object-position:86% 50%;transform:none;-webkit-mask-image:none;mask-image:none}
  .hero-figure::after{content:"";position:absolute;inset:0 0 auto 0;height:16%;background:linear-gradient(180deg,var(--ink),rgba(23,19,16,0));pointer-events:none}
  .vgrid,.sec-head,.duo,.rgrid,.cgrid,.edu-grid,.degrees,.talks{grid-template-columns:minmax(0,1fr)}
  .sec-head{align-items:start}
  .cgrid{align-items:start}
}
@media (max-width:44rem){
  .bar .btn{display:none}
  .collage{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);overflow-x:auto;-webkit-overflow-scrolling:touch}
  .collage img{width:auto;max-width:none;height:21rem}
}