/* Zentropic Venture Studio - landing */

:root {
  color-scheme: dark;

  /* brand */
  --ink: #1A1A1A;         /* the logo's own ground, so the mark sits seamlessly on it */
  --ink-raised: #262523;  /* cards and anything lifted off the page: 1.14:1 on --ink, a
                             hint of lift. Lightening it further is boxed in - at a fill
                             you can actually see, --silver text drops below 4.5:1.
                             Here silver still reads at 4.96:1. Carry the card with
                             --line-strong, not with the fill. */
  --bone: #EFEAE0;        /* headings; the silver is too dim to carry a headline */
  --silver: #979381;      /* the "VENTURE STUDIO" grey from the wordmark; body text */
  --gold: #D1A85B;
  --gold-hover: #E0BC79;                    /* --ink on it: 9.65:1 */
  --gold-tint:  rgba(209, 168, 91, 0.12);   /* composites to #302B22 on --ink;
                                               --gold on it 6.33:1. Never put
                                               --silver on this - 4.55:1 sits
                                               too close to the floor. */

  /* a band that recedes. --ink-raised cannot be a full-bleed ground:
     --line-strong falls to 2.87:1 over it and every control inside would fail
     1.4.11. Going darker keeps every ratio and improves most of them.
     vs --ink 1.06:1 | silver 5.97:1 | bone 15.37:1 | gold 8.30:1 |
     --line-strong on it 3.16:1 */
  --ink-deep: #141414;

  /* two borders, on purpose - reach for the right one */
  --line: rgba(151, 147, 129, 0.18);         /* 1.31:1 - decorative only: section dividers, rules */
  --line-strong: rgba(151, 147, 129, 0.64);  /* 3.09:1 on --ink - real UI boundaries: cards, controls.
                                                Measured against the page; against a --ink-raised fill
                                                it is 2.88:1, so a card should sit on --ink, not inside
                                                another raised surface. */

  --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* type scale - fluid, so there are no breakpoint steps to maintain */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --step-3:  clamp(2rem, 1.7rem + 1.5vw, 3rem);
  /* hero only. The 2rem floor keeps "Building products / for people." on two
     lines at 320px rather than three. */
  --step-4:  clamp(2rem, 0.9rem + 4.9vw, 4.25rem);

  /* spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  /* was 4rem-7rem. At 1440 that put 112px of padding above and below a
     mission section whose entire content was 180px tall - the padding was
     the largest element on the page. 88px still reads generous. */
  --space-6: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --measure: 56ch;   /* comfortable reading width for prose - ~65-70 rendered characters */
  --page: 1100px;    /* outer content width */
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--silver);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  color: var(--bone);
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}

a { color: var(--gold); }

/* a visible focus ring that survives on both the ink and the raised surfaces */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* focusing a whole region to move the reader there should not draw a ring
   around the region: the skip link itself is the visible affordance */
#main:focus { outline: none; }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: var(--space-1) var(--space-2);
  background: var(--ink-raised);
  border: 1px solid var(--line-strong);   /* a control, not a divider: 3.09:1 */
  border-radius: 6px;
  text-decoration: none;
  transition: top 120ms ease-out;
}
.skip-link:focus { top: var(--space-2); }

/* ---- header --------------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  /* the header keeps its own width constraint - main is full-bleed, see below */
  width: min(100% - var(--gutter) * 2, var(--page));
  margin-inline: auto;
  padding-block: var(--space-3);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--bone);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* the brand link had no hover affordance at all. On brand, the fractured
   thing responds and the word stays still. */
.site-header__mark {
  width: 28px; height: auto;
  transition: filter 420ms var(--ease);
}
.site-header__brand:hover .site-header__mark,
.site-header__brand:focus-visible .site-header__mark {
  filter: brightness(1.2) saturate(1.06);
}

/* the wordmark's own lockup: the name over the descriptor, not one flat
   string. Keeps "Venture Studio" present without letting it compete with the
   name or push the Get in touch button off a narrow screen. */
.site-header__name {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.site-header__suffix {
  font-size: 0.66em;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);        /* 5.64:1 on --ink */
}

/* the one thing a visitor might want without scrolling. Block padding puts the
   target at ~44px; the removed nav links were 37px. */
