/* ==========================================================================
   hard2play - studio site
   The wordmark is brush ink. So the page is the surface brush ink belongs on:
   a printed manga page. Warm newsprint, one weight of black, one red, screentone
   dots, and rules torn from the logo's own ground stroke. The page alternates
   paper and ink panels the way a printed spread does.
   Mobile-first. Every media query is min-width.
   ========================================================================== */

:root {
  --paper:    #e9e7e1;   /* newsprint, cooler and greyer than a cream */
  --paper-2:  #dfdcd4;   /* the tone a screentone block prints at */
  --ink:      #141416;
  --ink-2:    #3d3d44;   /* secondary text on paper */
  --ink-3:    #6f6f78;   /* captions */
  --blood:    #e00c14;
  --rule:     #c9c5bb;

  /* on an ink panel the roles invert */
  --on-ink:   #f0eee8;
  --on-ink-2: #a3a19b;
  --on-ink-3: #75736e;
}

body {
  background: var(--paper);
  color: var(--ink);
}

.skip-link { background: var(--ink); color: var(--paper); }

/* --- screentone -----------------------------------------------------------
   The single most manga thing on the page: a printed dot screen. Kept at a
   whisper so it reads as paper texture rather than as pattern.              */

.tone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--ink) 0.9px, transparent 1px);
  background-size: 5px 5px;
  opacity: 0.07;
}
.tone--fade {
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

/* --- brush rule -----------------------------------------------------------
   Lifted out of the logo: the ragged stroke the figure sits on.             */

.brushrule {
  display: block;
  width: 100%;
  height: clamp(16px, 3vw, 30px);
  border: 0;
  margin: 0;
  background: var(--ink);
  -webkit-mask: url('/assets/brand/brush-rule-ink.png') no-repeat center / 100% 100%;
  mask: url('/assets/brand/brush-rule-ink.png') no-repeat center / 100% 100%;
}
.brushrule--red { background: var(--blood); }
.brushrule--short { width: min(220px, 52%); }
.brushrule--light { background: var(--on-ink); }

/* --- top bar --------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.topbar.is-stuck { border-bottom-color: var(--rule); }
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  min-height: 60px;
}

/* Both pages sign themselves with the SAME artwork: the brandbook's compact
   mark. Dark-ink variant here for the paper page, light-ink on the noir one.
   The full lockup appears once, in this page's hero. */
.wordmark { display: inline-flex; align-items: center; }
.wordmark img { width: 46px; height: auto; }

.topnav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 2rem);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.topnav a {
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.topnav a:hover { color: var(--ink); border-bottom-color: var(--blood); }
.topnav a:first-child { display: none; }
@media (min-width: 620px) { .topnav a:first-child { display: inline; } }

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

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--gap-xl) var(--gap-l);
}

/* anime focus lines, aimed at the figure and almost invisible */
.hero__burst {
  position: absolute;
  z-index: 0;
  top: -20%;
  left: 50%;
  width: min(150vw, 1500px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(20, 20, 22, 0.05) 0deg 0.7deg,
    transparent 0.7deg 3.4deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 22%, #000 42%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 22%, #000 42%, transparent 74%);
  pointer-events: none;
}

/* The mark and the sentence are one statement, so once there is room they sit
   on one line instead of stacking. */
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--gap-m);
  align-items: center;
}
@media (min-width: 920px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
}

.hero__eyebrow {
  display: inline-block;
  background: var(--blood);
  color: #fff;
  padding: 0.32rem 0.7rem;
  margin-bottom: var(--gap-m);
}

.hero__logo { margin: 0; line-height: 0; }
.hero__logo img { width: min(100%, 560px); height: auto; }
@media (min-width: 920px) {
  .hero__logo img { width: 100%; }
}

.hero__thesis {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-3);
  line-height: 1.0;
  text-transform: uppercase;
  max-width: 14ch;
  margin-bottom: var(--gap-m);
  text-wrap: balance;
}

.hero__sub {
  color: var(--ink-2);
  max-width: 44ch;
  font-size: var(--step-1);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--gap-l);
}

/* --- buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--ink);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn__arrow { transition: transform 0.2s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--primary { background: var(--blood); border-color: var(--blood); color: #fff; }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* --- section rhythm ---------------------------------------------------------- */

.section { position: relative; padding-block: var(--gap-2xl); }

/* an ink panel - the black page in a printed spread */
.section--ink {
  background: var(--ink);
  color: var(--on-ink);
}
.section--ink .sectionhead__title { color: var(--on-ink); }
.section--ink .sectionhead__note { color: var(--on-ink-2); }
.section--ink .tone { background-image: radial-gradient(var(--on-ink) 0.9px, transparent 1px); opacity: 0.06; }

