/* Anopedia Media 1.2: literary, minimalist and responsive */
.media-page{padding-block:clamp(30px,5vw,78px) 100px;min-width:0}
.media-breadcrumbs{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font:500 13px/1.4 var(--sans);color:var(--muted);margin-bottom:clamp(28px,5vw,55px)}
.media-breadcrumbs a:hover{color:var(--accent)}
.media-page-head{max-width:850px;margin-bottom:clamp(28px,5vw,62px)}
.media-page-head h1{font:700 clamp(44px,7vw,95px)/1.04 var(--serif);letter-spacing:-.057em;margin:0 0 22px;color:var(--ink);overflow-wrap:break-word}
.media-page-head>p{font:clamp(17px,2vw,24px)/1.55 var(--serif);color:var(--text);max-width:760px;margin:0}
.media-status{color:var(--muted);font:13px/1.65 var(--sans);border-left:2px solid var(--line2);padding:0 0 0 15px;margin:clamp(24px,5vw,50px) 0}
.media-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.media-category{min-height:245px;display:flex;flex-direction:column;align-items:flex-start;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(22px,3vw,45px);transition:background .15s}
.media-category:hover,.media-piece:hover{background:var(--paper2)}
.media-category-symbol{color:var(--accent);font:300 36px/1 var(--serif);height:44px}
.media-category h2{font:700 clamp(28px,3vw,40px)/1.1 var(--serif);letter-spacing:-.035em;margin:18px 0 13px}
.media-category p{font:15px/1.6 var(--sans);color:var(--text);margin:0 0 22px}
.media-category-link{margin-top:auto;font:600 13px var(--sans);color:var(--accent)}
.media-picks{margin-top:70px}
.media-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:0 0 19px;margin:0 0 20px}
.media-section-title h2{font:700 clamp(29px,3.5vw,47px)/1.15 var(--serif);margin:0;letter-spacing:-.03em}
.media-section-title>span{font:13px var(--sans);color:var(--muted)}
.media-piece-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.media-piece{display:block;position:relative;min-width:0;padding:28px 38px 42px 2px;border-bottom:1px solid var(--line)}
.media-piece:nth-child(odd){border-right:1px solid var(--line);padding-right:30px}.media-piece:nth-child(even){padding-left:30px}
.media-format{display:block;font:600 11px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.13em;color:var(--accent)}
.media-piece h3{font:700 clamp(23px,2.5vw,36px)/1.18 var(--serif);letter-spacing:-.03em;margin:15px 0 11px;overflow-wrap:break-word}
.media-piece p{font:15px/1.6 var(--sans);color:var(--text);margin:0;max-width:480px}
.media-piece-arrow{position:absolute;bottom:15px;right:20px;color:var(--accent)}
.media-footer-nav{margin-top:40px;font:600 14px var(--sans);color:var(--accent)}
.media-detail-body{max-width:850px;margin:0 auto 40px}
.media-detail .media-page-head{max-width:850px;margin-inline:auto}.media-detail .media-page-head .media-format{margin-bottom:18px}
.media-detail-tools{max-width:850px;margin:35px auto;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:25px}
.media-detail-tools button{border:1px solid var(--line2);padding:13px 18px;background:transparent;color:var(--ink);font:600 14px var(--sans);cursor:pointer}
.media-detail-tools button:hover{border-color:var(--accent);color:var(--accent)}
.media-detail-tools a{font:600 14px var(--sans);color:var(--accent)}
.media-comic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.media-panel{position:relative;min-height:315px;border:1px solid var(--ink);background:var(--paper2);padding:17px;display:flex;flex-direction:column;gap:5px;overflow:hidden}
.media-panel-no{position:absolute;top:12px;right:16px;color:var(--muted);font:12px var(--sans)}
.media-panel-setting{font:600 11px/1.4 var(--sans);color:var(--accent);text-transform:uppercase;letter-spacing:.08em;max-width:calc(100% - 25px)}
.media-figure{position:relative;flex:1;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:end}
.media-figure-head{width:64px;height:64px;border:3px solid var(--ink);border-radius:43% 43% 48% 48%;display:block;position:relative;background:var(--paper)}
.media-figure-head:before,.media-figure-head:after{content:'';position:absolute;top:31px;width:7px;height:7px;background:var(--ink);border-radius:50%}
.media-figure-head:before{left:14px}.media-figure-head:after{right:14px}
.media-figure-body{height:38px;width:105px;border:3px solid var(--ink);border-bottom:0;border-radius:60px 60px 0 0;background:var(--paper)}
.media-dialogue{background:var(--paper);border:1px solid var(--line2);padding:15px 16px;min-height:98px}
.media-dialogue b{display:block;font:600 11px var(--sans);color:var(--accent);margin-bottom:6px}
.media-dialogue p{margin:0;font:500 clamp(17px,1.8vw,23px)/1.25 var(--serif)}
.media-footnote{font:13px/1.6 var(--sans);color:var(--muted);margin-top:18px}
.media-meme{min-height:450px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);display:flex;flex-direction:column;justify-content:space-between;text-align:center;padding:clamp(25px,5vw,62px);overflow-wrap:anywhere}
.media-meme-top{font:700 clamp(23px,3.4vw,39px)/1.23 var(--serif);max-width:700px;margin-inline:auto}
.media-meme-mark{font:300 clamp(80px,13vw,150px)/1 var(--serif);opacity:.52}
.media-meme-bottom{font:700 clamp(20px,3.5vw,40px)/1.25 var(--serif);max-width:700px;margin-inline:auto}
.media-poem{max-width:650px;margin:0 auto;padding:20px 0;font:clamp(20px,2.2vw,29px)/1.7 var(--serif)}
.media-poem p{margin:0 0 1.9em}
.media-aphorism{font:600 clamp(30px,5vw,62px)/1.24 var(--serif);letter-spacing:-.035em;margin:0;text-align:center;padding:clamp(40px,8vw,120px) 15px;border-block:1px solid var(--line)}
@media(max-width:680px){
 .media-page{padding-top:30px;padding-bottom:70px}
 .media-categories{grid-template-columns:1fr}
 .media-category{min-height:170px;padding:23px 23px 26px}
 .media-category h2{margin:10px 0 8px}
 .media-category-symbol{height:28px;font-size:29px}
 .media-piece-grid{grid-template-columns:1fr}
 .media-piece,.media-piece:nth-child(odd),.media-piece:nth-child(even){padding:23px 36px 31px 0;border-right:0}
 .media-section-title{flex-direction:column;gap:4px}
 .media-comic{gap:6px}
 .media-panel{min-height:260px;padding:10px}
 .media-figure-head{width:43px;height:43px;border-width:2px}
 .media-figure-head:before,.media-figure-head:after{top:21px;width:4px;height:4px}
 .media-figure-head:before{left:10px}.media-figure-head:after{right:10px}
 .media-figure-body{width:67px;height:25px;border-width:2px}
 .media-dialogue{padding:9px;min-height:107px}
 .media-dialogue p{font-size:16px;line-height:1.3}
 .media-panel-setting{font-size:10px}
 .media-poem{font-size:20px;padding:8px 0}
 .media-detail-tools{flex-direction:column;align-items:stretch}
}
@media(max-width:360px){.media-comic{grid-template-columns:1fr}.media-panel{min-height:250px}.media-figure-head{width:52px;height:52px}.media-figure-body{width:85px}}


/* Media archive 1.4 additions */
.media-count{display:block;margin-top:auto;font:500 12px/1.5 var(--sans);color:var(--muted)}
.media-piece--image{padding-top:20px}
.media-thumb{aspect-ratio:1/1;margin:0 0 16px;border:1px solid var(--line);background:var(--paper2);overflow:hidden;display:flex;align-items:center;justify-content:center}
.media-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.media-piece--image:hover .media-thumb img{transform:scale(1.025)}
.media-hero-image{margin:0 0 24px;border:1px solid var(--line);background:var(--paper2)}
.media-hero-image img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;background:var(--paper2)}
.media-archive-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 18px}
.media-archive-meta>div{border-top:1px solid var(--line);padding-top:10px}
.media-archive-meta span{display:block;font:600 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.media-archive-meta strong{font:600 15px/1.4 var(--sans);color:var(--ink)}
.media-image-note{max-width:780px;font:17px/1.7 var(--serif);color:var(--text)}
@media(max-width:680px){.media-archive-meta{grid-template-columns:1fr}.media-thumb{aspect-ratio:4/3}}