/* Personal symbolism page, sharing the portfolio's typography and theme tokens. */
.lotus-page {
    --lotus-saffron: var(--orange);
    --lotus-gold: var(--gold);
    --lotus-pink: var(--coral);
    --lotus-blue: var(--teal);
}
.lotus-hero { padding-block: 40px 68px; text-align: center; }
.lotus-mark { width: clamp(180px, 20vw, 260px); height: auto; margin: 0 auto 24px; }
.lotus-hero h1 { font-size: clamp(46px, 6.5vw, 80px); line-height: 1.12; margin-top: 18px; text-wrap: balance; }
.lotus-subtitle { color: var(--teal-dark); font-size: clamp(18px, 2.2vw, 24px); line-height: 1.6; margin-top: 24px; }
.lotus-intro { max-width: 690px; margin: 28px auto 0; color: var(--muted); }
.lotus-intro p + p { margin-top: 16px; font-size: 14px; }
.lotus-contents { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 30px; font-size: 12px; font-weight: 600; }
.lotus-contents a { padding-block: 8px; }
.lotus-contents span { margin-left: 8px; color: var(--teal-dark); }
.lotus-page main a { text-decoration: underline; text-underline-offset: 5px; }
.lotus-page main a:hover { color: var(--teal-dark); }
.lotus-section { padding-block: 64px; border-top: 1px solid var(--line); }
.lotus-section .eyebrow { margin-bottom: 17px; }
.lotus-split { display: grid; grid-template-columns: 1fr 1.65fr; gap: 68px; }
.lotus-prose { color: var(--muted); }
.lotus-prose p + p { margin-top: 18px; }
.lotus-prose strong { color: var(--ink); }
.lotus-prose blockquote { margin: 24px 0 0; border-left: 3px solid var(--lotus-gold); padding-left: 22px; color: var(--ink); font-family: Georgia, serif; font-size: 24px; line-height: 1.5; }
.lotus-section-intro { max-width: 690px; color: var(--muted); margin-top: 20px; }
.lotus-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.lotus-saffron { --petal: var(--lotus-saffron); }
.lotus-gold { --petal: var(--lotus-gold); }
.lotus-pink { --petal: var(--lotus-pink); }
.lotus-blue { --petal: var(--lotus-blue); }
.lotus-value { display: flex; flex-direction: column; background: var(--paper); padding: 30px; border: 1px solid var(--line); border-top: 4px solid var(--petal); border-radius: 4px; }
.lotus-position { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 600; letter-spacing: .1em; color: var(--muted); }
.lotus-position span { width: 12px; height: 16px; border-radius: 80% 0 80% 0; background: var(--petal); flex-shrink: 0; }
.lotus-value h3 { margin-top: 22px; font-family: Georgia, serif; font-size: 30px; font-weight: 400; }
.lotus-value > p:not(.lotus-position) { font-size: 14px; color: var(--muted); margin-top: 18px; }
.lotus-value > .lotus-keywords { color: var(--ink); font-size: 12px; margin-block: 9px 4px; }
.lotus-principle { margin-top: auto; padding-top: 28px; }
.lotus-principle h4 { border-top: 1px solid var(--line); padding-top: 20px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.lotus-principle p { font-size: 14px; margin-top: 8px; }
.lotus-sequence { display: flex; flex-wrap: wrap; gap: 12px 20px; list-style: none; margin: 36px 0 0; padding: 24px; background: var(--soft); border-radius: 4px; color: var(--ink); font-size: 14px; }
.lotus-sequence li:not(:last-child)::after { content: "→"; margin-left: 20px; color: var(--teal-dark); }
.lotus-sequence li:last-child { font-weight: 700; }
.lotus-standard { padding-block: 68px; }
.lotus-standard h2 { font: 16px "Segoe UI", Arial, sans-serif; letter-spacing: 0; margin-top: 20px; }
.lotus-standard blockquote { margin: 28px 0; font: clamp(32px, 4.8vw, 58px)/1.25 Georgia, serif; letter-spacing: -.025em; }
.lotus-standard blockquote span { color: #ffda71; }
.lotus-standard .wrap > p:not(.eyebrow) { color: #dcf7f4; max-width: 660px; font-size: 15px; margin-top: 16px; }
.lotus-table-scroll { overflow-x: auto; margin-top: 32px; }
.lotus-table-scroll:focus-visible { outline: 3px solid var(--teal-dark); outline-offset: 5px; }
.lotus-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
.lotus-table caption { text-align: left; color: var(--muted); font-size: 12px; padding-bottom: 14px; }
.lotus-table th, .lotus-table td { padding: 17px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lotus-table thead { background: var(--soft); }
.lotus-table tbody td { color: var(--muted); }
.lotus-table tbody th { width: 16%; }
.lotus-context { border-top: 1px solid var(--line); padding-top: 30px; color: var(--muted); }
.lotus-context h2 { font: 600 13px "Segoe UI", Arial, sans-serif; letter-spacing: 0; }
.lotus-context p { font-size: 13px; margin-top: 10px; max-width: 880px; }
.lotus-closing { text-align: center; padding-block: 78px; }
.lotus-closing p { font-family: Georgia, serif; font-size: clamp(20px, 2.3vw, 28px); line-height: 1.65; text-wrap: balance; }
.lotus-closing strong { font-weight: 400; color: var(--teal-dark); }
.lotus-closing img { margin: 30px auto 0; height: auto; }
@media (max-width: 760px) {
    .lotus-split { grid-template-columns: 1fr; gap: 28px; }
    .lotus-values { grid-template-columns: 1fr; }
    .lotus-section { padding-block: 44px; }
    .lotus-hero { padding-block: 28px 44px; }
    .lotus-value { padding: 24px; }
    .lotus-sequence { flex-direction: column; gap: 8px; }
    .lotus-sequence li:not(:last-child)::after { content: "↓"; display: block; margin: 8px 0 0; }
    .lotus-table { font-size: 14px; }
    .lotus-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .lotus-table tbody tr { display: grid; padding-block: 18px; border-bottom: 1px solid var(--line); }
    .lotus-table th, .lotus-table td { display: block; padding: 4px 0; border: 0; }
    .lotus-table tbody th { width: auto; font-size: 16px; }
    .lotus-table td:first-of-type { font-weight: 600; color: var(--teal-dark); }
    .lotus-standard { padding-block: 48px; }
}
@media print {
    .lotus-page { --ink: #183c44; --muted: #526368; --paper: white; --white: white; --line: #d5e3df; --soft: #e5f6f3; --teal-dark: #00666c; background: white; }
    .lotus-contents { display: none; }
    .lotus-value { break-inside: avoid; }
    .lotus-standard { background: white; color: var(--ink); }
    .lotus-standard .eyebrow, .lotus-standard blockquote span, .lotus-standard .wrap > p:not(.eyebrow) { color: var(--ink); }
}