/* ============ THEME ============
   Real fonts come from Alina's Adobe Fonts web project (link in the HTML).
   Until that's in, the fallbacks after them stand in. */
:root{
  --bg:#fbfbf9;
  --ink:#111111;
  --muted:#9a9a9a;
  --line:#151515;
  --guide:rgba(0,0,0,.38);
  /* hand-drawn pencil lines (generated tiles) */
  --pencil-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='900' viewBox='0 0 6 900'%3E%3Cfilter id='p' filterUnits='userSpaceOnUse' x='0' y='0' width='6' height='900'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='.75' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  2.1 0 0 0 -.4' result='g'/%3E%3CfeComposite in='d' in2='g' operator='in'/%3E%3C/filter%3E%3Cpath d='M3.00 0.00 L2.90 6.00 L2.80 12.00 L2.71 18.00 L2.63 24.00 L2.56 30.00 L2.50 36.00 L2.45 42.00 L2.42 48.00 L2.40 54.00 L2.39 60.00 L2.40 66.00 L2.42 72.00 L2.44 78.00 L2.48 84.00 L2.52 90.00 L2.56 96.00 L2.61 102.00 L2.66 108.00 L2.71 114.00 L2.75 120.00 L2.79 126.00 L2.82 132.00 L2.85 138.00 L2.87 144.00 L2.89 150.00 L2.90 156.00 L2.90 162.00 L2.90 168.00 L2.90 174.00 L2.89 180.00 L2.88 186.00 L2.87 192.00 L2.87 198.00 L2.86 204.00 L2.87 210.00 L2.87 216.00 L2.88 222.00 L2.90 228.00 L2.93 234.00 L2.95 240.00 L2.99 246.00 L3.02 252.00 L3.06 258.00 L3.10 264.00 L3.14 270.00 L3.18 276.00 L3.22 282.00 L3.25 288.00 L3.27 294.00 L3.29 300.00 L3.31 306.00 L3.31 312.00 L3.31 318.00 L3.31 324.00 L3.29 330.00 L3.27 336.00 L3.25 342.00 L3.23 348.00 L3.20 354.00 L3.17 360.00 L3.15 366.00 L3.13 372.00 L3.12 378.00 L3.11 384.00 L3.11 390.00 L3.12 396.00 L3.13 402.00 L3.15 408.00 L3.19 414.00 L3.22 420.00 L3.27 426.00 L3.31 432.00 L3.36 438.00 L3.42 444.00 L3.46 450.00 L3.51 456.00 L3.55 462.00 L3.59 468.00 L3.61 474.00 L3.63 480.00 L3.63 486.00 L3.62 492.00 L3.61 498.00 L3.58 504.00 L3.54 510.00 L3.49 516.00 L3.43 522.00 L3.36 528.00 L3.30 534.00 L3.22 540.00 L3.15 546.00 L3.08 552.00 L3.02 558.00 L2.96 564.00 L2.90 570.00 L2.86 576.00 L2.83 582.00 L2.81 588.00 L2.79 594.00 L2.79 600.00 L2.80 606.00 L2.82 612.00 L2.85 618.00 L2.89 624.00 L2.93 630.00 L2.98 636.00 L3.03 642.00 L3.08 648.00 L3.13 654.00 L3.18 660.00 L3.22 666.00 L3.26 672.00 L3.30 678.00 L3.33 684.00 L3.36 690.00 L3.38 696.00 L3.40 702.00 L3.42 708.00 L3.43 714.00 L3.45 720.00 L3.46 726.00 L3.47 732.00 L3.48 738.00 L3.50 744.00 L3.52 750.00 L3.54 756.00 L3.57 762.00 L3.60 768.00 L3.63 774.00 L3.66 780.00 L3.70 786.00 L3.73 792.00 L3.76 798.00 L3.79 804.00 L3.81 810.00 L3.83 816.00 L3.84 822.00 L3.83 828.00 L3.82 834.00 L3.79 840.00 L3.76 846.00 L3.71 852.00 L3.65 858.00 L3.58 864.00 L3.49 870.00 L3.40 876.00 L3.31 882.00 L3.21 888.00 L3.10 894.00 L3.00 900.00' fill='none' stroke='%232e2e2e' stroke-width='1.15' stroke-opacity='0.62' stroke-linecap='round' stroke-dasharray='268.18 2.51 193.18 1.82 192.69 2.53 239.08 0.00' filter='url(%23p)'/%3E%3C/svg%3E");
  --pencil-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='6' viewBox='0 0 900 6'%3E%3Cfilter id='p' filterUnits='userSpaceOnUse' x='0' y='0' width='900' height='6'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='.75' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  2.1 0 0 0 -.4' result='g'/%3E%3CfeComposite in='d' in2='g' operator='in'/%3E%3C/filter%3E%3Cpath d='M0.00 3.00 L6.00 3.04 L12.00 3.06 L18.00 3.08 L24.00 3.08 L30.00 3.06 L36.00 3.04 L42.00 3.00 L48.00 2.96 L54.00 2.91 L60.00 2.85 L66.00 2.80 L72.00 2.74 L78.00 2.69 L84.00 2.64 L90.00 2.60 L96.00 2.57 L102.00 2.55 L108.00 2.55 L114.00 2.56 L120.00 2.58 L126.00 2.61 L132.00 2.65 L138.00 2.71 L144.00 2.77 L150.00 2.83 L156.00 2.90 L162.00 2.97 L168.00 3.04 L174.00 3.11 L180.00 3.16 L186.00 3.21 L192.00 3.24 L198.00 3.26 L204.00 3.27 L210.00 3.27 L216.00 3.25 L222.00 3.22 L228.00 3.17 L234.00 3.12 L240.00 3.06 L246.00 2.99 L252.00 2.93 L258.00 2.85 L264.00 2.79 L270.00 2.72 L276.00 2.66 L282.00 2.61 L288.00 2.57 L294.00 2.53 L300.00 2.51 L306.00 2.50 L312.00 2.50 L318.00 2.50 L324.00 2.52 L330.00 2.54 L336.00 2.57 L342.00 2.60 L348.00 2.63 L354.00 2.66 L360.00 2.68 L366.00 2.71 L372.00 2.72 L378.00 2.74 L384.00 2.74 L390.00 2.74 L396.00 2.73 L402.00 2.72 L408.00 2.70 L414.00 2.68 L420.00 2.66 L426.00 2.63 L432.00 2.62 L438.00 2.60 L444.00 2.59 L450.00 2.59 L456.00 2.60 L462.00 2.62 L468.00 2.65 L474.00 2.68 L480.00 2.73 L486.00 2.79 L492.00 2.85 L498.00 2.91 L504.00 2.98 L510.00 3.05 L516.00 3.12 L522.00 3.18 L528.00 3.23 L534.00 3.27 L540.00 3.30 L546.00 3.32 L552.00 3.32 L558.00 3.30 L564.00 3.27 L570.00 3.22 L576.00 3.15 L582.00 3.07 L588.00 2.98 L594.00 2.87 L600.00 2.76 L606.00 2.64 L612.00 2.52 L618.00 2.40 L624.00 2.28 L630.00 2.17 L636.00 2.07 L642.00 1.98 L648.00 1.90 L654.00 1.84 L660.00 1.79 L666.00 1.76 L672.00 1.74 L678.00 1.74 L684.00 1.74 L690.00 1.76 L696.00 1.79 L702.00 1.82 L708.00 1.86 L714.00 1.90 L720.00 1.94 L726.00 1.98 L732.00 2.02 L738.00 2.05 L744.00 2.08 L750.00 2.10 L756.00 2.11 L762.00 2.12 L768.00 2.12 L774.00 2.12 L780.00 2.12 L786.00 2.12 L792.00 2.12 L798.00 2.12 L804.00 2.13 L810.00 2.14 L816.00 2.16 L822.00 2.19 L828.00 2.22 L834.00 2.27 L840.00 2.32 L846.00 2.38 L852.00 2.45 L858.00 2.53 L864.00 2.60 L870.00 2.68 L876.00 2.75 L882.00 2.83 L888.00 2.89 L894.00 2.95 L900.00 3.00' fill='none' stroke='%231c1c1c' stroke-width='1.5' stroke-opacity='0.9' stroke-linecap='round' stroke-dasharray='206.88 2.02 210.95 2.04 183.47 1.52 293.13 0.00' filter='url(%23p)'/%3E%3C/svg%3E");
  --f-title:"plunct","Reenie Beanie",cursive;
  --pencil:#7d7d7b;
  --f-text:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--f-text);font-weight:500}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased;animation:fadein .45s ease both;transition:opacity .25s}
