/* ==========================================================================
   Kobra redesign — single post (/2025/08/06/nazev-clanku/).
   Loaded only on is_singular('post'); redesign.css is a dependency and
   supplies the :root palette, the @font-face declarations and the site-wide
   body colour this file builds on.

   Design-only pass: nothing here changes what the article says. The one
   thing that is *added* is the headline, because Splash never prints it on
   this layout at all — see post.js for the why.

   Splash lays the article out with Bootstrap floats inside a two-thirds
   column and reserves the other third for a sidebar which is empty on this
   site, so the article sat shoved to the right. That third is reclaimed
   below and the text column is then centred and capped at a readable
   measure.
   ========================================================================== */

/* ==========================================================================
   Centring — reclaim the empty sidebar's third
   ==========================================================================
   :empty is doing real work: add a widget to this sidebar and these rules
   stop matching, the third comes back, and Splash's original two-column
   arrangement returns on its own. Same approach as blog.css, but the
   selectors differ because the single-post markup is its own shape
   (.stm-single-post > .container > .row.stm-format-…) rather than the
   listing's .sidebar-wrapper.

   Every selector here names .col-md-pull-8 / .col-md-push-4 rather than
   bare .col-md-4 / .col-md-8. That is not decoration: the comment form
   further down the same .stm-single-post contains three more .col-md-4
   columns for the author/email/url fields, and a rule written on the bare
   class would reach into them too. The push/pull pair is unique to the
   sidebar arrangement. */
.stm-single-post .row > .col-md-4.col-md-pull-8:empty {
	display: none;
}
.stm-single-post .row:has(> .col-md-4.col-md-pull-8:empty) > .col-md-8.col-md-push-4 {
	width: 100%;
	left: 0;
	right: 0;
}

/* With the full width reclaimed, a 1170px line of 15px text is far too long
   to read comfortably, so the article is capped at a normal measure and
   centred. Capping the column rather than the container keeps the rule in
   one place — everything inside inherits the width, including the photo. */
.stm-single-post .row > .col-md-8.col-md-push-4 {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
	float: none;
}

/* Splash reserves space above the (here empty) title box for the sidebar's
   top margin. With the sidebar gone it is just a gap. */
.stm-single-post .sidebar-margin-top {
	display: none;
}

/* ==========================================================================
   Headline — injected by post.js into Splash's own empty .stm-small-title-box
   ==========================================================================
   Deliberately placed above the photo rather than overlaid on it. An overlay
   only holds while the title is short enough to fit the image's fixed
   height, and Czech headlines on this site run long — that exact
   disagreement is what broke the news listing's lead card (see CLAUDE.md,
   v0.23.3). Above the photo it cannot happen at any width. */
/* The headline sat flush against the bottom edge of the site header — the
   title box Splash gives an article has no top spacing of its own, and the
   header is `stm-non-transparent-header`, so the two simply touched.
   Measured: the header ended at 93px and the `<h1>` began at 93px, a 0px gap.

   56px, because that is already the gap above a page heading everywhere else
   on this site — the same number `/aktuality/` was corrected *to* when
   hockey.css's `padding-top: 10px` made it 66px. Put on the title box rather
   than the headline so anything else post.js ever injects above the headline
   inherits the same clearance. */
.stm-single-post .stm-small-title-box {
	padding-top: 56px;
}

.kobra-post-title {
	margin: 0 0 6px;
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 800;
	font-size: 40px;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--kobra-ice);
	text-wrap: pretty;
	/* Left-aligned on purpose: it sits directly above a justified text
	   block, and a centred heading over a hard left edge reads as
	   misaligned rather than as a deliberate choice. */
	text-align: left;
	hyphens: none;
}

/* A short accent rule under the headline, echoing the section headings on
   the homepage so an article reads as part of the same site. */
.kobra-post-title-rule {
	width: 64px;
	height: 4px;
	margin: 0 0 22px;
	background: var(--kobra-yellow);
	border-radius: 2px;
}

/* ==========================================================================
   Meta line — date, author, comment count
   ==========================================================================
   These inherit a #a4a4a4 grey from Splash's meta wrapper. Nothing targets
   them directly, so a plain declaration wins outright — an inherited value
   loses to any direct one regardless of the inherited rule's specificity. */
