:root {
	--font-mono: "IBM Plex Mono", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
	--bg1: light-dark(color-mix(in srgb, Canvas, CanvasText 2.5%), Canvas);
	--bg2: light-dark(color-mix(in srgb, Canvas, CanvasText 4%), color-mix(in srgb, Canvas, CanvasText 1.5%));
	--txt1: color-mix(in srgb, CanvasText, Canvas 2.5%);
	--txt2: color-mix(in srgb, Canvas, CanvasText 2.5%);	
	--acc1: #4e77f6;
	--acc2: color-mix(in srgb, #4e77f6, white 20%);
	--acc3: #f0f0f0;
	--ntrl1: light-dark(color-mix(in srgb, CanvasText, Canvas 60%),color-mix(in srgb, CanvasText, Canvas 50%));
	--ntrl2: light-dark(color-mix(in srgb, CanvasText, Canvas 90%),color-mix(in srgb, CanvasText, Canvas 95%));
}

html {
	scroll-behavior: smooth;
	color-scheme: light dark;
}

body {
	background-color: var(--bg1);
	color: var(--txt1);
}

::-moz-selection {
	color: var(--acc3)
	background: var(--acc1);
}

::selection {
	color: var(--acc3);
	background: var(--acc1);
}

section,
header,
footer {
	margin: 0 1rem;

	@media screen and (min-width: 48em) {
		margin: 0 20%;
	}
}

body,
p,
a,
h1,
h2,
h3,
h4,
form,
button,
input,
textarea,
input::placeholder,
textarea::placeholder,
#menu {
	font-family: var(--font-mono);
	font-size: clamp(0.95rem, 1.095rem + -0.227vw, 1.05rem);
	letter-spacing: 0;
	color: var(--txt1);
}

@supports (font: -apple-system-body) {
	body,
	p,
	a,
	h1,
	h2,
	h3,
	h4,
	form,
	button,
	input,
	textarea,
	input::placeholder,
	textarea::placeholder {
		letter-spacing: -0.011em;
	}
}

.column {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
	margin: 0;
	padding: 0;
}

section a,
section a:visited {
	color: var(--txt1);
	background-color: transparent;
	padding: 0;
	border-radius: 0;
	font-weight: 600
}

section a:hover {
	color: var(--txt1);
	background-color: transparent;
	text-decoration: underline
}

section svg {
	color: var(--bg1);
	width: 14px;
	height: 14px;
	line-height: 14px;
	vertical-align: middle;
	margin-top: -4px;
	margin-left: 1rem;
}

section svg path {
	fill: var(--bg1);
}

.main-nav {
	margin: 0;
	padding: 2rem 0 0 0;
}

.main-nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.main-nav ul li {
	display: inline;
	margin-right: 0.5rem;
}

.main-nav ul li a,
.main-nav ul li a:visited {
	color: var(--acc3);
	background-color: var(--acc1);
	text-decoration: none;
	border-radius: 0.25rem;
	padding: 0.2rem 0.5rem;
	letter-spacing: -0.011em;
	word-spacing: -0.011em;
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
}

.main-nav ul li a:hover {
	background-color: var(--acc2);
	text-decoration: none;
}

.main-nav ul li a[aria-current="page"],
.main-nav ul li a.active {}

p {
	line-height: calc(1ex / 0.32);
	margin: calc(1ex / 0.32) 0;
	color: var(--txt1);
	letter-spacing: -0.011em;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.h4 {
	font-family: var(--font-mono);
	font-weight: 600;
	text-rendering: geometricPrecision;
	-moz-font-smoothing: antialiased;
	margin: 0;
	padding: 0;
}

h1 {
	font-size: 1.5rem;
	font-style:normal;
	letter-spacing: -0.05rem;
}

h2 {
	font-size: 1.4rem;
	text-transform: uppercase;
}

h3 {
	font-size: 1.2rem;
	text-transform: uppercase;
}

.h4 {
	font-size: 1rem;
	font-style: italic;
	font-weight: 300;
	text-transform: lowercase;
	color: var(--ntrl1);
}

#about,
#credits,
#acoustics,
#book,
#contact {
	scroll-margin-top: 2rem;
}

form {
	margin-right: 20px;
}

input {
	width: 100%;
	height: 30px;
	margin: 4px 0 10px 0;
	background: var(--bg2);
	border: 0;
	outline: 0;
	padding-left: 10px;
}

