/* Hobbies page additions (A300-A336): The gap, Podcasts and Paintings. Loaded by site/personal-collage.html. */

/* paper grain shared by the new objects */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* the Movies band's arrows, reused under each new band; they only appear where the band scrolls */
.xcontrols{padding:0;margin-top:clamp(14px,1.4vw,20px);display:none}
.xcontrols .arrows{display:inline-flex;align-items:center}
/* =======================================================================
   PAINTINGS: framed, hung on the page, a museum label beside each
   ======================================================================= */
.credit{font-family:var(--type);font-size:10.5px;color:var(--soft);text-align:right;margin-top:16px}
.credit a{color:inherit}
.credit .nw{white-space:nowrap}
/* the subheader sits on the title's own line, in the page's typewriter red */
.titleline{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:clamp(16px,2vw,28px);row-gap:6px}
.titleline .sub{font-family:var(--type);font-size:clamp(16px,1.7vw,22px);letter-spacing:.02em;color:var(--redink)}
/* one wall, wider than the text column so four frames can share it */
.gallery-wrap{container-type:inline-size;position:relative;width:min(calc(100vw - 120px),1400px);left:50%;translate:-50% 0}
.gallery{display:flex;justify-content:space-between;align-items:center;column-gap:2cqw;padding:24px 0 6px}
.hangitem{display:flex;flex-direction:column;align-items:center;margin:0}
/* above phone width the label hangs from its frame without taking part in the row's height, so the frames alone
   set the shared centre line whatever the label's length */
@media(min-width:861px){
  .gallery{padding-bottom:clamp(120px,11cqw,140px)}
  .hangitem{position:relative}
  .hangitem .mlabel{position:absolute;top:100%;left:50%;translate:-50% 0;width:max-content}
}
.hangitem .sway{position:relative}
/* the label may be wider than a narrow frame without widening the wall: it hangs out evenly on both sides */
.hangitem .mlabel{text-align:center;margin:clamp(16px,1.8cqw,22px) 0 0;max-width:min(300px,calc(var(--f) * 100cqw + 120px))}
/* a narrow wall: long titles take two balanced lines rather than reaching into the next label */
@container (max-width:860px){
  .gframe{--pw:calc(var(--f) * 88cqw)}
  .hangitem .mlabel{max-width:calc(var(--f) * 88cqw + 2 * var(--fw,16px) + 20px)}
  .mlabel .ttl{text-wrap:balance}
}
@media (prefers-reduced-motion:no-preference){
  @keyframes hangSway{0%,100%{rotate:-.28deg}50%{rotate:.28deg}}
  .hangitem .sway{animation:hangSway var(--sw,11s) ease-in-out infinite;animation-delay:var(--sd,0s);transform-origin:50% 0}
}
#paintings.rest-off .hangitem .sway{animation-play-state:paused}

/* the frame: the real mouldings, cut from photographs of two of these paintings in their museum frames
   (Garshin's at the Met, The Lady of Shalott's at Tate) and wrapped round each painting, corners intact */
.gframe{--fw:clamp(16px,2cqw,30px);--pw:calc(var(--f) * 100cqw);position:relative;display:block;padding:0;background:none;cursor:zoom-in;
  border-style:solid;border-width:var(--fw);border-image-repeat:stretch;width:calc(var(--pw) + 2 * var(--fw));
  box-shadow:0 1px 2px rgba(40,25,10,.3),0 10px 14px -6px rgba(40,25,10,.32)}
