@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600&display=swap');

:root {
--bg: #110e11;
--text: #f5eee5;
--muted: #a99d97;
--gold: #d8b36a;
--line: rgba(245,238,229,.14);
}

* {
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
margin: 0;
background: radial-gradient(circle at 80% 10%, rgba(110,40,75,.2), transparent 30rem), var(--bg);
color: var(--text);
font-family: Manrope, Arial, sans-serif;
}

a {
color: inherit;
text-decoration: none;
}

/* HEADER */

.site-header {
height: 78px;
max-width: 1200px;
margin: auto;
padding: 0 28px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--line);
}

.brand {
display: flex;
gap: 11px;
align-items: center;
}

.brand-mark {
width: 38px;
height: 38px;
border: 1px solid #876c40;
display: grid;
place-items: center;
color: var(--gold);
font-family: "Cormorant Garamond", serif;
}

.brand strong {
display: block;
font-family: "Cormorant Garamond", serif;
font-size: 22px;
}

.brand small {
font-size: 9px;
color: var(--muted);
letter-spacing: .08em;
}

nav {
display: flex;
gap: 26px;
color: var(--muted);
font-size: 12px;
}

nav a:hover {
color: var(--gold);
}

/* INTRO */

.intro {
max-width: 1200px;
margin: auto;
padding: 48px 28px 38px;
}

.eyebrow,
.section-heading span,
.about > span {
color: var(--gold);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .22em;
}

.intro h1 {
font-family: "Cormorant Garamond", serif;
font-size: clamp(42px, 5vw, 64px);
font-weight: 500;
line-height: .9;
margin: 17px 0;
}

.intro h1 em,
.about em {
color: var(--gold);
font-style: normal;
}

.intro p:last-child {
color: var(--muted);
font-size: 14px;
margin: 0;
max-width: 500px;
}

/* BOOKS */

.books {
max-width: 1200px;
margin: auto;
padding: 0 28px 70px;
}

.section-heading {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--line);
padding-bottom: 14px;
margin-bottom: 22px;
}

.section-heading b {
font-size: 10px;
font-weight: 500;
color: var(--muted);
letter-spacing: .12em;
}

.book-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 18px;
align-items: start;
}

.book-card {
min-width: 0;
}

.book-open {
display: block;
}

.cover-frame {
width: 100%;
aspect-ratio: 2 / 3;
background: #171317;
overflow: hidden;
box-shadow: 0 10px 24px rgba(0,0,0,.28);
transition: transform .25s, box-shadow .25s;
}

.cover {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
background: #171317;
}

.book-card:hover .cover-frame {
transform: translateY(-4px);
box-shadow: 0 18px 34px rgba(0,0,0,.42);
}

.book-card h2 {
font-family: "Cormorant Garamond", serif;
font-size: 17px;
line-height: 1;
margin: 10px 0 8px;
font-weight: 600;
transition: color .2s;
}

.book-card:hover h2 {
color: var(--gold);
}

/* DESCRIPTION */

details {
margin-top: 6px;
border-top: 1px solid var(--line);
}

summary {
cursor: pointer;
list-style: none;
padding: 6px 0;
color: var(--gold);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .12em;
}

summary::-webkit-details-marker {
display: none;
}

summary:after {
content: "+";
float: right;
font-size: 15px;
}

details[open] summary:after {
content: "−";
}

details p {
margin: 0 0 8px;
color: var(--muted);
font-size: 9px;
line-height: 1.5;
}

/* ЯРКИЕ ССЫЛКИ НА МАГАЗИНЫ */

.bright-links {
border-top: 1px solid rgba(216,179,106,.45);
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 10px;
}

.links.compact {
border-top: 1px solid rgba(216,179,106,.45);
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 7px;
}

.bright-links a,
.links.compact.bright-links a {
color: #f0d48c;
font-weight: 700;
font-size: 12px;
padding: 7px 10px !important;
border: 1px solid rgba(216,179,106,.45) !important;
border-radius: 6px;
background: rgba(216,179,106,.06);
transition: all .2s ease;
}

