/* =========================================
EL ALTAR DE LOS POETAS
PROYECTO MNEMOSYNE
========================================= */

:root {
--carbon: #050505;
--carbon-soft: #0d0d0f;
--night-tide: #172235;
--root-earth: #5a4332;
--ivory: #f2eee7;
--smoke: #aaa49b;
--bronze: #c79a35;
--terminal: #b8ffb0;
--border: rgba(242, 238, 231, 0.24);
--field-background: rgba(0, 0, 0, 0.32);
}

/* =========================================
BASE
========================================= */

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
min-height: 100%;
scroll-behavior: smooth;
background: var(--carbon);
}

body {
min-height: 100vh;
color: var(--ivory);
font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
background:
radial-gradient(
circle at 50% 0%,
rgba(23, 34, 53, 0.58) 0%,
rgba(23, 34, 53, 0.2) 34%,
transparent 66%
),
radial-gradient(
circle at 15% 75%,
rgba(90, 67, 50, 0.28) 0%,
transparent 48%
),
linear-gradient(
150deg,
var(--carbon) 0%,
#08090c 48%,
var(--carbon) 100%
);
background-attachment: fixed;
overflow-x: hidden;
}

button,
input,
textarea {
font: inherit;
}

button,
a {
-webkit-tap-highlight-color: transparent;
}

.site-shell {
min-height: 100vh;
}

.screen {
position: relative;
width: 100%;
min-height: 100vh;
}

.hidden {
display: none !important;
}

/* =========================================
PRÓLOGO MNEMOSYNE
========================================= */

.screen-intro {
position: fixed;
inset: 0;
z-index: 9999;

display: flex;
align-items: center;
justify-content: center;

padding: 40px 24px;
overflow: hidden;

color: var(--ivory);
text-align: center;
background:
radial-gradient(
circle at center,
rgba(23, 34, 53, 0.25) 0%,
transparent 52%
),
var(--carbon);
}

.intro-content {
width: min(100%, 960px);
}

.mnemosyne-title {
margin-bottom: 56px;

color: var(--bronze);
font-family: "Montserrat", Arial, sans-serif;
font-size: clamp(0.7rem, 1.6vw, 0.95rem);
font-weight: 500;
line-height: 1.65;
letter-spacing: 0.46em;
text-transform: uppercase;
}

.mnemosyne-quote {
max-width: 900px;
margin: 0 auto 34px;

color: var(--ivory);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(1.35rem, 3vw, 2.15rem);
font-style: italic;
font-weight: 500;
line-height: 1.55;
}

.quote-author {
color: var(--bronze);
font-family: "Montserrat", Arial, sans-serif;
font-size: clamp(0.62rem, 1.3vw, 0.78rem);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}

/* =========================================
PANTALLA DE ENTRADA
========================================= */

.screen-entry {
display: grid;
place-items: center;
padding: 54px 20px;
overflow: hidden;
isolation: isolate;

background:
linear-gradient(
rgba(5, 5, 5, 0.72),
rgba(5, 5, 5, 0.88)
),
radial-gradient(
circle at 72% 20%,
rgba(199, 154, 53, 0.12),
transparent 34%
),
radial-gradient(
circle at 18% 78%,
rgba(23, 34, 53, 0.55),
transparent 46%
);
}

.background-glow {
position: absolute;
inset: 0;
z-index: -2;

background:
radial-gradient(
circle at 18% 18%,
rgba(90, 67, 50, 0.24),
transparent 35%
),
radial-gradient(
circle at 82% 72%,
rgba(23, 34, 53, 0.35),
transparent 40%
);

pointer-events: none;
}

.grain {
position: absolute;
inset: 0;
z-index: -1;

opacity: 0.08;
pointer-events: none;

background-image:
repeating-linear-gradient(
0deg,
rgba(255, 255, 255, 0.025) 0,
rgba(255, 255, 255, 0.025) 1px,
transparent 1px,
transparent 3px
);
}

.entry-content {
position: relative;
z-index: 2;

width: min(100%, 760px);
text-align: center;

animation: fadeUp 1.2s ease both;
}

.eyebrow {
margin-bottom: 20px;

color: var(--bronze);
font-family: "Montserrat", Arial, sans-serif;
font-size: clamp(0.67rem, 1.6vw, 0.82rem);
font-weight: 600;
letter-spacing: 0.34em;
text-transform: uppercase;
}

h1 {
color: var(--ivory);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(3.6rem, 10vw, 7.6rem);
font-weight: 600;
line-height: 0.86;
letter-spacing: -0.045em;
text-shadow: 0 4px 35px rgba(0, 0, 0, 0.72);
text-wrap: balance;
}

