/* ============================================================
   Ollie Horn — rebuilt to match the live Showit site.
   Model: a vertical stack of rounded colour "cards" sitting on
   an off-white page, exact colours/fonts/shadows measured from
   olliehorn.com. Desktop-accurate; stacks on mobile.
   ============================================================ */

@font-face {
  font-family: "Toybox";
  src: url("https://static.showit.co/file/2e_XK6v3ud6cAMzmVS6Fyw/241517/toybox-webfont.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "HammersmithOne";
  src: url("https://static.showit.co/file/kvTwyjP7v0pA-sATj1S7sQ/241517/hammersmithone-regular.woff") format("woff");
  font-display: swap;
}

:root {
  --yellow: #eacd4c;
  --yellow2: #ebce4c;
  --orange: #ff7700;
  --orange2: #ff7702;
  --teal: #1faaa7;
  --navy: #012f40;
  --black: #101010;
  --paper: #fefdfc;

  --display: "Toybox", cursive, sans-serif;
  --body: "HammersmithOne", "Roboto", system-ui, sans-serif;

  --card-radius: 22px;
  --page-gap: 14px;      /* gap between stacked cards */
  --page-inset: 30px;    /* side margin of the card stack */
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--black);
  background: var(--paper);
  line-height: 1.5;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Bubble headings: white Toybox with a hard dark drop-shadow -------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  margin: 0 0 0.4em;
  color: var(--paper);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.4rem, 5vw, 54px); text-shadow: 4px 4px 5px rgba(0,0,0,0.9); }
h2 { font-size: clamp(1.9rem, 3.8vw, 46px); text-shadow: 3px 3px 4px rgba(0,0,0,0.9); }
h3 { font-size: 1.4rem; text-shadow: 2px 2px 1px rgba(0,0,0,0.9); }

p { margin: 0 0 1em; }

.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* The card stack -------------------------------------------------- */
.stack {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--page-gap) var(--page-inset);
  display: flex;
  flex-direction: column;
  gap: var(--page-gap);
  position: relative;
}
main { display: contents; }
.card {
  border-radius: var(--card-radius);
  position: relative;
}
.card--yellow { background: var(--yellow); }
.card--yellow2 { background: var(--yellow2); }
.card--orange { background: var(--orange); }
.card--pad { padding: 54px 56px; }

/* Body copy inside coloured cards is dark, readable HammersmithOne */
.card p, .card li { color: var(--black); }

/* Buttons --------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1.1;
  padding: 12px 22px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  background: var(--black);
  color: var(--paper);
  text-shadow: 1px 2px 0 rgba(0,0,0,0.6);
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
.btn:hover { transform: translateY(-3px) scale(1.03); }
.btn--pill { border-radius: 999px; }
.btn--paper { background: var(--paper); color: var(--black); text-shadow: none; }

/* ===== HEADER =================================================== */
.masthead {
  background: var(--yellow);
  border-radius: var(--card-radius);
  padding: 18px 26px;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 165px;
  position: relative;
  overflow: hidden;
}
/* hero card: video sits near full-bleed like the original */
.hero-card { padding: 46px 14px 20px; }
.hero-card h1 { margin-bottom: 28px; }
/* vertical social rail, sits in the left page gutter beside the header card */
.social-rail {
  position: absolute;
  left: 4px;
  top: 74px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 6;
}
.social-rail a { width: 20px; height: 20px; color: var(--black); display:flex; }
.social-rail svg { width: 20px; height: 20px; fill: currentColor; }

.masthead__logo { flex: 0 0 auto; margin-left: 30px; }
.masthead__logo img { width: clamp(300px, 48vw, 524px); height: auto; }
.masthead__tagline {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.9rem;
  color: var(--black);
  margin-top: 4px;
  padding-left: 6px;
}
.masthead__photo {
  flex: 1 1 auto;
  align-self: stretch;
  position: relative;
  min-width: 200px;
}
.masthead__photo img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 152px;
  width: auto;
  max-width: none;
}
.masthead__badge {
  flex: 0 0 auto;
  background: var(--orange2);
  border-radius: 16px;
  width: 122px;
  padding: 12px 10px 14px;
  text-align: center;
  align-self: flex-start;
  margin-top: 2px;
}
.masthead__badge-title {
  font-family: var(--display);
  text-transform: uppercase;
  color: var(--paper);
  font-size: 1.35rem;
  line-height: 1;
  text-shadow: 1px 2px 0 var(--black);
  transform: rotate(-6deg);
  display: block;
  margin-bottom: 12px;
}
.masthead__badge .btn { font-size: 0.72rem; padding: 8px 10px; border-radius: 12px; width: 100%; }

