/* ============================================================
   STUDIO TUTLAVI — home page, "Jaffa edition".
   Faithful reproduction of the Base44 design (app
   captured-wwwbuildinamsterdamcom-57b80ced, home page, Sept 2026):
   warm paper background, near-black ink, one vivid red, Heebo +
   IBM Plex Mono, square corners, dashed editorial rules.
   Hand-written CSS — the Base44 original is Tailwind, none of it is
   loaded here. The tokens below are its computed values.
   ============================================================ */

@import url('fonts/web-fonts.css');

:root{
  /* new palette */
  --paper:#f3f3f2;      /* --background 60 4% 95%   */
  --ink:#1b1c1d;        /* --foreground 210 4% 11%  */
  --accent:#d9262c;     /* --destructive 358 70% 50% */
  --line:#d5d6d8;       /* --border 210 4% 84%      */
  --muted:#6c6c6a;      /* --muted-foreground       */
  --dash:rgba(27,28,29,.35);
  --glass:rgba(22,22,23,.78);
  --sans:'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --pad-x:16px;
  --pad-y:56px;

  /* aliases: forms.css was written against the old palette's names */
  --bg:#f3f3f2;
  --line-2:rgba(27,28,29,.22);
  --grotesk:'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (min-width:640px){
  :root{ --pad-x:40px; --pad-y:80px; }
}

*{ box-sizing:border-box; margin:0; padding:0; }
/* clip on the root as well: the closed menu drawer parks just off the right
   edge, and on a phone that alone was enough to create a sideways scroll */