.stm-single-post .stm-single-post-meta {
	margin: 0 0 26px;
	padding: 0 0 18px;
	border-bottom: 1px solid var(--kobra-line);
	font-family: 'Bricolage Grotesque', sans-serif;
}
.stm-single-post .stm-single-post-meta .stm-date,
.stm-single-post .stm-single-post-meta .stm-author,
.stm-single-post .stm-single-post-meta .stm-comments-num {
	color: var(--kobra-ice);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.stm-single-post .stm-single-post-meta .fa {
	margin-right: 7px;
	color: var(--kobra-sky);
}
.stm-single-post .stm-single-post-meta .stm-comments-num a,
.stm-single-post .stm-single-post-meta .stm-comments-num a:focus {
	color: var(--kobra-ice);
}
.stm-single-post .stm-single-post-meta .stm-comments-num a:hover {
	color: var(--kobra-yellow);
}
.stm-single-post .stm-single-post-meta .stm-comments-num a:hover .fa {
	color: var(--kobra-yellow);
}

/* ==========================================================================
   Featured photo
   ========================================================================== */
.stm-single-post .post-thumbnail {
	margin: 0 0 22px;
	border-radius: 4px;
	overflow: hidden;
	line-height: 0;
}
.stm-single-post .post-thumbnail img {
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Article body
   ==========================================================================
   Justified, as asked. Justification without hyphenation opens rivers of
   white space in Czech, whose words are long and whose prepositions are
   single letters — so hyphens are switched on to go with it. The document
   carries lang="cs", which is what lets the browser pick Czech hyphenation
   patterns; without that attribute hyphens:auto silently does nothing. */
.stm-single-post .post-content p,
.stm-single-post .post-content li {
	color: var(--kobra-ice);
	font-size: 16px;
	line-height: 1.75;
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}
.stm-single-post .post-content p {
	margin: 0 0 20px;
}

/* Gutenberg's own alignment classes are an editorial decision made per
   paragraph in the editor — one article signs off with a right-aligned
   author name. Justification is for running text, so those keep what the
   editor chose. */
.stm-single-post .post-content p.has-text-align-right {
	text-align: right;
	hyphens: none;
}
.stm-single-post .post-content p.has-text-align-center {
	text-align: center;
	hyphens: none;
}
.stm-single-post .post-content p.has-text-align-left {
	text-align: left;
}

/* Headings inside an article. redesign.css already paints every h1–h6 with
   --kobra-ice !important site-wide, so colour needs no repeating here —
   only size and rhythm. */
.stm-single-post .post-content h2,
.stm-single-post .post-content h3,
.stm-single-post .post-content h4 {
	margin: 34px 0 12px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
}
.stm-single-post .post-content h2 { font-size: 26px; }
.stm-single-post .post-content h3 { font-size: 21px; }
.stm-single-post .post-content h4 { font-size: 18px; }

/* Links in the body. hockey.css paints every .hockey a black at (0,1,1);
   this is (0,2,1), so it wins on specificity with no !important needed. */
.stm-single-post .post-content a,
.stm-single-post .post-content a:focus {
	color: var(--kobra-sky);
	text-decoration: none;
	border-bottom: 1px solid rgba(83, 169, 220, 0.4);
}
.stm-single-post .post-content a:hover {
	color: var(--kobra-yellow);
	border-bottom-color: var(--kobra-yellow);
}

.stm-single-post .post-content strong,
.stm-single-post .post-content b {
	color: var(--kobra-ice);
	font-weight: 700;
}

/* ==========================================================================
   Legacy inline colours pasted into old articles
   ==========================================================================
   Seven articles from 2022–2023 were written in the classic editor with text
   pasted in from Word or Docs, and carry the editor's own colours baked into
   the markup as <span style="color: #333333"> — 205 of them across the seven.
   Those were invisible on the old white page and unreadable on this one.

   An inline style outranks every author rule no matter how long the selector,
   so this is the one situation where `!important` is not a shortcut but the
   only mechanism: an important author declaration is the single thing in the
   cascade that beats a normal inline one.

   Matched on the exact declaration rather than blanket-overriding every
   coloured element, so a colour someone chooses on purpose still works. The
   whole set present in the content is:

     #333333  176x   editor default grey — body text
     #000000   19x   black — body text
     #0000ff   10x   the browser's unstyled-link blue
     #ffcc00    2x   a deliberate yellow, deliberately left alone

   `^=` and `*="; color…"` rather than a plain `*=`, and that distinction
   matters: `[style*="color: #333333"]` also matches
   `background-color: #333333`, which would set the *text* colour of anything
   given a dark background. Nothing in these posts has one — all 207
   attributes are exactly `color: #xxxxxx;` with the colour first and alone,
   and AddToAny's share buttons are the only elements inside .post-content
   with an inline `background-color` at all — but anchoring the match removes
   the trap rather than relying on that staying true.

   This is a repair for existing content, not a policy: new articles written
   in the block editor carry no inline colour at all and need none of it. The
   permanent fix is to strip these spans from the seven posts, which is a
   content edit — it would have to be repeated on production and is not
   something the theme zip can carry. */
.stm-single-post .post-content [style^="color: #333333"],
.stm-single-post .post-content [style^="color:#333333"],
.stm-single-post .post-content [style*="; color: #333333"],
.stm-single-post .post-content [style^="color: #000000"],
.stm-single-post .post-content [style^="color:#000000"],
.stm-single-post .post-content [style*="; color: #000000"] {
	color: var(--kobra-ice) !important;
}

/* Links keep link colours. One article puts #333333 directly on 37 anchors,
   so without this they would be repainted as body text and stop looking
   clickable. `a[style]` at (0,3,1) outranks the bare attribute rule above at
   (0,3,0), so these win regardless of source order. */
.stm-single-post .post-content a[style^="color: #333333"],
.stm-single-post .post-content a[style^="color:#333333"],
.stm-single-post .post-content a[style^="color: #000000"],
.stm-single-post .post-content a[style^="color:#000000"],
.stm-single-post .post-content [style^="color: #0000ff"],
.stm-single-post .post-content [style^="color:#0000ff"],
.stm-single-post .post-content [style*="; color: #0000ff"] {
	color: var(--kobra-sky) !important;
}
.stm-single-post .post-content a[style^="color"]:hover,
.stm-single-post .post-content a:hover [style^="color"] {
	color: var(--kobra-yellow) !important;
}

.stm-single-post .post-content ul,
.stm-single-post .post-content ol {
	margin: 0 0 20px;
	padding-left: 22px;
}
.stm-single-post .post-content li {
	margin-bottom: 8px;
}

.stm-single-post .post-content blockquote {
	margin: 26px 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--kobra-yellow);
	color: var(--kobra-ice);
	font-size: 18px;
	font-style: normal;
	text-align: left;
}

/* ---------- Images and their captions ---------- */
.stm-single-post .post-content figure {
	margin: 26px 0;
}
.stm-single-post .post-content img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

/* Photo credits. These sit in a <figcaption>, sometimes wrapped in <sup>,
   and are the one place where quieter text is right — they are an aside to
   the photo, not part of the article. Centred under the image and never
   justified. */
.stm-single-post .post-content figcaption,
.stm-single-post .post-content .wp-element-caption {
	margin-top: 8px;
	color: var(--kobra-mist);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
	hyphens: none;
}
.stm-single-post .post-content figcaption sup {
	top: 0;
	font-size: inherit;
	vertical-align: baseline;
}

/* ---------- Embeds ----------
   The articles embed YouTube. WordPress prints an aspect-ratio class on the
   figure but the iframe itself carries fixed pixel dimensions, so it needs
   to be told to fill its box or it overflows the narrower text column. */
.stm-single-post .post-content .wp-block-embed__wrapper {
	position: relative;
}
.stm-single-post .post-content .wp-block-embed iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 4px;
	display: block;
}
.stm-single-post .post-content .wp-embed-aspect-4-3 iframe {
	aspect-ratio: 4 / 3;
}

