/*
Theme Name: Visual Artist Minimalist Portfolio
Description: Minimalist, bilingual (pt-BR / English) theme for an artist's website. A top bar with the artist's name, a hamburger menu, an Instagram link and a language toggle, followed by one full-screen image. Includes a Quick Editor at /login for the artist name, Instagram link, site icon, home images and colors, with no need to enter the WordPress dashboard.
Version: 0.7.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: visual-artist-minimalist-portfolio
Update URI: false
*/

/* ==========================================================================
   Tokens
   The two colors below are the defaults. The real values come from the Quick
   Editor and are printed right after this stylesheet (see vamp_custom_css()).
   ========================================================================== */

:root {
	--vamp-bg: #f6f2e9;      /* egg white: top bar + page background */
	--vamp-text: #1c1b19;    /* near-black: text, icons, menu borders */
	--vamp-line: var(--vamp-text);

	/* Calibri when the visitor's device has it; otherwise Carlito, a free,
	   metric-identical clone bundled with the theme (assets/fonts). */
	--vamp-font: Calibri, Carlito, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

	--vamp-header-h: 64px;
	--vamp-gutter: clamp(16px, 3vw, 32px);
	--vamp-menu-w: 176px;
	--vamp-brick-h: 44px;
	--vamp-adminbar-h: 0px;
}

@media (max-width: 767px) {
	:root {
		--vamp-header-h: 56px;
	}
}

/* The WordPress admin bar (only shown to logged-in WordPress users). */
body.admin-bar {
	--vamp-adminbar-h: var(--wp-admin--admin-bar--height, 32px);
}
@media (max-width: 782px) {
	body.admin-bar {
		--vamp-adminbar-h: var(--wp-admin--admin-bar--height, 46px);
	}
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--vamp-bg);
	color: var(--vamp-text);
	font-family: var(--vamp-font);
	font-size: 1.125rem; /* Calibri runs small; 18px reads like ~16px Arial. */
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: inherit;
}

img {
	max-width: 100%;
	height: auto;
}

:focus-visible {
	outline: 2px solid var(--vamp-text);
	outline-offset: 2px;
}

.sr-only,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 200;
	padding: 10px 14px;
	background: var(--vamp-text);
	color: var(--vamp-bg);
	text-decoration: none;
}
.skip-link:focus {
	top: calc(var(--vamp-adminbar-h) + 8px);
}

/* ==========================================================================
   Language
   Every translatable string is printed in both languages; whichever one
   doesn't match <html data-lang> is hidden (see inc/i18n.php).
   ========================================================================== */

html[data-lang="pt"] [data-l="en"],
html[data-lang="en"] [data-l="pt"],
html:not([data-lang]) [data-l="en"] {
	display: none !important;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.site {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--vamp-adminbar-h));
	min-height: calc(100dvh - var(--vamp-adminbar-h));
}

