/* The about page (about.html): a magazine spread on one white sheet over the homepage's sky, set in the site's type
   and navy ink. A big two-line headline, the portrait beside the intro, then two more photographs as plates with a
   pull quote. Layered over styles.css, prototype.css and blue.css for the header, footer and colours. */

body{background:linear-gradient(#c6dbf0,#b3cfec 45%,#bed6ef) fixed}
.about-page .site-header{position:relative} /* the header scrolls away rather than floating over the spread */

.about{padding:clamp(16px,4vw,48px) 16px clamp(48px,8vw,96px)}
.about-sheet{max-width:1180px;margin:0 auto;padding:clamp(24px,5.5vw,80px);border-radius:18px;background:#fbfcfd;color:var(--forest);
 box-shadow:0 0 0 1px #14233a0a,0 1px 2px #14233a0f,0 24px 60px -24px #14233a40}

/* Small running heads, like the top of a magazine page */
.about-masthead,.about-colophon span{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted)}
.about-masthead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin:0 0 clamp(28px,5vw,64px);padding-bottom:14px;border-bottom:1px solid #0f2c5626}

.about h1{margin:0 0 clamp(36px,6vw,88px);font-family:var(--serif);font-weight:400;font-size:clamp(50px,9.4vw,128px);line-height:.92;letter-spacing:-.025em;text-wrap:balance}
.about h1 em{display:block;margin-left:clamp(0px,9vw,150px);color:var(--accent)}

/* The portrait beside the intro */
.about-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:end}
.about figure{margin:0}
.about figure img{display:block;width:100%;height:auto;border-radius:6px;background:#e3e9f1;box-shadow:0 0 0 1px #0f2c5612}
.about-portrait{position:relative}
/* The portrait's credit, with the photographer linked */
.about-credit{margin-top:12px;font-size:13px;font-weight:500;line-height:1.5;color:var(--ink-muted)}
.about-credit a{text-decoration:underline;text-decoration-color:#0f2c5659;text-underline-offset:3px;color:var(--forest);transition:text-decoration-color .2s}
.about-credit a:hover{text-decoration-color:currentColor}
.about-lede{margin:0 0 24px;font-family:var(--serif);font-size:clamp(26px,2.9vw,38px);line-height:1.16;letter-spacing:-.01em;text-wrap:pretty}
.about-text p{max-width:34em}
.about-text p:not(.about-lede){margin:0 0 14px;font-size:17px;line-height:1.75;color:#40597d}
.about-text p.about-note{margin-top:20px;font-size:13px;color:var(--ink-muted)}
/* A signature under the intro, written left to right by a soft-edged mask once it scrolls into view (the script at
   the foot of about.html adds .is-waiting, then .is-signed). Padding gives the script's swashes room inside the mask */
.about-signature{margin-top:6px;font-family:"Mrs Saint Delafield",cursive;font-size:clamp(60px,6vw,76px);line-height:1;color:var(--forest)}
.about-signature span{display:inline-block;padding:.25em .4em .25em .3em;margin:-.25em -.4em -.25em -.3em}
@media (prefers-reduced-motion:no-preference){
 .about-signature.is-waiting span{-webkit-mask:linear-gradient(90deg,#000 40%,#0000 60%) 100% 0/250% 100% no-repeat;mask:linear-gradient(90deg,#000 40%,#0000 60%) 100% 0/250% 100% no-repeat}
 .about-signature.is-signed span{animation:about-sign 1.9s cubic-bezier(.45,.05,.4,1) .15s forwards}
 @keyframes about-sign{to{-webkit-mask-position:0 0;mask-position:0 0}}
}
.about-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:32px}
.about-links a{padding-bottom:4px;border-bottom:1px solid #0f2c5640;font-size:14px;letter-spacing:.02em;color:var(--forest);transition:border-color .2s}
.about-links a:hover{border-bottom-color:currentColor}

/* Two more photographs: the gallery shot tall on the left, the pull quote and the black-and-white shot on the right */
.about-plates{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"gallery quote" "gallery projection";grid-template-rows:auto 1fr;
 gap:clamp(28px,4vw,56px) clamp(24px,4vw,56px);margin-top:clamp(64px,10vw,140px)}
.plate-gallery{grid-area:gallery}
.plate-projection{grid-area:projection;align-self:end}
.about-quote{grid-area:quote;margin:0;padding-top:20px;border-top:1px solid #4a72a866}
.about-quote p{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(28px,3.2vw,44px);line-height:1.1;letter-spacing:-.01em;color:var(--accent);text-wrap:balance}

/* The brands Janus has partnered with, a step up from the note below it: a big serif heading on the left, like the
   page's headline, and a two-column A to Z list of names on the right that reads down each column */
.about-partners{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-rows:auto 1fr;column-gap:clamp(32px,6vw,96px);
 margin-top:clamp(64px,9vw,128px);padding-top:clamp(28px,4vw,44px);border-top:2px solid var(--forest)}
.about-partners h2{grid-column:1;margin:0;font-family:var(--serif);font-size:clamp(44px,5.4vw,76px);font-weight:400;line-height:.95;letter-spacing:-.025em}
.about-partners h2 em{display:block;color:var(--accent)}
.about-partners p{grid-column:1;grid-row:2;align-self:start;max-width:16em;margin:22px 0 0;font-size:15px;line-height:1.6;color:#5a6f8c}
.about-partners ul{grid-column:2;grid-row:1/span 2;columns:2;column-gap:clamp(24px,3vw,48px);margin:0;padding:0;list-style:none;
 font-family:var(--serif);font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-.01em}
.about-partners li{margin-bottom:12px;padding:6px 0 14px;border-bottom:1px solid #0f2c561a;break-inside:avoid}

/* The thank-you note at the foot of the sheet */
.about-colophon{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:clamp(56px,8vw,112px);padding-top:20px;border-top:1px solid #0f2c561a}
.about-colophon strong{font-size:15px;font-weight:550}
.about-colophon p{flex-basis:100%;margin:0;font-size:14px;line-height:1.6;color:#5a6f8c}

/* The spread settles in as the page opens */
@media (prefers-reduced-motion:no-preference){
 .about-sheet>*{animation:about-rise .9s var(--ease) both}
 .about-sheet>h1{animation-delay:.08s}
 .about-sheet>.about-intro{animation-delay:.18s}
 .about-sheet>.about-plates{animation-delay:.28s}
 @keyframes about-rise{from{opacity:0;transform:translateY(14px)}}
}

/* One column on phones and narrow windows: headline, portrait, intro, then the plates in order, and the partners'
   heading above their list */
@media (max-width:820px){
 .about-intro,.about-plates,.about-partners{grid-template-columns:1fr}
 .about-plates{grid-template-areas:"gallery" "quote" "projection";grid-template-rows:none}
 .about-portrait{max-width:520px}
 .about-partners{grid-template-rows:none}
 .about-partners h2{margin-bottom:28px}
 .about-partners ul,.about-partners p{grid-column:1;grid-row:auto}
}