/* ============================================================
   tobitheog.com — "the workshop grid"
   One typeface: PP Neue Montreal · warm-sand neutrals · card grid
   ============================================================ */

@font-face {
  font-family: "Neue Montreal";
  src: url("/fonts/neuemontreal-200.woff2") format("woff2");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("/fonts/neuemontreal-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("/fonts/neuemontreal-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---- Tokens: warm sand (Radix sand-ish), light primary ---- */
:root {
  --paper:   #f5f4f2;   /* page ground */
  --frame:   #f1f0ef;   /* grid frame + card borders */
  --card:    #fdfdfc;   /* card surface */
  --panel:   #f7f6f5;   /* preview inner panel */
  --line:    #eae8e5;   /* hairlines */
  --line-2:  #e2e0dc;

  --ink:     #21201c;   /* primary text / action */
  --ink-2:   #46443e;
  --muted:   #82827c;
  --faint:   #8d8d86;

  --live:    #30a46c;
  --soon:    #ab6400;

  --ff: "Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --track: -0.02em;      /* the requested -2% */

  --measure: 60rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --r-frame: 20px;
  --r-card: 14px;
  --r-panel: 9px;
  --shadow-card: 2px 2px 4px 0 rgba(0,0,0,.02), 0 1px 2px 0 rgba(0,0,0,.03);
  --shadow-hover: 0 2px 4px rgba(24,20,12,.05), 0 26px 34px -20px rgba(24,20,12,.36);

  /* shared motion vocabulary (Emil Kowalski easing) */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #171613;
    --frame:  #201f1b;
    --card:   #1d1c19;
    --panel:  #232320;
    --line:   #2c2b26;
    --line-2: #38362f;
    --ink:    #ecebe4;
    --ink-2:  #cbc9c0;
    --muted:  #9a988d;
    --faint:  #837f74;
    --live:   #43b581;
    --soon:   #d0973f;
    --shadow-card: 0 1px 2px rgba(0,0,0,.4);
    --shadow-hover: 0 2px 4px rgba(0,0,0,.5), 0 28px 40px -20px rgba(0,0,0,.75);
    color-scheme: dark;
  }
}
:root[data-theme="light"] {
  --paper:#f5f4f2; --frame:#f1f0ef; --card:#fdfdfc; --panel:#f7f6f5;
  --line:#eae8e5; --line-2:#e2e0dc; --ink:#21201c; --ink-2:#46443e;
  --muted:#82827c; --faint:#8d8d86; --live:#30a46c; --soon:#ab6400;
  --shadow-card: 2px 2px 4px 0 rgba(0,0,0,.02), 0 1px 2px 0 rgba(0,0,0,.03);
  --shadow-hover: 0 2px 4px rgba(24,20,12,.05), 0 26px 34px -20px rgba(24,20,12,.36);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper:#171613; --frame:#201f1b; --card:#1d1c19; --panel:#232320;
  --line:#2c2b26; --line-2:#38362f; --ink:#ecebe4; --ink-2:#cbc9c0;
  --muted:#9a988d; --faint:#837f74; --live:#43b581; --soon:#d0973f;
  --shadow-card: 0 1px 2px rgba(0,0,0,.4);
  --shadow-hover: 0 2px 4px rgba(0,0,0,.5), 0 28px 40px -20px rgba(0,0,0,.75);
  color-scheme: dark;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ff);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: var(--track);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 400; }
em { font-style: normal; }
::selection { background: var(--ink); color: var(--paper); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; font-size: .85rem; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; top: 0; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px;
}

/* ---- Layout ---- */
.page {
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(2.5rem, 8vh, 5.5rem) var(--gutter) 3.5rem;
}

/* ---- Masthead ---- */
.mast { display: flex; flex-direction: column; gap: 1.25rem; max-width: 44rem; }

