/* ==========================================================================
   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;
}

/* Only ONE logo image appears on this page - the full brush mark in the hero.
   Everywhere else the studio signs its name in type. */
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.14rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--ink);
}
.wordmark__two {
  color: var(--blood);
  font-style: italic;
}

.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__links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--gap-s); }