html{ scroll-behavior:smooth; overflow-x:clip; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
body.modal-open{ overflow:hidden; }
img,video{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
::selection{ background:var(--ink); color:var(--paper); }
:focus-visible{ outline:1.5px solid var(--accent); outline-offset:3px; }

/* the red full stop that ends almost every headline */
.dot{ color:var(--accent); }

/* ---- shared type ---- */
.eyebrow{
  font-family:var(--mono);
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(27,28,29,.8);
}
.h2{
  font-size:2.1rem; font-weight:500; line-height:1.05; letter-spacing:-.02em;
  text-wrap:balance;
}
.lead{ font-size:17px; line-height:1.7; }
@media (min-width:640px){
  .eyebrow{ font-size:14px; }
  .h2{ font-size:3rem; }
}
@media (min-width:1024px){ .h2{ font-size:3.75rem; } }

/* ---- section shell ---- */
.sec{
  border-top:1px solid var(--line);
  padding:var(--pad-y) var(--pad-x);
}
.sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:32px;
}
@media (min-width:640px){ .sec-head{ margin-bottom:40px; } }

/* reveal-on-scroll (script.js adds .in-view) — the soft rise of the original's
   motion; only hidden up front when JS is actually running */
html.js .reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
html.js .reveal.in-view{ opacity:1; transform:none; }

/* ============ HEADER ============ */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:40;
  color:#fff; mix-blend-mode:difference;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  height:64px; padding:0 var(--pad-x);
}
.site-header .brand{ justify-self:start; display:block; }
.brand-logo{ height:22px; width:auto; filter:invert(1); }
.menu-btn{ justify-self:center; width:28px; display:grid; gap:5px; padding:0; }
.menu-btn span{ display:block; height:1.5px; background:#fff; }
.head-cta{
  justify-self:end;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.head-cta i{ font-style:normal; opacity:.7; }

/* ============ MENU DRAWER ============ */
/* the drawer sits on the physical right and slides in from there, exactly as
   in the original — not on the inline-end side, which in RTL is the left */
.menu-overlay{
  position:fixed; top:0; bottom:0; right:0; z-index:60;
  width:88vw; max-width:384px;
  background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column;
  transform:translateX(105%);
  transition:transform .45s cubic-bezier(.22,1,.36,1), visibility .45s;
  visibility:hidden;
  box-shadow:-30px 0 80px -30px rgba(0,0,0,.35);
}
.menu-overlay.open{ transform:none; visibility:visible; }
.menu-top{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:28px 32px 20px;
  border-bottom:1px dashed var(--dash);
}
.menu-top .brand-logo{ filter:none; height:24px; }
.menu-index{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
/* the X rides in the row rather than floating over it; the original pinned it
   to the physical right, where in RTL it landed on top of the logo */
.menu-close{
  font-size:24px; line-height:1; opacity:.6; padding:0 2px;
}
.menu-close:hover{ opacity:1; }
.menu-list{ display:flex; flex-direction:column; padding:8px 32px 0; }
.menu-item{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:16px;
  padding:16px 0; border-bottom:1px dashed var(--dash);
  text-align:start; transition:color .2s;
}
.menu-item:hover{ color:var(--accent); }
.menu-item-main{ font-size:22px; font-weight:500; }
.menu-item-num{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--muted);
}
.menu-foot{
  margin-top:auto; padding:24px 32px 40px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); line-height:2;
}
.menu-scrim{
  position:fixed; inset:0; z-index:55;
  background:rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s;
}
body.menu-open .menu-scrim{ opacity:1; visibility:visible; }

/* ============ HERO ============ */
.hero{
  position:relative; height:100svh; min-height:600px; overflow:hidden;
  background:#dedddb;
}
.hero>video,.hero>img{ position:absolute; inset:0; }
.hero-meta,.hero-scroll{
  position:absolute; color:#fff; opacity:.9;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase;
}
.hero-meta{ top:72px; left:var(--pad-x); line-height:1.9; }
.hero-scroll{ bottom:20px; left:var(--pad-x); display:none; }
@media (min-width:640px){ .hero-scroll{ display:block; bottom:48px; } }
.hero-card{
  position:absolute; bottom:20px; right:var(--pad-x);
  width:min(420px, calc(100% - 2rem));
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  color:#fff; padding:20px;
}
@media (min-width:640px){ .hero-card{ bottom:48px; padding:24px; } }
.hero-title{
  font-size:22px; font-weight:600; line-height:1.25; letter-spacing:-.01em;
  text-wrap:balance;
}
@media (min-width:640px){ .hero-title{ font-size:26px; } }
.hero-lead{
  margin-top:12px; font-size:13.5px; line-height:1.65;
  color:rgba(255,255,255,.85); text-align:justify;
}
.hero-cta{
  margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; gap:12px; color:#fff; width:100%;
}
.marquee-line{
  flex:1; overflow:hidden; white-space:nowrap; text-align:start;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
}
.marquee-line span{
  display:inline-block; padding-inline-end:28px;
  animation:tutMq 14s linear infinite;
}
.cta-box{
  width:36px; height:36px; flex:none;
  border:1px solid rgba(255,255,255,.35); border-radius:3px;
  display:grid; place-items:center; transition:background .2s, color .2s;
}
.hero-cta:hover .cta-box{ background:#fff; color:var(--ink); }
@keyframes tutMq{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }

/* ============ 1 · WHAT IS HERE ============ */
.two-col{ display:grid; grid-template-columns:1fr; gap:32px; align-items:start; }
@media (min-width:768px){ .two-col{ grid-template-columns:5fr 7fr; gap:64px; } }
/* A grid item is min-width:auto by default, so one unbreakable string inside it
   — the row of dashes in the receipt — widens the whole column past the screen.
   On a phone that showed up as the contact card hanging off the edge. */
.two-col > *, .space-intro > *{ min-width:0; }
.spec-list{ border-top:1px dashed var(--dash); }
.spec-list li{
  display:grid; grid-template-columns:44px 1fr auto; align-items:baseline; gap:16px;
  padding:16px 0; border-bottom:1px dashed var(--dash); font-size:17px;
}
.num,.tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--muted);
}
.tag{ text-transform:uppercase; }