.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  margin: 0; font-size: .8rem; letter-spacing: -.005em;
  color: var(--muted);
}
.eyebrow__sep { color: var(--faint); }
.clock { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.eyebrow__mine { color: var(--faint); }

.sticker {
  display: inline-block;
  font-size: 1.1em;
  line-height: 1;
  vertical-align: -.12em;
  margin: 0 .28em;
  filter:
    drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
    drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)
    drop-shadow(0 2.5px 3px rgba(0, 0, 0, .32));
  transform: rotate(-8deg) translateZ(0);
}
/* alternate the tilt so adjacent stickers lean opposite ways */
.foot__love .sticker + .sticker { transform: rotate(9deg) translateZ(0); }
.sticker.r { transform: rotate(8deg) translateZ(0); }

/* Origin line — flags only, no country text */
.origin {
  display: flex; flex-wrap: wrap; align-items: center; gap: .32rem;
  margin: 0;
  font-size: .92rem; color: var(--muted);
}
.origin .sticker { margin: 0; }
.origin__sep { color: var(--faint); margin: 0 .15em; }

/* Avatar + name row */
.idrow { display: flex; align-items: center; gap: clamp(.9rem, 2.5vw, 1.4rem); }
.avatar {
  width: clamp(92px, 20vw, 138px);
  height: clamp(92px, 20vw, 138px);
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-card);
}

.name {
  display: flex; flex-direction: column;
  font-weight: 400;
  font-size: clamp(2.8rem, 9vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.025em;
}
.name__l1 { color: color-mix(in srgb, var(--ink) 82%, transparent); }
.name__l2 { color: color-mix(in srgb, var(--ink) 48%, transparent); }

/* Name meaning tooltip */
.tip {
  position: relative;
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--ink) 26%, transparent);
  text-underline-offset: .12em;
  transition: text-decoration-color .16s ease;
}
.tip:hover, .tip:focus-visible { text-decoration-color: color-mix(in srgb, var(--ink) 70%, transparent); }
.tip:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.tip__card {
  position: absolute;
  left: 0; bottom: calc(100% + .55rem);
  z-index: 20;
  display: flex; flex-direction: column; gap: .18rem;
  width: max-content; max-width: 16rem;
  padding: .7rem .8rem;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 13px;
  box-shadow: var(--shadow-hover);
  font-size: .92rem; font-weight: 400; line-height: 1.4;
  letter-spacing: -.01em; text-decoration: none;
  color: var(--muted);
  opacity: 0; transform: translateY(6px) scale(.98);
  transform-origin: bottom left;
  pointer-events: none;
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
}
.tip:hover .tip__card, .tip:focus-within .tip__card { opacity: 1; transform: none; }

/* Arsenal crest sticker (inline, keeps the white-cutout sticker filter) */
.sticker--crest {
  height: 1.28em; width: auto;
  vertical-align: -.32em;
  margin: 0 .06em 0 .34em; /* room from "fan", tight to the period */
  transition: transform .18s var(--ease-out);
}

/* Arsenal crest hover card — styled like the grid cards, image as header */
.tip--arsenal { text-decoration: none; cursor: pointer; }
.tip--arsenal:hover .sticker--crest,
.tip--arsenal:focus-visible .sticker--crest { transform: rotate(-8deg) scale(1.16) translateZ(0); }
.tip__card--photo {
  width: 17rem; max-width: 17rem;
  padding: 4px; gap: 0;
  border-radius: var(--r-card);
  color: var(--ink);
}
.tip__img {
  display: block; width: 100%; height: 7.6rem;
  object-fit: cover; object-position: 50% 32%;
  border-radius: 10px;
}
.tip__cap {
  padding: .6rem .55rem .45rem;
  font-size: .92rem; line-height: 1.35; letter-spacing: -.01em;
  color: var(--ink);
}
.tip__lang {
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
}
.tip__name { font-size: 1.05rem; color: var(--ink); }
.tip__say { font-size: .8rem; color: var(--faint); letter-spacing: .01em; margin-bottom: .1rem; }
.tip__meaning { color: var(--muted); }
.bio {
  margin: 0; max-width: 40rem;
  font-size: 1.14rem; line-height: 1.5; color: var(--ink-2);
  text-wrap: pretty;
}
.bio__b { display: block; margin-top: .72em; }
.bio em { font-style: italic; }