.intro-text {
max-width: 650px;
margin: 32px auto 42px;

color: rgba(242, 238, 231, 0.88);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(1.15rem, 2.3vw, 1.42rem);
font-weight: 500;
line-height: 1.62;
}

/* =========================================
FORMULARIO
========================================= */

.offering-form {
width: min(100%, 640px);
margin: 0 auto;
text-align: left;
}

.field-group {
margin-bottom: 25px;
}

.field-group label {
display: block;
margin-bottom: 10px;

color: rgba(242, 238, 231, 0.9);
font-family: "Montserrat", Arial, sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
}

.field-group input,
.field-group textarea {
width: 100%;

border: 1px solid var(--border);
border-radius: 0;
outline: none;

background: var(--field-background);
box-shadow:
inset 0 0 0 1px rgba(0, 0, 0, 0.12),
0 12px 32px rgba(0, 0, 0, 0.16);

color: var(--ivory);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 1.14rem;
font-weight: 500;
line-height: 1.55;

padding: 17px 18px;

transition:
border-color 0.25s ease,
background 0.25s ease,
box-shadow 0.25s ease,
transform 0.25s ease;
}

.field-group input {
min-height: 56px;
}

.field-group textarea {
min-height: 185px;
resize: vertical;
}

.field-group input:hover,
.field-group textarea:hover {
border-color: rgba(242, 238, 231, 0.38);
}

.field-group input:focus,
.field-group textarea:focus {
border-color: var(--bronze);
background: rgba(0, 0, 0, 0.48);
box-shadow:
0 0 0 1px rgba(199, 154, 53, 0.2),
0 0 28px rgba(199, 154, 53, 0.1);
transform: translateY(-1px);
}

.field-group input::placeholder,
.field-group textarea::placeholder {
color: rgba(242, 238, 231, 0.46);
opacity: 1;
}

.form-message {
min-height: 24px;
margin: -5px 0 15px;

color: #e9b8a8;
font-family: "Montserrat", Arial, sans-serif;
font-size: 0.82rem;
letter-spacing: 0.03em;
}

.primary-button {
width: 100%;
min-height: 56px;

border: 1px solid var(--bronze);
border-radius: 0;

background: rgba(0, 0, 0, 0.34);
color: var(--ivory);

padding: 16px 22px;

cursor: pointer;

font-family: "Montserrat", Arial, sans-serif;
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;

transition:
background 0.25s ease,
color 0.25s ease,
box-shadow 0.25s ease,
transform 0.25s ease;
}

.primary-button:hover {
background: var(--bronze);
color: #090909;
box-shadow: 0 10px 28px rgba(199, 154, 53, 0.18);
transform: translateY(-2px);
}

.primary-button:active {
transform: translateY(0);
}

.primary-button:disabled {
cursor: wait;
opacity: 0.68;
}

/* =========================================
TERMINAL
========================================= */

.screen-processing {
display: grid;
place-items: center;

padding: 30px;

background:
radial-gradient(
circle at center,
rgba(66, 112, 73, 0.12),
transparent 55%
),
#020402;
}

.terminal-window {
width: min(100%, 760px);

border: 1px solid rgba(184, 255, 176, 0.28);
background: rgba(3, 9, 4, 0.96);

box-shadow:
0 0 60px rgba(97, 255, 125, 0.07),
inset 0 0 35px rgba(97, 255, 125, 0.025);

padding: 22px;
}

.terminal-header {
display: flex;
gap: 8px;

padding-bottom: 18px;
border-bottom: 1px solid rgba(184, 255, 176, 0.12);
}

.terminal-header span {
width: 10px;
height: 10px;

border-radius: 50%;
background: rgba(184, 255, 176, 0.42);
}

.terminal-label {
margin: 24px 0 20px;

color: var(--terminal);
font-family: "Courier New", Courier, monospace;
font-size: 0.77rem;
letter-spacing: 0.12em;
}

.terminal-output {
min-height: 240px;

color: var(--terminal);
font-family: "Courier New", Courier, monospace;
font-size: clamp(0.81rem, 2vw, 0.98rem);
line-height: 1.88;
}

.terminal-line {
opacity: 0;
transform: translateY(5px);

animation: terminalLine 0.35s ease forwards;
}

.progress-track {
width: 100%;
height: 6px;

margin-top: 22px;

background: rgba(184, 255, 176, 0.12);
overflow: hidden;
}

