/* Element editorial sections (Read index, posts, Library, Listen, editors). Builds on reading.css variables:
   pure white on black, Cover Serif headlines and subheads, Times New Roman text, sentence case, no letter-spaced labels.
   One 12-column grid with the magazine's margin (--m) and gutter (--g). Images never wider than native pixels (--nw). */
.e-page{padding:calc(var(--lh) * 3) calc(var(--o) + var(--m)) calc(var(--above-pill) + var(--lh) * 3)}
.e-page a{color:#fff}
.e-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:end;border-bottom:1px solid #fff;padding-bottom:calc(var(--lh) * .5)}
.e-head h1{grid-column:1/8;font:400 clamp(56px,calc(var(--W) * .075),200px)/.95 var(--hd);letter-spacing:-.025em}
.e-head .e-dek{grid-column:8/-1;font-style:italic;font-size:1.15em;line-height:calc(var(--lh) * 1.1);text-wrap:pretty}
.e-head .e-aside{grid-column:1/-1;margin-top:calc(var(--lh) * .5)}
.e-sec{margin-top:calc(var(--lh) * 2.5)}
.e-h2{font:400 clamp(28px,calc(var(--W) * .022),56px)/1.05 var(--hd);letter-spacing:-.01em;margin:0 0 calc(var(--lh) * 1)!important;padding-bottom:calc(var(--lh) * .4);border-bottom:1px solid #fff}
.e-meta{display:block;font-style:italic;font-size:.9em}
.e-t{display:block;font:400 1.6em/1.1 var(--hd);letter-spacing:-.01em;margin-top:calc(var(--lh) * .25);text-wrap:balance}
.e-d,.e-by{display:block;margin-top:calc(var(--lh) * .25);text-wrap:pretty}
.e-by{font-style:italic}
.e-empty{font-style:italic}
.e-pic{display:block;width:min(100%,calc(var(--nw) * 1px));aspect-ratio:var(--ar)}
.e-pic img{display:block;width:100%;height:100%;object-fit:cover}
.e-page a:has(.e-t){text-decoration:none}
.e-page a:hover .e-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}

/* Read index: issues in a 12-col grid (latest spans 8), posts as a list with optional thumbnail */
.e-issues,.e-posts,.e-shelf{list-style:none;margin:0;padding:0}
.e-issues{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);row-gap:calc(var(--lh) * 2)}
.e-issues li{grid-column:span 4}.e-issues li.first{grid-column:span 8}
.e-issues .e-pic{aspect-ratio:3/2;margin-bottom:calc(var(--lh) * .5)}
.e-issues li.first .e-t{font-size:2.4em}
.e-posts li{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:calc(var(--lh) * .75) 0;border-bottom:1px solid #fff}
.e-posts li>a:first-child{grid-column:1/9}.e-posts .e-pc{grid-column:10/-1;justify-self:end;width:100%}
.e-posts .e-pc .e-pic{margin-left:auto}

/* A post: same measure and type as a magazine story, one column */
.e-post-h{max-width:min(100%,36em);margin:0 auto}
.e-post-h h1{font:400 clamp(44px,calc(var(--W) * .05),132px)/1 var(--hd);letter-spacing:-.02em;margin-top:calc(var(--lh) * .5)!important;text-wrap:balance}
.e-post-h .e-dek{font-style:italic;font-size:1.3em;line-height:calc(var(--lh) * 1.2);margin-top:calc(var(--lh) * .75)}
.e-post-cover{margin:calc(var(--lh) * 2) auto 0;width:min(100%,calc(var(--nw,1600) * 1px))}
.e-post-cover .e-pic{margin:0 auto}
.e-post-cover figcaption{font-size:.8em;line-height:calc(var(--lh) * .8);margin-top:calc(var(--lh) * .4)}
.p-body{columns:1!important;max-width:min(100%,36em);margin:calc(var(--lh) * 2) auto 0}
.p-body .p-h{font:400 1.8em/1.1 var(--hd);margin:calc(var(--lh) * 1.5) 0 calc(var(--lh) * .5)!important}
.p-body .p-sub{font:400 1.25em/var(--lh) var(--hd);margin:calc(var(--lh) * 1) 0 0!important}
.p-body .p-sub+p{text-indent:0}
.p-body ul,.p-body ol{margin:calc(var(--lh) * .5) 0;padding-left:1.2em}
.p-body hr{border:0;border-top:1px solid #fff;margin:calc(var(--lh) * 1.5) 0}
.p-body .p-fig{margin:calc(var(--lh) * 1) 0}

/* Library / Listen: covers on the 12-col grid, never above native size */
.e-shelf{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);row-gap:calc(var(--lh) * 2)}
.e-shelf li{grid-column:span 3}
.e-item{display:block;text-decoration:none}
.e-cover{margin-bottom:calc(var(--lh) * .5)}
.s-library .e-cover{aspect-ratio:var(--ar)}
.s-listen .e-cover{aspect-ratio:1/1}

/* Owner editors: plain black and white form controls */
.e-own{border:1px solid #fff;padding:var(--lh) var(--g)}
.e-form{max-width:min(100%,40em)}
.e-ft{font:400 1.8em/1.1 var(--hd);margin-bottom:var(--lh)!important}
.e-f{display:block;margin-bottom:calc(var(--lh) * .75)}
.e-l{display:block;font-family:var(--hd);font-size:1.1em;margin-bottom:4px}
.e-form input,.e-form textarea,.e-form select{width:100%;font:inherit;color:#fff;background:#000;border:1px solid #fff;border-radius:0;padding:8px 10px;outline:none}
.e-form input:focus,.e-form textarea:focus,.e-form select:focus{box-shadow:inset 0 0 0 1px #fff}
.e-md{font-size:.95em;line-height:1.5}
.e-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.e-row input{flex:1;width:auto}
.e-btn{display:inline-block;font:inherit;font-size:.95em;color:#fff;background:#000;border:1px solid #fff;border-radius:999px;padding:6px 16px;cursor:pointer;text-decoration:none!important;width:auto!important}
.e-btn.on,.e-btn:hover{background:#fff;color:#000}
.e-btn:disabled{opacity:.5}
.e-acts{margin-top:var(--lh)}
.e-err{display:block;color:#fff;font-style:italic;margin-top:6px}
.e-thumb{display:block;max-width:240px;max-height:240px;width:auto;height:auto;margin-bottom:8px;border:1px solid #fff}

@media (max-width:1199px){.e-shelf li{grid-column:span 4}}
@media (max-width:999px),(orientation:portrait){
  .e-head h1,.e-head .e-dek{grid-column:1/-1}.e-head .e-dek{margin-top:calc(var(--lh) * .5)}
  .e-issues li,.e-issues li.first{grid-column:1/-1}.e-shelf li{grid-column:span 6}
}
@media (max-width:640px){
  .e-posts li>a:first-child{grid-column:1/-1}.e-posts .e-pc{grid-column:1/-1;justify-self:start;margin-top:calc(var(--lh) * .5)}.e-posts .e-pc .e-pic{margin-left:0}
  .e-shelf{row-gap:calc(var(--lh) * 1.5)}
}
.r-issue>.r-archive{padding-bottom:calc(var(--above-pill) + var(--lh) * 3)}
.g-watch .e-cover{aspect-ratio:3/2}.g-watch .e-cover img{object-position:50% 25%}
.k-magazine .e-cover img{outline:1px solid #fff;outline-offset:-1px}
.g-books .e-shelf li{grid-column:span 2}
@media (max-width:1199px){.g-books .e-shelf li{grid-column:span 3}}
@media (max-width:999px),(orientation:portrait){.g-books .e-shelf li{grid-column:span 4}}
@media (max-width:640px){.g-books .e-shelf li{grid-column:span 6}}
.e-ph{width:100%;display:flex;align-items:flex-end;padding:calc(var(--lh) * .5) calc(var(--g) * .75);box-shadow:inset 0 0 0 1px #fff;font:400 1.5em/1.05 var(--hd);letter-spacing:-.01em;text-wrap:balance}
.g-books .e-cover{aspect-ratio:2/3;width:100%}.g-books .e-cover img{object-fit:cover}
.g-magazines .e-cover{aspect-ratio:4/3;width:100%}.g-magazines .e-cover img{object-fit:contain;padding:12%;outline:0}
.k-magazine .e-cover{box-shadow:inset 0 0 0 1px #fff}
.g-magazines .e-shelf li{grid-column:span 3}

/* ===== Library / Listen as objects (after mymind), in Element's black and white ===== */
.o-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(140px,15vw,320px),1fr));column-gap:calc(var(--g) * 1.5);row-gap:calc(var(--lh) * 2);align-items:end}
.g-books .o-grid,.g-magazines .o-grid{grid-template-columns:repeat(auto-fill,minmax(clamp(130px,12vw,260px),1fr))}
.o-grid li.s-photo{grid-column:span 2}
.o-item,.r-issue a.o-item{display:block;text-decoration:none;color:#fff}
.o-t,.o-by{display:block;font:500 15px/1.3 -apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;margin-top:12px;text-wrap:balance}
.o-by{font-weight:400;margin-top:2px}
.o-item:hover .o-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.o{position:relative;display:block;width:100%;aspect-ratio:var(--ar);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.o-item:hover .o{transform:translateY(-4px)}
.o img{display:block;width:100%;height:100%;object-fit:contain}
.o-ph{display:flex;align-items:flex-end;height:100%;padding:12px;box-shadow:inset 0 0 0 1px #fff;font:400 1.4em/1.05 var(--hd)}
/* films: full poster, white sprocket holes down both edges */
.o-film img{object-fit:cover}
.o-film::before,.o-film::after{content:"";position:absolute;top:0;bottom:0;width:7%;min-width:9px;max-width:22px;pointer-events:none;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='15'%3E%3Crect x='3' y='4' width='4' height='7' rx='1.3' fill='%23fff'/%3E%3C/svg%3E") center top/100% auto repeat-y}
.o-film::before{left:0}.o-film::after{right:0}
/* books: front cover with a spine crease and page block */
.o-book{transform:perspective(1200px) rotateY(-14deg);transform-origin:20% 50%}
.o-item:hover .o-book{transform:perspective(1200px) rotateY(-6deg) translateY(-4px)}
.o-book img{object-fit:cover;border-radius:1px 3px 3px 1px}
.o-book::before{content:"";position:absolute;inset:0 auto 0 0;width:9%;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.28) 40%,rgba(0,0,0,.25) 70%,transparent);pointer-events:none}
.o-book::after{content:"";position:absolute;top:1.5%;bottom:1.5%;right:-7px;width:7px;background:repeating-linear-gradient(90deg,#fff 0 1px,#000 1px 2px);transform:skewY(-30deg);transform-origin:0 0}
.o-mag img{object-fit:cover}.o-mag{box-shadow:6px 6px 0 -1px #000,6px 6px 0 0 #fff}
.o-sq img{object-fit:cover;border-radius:4px}.o-sq{box-shadow:0 0 0 1px #fff;border-radius:4px}
.o-photo img{object-fit:cover}
/* detail view */
.o-sheet{border:0;padding:0;margin:auto;width:min(1100px,calc(100vw - 2 * var(--m)));max-height:calc(100svh - 48px);background:#000;color:#fff;box-shadow:0 0 0 1px #fff;overflow:auto}
.o-sheet::backdrop{background:rgba(0,0,0,.85)}
.o-sheet[open]{animation:o-in .4s cubic-bezier(.2,.8,.2,1)}
@keyframes o-in{from{opacity:0;transform:translateY(16px) scale(.98)}}
.o-detail{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:calc(var(--g) * 2);padding:calc(var(--lh) * 2) var(--m);align-items:center}
.o-detail>*{min-width:0}
.o-stage{display:flex;justify-content:center;align-items:center;min-height:min(60svh,640px)}
.o-stage .o{width:auto;height:min(60svh,640px);max-width:100%}
.o-stage .o-photo,.o-stage .o-sq{height:auto;width:100%;max-height:60svh}
.o-dt{font:400 clamp(32px,3.2vw,60px)/1.02 var(--hd);letter-spacing:-.015em;margin:0;text-wrap:balance}
.o-info .o-by{font-size:17px;margin-top:12px}
.o-note{margin:calc(var(--lh) * .75) 0 0;font:400 var(--fs)/var(--lh) var(--tx);text-wrap:pretty}
.o-btn,.r-issue a.o-btn{text-decoration:none}
.o-btn{display:inline-block;margin-top:calc(var(--lh) * 1);padding:12px 22px;border-radius:999px;background:#fff;color:#000!important;text-decoration:none;font:500 15px/1 -apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif}
.o-btn:hover{background:#000;color:#fff!important;box-shadow:inset 0 0 0 1px #fff}
.o-links{display:flex;flex-wrap:wrap;gap:0 10px;margin:0}
.o-btn.o-btn2{background:#000;color:#fff!important;box-shadow:inset 0 0 0 1px #fff}.o-btn.o-btn2:hover{background:#fff;color:#000!important}
.o-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:999px;background:none;color:#fff;cursor:pointer;display:grid;place-items:center}
.o-x:hover{box-shadow:inset 0 0 0 1px #fff}.o-x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
@media (max-width:760px){.o-detail{grid-template-columns:1fr;padding:calc(var(--lh) * 2) 20px calc(var(--lh) * 1.5)}.o-stage{min-height:0}.o-stage .o{height:min(52svh,460px)}.o-stage .o-photo{height:auto;width:100%;max-height:52svh}
 .o-grid,.g-books .o-grid,.g-magazines .o-grid{grid-template-columns:repeat(2,1fr)}.o-grid li.s-photo{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.o,.o-sheet[open]{transition:none;animation:none}}
/* standfirsts and display subheadings under titles: Petrona 300 roman (in-article subheads and contents keep the editorial serif) */
.r-mast-m,.r-cover-t>p,.r-opener-d,.r-dek,.e-dek,.e-head .e-dek,.e-post-h .e-dek{font-family:var(--font-petrona),Georgia,serif!important;font-weight:300!important;font-style:normal!important}
.o-logo{aspect-ratio:4/3}.o-logo img{object-fit:contain}
.o-stage .o-logo{height:auto;width:100%;max-height:50svh}
/* even rows: one object height per section (--oh, set from the column width); objects sit on a common baseline */
.o-grid[style]{align-items:start}
.o-grid[style] li.s-photo{grid-column:auto}
.o-grid[style] .o{height:var(--oh);width:auto;max-width:100%;margin:0 auto 0 0;aspect-ratio:var(--ar)}
.o-grid[style] .o-film{aspect-ratio:2/3}
.o-grid[style] .o-item{display:flex;flex-direction:column}
.o-grid[style] .o-item>.o:first-child{align-self:flex-start}
.o-grid[style] li{display:flex;flex-direction:column;justify-content:flex-start}
.o-grid[style] .o-photo,.o-grid[style] .o-logo{width:100%;aspect-ratio:auto}
.o-grid[style] .o-photo img,.o-grid[style] .o-logo img{object-fit:contain;object-position:left bottom}
.o-grid[style] .o-book,.o-grid[style] .o-mag,.o-grid[style] .o-sq{align-self:flex-start}