body.leaving{opacity:0}
@keyframes fadein{from{opacity:0}}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- poster frame: guides, spine, nav ---------- */
.guides{position:fixed;inset:0;pointer-events:none;z-index:0}
.guides i{position:absolute;top:0;bottom:0;width:6px;margin-left:-3px;background:var(--pencil-v) repeat-y 0 0/6px 900px}
.spine{
  position:fixed;right:.5vw;top:12px;z-index:60;writing-mode:vertical-rl;
  line-height:.92;pointer-events:none;
}
.spine b{display:block;font-size:clamp(20px,2.1vw,34px);letter-spacing:-.01em;font-weight:500}
.spine small{display:block;font-size:clamp(10px,.9vw,14px);letter-spacing:.02em}
.nav{
  position:fixed;top:12px;right:5vw;z-index:60;text-align:right;
  font-size:clamp(11px,.85vw,13px);line-height:1.05;text-transform:uppercase;
}
.nav a{display:block;text-shadow:0 0 6px var(--bg),0 0 10px var(--bg)}
.nav a:hover,.nav a.on{text-decoration:underline;text-underline-offset:3px}

/* ---------- measurement ruler ---------- */
.ruler{pointer-events:none;z-index:2}
.ruler-top{position:fixed;left:0;right:0;top:0;height:14px}
.ruler-side{position:absolute;left:0;top:0;width:30px}
.ruler i{position:absolute;background:#c4c4c2}
.ruler-top i{top:0}.ruler-side i{left:0}
.ruler b{position:absolute;font:500 9px/1 var(--f-text);color:#adadab;letter-spacing:.02em}
.ruler-top b{top:3px}.ruler-side b{left:12px}
.has-video .hint{
  position:absolute;left:8px;bottom:8px;z-index:3;font:500 10px/1 var(--f-text);text-transform:uppercase;
  background:rgba(255,255,255,.85);color:#111;padding:4px 6px;opacity:0;transition:opacity .2s;pointer-events:none
}
.has-video.muted-hint .hint{opacity:1}
.media-el{position:relative}

/* ---------- shared bits ---------- */
.ph{
  width:100%;height:100%;display:grid;place-items:end start;padding:8px;
  background:radial-gradient(rgba(0,0,0,.16) .9px,transparent 1.3px) 0 0/5px 5px, var(--tone,#e6e3dc);
  font-size:10px;text-transform:uppercase;color:rgba(0,0,0,.5);letter-spacing:.02em
}
.scrib{width:100%;height:auto;display:block;overflow:visible;color:var(--ink)}

.t-display{font-family:var(--f-title);color:var(--pencil);font-weight:400;line-height:.8;white-space:nowrap}
.t-stack span{display:block;text-transform:uppercase;font-size:clamp(13px,1.15vw,19px);line-height:.98;letter-spacing:-.01em}
.t-stack .lg{font-size:clamp(15px,1.45vw,24px)}
.t-stack .sm{text-transform:none;font-size:clamp(12px,1vw,16px)}
.t-stack .ghost{color:var(--muted)}
.t-stack a:hover{text-decoration:underline;text-underline-offset:3px}
.t-fine{font-size:9px;line-height:1.08;color:var(--muted);text-transform:uppercase}
.t-body{font-size:clamp(15px,1.25vw,20px);line-height:1.15;max-width:34ch}

.rule{height:6px;background:var(--pencil-h) repeat-x 0 0/900px 6px;position:relative}
.rule::before{content:"";position:absolute;left:-8px;top:-5px;width:16px;height:16px;border-radius:50%;background:#e4e4e2;border:1px solid #cfcfcd}

/* ---------- index canvas ---------- */
#canvas{position:relative;width:100%;z-index:1}
.el{position:absolute;user-select:none}
.el.k-scribble{pointer-events:none}

.cover{display:block;cursor:pointer}
.cover .frame{
  border:1px solid var(--line);background:#fff;overflow:hidden;position:relative;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s cubic-bezier(.2,.7,.2,1)
}
.cover .frame img{width:100%;height:100%;object-fit:cover}
.cover:hover .frame{transform:translate(-4px,-4px);box-shadow:4px 4px 0 var(--line)}
.cover .ttl{font-family:var(--f-title);color:var(--pencil);font-weight:400;font-size:clamp(30px,3.4vw,58px);line-height:.85;margin-top:.25em}
.cover .sub{font-size:clamp(11px,.8vw,13px);text-transform:uppercase;line-height:1.02;margin-top:.5em;max-width:30ch}

/* ---------- media pieces (no project page): image, or video that plays on hover ---------- */
.media-el .screen{overflow:hidden;background:#fff}
.media-el .screen img,.media-el .screen video{width:100%;height:100%;object-fit:cover;display:block}
.media-el.has-video{cursor:pointer}
.media-el.phone{
  background:#0d0d0d;border-radius:13% / 6.5%;padding:5.5% 4.5%;
  box-shadow:inset 0 0 0 1.5px #3a3a3a,inset 0 0 0 3px #0d0d0d,inset 0 0 0 4px #555,0 1px 2px rgba(0,0,0,.25);
  position:relative
}
.media-el.phone::before{content:"";position:absolute;left:50%;top:2.2%;width:30%;height:1.6%;transform:translateX(-50%);background:#000;border-radius:99px;z-index:2}
.media-el.phone .screen{border-radius:9% / 4.6%;background:#fff}
.media-el.phone .screen video{object-fit:contain}

/* ---------- hover preview ---------- */
.peek{
  position:fixed;left:0;top:0;width:320px;z-index:120;background:var(--bg);
  border:1px solid var(--line);padding:10px;pointer-events:none;
  opacity:0;transform:scale(.96);transform-origin:top left;transition:opacity .16s,transform .16s
}
.peek.on{opacity:1;transform:none}
.peek-main{aspect-ratio:4/5;background:#fff;border:1px solid var(--line);overflow:hidden}
.peek-main img{width:100%;height:100%;object-fit:contain}
.peek-strip{display:flex;gap:4px;margin-top:6px}
.peek-strip div{flex:1;height:34px;border:1px solid #d0d0d0;overflow:hidden;opacity:.55;transition:opacity .15s}
.peek-strip div.cur{border-color:var(--line);opacity:1}
.peek-strip img{width:100%;height:100%;object-fit:cover}
.peek-strip .ph span{display:none}
.peek-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:10px}
.peek-title{font-family:var(--f-title);color:var(--pencil);font-size:36px;line-height:.85}
.peek-n{font-size:11px;white-space:nowrap}
.peek-desc{font-size:12px;line-height:1.05;margin-top:6px;text-transform:uppercase}
.peek-cta{font-size:10px;color:var(--muted);margin-top:8px}

/* ---------- project page ---------- */
.p-wrap{position:relative;z-index:1;padding:0 6vw 0 2.2vw}
.p-hero{position:relative;padding-top:2vw;min-height:20vw}
.p-title{font-family:var(--f-title);color:var(--pencil);font-weight:400;font-size:clamp(70px,14vw,260px);line-height:.8}
.p-hero .scrib-wrap{position:absolute;left:52vw;top:3vw;width:18vw;transform:rotate(-6deg);pointer-events:none}
.p-sub{font-size:clamp(14px,1.3vw,22px);text-transform:uppercase;margin:.8vw 0 0 .3vw}
.p-info{
  display:grid;grid-template-columns:repeat(12,1fr);gap:1.6vw;align-items:start;
  background:var(--pencil-h) repeat-x 0 0/900px 6px;margin-top:3vw;padding-top:calc(1.2vw + 6px);position:relative
}
.p-info::before{content:"";position:absolute;left:-8px;top:-5px;width:16px;height:16px;border-radius:50%;background:#e4e4e2;border:1px solid #cfcfcd}
.p-meta{grid-column:1/4}
.p-places{grid-column:4/7}
.p-words{grid-column:7/9}
.p-info .t-body{grid-column:9/13}
.p-images{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.6vw;row-gap:7vw;margin:7vw 0}
.p-img .box{border:1px solid var(--line);background:#fff;overflow:hidden}
.p-img .box img{width:100%;height:100%;object-fit:cover}
.p-img figcaption{font-size:11px;text-transform:uppercase;margin-top:.6em;color:var(--muted)}
.p-img.v0{grid-column:4/11}
.p-img.v1{grid-column:1/6}
.p-img.v2{grid-column:7/12;margin-top:-4vw}
.p-img.v3{grid-column:3/8}
.p-img.v4{grid-column:8/13;margin-top:-3vw}
.p-next{
  display:flex;justify-content:space-between;align-items:flex-end;gap:4vw;
  background:var(--pencil-h) repeat-x 0 0/900px 6px;padding:calc(1.2vw + 6px) 0 4vw;position:relative
}
.p-next .back{font-size:13px;text-transform:uppercase}
.p-next .next{text-align:right}
.p-next .next span{display:block;font-size:13px;text-transform:uppercase}
.p-next .next b{display:block;font-family:var(--f-title);color:var(--pencil);font-weight:400;font-size:clamp(48px,7vw,130px);line-height:.85}
.p-next .back:hover,.p-next .next:hover span{text-decoration:underline;text-underline-offset:3px}

/* resize handle: only visible inside the editor */
.rz{display:none}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .guides i:not(:first-child):not(:last-child){display:none}
  .guides i:first-child{left:12px!important}
  .guides i:last-child{left:auto!important;right:34px}
  .spine b{font-size:18px}.spine small{font-size:10px}
  .nav{right:44px}
  #canvas{height:auto!important;display:flex;flex-direction:column;gap:44px;padding:56px 50px 80px 22px}
  .el{position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:100%!important}
  .el.k-scribble,.el.k-rule{display:none}
  .el.k-text{width:auto!important;max-width:78%}
  .el.k-project{width:82%!important}
  .el.k-media{width:56%!important}
  .el.k-media:nth-child(even){align-self:flex-end}
  .el.k-project.alt{align-self:flex-end;width:70%!important}
  .t-display{font-size:30vw!important}
  .t-fine{font-size:10px;max-width:24ch}
  .p-wrap{padding:0 46px 0 22px}
  .p-hero{padding-top:56px}
  .p-hero .scrib-wrap{left:auto;right:0;top:40px;width:40vw}
  .p-info{grid-template-columns:1fr 1fr;gap:28px 16px;padding-top:16px}
  .p-meta,.p-places,.p-words{grid-column:auto}
  .p-info .t-body{grid-column:1/-1}
  .p-images{grid-template-columns:1fr;row-gap:40px;margin:48px 0}
  .p-img[class*=" v"]{grid-column:1/-1;margin-top:0}
  .p-img.v1,.p-img.v3{width:80%}
  .p-img.v2,.p-img.v4{width:80%;justify-self:end}
}
@media (prefers-reduced-motion:reduce){body{animation:none}.cover .frame,.peek{transition:none}}