/* about */
#about{
  --u: min(calc(100vw / 1672), calc(100svh / 941));
  --stage-w: calc(1672 * var(--u));
  --stage-h: calc(941 * var(--u));
  --ink:#241A0E; --ink-soft:#5A4A36; --ink-faint:#8E7C63;
  --accent:var(--brand-accent,#FF4D1A); --dot:var(--brand-dot,#D6794F); --head:var(--brand-brown,#644026);
  --tick:rgba(30,22,12,.80); --rule:rgba(36,26,14,.44);
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --serif:'Playfair Display',Georgia,serif; --hand:'Caveat',cursive;
}
#about{position:relative;width:100%;height:100svh;overflow:hidden;isolation:isolate}
#about .paper{position:absolute;inset:0;z-index:0;
  background:linear-gradient(97deg,#F0E3D0 0%,#EEE1CD 40%,#E7D6BC 76%,#E1CFB4 100%)}
#about .grain{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;opacity:.17;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.42'/></svg>")}
#about .vignette{position:absolute;inset:0;z-index:20;pointer-events:none;
  background:radial-gradient(124% 104% at 48% 44%,rgba(0,0,0,0) 58%,rgba(64,44,20,.13) 100%)}
#about .stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--stage-w);height:var(--stage-h);z-index:2}
#about .stage > *{position:absolute}
#about .thread{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
#about .thread path{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;opacity:.85}
#about .thread-m{display:none}
@media (max-width:860px){
#about .thread-m{display:block}
#about .thread:not(.thread-m){display:none}
}
#about .acts{inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
#about .acts line{stroke:#1C150C;stroke-width:2.1;stroke-linecap:round}
#about #gl-about{inset:0;width:100%;height:100%;z-index:5;opacity:0;transition:opacity .8s ease}
#about #gl-about.ready{opacity:1}
#about .print{z-index:3;background:linear-gradient(168deg,#F7F2E8,#EFE7D8);
  padding:0;border-radius:2px;
  box-shadow:0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(92,66,32,.22),
             0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(92,66,32,.16)}
#about .print .tape{position:absolute;left:50%;top:calc(-9 * var(--u));
  transform:translateX(-50%) rotate(-2deg);width:26%;height:calc(20 * var(--u));
  background:rgba(214,192,150,.52);border-radius:1px}
#about .print .pshot{position:absolute;left:5.7%;top:7.5%;
  width:88.6%;aspect-ratio:1;object-fit:cover;filter:saturate(.94) contrast(1.02)}
#about .print figcaption{position:absolute;left:8%;right:6%;
  top:77.5%;
  font-family:var(--hand);color:#20170D;line-height:1.18}
#about .print figcaption span{display:block}
#about .pr-a figcaption{font-size:calc(23 * var(--u))}
#about .pr-b figcaption{font-size:calc(20 * var(--u))}
#about .pr-c figcaption{font-size:max(var(--mt,0px), calc(16.5 * var(--u)));top:76%}
#about .pr-a{left:calc(578.9 * var(--u));top:calc(264.3 * var(--u));
  width:calc(253.9 * var(--u));height:calc(330.1 * var(--u));transform:rotate(-5.0deg);z-index:3}
#about .pr-b{left:calc(970.2 * var(--u));top:calc(138.7 * var(--u));
  width:calc(211.6 * var(--u));height:calc(275.1 * var(--u));transform:rotate(-3.0deg);z-index:2}
#about .pr-c{left:calc(1332 * var(--u));top:calc(330.6 * var(--u));
  width:calc(190.4 * var(--u));height:calc(247.5 * var(--u));transform:rotate(5.0deg);z-index:2}
#about .eyebrow{left:calc(150 * var(--u));top:calc(262 * var(--u));display:flex;align-items:center;
  gap:calc(12 * var(--u));font-size:max(var(--mt,0px), calc(16 * var(--u)));font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft)}
#about .eyebrow i{display:block;width:calc(14 * var(--u));height:calc(14 * var(--u));
  border-radius:50%;background:var(--dot)}
#about .h1{left:calc(150 * var(--u));top:calc(293 * var(--u));font-family:var(--serif);font-weight:500;
  font-size:calc(82 * var(--u));line-height:0.9878;letter-spacing:-.018em;color:var(--head)}
#about .h1 b{color:var(--dot);font-weight:inherit}
#about .body{left:calc(150 * var(--u));top:calc(492 * var(--u));width:calc(400 * var(--u));
  font-size:max(var(--mt,0px), calc(15 * var(--u)));line-height:max(calc(var(--mt,0px) * 1.42), calc(25.5 * var(--u)));color:#3D3226}
#about .hand{left:calc(149 * var(--u));top:calc(654 * var(--u));font-family:var(--hand);
  font-size:calc(29 * var(--u));line-height:1.034;color:#20170D;white-space:nowrap}
#about .hand .smile{display:inline-block;width:calc(26 * var(--u));height:calc(26 * var(--u));margin-left:calc(14 * var(--u));
  vertical-align:calc(-5 * var(--u))}
#about .note{left:calc(1227 * var(--u));top:calc(264 * var(--u));font-family:var(--hand);
  font-size:calc(24 * var(--u));line-height:1.167;color:#20170D}
