/* bruhfoons.com — the front door. Two spot colours, one clip, a jester's ground. */

@font-face {
  font-family: "Titan One";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/titan-one-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Titan One";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/titan-one-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/bricolage-grotesque-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/bricolage-grotesque-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/bricolage-grotesque-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* James's Tumblr theme for the blog, fixed */
  --yellow:  oklch(0.86 0.172 95);    /* #EECB13 */
  --cobalt:  oklch(0.47 0.198 262);   /* #0F58C9 */
  --cyan:    oklch(0.74 0.150 230);   /* #00B8FF */
  /* neutrals tinted toward the two spot colours */
  --ink:     oklch(0.22 0.060 262);
  --ink-2:   oklch(0.34 0.070 262);
  --cream:   oklch(0.97 0.030 95);
  --cream-2: oklch(0.92 0.060 95);
  --yellow-deep: oklch(0.76 0.160 90);
  --cobalt-deep: oklch(0.36 0.160 262);

  --display: "Titan One", "Arial Black", "Impact", sans-serif;
  --body: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", sans-serif;

  --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px;
  --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; --space-4xl: 64px; --space-5xl: 96px;

  --gutter: clamp(16px, 5vw, 64px);
  --measure: 58ch;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* the motley: two diamonds per tile, cobalt on yellow */
  --motley: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='88' viewBox='0 0 56 88'%3E%3Crect width='56' height='88' fill='%23EECB13'/%3E%3Cpath d='M28 0 L56 44 L28 88 L0 44 Z' fill='%230F58C9'/%3E%3Cpath d='M0 0 L28 44 L0 88 Z M56 0 L28 44 L56 88 Z' fill='%23EECB13'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.5;
  font-optical-sizing: auto;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--cobalt); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--cobalt-deep); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

h1, h2 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1; letter-spacing: 0.005em; }
h2 { font-size: clamp(2rem, 5vw, 3.25rem); color: var(--cobalt); text-wrap: balance; }
p { margin: 0; }
q { quotes: "\201C" "\201D"; }

.kicker {
  font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: var(--space-md);
}

/* ── masthead: the motley, the good boy, the wordmark ─────────────────────── */
.mast {
  background: var(--motley);
  background-size: 56px 88px;
  padding-block: clamp(56px, 12vw, 128px) 0;
  position: relative;
}
.mast::after {
  /* the poster's ragged bottom edge: the yellow page tears into the motley */
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 28px;
  background: var(--yellow);
  clip-path: polygon(0 100%, 0 60%, 3% 20%, 7% 70%, 12% 30%, 18% 80%, 23% 40%, 29% 90%, 34% 30%, 40% 75%, 46% 25%, 52% 85%, 58% 35%, 64% 80%, 70% 20%, 76% 70%, 82% 30%, 88% 85%, 94% 40%, 100% 75%, 100% 100%);
}
.mast-in {
  max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter);
  display: grid; justify-items: start; gap: var(--space-lg);
  position: relative;
}
.avatar {
  width: clamp(112px, 22vw, 176px); aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; display: block;
  border: 6px solid var(--cream);
  box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(-4deg);
  transition: transform 300ms var(--ease-out);
}
.avatar:hover { transform: rotate(0deg) scale(1.03); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.wordmark {
  font-size: clamp(3.25rem, 15vw, 9.5rem);
  color: var(--cream);
  text-transform: uppercase;
  line-height: 0.86;
  display: flex; flex-wrap: wrap; gap: 0 0.18em;
  paint-order: stroke fill;
  -webkit-text-stroke: 0.045em var(--ink);
  text-shadow: 0.06em 0.06em 0 var(--ink);
  margin-top: var(--space-sm);
}
.tagline {
  font-family: var(--display);
  font-size: clamp(1.125rem, 2.6vw, 1.625rem);
  color: var(--ink);
  background: var(--cream);
  padding: 0.35em 0.7em;
  transform: rotate(-1.5deg);
  box-shadow: 5px 5px 0 var(--ink);
  margin-bottom: 44px; /* clears the torn edge */
}

/* ── now showing: the phone ───────────────────────────────────────────────── */
.now {
  max-width: 1120px; margin-inline: auto; padding: clamp(40px, 8vw, 96px) var(--gutter) 0;
  display: grid; gap: var(--space-2xl);
  grid-template-columns: 1fr;
  align-items: start;
}
.now-copy { max-width: var(--measure); }
.now-copy h2 { margin-bottom: var(--space-sm); }
.ep { font-weight: 700; color: var(--ink-2); font-size: 0.9375rem; margin-bottom: var(--space-xl); }
.logline { font-size: clamp(1.125rem, 2.2vw, 1.375rem); font-weight: 500; line-height: 1.35; text-wrap: pretty; }
.line {
  font-family: var(--display); color: var(--cobalt);
  font-size: clamp(1.75rem, 4.5vw, 3rem); line-height: 1;
  margin-block: var(--space-xl) var(--space-lg);
}
.meta { color: var(--ink-2); }

.phone {
  margin: 0; width: min(100%, 360px);
  display: grid; gap: var(--space-md); justify-items: center;
}
.screen {
  position: relative; width: 100%; aspect-ratio: 9 / 16;
  background: var(--ink);
  border: 10px solid var(--ink);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 12px 12px 0 var(--cobalt);
}
.screen video { width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
.play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: transparent; border: 0; cursor: pointer; padding: 0;
  display: grid; place-content: center; gap: var(--space-sm); justify-items: center;
  color: var(--cream); font: inherit; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8125rem;
}
.play svg {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--yellow); fill: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 250ms var(--ease-out);
}
.play:hover svg, .play:focus-visible svg { transform: scale(1.06); }
.play span { text-shadow: 0 1px 0 var(--ink), 0 0 12px rgb(0 0 0 / 0.5); }
.play[hidden] { display: none; }
.phone figcaption { font-size: 0.875rem; color: var(--ink-2); font-weight: 500; }

