/*
Theme Name: Creator Portfolio
Description: Monochrome, dot-matrix portfolio theme for content creators. Edit everything under Appearance > Customize, plus the Videos and Collaborations menus.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Author: tony
License: GPL-2.0-or-later
Text Domain: creator-portfolio
*/

/* Layout: a single 12-col industrial grid on a dotted ground; monochrome with one red signal colour. */
:root {
  --bg: #f2f2f0;
  --surface: #ffffff;
  --fg: #111111;
  --muted: #6b6b68;
  --line: #d6d6d2;
  --dot: #cfcfca;
  --signal: #e0484f;
  --petal-1: #ffb4b4;
  --petal-2: #ffc4a6;
  --petal-3: #c9bfc2;
  --invert-bg: #111111;
  --invert-fg: #f2f2f0;
  --font-display: 'Doto', 'Courier New', monospace;
  --font-body: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --radius: 20px;
  --max: 1240px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0b; --surface: #161616; --fg: #f2f2f0; --muted: #8f8f8a;
    --line: #2a2a2a; --dot: #262626; --signal: #ff8a85;
    --invert-bg: #f2f2f0; --invert-fg: #0b0b0b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0b0b; --surface: #161616; --fg: #f2f2f0; --muted: #8f8f8a;
  --line: #2a2a2a; --dot: #262626; --signal: #ff8a85;
  --invert-bg: #f2f2f0; --invert-fg: #0b0b0b;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg);
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}

.display { font-family: var(--font-display); font-weight: 900; letter-spacing: 0.02em; line-height: 0.95; text-transform: uppercase; }
.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.red { color: var(--signal); }
.eyebrow { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }

