/* Lok Sanjh — shared layout sheet. Loaded last in on the homepage and the article page, after each page's own inline CSS. Everything here is additive. Desktop (1300px and up) is a WordPress-style shell that uses the viewport: a reading column that grows to fill the available width (capped at --measure) plus a right sidebar holding the studio's ad slots on top and the archive widget below. Ads are studio-owned (contract §1): with nothing enabled the ad markup is simply absent, no empty box and no error text. When the rail has nothing to show at all the shell collapses to a single full-width column. Below 1300px the page is one column and the rail flows after the news. */ :root { --shell-w: min(1600px, 100% - 40px); /* the page shell uses the viewport */ --rail-w: 320px; /* right sidebar (ads + widgets) */ --rail-gap: 32px; /* gutter between the reading column and the sidebar */ --measure: 1200px; /* the reading column grows to fill, but no wider */ } img { max-width: 100%; } .site-shell { width: 100%; } .site-shell > .site-main { min-width: 0; max-width: var(--measure); } /* ---------- right sidebar: studio ads on top, editorial widgets below ---------- */ .site-rail { display: block; width: 100%; } .site-rail .ad-rail { display: block; margin: 0 0 20px; } .ad-slot { margin: 0 0 20px; border-radius: 14px; overflow: hidden; background: transparent; } .ad-slot:last-child { margin-bottom: 0; } .ad-slot .ad-link { display: block; line-height: 0; } .ad-slot img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 14px; object-fit: contain; } .ad-inline { margin: 20px 0 24px; } .side-widget { background: var(--paper, #fff); border: 1px solid var(--line, #e7e5e4); border-radius: 16px; padding: 16px 18px 18px; margin-top: 20px; box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .10); } .site-rail > .side-widget:first-child, .site-rail > .ad-rail + .side-widget { margin-top: 0; } .side-head { font-family: 'Noto Serif Gurmukhi', serif; font-size: 16.5px; font-weight: 800; color: var(--navy, #0f172a); margin: 0 0 6px; padding: 0 0 10px; border-bottom: 2px solid var(--saffron, #ea580c); } .side-list { list-style: none; margin: 0; padding: 0; } .side-list li + li { border-top: 1px solid var(--line, #e7e5e4); } .side-link { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; min-height: 44px; color: var(--ink, #1c1917); } .side-link:hover .side-text { color: var(--saffron, #ea580c); } .side-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; margin-top: 7px; } .side-body { display: block; min-width: 0; } .side-text { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.5; } .side-meta { display: block; font-size: 12.5px; color: var(--muted, #57534e); margin-top: 3px; } .side-pdf { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 11px 14px; min-height: 44px; border-radius: 12px; background: var(--navy, #0f172a); color: #fff; font-weight: 800; font-size: 14px; } .side-pdf:hover { background: #1e293b; } /* ---------- tap targets: 44px minimum at every width ---------- */ .btn, nav a, .topbar a, footer a, td a, th a, .card .date a, #archive a, .side-card a, .ad-slot a, .side-link, .side-pdf, input[type=email], button { min-height: 44px; } .topbar { padding: 0; } .topbar .socials a, .topbar-links a, .btn, .card .date a, #archive a, td a, th a, .side-card a, nav a { display: inline-flex; align-items: center; } .side-card a { width: 100%; } footer a { display: flex; align-items: center; } .card .date { align-items: center; } /* Card headline links are the card's main tap target: block so min-height applies even when the headline fits on a single line (wide flex row). */ .card .body > a, .card .body > div:first-child > a { display: block; min-height: 44px; min-width: 0; } /* ---------- desktop with room for a second column ---------- Two columns only where the reading column can stay wide: 860 (old measure) + 320 rail + 32 gap + 40 gutters needs ~1252px, so below 1300px the page stays single-column and the rail flows after the news. */ @media (min-width: 1300px) { /* the shell and the bands around it share one box that uses the viewport */ body.has-shell .wrap, .site-shell.wrap { max-width: var(--shell-w); margin: 0 auto; padding-left: 20px; padding-right: 20px; } .site-shell.wrap { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); gap: var(--rail-gap); align-items: start; } /* no ads and no archive widget → one full-width reading column */ .site-shell.wrap.site-shell--norail { grid-template-columns: minmax(0, var(--measure)); justify-content: center; } /* The rail is a plain column: it scrolls with the page, so the ads and the archive widget are always fully visible without an inner scrollbar. */ .site-shell > .site-rail { align-self: start; } } /* ---------- tablet and phone: one column, rail after the news ---------- */ @media (max-width: 1299px) { /* single column: centre the capped reading measure */ .site-shell > .site-main { margin-inline: auto; } /* the tall masthead no longer steals the phone viewport */ header { position: static; } nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } nav::-webkit-scrollbar { display: none; } nav .wrap { flex-wrap: nowrap; } nav a { flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; min-height: 48px; } .site-shell > .site-rail { margin: 28px auto 0; max-width: 640px; display: grid; gap: 18px; } .site-rail .side-widget, .site-rail .ad-rail { margin: 0; } .site-rail .ad-slot { margin: 0; } .ad-rail .ad-slot img { max-height: 320px; } /* Tablets are touch devices too: same 15px legibility floor as phones. Several sizes come from inline styles, hence !important. */ footer { font-size: 15px; } .topbar, .topbar .date, .topbar .socials a, .topbar .crumb, .topbar-links a, .ticker .chip, .ticker .scroller span, .stat .lbl, .sec-head .sub, .side-card p, .side-card .meta, .card p, .card .tagx, .card .date, .card .date span, .card span, .cat-card .cn, .btn, .download-note, .paper-toolbar .title, .edition-meta, .tagx, .loc, .deck, .byline, .pdfbox, .newsletter p, .side-text, .side-meta, .side-pdf, .side-link, footer p, footer a, footer div, footer span, .foot, .suchna-box, .suchna-box p, .suchna-box div, #archive a, #archive .card span, #archive .card li, #archive .card a, #archive .card div { font-size: 15px !important; line-height: 1.6; } } /* ---------- phone ---------- */ @media (max-width: 700px) { body { font-size: 16px; } footer { font-size: 15px; } .topbar { padding: 6px 0; } .topbar .wrap { flex-direction: column; align-items: flex-start; gap: 0; } .topbar .socials { display: flex; flex-wrap: wrap; gap: 0 16px; width: 100%; } .topbar .socials a { display: inline-flex; align-items: center; min-height: 44px; } nav a { padding: 12px 14px; min-height: 48px; } .sec-head { flex-wrap: wrap; gap: 8px; } .sec-head .sub { margin-left: 0; } .cats-grid { gap: 8px; } .cat-card { flex: 0 0 96px; min-height: 88px; padding: 10px 6px; } .cat-card .ci { width: 36px; height: 36px; font-size: 17px; } .card h3, .side-card h3 { font-size: 17px; } .card h3, .side-card p, .card p, .art-h2 { overflow-wrap: anywhere; } .btn { min-height: 44px; padding-left: 16px; padding-right: 16px; } input[type=email] { min-height: 44px; } .card .date a { display: inline-flex; align-items: center; min-height: 44px; } footer a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; } .f-grid { gap: 8px 22px; } .suchna-box { margin-top: 20px; } }