textarea {
	width: 100%;
	min-height: 200px;
	margin: 0;
	background: var(--bg2);
	border: 0;
	outline: 0;
	resize: none;
	padding: 10px 0 0 10px
}

input::placeholder,
textarea::placeholder {
	color: var(--ntrl1)
}

label {
	color: var(--ntrl1)
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

button {
	color: var(--txt1);
	background-color: var(--acc1);
	-webkit-appearance: none;
	border: 0;
	outline: 0;
	cursor: pointer;
	padding: 0.2rem 0.7rem;
	border-radius: 0.5rem;
	margin-top: 10px;
	text-transform: lowercase;
	letter-spacing: -0.011em;
	word-spacing: -0.011em;
	font-weight: 300;
	font-style: italic;
	font-size: 1rem;
}

button:hover {
	background-color: var(--acc2);
}

button svg {
	width: 19px;
	height: 19px;
	line-height: 19px;
	vertical-align: middle;
	margin: 0;
	padding: 0;
	margin-left: 0.8rem;
	margin-top: -1px;
	color: var(--txt1);
}

button svg path {
	fill: var(--txt1);
}

header {
	margin-top: 4rem;
}

.heading div h1 {
	font-size: 2.2rem;
	line-height: 1.8rem;
	margin: 0 0 0.35rem 0;
	font-weight: 400;
	font-style: italic;
	word-spacing: -0.5rem;
	text-transform: lowercase;
}

.heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
	margin: 0;
	padding: 0;
}

.heading svg {
	width: 50px;
	height: auto;
}

.heading svg path.logo-fill {
	fill: var(--txt1);
}

.heading svg path.logo-stroke {
	stroke: var(--txt1);
}

.heading .h4 {
	margin-top: 0;
	max-width: 65%;
}

.hero img {
	width: 100%;
	height: auto;
	object-fit: cover;
	margin: 0;
	padding: 0
}

section.credits {
	margin-top:40px;
}

.credits span {
	color: var(--ntrl1);
}
.credits a, .book a{font-style:italic;white-space: nowrap;}
.credits .h4, .acoustics .h4, .book .h4{font-size:0.8rem;}
.credits .h4 span, .acoustics .h4 span, .book .h4 span{font-size:0.8rem;}

.credits ul {
  display: flex; /* Enables flexible layout */
  flex-wrap: wrap; /* Allows items to wrap to multiple lines */
  gap: 7px 40px; /* 20px vertical gap, 30px horizontal gap */
  justify-content: flex-start;  
  list-style: none;
  padding: 0;
  margin: 0;
}

.credits li {
  /* No display: inline-block needed here */
  white-space: nowrap;
  font-style:italic;
  font-weight:300;
  color:var(--txt1);
}

/* Remove your existing ::after code entirely */
.credits li::after {
  content: none; 
}

/* Assign a class to your UL, e.g., <ul class="project-list"> */
.project-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.project-list li {
  display: grid;
  /* First value (200px) is the width of the Project Name column.
	 Adjust this number to fit your longest project title (e.g., 'Estúdio Vale de Lobos').
	 Second value (1fr) means "take up the rest of the space".
  */
  grid-template-columns: 200px 1fr; 
  
  /* This creates the "tab" gap between the columns */
  gap: 30px; 
  
  /* Ensures text aligns nicely if one side wraps to a new line */
  align-items: baseline; 
  margin-bottom: 8px;
  font-style:italic;
  font-weight:300;
}

.project-list li span {
  /* Optional: Make the description lighter or smaller */
  opacity: 0.7; 
}

/* MOBILE RESPONSIVENESS */
/* On small screens, stack them so the text doesn't get squashed */
@media (max-width: 600px) {
  .project-list li {
	display: block;
	margin-bottom: 16px;
  }
  
  .project-list li span {
	display: block; /* Moves description to the next line */
	margin-top: 4px;
  }
}

.about {
	background-color: var(--bg2);
	color: var(--txt1);
	padding: 1rem;
	border-radius: 0.25rem;
}

.book .signature {color:var(--txt1);margin-top:80px;}
.book .signature svg {height:65px;width:auto;margin-left:0;}
.book .signature svg path {fill:var(--txt1)}

.contact .h4 {
	margin-bottom: 2rem;
}

