/* ---------- Art: "Arts & Culture", four series of illustrations on a strict grid ---------- */
.arts{padding-top:48px;padding-bottom:24px}
.arts-head{padding:22px 0 30px}
.arts-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,6.4vw,84px);line-height:1;letter-spacing:-.015em}
.series-nav{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;margin-top:18px;font-size:15px;font-weight:500}
.series-nav a{text-decoration:none;border-bottom:1px solid transparent;padding:2px 0}
.series-nav a:hover{border-bottom-color:var(--ink)}
.series-nav .dot{color:var(--ink-soft);padding:0 12px}

/* a series: thin rule, small heading, then its grid */
.series{border-top:1px solid var(--ink);padding:18px 0 72px;scroll-margin-top:24px}
.series-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:26px}
.series-head h2{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.1}
/* each series title sits on one of Angie's kraft strips; the first strip carries the daisies */
.series-head h2{position:relative;isolation:isolate;display:inline-block;padding:.32em 1.05em .36em .8em;margin-left:-.4em}
.series-head h2::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--lbl) center/100% 100% no-repeat;transform:rotate(var(--lbl-r,-1deg)) scaleX(var(--lbl-x,1));
  filter:drop-shadow(0 1px 1.5px rgba(62,39,35,.25))}
.series:nth-of-type(4n+1) .series-head h2{--lbl:url(../images/collage/daisy-label-1.webp);padding:.9em 1.1em .55em 2.9em;margin-left:-1.4em;--lbl-r:-1.5deg}
.series:nth-of-type(4n+2) .series-head h2{--lbl:url(../images/collage/daisy-label-3.webp);--lbl-r:1deg}
.series:nth-of-type(4n+3) .series-head h2{--lbl:url(../images/collage/daisy-label-2.webp);--lbl-r:-.6deg}
.series:nth-of-type(4n+4) .series-head h2{--lbl:url(../images/collage/daisy-label-3.webp);--lbl-x:-1;--lbl-r:.8deg}
.anim .series-head h2::before{opacity:0;transform:translateX(-8px) rotate(var(--lbl-r,-1deg)) scaleX(var(--lbl-x,1));transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.anim .series.seen .series-head h2::before{opacity:1;transform:rotate(var(--lbl-r,-1deg)) scaleX(var(--lbl-x,1))}

/* 12 columns, 24px gutters; the lead takes 7, the side column 5, the rest sit in even rows below */
.series-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.lead-left  .lead{grid-column:1 / span 7;grid-row:1}
.lead-left  .side{grid-column:8 / span 5;grid-row:1}
.lead-right .lead{grid-column:6 / span 7;grid-row:1}
.lead-right .side{grid-column:1 / span 5;grid-row:1}
.side{display:flex;flex-direction:column;gap:24px}
.row{grid-column:1 / -1;display:grid;grid-template-columns:repeat(var(--k),minmax(0,1fr));gap:24px;align-items:start}
.row-wide{grid-template-columns:minmax(0,1fr)}

/* each piece is printed straight onto the page: full artwork, a hairline border, nothing else */
.piece{margin:0}
.frame{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease}
.frame img{display:block;width:100%;height:auto;border:1px solid rgba(62,39,35,.15);background:#EEE3D1}
.piece figcaption{font-family:var(--type);font-size:12px;letter-spacing:.05em;line-height:1.4;color:var(--ink);margin-top:9px;
  display:inline-block;padding:5px 9px 4px;background:var(--paper-tex)}  /* caption slip on handmade paper */
.frame:focus-visible{outline:2px solid var(--raspberry);outline-offset:5px}

/* the one accent per series: the lead gets a strip of kraft tape and a slight tilt */
.lead .frame{position:relative;transform:rotate(1.5deg)}
.lead .frame::before{content:"";position:absolute;z-index:2;top:0;left:50%;width:104px;height:auto;aspect-ratio:var(--kt-ar);margin-left:-52px;
  background:var(--kt) center/100% 100% no-repeat;opacity:var(--kt-o);transform:translateY(-50%) rotate(var(--tape-r,var(--kt-r)));pointer-events:none}

/* hover: lift 4px with a soft shadow */
@media (hover:hover) and (pointer:fine){
  .frame:hover{transform:translateY(-4px);box-shadow:0 14px 22px -14px rgba(62,39,35,.45)}
  .lead .frame:hover{transform:rotate(1.5deg) translateY(-4px)}
}

/* print-in, once per piece */
.anim .piece .frame img{clip-path:inset(0 0 100% 0)}
.anim .piece.printed .frame img{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease)}

/* ---------- the "front page" large view ---------- */
.front-view{border:0;padding:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;overflow:hidden;color:var(--ink);
  background-color:var(--newsprint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.front-view::backdrop{background:var(--newsprint)}
.fv-page{height:100%;max-width:1240px;margin:0 auto;padding:22px 96px 28px;display:flex;flex-direction:column}
.fv-top{display:flex;justify-content:flex-end;align-items:center;padding-bottom:12px}
.fv-rule{border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);height:7px}
.fv-rule.thin{border-top-width:1px;height:0;border-bottom:0}
.fv-dateline{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-family:var(--type);font-size:12.5px;letter-spacing:.07em}
.fv-count{white-space:nowrap}
.fv-title{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,64px);line-height:1.05;letter-spacing:-.015em;text-align:center;padding:16px 0 18px}
.fv-title[hidden]{display:none}
.fv-title[hidden] + .fv-figure{margin-top:22px}
.fv-figure{flex:1 1 0;min-height:0;margin:0;display:flex;align-items:center;justify-content:center}
.fv-figure img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border:1px solid rgba(62,39,35,.15);
  box-shadow:0 18px 30px -22px rgba(62,39,35,.5)}
.front-view button{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--ink);border-radius:50%;
  background:var(--paper-card);color:var(--ink);font-family:var(--type);font-size:19px;line-height:1;cursor:pointer}
.front-view button:hover{background:var(--ink);color:var(--paper)}
.front-view button:focus-visible{outline:2px solid var(--raspberry);outline-offset:3px}
.front-view .fv-close{width:40px;height:40px;font-size:15px}
.fv-prev,.fv-next{position:fixed;top:50%;margin-top:-24px}
.fv-prev{left:max(20px, calc(50% - 600px))} .fv-next{right:max(20px, calc(50% - 600px))}

@media (max-width:900px){
  .arts{padding-top:32px}
  .series{padding-bottom:56px}
  /* tablet: leads full width, everything else in two even columns */
  .series-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .series-grid .lead{grid-column:1 / -1;grid-row:auto}
  .side,.row{display:contents}
  .piece.wide{grid-column:1 / -1}
  .fv-page{padding:16px 16px 84px}
  .fv-prev,.fv-next{top:auto;bottom:20px;margin-top:0}
  .fv-prev{left:calc(50% - 60px)} .fv-next{right:calc(50% - 60px)}
}
@media (max-width:420px){
  .series-grid{grid-template-columns:minmax(0,1fr)}
  .series-nav{font-size:14px} .series-nav .dot{padding:0 8px}
  .fv-dateline{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .frame{transition:none}
  .frame:hover{transform:none;box-shadow:none}
  .lead .frame:hover{transform:rotate(1.5deg)}
}
@media (max-width:600px){ .series:nth-of-type(4n+1) .series-head h2{margin-left:-.55em} }