.progress-bar {
width: 0%;
height: 100%;

background: var(--terminal);
box-shadow: 0 0 18px rgba(184, 255, 176, 0.4);

transition: width 0.5s ease;
}

.progress-number {
margin-top: 10px;

color: var(--terminal);
font-family: "Courier New", Courier, monospace;
text-align: right;
}

/* =========================================
PANTALLA POÉTICA
========================================= */

.screen-quote {
display: flex;
align-items: center;
justify-content: center;

min-height: 100vh;
padding: 40px 24px;

background:
radial-gradient(
circle at center,
rgba(23, 34, 53, 0.3),
transparent 55%
),
var(--carbon);

text-align: center;
}

.quote-content {
width: min(100%, 920px);
}

.quote-kicker {
margin-bottom: 40px;

color: var(--bronze);
font-family: "Montserrat", Arial, sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
}

#ritualQuote {
color: var(--ivory);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(2rem, 5vw, 4rem);
font-style: italic;
font-weight: 500;
line-height: 1.3;

opacity: 0;

animation: quoteFade 2.4s forwards;
}

/* =========================================
PANTALLA DE LA CANCIÓN
========================================= */

.screen-song {
display: grid;
place-items: center;

padding: 48px 24px;

background:
radial-gradient(
circle at 72% 30%,
rgba(199, 154, 53, 0.13),
transparent 37%
),
radial-gradient(
circle at 22% 80%,
rgba(23, 34, 53, 0.42),
transparent 46%
),
var(--carbon);
}

.song-layout {
width: min(100%, 1080px);

display: grid;
grid-template-columns: minmax(260px, 470px) minmax(280px, 1fr);
gap: 64px;
align-items: center;
}

.cover-frame {
position: relative;
}

.cover-frame::before {
content: "";

position: absolute;
inset: 8%;
z-index: 0;

background: rgba(199, 154, 53, 0.18);
filter: blur(48px);
}

