/* meet2.css — About me. Warm, personal, a scrapbook more than a CV. */
.mh { padding: calc(var(--bar-h) + var(--bar-gap) + clamp(40px, 6vw, 80px)) 0 clamp(70px, 9vw, 130px); background: linear-gradient(180deg, var(--paper), #fff); overflow: hidden; }
.mh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.mh-copy { display: grid; gap: 22px; }
.mh-title { font-family: var(--f-display); font-size: clamp(3.6rem, 1.6rem + 8vw, 9.5rem); line-height: .86; letter-spacing: -.03em; font-variation-settings: 'opsz' 96, 'wdth' 80, 'wght' 800; }
.mh-title em { font-style: normal; color: var(--live); }
.mh-lede { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); line-height: 1.45; max-width: 30ch; }
.mh-creds { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mh-creds li { display: flex; gap: 12px; align-items: baseline; color: var(--ink-2); }
.mh-creds b { min-width: 56px; font-family: var(--f-display); color: var(--ink); font-variation-settings: 'opsz' 24, 'wdth' 90, 'wght' 800; }
.mh-photos { position: relative; height: min(76vh, 700px); }
.mhp { position: absolute; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow-3); border: 8px solid #fff; }
.mhp-1 { width: 58%; aspect-ratio: 3/4; left: 22%; top: 0; transform: rotate(2deg); z-index: 2; }
.mhp-2 { width: 38%; aspect-ratio: 3/4.4; left: 0; top: 34%; transform: rotate(-6deg); z-index: 3; }
.mhp-3 { width: 34%; aspect-ratio: 3/4.4; right: 0; top: 46%; transform: rotate(5deg); z-index: 1; object-position: 50% 30%; }
.mh-note1 { left: 30%; top: -6%; color: var(--ink); }
.mh-note2 { right: -2%; top: 40%; color: var(--live); transform: rotate(6deg); }

.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); }
.story-sticky { position: sticky; top: calc(var(--bar-h) + 50px); aspect-ratio: 4/5; max-height: 72vh; border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-3); background: var(--paper-2); }
.sp2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .8s, transform 1.4s var(--ease-out); }
.sp2.is-on { opacity: 1; transform: none; }
.story-year { position: absolute; right: 18px; bottom: 12px; font-family: var(--f-display); font-size: 6rem; line-height: 1; color: #fff; letter-spacing: -.05em; font-variation-settings: 'opsz' 96, 'wdth' 80, 'wght' 800; text-shadow: 0 6px 30px rgba(0,0,0,.4); }
.story-chs { display: grid; gap: 0; }
.ch { min-height: 70vh; display: grid; align-content: center; gap: 14px; opacity: .35; transition: opacity .5s; }
.ch.is-on { opacity: 1; }
.ch-k { font-family: var(--f-hand); font-size: 1.8rem; color: var(--live); transform: rotate(-2deg); transform-origin: left; }
.ch p:last-child { font-size: 1.2rem; line-height: 1.6; color: var(--ink-2); max-width: 42ch; }
.ch .hl { display: block; margin-top: 10px; font-size: 1.4rem; color: var(--sound); }

.teach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tc { padding: 30px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line); display: grid; gap: 12px; align-content: start; }
.tc span { font-size: 2.2rem; }
.tc p { color: var(--ink-2); }

.fw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fwc { margin: 0; position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 1; background: var(--paper-2); cursor: default; }
.fwc img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform .8s var(--ease-out), filter .5s; filter: saturate(.9); }
.fwc figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 10px 14px; border-radius: 14px; background: #fff; font-family: var(--f-hand); font-size: 1.45rem; line-height: 1.05; transform: translateY(10px) rotate(-1.5deg); opacity: .96; box-shadow: var(--shadow-1); transition: transform .5s var(--ease-out); }
.fwc:hover img { transform: scale(1.22) rotate(-1.5deg); filter: none; }
.fwc:hover figcaption { transform: translateY(0) rotate(-3deg); }
.fwc::before { content: 'My face'; position: absolute; top: 12px; left: 12px; z-index: 1; padding: 3px 10px; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: .75rem; font-weight: 700; }

