/* ============================================================
   Joshua Ariel - personal brand site (Miami, USA).

   DESIGN NOTE. Third site in the Puentech partner family, so it
   has to be recognisably related to kenta-yoshikawa.pages.dev
   (warm near-black + one red) and the Puentech site (warm paper +
   petrol) without borrowing either look. This one is cool
   off-white with one cobalt accent: cobalt is the colour of the
   Diario Emprendedor cover (the blue word-cloud balloon), so the
   accent is his, not ours. Light by default, dark via the system
   preference; same hierarchy in both.

   Type: Archivo for display (a wide American grotesk that reads
   confident without shouting), Hanken Grotesk for body because it
   is the body face his own richbeforerich.com already uses, so
   the two sites feel like the same person. No serif: his covers
   carry the serif, the page does not need to repeat it.

   Radius is 6px everywhere (buttons, images, tiles). Motion
   personality: Premium - 420ms, cubic-bezier(.4,0,.2,1), no
   overshoot. Everything animated is transform/opacity only and
   gated on prefers-reduced-motion.

   Mobile first, same header survival rules as the sibling sites:
   the brand never wraps, the language switch stays tappable, the
   CTA shrinks before anything clips.
   ============================================================ */

:root {
  --ground: #f4f5f7;
  --panel: #e9ebef;
  --panel-2: #dfe2e8;
  --ink: #111318;
  --muted: #585d66;
  --line: #d3d7dd;
  --accent: #2447c9;
  --accent-deep: #1a35a1;
  --accent-ink: #ffffff;
  --accent-soft: #e3e9fb;

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --nav-h: 64px;
  --wrap: 1160px;
  --r: 6px;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-quick: 180ms;
  --t-std: 420ms;
  --t-slow: 640ms;

  /* Aliases for the shared media layer (assets/media.css), which expects
     the Kobe pipeline's token names. */
  --bg: var(--ground);
  --bg-2: var(--panel);
  --text: var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f1116;
    --panel: #171a21;
    --panel-2: #1f232c;
    --ink: #f2f3f5;
    --muted: #a3a8b1;
    --line: #2a2e37;
    --accent: #7b96ff;
    --accent-deep: #5f7df0;
    --accent-ink: #0b1230;
    --accent-soft: #1b2340;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r);
}

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin: 0 auto; }
@media (min-width: 900px) { .wrap { width: min(var(--wrap), 100% - 5rem); } }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 5vw, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; line-height: 1.25; }
p { max-width: 62ch; }
.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: .7rem 1.25rem;
  border-radius: var(--r); border: 1px solid transparent;
  font: 600 1rem/1 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: transform var(--t-quick) var(--ease), background-color var(--t-quick) var(--ease),
              border-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
/* On the cobalt band the primary button flips to ink-on-white so it
   stays readable; a cobalt button on a cobalt band would vanish. */
.band .btn-primary { background: var(--accent-ink); color: var(--accent); }
.band .btn-primary:hover { background: var(--ground); }

/* ---------- Header ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 1rem; }
.brand {
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; flex: 0 0 auto;
}
.brand span { color: var(--accent); }
.nav-links { display: none; gap: 1.6rem; margin-left: 1.5rem; }
.nav-links a { text-decoration: none; color: var(--muted); font-weight: 500; font-size: .97rem; transition: color var(--t-quick) var(--ease); }
.nav-links a:hover { color: var(--ink); }
.langsw { margin-left: auto; display: flex; gap: .15rem; flex: 0 0 auto; }
.langsw a {
  text-decoration: none; font-size: .85rem; font-weight: 600; color: var(--muted);
  padding: .4rem .55rem; border-radius: var(--r); min-height: 36px; display: inline-flex; align-items: center;
}
.langsw a[aria-current="true"] { color: var(--ink); background: var(--panel); }
.nav .btn { min-height: 38px; padding: .5rem .9rem; font-size: .92rem; flex: 0 0 auto; }
@media (max-width: 420px) { .nav .btn { padding: .5rem .7rem; } }
@media (min-width: 900px) { .nav-links { display: flex; } }

/* ---------- Hero ---------- */
.hero { padding: 2.5rem 0 3.5rem; }
.hero-grid { display: grid; gap: 2.25rem; align-items: center; }
.who {
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.1rem;
}
.lead { font-size: 1.2rem; line-height: 1.55; color: var(--muted); margin: 1.25rem 0 1.75rem; max-width: 34ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .7rem; }
.portrait {
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r);
  background: var(--panel);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