/* ==========================================================================
   Tags and share bar
   ==========================================================================
   hockey.css takes the tag links at (0,3,1) with
   `.hockey .stm-post-meta-bottom .stm_post_tags a`. Matching its shape and
   adding .stm-single-post makes this (0,4,1) — one class longer, still no
   !important. */
/* The whole bar inherits Roboto, not Bricolage. Splash marks it
   `normal_font`, its class for body text, and that class is still pointing
   at the theme's original font — so the tags and the "share" label were the
   one place on the article still set in it. It showed up as a mismatched
   "ř": the Roboto being served here has no latin-ext, so every Czech
   diacritic fell through to a third font again. Set on the bar rather than
   on the tags alone, because the label has the same problem. */
.stm-single-post .stm-post-meta-bottom,
.stm-single-post .stm-post-meta-bottom a {
	font-family: 'Bricolage Grotesque', sans-serif;
}
.stm-single-post .stm-post-meta-bottom {
	margin: 30px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--kobra-line);
}
.stm-single-post .stm-post-meta-bottom .stm_post_tags {
	color: var(--kobra-ice);
	font-size: 13px;
}
/* Not every article is tagged — one of the sixteen has none, and the_tags()
   then prints nothing at all, not even its icon, leaving an empty box in the
   bar. :empty is the obvious test and the wrong one here: the template
   leaves whitespace inside the div, and a single whitespace text node is
   enough to stop :empty matching. Testing for the tag links themselves is
   what actually holds. */