.things-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.things-copy { display: grid; gap: 22px; }
.things-score { font-size: 1.2rem; color: #C4C9D4; }
.things-score b { color: var(--pen); font-size: 1.6rem; font-family: var(--f-display); }
.things-deck { position: relative; min-height: 440px; }
.things-deck .knows { list-style: none; margin: 0; padding: 0; }
.js .things-deck .knows { position: relative; height: 440px; }
.js .things-deck .know { position: absolute; inset: 0; }
.things-deck .know { display: grid; gap: 10px; align-content: start; padding: 32px; border-radius: 30px; background: #fff; color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); transition: transform .7s var(--ease-out), opacity .5s; margin-bottom: 12px; }
.js .things-deck .know { transform: translateY(calc(var(--k) * 16px)) scale(calc(1 - var(--k) * .05)) rotate(calc(var(--k) * 1.5deg)); z-index: calc(30 - var(--k)); opacity: calc(1 - var(--k) * .25); }
.js .things-deck .know.gone { transform: translate(-130%, -30px) rotate(-16deg) !important; opacity: 0 !important; }
.js .things-deck .know.deep { opacity: 0; pointer-events: none; }
.know-ic { font-size: 3rem; }
.know-q { font-weight: 700; color: var(--ink-3); font-size: 1.05rem; }
.things-deck .know h3 { font-family: var(--f-display); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; letter-spacing: -.035em; font-variation-settings: 'opsz' 96, 'wdth' 86, 'wght' 800; }
.things-deck .know p:not(.know-q) { color: var(--ink-2); font-size: 1.08rem; line-height: 1.55; }
.things-deck .metoo { justify-self: start; margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 700; }
.things-deck .metoo::before { content: '♡'; font-size: 1.2rem; }
.things-deck .metoo.on { background: var(--live); color: #fff; box-shadow: none; }
.things-deck .metoo.on::before { content: '❤'; }
.things-n { position: absolute; right: 28px; top: 28px; font-weight: 800; color: var(--ink-3); font-size: .9rem; }

.fin2 { padding: clamp(80px, 10vw, 140px) 0; background: var(--paper); }
.fin2-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.fin2-grid > img { width: 100%; border-radius: 30px; box-shadow: var(--shadow-3); aspect-ratio: 4/5; object-fit: cover; }
.fin2-copy { display: grid; gap: 20px; }
.fin2-hand { font-size: 2rem; color: var(--live); transform: rotate(-2deg); transform-origin: left; }
.fin2-links { display: grid; gap: 10px; }
.fl { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; padding: 16px 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); transition: transform .4s var(--ease-out), box-shadow .3s; }
.fl:hover { color: var(--ink); transform: translateX(6px); box-shadow: 0 0 0 1.5px var(--ink); }
.fl > span:first-child { grid-row: span 2; width: 52px; height: 52px; border-radius: 14px; background: var(--paper-2); display: grid; place-items: center; font-size: 1.5rem; }
.fl b { font-family: var(--f-display); font-size: 1.3rem; font-variation-settings: 'opsz' 32, 'wdth' 92, 'wght' 760; }
.fl i { font-style: normal; color: var(--ink-3); }

@media (max-width: 900px) {
  .mh-grid, .story-grid, .things-grid, .fin2-grid { grid-template-columns: 1fr; }
  .mh-photos { height: 440px; order: -1; }
  .story-pics { display: none; }
  .ch { min-height: 0; opacity: 1; padding: 20px 0; }
  .teach-grid { grid-template-columns: 1fr; }
  .fw { grid-template-columns: 1fr 1fr; }
  .fin2-grid > img { max-height: 420px; }
}
@media (max-width: 480px) { .mh-photos { height: 360px; } .mh-note1 { display: none; } .fwc figcaption { font-size: 1.2rem; } .js .things-deck .knows { height: 500px; } }