#about .noterule{left:calc(1242 * var(--u));top:calc(374 * var(--u));
  width:calc(43 * var(--u));height:calc(1.6 * var(--u));background:var(--rule)}
#about .cx{left:50%;transform:translateX(-50%)}
#about .tick{width:calc(1.8 * var(--u));background:var(--tick)}
#about .t1{top:calc(5 * var(--u));height:calc(46 * var(--u))}
#about .t2{top:calc(129 * var(--u));height:calc(155 * var(--u))}
#about .t3{top:calc(765 * var(--u));height:calc(34 * var(--u))}
#about .t4{top:calc(912 * var(--u));height:calc(24 * var(--u))}
#about .from,
#about .next{text-align:center;text-transform:uppercase;color:var(--ink-soft);
  font-size:max(var(--mt,0px), calc(12.3 * var(--u)));font-weight:500;letter-spacing:.14em;white-space:nowrap}
#about .from{top:calc(67 * var(--u));line-height:1.138}
#about .next{top:calc(815 * var(--u));line-height:1.057}
#about .mouse{top:calc(860 * var(--u));width:calc(16 * var(--u));height:calc(34 * var(--u));
  border:calc(1.3 * var(--u)) solid var(--rule);border-radius:calc(8.0 * var(--u))}
@media (max-width:860px){
#about{
    --u: min(calc(100vw / 530), calc(100svh / 941));
    --stage-w: calc(530 * var(--u));
    --stage-h: calc(941 * var(--u));
  }
#about .t1{top:calc(8 * var(--u));height:calc(32 * var(--u))}
#about .t3{top:calc(810 * var(--u));height:calc(30 * var(--u))}
#about .t4{top:calc(925 * var(--u));height:calc(16 * var(--u))}
#about .from{top:calc(48 * var(--u));font-size:max(var(--mt,0px), calc(11 * var(--u)));line-height:1.182}
#about .next{top:calc(850 * var(--u));font-size:max(var(--mt,0px), calc(11 * var(--u)));line-height:1.182}
#about .mouse{top:calc(885 * var(--u));width:calc(15 * var(--u));height:calc(30 * var(--u));
    border-radius:calc(7.5 * var(--u))}
#about .eyebrow{left:calc(48 * var(--u));top:calc(138 * var(--u));font-size:max(var(--mt,0px), calc(15 * var(--u)));
    letter-spacing:.04em;gap:calc(6 * var(--u))}
#about .eyebrow i{width:calc(10 * var(--u));height:calc(10 * var(--u))}
#about .h1{left:calc(48 * var(--u));top:calc(158 * var(--u));font-size:calc(54 * var(--u));
    line-height:1.1111}
#about .body{left:calc(48 * var(--u));top:calc(296 * var(--u));width:calc(268 * var(--u));
    font-size:max(var(--mt,0px), calc(11.4 * var(--u)));line-height:max(calc(var(--mt,0px) * 1.42), calc(17.5 * var(--u)))}
#about .hand{left:calc(48 * var(--u));top:calc(421 * var(--u));font-size:calc(25 * var(--u));
    line-height:0.880;white-space:normal}
#about .hand .smile{width:calc(20 * var(--u));height:calc(20 * var(--u));margin-left:calc(10 * var(--u))}
#about .note{left:calc(416 * var(--u));top:calc(435 * var(--u));font-size:calc(19 * var(--u));
    line-height:1.316}
#about .noterule{left:calc(439 * var(--u));top:calc(512 * var(--u));
    width:calc(42 * var(--u))}
#about .pr-a{left:calc(48 * var(--u));top:calc(516 * var(--u));width:calc(150 * var(--u));height:calc(195.0 * var(--u));transform:rotate(-4.0deg)}
#about .pr-b{left:calc(268 * var(--u));top:calc(410 * var(--u));width:calc(136 * var(--u));height:calc(176.8 * var(--u));transform:rotate(-2.0deg)}
#about .pr-c{left:calc(384 * var(--u));top:calc(554 * var(--u));width:calc(98 * var(--u));height:calc(127.4 * var(--u));transform:rotate(5.0deg)}
#about .pr-a figcaption{font-size:max(var(--mt,0px), calc(15 * var(--u)))}
#about .pr-b figcaption{font-size:max(var(--mt,0px), calc(14 * var(--u)))}
#about .pr-c figcaption{font-size:max(var(--mt,0px), calc(10.5 * var(--u)));top:75%;line-height:1.1}
#about .print .tape{height:calc(14 * var(--u));top:calc(-6 * var(--u))}
#about .acts{display:none}
}

/* polaroids are lifted off the page on hover (motion lives in js/life.js) */
#about .print{will-change:transform;transition:box-shadow .45s ease}
#about .print.up{box-shadow:0 calc(22 * var(--u)) calc(40 * var(--u)) rgba(92,66,32,.26),
                             0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(92,66,32,.16)}
#about.hot{cursor:pointer}

/* the right-hand cluster sits 110 units in from the reference, so it ends on the page margin */
@media (min-width:861px){
  #about .thread,#about .acts{transform:translateX(calc(-110 * var(--u)))}
}