.site-main {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

/* ==========================================================================
   Top bar: always present, always on top
   ========================================================================== */

.site-header {
	position: sticky;
	top: var(--vamp-adminbar-h);
	z-index: 100;
	display: flex;
	flex: none;
	align-items: stretch;
	justify-content: space-between;
	gap: 16px;
	height: var(--vamp-header-h);
	padding: 0 var(--vamp-gutter);
	background: var(--vamp-bg);
}

.site-header__name {
	align-self: center;
	min-width: 0;
	overflow: hidden;
	font-size: 1.375rem;
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.site-header__name:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

@media (max-width: 767px) {
	.site-header__name {
		font-size: 1.25rem;
	}
}

.site-header__tools {
	display: flex;
	flex: none;
	align-items: stretch;
	/* Optical alignment: the icon glyphs sit inside larger tap areas, so pull
	   the cluster out until the last glyph lines up with the page gutter. */
	margin-right: -10px;
}

/* Hamburger, Instagram and language: each one fills the bar's full height,
   which keeps the hover area continuous down to the menu. */
.site-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	padding: 0 10px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.site-tool:focus-visible {
	outline-offset: -8px;
}
.site-tool .site-icon {
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
}
.site-tool--link,
.site-tool--lang {
	transition: opacity 0.15s ease;
}
.site-tool--link:hover,
.site-tool--lang:hover {
	opacity: 0.6;
}
.site-tool__code {
	min-width: 1.4em;
	letter-spacing: 0.04em;
}

/* ==========================================================================
   Hamburger menu
   Opens on hover, closes when the pointer leaves the icon + menu. A click
   pins it open until the next click. (Behavior lives in assets/js/main.js;
   with JavaScript off it still opens on hover or keyboard focus.)
   ========================================================================== */

.site-menu {
	position: relative;
	display: flex;
	align-items: stretch;
}

/* Closed -> pinned: the three lines become an X. */
.site-icon--menu line {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.22s ease, opacity 0.15s ease;
}
.site-menu.is-pinned .site-icon--menu .l1 {
	transform: translateY(6px) rotate(45deg);
}
.site-menu.is-pinned .site-icon--menu .l2 {
	opacity: 0;
}
.site-menu.is-pinned .site-icon--menu .l3 {
	transform: translateY(-6px) rotate(-45deg);
}

/* The panel hangs from the bottom edge of the bar, centered under the icon. */
.site-menu__nav {
	position: absolute;
	top: 100%;
	left: 50%;
	width: var(--vamp-menu-w);
	visibility: hidden;
	opacity: 0;
	transform: translate(-50%, -4px);
	transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
}
.site-menu.is-open .site-menu__nav,
html:not(.js) .site-menu:hover .site-menu__nav,
html:not(.js) .site-menu:focus-within .site-menu__nav {
	visibility: visible;
	opacity: 1;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}

.site-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Bricks share their edges: one thin line between neighbors, not two. */
.site-menu__list li + li {
	margin-top: -1px;
}

.site-menu__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--vamp-brick-h);
	padding: 0 12px;
	border: 1px solid var(--vamp-line);
	background: var(--vamp-bg);
	color: inherit;
	font-size: 1.0625rem;
	line-height: 1;
	text-decoration: none;
}
.site-menu__item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	opacity: 0;
	transition: opacity 0.12s ease;
}
.site-menu__item:hover::before,
.site-menu__item:focus-visible::before {
	opacity: 0.07;
}
.site-menu__item:focus-visible {
	outline-offset: -5px;
}
.site-menu__label {
	position: relative;
}
.site-menu__item[aria-current="page"] .site-menu__label {
	font-weight: 700;
}

/* ==========================================================================
   Home: one image fills everything under the bar
   ========================================================================== */

.site-hero {
	position: relative;
	flex: 1 1 auto;
	min-height: 240px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.05);
}
.site-hero__picture {
	position: absolute;
	inset: 0;
	display: block;
}
.site-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* ==========================================================================
   Inner pages
   ========================================================================== */

.site-page {
	width: 100%;
	max-width: 46rem;
	margin: 0 auto;
	padding: clamp(32px, 8vw, 96px) var(--vamp-gutter) 96px;
}
.site-page__title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.5rem);
	font-weight: 400;
	line-height: 1.15;
}
.site-page__title a {
	text-decoration: none;
}
.site-page__note {
	margin: 0;
}
.entry-content {
	overflow-wrap: break-word;
}
.entry-content > * + * {
	margin-top: 1.1em;
}
.entry-content > :first-child {
	margin-top: 0;
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin: 1.9em 0 0.5em;
	font-weight: 700;
	line-height: 1.25;
}
.entry-content > :first-child:is(h2, h3, h4) {
	margin-top: 0;
}
.entry-content h2 {
	font-size: 1.5rem;
}
.entry-content h3 {
	font-size: 1.25rem;
}
.entry-content h4 {
	font-size: 1.0625rem;
}
.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
}
.entry-content li + li {
	margin-top: 0.35em;
}
.entry-content li > ul,
.entry-content li > ol {
	margin-top: 0.35em;
}
.entry-content a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
.entry-content a:hover {
	text-decoration-thickness: 2px;
}
.entry-content blockquote {
	margin-left: 0;
	margin-right: 0;
	padding-left: 1.1em;
	border-left: 1px solid var(--vamp-line);
}
.entry-content hr {
	margin: 2em 0;
	border: 0;
	border-top: 1px solid var(--vamp-line);
}

