/* Post grids (M613 to M616, M618, M619, release 1.119.0): the twelve grid
   looks, a card's dress (label, meta line, picture shape and corners, card,
   rules, hover), the arrangements, the rail, the type sets and the section
   heading styles. Drawn by post-grids.php in the site's own tokens and faces.
   Class prefix pw-. */

/* Type sets' faces, open licence and served from the site; a browser loads
   one only when a set uses it. */
@font-face{font-family:"pw Barlow C";src:url(/assets/fonts/barlow-condensed-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"pw Barlow C";src:url(/assets/fonts/barlow-condensed-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"pw Fraunces";src:url(/assets/fonts/fraunces-variable-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"pw Mulish";src:url(/assets/fonts/mulish-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"pw Mulish";src:url(/assets/fonts/mulish-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"pw Jost";src:url(/assets/fonts/jost-variable-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"pw Inter";src:url(/assets/fonts/Inter-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"pw Inter";src:url(/assets/fonts/Inter-Regular.woff2) format("woff2");font-weight:400;font-display:swap}

.pw{--pw-gap:20px;--pw-r:10px;--pw-tf:var(--font-display);--pw-tw:800;--pw-tl:-.01em;--pw-ts:1;--pw-lf:var(--font-body);--pw-mf:var(--font-body);--pw-xf:var(--font-body);--pw-cat:var(--cat,var(--blue));
  display:grid;gap:var(--pw-gap);grid-template-columns:repeat(var(--pw-n,3),minmax(0,1fr))}
.pw a{color:inherit;text-decoration:none}
.pw-c{display:flex;flex-direction:column;gap:10px;min-width:0;color:var(--ink)}
.pw-pic{position:relative;display:block;overflow:hidden;aspect-ratio:3/2;border-radius:var(--pw-r);background:var(--surface)}
.pw-pic.is-empty{background:linear-gradient(135deg,var(--surface),color-mix(in oklab,var(--blue) 18%,var(--surface)))}
.pw-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pw--grow .pw-c:hover .pw-pic img{transform:scale(1.04)}
.pw-onpic{position:absolute;left:12px;bottom:12px;display:flex}
.pw-t{display:block;font-family:var(--pw-tf);font-weight:var(--pw-tw);letter-spacing:var(--pw-tl);color:var(--ink);text-wrap:pretty}
.pw-t--sm{font-size:calc(15.5px * var(--pw-ts));line-height:1.3}
.pw-t--md{font-size:calc(19px * var(--pw-ts));line-height:1.28}
.pw-t--lg{font-size:calc(23px * var(--pw-ts));line-height:1.25}
.pw-t--xl{font-size:calc(34px * var(--pw-ts));line-height:1.12;letter-spacing:calc(var(--pw-tl) - .01em)}
.pw-c:hover .pw-t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--pw-cat)}
.pw-x{color:var(--muted);font-family:var(--pw-xf);font-size:15px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pw-arr{color:var(--blue);margin-right:6px}

/* Labels: a category's colour as --cat on the label, the accent without one. */
.pw-l{--lc:var(--cat,var(--blue));display:inline-flex;align-items:center;align-self:flex-start;gap:7px;font:700 11px/1 var(--pw-lf);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.pw-l--dot{color:var(--ink)}
.pw-l--dot::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--lc)}
.pw-onpic .pw-l--dot{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.pw-onpic .pw-l--dot::before{box-shadow:0 0 0 2px #fff}
.pw-l--chip{background:var(--lc);color:#fff;padding:4px 7px;border-radius:2px}
.pw-l--pill{background:var(--lc);color:#fff;padding:5px 11px;border-radius:999px}
.pw-l--soft{background:color-mix(in oklab,var(--lc) 16%,#fff);color:color-mix(in oklab,var(--lc) 85%,#000);padding:7px 12px;border-radius:9px}
.pw-l--slant{background:var(--lc);color:#fff;padding:5px 14px;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.pw-l--words{color:var(--lc);letter-spacing:.02em;text-transform:none;font-size:13px}
.pw-l--words::before{content:"#";margin-right:-3px}
.pw-l--text{color:var(--lc);font-size:11.5px;font-weight:800;letter-spacing:.14em}
[data-theme="dark"] .pw-l--words,[data-theme="dark"] .pw-l--text{color:color-mix(in oklab,var(--lc) 55%,#fff)}
[data-theme="dark"] .pw-l--soft{background:color-mix(in oklab,var(--lc) 30%,var(--bg));color:color-mix(in oklab,var(--lc) 30%,#fff)}

/* Meta lines. */
.pw-m{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font:500 12.5px/1.5 var(--pw-mf);color:var(--muted)}
.pw-m b{color:var(--ink);font-weight:700}
.pw-m i{font-style:normal;opacity:.5}
.pw-m--mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.02em}
.pw-m--face{text-transform:uppercase;font-size:11px;letter-spacing:.04em}
.pw-face{width:22px;height:22px;border-radius:50%;object-fit:cover}
.pw-face.po-face--ini{display:inline-grid;place-items:center;font:700 9px/1 var(--font-body);letter-spacing:0;background:var(--blue);color:#fff}

/* The looks. */
.pw-c.pw-tile.is-big .pw-pic{aspect-ratio:5/4}
.pw-cols .pw-pic,.pw-small .pw-pic{aspect-ratio:16/9;border-radius:3px}
.pw-small .pw-pic{aspect-ratio:5/3;border-radius:var(--pw-r)}
.pw-c.pw-box,.pw-c.pw-boxbare,.pw-c.pw-listbox{border-radius:6px;background:var(--card,var(--bg));overflow:hidden;gap:0;border:1px solid var(--border);box-shadow:0 .125rem .25rem rgba(0,0,0,.075)}
[data-theme="dark"] .pw-c.pw-box,[data-theme="dark"] .pw-c.pw-boxbare,[data-theme="dark"] .pw-c.pw-listbox{background:color-mix(in oklab,var(--ink) 6%,var(--bg));box-shadow:none}
.pw-box .pw-pic{aspect-ratio:5/3;border-radius:0}
.pw-box .pw-in,.pw-boxbare .pw-in{display:flex;flex-direction:column;gap:10px;padding:20px 20px 22px}
.pw--side{--pw-n:2;gap:36px 44px}
.pw-c.pw-side{flex-direction:row;align-items:center;gap:24px}
.pw-side .pw-in{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}
.pw-side .pw-pic{flex:0 0 40%;aspect-ratio:5/3}
.pw-c.pw-listbox{flex-direction:row;min-height:150px}
.pw-listbox .pw-pic{flex:0 0 36%;aspect-ratio:auto;border-radius:0}
.pw-listbox .pw-in{flex:1;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:20px 22px;min-width:0}
.pw-c.pw-thumbs{flex-direction:row;align-items:center;gap:15px}
.pw-thumbs .pw-pic,.pw-c.pw-thumbs .pw-pic{flex:0 0 84px;aspect-ratio:1;border-radius:8px}
.pw-thumbs .pw-in,.pw-c.pw-thumbs .pw-in{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.pw-c.pw-plain{gap:9px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.pw-c.pw-over,.pw-c.pw-overrow{position:relative;justify-content:flex-end;min-height:340px;border-radius:13px;overflow:hidden;background:#111;color:#fff}
.pw-c.pw-overrow{min-height:400px}
.pw-over .pw-pic,.pw-overrow .pw-pic{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.pw-over .pw-in,.pw-overrow .pw-in{position:relative;display:flex;flex-direction:column;gap:10px;padding:110px 22px 22px;background:linear-gradient(to top,rgba(10,12,14,.92),rgba(10,12,14,.8) 45%,transparent)}
.pw-over .pw-t,.pw-overrow .pw-t,.pw-over .pw-m,.pw-overrow .pw-m,.pw-over .pw-m b,.pw-overrow .pw-m b,.pw-over .pw-l--dot,.pw-overrow .pw-l--dot{color:#fff}
.pw-over .pw-x{color:rgba(255,255,255,.82)}
/* The excerpt's length (M635) and Read more on the grid looks. */
.pw--xl-1 .pw-x{-webkit-line-clamp:1}.pw--xl-3 .pw-x{-webkit-line-clamp:3}.pw--xl-all .pw-x{-webkit-line-clamp:unset;display:block}
.pw-more{font-size:13.5px;font-weight:700;color:var(--blue)}
.pw-over .pw-more,.pw-overrow .pw-more{color:#fff}
.pw--num{--pw-n:2;gap:0 44px}
.pw-c.pw-num{flex-direction:row;gap:16px;padding:16px 0;border-bottom:1px solid var(--border)}
.pw-num .pw-in{display:flex;flex-direction:column;gap:8px;min-width:0}
.pw-n{flex:0 0 64px;font:800 46px/1 var(--pw-tf);letter-spacing:-.03em;color:color-mix(in oklab,var(--blue) 35%,transparent)}

/* A dress over the look's own. */
.pw--r-3x2 .pw-pic{aspect-ratio:3/2}.pw--r-5x3 .pw-pic{aspect-ratio:5/3}.pw--r-16x9 .pw-pic{aspect-ratio:16/9}.pw--r-1x1 .pw-pic{aspect-ratio:1}.pw--r-2x3 .pw-pic{aspect-ratio:2/3}
/* An overlay's picture fills its card and a small list's stays square, whatever shape the dress asks. */
.pw .pw-c.pw-over .pw-pic,.pw .pw-c.pw-overrow .pw-pic{aspect-ratio:auto}
.pw .pw-c.pw-thumbs .pw-pic{aspect-ratio:1}
.pw--k-none{--pw-r:0}.pw--k-small{--pw-r:4px}.pw--k-medium{--pw-r:10px}.pw--k-large{--pw-r:16px}
.pw[class*="pw--k-"] .pw-pic,.pw[class*="pw--k-"] .pw-c.pw-box,.pw[class*="pw--k-"] .pw-c.pw-boxbare,.pw[class*="pw--k-"] .pw-c.pw-listbox,.pw[class*="pw--k-"] .pw-c.pw-over,.pw[class*="pw--k-"] .pw-c.pw-overrow{border-radius:var(--pw-r)}
.pw[class*="pw--k-"] .pw-box .pw-pic{border-radius:0}
.pw--card-plain .pw-c{box-shadow:none;background:none}
.pw--card-shadow .pw-c:not(.pw-over):not(.pw-overrow){box-shadow:0 .125rem .25rem rgba(0,0,0,.075);border:1px solid var(--border);background:var(--card,var(--bg));border-radius:6px;overflow:hidden}
.pw--card-line .pw-c{box-shadow:none;border:1px solid var(--border);border-radius:13px}
.pw--card-filled .pw-c{box-shadow:none;background:var(--surface)}
.pw--rules-cols,.pw--rules-both{column-gap:40px}
.pw--rules-cols > .pw-c,.pw--rules-both > .pw-c{position:relative}
.pw--rules-cols > .pw-c + .pw-c::before,.pw--rules-both > .pw-c + .pw-c::before{content:"";position:absolute;left:-20px;top:0;bottom:0;border-left:1px solid var(--border)}
.pw--rules-rows > .pw-c,.pw--rules-both > .pw-c{padding-bottom:18px;border-bottom:1px solid var(--border)}

/* Arrangements. */
.pw--featured{grid-template-columns:repeat(max(var(--pw-n),3),minmax(0,1fr))}
.pw--featured > .pw-c:first-child{grid-column:span 2;grid-row:span 2}
.pw--featured.pw--box > .pw-c:first-child .pw-pic{aspect-ratio:auto;flex:1;min-height:280px}
.pw--lead{grid-template-columns:1.45fr 1fr;gap:36px;align-items:start}
.pw-stack{display:grid;gap:18px}
.pw--lead .pw-lead > .pw-c.is-big:not(.pw-over):not(.pw-overrow) .pw-pic{aspect-ratio:16/10}
.pw--over.pw--lead .pw-lead > .pw-c{min-height:460px}
.pw-railwrap{position:relative;display:grid;gap:14px}
.pw-arrows{display:flex;gap:8px;justify-content:flex-end}
.pw-arrows button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border);background:var(--bg);color:var(--ink);font-size:16px;cursor:pointer}
.pw-arrows button:hover{border-color:var(--ink)}
.pw--rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.pw--rail::-webkit-scrollbar{display:none}
.pw--rail > .pw-c{flex:0 0 calc((100% - (var(--pw-n) - 1) * var(--pw-gap)) / var(--pw-n) * .92);scroll-snap-align:start}

/* Type sets: a set fills the parts; the faces are served from the site. */
.pw--ty-condensed{--pw-tf:"pw Barlow C",var(--font-display);--pw-tw:700;--pw-ts:1.2;--pw-tl:0;--pw-lf:"pw Barlow C",var(--font-body);--pw-mf:"pw Inter",var(--font-body);--pw-xf:"pw Inter",var(--font-body)}
.pw--ty-editorial{--pw-tf:"pw Inter",var(--font-display);--pw-tw:700;--pw-ts:1.02;--pw-tl:-.025em;--pw-lf:ui-monospace,Menlo,monospace;--pw-mf:ui-monospace,Menlo,monospace;--pw-xf:"pw Fraunces",Georgia,serif}
.pw--ty-heavy{--pw-tf:"pw Mulish",var(--font-display);--pw-tw:900;--pw-ts:1.05;--pw-tl:-.015em;--pw-lf:"pw Jost",var(--font-body);--pw-mf:"pw Jost",var(--font-body);--pw-xf:"pw Jost",var(--font-body)}
.pw--ty-heavy .pw-m{text-transform:uppercase;letter-spacing:.05em;font-size:11px}
.pw--ty-serif{--pw-tf:"pw Fraunces",Georgia,serif;--pw-tw:600;--pw-ts:1.05;--pw-xf:"pw Fraunces",Georgia,serif}
.pw--ts-s{--pw-ts:.88}.pw--ts-l{--pw-ts:1.15}.pw--ts-xl{--pw-ts:1.32}
.pw--ty-condensed.pw--ts-s{--pw-ts:1.05}.pw--ty-condensed.pw--ts-l{--pw-ts:1.38}.pw--ty-condensed.pw--ts-xl{--pw-ts:1.55}

/* Section headings (M618). */
.pw-h{display:flex;align-items:center;gap:12px;min-height:30px;margin-bottom:24px;--hc:var(--cat,var(--blue))}
.pw-h h2{margin:0;font:800 26px/1.1 var(--font-display);color:var(--ink);letter-spacing:-.02em}
.pw-all{margin-left:auto;font:700 13.5px var(--font-body);color:var(--ink);white-space:nowrap;text-decoration:none}
.pw-all span{color:var(--hc)}
.pw-h--dot h2::before{content:"";display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--hc);margin-right:10px;vertical-align:2px}
.pw-h--rule{border-bottom:1.5px solid var(--ink);padding-bottom:10px}
.pw-h--rule h2{font:700 14px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase}
.pw-h--rule h2::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--hc);margin-right:9px;vertical-align:1px}
.pw-h--slash h2::before,.pw-h--slash h2::after{content:"/";color:var(--hc);margin-right:10px;font-weight:700}
.pw-h--slash h2::after{margin:0 0 0 10px}
.pw-h--corner h2{position:relative;padding:4px 20px}
.pw-h--corner h2::before,.pw-h--corner h2::after{content:"";position:absolute;width:8px;height:8px;border:0 solid var(--hc)}
.pw-h--corner h2::before{left:0;top:0;border-width:2px 0 0 2px}
.pw-h--corner h2::after{right:0;bottom:0;border-width:0 2px 2px 0}
.pw-h--pill h2{border:1.5px solid var(--ink);border-radius:999px;padding:7px 18px;font-size:20px;box-shadow:-5px 5px 0 var(--hc);background:var(--bg)}
.pw-h--pill::after{content:"";flex:1;height:1.5px;background:var(--ink);order:2}
.pw-h--pill .pw-all{order:3;margin-left:0}
.pw-h--fill h2{background:var(--hc);color:#fff;border-radius:12px;padding:6px 16px;font-size:20px}
.pw-h--big{flex-wrap:wrap}
.pw-h--big h2{font-size:38px;width:100%}
.pw-h--big .pw-hl{color:var(--muted);font-size:15.5px}
.pw-h--bar{flex-direction:column;align-items:flex-start;gap:12px;border-left:5px solid var(--hc);padding:4px 0 4px 20px}
.pw-h--bar h2{font-size:44px;line-height:1}
.pw-h--bar .pw-hl{font:13px/1.6 ui-monospace,Menlo,monospace;color:var(--muted);max-width:420px}
.pw-h--bar .pw-all{margin-left:0}

@media (max-width:860px){
  .pw{grid-template-columns:repeat(min(var(--pw-n),2),minmax(0,1fr))}
  .pw--lead,.pw--side,.pw--num{grid-template-columns:1fr}
  .pw--featured > .pw-c:first-child{grid-column:1 / -1;grid-row:auto}
}
@media (max-width:600px){
  .pw:not(.pw--small):not(.pw--rail){grid-template-columns:1fr}
  .pw--rules-cols > .pw-c + .pw-c::before,.pw--rules-both > .pw-c + .pw-c::before{display:none}
  .pw--rules-cols > .pw-c{padding-bottom:18px;border-bottom:1px solid var(--border)}
  .pw-t--xl{font-size:calc(26px * var(--pw-ts))}.pw-t--lg{font-size:calc(20px * var(--pw-ts))}
  .pw-c.pw-side{flex-direction:column-reverse;align-items:stretch;gap:14px}.pw-side .pw-pic{flex:none}
  .pw-listbox .pw-pic{flex-basis:34%}
  .pw--rail > .pw-c{flex-basis:78%}
  .pw-h--big h2{font-size:30px}.pw-h--bar h2{font-size:34px}
}
@media (prefers-reduced-motion:reduce){.pw-pic img{transition:none}}

/* Each screen (M635): tabs over the cards, Load more or back and next under them, a carousel's dots,
   a tablet's number across, and a phone's list or swipe. */
.pw-sec{position:relative}
.pw-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding-right:110px}
.pw-sec:has(.pw-tabs) .pw-railwrap{position:static}
.pw-sec:has(.pw-tabs) .pw-arrows{position:absolute;top:0;right:0;margin:0}
.pw-tabs button{appearance:none;font:600 13.5px/1 var(--font-body,inherit);padding:9px 15px;border-radius:999px;border:1px solid var(--border);background:var(--bg);color:var(--ink);cursor:pointer}
.pw-tabs button:hover{border-color:var(--cat,var(--blue))}
.pw-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pw-cards[aria-busy="true"]{opacity:.55;transition:opacity .2s}
.pw-under{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:30px}
.pw-under--pages span{font-size:14px;color:var(--muted)}
.pw-pg{appearance:none;font:600 14px/1 inherit;padding:10px 16px;border-radius:999px;border:1px solid var(--border);background:var(--bg);color:var(--ink);cursor:pointer}
.pw-pg:disabled{opacity:.4;cursor:default}
.pw-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.pw-dots button{appearance:none;width:8px;height:8px;padding:0;border:0;border-radius:50%;background:color-mix(in oklab,var(--ink) 22%,transparent);cursor:pointer}
.pw-dots button[aria-current="true"]{background:var(--blue);width:22px;border-radius:999px}
.pw-sec--nav-dots .pw-arrows,.pw-sec--nav-none .pw-arrows{display:none}
.po-rail{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:24px}
.po-rail::-webkit-scrollbar{display:none}
.po-rail > *{flex:0 0 calc((100% - (var(--pw-n) - 1) * 24px) / var(--pw-n));scroll-snap-align:start}
@media (min-width:601px) and (max-width:1000px){
  .pw-sec--t1 .pw:not(.pw--rail){grid-template-columns:1fr}
  .pw-sec--t2 .pw:not(.pw--rail){grid-template-columns:repeat(min(var(--pw-n,2),2),minmax(0,1fr))}
  .pw-sec--t3 .pw:not(.pw--rail){grid-template-columns:repeat(min(var(--pw-n,3),3),minmax(0,1fr))}
  .pw-sec--t1 .pw--rail > .pw-c,.pw-sec--t1 .po-rail > *{flex-basis:88%}
  .pw-sec--t2 .pw--rail > .pw-c,.pw-sec--t2 .po-rail > *{flex-basis:calc(50% - 12px)}
  .pw-sec--t3 .pw--rail > .pw-c,.pw-sec--t3 .po-rail > *{flex-basis:calc(33.3% - 16px)}
}
@media (max-width:600px){
  .pw-sec--ph-list .pw-c:not(.pw-over):not(.pw-overrow){flex-direction:row;align-items:center;gap:14px}
  .pw-sec--ph-list .pw-c:not(.pw-over):not(.pw-overrow) .pw-pic{flex:0 0 96px;aspect-ratio:1;order:-1}
  .pw-sec--ph-list .pw-c .pw-x{display:none}
  .pw-sec--ph-list .pw-c .pw-t{font-size:calc(16px * var(--pw-ts))}
  .pw-sec--ph-swipe .pw:not(.pw--rail){display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:16px}
  .pw-sec--ph-swipe .pw:not(.pw--rail) > .pw-c{flex:0 0 80%;scroll-snap-align:start}
  .pw-sec--ph-swipe .pw:not(.pw--rail)::-webkit-scrollbar{display:none}
  .po-rail > *{flex-basis:82%}
  .pw-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-4px;padding-inline:4px}
  .pw-sec .pw-arrows{display:none}
  .pw-tabs button{flex:none}
}