/* Layout: Ryan's portfolio rules (sj.land). A quiet sidebar on the app background, the page on a card,
   one typeface, greys only, cyan as a hint (the wordmark and the "checked" dot). Four background variants. */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --font:"Instrument Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  /* Mist (default light): white with hints of light blue */
  --appbg:#EEF3F7; --bg:rgba(255,255,255,.86); --solid:#FFFFFF;
  --g3:#F1F5F8; --g4:#E9EFF3; --g5:#E1E8ED; --g9:#8593A0; --g11:#55626E; --g12:#111A22;
  --hl:#FFFFFF; --hlHover:rgba(17,26,34,.04); --hlBorder:rgba(17,26,34,.07);
  --cyan:#0E9BB5; --wash1:#BFE9F4; --wash2:#D6E6FB; --wash3:#E4F6FA; --washOp:.75;
  --modal:#FFFFFF; --overlay:rgba(17,26,34,.28); --shadow:0 1px 6px rgba(17,26,34,.05); --err:#B4371F;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --appbg:#0B131B; --bg:rgba(13,21,30,.82); --solid:#0D151E;
  --g3:#121C26; --g4:#16212C; --g5:#1E2B38; --g9:#6E7F8F; --g11:#A2B1BE; --g12:#E9F0F5;
  --hl:rgba(255,255,255,.07); --hlHover:rgba(255,255,255,.04); --hlBorder:rgba(255,255,255,.05);
  --cyan:#22D3EE; --wash1:#0E3D4A; --wash2:#10263F; --wash3:#0B2E36; --washOp:.9;
  --modal:#15212D; --overlay:rgba(2,8,14,.72); --shadow:0 1px 6px rgba(0,0,0,.4); --err:#FF8A70; color-scheme:dark}}
:root[data-theme="dark"]{
  --appbg:#0B131B; --bg:rgba(13,21,30,.82); --solid:#0D151E;
  --g3:#121C26; --g4:#16212C; --g5:#1E2B38; --g9:#6E7F8F; --g11:#A2B1BE; --g12:#E9F0F5;
  --hl:rgba(255,255,255,.07); --hlHover:rgba(255,255,255,.04); --hlBorder:rgba(255,255,255,.05);
  --cyan:#22D3EE; --wash1:#0E3D4A; --wash2:#10263F; --wash3:#0B2E36; --washOp:.9;
  --modal:#15212D; --overlay:rgba(2,8,14,.72); --shadow:0 1px 6px rgba(0,0,0,.4); --err:#FF8A70; color-scheme:dark}
/* Light (Mist) and dark (Deep). Later blocks win over the defaults above. */
:root[data-variant="mist"]{
  --appbg:#EEF3F7; --bg:rgba(255,255,255,.86); --solid:#FFFFFF;
  --g3:#F1F5F8; --g4:#E9EFF3; --g5:#E1E8ED; --g9:#8593A0; --g11:#55626E; --g12:#111A22;
  --hl:#FFFFFF; --hlHover:rgba(17,26,34,.04); --hlBorder:rgba(17,26,34,.07);
  --cyan:#0E9BB5; --wash1:#BFE9F4; --wash2:#D6E6FB; --wash3:#E4F6FA; --washOp:.75;
  --modal:#FFFFFF; --overlay:rgba(17,26,34,.28); --shadow:0 1px 6px rgba(17,26,34,.05); --err:#B4371F; color-scheme:light}
:root[data-variant="deep"]{
  --appbg:#0B131B; --bg:rgba(13,21,30,.82); --solid:#0D151E;
  --g3:#121C26; --g4:#16212C; --g5:#1E2B38; --g9:#6E7F8F; --g11:#A2B1BE; --g12:#E9F0F5;
  --hl:rgba(255,255,255,.07); --hlHover:rgba(255,255,255,.04); --hlBorder:rgba(255,255,255,.05);
  --cyan:#22D3EE; --wash1:#0E3D4A; --wash2:#10263F; --wash3:#0B2E36; --washOp:.9;
  --modal:#15212D; --overlay:rgba(2,8,14,.72); --shadow:0 1px 6px rgba(0,0,0,.4); --err:#FF8A70; color-scheme:dark}

*{box-sizing:border-box}
html,body{background:var(--appbg)}
body{color:var(--g12);font:400 14.7px/1.75 var(--font);letter-spacing:.1px;-webkit-font-smoothing:antialiased;transition:background .3s}
h1,h2,h3,p,ol,ul{margin:0}
h1,h2,h3{font-weight:560;letter-spacing:-0.01em;line-height:1.15;text-wrap:balance}
a{color:inherit}
:focus-visible{outline:2px solid var(--g12);outline-offset:3px;border-radius:4px}
::selection{background:var(--g12);color:var(--solid)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--g11)} .faint{color:var(--g9)}
kbd{font:500 .72em var(--font);color:var(--g11);border:1px solid var(--g5);border-radius:4px;padding:1px 5px}

/* the blue hint: a slow, blurred wash behind everything (Mist and Deep only) */
.wash{position:fixed;inset:-20%;z-index:0;pointer-events:none;opacity:var(--washOp);transition:opacity .4s;
  background:radial-gradient(40% 35% at 20% 25%,var(--wash1),transparent 70%),radial-gradient(45% 40% at 80% 30%,var(--wash2),transparent 70%),radial-gradient(50% 45% at 55% 85%,var(--wash3),transparent 70%);
  filter:blur(40px);animation:drift 38s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.06)}}