@media (min-width: 900px) {
  .hero { padding: 4.5rem 0 5rem; }
  .hero-grid { grid-template-columns: 1.2fr .8fr; gap: 4rem; }
  .portrait { max-height: 640px; }
}

/* ---------- Press logos ---------- */
.press { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.6rem 0; }
.press .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.2rem; }
.press small { color: var(--muted); font-size: .85rem; font-weight: 600; flex: 0 0 100%; }
.press img { height: 22px; width: auto; filter: grayscale(1) opacity(.72); transition: filter var(--t-std) var(--ease); }
.press img.tall { height: 30px; }
.press a:hover img, .press img:hover { filter: grayscale(0) opacity(1); }
@media (prefers-color-scheme: dark) { .press img { filter: invert(1) grayscale(1) opacity(.78); } .press img:hover { filter: invert(1) grayscale(1) opacity(1); } }
@media (min-width: 900px) { .press small { flex: 0 0 auto; margin-right: .8rem; } .press img { height: 24px; } .press img.tall { height: 34px; } }

/* ---------- Sections ---------- */
section { padding: 4.5rem 0; }
@media (min-width: 900px) { section { padding: 6.5rem 0; } }
.section-head { margin-bottom: 2.25rem; }
.section-head p { color: var(--muted); margin-top: .8rem; font-size: 1.08rem; }

/* About: bio left, figures right */
.about-grid { display: grid; gap: 2.5rem; }
.about-grid p + p { margin-top: 1rem; }
.figures { display: grid; }
.figure { padding: 1.35rem 0; }
.figure + .figure { border-top: 1px solid var(--line); }
.figure b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: -0.03em; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.figure span { color: var(--muted); font-size: .98rem; }
.aka { margin-top: 1.5rem; padding: 1rem 1.1rem; background: var(--panel); border-radius: var(--r); font-size: .95rem; color: var(--muted); }
.aka b { color: var(--ink); font-weight: 600; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.15fr .85fr; gap: 5rem; align-items: start; } .figures { padding-top: .3rem; } }

/* Books: bento, exactly three cells */
.bento { display: grid; gap: 1rem; }
.tile { border-radius: var(--r); overflow: hidden; background: var(--panel); }
.tile-photo { position: relative; aspect-ratio: 4 / 5; }
.tile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-book { display: grid; grid-template-columns: 96px 1fr; gap: 1.2rem; padding: 1.3rem; align-items: start; }
.tile-book img { width: 96px; height: 144px; align-self: start; object-fit: cover; border-radius: 4px; box-shadow: 0 10px 24px -14px rgba(17, 19, 24, .45); }
.tile-book h3 { margin-bottom: .35rem; }
.tile-book .pub { color: var(--muted); font-size: .9rem; margin-bottom: .7rem; }
.tile-book p { font-size: .97rem; }
.tile-book .links { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .9rem; font-size: .92rem; font-weight: 600; }
.tile-book .links a { color: var(--accent); text-decoration: none; }
.tile-book .links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tile-accent { background: var(--accent-soft); }
.editions { margin-top: 1.6rem; color: var(--muted); font-size: .97rem; max-width: none; }
@media (max-width: 480px) { .tile-book { grid-template-columns: 1fr; } .tile-book img { width: 88px; height: 132px; } }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; }
  .tile-photo { grid-column: 1 / 6; grid-row: 1 / 3; aspect-ratio: auto; min-height: 100%; }
  .tile-a { grid-column: 6 / 13; grid-row: 1; }
  .tile-b { grid-column: 6 / 13; grid-row: 2; }
  .tile-book { padding: 1.6rem; grid-template-columns: 112px 1fr; }
  .tile-book img { width: 112px; height: 168px; }
}

/* Puentech band: the one colour block on the page */
.band { background: var(--accent); color: var(--accent-ink); }
.band h2 { color: var(--accent-ink); }
.band p { color: color-mix(in srgb, var(--accent-ink) 82%, transparent); }
.band-grid { display: grid; gap: 2.5rem; }
.band .btn { margin-top: 1.6rem; }
.proof { display: grid; gap: 1.1rem; align-content: start; }
.proof div { padding-left: 1.1rem; border-left: 2px solid color-mix(in srgb, var(--accent-ink) 45%, transparent); }
.proof b { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: .2rem; color: var(--accent-ink); }
.proof span { font-size: .97rem; color: color-mix(in srgb, var(--accent-ink) 80%, transparent); }
@media (min-width: 900px) { .band-grid { grid-template-columns: 1.1fr .9fr; gap: 5rem; align-items: center; } }