/* Header */
.header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 26px; }
.logo-mark { width: auto; height: 28px; display: block; }
.nav { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.nav a:not(.pill) { color: var(--muted); transition: color .2s; }
.nav a:not(.pill):hover { color: var(--fg); }
.pill { border: 1px solid var(--fg); border-radius: 999px; padding: 6px 14px; transition: background .2s, color .2s; }
.pill:hover { background: var(--fg); color: var(--bg); }
@media (max-width: 560px) { .nav a:not(.pill) { display: none; } }

/* Hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.dotfield { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-inner { position: relative; display: grid; gap: clamp(28px, 6vw, 72px); padding-block: clamp(28px, 5vw, 48px) clamp(32px, 6vw, 64px); pointer-events: none; }
.hero-inner a { pointer-events: auto; }
.hero-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; text-transform: uppercase; }
.rec { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); margin-right: 6px; vertical-align: 1px; animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .rec { animation: none; } }
.hero-inner { container-type: inline-size; }
/* Name always fits on one line: Doto is monospaced, each character is about 0.62em wide. */
.hero-title {
  margin: 0; text-align: center; white-space: nowrap; line-height: 0.85;
  font-size: min(210px, calc((100vw - 32px) / (var(--chars, 9) * 0.63)));
  font-size: min(210px, calc(100cqi / (var(--chars, 9) * 0.63)));
}
.hero-foot { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 20px; }
.lede { margin: 0; max-width: 34ch; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.35; text-wrap: balance; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 14px var(--font-body); color: var(--bg); background: var(--fg);
  border: 0; border-radius: 999px; padding: 12px 20px; cursor: pointer;
  transition: transform .2s, background .2s;
}
.btn:hover { background: var(--signal); color: #fff; }
.btn.invert { background: var(--invert-fg); color: var(--invert-bg); }
.btn.invert:hover { background: var(--signal); color: #fff; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); border-bottom: 1px solid var(--line); }
.stat { display: grid; gap: 10px; padding: 28px 20px 28px 0; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 20px; }
.stat-value { font-size: clamp(40px, 5vw, 64px); }
.stat-label { font-size: 13px; color: var(--muted); max-width: 18ch; }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stat:nth-child(odd):last-child { grid-column: 1 / -1; }
}

/* Sections */
main > section:not(.hero):not(.stats):not(.contact) { padding-block: clamp(64px, 9vw, 120px); }
.section-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 { margin: 0; font-size: clamp(40px, 7vw, 88px); text-wrap: balance; }

.about { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; }
.about .section-head { margin: 0; }
.about-body { display: grid; gap: 16px; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; max-width: 60ch; }
.about-body p { margin: 0; }
.tags { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { font: 400 13px var(--font-mono); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; } }

/* Work */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .work-grid { grid-template-columns: 1fr; } }
.card { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-width: 0; }
.thumb {
  position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 12px; overflow: hidden;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1.3px, transparent 1.6px);
  background-size: 10px 10px;
  display: grid; place-items: center;
}
/* frame outline shows the video's real aspect ratio inside the thumb */
.thumb::before { content: ""; position: absolute; border: 1.5px dashed var(--muted); border-radius: 6px; opacity: .6; }
.wide .thumb::before { width: 78%; aspect-ratio: 16 / 9; }
.tall .thumb::before { height: 82%; aspect-ratio: 9 / 16; }
.play { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: var(--bg); font-size: 16px; padding-left: 3px; transition: background .2s; }
.card:hover .play { background: var(--signal); color: #fff; }
.thumb-tag, .thumb-format, .thumb-time { position: absolute; text-transform: uppercase; }
.thumb-tag { top: 10px; left: 12px; }
.thumb-format { top: 10px; right: 12px; color: var(--muted); }
.thumb-time { bottom: 10px; right: 12px; background: var(--fg); color: var(--bg); border-radius: 4px; padding: 2px 6px; }
.card-body { display: grid; gap: 4px; padding: 0 6px 8px; }
.card-body h3 { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.3; }

/* Platforms */
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.platform { position: relative; display: grid; gap: 18px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0; transition: border-color .2s; }
.platform:hover { border-color: var(--fg); }
.platform-head { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 24px; }
.platform-logo { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand, var(--fg)); color: var(--ink, var(--bg)); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.platform-logo svg { width: 24px; height: 24px; }
.platform-logo.has-image { background: #fff; }
.platform-logo.has-image img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.platform-logo.is-initials { font-size: 14px; letter-spacing: .04em; }
.platform:hover .platform-logo { transform: rotate(-6deg); }
.platform-logo { transition: transform .2s; }
.platform-count { font-size: clamp(44px, 5vw, 64px); }
.platform-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.arrow { position: absolute; top: 18px; right: 20px; font-size: 18px; }

/* Collabs: brand carousel; each brand opens a dialog with its videos */
.section-head-row { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head-row .section-head { margin: 0; }
.carousel-nav { display: flex; gap: 8px; flex-shrink: 0; }
.carousel-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--fg); background: transparent; color: var(--fg); font-size: 18px; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.carousel-btn:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
.carousel-btn:disabled { opacity: .3; cursor: default; }
.carousel {
  list-style: none; margin: 0; padding: 0 0 8px;
  display: grid; grid-auto-flow: column; gap: 16px;
  grid-auto-columns: calc((100% - 3 * 16px) / 4);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
@media (max-width: 900px) { .carousel { grid-auto-columns: calc((100% - 16px) / 2.4); } }
@media (max-width: 560px) { .carousel { grid-auto-columns: 72%; } }
@media (prefers-reduced-motion: reduce) { .carousel { scroll-behavior: auto; } }
.brand-card { scroll-snap-align: start; min-width: 0; display: flex; }
.brand-open {
  flex: 1; display: grid; gap: 6px; align-content: start; text-align: left;
  font: inherit; color: inherit; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 10px 18px;
  transition: border-color .2s, transform .25s cubic-bezier(.2,.7,.2,1);
}
button.brand-open { cursor: pointer; }
button.brand-open:hover { border-color: var(--fg); transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { button.brand-open:hover { transform: none; } }
.brand-open > :not(.collab-logo) { padding-inline: 8px; }
.brand-open .collab-logo { width: 100%; height: auto; aspect-ratio: 16 / 10; margin-bottom: 10px; padding: 18% 16%; }
.brand-name { font-size: 18px; font-weight: 500; line-height: 1.3; }
.brand-meta { font-size: 13px; }
.brand-count { margin-top: 8px; text-transform: uppercase; color: var(--signal); }
/* Logo chip stays light in both themes so any brand logo reads; greyscale until hovered. */
.collab-logo { display: grid; place-items: center; border-radius: 12px; background: #f7f7f5; border: 1px solid var(--line); overflow: hidden; }
.collab-logo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter .25s, opacity .25s; }
.brand-open:hover .collab-logo img, .brand-dialog .collab-logo img { filter: none; opacity: 1; }
.collab-logo.is-empty { background: var(--bg); }
.collab-logo.is-empty span { font-size: clamp(28px, 4vw, 44px); color: var(--muted); }

.brand-dialog {
  width: min(760px, calc(100% - 32px)); max-height: min(86vh, 900px); padding: 0;
  background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius);
}
.brand-dialog::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.brand-dialog[open] { animation: rise .3s cubic-bezier(.2,.7,.2,1); }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .brand-dialog[open] { animation: none; } }
.dialog-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--bg); border-bottom: 1px solid var(--line); }
.dialog-head .collab-logo { width: 96px; height: 56px; padding: 8px 12px; flex-shrink: 0; }
.dialog-head .collab-logo.is-empty span { font-size: 24px; }
.dialog-title { display: grid; gap: 2px; min-width: 0; flex: 1; }
.dialog-title h3 { margin: 0; font-size: 22px; font-weight: 500; }
.dialog-title span { font-size: 13px; }
.dialog-title a { text-transform: uppercase; color: var(--signal); }
.dialog-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-size: 22px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.dialog-close:hover { border-color: var(--fg); }
.brand-videos { list-style: none; margin: 0; padding: 8px 20px 20px; display: grid; }
.brand-videos li { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.brand-videos li:last-child { border-bottom: 0; }
.thumb.mini { aspect-ratio: 16 / 10; border-radius: 10px; }
.thumb.mini .play { width: 40px; height: 40px; font-size: 13px; }
.brand-video-body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.brand-video-body h4 { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.3; }
.brand-video-body p { margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 60ch; }
.watch { justify-self: start; margin-top: 6px; font-size: 13px; font-weight: 500; border: 1px solid var(--fg); border-radius: 999px; padding: 6px 14px; transition: background .2s, color .2s; }
.watch:hover { background: var(--fg); color: var(--bg); }
@media (max-width: 560px) {
  .brand-videos li { grid-template-columns: 112px 1fr; gap: 14px; }
  .thumb.mini { aspect-ratio: 1; }
  .thumb.mini .play { width: 32px; height: 32px; font-size: 11px; }
  .thumb.mini .thumb-time { bottom: 6px; right: 6px; }
  .brand-video-body h4 { font-size: 16px; }
  .brand-video-body p { font-size: 14px; }
  .dialog-title h3 { font-size: 19px; }
  .dialog-head { padding: 12px 16px; gap: 12px; }
  .dialog-head .collab-logo { width: 72px; height: 44px; }
  .brand-videos { padding-inline: 16px; }
}
.dialog-open { overflow: hidden; }

/* Contact */
.contact { background: var(--invert-bg); color: var(--invert-fg); }
.contact .muted, .contact .eyebrow { color: color-mix(in srgb, var(--invert-fg) 60%, transparent); }
.contact-inner { display: grid; gap: 24px; padding-block: clamp(72px, 10vw, 140px); }
.contact-title { margin: 0; font-size: clamp(44px, 9vw, 128px); text-wrap: balance; }
.contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.email { font-size: clamp(22px, 3.4vw, 40px); font-weight: 500; overflow-wrap: anywhere; user-select: all; }
.contact p { margin: 0; }

.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-block: 24px; color: var(--muted); text-transform: uppercase; }