/* frame */
.side{position:fixed;top:0;left:0;bottom:0;width:232px;padding:48px 16px 20px;display:flex;flex-direction:column;z-index:2}
.wordmark{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;font-size:16px;letter-spacing:-0.02em;padding:0 10px;margin-bottom:28px}
.wordmark .tile{width:22px;height:22px;border-radius:6px;background:#1F2328;display:flex;align-items:center;justify-content:center;flex:none;font-size:10px;font-weight:700;letter-spacing:-0.04em;color:#FFFFFF;box-shadow:0 0 0 1px var(--hlBorder)}
.wordmark .tile b{color:#22D3EE;font-weight:700}
.wordmark .e{color:var(--cyan)}
.nav{display:grid;gap:6px}
.nav a{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 10px;border-radius:8px;text-decoration:none;color:var(--g11);font-weight:480}
.nav a:hover{background:var(--hlHover);color:var(--g12)}
.nav a[aria-current="page"]{background:var(--hl);color:var(--g12);box-shadow:0 3px 3px rgba(0,0,0,.04),0 0 0 1px var(--hlBorder)}
.nav kbd{opacity:.8}
.side .sep{font-size:11.6px;font-weight:480;letter-spacing:.02em;text-transform:uppercase;color:var(--g9);padding:22px 10px 8px}
.side .bottom{margin-top:auto;display:grid;gap:10px;padding:0 10px}
.variants{display:flex;gap:2px;background:var(--hlHover);padding:3px;border-radius:999px;width:max-content}
.variants button{border:0;background:transparent;color:var(--g11);font:500 12px var(--font);padding:5px 9px;border-radius:999px;cursor:pointer}
.variants button[aria-pressed="true"]{background:var(--hl);color:var(--g12);box-shadow:0 0 0 1px var(--hlBorder)}
.side .proto{font-size:12px;color:var(--g9)}
.side .proto a{color:var(--g11)}

main{position:fixed;z-index:1;top:8px;right:8px;bottom:8px;left:248px;overflow-y:auto;overflow-x:hidden;background:var(--bg);border-radius:12px;box-shadow:var(--shadow),0 0 0 1px var(--hlBorder);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:0 32px 32px;display:flex;flex-direction:column;align-items:center}
.page{display:none;width:100%;padding:64px 0 24px}
.page.on{display:block;animation:fade .45s cubic-bezier(.2,.6,.2,1) both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.foot{width:100%;max-width:var(--maxw)}
.page h1{font-size:2.275rem;font-weight:560;line-height:1.1;letter-spacing:-0.015em;margin-bottom:1.5rem}
.lede{color:var(--g11);font-size:15.5px;line-height:1.55;max-width:40rem}
.eyebrow{font-size:11.6px;font-weight:480;letter-spacing:.02em;text-transform:uppercase;color:var(--g9)}
.rulehead{display:flex;align-items:center;gap:12px}
.rulehead::after{content:"";height:1px;flex:1;background:var(--g5)}
.read{max-width:40rem}
.read p{margin-bottom:1.25rem}
.read h2{font-size:17px;margin:2rem 0 .6rem}
.read a{text-decoration-color:var(--g9);text-underline-offset:3px}
.links{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;margin-top:18px}
.links a,.links button{color:var(--g11);background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:var(--g5);text-underline-offset:3px}
.links a:hover,.links button:hover{color:var(--g12);text-decoration-color:var(--g9)}

/* home */
.hello{font-size:clamp(46px,calc((100vw - 350px)*.085),116px);font-weight:400;line-height:1.04;letter-spacing:-0.025em;margin:32px 0 0 -4px;max-width:12ch}
.hello .e{color:var(--cyan)}
.e{color:var(--cyan)}
.why{font-size:17px;line-height:1.7;color:var(--g12)}
.why p{margin-bottom:1.25rem}
.why .bet-line{font-size:22px;font-weight:500;letter-spacing:-0.015em;line-height:1.3;margin-top:2rem}
.bigline{font-size:19px;font-weight:500;letter-spacing:-0.01em;margin:-0.25rem 0 14px}
.bigline a{font-size:14px;font-weight:400;color:var(--g9);margin-left:8px;text-decoration-color:var(--g5);text-underline-offset:3px}
.index{list-style:none;padding:0;border-top:1px solid var(--g5)}
.index li{border-bottom:1px solid var(--g5)}
.index a{display:flex;align-items:baseline;gap:24px;padding:16px 12px;margin:0 -12px;border-radius:8px;text-decoration:none}
.index a:hover{background:var(--hlHover)}
.index .n{font-size:13px;color:var(--g9);width:18px;flex:none}
.index .t{font-size:18px;font-weight:560;letter-spacing:-0.01em;flex:1;min-width:0}
.index .b{display:block;font-size:13.2px;font-weight:400;color:var(--g9);letter-spacing:0;margin-top:2px}
.index .arr{color:var(--g9);transition:transform .15s}
.index a:hover .arr{transform:translateX(2px);color:var(--g12)}
/* One grid for every page (Patrick, 21 Oct 2026): the page on the left, a rail on the right, with the same proportions
   and the same divider everywhere. On wide screens the grid is centred in the card. On Home the rail holds what someone
   arriving from Instagram came for; on every other page it holds that page's key facts. The email box ends every rail. */
:root{--rail:clamp(17.5rem,22vw,24rem);--gutter:clamp(40px,4.5vw,88px);--maxw:74rem}
.page{grid-template-columns:minmax(0,1fr) var(--rail);grid-template-areas:"main rail";column-gap:var(--gutter);align-items:start;max-width:var(--maxw);margin:0 auto}
.page.on{display:grid}
.pm{grid-area:main;min-width:0}
.home{grid-template-areas:"head rail" "idx rail";grid-template-rows:auto 1fr}
.home .head{grid-area:head}
.home .idx{grid-area:idx;margin-top:64px}
.rail{grid-area:rail;align-self:stretch;display:flex;flex-direction:column;gap:44px;border-left:1px solid var(--g5);padding-left:clamp(24px,2.6vw,44px);padding-top:6px;min-width:0}
.home .rail{padding-top:40px}
.rail .lead{display:block;text-decoration:none;margin-top:14px}
.rail .kick{display:block;font-size:12.5px;color:var(--g9)}
.rail .h{display:block;font-size:19px;font-weight:560;letter-spacing:-0.01em;line-height:1.3;margin-top:4px;text-wrap:balance}
.rail .lead:hover .h{text-decoration:underline;text-decoration-color:var(--g9);text-decoration-thickness:1px;text-underline-offset:4px}
.rail .x{display:block;color:var(--g11);font-size:13.8px;line-height:1.6;margin-top:8px}
.rail .links{margin-top:12px;font-size:13px}
.rail .sum{font-size:12.5px;margin-top:8px}
.rail p.t,.pitch{font-size:13.8px;color:var(--g11);line-height:1.6;margin-top:12px}
.rail p.t b{color:var(--g12);font-weight:560}
.mini{list-style:none;padding:0;margin:10px 0 0}
.mini li{border-bottom:1px solid var(--g5)}
.mini li:last-child{border-bottom:0}
.mini a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;text-decoration:none}
.mini a:hover .nm{text-decoration:underline;text-decoration-color:var(--g9);text-underline-offset:4px}
.mini .nm{font-size:14.5px;font-weight:560;min-width:0}
.mini .c{display:block;font-size:12.5px;font-weight:400;color:var(--g9)}
.mini .am{font-size:14.5px;font-weight:560;flex:none}
/* key facts: label on the left, value on the right, hairline rows */
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);margin:10px 0 0;font-size:13.6px;line-height:1.5}
.kv dt,.kv dd{padding:8px 0;border-bottom:1px solid var(--g5)}
.kv dt{color:var(--g9);padding-right:20px}
.kv dd{margin:0}
.kv.r dd{text-align:right}
.kv > :nth-last-child(-n+2){border-bottom:0}
.kv a{text-decoration-color:var(--g5);text-underline-offset:3px}
.toc{display:grid;margin-top:8px;font-size:13.6px}
.toc a{display:block;padding:6px 0;color:var(--g11);text-decoration:none}
.toc a:hover{color:var(--g12)}
.legend{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px;font-size:13.2px;color:var(--g11)}
.dot.off{background:var(--g5)}
.rail ul.t,.rail ol.t{padding-left:18px;margin:12px 0 0;display:grid;gap:8px;font-size:13.6px;color:var(--g11);line-height:1.55}
.signup{display:flex;gap:8px;margin-top:12px}
.signup input{flex:1;min-width:0}
.signup .btn{flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.foot{max-width:var(--maxw);margin-left:auto;margin-right:auto}
@media (max-width:1200px){
  .page{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "rail"}
  .home{grid-template-areas:"head" "rail" "idx";grid-template-rows:auto}
  .rail{border-left:0;padding-left:0;border-top:1px solid var(--g5);padding-top:36px;margin-top:56px;max-width:40rem}
  .home .rail{border-top:0;padding-top:0;margin-top:48px}
  .home .idx{max-width:40rem}
}
}