/* Stage: full-bleed photograph */
.stage { padding: 0; }
.stage figure { margin: 0; }
.stage img { width: 100%; max-height: 72vh; object-fit: cover; }
.stage figcaption { padding: 1.1rem 0 0; color: var(--muted); font-size: .95rem; }
.stage figcaption b { color: var(--ink); font-weight: 600; }

/* Quote */
.quote-grid { display: grid; gap: 1.5rem; align-items: center; }
.quote-grid img { width: 88px; height: 88px; border-radius: var(--r); object-fit: cover; }
blockquote { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.3; max-width: 26ch; text-wrap: balance; }
.quote-grid cite { display: block; margin-top: .9rem; font-style: normal; color: var(--muted); font-size: .98rem; }
.quote-grid cite b { color: var(--ink); font-weight: 600; }
.credit { margin-top: .5rem; font-size: .78rem; color: var(--muted); }
@media (min-width: 900px) { .quote-grid { grid-template-columns: 88px 1fr; gap: 2.25rem; } }

/* Contact */
.contact-list { margin-top: 2rem; max-width: 640px; }
.contact-list a {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 1rem; align-items: center;
  padding: 1.05rem 0; text-decoration: none; border-top: 1px solid var(--line);
  transition: color var(--t-quick) var(--ease);
}
.contact-list a:last-child { border-bottom: 1px solid var(--line); }
.contact-list a:hover { color: var(--accent); }
.contact-list svg { width: 22px; height: 22px; color: var(--muted); transition: color var(--t-quick) var(--ease); }
.contact-list a:hover svg { color: var(--accent); }
.contact-list b { font-weight: 600; }
.contact-list span { color: var(--muted); font-size: .95rem; text-align: right; }
@media (max-width: 480px) { .contact-list a { grid-template-columns: 24px 1fr; } .contact-list span { grid-column: 2; text-align: left; margin-top: -.5rem; } }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 2.2rem 0 3rem; color: var(--muted); font-size: .92rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: .8rem 2rem; align-items: center; justify-content: space-between; }
footer a { color: inherit; }

/* ---------- Motion (Premium) ----------
   The hidden state exists only when motion.js has run (html.js), so
   a user without JS, or with reduced motion, gets the finished page
   immediately. Reveals are transform + opacity only. */
@media (prefers-reduced-motion: no-preference) {
  html.js .rv { opacity: 0; transform: translateY(18px); transition: opacity var(--t-std) var(--ease), transform var(--t-std) var(--ease); }
  html.js .rv.in { opacity: 1; transform: none; }
  html.js .rv.d1 { transition-delay: 70ms; }
  html.js .rv.d2 { transition-delay: 140ms; }
  html.js .rv.d3 { transition-delay: 210ms; }
  /* Hero entrance: the copy leads, the portrait follows a beat later
     with a slower settle, so the eye lands on the headline first. */
  html.js .hero .portrait { opacity: 0; transform: translateY(14px) scale(.985); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay: 220ms; }
  html.js .hero .portrait.in { opacity: 1; transform: none; }
}

/* Instagram section: the story strip, the square gallery and the reel
   cards come from media.css; only the head is ours. */
#instagram .section-head p a { color: var(--accent); text-decoration: none; font-weight: 600; }
#instagram .section-head p a:hover { text-decoration: underline; text-underline-offset: 3px; }
#instagram .m-gallery { margin-top: 1.4rem; }
#instagram .m-ig { margin-top: 1.4rem; }

/* Glue for the shared media layer, copied from the sibling sites: the ring and figure are spans and need to be blocks; the strip's negative margins are reset inside .wrap. */
/* Story strip gutters: match this site's wrap padding so the strip
   bleeds exactly to the edge without creating page overflow. */
.wrap .m-stories {
  padding: 0.25rem clamp(1.1rem, 4vw, 2.5rem) 1rem;
  margin: 0 calc(-1 * clamp(1.1rem, 4vw, 2.5rem));
}

/* Instagram cards inherit the dark panel; give the strip a little
   room above the card grid. */

/* media.css sizes the story ring and the figure frame but leaves
   both usable as inline spans, which discards their boxes (the ring
   stretched, the gallery collapsed to 12px). Block restores them. */
.m-story-ring { display: block; }
.m-figure { display: block; }

/* Fallback link media.js appends under a loaded embed, so the card
   never becomes a dead box if Instagram's iframe fails to grow. */
.m-ig-card .m-ig-open { margin: 0.4rem 0.9rem 0.9rem; }

/* ---------- Media appearances ----------
   Two rails, TV and YouTube, as plain divided lists. The one loud