/* Issue 01 — On Generative Culture. This file belongs to this issue alone:
   the next issue copies it and redesigns freely. */
.pg-take{--wall:#243d8f;--wall-2:#1b2f6e;--paper:#f1ede4;--stone:#e2e2d7;--clay:#e9ddd0;--ink:#16171c;--ink-t:#15161a;--ink-2:#55555d;--rail:#f1ede4;
  background:radial-gradient(130% 44vh at 50% 0%, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 60%) top/100% 100vh no-repeat,
             linear-gradient(180deg, var(--wall) 0%, var(--wall-2) 100%);color:#eef1fb}
.t-col{width:min(780px,calc(100% - 2 * var(--gut)));margin-inline:auto}

/* the title page — Libre Caslon Display for the title, Caslon italic for the dek */
.t-head{text-align:center;max-width:980px;margin:0 auto;padding:0 var(--gut) clamp(40px,6vh,68px)}
.t-head .kick{color:rgba(238,241,251,.72)}
.t-title{margin:clamp(20px,3vh,30px) 0 0;font:400 clamp(40px,6.2vw,88px)/1.02 var(--c);letter-spacing:-.012em;color:#fff}
.t-dek{margin:clamp(12px,1.8vh,18px) 0 0;font:italic 400 clamp(17px,1.95vw,25px)/1.3 var(--i);color:rgba(238,241,251,.82)}
.t-by{margin:clamp(24px,3.2vh,34px) 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px;
  font:500 12.5px/1.5 var(--f);color:rgba(238,241,251,.64)}
.t-by b{font-weight:600;color:#fff}
.t-by>span{display:flex;align-items:center;white-space:pre}
.t-by>span+span::before{content:"";width:3px;height:3px;margin-right:20px;border-radius:50%;background:currentColor;opacity:.5}

/* on the cover: the painting, hung with its label */
.oncover{max-width:1100px;margin:0 auto;padding:0 var(--gut) clamp(50px,8vh,90px)}
.oncover>.kick{margin:0 0 clamp(20px,3vh,30px);color:rgba(238,241,251,.72)}
.oc-hang{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(240px,.8fr);gap:clamp(20px,2.8vw,42px);align-items:end}
.oc-frame{margin:0;padding:clamp(10px,1.3vw,18px);background:#fbf9f4;border-radius:2px;
  box-shadow:0 0 0 clamp(5px,.6vw,8px) #16130f,0 46px 70px -30px rgba(0,0,0,.65),0 6px 16px rgba(0,0,0,.3)}
.oc-frame img{width:100%;height:auto}
.label{background:var(--paper);color:var(--ink-t);padding:clamp(18px,2vw,26px);border-radius:2px;
  font:400 13.5px/1.55 var(--f);box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
.label p{margin:0}
.label .who{font:600 15px/1.3 var(--f)}
.label .life{margin-top:3px;color:var(--ink-2)}
.label .ti{margin-top:12px;font:italic 400 17px/1.3 var(--i)}
.label .ti span{font-style:normal;font-family:var(--f);font-size:14px}
.label .md{margin-top:10px;color:var(--ink-2)}
.label .line{margin-top:14px;padding-top:12px;border-top:1px solid rgba(21,22,26,.14);color:var(--ink-t)}

/* ---------- the reading: a column of panels, one body size throughout ---------- */
.t-body{display:grid;gap:clamp(16px,2.4vh,26px)}
.plq{--fs:clamp(16px,1.18vw,17.5px);border-radius:3px;padding:clamp(30px,4.2vw,64px) clamp(22px,4.4vw,64px);box-shadow:0 30px 60px -40px rgba(0,0,0,.8)}
.c-paper{background:var(--paper);color:var(--ink-t)}
.c-stone{background:var(--stone);color:var(--ink-t)}
.c-clay{background:var(--clay);color:var(--ink-t)}
.c-ink{background:var(--ink);color:#ece9e1}
.plq p{margin:0 0 1.15em;font:400 var(--fs)/1.86 var(--f);letter-spacing:-.003em}
.plq p:last-child{margin-bottom:0}
.plq h2{margin:0 0 clamp(20px,2.8vh,30px);font:400 clamp(28px,3.3vw,46px)/1.04 var(--c);letter-spacing:-.01em}
/* the words that are hers to keep: always in Caslon italic */
.plq i,.plq em,.plq h2 i{font-style:italic;font-family:var(--i);font-size:1.02em;line-height:1;letter-spacing:0}
/* in the display headings, the italic is the display face itself, slanted, so it keeps the heading's weight */
.plq h2 i{font-family:var(--c);font-size:1em;font-synthesis:style}
.plq b{font-weight:600}
.plq blockquote{margin:clamp(22px,3.4vh,32px) 0;padding:0 0 0 clamp(16px,2.2vw,26px);border-left:2px solid rgba(21,22,26,.22)}
.plq blockquote p{font-family:var(--i);font-style:italic;font-size:calc(var(--fs) * 1.05);color:#2a2b31}

/* links: a thin line of highlighter that floods the word when you reach for it */
.plq a{color:inherit;text-decoration:none;padding:0 .08em;margin:0 -.08em;border-radius:2px;
  background:linear-gradient(rgba(237,255,6,.85),rgba(237,255,6,.85)) 0 100%/100% .22em no-repeat;
  transition:background-size .45s var(--e-out),color .3s}
.plq a:hover,.plq a:focus-visible{background-size:100% 100%;color:#0a0a0a}
.c-ink a{background-image:linear-gradient(rgba(237,255,6,.7),rgba(237,255,6,.7))}

/* ---------- the highlighter: drawn on as you reach it, line by line ---------- */
.mk{background:linear-gradient(100deg,rgba(237,255,6,.38),rgba(237,255,6,.7) 4%,rgba(237,255,6,.62) 96%,rgba(237,255,6,.3)) 0 70%/0% .9em no-repeat;
  padding:.04em .1em;margin:0 -.1em;transition:background-size 1.6s var(--e-out) .2s}
.plq.in .mk{background-size:100% .9em}
.c-ink .mk{background-image:linear-gradient(rgba(237,255,6,.3),rgba(237,255,6,.3))}
/* a more formal emphasis — a fine rule, not a marker fill — for a line that wants weight without shouting */
.mk-form{background:none;padding:0;border-bottom:1.5px solid currentColor;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;
  border-bottom:none;transition:background-size 1.4s var(--e-out) .2s}
.plq.in .mk-form{background-size:100% 1.5px}
/* a loose maroon ring, drawn in and traced again a few times so it's noticed */
.ci{position:relative;display:inline-block;white-space:nowrap}
.ci svg{position:absolute;left:-13%;top:-24%;width:128%;max-width:none;height:150%;overflow:visible;pointer-events:none}
.ci path{fill:none;stroke:#8c1d12;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.plq.in .ci path{animation:circleIt 2.3s var(--e-out) .3s 3}
@keyframes circleIt{0%{stroke-dashoffset:1}42%,58%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.c-ink .ci path{stroke:var(--acid)}
.ty::after{content:"";display:inline-block;width:.08em;height:1em;margin-left:.06em;background:currentColor;vertical-align:-.12em;animation:caret 1s steps(2) infinite}
.ty.done::after{display:none}
@keyframes caret{50%{opacity:0}}

/* a small comic-book "???" that appears right beside the word, typed in once and gone —
   kept inline (not floated above) so it can never collide with the line above it */
.ty-bubble-wrap{white-space:nowrap}
.ty-bubble-tip{display:inline-block;vertical-align:.25em;margin-left:.35em;max-width:0;overflow:hidden;
  padding:.1em 0;border-radius:999px;background:#1c1d22;color:#fff;
  font:700 .62em/1 var(--f);letter-spacing:.02em;white-space:nowrap;
  opacity:0;transition:opacity .2s,max-width .35s var(--e-out),padding .35s var(--e-out)}
.ty-bubble-wrap.ty-bubble-on .ty-bubble-tip{opacity:1;max-width:3em;padding:.1em .5em}
.c-ink .ty-bubble-tip{background:var(--acid);color:#0a0a0a}

.plq .sign{margin-top:clamp(28px,4.2vh,44px);padding-top:clamp(22px,3vh,30px);border-top:1px solid rgba(21,22,26,.16);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.plq .sign b{display:block;font:italic 400 clamp(22px,2vw,28px)/1.2 var(--i)}
.plq .sign span{display:block;margin-top:8px;font:500 12.5px/1.5 var(--f);color:var(--ink-2)}
.c-ink .sign{border-top-color:rgba(236,233,225,.2)}
.c-ink .sign span{color:rgba(236,233,225,.6)}
.stamp{display:flex;align-items:center;gap:14px;max-width:290px}
.stamp img{width:80px;height:auto;flex:none}
.stamp .st,.plq .sign .stamp .st{display:block;margin:0;font:500 10.5px/1.55 var(--f);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2)}
.stamp .st-t,.plq .sign .stamp .st-t{display:block;margin:0;color:var(--ink-t);font-weight:600;letter-spacing:.06em}

/* the same stamp, set quietly into the title header */
.t-stamp{display:inline-flex;align-items:center;gap:10px;margin:clamp(22px,3vh,30px) auto 0;padding:7px 16px 7px 7px;
  border:1px solid rgba(238,241,251,.22);border-radius:999px;background:rgba(255,255,255,.03)}
.t-stamp img{width:34px;height:34px;flex:none;border-radius:50%}
.t-stamp .st{font:500 9.5px/1.4 var(--f);letter-spacing:.09em;text-transform:uppercase;color:rgba(238,241,251,.56);text-align:left}
.t-stamp .st-t{display:block;color:rgba(238,241,251,.92);font-weight:600;letter-spacing:.05em}

/* how far you have read, and how many words of it */
.rail{position:fixed;right:clamp(12px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:120;display:grid;gap:14px;justify-items:center;
  opacity:0;transition:opacity .5s var(--e);pointer-events:none}
.rail.on{opacity:1}
.rail .trk{position:relative;width:2px;height:clamp(90px,16vh,150px);background:rgba(255,255,255,.22);border-radius:2px;overflow:hidden}
.rail .trk i{position:absolute;inset:0 0 auto 0;height:var(--p,0%);background:var(--rail);border-radius:2px}
.rail .n{font:600 14px/1 var(--f);letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums}
.rail .l{margin-top:-7px;font:600 8.5px/1.3 var(--f);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}

/* the share card, at the end of the issue */
.t-share{margin:clamp(36px,5vh,64px) auto clamp(80px,13vh,150px)}
.t-share-in{background:#0a0a0b;border-radius:3px;padding:clamp(28px,4vw,52px);display:grid;gap:clamp(22px,3vw,32px);
  grid-template-columns:minmax(0,1fr) auto;align-items:center}
.t-share .kick{color:var(--acid)}
.t-share h3{margin:14px 0 0;font:400 clamp(22px,2.3vw,32px)/1.1 var(--c);letter-spacing:-.01em;color:#fff}
.t-share p{margin:8px 0 0;font:400 13.5px/1.5 var(--f);color:var(--mute-2)}
.share-row{display:flex;flex-wrap:wrap;gap:8px}
.share-row a,.share-row button{display:inline-flex;align-items:center;height:42px;padding:0 17px;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  background:none;cursor:pointer;font:600 11px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:#fff;text-decoration:none;
  transition:background .25s,color .25s,border-color .25s}
.share-row a:hover,.share-row button:hover,.share-row button.done{background:var(--acid);border-color:var(--acid);color:#0a0a0a}

@media (max-width:900px){
  .oc-hang{grid-template-columns:1fr}
  .label{max-width:560px}
  .t-share-in{grid-template-columns:1fr}
}
@media (max-width:760px){
  .rail{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));right:14px;transform:none;grid-auto-flow:column;align-items:center;gap:9px;
    padding:9px 14px;border-radius:999px;background:rgba(10,10,11,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .rail .trk{width:46px;height:2px}
  .rail .trk i{inset:0 auto 0 0;width:var(--p,0%);height:100%}
  .rail .n{font-size:13px}
  .rail .l{margin:0;font-size:8.5px}
}