.site-header__cta {
  padding: 0.6rem var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--bone);
  text-decoration: none;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: border-color 140ms ease-out, color 140ms ease-out;
}
.site-header__cta:hover { border-color: var(--gold); color: var(--gold); }

/* At 320 the header wraps to two rows and grows from 90px to 145px, which is
   exactly what pushes the hero call to action 16px below the fold on a 568px
   screen. Tightening the padding and centring the two rows buys it back. */
@media (max-width: 360px) {
  .site-header {
    justify-content: center;
    padding-block: var(--space-2);
    row-gap: var(--space-1);
  }
}

/* ---- sections ------------------------------------------------------------- */

/* main runs edge to edge so a section can carry a full-width tinted band and so
   the dividers reach the viewport edge; the page width is re-applied inside each
   section as padding. Padding rather than a width on `.section > *`, because an
   auto-margin child re-centres itself the moment its own max-width is narrower
   than the page (a `--measure` paragraph would drift away from its heading). The
   header keeps its own width constraint and lines up with this. */
main {
  flex: 1;
  width: 100%;
}

.section {
  padding-block: var(--space-6);
  padding-inline: max(var(--gutter), (100% - var(--page)) / 2);
}
.section + .section { border-top: 1px solid var(--line); }

/* to break a child back out to the full viewport width (a tinted band, a
   full-bleed image): width: 100vw; margin-inline: calc(50% - 50vw); */

.section__title {
  font-size: var(--step-2);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.hero__lead {
  max-width: var(--measure);
  font-size: var(--step-1);
  margin: 0;
}

/* ---- hero ----------------------------------------------------------------- */

.section--hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-2);
}

.hero__headline {
  font-size: var(--step-3);
  font-weight: 700;
  max-width: 20ch;
  margin-inline: auto;
}

/* wraps ragged on narrow viewports otherwise */
.hero__lead { text-wrap: pretty; }

/* the manifesto line - a position, not a description, so it carries more weight
   than body copy without competing with the section heading */
.mission__manifesto {
  color: var(--bone);
  font-size: var(--step-1);
  font-weight: 600;
  margin: 0 0 var(--space-3);
  max-width: var(--measure);
}

/* multi-paragraph body copy */
.prose {
  max-width: var(--measure);
}
.prose p {
  margin: 0 0 var(--space-2);
}
.prose p:last-child {
  margin-bottom: 0;
}
/* the emphasised word is a definition being introduced, not stress - keep it
   upright and let colour carry it, so it does not read as a slanted aside */
.prose em {
  font-style: normal;
  color: var(--bone);
  font-weight: 600;
}

/* ---- hero cta -------------------------------------------------------------- */

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* 0.75rem block padding puts the target at ~44px, the touch guidance */
  padding: 0.75rem var(--space-3);
  margin-top: var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--bone);
  text-decoration: none;
  font-size: var(--step-0);
  font-weight: 500;
  transition: border-color 140ms ease-out, color 140ms ease-out;
}
.hero__cta::after {
  content: "\2193";           /* down arrow: the apps section is below, not elsewhere */
  font-size: 0.9em;
  opacity: 0.7;
}

/* ---- apps ------------------------------------------------------------------
   The three icons do not read as a set on their own: Moca's ground is #141414
   and the placeholder's is --ink itself, so without a tile two of them float
   on the page while MagicKeyPen's navy reads as the only real app icon. One
   tile for all three fixes that; the odd one out then sits as a peer.
   Tiles stay on --ink - --line-strong is 3.09:1 there but only 2.88:1 over
   --ink-raised, so a raised card behind them would fail 1.4.11. */

.apps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-5) var(--space-4);
}