/* ===== NAV ====================================================== */
.navcard {
  background: var(--yellow);
  border-radius: var(--card-radius);
  position: sticky;
  top: 8px;
  z-index: 40;
  transition: box-shadow 0.25s ease;
}
.navcard.is-stuck { box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 40px;
  flex-wrap: wrap;
}
.nav a {
  font-family: var(--display);
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 2px 2px 1px rgba(0,0,0,0.9);
  font-size: 1.15rem;
  text-align: center;
  line-height: 1.05;
  transition: transform 0.18s ease;
}
.nav a:hover { transform: translateY(-2px) rotate(-1deg); }
.nav a.is-active { text-decoration: underline; text-underline-offset: 5px; }

/* Hamburger toggle — hidden on desktop, shown on mobile */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 1.15rem;
  color: var(--paper);
  text-shadow: 2px 2px 1px rgba(0,0,0,0.9);
}
.nav__toggle-bars { display: flex; flex-direction: column; gap: 5px; }
.nav__toggle-bars span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--black);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ===== GENERIC SECTION CONTENT ================================== */
.center { text-align: center; }
.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.video-embed { position: relative; padding-top: 56.25%; border-radius: 16px; overflow: hidden; background:#000; }
.video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

.hero-video {
  width: 100%;
  border-radius: 16px;
  display: block;
  background: #000;
}

/* rounded pill form inputs (contact + mailing) */
.pill-input {
  width: 100%;
  padding: 16px 22px;
  border-radius: 999px;
  border: none;
  background: var(--paper);
  font-family: var(--body);
  font-size: 1rem;
  color: var(--black);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  margin-bottom: 14px;
}
.pill-input::placeholder { text-transform: uppercase; letter-spacing: 0.05em; color: #9a8f66; }
textarea.pill-input { border-radius: 22px; min-height: 150px; resize: vertical; }

/* nextup / itvx cards */
.logo-card {
  border-radius: 18px;
  aspect-ratio: 16/10;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* contact detail columns */
.contact-details { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 26px; }
.contact-details h4 { font-family: var(--display); text-transform: uppercase; color: var(--paper); text-shadow: 2px 2px 0 rgba(0,0,0,0.85); font-size: 1rem; margin: 8px 0 4px; }
.contact-details a { text-decoration: underline; font-size: 0.95rem; }

/* ===== FOOTER (orange) ========================================= */
.footer {
  background: var(--orange);
  border-radius: var(--card-radius);
  padding: 48px 56px;
}
.footer__grid { display: grid; grid-template-columns: 1.15fr auto 1fr; gap: 30px; align-items: start; }
.footer h2 { color: var(--paper); }
.footer p { color: var(--paper); }
.footer__form { max-width: 420px; }
.footer__form .row { display: flex; gap: 12px; }
.footer__form .row .pill-input { margin-bottom: 12px; }

/* vertical social column, centred in the footer like the original */
.footer__social { display: flex; flex-direction: column; gap: 22px; align-items: center; padding-top: 70px; }
.footer__social a { width: 30px; height: 30px; color: var(--paper); transition: transform 0.18s ease; }
.footer__social a:hover { transform: translateY(-3px) scale(1.08); }
.footer__social svg { width: 30px; height: 30px; fill: currentColor; }

/* Instagram grid: 2 columns x 3 rows of square tiles */
.footer__ig h2 { text-align: right; }
.ig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.ig-tile { display: block; overflow: hidden; }
.ig-grid img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.ig-tile:hover img { filter: brightness(0.9); transform: scale(1.03); }

.footer__bottom { display: flex; align-items: center; gap: 20px; margin-top: 30px; }
.back-to-top {
  width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.18s ease;
}
.back-to-top:hover { transform: translateY(-3px); }
.back-to-top svg { width: 24px; height: 24px; fill: var(--black); }
.footer__copy { color: var(--paper); font-size: 0.9rem; margin: 0; }
.footer__copy a { text-decoration: underline; }

/* tour list (used on tour page) */
.tour-date { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; border-bottom:2px solid rgba(0,0,0,0.18); }
.tour-date__place { font-weight:700; color: var(--paper); text-shadow:1px 1px 0 rgba(0,0,0,0.6); font-size:1.1rem; }
.uc-list { list-style:none; padding:0; margin:0; }
.uc-list li { font-weight:700; text-transform:uppercase; padding:6px 0; }

/* ===== SCROLL REVEAL =========================================== */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity:1; transform:none; }

/* ===== RESPONSIVE ============================================== */
/* Tablet / mobile: Showit ships a separate mobile canvas; here the single
   responsive layout reflows into a clean vertical stack instead. */
@media (max-width: 900px) {
  :root { --page-inset: 12px; }

  /* Header stacks: social row, logo, tagline, photo, then the badge */
  .masthead {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 20px 16px 22px;
    overflow: visible;
  }
  .masthead__logo { margin-left: 0; }
  .masthead__logo img { width: 240px; max-width: 82%; }
  .masthead__tagline { padding-left: 0; margin-top: 2px; }
  .masthead__photo { order: 4; width: auto; min-height: 0; flex: 0 0 auto; margin-top: 4px; }
  .masthead__photo img { position: static; transform: none; margin: 0 auto; height: 168px; }
  .masthead__badge { position: static; order: 5; margin: 10px auto 0; width: 170px; }

  .social-rail {
    position: static;
    flex-direction: row;
    transform: none;
    justify-content: center;
    gap: 20px;
    margin-bottom: 2px;
    width: 100%;
  }

  .nav__toggle { display: flex; }
  .nav {
    display: none;
    flex-direction: column;
    padding: 0 18px 12px;
    gap: 0;
  }
  .nav.is-open { display: flex; }
  .nav a {
    width: 100%;
    padding: 13px 0;
    border-top: 2px solid rgba(0,0,0,0.12);
    font-size: 1.1rem;
  }

  .grid--2, .grid--3, .grid--4, .footer__grid, .contact-details { grid-template-columns: 1fr; }
  .card--pad { padding: 30px 18px; }
  .hero-card { padding: 32px 12px 14px; }

  /* Footer: everything full width, form fields stack, socials in a row */
  .footer__form .row { flex-direction: column; gap: 0; }
  .footer__social { flex-direction: row; justify-content: center; padding-top: 8px; gap: 18px; }
  .footer__ig h2 { text-align: left; }
  .ig-grid { max-width: 340px; }
}

@media (max-width: 460px) {
  .masthead__logo img { width: 200px; }
  .nav a { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  .btn, .nav a { transition:none; }
}

/* ============================================================
   COMPATIBILITY LAYER
   The inner pages (about, tour, services, workshop, press-kit,
   cv, and-friends, live, projects, mailing-list, standing-
   invitation) were written with an earlier set of class names.
   This maps that older markup onto the new rounded-card design
   so every page matches the homepage without rewriting them.
   ============================================================ */

/* alias old CSS variables */
:root { --radius: var(--card-radius); --white: var(--paper); --cream: var(--yellow2); }

/* Each <section class="section ..."> becomes a rounded colour card in the stack */
.section {
  background: var(--yellow);
  border-radius: var(--card-radius);
  padding: 54px 56px;
  position: relative;
}
.section--yellow  { background: var(--yellow); }
.section--yellow2,
.section--cream   { background: var(--yellow2); }
.section--teal    { background: var(--teal); }
.section--orange  { background: var(--orange); }
.section--black   { background: var(--black); }
.section--white   { background: var(--paper); }

/* body text: dark on light cards, light on dark/teal cards */
.section p, .section li, .section { color: var(--black); }
.section--black p, .section--black li,
.section--teal p, .section--teal li,
.section--orange p, .section--orange li { color: var(--paper); }
/* on a plain white card, headings must not be white-on-white */
.section--white h1, .section--white h2, .section--white h3 { color: var(--black); text-shadow: 3px 3px 0 rgba(0,0,0,0.12); }

.section a:not(.btn) { text-decoration: underline; }

/* inner width helpers */
.container { max-width: 100%; margin: 0; padding: 0; }
.section-inner { max-width: var(--maxw); margin: 0 auto; }
.section-intro { max-width: 760px; margin: 0 auto 32px; text-align: center; }

/* content boxes nested inside a section (country tiles, press-kit cards, etc.) */
.section .card {
  background: var(--paper);
  padding: 24px;
  border-radius: var(--card-radius);
  color: var(--black);
}
.section .card--navy { background: var(--navy); color: var(--paper); }
.section .card--cream { background: var(--yellow2); }

/* button variants used by the inner pages */
.btn--dark { background: var(--black); color: var(--paper); text-shadow: 1px 2px 0 rgba(0,0,0,0.6); }
.btn--outline { background: transparent; color: var(--black); border: 3px solid var(--black); text-shadow: none; }
.btn--small { padding: 8px 18px; font-size: 0.85rem; }

@media (max-width: 900px) {
  .section { padding: 30px 18px; }
}