/* Jakob's own look, taken from his portfolio (blachjakob.com):
   cream paper, near-black ink, a wide grotesk, black tags with cream text,
   "+" crosshairs on the grid and huge wide numerals.
   Only active with <html data-theme="blach">. The base site is untouched.

   Font: his site uses an Adobe Fonts typeface (a wide, Helvetica-Extended-style grotesk).
   That licence is tied to his Adobe account, so this uses Archivo at its widest
   setting, a free and very close match. If he adds this site's domain to his
   Adobe Fonts web project, swap --wide for that family. */

html[data-theme="blach"] {
  --cream: #FDF8EB;
  --black: #131312;
  --board: var(--cream);
  --paper: var(--black);     /* main text, and the dark cards */
  --paper-2: var(--black);   /* photo frames */
  --ink: var(--cream);       /* text on dark cards */
  --signal: var(--black);    /* emphasis = black, as on his site */
  --muted: #6d6a62;
  --wide: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display: var(--wide);
  --body: var(--wide);
  --mono: var(--wide);
  /* globe colours, read by globe.js */
  --globe-ocean: var(--black);
  --globe-land: var(--cream);
  --globe-grid: rgba(253, 248, 235, .14);
  --globe-route: var(--cream);
  --globe-route-edge: var(--black);
  --globe-pin: var(--cream);
  --globe-label-bg: var(--cream);
  --globe-label-fg: var(--black);
  --globe-font: "Archivo";
  color-scheme: light;
  font-variation-settings: "wdth" 112;
}
html[data-theme="blach"] body { font-weight: 400; }

/* wide setting for everything big, like his numerals */
html[data-theme="blach"] :is(.paint, .panel h1, .panel h2, .racefile header b, .racefile dd, .ticket header b,
  .ticket li b, .ticket li time, .offer h3, .pack h3, .ninety h3, .pack b, .ninety b, .editnotes h4,
  .contact a span, .pcard.tix b, .tags li, .tags button, .stamp, .zone::before) {
  font-variation-settings: "wdth" 125;
  letter-spacing: -.01em;
}
/* small labels: wide, uppercase, like his "VIDEOGRAPHY / CONTENT" tags */
html[data-theme="blach"] :is(.frame-bar, .racefile dt, .racefile header span, .clip span, .phone-top, .tap) {
  font-variation-settings: "wdth" 125;
  text-transform: uppercase; letter-spacing: .02em; font-weight: 500;
}

