/*
* This is a manifest file that'll be compiled into application.css.
*
* Explicit cascade order (replaces require_tree .): the base loads first
* (require_self), then each layer overrides it in turn — so editorial.css
* finally lands after the base it was written to override.
*
*
* Breakpoints — three widths, used everywhere:
* 900px layout reflow (multi-column grids drop a column)
* 700px tablet/handheld (gutters tighten, type steps down)
* 560px phone (everything goes single column)
*/
/* ═══════════════════════════════════════════════════════════════
KI_App — The Newspaper
One aesthetic. No boxes. Rules and type carry everything.
═══════════════════════════════════════════════════════════════ */
/* DM Serif Display + IBM Plex Mono are loaded via in the layout head.
AnekOdia body faces are served from public/fonts with absolute urls so they
resolve in production (they used to 404: not fingerprinted, bare relative url). */
@font-face {
font-family: 'AnekOdia-SemiBold';
src: url(/fonts/AnekOdia-SemiBold.ttf) format('truetype');
font-display: swap;
}
@font-face {
font-family: 'AnekOdia-Regular';
src: url(/fonts/AnekOdia-Regular.ttf) format('truetype');
font-display: swap;
}
/* ── Tokens ───────────────────────────────────────────────────── */
:root {
--ink: #0a0a0a;
--paper: #f8f8f6;
--rule: rgba(10,10,10,0.12);
--rule-heavy: #0a0a0a;
--grey-1: #f0efed;
--grey-2: #e0dedb;
--grey-3: #2c82cd;
--grey-4: #5a5752;
--surface-raised: #f8f8f6;
--shadow-tile: rgba(10,10,10,0.08);
--row-hover: #f0efed;
--scrim: rgba(10,10,10,0.55);
--serif: 'DM Serif Display', Georgia, serif;
--mono: 'IBM Plex Mono', 'Courier New', monospace;
--body: 'AnekOdia-Regular', Georgia, serif;
color-scheme: light;
--pad: 28px;
--nav-slot: 120px;
--t: 0.16s ease;
}
body.dark-mode {
color-scheme: dark;
--ink: #f8f8f6;
--paper: #0e0e0e;
--rule: rgba(248,248,246,0.10);
--rule-heavy: #f8f8f6;
--grey-1: #141414;
--grey-2: #1e1e1e;
--grey-3: #579ddb;
--grey-4: #9a9790;
--surface-raised: #141414;
--shadow-tile: rgba(248,248,246,0.06);
--row-hover: #1e1e1e;
--scrim: rgba(0,0,0,0.68);
}
@media (prefers-color-scheme: dark) {
body:not(.light-mode):not(.dark-mode) {
color-scheme: dark;
--ink: #f8f8f6;
--paper: #0e0e0e;
--rule: rgba(248,248,246,0.10);
--rule-heavy: #f8f8f6;
--grey-1: #141414;
--grey-2: #1e1e1e;
--grey-3: #579ddb;
--grey-4: #9a9790;
--surface-raised: #141414;
--shadow-tile: rgba(248,248,246,0.06);
--row-hover: #1e1e1e;
--scrim: rgba(0,0,0,0.68);
}
}
/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ── Base ─────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
font-family: var(--body);
font-size: 16px;
line-height: 1.55;
background-color: var(--paper);
color: var(--ink);
transition: background-color 0.3s ease, color 0.3s ease;
-webkit-font-smoothing: antialiased;
}
/* Selected text inverts against the page instead of taking the browser's own
highlight, which paints a light box behind near-white ink in dark mode and
swallows the text. Both tokens flip with the theme, so it reads either way. */
::selection {
background: var(--ink);
color: var(--paper);
}
/* Surfaces that are already inverted (ink block, paper text) need the highlight
flipped back, or selection repaints the same ink they sit on and the text
disappears into it. Keep this list in step with the inverted components. */
.ps-card__avatar::selection,
.ps-trigger__avatar::selection,
.ed-badge--filled::selection,
.pagy-nav span.current::selection,
input[type="submit"]:hover::selection,
button[type="submit"]:hover::selection,
.submit:hover::selection,
.btn:hover::selection {
background: var(--paper);
color: var(--ink);
}
/* Chrome paints its own background and text colour into autofilled fields,
with the same result. The inset shadow is the only way to override it. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: var(--ink);
-webkit-box-shadow: 0 0 0 1000px var(--paper) inset;
caret-color: var(--ink);
}
/* ── Typography ───────────────────────────────────────────────── */
h1 {
font-family: var(--serif);
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 400;
line-height: 1.05;
color: var(--ink);
margin: 24px 0 0;
padding-bottom: 14px;
border-bottom: 2px solid var(--rule-heavy);
}
h2 {
font-family: var(--serif);
font-size: 1.3rem;
font-weight: 400;
line-height: 1.15;
color: var(--ink);
margin-bottom: 10px;
}
h3 {
font-family: var(--mono);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--grey-3);
margin-bottom: 6px;
}
p {
font-family: var(--body);
font-size: 0.95rem;
line-height: 1.65;
color: var(--ink);
margin-bottom: 0.8rem;
}
strong, b { font-family: 'AnekOdia-SemiBold', Georgia, serif; }
/* ── Links ────────────────────────────────────────────────────── */
a {
font-family: var(--mono);
font-size: 0.78rem;
color: var(--ink);
text-decoration: none;
padding: 0.05rem 0;
background-image: linear-gradient(var(--ink), var(--ink));
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 1px;
transition: background-size var(--t), opacity var(--t);
}
a:hover {
background-size: 0% 1px;
opacity: 0.55;
}
.no-decoration {
background-image: none !important;
background: none !important;
}
/* ── Images ───────────────────────────────────────────────────── */
img { transition: filter 0.4s ease; }
/* Only the monochrome SVG icons invert. This used to apply to every ![]()
,
which flipped the masthead logo and member photographs too. Opt a
photographic asset out by giving it .no-invert. */
body.dark-mode img[src$=".svg"]:not(.no-invert),
body.dark-mode .icon-invert:not(.no-invert) { filter: invert(1); }
@media (prefers-color-scheme: dark) {
body:not(.light-mode):not(.dark-mode) img[src$=".svg"]:not(.no-invert),
body:not(.light-mode):not(.dark-mode) .icon-invert:not(.no-invert) { filter: invert(1); }
}
/* Sized SVG icon helpers */
.tinier-square-image { width: 1.2rem; height: 1.2rem; object-fit: contain; }
.tiny-square-image { width: 2.2rem; height: 2.2rem; object-fit: contain; }
.square-image { width: 2rem; height: 2rem; object-fit: contain; }
.center-image { width: 5rem; height: 3.5rem; object-fit: contain; }
.large-image { width: 4rem; height: 4rem; object-fit: contain; }
.larger-image { width: 8rem; height: 8rem; object-fit: contain; }
.clickable-image {
cursor: pointer;
display: inline-flex;
align-items: center;
}
/* ── Layout ───────────────────────────────────────────────────── */
.content {
max-width: 1180px;
margin: 0 auto;
padding: 0 var(--pad) var(--pad);
}
.row-wrap {
display: flex;
flex-wrap: wrap;
gap: 0;
}
.column-wrap {
display: flex;
flex-direction: column;
}
.force-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.right-text { text-align: right; }
.left-text { text-align: left; }
.flex-end { justify-content: flex-end; }
.left-margin { margin-left: 5%; }
/* spacing */
.square-margin-1 { margin: 0.75rem; }
.margin-top-1 { margin-top: 0.75rem; }
.margin-top-2 { margin-top: 2rem; }
.margin-top-3 { margin-top: 1.5rem; }
.large-font { font-size: 1.15rem; }
.tiny-text { font-size: 0.68rem; font-family: var(--mono); }
.hidden { display: none !important; }
/* ── Top navigation ───────────────────────────────────────────── */
/* Three real grid tracks. The slots used to be absolutely positioned against
the same `right: var(--pad)` origin, so every element in the right-hand slot
painted on top of the others; the fix is to let them occupy actual space.
The outer tracks are sized off each other so the masthead stays optically
centred even when one side is empty. */
.top-nav {
display: grid;
grid-template-columns: minmax(var(--nav-slot), 1fr) auto minmax(var(--nav-slot), 1fr);
align-items: center;
gap: 12px;
padding: 10px var(--pad);
border-bottom: 2px solid var(--rule-heavy);
background: var(--paper);
}
.top-nav .center {
grid-column: 2;
display: flex;
align-items: center;
gap: 8px;
}
.top-nav .left {
grid-column: 1;
justify-self: start;
display: flex;
align-items: center;
gap: 6px;
}
/* Every right-hand element shares one slot and flows inside it. */
.top-nav .right {
grid-column: 3;
justify-self: end;
display: flex;
align-items: center;
gap: 14px;
}
/* Nav icon buttons —