/* ---------------------------------------------------------------------------
 * Carbon & Giallo — the shared world for mobileview.dev.
 *
 * Same materials as the extension panel: carbon substrate, a single giallo
 * accent that only ever means "live", and a chamfered silhouette instead of a
 * uniform radius. The site is always dark: the product draws phones on carbon,
 * and a second light surface would fight them.
 * ------------------------------------------------------------------------- */

@font-face {
  font-family: "Tanker";
  src: url("fonts/tanker.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #100e0c;
  --surface: #1b1815;
  --surface-2: #262220;
  --edge: rgba(255, 255, 255, 0.09);
  --edge-strong: rgba(255, 255, 255, 0.18);
  --text: #f6f3ed;
  --text-muted: #b5ac9f;
  --text-faint: #8d8578;
  --accent: #ffd400;
  --accent-ink: #0c0b0a;
  --accent-text: #ffd400;
  --accent-soft: rgba(255, 212, 0, 0.13);
  --weave-hi: rgba(255, 255, 255, 0.028);
  --weave-lo: rgba(0, 0, 0, 0.5);
  /* the one light source, and it is warm: the same lamp light as the artwork */
  --rake: rgba(255, 214, 150, 0.075);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* The substrate: a 2x2 carbon twill, felt rather than seen, plus one
 * directional rake from the top-left. One light source, never a centred halo. */
.twill {
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(45deg, var(--weave-hi) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, var(--weave-lo) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(45deg, var(--weave-lo) 0 4px, transparent 4px 8px);
  background-size: 8px 8px, 8px 8px, 16px 16px;
}

.rake::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(146deg, var(--rake) 0%, transparent 46%),
    linear-gradient(28deg, rgba(255, 186, 84, 0.05) 0%, transparent 34%);
}

/* Fine grain, so large fills never band and the surface reads as physical. */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("grain.svg");
  background-size: 180px 180px;
}

/* ---------------------------------------------------------------------------
 * The signature silhouette: one chamfered corner. The element paints a 1px
 * edge; ::before paints the fill inset by 1px with a slightly smaller cut, so
 * the diagonal reads as a machined lip rather than a drawn line.
 * Content must be padded clear of the cut wherever this is used.
 * ------------------------------------------------------------------------- */
.blade {
  --cut: 12px;
  position: relative;
  background: var(--edge);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.blade::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  background: var(--blade-fill, var(--surface));
  clip-path: polygon(
    0 0,
    calc(100% - (var(--cut) - 1px)) 0,
    100% calc(var(--cut) - 1px),
    100% 100%,
    0 100%
  );
  transition: background-color 0.15s ease;
}
/* Only elements rise above the fill — a bare text node would sit under it. */
.blade > * {
  position: relative;
  z-index: 1;
}
.blade-bl {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.blade-bl::before {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(var(--cut) - 1px) 100%,
    0 calc(100% - (var(--cut) - 1px))
  );
}

/* ---- type roles: three, and they read differently ---------------------- */

/* Display. Latin and digits only — Tanker has no Cyrillic. */
.display {
  font-family: "Tanker", "Geist", system-ui, sans-serif;
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.005em;
}

/* Data: sizes, device names, counts. Never running prose. */
.data {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.lede {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-muted);
}

a {
  color: inherit;
}

/* ---- the one action ------------------------------------------------------
 * Giallo means live, so the install button is the only giallo surface on the
 * page. It does not lift on hover; it deepens, and it presses DOWN.
 * ------------------------------------------------------------------------ */
.cta {
  --cut: 14px;
  --blade-fill: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 26px 17px 24px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.09s ease;
}
.cta::before {
  background: var(--accent);
}
.cta:hover {
  --blade-fill: #ffe14d;
}
.cta:hover::before {
  background: #ffe14d;
}
.cta:active {
  transform: translateY(2px);
}
.cta .cta-arrow {
  flex: none;
  transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.cta:hover .cta-arrow {
  transform: translate(3px, -3px);
}
.cta:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

/* A quiet second action: text with a tonal shift, never an outlined twin of
 * the filled button. */
.quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.14s ease;
}
.quiet:hover {
  color: var(--text);
}

/* ---- nav: contained, not a flush row of links --------------------------- */
.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 9px 10px 9px 16px;
  --cut: 14px;
  /* the one place a blade fill is translucent: the bar has to read as
     floating over the page it covers. Kept high enough that the edge cannot
     bleed through and eat the label. */
  --blade-fill: rgba(20, 19, 17, 0.93);
  backdrop-filter: blur(14px) saturate(1.2);
  transition: transform 0.24s cubic-bezier(0.3, 0.8, 0.3, 1);
}
/* A bar pinned over the page permanently sits on somebody's sentence. It gets
 * out of the way on the way down and comes back the moment you head up, which
 * is when a menu is wanted anyway. */
.nav.away {
  transform: translateX(-50%) translateY(calc(-100% - 24px));
}
.nav .mark {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.nav .wordmark {
  font-family: "Tanker", "Geist", system-ui, sans-serif;
  white-space: nowrap;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  line-height: 1;
  padding-top: 2px;
}
.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.14s ease;
}
.nav-link:hover {
  color: var(--text);
}
.nav .cta {
  padding: 9px 15px;
  font-size: 0.8125rem;
  --cut: 10px;
}

/* ---- footer -------------------------------------------------------------- */
.foot {
  position: relative;
  overflow: hidden;
  padding: 74px 0 0;
  border-top: 1px solid var(--edge);
}
/* The note and the links sit together on the left margin. Splitting them to
 * opposite rims with a dead gulf between reads as unplaced, not composed. */
.foot-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 22px 72px;
  align-items: baseline;
}
.foot-links {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.foot-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.14s ease;
}
.foot-links a:hover {
  color: var(--accent-text);
}
.foot-note {
  color: var(--text-faint);
  font-size: 0.8125rem;
  max-width: 30ch;
}
/* The signature word sits on the layer ABOVE the substrate, flush to the
 * bottom edge with no gap under it, and bleeds off the sides on purpose. */
.foot-word {
  position: relative;
  z-index: 1;
  display: block;
  margin: 54px 0 0;
  padding: 0 22px;
  font-family: "Tanker", "Geist", system-ui, sans-serif;
  font-size: clamp(4rem, 17.4vw, 17rem);
  line-height: 0.78;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--edge-strong);
  white-space: nowrap;
  text-align: center;
  /* clear the cut: line-height 0.78 would shave the caps, so pad it back */
  padding-top: 0.1em;
  overflow: hidden;
}

/* On a phone the nav keeps only what it is for: the mark and the one action.
 * A link that wraps onto three lines is worse than a link that is not there. */
@media (max-width: 620px) {
  .nav {
    top: 12px;
    gap: 12px;
    padding: 8px 8px 8px 13px;
    max-width: calc(100% - 24px);
  }
  .nav-link {
    display: none;
  }
  .nav .wordmark {
    font-size: 0.9375rem;
  }
  .nav .cta {
    padding: 8px 12px;
    font-size: 0.75rem;
  }
  .foot-in {
    padding: 0 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}