/* WordPress additions */
.thumb.has-image { background-size: cover; background-position: center; }
.thumb.has-image::before { display: none; }
.thumb.has-image .thumb-tag, .thumb.has-image .thumb-format { background: var(--fg); color: var(--bg); border-radius: 4px; padding: 2px 6px; }
.hero-title span { display: inline-block; }
.js:not(.motion) .hero-title span { animation: lit .25s both; animation-delay: calc(.15s + var(--i) * .05s); }
/* Hidden until animations.js brings them in (see the "motion" class in functions.php). */
.motion .hero-title span, .motion .hero-meta, .motion .hero-foot, .motion .section-head, .motion .carousel-nav,
.motion .about-body > *, .motion .contact-inner > *, .motion .stat, .motion .work-grid > .card,
.motion .platforms > .platform, .motion .carousel > .brand-card { opacity: 0; }
.motion .brand-dialog[open] { animation: none; }
@keyframes lit { from { opacity: .15; } to { opacity: 1; } }
.lift { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.lift:hover { transform: translateY(-4px); }
.platform .arrow { transition: transform .2s; }
.platform:hover .arrow { transform: translate(4px, -4px); }
@media (prefers-reduced-motion: reduce) { .js:not(.motion) .hero-title span { animation: none; } .lift:hover, .platform:hover .arrow, .platform:hover .platform-logo { transform: none; } }
.page-body { padding-block: clamp(48px, 8vw, 96px); max-width: 760px; }
.page-body h1 { font-size: clamp(36px, 6vw, 64px); margin: 0 0 24px; }
.page-body a { text-decoration: underline; }
.page-body img { height: auto; }
.post-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.post-list li { padding: 20px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.admin-bar .header { top: 32px; }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .header { top: 0; } }

.logo { min-width: 0; }
.logo .display { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { flex-shrink: 0; }
@media (max-width: 400px) { .logo { font-size: 20px; gap: 8px; } .logo-mark { height: 22px; } }

main section[id] { scroll-margin-top: 72px; }

/* Edit shortcut beside headings, only visible when logged in */
.edit-link { margin-left: 10px; padding: 2px 8px; border: 1px solid var(--signal); border-radius: 999px; color: var(--signal); letter-spacing: .08em; }
.edit-link:hover { background: var(--signal); color: #fff; }
.contact .edit-link { color: var(--invert-fg); border-color: var(--invert-fg); }

/* Top bar colour from Customize > Portfolio > Top bar colours; fixed white or black ignores dark mode */
.header-white { --bg: #ffffff; --fg: #111111; --muted: #5f5f5c; --line: #e3e3df; color-scheme: light; }
.header-black { --bg: #0b0b0b; --fg: #f2f2f0; --muted: #a3a39e; --line: #2a2a2a; color-scheme: dark; }
.header-white, .header-black { background: var(--bg); color: var(--fg); }