/* Hybrid version: the folder tabs, a line that types itself on the first
   screen, and the live dial inside the Dashboard folder. */

/* ---------- The first screen ----------
   Three steps of hierarchy: the big typing line, a quiet paragraph at low
   opacity, then one quiet link. The block sits a little above the true
   centre, which reads as centred. */

.hero-intro {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 var(--pad) clamp(28px, 7vh, 110px);
}


.typeline {
  max-width: 20ch;
  min-height: 2.15em;
  font-size: clamp(26px, 3.4vw, 58px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.035em;
}

.hero-blurb {
  margin-top: clamp(18px, 1.8vw, 30px);
  max-width: 46ch;
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.65;
  color: var(--ink);
  opacity: .45;
}

.hero-cta {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  margin-top: clamp(22px, 2.2vw, 36px);
  color: var(--blue);
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 400;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
  padding-bottom: 2px;
  transition: border-color .2s;
}
.hero-cta::after { content: '\2192'; transition: transform .25s var(--ease); }
.hero-cta:hover, .hero-cta:focus-visible { border-bottom-color: currentColor; }
.hero-cta:hover::after, .hero-cta:focus-visible::after { transform: translateX(4px); }

.typeline-caret {
  display: inline-block;
  width: .055em;
  height: .86em;
  margin-left: .06em;
  vertical-align: -.06em;
  background: var(--blue);
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .typeline-caret { display: none; } }

/* ---------- Taken from the clock version ---------- */

/* A coloured square beside each section label */
.v-hybrid .c-dashboard { --dot: #a0a0a0; }
.v-hybrid .c-calendar  { --dot: #d4c080; }
.v-hybrid .c-projects  { --dot: #80c0d0; }
.v-hybrid .c-tasks     { --dot: #b8a0d4; }
.v-hybrid .c-plans     { --dot: #a8c490; }
.v-hybrid .c-about     { --dot: #d4a09a; }
.v-hybrid .c-get       { --dot: #8ea8d4; }

.v-hybrid .kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: 1;
}
.v-hybrid .kicker::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--dot);
}

/* Softer corners on the screenshots */
.v-hybrid .shot img { border-radius: 14px; }

@media (max-width: 699px) {
  .hero-intro { padding: 0 24px clamp(16px, 4vh, 40px); }
  .typeline { font-size: 24px; min-height: 3.2em; }
  .hero-blurb { font-size: 15px; }
}


/* ---------- Ticker: one line, quieter, with room around it ---------- */

.v-hybrid .ticker {
  display: block;
  height: auto;
  margin-bottom: clamp(36px, 5vw, 88px);
  padding: 9px 0;
}
.v-hybrid .ticker-run { display: flex; }
.v-hybrid .ticker-run span {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: clamp(12px, .95vw, 16px);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.v-hybrid .ticker-run span::after {
  content: '';
  width: .36em;
  height: .36em;
  margin: 0 1.4em;
  border-radius: 50%;
  /* Pale, because the strip itself is blue now */
  background: color-mix(in srgb, var(--page) 62%, transparent);
}
.v-hybrid .ticker-track { animation-duration: 26s; }

/* ---------- Quiet links in the sections ---------- */

.v-hybrid .folder .btn {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  height: auto;
  min-width: 0;
  margin-top: clamp(24px, 2.2vw, 34px);
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 35%, transparent);
  background: none;
  color: var(--fg);
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color .2s;
}
.v-hybrid .folder .btn::after { content: '\2192'; transition: transform .25s var(--ease); }
.v-hybrid .folder .btn:hover,
.v-hybrid .folder .btn:focus-visible {
  background: none;
  color: var(--fg);
  border-bottom-color: currentColor;
}
.v-hybrid .folder .btn:hover::after,
.v-hybrid .folder .btn:focus-visible::after { transform: translateX(4px); }

@media (max-width: 699px) {
  .v-hybrid .ticker { margin-bottom: 32px; padding: 7px 0; }
}


/* ==========================================================
   Hierarchy on the first screen
   1. the copy in the middle   2. the folder tabs   3. logo and button
   The copy keeps its size and gains room; everything else steps down.
   ========================================================== */

/* 3. Logo and button: present, not shouting */
.v-hybrid .site-header { padding: clamp(18px, 2vw, 36px) var(--pad); }
.v-hybrid .wordmark svg { height: clamp(26px, 2.3vw, 42px); }
.v-hybrid .site-header .btn {
  min-width: 0;
  height: clamp(34px, 2.5vw, 42px);
  padding: 0 clamp(14px, 1.2vw, 20px);
  font-size: clamp(11px, .82vw, 13px);
  letter-spacing: .1em;
  border-color: color-mix(in srgb, var(--blue) 40%, transparent);
  color: color-mix(in srgb, var(--blue) 78%, var(--page));
}
.v-hybrid .site-header .btn:hover,
.v-hybrid .site-header .btn:focus-visible {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--page);
}

/* 2. The tabs: shorter rows, smaller labels, colours tinted back towards
   the page so they sit under the copy rather than beside it */
.v-hybrid .tabs {
  --row: clamp(38px, 3.5vw, 66px);
  --label: clamp(15px, 1.9vw, 30px);
}
.v-hybrid .tabs a::before { background: color-mix(in srgb, var(--bg) 88%, var(--page)); }
.v-hybrid .tabs a { color: color-mix(in srgb, var(--fg) 90%, var(--page)); font-weight: 500; }
.v-hybrid .folder-tab { font-weight: 500; }

/* 1. The copy: more room around it, and the paragraph quieter still */
.v-hybrid .hero-intro { padding-top: clamp(40px, 9vh, 140px); padding-bottom: clamp(40px, 9vh, 140px); }
/* .55 keeps it quiet while staying readable for everyone */
.v-hybrid .hero-blurb { opacity: .55; max-width: 42ch; }

/* ---------- Keeping the two blocks of folders apart ----------
   The stack on the home screen is the drawer, shut. The folders that scroll
   past below are the same folders, open. A hairline above the stack reads as
   the edge of the drawer, and the ticker sits in a clear band of its own. */

.v-hybrid .ticker { margin-top: clamp(40px, 6vh, 96px); }

/* ==========================================================
   Swiss touches, borrowed from the Grilli Type cards, the Heller
   catalogue and the riso posters: visible structure, ruled frames,
   small caps labels, tabular figures. The layout and the scrolling
   folders are untouched.
   ========================================================== */

/* The header gets a hairline and a line of small caps meta */
.v-hybrid .site-header { border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.v-hybrid .top-right { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px); }
.v-hybrid .top-meta {
  text-align: right;
  font-size: clamp(9px, .68vw, 11px);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}

/* Section labels read as a ruled table head */
.v-hybrid .kicker {
  width: 100%;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
  letter-spacing: .18em;
  font-weight: 500;
}

/* The three specs become a proper ruled table with tabular figures */
.v-hybrid .specs { max-width: none; }
.v-hybrid .specs li {
  gap: clamp(14px, 1.6vw, 30px);
  padding: 11px 0;
  border-top: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  font-size: clamp(13px, 1vw, 15px);
}
.v-hybrid .specs li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--fg) 18%, transparent); }
.v-hybrid .specs li b {
  flex: 0 0 34px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  opacity: .55;
}

/* Screenshots sit in a ruled frame, square cornered, no shadow */
.v-hybrid .shot img {
  border: 1px solid color-mix(in srgb, var(--fg) 55%, transparent);
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}
.v-hybrid .shot figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  letter-spacing: .16em;
  opacity: .75;
}

