/* Rational Systems — the project menus (projects.html; the alternatives projects2–3.html), each one an old handset's menu screen:
   a title bar, the menu, and the soft keys, filling the window. The holograms (stage3d.js) are drawn on a
   canvas behind it all, into the .os-slot boxes, so the layout here places and sizes them too. */

body.os {
  --column: max(var(--gutter), calc((100vw - var(--sheet)) / 2)); /* inset that aligns with the content column */
  height: 100vh;
  height: 100svh;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.os > header, .os > main, .os > nav, .os > footer { position: relative; z-index: 1; }
.holo-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.os-main { min-height: 0; animation: channel .5s ease-out .05s backwards; touch-action: pan-y; }

/* Without WebGL the flat symbols stand in the slots; with it they make way for the holograms */
.os-slot { position: relative; display: block; width: 100%; height: 100%; }
.os-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.is-3d .os-slot img { visibility: hidden; }
.os-item, .os-cell { color: inherit; -webkit-tap-highlight-color: transparent; }
.os-item:focus-visible, .os-cell:focus-visible { outline: 1px dashed var(--dim); outline-offset: 6px; }

/* ── Title bar: the mark (home), what this screen is, where you are; on projects.html the main menu too,
   measured like the inner pages' .bar so the header doesn't jump between pages ── */
.os-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--column);
  border-bottom: 1px solid var(--line);
}
/* Home: the mark, the home's hologram small and turning (its picture stands in where there's no WebGL),
   with the name beside it on projects.html; both light up with the misconvergence on hover */
