/* Brand fonts (identified in the Canva business-card PDF): Quicksand Light/Regular + Montserrat Bold.
   Binaries downloaded from Google Fonts (latin subset, variable woff2). */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/montserrat-latin.woff2') format('woff2')}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/quicksand-latin.woff2') format('woff2')}

:root{
/* Brand base — sampled from logo PNGs + business-card PDF */
--ip-sky:#38B6FF;          /* "PLAY" blue */
--ip-black:#000000;        /* "INN", logo line art, card back */
--ip-ink:#2D2C2D;          /* business-card body text */
--ip-paper:#FFFFF9;        /* warm white — card front, reversed logo */
--ip-blush:#FFEEEE;        /* "INN" on black logo */
--ip-white:#FFFFFF;

/* Sky scale (oklch-derived around #38B6FF = 400) */
--ip-sky-50:#EEF8FF;
--ip-sky-100:#D6EFFF;
--ip-sky-200:#AEDFFF;
--ip-sky-300:#7ACBFF;
--ip-sky-400:#38B6FF;
--ip-sky-500:#1E9DE8;
--ip-sky-600:#0A7FC2;
--ip-sky-700:#07659A;
--ip-sky-800:#0A4E74;
--ip-sky-900:#0B3550;

/* Neutrals (warm, derived from ink #2D2C2D + paper #FFFFF9) */
--ip-gray-50:#FAFAF6;
--ip-gray-100:#F2F2EE;
--ip-gray-200:#E4E4DF;
--ip-gray-300:#CACAC5;
--ip-gray-400:#A3A39F;
--ip-gray-500:#7B7B78;
--ip-gray-600:#5A5A58;
--ip-gray-700:#424142;
--ip-gray-800:#2D2C2D;
--ip-gray-900:#161516;

/* Semantic hues (extensions — not in source material) */
--ip-green:#1FA463;  --ip-green-50:#E8F7EF;
--ip-amber:#F2A516;  --ip-amber-50:#FEF4E0;
--ip-red:#E5484D;    --ip-red-50:#FDECEC;

/* Semantic aliases */
--surface-page:var(--ip-paper);
--surface-card:var(--ip-white);
--surface-sunken:var(--ip-gray-100);
--surface-inverse:var(--ip-black);
--surface-brand:var(--ip-sky);
--surface-brand-soft:var(--ip-sky-50);

--text-primary:var(--ip-black);
--text-body:var(--ip-ink);
--text-muted:var(--ip-gray-600);
--text-subtle:var(--ip-gray-500);
--text-inverse:var(--ip-paper);
--text-on-brand:var(--ip-black);   /* black on sky ≈ 9:1; white on sky fails contrast */
--text-brand:var(--ip-sky-600);    /* sky text on light grounds — AA-safe */
--text-accent-on-dark:var(--ip-sky);

--border-default:var(--ip-gray-200);
--border-strong:var(--ip-black);
--border-focus:var(--ip-sky);

--action-primary-bg:var(--ip-sky);
--action-primary-bg-hover:var(--ip-sky-500);
--action-primary-bg-press:var(--ip-sky-600);
--action-primary-fg:var(--ip-black);
--action-secondary-bg:var(--ip-black);
--action-secondary-bg-hover:var(--ip-gray-800);
--action-secondary-fg:var(--ip-paper);

--status-success:var(--ip-green);  --status-success-bg:var(--ip-green-50);
--status-warning:var(--ip-amber);  --status-warning-bg:var(--ip-amber-50);
--status-danger:var(--ip-red);     --status-danger-bg:var(--ip-red-50);
--status-info:var(--ip-sky-600);   --status-info-bg:var(--ip-sky-50);
}