/* Text-only pages (Currículo, Olá): a short note when a language has no text of its own yet. */
.site-text__note {
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
	font-style: italic;
	opacity: 0.75;
}

/* ==========================================================================
   Maintenance page (inc/maintenance.php)
   Shown to visitors while maintenance mode is on. The top bar stays (name,
   Instagram, language); the menu is left out, since every address leads here.
   ========================================================================== */

.site-main--maintenance {
	justify-content: center;
}
.site-maintenance {
	width: 100%;
	max-width: 46rem;
	margin: 0 auto;
	/* More room below than above: the block sits a little over the middle of the screen, where the eye expects it. */
	padding: 32px var(--vamp-gutter) calc(var(--vamp-header-h) + 32px);
}
.site-maintenance__message {
	max-width: 34rem;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* =========================================================================
   Collections: a list on the right, the chosen item in the big area beside it.
   Textos now; Imprensa, Obras and Destaque are meant to use the same shell.
   (inc/collections.php, assets/js/collection.js)
   ====================================================================== */

.vamp-collection {
	--vamp-list-w: clamp(15rem, 26vw, 22rem);
	--vamp-bar-top: calc(var(--vamp-header-h) + var(--vamp-adminbar-h));
	width: 100%;
	min-height: 0;
}

/* ---- The list: titles as links, under a heading per group ---- */

/* Phones: a short box above the viewer, scrolling on its own. */
.vamp-list {
	scroll-margin-top: var(--vamp-bar-top);
	max-height: min(42vh, 22rem);
	max-height: min(42dvh, 22rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 var(--vamp-gutter) 0.75rem;
	border-bottom: 1px solid var(--vamp-line);
}
.vamp-list__group {
	margin: 0 0 0.75rem;
}
.vamp-list__heading {
	margin: 1.1rem 0 0.3rem;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}
.vamp-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
}
.vamp-list__items li {
	position: relative;
}
.vamp-list__items li + li::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: currentColor;
	opacity: 0.16;
}
.vamp-list__link {
	position: relative;
	display: block;
	padding: 0.55rem 0.5rem 0.55rem 0.75rem;
	box-shadow: inset 3px 0 0 transparent;
	color: inherit;
	line-height: 1.3;
	overflow-wrap: anywhere;
	text-decoration: none;
}
.vamp-list__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	opacity: 0;
	transition: opacity 0.12s ease;
}
.vamp-list__link:hover::before,
.vamp-list__link:focus-visible::before {
	opacity: 0.07;
}
.vamp-list__link[aria-current="true"] {
	font-weight: 700;
	box-shadow: inset 3px 0 0 currentColor;
}

/* ---- The viewer ---- */

.vamp-viewer {
	padding: 0 var(--vamp-gutter) 3rem;
	outline: 0;
	/* When the page scrolls down to it, stop just under the sticky header. */
	scroll-margin-top: var(--vamp-bar-top);
}
.vamp-viewer__note {
	margin: 2rem 0;
	opacity: 0.75;
}
/* On a phone, an open viewer is at least a screen tall from the moment it is
   chosen, so the page can scroll down to it at once (before the PDF has built
   its pages, the page would otherwise be too short to scroll). */
.vamp-viewer--open {
	min-height: calc(100vh - var(--vamp-bar-top));
	min-height: calc(100dvh - var(--vamp-bar-top));
}

/* ---- A PDF: title and buttons on top, the pages below ---- */

.vamp-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.42rem 0.9rem;
	border: 1px solid var(--vamp-line);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
.vamp-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: currentColor;
	opacity: 0;
	transition: opacity 0.12s ease;
}
.vamp-btn:hover::before,
.vamp-btn:focus-visible::before,
.vamp-share[open] > summary::before {
	opacity: 0.07;
}

/* Phones: only the head (a way back to the list, and the title) stays on
   screen while the document scrolls; the buttons scroll away with the top. */
