/* ---------------------------------------------------------------
   Acephale Ventures — page styles. Loads after style.css and leans
   on its tokens (parchment, ink, sienna), faces and shared parts
   (nav, progress mark, hatch, footer, reveals).
--------------------------------------------------------------- */
:root {
  --cream: rgba(255, 252, 244, 0.42);      /* card cream: lets the paper show through */
  --cream-hover: rgba(255, 252, 244, 0.62);
  --hair: rgba(36, 31, 22, 0.2);
  --hair-strong: rgba(36, 31, 22, 0.3);
  --tile-ink: #1e1a15;
  --tile-black: #0b0a0f;
  --v-left: 300px;                        /* label column of the two-column sections */
  --v-gap: 56px;
}

/* Shared two-column section rhythm: label column | content */
.v-cols {
  display: grid;
  grid-template-columns: var(--v-left) minmax(0, 1fr);
  gap: var(--v-gap);
  align-items: start;
}
.v-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.v-label--cream { color: var(--band-fg); }
.v-h2 {
  font-family: var(--font-title);
  font-synthesis: none;
  font-weight: 400;
  font-size: clamp(40px, 4.2vw, 56px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}
.v-section { padding: 96px var(--side) 120px; }
.v-head {
  align-items: end;
  margin-bottom: 40px;
}
.v-head__left { display: grid; gap: 24px; }

/* ---------------------------------------------------------------
   Hero (compact)
--------------------------------------------------------------- */
.v-hero {
  position: relative;
  background: linear-gradient(to bottom, var(--bg) 45%, rgba(236, 228, 205, 0));
}
.v-hero__inner {
  position: relative;
  max-width: calc(var(--max) + 2 * var(--side));
  padding: 120px var(--side) 56px;
}
.v-hero .v-label { padding-top: 18px; }
.v-hero__body { display: grid; gap: 28px; }
/* centred variant: title and thesis stacked on the page's axis */
.v-hero__inner--center {
  display: grid;
  justify-items: center;
  text-align: center;
}
.v-hero__inner--center .v-hero__body { justify-items: center; }
.v-hero__inner--center .v-hero__lede { max-width: 58ch; }

/* Thesis: a centred epigraph, then running text in a centred column */
.v-thesis {
  max-width: 64ch;
  display: grid;
  gap: 22px;
  text-align: center;
}
.v-thesis__epigraph {
  margin: 0 0 10px;
  padding: 0;
  text-align: center;
}
.v-thesis__epigraph p {
  font-family: var(--font-title);
  font-synthesis: none;
  font-size: clamp(18px, 1.55vw, 20.5px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  margin: 0;
  text-wrap: balance;
}
.v-thesis__epigraph cite {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
}
.v-thesis__epigraph cite em { font-style: italic; letter-spacing: 0.12em; }
.v-thesis__epigraph cite strong { font-weight: 700; opacity: 1; }
.v-thesis > p {
  font-family: var(--font-display);
  font-synthesis: none;
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
  opacity: 0.85;
  text-wrap: pretty;
}
.v-hero__title {
  /* the Regular cut with a hair of extra outline: between regular and the
     synthesised bold the section headings use */
  font-family: var(--font-title);
  font-synthesis: none;
  font-weight: 400;
  -webkit-text-stroke: 0.3px currentColor;
  paint-order: stroke fill;
  font-size: clamp(44px, 5.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 900px;
  text-wrap: balance;
}
.v-hero__lede {
  font-family: var(--font-display);
  font-synthesis: none;
  font-size: 19px;
  line-height: 1.55;
  margin: 0;
  max-width: 520px;
  opacity: 0.8;
}

/* ---------------------------------------------------------------
   01 Portfolio
--------------------------------------------------------------- */
.search {
  justify-self: end;
  width: 100%;
  max-width: 440px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.04em;
  background: var(--cream);
  border: 1px solid var(--hair);
  padding: 14px 18px;
  cursor: text;
}
.search__prompt { color: var(--accent); }
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  padding: 0;
}
.search input::placeholder { color: inherit; opacity: 0.45; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search:focus-within { border-color: var(--accent); }

/* Portfolio city: the hand-drawn divider between the thesis and the
   grid. Structures take the ink colour; hovering one tints it sienna. */
.city {
  display: block;
  /* a touch wider than the tile grid: the lake and the Studio building
     reach just past the first and last tile columns */
  width: min(calc(100% + 110px), calc(100vw - 32px));
  margin-left: calc((100% - min(calc(100% + 110px), calc(100vw - 32px))) / 2);
  margin-right: 0;
  height: auto;
  color: var(--ink);
  /* pulled up so its empty sky overlaps the hero's tail instead of
     stacking another gap under the thesis; only structures take clicks */
  margin-top: -40px;
  margin-bottom: 48px;
  overflow: visible;
  pointer-events: none;
  /* above the hero's hatch overlay, which is positioned and would
     otherwise paint its pen lines over the moon */
  position: relative;
  z-index: 1;
}
.portfolio { padding-top: 0; }
/* One cascade on load: title, then thesis, then the city, each starting
   while the previous is still settling so it reads as a single motion.
       title   0.10s → 0.90s
       thesis  0.45s → 1.35s
       city    0.80s → 2.20s  */
.hero-seq--title { animation-delay: 0.1s; animation-duration: 0.8s; }
.hero-seq--lede  { animation-delay: 0.45s; animation-duration: 0.9s; }
.hero-seq--invite { animation-delay: 0.7s; animation-duration: 0.9s; }
.hero-seq--city  { animation-delay: 0.8s; animation-duration: 1.4s; }

/* Invitation below the portfolio grid, set off by the ink squiggle */
.v-invite__divider {
  display: block;
  margin: 64px auto 0;
  color: var(--accent);
  opacity: 0.7;
}
.v-invite {
  display: grid;
  justify-items: center;
  gap: 0;
  margin-top: 40px;
  text-align: center;
}
.v-invite__line {
  font-family: var(--font-display);
  font-synthesis: none;
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
  opacity: 0.85;
}
.v-invite__btn { margin-top: 22px; }
/* nine tiles in three rows of three; no tile sits alone */
.tile--placeholder .tile__front { opacity: 0.55; }

/* The skyline's small loops. The drawing names these inline on the
   animated parts (with its own durations); units are SVG user units. */
@keyframes tideA { from { transform: translateX(0); } to { transform: translateX(-48px); } }
@keyframes tideB { from { transform: translateX(0); } to { transform: translateX(48px); } }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-3deg); }
}
/* reactor steam: three puffs on one 5.1s loop, started a third apart
   (the drawing's inline delays are 0 / -1.7 / -3.4s), rising steadily
   well clear of the tower while they swell and thin out */
