/* Inner pages of both albums: a page hero, alternating folios, the provenance folio, the form. */

.page-hero{padding-top:calc(var(--bar-h) + var(--s7));padding-bottom:var(--s7);align-items:end;row-gap:var(--s6)}
.ph-text{grid-column:1/8;display:grid;gap:var(--s4);align-content:end}
.ph-text .display{font-size:clamp(46px,6.2vw,112px)}
.ph-text .lead{max-width:30ch}
.ph-art{grid-column:8/13;align-self:center}
.ph-art .plate-art{max-height:calc(62 * var(--svh))}
@media (max-width:899px){.ph-text,.ph-art{grid-column:1/-1}}

.toc{display:grid;margin-top:var(--s4);border-top:1px solid var(--rule);max-width:560px}
.toc a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);text-decoration:none;font:400 clamp(19px,1vw + 12px,24px)/1.2 var(--display);transition:color .3s,padding .5s var(--paper-ease)}
.toc a::after{content:"↓";font:400 16px/1 var(--label);color:var(--ink-3);transition:transform .5s var(--paper-ease)}
.toc a:hover{color:var(--accent);padding-left:10px}
.toc a:hover::after{transform:translateY(3px);color:var(--accent)}

.row{padding-block:var(--s7);align-items:center;row-gap:var(--s5);border-top:1px solid var(--rule)}
.row-text{grid-column:1/7;display:grid;gap:var(--s4);align-content:center}
.row-art{grid-column:8/13}
.row--flip .row-text{grid-column:7/13;grid-row:1}
.row--flip .row-art{grid-column:1/6;grid-row:1}
.row-text .label{color:var(--accent)}
.row-text .body{color:var(--ink-2)}
.row .plate-art{max-height:calc(66 * var(--svh))}
@media (max-width:899px){
  .row-text,.row-art,.row--flip .row-text,.row--flip .row-art{grid-column:1/-1;grid-row:auto}
  .row-art{order:-1}
}

.founders-pair{row-gap:var(--s6)}
.pair-intro{grid-column:1/8;font:300 clamp(21px,1vw + 16px,28px)/1.35 var(--read-d)}
.founder{grid-column:span 6;display:grid;gap:var(--s3);align-content:start;padding:var(--s5);background:var(--folio);box-shadow:0 0 0 1px var(--rule)}
.founder p:not(.label){color:var(--ink-2)}
@media (max-width:899px){.pair-intro,.founder{grid-column:1/-1}}

/* The provenance folio */
.provs{display:grid;gap:0;border-top:1px solid var(--rule)}
.prov{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--g);padding:var(--s5) 0;border-bottom:1px solid var(--rule);scroll-margin-top:calc(var(--bar-h) + 16px)}
.prov:target{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 60%)}
.prov-art img{width:100%;max-width:280px}
.prov-text{display:grid;gap:8px;align-content:start}
.prov-src{display:grid;gap:12px;margin-top:var(--s3);counter-reset:s}
.prov-src li{display:grid;gap:2px;padding-left:28px;position:relative;counter-increment:s}
.prov-src li::before{content:counter(s);position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:600 10px/18px var(--label);text-align:center}
.prov-src a{color:inherit;text-decoration-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.prov-src li > a:first-child{font:400 18px/1.3 var(--read)}
.prov-src span{font-size:14px;color:var(--ink-2)}
.prov-src .used{font-style:italic;color:var(--ink-3)}
@media (max-width:699px){.prov{grid-template-columns:1fr}.prov-art img{max-width:220px}}
.credits{display:grid;gap:10px;margin-top:var(--s4)}
.credits li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:var(--g);padding-bottom:10px;border-bottom:1px solid var(--rule-2)}
.credits b{font:400 18px/1.3 var(--display)}
.credits span{font-size:15px;color:var(--ink-2)}
.credits a{color:inherit}
@media (max-width:699px){.credits li{grid-template-columns:1fr;gap:2px}}