/* wide page header: title left, grey note right (portfolio Essentials) */
.whead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap}
.page .whead h1{margin-bottom:0}
.whead .note{max-width:336px;text-align:right;font-size:13.2px;line-height:1.38;color:var(--g9)}
.stats{display:flex;gap:12px 40px;flex-wrap:wrap;margin-top:36px;font-size:13.2px;color:var(--g9)}
.stats b{display:block;font-size:24px;font-weight:500;letter-spacing:-0.015em;color:var(--g12);line-height:1.2}
/* tabs (portfolio Readings) */
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--g5);overflow-x:auto;margin-top:40px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;padding:14px 0 10px;background:none;border:0;font:400 14px var(--font);letter-spacing:-0.005em;color:var(--g9);cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--g11)}
.tabs button[aria-selected="true"]{color:var(--g12)}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--g12);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.tabs .c{font-size:11px;color:var(--g9);margin-left:6px;font-variant-numeric:tabular-nums}
/* rows (portfolio Readings): hairlines; on hover the name underlines and the arrow nudges */
.rows{list-style:none;padding:0;margin:6px 0 0}
.rows li{border-bottom:1px solid var(--g4)}
.rows li:last-child{border-bottom:0}
.row{display:grid;grid-template-columns:minmax(0,1fr) 190px 104px 14px;gap:24px;align-items:start;width:100%;padding:16px 0;background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
.row.two-col{grid-template-columns:minmax(0,1fr) 14px}
.row.static{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);cursor:default}
.row .name{font-size:15px;font-weight:560;letter-spacing:-0.005em;line-height:1.4}
.row:hover .name{text-decoration:underline;text-decoration-color:var(--g9);text-decoration-thickness:1.5px;text-underline-offset:4px}
.row.static:hover .name{text-decoration:none}
.row .what{display:block;font-size:13.5px;line-height:1.55;color:var(--g11);margin-top:2px}
.row .sm{display:none;font-size:12.5px;color:var(--g9);margin-top:4px}
.row .cell{font-size:13.2px;color:var(--g9);padding-top:2px}
.row .amt{font-size:15px;font-weight:560;text-align:right;font-variant-numeric:tabular-nums;line-height:1.4}
.row .amt small{display:block;font-size:12px;font-weight:400;color:var(--g9)}
.arrow{width:14px;height:14px;color:var(--g9);opacity:.7;margin-top:5px;transition:transform .15s,color .15s,opacity .15s}
.row:hover .arrow{color:var(--g12);opacity:1;transform:translate(2px,-2px)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-right:7px;vertical-align:1px}
.dot.half{background:transparent;box-shadow:inset 0 0 0 1.5px var(--cyan)}
/* modal (portfolio ItemModal) */
dialog.modal{width:clamp(600px,70vw,1080px);max-width:calc(100vw - 24px);max-height:calc(100vh - 48px);border:0;border-radius:16px;padding:24px;background:var(--modal);color:var(--g12);box-shadow:0 10px 38px -10px rgba(20,20,20,.45),0 10px 20px -15px rgba(20,20,20,.25);overflow-y:auto}
dialog.modal::backdrop{background:var(--overlay)}
dialog.modal[open]{animation:fade .22s cubic-bezier(.2,.6,.2,1)}
.m-close{position:absolute;right:12px;top:12px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:none;color:var(--g9);cursor:pointer;z-index:1}
.m-close:hover{background:var(--hlHover);color:var(--g12)}
.m-close svg{width:16px;height:16px}
.m-body{display:flex;align-items:stretch}
.m-art{position:relative;width:56%;flex:none;aspect-ratio:1;border-radius:8px;background:var(--g4);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:28px}
.m-art .big{font-size:clamp(52px,6.4vw,96px);font-weight:400;letter-spacing:-0.035em;line-height:1;font-variant-numeric:tabular-nums}
.m-art .big.word{font-size:clamp(36px,4vw,56px)}
.m-art .under{font-size:14.7px;color:var(--g11);margin-top:10px}
.m-art .foot2{font-size:13.2px;color:var(--g9)}
.m-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:18px 16px 8px 0;margin-left:30px}
.m-eyebrow{font-size:14.7px;color:var(--g9);margin-bottom:8px}
.m-title{font-size:24px;font-weight:580;line-height:1.15;letter-spacing:-0.01em;margin-bottom:12px}
.m-blurb{font-size:14.7px;line-height:1.65;color:var(--g11)}
.m-facts{margin-top:20px;display:grid;gap:10px;font-size:13.6px;line-height:1.6;color:var(--g11)}
.m-facts b{color:var(--g12);font-weight:560}
.m-facts .q{border-left:2px solid var(--g5);padding-left:12px}
.m-facts a{text-decoration-color:var(--g5);text-underline-offset:3px}
.m-actions{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px 16px;margin-top:28px;flex-wrap:wrap}
.m-actions .right{display:flex;gap:8px;flex-wrap:wrap}
.m-btn{display:inline-flex;align-items:center;border-radius:5px;background:var(--g12);color:var(--solid);padding:8px 12px;font-size:13.2px;font-weight:480;text-decoration:none;transition:opacity .15s}
.m-btn:hover{opacity:.85}
.m-btn.ghost{background:transparent;color:var(--g12);box-shadow:inset 0 0 0 1px var(--g5)}
.m-btn .ar{margin-left:3px;font-size:15px;font-weight:300;line-height:1}
.m-corr{font-size:13px;color:var(--g9)}
@media (max-width:960px){.m-body{flex-direction:column}.m-art{width:100%;aspect-ratio:16/10}.m-info{margin-left:0;padding:20px 4px 4px}}
.scroll{overflow-x:auto}
.csv{display:none;margin-top:14px}
.csv.on{display:block}
.csv pre{background:var(--g3);border-radius:8px;padding:12px;font:12px/1.5 ui-monospace,Menlo,monospace;overflow-x:auto;max-height:220px;color:var(--g11)}