.contact { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .7rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: var(--shadow-card);
  font-size: .82rem; letter-spacing: -.01em;
  color: var(--ink-2);
  transition: border-color .16s var(--ease-out), color .16s var(--ease-out), transform .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.chip__ic { display: inline-flex; align-items: center; }
.chip__ic svg { width: 16px; height: 16px; display: block; }
.chip:hover { border-color: var(--line-2); color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.chip:active { transform: scale(.97); transition-duration: .1s; }
@media (hover: none) {
  .chip:hover { transform: none; box-shadow: var(--shadow-card); border-color: var(--line); }
}

/* ---- Work section ---- */
.work { margin-top: clamp(2.75rem, 7vh, 4.5rem); }
.work__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .9rem; padding: 0 .25rem;
}
.work__title {
  font-size: .82rem; font-weight: 400; letter-spacing: .02em;
  text-transform: uppercase; color: var(--muted);
}
.work__meta { margin: 0; font-size: .82rem; color: var(--faint); }

/* ---- Grid frame (mirrors the reference container) ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  background: var(--frame);
  border: 1px solid var(--line);
  border-radius: var(--r-frame);
}

/* ---- Card ---- */
.card {
  --pa: var(--ink);                 /* per-card preview accent */
  display: flex; flex-direction: column;
  min-height: 15rem;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .22s var(--ease-out), box-shadow .28s var(--ease-out), border-color .2s var(--ease-out);
}
.card__preview {
  display: flex; align-items: center; justify-content: center;
  height: 8.5rem;
  background: var(--panel);
  border-radius: var(--r-panel);
  overflow: hidden;
  transition: background .25s var(--ease-out);
}
.card__body {
  display: flex; flex-direction: column;
  margin-top: auto;
  padding: 1.1rem .7rem .55rem;
}

.card__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.card__title { font-size: 1.08rem; font-weight: 400; letter-spacing: -.02em; color: var(--ink); }
.tld { color: var(--faint); }

.card__go {
  flex-shrink: 0; margin-top: .1rem;
  font-size: .95rem; color: var(--faint);
  transition: color .2s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.card__desc {
  margin-top: .5rem; max-width: 32rem;
  font-size: .875rem; line-height: 1.45; color: var(--muted);
  text-wrap: pretty;
}
.draft { color: var(--soon); }

.card__facts {
  display: flex; flex-wrap: wrap; gap: .35rem .85rem;
  margin-top: .8rem;
  font-size: .74rem; letter-spacing: -.005em; color: var(--faint);
}
.fact { display: inline-flex; align-items: center; gap: .4rem; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.dot--live { background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 20%, transparent); }
.dot--soon { background: var(--soon); box-shadow: 0 0 0 3px color-mix(in srgb, var(--soon) 20%, transparent); }

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: transparent;
}
.card:hover .card__preview { background: color-mix(in srgb, var(--pa) 8%, var(--panel)); }
.card:hover .card__go { color: var(--ink); transform: translate(2px, -2px); }
/* press feedback (works on touch too) */
.card:active { transform: translateY(-2px) scale(.99); transition-duration: .12s; }
/* don't leave hover styles stuck after a tap on touch devices */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: var(--shadow-card); border-color: var(--line); }
  .card:hover .card__preview { background: var(--panel); }
  .card:hover .card__go { transform: none; color: var(--faint); }
}

