/* Slop Patterns v2.1 (26 Sep 2026): the library on the same design system as Slop Score.
   Young Serif for display, Instrument Sans for reading, IBM Plex Mono for data; pen red only for findings.
   Loaded after style.css; overrides only. Source of the rules: slop-score/docs/design-system.md */
:root{--serif:"Young Serif",Georgia,serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;--pen:#C8412B;
  --ink:#171717;--ink-mid:#525252;--ink-dim:#737373;--hair:rgba(23,23,23,.1);--card:#F6F6F4;--card-hover:#F0F0ED;--flag:#C8412B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#EDEDED;--ink-mid:#A3A3A3;--ink-dim:#8A8A8F;--card:#151517;--card-hover:#1B1B1E;--pen:#FF7A6B;--flag:#FF7A6B}}
:root[data-theme="dark"]{--ink:#EDEDED;--ink-mid:#A3A3A3;--ink-dim:#8A8A8F;--card:#151517;--card-hover:#1B1B1E;--pen:#FF7A6B;--flag:#FF7A6B}

/* brand */
.mark{flex-direction:column;align-items:flex-start;gap:6px}
.mark .logo{display:block;overflow:visible;height:30px;width:auto}
.logo-ink{fill:var(--ink)}.logo-pen{fill:none;stroke:var(--pen);stroke-width:5;stroke-linecap:round}
.mark .cnt,.acc,.badge,.heur,.railhd,.lsw{font-family:var(--mono)!important}
.mark .cnt{color:var(--ink-dim);font-size:12px}
.jmark{font-family:var(--serif);font-weight:400}

/* display type in the serif */
h1.big,h1.pat,.grphd h2,.split h2,.rel .hd h2,.subwrap h3,.p0sec h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
h1.big{font-size:clamp(40px,5vw,68px);line-height:1.05;max-width:16ch}
h1.pat{line-height:1.05}h1.pat span{font-family:inherit}
.grphd h2{font-size:clamp(28px,2.6vw,36px);line-height:1.15}
.grpsub{font-size:18px;line-height:26px}
.byline{margin:20px 0 0;font-size:15px;line-height:22px;color:var(--ink-mid);max-width:60ch}
.byline a{color:var(--ink);font-weight:600;text-decoration:none}.byline a:hover{text-decoration:underline;text-underline-offset:3px}
.newnote{margin-top:10px}

/* rail: one list of places, quiet labels that still pass contrast */
.railhd{color:var(--ink-dim);letter-spacing:.02em;text-transform:none;font-size:12px}
.railnav a b{color:var(--ink-dim)}
.railfoot{font-family:inherit!important}
.railfoot a,.railfoot .cc{font-family:"Instrument Sans",sans-serif!important;font-size:13px;color:var(--ink-mid)}
.railfoot .cc{line-height:19px;margin-top:6px}.railfoot .cc a{color:var(--ink);text-decoration:none;font-weight:600}
.lsw,.railhead{display:none!important}
@media (min-width:1001px){body.rail .foot{display:none}}

/* tiles: paper, not chrome. One quiet status line instead of red stickers */
.card{background:var(--card);box-shadow:none}
.tile:hover .card{background:var(--card-hover)}
.acc{background:transparent;box-shadow:none;border:0;color:var(--ink-mid);font-weight:500;font-size:12px;padding:0}
.tier{position:absolute;top:10px;right:12px;z-index:2;pointer-events:none;font:500 11px/16px var(--mono);color:var(--ink-dim)}
.tile:focus-visible .card{box-shadow:0 0 0 2px var(--pen)}
.grphd .tr{background:transparent;padding:0;font:500 12px/16px var(--mono);color:var(--ink-dim)}
.grphd .n{font-family:var(--mono)}

/* buttons: the Score's shapes (8px radius, 40–44px), ink primary */
.btn,.pill{border-radius:8px}
.pill-a{text-decoration:none}
.pill-b{background:transparent;box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink)}
.head .code{font-family:var(--mono);font-weight:500;background:transparent;box-shadow:inset 0 0 0 1px var(--hair);border-radius:8px;width:auto;height:auto;padding:4px 10px;display:inline-flex}
.head .code::before,.head .code::after{display:none}
.split .lbl,.fields h2{color:var(--ink-mid)}
.tabs button:focus-visible,.seg button:focus-visible{outline:2px solid var(--pen);outline-offset:2px}
.mark{padding-left:4px}
.railfoot .cc a{display:inline}
@media (max-width:720px){.ctrl{flex-wrap:wrap;overflow:visible;row-gap:12px}}

/* v2.1b: more air between the rail and the page */
@media (min-width:1001px){body.rail .wrap{--pad:clamp(56px,5.2vw,104px)}}

/* v2.1b hero: the red pen on the headline, and three specimens from the library pinned beside it */
.hero2{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(48px,6vw,112px);align-items:center}
.penword{position:relative;display:inline-block;white-space:nowrap}
.penword svg{position:absolute;left:-5%;top:2%;width:106%;height:104%;overflow:visible;pointer-events:none}
.penword path,.spec .ink path{fill:none;stroke:var(--pen);stroke-width:1;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:pendraw .9s cubic-bezier(.4,0,.2,1) .35s forwards}
@keyframes pendraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.penword path,.spec .ink path{animation:none;stroke-dashoffset:0}}
.specs{position:relative;aspect-ratio:1/1.02;max-width:560px;width:100%;justify-self:end}
.spec{position:absolute;display:block;width:62%;text-decoration:none;color:inherit}
.spec .card{position:relative;aspect-ratio:4/3;background:#fff;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 30px -12px rgba(0,0,0,.22);overflow:visible}
.spec .shot{position:absolute;inset:0;border-radius:6px;overflow:hidden}
.spec .ink{position:absolute;inset:-6% -5%;width:110%;height:112%;overflow:visible;pointer-events:none;opacity:0}
.spec.s2 .ink{opacity:1}
.spec.s2 .ink path{animation-delay:1.1s}
.spec-l{display:flex;gap:8px;align-items:baseline;margin-top:10px;font-size:13px;line-height:18px;color:var(--ink-mid)}
.spec-l i{font:500 12px var(--mono);font-style:normal;color:var(--pen)}
.spec.s1{left:0;top:2%;transform:rotate(-2.4deg);width:54%}.spec.s1 .spec-l,.spec.s3 .spec-l{display:none}
.spec.s3{right:0;top:0;transform:rotate(2.4deg);width:50%}
.spec.s2{left:14%;top:36%;transform:rotate(-.8deg);z-index:2;width:70%}
.spec:hover .card{box-shadow:0 1px 2px rgba(0,0,0,.08),0 16px 36px -12px rgba(0,0,0,.28)}
.spec:focus-visible{outline:2px solid var(--pen);outline-offset:6px;border-radius:8px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .spec .card{background:#1a1a1c}}
@media (max-width:1100px){.hero2{grid-template-columns:1fr}.specs{justify-self:start;max-width:520px}}
@media (max-width:560px){.specs{aspect-ratio:1/1.15}.spec-l{font-size:12px}}

.spec .ink path{stroke-width:.85}.penword path{stroke-width:1.05}

/* v2.1c: a clear line between the hero and the library */
.browse{border-top:1px solid var(--hair);margin-top:clamp(24px,4vw,56px);padding-top:clamp(48px,6vw,88px)}
.browsehd{margin-bottom:28px}
.browsehd h2{font:400 clamp(32px,3.2vw,44px)/1.1 var(--serif);letter-spacing:-.02em;margin:0 0 10px}
.browsehd p{margin:0;font-size:17px;line-height:25px;color:var(--ink-mid);max-width:56ch}
.hero2{padding-bottom:clamp(24px,4vw,56px)}

/* v2.1c: the one action is always in reach. Desktop: in the rail, which never scrolls away.
   Phone: in the bar that sticks while you browse. */
.railcta{display:none}
@media (min-width:1001px){body.rail .railcta{display:flex;flex:none;order:3;align-items:center;justify-content:center;height:40px;margin:14px 8px 0;border-radius:8px;background:var(--btn-bg);color:var(--btn-ink);font-weight:600;font-size:15px;text-decoration:none}
  body.rail .railcta:hover{opacity:.88}body.rail .railcta:focus-visible{outline:2px solid var(--pen);outline-offset:2px}}
.jcta{display:none}
@media (max-width:1000px){.jump .jcta{display:inline-flex;align-items:center;flex:none;height:34px;padding:0 12px;border-radius:8px;background:var(--btn-bg);color:var(--btn-ink)!important;font-size:14px;font-weight:600;text-decoration:none;margin-left:4px}
  .jump:not(.stuck) .jcta{display:none}}
@media (min-width:1001px){body.rail .lscan{display:none!important}}

.jcta .js{display:none}
@media (max-width:620px){.jump.stuck .jmark{display:none}.jcta .jl{display:none}.jcta .js{display:inline}}

/* v2.2 newsletter: sign-up first, a real sample issue on paper beside it */
.nlhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(48px,6vw,104px);align-items:start;padding-block:76px 72px}
@media (max-width:1100px){.nlhero{grid-template-columns:1fr}}
.nlhero .kick{margin:0 0 16px;font:500 12px/18px var(--mono);color:var(--pen)}
.nlhero h1.big{margin:0 0 20px;max-width:12ch}
.nlhero .lede{max-width:34em;margin:0 0 28px}
.subf.inline .subrow{max-width:520px}
.subf input[type=email]{height:48px;border-radius:8px;font-size:16px}
.subf input[type=email]:focus{box-shadow:0 0 0 2px var(--pen)}
.subf .btn{height:48px;padding:0 20px;border-radius:8px}
.submsg.good{color:var(--ink)}
.nl-fine{margin:6px 0 0;font-size:13px;line-height:19px;color:var(--ink-dim)}
.issue{position:relative;background:#fff;color:#171717;border-radius:6px;padding:34px 36px 30px;transform:rotate(1.2deg);box-shadow:0 1px 2px rgba(0,0,0,.06),0 18px 44px -18px rgba(0,0,0,.28);max-width:520px;justify-self:end}
@media (max-width:1100px){.issue{justify-self:start;transform:none}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .issue{background:#161618;color:#EDEDED}}
.is-top{display:flex;justify-content:space-between;gap:12px;font:500 11px/16px var(--mono);color:#737373;padding-bottom:14px;border-bottom:1px solid rgba(23,23,23,.12)}
.issue h3{font:400 28px/1.15 var(--serif);letter-spacing:-.015em;margin:22px 0 6px}
.is-sec{padding:14px 0;border-bottom:1px solid rgba(23,23,23,.08)}
.is-sec p{margin:0;font-size:15px;line-height:23px;color:inherit}
.is-sec p.is-l{font:500 11px/16px var(--mono);color:#737373;margin-bottom:6px}
.is-sec a{color:inherit;text-underline-offset:3px}
.is-num{position:relative;display:inline-block;font:400 22px/1 var(--serif);color:var(--pen);margin-right:4px}
.is-num svg{position:absolute;left:-14%;top:-22%;width:128%;height:150%;overflow:visible}
.is-num path{fill:none;stroke:var(--pen);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:pendraw .9s cubic-bezier(.4,0,.2,1) .6s forwards}
@media (prefers-reduced-motion:reduce){.is-num path{animation:none;stroke-dashoffset:0}}
.is-sign{margin:18px 0 0;font:400 20px var(--serif);color:var(--ink-mid)}

/* v2.2 "Use the data" on the For agents page */
.usedata{margin-top:96px;padding-top:40px;border-top:1px solid var(--hair);max-width:760px}
.usedata h2{font:400 clamp(28px,3vw,40px)/1.1 var(--serif);letter-spacing:-.02em;margin:0 0 12px}
.usedata p{color:var(--ink-mid);font-size:17px;line-height:26px;margin:0 0 20px}
.usedata p a{color:var(--ink)}
.usedata .dl{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.usedata .dl li{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--hair);font-size:15px}
.usedata .dl a{font-weight:600;color:var(--ink)}
.usedata .dl code{font:13px var(--mono);color:var(--ink)}
.usedata .dl span{color:var(--ink-dim);font-size:14px}

/* v2.2 Ask box: one input, three ways in */
.railsearch input::placeholder{font-style:normal}
.railsearch input:focus{box-shadow:0 0 0 2px var(--pen);border-color:transparent}
.askhint{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:50;background:var(--ground);border:1px solid var(--hair);border-radius:10px;padding:8px;box-shadow:0 12px 32px -12px rgba(0,0,0,.25)}
.railsearch:focus-within:not(.has) .askhint{display:block}
.ah-t{margin:4px 8px 6px;font:500 11px/16px var(--mono);color:var(--ink-dim)}
.askhint button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:6px;padding:8px;cursor:pointer;color:var(--ink)}
.askhint button:hover,.askhint button:focus-visible{background:var(--fill);outline:none}
.askhint b{display:block;font-size:13px;font-weight:600}
.askhint span{display:block;font-size:12px;line-height:17px;color:var(--ink-mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.railsearch.isurl::after{content:"Enter to scan this site";position:absolute;left:0;top:calc(100% + 6px);font:500 11px var(--mono);color:var(--pen)}
.railsearch.isurl{margin-bottom:22px}.railsearch.isurl::after{top:calc(100% + 5px)}.railsearch input{font-size:13.5px}
/* v2.2 search results: say what this is, offer the way back, no sort tabs (results are by relevance) */
.qhd .qk{margin:0 0 8px;font:500 12px/18px var(--mono);color:var(--pen)}
.qhd h2{word-break:break-word}
.qclear{background:none;border:0;padding:0;margin-left:6px;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair);cursor:pointer}
.qclear:hover{text-decoration-color:currentColor}
.ctrl.qmode .tabs{display:none}