/* Headlines pull tighter and heavier, in the Swiss manner */
.v-hybrid .folder h2 { font-weight: 500; letter-spacing: -.04em; }
.v-hybrid .typeline { font-weight: 500; letter-spacing: -.035em; }

/* Footer picks up the same hairline and small caps */
.v-hybrid .site-footer {
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

@media (max-width: 699px) {
  .v-hybrid .top-meta { display: none; }
}

/* ---------- The Dashboard plate is the live dial ---------- */

.dial-in-card {
  --page: #f6f5f3;                 /* the app's own background, inside the frame */
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--fg) 55%, transparent);
  background: #fff;
  cursor: grab;
}
.dial-in-card.is-dragging { cursor: grabbing; }

.dial-in-card .dial-panel {
  top: clamp(10px, 1.2vw, 20px);
  right: clamp(10px, 1.2vw, 20px);
  left: auto;
  bottom: auto;
  max-width: none;
  transform: none;
  text-align: right;
}
.dial-in-card .dial-time { font-size: clamp(26px, 2.6vw, 46px); line-height: 1; }
.dial-in-card .dial-card {
  margin-top: 10px;
  padding: 9px 12px 11px;
  min-width: 180px;
  text-align: left;
  border-radius: 0;
}
.dial-in-card .dial-card-title { font-size: 14px; }
.dial-in-card .dial-card-time { font-size: 12px; }
.dial-in-card .dial-back { margin-top: 9px; padding: 5px 11px; font-size: 11px; border-radius: 0; }

@media (max-width: 699px) {
  .dial-in-card { aspect-ratio: 4 / 3; }
  /* on a phone the readout becomes a bar along the bottom of the dial */
  .dial-in-card .dial-panel {
    top: auto; bottom: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px;
    text-align: left;
    background: color-mix(in srgb, #f6f5f3 82%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .dial-in-card .dial-time { font-size: 24px; }
  .v-hybrid .dial-in-card .dial-card {
    display: block; flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: none;
  }
  .dial-in-card .dial-card-label,
  .dial-in-card .dial-card-track,
  .dial-in-card .dial-back { display: none; }
}