/* story */
.byline{font-size:13px;color:var(--g9);margin:14px 0 36px}
.read sup{font-size:10px;color:var(--g9);margin-left:1px}
.box{background:var(--g3);border-radius:12px;padding:18px 20px;margin:28px 0}
.box h2{font-size:15px;margin:0 0 8px}
.box ul{padding-left:18px;color:var(--g11);font-size:14px}
.read ul.list{padding-left:1.2em;margin:0 0 1.25rem;display:grid;gap:6px}
.sources{font-size:13.2px;color:var(--g11);padding-left:18px}
.sources li{margin-bottom:6px}
.sources a{text-decoration-color:var(--g5);text-underline-offset:3px}

/* bet */
.bet{border-top:1px solid var(--g5);padding-top:22px;margin-top:36px}
.bet .claim{font-size:21px;font-weight:500;line-height:1.35;letter-spacing:-0.01em;margin:8px 0 18px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;font-size:13.2px;margin-bottom:18px}
.facts span{display:block;color:var(--g9)}

/* forms */
.form{display:grid;gap:14px;max-width:40rem;margin-top:36px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{display:grid;gap:6px;min-width:0}
.f label{font-size:13px;font-weight:500;color:var(--g11)}
input,select,textarea{font:400 14.7px var(--font);color:var(--g12);background:var(--g3);border:1px solid transparent;border-radius:8px;padding:10px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--g9);background:var(--solid)}
textarea{min-height:90px;resize:vertical}
.check{display:flex;gap:10px;font-size:13.2px;color:var(--g11);align-items:flex-start}
.check input{width:16px;height:16px;margin-top:4px;flex:none}
.btn{font:560 14px var(--font);background:var(--g12);color:var(--solid);border:0;border-radius:8px;padding:11px 16px;cursor:pointer;width:max-content}
.btn:hover{opacity:.88}
.spam{font-size:12.5px;color:var(--g9)}
.err{font-size:13px;color:var(--err)}
.ok{display:none;margin-top:32px;gap:14px;max-width:40rem}
.ok.on{display:grid}
.tg{background:var(--g3);border-radius:12px;padding:16px 18px;font-size:13.6px;white-space:pre-wrap;color:var(--g12)}