.cover-image {
position: relative;
z-index: 1;

display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;

border: 1px solid var(--border);

box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.song-info h2 {
color: var(--ivory);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(2.7rem, 6vw, 5.2rem);
font-weight: 600;
line-height: 0.92;
letter-spacing: -0.035em;
}

.artist-name {
margin-top: 14px;

color: var(--bronze);
font-family: "Montserrat", Arial, sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
}

.welcome-message {
max-width: 580px;
margin: 28px 0;

color: var(--smoke);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 1.28rem;
font-weight: 500;
line-height: 1.62;
}

.audio-player {
width: 100%;
margin: 8px 0 26px;
}

.streaming-links {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.streaming-links a {
border: 1px solid var(--border);

color: var(--ivory);

padding: 11px 16px;

text-decoration: none;

font-family: "Montserrat", Arial, sans-serif;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;

transition:
border-color 0.25s ease,
color 0.25s ease,
background 0.25s ease,
transform 0.25s ease;
}

.streaming-links a:hover {
border-color: var(--bronze);
background: rgba(199, 154, 53, 0.08);
color: var(--bronze);
transform: translateY(-2px);
}

/* =========================================
ANIMACIONES
========================================= */

@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(24px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes terminalLine {
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes quoteFade {
from {
opacity: 0;
transform: translateY(22px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/* =========================================
CELULARES Y TABLETS
========================================= */

@media (max-width: 820px) {
.song-layout {
grid-template-columns: 1fr;
gap: 38px;
}

.cover-frame {
width: min(100%, 520px);
margin: 0 auto;
}

.song-info {
text-align: center;
}

.welcome-message {
margin-right: auto;
margin-left: auto;
}

.streaming-links {
justify-content: center;
}
}

@media (max-width: 560px) {
.screen-entry,
.screen-song {
padding: 36px 16px;
}

.screen-intro {
padding: 36px 20px;
}

.mnemosyne-title {
margin-bottom: 38px;
letter-spacing: 0.33em;
}

.mnemosyne-quote {
font-size: 1.28rem;
line-height: 1.48;
}

h1 {
font-size: clamp(3.45rem, 18vw, 5.3rem);
}

.intro-text {
margin-top: 25px;
margin-bottom: 34px;
}

.field-group input,
.field-group textarea {
background: rgba(0, 0, 0, 0.52);
}

.terminal-window {
padding: 16px;
}

.terminal-output {
min-height: 280px;
}
}

/* ===========================================
   ALTAR FLAME
=========================================== */

.poetas-row{
    display:inline-flex;
    align-items:flex-end;
    gap:28px;
}

.altar-flame{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    width:70px;
    height:95px;
}

.pixel-flame{
    position:relative;
    width:24px;
    height:42px;

    background:#ffb347;

    box-shadow:
    0 -8px #ffd87c,
    0 -16px #fff0b5,

    -8px 8px #ff7b00,
    8px 8px #ff7b00,

    -8px 0 #ff9f1c,
    8px 0 #ff9f1c,

    0 8px #ff5c00,

    0 16px #9d4f00,

    -12px 18px #533000,
    12px 18px #533000,

    0 26px #2b1c12;

    image-rendering:pixelated;

    animation:altarFire 0.18s infinite alternate;
}

.pixel-flame::before{

    content:"";

    position:absolute;

    left:-6px;
    top:-6px;

    width:36px;
    height:58px;

    border-radius:50%;

    filter:blur(14px);

    background:
    radial-gradient(circle,
    rgba(255,190,80,.95) 0%,
    rgba(255,120,20,.65) 45%,
    rgba(255,80,0,.15) 75%,
    transparent 100%);
}

@keyframes altarFire{

0%{

transform:
translateY(0px)
scaleY(1)
scaleX(1);

filter:
brightness(1);
}

25%{

transform:
translateY(-2px)
scaleY(1.05)
scaleX(.95);
}

50%{

transform:
translateY(1px)
scaleX(1.08)
scaleY(.96);

filter:
brightness(1.15);
}

75%{

transform:
translateY(-3px)
scaleX(.92)
scaleY(1.12);
}

100%{

transform:
translateY(0px)
scaleX(1)
scaleY(1);

filter:
brightness(1.25);
}

}

/* =========================================
   TITLE WITH ANIMATED 16-BIT BRAZIER
========================================= */

.altar-title {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;

  color: var(--ivory, #f2eee7);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3.6rem, 10vw, 7.6rem);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.045em;

  text-align: center;
  text-shadow: 0 4px 35px rgba(0, 0, 0, 0.72);
}

.title-top {
  display: block;
}

.title-bottom {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: clamp(18px, 3vw, 40px);

  width: max-content;
  max-width: 100%;
}

.title-words {
  display: block;
  white-space: nowrap;
}

/* Container for the fire and stone pedestal */

.brazier-wrapper {
  position: relative;

  display: inline-flex;
  align-items: flex-end;
  justify-content: center;

  flex: 0 0 auto;

  width: clamp(68px, 9vw, 116px);
  height: clamp(92px, 13vw, 156px);

  margin-top: 0.12em;

  filter:
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.8))
    drop-shadow(0 0 10px rgba(255, 103, 0, 0.24));
}

/* Animated warm glow behind the fire */

.brazier-glow {
  position: absolute;

  top: 12%;
  left: 50%;

  width: 72%;
  height: 58%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 212, 91, 0.78) 0%,
      rgba(255, 116, 20, 0.42) 38%,
      rgba(255, 75, 0, 0.13) 66%,
      transparent 78%
    );

  filter: blur(14px);

  transform: translateX(-50%);

  animation: brazierGlow 0.85s ease-in-out infinite alternate;
}

.pixel-brazier {
  position: relative;
  z-index: 2;

  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;

  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Flame movement */

.flame-layer {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.flame-outer {
  animation: flameOuter 0.34s steps(2, end) infinite alternate;
}

.flame-middle {
  animation: flameMiddle 0.27s steps(2, end) infinite alternate;
}

.flame-inner {
  animation: flameInner 0.22s steps(2, end) infinite alternate;
}

/* Flying sparks */

.spark {
  opacity: 0;

  transform-box: fill-box;
  transform-origin: center;
}

.spark-one {
  animation: sparkOne 1.15s steps(4, end) infinite;
}

.spark-two {
  animation: sparkTwo 1.4s steps(4, end) 0.25s infinite;
}

.spark-three {
  animation: sparkThree 1.05s steps(4, end) 0.5s infinite;
}

.spark-four {
  animation: sparkFour 1.3s steps(4, end) 0.75s infinite;
}

/* Flame keyframes */

@keyframes flameOuter {
  0% {
    transform:
      translateX(-1px)
      translateY(1px)
      scaleX(1.02)
      scaleY(0.97);
  }

  50% {
    transform:
      translateX(2px)
      translateY(-2px)
      scaleX(0.94)
      scaleY(1.07);
  }

  100% {
    transform:
      translateX(-2px)
      translateY(-1px)
      scaleX(1.06)
      scaleY(1.02);
  }
}

@keyframes flameMiddle {
  0% {
    transform:
      translateX(1px)
      translateY(0)
      scaleX(0.96)
      scaleY(1.02);
  }

  100% {
    transform:
      translateX(-2px)
      translateY(-3px)
      scaleX(1.05)
      scaleY(1.1);
  }
}

@keyframes flameInner {
  0% {
    transform:
      translateX(-1px)
      translateY(1px)
      scaleY(0.96);
  }

  100% {
    transform:
      translateX(1px)
      translateY(-2px)
      scaleY(1.1);
  }
}

@keyframes brazierGlow {
  0% {
    opacity: 0.62;
    transform: translateX(-50%) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1.12);
  }
}

/* Spark animations */

@keyframes sparkOne {
  0% {
    opacity: 0;
    transform: translate(0, 10px);
  }

  20% {
    opacity: 1;
  }

  70% {
    opacity: 0.85;
  }

  100% {
    opacity: 0;
    transform: translate(-8px, -28px);
  }
}

@keyframes sparkTwo {
  0% {
    opacity: 0;
    transform: translate(0, 12px);
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(9px, -34px);
  }
}

@keyframes sparkThree {
  0% {
    opacity: 0;
    transform: translate(-2px, 8px);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(12px, -23px);
  }
}

@keyframes sparkFour {
  0% {
    opacity: 0;
    transform: translate(3px, 7px);
  }

  30% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate(-7px, -21px);
  }
}

/* Smaller screens */

@media (max-width: 720px) {
  .title-bottom {
    gap: 12px;
  }

  .brazier-wrapper {
    width: clamp(54px, 14vw, 78px);
    height: clamp(76px, 19vw, 106px);
  }
}

@media (max-width: 480px) {
  .altar-title {
    font-size: clamp(3rem, 17vw, 4.8rem);
  }

  .title-bottom {
    gap: 8px;
  }

  .title-words {
    white-space: normal;
  }

  .brazier-wrapper {
    width: 50px;
    height: 72px;
  }
}

/* Respect users who disable animations */

@media (prefers-reduced-motion: reduce) {
  .flame-outer,
  .flame-middle,
  .flame-inner,
  .brazier-glow,
  .spark {
    animation: none;
  }

  .spark {
    display: none;
  }
}

/* =========================================
   PÁGINA DE CRÉDITOS
========================================= */

.credits-page {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 70% 20%,
      rgba(199, 154, 53, 0.12),
      transparent 36%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(23, 34, 53, 0.42),
      transparent 46%
    ),
    #050505;
  color: #f2eee7;
}

.credits-shell {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 64px 24px 80px;
}

.credits-hero {
  margin-bottom: 54px;
  text-align: center;
}

.credits-eyebrow {
  margin-bottom: 18px;
  color: #c79a35;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.credits-title {
  color: #f2eee7;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3.2rem, 8vw, 6.4rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.credits-subtitle {
  margin-top: 18px;
  color: #aaa49b;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
}

.credits-layout {
  display: grid;
  grid-template-columns: minmax(280px, 460px) minmax(300px, 1fr);
  gap: 64px;
  align-items: start;
}

.credits-image-wrap {
  position: sticky;
  top: 30px;
}

.credits-image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(242, 238, 231, 0.22);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.58),
    0 0 35px rgba(199, 154, 53, 0.08);
}

.credits-content {
  display: grid;
  gap: 38px;
}

.credit-section {
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(242, 238, 231, 0.12);
}

.credit-section h2 {
  margin-bottom: 22px;
  color: #c79a35;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.credit-section p {
  margin-bottom: 13px;
  color: rgba(242, 238, 231, 0.86);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.65;
}

.credit-section strong {
  color: #f2eee7;
  font-weight: 600;
}

.credit-section blockquote {
  color: #f2eee7;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.55;
}

.credit-author {
  margin-top: 18px;
  color: #c79a35 !important;
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.credits-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}

.credits-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;
  padding: 12px 17px;

  border: 1px solid rgba(242, 238, 231, 0.24);
  background: rgba(0, 0, 0, 0.24);
  color: #f2eee7;

  font-family: "Montserrat", Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.credits-button:hover {
  border-color: #c79a35;
  background: rgba(199, 154, 53, 0.08);
  color: #c79a35;
  transform: translateY(-2px);
}

@media (max-width: 820px) {
  .credits-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .credits-image-wrap {
    position: static;
    width: min(100%, 520px);
    margin: 0 auto;
  }

  .credits-content {
    text-align: center;
  }

  .credits-actions {
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .credits-shell {
    padding: 42px 16px 60px;
  }

  .credits-title {
    font-size: clamp(3rem, 16vw, 4.7rem);
  }

  .credits-actions {
    flex-direction: column;
  }

  .credits-button {
    width: 100%;
  }
}