@import url("https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300..800&display=swap");

/* Matthew Olapo: component styles. Values come from tokens.css; nothing here re-declares a token. */

.mo, .mo * { box-sizing: border-box; }
.mo {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface-100);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mo :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:where(.mo) a:where(:not(.mo-btn)) { color: inherit; } :where(.mo) a { text-decoration: none; }
.mo-upper { text-transform: uppercase; }
.mo-muted { color: var(--ink-muted); }

/* Underline: the only decoration. Grows from the left on hover. */
.mo-link { background: linear-gradient(var(--rule), var(--rule)) 0 100% / 0 1px no-repeat; transition: background-size var(--duration-hover) var(--ease-primary); padding-bottom: 2px; }
.mo-link:hover, .mo-link[aria-current="page"] { background-size: 100% 1px; }

/* SiteHeader: four meta columns, inverted over anything by difference blend. */
.mo-header { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); padding: var(--space-8) var(--space-8) 0; min-height: var(--space-16); }
.mo-header--fixed { position: fixed; inset: 0 0 auto 0; z-index: 10; mix-blend-mode: difference; color: #e1dfdd; background: none; }
.mo-header p { margin: 0; }
.mo-header nav { justify-self: end; }
@media (max-width: 767px) {
  .mo-header { grid-template-columns: 1fr auto; padding: var(--space-5) var(--space-5) 0; }
  .mo-header .mo-header__meta { display: none; }
}

/* Display titles */
.mo-display { margin: 0; text-transform: uppercase; }
.mo-display--underlined span { display: table; border-bottom: 3px solid var(--rule); padding-bottom: var(--space-1); margin-bottom: var(--space-3); }

/* SectionIndex: 01/   LABEL   descriptor */
.mo-index { display: grid; grid-template-columns: 1fr 2fr 1fr 1fr; gap: var(--space-5); align-items: start; padding: 0 var(--space-8); }
.mo-index > * { margin: 0; text-transform: uppercase; }
@media (max-width: 767px) { .mo-index { grid-template-columns: auto 1fr; padding: 0 var(--space-5); } .mo-index > :nth-child(n+3) { grid-column: 2; } }

/* CategoryTabs: Kree8's category switch as Richard's stacked words */
.mo-tabs { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; padding: 0; list-style: none; }
.mo-tabs button { all: unset; cursor: pointer; text-transform: uppercase; color: var(--ink-faint); transition: color var(--duration-hover) var(--ease-primary); }
.mo-tabs button:hover { color: var(--ink-muted); }
.mo-tabs button[aria-selected="true"] { color: var(--ink); }
.mo-tabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.mo-tabs sup { font-size: 20px; line-height: 1; vertical-align: top; margin-left: var(--space-1); position: relative; top: 0.4em; font-weight: 400; }
.mo-tabs--row { flex-direction: row; flex-wrap: wrap; gap: var(--space-6); }
.mo-tabs--row button { font-size: 20px; line-height: 1.18; color: var(--ink-muted); }
.mo-tabs--row button[aria-selected="true"] { color: var(--ink); background: linear-gradient(var(--rule), var(--rule)) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }

/* DeviceFrame: the only rounded thing on the site */
.mo-device { position: relative; width: 100%; aspect-ratio: 393 / 852; background: transparent; border-radius: 13% / 6%; padding: 0; }
.mo-device__screen { width: 100%; height: 100%; border-radius: inherit; overflow: hidden; display: grid; place-items: center; }
.mo-device__screen img, .mo-device__screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-device__island { position: absolute; top: 3.4%; left: 50%; width: 27%; height: 3.8%; transform: translateX(-50%); background: var(--device); border-radius: 999px; }
.mo-slot { font-size: 14px; line-height: 1.3; font-weight: 500; color: var(--ink-muted); text-transform: uppercase; text-align: center; padding: 12px; }

/* ProjectStage: one flat plane, three screens, metadata row below */
.mo-stage { display: flex; flex-direction: column; gap: var(--space-5); }
.mo-stage__plane { background: var(--surface-200); padding: var(--space-12); display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); justify-content: center; gap: var(--space-6); }
.mo-stage__plane--web { grid-template-columns: minmax(0, 1fr); }
.mo-stage__meta { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: var(--space-5); align-items: baseline; }
.mo-stage__meta > * { margin: 0; }
.mo-stage__meta h3 { font: inherit; text-transform: uppercase; }
.mo-stage__meta .mo-caption { color: var(--ink-muted); }
@media (max-width: 767px) {
  .mo-stage__plane { padding: var(--space-5); gap: var(--space-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mo-stage__meta { grid-template-columns: 1fr auto; }
  .mo-stage__meta > :nth-child(2), .mo-stage__meta > :nth-child(3) { grid-column: 1; }
}

/* BrowserFrame: flat window for web work */
.mo-browser { background: var(--device); padding: 0; }
.mo-browser__bar { height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.mo-browser__bar i { width: 8px; height: 8px; background: #3a3a3a; display: block; }
.mo-browser__view { aspect-ratio: 16 / 10; background: var(--surface-300); display: grid; place-items: center; }

/* ProjectFeature: Richard's editorial row, big underlined title left, tall picture right */
.mo-feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
.mo-feature__text { display: flex; flex-direction: column; gap: var(--space-8); }
.mo-feature__desc { margin: 0 0 0 16.66%; max-width: 22ch; text-transform: uppercase; }
.mo-feature__media { aspect-ratio: 4 / 5; background: var(--surface-300); overflow: hidden; }
.mo-feature__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) contrast(1.02); transition: transform var(--duration-reveal) var(--ease-primary); }
.mo-feature:hover .mo-feature__media img { transform: scale(1.04); }
@media (max-width: 767px) { .mo-feature { grid-template-columns: 1fr; } .mo-feature__desc { margin-left: 0; } }

/* Button: square, ink or outline */
.mo-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); height: 56px; padding: 0 var(--space-6); font-family: var(--font-sans); font-size: 20px; line-height: 1; text-transform: uppercase; border-radius: var(--radius-none); transition: background-color var(--duration-hover) var(--ease-primary), color var(--duration-hover) var(--ease-primary); }
.mo-btn--primary { background: var(--inverse); color: var(--on-inverse); }
.mo-btn--primary:hover { background: var(--accent); color: var(--on-accent); }
.mo-btn--outline { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.mo-btn--outline:hover { background: var(--ink); color: var(--surface-100); }
.mo-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.mo-btn svg { width: 20px; height: 20px; }

/* Preloader: black field, count to 100 bottom right */
.mo-preloader { background: #000000; color: #e1dfdd; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-8); }
.mo-preloader p { margin: 0; }
.mo-preloader__count { align-self: flex-end; font-variant-numeric: tabular-nums; }

/* ContactBlock: accent plane closing every page */
.mo-contact { background: var(--accent); color: var(--on-accent); padding: var(--space-20) var(--space-8); display: grid; gap: var(--space-8); }
.mo-contact h2 { margin: 0; }
.mo-contact__row { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; justify-content: space-between; }
.mo-contact .mo-btn--primary { background: var(--on-accent); color: var(--accent); }
.mo-contact .mo-btn--primary:hover { background: #000000; color: #e1dfdd; }
.mo-contact .mo-btn--outline { box-shadow: inset 0 0 0 1px var(--on-accent); color: var(--on-accent); }
.mo-contact .mo-btn--outline:hover { background: var(--on-accent); color: var(--accent); }
.mo-contact :focus-visible { outline-color: var(--on-accent); }

/* Reveal: line mask rise, used by display titles */
.mo-reveal { overflow: hidden; display: block; }
.mo-reveal > span { display: inline-block; transform: translateY(105%); transition: transform var(--duration-reveal) var(--ease-primary); }
.mo-reveal.is-in > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .mo-reveal > span { transform: none; transition: none; } }