@layer components{.term{position:relative;display:inline-block}.term__trigger{font:inherit;color:inherit;padding:0;border:0;background:none;cursor:help;border-bottom:1px dotted var(--accent);text-underline-offset:3px}.term__trigger:hover{border-bottom-style:solid}.term__trigger:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}.term__popover{position:absolute;bottom:calc(100% + 10px);left:50%;z-index:40;display:grid;gap:6px;width:max-content;max-width:min(360px,calc(100vw - 24px));padding:14px 16px;transform:translate(-50%,4px);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-2);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--transition-fast),transform var(--transition-fast),visibility var(--transition-fast)}.term__popover.is-open{opacity:1;visibility:visible;transform:translate(-50%);pointer-events:auto}@media (prefers-reduced-motion: reduce){.term__popover{transition:none}}.term__name{font-family:var(--font-display);font-size:var(--step--1);color:var(--text)}.term__def{font-size:var(--step--1);line-height:1.5;color:var(--text-2);white-space:normal}.term__more{justify-self:start;font-size:var(--step--1);font-weight:600;color:var(--accent)}@media (max-width: 640px){.term__popover{position:fixed;left:12px;right:12px;bottom:12px;width:auto;max-width:none;transform:none}.term__popover.is-open{transform:none}}@media print{.term__trigger{border-bottom:0}.term__popover{display:none}}}@layer components{.t22c{padding:var(--panel-pad);border:1px solid var(--border-strong);border-radius:var(--radius-lg);background:var(--surface)}.t22c__title{font-family:var(--font-display);font-size:var(--step-2);color:var(--text);margin:0 0 10px}.t22c__lede{margin:0 0 24px;color:var(--text-2);max-width:var(--reading-max)}.t22c__form{display:grid;gap:18px;max-width:520px;margin-bottom:8px}.t22c__field{display:grid;gap:6px}.t22c__field label{font-size:var(--step--1);font-weight:600;color:var(--text-2)}.t22c__field input[type=date]{padding:12px 14px;font:inherit;color:var(--text);background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color-scheme:light dark}.t22c__field input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.t22c__field--check{grid-template-columns:auto 1fr;align-items:start;gap:10px}.t22c__field--check input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent)}.t22c__field--check label{font-weight:400}.t22c__output:empty{display:none}.t22c__error{margin:20px 0 0;color:var(--hue-red);font-weight:600}.t22c__alert{margin:24px 0;padding:16px 18px;border:1px solid var(--hue-red);border-left-width:4px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--hue-red) 8%,transparent);color:var(--text);line-height:1.6}.t22c__timeline{list-style:none;margin:28px 0 0;padding:0 0 0 8px;display:grid;gap:28px}.t22c__timeline li{position:relative;display:grid;grid-template-columns:28px 1fr;align-items:start}.t22c__timeline li:not(:last-child):before{content:"";position:absolute;left:5px;top:18px;bottom:-28px;width:2px;background:var(--border-strong)}.t22c__dot{width:12px;height:12px;margin-top:5px;border-radius:50%;background:var(--border-strong)}.t22c__now .t22c__dot{background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}.t22c__milestone.is-critical .t22c__dot{background:var(--text)}.t22c__milestone.is-passed .t22c__dot{background:transparent;border:2px solid var(--border-strong)}.t22c__now .t22c__label{color:var(--accent);text-transform:uppercase;letter-spacing:.12em;font-size:var(--step--1)}.t22c__label{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-weight:700;color:var(--text)}.t22c__gap{font-weight:400;font-size:var(--step--1);color:var(--text-3)}.t22c__timeline time{display:block;margin-top:2px;font-size:var(--step--1);color:var(--text-2)}.t22c__detail{margin:8px 0 0;font-size:var(--step--1);line-height:1.6;color:var(--text-3);max-width:60ch}.t22c__milestone.is-passed .t22c__label,.t22c__milestone.is-passed time{color:var(--text-3)}.t22c__footnote{margin:32px 0 0;padding-top:20px;border-top:1px solid var(--border);font-size:var(--step--1);line-height:1.65;color:var(--text-3)}.t22c__footnote a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}@media print{.t22c__form{display:none}}}.t22c{position:relative;display:grid;grid-template-columns:minmax(250px,.72fr) minmax(360px,1.28fr);gap:clamp(34px,6vw,90px);padding:clamp(38px,6vw,78px);overflow:hidden;border:1px solid color-mix(in srgb,#aa7b2f 44%,var(--border));border-radius:2px 18px 18px 2px;background:linear-gradient(90deg,transparent 49.7%,color-mix(in srgb,#6e4721 15%,transparent) 50%,transparent 50.3%),radial-gradient(ellipse at 50% 0%,color-mix(in srgb,#aa7b2f 10%,transparent),transparent 55%),color-mix(in srgb,var(--surface) 92%,#f3e6cf);box-shadow:0 30px 70px #3e23131f,inset 10px 0 18px #5632180a}.t22c:before{content:"";position:absolute;top:18px;right:18px;bottom:18px;left:18px;pointer-events:none;border:1px solid color-mix(in srgb,#aa7b2f 20%,transparent)}.t22c__intro,.t22c__form{position:relative;z-index:1;grid-column:1}.t22c__intro{align-self:end}.t22c__title{font-size:clamp(1.8rem,3vw,3rem);color:var(--t22-ink, var(--text))}.t22c__lede{line-height:1.72}.t22c__form{max-width:none;margin:0;align-self:start}.t22c__field input[type=date]{background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,#aa7b2f 48%,var(--border));border-radius:0}.t22c__output{position:relative;z-index:1;grid-column:2;grid-row:1 / span 2;align-self:center}.t22c__output:empty{display:grid;min-height:310px;place-items:center}.t22c__output:empty:after{content:"Enter a date of birth to open the timeline";max-width:18ch;text-align:center;color:var(--text-3);font:italic clamp(1.3rem,2.2vw,2rem)/1.35 var(--font-display)}.t22c__timeline{margin:0;gap:34px}.t22c__timeline li{grid-template-columns:42px 1fr}.t22c__timeline li:not(:last-child):before{left:10px;width:1px;bottom:-34px;background:linear-gradient(#aa7b2f,color-mix(in srgb,#aa7b2f 25%,transparent))}.t22c__dot{width:21px;height:21px;margin-top:2px;border:1px solid #aa7b2f;background:color-mix(in srgb,var(--surface) 85%,#f3e6cf);box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--surface) 85%,#f3e6cf)}.t22c__now .t22c__dot,.t22c__milestone.is-critical .t22c__dot{background:#85384a;border-color:#aa7b2f;box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--surface) 85%,#f3e6cf),0 0 0 3px color-mix(in srgb,#aa7b2f 18%,transparent)}.t22c__label{font-family:var(--font-display);font-size:var(--text-ui)}.t22c__timeline time{color:var(--t22-wine, var(--accent));font-weight:700;letter-spacing:.02em}.t22c__footnote{grid-column:1 / -1}@media (max-width: 820px){.t22c{grid-template-columns:1fr;background:color-mix(in srgb,var(--surface) 92%,#f3e6cf)}.t22c__intro,.t22c__form,.t22c__output{grid-column:1;grid-row:auto}.t22c__output{margin-top:24px}}@layer pages{.t22-cinema{width:min(100%,1160px);margin-inline:auto}.t22-cinema .an-chapter[data-chapter="1"]{--chapter: var(--hue-purple)}.t22-cinema .an-chapter[data-chapter="2"]{--chapter: var(--accent)}.t22-cinema .an-chapter[data-chapter="3"]{--chapter: var(--hue-blue)}.t22-cinema .an-chapter[data-chapter="4"]{--chapter: var(--accent-3)}.t22-cinema .an-chapter[data-chapter="5"]{--chapter: var(--hue-orange)}.t22-cinema .an-chapter[data-chapter="6"]{--chapter: var(--hue-green)}.t22-cinema .section-eyebrow{display:inline-flex;align-items:center;gap:9px;width:fit-content;margin:0;padding:7px 15px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:color-mix(in srgb,var(--surface) 52%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--font-display);font-size:var(--text-caption);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--chapter, var(--accent))}.t22-cinema .section-eyebrow .in-flex{color:var(--chapter, var(--accent))}.t22-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.78fr);align-items:center;gap:clamp(28px,5vw,72px);min-height:clamp(56vh,68vh,80vh);padding-block:clamp(40px,7vh,96px)}.t22-hero__copy{display:grid;gap:16px;justify-items:start}.t22-title{margin:0;font-size:clamp(2.2rem,4.8vw,4.4rem);line-height:1.04;letter-spacing:-.025em;background:var(--heading-gradient);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradient-shift 9s ease infinite}.t22-subtitle{margin:0;font-size:clamp(1.1rem,1.6vw,1.4rem);color:var(--text);font-weight:600}.t22-intro{margin:0;max-width:60ch;color:var(--text-2);line-height:1.72}.t22-hero__visual{width:100%;max-width:380px;justify-self:center;will-change:transform}.t22-spine-wrap{position:relative;display:grid;gap:clamp(40px,7vw,92px);padding-left:clamp(22px,4vw,56px)}.t22-spine{position:absolute;left:clamp(4px,1.2vw,16px);top:12px;bottom:40px;width:2px;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--border-strong) 70%,transparent)}.t22-spine__fill{display:block;width:100%;height:100%;transform-origin:top center;background:var(--cta-gradient);box-shadow:0 0 16px var(--accent-glow)}.t22-chapter{scroll-margin-top:90px}.t22-chapter__head{display:grid;gap:12px;margin-bottom:20px}.t22-chapter__head h2{margin:0;font-size:clamp(1.6rem,3.2vw,2.8rem);line-height:1.1;letter-spacing:-.02em;color:var(--text)}.t22-points{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:13px;max-width:76ch}.t22-points li{position:relative;padding-left:26px;color:var(--text-2);line-height:1.7}.t22-points li:before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:50%;background:var(--chapter, var(--accent));box-shadow:0 0 12px color-mix(in srgb,var(--chapter, var(--accent)) 55%,transparent)}.t22-points li strong{color:var(--text)}.t22-points li em{color:var(--text);font-style:italic}.t22-sub{margin-top:24px;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--chapter, var(--accent)) 22%,var(--border))}.t22-sub h4{margin:0 0 12px;font-family:var(--font-display);font-size:var(--step-1);color:var(--text)}.t22-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:76ch}.t22-steps li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;color:var(--text-2);line-height:1.6}.t22-steps li strong{color:var(--text)}.t22-step__num{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid color-mix(in srgb,var(--chapter, var(--accent)) 45%,var(--border));background:color-mix(in srgb,var(--chapter, var(--accent)) 12%,transparent);color:var(--chapter, var(--accent));font-family:var(--font-display);font-weight:800;font-size:var(--text-ui)}.t22-links{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px;max-width:76ch}.t22-links li{position:relative;padding-left:22px;line-height:1.5}.t22-links li:before{content:"↗";position:absolute;left:0;top:.05em;color:var(--chapter, var(--accent))}.t22-links a{color:var(--text-2);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--chapter, var(--accent)) 40%,transparent);transition:color .2s ease,border-color .2s ease}.t22-links a:hover,.t22-links a:focus-visible{color:var(--chapter, var(--accent));border-bottom-color:var(--chapter, var(--accent))}.t22-tip{margin:0;padding-left:16px;border-left:3px solid var(--chapter, var(--accent));color:var(--text-2);line-height:1.6;max-width:70ch}@media (max-width: 900px){.t22-hero{grid-template-columns:1fr;min-height:auto}.t22-hero__visual{max-width:320px;order:-1;justify-self:start}}@media (max-width: 640px){.t22-spine-wrap{padding-left:14px}.t22-spine{display:none}}}.t22-cinema{--t22-ink: #422229;--t22-wine: #85384a;--t22-gold: #aa7b2f;--t22-paper: #f6efe3;position:relative;width:100vw;max-width:none;margin-inline:calc(50% - 50vw);overflow:clip;color:var(--text);background:radial-gradient(circle at 18% 18%,color-mix(in srgb,var(--t22-gold) 8%,transparent),transparent 28rem),linear-gradient(90deg,transparent 0 7%,color-mix(in srgb,var(--t22-wine) 7%,transparent) 7% 7.08%,transparent 7.08% 93%,color-mix(in srgb,var(--t22-wine) 7%,transparent) 93% 93.08%,transparent 93.08%),var(--bg)}#main.content:has(.t22-cinema),#main.content:has(.t22-cinema)>.route-transition{width:100%;max-width:none;padding-inline:0}.t22-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.82fr) minmax(280px,.38fr);align-items:end;min-height:clamp(600px,78vh,850px);padding:clamp(100px,15vh,160px) max(7vw,calc((100vw - 1480px)/2)) clamp(70px,10vh,110px);background:linear-gradient(90deg,color-mix(in srgb,var(--t22-paper) 96%,transparent) 0,color-mix(in srgb,var(--t22-paper) 96%,transparent) 40%,color-mix(in srgb,var(--t22-paper) 76%,transparent) 58%,color-mix(in srgb,#29180f 18%,transparent)),linear-gradient(0deg,color-mix(in srgb,var(--t22-paper) 88%,transparent),transparent 42%),url(/turning22-archive.png) center / cover no-repeat}.t22-hero:after{content:"";position:absolute;inset:auto 0 0;height:9px;z-index:-1;background:linear-gradient(90deg,var(--t22-wine),var(--t22-gold),var(--t22-wine));opacity:.78}.t22-hero__copy{max-width:780px}.t22-title{color:var(--t22-ink);background:none;animation:none;font-size:clamp(3rem,6.2vw,6.8rem);line-height:.93;text-wrap:balance}.t22-subtitle{color:var(--t22-wine);font-family:var(--font-display);font-style:italic}.t22-intro{color:color-mix(in srgb,var(--t22-ink) 82%,transparent)}.t22-hero__visual{align-self:center;max-width:310px;opacity:.72;filter:sepia(.45) saturate(.72)}.t22-spine-wrap{width:min(100%,1480px);margin-inline:auto;padding:clamp(70px,9vw,130px) clamp(24px,6vw,88px) clamp(90px,11vw,160px);gap:0}.t22-spine{left:clamp(31px,6.5vw,96px);top:110px;bottom:150px}.t22-chapter:not(.t22-hero){position:relative;padding:clamp(60px,8vw,118px) 0;border-bottom:1px solid color-mix(in srgb,var(--t22-wine) 18%,var(--border))}.t22-chapter:not(.t22-hero):after{content:attr(data-chapter);position:absolute;top:clamp(35px,5vw,70px);right:0;z-index:-1;font:400 clamp(7rem,15vw,14rem)/1 var(--font-display);color:color-mix(in srgb,var(--t22-wine) 5%,transparent)}.t22-chapter__head{max-width:930px}.t22-chapter__head h2{font-size:clamp(2.3rem,4.5vw,4.8rem);color:var(--t22-ink)}.t22-points{max-width:1050px;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px clamp(32px,5vw,76px)}.t22-points li{padding:0 0 20px 25px;border-bottom:1px solid color-mix(in srgb,var(--t22-gold) 22%,transparent)}.t22-points li:before{border-radius:0;width:8px;height:8px;transform:rotate(45deg);box-shadow:none;background:var(--t22-gold)}.t22-sub{max-width:1050px}.t22-sub .t22-points{grid-template-columns:repeat(2,minmax(0,1fr))}.t22-steps{max-width:1100px;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 64px}.t22-steps li{align-items:start;padding-bottom:24px;border-bottom:1px solid color-mix(in srgb,var(--t22-gold) 25%,transparent)}.t22-step__num{border-color:var(--t22-gold);color:var(--t22-wine);background:transparent;font-size:1.2rem}.t22-links{max-width:1120px;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 60px}.t22-links li{padding-block:16px;border-bottom:1px solid color-mix(in srgb,var(--t22-gold) 24%,transparent)}.t22-tip{max-width:900px;margin-top:28px}#turning22-calculator{margin-inline:clamp(-18px,-2vw,-36px);padding-inline:clamp(18px,4vw,60px)}#turning22-calculator:before{content:"PLANNING VOLUME  /  22";display:block;margin-bottom:24px;color:var(--t22-gold);font-family:var(--font-display);font-size:var(--text-caption);font-weight:700;line-height:1.2;letter-spacing:.24em}#turning22-calculator .t22-h2{color:var(--t22-wine)}[data-theme=dark] .t22-cinema{--t22-ink: #f1e7d7;--t22-wine: #e597a8;--t22-gold: #d7b46a}[data-theme=dark] .t22-hero{background:linear-gradient(90deg,#030a12f5 0,#030a12f5 40%,#030a12b8 60%,#030a127a),linear-gradient(0deg,rgba(3,10,18,.92),transparent 45%),url(/turning22-archive.png) center / cover no-repeat}[data-theme=dark] .t22-intro{color:var(--text-2)}@media (max-width: 900px){.t22-hero{grid-template-columns:1fr;align-items:end}.t22-hero__visual{display:none}.t22-points,.t22-sub .t22-points,.t22-steps,.t22-links{grid-template-columns:1fr}}@media (max-width: 640px){.t22-hero{min-height:680px;padding-inline:24px;background-position:58% center}.t22-spine-wrap{padding-inline:24px}}
