/* KARADZHYAN / LAW — ORIGINAL ARTWORK EDITION
 * Source of truth: approved prototype #1, not CSS approximations.
 * The artwork is decorative; the headline, contact links and practice links
 * also exist as ordinary, accessible HTML. Do not rasterize legal analysis. */
:root{--riot-ink:#0a0a09;--riot-red:#f01e20;--riot-yellow:#ffeb00;--riot-paper:#f4eddf;
  --riot-head:Impact,'Arial Narrow','Liberation Sans Narrow','Helvetica Neue',sans-serif;
  --riot-mono:'Courier New',Courier,monospace}
.punk-responsible{margin:0;padding:8px 4vw 12px;background:#080808;color:#eee6d8;
  font:500 13px/1.5 var(--riot-mono);overflow-wrap:anywhere}
.punk-poster-text{padding:24px clamp(20px,4vw,60px);background:#f2ebdc;color:#111;
  border-bottom:7px solid #111;font:400 17px/1.55 Georgia,serif}
.punk-poster-text p{max-width:85ch;margin:0 0 14px;color:#111}
.punk-poster-text a{display:inline!important;padding:0!important;color:#7a1717!important;text-decoration:underline}
.punk-poster-text__note{font-size:15px}
.punk-poster-text summary{cursor:pointer;font:700 17px/1.5 var(--riot-mono);padding:8px 0}
.punk-poster-text h2{font:700 21px/1.3 var(--riot-mono);color:#111;margin:24px 0 8px}
@media print{.punk-poster-text details::details-content{display:block}}
.punk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;
  border:0!important;clip-path:inset(50%)!important}
header.site{border-bottom:0!important;background:#080808!important;box-shadow:none!important}
header.site .masthead{max-width:1500px;min-height:70px!important;gap:20px;padding:8px 0!important}
header.site .wordmark{font-family:var(--riot-head)!important;color:#fff!important;font-size:clamp(22px,2.8vw,37px)!important;
  line-height:1!important;letter-spacing:.07em!important;font-stretch:condensed;font-weight:900}
header.site .wordmark b{color:var(--riot-red)!important}
header.site nav.site a{font-family:var(--riot-head)!important;font-size:clamp(13px,1.05vw,16px)!important;
  letter-spacing:.13em!important;font-weight:700!important;color:#fff!important;padding:11px 0!important;
  border-bottom:2px solid #ffffff53!important}
header.site nav.site a:hover,header.site nav.site a[aria-current]{border-color:var(--riot-yellow)!important;
  color:var(--riot-yellow)!important}
header.site .wrap{max-width:1500px}
@media(min-width:801px){header.site .masthead{padding-left:clamp(12px,2.8vw,50px)!important;
  padding-right:clamp(12px,2.8vw,50px)!important}}

/* THE EXACT ORIGINAL POSTER: no fake Lady Justice, no simulated photocopy. */
.punk-home--original{overflow:hidden;background:#0b0b0b!important}
.punk-art-poster{width:100%;position:relative;isolation:isolate;overflow:hidden;background:var(--riot-paper);
  box-shadow:0 11px 0 #080808}
.punk-art-poster__picture{display:block;line-height:0}
.punk-art-poster__picture img{display:block;width:100%;height:auto;max-width:none;object-fit:fill;
  aspect-ratio:1536/954}
.punk-art-hotspots{position:absolute;inset:0;z-index:3}
.punk-art-hotspots a{display:block;position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  cursor:pointer!important;border:3px solid transparent!important;background:transparent!important;
  color:transparent!important;transition:background .15s ease,border-color .15s ease}
.punk-art-hotspots a:hover{background:rgba(255,235,0,.11)!important;border-color:#1212129b!important}
.punk-art-hotspots a:focus-visible{outline:5px solid #fff!important;outline-offset:-7px!important;
  border:4px dashed var(--riot-red)!important;background:rgba(255,235,0,.33)!important}
.punk-art-hotspots--mobile{display:none}
.punk-mobile-cards{display:none}
.punk-art-poster:after{content:"";position:absolute;bottom:0;left:0;right:0;height:7px;background:#080808;
  pointer-events:none}

/* The print rhythm continues below the poster as real text and controls. */
.punk-editorial-after{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);
  gap:clamp(30px,5.5vw,105px);align-items:center;padding:clamp(65px,7vw,130px) clamp(22px,6vw,110px);
  background:#0d0d0c;color:#f8f0df;border-top:13px solid var(--riot-red);isolation:isolate;overflow:hidden}
.punk-editorial-after:before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(90deg,#080808ed 0%,#080808bc 100%);
  background-size:cover;background-position:center;filter:grayscale(.8);opacity:.5}
.punk-editorial-after:after{content:"";pointer-events:none;position:absolute;inset:0;opacity:.10;
  background:radial-gradient(#fff 1px,transparent 1.3px);background-size:7px 8px}
.punk-editorial-after__feature{position:relative;z-index:2;max-width:850px}
.punk-editorial-after__eyebrow,.punk-editorial-after__stamp{font:900 13px/1.5 var(--riot-mono);
  color:#171717;text-transform:uppercase;letter-spacing:.07em;background:var(--riot-yellow);
  padding:8px 12px;display:inline-block;transform:rotate(-2deg)}
.punk-editorial-after h2{font:900 clamp(54px,7.5vw,128px)/.83 var(--riot-head);
  letter-spacing:-.025em;text-transform:uppercase;margin:28px 0 25px;max-width:none;
  color:#fff5e9;text-shadow:2px 2px #000}
.punk-editorial-after h2 em{font-style:normal;color:var(--riot-yellow)}
.punk-editorial-after__feature p{font:600 clamp(16px,1.5vw,20px)/1.45 var(--riot-mono);
  max-width:60ch;color:#ece1cd;margin:0 0 27px}
.punk-editorial-after__docket{position:relative;z-index:2;transform:rotate(1deg);
  background:#efe7d6;color:#100e0e;padding:clamp(23px,4vw,56px);
  clip-path:polygon(0 1%,4% 0,21% 2%,46% 0,59% 1%,83% 0,100% 2%,99% 32%,100% 61%,98% 100%,74% 99%,41% 100%,23% 98%,0 100%);
  box-shadow:14px 15px 0 var(--riot-red)}
.punk-editorial-after__stamp{background:#b91f1b;color:#fff;transform:rotate(-5deg);margin-bottom:25px}
.punk-editorial-after__docket h3{font:900 clamp(38px,4vw,63px)/.96 var(--riot-head);
  text-transform:uppercase;margin:0 0 20px;letter-spacing:-.02em}
.punk-editorial-after__docket p{font:600 17px/1.5 var(--riot-mono);margin-bottom:25px}
.punk-editorial-after__docket>a{display:inline-block;font:900 19px var(--riot-head);
  color:#000;border-bottom:5px solid var(--riot-red);letter-spacing:.04em;padding-bottom:7px}
.punk-editorial-after__docket>a:hover{background:var(--riot-yellow)}
.punk-editorial-after__scribble{font:900 17px/1.3 cursive;transform:rotate(-5deg);
  color:#b91f1b;margin-top:40px;border-bottom:3px solid var(--riot-red);width:max-content;max-width:100%}
.punk-writing--collage{background:#f4eddf!important;
  background-image:radial-gradient(#130f1016 .8px,transparent 1.2px)!important;background-size:9px 8px!important;
  border-top:16px solid #080808!important;padding:75px clamp(18px,6vw,95px) 95px!important}
.punk-writing--collage .punk-writing__top h2{font-family:var(--riot-head)!important;
  font-size:clamp(62px,7.6vw,122px)!important;line-height:.9!important}
.punk-writing--collage .punk-writing__top h2 em{font-style:normal;background:var(--riot-yellow);
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.punk-writing--collage .punk-writing__list a{font-family:Georgia,serif!important}
.punk-writing--collage .punk-writing__list a:hover{background:var(--riot-yellow)!important}
.punk-home--original .punk-contact-banner{background:var(--riot-red)!important;
  background-image:radial-gradient(#08080827 1px,transparent 1px)!important;background-size:8px 9px!important}
.punk-home--original .punk-contact-banner p{color:#000;background:var(--riot-red)}
.punk-home--original .punk-contact-banner h2{font-family:var(--riot-head)!important;font-size:clamp(62px,7vw,111px)!important}

/* Matching editorial artwork leads the supporting pages, while articles stay live HTML. */
.punk-page-poster{display:block;position:relative;margin:0;line-height:0;background:#080808;
  border-top:7px solid #080808;border-bottom:12px solid #080808;overflow:hidden}
.punk-page-poster__img{display:block;width:100%;height:auto;max-width:none;object-fit:contain}
.punk-page-poster__hotspot{position:absolute;z-index:3;left:var(--x);top:var(--y);
  width:var(--w);height:var(--h);border:4px solid transparent!important;color:transparent!important}
.punk-page-poster__hotspot:hover{background:#ffed0027;border:4px solid #050505d8!important}
.punk-page-poster__hotspot:focus-visible{outline:5px solid #fff!important;
  outline-offset:-5px!important;border:4px dashed var(--riot-red)!important;background:#ffed0050}
.punk-page-poster__caption{display:block;background:#080808;color:#c8c0b6;line-height:1.4;
  text-align:right;font:700 11px var(--riot-mono);letter-spacing:.06em;padding:9px 4vw}
.punk-practice-index{max-width:none!important;padding-left:0!important;padding-right:0!important}
.punk-practice-index .pagehead,.punk-practice-index>h2,
.punk-practice-index>ul{max-width:1200px;margin-left:auto!important;margin-right:auto!important}
.punk-practice-index>.pagehead{margin-top:35px!important}
.punk-practice-index>h2,.punk-practice-index>ul{width:calc(100% - 64px)}
.punk-practice-index>ul{margin-bottom:40px}
.punk-practice-index .pagehead>.artfig{display:none}
.punk-case--original{padding-top:0!important}
.punk-case--original .punk-page-poster{margin:0 calc(-1 * clamp(16px,5vw,80px)) 50px}
.punk-case--original h1{margin-top:40px!important}
/* Keep the full-bleed poster inside the viewport at intermediate widths. */
.punk-about--original .punk-page-poster{margin:0 max(calc(-1 * clamp(18px,5vw,74px)),calc((100% - 100vw) / 2)) 30px}
.punk-about--original>article{padding-top:0!important}
.punk-about--original article>.artfig{display:none}
.punk-about--original article>.kicker{margin-top:30px!important}
.punk-contact--original article{border-top:14px solid var(--riot-red)!important}
.punk-contact--original article:before{content:"THE LAW STILL MATTERS.";
  position:relative;display:inline-block;transform:rotate(-2deg);
  background:var(--riot-yellow);font:900 18px/1.2 var(--riot-head);
  padding:9px 15px;margin-top:22px}

/* Long-form library and practice pieces: serious typesetting, radical frame. */
main.wrap article,main.wrap.lib .pagehead{background-color:#f6f0e4!important;
 background-image:radial-gradient(#140e090e .75px,transparent 1px),radial-gradient(#7b635909 .6px,transparent 1px)!important;
 background-size:11px 12px,19px 17px!important;
 border-color:#0f0f0f!important}
main.wrap article{position:relative;border-top:12px solid #0a0a0a!important;
  box-shadow:9px 11px 0 #1010101a!important}
main.wrap article .punk-page-stamp{font-family:var(--riot-mono)!important;font-weight:900!important;
  background:#b91f1b!important;color:#fff!important;transform:rotate(-2deg)!important}
main.wrap article>.kicker{margin-top:35px!important}
main.wrap article h1{font-family:var(--riot-head)!important;
  font-size:clamp(42px,6.4vw,96px)!important;line-height:.96!important;
  letter-spacing:-.02em!important;text-transform:uppercase!important;overflow-wrap:anywhere;
  max-width:16ch!important}
main.wrap article h2{font-family:var(--riot-head)!important;font-size:clamp(28px,3vw,45px)!important;
  text-transform:uppercase!important}
main.wrap article p, main.wrap article li, main.wrap article blockquote{
  font-family:Georgia,'Newsreader',serif!important;line-height:1.62!important;overflow-wrap:anywhere}
.tablewrap{max-width:100%;overscroll-behavior-x:contain}
main.wrap article .revised, main.wrap article .byline{font-family:var(--riot-mono)!important}
main.wrap article>.artfig{position:relative;transform:rotate(-.8deg);
  box-shadow:10px 10px 0 var(--riot-yellow);margin-bottom:44px}
main.wrap article>.artfig img{border:5px solid var(--riot-ink)!important;filter:grayscale(1) contrast(1.5)!important}
body:has(main.wrap article):not(:has(.punk-page-poster)) main.wrap:before{content:"";display:block;
  height:40px;width:100%;background:linear-gradient(112deg,var(--riot-red) 0 30%,#0a0a0a 30% 70%,var(--riot-yellow) 70%);
  clip-path:polygon(0 32%,9% 10%,20% 25%,34% 5%,46% 25%,63% 0,79% 23%,89% 6%,100% 20%,100% 100%,0 100%)}

@media(max-width:900px){
  .punk-editorial-after{grid-template-columns:minmax(0,1fr);gap:50px;padding:60px 26px}
  .punk-editorial-after__feature,.punk-editorial-after__docket{min-width:0}
  .punk-editorial-after__docket{max-width:740px}
  .punk-page-poster__caption{text-align:center}
}
@media(max-width:800px){
  header.site .masthead{min-height:66px!important;padding:10px 0!important}
  header.site .wordmark{font-size:clamp(19px,5.5vw,28px)!important}
  header.site .punk-menu-toggle{background:var(--riot-yellow)}
  header.site.nav-open nav.site{padding:22px 12px!important;background:#080808}
  .punk-practice-index>.pagehead{margin-top:20px!important}
  .punk-practice-index>h2,.punk-practice-index>ul{width:calc(100% - 32px)}
  .punk-page-poster__hotspot{border-width:2px!important}
  .punk-about--original .punk-page-poster{margin:0 -22px 24px}
  .punk-case--original .punk-page-poster{margin:0 -16px 35px}
}
@media(max-width:440px){
  .punk-editorial-after h2{font-size:clamp(42px,13.5vw,76px);overflow-wrap:anywhere}
  .punk-editorial-after__docket h3{font-size:45px}
  .punk-editorial-after__docket{padding:30px 22px}
  .punk-writing--collage{padding:50px 19px 65px!important}
  .punk-writing--collage .punk-writing__top h2{font-size:clamp(55px,12vw,74px)!important}
  main.wrap article h1{font-size:clamp(40px,10vw,60px)!important}
}
@media(prefers-reduced-motion:reduce){
  .punk-art-hotspots a,.punk-page-poster__hotspot{transition:none!important}
}
@media print{
  .punk-art-poster,.punk-page-poster,.punk-editorial-after:before{display:none!important}
}

/* Mobile art direction is NOT a shrunken 1536px desktop collage.
   Original artwork is split into readable, individually linked poster sheets. */
@media(max-width:700px){
  .punk-art-hotspots--desktop{display:none}
  .punk-art-hotspots--mobile{display:block}
  .punk-art-poster__picture img{aspect-ratio:1024/762}
  .punk-mobile-cards{display:grid;grid-template-columns:1fr;gap:0;padding:0 0 10px;background:#080808;
    border-top:4px solid #080808;border-bottom:9px solid var(--riot-red)}
  .punk-mobile-cards>a{display:block;position:relative;width:100%;max-width:none;
    border:0!important;border-bottom:5px solid #080808!important;line-height:0;
    background:#080808;cursor:pointer}
  .punk-mobile-cards img{display:block;max-width:none;width:100%;height:auto;object-fit:cover}
  .punk-mobile-cards>a:hover::after{content:"";position:absolute;inset:0;
    background:#ffec0033;outline:4px dashed #050505;outline-offset:-5px;pointer-events:none}
  .punk-mobile-cards>a:focus-visible{outline:6px solid #fff!important;outline-offset:-6px!important;
    box-shadow:inset 0 0 0 10px var(--riot-red)}
}