.bright-links a:hover,
.links.compact.bright-links a:hover {
color: #fff8dc;
background: rgba(216,179,106,.18);
border-color: #d8b36a !important;
transform: translateY(-2px);
padding-left: 10px !important;
}

/* ABOUT */

.about {
max-width: 1200px;
margin: auto;
padding: 50px 28px 70px;
border-top: 1px solid var(--line);
}

.about h2 {
font-family: "Cormorant Garamond", serif;
font-size: 44px;
line-height: .9;
font-weight: 500;
margin: 20px 0;
}

.about p {
color: var(--muted);
font-size: 13px;
}

/* FOOTER */

footer {
max-width: 1200px;
margin: auto;
padding: 25px 28px 40px;
border-top: 1px solid var(--line);
color: #70676a;
font-size: 10px;
letter-spacing: .1em;
text-transform: uppercase;
}

/* BOOK PAGE */

.book-page {
max-width: 1100px;
margin: auto;
padding: 34px 28px 80px;
}

.back-link {
display: inline-block;
color: var(--gold);
font-size: 11px;
margin-bottom: 34px;
}

.back-link:hover {
color: #fff1b9;
}

.book-detail {
display: grid;
grid-template-columns: minmax(260px,390px) 1fr;
gap: 58px;
align-items: start;
}

.detail-cover-wrap {
background: #171317;
padding: 12px;
box-shadow: 0 20px 45px rgba(0,0,0,.4);
}

.detail-cover {
width: 100%;
display: block;
height: auto;
max-height: 690px;
object-fit: contain;
}

.detail-info {
padding-top: 12px;
}

.detail-info h1 {
font-family: "Cormorant Garamond", serif;
font-size: clamp(48px,6vw,78px);
line-height: .9;
font-weight: 500;
margin: 16px 0 28px;
}

.detail-description {
color: #c9beb8;
font-size: 15px;
line-height: 1.8;
max-width: 620px;
}

.detail-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 32px;
}

.detail-links a {
display: inline-block;
padding: 10px 14px;
border: 1px solid rgba(216,179,106,.55);
color: #e5c77f;
font-size: 11px;
font-weight: 600;
transition: .2s;
}

.detail-links a:hover {
background: rgba(216,179,106,.12);
color: #fff1b9;
border-color: var(--gold);
}

/* ADAPTIVE */

@media(max-width:900px) {
.book-grid {
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 16px;
}

.site-header,
.intro,
.books,
.about,
footer {
padding-left: 20px;
padding-right: 20px;
}

.book-detail {
grid-template-columns: minmax(220px,320px) 1fr;
gap: 35px;
}
}

@media(max-width:650px) {
.site-header {
height: 68px;
}

nav {
display: none;
}

.intro {
padding-top: 52px;
}

.book-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 18px 12px;
}

.book-card h2 {
font-size: 21px;
}

.intro h1 {
font-size: 54px;
}

.about h2 {
font-size: 48px;
}

.book-page {
padding-left: 20px;
padding-right: 20px;
}

.book-detail {
grid-template-columns: 1fr;
gap: 28px;
}

.detail-cover-wrap {
max-width: 330px;
margin: auto;
}

.detail-info {
padding-top: 0;
}

.detail-info h1 {
font-size: 54px;
}

.detail-description {
font-size: 14px;
}

.detail-links {
margin-top: 24px;
}

.detail-links a {
font-size: 10px;
}

.cover-frame {
aspect-ratio: 2 / 3;
}
}

@media(max-width:400px) {
.book-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}

.book-card h2 {
font-size: 18px;
}

.bright-links a,
.links.compact.bright-links a {
font-size: 11px;
padding: 6px 8px !important;
}
}

.book-grid .cover-frame .cover {
aspect-ratio: auto;
object-fit: contain;
}