/* lansenou.com. Home: L01 I (endless bento), colours L03 E (stone + sky), header and timeline L04 A + 2. Layout follows the frame's width (container queries),
   so the same page reads right in the 1440 desktop frame, the 393 phone frame (shared .iphone.safari) and Wide. */
@import "palettes.css";
@import "navigation.css";
[data-theme="dark"]{color-scheme:dark}[data-theme="light"]{color-scheme:light}
body{background:var(--canvas)}
.board-label{max-width:1440px;margin:24px auto 0;padding:0 2px;font:400 12px/16px var(--mono);letter-spacing:.1em;color:var(--text-tertiary)}
.frame{container:site/inline-size;max-width:1440px;margin:24px auto 48px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.frame.phone{overflow-y:auto} /* the page in the device frame */
.frame.phone{scrollbar-width:none}
.frame.phone::-webkit-scrollbar{display:none}
.iphone{margin:12px auto 48px}
.phone-label{max-width:393px;margin:32px auto 0}
.frame a{color:inherit}
.frame :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.narrow{max-width:760px}

/* nav */
.sn{position:relative;z-index:4;border-bottom:1px solid var(--border);background:var(--surface-raised)}
.sn .wrap{display:flex;align-items:center;gap:24px;height:64px}
.sn .wm{font:600 18px/24px var(--sans);text-decoration:none;margin-right:auto}
.sn .links{display:flex;align-items:center;gap:4px;font:500 14px/20px var(--sans)}
.sn .links a{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:6px;color:var(--text-secondary);text-decoration:none}
.sn .links a:hover{color:var(--text-primary);background:color-mix(in srgb,var(--state-layer) 8%,transparent)}
.sn .links a[aria-current]{color:var(--text-primary)}
.sn .links .btn{margin-left:12px;color:var(--text-primary)}
.sn .mb{display:none}
.mmenu{display:none}

/* type */
.eyebrow{font:400 11px/16px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.eyebrow a{color:inherit;text-decoration:none}.eyebrow a:hover{color:var(--text-primary);text-decoration:underline}
.ph1{font:600 57px/64px var(--display);letter-spacing:-.01em;margin:8px 0 16px}
.lead{font:400 18px/28px var(--sans);max-width:58ch}
.muted{color:var(--text-secondary)}
.acts{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.sec{padding:48px 0;border-top:1px solid var(--border)}
.sec-h{display:flex;align-items:baseline;gap:16px;margin-bottom:20px}
.sec-h h2{font:600 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin:0}
.sec-h a{margin-left:auto;font:500 14px/20px var(--sans);color:var(--accent-strong);text-decoration:none}
.sec-h a:hover{text-decoration:underline}
.pill{display:inline-block;font:500 12px/16px var(--sans);padding:2px 8px;border-radius:6px;border:1px solid;white-space:nowrap}
.pill.ok{color:var(--ok);border-color:var(--ok);background:var(--ok-bg)}
.pill.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-bg)}
.tag{display:inline-block;font:400 11px/16px var(--mono);padding:2px 6px;border:1px solid var(--border);border-radius:4px;color:var(--text-secondary)}
.lift{position:relative;isolation:isolate;text-decoration:none;color:inherit}
.lift::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--state-layer);opacity:0;transition:opacity var(--fast) linear;z-index:-1;pointer-events:none}
.lift:hover::after{opacity:.08}

