/* kevintheo.com, desk design (October 2026).
   The site uses Lookout's own visual language: windows on a desk, an amber frame = waiting for you,
   a mint frame = done, no frame = the window you are working in. System fonts only, no external requests. */

:root{
  --desk:#E2E7ED;
  --win:#FFFFFF;
  --bar:#F4F5F7;
  --ink:#172033;
  --quiet:#5A6272;
  --hair:rgba(23,32,51,.09);
  --mint:#5ECFA0;
  --amber:#E8B25C;
  --label:rgba(0,0,0,.92);
  --focus:#2F6FEB;
  --shadow:0 0 0 1px rgba(23,32,51,.08),0 14px 34px -16px rgba(23,32,51,.35);
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{background:var(--desk);-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--desk);
  color:var(--ink);
  font-family:var(--ui);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1.5px;}
a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px;}
.skip{position:absolute;left:-9999px;top:6px;}
.skip:focus{left:12px;z-index:20;background:#fff;padding:6px 10px;border-radius:6px;}

/* ---------- menu bar ---------- */
.menubar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:22px;
  height:36px;padding:0 18px;
  background:rgba(244,246,249,.86);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--hair);
  font-size:14px;white-space:nowrap;
}
.menubar .app{font-weight:700;text-decoration:none;}
.menubar nav{display:flex;gap:18px;}
.menubar nav a{text-decoration:none;}
.menubar nav a:hover,.menubar nav a[aria-current="page"]{text-decoration:underline;}
.menubar .right{margin-left:auto;display:flex;align-items:center;gap:12px;font-variant-numeric:tabular-nums;}
/* Lookout's menu bar icon: one big tile, two small ones, the top right one filled */
.icon{position:relative;flex:none;width:20px;height:14px;}
.icon i{position:absolute;border:1.5px solid currentColor;border-radius:2px;}
.icon .a{left:0;top:0;width:11px;height:14px;}
.icon .b{left:13px;top:0;width:7px;height:6px;background:currentColor;}
.icon .c{left:13px;top:8px;width:7px;height:6px;}

