/* lenglim.com — site styles */
html, body { margin: 0; padding: 0; background: #F7F3EA; }
body { font-family: 'EB Garamond', Garamond, Georgia, serif; color: #211E18; -webkit-font-smoothing: antialiased; }
a { color: #211E18; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
p { text-wrap: pretty; }

.page { min-height: 100vh; background: #F7F3EA; color: #211E18; }
.page--home { display: flex; flex-direction: column; padding: 72px clamp(28px, 8vw, 96px) 56px; box-sizing: border-box; }
.page--contact { display: flex; flex-direction: column; }

.wrap { max-width: 620px; margin: 0 auto; padding: 56px 28px 80px; box-sizing: border-box; }
.wrap--contact { width: 100%; padding: 56px 28px 64px; flex: 1; display: flex; flex-direction: column; }

.header { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; }
.wordmark { font-size: 18px; font-weight: 500; letter-spacing: 0.01em; }

.seal { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 30px; height: 30px; background: #A63A2B; border-radius: 2px; color: #F7F3EA; font-family: 'Noto Serif SC', serif; font-size: 11px; line-height: 1.05; font-weight: 500; }
.seal--lg { width: 40px; height: 40px; font-size: 16px; line-height: 1.1; transform: translateY(4px); }

.nav { display: flex; align-items: baseline; font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #6E6759; }
.nav--home { justify-content: flex-end; flex-wrap: wrap; }
.nav a { color: #6E6759; }
.nav a.is-active { color: #211E18; }
.dot { margin: 0 12px; color: #6E6759; }

.home-body { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 640px; margin-top: 64px; }
.title-row { display: flex; align-items: baseline; gap: 18px; }
.h1 { margin: 0; font-size: 40px; font-weight: 500; letter-spacing: 0.01em; }
.h1--home { font-size: 44px; }
.label { margin-top: 14px; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: #6E6759; }
.epigraph { margin: 56px 0 0; font-style: italic; font-size: 20px; line-height: 1.7; max-width: 30ch; color: #3A352C; }
.body-home { margin: 24px 0 0; font-size: 16px; line-height: 1.85; max-width: 59ch; }
.body-home--first { margin-top: 40px; }

.article { margin-top: 76px; }
.article--after-photo { margin-top: 56px; }
.article hr { border: none; border-top: 1px solid #D8D0C0; margin: 30px 0 44px; }
.article p { margin: 24px 0 0; font-size: 18px; line-height: 1.85; }
.article .lede { margin: 0; font-size: 20px; line-height: 1.7; color: #3A352C; }
.article .pull { margin: 38px 0; font-size: 21px; line-height: 1.5; }
.subtitle { margin: 12px 0 0; font-style: italic; font-size: 20px; color: #6E6759; }
.sc { font-family: 'Noto Serif SC', serif; }

.photo { margin: 64px 0 0; max-width: 400px; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }

.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; margin-top: 88px; }
.doors--home { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 48px; }
.door { display: block; border-top: 1px solid #D8D0C0; padding-top: 16px; }
.doors--home .door { padding-top: 18px; }
.door:hover { text-decoration: none; }
.door:hover .door__title { text-decoration: underline; text-underline-offset: 3px; }
.door__title { font-size: 21px; font-weight: 500; color: #211E18; }
.door__sub { margin-top: 6px; font-size: 15px; color: #6E6759; }

.footer { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; border-top: 1px solid #D8D0C0; margin-top: 64px; padding-top: 20px; font-size: 14px; color: #6E6759; }
.footer--wide { margin-top: 72px; }
.accent { color: #A63A2B; }

.contact-body { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 34em; padding: 64px 0; }
.contact-body hr { border: none; border-top: 1px solid #D8D0C0; margin: 30px 0 40px; }
.contact-p { margin: 0; font-size: 21px; line-height: 1.75; }
.note { margin: 32px 0 0; font-style: italic; font-size: 17px; line-height: 1.7; color: #6E6759; }

@media (max-width: 480px) {
  .h1--home { font-size: 36px; }
  .h1 { font-size: 34px; }
  .header { flex-wrap: wrap; }
}