/* Frost, up close: pictures in full color, wall to wall, notes on paper. */
.fz{--m:clamp(16px,4vw,64px);background:#f8f6f0;color:#0e243a;font-family:'Public Sans',system-ui,sans-serif}
.fz *{box-sizing:border-box}
.fz figure{margin:0}
.fz img{display:block;width:100%;height:100%;object-fit:cover}
html:not(#tgc-sq) body main.fz :is(img,figure){border-radius:0!important}
.fz a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.fz-cover{aspect-ratio:1456/620;max-height:76vh;width:100%;background:#b0dff6}
.fz-top{padding:clamp(28px,4vw,60px) var(--m) clamp(20px,3vw,40px)}
.fz-k{margin:0;font:600 13px/1.3 'Red Hat Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
.fz-top h1{margin:10px 0 0;font:800 clamp(64px,12vw,200px)/1 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:-.02em}
.fz-dek{margin:16px 0 0;max-width:38ch;font:500 clamp(20px,2.2vw,28px)/1.28 'Public Sans',system-ui,sans-serif}
.fz-toc{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;font:600 16px/1.3 'Public Sans',system-ui,sans-serif}
.fz-toc a{display:inline-flex;align-items:center;min-height:32px}
.fz-gh{display:grid;grid-template-columns:minmax(60px,1fr) minmax(0,5fr) minmax(0,6fr);gap:6px clamp(16px,3vw,48px);align-items:baseline;padding:clamp(36px,5vw,72px) var(--m) clamp(16px,2vw,28px)}
.fz-n{font:500 15px/1 'Red Hat Mono',ui-monospace,monospace}
.fz-gh h2{margin:0;font:800 clamp(38px,4.6vw,72px)/1 'Barlow Condensed','Arial Narrow',sans-serif;scroll-margin-top:150px}
.fz-gh p{margin:0;max-width:60ch;font:400 clamp(17px,1.4vw,19px)/1.5 'Public Sans',system-ui,sans-serif}
.fz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:14vw;gap:2px}
.fz-grid figure{min-width:0;min-height:0;overflow:hidden;background:#b0dff6}
.fz-big{grid-column:span 2;grid-row:span 2}
.fz-grid figure:nth-child(4){grid-column:span 2}
.fz-rev .fz-big{grid-column:3/5;grid-row:1/3}
.fz-rev figure:nth-child(2){grid-column:1;grid-row:1}.fz-rev figure:nth-child(3){grid-column:2;grid-row:1}.fz-rev figure:nth-child(4){grid-column:1/3;grid-row:2}
.fz-three figure:nth-child(n+2){grid-column:span 2}
.fz-three.fz-rev figure:nth-child(2){grid-column:1/3;grid-row:1}.fz-three.fz-rev figure:nth-child(3){grid-column:1/3;grid-row:2}
/* the picture-to-line slider */
.fz-cmp{position:relative;--p:50%}
.fz-cmp img{position:absolute;inset:0}
.fz-line{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.fz-h{position:absolute;top:0;bottom:0;left:var(--p);width:4px;margin-left:-2px;background:#f8f6f0;pointer-events:none}
.fz-h::after{content:"‹ ›";position:absolute;top:50%;left:50%;display:grid;place-items:center;width:52px;height:44px;margin:-22px 0 0 -26px;background:#0e243a;color:#f8f6f0;font:700 20px/1 'Public Sans',sans-serif;letter-spacing:.1em}
.fz-tag{position:absolute;bottom:0;padding:7px 11px;background:#0e243a;color:#f8f6f0;font:600 13px/1 'Red Hat Mono',ui-monospace,monospace;pointer-events:none}
.fz-tag-l{left:0}.fz-tag-r{right:0}
.fz-cmp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.fz-cmp input:focus-visible~*{outline:0}
.fz-cmp:focus-within .fz-h::after{background:#c8202f}
.fz-plates{padding-bottom:clamp(36px,5vw,72px)}
.fz-pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);padding:0 var(--m)}
.fz-pgrid img{aspect-ratio:3/4;height:auto;box-shadow:0 0 0 1px #0e243a26}
.fz-pgrid figcaption{margin-top:10px;font:400 16px/1.35 'Public Sans',system-ui,sans-serif}
.fz-pgrid strong{display:block;font:800 25px/1.1 'Barlow Condensed','Arial Narrow',sans-serif}
.fz-fine{margin:clamp(28px,4vw,48px) var(--m) 0;max-width:68ch;font:400 16px/1.5 'Public Sans',system-ui,sans-serif}
@media(max-width:820px){
.fz-cover{aspect-ratio:4/3}
.fz-gh{grid-template-columns:minmax(0,1fr)}
.fz-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:28vw}
.fz-big,.fz-rev .fz-big{grid-column:1/3;grid-row:span 2}
.fz-rev figure:nth-child(2),.fz-rev figure:nth-child(3),.fz-rev figure:nth-child(4),.fz-three.fz-rev figure:nth-child(2),.fz-three.fz-rev figure:nth-child(3){grid-column:auto;grid-row:auto}
.fz-three figure:nth-child(n+2){grid-column:auto}
.fz-grid figure:nth-child(4),.fz-rev figure:nth-child(4){grid-column:1/3;grid-row:span 2}
.fz-pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
html:not(#tgc-sq) body main.fz .fz-toc{border:0;padding:0}
html:not(#tgc-sq) body main.fz .fz-pgrid figcaption,html:not(#tgc-sq) body main.fz .fz-pgrid strong{color:#0e243a}