/* ---------- the board ---------- */
html[data-theme="blach"] .stage { background: var(--cream); }
html[data-theme="blach"] .board {
  /* his "+" crosshairs instead of dots */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M100 88v24M88 100h24' stroke='%23131312' stroke-opacity='.28' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
html[data-theme="blach"] .stage::before { background-image: url("media/board-snap-blach.webp?v=6"); }
html[data-theme="blach"] .stage::after {
  background:
    linear-gradient(20deg, rgba(253,248,235,.97) 0%, rgba(253,248,235,.85) 40%, rgba(253,248,235,.6) 75%),
    rgba(253,248,235,.35);
}
html[data-theme="blach"] .intro { background: var(--cream); }

/* big section numerals, his signature */
html[data-theme="blach"] .board { counter-reset: zone; }
html[data-theme="blach"] .zone { counter-increment: zone; }
html[data-theme="blach"] .zone::before {
  content: counter(zone, decimal-leading-zero);
  position: absolute; right: 30px; bottom: -40px; z-index: 0;
  font: 900 300px/.8 var(--wide); color: var(--black);
  pointer-events: none;
}

/* numeral placement where the corner is taken */
html[data-theme="blach"] .zone[data-zone="clients"] .tags { width: 1180px !important; }
html[data-theme="blach"] .zone[data-zone="clients"] { height: 1180px !important; } /* room for the extra row of tags */

/* photos: black frames, softer shadows on light paper, no tape */
html[data-theme="blach"] :is(.photo, .pcard, .dcard, .hero-deck figure) { box-shadow: 0 18px 40px rgba(19,19,18,.22), 0 2px 6px rgba(19,19,18,.15); }
html[data-theme="blach"] .photo.taped::before, html[data-theme="blach"] .tape { display: none; }
html[data-theme="blach"] .photo figcaption, html[data-theme="blach"] .pcard.photo figcaption {
  font-variation-settings: "wdth" 125; text-transform: uppercase; font-size: 20px; font-weight: 500; letter-spacing: .02em;
}
html[data-theme="blach"] .hero-deck figure { background: var(--black); }

/* painted words: black, with the accent line as a black tag */
html[data-theme="blach"] .paint .o { background: var(--black); color: var(--cream); padding: .04em .12em 0; margin-left: -.12em; width: fit-content; }

/* race file */
html[data-theme="blach"] .racefile { border-top-color: var(--black); }
html[data-theme="blach"] .racefile header span { color: var(--cream); }
html[data-theme="blach"] .racefile dt, html[data-theme="blach"] .racefile dd { border-top-color: rgba(253,248,235,.16); }
html[data-theme="blach"] .racefile dt { color: rgba(253,248,235,.6); }
html[data-theme="blach"] .racefile dd i { color: rgba(253,248,235,.5); }
html[data-theme="blach"] .racefile .o { background: var(--cream); color: var(--black); }
html[data-theme="blach"] .racefile dt.o, html[data-theme="blach"] .racefile dd.o { color: var(--black); }
html[data-theme="blach"] .stamp { color: var(--black); border-color: var(--black); }
html[data-theme="blach"] .stamp.small { background: var(--cream); }

/* camera */
html[data-theme="blach"] .frame { border-color: var(--black); }
html[data-theme="blach"] .frame-bar, html[data-theme="blach"] .frame-bar span:first-child { color: var(--cream); }
html[data-theme="blach"] .clip { border-color: var(--black); }
html[data-theme="blach"] .clip.on { border-color: var(--black); box-shadow: 0 0 0 5px var(--cream), 0 0 0 9px var(--black), 0 24px 50px rgba(19,19,18,.3); }
html[data-theme="blach"] .clip.on span::before { color: var(--cream); }
html[data-theme="blach"] .editnotes h4 i { color: rgba(253,248,235,.65); }
html[data-theme="blach"] .editnotes dd { color: rgba(253,248,235,.82); border-bottom-color: rgba(253,248,235,.14); }

/* client tags: plain = outlined, clickable = cream tag with arrow, playing = black */
html[data-theme="blach"] .tags li { background: transparent; color: var(--black); border-color: var(--black); }
html[data-theme="blach"] .tags li:has(button) { background: var(--cream); color: var(--black); border-color: var(--black); box-shadow: 4px 4px 0 var(--black); }
html[data-theme="blach"] .tags li:has(button.on) { background: var(--black); color: var(--cream); border-color: var(--black); }
html[data-theme="blach"] .tags li:has(button:focus-visible) { outline-color: var(--black); }

/* season ticket */
html[data-theme="blach"] .ticket li { border-bottom-color: rgba(253,248,235,.14); }
html[data-theme="blach"] .ticket li time { color: var(--cream); }
html[data-theme="blach"] .ticket li span, html[data-theme="blach"] .ticket footer { color: rgba(253,248,235,.6); }
html[data-theme="blach"] .ticket li.o { background: var(--cream); }
html[data-theme="blach"] .tag-q { background: var(--cream); color: var(--black); font-variation-settings: "wdth" 125; font-size: 16px; }
html[data-theme="blach"] .ticket li.o :is(time, b, span) { color: var(--black); }

/* offer and deal */
html[data-theme="blach"] .pack b { color: var(--cream); }
html[data-theme="blach"] .pack li.on b { color: var(--black); }
html[data-theme="blach"] .sample-cap { color: var(--black); font-variation-settings: "wdth" 112; }
html[data-theme="blach"] .sample-media { border-color: var(--black); }
html[data-theme="blach"] .ninety { background: var(--cream); color: var(--black); border: 4px solid var(--black); box-shadow: 10px 10px 0 var(--black); }
html[data-theme="blach"] .ninety li { border-top-color: var(--black); }

/* phone, sticker, contact, place cards */
html[data-theme="blach"] .phone { color: var(--cream); }
html[data-theme="blach"] .phone-acts span:first-child { color: var(--cream); }
html[data-theme="blach"] .phone-comments li:nth-child(3) i { background: var(--cream); }
html[data-theme="blach"] .contact > b { color: rgba(253,248,235,.6); }
html[data-theme="blach"] .contact a { border-top-color: rgba(253,248,235,.16); }
html[data-theme="blach"] .contact a em { color: rgba(253,248,235,.6); }
html[data-theme="blach"] .contact a:hover span, html[data-theme="blach"] .contact a:focus-visible span { color: var(--cream); text-decoration: underline; }
html[data-theme="blach"] .pcard.tix { border-left-color: var(--cream); }

/* ---------- text panels ---------- */
html[data-theme="blach"] .panel {
  background: rgba(253,248,235,.94);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 2px solid var(--black);
  box-shadow: 8px 8px 0 var(--black);
}
html[data-theme="blach"] .panel h1, html[data-theme="blach"] .panel h2 { color: var(--black); font-weight: 900; }
html[data-theme="blach"] .panel { width: min(34vw, 560px); }
html[data-theme="blach"] .panel h2 { font-size: clamp(24px, 2.2vw, 38px); line-height: 1; }
html[data-theme="blach"] .panel p { color: #2b2a27; }
html[data-theme="blach"] .panel.hero { border: 0; box-shadow: none; background: transparent; }
html[data-theme="blach"] .panel.hero { width: min(50vw, 780px); }
html[data-theme="blach"] .panel.hero h1 { font-size: clamp(40px, 4.7vw, 88px); text-shadow: none; line-height: .95; white-space: nowrap; }
html[data-theme="blach"] .panel.hero h1 span { color: var(--cream); background: var(--black); padding: .06em .14em 0; margin-left: -.14em; display: inline-block; }
html[data-theme="blach"] .panel.hero p:not(.hint) { text-shadow: none; color: #2b2a27; }
html[data-theme="blach"] .links a { background: var(--black); color: var(--cream); font-family: var(--wide); font-variation-settings: "wdth" 125; }
html[data-theme="blach"] .links a:hover, html[data-theme="blach"] .links a:focus-visible { background: var(--cream); color: var(--black); outline: 2px solid var(--black); }
html[data-theme="blach"] a:focus-visible { outline-color: var(--black); }
html[data-theme="blach"] .rail button { border-color: var(--black); }
html[data-theme="blach"] .rail button[aria-current="true"] { background: var(--black); border-color: var(--black); }

/* wide type takes more room: scale the big board words down */
html[data-theme="blach"] .paint.end { font-size: 150px; }
html[data-theme="blach"] .racefile header b { font-size: 64px; }
html[data-theme="blach"] .racefile dd { font-size: 30px; }
html[data-theme="blach"] .ticket header b { font-size: 70px; }
html[data-theme="blach"] .ticket li b { font-size: 32px; }
html[data-theme="blach"] .offer h3, html[data-theme="blach"] .pack h3, html[data-theme="blach"] .ninety h3 { font-size: 64px; }
html[data-theme="blach"] .pack b, html[data-theme="blach"] .ninety b { font-size: 30px; }
html[data-theme="blach"] .editnotes h4 { font-size: 46px; }
html[data-theme="blach"] .contact a span { font-size: 34px; }
html[data-theme="blach"] .pcard.tix b { font-size: 40px; }
html[data-theme="blach"] .tags li, html[data-theme="blach"] .tags button { font-size: 34px; }
html[data-theme="blach"] .stamp { font-size: 44px; }

@media (max-width: 760px) {
  html[data-theme="blach"] .panel, html[data-theme="blach"] .panel.hero { width: auto; }
  html[data-theme="blach"] .panel.hero h1 { font-size: clamp(30px, 9vw, 44px); }
  html[data-theme="blach"] .panel h2 { font-size: 26px; }
  html[data-theme="blach"] .stage::after { background: linear-gradient(0deg, rgba(253,248,235,.98) 0%, rgba(253,248,235,.9) 45%, rgba(253,248,235,.6) 80%), rgba(253,248,235,.3); }
  html[data-theme="blach"] .panel { box-shadow: 5px 5px 0 var(--black); }
}

/* a Factor Ostro VAM rolls out from wherever you click (board.js adds it; Jakob's version only) */
.click-bike {
  position: fixed; z-index: 40; width: 72px; height: auto; pointer-events: none;
  translate: -50% -70%;
  animation: ride-off .9s cubic-bezier(.3, 0, .6, 1) forwards;
}
@keyframes ride-off {
  0% { transform: scale(.6); opacity: 0; }
  15% { transform: scale(1); opacity: 1; }
  35% { transform: translate(30px, 0) rotate(-12deg); }   /* a little wheelie */
  55% { transform: translate(80px, 0) rotate(0); opacity: 1; }
  100% { transform: translate(190px, 0); opacity: 0; }
}