/* Launchpad: the founders' gate (Ryan's chosen design, 27 Oct 2026). Two doors, each opening only its own form. */
.gate .question{margin:-10px 0 8px;font-size:17px;font-weight:500;color:var(--g12)}
.doors{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;max-width:44rem}
.door{display:grid;gap:8px;align-content:start;padding:20px;border-radius:10px;border:1px solid var(--g5);text-decoration:none;color:var(--g12);transition:border-color .15s ease}
.door:hover{border-color:var(--g9)}
.door.is-chosen{border:1.5px solid var(--g12);padding:19.5px}
.door-title{font-weight:560;font-size:16px}
.door-text{color:var(--g11);font-size:13.8px;line-height:1.5}
.door-go{font-size:13.5px;font-weight:500;margin-top:4px}
.door-go .arrow2{display:inline-block;transition:transform .15s ease}
.door:hover .door-go .arrow2{transform:translateY(2px)}
.follow{margin:14px 0 0;font-size:13.5px;color:var(--g11)}
.follow a{color:var(--g12)}
.gate-form{margin-top:48px;padding-top:36px;border-top:1px solid var(--g5);max-width:40rem;scroll-margin-top:24px}
.gate-form[hidden]{display:none}
.gate-form h2{font-size:22px;font-weight:560;letter-spacing:-0.01em;margin:0 0 6px}
.gate-form .intro{color:var(--g11)}
.closed-note{margin:14px 0 0;padding:10px 12px;border-radius:8px;background:var(--g3);font-size:13.2px;color:var(--g12)}
.gate-form form{margin-top:24px;display:grid;gap:14px}
.gate-form .group{margin:6px 0 0;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--g11)}
.gate-form .group.spaced{margin-top:14px}
.gate-form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.gate-form .f{align-content:start}
.gate-form .f.narrow{max-width:20rem}
.gate-form input,.gate-form select{min-height:44px}
.gate-form select{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--g11) 50%),linear-gradient(135deg,var(--g11) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.gate-form input::placeholder{color:var(--g9)}
.gate-form input:disabled{opacity:.5}
.gate-form .f.invalid input,.gate-form .f.invalid select{border-color:var(--err)}
.gate-form .ferr{font-size:12.5px;color:var(--err)}
.gate-form .ferr:empty{display:none}
.gate-form .check input{accent-color:var(--g12)}
.gate-form .check.first{margin-top:8px}
.gate-form .check.tight{margin-top:-4px}
.gate-form .check.invalid span{color:var(--err)}
.gate-form .small{font-size:13px;color:var(--g11)}
.gate-form .small a,.gate-form .check a{color:var(--g12)}
.gate-form .btn{min-height:44px;padding:12px 18px;margin-top:6px}
.gate-form .status{font-size:13.5px}
.gate-form .status:empty{display:none}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gate-form [data-check]:empty{display:none}
.nl-msg{margin:18px 0 0;font-size:15px}
.nl-msg:empty{display:none}
.rail .door-links{display:grid;gap:6px;margin-top:12px;font-size:13.8px}
.rail .door-links a{color:var(--g12);text-decoration:underline;text-decoration-color:var(--g5);text-underline-offset:3px}
.rail .door-links a:hover{text-decoration-color:var(--g9)}
.facts2{margin:16px 0 0;border-top:1px solid var(--g5);max-width:40rem}
.facts2 div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--g5)}
.facts2 dt{color:var(--g11)} .facts2 dd{margin:0;font-weight:500}
/* iPhones zoom into any text box under 16px when it's tapped: keep phones at 16px. */
@media (max-width:600px){input,select,textarea{font-size:16px}}

