/* Home Theater Mag — Direction A "Dark Room" Palette, 5 members with named jobs: --ground #0B0C0E page ground --ink #E8E4DC primary text --accent #E01A79 saturated magenta — section marks, rules, one full band --second #2BC4D6 saturated cyan — figures, diagrams, secondary marks --flag #F2B01E saturated amber — alert/caveat only (.note, .callout edge) accent and second sit ~145 deg apart in hue; both are used at area, not only in rules. */ :root{ --ground:#0B0C0E; --panel:#14171A; --panel-2:#0E1114; --ink:#E8E4DC; --ink-2:#C9C4B8; --muted:#8A8578; --faint:#5D5C57; --rule:#23262B; --rule-2:#1B1E22; --accent:#E01A79; --second:#2BC4D6; --flag:#F2B01E; --measure:70ch; --pad:44px; --serif:"Crimson Pro",Georgia,"Times New Roman",serif; --mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--ground);color:var(--ink); font-family:var(--serif);font-size:19px;line-height:1.62; font-synthesis-weight:none;text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;display:block} a{color:var(--accent);text-decoration:none} a:hover{color:var(--second)} ::selection{background:var(--accent);color:var(--ground)} h1,h2,h3,h4{font-weight:600;letter-spacing:-0.02em;margin:0} p{margin:0 0 1.05em;text-wrap:pretty} svg{overflow:visible} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .wrap{max-width:1420px;margin:0 auto;padding-inline:var(--pad)} .measure{max-width:var(--measure);margin-inline:auto;padding-inline:var(--pad)} .kicker{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)} .kicker--cy{color:var(--second)} .kicker--q{color:var(--faint)} .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted)} .rule-tick{display:block;color:var(--accent)} .band{border-top:1px solid var(--rule)} .band-head{display:flex;align-items:baseline;gap:18px;margin-bottom:26px} .band-head .line{flex:1;height:1px;background:var(--rule)} .icn{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .icn--lg{width:34px;height:34px} /* ---------- masthead ---------- */ .mast{border-bottom:1px solid var(--rule);position:relative;z-index:40;background:var(--ground)} .mast-top{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding:24px var(--pad) 16px} .mast-id{display:flex;align-items:center;gap:15px} .mast-id>div{display:flex;flex-direction:column} .wordmark .mast-emblem,.mast-id>.mast-emblem{width:62px;height:62px;flex:none;color:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:color .18s} .wordmark{display:inline-flex;align-items:center;gap:0;font-family:var(--serif);font-weight:600;font-size:40px;line-height:.95;letter-spacing:-.022em;color:var(--ink)} .wordmark .mast-emblem{width:62px;height:62px;flex:none;color:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:color .18s} .wordmark:hover .mast-emblem,.mast-id:hover>.mast-emblem{color:var(--second)} .wordmark:hover{color:var(--ink)} .mast-strap{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--muted);margin-top:9px;text-transform:uppercase;padding-left:0} .mast-util{display:flex;align-items:center;gap:22px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase} .mast-util a{color:var(--muted)} .mast-util a:hover{color:var(--second)} .mast-util .count{color:var(--second)} .mast--slim .mast-top{padding-bottom:14px} .mast--slim .wordmark{font-size:25px;gap:0} .mast--slim .mast-id>.mast-emblem{width:34px;height:34px} .mast--slim .mast-id{gap:12px} .mast--slim .mast-strap{display:none} nav.nav{border-top:1px solid var(--rule-2)} .nav-row{display:flex;list-style:none;margin:0;padding:0 var(--pad)} .nav-row>li{flex:1 1 0;border-right:1px solid var(--rule-2);position:relative} .nav-row>li:last-child{border-right:0} .nav-a{display:flex;gap:14px;align-items:center;padding:14px 18px;color:var(--ink)} .nav-a .icn{width:30px;height:30px;stroke-width:1.25} .nav-a:hover,.nav-row>li:hover .nav-a,.nav-row>li:focus-within .nav-a{color:var(--ink);background:var(--panel-2)} .nav-a .icn{color:var(--accent)} .nav-no{display:none} .nav-t{display:block;font-size:17px;line-height:1.14} .sub{position:absolute;left:-1px;top:100%;min-width:290px;background:var(--panel);border:1px solid var(--rule);border-top:2px solid var(--accent);padding:10px 0;list-style:none;margin:0; opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .13s,transform .13s;z-index:50} .nav-row>li:hover .sub,.nav-row>li:focus-within .sub{opacity:1;visibility:visible;transform:none} .nav-row>li>a::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px} /* hover bridge */ .sub a{display:block;padding:7px 18px;font-size:16.5px;line-height:1.3;color:var(--ink-2)} .sub a:hover{color:var(--accent);background:var(--panel-2)} .sub .sub-all{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--second);text-transform:uppercase;border-top:1px solid var(--rule);margin-top:8px;padding-top:11px} .nav-toggle,.nav-toggle-label{display:none} /* ---------- homepage: opener ---------- */ .opener{position:relative;min-height:660px;display:flex;align-items:flex-end;overflow:hidden} .opener>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .opener::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,12,14,.96) 0%,rgba(11,12,14,.78) 38%,rgba(11,12,14,.06) 74%)} .opener-in{position:relative;z-index:2;padding:56px var(--pad) 48px;max-width:700px} .opener h1{font-size:clamp(40px,5.2vw,76px);line-height:.98;letter-spacing:-.025em;margin:14px 0 20px} .opener h1 a{color:var(--ink)} .opener h1 a:hover{color:var(--ink)} .opener .dek{font-size:22px;line-height:1.42;color:var(--ink-2);margin:0 0 22px;max-width:560px} .opener .credit{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--faint);margin-top:5px} .opener-cap{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);line-height:1.7} /* ---------- emblem band ---------- */ .emblem{display:grid;grid-template-columns:minmax(0,640px) 1fr;gap:64px;align-items:center;padding:70px var(--pad) 74px} .emblem-fig{margin:0} .emblem-fig svg{width:100%;height:auto;color:var(--ink)} .em-ax{font-family:var(--mono);font-size:9px;letter-spacing:.1em;fill:var(--faint);stroke:none} .em-note{font-family:var(--mono);font-size:9.5px;fill:var(--muted);stroke:none} .twoup .fig-credit{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--faint);margin:4px 0 0} .emblem-key{display:flex;flex-wrap:wrap;gap:9px 30px;margin-top:18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase} .emblem-key span{display:flex;align-items:center;gap:9px} .emblem-key svg{width:30px;height:8px;flex:none;overflow:visible} .emblem-say{font-size:30px;line-height:1.34;color:var(--ink);margin:18px 0 22px} .emblem-body{font-size:18px;line-height:1.6;color:var(--muted);margin:0} .emblem-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:start} .emblem-order{border-top:1px solid var(--rule);padding-top:16px} .emblem-order dt{font-size:18px;line-height:1.3;color:var(--ink);margin-bottom:4px} .emblem-order dd{font-size:16.5px;line-height:1.5;color:var(--muted);margin:0 0 18px} .emblem-order dd:last-child{margin-bottom:0} /* ---------- two-up staggered ---------- */ .twoup{display:grid;grid-template-columns:1fr 1fr;gap:54px;padding:66px var(--pad) 72px;align-items:start} .twoup h3{font-size:34px;line-height:1.08;margin:0 0 12px} .twoup h3 a{color:var(--ink)} .twoup h3 a:hover{color:var(--accent)} .twoup .body{padding:18px 0 0 26px;border-left:1px solid var(--rule);margin-top:14px} .twoup p{font-size:18px;line-height:1.55;color:var(--muted);margin:0 0 .7em} /* ---------- field notes ---------- */ .notes-run{padding:54px var(--pad) 58px;background:var(--panel-2)} .notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px} .note-card{padding:20px 0 22px;border-top:1px solid var(--rule);display:flex;flex-direction:column} .note-top{display:flex;align-items:center;gap:15px;margin:0 0 12px;font-family:var(--mono);font-size:9px;letter-spacing:.13em;color:var(--accent);text-transform:uppercase} .icn--md{width:27px;height:27px;stroke-width:1.25} .note-card h4{font-size:22px;line-height:1.18;margin:8px 0} .note-card h4 a{color:var(--ink)} .note-card h4 a:hover{color:var(--accent)} .note-card p{font-size:16px;line-height:1.5;color:var(--muted);margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .note-card .spend{margin-top:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;color:var(--second);line-height:1.6} /* ---------- quiet line ---------- */ .quiet{padding:76px var(--pad) 80px;text-align:center} .quiet p{font-size:clamp(26px,3.2vw,38px);line-height:1.32;font-weight:300;max-width:24ch;margin:24px auto 0;color:var(--ink)} .quiet svg{margin:0 auto;color:var(--accent);display:block} /* ---------- section index ---------- */ .sections{padding:50px var(--pad) 58px;background:var(--panel-2)} .sec-row{display:grid;grid-template-columns:56px 300px 1fr 92px;gap:22px;align-items:baseline;padding:18px 0;border-top:1px solid var(--rule);color:var(--ink)} .sec-row:hover{background:#111418;color:var(--ink)} .sec-row .no{font-family:var(--mono);font-size:15px;color:var(--accent)} .sec-row .t{font-size:28px;line-height:1.05;display:flex;align-items:center;gap:12px} .sec-row .t .icn{color:var(--second)} .sec-row .b{font-size:17px;line-height:1.45;color:var(--muted)} .sec-row .c{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--faint);text-align:right} /* ---------- half-bleed plate ---------- */ .plate{display:grid;grid-template-columns:1fr 400px} .plate>img{width:100%;height:100%;object-fit:cover;min-height:460px} .plate-side{padding:52px var(--pad) 52px 38px;border-left:1px solid var(--rule);display:flex;flex-direction:column;justify-content:center} .plate-side h3{font-size:36px;line-height:1.06;margin:0 0 14px} .plate-side h3 a{color:var(--ink)} .plate-side p{font-size:18px;line-height:1.55;color:var(--muted)} .plate-side .hair{width:56px;height:1px;background:var(--second);margin-bottom:20px} /* ---------- figure system ---------- Four treatments, one drawing system: 26px mat, bracket corner marks, caption in mono with a hanging figure number, credit smaller and quieter. */ .article-figure{margin:38px 0 42px} .article-figure img{width:100%} .article-figure figcaption{display:grid;grid-template-columns:64px 1fr;gap:14px;margin-top:16px} .article-figure .fig-no{font-family:var(--mono);font-size:11px;color:var(--accent);line-height:1.5} .article-figure .fig-cap{font-size:16.5px;line-height:1.45;color:var(--ink-2);margin:0} .article-figure .fig-credit{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--faint);margin:6px 0 0} .fig--mat{position:relative;background:var(--panel);padding:26px} .fig--mat .bk{position:absolute;width:24px;height:24px;stroke:var(--accent);stroke-width:1.3;fill:none} .fig--mat .bk1{top:8px;left:8px}.fig--mat .bk2{top:8px;right:8px} .fig--mat .bk3{bottom:8px;left:8px}.fig--mat .bk4{bottom:8px;right:8px} .fig--mat figcaption{padding-top:4px} .fig--mat img{aspect-ratio:8/5;object-fit:cover} .fig--bleed{margin:56px 0 56px;position:relative} .fig--bleed img{width:100%;aspect-ratio:32/11;object-fit:cover} .fig--bleed figcaption{grid-template-columns:110px 1fr 260px;background:var(--panel-2);border-top:1px solid var(--rule);margin-top:0;padding:16px var(--pad) 18px;align-items:baseline} .fig--bleed .fig-credit{text-align:right} .fig--offset{display:grid;grid-template-columns:1fr 290px;gap:34px;align-items:start} .fig--offset img{aspect-ratio:3/2;object-fit:cover} .fig--offset figcaption{display:block;margin-top:2px;border-top:1px solid var(--accent);padding-top:14px} .fig--inset{border-top:1px solid var(--second);padding-top:16px} .fig--inset img{aspect-ratio:21/9;object-fit:cover} .fig--col{float:right;width:46%;margin:6px 0 22px 34px} .fig--col img{border:1px solid var(--second);padding:7px;aspect-ratio:1;object-fit:cover} .fig--col figcaption{grid-template-columns:1fr;gap:0} /* ---------- article page ---------- */ .art-head{position:relative;min-height:560px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden} .art-head>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .art-head::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,14,.9) 0,rgba(11,12,14,.24) 46%,rgba(11,12,14,.94) 100%)} .art-head-in{position:relative;z-index:2;padding:44px var(--pad) 34px;width:100%} .art-sec{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)} .art-head h1{font-size:clamp(36px,5.4vw,74px);line-height:.98;letter-spacing:-.028em;margin:18px 0 0;max-width:22ch} .art-head .credit{font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:26px;letter-spacing:.05em} .lead{font-size:24px;line-height:1.5;color:var(--ink);margin:0 0 8px} .art-body{padding-block:44px;counter-reset:sec} .art-body .measure>h2{font-size:34px;line-height:1.1;margin:64px 0 18px;max-width:34ch;display:flex;flex-direction:column;gap:14px} .art-body .measure>h2::before{content:counter(sec,decimal-leading-zero);counter-increment:sec;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);background:none;width:auto;height:auto;margin:0;padding-bottom:12px;border-bottom:1px solid var(--rule)} .art-body h2{font-size:34px;line-height:1.1;margin:52px 0 16px;max-width:34ch} .art-body h2::before{content:"";display:block;width:52px;height:2px;background:var(--accent);margin-bottom:18px} .art-body h3{font-size:24px;margin:34px 0 12px} .art-body p{font-size:19px;line-height:1.66;color:var(--ink-2);max-width:640px;margin:0 0 24px;text-wrap:pretty} .art-body .measure>h2+p{font-size:21px;line-height:1.58;color:var(--ink)} .art-body p.opening{font-size:21px;line-height:1.56;color:var(--ink)} .art-body p.opening::first-letter{float:left;font-family:var(--serif);font-weight:600;font-size:52px;line-height:.72;color:var(--accent);padding:7px 12px 0 0} .art-body p.opening+p{clear:both} .art-body p:last-of-type{margin-bottom:0} .art-body p a{border-bottom:1px solid rgba(224,26,121,.42)} .art-body p a:hover{border-bottom-color:var(--second)} .art-body hr{border:0;height:0;margin:38px 0;position:relative} .art-body hr::before{content:"";display:block;width:120px;height:1px;background:var(--rule)} /* measured tick rule used as a breather inside a long run of prose */ .art-body hr.tick{margin:14px 0 26px;height:9px} .art-body hr.tick::before{width:132px;height:9px;background: linear-gradient(var(--rule),var(--rule)) 0 100%/100% 1px no-repeat, repeating-linear-gradient(90deg,var(--accent) 0 1px,transparent 1px 33px) 0 100%/100% 5px no-repeat; opacity:.75} .art-body>ul,.art-body>ol{color:var(--ink-2);padding-left:1.2em} .art-body li{margin-bottom:.5em} .trade{display:grid;grid-template-columns:auto 1fr;gap:0 22px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:20px 0;margin:26px 0 0} .trade dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase;padding-top:5px} .trade dd{margin:0 0 12px;font-size:18.5px;line-height:1.45;color:var(--ink)} .trade dd:last-child{margin-bottom:0;color:var(--second)} /* full-bleed interruption carrying the Notes-for-Design material */ .interrupt{background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:52px var(--pad) 58px;margin:64px 0;position:relative} .interrupt::before{content:"";position:absolute;top:-1px;left:0;width:132px;height:3px;background:var(--accent)} .interrupt.alt{background:var(--accent);color:var(--ground);border-color:var(--accent)} .interrupt.alt::before{background:#FFF} .interrupt .kicker{display:block;margin-bottom:12px;color:var(--second)} .interrupt.alt .kicker{color:#FFF;opacity:.8} .interrupt h2{font-size:32px;line-height:1.06;letter-spacing:-.02em;margin:0;max-width:26ch;padding-bottom:26px;border-bottom:1px solid var(--rule)} .interrupt h2::before{display:none} .interrupt.alt h2{color:#FFF;border-bottom-color:rgba(255,255,255,.34)} .interrupt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:0;background:none;margin-top:0} .interrupt.alt .interrupt-grid{background:none} .interrupt-grid>div{background:none;padding:26px 30px 30px 0;display:grid;grid-template-columns:30px 1fr;column-gap:14px;align-content:start;border-left:1px solid var(--rule);padding-left:26px} .interrupt-grid>div:first-child{border-left:0;padding-left:0} .interrupt.alt .interrupt-grid>div{background:none;border-left-color:rgba(255,255,255,.3)} .interrupt-grid .n{grid-column:1;grid-row:1;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--accent);line-height:1.55;margin:0} .interrupt.alt .interrupt-grid .n{color:#FFF;opacity:1} .interrupt-grid .k,.interrupt-grid .v{grid-column:2} .interrupt-grid .k{display:block;font-size:20px;line-height:1.22;margin:0;color:var(--ink);font-weight:600;letter-spacing:-.01em} .interrupt-grid .k+.v{margin-top:9px} .interrupt.alt .interrupt-grid .k{color:#FFF} .interrupt-grid .v{display:block;font-size:16.5px;line-height:1.52;color:var(--muted);max-width:34ch;text-wrap:pretty} .interrupt.alt .interrupt-grid .v{color:rgba(255,255,255,.86)} /* ---------- text components ---------- */ .pullquote{margin:44px 0;padding:0;border:0} .pullquote p{font-size:32px;line-height:1.28;color:var(--ink);margin:0;font-weight:300} .pullquote::before{content:"";display:block;width:90px;height:2px;background:var(--accent);margin-bottom:20px} .blockquote{margin:36px 0;padding:22px 26px;background:var(--panel);border-left:3px solid var(--second)} .blockquote p{font-size:20px;line-height:1.5;margin:0 0 12px} .blockquote cite{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);font-style:normal} .callout{margin:34px 0;background:var(--panel);border-top:3px solid var(--second);padding:22px 26px 24px} .callout p{margin:0;font-size:19px;line-height:1.5;color:var(--ink)} .callout p+p{margin-top:.7em} p.note{font-family:var(--mono);font-size:14px;line-height:1.65;color:var(--muted);border-left:2px solid var(--flag);padding-left:16px;margin:28px 0} /* ---------- data components ---------- */ .versus,.datatable{width:100%;border-collapse:collapse;margin:34px 0;font-size:16.5px} .versus caption,.datatable caption{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--faint);text-transform:uppercase;text-align:left;padding-bottom:10px} .versus th,.datatable th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:9px 14px 9px 0;border-bottom:1px solid var(--ink)} .versus td,.datatable td{padding:14px 14px 15px 0;border-bottom:1px solid var(--rule);color:var(--ink-2);vertical-align:top;line-height:1.45} .versus tbody th{color:var(--ink);font-family:var(--serif);font-size:17px;letter-spacing:0;text-transform:none;border-bottom:1px solid var(--rule);padding-right:20px} .versus td:first-of-type{color:var(--ink)} .datatable tbody tr:hover,.versus tbody tr:hover{background:var(--panel-2)} .statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--rule);margin:34px 0} .statblock{background:var(--panel);padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px} .stat-num{font-family:var(--mono);font-size:31px;line-height:1;color:var(--second)} .stat-label{font-size:16px;line-height:1.4;color:var(--muted)} .timeline{list-style:none;margin:34px 0;padding:0} .timeline li{display:grid;grid-template-columns:minmax(140px,210px) 1fr;gap:24px;padding:15px 0;border-top:1px solid var(--rule);align-items:baseline} .t-when{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--accent);line-height:1.55} .t-what{font-size:17.5px;line-height:1.45;color:var(--ink-2)} .chart{margin:36px 0} .chart svg{width:100%;height:auto;color:var(--second)} .chart figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);margin-top:12px;line-height:1.6} .chart .axis{stroke:var(--faint);stroke-width:1} .chart .barfill{fill:var(--second)} .chart .barfill.alt{fill:var(--accent)} .chart .lbl{font-family:var(--mono);font-size:9px;fill:var(--muted)} .chart .val{font-family:var(--mono);font-size:9px;fill:var(--ink-2)} .chart .lineplot{fill:none;stroke:var(--accent);stroke-width:2} .chart .lineplot.alt{stroke:var(--second);stroke-dasharray:5 6} .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin:36px 0} .gallery figure{margin:0} .gallery img{border:1px solid var(--second);padding:6px;aspect-ratio:3/2;object-fit:cover} .gallery figcaption{font-family:var(--mono);font-size:10px;line-height:1.6;color:var(--muted);margin-top:10px} /* ---------- cards / references ---------- */ .profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:34px 0} .profile-card{background:var(--panel);padding:22px;display:flex;flex-direction:column;gap:10px} .profile-card .p-photo{width:100%;aspect-ratio:3/2;object-fit:cover} .profile-card h3{font-size:22px;line-height:1.15} .profile-card .p-role{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--second);margin:0} .profile-card p{font-size:16.5px;line-height:1.5;color:var(--muted);margin:0} .profile-card .p-links,.profile-card .p-attr{font-family:var(--mono);font-size:10px;letter-spacing:.06em;margin:0} .profile-card .p-links{margin-top:auto;padding-top:6px} .profile-card .p-attr{color:var(--faint)} .profile-card.no-photo{border-top:3px solid var(--accent)} .org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--rule);margin:34px 0} .org-card{background:var(--panel);padding:18px 20px;display:flex;flex-direction:column;gap:8px;color:var(--ink)} .org-card:hover{background:#171b1f;color:var(--ink)} .org-logo{max-height:34px;width:auto;object-fit:contain} .org-name{font-size:18px;line-height:1.2} .org-host{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--second)} .org-card.no-logo .org-name{border-top:1px solid var(--rule);padding-top:10px} .entity-ref{font-family:var(--mono);font-size:.86em;letter-spacing:.03em;white-space:nowrap} .further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;margin:0} .further-grid a{border-top:1px solid var(--rule);padding-top:16px;color:var(--ink);display:flex;flex-direction:column;gap:8px} .further-grid a:hover{color:var(--accent)} .further-grid a span.k{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--accent);text-transform:uppercase} .further-grid a span.t{font-size:22px;line-height:1.16} .further-grid a span.d{font-size:16.5px;line-height:1.48;color:var(--muted)} .related-links{list-style:none;margin:0;padding:0} .related-links li{border-top:1px solid var(--rule)} .related-links li:last-child{border-bottom:1px solid var(--rule)} .related-links a{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;padding:14px 0;color:var(--ink);font-size:19px;line-height:1.3} .related-links a:hover{color:var(--accent)} .related-links .rk{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase} .cat-list{list-style:none;margin:0;padding:0} .cat-list li{border-top:1px solid var(--rule)} .cat-list>li:last-child{border-bottom:1px solid var(--rule)} .cat-list .row{display:grid;grid-template-columns:170px 1fr 220px;gap:30px;padding:24px 0 26px;align-items:start;color:var(--ink)} .cat-list .row:hover{background:var(--panel-2);color:var(--ink)} .cat-list img{width:170px;aspect-ratio:17/11;object-fit:cover;border:1px solid var(--rule)} .cat-list h3{font-size:27px;line-height:1.1;margin:0 0 8px} .cat-list p{font-size:17px;line-height:1.5;color:var(--muted);margin:0} .cat-list .side{font-family:var(--mono);font-size:10px;line-height:1.75;letter-spacing:.06em;color:var(--second)} /* ---------- supporters ---------- */ .supporters{padding:48px var(--pad) 54px;background:var(--panel-2);border-top:1px solid var(--rule)} .supporters .band-head,.sponsor-tier{max-width:1332px;margin-inline:auto} .sponsor-tier{margin-top:24px} .sponsor-tier-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:14px} .sponsor-row{display:flex;flex-wrap:wrap;gap:34px 44px} .sponsor-row--roll{gap:34px 44px} .sponsor{flex:0 0 300px;width:300px;background:var(--panel);padding:16px;display:flex;flex-direction:column;gap:12px;color:var(--ink);border-top:1px solid var(--rule)} .sponsor:hover{background:#171b1f;color:var(--ink)} .sponsor img{width:100%;height:52px;max-height:52px;object-fit:contain;object-position:left center;background:#0A0B0D;padding:6px 10px} .sponsor-name{font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sponsor-blurb{font-size:15.5px;line-height:1.45;color:var(--muted);min-width:200px} .sponsor-blurb:empty{display:none} .sponsor.feat{border-top:2px solid var(--accent)} .sponsor-tier+.sponsor-tier{margin-top:38px} @media (min-width:1460px){.supporters .band-head,.sponsor-tier{max-width:1420px} .sponsor{flex:0 0 322px;width:322px}} /* ---------- footer ---------- */ .foot{border-top:1px solid var(--rule);background:var(--ground);padding:44px var(--pad) 40px} .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px} .foot h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:12px;font-weight:400} .foot ul{list-style:none;margin:0;padding:0} .foot li{margin-bottom:7px} .foot a{color:var(--ink-2);font-size:17px} .foot a:hover{color:var(--accent)} .foot .say{font-size:18px;line-height:1.5;color:var(--muted);max-width:34ch;margin:0} .foot-base{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--rule-2);margin-top:34px;padding-top:20px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase;flex-wrap:wrap} /* ---------- section landing ---------- */ .cat-head{display:grid;grid-template-columns:130px 1fr 330px;gap:36px;padding:58px var(--pad) 44px;border-bottom:1px solid var(--rule);align-items:start} .cat-head .no{font-family:var(--mono);font-size:58px;line-height:.78;color:var(--accent)} .cat-head h1{font-size:clamp(38px,4.6vw,60px);line-height:1;margin:0 0 16px} .cat-head .dek{font-size:22px;line-height:1.44;color:var(--ink-2);max-width:34ch;margin:0} .cat-head .icn--lg{color:var(--second)} .cat-aside{border-top:1px solid var(--rule);padding-top:14px} .cat-aside p{font-size:16.5px;line-height:1.55;color:var(--muted);margin:0} /* ---------- utility page ---------- */ .page-head{padding:64px var(--pad) 30px} .page-head h1{font-size:clamp(34px,4.4vw,56px);line-height:1.02;margin:14px 0 0} .prose{padding-bottom:60px} .prose h2{font-size:28px;margin:40px 0 12px} .prose p{color:var(--ink-2)} /* ---------- styleguide ---------- */ .sg-sec{border-top:1px solid var(--rule);padding:40px 0 10px} .sg-sec>h2{font-size:26px;margin-bottom:6px} .sg-sec>.meta{margin-bottom:22px;display:block} .sg-narrow{max-width:360px;border:1px dashed var(--faint);padding:12px;margin:24px 0 40px;overflow:hidden} @media (max-width:1240px){ .nav-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:0} .nav-row>li{border-top:1px solid var(--rule-2)} .nav-row>li:nth-child(4n){border-right:0} .sub{min-width:100%} } @media (max-width:1100px){ :root{--pad:30px} .emblem{grid-template-columns:1fr;gap:34px} .emblem-cols{grid-template-columns:1fr;gap:26px} .emblem-key{padding-left:0} .notes-grid{grid-template-columns:repeat(2,1fr);gap:0 30px} .plate{grid-template-columns:1fr} .plate>img{min-height:320px} .plate-side{border-left:0;border-top:1px solid var(--rule);padding-left:var(--pad)} .cat-head{grid-template-columns:80px 1fr;gap:24px} .cat-aside{grid-column:1/-1} .sec-row{grid-template-columns:44px 1fr;gap:8px 16px} .sec-row .b{grid-column:2} .sec-row .c{grid-column:2;text-align:left} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:820px){ body{font-size:18px} .mast-top{flex-wrap:wrap;align-items:flex-start;gap:14px;padding-bottom:14px} .mast-id{gap:12px} .mast-id>.mast-emblem{width:46px;height:46px} .wordmark{font-size:29px} .mast-strap{font-size:8.5px;letter-spacing:.2em;margin-top:6px} .mast-util{width:100%;flex-wrap:wrap;gap:2px 18px;font-size:9.5px} .mast-util a,.mast-util .count{min-height:40px;display:inline-flex;align-items:center} .nav-a{min-height:48px} .sub a{min-height:44px;display:flex;align-items:center} .foot-grid a{display:inline-flex;align-items:center;min-height:40px} .opener-cap{font-size:12.5px;line-height:1.6} .opener .credit,.art-head .credit{font-size:12px;line-height:1.6} .article-figure .fig-credit{font-size:11px} .note-card .spend{font-size:12.5px;line-height:1.55} .emblem-key{font-size:11px;line-height:1.6} .twoup .fig-credit{font-size:11px} .mast-strap{font-size:9.5px} .sub .sub-all{font-size:12px} .art-sec a,.band-head .meta a{display:inline-flex;align-items:center;min-height:40px} .datatable td:first-child a{display:inline-flex;align-items:center;min-height:40px} .cat-list .row a,.entry-row a,.rel a{min-height:40px} .mast--slim .wordmark{font-size:23px} .mast--slim .mast-id>.mast-emblem{width:32px;height:32px} .interrupt{padding:40px var(--pad) 44px;margin:48px 0} .interrupt h2{font-size:27px;max-width:none;padding-bottom:20px} .interrupt-grid>div,.interrupt-grid>div:first-child{border-left:0;border-top:1px solid var(--rule);padding:18px 0 20px} .interrupt-grid>div:first-child{border-top:0;padding-top:20px} .interrupt.alt .interrupt-grid>div{border-top-color:rgba(255,255,255,.32)} .art-body hr.tick{margin:10px 0 22px} .nav-toggle-label{display:flex;align-items:center;gap:10px;padding:12px var(--pad) 14px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--second);border-top:1px solid var(--rule-2);cursor:pointer} .nav-row{display:none;flex-direction:column;padding:0} .nav-toggle:checked~.nav-row{display:flex} .nav-row>li{border-right:0;border-top:1px solid var(--rule-2)} .nav-a{padding:14px var(--pad)} .sub{position:static;opacity:1;visibility:visible;transform:none;border:0;border-top:1px solid var(--rule);background:var(--panel-2);padding:4px 0 10px;min-width:0} .sub a{padding:8px var(--pad) 8px calc(var(--pad) + 22px)} .sub .sub-all{margin-left:var(--pad)} .opener{min-height:0} .opener::after{background:linear-gradient(180deg,rgba(11,12,14,.5) 0,rgba(11,12,14,.92) 62%)} .opener-in{max-width:none} .twoup{grid-template-columns:1fr;gap:20px} .twoup>*+*{padding-top:34px} .notes-grid{grid-template-columns:1fr} .fig--offset{grid-template-columns:1fr;gap:16px} .fig--col{float:none;width:100%;margin:24px 0} .fig--bleed img{aspect-ratio:16/10} .fig--bleed figcaption{grid-template-columns:1fr;gap:6px} .fig--bleed .fig-credit{text-align:left} .article-figure figcaption{grid-template-columns:1fr;gap:4px} .cat-list .row{grid-template-columns:1fr;gap:14px} .cat-list img{width:100%} .cat-list .side{border-top:1px solid var(--rule);padding-top:10px} .timeline li{grid-template-columns:1fr;gap:4px} .versus,.datatable{font-size:15.5px} .versus td,.datatable td{padding-right:10px} .interrupt-grid{grid-template-columns:1fr} .sponsor{flex:0 0 100%;width:100%} .sponsor img{height:48px} .foot-grid{grid-template-columns:1fr} .art-head{min-height:0} .art-head::after{background:linear-gradient(180deg,rgba(11,12,14,.52) 0,rgba(11,12,14,.94) 68%)} .art-head h1{max-width:none} .trade{grid-template-columns:1fr;gap:4px} .trade dt{padding-top:10px} } @media (max-width:600px){ .datatable,.datatable tbody,.datatable tr,.datatable td{display:block;width:auto} .datatable thead{display:none} .datatable tr{border-bottom:1px solid var(--rule);padding:14px 0} .datatable td{border:0;padding:0 0 7px} .datatable td:first-child{font-family:var(--serif);font-size:19.5px;line-height:1.2;color:var(--ink);padding-bottom:9px} .datatable td:last-child{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--second);text-transform:uppercase} .versus{font-size:15px} .versus th,.versus td{padding:9px 9px 9px 0} .art-body p.opening::first-letter{font-size:44px;padding:6px 10px 0 0} .quiet{padding:56px var(--pad) 60px} } @media print{ body{background:#fff;color:#111} .mast,.foot,.supporters{border-color:#ccc} } /* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size, padding, panel and object-fit are untouched. */ .sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block} .sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center} /* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in every row, whatever the count. Only flex-grow is touched. */ .sponsor{flex-grow:0!important} .sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important} /* sp-mark-fit: width:100% + padding must not overflow the tile — but the declared HEIGHT is the mark's size and border-box alone steals the vertical padding from it. earlychristianireland declares height:66px with 10px top/bottom padding: border-box left a 46px mark and the operator read it as 'logos too small'. Keep the horizontal inset, drop the vertical padding, so the mark occupies the full height Design set. */ .sponsor img,.sponsor-box img,.sp-logo img{box-sizing:border-box!important;padding-top:0!important;padding-bottom:0!important} /* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */ .sponsor-blurb:not(:empty){display:block!important;line-height:1.5} /* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */ .sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px} /* sp-domain-override: per-domain, from work/css_override.css */ /* hometheatermag: give the partner marks breathing room INSIDE their black panel. ⚠️ The black rectangle is NOT baked into the logo files — all 11 PNGs are transparent at the corners. It is Design's own panel: style.css:372 `.sponsor img{background:#0A0B0D;padding:6px 10px}`. Our fleet-wide sp-logo-inset guard then forces padding-top/bottom:0 + box-sizing:border-box, which deletes the vertical padding and makes the horizontal padding eat INTO the artwork instead of growing the panel — so the panel shrink-wraps the wordmark and NFBusty reads as touching its edges. Shrinking the img was the wrong lever: it scales the panel down with the artwork. Restore the inset properly — content-box, so padding ADDS to the panel around a slightly smaller mark. Panel colour must stay #0A0B0D to match Design. */ [data-partner] img,.sponsor img,.sponsor-box img{ box-sizing:content-box!important; padding:16px 22px!important; background:#0A0B0D!important; max-width:56%!important; max-height:40px!important; margin-left:auto!important; margin-right:auto!important; object-fit:contain!important; } /* op-footer-compact: the footer printed 8 rows for 8 link(s) in 2 list(s) — 1020px at 390, 9% of the whole page. Design's own good case (evbb) has no list at all: its footer links simply flow inline, 479px in total. Here the lists flow inline too, and the group holder takes two columns, measured 1020 -> 641px (37% shorter) with no new overflow. Both shapes were tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one. Phone widths only; the desktop footer is untouched. */ @media (max-width:640px){ footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(7px,2.36vw,34px)!important;row-gap:7px!important} footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%} footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:28px} } /* op-money-columns: the supporters block ran one tile per row — 11 tiles, 1967px at 390, 19% of the whole page. Two columns bring it to 1024px (48% shorter). Checked before writing: no new overflow, smallest mark still 114px wide, longest blurb 3 lines, tile heights 113-197px. A block that fails any of those is left in one column — two narrow columns can make a block TALLER once the copy rewraps, which is the case the operator warned about. The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-row, .sponsor-row.sponsor-row--roll), never the section that holds several tiers: forcing a grid on that would put a featured row and a regulars run side by side. Phone widths only. */ @media (max-width:640px){ .sponsor-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:clamp(34px,3.06vw,44px)!important} .sponsor-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important} .sponsor-row > * *{min-width:0!important;max-width:100%} .sponsor-row img,.sponsor-row svg{max-width:100%;height:auto} .sponsor-row.sponsor-row--roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:clamp(34px,3.06vw,44px)!important} .sponsor-row.sponsor-row--roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important} .sponsor-row.sponsor-row--roll > * *{min-width:0!important;max-width:100%} .sponsor-row.sponsor-row--roll img,.sponsor-row.sponsor-row--roll svg{max-width:100%;height:auto} .sponsor-row .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important} .sponsor-row.sponsor-row--roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important} } /* op-odd-tier-lead: .sponsor-row.sponsor-row--roll (7 tiles) lay out two per row with an ODD tile count, so the block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead — operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as complete. These tiers were already two-per-row, which is why the column pass never wrote the rule for them. Checked before writing: no new horizontal overflow, block not more than 15% taller. Phone widths only; desktop keeps Design's layout. */ @media (max-width:640px){ .sponsor-row.sponsor-row--roll:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important} } /* op-name-wrap: at 320 the money tile truncated its brand name — "Filthy Family" — losing up to 12px to an ellipsis. The name is allowed to wrap instead of being cut: a brand that reads as half a word is worse than a brand on two lines. Structural only, phone widths only, desktop untouched. */ @media (max-width:360px){ .sponsor-name{white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip} } /* op-article-width: the article column was capped at 640px (86 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 640px (declared in .art-body p) to ~89 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. The layout has no room to grow above 1600, so this width holds there. Nothing below 1024 changes. Originals: migration/_backups/article_width/. */ @media (min-width:1024px){ div.art-body div.measure > :is(p, p:not([class])){max-width:min(762px, 100%)!important} } /* op-article-width:end */ /* op-hover-pad */ .sec-row{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important} /* op-hover-pad:end */ /* op-hover-pad */ .datatable tbody tr>*:first-child{padding-left:clamp(12px,3.5vw,22px)!important} /* op-hover-pad:end */ /* op-heading-levels */ h2:where(.rt-h3), h3:where(.rt-h4){font-weight: 600; letter-spacing: -0.02em; margin: 0px;} .twoup h2:where(.rt-h3){font-size: 34px; line-height: 1.08; margin: 0px 0px 12px;} .twoup h2:where(.rt-h3) a{color: var(--ink);} .twoup h2:where(.rt-h3) a:hover{color: var(--accent);} .note-card h3:where(.rt-h4){font-size: 22px; line-height: 1.18; margin: 8px 0px;} .note-card h3:where(.rt-h4) a{color: var(--ink);} .note-card h3:where(.rt-h4) a:hover{color: var(--accent);} .plate-side h2:where(.rt-h3){font-size: 36px; line-height: 1.06; margin: 0px 0px 14px;} .plate-side h2:where(.rt-h3) a{color: var(--ink);} .foot h3:where(.rt-h4){font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; font-weight: 400;} /* op-heading-levels:end */ @media (min-width:860px) and (max-width:1439px){.sponsor-row.sponsor-row:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(300px,calc(50% - 22px)),1fr))!important;column-gap:44px!important;row-gap:34px!important;justify-content:stretch!important;align-items:stretch!important}.sponsor-row.sponsor-row > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}} .nav-row > li:nth-of-type(n+7) > .sub{left:auto!important;right:-1px!important} .sponsor-row > [data-partner] img{background:transparent!important}