/* OTT personal site. Colours and fonts are the CreativeOS hub's own
   (companies/creativeos/app/index.html): warm black page, warm off-white text,
   one colour per product, four Google Fonts families (open licence). */

:root{
  --bg:#11100D; --line:#2D2A24; --line-2:#47433A;
  --hi:#EEEAE1; --mid:#ABA597; --lo:#968F82;
  --fv:#F0613F; --zi:#3FB3D9; --iu:#86C43A; --ar:#9C8CFF; --ex:#F062A8;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --poster:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --gut:clamp(16px,4vw,56px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--hi);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
:focus-visible{outline:2px solid var(--fv);outline-offset:3px}
.mono{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.skip{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--hi);color:var(--bg);padding:10px 14px;font:500 14px var(--sans)}
.skip:focus{left:8px}

/* the clip counter: a tape-counter readout fixed at the top right, driven by scroll (see main.js) */
.tc{position:fixed;top:14px;right:var(--gut);z-index:5;color:var(--mid);font:500 12px var(--mono);letter-spacing:.12em;mix-blend-mode:difference;pointer-events:none}

/* ---------- OPENING ---------- */
.hero{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:var(--gut);padding:20px 0 0 var(--gut)}
.top{grid-column:1;color:var(--mid);padding-right:90px}
.titles{grid-column:1;align-self:center;padding-block:6vh 4vh}
h1{margin:0}
.ott{display:block;font:900 clamp(10rem,36vw,34rem)/.78 var(--poster);letter-spacing:.01em;margin-left:-.04em}
.aka{display:block;font:500 clamp(1.7rem,3.6vw,3.2rem)/1.1 var(--serif);margin-top:2.2vh;overflow-wrap:anywhere}
.aka-word{color:var(--mid)}
.role{margin:18px 0 0;color:var(--hi);letter-spacing:.14em}
.bars{display:flex;grid-column:2;grid-row:1 / span 2;min-height:100%}
.bars i{flex:1;transform-origin:bottom;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.bars i:nth-child(1){background:var(--fv);animation-delay:.1s}
.bars i:nth-child(2){background:var(--zi);animation-delay:.2s}
.bars i:nth-child(3){background:var(--iu);animation-delay:.3s}
.bars i:nth-child(4){background:var(--ar);animation-delay:.4s}
.bars i:nth-child(5){background:var(--ex);animation-delay:.5s}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- SECTIONS ---------- */
.reel{padding-block:96px;padding-block:clamp(72px,12vh,140px);padding-inline:var(--gut);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(90px,.7fr) 4fr;gap:var(--gut)}
.n{margin:0;color:var(--lo);padding-top:.9em}
.body > :first-child{margin-top:0}
.badge{display:inline-block;margin:0 0 22px;border:1px solid var(--line-2);padding:5px 10px;color:var(--hi)}
.title{margin:0 0 .3em;font:600 clamp(2.6rem,6vw,5.4rem)/1 var(--serif);letter-spacing:-.015em}
.lede{max-width:56ch;color:var(--mid);margin:0 0 1.4em}
.label{margin:0 0 22px;font-size:clamp(1.2rem,2vw,1.4rem);color:var(--mid)}
.big{font:400 clamp(1.5rem,2.6vw,2.2rem)/1.35 var(--serif);max-width:34ch;margin:0 0 22px}
.textlink{color:var(--hi);text-underline-offset:5px}
.about .body > p{font:400 clamp(1.25rem,2vw,1.7rem)/1.5 var(--serif);max-width:52ch;margin:0}

.btn{display:inline-block;padding:12px 22px;font:500 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1px solid var(--hi);color:var(--hi);background:none}
a.btn:hover{background:var(--hi);color:var(--bg)}
.btn-off{border:1px dashed var(--line-2);color:var(--lo);cursor:not-allowed}

/* ---------- THE SIGNATURE: calibration bars that open ---------- */
.spectrum{display:flex;height:min(46vh,420px);margin:36px 0 0;padding:0;list-style:none}
.bar{flex:1;min-width:0;color:var(--bg);padding:18px 16px;position:relative;overflow:hidden;transition:flex .6s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;justify-content:space-between}
.bar:hover,.bar:focus-visible,.bar:focus-within{flex:5}
.bar:focus-visible{outline:3px solid var(--bg);outline-offset:-8px}
.nm{margin:0;font:800 clamp(1.5rem,2.6vw,2.4rem)/1 var(--poster);text-transform:uppercase;letter-spacing:.01em;writing-mode:vertical-rl;transform:rotate(180deg);align-self:flex-start;white-space:nowrap}
.ds{margin:0;max-width:34ch;font-size:15px;line-height:1.4;font-weight:500;opacity:0;transform:translateY(8px);transition:opacity .4s .12s,transform .4s .12s}
.st{display:block;margin-top:8px;font-size:11px}
.bar:hover .ds,.bar:focus-visible .ds,.bar:focus-within .ds{opacity:1;transform:none}
.bar.fv{background:var(--fv)} .bar.zi{background:var(--zi)} .bar.iu{background:var(--iu)} .bar.ar{background:var(--ar)} .bar.ex{background:var(--ex)}

/* ---------- PICTURES OF THE REAL APPS ---------- */
/* KolTheia: a wide row (laptop, tablet, phone) under its heading. Only pictures that exist are rendered. */
.stage{grid-column:1 / -1;display:grid;grid-template-columns:7fr 3fr 2fr;gap:clamp(12px,2vw,28px);align-items:end;margin-top:clamp(36px,6vh,72px)}
.shot{margin:0}
.pic{display:block;width:100%;height:auto;border:1px solid var(--line-2);background:var(--bg)}
.shot figcaption{margin-top:10px;color:var(--lo)}
/* CreativeOS: one laptop picture per product that has one */
.gallery{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(20px,2.6vw,36px);align-items:start}
.gallery .dot{display:inline-block;width:10px;height:10px;margin-right:8px;background:var(--c)}
.gallery .fv{--c:var(--fv)} .gallery .zi{--c:var(--zi)} .gallery .iu{--c:var(--iu)} .gallery .ar{--c:var(--ar)} .gallery .ex{--c:var(--ex)}

/* ---------- CONTACT ---------- */
.links{list-style:none;margin:0;padding:0}
.links li{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 0;flex-wrap:wrap}
.links li:last-child{border-bottom:1px solid var(--line)}
.links a{font:600 clamp(1.8rem,4vw,3.4rem)/1 var(--serif);text-decoration:none}
.links a::after{content:" \2197";font:400 .5em var(--sans);color:var(--lo);vertical-align:.45em}
.links a:hover{color:var(--fv)}
.links span{color:var(--mid)}

.foot{padding:28px var(--gut) 56px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--lo)}

/* ---------- PHONES AND TOUCH: the bars lie flat as stacked rows, all text visible ---------- */
@media (max-width:760px){
  .hero{grid-template-columns:1fr;grid-template-rows:auto 1fr 14vh;padding:20px 0 0}
  .top,.titles{padding-inline:var(--gut)}
  .bars{grid-column:1;grid-row:3}
  .reel{grid-template-columns:1fr;gap:8px}
  .n{padding-top:0}
}
@media (max-width:900px){
  .stage{grid-template-columns:3fr 2fr}
  .shot-laptop{grid-column:1 / -1}
}
@media (max-width:760px),(hover:none){
  .spectrum{flex-direction:column;height:auto}
  .bar{flex:none;flex-direction:row;align-items:center;gap:16px;padding:16px;min-height:76px}
  .nm{writing-mode:horizontal-tb;transform:none;font-size:1.8rem;flex:0 0 auto}
  .ds{opacity:1;transform:none;font-size:14px}
  .st{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bars i{animation:none}
  .bar,.ds{transition:none}
}

/* KolTheia's two proofs (2026-10-27: Canonlock became part of KolTheia). Two plain rows, each named. */
.does{list-style:none;margin:0 0 1.6em;padding:0;max-width:62ch;border-top:1px solid var(--line)}
.does li{display:grid;grid-template-columns:9.5em 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--mid);font-size:1.05rem;line-height:1.5}
.does .mono{color:var(--hi);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding-top:.3em}
@media (max-width:560px){.does li{grid-template-columns:1fr;gap:4px}}