.foot{border-top:1px solid var(--g5);margin-top:72px;padding-top:22px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--g9)}
.foot a{color:var(--g11)}

/* mobile: compact top bar with a menu toggle */
.topbar{display:none}
@media (max-width:760px){
  .side{position:relative;width:auto;padding:0 16px;display:none}
  .side.open{display:flex;padding-bottom:16px}
  .side .wordmark{display:none}
  .topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;position:relative;z-index:2}
  .topbar .wordmark{margin:0;padding:0}
  .topbar button{border:0;background:var(--hl);color:var(--g12);font:500 13px var(--font);padding:7px 12px;border-radius:999px;box-shadow:0 0 0 1px var(--hlBorder)}
  main{position:relative;top:auto;right:auto;bottom:auto;left:auto;margin:0 8px 8px;padding:0 18px 24px;overflow:visible}
  .row{grid-template-columns:minmax(0,1fr) auto 14px;gap:14px}
  .row .cell{display:none}
  .row .sm{display:block}
  .row.static{grid-template-columns:1fr;gap:4px}
  .whead .note{text-align:left}
  dialog.modal{width:94vw;padding:20px}
  .page{padding:36px 0 16px}
  .two,.facts{grid-template-columns:1fr}
  .nav kbd{display:none}
  .index .n{display:none}
}

/* ---- sj.land details (Ryan, 21 Oct 2026): measurements, links, rows, modal motion, phone dock ---- */
:root{--fl:14.7px;--fm:13.5px;--fs:12.3px;--sys:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --menu:rgba(17,26,34,.85);--tab:rgba(17,26,34,.06);--tabText:rgba(17,26,34,.38);--bgSticky:rgba(255,255,255,.78);
  --glass:rgba(244,248,251,.78);--glassBorder:rgba(255,255,255,.72);--glassOn:rgba(255,255,255,.85);--glassShadow:0 10px 35px rgba(17,26,34,.16)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--menu:rgba(255,255,255,.8);--tab:rgba(255,255,255,.07);--tabText:rgba(255,255,255,.4);--bgSticky:rgba(13,21,30,.78);
  --glass:rgba(22,33,44,.82);--glassBorder:rgba(255,255,255,.12);--glassOn:rgba(255,255,255,.08);--glassShadow:0 18px 50px rgba(0,0,0,.46)}}
:root[data-variant="deep"],:root[data-theme="dark"]{--menu:rgba(255,255,255,.8);--tab:rgba(255,255,255,.07);--tabText:rgba(255,255,255,.4);--bgSticky:rgba(13,21,30,.78);
  --glass:rgba(22,33,44,.82);--glassBorder:rgba(255,255,255,.12);--glassOn:rgba(255,255,255,.08);--glassShadow:0 18px 50px rgba(0,0,0,.46)}
:root[data-variant="mist"]{--menu:rgba(17,26,34,.85);--tab:rgba(17,26,34,.06);--tabText:rgba(17,26,34,.38);--bgSticky:rgba(255,255,255,.78);
  --glass:rgba(244,248,251,.78);--glassBorder:rgba(255,255,255,.72);--glassOn:rgba(255,255,255,.85);--glassShadow:0 10px 35px rgba(17,26,34,.16)}