.vamp-doc__bar {
	display: contents;
}
.vamp-doc__head {
	position: sticky;
	top: var(--vamp-bar-top);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	padding: 0.55rem 0;
	background: var(--vamp-bg);
	border-bottom: 1px solid var(--vamp-line);
}
.vamp-doc__back {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: inherit;
	font-size: 0.9375rem;
	text-decoration: none;
	border: 1px solid var(--vamp-line);
	padding: 0.25rem 0.6rem;
}
.vamp-doc__title {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vamp-doc__title:focus {
	outline: 0;
}
.vamp-doc__actions {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.85rem 0 0;
}

.vamp-share > summary {
	list-style: none;
}
.vamp-share > summary::-webkit-details-marker {
	display: none;
}
.vamp-share__panel {
	position: absolute;
	inset: 100% 0 auto;
	z-index: 4;
	padding: 0.85rem 0 1rem;
	background: var(--vamp-bg);
	border-bottom: 1px solid var(--vamp-line);
}
.vamp-share__label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.875rem;
}
.vamp-share__row {
	display: flex;
	gap: 0.5rem;
}
.vamp-share__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.42rem 0.6rem;
	border: 1px solid var(--vamp-line);
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9375rem;
}
.vamp-share__done {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
}
.vamp-share__done[hidden],
.vamp-doc__note[hidden] {
	display: none;
}

.vamp-doc__pages {
	padding-top: 1.25rem;
}
.vamp-doc__note {
	margin: 1.5rem 0;
}
/* The loading line and the "needs JavaScript" line swap places with the script. */
.vamp-doc__note--loading {
	display: none;
}
.js .vamp-doc__note--loading {
	display: block;
}
.js .vamp-doc__note--nojs {
	display: none;
}

/* One page of the PDF: a white sheet, thin frame, the canvas inside; the
   text layer and link areas sit on top of it. PDF.js sets --total-scale-factor. */
.vamp-page {
	--total-scale-factor: 1;
	--scale-round-x: 1px;
	--scale-round-y: 1px;
	position: relative;
	width: 100%;
	max-width: 56rem;
	margin: 0 auto 1rem;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 0 0 1px var(--vamp-line);
}
.vamp-page canvas {
	display: block;
	width: 100%;
	height: 100%;
}
.vamp-page__text {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: clip;
	opacity: 1;
	line-height: 1;
	letter-spacing: normal;
	word-spacing: normal;
	text-align: initial;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	forced-color-adjust: none;
	transform-origin: 0 0;
	--min-font-size: 1;
	--text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
	--min-font-size-inv: calc(1 / var(--min-font-size));
}
.vamp-page__text :is(span, br) {
	position: absolute;
	color: transparent;
	white-space: pre;
	cursor: text;
	transform-origin: 0 0;
	-webkit-user-select: text;
	user-select: text;
}
.vamp-page__text > :not(.markedContent),
.vamp-page__text .markedContent span:not(.markedContent) {
	z-index: 1;
	--font-height: 0;
	--scale-x: 1;
	--rotate: 0deg;
	font-size: calc(var(--text-scale-factor) * var(--font-height));
	transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}
.vamp-page__text .markedContent {
	display: contents;
}
.vamp-page__text ::selection {
	background: rgba(0, 60, 200, 0.28);
}
.vamp-page__links a {
	position: absolute;
	z-index: 2;
}

/* ---- Wide screens: list on the right, both columns scroll on their own ---- */

@media (min-width: 768px) {
	.vamp-collection {
		--vamp-bar-top: 0px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--vamp-list-w);
		grid-template-rows: minmax(0, 1fr);
		overflow: hidden;
	}
	.vamp-collection--empty {
		grid-template-columns: minmax(0, 1fr);
	}
	body.vamp-collection-page .site {
		height: calc(100vh - var(--vamp-adminbar-h));
		height: calc(100dvh - var(--vamp-adminbar-h));
		min-height: 0;
	}

	.vamp-list {
		grid-column: 2;
		grid-row: 1;
		max-height: none;
		min-height: 0;
		padding: 0.5rem var(--vamp-gutter) 2rem 1.25rem;
		border-bottom: 0;
		border-left: 1px solid var(--vamp-line);
	}
	.vamp-viewer,
	.vamp-viewer--open {
		grid-column: 1;
		grid-row: 1;
		min-height: 0;
		overflow-y: auto;
		scroll-margin-top: 0;
	}

	/* Title and buttons share one row, which stays at the top of the viewer. */
	.vamp-doc__bar {
		position: sticky;
		top: 0;
		z-index: 3;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem 1rem;
		padding: 0.85rem 0;
		background: var(--vamp-bg);
		border-bottom: 1px solid var(--vamp-line);
	}
	.vamp-doc__head {
		position: static;
		flex: 1 1 14rem;
		padding: 0;
		border-bottom: 0;
	}
	.vamp-doc__back {
		display: none;
	}
	.vamp-doc__title {
		font-size: 1.125rem;
		white-space: normal;
	}
	.vamp-doc__actions {
		position: static;
		padding: 0;
	}
}

