:root {
  --bg: #b9b9b6;
  --bg-light: #cacac6;
  --ink: #111111;
  --paper: #efefeb;
  --muted: #666663;
  --rule: rgba(17, 17, 17, 0.28);
  --font: "Book Antiqua", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --max: 1280px;
  --reading: 720px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 5px;
}
img { display: block; max-width: 100%; }

.site-header {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 0 5vw;
  border-bottom: 1px solid var(--rule);
}
.site-wordmark {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  letter-spacing: .18em;
}
.site-nav { display: flex; gap: clamp(22px, 4vw, 56px); }
.site-nav a, .home-nav a, .work-actions a, .back-link, .text-link {
  letter-spacing: .12em;
  font-size: .88rem;
}
.site-nav a, .home-nav a, .work-actions a, .back-link, .text-link, .work-card h2, .diary-row h2 {
  transition: opacity .18s ease;
}
.site-nav a:hover, .home-nav a:hover, .work-actions a:hover, .back-link:hover, .text-link:hover, .work-card-link:hover h2, .diary-row a:hover h2 { opacity: .5; }

.page-shell {
  width: min(var(--max), 90vw);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 130px) 0 120px;
}
.page-heading {
  margin-bottom: clamp(60px, 8vw, 110px);
}
.page-heading h1, .work-information h1, .reading-header h1 {
  margin: 0;
  font-weight: 400;
  letter-spacing: .08em;
}
.page-heading h1 { font-size: clamp(2.5rem, 7vw, 6rem); }
.empty-state { color: var(--muted); }

.home-page .site-header, .home-page .site-footer { display: none; }
.home-page main { min-height: 100vh; }
.home-hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: start center;
  background: var(--bg);
}
.home-center {
  position: relative;
  z-index: 2;
  margin-top: clamp(11vh, 16vh, 18vh);
  text-align: center;
}
.home-center h1 {
  margin: 0;
  font-size: clamp(3.4rem, 11vw, 9.5rem);
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1;
}
.home-nav {
  margin-top: clamp(34px, 5vh, 62px);
  display: flex;
  justify-content: center;
  gap: clamp(28px, 6vw, 80px);
}
.home-nav a { font-size: clamp(.86rem, 1.2vw, 1.08rem); }
.home-art {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56vh;
  background-image: var(--home-art, none);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  pointer-events: none;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(50px, 7vw, 110px) clamp(28px, 5vw, 72px);
}
.work-card { min-width: 0; }
.work-thumb-frame {
  margin: 0 0 24px;
  aspect-ratio: 2 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.work-thumb-frame img { width: 100%; height: 100%; object-fit: cover; }
.image-placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  color: var(--muted);
  letter-spacing: .2em;
  font-size: .75rem;
}
.work-card h2 {
  margin: 0;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  font-weight: 400;
  letter-spacing: .035em;
}

.work-detail { padding-top: 55px; }
.back-link { display: inline-block; margin-bottom: 70px; }
.work-detail-grid {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(340px, 1.2fr);
  gap: clamp(55px, 9vw, 150px);
  align-items: start;
}
.work-cover { margin: 0; }
.work-cover img { width: 100%; height: auto; }
.work-cover .image-placeholder { aspect-ratio: 2 / 3; }
.work-information { padding-top: 1vw; }
.work-information h1 { font-size: clamp(2.4rem, 5.7vw, 5.5rem); line-height: 1.05; }
.work-date { margin-top: 20px; color: var(--muted); font-size: .88rem; letter-spacing: .08em; }
.synopsis { margin-top: clamp(42px, 5vw, 72px); max-width: 650px; }
.synopsis p { margin: 0 0 1.25em; }
.work-actions {
  margin-top: 55px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
}
.work-actions a { border-bottom: 1px solid currentColor; padding-bottom: 3px; }