.stm-single-post .stm-post-meta-bottom .stm_post_tags:not(:has(a)) {
	display: none;
}
.stm-single-post .stm-post-meta-bottom .stm_post_tags .fa {
	margin-right: 8px;
	color: var(--kobra-sky);
}
.hockey .stm-single-post .stm-post-meta-bottom .stm_post_tags a,
.hockey .stm-single-post .stm-post-meta-bottom .stm_post_tags a:focus {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 5px 11px;
	border: 1px solid var(--kobra-line);
	border-radius: 999px;
	background: rgba(234, 241, 248, 0.04);
	color: var(--kobra-sky);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}
/* The base colour above wins on specificity, but the hover needs
   !important: hockey.css turns these red on hover with
   `.hockey .stm-post-meta-bottom .stm_post_tags a:hover` — shorter than the
   rule above at (0,4,1), but marked important, and importance outranks
   specificity outright. Easy to misread as a typo, because the base colour
   from the very same block applies correctly. */
.hockey .stm-single-post .stm-post-meta-bottom .stm_post_tags a:hover {
	border-color: var(--kobra-yellow);
	color: var(--kobra-yellow) !important;
}

/* styles.css takes this label at (0,2,1) with
   `.stm-share-this-wrapp > span:first-child`; this is (0,3,1). */
.stm-single-post .stm-post-meta-bottom .stm-share-this-wrapp > span:first-child {
	color: var(--kobra-ice);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ==========================================================================
   Post navigation — injected by post.js
   ==========================================================================
   Previous / next article plus a link back to the listing. Splash's hockey
   layout ships none of these, so an article was a dead end. */
.kobra-post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 34px 0 0;
}
/* The extra .kobra-post-nav in front is load-bearing. hockey.css sets
   `.hockey a { display: inline }` at (0,1,1), which outranks a lone
   .kobra-post-nav-link at (0,1,0) — so the card stayed inline, the label ran
   straight into the headline with no gap, and the flex-direction and gap
   below were both dead letters. Two classes (0,2,0) win it back without
   depending on Splash's .hockey wrapper. */
.kobra-post-nav .kobra-post-nav-link {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 18px;
	border: 1px solid var(--kobra-line);
	border-radius: 4px;
	background: var(--kobra-navy);
	background-image: var(--kobra-ice-texture);
	text-decoration: none;
	transition: border-color .18s ease, transform .18s ease;
}
.kobra-post-nav-link:hover {
	border-color: var(--kobra-yellow);
	transform: translateY(-2px);
}
/* When only one neighbour exists — the newest and oldest articles each have
   just one — it takes its own side rather than stretching across both. */
.kobra-post-nav-link.is-next {
	grid-column: 2;
	text-align: right;
}
/* Both spans are given display:block as well. They are flex items of the
   card above so they would stack anyway, but stating it keeps the label on
   its own line even if that flex rule is ever lost again — which is exactly
   what went wrong the first time. */
.kobra-post-nav-dir,
.kobra-post-nav-title {
	display: block;
}
.kobra-post-nav-dir {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kobra-sky);
}
.kobra-post-nav-title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--kobra-ice);
}
.kobra-post-nav-link:hover .kobra-post-nav-title {
	color: var(--kobra-yellow);
}

.kobra-post-back {
	margin: 22px 0 0;
	text-align: center;
}

/* ==========================================================================
   Comments
   ==========================================================================
   Kept and restyled rather than hidden — the content of the page is
   deliberately left as it is. No article has ever drawn a comment, so this
   is almost always just the empty form.
   ========================================================================== */
.stm-single-post .stm_post_comments {
	margin: 40px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid var(--kobra-line);
}
.stm-single-post .comment-reply-title {
	margin: 0 0 18px;
	font-size: 20px;
	font-weight: 700;
}
/* ---------- Where this file uses !important, and why ----------
   Everything above wins on specificity alone. The comment form is the one
   place on this page where that is not possible: hockey.css styles it
   through selectors that include #wrapper, and an ID outranks any number of
   classes — a ten-class selector still loses to a single ID. Those rules
   carry no !important of their own, so one !important here wins outright.
   This mirrors the documented exception for the match page's scoreboard; it
   is not a change of policy. Check the winning rule before adding another
   one — most things here do not need this. */

