/* The timeline: a left-anchored line (spine) with years and all works down it. It simply
   fades in on click over a dark veil — the screen does not brighten. Small, sans, ethereal. */

#ascii-field.recede{opacity:.6;}

.index{position:fixed;inset:0;z-index:400;overflow:auto;padding:var(--s5) var(--s4);
  display:flex;justify-content:flex-start;align-items:flex-start;pointer-events:none;
  opacity:0;transition:opacity var(--m-slow) var(--ease-out);}
.index.show{opacity:1;pointer-events:auto;}
/* a dark veil for legibility (darkens, never brightens) */
.index::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:rgba(8,8,8,.55);transition:opacity var(--m-slow) var(--ease-out);}
.index.show::before{opacity:1;}

/* the left line */
.tl{position:relative;margin-left:var(--s3);padding-left:var(--s3);
  border-left:1px solid var(--gfl8);pointer-events:auto;max-width:460px;}
.tl-year{font-family:var(--sans);font-weight:500;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gfl6);margin:var(--s3) 0 var(--s1);position:relative;}
.tl-year::before{content:"";position:absolute;left:calc(-1 * var(--s3) - 1px);top:50%;
  width:5px;height:5px;margin-top:-2px;margin-left:-2px;background:var(--bg);border:1px solid var(--gfl6);border-radius:50%;}
.tl-item{font-family:var(--sans);font-size:11px;line-height:1.85;position:relative;}
.tl-work{font-family:inherit;font-size:inherit;color:var(--gfl5);text-decoration:none;cursor:pointer;
  background:none;border:0;padding:0 0 1px;text-transform:lowercase;letter-spacing:.01em;
  border-bottom:1px solid transparent;
  transition:color var(--m-normal) var(--ease-out),border-color var(--m-normal) var(--ease-out);}
.tl-work:hover{color:var(--text);border-bottom-color:var(--gfl6);}

.close{position:fixed;top:var(--s3);right:var(--s4);z-index:401;pointer-events:auto;background:transparent;
  border:0;color:var(--gfl7);font-family:var(--sans);font-size:9px;letter-spacing:.16em;
  cursor:pointer;padding:6px 8px;text-transform:lowercase;opacity:.6;
  transition:opacity var(--m-normal) var(--ease-out),color var(--m-normal) var(--ease-out);}
.close:hover{color:var(--text);opacity:1;}

/* the modifier (media works). pointer-events:none until shown (no click-trap). */
.mod{position:fixed;inset:0;z-index:402;pointer-events:none;display:flex;align-items:center;justify-content:center;
  padding:var(--s4);background:rgba(12,12,12,.6);opacity:0;transition:opacity var(--m-moderate) var(--ease-out);}
.mod.show{opacity:1;pointer-events:auto;}
.mod-card{max-width:480px;width:100%;background:rgba(26,26,26,.96);border:1px solid var(--gfl8);
  padding:var(--s4);position:relative;transform:translateY(8px);opacity:0;
  transition:transform var(--m-slow) var(--ease-out),opacity var(--m-slow) var(--ease-out);}
.mod.show .mod-card{transform:none;opacity:1;}
.mod-media{margin:0 0 var(--s3);border:1px solid var(--gfl9);background:var(--gfl10);overflow:hidden;}
.mod-media img,.mod-media video{display:block;width:100%;height:auto;}
.mod-t{font-family:var(--sans);text-transform:uppercase;font-weight:500;font-size:11px;
  letter-spacing:.2em;color:var(--gfl3);margin:0 0 var(--s2);}
.mod-l{font-family:var(--sans);font-size:10px;line-height:1.8;color:var(--gfl5);text-transform:lowercase;margin:0 0 var(--s3);}
.mod-meta{font-family:var(--sans);font-size:8px;letter-spacing:.14em;color:var(--gfl7);text-transform:lowercase;}
.mod-visit{display:inline-block;margin-top:var(--s3);font-family:var(--sans);font-size:9px;letter-spacing:.14em;
  text-transform:lowercase;color:var(--gfl6);text-decoration:none;border-bottom:1px solid var(--gfl8);padding-bottom:1px;
  transition:color var(--m-normal) var(--ease-out),border-color var(--m-normal) var(--ease-out);}
.mod-visit:hover{color:var(--text);border-color:var(--gfl6);}
.mod-x{position:absolute;top:var(--s2);right:var(--s2);background:transparent;border:0;color:var(--gfl7);
  font-family:var(--sans);font-size:9px;letter-spacing:.1em;cursor:pointer;padding:2px 4px;text-transform:lowercase;
  transition:color var(--m-normal) var(--ease-out);}
.mod-x:hover{color:var(--text);}

/* full-window random gif (hiddenhidden.com) for "unknown" works. pointer-events:none until shown. */
.hhgif{position:fixed;inset:0;z-index:500;pointer-events:none;opacity:0;background:#0a0a0a;
  display:flex;align-items:center;justify-content:center;transition:opacity var(--m-moderate) var(--ease-out);}
.hhgif.show{opacity:1;pointer-events:auto;cursor:pointer;}
.hhgif img{width:100%;height:100%;object-fit:cover;display:block;}
.hhgif .hhx{position:fixed;top:var(--s3);right:var(--s4);z-index:501;pointer-events:auto;cursor:pointer;
  font-family:var(--sans);font-size:9px;letter-spacing:.16em;text-transform:lowercase;color:var(--gfl3);
  opacity:.6;mix-blend-mode:difference;}
.hhgif .hhx:hover{opacity:1;}