/* The enquiry form: fields drawn like a register */
.enquiry{align-items:start}
.enq-art{grid-column:1/5;position:sticky;top:calc(var(--bar-h) + 24px)}
.form{grid-column:6/13;display:grid;gap:var(--s4)}
@media (max-width:899px){.enq-art{grid-column:1/-1;position:relative;top:0;max-width:300px;justify-self:center}.form{grid-column:1/-1}}
.field{display:grid;gap:6px}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--g)}
@media (max-width:599px){.field-pair{grid-template-columns:1fr}}
.field label{display:flex;justify-content:space-between;gap:12px;font:560 11px/1.3 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.field label span{color:var(--ink-3);letter-spacing:.1em}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 0;border:0;border-bottom:1px solid var(--ink-3);background:transparent;color:var(--ink);
  font:400 19px/1.4 var(--read);border-radius:0;appearance:none;-webkit-appearance:none;transition:border-color .3s,background-size .6s var(--paper-ease);
  background-image:linear-gradient(var(--accent),var(--accent));background-size:0 2px;background-position:0 100%;background-repeat:no-repeat}
.field select{background-image:linear-gradient(var(--accent),var(--accent)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A7E6E' stroke-width='1.4'/%3E%3C/svg%3E");background-position:0 100%,right 4px center;background-size:0 2px,12px 8px;cursor:pointer}
.field textarea{resize:vertical;min-height:150px;padding:12px;border:1px solid var(--ink-3);background-color:var(--folio)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background-size:100% 2px}
.field select:focus{background-size:100% 2px,12px 8px}
.field [aria-invalid="true"]{border-color:var(--accent)}
.help{font-size:14px;color:var(--ink-3)}
.err{font:600 12px/1.3 var(--label);letter-spacing:.04em;color:var(--accent)}
.form-summary{padding:12px 14px;border-left:3px solid var(--accent);background:var(--folio);font-size:15px}

/* A page's own folios, fanned like loose leaves in a hand. The contents list beside it lifts the matching leaf. */
.fan{position:relative;min-height:clamp(320px,34vw,520px);--c:1.5}
.fan:has(> .fan-leaf:nth-child(3):last-child){--c:1}
.fan-leaf{--d:calc(var(--i) - var(--c));position:absolute;top:50%;left:50%;width:clamp(150px,14vw,220px);padding:10px 10px 30px;background:var(--folio);box-shadow:0 0 0 1px var(--rule),0 24px 40px -28px rgba(var(--shadow),.7);text-decoration:none;
  transform:translate(-50%,-50%) translateX(calc(var(--d) * 40%)) rotate(calc(var(--d) * 6deg));transform-origin:50% 120%;transition:transform .7s var(--settle),box-shadow .5s;z-index:calc(var(--i) + 1)}
.fan-leaf img{width:100%;aspect-ratio:4/4.4;object-fit:contain}
.fan-leaf span{position:absolute;left:10px;right:10px;bottom:9px;font:560 9.5px/1.3 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .5s var(--settle)}
.fan:hover .fan-leaf,.fan.has-lift .fan-leaf{transform:translate(-50%,-50%) translateX(calc(var(--d) * 49%)) rotate(calc(var(--d) * 8deg))}
.fan .fan-leaf:is(:hover,:focus-visible,.lift){z-index:9;transform:translate(-50%,-50%) translateX(calc(var(--d) * 49%)) translateY(-16px) rotate(0deg);box-shadow:0 0 0 1px var(--accent),0 30px 50px -28px rgba(var(--shadow),.8)}
.fan .fan-leaf:is(:hover,:focus-visible,.lift) span{opacity:1;transform:none}
@media (max-width:899px){.fan{min-height:280px}.fan-leaf{width:128px}}
@media (prefers-reduced-motion:reduce){.fan-leaf,.fan-leaf span{transition:none}}