/* sidebar: a 12.5rem rail, 36px rows, grey key boxes, a small press on click */
.side{width:12.5rem;margin:.5rem;padding:0 .15rem;bottom:auto;height:calc(100vh - 1rem)}
.side .wordmark{margin:1.775rem 0 1rem .975rem;padding:0}
.nav{gap:0}
.nav a{height:2.25rem;padding:.5rem .575rem .5rem .85rem;margin-top:2px;border:.5px solid transparent;font-size:13.2px;font-weight:450;letter-spacing:.2px;color:var(--menu);transition:background-color .15s,color .2s}
.nav a:hover{background:var(--hlHover);color:var(--menu)}
.nav a:active{transform:scaleX(.985) scaleY(.985) translateY(.5px)}
.nav a[aria-current="page"]{background:var(--hl);border-color:var(--hlBorder);box-shadow:0 3px 3px rgba(0,0,0,.05)}
.nav kbd{opacity:1;border:0;background:var(--tab);color:var(--tabText);border-radius:3px;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;padding:0;font:400 11px var(--font)}
.ext{font:300 16px var(--sys);color:var(--tabText);width:16px;text-align:center;line-height:1}
.side .sep{text-transform:none;letter-spacing:0;padding:1.25rem 0 .5rem .875rem}
.side .bottom{padding:0 0 .75rem .6rem}
main{left:13.5rem;top:.5rem;right:.5rem;bottom:.5rem;border-radius:8px;box-shadow:0 1px 6px rgba(0,0,0,.035),0 0 0 1px var(--hlBorder)}

/* links: ↗ leaves the site, → stays on it, a soft grey pill on hover */
.links a,.links button,.read a,.sources a,.m-facts a{text-decoration:none;color:var(--g11);border-radius:4px;padding:1px 4px;margin:-1px -2px -1px -4px;transition:background-color .2s,color .2s}
.links a:hover,.links button:hover,.read a:hover,.sources a:hover,.m-facts a:hover{background:var(--g4);color:var(--g12)}
.read a{color:var(--g12)}
.links a[href^="#"]::after{content:"→";font:300 15px var(--sys);margin-left:3px}
.links a[href^="http"]::after,.read a[href^="http"]::after,.sources a::after,.m-facts a::after{content:"↗";font:300 15px var(--sys);margin-left:2.5px}