/* ==========================================================================
   Imprensa: one news post in the viewer (inc/collections.php)
   The Compartilhar button on top, then the post: title and date, the picture
   or video with its description (when it has one), and the text. It reads in a
   column as wide as the text pages (Currículo, Olá).
   ========================================================================== */

.vamp-press__article {
	padding-top: 1.75rem;
}
.vamp-press__title {
	margin: 0;
	font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.125rem);
	font-weight: 700;
	line-height: 1.15;
	overflow-wrap: break-word;
}
.vamp-press__title:focus {
	outline: 0;
}
.vamp-press__date {
	margin: 0.6rem 0 0;
	font-size: 0.9375rem;
	opacity: 0.75;
}

/* The picture or video, with its description under it. */
.vamp-press__media {
	margin: 1.5rem 0 0;
}
.vamp-press__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	/* A tall picture (an invitation, a poster) is held to most of the window's height instead of
	   becoming a long column to scroll; it keeps its proportions. */
	max-height: 80vh;
	max-height: 80dvh;
}
.vamp-press__caption {
	margin-top: 0.6rem;
	font-size: 0.9375rem;
	line-height: 1.4;
	opacity: 0.8;
}

/* A video: its thumbnail and a play button, which the page script swaps for the
   player when the visitor clicks. */
.vamp-embed {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #1c1b19;
}
.vamp-embed__play {
	position: absolute;
	inset: 0;
	display: block;
	color: #fff;
	text-decoration: none;
}
.vamp-embed__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* the 16:9 picture sits in the middle of the 4:3 thumbnail */
}
.vamp-embed__icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vamp-embed__icon svg {
	width: 4.5rem;
	height: 4.5rem;
}
.vamp-embed__icon circle {
	fill: rgba(28, 27, 25, 0.62);
	stroke: #fff;
	stroke-width: 2;
	transition: fill 0.12s ease;
}
.vamp-embed__icon path {
	fill: #fff;
}
.vamp-embed__play:hover .vamp-embed__icon circle,
.vamp-embed__play:focus-visible .vamp-embed__icon circle {
	fill: rgba(28, 27, 25, 0.85);
}
/* The site's outline would be clipped by the frame; draw it inside, in two tones so it shows on any picture. */
.vamp-embed__play:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
	box-shadow: inset 0 0 0 6px #1c1b19;
}
.vamp-embed__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The text. The post's own title is its h2, so the headings inside the text come
   one level down (h3 for what the editor sees as a Título, and so on); they keep
   the look of the same headings on the text pages. */
.vamp-press__text {
	margin-top: 1.75rem;
}
.vamp-press__text .entry-content h3,
.vamp-press__text .entry-content h4,
.vamp-press__text .entry-content h5 {
	margin: 1.9em 0 0.5em;
	font-weight: 700;
	line-height: 1.25;
}
.vamp-press__text .entry-content h3 {
	font-size: 1.5rem;
}
.vamp-press__text .entry-content h4 {
	font-size: 1.25rem;
}
.vamp-press__text .entry-content h5 {
	font-size: 1.0625rem;
}
.vamp-press__text .entry-content > :first-child:is(h3, h4, h5) {
	margin-top: 0;
}

@media (min-width: 768px) {
	/* A column, centered in the viewer. The bar above it holds only the share
	   button (there is no title to carry: the post has its own). */
	.vamp-press {
		max-width: 46rem;
		margin: 0 auto;
	}
	.vamp-press .vamp-doc__head {
		display: none;
	}
	.vamp-press .vamp-doc__bar {
		justify-content: flex-start;
	}
}