.app {
  max-width: 34ch;
  /* column so the stage can be pushed to the bottom: descriptions differ in
     length, and without this the pills sit at three different heights */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.app__tile {
  width: 5rem;            /* 80px: MagicKeyPen's fine-line mark is mush below 72 */
  height: 5rem;
  border-radius: 1.125rem; /* 22.5% - the iOS squircle proportion */
  display: block;
  margin-bottom: var(--space-2);
  /* inset rather than `border`: sits inside the radius and adds nothing to the box */
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* Second Draft draws its mark as type rather than shipping an icon, so we do
   the same. White is its own colour, and the tile ground is the same #141414
   the other two sit on. 17.4:1. */
.app__tile--mono {
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: -0.07em;
  line-height: 1;
  color: #fff;
  background: #141414;
}

.app__name {
  font-size: var(--step-1);
  font-weight: 600;
  margin: 0 0 var(--space-1);
}

.app__desc {
  margin: 0 0 var(--space-2);
  font-size: var(--step-0);
  text-wrap: pretty;
}

/* not a badge on a button: nothing here is clickable, and a pill would imply it */
.app__stage {
  display: inline-block;
  margin: auto 0 0;      /* bottom-aligned across the row */
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--silver);
}

/* ---- team ------------------------------------------------------------------
   Same grid as the apps so the two sections read as siblings. No photos: with
   none supplied, a layout that reserves space for them looks broken, and one
   that does not can absorb them later without being rebuilt. */

.team {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-5) var(--space-4);
}

.person {
  max-width: 34ch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.person__name {
  font-size: var(--step-1);
  font-weight: 600;
  margin: 0 0 var(--space-1);
}

/* the only label on a person now, so it takes the accent the discipline used
   to carry */
.person__cofounder {
  margin: 0 0 var(--space-2);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);          /* 7.84:1 on --ink */
}

.person__line { margin: 0 0 var(--space-2); }

.person__link {
  margin-top: auto;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--silver);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}
.person__link:hover { color: var(--gold); text-decoration-color: currentColor; }

/* ---- footer --------------------------------------------------------------- */

.site-footer {
  padding: var(--space-4) var(--gutter) var(--space-4);
  text-align: center;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--silver);
  text-wrap: balance;
  border-top: 1px solid var(--line);
}

.site-footer p {
  margin: 0;
}

.site-footer__legal { margin-bottom: var(--space-1); }

/* when the line has to wrap, break between the sentences, never inside one */
.site-footer__legal > span { white-space: nowrap; }

/* one row, middot-separated. Flex rather than inline text so a separator never
   starts a line when the row wraps on a phone. */
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  row-gap: var(--space-1);
}
.site-footer__meta > *:not(:last-child)::after {
  content: "\00B7";      /* middot, decorative - the flex gap already separates them.
                            On the element BEFORE the gap, not the one after: as a
                            ::before on the link it sat inside the anchor and picked
                            up its hover colour and underline. */
  padding: 0 0.6em;
  color: var(--line-strong);
}
.site-footer__meta a { color: var(--silver); text-decoration: none; }
.site-footer__meta a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  /* the delay matters as much as the duration: with animation-fill-mode both,
     the from-state holds for the whole delay, so a staggered entrance would
     leave these users looking at opacity 0 rather than at the content */
  * {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   Visual pass
   ----------------------------------------------------------------------------
   Measured before this: gold covered 0.070% of the rendered page and 97.3% of
   it sat within a hair of --ink; nothing anywhere was lifted, recessed or
   enclosed; and every section had the same shape as every other. The type was
   not the problem - the reference sites' headlines are 51px against our 48px.
   What they do that we did not is use the accent as a surface, give the page a
   light source, and let sections differ.
   ========================================================================== */

/* ---- the accent becomes a surface ---------------------------------------- */

.hero__cta {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);                      /* 7.84:1 */
  font-weight: 600;
  transition: background-color 140ms var(--ease),
              border-color 140ms var(--ease),
              translate 140ms var(--ease);
}
.hero__cta::after { opacity: 0.85; }      /* 5.98:1 against the gold fill */
.hero__cta:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  color: var(--ink);        /* stated, not inherited: an outlined-pill rule from
                               before the fill used to set this to --gold, which
                               put gold text on a gold button at 1.22:1. 9.65:1 */
  translate: 0 -1px;
}
/* a gold ring around a gold button is the one place the global focus colour
   stops doing its job */
.hero__cta:focus-visible { outline-color: var(--bone); }   /* 14.52:1 on ink */

/* ---- the hero gets a light source and a horizon -------------------------- */

.section--hero { position: relative; isolation: isolate; overflow: clip; }