@keyframes puff1 {
  0% { transform: translate(0, 0) scale(0.55); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 0.75; }
  100% { transform: translate(-10px, -110px) scale(1.3); opacity: 0; }
}
@keyframes puff2 {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 0.75; }
  100% { transform: translate(6px, -120px) scale(1.28); opacity: 0; }
}
@keyframes puff3 {
  0% { transform: translate(0, 0) scale(0.55); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 0.75; }
  100% { transform: translate(-4px, -104px) scale(1.32); opacity: 0; }
}
@keyframes brush {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}
/* Studio's dots: long winding laps so each frame moves them several
   units; loops under ~1/60s only resample a random point per frame and
   look slower, so speed lives in path length ÷ a visible duration */
@keyframes roamA {
  0% { transform: translate(0, 0); } 14% { transform: translate(22px, -16px); }
  28% { transform: translate(-18px, -20px); } 42% { transform: translate(20px, 18px); }
  57% { transform: translate(-22px, 6px); } 71% { transform: translate(8px, -22px); }
  85% { transform: translate(-16px, 20px); } 100% { transform: translate(0, 0); }
}
@keyframes roamB {
  0% { transform: translate(0, 0); } 14% { transform: translate(-20px, 18px); }
  28% { transform: translate(18px, 22px); } 42% { transform: translate(22px, -18px); }
  57% { transform: translate(-16px, -22px); } 71% { transform: translate(-22px, 10px); }
  85% { transform: translate(14px, -8px); } 100% { transform: translate(0, 0); }
}
@keyframes roamC {
  0% { transform: translate(0, 0); } 14% { transform: translate(16px, 22px); }
  28% { transform: translate(-22px, 12px); } 42% { transform: translate(-10px, -22px); }
  57% { transform: translate(22px, -14px); } 71% { transform: translate(6px, 20px); }
  85% { transform: translate(-20px, -6px); } 100% { transform: translate(0, 0); }
}
/* stars: a slow, lopsided breath on each one's own period (set inline) */
@keyframes twinkle {
  0% { opacity: 0.12; transform: scale(0.72); filter: drop-shadow(0 0 0 rgba(255, 248, 225, 0)); }
  40% { opacity: 0.7; transform: scale(1.28); filter: drop-shadow(0 0 4px rgba(255, 240, 200, 1)); }
  55% { opacity: 0.63; transform: scale(1.15); filter: drop-shadow(0 0 2px rgba(255, 240, 200, 0.6)); }
  100% { opacity: 0.12; transform: scale(0.72); filter: drop-shadow(0 0 0 rgba(255, 248, 225, 0)); }
}
/* Pacific pod: the four roof fans spin; each blade line is seen edge-on
   as it turns, so it narrows and widens, two lines a half-turn apart */
/* each fan is two blade lines a quarter-turn apart, spinning in the
   flattened plane of the fan housing (scaleY keeps them in the ellipse) */
