/* Kael Capital — kaelcapital.com Obsidian / champagne. Editorial restraint. */ :root{ --void:#0a0a0b; --void_2:#0e0e10; --bone:#eae4d6; --mist:#a49d8e; --champ:#e6d3ae; --champ_2:#c7b083; --line:rgba(230,211,174,.13); --line_hi:rgba(230,211,174,.42); --err:#d9a48d; --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter Tight',-apple-system,Helvetica,Arial,sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{color-scheme:dark;scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background: radial-gradient(120% 70% at 80% -10%, rgba(230,211,174,.05), transparent 55%), linear-gradient(#0b0b0d, #08080a); background-color:var(--void); color:var(--bone); font:300 1.02rem/1.75 var(--sans); overflow-x:clip; -webkit-font-smoothing:antialiased; } /* film grain over everything — kills the flat-pixel look */ body::after{ content:"";position:fixed;inset:0;z-index:80;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E"); opacity:.055;mix-blend-mode:overlay; } ::selection{background:rgba(230,211,174,.22);color:var(--bone)} img,svg,canvas{display:block;max-width:100%} a{color:inherit} h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;letter-spacing:.01em} h1{font-size:clamp(2.7rem,6.4vw,5.5rem)} h2{font-size:clamp(1.95rem,3.8vw,3.1rem);text-wrap:balance} em{font-style:italic} .rail{width:min(1060px,calc(100% - 3rem));margin-inline:auto} .measure{max-width:640px} /* ---------- reveal choreography ---------- Every hidden start state is scoped to .kl-motion, which kael.js sets on only when IntersectionObserver exists AND reduced motion is not requested. With JS off, JS broken, or motion reduced, nothing here applies and the page renders fully composed. Invisible content is an outage. */ .kl-motion [data-fx]{opacity:0;transform:translateY(26px); transition:opacity 1.15s cubic-bezier(.22,1,.36,1),transform 1.15s cubic-bezier(.22,1,.36,1),letter-spacing 1.6s cubic-bezier(.22,1,.36,1)} .kl-motion [data-fx].is_in{opacity:1;transform:none} .kl-motion [data-lag="1"]{transition-delay:.14s} .kl-motion [data-lag="2"]{transition-delay:.3s} .kl-motion [data-lag="3"]{transition-delay:.48s} .kl-motion [data-lag="4"]{transition-delay:.66s} .kl-motion .trace{letter-spacing:.06em} .kl-motion .trace.is_in{letter-spacing:0} /* ---------- header ---------- */ .crown{ position:absolute;inset:0 0 auto 0;z-index:6; border-bottom:1px solid rgba(230,211,174,.09); } .crown_in{ width:min(1240px,calc(100% - 3rem));margin-inline:auto; display:flex;align-items:center;justify-content:space-between; padding:1.5rem 0; } .sigil{display:flex;align-items:center;gap:.95rem;text-decoration:none;color:var(--champ)} .sigil svg{width:34px;height:34px} .word_mark{font:400 .72rem/1 var(--sans);letter-spacing:.44em;text-transform:uppercase;color:var(--bone);transform:translateX(.02em)} .crown_nav{display:flex;align-items:center;gap:2.6rem} .crown_nav a{ font:400 .66rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase; color:var(--mist);text-decoration:none;transition:color .4s; } .crown_nav a:hover{color:var(--champ)} .crown_nav a.crown_act{ color:var(--champ);border:1px solid var(--line_hi); padding:.85rem 1.5rem;transition:border-color .4s,background .4s; } .crown_nav a.crown_act:hover{border-color:var(--champ);background:rgba(230,211,174,.06)} .crown_page{position:static;border-bottom:1px solid var(--line)} /* ---------- hero ---------- */ .threshold{ position:relative;min-height:100vh;min-height:100svh; display:flex;align-items:center; overflow:hidden;background:var(--void); } #monolith{position:absolute;inset:0;width:100%;height:100%;z-index:0} /* No-WebGL fallback: a CSS-drawn slab under a single raking highlight, so the fold still composes as the House of Kael even with the canvas removed. */ .kl-nogl .threshold::before{ content:"";position:absolute;z-index:0;pointer-events:none; right:17%;top:12%;width:clamp(88px,12vw,168px);height:72%; background:linear-gradient(97deg, #08080a 0%, #1b1a17 22%, #3a3427 48%, #211f1a 70%, #0a0a0c 100%); box-shadow:0 46px 130px 24px rgba(0,0,0,.82), 0 0 200px 60px rgba(230,211,174,.06); } @media (max-width:899px){ .kl-nogl .threshold::before{right:auto;left:50%;translate:-50% 0;top:8%;height:44%} } /* cinematic vignette + left legibility scrim over the canvas */ .threshold_shade{ position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(100deg, rgba(8,8,10,.82) 0%, rgba(8,8,10,.45) 30%, rgba(8,8,10,0) 52%), radial-gradient(130% 90% at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,.5) 100%), linear-gradient(rgba(8,8,10,.55), rgba(8,8,10,0) 22%, rgba(8,8,10,0) 72%, rgba(8,8,10,.6)); } .veil{ position:relative;z-index:2;text-align:left; width:min(1240px,calc(100% - 3rem)); margin-inline:auto; padding:7.5rem 0 3rem; } .veil_eyebrow{ display:flex;align-items:center;gap:1.1rem; /* line-height 1.5, not 1: at phone widths this eyebrow wraps to two lines and unit leading collided them. Single-line desktop layout is unchanged because the flex row centres on the cross axis either way. */ font:400 .64rem/1.5 var(--sans);letter-spacing:.42em;text-transform:uppercase; color:var(--champ_2);margin-bottom:2.6rem; } .veil_eyebrow::before{content:"";width:52px;height:1px;background:var(--line_hi)} .veil h1{ color:var(--bone); font-size:clamp(3.4rem,7.5vw,6.5rem); line-height:1.02;letter-spacing:0; max-width:9.5em; text-wrap:balance; } .veil h1 em{ font-style:italic; background:linear-gradient(115deg,#f4e9cf 10%,var(--champ) 45%,#9e8a5e 90%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:var(--champ); } .veil_sub{ color:var(--mist);max-width:44ch;margin:2.3rem 0 0; font-size:clamp(1rem,1.4vw,1.12rem); } .veil_cta{display:flex;gap:1.1rem;justify-content:flex-start;flex-wrap:wrap;margin-top:3rem} .veil_note{ margin-top:2.6rem;font:400 .62rem/1.8 var(--sans); letter-spacing:.26em;text-transform:uppercase;color:rgba(164,157,142,.85); } .plumb{ position:absolute;bottom:0;left:50%;z-index:3; width:1px;height:74px;background:linear-gradient(rgba(230,211,174,0),rgba(230,211,174,.5)); animation:plumb_breathe 9s cubic-bezier(.45,0,.55,1) infinite; } @keyframes plumb_breathe{0%,100%{opacity:.3}50%{opacity:.8}} /* ---------- buttons ---------- */ .act{ display:inline-block;text-decoration:none;cursor:pointer; font:400 .68rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase; padding:1.3rem 2.5rem;border:1px solid transparent; transition:background .45s,border-color .45s,color .45s; } .act_fill{background:var(--champ);color:#171510} .act_fill:hover{background:#f2e4c5} .act_line{border-color:var(--line_hi);color:var(--champ);background:transparent} .act_line:hover{border-color:var(--champ);background:rgba(230,211,174,.055)} a:focus-visible,button:focus-visible,summary:focus-visible{outline:1px solid var(--champ);outline-offset:4px} /* ---------- sections ---------- */ .chapter{position:relative;padding:clamp(6.5rem,15vw,12.5rem) 0;overflow:hidden} .chapter + .chapter{border-top:1px solid var(--line)} .chapter .rail{position:relative;z-index:2} /* atmosphere: every chapter gets a light field, alternating corners */ .chapter::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(52% 46% at 88% -6%, rgba(230,211,174,.075), transparent 68%), radial-gradient(44% 40% at -4% 106%, rgba(230,211,174,.04), transparent 70%), linear-gradient(rgba(255,255,255,.012), rgba(0,0,0,.16)); } .chapter:nth-of-type(odd)::before{ background: radial-gradient(52% 46% at -6% -6%, rgba(230,211,174,.07), transparent 68%), radial-gradient(44% 40% at 104% 104%, rgba(230,211,174,.04), transparent 70%), linear-gradient(rgba(255,255,255,.012), rgba(0,0,0,.16)); } /* ghost chapter numeral */ .chapter[data-no]::after{ content:attr(data-no);position:absolute;z-index:1;pointer-events:none; top:clamp(1rem,4vw,2.5rem);right:-1.5rem; font:300 clamp(11rem,26vw,22rem)/0.8 var(--serif);font-style:italic; color:transparent;-webkit-text-stroke:1px rgba(230,211,174,.085); letter-spacing:-.04em; } .chapter:nth-of-type(odd)[data-no]::after{right:auto;left:-1.5rem} .no_tag{ display:flex;align-items:center;gap:1.15rem;margin-bottom:clamp(2.6rem,5vw,4.2rem); font:400 .66rem/1 var(--sans);letter-spacing:.4em;text-transform:uppercase; } .no_tag::before{content:"";width:46px;height:1px;background:var(--line_hi)} .no_tag b{font-weight:400;color:var(--champ)} .no_tag span{color:var(--mist)} /* manifesto */ .manifesto p{ font-family:var(--serif);font-weight:400; font-size:clamp(1.5rem,3.1vw,2.35rem);line-height:1.5; color:var(--bone);max-width:30em; } .manifesto p + p{margin-top:2.2rem} .manifesto .aside_line{ margin-top:3rem;font:400 .68rem/2 var(--sans); letter-spacing:.3em;text-transform:uppercase;color:var(--champ_2); } /* fact ledger strip */ .fact_line{ display:grid;grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line);margin-top:clamp(4rem,8vw,6.5rem); } .fact_cell{padding:2.3rem 1.7rem;border-left:1px solid var(--line)} .fact_cell:first-child{border-left:0;padding-left:0} .fact_k{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,1.85rem);color:var(--champ)} .fact_d{margin-top:.55rem;font:400 .6rem/1.7 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--mist)} /* ---------- product ledger ---------- */ .ledger{border-top:1px solid var(--line)} .entry{ position:relative; display:grid;align-items:baseline;text-decoration:none; grid-template-columns:3.4rem minmax(0,1fr) 10rem 8.5rem 1.8rem; gap:0 2rem;padding:2.7rem .9rem 2.7rem .4rem; border-bottom:1px solid var(--line); transition:background .5s,border-color .5s; } .entry:hover{background:rgba(230,211,174,.03);border-color:var(--line_hi)} .entry_no{font:400 .68rem/1 var(--sans);letter-spacing:.2em;color:var(--champ_2)} .entry_name{ font-family:var(--serif);font-size:clamp(1.35rem,2.5vw,1.85rem); color:var(--bone);display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap; } .desk_note{font:400 .54rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--champ_2);border:1px solid var(--line);padding:.4rem .6rem;transform:translateY(-.2em)} .entry_desc{grid-column:2;max-width:52ch;margin-top:.7rem;color:var(--mist);font-size:.94rem} .entry_sum,.entry_pace{font:300 .9rem/1.6 var(--sans);color:var(--mist);white-space:nowrap} .entry_sum b{display:block;font-weight:400;color:var(--bone)} .entry_pace b{display:block;font-weight:400;color:var(--bone)} .entry_go{ color:var(--champ);opacity:0;transform:translateX(-8px); transition:opacity .5s,transform .5s;font-size:1.05rem; } .entry:hover .entry_go{opacity:1;transform:none} .ledger_close{margin-top:2.4rem;font-size:.9rem;color:var(--mist)} .ledger_close a{color:var(--champ);text-decoration:none;border-bottom:1px solid var(--line_hi);transition:border-color .4s} .ledger_close a:hover{border-color:var(--champ)} /* ---------- process ---------- */ .rite{border-top:1px solid var(--line)} .rite_step{ display:grid;grid-template-columns:8.5rem minmax(0,1fr); gap:2rem;padding:3.4rem 0;border-bottom:1px solid var(--line); } .rite_no{ font-family:var(--serif);font-style:italic;font-weight:300; font-size:clamp(2.2rem,4vw,3.2rem);color:var(--champ_2);line-height:1; } .rite_step h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:.85rem} .rite_step p{color:var(--mist);max-width:58ch} /* ---------- who we serve ---------- */ .circle_note{color:var(--mist);max-width:60ch;margin-bottom:3.2rem} .circle{ display:grid;grid-template-columns:1fr 1fr;gap:0 4.5rem; list-style:none;border-top:1px solid var(--line); } .circle li{ display:flex;justify-content:space-between;align-items:baseline; padding:1.45rem .2rem;border-bottom:1px solid var(--line); font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.45rem);color:var(--bone); transition:color .4s,padding-left .5s; } .circle li:hover{color:var(--champ);padding-left:.8rem} .circle li i{font:400 .6rem/1 var(--sans);font-style:normal;letter-spacing:.2em;color:var(--champ_2)} /* ---------- faq ---------- */ .qa_stack{border-top:1px solid var(--line)} .qa{border-bottom:1px solid var(--line)} .qa summary{ display:flex;justify-content:space-between;align-items:baseline;gap:2rem; padding:2rem .2rem;cursor:pointer;list-style:none; font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--bone); transition:color .4s; } .qa summary:hover{color:var(--champ)} .qa summary::-webkit-details-marker{display:none} .qa summary::after{ content:"+";font:300 1.3rem/1 var(--sans);color:var(--champ_2); transition:transform .45s;flex:none; } .qa[open] summary::after{transform:rotate(45deg)} .qa div{padding:0 .2rem 2.2rem;max-width:62ch;color:var(--mist)} /* ---------- closing cta ---------- */ .summons{text-align:center} .summons::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(46% 60% at 50% 108%, rgba(230,211,174,.12), transparent 70%), radial-gradient(70% 55% at 50% -10%, rgba(230,211,174,.05), transparent 65%), linear-gradient(rgba(255,255,255,.012), rgba(0,0,0,.2)) !important; } .summons[data-no]::after{right:50%;transform:translateX(50%);left:auto !important} .summons h2{max-width:17em;margin-inline:auto} .summons p{color:var(--mist);max-width:46ch;margin:1.6rem auto 0} .summons_cta{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;margin-top:2.9rem} .summons_wire{ margin-top:2.6rem;font:400 .68rem/2.4 var(--sans); letter-spacing:.24em;text-transform:uppercase;color:var(--mist); } .summons_wire a{color:var(--champ);text-decoration:none;border-bottom:1px solid var(--line_hi)} .summons_wire a:hover{border-color:var(--champ)} /* ---------- photographic interludes — champagne/graphite duotone ---------- */ .strata{ position:relative;height:clamp(240px,44vh,520px);overflow:hidden; background:var(--void);border-block:1px solid var(--line); } .strata img{ width:100%;height:100%;object-fit:cover; filter:grayscale(1) sepia(.44) saturate(.9) brightness(.58) contrast(1.07); } .strata_dome img{object-position:50% 30%} .strata::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(115deg, rgba(230,211,174,.16), transparent 45%, rgba(230,211,174,.07)); mix-blend-mode:overlay; } .strata::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background: linear-gradient(rgba(10,10,11,.92), rgba(10,10,11,.14) 32%, rgba(10,10,11,.14) 68%, rgba(10,10,11,.92)), radial-gradient(120% 110% at 50% 50%, transparent 42%, rgba(10,10,11,.5) 100%); } /* closing section — monument behind the summons, heavily veiled */ .summons_field{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .summons_field img{ width:100%;height:100%;object-fit:cover; filter:grayscale(1) sepia(.46) saturate(.9) brightness(.34) contrast(1.08); opacity:.55; } .summons_field::after{ content:"";position:absolute;inset:0; background: linear-gradient(rgba(10,10,11,.94), rgba(10,10,11,.6) 38%, rgba(10,10,11,.68) 72%, rgba(10,10,11,.96)), radial-gradient(85% 70% at 50% 55%, rgba(10,10,11,.2), rgba(10,10,11,.72) 100%); } /* ---------- footer ---------- */ .plinth{ border-top:1px solid var(--line);padding:5rem 0 3rem; background: radial-gradient(60% 90% at 50% 0%, rgba(230,211,174,.045), transparent 60%), linear-gradient(#0e0e10, #070708); background-color:var(--void_2); } .plinth_cols{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:3.5rem 2.5rem} .plinth .sigil{margin-bottom:1.4rem} .plinth_tag{color:var(--mist);font-size:.92rem;max-width:34ch} .plinth_h{font:400 .62rem/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--champ_2);margin-bottom:1.5rem} .plinth_list{list-style:none} .plinth_list li{margin-bottom:.85rem} .plinth_list a{color:var(--mist);text-decoration:none;font-size:.92rem;transition:color .4s} .plinth_list a:hover{color:var(--champ)} .plinth_contact{list-style:none;color:var(--mist);font-size:.92rem} .plinth_contact li{margin-bottom:.85rem} .plinth_contact a{color:var(--mist);text-decoration:none;transition:color .4s} .plinth_contact a:hover{color:var(--champ)} .plinth_law{ margin-top:4rem;padding-top:2.2rem;border-top:1px solid var(--line); color:rgba(164,157,142,.8);font-size:.82rem;max-width:88ch;line-height:1.8; } .plinth_law b{color:var(--mist);font-weight:500} .plinth_base{ display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap; margin-top:2.4rem;color:rgba(164,157,142,.6);font-size:.78rem; } .plinth_base a{color:inherit;text-decoration:none} .plinth_base a:hover{color:var(--champ)} /* ---------- interior pages ---------- */ .folio{ position:relative;padding:clamp(5rem,10vw,8rem) 0 clamp(6rem,12vw,9rem); overflow:hidden; } .folio::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(56% 42% at 92% -8%, rgba(230,211,174,.08), transparent 66%), radial-gradient(40% 36% at -6% 60%, rgba(230,211,174,.04), transparent 70%); } .folio > .rail{position:relative;z-index:1} .folio_head{margin-bottom:clamp(3rem,6vw,4.5rem)} .folio_head p{color:var(--mist);max-width:56ch;margin-top:1.4rem} .prose h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin:3rem 0 1rem} .prose p,.prose li{color:var(--mist);max-width:66ch} .prose p + p{margin-top:1rem} .prose ul{margin:1rem 0 0 1.2rem} .prose .stamp{font:400 .64rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--champ_2)} /* ---------- forms ---------- */ .parchment{max-width:620px} .fld{margin-bottom:2rem} .fld label{ display:block;font:400 .62rem/1 var(--sans);letter-spacing:.3em; text-transform:uppercase;color:var(--mist);margin-bottom:.75rem; } .fld input,.fld select,.fld textarea{ width:100%;background:transparent;border:0;border-radius:0; border-bottom:1px solid var(--line_hi);color:var(--bone); font:300 1.05rem/1.5 var(--sans);padding:.75rem 0; transition:border-color .4s; } .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--champ)} .fld input::placeholder,.fld textarea::placeholder{color:rgba(164,157,142,.5)} .fld select{appearance:none;-webkit-appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23c7b083'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .2rem center; } .fld select option{background:#101013;color:var(--bone)} .fld textarea{min-height:7.5rem;resize:vertical} .duo{display:grid;grid-template-columns:1fr 1fr;gap:0 2.4rem} .f_err{display:none;color:var(--err);font-size:.85rem;margin-top:.55rem} .fld.is_wrong input,.fld.is_wrong select{border-bottom-color:var(--err)} .fld.is_wrong .f_err{display:block} .hp_field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .form_send{margin-top:1rem} .form_done{display:none;border:1px solid var(--line_hi);padding:3rem 2.4rem;text-align:center} .form_done h3{font-size:1.7rem;color:var(--champ);margin-bottom:.8rem} .form_done p{color:var(--mist)} .is_sent .parchment_form{display:none} .is_sent .form_done{display:block} /* apply aftermath steps */ .aftermath{margin-top:clamp(4.5rem,9vw,7rem);border-top:1px solid var(--line)} .aftermath_step{display:grid;grid-template-columns:5.5rem 1fr;gap:1.6rem;padding:2.2rem 0;border-bottom:1px solid var(--line)} .aftermath_no{font-family:var(--serif);font-style:italic;font-size:1.9rem;color:var(--champ_2);line-height:1} .aftermath_step h3{font-size:1.25rem;margin-bottom:.4rem} .aftermath_step p{color:var(--mist);font-size:.95rem;max-width:52ch} /* ---------- museum structure — vast space, single center column, footnote annotations. The silhouette of this house. ---------- */ .museum{text-align:center} .museum .no_tag{justify-content:center} .museum .no_tag::after{content:"";width:46px;height:1px;background:var(--line_hi)} .museum h2{max-width:15em;margin-inline:auto} .museum[data-no]::after{right:50% !important;left:auto !important;transform:translateX(50%)} .museum_lead{color:var(--mist);max-width:52ch;margin:1.6rem auto 0} .fn{ font:400 .58em/1 var(--sans);font-style:normal;color:var(--champ); vertical-align:super;letter-spacing:.08em;margin-left:.18em; } .gallery{max-width:540px;margin:clamp(3.2rem,7vw,5.2rem) auto 0} .plaque{padding:0} .plaque + .plaque::before{ content:"";display:block;width:1px;height:clamp(44px,7vh,68px); margin:clamp(2.2rem,4.5vw,3.2rem) auto; background:linear-gradient(rgba(230,211,174,0),rgba(230,211,174,.38),rgba(230,211,174,0)); } .plaque_no{ display:block;font-family:var(--serif);font-style:italic;font-weight:300; font-size:1.7rem;color:var(--champ_2);margin-bottom:1rem;line-height:1; } .plaque h3{font-size:clamp(1.45rem,2.5vw,1.9rem);margin-bottom:.7rem} .plaque p{color:var(--mist);max-width:44ch;margin-inline:auto} .plaque .lci{margin:0 auto 1.1rem;width:22px;height:22px;color:var(--champ_2)} .exhibit{ list-style:none;max-width:480px;margin:clamp(3.2rem,7vw,5rem) auto 0; border-top:1px solid var(--line); } .exhibit li{ display:flex;align-items:center;justify-content:center;gap:1rem; padding:1.55rem .2rem;border-bottom:1px solid var(--line); font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.5rem);color:var(--bone); transition:color .4s,letter-spacing .5s; } .exhibit li:hover{color:var(--champ);letter-spacing:.02em} .exhibit li i{display:flex;color:var(--champ_2)} .exhibit li i .lci{margin:0;width:18px;height:18px} .footnotes{ max-width:480px;margin:clamp(3.4rem,7vw,5rem) auto 0; text-align:left;position:relative;padding-top:2.1rem; } .footnotes::before{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:120px;height:1px;background:var(--line_hi); } .footnotes p{ color:rgba(164,157,142,.85);font-size:.83rem;line-height:1.75; } .footnotes p + p{margin-top:.75rem} .footnotes sup{ font:400 .72em/1 var(--sans);color:var(--champ);margin-right:.55em;letter-spacing:.08em; } /* ---------- the application desk (apply.html) ---------- */ .desk{max-width:640px;margin-inline:auto} .desk_meter{margin-bottom:clamp(2.6rem,5vw,3.6rem)} .desk_meter_row{ display:flex;justify-content:space-between;align-items:baseline; font:400 .64rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase; color:var(--champ_2);margin-bottom:1rem; } .meter_track{height:1px;background:var(--line);position:relative} #meter_bar{ position:absolute;inset:0 auto 0 0;height:1px;background:var(--champ); transition:width .7s cubic-bezier(.22,1,.36,1); } .step{display:none} .step.is_on{display:block;animation:step_in .7s cubic-bezier(.22,1,.36,1)} @keyframes step_in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .step h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:.9rem;outline:none} .step_note{color:var(--mist);font-size:.95rem;max-width:52ch;margin-bottom:2.6rem} .fld small.opt{text-transform:none;letter-spacing:.05em;color:rgba(164,157,142,.7)} .hint{color:rgba(164,157,142,.6);font-size:.8rem;margin-top:.5rem} input[type="date"]{color-scheme:dark} .seg{display:flex;gap:.7rem;flex-wrap:wrap} .seg label{ display:block;cursor:pointer; } .seg input{position:absolute;opacity:0;width:1px;height:1px} .seg span{ display:inline-block;min-width:5.4rem;text-align:center; font:400 .66rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase; color:var(--mist);border:1px solid var(--line_hi);padding:1rem 1.4rem; transition:color .35s,border-color .35s,background .35s; } .seg input:checked + span{color:#171510;background:var(--champ);border-color:var(--champ)} .seg input:focus-visible + span{outline:1px solid var(--champ);outline-offset:3px} .fld.is_wrong .seg span{border-color:var(--err)} .check_line{display:flex;align-items:center;gap:.8rem;margin-top:1rem;cursor:pointer;color:var(--mist);font-size:.9rem} .check_line input{width:15px;height:15px;accent-color:#c7b083;flex:none} .f_err.is_shown{display:block} .dz{ border:1px dashed var(--line_hi);padding:2.3rem 1.6rem;text-align:center; cursor:pointer;transition:border-color .35s,background .35s; } .dz:hover,.dz.is_over{border-color:var(--champ);background:rgba(230,211,174,.04)} .dz p{color:var(--bone);font-size:.95rem} .dz p b{color:var(--champ);font-weight:400;border-bottom:1px solid var(--line_hi)} .dz small{display:block;margin-top:.6rem;font:400 .6rem/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--mist)} .chips{list-style:none;margin-top:.9rem} .chips li{ display:flex;align-items:center;gap:1rem; border:1px solid var(--line);padding:.75rem 1rem;margin-bottom:.5rem; font-size:.88rem; } .chip_name{color:var(--bone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1} .chip_meta{color:var(--mist);font-size:.78rem;flex:none} .chip_x{ flex:none;background:none;border:1px solid var(--line_hi);color:var(--mist); width:26px;height:26px;line-height:1;cursor:pointer;font-size:1rem; transition:color .3s,border-color .3s; } .chip_x:hover{color:var(--err);border-color:var(--err)} .dossier{ display:grid;grid-template-columns:auto 1fr;gap:.85rem 2rem; border:1px solid var(--line);padding:2rem 1.8rem;margin-bottom:2.4rem; } .dossier dt{font:400 .6rem/2 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--mist)} .dossier dd{color:var(--bone);font-size:.95rem;overflow-wrap:anywhere} .consent_line{color:var(--mist);font-size:.88rem;max-width:52ch;margin-bottom:1.8rem} .sig_wrap{border:1px solid var(--line_hi);position:relative;background:rgba(255,255,255,.015)} .sig_wrap::after{ content:"";position:absolute;left:1.4rem;right:1.4rem;bottom:2.4rem;height:1px; background:var(--line);pointer-events:none; } #sig_pad{width:100%;height:180px;touch-action:none;cursor:crosshair} .fld.is_wrong .sig_wrap{border-color:var(--err)} .sig_row{display:flex;justify-content:space-between;align-items:center;margin-top:.7rem} .sig_row small{color:rgba(164,157,142,.7);font-size:.78rem} .sig_clear{ background:none;border:0;border-bottom:1px solid var(--line_hi);cursor:pointer; font:400 .62rem/1.6 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--mist); transition:color .3s,border-color .3s;padding:0; } .sig_clear:hover{color:var(--champ);border-color:var(--champ)} .step_nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:3rem} .step_nav .act{border:1px solid transparent} .act_ghost{ background:none;border:0;cursor:pointer; font:400 .66rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase; color:var(--mist);padding:1.3rem 0;transition:color .35s; } .act_ghost:hover{color:var(--champ)} .act[disabled]{opacity:.55;cursor:default} .send_err{display:none;color:var(--err);font-size:.9rem;margin-top:1.2rem} .send_err.is_shown{display:block} .laurel{display:none;border:1px solid var(--line_hi);padding:3.6rem 2.6rem;text-align:center} .laurel svg{width:44px;height:44px;margin:0 auto 1.6rem;color:var(--champ)} .laurel h3{font-size:1.8rem;color:var(--champ);margin-bottom:.9rem;outline:none} .laurel p{color:var(--mist);max-width:44ch;margin-inline:auto} .desk.is_done .parchment_form,.desk.is_done .desk_meter{display:none} .desk.is_done .laurel{display:block} /* 404 */ .lost{ position:relative;min-height:100vh;min-height:100svh; display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem; background: radial-gradient(60% 50% at 50% 6%, rgba(230,211,174,.09), transparent 65%), radial-gradient(120% 90% at 50% 50%, transparent 50%, rgba(0,0,0,.5) 100%); } .lost_no{font-family:var(--serif);font-weight:300;font-size:clamp(6rem,18vw,11rem);color:var(--champ);line-height:1} .lost p{color:var(--mist);margin:1.4rem 0 2.6rem} .lost_cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap} /* ---------- lucide icons — monumental minimal, 1.5 stroke ---------- */ .lci{display:block;flex:none;width:20px;height:20px;stroke-width:1.5;margin:0 0 .95rem} .circle li i .lci{margin:0} /* ---------- responsive ---------- */ @media (max-width:1023px){ .plinth_cols{grid-template-columns:1fr 1fr} .entry{grid-template-columns:2.4rem minmax(0,1fr) 1.8rem;gap:0 1.2rem} .entry_sum,.entry_pace{grid-column:2;white-space:normal;margin-top:.6rem} .entry_sum b,.entry_pace b{display:inline;margin-right:.5rem} .entry_desc{max-width:none} } @media (max-width:899px){ .threshold{align-items:flex-end} .veil{padding:8.5rem 0 5.5rem} .veil_eyebrow{margin-bottom:1.8rem} .veil_sub{max-width:38ch} .threshold_shade{ background: linear-gradient(rgba(8,8,10,.6), rgba(8,8,10,0) 20%, rgba(8,8,10,0) 38%, rgba(8,8,10,.78) 72%, rgba(8,8,10,.88)), radial-gradient(140% 90% at 50% 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%); } } @media (max-width:767px){ .crown_nav a:not(.crown_act){display:none} .chapter[data-no]::after{font-size:9.5rem;right:-.8rem;top:.6rem} .chapter:nth-of-type(odd)[data-no]::after{left:-.8rem} .fact_line{grid-template-columns:1fr 1fr} .fact_cell{padding:1.6rem 1.2rem} .fact_cell:nth-child(3){border-left:0;padding-left:0} .fact_cell:nth-child(n+3){border-top:1px solid var(--line)} .circle{grid-template-columns:1fr} .rite_step{grid-template-columns:1fr;gap:.9rem;padding:2.6rem 0} .duo{grid-template-columns:1fr} .plinth_cols{grid-template-columns:1fr;gap:2.6rem} .aftermath_step{grid-template-columns:3.4rem 1fr} } /* ============ motion layer — the house of Kael ============ The hero's single idea, repeated at page scale: nothing flies in, nothing bounces, nothing tilts. Things are LIT. Type resolves out of defocus, hairlines are drawn, apertures open, and surfaces catch the light where the cursor falls. Every start state below is scoped to .kl-motion (see the reveal choreography block above for why). */ /* --- type resolves out of defocus, word by word --- */ .kl-motion [data-fx].kl-split{opacity:1;transform:none;transition:none} .kl-motion .kl-split .klW{ display:inline-block;opacity:0;filter:blur(9px);transform:translateY(.16em); transition:opacity .95s cubic-bezier(.22,1,.36,1), filter 1.05s cubic-bezier(.22,1,.36,1), transform 1.05s cubic-bezier(.22,1,.36,1); } .kl-motion .kl-split.is_in .klW{opacity:1;filter:blur(0);transform:none} /* --- hairline rules are drawn, not faded --- */ .kl-motion .no_tag::before, .kl-motion .museum .no_tag::after{ transform:scaleX(0);transform-origin:left center; transition:transform 1.05s cubic-bezier(.22,1,.36,1) .12s; } .kl-motion .museum .no_tag::after{transform-origin:right center} .kl-motion .no_tag.is_in::before, .kl-motion .museum .no_tag.is_in::after{transform:scaleX(1)} /* --- pieces arrive one at a time, not as a slab --- */ .kl-motion [data-fx].kl-pass{opacity:1;transform:none;transition:none} .kl-motion .kl-r{ opacity:0;transform:translateY(18px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1), background .5s,border-color .5s,color .4s,letter-spacing .5s; } .kl-motion .kl-r.kl-in{opacity:1;transform:none} /* the lit edge each ledger entry gains as it is placed on the wall */ .kl-motion .entry::before{ content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;z-index:1; pointer-events:none; background:linear-gradient(90deg,rgba(230,211,174,.5),rgba(230,211,174,0) 72%); transform:scaleX(0);transform-origin:left center; transition:transform 1.25s cubic-bezier(.22,1,.36,1) .18s; } .kl-motion .entry.kl-in::before{transform:scaleX(1)} /* --- the interludes open like a vitrine aperture --- */ .kl-motion .kl-aperture{ clip-path:inset(19% 0 19% 0); transition:clip-path 1.5s cubic-bezier(.22,1,.36,1); } .kl-motion .kl-aperture.kl-in{clip-path:inset(0 0 0 0)} /* --- depth: the plates drift, the ghost numerals lag behind --- */ /* will-change was unconditional on both full-bleed plates, which kept them in their own composited layers for the life of the page even while off-screen. .strata carries a reveal class, so its promotion is now scoped to the moment it is actually on screen. .summons_field has no reveal hook of its own, so it simply runs unpromoted — the rAF parallax still drives its transform, and the browser promotes during an active transform anyway. */ .kl-motion .strata img{transform:scale(1.10)} .kl-motion .summons_field img{transform:scale(1.12)} .kl-motion .strata.kl-in img{will-change:transform} .kl-motion .chapter[data-no]::after, .kl-motion .chapter:nth-of-type(odd)[data-no]::after{transform:translateY(var(--kn,0px))} /* :nth-of-type(n) is a no-op filter carried purely to lift these to the same (0,4,1) weight as the :nth-of-type(odd) rule above. Without it the odd rule outranks them and strips the translateX(50%) that centres the ghost numeral — which knocked section 04 half its own width off centre. */ .kl-motion .museum:nth-of-type(n)[data-no]::after, .kl-motion .summons:nth-of-type(n)[data-no]::after{transform:translateX(50%) translateY(var(--kn,0px))} /* --- the connector between plaques is drawn downward --- */ .kl-motion .plaque + .plaque::before{ transform:scaleY(0);transform-origin:top center; transition:transform 1.1s cubic-bezier(.22,1,.36,1) .1s; } .kl-motion .plaque.is_in + .plaque::before{transform:scaleY(1)} /* --- scroll rule: a plumb line down the right margin --- */ .klRail{ position:fixed;top:0;right:0;bottom:0;width:1px;z-index:70; pointer-events:none;background:rgba(230,211,174,.06); } .klRail i{ display:block;width:100%;height:100%;transform:scaleY(0);transform-origin:50% 0; background:linear-gradient(rgba(230,211,174,.18),rgba(230,211,174,.8)); transition:transform .14s linear; } /* --- light under the cursor: position only, never displacement --- */ .kl-motion .kl-lit{position:relative} .kl-motion .kl-lit::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0; background:radial-gradient(220px circle at var(--kx,50%) var(--ky,50%), rgba(236,217,178,.11),transparent 68%); transition:opacity .45s ease; } .kl-motion .kl-lit:hover::after, .kl-motion .kl-lit:focus-visible::after{opacity:1} /* The primary CTA is champagne-filled and roughly 250x50. A 200px/.5 white pool is larger and hotter than the button itself and washes it out. Held to a travelling highlight in the same register as the .entry pool below. */ .kl-motion .act_fill::after{ background:radial-gradient(120px circle at var(--kx,50%) var(--ky,50%), rgba(255,255,255,.16),transparent 66%); } .kl-motion .entry::after{ background:radial-gradient(460px 150px at var(--kx,50%) var(--ky,50%), rgba(236,217,178,.085),transparent 70%); } .sigil svg{transition:color .5s} .sigil:hover svg{color:#f6ecd4} /* ---------- secure application link (apply.html) ---------- Trust panel, resume note, and contact-consent line. Same tokens, same borders, same uppercase sans as the rest of the desk — no new type, no new colour. Nothing here starts hidden. */ .vouch{ border:1px solid var(--line); padding:1.5rem 1.6rem 1.4rem; margin-bottom:clamp(2.2rem,4.5vw,3rem); background:linear-gradient(rgba(230,211,174,.03), rgba(230,211,174,0)); } .vouch_h{ font:400 .62rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase; color:var(--champ);margin-bottom:1.15rem; display:flex;align-items:center;gap:.85rem; } .vouch_h::before{content:"";flex:none;width:26px;height:1px;background:var(--line_hi)} .vouch_list{list-style:none;display:grid;gap:.6rem} .vouch_list li{ position:relative;padding-left:1.05rem; color:var(--mist);font-size:.845rem;line-height:1.7; } .vouch_list li::before{ content:"";position:absolute;left:0;top:.78em; width:5px;height:1px;background:var(--champ_2); } .vouch_list b{color:var(--bone);font-weight:400} .vouch_list a{ color:var(--champ_2);text-decoration:none; border-bottom:1px solid var(--line_hi); transition:color .35s,border-color .35s; } .vouch_list a:hover{color:var(--champ);border-color:var(--champ)} .resume_note{ display:flex;align-items:flex-start;gap:1.2rem;justify-content:space-between; border:1px solid var(--line_hi);padding:.95rem 1.1rem; margin-bottom:2rem; } .resume_note p{color:var(--mist);font-size:.82rem;line-height:1.65} .resume_note b{color:var(--champ);font-weight:400} .resume_acts{display:flex;align-items:center;gap:.9rem;flex:none} .resume_fresh{ background:none;border:0;border-bottom:1px solid var(--line_hi);cursor:pointer; font:400 .58rem/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase; color:var(--mist);padding:0;transition:color .3s,border-color .3s; } .resume_fresh:hover{color:var(--champ);border-color:var(--champ)} .resume_x{ flex:none;background:none;border:1px solid var(--line_hi);color:var(--mist); width:26px;height:26px;line-height:1;cursor:pointer;font-size:1rem; transition:color .3s,border-color .3s; } .resume_x:hover{color:var(--champ);border-color:var(--champ)} .consent_block{margin-bottom:2.4rem} .consent_check{align-items:flex-start;margin-top:0;line-height:1.65;font-size:.845rem} .consent_check input{margin-top:.3rem} .consent_block .hint{margin-top:.65rem;padding-left:2.15rem} .consent_block .hint a{color:var(--champ_2);text-decoration:none;border-bottom:1px solid var(--line);transition:color .3s,border-color .3s} .consent_block .hint a:hover{color:var(--champ);border-color:var(--champ)} /* the desk clears itself once the file is delivered — same as the form */ .desk.is_done .vouch,.desk.is_done .resume_note{display:none} @media (max-width:640px){ .resume_note{flex-direction:column;align-items:stretch;gap:.85rem} .resume_acts{justify-content:space-between} .consent_block .hint{padding-left:0} } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition:none !important;animation:none !important} [data-fx],.kl-motion [data-fx],.kl-motion .kl-r,.kl-motion .kl-split .klW{ opacity:1 !important;transform:none !important;filter:none !important; } .trace,.kl-motion .trace{letter-spacing:.01em} .kl-motion .kl-aperture{clip-path:none !important} .kl-motion .no_tag::before, .kl-motion .museum .no_tag::after, .kl-motion .entry::before, .kl-motion .plaque + .plaque::before{transform:none !important} .kl-motion .kl-lit::after{display:none} .klRail{display:none} .entry_go{opacity:1;transform:none} .plumb{display:none} }