/* home */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:64px;padding:72px 0 56px;align-items:center}
.hero h1{font:600 72px/76px var(--display);letter-spacing:-.01em;margin:0 0 20px}
.wave{display:inline-block;transform-origin:70% 80%}
.hero h1:hover .wave{animation:wave .6s var(--move) 2}
@keyframes wave{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}}
.pin{position:relative;margin:0;padding:10px 10px 36px;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised);transform:rotate(3deg);transition:transform var(--normal) var(--enter)}
.pin:hover{transform:rotate(0) translateY(-4px)}
.pin img{display:block;width:100%;height:auto;aspect-ratio:3/4;border-radius:4px}
.pin figcaption{position:absolute;left:0;right:0;bottom:10px;text-align:center;font:400 12px/16px var(--mono);color:var(--text-secondary)}
.now{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.now li{padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised);display:flex;flex-direction:column;gap:8px}
.now .k{display:flex;align-items:center;gap:8px;font:400 11px/16px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.now .k i{width:8px;height:8px;border-radius:50%;background:currentColor}
.k.ok{color:var(--ok)}.k.warn{color:var(--warn)}.k.info{color:var(--accent-strong)}
.now b{font:600 16px/24px var(--sans)}
.now p{font-size:14px;line-height:20px;color:var(--text-secondary);margin:0}
.otc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.otc b{display:block;font:600 16px/24px var(--sans);margin-bottom:4px}
.otc p{font-size:14px;line-height:20px;color:var(--text-secondary);margin:0}

/* project cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-p{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface-raised);text-decoration:none;color:inherit;transition:transform var(--fast) var(--enter),border-color var(--fast) linear}
.card-p:hover{transform:translateY(-2px) rotate(-.5deg);border-color:var(--text-tertiary)}
.card-p img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-bottom:1px solid var(--border)}
.card-p .in{padding:16px;display:flex;flex-direction:column;gap:6px}
.card-p .meta{font:400 12px/16px var(--mono);color:var(--text-secondary)}
.card-p b{font:600 16px/24px var(--sans)}
.card-p p{font-size:14px;line-height:20px;color:var(--text-secondary);margin:0}
.card-p.hide{display:none}
.flt{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.prod{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised)}
.prod b{font:600 16px/24px var(--sans);display:block}
.prod .d{font-size:14px;line-height:20px;color:var(--text-secondary)}

/* rows (writing) */
.rows{list-style:none;margin:0;padding:0}
.rows li{border-bottom:1px solid var(--border)}
.rows li:first-child{border-top:1px solid var(--border)}
.rows a{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:24px;padding:16px 8px;margin:0 -8px;border-radius:6px}
.rows time{font:400 12px/24px var(--mono);color:var(--text-secondary)}
.rows b{font:600 16px/24px var(--sans);display:block}
.rows p{font-size:14px;line-height:20px;color:var(--text-secondary);margin:2px 0 0}
.rows .tags{display:flex;gap:6px;flex-wrap:wrap;align-self:start;justify-content:flex-end;max-width:220px}

/* page head */
.phead{padding:56px 0 32px}
.phead .ph1{margin-bottom:12px}

/* project page */
.still{margin:0 0 32px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface-sunken)}
.still img{display:block;width:100%;height:auto;aspect-ratio:16/9}
.still figcaption{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-top:1px solid var(--border);background:var(--surface-raised);font:400 12px/16px var(--mono);color:var(--text-secondary)}
.still figcaption .btn{margin-left:auto}
.prose{font:400 16px/26px var(--sans)}
.prose>*+*{margin-top:16px}
.prose h2{font:600 22px/28px var(--sans);margin-top:40px;scroll-margin-top:24px}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:8px}
.prose a{color:var(--accent-strong)}
.prose code{font:400 .875em/1 var(--mono);padding:2px 5px;border-radius:4px;background:var(--surface-sunken);border:1px solid var(--border)}
.prose figure{margin:24px 0}
.prose figure img{display:block;max-width:240px;width:100%;height:auto;border:1px solid var(--border);border-radius:8px}
.pre{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface-sunken)}
.pre .bar{display:flex;align-items:center;height:36px;padding:0 4px 0 12px;border-bottom:1px solid var(--border);font:400 11px/16px var(--mono);letter-spacing:.06em;color:var(--text-secondary)}
.pre .bar .btn{margin-left:auto;height:28px;padding:0 10px;font-size:12px}
.pre pre{margin:0;padding:14px 16px;overflow-x:auto;font:400 13px/20px var(--mono);color:var(--text-primary);tab-size:4}
.skills{display:grid;grid-template-columns:160px minmax(0,1fr);border-top:1px solid var(--border)}
.skills dt,.skills dd{margin:0;padding:12px 0;border-bottom:1px solid var(--border);font-size:14px;line-height:20px}
.skills dt{font-weight:600}.skills dd{color:var(--text-secondary)}
.more{list-style:none;padding:0;display:grid;gap:8px}
.more a{color:var(--accent-strong)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:40px 0 56px}
.pn a{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--border);border-radius:8px;text-decoration:none}
.pn a.next{text-align:right;grid-column:2}
.pn span{font:400 11px/16px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.pn b{font:600 16px/24px var(--sans)}

/* post */
.post{display:grid;grid-template-columns:minmax(0,760px) 220px;gap:64px;justify-content:center}
.toc{position:sticky;top:24px;align-self:start;padding-top:8px}
.toc p{margin-bottom:8px}
.toc ol{list-style:none;padding:0;margin:0;display:grid;gap:2px;border-left:1px solid var(--border)}
.toc a{display:block;padding:4px 12px;margin-left:-1px;border-left:2px solid transparent;font-size:13px;line-height:20px;color:var(--text-secondary);text-decoration:none}
.toc a:hover{color:var(--text-primary);border-left-color:var(--text-tertiary)}
.tags-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}