.gframe.met{border-image-source:url(../assets/hobbies-additions/frame-met.jpg);border-image-slice:94 92 94 91}
.gframe.tate{border-image-source:url(../assets/hobbies-additions/frame-tate.jpg);border-image-slice:119 121 110 115}
.gframe:focus-visible{outline:2.5px solid var(--red);outline-offset:6px}
.gframe .art{position:relative;display:block;width:var(--pw)}
.gframe .art img{display:block;width:100%;height:auto}
/* the frame's inner edge throws a little shadow onto the canvas, deepest under the top rail */
.gframe .art::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 8px 9px -6px rgba(30,18,5,.55),inset 7px 0 9px -7px rgba(30,18,5,.42),inset -4px 0 7px -6px rgba(30,18,5,.3),inset 0 -3px 5px -4px rgba(30,18,5,.25)}
/* Ophelia is painted with an arched top: the slip fills the two upper corners, as on her real frame */
.gframe .art.arched{background:url(../assets/hobbies-additions/slip-tate.jpg) center/100% 100%}
.gframe .art svg.arch{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.gframe .art svg.arch .sh{fill:none;stroke:#7A5B24;stroke-width:2.2;vector-effect:non-scaling-stroke}
.gframe .art svg.arch .hi{fill:none;stroke:#F0D894;stroke-width:1;vector-effect:non-scaling-stroke;transform:translateY(-.6px)}

/* the museum label, set in the page's own type: the typewriter face for the small lines,
   the display serif for the title, the red for the date, as on the Movies cards */
.mlabel{flex:none;width:max-content;max-width:min(100%,300px);background:#F7F4EC;
  border:1px solid rgba(35,32,32,.16);padding:11px 12px 12px;box-shadow:1px 2px 0 rgba(35,32,32,.12)}
.mlabel .who{display:block;font-family:var(--type);font-size:12px;letter-spacing:.03em;color:var(--ink)}
.mlabel .ttl{display:block;text-wrap:balance;font-family:var(--serif);font-size:clamp(16px,1.5cqw,19px);line-height:1.12;color:var(--ink);margin:5px 0 6px}
.mlabel .yr{display:block;font-family:var(--type);font-size:12px;color:var(--redink)}

/* the painting, opened large, on the page's own paper */
.pv{position:fixed;inset:0;z-index:70;background:var(--paper);display:none;align-items:center;justify-content:center;gap:30px;padding:4vh 4vw}
.pv.open{display:flex}
.pv .stage{animation:pvPrint .55s cubic-bezier(.25,1,.5,1) both}
@keyframes pvPrint{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(-60px)}}
.pv .gframe{cursor:default}
.pv .mlabel{align-self:flex-end;margin-bottom:6vh}
.pv .close{position:absolute;top:16px;right:18px;font-family:var(--type);font-size:11px;letter-spacing:.05em;background:var(--paper2);border:1.5px solid var(--ink);
  padding:9px 15px;cursor:pointer;transform:rotate(-1deg);box-shadow:2px 3px 0 rgba(35,32,32,.18)}
.pv .close:hover{background:var(--red);color:var(--paper2)}

/* =======================================================================
   PODCASTS: four cassettes, and the case card of the one playing
   ======================================================================= */
.tapes-wrap{margin-top:6px}
/* above the phone width the rows fit, so the bands are plain blocks: no grab cursor, nothing clipped */
@media(min-width:861px){.gallery-wrap.vp,.tapes-wrap.vp{cursor:auto;overflow:visible;margin-top:0}}
.deck{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,3.4vw,52px);align-items:center;margin-top:8px}
.tapes{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(10px,1.4vw,20px);padding:14px 4px 22px}
/* staggered like bricks; the lower pair always lies in front and only covers the tops' lower edge,
   below the labels, so every title stays readable whichever tape is playing */
.tapes .tape{width:93%}
.tape:nth-child(1){z-index:1;justify-self:start}.tape:nth-child(2){z-index:1;justify-self:end;margin-top:12px}
.tape:nth-child(3){z-index:2;justify-self:end;margin-top:-15%}.tape:nth-child(4){z-index:2;justify-self:start;margin-top:-13%}
.tape{position:relative;display:block;border:0;background:none;padding:0;cursor:pointer;rotate:var(--r,0deg);transition:translate .45s cubic-bezier(.25,1,.5,1),scale .45s cubic-bezier(.25,1,.5,1),filter .45s;
  filter:drop-shadow(0 2px 2px rgba(20,14,8,.3)) drop-shadow(0 16px 16px rgba(20,14,8,.22))}
.tape svg{display:block;width:100%;height:auto;overflow:visible}
.tape:focus-visible{outline:2.5px solid var(--red);outline-offset:6px}
.tape::after{content:"";position:absolute;left:50%;bottom:-14px;height:3px;width:0;translate:-50% 0;background:var(--red);transition:width .45s cubic-bezier(.25,1,.5,1)}
.tape[aria-pressed="true"]::after{width:46%}
.tape[aria-pressed="true"]{translate:0 -8px;scale:1.03;filter:drop-shadow(0 3px 3px rgba(20,14,8,.32)) drop-shadow(0 26px 22px rgba(20,14,8,.3))}
.tape .reel{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  @keyframes reel{to{rotate:-360deg}}
  /* both spools carry the same tape (A342), so they turn at the same speed */
  .tape[aria-pressed="true"] .reel{animation:reel 3.6s linear infinite}
}
#podcasts.rest-off .reel,#podcasts.rest-off .m-draft{animation-play-state:paused!important}

/* the case card (a cassette J-card, unfolded): cover panel, spine, then the inside. The four cards are
   stacked in one place and the card keeps one height, so changing tape never moves anything; the new card
   is printed over the old one in a single slow pass */
.jcard{position:relative;margin:0;display:grid;rotate:.6deg;
  box-shadow:0 2px 3px rgba(35,25,15,.18),0 22px 30px -16px rgba(35,25,15,.4)}
.jc-page{grid-area:1/1;display:grid;grid-template-columns:42px minmax(0,1fr);min-height:0;
  background:var(--paper2) var(--grain);border:1px solid rgba(35,32,32,.25)}
.jc-page[hidden]{display:grid;visibility:hidden}
.jcard{overflow:hidden}
.jc-page.enter{animation:pageSlide .8s cubic-bezier(.22,1,.36,1) both;box-shadow:-14px 0 20px -12px rgba(35,25,15,.4)}
@keyframes pageSlide{from{translate:100% 0}to{translate:0 0}}
.jc-spine{border-right:1px dashed rgba(35,32,32,.35);display:flex;align-items:center;justify-content:center;background:var(--band,var(--red))}
.jc-spine span{writing-mode:vertical-rl;rotate:180deg;font-family:var(--type);font-size:12px;letter-spacing:.12em;color:var(--paper2);white-space:nowrap}
.jc-body{padding:clamp(18px,2vw,26px) clamp(18px,2.4vw,32px);display:flex;flex-direction:column;min-height:0}
.jc-body h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,32px);line-height:1.05}
.jc-body .pmeta{font-family:var(--type);font-size:12.5px;letter-spacing:.03em;color:var(--redink);margin-top:8px}
.jc-body .blurb{font-family:var(--type);font-size:14px;line-height:1.55;color:var(--ink);margin-top:12px;max-width:66ch;
  }