.reading-page .site-header { border-bottom-color: rgba(17,17,17,.18); }
.reading-shell {
  width: min(90vw, 940px);
  margin: 0 auto;
  padding: 60px 0 140px;
}
.reading-header { margin-bottom: clamp(65px, 9vw, 120px); }
.reading-header .back-link { margin-bottom: 80px; text-transform: lowercase; }
.reading-header h1 { font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1.08; }
.reading-header time { display: block; margin-bottom: 25px; color: var(--muted); font-size: .9rem; letter-spacing: .08em; }
.literary-text {
  width: min(100%, var(--reading));
  margin: 0 auto;
  font-size: clamp(1.13rem, 1.6vw, 1.28rem);
  line-height: 1.78;
  hyphens: auto;
}
.literary-text p { margin: 0 0 1.35em; text-indent: 1.7em; }
.literary-text p:first-child { text-indent: 0; }
.scene-break { text-align: center; padding: 1.7em 0 2.2em; letter-spacing: .3em; }

.diary-index { width: min(1080px, 90vw); }
.diary-list { border-top: 1px solid var(--rule); }
.diary-row { border-bottom: 1px solid var(--rule); }
.diary-row a { display: grid; grid-template-columns: 150px 1fr; gap: 20px 35px; padding: 36px 0 40px; }
.diary-row time { color: var(--muted); font-size: .86rem; letter-spacing: .08em; padding-top: 6px; }
.diary-row h2 { margin: 0; font-weight: 400; font-size: clamp(1.45rem, 2.6vw, 2.2rem); }
.diary-row p { grid-column: 2; margin: 0; color: var(--muted); max-width: 680px; }
.diary-post .post-image { width: min(100%, 820px); margin: 0 auto 75px; }
.diary-text p { text-indent: 0; }

.about-page { width: min(1040px, 90vw); }
.about-section {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 45px 80px;
  padding: 58px 0;
  border-top: 1px solid var(--rule);
}
.about-section:last-child { border-bottom: 1px solid var(--rule); }
.about-section h2 { margin: 0; font-size: .9rem; font-weight: 400; letter-spacing: .13em; }
.prose { max-width: 680px; }
.prose p { margin: 0 0 1.35em; }

.not-found h1 { font-size: clamp(5rem, 18vw, 14rem); margin: 0; font-weight: 400; line-height: .8; }
.not-found p { margin: 40px 0; }
.site-footer {
  width: 90vw;
  max-width: var(--max);
  margin: 0 auto;
  min-height: 90px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .16em;
}

@media (max-width: 850px) {
  .site-header { min-height: 82px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; }
  .site-nav { gap: 26px; }
  .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-detail-grid { grid-template-columns: 1fr; }
  .work-cover { width: min(75vw, 470px); }
  .work-information { padding-top: 0; }
  .about-section { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 560px) {
  body { font-size: 17px; }
  .site-header { padding-left: 6vw; padding-right: 6vw; }
  .site-nav { width: 100%; justify-content: space-between; gap: 12px; }
  .site-nav a { font-size: .72rem; }
  .home-center { margin-top: 16vh; width: 92vw; }
  .home-center h1 { font-size: clamp(2.75rem, 15vw, 5rem); letter-spacing: .045em; }
  .home-nav { gap: 22px; }
  .home-nav a { font-size: .76rem; }
  .home-art { height: 49vh; }
  .works-grid { grid-template-columns: 1fr; width: min(82vw, 390px); }
  .page-shell { width: 88vw; }
  .diary-row a { grid-template-columns: 1fr; gap: 8px; }
  .diary-row p { grid-column: 1; }
  .reading-shell { width: 88vw; }
  .literary-text { font-size: 1.08rem; line-height: 1.72; }
  .work-cover { width: 100%; }
}

/* Identidade e interface em caixa baixa. */
.site-wordmark, .site-nav a, .home-center h1, .home-nav a,
.page-heading h1, .work-information h1, .reading-header h1,
.work-card h2, .diary-row h2, .about-section h2,
.work-actions a, .back-link, .text-link, .image-placeholder,
.site-footer, button { text-transform: lowercase; }