/* Janina Mengelkamp site. Steno.ai palette and type, Steeve's portfolio layout and motion.
   Colours are driven by the section you are in: site.js sweeps the next section's ground in from the side. */
:root{
  --cream:#ededed; --sand:#e2dee4; --khaki:#d9ccdb; --gold:#8e6e92; --gold-deep:#6b4f72; --olive:#a39878;
  --ink:#3a2a42; --ink-2:#4e3c57; --lime:#9fbf8f;
  --bg:#ededed; --fg:#2a2230; --muted:#5f5664; --rule:rgba(42,34,48,.16); --acc:#6b4f72; --card:#e2dee4;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --g-plum:linear-gradient(160deg,#4a3550 0%,#8e6e92 48%,#ddd0de 100%);
  --g-mauve:linear-gradient(170deg,#5a4560 0%,#9a7f9e 50%,#e4dae5 100%);
  --g-olive:linear-gradient(165deg,#5e5640 0%,#9a8e6e 50%,#d6d1c0 100%);
  --g-dusk:linear-gradient(150deg,#6f6476 0%,#9a8aa2 50%,#dcd6e0 100%);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.11,.82,.39,.92); --out:cubic-bezier(.16,1,.3,1);
  --gut-l:max(20px,env(safe-area-inset-left,0px)); --gut-r:max(20px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
@media (min-width:900px){:root{--gut-l:max(48px,env(safe-area-inset-left,0px));--gut-r:max(48px,env(safe-area-inset-right,0px))}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
section,header,footer{overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}

/* section grounds: plain colours without script, the sweeping layer with it */
[data-theme="cream"]{--s-bg:var(--cream)} [data-theme="sand"]{--s-bg:var(--sand)} [data-theme="ink"]{--s-bg:var(--ink)}
section,header.page{position:relative}
html:not(.fx) [data-theme]{background:var(--s-bg)}
html:not(.fx) [data-theme="ink"]{--fg:#efe8f0;--muted:#bbafc0;--rule:rgba(239,232,240,.16);--acc:#cdb8d2;--card:#4e3c57;color:var(--fg)}
html:not(.fx) [data-theme="sand"]{--card:#fffdf1}
#ground{position:fixed;inset:0;z-index:-2;background:var(--bg);pointer-events:none}
#sweep{position:fixed;top:0;bottom:0;width:170vw;z-index:-1;pointer-events:none;visibility:hidden;will-change:transform}
@property --fg{syntax:'<color>';inherits:true;initial-value:#2a2230}
@property --muted{syntax:'<color>';inherits:true;initial-value:#5f5664}
@property --rule{syntax:'<color>';inherits:true;initial-value:rgba(42,34,48,.16)}
@property --acc{syntax:'<color>';inherits:true;initial-value:#6b4f72}
@property --card{syntax:'<color>';inherits:true;initial-value:#e2dee4}
@property --bg{syntax:'<color>';inherits:true;initial-value:#ededed}
html.fx{transition:--fg .7s ease,--muted .7s ease,--rule .7s ease,--acc .7s ease,--card .7s ease,--bg .7s ease}
[data-theme="khaki"]{--s-bg:#d9ccdb} [data-theme="gold"]{--s-bg:#a39878}
html.fx body{background:transparent}
html.fx body,html.fx .fg{color:var(--fg);transition:color .25s linear}

/* type */
.lab{margin:0;font-family:var(--mono);font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lab .acc,.acc{color:var(--acc)}
.h1{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(40px,6.2vw,88px);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.h2{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.6vw,64px);line-height:1.05;letter-spacing:-.015em;text-wrap:balance}
.stmt{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(26px,3vw,40px);line-height:1.2;text-wrap:balance}
.ttl{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.2vw,30px);line-height:1.2;text-wrap:balance}
.lead{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.55;max-width:58ch}
.body{margin:0;max-width:62ch}
.dim{color:var(--muted)}
.serif{font-family:var(--serif)}

/* buttons and the letter roll */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:4px;font:500 15px/1 var(--sans);text-decoration:none;border:1px solid var(--fg);background:var(--fg);color:var(--bg);transition:background .3s,color .3s,border-color .3s;cursor:pointer}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--fg)}
.btn.ghost:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.roll{display:inline-flex}
.roll .c{display:inline-block;position:relative;overflow:hidden;height:1.12em;line-height:1.12}
.roll .c span{display:block;transition:transform .5s var(--ease);transition-delay:var(--d,0s)}
.roll .c .b{position:absolute;left:0;top:100%}
a:hover .roll .c span{transform:translateY(-100%)}
.arrow{display:inline-block;transition:transform .5s var(--ease)}
a:hover .arrow{transform:translateX(5px)}

/* nav */
.nav{position:fixed;left:0;right:0;top:0;z-index:40;padding-top:calc(env(safe-area-inset-top,0px) + 18px);padding-bottom:18px;padding-left:var(--gut-l);padding-right:var(--gut-r);display:flex;justify-content:space-between;align-items:center;gap:20px;color:#fff;mix-blend-mode:difference}
.nav .name{font-family:var(--serif);font-size:22px;text-decoration:none;letter-spacing:-.01em}
.nav .links{display:flex;gap:28px;font-size:15px}
.nav .links a{text-decoration:none}
@media (max-width:700px){.nav .links a:not(.keep){display:none}}

/* intro: name ring, count, gold curtain */
#pre{position:fixed;inset:0;z-index:100;background:var(--cream);display:flex;align-items:center;justify-content:center;transition:opacity .5s var(--ease),visibility .5s}
#pre.done{opacity:0;visibility:hidden}
.ring{position:relative;width:240px;height:240px;animation:spin 16s linear infinite}
.ring span{position:absolute;left:50%;top:50%;font-family:var(--serif);font-size:19px;color:var(--ink);transform-origin:0 0}
.pct{position:absolute;font:500 13px/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
@keyframes spin{to{transform:rotate(1turn)}}
#cur{position:fixed;inset:0;z-index:99;background:var(--g-plum);display:flex;align-items:center;justify-content:center;transform:translateY(100%);transition:transform 1.2s var(--ease)}
#cur.cur-on{transform:none}#cur.cur-off{transform:translateY(-100%)}
#cur span{font:500 14px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#f5f0f6}
html:not(.js) #pre,html:not(.js) #cur{display:none}

/* reveals: rise, side wipe for headlines, clip from the side for images */
.rv{transition:opacity 1.1s var(--out),transform 1.1s var(--out),filter 1.1s var(--out);transition-delay:var(--d,0s)}
.js .rv:not(.in){opacity:0;transform:translateY(70px);filter:blur(6px)}
.js .rv.l:not(.in){transform:translateX(-90px)}
.js .rv.r:not(.in){transform:translateX(90px)}
.js .rv.up:not(.in){transform:translateY(70px) scale(.94)}
.wipe{transition:clip-path 1.2s var(--out),opacity .6s ease;transition-delay:var(--d,0s);clip-path:inset(0 0 0 0)}
.js .wipe:not(.in){clip-path:inset(0 100% 0 0);opacity:.2}
.mask{overflow:hidden;display:block}
.mask>span{display:block;transition:transform 1.1s var(--out),opacity .4s ease;transition-delay:var(--d,0s)}
.js .mask:not(.in)>span{transform:translateY(100%);opacity:0}
.reveal-img{overflow:hidden;transition:clip-path 1.4s var(--out);clip-path:inset(0 0 0 0)}
.js .reveal-img:not(.in){clip-path:inset(0 0 0 100%)}
.reveal-img img{transition:transform 1.8s var(--out)}
.js .reveal-img:not(.in) img{transform:scale(1.15)}
.line{display:block;height:1px;background:var(--rule);transform-origin:left;transition:transform 1s var(--out) .1s}
.js .line:not(.in){transform:scaleX(0)}
.hv{transition:opacity .9s var(--out),transform .9s var(--out);transition-delay:var(--d,0s)}
.js .hv:not(.in){opacity:0;transform:translateY(30px)}
[data-par]{will-change:transform}

/* section heads */
.head{display:flex;flex-direction:column;gap:18px;margin-bottom:56px}
.head .line{margin-top:6px}

/* strip of cards with drag and arrows (Steeve's reel) */
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin;cursor:grab;overscroll-behavior-x:contain}
.strip.dragging{cursor:grabbing;scroll-snap-type:none}
.strip.dragging a{pointer-events:none}
.strip-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.strip-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);background:transparent;color:inherit;font:inherit;font-size:16px;cursor:pointer;transition:background .3s,opacity .3s}
.strip-nav button:hover{background:var(--card)}
.strip-nav button:disabled{opacity:.3;cursor:default}
.sample{flex:0 0 min(78vw,340px);scroll-snap-align:start;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.sample .im{aspect-ratio:4/3;max-width:100%;overflow:hidden;border-radius:16px;background:var(--card)}
.sample .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.sample:hover .im img{transform:scale(1.05)}
.sample .k{margin:14px 0 6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.sample h3{margin:0;font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.25;text-wrap:balance}
.sample p{margin:8px 0 0;font-size:14px;color:var(--muted)}
.sample .go{margin-top:12px;font-size:14px}

/* accordion */
.rows{border-top:1px solid var(--rule)}
.row{border-bottom:1px solid var(--rule)}
.row-h{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:48px;padding:26px 0;background:none;border:0;color:inherit;cursor:pointer;text-align:left;font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.6vw,34px);line-height:1.15;transition:padding-left .6s var(--ease)}
.row-h:hover{padding-left:14px}
.plus{font-family:var(--sans);font-size:22px;color:var(--acc);transition:transform .6s var(--ease)}
.row.open .plus{transform:rotate(45deg)}
.row-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.row-b>div{overflow:hidden}
.row-b p{margin:0;padding-bottom:28px;max-width:60ch;color:var(--muted)}
.row.open .row-b{grid-template-rows:1fr}

/* footer line */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-block:28px;border-top:1px solid var(--rule);font-size:14px;color:var(--muted)}
.foot .links{display:flex;gap:24px;flex-wrap:wrap}
.foot button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* project pages */
.p-hero{padding-top:calc(env(safe-area-inset-top,0px) + 132px);padding-bottom:56px}
.crumb{display:inline-flex;gap:8px;align-items:center;font-size:14px;text-decoration:none;color:var(--muted)}
.crumb:hover{color:var(--fg)}
.p-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:56px;padding-top:24px;border-top:1px solid var(--rule)}
.p-meta dt{font-size:13px;color:var(--muted)}
.p-meta dd{margin:6px 0 0;font-size:16px}
.cover{margin-top:8px;aspect-ratio:21/9;max-width:100%;border-radius:16px;overflow:hidden;background:var(--card)}
.cover img{width:100%;height:115%;object-fit:cover}
.split{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:56px;padding-block:96px}
.split+.split{border-top:1px solid var(--rule)}
.split .body+.body{margin-top:16px}
.did{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.did li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:18px 0;border-bottom:1px solid var(--rule)}
.did li span{font-family:var(--serif);color:var(--acc)}
.grid-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
.grid-work .sample{flex:none}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.fact .n{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(40px,4.4vw,64px);line-height:1}
.fact .l{display:block;margin-top:10px;font-size:14px;color:var(--muted);max-width:28ch}
.next{display:block;text-decoration:none;padding-block:120px 80px}
.next .h1{transition:transform .8s var(--ease)}
.next:hover .h1{transform:translateX(16px)}
.todo{font-size:14px;color:var(--acc)}
@media (max-width:860px){.p-meta{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr;gap:20px;padding-block:64px}.grid-work{grid-template-columns:1fr 1fr}.facts{grid-template-columns:1fr}.cover{aspect-ratio:4/3}}
@media (max-width:540px){.grid-work{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  #pre,#cur{display:none}
  .js .rv:not(.in),.js .hv:not(.in),.js .mask:not(.in)>span,.js .line:not(.in),.js .wipe:not(.in),.js .reveal-img:not(.in),.js .reveal-img:not(.in) img{opacity:1;transform:none;clip-path:none}
}
[data-theme="ink"] .stmt{font-weight:400}

@media (max-width:760px){.js .rv.l:not(.in),.js .rv.r:not(.in){transform:translateY(60px)}}
@media (max-width:760px){.nav{transition:transform .45s var(--out),background-color .3s ease,padding .3s ease}.nav.solid{mix-blend-mode:normal;background:var(--bg);color:var(--fg);padding-top:calc(env(safe-area-inset-top,0px) + 12px);padding-bottom:12px;box-shadow:0 1px 0 var(--rule)}.nav.hide{transform:translateY(-105%)}.nav .name{font-size:20px}}

.logo-cover{background:var(--g-plum)!important;display:grid!important;place-items:center}
.logo-cover img{width:min(46%,320px)!important;height:auto!important;object-fit:contain!important;transform:none!important}