.jc-body .blurb.set{animation:blurbSet .6s cubic-bezier(.22,1,.36,1) both}
@keyframes blurbSet{from{clip-path:inset(0 0 100% 0);translate:0 .35em}to{clip-path:inset(0 0 -.2em 0);translate:0 0}}
.jc-body a.go{display:inline-block;margin-top:12px;font-family:var(--type);font-size:12.5px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.jc-body a.go:hover{color:var(--redink)}

/* =======================================================================
   THE GAP: the graph-paper card, at the top of the page
   ======================================================================= */
/* the gap is laid out like every other section: same column, same heading, same body type */
/* the writing and the chart sit straight on the page, no card under them */
.gapcard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:start}
.gapcard blockquote{font-family:var(--work);font-style:normal;font-size:16px;line-height:1.62;color:var(--ink);text-wrap:pretty}
/* the quote, set in the page's display serif */
.dognote{margin:0;max-width:540px}
/* the passage in three parts, stacked in one place so the block keeps the height of the longest part */
/* only the current part is shown; the block eases to its height so the arrows always sit just under the text */
.gchunks{overflow:hidden;transition:height .55s cubic-bezier(.22,1,.36,1)}
.gchunk[hidden]{display:none}
.gchunk p + p{margin-top:12px}
.gchunk p.gcite{font-family:var(--type);font-size:12px;margin-top:10px;color:var(--ink)}
.gchunk p.gcite a{color:inherit;text-underline-offset:3px}
.gchunk p.gcite a:hover{color:var(--redink)}
.gchunk.set p{animation:gSet .6s cubic-bezier(.22,1,.36,1) both}
.gchunk.set p + p{animation-delay:.12s}
@keyframes gSet{from{clip-path:inset(0 0 100% 0);translate:0 .35em}to{clip-path:inset(0 0 -.3em 0);translate:0 0}}
.gnav{display:flex;align-items:center;gap:18px;margin-top:clamp(14px,1.4vw,20px)}
.gnav .tl-collage{padding:0;background:none}
.gnav .arrows{display:inline-flex;align-items:center}
.xcontrols .arrow[disabled],.gnav .arrow[disabled]{opacity:.35;cursor:default}
.gdots{display:flex;gap:7px}
.gdots i{width:8px;height:8px;border-radius:50%;background:rgba(35,32,32,.2);transition:background-color .3s}
.gdots i.cur{background:var(--red)}
.dognote figcaption{font-family:var(--type);font-size:12px;margin-top:10px;color:var(--ink)}
.dognote figcaption a{color:inherit;text-underline-offset:3px}
.dognote figcaption a:hover{color:var(--redink)}