@keyframes bladeA { from { transform: scaleY(0.3) rotate(0deg); } to { transform: scaleY(0.3) rotate(180deg); } }
@keyframes bladeB { from { transform: scaleY(0.3) rotate(90deg); } to { transform: scaleY(0.3) rotate(270deg); } }
/* the drawing's inline durations for the slowest loops, shortened */
.city [style*="animation:tideA"] { animation-duration: 2.6s !important; }
.city [style*="animation:tideB"] { animation-duration: 3.2s !important; }
.city [style*="animation:bob"] { animation-duration: 2.2s !important; }
.city [style*="animation:puff"] { animation-duration: 54s !important; animation-timing-function: linear !important; }
/* start the three puffs a third of the loop apart so they rise one at a
   time rather than as a cluster followed by a long gap */
.city [style*="animation:puff1"] { animation-delay: 0s !important; }
.city [style*="animation:puff2"] { animation-delay: -18s !important; }
.city [style*="animation:puff3"] { animation-delay: -36s !important; }
.city [style*="animation:roamA"] { animation-duration: 0.8s !important; }
.city [style*="animation:roamB"] { animation-duration: 0.72s !important; }
.city [style*="animation:roamC"] { animation-duration: 0.86s !important; }
/* On phones the skyline is about a third of its desktop size, so the same
   units-per-second look different: the steam's rise shrinks to a crawl
   and the dots' laps turn frantic. These bring the on-screen feel back. */
@media (max-width: 900px) {
  .city [style*="animation:puff"] { animation-duration: 7s !important; }
  .city [style*="animation:puff2"] { animation-delay: -2.3s !important; }
  .city [style*="animation:puff3"] { animation-delay: -4.7s !important; }
  .city [style*="animation:roamA"] { animation-duration: 5s !important; }
  .city [style*="animation:roamB"] { animation-duration: 4.6s !important; }
  .city [style*="animation:roamC"] { animation-duration: 5.4s !important; }
}
@media (prefers-reduced-motion: reduce) {
  .city * { animation: none !important; }
}
.city [data-city] {
  pointer-events: auto;
  cursor: pointer;
  transition: color 0.2s ease;
}
.city [data-city]:hover { color: var(--accent); }

/* 4×2 grid of rounded paper tiles. Each square flips to the company's
   description; the name sits in a caption under the square. */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  /* three tiles at the size they had in the four-column grid, centred:
     the block takes the same height the two rows plus one did */
  max-width: 924px;
  margin: 0 auto;
}
.tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  cursor: pointer;
  outline-offset: 4px;
}
.tile:focus-visible { outline: 2px solid var(--accent); }
.tile__sq {
  position: relative;
  aspect-ratio: 1 / 1;
  perspective: 1400px;
}
.tile__card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.tile[data-flipped="true"] .tile__card { transform: rotateY(180deg); }
.tile__face {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tile__front {
  display: flex;
  background: var(--cream);
  transition: background-color 0.2s ease;
}
.tile:hover .tile__front { background: var(--cream-hover); }
.tile__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--pad, 20%);
  box-sizing: border-box;
  display: block;
}
/* marks supplied white-on-transparent read as ink on the paper tile */
.tile__logo--b4s { filter: invert(1) brightness(0.2); }
.tile__logo--mm { filter: invert(1) hue-rotate(180deg) brightness(0.55) saturate(3); }
.tile__back {
  transform: rotateY(180deg);
  background: var(--band-bg);
  color: var(--band-fg);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tile__back ::selection { background: var(--accent-dark); color: var(--band-bg); }
.tile__name {
  font-family: var(--font-display);
  font-synthesis: none;
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}
.tile__desc {
  font-family: var(--font-display);
  font-synthesis: none;
  font-size: 13.5px;
  line-height: 1.45;
  margin: 0;
  opacity: 0.85;
  text-wrap: pretty;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(231, 223, 200, 0.5) transparent;
  padding-right: 8px;
}
.tile__desc::-webkit-scrollbar { width: 5px; }
.tile__desc::-webkit-scrollbar-thumb { background: rgba(231, 223, 200, 0.5); border-radius: 3px; }
/* a description longer than the tile scrolls; the fade says so */
.tile__desc.is-scrollable {
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent);
  padding-bottom: 24px;
}
.tile__link {
  margin-top: auto;
  align-self: flex-start;
  border: 1px solid var(--band-fg);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--band-fg);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.tile__link:hover { background: var(--band-fg); color: var(--band-bg); opacity: 1; }