/* ============ 2 · THE SPACE ============ */
.space-intro{ display:grid; grid-template-columns:1fr; gap:24px; align-items:start; }
@media (min-width:768px){ .space-intro{ grid-template-columns:1fr 1fr; gap:64px; } }
.space-intro .lead{ max-width:46ch; }
.tiles{
  display:grid; grid-template-columns:repeat(12,1fr); gap:12px; margin-top:32px;
}
@media (min-width:640px){ .tiles{ margin-top:40px; } }
.tile{
  position:relative; overflow:hidden; border-radius:4px; background:#ddd;
  grid-column:span 12; height:100%;
}
/* the aspect ratio sets the row height; h:100% then lets the short tiles in a
   row stretch to the tall one instead of leaving a grey strip under them */
.tile img{ aspect-ratio:4/3; height:100%; }
@media (min-width:480px) and (max-width:767px){ .tile-sm{ grid-column:span 6; } }
@media (min-width:768px){
  .tile-lg{ grid-column:span 8; }
  .tile-sm{ grid-column:span 4; }
}
.tile-num{
  position:absolute; top:12px; right:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:#fff;
  padding:6px 8px; border-radius:3px; background:var(--glass);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.tile-cap{
  position:absolute; bottom:12px; left:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}

/* ============ 3 · WHAT HAPPENS HERE ============ */
.uses{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:1024px){ .uses{ grid-template-columns:1fr 1fr; } }
.use{
  position:relative; overflow:hidden; background:#111; color:#fff; min-height:460px;
}
@media (min-width:640px){ .use{ min-height:520px; } }
.use>img,.use>video{ position:absolute; inset:0; opacity:.95; }
.use-tag{
  position:absolute; top:14px; right:16px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  padding:6px 8px; border-radius:3px; background:var(--glass);
}
.use-body{
  position:absolute; inset-inline:16px; bottom:16px; padding:16px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
@media (min-width:640px){ .use-body{ padding:20px; } }
.use-body h3{ font-size:22px; font-weight:600; line-height:1.2; }
.use-body p{
  margin-top:10px; font-size:13.5px; line-height:1.65;
  color:rgba(255,255,255,.85); text-align:justify;
}
.use-after{ margin-top:24px; }
.use-after button,.use-after a{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; transition:color .2s;
}
.use-after button:hover,.use-after a:hover{ color:var(--accent); }

/* ============ VIVIAN BANNER ============ */
.vivian{
  display:flex; flex-direction:column; align-items:center; gap:24px;
  padding:24px; overflow:hidden;
  background:linear-gradient(135deg,#f6ded9 0%,#f3e6dc 100%);
}
@media (min-width:640px){ .vivian{ flex-direction:row; gap:40px; padding:40px; } }
.vivian-face{
  width:96px; height:96px; flex:none; border-radius:50%;
  overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05);
}
@media (min-width:640px){ .vivian-face{ width:128px; height:128px; } }
.vivian-text{ flex:1; text-align:center; }
@media (min-width:640px){ .vivian-text{ text-align:start; } }
.vivian-eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(27,28,29,.7);
}
.vivian-text h3{
  margin-top:8px; font-size:26px; font-weight:600; line-height:1.15; letter-spacing:-.01em;
}
@media (min-width:640px){ .vivian-text h3{ font-size:34px; } }
.vivian-text p{
  margin-top:10px; font-size:14.5px; line-height:1.6;
  color:rgba(27,28,29,.75); max-width:56ch; margin-inline:auto;
}
@media (min-width:640px){ .vivian-text p{ font-size:15px; margin-inline:0; } }
.vivian-arrow{
  flex:none; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(27,28,29,.25); display:grid; place-items:center;
  transition:background .2s, color .2s, border-color .2s;
}
@media (min-width:640px){ .vivian-arrow{ width:48px; height:48px; } }
.vivian:hover .vivian-arrow{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ============ BRAND MARQUEE ============ */
.band{
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:12px 0;
}
.band-track{
  display:inline-block; white-space:nowrap;
  font-size:clamp(56px,11vw,150px); font-weight:500; letter-spacing:-.03em; line-height:1;
  animation:tutMq2 40s linear infinite;
}
.band-track span{ padding-inline-end:.4em; }
.band-track .lat{ font-family:var(--mono); font-weight:400; letter-spacing:-.02em; }
@keyframes tutMq2{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============ 4 · HOW IT GOES ============ */
.steps{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:768px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{
  background:var(--ink); color:var(--paper); padding:20px;
  min-height:260px; display:flex; flex-direction:column; justify-content:space-between;
}
@media (min-width:640px){ .step{ padding:24px; min-height:300px; } }
.step-num{ font-family:var(--mono); font-size:64px; line-height:1; }
.step h4{ font-size:22px; font-weight:600; line-height:1.25; }
.step p{ margin-top:10px; font-size:13.5px; line-height:1.65; color:rgba(243,243,242,.8); }

/* ============ 5 · SCHEDULE ============
   The rows are rendered by script.js from the events saved in /admin, so the
   class names below are the ones that function emits. */
.sched-list{ border-top:1px solid var(--ink); counter-reset:sched; }
.sched-row{
  counter-increment:sched;
  display:grid; grid-template-columns:44px 140px 1fr auto auto;
  align-items:baseline; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.sched-row::before{
  content:"( " counter(sched) " )";
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--muted);
}
@media (min-width:640px){ .sched-row{ padding:20px 0; } }
.sched-flag{ display:none; }
.sched-date{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; }
.sched-main{ display:flex; flex-direction:column; gap:2px; }
.sched-name{ font-size:18px; font-weight:500; }
.sched-desc{ font-size:13.5px; line-height:1.6; color:var(--muted); }
.sched-cat,.sched-status{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.sched-status.on{ color:var(--accent); }
.sched-status-col{ justify-self:end; }
@media (max-width:767px){
  .sched-row{
    grid-template-columns:44px 1fr auto;
    grid-template-areas:"num main status" ". date cat";
    gap:6px 16px;
  }
  .sched-row::before{ grid-area:num; }
  .sched-date{ grid-area:date; }
  .sched-main{ grid-area:main; }
  .sched-cat{ grid-area:cat; justify-self:end; }
  .sched-status,.sched-status-col{ grid-area:status; justify-self:end; }
}

/* ============ 6 · CONTACT ============ */
.contact-title{
  margin-top:16px;
  font-size:clamp(56px,9vw,120px); font-weight:500; line-height:.95; letter-spacing:-.02em;
}
.contact-lead{ margin-top:20px; max-width:38ch; }
.receipt{
  background:#fff; border:1px solid var(--line); padding:24px;
  width:100%; max-width:460px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; line-height:2;
}
.receipt-mid{ text-align:center; }
.receipt-rule{ color:rgba(27,28,29,.45); overflow:hidden; white-space:nowrap; }
.receipt-row{ display:flex; justify-content:space-between; gap:12px; }
.receipt-row>span:first-child{ white-space:nowrap; }
.receipt a{ display:block; transition:color .2s; }
.receipt a:hover{ color:var(--accent); }
.receipt .he{
  font-family:var(--sans); text-transform:none; letter-spacing:normal; font-size:14px;
  text-align:start;
}
/* on a phone a label + a long email do not fit on one line, so the receipt
   stacks: label above, value under it */
@media (max-width:640px){
  .receipt{ padding:20px 16px; font-size:11px; }
  .receipt-row{ flex-direction:column; gap:0; line-height:1.7; margin-bottom:8px; }
  .receipt-row>span:first-child{ color:rgba(27,28,29,.5); }
  .receipt .he{ font-size:13px; }
}
.contact-book{
  margin-top:20px; display:inline-flex; align-items:center; gap:12px;
  background:var(--ink); color:var(--paper);
  padding:14px 22px; font-size:15px; font-weight:500;
  transition:background .2s;
}
.contact-book:hover{ background:var(--accent); }

/* ============ FOOTER ============ */
.site-footer{
  border-top:1px solid var(--ink);
  padding:24px var(--pad-x) 40px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.site-footer a:hover{ color:var(--accent); }

/* ============ RED STICKER ============ */
.sticker{
  position:fixed; bottom:20px; left:16px; z-index:50;
  width:92px; height:92px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:grid; place-items:center;
  box-shadow:0 14px 40px -12px rgba(217,38,44,.6);
  transition:transform .3s ease, opacity .3s ease, visibility .3s;
}
@media (min-width:640px){ .sticker{ bottom:32px; left:32px; width:110px; height:110px; } }
.sticker:hover{ transform:scale(1.05); }
.sticker svg{
  position:absolute; inset:0; width:100%; height:100%;
  direction:ltr; animation:tutSpin 18s linear infinite;
}
.sticker img{ width:38%; height:auto; position:relative; filter:brightness(0) invert(1); }
.sticker.hide{ opacity:0; visibility:hidden; pointer-events:none; }
body.menu-open .sticker{ opacity:0; visibility:hidden; }
@keyframes tutSpin{ from{ transform:rotate(0); } to{ transform:rotate(-360deg); } }

/* ============ reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  html.js .reveal{ opacity:1; transform:none; transition:none; }
  .marquee-line span,.band-track,.sticker svg{ animation:none; }
}

/* ============================================================
   VIVIAN — the bar page (vivian.html). Same design language as the
   studio page; only what that page does not already have lives here.
   ============================================================ */
.viv-cols{ display:grid; grid-template-columns:1fr; gap:32px; align-items:start; }
@media (min-width:768px){ .viv-cols{ grid-template-columns:5fr 7fr; gap:64px; } }
.viv-cols > *{ min-width:0; }

/* the three-line list drops to the foot of the row, so it reads level with the
   two photographs opposite it instead of floating at the top of the column */
@media (min-width:768px){ .viv-list{ align-self:end; } }

.viv-pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:32px; }
.viv-pair .tile{ grid-column:auto; }

.viv-wide{ grid-column:auto; margin-bottom:32px; }
.viv-wide img{ aspect-ratio:21/9; }
@media (min-width:640px){ .viv-wide{ margin-bottom:40px; } }

/* ---- the one upcoming pop-up ---- */
.popup-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px;
  margin-top:32px; padding:24px 0;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--line);
}
@media (min-width:640px){ .popup-row{ margin-top:40px; padding:28px 0; } }
.popup-date{
  display:block; font-family:var(--mono); font-weight:500;
  font-size:clamp(30px,4.5vw,46px); line-height:1; letter-spacing:-.01em;
}
.popup-heb{
  display:block; margin-top:6px;
  font-size:11px; letter-spacing:.04em; color:var(--muted);
}
.popup-name{ display:block; font-size:20px; font-weight:500; }
.popup-note{ display:block; margin-top:4px; font-size:13px; color:var(--muted); }
.popup-cta{
  flex:none; white-space:nowrap;
  border:1px solid var(--ink); border-radius:999px;
  padding:.7rem 1.5rem; font-size:14px; font-weight:500;
  transition:background .2s ease, color .2s ease;
}
.popup-cta:hover{ background:var(--ink); color:var(--paper); }
@media (max-width:639px){
  .popup-row{ grid-template-columns:1fr; gap:16px; }
  .popup-cta{ justify-self:start; }
}

/* ---- updates ---- */
.viv-title{
  margin-top:16px;
  font-size:clamp(30px,4vw,54px); font-weight:500;
  line-height:1.02; letter-spacing:-.02em; text-wrap:balance;
}
.viv-link{ color:var(--accent); font-weight:500; }
.viv-link:hover{ color:var(--ink); }
.viv-contacts{
  margin-top:24px; font-family:var(--mono); font-size:12px; letter-spacing:.1em;
}
.viv-contacts span{ margin:0 12px; color:var(--muted); }
.viv-contacts a{ transition:color .2s ease; }
.viv-contacts a:hover{ color:var(--accent); }
.viv-form{
  background:#fff; border:1px solid var(--line);
  padding:24px; max-width:520px;
}
@media (min-width:640px){ .viv-form{ padding:32px; } }
.viv-back{ margin-top:24px; font-size:14px; }
.viv-back a{ transition:color .2s ease; }
.viv-back a:hover{ color:var(--accent); }