/* econplot.com — the shared stylesheet, generated by videos-market/scripts/build_site.py. The palette and type are the channel's own, so the site and the videos read as one thing: Archivo Black for display, Inter for text, the paper ground and the marker yellow. */ :root{ --paper:#f4f0e6; --ink:#141414; --muted:#5c5749; --rule:#ddd6c6; --yellow:#f2c200; --card:#fffdf6; --max:820px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* overflow-wrap, deliberately not overflow-x:hidden. A long series code, an accession number or a URL in the sources list is one unbreakable word, and one of those is enough to give the page a horizontal scrollbar — so break the word. Hiding the overflow instead would leave the bug in place and make it invisible to the next person measuring, which is how it gets shipped. Checked at 475px: document.scrollWidth equals clientWidth, and the only elements past the right edge are inside the figures table's own .scroll container, where they belong. */ body{margin:0;overflow-wrap:break-word;background:var(--paper);color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:18px;line-height:1.65; background-image:radial-gradient(#e5ddcc 1.5px,transparent 1.5px);background-size:34px 34px} .wrap{max-width:var(--max);margin:0 auto;padding:0 24px} h1,h2,h3{font-family:"Archivo Black",Impact,sans-serif;font-weight:400;line-height:1.12; letter-spacing:-.01em} h1{font-size:clamp(30px,5vw,46px);margin:34px 0 18px;text-transform:none} h2{font-size:clamp(22px,3vw,29px);margin:44px 0 14px;text-transform:none} h3{font-size:19px;margin:0 0 8px;font-family:Inter,sans-serif;font-weight:700} p{margin:0 0 18px} a{color:var(--ink)} mark{background:var(--yellow);padding:0 .12em} code{font-size:.92em;background:#ece5d5;padding:.1em .35em;border-radius:4px} .kicker{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--muted)} header{border-bottom:1px solid var(--rule);background:rgba(244,240,230,.92);position:sticky; top:0;z-index:10;backdrop-filter:blur(6px)} .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0} .brand{font-family:"Archivo Black",Impact,sans-serif;font-size:21px;text-transform:uppercase; text-decoration:none;color:var(--ink)} .brand .dot{color:var(--yellow)} nav{display:flex;align-items:center;gap:20px;font-size:14px;font-weight:600} /* nowrap because "Our standard" broke across two lines and pushed the whole bar to double height (owner, 2026-09-06). A nav label is a name; it either fits on one line or it goes. */ nav a{text-decoration:none;color:var(--muted);white-space:nowrap} nav a:hover{color:var(--ink)} /* Shed the secondary links as the bar narrows, rather than wrapping or shrinking the type past readable. Subscribe is last to go and never does: it is the one action the page is asking for, and the footer of every page still carries the standard and the privacy links. */ @media(max-width:820px){nav{gap:16px}nav a:nth-of-type(2),nav a:nth-of-type(3){display:none}} @media(max-width:560px){nav a:nth-of-type(1){display:none}} @media(max-width:420px){.brand{font-size:18px}.nav-cta{padding:8px 13px}} .crumb{font-size:13px;color:var(--muted);margin:26px 0 0} .crumb a{color:var(--muted)} /* The header call to action reads as a button, because a fourth grey nav link is not a call to anything. On a topic page it points at the inline card on the same page: sending a reader to the home page to subscribe is asking them to leave the article to do it. */ .nav-cta{background:var(--ink);color:var(--paper) !important;padding:8px 16px;border-radius:6px; font-weight:700} .nav-cta:hover{background:#000} /* The inline capture, sitting after the first section. Deliberately quiet: it is a card in the flow of the page, not an overlay, not a bar, and it never covers a word of the article. */ .capture{background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--yellow); border-radius:10px;padding:24px;margin:38px 0} .capture h3{font-family:"Archivo Black",Impact,sans-serif;font-weight:400;font-size:21px; letter-spacing:-.01em;margin:0 0 10px} .capture p{font-size:16px;margin:0 0 16px} .capture form{display:flex;gap:10px;flex-wrap:wrap} .capture input{flex:1 1 240px;padding:13px 15px;border:2px solid var(--ink);border-radius:8px; font-size:16px;font-family:inherit;background:#fff;color:var(--ink); -webkit-text-fill-color:var(--ink)} .capture input:focus{outline:none;border-color:var(--yellow)} .capture button{padding:13px 26px;border:2px solid var(--ink);background:var(--ink); color:var(--paper);font-weight:700;font-size:16px;border-radius:8px;cursor:pointer; font-family:inherit} .capture button:hover{background:#000} .capture .status{margin-top:10px;font-size:15px;min-height:1.4em} .capture .formnote{font-size:13px;color:var(--muted);margin:12px 0 0} /* Every text field states BOTH its colours, scoped to the ground it sits on. An input inherits neither `color` nor `background`, so a field left half-styled takes the browser's default against whatever is behind it. On econplot.com's home page a single global rule written for the dark band was silently picked up by a new field in the pale hero, and overriding only the background left light text on white — invisible while typing (owner, 2026-09-06). -webkit-text-fill-color is the one Chrome honours once a field has been autofilled. */ .capture input::placeholder{color:#8a8478;opacity:1} .subscribe input::placeholder{color:#8a8478;opacity:1} /* The answer box. First thing under the H1, and the block an answer engine quotes. */ .answer{background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--yellow); border-radius:10px;padding:22px 24px;margin:0 0 30px;font-size:19px} .answer p:last-child{margin-bottom:0} figure.video{margin:30px 0;text-align:center} /* height:auto and the explicit ratio both matter. The