.section--hero::before {                  /* the wash */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 64% at 50% -6%,  rgba(209, 168, 91, 0.085), transparent 72%),
    /* off-centre on purpose: entropy in the mark increases from roughly four
       o'clock to ten, so the page inherits a direction rather than a symmetry */
    radial-gradient(74% 46% at 34% 104%, rgba(209, 168, 91, 0.055), transparent 72%);
}
/* peak ground under the wash measures #1D1C1B: silver 5.51:1, bone 14.19:1,
   gold 7.67:1 - all still pass */

.section--hero::after {                   /* the horizon the button sits on */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 74%;
  width: 150vw; aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  /* one continuous translucent gold line. It was a fragmenting arc echoing the
     shards in the mark, which needed explaining to be seen as anything but a
     broken line - so it is simply a horizon now. */
  border: 1px solid rgba(209, 168, 91, 0.38);   /* 2.05:1, decorative only */
  box-shadow: inset 0 2px 44px -10px rgba(209, 168, 91, 0.10);
}

.hero__headline {
  font-size: var(--step-4);               /* 68px at 1440, was 48px */
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

/* ---- mission stops being paragraph three --------------------------------- */
/* The one full-bleed band on the page. main has been edge-to-edge since the
   scaffold; this is the section that finally uses it. One band is punctuation;
   doing this to all four would be wallpaper. */

#mission {
  background: var(--ink-deep);
  text-align: center;
  /* no inset top rule: .section + .section already draws that border and two
     1px lines stack into a visible seam */
  box-shadow: inset 0 -1px 0 var(--line),
              inset 0 0 90px -20px rgba(0, 0, 0, 0.75);
}
#mission + .section { border-top: 0; }    /* the band carries its own edge */

/* "Our mission" demotes to an eyebrow and the manifesto becomes the thing you
   read. The h2 is still the h2 - only its rendering changes. */
#mission .section__title {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);                     /* 8.30:1 on --ink-deep */
  margin-bottom: var(--space-3);
}
#mission .mission__manifesto {
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 16ch;
  margin-inline: auto;
  margin-bottom: var(--space-3);
}
#mission .prose { margin-inline: auto; }

/* ---- apps become cards, team becomes a ruled grid ------------------------ */
/* Carried by --line-strong on --ink with no fill, which is what the
   --ink-raised comment above already argues for: a raised fill drops
   --line-strong to 2.88:1 and takes the icon tile ring down with it. */

.apps { gap: var(--space-3); }
.app {
  max-width: none;
  /* copy is still arriving; one long word or URL would otherwise push past
     the viewport at 320 */
  overflow-wrap: anywhere;                        /* fill the cell rather than ragging
                                             at 34ch inside it */
  border: 1px solid var(--line-strong);   /* 3.07:1 */
  border-radius: 14px;
  padding: var(--space-3);
  transition: border-color 160ms var(--ease), translate 160ms var(--ease);
}
.app:hover { border-color: var(--gold); translate: 0 -2px; }   /* 7.84:1 */

/* the accent as a surface a second time; it also stops the pill competing
   with the card border at identical weight */
.app__stage {
  background: var(--gold-tint);
  border-color: transparent;
  color: var(--gold);                     /* 6.42:1 measured on the tint */
}

.team { gap: var(--space-4); margin-top: var(--space-2); }
.person {
  max-width: none;
  overflow-wrap: anywhere;
  border-top: 1px solid var(--line-strong);   /* 3.07:1 */
  padding-top: var(--space-3);
}

/* ---- motion -------------------------------------------------------------- */
/* Gated on no-preference rather than relying on the reduce block to undo it:
   fill-mode both holds the from-state for the whole delay, so a stagger that
   only has its duration zeroed leaves those users on opacity 0. */

@media (prefers-reduced-motion: no-preference) {
  .section--hero > * { animation: z-rise 620ms var(--ease) both; }
  .hero__headline        { animation-delay:  40ms; }
  .hero__lead            { animation-delay: 140ms; }
  .hero__cta             { animation-delay: 240ms; }
  .section--hero::before { animation: z-fade 1100ms var(--ease) both; }
  .section--hero::after  { animation: z-fade 1400ms var(--ease) 120ms both; }
}
@keyframes z-rise   { from { opacity: 0; translate: 0 14px; } }
@keyframes z-fade   { from { opacity: 0; } }