/* tabs pinned while the list scrolls (sj tab bar) */
.tabs{position:sticky;top:0;z-index:3;height:43px;gap:0;margin-top:32px;background:var(--bgSticky);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tabs button{font-size:var(--fm);line-height:1;padding:14px 0 10px;margin-right:.875rem;color:var(--g9);transition:color .1s}
.tabs button:hover{color:var(--g12)}
.tabs button:active{transform:scale(.975) translateY(.25px)}

/* rows (sj Investments): a round initial, a light title, the rule starting after the icon */
.rows{margin:0}
.rows li{border-bottom:0}
.row{grid-template-columns:minmax(0,1fr);gap:0;padding:0 .25rem;align-items:start}
.row .bd{display:grid;grid-template-columns:minmax(0,1fr) 170px 96px;gap:16px;padding:1.25rem 0;border-bottom:1px solid var(--g4);align-items:start;min-width:0}
.rows li:last-child .bd{border-bottom:0}
.row .name{font-size:var(--fl);font-weight:450;letter-spacing:.1px;line-height:1.3}
.row:hover .name{text-decoration:none}
/* the company name links to its own site (sj Investments) */
.co{font-size:var(--fl);font-weight:450;letter-spacing:.1px;line-height:1.3;color:var(--g12);text-decoration:none;border-radius:4px;transition:background-color .15s}
.co:hover{background:var(--g4);padding:2px 5px;margin:-2px -5px}
.co .ar{font:300 15px var(--sys);margin-left:3px;opacity:0;transition:opacity .2s}
.row:hover .co .ar,.co:focus-visible .ar{opacity:1}
.mi{display:inline-block;vertical-align:-2px;margin-left:6px;color:var(--g9);opacity:0;transition:opacity .2s}
.row:hover .mi,.row:focus-visible .mi{opacity:.75}
.row .what{font-size:var(--fm);color:var(--g9);line-height:1.4;margin-top:.25rem}
.row .cell{font-size:var(--fs);color:var(--g11);text-align:right;line-height:1.6;padding-top:1px}
.row .amt{font-size:var(--fm);font-weight:500;line-height:1.5}
.row .amt small{font-size:var(--fs)}
.row.two-col{grid-template-columns:minmax(0,1fr) 14px;gap:24px;padding:1.25rem .25rem;border-bottom:1px solid var(--g4)}
.row.two-col .name{font-weight:450}

/* modal: sj motion, buttons and the small note beside the main button */
dialog.modal{border-radius:1rem;padding:1.5rem;box-shadow:rgba(20,20,20,.15) 0 10px 38px -10px,rgba(20,20,20,.05) 0 10px 20px -15px;outline:none}
dialog.modal[open]{animation:mIn 250ms cubic-bezier(.16,1,.3,1)}
dialog.modal[open]::backdrop{animation:bIn 250ms cubic-bezier(.16,1,.3,1)}
dialog.modal.closing{animation:mOut 200ms ease-out forwards}
dialog.modal.closing::backdrop{animation:bOut 200ms ease-out forwards}
@keyframes mIn{from{opacity:0;transform:translateY(2%) scale(.96)}to{opacity:1;transform:none}}
@keyframes mOut{to{opacity:0;transform:translateY(2%) scale(.96)}}
@keyframes bIn{from{opacity:0}}
@keyframes bOut{to{opacity:0}}
.m-art{border-radius:.5rem}
.m-info{margin-left:1.875rem;padding:.5rem}
.m-eyebrow{font-size:var(--fm);color:var(--g9);margin-top:.6rem}
.m-title{margin-bottom:.75rem}
.m-actions{align-items:flex-end}
.m-left{display:grid;gap:6px}
.m-note{font-size:11.5px;color:var(--g9);opacity:.8;max-width:17rem;line-height:1.45}
.m-corr{font-size:var(--fs);color:var(--g9);text-decoration:none}
.m-corr:hover{color:var(--g12)}
.m-btn{border-radius:5px;padding:.5rem .75rem;font-size:var(--fm);font-weight:480}
.m-btn.ghost{background:var(--g4);color:var(--g12);box-shadow:inset 0 0 0 1px var(--g5);transition:background-color .15s}
.m-btn.ghost:hover{opacity:1;background:var(--g5)}
.m-btn .ar{font-family:var(--sys);font-size:15px;font-weight:300;margin-left:3px}
.btn{border-radius:5px;font-weight:480;font-size:var(--fm)}
.btn:active,.m-btn:active{transform:scale(.98)}

/* phones: sj's floating glass dock instead of a menu button */
.dock,.sheet{display:none}
@media (max-width:760px){
  :root{--fl:15px;--fm:13.8px;--fs:12.7px}
  .topbar{display:none!important}
  .side,.side.open{display:none!important}
  main{position:relative;top:auto;right:auto;bottom:auto;left:auto;overflow:visible;margin:.5rem .5rem calc(76px + env(safe-area-inset-bottom,0px))}
  .dock{position:fixed;left:12px;right:12px;bottom:calc(6px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;justify-content:space-between;gap:8px}
  .dock-main{display:grid;grid-template-columns:52px 1fr 1fr;gap:2px;padding:4px;flex:0 1 250px;border:1px solid var(--glassBorder);border-radius:999px;background:var(--glass);box-shadow:var(--glassShadow);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%)}
  .dock a{display:flex;align-items:center;justify-content:center;height:36px;border-radius:999px;color:var(--menu);font-size:14px;font-weight:520;text-decoration:none;white-space:nowrap}
  .dock a[aria-current="page"]{background:var(--glassOn);box-shadow:0 1px 5px rgba(0,0,0,.08)}
  .dock a:active,.dock-more:active{transform:scale(.96)}
  .dock .tile{width:22px;height:22px;border-radius:6px;background:#1F2328;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;letter-spacing:-0.04em;color:#FFFFFF}
  .dock .tile b{color:#22D3EE}
  .dock-more{width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:1px solid var(--glassBorder);background:var(--glass);box-shadow:var(--glassShadow);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);color:var(--menu);font:600 14px var(--font);letter-spacing:.5px;cursor:pointer}
  .sheet:not([hidden]){display:flex;flex-direction:column;position:fixed;right:12px;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:21;width:min(280px,72vw);padding:8px;border:1px solid var(--glassBorder);border-radius:18px;background:var(--glass);box-shadow:var(--glassShadow);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);animation:sheetIn 180ms cubic-bezier(.2,.8,.2,1)}
  .sheet a{display:flex;justify-content:space-between;align-items:center;min-height:40px;padding:6px 10px;border-radius:13px;color:var(--menu);font-size:var(--fm);font-weight:450;text-decoration:none}
  .sheet a[aria-current="page"],.sheet a:active{background:var(--glassOn)}
  .sheet .sd{height:1px;margin:5px 10px;background:var(--g5)}
  .sheet .variants{margin:6px 6px 2px}
  .row .bd{grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .row .cell{display:none}
  .row .sm{display:block}
  .row.two-col{grid-template-columns:minmax(0,1fr) 14px}
  .m-info{margin-left:0}
}
@keyframes sheetIn{from{opacity:0;transform:translateY(10px) scale(.96)}}
/* every page's title starts at the same height and edge as Home's (Ryan, 21 Oct) */
.page h1.hello{margin:0 0 1.5rem}
@media (prefers-reduced-motion:reduce){.wash{animation:none}.page.on{animation:none}*{transition:none!important}}