/* The "cancel reply" link sits inside the heading, painted #333 by
   `.hockey #wrapper .stm_post_comments … h3 small a`. */
.stm-single-post .comment-reply-title small a,
.stm-single-post .comment-reply-title small a:focus {
	color: var(--kobra-sky) !important;
	font-size: 13px;
	font-weight: 400;
}
.stm-single-post .comment-reply-title small a:hover {
	color: var(--kobra-yellow) !important;
}

.stm-single-post .comment-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--kobra-ice);
	font-size: 13px;
	font-weight: 600;
}
.stm-single-post .comment-form input[type="text"],
.stm-single-post .comment-form input[type="email"],
.stm-single-post .comment-form input[type="url"],
.stm-single-post .comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--kobra-line);
	border-radius: 3px;
	background: rgba(234, 241, 248, 0.05);
	color: var(--kobra-ice);
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 15px;
	box-shadow: none;
}
.stm-single-post .comment-form input[type="text"]:focus,
.stm-single-post .comment-form input[type="email"]:focus,
.stm-single-post .comment-form input[type="url"]:focus,
.stm-single-post .comment-form textarea:focus {
	border-color: var(--kobra-sky);
	outline: none;
}
.stm-single-post .comment-form ::placeholder {
	color: var(--kobra-mist);
	opacity: 1;
}
.stm-single-post .comment-form textarea {
	min-height: 140px;
	resize: vertical;
}
.stm-single-post .comment-form .form-group {
	margin-bottom: 16px;
}
/* ---------- The submit button: Splash's slab off, .kobra-btn-primary on ----------
   Splash builds it as <span class="button"><input type="submit"></span> and
   draws the visible shape entirely on the span's pseudo-elements, leaving
   both real elements transparent:

     span::after   the skewed slab — the button you actually see
     span::before  a 3px frame around it, drawn as an *outline*
     input         transparent; carries only the label text
     input::*      two more layers Splash keeps for other skins

   Until v0.52.0 all four layers were simply repainted yellow, which left a
   **skewed parallelogram** — measured `skewX(-10deg)` on both the slab and its
   offset outline. That is Splash's esports shape, and it is not the button
   this site uses anywhere else. The user asked for the homepage's "Rozpis
   zápasů" button, so the slab is now switched off entirely and the shape is
   drawn on the real element as `.kobra-btn-primary`: flat, 3px radius, yellow
   fill, #101a08 label.

   **This is the same move team.css makes on the statistics filters** — "Splash's
   skewed red slab hangs off every button; removed, because .kobra-btn draws its
   own flat shape" — and it also resolves the older note here that giving the
   input a yellow background produced "a second button shape on top of the
   slab". It did, while the slab was still there. With the slab gone the input's
   own rectangle *is* the button, which is why this direction works now and
   didn't before.

   Everything needs !important because hockey.css reaches these through
   #wrapper — see the note at the top of this section. */
/* The wrapper span. `margin: 0` is here to pull the button flush with the left
   edge of the comment box above it, at the user's request (v0.52.1).

   It was indented **20px, from two stacked 10px margins** — hockey.css sets
   `margin-left: 10px` on the span *and* again on the input, both reached
   through `#wrapper`:

     .hockey #wrapper … .comment-respond form .form-submit span   (1,5,2)
     .hockey #wrapper input[type="submit"]                        (1,2,1)

   so zeroing only one of them would have moved the button half way and looked
   like the rule had partly failed. Both carry an ID, which is why this selector
   uses `#respond` — WordPress's own id on the reply box — to reach two IDs and
   win on the first component rather than trying to out-class a five-class
   chain. The textarea, the `.form-submit` paragraph and the button now all
   start at the same x. */
.hockey #wrapper #respond .form-submit .button {
	padding: 0;
	margin: 0 !important;
	background: transparent !important;
	border: 0;
}

/* All four of Splash's shape layers. `content: none` as well as
   `display: none`, the same pair used on the filter buttons — a generated box
   with `display: none` still counts as generated, and some of Splash's skins
   position these absolutely. */
.stm-single-post .comment-form .form-submit .button::before,
.stm-single-post .comment-form .form-submit .button::after,
.stm-single-post .comment-form .form-submit input[type="submit"]::before,
.stm-single-post .comment-form .form-submit input[type="submit"]::after {
	display: none !important;
	content: none !important;
}