.contact button {
	color: var(--acc3);
	background-color: var(--acc1);
	text-decoration: none;
	border-radius: 0.25rem;
	padding: 0.2rem 0.5rem;
	letter-spacing: -0.011em;
	word-spacing: -0.011em;
	font-weight: 600;
	font-size: 0.8rem;
	font-style:normal;
	text-transform: uppercase;
}
.contact button svg {
	vertical-align:-24%;
}
.contact button svg path {
	fill: var(--acc3);
}

hr {
	margin: 40px 0;
	box-sizing: border-box;
	border: 0 none transparent;
	border-top: 1px solid var(--ntrl2);
}

.thankyou {
	color: var(--txt1);
	background-color: var(--acc1);
	margin-top: 2rem;
	padding: 0.5rem;
	border-radius: 0.5rem;
	display: none;
}

#thankyou:target {
	display: block;
}

footer {
	padding: 4rem 0;
}

footer p {
	color: var(--ntrl1);
	font-size: 0.8rem;
	word-spacing: 100vw;
	font-style: italic;
}

footer .social svg {height:20px;width:auto;}
footer .social a {margin-right:10px;}
.lang-switch {
	float: right
}

.lang-switch a {
	text-decoration:none;border:0;
	color: var(--acc3);
	background-color: var(--acc1);
	text-decoration: none;
	border-radius: 0.25rem;
	padding: 0.2rem 0.5rem;
	letter-spacing: -0.011em;
	word-spacing: -0.011em;
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
}

.post-navigation {
	display: flex;
	justify-content: space-between;
	margin-top: 2rem;
	padding-top: 1rem;
}

.nav-next {
	text-align: right;
	margin-left: auto;
	/* Pushes to the right if prev is missing */
}

.nav-label {
	font-size: 0.85em;
	text-transform: uppercase;
	color: var(--txt1);
	font-weight: bold;
}

.nav-title {
	font-size: 1.1em;
}

.post-tags {
	margin-top: 2rem;
	padding-top: 1rem;
	font-size: 0.9rem;
}

a.tag-link {
	background-color: var(--bg1);
	color: var(--txt1);
	padding: 0.5rem;
	border-radius: 0.25rem;
	text-decoration: none;
	margin-left: 1rem;
	font-size: 0.85rem;
	text-transform: lowercase;
}

a.tag-link:hover {
	background-color: var(--bg1);
	color: var(--txt1);
}

.rss a {
	background-color: var(--ntrl1);
}

.rss-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: CanvasText;
}

.rss-link:hover {
	color: #f26522;
	/* Standard RSS Orange, or use your brand color */
}

.rss-link svg {
	display: block;
	height: 14px;
	width: auto;
}

/* code block */
/* 1. The Wrapper (The "Anchor" for the button) */
.code-wrapper {
	display: block;
	position: relative;
	/* Establishes the boundary for the absolute button */
	margin: 2rem 0;
}

/* 2. The Scrollable Area (The Code) */
pre {
	background: var(--bg2);
	color: var(--ntrl1);
	border-radius: 2px;

	/* Scroll Logic */
	overflow-x: auto;
	/* Horizontal scroll for long lines */
	overflow-y: auto;
	/* Vertical scroll for tall blocks */
	max-height: 500px;
	/* The "Standard" height limit */

	/* Reset margins since the wrapper handles spacing */
	margin: 0;
	padding: 2rem;
	font-size:0.75rem;
}

code {
	padding: 0;
	/* Remove padding from the inner element */
	margin: 0;
	text-indent: 0;
	/* Ensure no first-line indentation */
}

/* 3. The Button (Fixed to the top-right of the wrapper) */
.copy-code-button {
	position: absolute;
	/* Absolute relative to .code-wrapper */
	top: 10px;
	right: 10px;
	z-index: 10;
	/* Sit on top of the scrollbar/text */

	/* Visuals */
	color: light-dark(Canvas, CanvasText);
	background-color: AccentColor;
	border: 0;
	padding: 5px 10px;
	font-size: 0.75rem;
	border-radius: 4px;
	cursor: pointer;
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.2s, background 0.2s;
}

/* Show button when hovering the wrapper */
.code-wrapper:hover .copy-code-button {
	opacity: 1;
}

.copy-code-button:hover {
	background: var(--acc2);
}

.copy-code-button.copied {
	background: #4caf50;
	border-color: #4caf50;
}