/* ---- Per-card preview accents ---- */
.card--sync    { --pa: #2f6fdb; }
.card--creatin { --pa: #8f5cf0; }
.card--reply   { --pa: #2aa565; }
.card--reconn  { --pa: #0e9bc7; }

/* ---- Brand-logo previews (Creatin, reconn), theme-aware ---- */
.brandlogo { display: block; width: auto; height: 4.1rem; }
.brandlogo--reconn { height: 3.2rem; }
.brandlogo--light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brandlogo--dark { display: none; }
  :root:not([data-theme="light"]) .brandlogo--light { display: block; }
}
:root[data-theme="dark"] .brandlogo--dark { display: none; }
:root[data-theme="dark"] .brandlogo--light { display: block; }

/* ---- Preview art (shared) ---- */
.art { width: 100%; height: 100%; display: block; }
.art rect, .art line, .art path, .art polyline, .art circle { vector-effect: non-scaling-stroke; }

/* sync (alongside) */
.art--sync .art-screen rect { fill: color-mix(in srgb, var(--pa) 9%, var(--card)); stroke: color-mix(in srgb, var(--pa) 32%, var(--line-2)); stroke-width: 1.5; }
.art--sync .art-play { fill: var(--pa); }
.art--sync .art-link { fill: none; stroke: color-mix(in srgb, var(--pa) 45%, var(--line-2)); stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; }
.art--sync .art-scrub line { stroke: var(--line-2); stroke-width: 3; stroke-linecap: round; }
.art--sync .art-scrub-fill { stroke: var(--pa) !important; }
.art--sync .art-scrub circle { fill: var(--card); stroke: var(--pa); stroke-width: 2.5; }

/* trend (creatin) */
.art--trend .art-clip { fill: color-mix(in srgb, var(--pa) 9%, var(--card)); stroke: color-mix(in srgb, var(--pa) 30%, var(--line-2)); stroke-width: 1.5; }
.art--trend .art-play { fill: var(--pa); }
.art--trend .art-trend-line { fill: none; stroke: var(--pa); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.art--trend .art-arrow { fill: none; stroke: var(--pa); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* reply (replyflow) */
.art--reply .art-bubble--in { fill: color-mix(in srgb, var(--muted) 16%, var(--card)); }
.art--reply .art-bubble--out { fill: color-mix(in srgb, var(--pa) 16%, var(--card)); stroke: color-mix(in srgb, var(--pa) 34%, var(--line-2)); stroke-width: 1.5; }
.art--reply .art-bolt circle { fill: var(--pa); }
.art--reply .art-bolt path { fill: var(--card); }

/* terminal (reconn) */
.art--term .art-win { fill: color-mix(in srgb, var(--pa) 7%, var(--card)); stroke: color-mix(in srgb, var(--pa) 28%, var(--line-2)); stroke-width: 1.5; }
.art--term .art-winbar { stroke: color-mix(in srgb, var(--pa) 24%, var(--line-2)); stroke-width: 1.2; }
.art--term .art-tl { fill: color-mix(in srgb, var(--pa) 40%, var(--line-2)); }
.art--term .art-prompt { fill: none; stroke: var(--pa); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.art--term .art-cmd { stroke: var(--muted); stroke-width: 3; stroke-linecap: round; }
.art--term .art-scan { fill: color-mix(in srgb, var(--pa) 55%, var(--line-2)); }
.art--term .art-caret { fill: var(--pa); }

/* ---- Footer ---- */
.foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem;
  margin-top: 2.75rem; padding: 1.2rem .25rem 0;
  border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--faint);
}
.foot__love { color: var(--muted); }
.foot__mark {
  font-weight: 400; letter-spacing: .02em; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 6px; padding: .1rem .4rem;
}
.foot__copy { color: var(--muted); }
.foot__top { margin-left: auto; transition: color .16s ease; }
.foot__top:hover { color: var(--ink); }

/* ---- Theme toggle ---- */
.theme {
  position: fixed; top: clamp(.9rem, 3vh, 1.5rem); right: clamp(.9rem, 4vw, 2rem);
  z-index: 5;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .38rem .65rem;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line-2); border-radius: 999px;
  font-size: .72rem; letter-spacing: .02em; text-transform: uppercase;
  color: var(--muted); cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.theme:hover { border-color: var(--ink); color: var(--ink); }
.theme__dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid currentColor;
  background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%);
}

/* ---- Reveal (JS only) ---- */
.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .card, .card__go, .chip, .foot__top { transition: none; }
  .card:active, .chip:active { transform: none; }
  /* keep the tooltip's fade, drop its movement */
  .tip__card { transform: none; transition: opacity .18s var(--ease-out); }
  html { scroll-behavior: auto; }
}

/* ---- Responsive ---- */
@media (max-width: 52rem) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
  body { font-size: 16px; }
  .grid { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .card__preview { height: 8rem; }
  .card--feature .card__preview { height: 9rem; }
}