.os-bar__home {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: var(--fg);
  text-decoration: none;
}
.os-bar__mark { display: block; flex: none; width: 26px; aspect-ratio: 820.59 / 1037.22; }
.os-bar__mark img { transition: filter .25s ease-out; }
.os-bar__home:hover img,
.os-bar__home:focus-visible img { filter: drop-shadow(-1.5px 0 rgba(255, 75, 62, .75)) drop-shadow(1.5px 0 rgba(79, 134, 255, .75)); }
.os-bar__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: .68rem;
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: text-shadow .25s ease-out;
}
.os-bar > .os-bar__title, /* a screen's title (the alternatives) stays lit */
.os-bar__home:hover .os-bar__title,
.os-bar__home:focus-visible .os-bar__title { text-shadow: var(--fringe); }
.os-hidden { /* for screen readers only */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.os-count {
  font-family: var(--f-body);
  font-size: .68rem;
  letter-spacing: .2em;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Soft keys: OPEN on the left, the pad in the middle, BACK on the right ── */
.os-keys {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px var(--column) max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.os-key {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: var(--fg);
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
}
.os-key--right { justify-self: end; }
.os-key span { transition: text-shadow .25s ease-out; }
.os-key[href]:hover span,
.os-key:focus-visible span { text-shadow: var(--fringe); }
/* OPEN with nowhere to go yet: off, and saying so */
.os-key.is-off { color: var(--dim); cursor: default; }
.os-key.is-off kbd { opacity: .4; }
.os-key kbd {
  padding: 3px 6px 4px;
  border: 1px solid var(--line);
  font-family: var(--f-body);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: lowercase;
  color: var(--dim);
}
.os-pad { display: flex; gap: 8px; }
.os-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  background: none;
  color: var(--dim);
  cursor: pointer;
  transition: color .25s ease-out, border-color .25s ease-out, filter .25s ease-out;
}
.os-arrow::before { /* a drawn triangle, so no platform swaps it for an emoji */
  content: "";
  width: 8px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
.os-arrow--next::before { clip-path: polygon(0 0, 0 100%, 100% 50%); }
.os-arrow:hover,
.os-arrow:focus-visible {
  color: var(--fg);
  border-color: var(--fg);
  filter: drop-shadow(-1.5px 0 rgba(255, 75, 62, .75)) drop-shadow(1.5px 0 rgba(79, 134, 255, .75));
}

/* ── What the selected project is ── */
.os-info { display: grid; justify-items: center; gap: 12px; text-align: center; }
/* its catalogue line, as on a product sheet: RS-001 · CATEGORY · YEAR */
.os-ref {
  margin-top: -4px;
  font-family: var(--f-body);
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
/* a way to its site (projects.html), off and saying so until it has one, like OPEN */
.os-visit {
  margin-top: 8px;
  padding: 12px 20px 12px calc(20px + .24em); /* the extra left pad balances the trailing letter-spacing */
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: .68rem;
  line-height: 1;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .25s ease-out, text-shadow .25s ease-out;
}
.os-visit[href]:hover,
.os-visit[href]:focus-visible { border-color: var(--fg); text-shadow: var(--fringe); }
.os-visit.is-off { color: var(--dim); cursor: default; }
.os-desc {
  max-width: 40ch;
  font-family: var(--f-body);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--soft);
}
/* Its state, with a light in the mark's own green (online) or yellow (still in development) */
.os-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--soft);
}
.os-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--state, var(--dim));
  box-shadow: 0 0 10px var(--state, transparent);
}
.os-status[data-status="online"] { --state: #00c641; }
.os-status[data-status="development"] { --state: #f5bc00; }
.os-status[data-status="development"]::before { animation: blink 1.6s steps(1, end) infinite; }
.os .is-switching { animation: retune .35s ease-out; }

/* ── 1 · One big icon (projects.html): the selected project alone in the middle with its name under it,
   one block, as on the home; level with it on the right every project small, with a frame and the scroll bar
   on the selected one, so you can tell there are more ── */
.os--single .os-main {
  --icon: min(38vh, 360px, 58vw);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(18px, 3.2vh, 34px);
  padding: clamp(16px, 3vh, 36px) var(--column);
}
.os--single .os-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(100vw - 2 * var(--column)); /* the column's width, so the index sits at its edge */
  height: var(--icon);
}
.os-icons { display: grid; place-items: center; }
.os--single .os-item { grid-area: 1 / 1; display: block; width: var(--icon); height: var(--icon); }
.os--single .os-item:not(.is-selected) { display: none; }
html:not(.is-3d) .os--single .os-item.is-selected img { animation: emerge .5s cubic-bezier(.2, .7, .2, 1); }
/* The side: the index level with the big icon, and under it where you are (01 / 03) */
.os-side { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.os-side .os-count { position: absolute; top: calc(100% + 16px); right: 0; } /* hung below, so the index stays centred */
.os-index {
  --size: clamp(44px, 7vh, 68px);
  --gap: clamp(6px, 1.4vh, 14px);
  position: relative;
  display: grid;
  gap: var(--gap);
  margin-right: 16px; /* room for the scroll bar beside it */
}
/* The scroll bar beside the index: its track, and the bright stretch level with the selected project */
.os-index::before,
.os-index::after {
  content: "";
  position: absolute;
  right: -16px;
  width: 3px;
}
.os-index::before { top: 0; bottom: 0; background: var(--line); }
.os-index::after {
  top: calc(var(--i, 0) * (var(--size) + var(--gap)));
  height: var(--size);
  background: var(--fg);
  box-shadow: -1.5px 0 rgba(255, 75, 62, .75), 1.5px 0 rgba(79, 134, 255, .75);
  transition: top .3s cubic-bezier(.2, .7, .2, 1), left .3s cubic-bezier(.2, .7, .2, 1);
}
.os-mini {
  position: relative;
  display: block;
  width: var(--size);
  height: var(--size);
  padding: 18%;
}
.os-mini .os-slot { opacity: .45; transition: opacity .25s ease-out; } /* the hologram dims with it */
.os-mini:hover .os-slot { opacity: .8; }
.os-mini.is-selected .os-slot { opacity: 1; }
/* one frame for the selected one, sliding along like the scroll bar (its corners are drawn with the grid's below,
   whose inset this outranks) */
.os-index .os-index__frame {
  inset: auto;
  top: calc(var(--i, 0) * (var(--size) + var(--gap)));
  left: 0;
  width: var(--size);
  height: var(--size);
  transition: top .3s cubic-bezier(.2, .7, .2, 1), left .3s cubic-bezier(.2, .7, .2, 1);
}
/* On a narrow screen the side has no room: the index becomes a row under the big icon, its bar underneath */
@media (max-width: 640px) {
  .os--single .os-stage { width: 100%; height: auto; grid-template-rows: var(--icon) auto; row-gap: 14px; }
  .os-side { position: static; display: grid; justify-items: center; transform: none; }
  .os-side .os-count { position: static; margin-top: 12px; }
  .os-index { margin: 0 0 12px; grid-auto-flow: column; justify-content: center; }
  .os-index::before,
  .os-index::after { right: auto; top: auto; bottom: -12px; width: auto; height: 3px; }
  .os-index::before { left: 0; right: 0; }
  .os-index::after { left: calc(var(--i, 0) * (var(--size) + var(--gap))); width: var(--size); }
  .os-index .os-index__frame { top: 0; left: calc(var(--i, 0) * (var(--size) + var(--gap))); }
}

/* ── 2 · Icon grid (projects2.html): every project at once, the selected one framed, grown and turning,
   its name in the title bar; the cells to spare wait empty and numbered ── */
.os--grid .os-main {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(24px, 5vh, 48px);
  padding: clamp(20px, 4vh, 48px) var(--column);
}
.os-grid {
  --cell: clamp(92px, min(18vh, 26vw), 180px);
  display: grid;
  grid-template-columns: repeat(3, var(--cell));
  gap: clamp(10px, 2vw, 24px);
}
.os-cell {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--cell);
  aspect-ratio: 1;
  text-decoration: none;
}
/* corner brackets: dim on every cell, bright on the selected one (and on the one-icon layout's index) */
.os-cell::before,
.os-cell::after,
.os-mini::after,
.os-index__frame {
  --c: #262c36;
  --l: 16px;
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--l);
  background-repeat: no-repeat;
  pointer-events: none;
}
.os-cell::after,
.os-mini::after,
.os-index__frame {
  --c: var(--fg);
  --l: 22px;
  filter: drop-shadow(-1.5px 0 rgba(255, 75, 62, .8)) drop-shadow(1.5px 0 rgba(79, 134, 255, .8));
}
.os-cell::after,
.os-mini::after {
  opacity: 0;
  transform: scale(1.14);
  transition: opacity .2s ease-out, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.os-mini::after, .os-index__frame { --l: 10px; }
.os-cell.is-selected::after { opacity: 1; transform: none; }
.os-cell:not(.is-selected):hover::after, .os-mini:not(.is-selected):hover::after { opacity: .3; transform: none; }
.os-cell .os-slot { width: 62%; height: 62%; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.os-cell.is-selected .os-slot { transform: scale(1.24); }
.os-cell--empty {
  font-family: var(--f-body);
  font-size: .62rem;
  letter-spacing: .2em;
  color: #2c333e;
}

/* ── 3 · Row with a list (projects3.html): the projects in a row that slides so the selected one, bigger,
   always sits on the left; under it, what it is and what you can do with it ── */
.os--row .os-main {
  --small: clamp(54px, 9vh, 92px);
  --big: clamp(116px, 21vh, 210px);
  --gap: clamp(18px, 2.6vw, 40px);
  --top: clamp(28px, 10vh, 110px);
  overflow: hidden;
}
.os-row {
  position: absolute;
  left: 0;
  top: var(--top);
  display: flex;
  align-items: center;
  gap: var(--gap);
  height: var(--big);
  /* the ones before the selected are small, so this puts the selected one's left edge on the column's */
  transform: translateX(calc(var(--column) - var(--i, 0) * (var(--small) + var(--gap))));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.os-row .os-item {
  flex: none;
  width: var(--small);
  height: var(--small);
  transition: width .45s cubic-bezier(.2, .7, .2, 1), height .45s cubic-bezier(.2, .7, .2, 1), opacity .45s ease-out;
}
.os-row .os-item.is-selected { width: var(--big); height: var(--big); }
.os-row .os-item.is-before { opacity: .18; }
.os-row .os-item.is-after { opacity: .62; }
.os-panel {
  position: absolute;
  left: var(--column);
  right: var(--column);
  top: calc(var(--top) + var(--big) + clamp(20px, 4vh, 44px));
  display: grid;
  justify-items: start;
  gap: 14px;
  max-width: 560px;
}
.os-panel .os-desc { max-width: none; }
.os-rule { width: 100%; height: 1px; margin: 2px 0; background: var(--line); }
.os-options { display: grid; gap: 2px; margin: 10px 0 0; padding: 0; list-style: none; }
.os-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: var(--dim);
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s ease-out, text-shadow .2s ease-out;
}
.os-option::before { /* the cursor */
  content: "";
  width: 7px;
  height: 9px;
  background: currentColor;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s ease-out, transform .2s ease-out;
}
.os-option.is-active { color: var(--fg); text-shadow: var(--fringe); }
.os-option.is-active::before { opacity: 1; transform: none; }
.os-option.is-off { cursor: default; }
.os-option.is-off.is-active { color: var(--soft); text-shadow: none; }
/* The keys, spelled out along the bottom */
.os-hints {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px clamp(16px, 3vw, 36px);
  padding: 16px var(--column) max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-family: var(--f-body);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}
.os-hints kbd { margin-right: 8px; font-family: inherit; color: var(--soft); }