/* ── the house ────────────────────────────────────────────────────────────── */
.house {
  max-width: 1120px; margin-inline: auto; padding: clamp(56px, 10vw, 120px) var(--gutter) 0;
  display: grid; gap: var(--space-2xl);
}
.house-art img {
  border: 6px solid var(--cream);
  box-shadow: 10px 10px 0 var(--ink);
  transform: rotate(1deg);
}
.house-copy { max-width: var(--measure); }
.house-copy h2 { margin-bottom: var(--space-lg); }
.house-copy > p { font-size: 1.125rem; font-weight: 500; line-height: 1.4; text-wrap: pretty; }

.roster {
  margin: var(--space-2xl) 0 0;
  display: grid; gap: 0;
  background: var(--cream);
  box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(-0.6deg);
}
.roster > div {
  display: grid; grid-template-columns: 6.5em 1fr; gap: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  border-top: 2px dashed var(--cream-2);
  align-items: baseline;
}
.roster > div:first-child { border-top: 0; }
.roster dt { font-family: var(--display); font-size: 1.375rem; color: var(--cobalt); text-transform: uppercase; }
.roster dd { margin: 0; }

/* ── follow ───────────────────────────────────────────────────────────────── */
.follow { padding: clamp(64px, 10vw, 128px) 0 clamp(56px, 8vw, 96px); }
.follow-in { max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); display: grid; justify-items: start; gap: var(--space-lg); }
.follow-in h2 { max-width: 18ch; }
.follow-sub { color: var(--ink-2); max-width: var(--measure); }
.btn {
  display: inline-flex; align-items: center; gap: var(--space-md);
  margin-top: var(--space-md);
  background: var(--cyan); color: var(--ink);
  font-family: var(--display); font-size: clamp(1.25rem, 3vw, 1.75rem); text-decoration: none;
  padding: 0.6em 1em 0.6em 0.85em;
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.btn:hover { color: var(--ink); transform: translate(-2px, -2px); box-shadow: 10px 10px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 4px 4px 0 var(--ink); }

/* ── foot ─────────────────────────────────────────────────────────────────── */
.foot {
  background: var(--motley); background-size: 56px 88px;
  padding: var(--space-3xl) var(--gutter) var(--space-3xl);
  display: grid; justify-items: center; gap: var(--space-xl);
  position: relative;
}
.foot::before {
  content: ""; position: absolute; inset: -1px 0 auto 0; height: 28px;
  background: var(--yellow);
  clip-path: polygon(0 0, 100% 0, 100% 30%, 95% 80%, 89% 20%, 83% 70%, 77% 25%, 71% 85%, 65% 35%, 59% 75%, 53% 15%, 47% 70%, 41% 30%, 35% 85%, 29% 25%, 23% 75%, 17% 30%, 11% 80%, 5% 35%, 0 70%);
}
.foot-badge {
  width: clamp(140px, 30vw, 220px); aspect-ratio: 1; object-fit: cover; object-position: 50% 45%;
  border-radius: 50%; border: 6px solid var(--cream); box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(3deg);
}
.foot p {
  font-weight: 700; font-size: 0.875rem; letter-spacing: 0.06em;
  color: var(--ink); background: var(--cream); padding: 0.4em 0.9em;
  box-shadow: 4px 4px 0 var(--ink);
}

/* ── wide: the desk ───────────────────────────────────────────────────────── */
@media (min-width: 760px) {
  .now { grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 6vw, 96px); }
  .phone { position: sticky; top: 32px; justify-self: end; }
  .house { grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(32px, 6vw, 96px); }
  .house-copy { order: -1; }
  .roster > div { grid-template-columns: 7em 1fr; }
}
@media (min-width: 1100px) {
  .mast-in { grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-3xl); align-items: end; }
  .avatar { grid-row: 1 / 3; align-self: end; }
  .wordmark { grid-column: 2; }
  .tagline { grid-column: 2; justify-self: start; }
}

/* ── entrance: one staggered reveal, then nothing ──────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .avatar, .wordmark, .tagline, .now-copy, .phone {
    animation: rise 700ms var(--ease-out) both;
  }
  .wordmark { animation-delay: 60ms; }
  .tagline { animation-delay: 140ms; }
  .now-copy { animation-delay: 220ms; }
  .phone { animation-delay: 300ms; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
  .avatar { animation-name: rise-tilt; }
  @keyframes rise-tilt {
    from { opacity: 0; transform: translateY(18px) rotate(-4deg); }
    to { opacity: 1; transform: none rotate(-4deg); }
  }
  .tagline { animation-name: rise-tag; }
  @keyframes rise-tag {
    from { opacity: 0; transform: translateY(18px) rotate(-1.5deg); }
    to { opacity: 1; transform: rotate(-1.5deg); }
  }
}