/* SHIFT54 v2 shared foundation.
   Tokens, reset, type scale and the portfolio banner, which is identical across
   both layouts because the brief specifies it exactly. */

@font-face {
  font-family: "Bebas Neue";
  src: url("assets/fonts/bebas-neue-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* The live site sits on pure black, which is the harshness the brief asks to
     soften. These are the four colours the brief allows, nothing else. */
  --ground: #191d1f;
  --panel: #23292b;
  --rule: #657074;   /* 3.33:1 on the ground, so the email underline actually reads */
  --grey: #949c9f;
  --white: #f4f5f5;
  --yellow: #ead244;
  --ink: #13181a;
  /* deep green from the SHIFT54 deck, eyeballed from a screenshot rather than
     sampled from the file, so confirm against the brand guide */
  --deck-green: #102420;

  --display: "Bebas Neue", Impact, "Haettenschweiler", sans-serif;
  --gap: 2px;
  /* the Thunder roundel carries fine lettering, so the banner needs enough
     height for the marks to actually read */
  --banner: 132px;
  --foot: 68px;
  /* One left edge for the whole page: logo, statement, investments line and the
     contact footer all start here. */
  --inset: clamp(1.15rem, 3.4vw, 3.6rem);
}

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

html {
  background: var(--ground);
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--ground);
  color: var(--white);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

/* Photographs stay black and white. The brief limits the page to black, white,
   grey and yellow, so no colour reveal on any trigger. */
.shot {
  position: relative;
  overflow: hidden;
  background: var(--panel);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  filter: grayscale(1) contrast(1.04);
}

.statement {
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.012em;
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
}

.statement em {
  color: var(--yellow);
  font-style: normal;
}

.contact {
  margin: 0;
  color: var(--grey);
  font-size: clamp(0.84rem, 1.12vw, 1.12rem);
  letter-spacing: 0.05em;
  line-height: 1.45;
  text-transform: uppercase;
}

.contact a {
  color: var(--white);
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color 240ms ease, border-color 240ms ease;
}

.contact a:hover {
  color: var(--yellow);
  border-color: var(--yellow);
}

.place {
  margin: 0;
  color: var(--grey);
  font-size: clamp(0.72rem, 0.85vw, 0.86rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.brand img {
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------
   Portfolio banner. Yellow, full width, the investments line set in
   the display face, three logos in their own cells divided by rules,
   each one a link out.
   --------------------------------------------------------------- */

.portfolio {
  display: grid;
  align-items: center;
  background: var(--yellow);
  color: var(--ink);
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
}

/* Julia asked whether the far left box should be green too. Used only on the
   green-box link so the two can be compared. */
.portfolio-line--green {
  background: var(--deck-green);
  color: var(--yellow);
  /* the banner centres its children, so without this the green only paints the
     paragraph box and leaves yellow above and below it */
  align-self: stretch;
  display: grid;
  align-content: center;
}

.portfolio-line {
  margin: 0;
  padding: 1.35rem clamp(1.1rem, 2vw, 2.1rem) 1.35rem var(--inset);
  font-size: clamp(0.95rem, 1.18vw, 1.28rem);
  letter-spacing: 0.02em;
  line-height: 1.12;
  text-transform: uppercase;
  text-wrap: balance;
}

.holding {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 0.9rem 0.8rem;
  border-left: 1px solid rgba(19, 24, 26, 0.28);
  text-decoration: none;
  transition: background-color 260ms ease;
}

.holding:hover {
  background: rgba(19, 24, 26, 0.07);
}

/* Not in use. Kept as a one word switch: add holding--dark to the HustleSasa
   anchor in b.html and its cell goes to the deck green.

   The reason it exists: HustleSasa's mark is light teal and measures 1.34
   against the yellow, so it sinks into the band, while Thunder and Omega sit at
   9.30 and 12.41. Those two are navy and black and need the light ground, so
   only the odd one out would change. Their magenta is the limiting colour and
   needs a green this deep to clear 3:1. Left off for now so Julia sees the
   banner as she specified it and can call it herself. */
.holding--dark {
  background: var(--deck-green);
  border-left-color: var(--deck-green);
}

.holding--dark:hover {
  background: #16302a;
}

/* The three marks are a square roundel, an upright mark and a wide wordmark.
   A single height cap makes the wordmark dominate and the others look lost, so
   each is capped on the dimension that actually governs its optical weight. */
.holding img {
  width: auto;
  height: auto;
  max-width: 100%;
}

.holding:nth-of-type(1) img { max-height: 92px; }
.holding:nth-of-type(2) img { max-height: 76px; }
.holding:nth-of-type(3) img { width: min(100%, 268px); }

.holding:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.copyright {
  margin: 0;
  color: var(--grey);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .portfolio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* On a phone the banner and the footer are furniture sitting under the
     photograph, and at the previous sizes they took 28% of the screen between
     them, which crowded the statement. The line and the logo cells are both
     stepped down so the picture keeps the height. The marks stay well above
     the size where their lettering stops reading. */
  .portfolio-line {
    padding: 0.85rem var(--inset) 0.7rem;
    font-size: 0.9rem;
    grid-column: 1 / -1;
  }

  .holding {
    padding: 0.7rem 0.55rem;
    border-top: 1px solid rgba(19, 24, 26, 0.28);
  }

  .holding:first-of-type {
    border-left: 0;
  }

  .holding:nth-of-type(1) img { max-height: 44px; }
  .holding:nth-of-type(2) img { max-height: 38px; }
  .holding:nth-of-type(3) img { width: min(100%, 126px); }
}

/* Entry is a single soft settle, nothing more. The brief asks for elegant and
   polished, and the one interaction the previous round had was cut. */
@media (prefers-reduced-motion: no-preference) {
  .settle {
    animation: settle 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--settle-delay, 0ms);
  }

  @keyframes settle {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}