/* about */
.ahead{display:grid;grid-template-columns:160px minmax(0,1fr);gap:40px;align-items:center;padding:56px 0 40px}
.ahead img{width:160px;height:160px;border-radius:50%;object-fit:cover;object-position:50% 30%;border:1px solid var(--border)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.facts div{display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:1px solid var(--border)}
.facts b{font:600 22px/28px var(--mono)}
.facts span{font-size:13px;line-height:20px;color:var(--text-secondary)}
.chips-l{display:flex;flex-wrap:wrap;gap:6px}

/* contact */
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:64px;padding-bottom:64px}
.form{display:grid;gap:20px}
.fld{display:grid;gap:6px}
.fld label{font:500 14px/20px var(--sans)}
.fld input,.fld textarea{width:100%;height:48px;padding:0 14px;border:1px solid var(--border);border-radius:6px;background:var(--surface-sunken);color:var(--text-primary);font:400 16px/24px var(--sans)}
.fld textarea{height:auto;min-height:160px;padding:12px 14px;resize:vertical}
.fld input:hover,.fld textarea:hover{border-color:var(--text-tertiary)}
.fld input:focus-visible,.fld textarea:focus-visible{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.fld [aria-invalid="true"]{border-color:var(--bad)}
.fld .err{font-size:13px;line-height:20px;color:var(--bad)}
.fld .err:empty{display:none}
.sent{padding:24px;border:1px solid var(--ok);border-radius:8px;background:var(--ok-bg)}
.sent b{display:block;font:600 16px/24px var(--sans);margin-bottom:4px}
.elsewhere{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:4px}
.elsewhere a{display:flex;align-items:center;height:44px;padding:0 12px;margin:0 -12px;border-radius:6px;text-decoration:none;font:500 14px/20px var(--sans)}
.elsewhere a span{margin-left:auto;font:400 12px/16px var(--mono);color:var(--text-secondary)}

/* footer */
.sf{border-top:1px solid var(--border);font:400 13px/20px var(--sans);color:var(--text-secondary)}
.sf .wrap{display:flex;gap:20px;align-items:center;padding-top:24px;padding-bottom:24px;flex-wrap:wrap}
.sf a{color:var(--text-secondary);text-decoration:none}.sf a:hover{color:var(--text-primary);text-decoration:underline}
.sf .r{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}

@container site (max-width:900px){
  .post{grid-template-columns:minmax(0,1fr)}.toc{display:none}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container site (max-width:640px){
  .wrap{padding:0 20px}
  .hero{grid-template-columns:1fr;gap:32px;padding:40px 0 40px}
  .hero h1{font-size:57px;line-height:60px}
  .pin{max-width:220px;margin:0 auto}
  .lead{font-size:16px;line-height:24px}
  .ph1{font-size:36px;line-height:44px}
  .phead{padding:32px 0 24px}
  .now,.otc,.cards,.cards.two,.facts{grid-template-columns:1fr}
  .rows a{grid-template-columns:1fr;gap:4px}.rows .tags{justify-content:flex-start}
  .sec{padding:32px 0}
  .skills{grid-template-columns:1fr}.skills dt{border-bottom:0;padding-bottom:0}
  .pn{grid-template-columns:1fr}.pn a.next{grid-column:1}
  .ahead{grid-template-columns:1fr;gap:20px;padding:32px 0 24px}.ahead img{width:96px;height:96px}
  .cgrid{grid-template-columns:1fr;gap:40px}
  .sf .r{margin-left:0}
  .acts .btn{flex:1}
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* the home page (L01 I) is lansenou/web/home.html in a frame: the desktop board is one 1440 x 900 screen, the phone fills its viewport */
.home-i{height:900px}.home-i.phone{height:100%;min-height:640px}
.home-frame{display:block;width:100%;height:100%;border:0}