/* ---------- windows ---------- */
.win{background:var(--win);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;}
.win.waiting{box-shadow:0 0 0 2.5px var(--amber),0 0 22px 2px rgba(232,178,92,.5),var(--shadow);}
.win.done{box-shadow:0 0 0 2.5px var(--mint),0 0 22px 2px rgba(94,207,160,.45),var(--shadow);}
.titlebar{
  display:flex;align-items:center;gap:12px;
  height:34px;padding:0 12px;
  background:var(--bar);border-bottom:1px solid var(--hair);
  font-size:13px;color:var(--quiet);
}
.dots{display:flex;gap:7px;}
.dots i{width:11px;height:11px;border-radius:50%;background:#D5D8DD;}
.active .dots i:nth-child(1){background:#FF5F57;}
.active .dots i:nth-child(2){background:#FEBC2E;}
.active .dots i:nth-child(3){background:#28C840;}
.tab{background:rgba(23,32,51,.06);border-radius:6px;padding:2px 9px;}
.wbody{padding:6px 16px 16px;}

/* Lookout's label: status, topic, first sentence */
.label{margin:10px;background:var(--label);color:#fff;border-radius:10px;padding:11px 14px;}
.label .st{font-weight:800;font-size:15px;letter-spacing:.01em;color:#D1D1D1;}
.label .st span{font-weight:600;color:#fff;margin-left:8px;letter-spacing:0;}
.waiting .label .st{color:var(--amber);}
.done .label .st{color:var(--mint);}
.label h2{font-size:16px;font-weight:600;line-height:1.35;margin:1px 0 0;}
.label p{margin:2px 0 0;font-size:14px;line-height:1.45;color:rgba(255,255,255,.86);}
.go{display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:600;font-size:15px;margin:10px 0 0;}
.small{font-size:15px;line-height:1.55;margin:8px 0 0;}
.thumb{border-radius:8px;border:1px solid var(--hair);margin-top:4px;}

/* ---------- the desk (home page) ---------- */
.desk{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr);
  gap:18px;align-items:start;
  max-width:1500px;margin:0 auto;padding:22px;
}
.col{display:grid;gap:18px;}
.center{align-self:stretch;display:flex;flex-direction:column;}
.center .win{flex:1;}
.active .wbody{padding:30px 36px 36px;}
.who{font-size:15px;color:var(--quiet);margin:0 0 18px;}
.who b{color:var(--ink);}
.hero{font-size:clamp(2rem,3.3vw,3.15rem);line-height:1.07;letter-spacing:-.025em;font-weight:800;margin:0;text-wrap:balance;}
.hero span{display:block;margin-top:.22em;font-weight:700;}
.intro{font-size:19px;line-height:1.6;margin:26px 0;max-width:32em;text-wrap:pretty;}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:0;}
.cta a{display:inline-block;padding:10px 16px;border-radius:9px;text-decoration:none;font-weight:600;font-size:15px;background:rgba(23,32,51,.06);}
.cta a:hover{background:rgba(23,32,51,.1);}
.cta a.primary{background:var(--ink);color:#fff;}
.cta a.primary:hover{background:#26324A;}
.about{margin-top:34px;padding-top:26px;border-top:1px solid var(--hair);}
.about h2{font-size:15px;color:var(--quiet);font-weight:600;margin:0 0 12px;}
.about p{margin:0 0 14px;max-width:34em;}
.desk-note{max-width:1500px;margin:0 auto;padding:2px 22px 0;font-size:14px;color:var(--quiet);}

/* the waiting window arrives, the way Lookout brings a window to you */
@media (prefers-reduced-motion:no-preference){
  .desk .win.waiting{animation:arrive .7s cubic-bezier(.2,.8,.2,1) .35s both;}
  @keyframes arrive{from{transform:translateX(60px);opacity:0;}to{transform:none;opacity:1;}}
}

/* ---------- reading pages: one big window ---------- */
.page{max-width:900px;margin:0 auto;padding:26px 22px 8px;}
.sheet .wbody{padding:40px 56px 52px;}
.back{display:inline-block;font-size:14px;color:var(--quiet);margin:0 0 22px;text-decoration:none;}
.back:hover{text-decoration:underline;}
.article h1{font-size:clamp(2rem,4.4vw,3.05rem);line-height:1.08;letter-spacing:-.025em;font-weight:800;margin:0;text-wrap:balance;}
.article .meta{font-size:14px;color:var(--quiet);margin:0 0 12px;}
.article .lede{font-size:20px;line-height:1.6;margin:18px 0 0;text-wrap:pretty;}
.article .cta{margin:22px 0 0;}
.article h2{font-size:24px;line-height:1.25;letter-spacing:-.015em;margin:46px 0 12px;}
.article h3{font-size:18px;line-height:1.35;margin:28px 0 6px;}
.article p,.article li{font-size:18px;line-height:1.7;}
.article p{margin:0 0 16px;}
.article ul,.article ol{margin:0 0 18px;padding-left:1.3em;}
.article li{margin:0 0 8px;}
.article li::marker{color:var(--quiet);}
.article strong{font-weight:650;}
.article pre{
  background:#11151B;color:#E6E8EC;border-radius:10px;
  padding:16px 18px;margin:0 0 18px;overflow-x:auto;
  font-family:var(--mono);font-size:14px;line-height:1.6;
}
.article code{font-family:var(--mono);font-size:.88em;background:rgba(23,32,51,.06);border-radius:5px;padding:1px 5px;}
.article pre code{background:none;padding:0;font-size:inherit;}
.part{margin-top:54px;padding-top:34px;border-top:1px solid var(--hair);}
.part > h2:first-child{margin-top:0;}

/* ---------- project pages: a wider window, the text in a calm column, the demo as wide as the window ---------- */
.page.wide{max-width:1180px;}
.wide .sheet .wbody{padding-top:34px;}
.prose{max-width:760px;margin:0 auto;}
/* the top: name and buttons on the left, what it is on the right, the demo below.
   Together they fit on the first screen, so you see the whole demo without scrolling. */
.opening{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,36rem);grid-template-areas:"name what" "media media";column-gap:56px;}
.opening .name{grid-area:name;}
.opening .what{grid-area:what;}
.opening .media{grid-area:media;}
.opening h1{display:flex;align-items:center;gap:.32em;}
.appicon{flex:none;width:1.2em;height:1.2em;margin-left:-.1em;}
.opening .cta{margin:22px 0 0;}
.article .opening .lede{margin:2px 0 0;font-size:19px;line-height:1.55;}
.opening .meta{margin:10px 0 0;}
/* the demo: as wide as the window, but never taller than the screen space left under the top (top + caption = 370px) */
.media{margin:30px auto 10px;width:100%;max-width:max(300px,calc((100vh - 370px) * 16 / 9));max-width:max(300px,calc((100svh - 370px) * 16 / 9));}
.media video,.media img{display:block;width:100%;height:auto;border-radius:12px;background:#0b0d12;
  box-shadow:0 0 0 1px rgba(23,32,51,.12),0 22px 44px -28px rgba(23,32,51,.6);}
.media video{cursor:zoom-in;}
.media video[controls]{cursor:auto;}
.media figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;
  margin-top:12px;font-size:14px;color:var(--quiet);}
.fs{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:8px;padding:7px 11px;
  font:600 14px/1 var(--ui);color:var(--ink);background:rgba(23,32,51,.06);cursor:pointer;}
.fs:hover{background:rgba(23,32,51,.1);}
.fs:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
.fs svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.fs[hidden]{display:none;}
/* features: the name on the left, what it does on the right */
.features{margin:6px 0 10px;border-bottom:1px solid var(--hair);}
.features section{display:grid;grid-template-columns:10.5rem minmax(0,1fr);gap:4px 28px;padding:20px 0 6px;border-top:1px solid var(--hair);}
.article .features h3{margin:0;font-size:17px;line-height:1.55;padding-top:2px;}
.article .features p{font-size:17px;line-height:1.65;}
/* amber line = something you should know before you start, like Lookout's amber frame */
.article .note{border-left:3px solid var(--amber);padding:2px 0 2px 16px;}
/* a narrower window makes the top taller, so the demo keeps more room free below it */
@media (max-width:1100px){
  .media{max-width:max(300px,calc((100vh - 440px) * 16 / 9));max-width:max(300px,calc((100svh - 440px) * 16 / 9));}
}
/* narrow screens: name and buttons, then the demo, then the text, so the demo is still on the first screen */
@media (max-width:900px){
  .opening{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "media" "what";}
  .opening .cta{margin-top:18px;}
  .opening .media{margin-bottom:22px;max-width:max(300px,calc((100vh - 310px) * 16 / 9));max-width:max(300px,calc((100svh - 310px) * 16 / 9));}
}

/* status words used inside the text */
.chip{display:inline-block;font-size:.8em;font-weight:800;letter-spacing:.01em;background:var(--label);border-radius:6px;padding:1px 7px;vertical-align:.08em;white-space:nowrap;}
.chip.c-wait{color:var(--amber);}
.chip.c-done{color:var(--mint);}
.chip.c-work,.chip.c-watch{color:#D1D1D1;}

/* incidents and the stack */
.incidents{list-style:none;padding:0;margin:0 0 18px;}
.incidents li{margin:0 0 18px;padding-left:16px;border-left:3px solid var(--amber);}
.incidents b{display:block;font-size:18px;}
.stack{display:grid;grid-template-columns:150px 1fr;gap:6px 18px;margin:0 0 18px;font-size:16px;line-height:1.55;}
.stack dt{font-weight:650;}
.stack dd{margin:0;color:var(--ink);}

/* ---------- footer ---------- */
.foot{max-width:1500px;margin:0 auto;padding:22px 22px 48px;font-size:14px;color:var(--quiet);}
.page + .foot{max-width:900px;}
.page.wide + .foot{max-width:1180px;}
.foot p{margin:0 0 6px;}

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  .desk{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .center{grid-column:1 / -1;order:-1;align-self:start;}
}
@media (max-width:700px){
  .menubar{gap:14px;padding:0 16px;font-size:13.5px;}
  .menubar nav{gap:14px;}
  .menubar .right,.menubar nav .gh{display:none;}
  .desk{grid-template-columns:minmax(0,1fr);padding:16px;gap:16px;}
  .col{gap:16px;}
  .active .wbody{padding:22px 18px 24px;}
  .intro{font-size:18px;}
  .desk-note{padding:0 16px;}
  .page{padding:16px 16px 4px;}
  .sheet .wbody{padding:24px 18px 30px;}
  .media{margin-top:24px;}
  .media video,.media img{border-radius:9px;}
  .article .opening .lede{font-size:17px;}
  .features section{grid-template-columns:minmax(0,1fr);padding-top:16px;}
  .article p,.article li{font-size:17px;}
  .article .lede{font-size:18px;}
  .stack{grid-template-columns:1fr;gap:0 0;}
  .stack dd{margin-bottom:10px;}
  .foot{padding:18px 16px 40px;}
}