.sectionhead { position: relative; z-index: 1; margin-bottom: var(--gap-l); }
.sectionhead__eyebrow { color: var(--blood); margin-bottom: var(--gap-s); }
.sectionhead__title { font-size: var(--step-3); max-width: 18ch; text-wrap: balance; }
.sectionhead__note { margin-top: var(--gap-m); color: var(--ink-2); max-width: 50ch; }

/* --- the work ---------------------------------------------------------------- */

.work__inner { position: relative; z-index: 1; }

.projects { display: grid; gap: var(--gap-m); }

.project {
  border: 2px solid var(--ink);
  background: var(--paper);
  overflow: hidden;
}

.project__link {
  display: grid;
  height: 100%;
  transition: background 0.3s var(--ease);
}
.project__link:hover { background: var(--paper-2); }

.project__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--ink);
  border-bottom: 2px solid var(--ink);
}
.project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease);
}
.project__link:hover .project__media img,
.project__link:focus-visible .project__media img { transform: scale(1.06); }

.project__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-s);
  padding: var(--gap-m);
}

.project__meta { display: flex; align-items: center; gap: 0.85rem; }
.project__index {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}
.project__status {
  font-size: 0.68rem;
  color: #fff;
  background: var(--blood);
  padding: 0.22rem 0.55rem;
}

.project__title { font-size: var(--step-4); letter-spacing: 0.01em; }
.project__tagline {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.project__desc { color: var(--ink-2); max-width: 52ch; }

.project__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.35rem;
  margin-top: 0.25rem;
  font-size: var(--step--1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fact b {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin-right: 0.28rem;
  letter-spacing: 0;
}

.project__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: var(--gap-s);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--blood);
}
.project__cta span { transition: transform 0.22s var(--ease); }
.project__link:hover .project__cta span { transform: translateX(5px); }

@media (min-width: 860px) {
  .project__link { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .project__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 440px;
    border-bottom: 0;
    border-right: 2px solid var(--ink);
  }
  .project__body { justify-content: center; padding: var(--gap-l); }
}

/* --- rules (on the ink panel) -------------------------------------------------- */

.rules {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--gap-l);
  counter-reset: rule;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 820px) { .rules { grid-template-columns: repeat(3, 1fr); } }

.rule { counter-increment: rule; }
.rule__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1;
  color: var(--blood);
  margin-bottom: var(--gap-s);
}
.rule__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.02;
  text-transform: uppercase;
  margin-bottom: var(--gap-s);
  text-wrap: balance;
  color: var(--on-ink);
}
.rule .brushrule { margin-bottom: var(--gap-s); }
.rule__text { color: var(--on-ink-2); }
.rule__text strong { color: var(--on-ink); font-weight: 700; }

/* --- contact -------------------------------------------------------------------- */

.contact__inner { position: relative; z-index: 1; }
.contact__title { font-size: var(--step-3); margin-bottom: var(--gap-m); }
.contact__text { color: var(--ink-2); margin-bottom: var(--gap-m); }
.contact__mail {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--ink);
  border-bottom: 3px solid var(--blood);
  padding-bottom: 0.1em;
  transition: color 0.2s var(--ease);
  overflow-wrap: anywhere;
}
.contact__mail:hover { color: var(--blood); }
.contact__alt { margin-top: var(--gap-m); font-size: var(--step--1); color: var(--ink-3); }

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

.footer {
  border-top: 2px solid var(--ink);
  padding-block: var(--gap-l);
  font-size: var(--step--1);
  color: var(--ink-3);
}
.footer__inner { display: flex; flex-direction: column; gap: var(--gap-m); }
.footer__brand { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.05em; color: var(--ink-2); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; letter-spacing: 0.08em; }
.footer__nav a { padding: 0.35rem 0; transition: color 0.2s var(--ease); }
.footer__nav a:hover { color: var(--blood); }

@media (min-width: 780px) {
  .footer__inner { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .footer__legal { order: 3; width: 100%; padding-top: var(--gap-s); }
}

/* --- 404 ------------------------------------------------------------------------- */

.lost {
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: var(--gap-m);
  justify-items: start;
}
.lost__code {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 0.9;
  color: var(--blood);
}
.lost__title { font-size: var(--step-3); }
.lost__text { color: var(--ink-2); max-width: 44ch; }
.lost__mark { width: 56px; height: auto; }
.lost__links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--gap-s); }

/* --- invite link landing (/yahtzee/join) ------------------------------------------ */
/* The page a Yahtzee invitation opens on when it did not go straight into the app. It borrows the
   404 page's shape - one centred column with a big mark - because it says one thing and offers two
   ways forward. */

.join__code {
  font-size: var(--step-4);
  letter-spacing: 0.12em;
  color: var(--ink);
}
.join__hint {
  color: var(--ink-2);
  font-size: var(--step--1);
  max-width: 52ch;
}