/* Beyond the CV — cinematic direction / progressive enhancement.
   Keeps the personal narrative and functional gift in place. */
:root{--bg:#ebe8e1;--ink:#181a1e;--muted:#66615b;--line:#d2cbc0;--accent:#a34e43;--orange:#bd6753;--sun:#efd4a3;--paper:#f4f0e8;--r:8px}
body{background:var(--bg)}.nav-shell{background:rgba(235,232,225,.91);border-color:#cfc8bd}
.brand{font-size:13px;letter-spacing:.015em}.brand span{font-family:Georgia,serif;font-style:italic;font-size:14px}
.hero{min-height:min(88svh,850px);padding:96px 0 78px;display:flex;flex-direction:column;justify-content:center;isolation:isolate;color:#f0eae2;position:relative}
.hero:before{content:"";position:absolute;z-index:-2;inset:0;left:50%;width:100vw;transform:translateX(-50%);background:radial-gradient(ellipse at 80% 18%,#8e4b4755,transparent 35%),radial-gradient(ellipse at 16% 72%,#30475d60,transparent 55%),linear-gradient(130deg,#11161c,#0b0e13 62%,#21191b)}
.hero:after{content:"";position:absolute;inset:0;left:50%;width:100vw;z-index:-1;transform:translateX(-50%);pointer-events:none;opacity:.15;background-image:repeating-linear-gradient(0deg,transparent 0 3px,#ffffff08 3px 4px),radial-gradient(circle at 70% 45%,#ffecdf12,transparent 38%)}
.hero h1{font-family:Georgia,"Times New Roman",serif;font-weight:normal;line-height:.99;letter-spacing:-.066em;max-width:1000px;font-size:clamp(50px,7.8vw,106px);text-wrap:balance}
.hero h1 em:after{height:3px;background:#bd7668;bottom:-3px}
.hero .eyebrow{color:#c6b1a8}.hero .dot{background:#cb8973}.hero .lede{color:#d0c4bb;max-width:630px}
.hero .chip{border-color:#e0c7af55;color:#e0d4cc;background:#ffffff09}.hero .text-link{color:#f4eee6;border-color:#e3c4ab}.hero .text-link:hover{color:#e7b59f}
.intro-note{border-bottom:1px solid var(--line);padding:29px 0 38px;margin-bottom:28px}.intro-note strong{font-family:Georgia,serif;font-size:19px;font-weight:400}
h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.045em}.kicker{font-size:10px;letter-spacing:.21em;font-family:ui-monospace,monospace}.card{box-shadow:0 14px 37px #1b1a1710;background:#f3f0e9}.card.dark{background:#191d24;color:#f5f0e9}.card.red{background:#b66a59}.card.sun{background:#e7c78e}
.card.dark p{color:#d0cbc3}.card:hover{box-shadow:0 23px 45px #1b1a1720}.card h3{font-family:Georgia,serif;font-weight:400}
.future,.conversation{scroll-margin-top:90px}.future-list summary{font-family:Georgia,serif;font-weight:400;font-size:clamp(19px,2vw,24px)}
.question-card{box-shadow:7px 8px 0 #dfd9cb;border-color:#dfbc85}
.gift{background:#161b22;color:#f7f0e7;border-radius:8px}.gift .kicker{color:#e9b39c}.gift .button{background:#efddc5;color:#1a1a1c;border-color:#efddc5}.gift .button.outline{background:transparent;color:#f8eee4;border-color:#aea198}.gift .button.outline:hover{background:#ffffff1a}.gift p{color:#d5cbc2}.prompt-panel{border-color:#7c7673}.prompt-panel ol{color:#eee4d9}
.button{border-radius:3px}.nav-links .pill{border-radius:3px}.card,.question-card{border-radius:8px}.dialog-inner,.gift{box-shadow:0 25px 55px #0000000d}
.hana-bridge{padding:clamp(42px,6vw,82px);margin:45px 0 25px;background:radial-gradient(ellipse at 85% 15%,#71403d99,transparent 43%),linear-gradient(130deg,#151923,#0b0d13 67%,#281c23);color:#efe9e0;display:grid;grid-template-columns:1.04fr .96fr;gap:32px;align-items:center;min-height:440px;position:relative;isolation:isolate;overflow:hidden}
.hana-bridge:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.2;background:repeating-linear-gradient(0deg,transparent 0 3px,#ffffff0c 3px 4px)}
.hana-bridge .kicker{color:#e0b6a0}.hana-bridge h2{font-size:clamp(39px,4.5vw,66px);line-height:1.05;margin:20px 0 17px;max-width:550px}.hana-bridge h2 em{color:#e5a499}.hana-bridge p{max-width:420px;color:#c8bab2;font-size:15px;line-height:1.8}.hana-bridge a.hana-enter{background:#e2c4a9;color:#221a1a;display:inline-flex;padding:15px 21px;min-height:47px;font-size:13px;font-weight:700;text-decoration:none;margin-top:11px}.hana-bridge a.hana-enter:hover{background:#f6dac2}.hana-bridge small{display:block;color:#ab9b95;font-size:11px;margin-top:15px}
.hana-visual{position:relative;min-height:360px;display:flex;align-items:center;justify-content:center;perspective:1100px}.hana-poster{display:block;position:absolute;width:48%;max-width:225px;aspect-ratio:2/3;overflow:hidden;box-shadow:0 29px 50px #000b;border:1px solid #ffe2ca4f;background:#312125;transition:transform .6s cubic-bezier(.22,1,.36,1)}.hana-poster img{display:block;height:100%;width:100%;object-fit:cover}.hana-poster.first{transform:rotate(-12deg) translate(-44%,16px);z-index:2}.hana-poster.second{transform:rotate(9deg) translate(49%,-9px);z-index:1}.hana-bridge:hover .hana-poster.first{transform:rotate(-15deg) translate(-56%,-5px)}.hana-bridge:hover .hana-poster.second{transform:rotate(12deg) translate(58%,-25px)}
#out-of-panel-bridge{padding-top:70px!important}
@media(max-width:820px){.hana-bridge{grid-template-columns:1fr;gap:5px;padding:36px;min-height:0}.hana-visual{min-height:300px;order:-1}.hana-poster{width:35%}.hero{min-height:74svh}}
@media(max-width:560px){.hero{padding:65px 0 58px;min-height:76svh}.hero h1{font-size:clamp(47px,12vw,65px)}.hero .eyebrow{font-size:10px}.hana-bridge{padding:27px 23px 34px;margin-top:20px}.hana-visual{min-height:230px}.hana-poster{width:40%}.hana-bridge h2{font-size:clamp(36px,10vw,52px)}.hero-bottom{align-items:start}.intro-note strong{font-size:18px}}
@media(prefers-reduced-motion:reduce){.hana-poster,.hero *{transition:none!important}.hana-bridge:hover .hana-poster.first{transform:rotate(-12deg) translate(-44%,16px)}.hana-bridge:hover .hana-poster.second{transform:rotate(9deg) translate(49%,-9px)}}
@media print{.hero{min-height:0;color:#111}.hero:before,.hero:after,.hana-bridge:before{display:none}.hero .lede,.hero .eyebrow,.hero .chip,.hero .text-link{color:#111}.hana-bridge{color:#111;background:#fff;min-height:0}.hana-bridge p{color:#333}}