/* Newspaper mode. Toggled by the pixel button in the masthead; adds .paper to . Everything here is an override of the normal (screen) design. */ html.paper { --paper: #ece3cf; --ink: #191713; --ink-soft: #6b6455; --rule: #bfb397; } html.paper body { background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.018) 0 1px, transparent 1px 3px ), var(--paper); color: var(--ink); font-family: "Times New Roman", Times, Georgia, serif; font-weight: 400; } html.paper .mono, html.paper .display, html.paper .logo, html.paper nav, html.paper nav a, html.paper .byline, html.paper .cat, html.paper .eyebrow, html.paper .tag, html.paper .chip, html.paper .pager a, html.paper .pager span, html.paper .share a, html.paper .share button, html.paper .updown .t, html.paper footer, html.paper .museum-text h3, html.paper .article-body h2, html.paper .end .name { font-family: "Times New Roman", Times, Georgia, serif; letter-spacing: 0; -webkit-text-stroke: 0; } /* ---------- masthead ---------- */ html.paper .masthead { flex-direction: column; align-items: center; gap: 8px; padding: 30px 40px 12px; border-bottom: 5px double var(--ink); box-shadow: none; text-align: center; } html.paper .masthead.scrolled { padding: 12px 40px 8px; } html.paper .logo, html.paper .masthead.scrolled .logo { background: none; color: var(--ink); padding: 0; font-size: clamp(34px, 6.4vw, 62px); line-height: 0.98; letter-spacing: -0.01em; white-space: nowrap; } html.paper .logo br { display: none; } html.paper .logo span { display: inline-block; margin-right: 0.26em; } html.paper .logo .cur { display: none; } html.paper .logo:hover { background: none; color: var(--ink); opacity: 0.7; } html.paper .masthead::after { content: "EST. 2026 · HERAKLION, CRETE · videogamesmagazine.gr"; order: 5; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 6px 0; width: 100%; } html.paper nav { gap: 26px; font-size: 13px; } html.paper nav a { text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; } html.paper nav a::after { height: 1px; } html.paper .progress { display: none; } /* ---------- headlines ---------- */ html.paper .hero h1, html.paper .catHero h1 { text-align: center; font-size: clamp(38px, 5.6vw, 74px); line-height: 1.02; letter-spacing: -0.015em; max-width: 22ch; margin: 0 auto; -webkit-text-stroke: 0; color: var(--ink) !important; } html.paper .hero .eyebrow, html.paper .catHero .eyebrow { text-align: center; letter-spacing: 0.26em; font-size: 11px; text-transform: uppercase; } html.paper .hero .dek { font-size: 19px; font-style: italic; line-height: 1.55; } html.paper .hero .meta, html.paper .catHero p { justify-content: center; } html.paper .hero .meta { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } html.paper .rule-thick { height: 3px; } /* ---------- article ---------- */ html.paper .article-body { max-width: 1100px; font-size: 17px; line-height: 1.55; text-align: justify; hyphens: auto; column-count: 2; column-gap: 46px; column-rule: 1px solid var(--rule); } html.paper .article-body > p:first-of-type { font-size: 1em; } html.paper .article-body > p:first-of-type::first-letter { float: left; font-size: 4.1em; line-height: 0.82; padding: 0.06em 0.09em 0 0; font-weight: 700; } html.paper .article-body h2 { column-span: all; text-align: center; font-size: clamp(20px, 2.2vw, 26px); text-transform: uppercase; letter-spacing: 0.06em; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 10px 0; margin: 1.6em 0 0.9em; } html.paper .pull { -webkit-text-stroke: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-style: italic; text-transform: none; text-align: center; column-span: all; } html.paper .figure img, html.paper .hero .photo img, html.paper .col-left .thumb img, html.paper .museum-mark img { filter: grayscale(1) contrast(1.3) sepia(0.14) brightness(1.04); } /* ---------- lists ---------- */ html.paper .row-article { border-bottom: 1px solid var(--rule); } html.paper .row-article:hover { background: #e3d8bd; color: var(--ink); } html.paper .row-article:hover .cat, html.paper .row-article:hover .byline, html.paper .row-article:hover p { color: var(--ink-soft); } html.paper .row-article::after { content: ""; } html.paper .row-article h3 { text-transform: none; -webkit-text-stroke: 0; } html.paper .section-label { border-bottom: 1px solid var(--rule); padding-bottom: 10px; text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; } /* ---------- small parts ---------- */ html.paper .tag { border-bottom-color: var(--rule); } html.paper .chip, html.paper .pager a, html.paper .pager span, html.paper .share a, html.paper .share button { border: 1px solid var(--ink); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } html.paper .chip.on, html.paper .pager .on, html.paper .chip:hover, html.paper .pager a:hover, html.paper .share a:hover, html.paper .share button:hover { background: var(--ink); color: var(--paper); } html.paper .updown { border-top: 3px double var(--ink); } html.paper .updown > a:hover { background: #e3d8bd; color: var(--ink); } html.paper .updown .t { text-transform: none; font-size: clamp(19px, 2.2vw, 27px); } html.paper .museum-strip { border-top: 3px double var(--ink); } html.paper footer { border-top: 1px solid var(--rule); text-transform: uppercase; letter-spacing: 0.12em; } html.paper .sheet { background: var(--paper); color: var(--ink); } html.paper .sheet a { text-transform: none; } html.paper .sheet .close { color: var(--ink); } html.paper .bio p { font-size: 18px; line-height: 1.6; } html.paper .lang a.on { color: var(--ink); } /* ---------- the toggle itself ---------- */ .paper-btn { /* lives in the header row, right after the language switch */ position: static; order: 3; align-self: flex-end; margin-left: 4px; background: var(--paper, #fff); border: 2px solid var(--rule, #e0e0e0); cursor: pointer; padding: 8px 12px; color: var(--ink-soft); transition: color 0.2s ease, border-color 0.2s ease; } .paper-btn:hover { border-color: var(--ink); } .paper-btn:hover { color: var(--ink); } .paper-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .paper-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; } .paper-btn svg { display: block; width: 22px; height: 22px; shape-rendering: crispEdges; flex: none; } .paper-label { line-height: 1; font-family: "URW Geometric Ext", monospace; font-weight: 900; font-size: 10px; letter-spacing: 0.14em; white-space: nowrap; } .paper-label .state { opacity: 0.55; } html.paper .paper-label { font-family: "Times New Roman", Times, Georgia, serif; letter-spacing: 0.16em; } html.paper .paper-label .state { opacity: 1; } @media (max-width: 1200px) { .paper-label { display: none; } } @media (max-width: 900px) { .paper-btn { order: 5; align-self: flex-end; padding: 5px 7px; margin-left: 12px; } html.paper .paper-btn { align-self: center; margin-left: 0; } } html.paper .paper-btn { color: var(--ink); } html.paper .paper-btn { border-color: var(--ink); } @media (max-width: 820px) { html.paper .article-body { column-count: 1; column-rule: none; } html.paper .masthead::after { content: "EST. 2026 · HERAKLION, CRETE"; } } @media print { .paper-btn, .lang, .menu-btn, .sheet, .progress { display: none !important; } }