:root{
--font-display:'Montserrat',system-ui,sans-serif;   /* heavy caps headlines, labels, titles */
--font-sans:'Quicksand',system-ui,sans-serif;       /* body, names, contact details */
--font-label:'Montserrat',system-ui,sans-serif;

--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;--weight-black:900;

--text-xs:12px;--text-sm:14px;--text-md:16px;--text-lg:18px;--text-xl:22px;--text-2xl:28px;--text-3xl:36px;--text-4xl:48px;--text-5xl:64px;--text-6xl:88px;

--leading-tight:1.05;--leading-snug:1.2;--leading-normal:1.5;--leading-relaxed:1.65;

--tracking-display:-0.01em;
--tracking-label:0.08em;
--tracking-slogan:0.3em;   /* TRAVEL.PLAY.STAY. — wide-spaced caps */

/* Semantic type roles */
--type-display-font:var(--font-display);--type-display-weight:900;--type-display-size:var(--text-5xl);
--type-heading-font:var(--font-display);--type-heading-weight:800;
--type-body-font:var(--font-sans);--type-body-weight:500;--type-body-size:var(--text-md);
--type-label-font:var(--font-label);--type-label-weight:700;--type-label-size:var(--text-xs);
}

:root{
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;

--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--radius-pill:999px;

--border-width:1px;--border-width-strong:2px;

--shadow-none:none;
--shadow-sm:0 1px 2px rgba(0,0,0,.06),0 1px 1px rgba(0,0,0,.04);
--shadow-md:0 4px 14px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.06);
--shadow-lg:0 18px 40px rgba(0,0,0,.14),0 4px 10px rgba(0,0,0,.06);
--shadow-focus:0 0 0 3px rgba(56,182,255,.45);

--ease-out:cubic-bezier(.2,.8,.2,1); /* @kind other */
--ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
--duration-fast:120ms; /* @kind other */
--duration-base:200ms; /* @kind other */
--duration-slow:320ms; /* @kind other */

--container-max:1200px;
--z-dropdown:20; /* @kind other */
--z-overlay:40; /* @kind other */
--z-toast:60; /* @kind other */
--z-tooltip:80; /* @kind other */
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);font-weight:500;color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
a{color:var(--text-brand);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--ip-black)}


