@font-face { font-family:'Cochocib Script'; src:url('assets/Cochocib Script Free.otf') format('opentype'); font-display:swap; }
@font-face { font-family:Megastina; src:url('assets/Megastina.otf') format('opentype'); font-display:swap; }
:root { --cream:#f6f2ea; --ink:#27291e; --moss:#273324; --olive:#525844; --gold:#bda57f; --line:#d9ccb7; --serif:'Cormorant Garamond', Georgia, serif; --display:Italiana, Georgia, serif; --sans:Montserrat, Arial, sans-serif; --script:Megastina, cursive; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:#263723 url('assets/tisha-monique-hero-final.jpg') center 42% / cover fixed no-repeat; font-family:var(--sans); } a { color:inherit; text-decoration:none; } .skip-link { position:absolute; top:-5rem; left:1rem; z-index:9; padding:.7rem; background:#fff; } .skip-link:focus { top:1rem; }
.hero { position:relative; min-height:100vh; overflow:hidden; color:#fff; background:transparent; } .hero::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,rgba(7,17,10,.7) 0%,rgba(10,22,13,.44) 38%,rgba(10,20,13,.06) 68%),linear-gradient(0deg,rgba(9,20,11,.38),transparent 42%); pointer-events:none; }
.site-header { position:relative; z-index:3; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:min(1420px,calc(100% - 5rem)); margin:0 auto; padding:1.75rem 0; } .wordmark { font-family:var(--display); font-size:1.35rem; letter-spacing:.045em; text-transform:uppercase; } .site-nav { display:flex; gap:2.45rem; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; } .site-nav a:hover,.header-actions a:hover { opacity:.65; } .header-actions { justify-self:end; display:flex; align-items:center; gap:1.7rem; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; } .header-actions span { display:inline-block; width:.45rem; height:.45rem; margin-left:.25rem; border-radius:50%; background:#fff; vertical-align:middle; } .menu-toggle { display:grid; gap:.3rem; width:1.55rem; padding:0; border:0; background:none; } .menu-toggle i { height:1px; background:#fff; }
.hero-background { display:none; }
.hero-content { position:relative; z-index:2; width:min(1420px,calc(100% - 5rem)); margin:clamp(7rem,13vw,13rem) auto 0; } .intro-line { margin:0 0 .8rem .55rem; font-size:.92rem; } h1,h2 { margin:0; font-weight:400; line-height:.78; } h1 { font-family:var(--display); font-size:clamp(6rem,11.5vw,12rem); font-weight:400; letter-spacing:-.02em; text-transform:uppercase; } .signature { margin:1rem 0 3.8rem .4rem; color:#eadbbd; font-family:var(--script); font-size:clamp(2.7rem,3.6vw,3.9rem); line-height:.65; letter-spacing:.045em; word-spacing:.28em; } .underlined-link { display:inline-flex; align-items:center; gap:2.2rem; margin-left:.5rem; padding-bottom:.7rem; border-bottom:1px solid currentColor; font-size:.67rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; } .underlined-link b { font-size:1.45rem; font-weight:400; line-height:.5; } .location { margin:clamp(5rem,12vw,12rem) 0 0 .55rem; color:#e4d3aa; font-size:1.3rem; } .location span { margin-left:.65rem; color:#fff; font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; vertical-align:middle; }
.artwork-placeholder span { padding:.55rem .75rem; border:1px solid currentColor; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; }
 .feature { position:relative; display:grid; grid-template-columns:minmax(16rem,1fr) minmax(18rem,.82fr); align-items:center; gap:clamp(5rem,12vw,12rem); min-height:42rem; padding:5rem max(7vw,3rem); overflow:hidden; background:rgba(246,242,234,.88); backdrop-filter:blur(10px); } .feature-art { z-index:1; width:min(100%,30rem); aspect-ratio:.82; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,rgba(28,40,27,.22),rgba(23,31,18,.55)),linear-gradient(40deg,#384f3e,#a38f69); } .feature-copy { z-index:1; max-width:28rem; } .kicker { margin:0 0 1.5rem; font-size:.61rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; } .feature h2,.story-section h2,.live-section h2 { font-family:var(--serif); font-size:clamp(3.2rem,5vw,5.5rem); letter-spacing:-.045em; } .feature-copy>p:not(.kicker) { max-width:24rem; margin:1.8rem 0 2.4rem; font-size:1rem; line-height:1.75; } .dark { margin-left:0; } .line-leaf { position:absolute; right:8%; bottom:-10rem; width:23rem; height:33rem; opacity:.52; border:1px solid var(--gold); border-radius:50% 50% 50% 0; transform:rotate(28deg); } .line-leaf::before { position:absolute; top:8%; left:50%; height:93%; border-left:1px solid var(--gold); content:""; transform:rotate(12deg); }
.releases { padding:clamp(5rem,10vw,9rem) max(7vw,3rem); background:rgba(246,242,234,.89); backdrop-filter:blur(10px); } .releases-intro { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:end; margin-bottom:4rem; } .releases-intro h2 { font-family:var(--serif); font-size:clamp(3.2rem,5vw,5.5rem); font-weight:400; line-height:.82; letter-spacing:-.045em; } .releases-intro>p:last-child { max-width:19rem; margin:0; font-family:var(--serif); font-size:1.35rem; line-height:1.35; } .release { position:relative; } .release-featured { display:grid; grid-template-columns:minmax(16rem,.9fr) minmax(18rem,1.1fr); gap:clamp(3rem,9vw,9rem); align-items:center; padding:0 0 5rem; border-bottom:1px solid var(--line); } .release-art { display:grid; place-items:center; color:rgba(255,255,255,.9); text-align:center; } .release-art span { padding:.55rem .75rem; border:1px solid currentColor; font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; } .release-art-sw { aspect-ratio:1; background:linear-gradient(145deg,rgba(6,33,30,.27),rgba(5,16,11,.68)),radial-gradient(circle at 68% 24%,#7da493 0 3%,transparent 4%),linear-gradient(135deg,#6c977e,#142f29); } .release-detail h3,.release-compact h3 { margin:0; font-family:var(--display); font-size:clamp(3.6rem,6vw,6.5rem); font-weight:400; letter-spacing:-.03em; } .release-actions { display:flex; flex-wrap:wrap; gap:1.7rem; margin:2rem 0 2.5rem; } .release-link,.text-release-link { padding:0; border:0; border-bottom:1px solid currentColor; color:var(--ink); background:transparent; font:600 .65rem var(--sans); letter-spacing:.16em; text-transform:uppercase; cursor:pointer; } .release-link { display:inline-flex; gap:1.4rem; padding-bottom:.6rem; } .release-link b,.text-release-link b { font-size:1.1rem; font-weight:400; } .purchase-options { display:grid; max-width:29rem; border-top:1px solid var(--line); } .purchase-options a { display:flex; justify-content:space-between; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--line); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; } .purchase-options a:hover,.text-release-link:hover { color:var(--olive); } .purchase-options small { font-size:.58rem; letter-spacing:.11em; opacity:.68; } .release-list { display:grid; grid-template-columns:1fr 1fr; gap:3rem; padding-top:4rem; } .release-compact { display:grid; grid-template-columns:9rem 1fr; gap:1.5rem; align-items:center; } .release-compact h3 { font-size:clamp(2.2rem,3.4vw,3.7rem); line-height:.9; } .release-compact .kicker { margin:0 0 .65rem; } .release-art-layers,.release-art-mind { width:9rem; aspect-ratio:1; } .release-art-layers { background:linear-gradient(145deg,#b7a387,#4f684e); } .release-art-mind { background:linear-gradient(145deg,#426b61,#c8c0a4); } .release-compact .text-release-link { display:inline-block; margin:1.1rem 1.1rem 0 0; }
.story-section,.journal-section,.live-section { padding:7rem max(7vw,3rem); backdrop-filter:blur(10px); } .story-section { background:rgba(233,238,231,.87); } .story-section p:last-child { max-width:38rem; margin:2rem 0 0; font-size:1.05rem; line-height:1.8; } .journal-section { background:rgba(246,242,234,.82); } .journal-section p:last-child,.live-section p:last-child { max-width:32rem; font-family:var(--serif); font-size:1.55rem; } .live-section { color:#f5eee1; background:rgba(39,51,36,.87); }
.closing { position:relative; display:grid; place-items:center; min-height:20rem; overflow:hidden; color:#fff; text-align:center; background:linear-gradient(rgba(17,31,19,.42),rgba(17,31,19,.64)),url('assets/footer-tropical-coast.png') center 35% / cover no-repeat; } .closing::before { display:none; } .closing-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(16,27,14,.35),transparent,rgba(16,27,14,.35)); } .manifesto,.closing .signature,.socials { position:relative; z-index:1; } .manifesto { margin:0; font-size:.82rem; letter-spacing:.35em; text-transform:uppercase; } .closing .signature { margin:1.5rem 0 2rem; font-size:4.1rem; } .socials { display:flex; gap:2rem; font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; } .socials a:hover { color:#ebd4a8; }
footer { display:flex; justify-content:space-between; gap:2rem; padding:1.8rem max(3rem,4vw); color:#e7dfd0; background:rgba(29,40,28,.88); backdrop-filter:blur(8px); font-size:.58rem; letter-spacing:.17em; text-transform:uppercase; }
@media (max-width:800px) { .site-header { grid-template-columns:1fr auto; width:calc(100% - 2.5rem); padding:1.35rem 0; } .site-nav { display:none; } .site-nav.is-open { position:absolute; top:4.6rem; right:0; z-index:5; display:grid; gap:1.2rem; padding:1.5rem; color:var(--ink); background:rgba(246,242,234,.94); } .hero { background-position:58% center; } .hero-content { width:calc(100% - 2.5rem); margin-top:7rem; } .location { margin-top:6rem; } .feature { grid-template-columns:1fr; gap:3rem; padding:4rem 1.5rem; } .feature-art { width:min(100%,24rem); } .line-leaf { right:-12rem; } .story-section,.journal-section,.live-section { padding:5rem 1.5rem; } .socials { gap:1rem; flex-wrap:wrap; justify-content:center; } footer { flex-wrap:wrap; padding:1.5rem; } }
@media (max-width:800px) { .releases { padding:4.5rem 1.5rem; } .releases-intro,.release-featured,.release-list { grid-template-columns:1fr; } .releases-intro { gap:1.5rem; margin-bottom:3rem; } .release-featured { gap:2rem; padding-bottom:3.5rem; } .release-art-sw { max-width:24rem; } .release-list { gap:2.5rem; padding-top:3rem; } }
.release-art-layers { background:url('assets/layers-cover.jpg') center / cover no-repeat; }
.release-art-mind { background:url('assets/leave-your-mind-cover.jpg') center / cover no-repeat; }
.release-art-sw { background:url('assets/sw-cover.jpg') center / cover no-repeat; }
.releases { --ink:#f5eee1; --line:#f5eee1; --olive:#bda57f; color:#f5eee1; background:rgba(8,13,9,.72); }
.releases a:hover,.releases button:hover,.releases a:active,.releases button:active { color:#bda57f; border-color:#bda57f; }
.back-to-top { position:fixed; right:1.3rem; bottom:1.35rem; z-index:8; display:grid; justify-items:center; gap:.25rem; padding:.45rem; border:0; color:#f6f2ea; background:rgba(29,40,28,.72); backdrop-filter:blur(7px); cursor:pointer; opacity:0; pointer-events:none; transform:translateY(.8rem); transition:opacity .25s ease,transform .25s ease; } .back-to-top.is-visible { opacity:1; pointer-events:auto; transform:translateY(0); } .back-to-top svg { width:1.55rem; height:1.8rem; fill:none; stroke:#e5d6b7; stroke-width:.8; } .back-to-top span { font:600 .48rem var(--sans); letter-spacing:.13em; text-transform:uppercase; } .back-to-top:hover { color:#e5d6b7; background:rgba(29,40,28,.9); }
.story-section { color:#f5eee1; text-align:center; background:#526454; }
.live-section { background:rgba(8,13,9,.72); }
.hero .signature { font-size:clamp(1.5rem,2vw,2rem); white-space:nowrap; }
@media (max-width:800px) {
  body { background-position:12% 58%; background-size:auto 104%; }
  .hero { min-height:78svh; }
  .location { margin-top:3rem; }
  .hero .signature { font-size:clamp(1.35rem,5vw,1.5rem); letter-spacing:.025em; word-spacing:.16em; white-space:nowrap; }
  .closing .join-journey { font-size:clamp(2.3rem,10vw,3rem); white-space:nowrap; }
  .closing .join-journey { justify-self:center; text-align:center; }
  .manifesto { color:#eadbbd; transform:translate(.55rem,-1rem); }
  .back-to-top { opacity:1; pointer-events:auto; transform:none; }
  footer { display:grid; grid-template-columns:repeat(3,auto); justify-content:center; column-gap:1.5rem; row-gap:1.1rem; text-align:center; }
  footer>a { grid-row:1; }
  footer>span:first-child { grid-row:2; grid-column:1 / -1; }
}
.story-section p:last-child { margin-right:auto; margin-left:auto; }
.join-journey:hover { color:#bda57f; }
.closing .join-journey { margin-bottom:.55rem; }
.story-section .about-copy { max-width:38rem; margin:0 auto; font-size:1.05rem; line-height:1.8; }
.story-section h2 + .about-copy { margin-top:2rem; }
.story-section .about-copy + .about-copy { margin-top:1.1rem; }
.live-signup { display:inline-flex; gap:1.25rem; margin-top:1.8rem; padding-bottom:.6rem; border-bottom:1px solid currentColor; font-size:.62rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; } .live-signup:hover { color:#bda57f; }
.live-section>p:not(.kicker) { max-width:32rem; margin:2rem 0 0; font-family:var(--serif); font-size:1.55rem; }
.release-subtitle { font-family:var(--sans); font-size:.22em; font-weight:400; letter-spacing:.06em; white-space:nowrap; }
footer a:hover { color:#bda57f; }
.closing { padding:clamp(4.5rem,9vw,7rem) max(7vw,1.5rem) 2.5rem; }
.booking-panel { position:relative; z-index:1; display:grid; grid-template-columns:minmax(13rem,.8fr) minmax(18rem,1.2fr); gap:clamp(2rem,6vw,5rem); width:min(100%,56rem); margin:0 auto 3.5rem; padding:clamp(1.6rem,4vw,3rem); border:1px solid rgba(234,219,189,.5); color:#eadbbd; text-align:left; background:rgba(18,31,19,.42); backdrop-filter:blur(12px); }
.booking-intro .kicker { margin-bottom:1rem; color:#eadbbd; }
.booking-intro h2 { margin:0; font-family:var(--serif); font-size:clamp(2.7rem,4.3vw,4.2rem); font-weight:400; line-height:.84; letter-spacing:-.045em; }
.booking-intro>p:last-child { max-width:15rem; margin:1.25rem 0 0; color:#f5eee1; font-family:var(--serif); font-size:1.2rem; line-height:1.4; }
.booking-form { display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; align-content:start; }
.booking-form label { display:grid; gap:.55rem; color:#eadbbd; font-size:.57rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
.booking-form label:nth-of-type(3),.booking-form label:nth-of-type(4) { grid-column:1 / -1; }
.booking-form input,.booking-form select,.booking-form textarea { width:100%; border:0; border-bottom:1px solid rgba(234,219,189,.65); border-radius:0; outline:0; color:#f5eee1; background:rgba(246,242,234,.08); font:400 .85rem var(--sans); letter-spacing:normal; text-transform:none; }
.booking-form input,.booking-form select { min-height:2.6rem; padding:.55rem .7rem; }
.booking-form textarea { min-height:6.5rem; padding:.7rem; resize:vertical; }
.booking-form select option { color:var(--ink); background:var(--cream); }
.booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus { border-bottom-color:#bda57f; background:rgba(246,242,234,.14); }
.booking-form button { justify-self:start; grid-column:1 / -1; padding:0 0 .65rem; border:0; border-bottom:1px solid currentColor; color:#eadbbd; background:transparent; font:600 .62rem var(--sans); letter-spacing:.16em; text-transform:uppercase; cursor:pointer; }
.booking-form button b { margin-left:1.1rem; font-size:1.15rem; font-weight:400; }
.booking-form button:hover { color:#bda57f; }
.form-honeypot { position:absolute; left:-9999px; overflow:hidden; width:1px; height:1px; }
.form-success { grid-column:1 / -1; margin:0; color:#f5eee1; font-family:var(--serif); font-size:1.05rem; line-height:1.4; }
.form-error { color:#eadbbd; }
@media (max-width:800px) { .booking-panel { grid-template-columns:1fr; margin-bottom:2.5rem; padding:1.6rem; } .booking-form { grid-template-columns:1fr; } .booking-form label:nth-of-type(3),.booking-form label:nth-of-type(4) { grid-column:auto; } }
.closing .manifesto { margin-bottom:.5rem; font-size:.6rem; transform:translateY(-1.8rem); }
.closing .signature { margin:.45rem 0 2.8rem; font-size:3rem; transform:translateY(-.55rem); }
.booking-panel { width:min(100%,50rem); gap:clamp(1.6rem,4vw,3.5rem); margin:0 auto 3rem; padding:clamp(1.35rem,3vw,2.25rem); }
.booking-form { gap:.95rem; }
.booking-form input,.booking-form select { min-height:2.35rem; }
.booking-form textarea { min-height:5.5rem; }
@media (max-width:800px) { .closing .manifesto { justify-self:center; margin-bottom:0; color:#fff; font-size:.62rem; letter-spacing:.15em; white-space:nowrap; transform:translateY(-2.1rem); } .closing .signature { margin:.25rem 0 2.3rem; font-size:clamp(2.7rem,10vw,3rem); transform:translateY(-.65rem); } }
.legal-page { min-height:100vh; padding:clamp(3rem,8vw,7rem) max(7vw,1.5rem); color:var(--ink); background:rgba(246,242,234,.96); } .legal-page>* { max-width:44rem; margin-right:auto; margin-left:auto; } .legal-page .legal-back { display:inline-block; margin-bottom:5rem; padding-bottom:.5rem; border-bottom:1px solid currentColor; font-size:.62rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; } .legal-page h1 { margin:0; color:var(--moss); font-size:clamp(4rem,9vw,8rem); line-height:.8; } .legal-page .kicker { margin-bottom:1rem; } .legal-updated { margin:2rem auto 4.5rem; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; } .legal-page section { padding:1.8rem 0; border-top:1px solid var(--line); } .legal-page h2 { color:var(--moss); font-family:var(--serif); font-size:2.2rem; line-height:1; } .legal-page section p { max-width:39rem; font-size:.95rem; line-height:1.8; } .legal-page section a { color:var(--olive); text-decoration:underline; text-underline-offset:.2em; }