.gapcard cite{display:block;font-style:normal;font-family:var(--type);font-size:12px;margin-top:10px;color:var(--ink)}
.gapcard cite a{color:inherit;text-underline-offset:3px}
.gapcard cite a:hover{color:var(--redink)}
.gapcard svg{width:100%;height:auto;display:block;overflow:visible}
.gapcard .ax{stroke:var(--ink);stroke-width:1.8;fill:none;stroke-linecap:round}
.gapcard .taste{stroke:var(--red);stroke-width:2.8;fill:none;stroke-dasharray:10 7;stroke-linecap:round}
.gapcard .work{stroke:var(--ink);stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.gapcard text{font-family:var(--type);font-size:14px;fill:var(--ink)}
.gapcard text.r{fill:var(--redink)}
.gapcard .now{stroke:var(--red);stroke-width:2.4}
.gapcard .dot{fill:var(--red);stroke:var(--paper2);stroke-width:2}
.gapcard text.big{font-family:var(--serif);font-size:30px;fill:var(--red);paint-order:stroke;stroke:var(--paper2);stroke-width:7px;stroke-linejoin:round}

/* =======================================================================
   PHONE AND SMALL TABLET: the new rows become bands you slide sideways,
   with the Movies band's arrows under them
   ======================================================================= */
@media(max-width:860px){
  .xcontrols{display:block}
  .gallery-wrap.vp,.tapes-wrap.vp{margin-top:0;overscroll-behavior-x:contain;scroll-snap-type:none}
  .gallery-wrap{width:auto;left:auto;translate:none}
  .gallery{width:max-content;column-gap:40px;padding:30px 24px 46px 6px}
  .hangitem .mlabel{margin:16px 0 0;max-width:100%}
  .gframe{--fw:24px;--pw:var(--fm)}
  .mlabel{max-width:100%}
  .deck{grid-template-columns:minmax(0,1fr)}
  .tapes{display:flex;width:max-content;gap:22px;padding:18px 24px 46px 6px}
  .tape:nth-child(n){margin-top:0;width:min(270px,72vw)}
  .tape{width:min(270px,72vw)}
  /* the band reaches the screen's edges so nothing of a tape's shadow is cut; on phones the shadow is a plain one,
     because the filter shadow left a pale box behind the playing tape in Chromium */
  .tapes-wrap.vp{margin-inline:-20px}
  .tapes{padding-left:20px;padding-right:20px}
  .tape,.tape[aria-pressed="true"]{filter:none}
  .tape svg{border-radius:3.5%/5.5%;box-shadow:0 2px 3px rgba(20,14,8,.28),0 14px 18px -8px rgba(20,14,8,.32)}
  .gapcard text{font-size:20px}
  .gapcard text.big{font-size:38px}
  .jcard{rotate:0deg}
  .jc-page{grid-template-columns:34px minmax(0,1fr)}
  .jc-body{padding:14px 14px 16px}
  .jc-body .blurb{font-size:13px}
  .gapcard{grid-template-columns:1fr}
  .gapcard blockquote{font-size:15px}
  .gapcard > svg{order:-1;max-width:420px}
  .pv{flex-direction:column;gap:14px}
  .pv .mlabel{align-self:center;margin:0}
}