/* ---- INNPLAY site components (static versions of the Claude Design system components) ---- */
html{scroll-behavior:smooth}
img{max-width:100%}
:focus-visible{outline:3px solid var(--ip-sky);outline-offset:2px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:var(--radius-pill);border:var(--border-width-strong) solid transparent;font-family:var(--font-label);font-weight:700;font-size:13px;letter-spacing:var(--tracking-label);text-transform:uppercase;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-sm{height:36px;padding:0 16px;font-size:12px}
.btn-lg{height:56px;padding:0 30px;font-size:15px}
.btn-full{display:flex;width:100%}
.btn-primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.btn-primary:hover{background:var(--action-primary-bg-hover);color:var(--action-primary-fg)}
.btn-secondary{background:var(--action-secondary-bg);color:var(--action-secondary-fg)}
.btn-secondary:hover{background:var(--action-secondary-bg-hover);color:var(--action-secondary-fg)}
.btn-outline{background:transparent;color:var(--ip-black);border-color:var(--ip-black)}
.btn-outline:hover{background:var(--ip-black);color:var(--ip-paper)}
.btn-ghost{background:transparent;color:var(--ip-black)}
.btn-ghost:hover{background:var(--ip-gray-100);color:var(--ip-black)}
.btn-inverse{background:var(--ip-paper);color:var(--ip-black)}
.btn-inverse:hover{background:var(--ip-sky);color:var(--ip-black)}
@media (max-width:420px){.btn-lg{padding:0 22px;font-size:14px}}

/* Cards */
.card{border-radius:var(--radius-md);border:var(--border-width) solid var(--border-default);background:var(--surface-card);color:var(--text-body);box-sizing:border-box;max-width:100%}
.card-outline{border:var(--border-width-strong) solid var(--ip-black)}
.card-inverse{background:var(--surface-inverse);border-color:var(--ip-black);color:var(--text-inverse)}
.card-brand{background:var(--ip-sky);border-color:var(--ip-sky);color:var(--ip-black)}
.card-soft{background:var(--surface-brand-soft);border-color:var(--ip-sky-100)}
@media (max-width:600px){.card{padding:24px !important}}

/* Badges & tags */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--radius-pill);font-family:var(--font-label);font-weight:700;font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase;white-space:nowrap;background:var(--ip-gray-100);color:var(--ip-ink)}
.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-brand{background:var(--ip-sky);color:var(--ip-black)}
.badge-dark{background:var(--ip-black);color:var(--ip-paper)}
.badge-success{background:var(--status-success-bg);color:#137245}
.badge-warning{background:var(--status-warning-bg);color:#8A5A00}
.tag{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:var(--radius-pill);border:var(--border-width-strong) solid var(--border-default);background:var(--surface-card);color:var(--text-body);font-family:var(--font-sans);font-weight:600;font-size:14px}
.icon{display:inline-block;flex:none}

/* Photos */
.slot-img{display:block;width:100%;height:100%;object-fit:cover}
.slot-fallback{width:100%;height:100%;background:var(--ip-black);display:flex;align-items:center;justify-content:center}
.slot-fallback img{width:min(220px,50%);height:auto}

/* Header nav: desktop vs. mobile (design breakpoint 1180px) */
.only-wide{display:contents}
.only-narrow{display:none}
@media (max-width:1179px){.only-wide{display:none}.only-narrow{display:contents}}
@media (min-width:1180px){.mobile-menu{display:none !important}}

/* FAQ */
.faq{border-top:2px solid var(--ip-black)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-family:var(--font-display);font-weight:800;font-size:17px;line-height:1.3;text-transform:uppercase;color:var(--ip-black)}
.faq summary::-webkit-details-marker{display:none}
.faq-dot{flex:none;width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:var(--ip-gray-100);transition:transform 200ms var(--ease-out),background 200ms}
.faq[open] .faq-dot{transform:rotate(45deg);background:var(--ip-sky)}
.faq p{font-family:var(--font-sans);font-weight:500;font-size:17px;line-height:1.65;color:var(--ip-ink);margin:0 0 24px;max-width:60ch;text-wrap:pretty}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field-label{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ip-black)}
.field-hint{font-family:var(--font-sans);font-size:13px;color:var(--text-muted)}
.input{box-sizing:border-box;width:100%;height:48px;padding:0 16px;border-radius:var(--radius-sm);border:var(--border-width-strong) solid var(--border-default);background:var(--surface-card);font-family:var(--font-sans);font-weight:500;font-size:16px;color:var(--ip-ink);outline:none;transition:box-shadow var(--duration-fast) var(--ease-out),border-color var(--duration-fast)}
.input:focus,textarea:focus{border-color:var(--ip-black) !important;box-shadow:var(--shadow-focus)}
.input:user-invalid{border-color:var(--status-danger)}
.select-wrap{position:relative;display:flex}
.select-wrap select{appearance:none;-webkit-appearance:none;padding-right:44px}
.select-wrap::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:2px solid var(--ip-black);border-bottom:2px solid var(--ip-black);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--font-sans);font-weight:600;font-size:15px;color:var(--text-body)}
.check input{width:20px;height:20px;margin:0;accent-color:var(--ip-black);flex:none}
textarea{box-sizing:border-box;width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{background:var(--status-danger-bg);color:#B4232A;border-radius:var(--radius-sm);padding:14px 16px;font-weight:600;margin-bottom:16px}
.sms-consent{font-family:var(--font-sans);font-size:13px;line-height:1.5;color:var(--text-muted);margin:0}
.sms-consent a{color:inherit}

/* Legal copy */
.prose{max-width:760px;font-family:var(--font-sans);font-weight:500;font-size:17px;line-height:1.7;color:var(--ip-ink)}
.prose h2{font-family:var(--font-display);font-weight:800;font-size:20px;text-transform:uppercase;color:var(--ip-black);margin:40px 0 12px}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 18px;padding-left:22px}
.prose li{margin-bottom:8px}

/* Grids: avoid horizontal scroll on small phones */
@media (max-width:480px){[style*="minmax(min(100%"]{gap:20px !important}}

/* Events filters */
.tag-filter{cursor:pointer}
.tag-filter:hover{background:var(--ip-gray-100)}
.tag-filter.is-selected{background:var(--ip-black);border-color:var(--ip-black);color:var(--ip-paper)}
.event-card{display:flex;flex-direction:column;transition:box-shadow var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}
.event-card>div{flex:1}
.event-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* Small phones: keep logo + both header buttons inside the screen */
@media (max-width:430px){
  header>div{gap:10px !important}
  header a[aria-label="INNPLAY home"]{width:96px !important;height:56px !important}
  header a[aria-label="INNPLAY home"]>div{margin-top:-18px !important}
  header a[aria-label="INNPLAY home"] img{width:96px !important;height:96px !important}
  .only-narrow .btn{padding:0 12px;font-size:11px}
}