/* The button itself, matched to `.kobra-btn` + `.kobra-btn-primary` in
   redesign.css. Declared rather than shared because this is an <input>: it
   cannot take the injected classes, and `inline-flex` on an input has no
   children to lay out, so `display` and `gap` are the two properties from
   that component deliberately left off. Keep the rest in step with it.

   ---------- Why two IDs, and why !important was not enough ----------
   Written first as `.stm-single-post .comment-form .form-submit
   input[type="submit"]` with `!important` on the paint. Padding and radius
   landed; **the background stayed transparent and the label stayed 12px.**
   The winner, read rather than guessed:

     hockey.css
     .hockey #wrapper .stm_post_comments .comments-area .comment-respond
             form .form-submit span input[type="submit"]
       { padding: 15px 20px; font-size: 12px;
         background-color: transparent !important; }

   That is **(1,6,3)** — one ID — against this file's (0,4,1). An important
   declaration only beats another important declaration on specificity, and an
   ID outranks any number of classes, so `!important` alone could never win
   here. The pseudo-element rules above *did* work, because hockey.css does not
   reach those through `#wrapper`.

   The answer is IDs, not a longer chain of classes: WordPress gives the button
   `id="submit"` and the reply box `id="respond"`, so `#wrapper … input#submit`
   carries **two** IDs and wins on the first component of the comparison, with
   no dependence on matching their six classes. Both IDs are WordPress's own
   defaults for `comment_form()`, not Splash's, so they are as stable as the
   markup gets. */
.hockey #wrapper .stm-single-post .comment-form input#submit {
	/* The second of the two 10px indents — see the note on the wrapper span. */
	margin: 0 !important;
	padding: 14px 26px !important;
	border: 1.5px solid transparent !important;
	border-radius: 3px !important;
	background-color: var(--kobra-yellow) !important;
	background-image: none !important;
	color: #101a08 !important;
	font-family: 'Bricolage Grotesque', sans-serif !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	/* `.hockey input[type="submit"]` sets `letter-spacing: 0.6px !important`,
	   so this one has to be important too — 0.06em, the same tracking as
	   `.kobra-btn`, which at 13px is 0.78px. */
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	/* 24px, not a ratio, and this is the one number here that is copied rather
	   than chosen. `.kobra-btn` never declares a line-height: on the homepage
	   it inherits body's 24px, giving that button a 54px box. An `<input>`
	   inherits nothing and falls back to `normal`, so a ratio here produced a
	   46px button — same colours, same padding, 8px shorter. Matching the
	   inherited value is what makes the two actually the same button. If
	   body's line-height ever changes, this has to follow. */
	line-height: 24px !important;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease;
}
.hockey #wrapper .stm-single-post .comment-form input#submit:hover,
.hockey #wrapper .stm-single-post .comment-form input#submit:focus {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px -6px rgba(241, 232, 19, 0.45);
	background-color: var(--kobra-yellow) !important;
	color: #101a08 !important;
}
.stm-single-post .comment-form .comment-notes,
.stm-single-post .comment-form .form-submit + p,
.stm-single-post .comment-form p {
	color: var(--kobra-mist);
	font-size: 13px;
}

/* Existing comments, for when one finally arrives. */
.stm-single-post .comment-list {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}
.stm-single-post .comment-list .comment-body {
	padding: 18px;
	margin-bottom: 14px;
	border: 1px solid var(--kobra-line);
	border-radius: 4px;
	background: var(--kobra-navy);
	color: var(--kobra-ice);
}
.stm-single-post .comment-list .comment-author,
.stm-single-post .comment-list .comment-metadata {
	color: var(--kobra-ice);
	font-size: 13px;
}
.stm-single-post .comment-list .comment-metadata a {
	color: var(--kobra-sky);
}

/* ==========================================================================
   Narrow screens
   ========================================================================== */
@media (max-width: 767px) {
	.kobra-post-title {
		font-size: 28px;
	}
	.stm-single-post .post-content p,
	.stm-single-post .post-content li {
		font-size: 15px;
		/* The article body keeps its justification on a phone too, at the
		   user's instruction — the same call as the text pages and the
		   Historie timeline. `hyphens: auto` on the desktop rule carries
		   over and is what stops the word spacing opening up. */
	}
	.kobra-post-nav {
		grid-template-columns: 1fr;
	}
	.kobra-post-nav-link.is-next {
		grid-column: 1;
		text-align: left;
	}
}