/* ---------------------------------------------------------------
   02 News
--------------------------------------------------------------- */
.news {
  padding-left: 0;
  padding-right: 0;
  border-top: 1px solid var(--hair-strong);
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.v-head--news {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--v-gap);
  align-items: end;
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--side));
  padding: 0 var(--side);
  margin-bottom: 0;
}
.news__intro {
  font-family: var(--font-display);
  font-synthesis: none;
  font-size: 17px;
  margin: 0;
  opacity: 0.75;
}
.news__arrows { display: flex; gap: 8px; }
.news__arrow {
  all: unset;
  cursor: pointer;
  width: 52px;
  height: 52px;
  background: var(--band-bg);
  color: var(--band-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background-color 0.2s ease;
}
.news__arrow:hover { background: var(--accent); }
.news__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.news-rail {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* snap positions honour the same inset as the track's first card */
  scroll-padding-left: max(calc((100vw - var(--max)) / 2), var(--side));
  scrollbar-width: none;
  cursor: grab;
}
.news-rail::-webkit-scrollbar { display: none; }
.news-rail.is-dragging { cursor: grabbing; user-select: none; }
.news-rail__track {
  display: flex;
  gap: 20px;
  /* the first card lines up with the page column; the rail runs to the edge */
  padding-left: max(calc((100vw - var(--max)) / 2), var(--side));
  padding-right: var(--side);
  width: max-content;
}
.news-card {
  flex: 0 0 520px;
  max-width: calc(100vw - 2 * var(--side));
  scroll-snap-align: start;
  background: var(--cream);
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  transition: background-color 0.25s ease;
}
.news-card:hover { background: var(--cream-hover); opacity: 1; }
.news-card__img {
  background: repeating-linear-gradient(135deg, #ddd3bc 0 10px, #e5dcc6 10px 20px);
  background-size: cover;
  background-position: center;
}
.news-card__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 260px;
}
.news-card__co {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.news-card__headline {
  font-family: var(--font-title);
  font-synthesis: none;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: 0;
  text-wrap: pretty;
}
.news-card__foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-display);
  font-size: 14px;
  opacity: 0.6;
}

/* ---------------------------------------------------------------
   03 Careers band
--------------------------------------------------------------- */
.careers-band {
  background: var(--accent);
  color: #f5efe0;
  padding: 96px var(--side) 110px;
}
.careers-band ::selection { background: var(--band-bg); color: #f5efe0; }
.careers-band .v-h2 { color: #f5efe0; }
.careers-band__body { display: grid; gap: 48px; justify-items: start; }
.careers-band__statement {
  font-family: var(--font-display);
  font-synthesis: none;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 860px;
  text-wrap: balance;
}
.careers-band__btn {
  display: inline-flex;
  align-items: center;
  gap: 48px;
  background: #f5efe0;
  color: var(--ink);
  padding: 22px 30px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 160ms var(--ease-out);
}
.careers-band__btn:hover { background: var(--band-bg); color: #f5efe0; opacity: 1; }
.careers-band__btn:active { transform: scale(0.98); }

/* The shared footer sits directly on the rust band: keep its top hairline */
.careers-band:not([hidden]) + .footer { border-top: 0; }
[data-feature][hidden] { display: none !important; }

/* ---------------------------------------------------------------
   Reduced motion
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tile__card { transition: none; }
  .careers-band__btn:active { transform: none; }
}

/* ---------------------------------------------------------------
   Responsive
--------------------------------------------------------------- */
@media (max-width: 1100px) {
  .v-cols,
  .v-head--news { grid-template-columns: 1fr; gap: 32px; }
  .v-head { align-items: start; }
  .search { justify-self: start; }
  .v-hero .v-label { padding-top: 0; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .news__arrows { justify-self: start; }
}
@media (max-width: 900px) {
  .v-section { padding: 72px var(--side) 88px; }
  .portfolio { padding-top: 0; }
  .city { margin-top: -40px; }
  .news { padding-left: 0; padding-right: 0; }
  .v-hero__inner { padding: 88px var(--side) 16px; }
}
@media (max-width: 720px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .city { margin-top: -16px; margin-bottom: 24px; }
}
/* Phone: one tile per row, and the flip card grows to fit its description
   instead of staying square, so nothing is clipped behind the link. The
   faces stack in one grid cell; the 3D flip still works on the card. */
@media (max-width: 640px) {
  .tiles { grid-template-columns: 1fr; gap: 20px; justify-items: center; }
  .tile { width: 100%; max-width: 280px; }
  .v-invite__divider { margin-top: 48px; }
  .v-invite { margin-top: 32px; }
  .tile__back { padding: 20px 18px 18px; gap: 10px; }
  .tile__name { font-size: 22px; }
  .tile__desc {
    font-size: 14px;
    line-height: 1.5;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .tile__link { margin-top: 10px; font-size: 12px; padding: 10px 14px; }
  .news-card { flex-basis: 85vw; grid-template-columns: 120px minmax(0, 1fr); }
  .news-card__body { padding: 22px; min-height: 220px; }
  .careers-band__btn { gap: 24px; padding: 18px 22px; font-size: 12px; }
}