/* Hawks Hotels look, ported from the hawks-hotel mock-up (index.html <style>, 2026-10).
   Colour tokens live in theme/static_src/src/styles.css (@theme); this file holds the
   hand-written parts Tailwind can't express: fonts, depth bands, photo prints, header,
   drawer, reveals and the small effects. */

/* fonts: self-hosted, with metric-matched local fallbacks */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/inter-normal-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/inter-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/inter-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 800;font-display:swap;src:url(../fonts/playfairdisplay-italic-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 800;font-display:swap;src:url(../fonts/playfairdisplay-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 800;font-display:swap;src:url(../fonts/playfairdisplay-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/playfairdisplay-normal-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/playfairdisplay-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/playfairdisplay-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Fallback';src:local('Times New Roman'),local('Times'),local('Georgia'),local('Noto Serif');size-adjust:101.25%;ascent-override:106.87%;descent-override:24.79%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica'),local('Roboto');size-adjust:104.67%;ascent-override:92.56%;descent-override:23.05%;line-gap-override:0%}

:root{ --ease-swell:cubic-bezier(.16,1,.3,1); --hd-h:4rem; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body.hh{ background:#ffffff; color:#000000; overflow-x:clip; font-family:'Playfair Display','Playfair Fallback',serif; }
::selection{ background:#4f3327; color:#faf9f7; }
.mono{ font-family:'Inter','Inter Fallback',sans-serif; }
.hand{ font-family:'Playfair Display','Playfair Fallback',serif; font-style:italic; font-weight:400; }
:focus-visible{ outline:2px solid #b08968; outline-offset:3px; border-radius:4px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:#4f3327; color:#faf9f7; padding:10px 16px; }
.skip:focus{ left:8px; top:8px; }
@media(min-width:1024px){ .hh main p{ max-width:70ch; } }

/* depth bands */
.band{ position:relative; }
.band-surface{ background:linear-gradient(180deg,#ffffff 0%,#e3d9d0 100%); color:#000000; }
.band-shallow{ background:linear-gradient(180deg,#c9b8ac 0%,#a98d75 100%); color:#4f3327; }
.band-lagoon{ background:linear-gradient(180deg,#8b6b5c 0%,#6b5138 100%); color:#faf9f7; }
.band-deep{ background:linear-gradient(180deg,#5f4736 0%,#4f3327 100%); color:#ffffff; }
.band-abyss{ background:linear-gradient(180deg,#4f3327 0%,#2b1e16 100%); color:#e3d9d0; }
.band-paper{ background:#f4efe3; color:#2b1e16; }

/* caustic light */
.caustics::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.012 0.03' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23c)'/%3E%3C/svg%3E"); background-size:420px 420px; animation:drift 26s linear infinite alternate; }
@keyframes drift{ to{ background-position:220px 140px; } }

/* type scale, mobile first */
.disp{ font-family:'Playfair Display','Playfair Fallback',serif; font-weight:600; letter-spacing:-.01em; }
.h-hero{ font-size:clamp(2.5rem,10vw,4.5rem); line-height:1.02; }
.h-ch{ font-size:clamp(1.7rem,6vw,3.4rem); line-height:1.08; }
.h-sub{ font-size:clamp(1.05rem,3.4vw,1.5rem); line-height:1.45; }
.body-t{ font-size:clamp(1rem,2.8vw,1.15rem); line-height:1.7; }
.tag{ font-family:'Inter','Inter Fallback',sans-serif; font-size:clamp(.68rem,2.2vw,.78rem); letter-spacing:.22em; text-transform:uppercase; }

/* manta-wing divider */
.md{ display:block; width:100%; height:clamp(40px,9vw,110px); margin:-1px 0; }

/* reveal */
.reveal{ transition:opacity .9s var(--ease-swell), transform .9s var(--ease-swell); }
.js .reveal{ opacity:0; transform:translateY(26px); }
.js .reveal.in{ opacity:1; transform:none; }
.reveal-photo{ transform:rotate(var(--tilt,0deg)); transition:opacity 1s var(--ease-swell), transform 1s var(--ease-swell); }
.js .reveal-photo{ opacity:0; transform:translateY(30px) rotate(var(--tilt,0deg)) scale(.97); }
.js .reveal-photo.in{ opacity:1; transform:rotate(var(--tilt,0deg)); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal,.reveal-photo{ opacity:1!important; transform:none!important; transition:none!important; }
  .caustics::before,.manta-glide,.pulse-dot,.ticker-track,.kenburns,.ping{ animation:none!important; }
}

/* hero */
.kenburns{ animation:kb 26s var(--ease-swell) infinite alternate; }
@keyframes kb{ from{ transform:scale(1.02); } to{ transform:scale(1.1) translate(-1.5%,-1%); } }
.pulse-dot{ animation:pd 1.8s ease-in-out infinite; }
@keyframes pd{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.7); } }
.stamp{ display:inline-block; font-family:'Inter','Inter Fallback',sans-serif; text-transform:uppercase; letter-spacing:.14em; border:2px solid currentColor; border-radius:6px; padding:.45em .8em; transform:rotate(var(--rot,-4deg)); opacity:.92; }

/* photo prints */
.polaroid{ background:#ffffff; padding:10px 10px 14px; box-shadow:0 14px 34px rgba(43,30,22,.22); border-radius:3px; }
.polaroid img{ display:block; width:100%; height:auto; background:#e3d9d0; }
.cap{ font-family:'Playfair Display','Playfair Fallback',serif; font-style:italic; font-size:clamp(1.05rem,3vw,1.3rem); color:#3f3229; }

/* sounder readout */
.sounding{ font-family:'Inter','Inter Fallback',sans-serif; }
.sounding .ticks{ height:10px; background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 8px); opacity:.5; }
.ping{ animation:pd 2.2s ease-in-out infinite 1s; }

/* log entries */
.log-entry{ background:repeating-linear-gradient(180deg,transparent 0 30px,rgba(176,137,104,.07) 30px 31px); border:1px solid rgba(176,137,104,.16); }
.log-entry:hover{ border-color:rgba(176,137,104,.45); }
.sonar{ position:relative; overflow:hidden; }
.sonar::after{ content:""; position:absolute; inset:0; background:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%), rgba(176,137,104,.14), transparent 70%); opacity:0; transition:opacity .4s; pointer-events:none; }
.sonar:hover::after{ opacity:1; }

/* buttons: bioluminescent underline */
.btn{ position:relative; display:inline-flex; align-items:center; gap:.4em; min-height:48px; padding:.7em 1.4em; font-family:'Inter','Inter Fallback',sans-serif; font-size:.86rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.btn::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:linear-gradient(90deg,#b08968,#6b5138,#b08968); background-size:200% 100%; transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-swell); }
.btn:hover::after,.btn:focus-visible::after{ transform:scaleX(1); animation:shimmer 2.4s linear infinite; }
@keyframes shimmer{ to{ background-position:-200% 0; } }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ticker: current meter */
.ticker{ overflow:hidden; }
.ticker-track{ display:inline-flex; gap:3.5rem; white-space:nowrap; animation:tick 30s linear infinite; padding-right:3.5rem; }
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{ animation-play-state:paused; }
@keyframes tick{ to{ transform:translateX(-50%); } }

/* mantas gliding */
.manta-glide{ animation:glide 16s ease-in-out infinite alternate; }
@keyframes glide{ 0%{ transform:translate(0,0) rotate(-4deg); } 50%{ transform:translate(38vw,-14px) rotate(3deg); } 100%{ transform:translate(76vw,6px) rotate(-2deg); } }

/* ticket (booking) */
.ticket{ position:relative; background:#f4efe3; color:#000000; }
.ticket::before,.ticket::after{ content:""; position:absolute; width:26px; height:26px; background:var(--notch,#0d1218); border-radius:50%; top:50%; transform:translateY(-50%); }
.ticket::before{ left:-13px; }
.ticket::after{ right:-13px; }
.ticket.no-notch::before,.ticket.no-notch::after{ display:none; }
.ticket .perf{ border-top:2px dashed rgba(0,0,0,.35); margin-left:-1px; margin-right:-1px; }
.hh input,.hh select,.hh textarea{ font-size:16px; }
.legal-note{ background:#f4efe3; color:#4f3327; border:1px solid rgba(79,51,39,.35); }
.bk-err{ background:#fff3ea; color:#8a2d12; border:1px solid #c9855f; }
.field{ width:100%; min-height:48px; border:1px solid rgba(0,0,0,.35); background:#fffdf8; color:#000; padding:.6em .8em; border-radius:4px; font-family:'Inter','Inter Fallback',sans-serif; }
.field:focus{ outline:2px solid #b08968; outline-offset:1px; }
textarea.field{ min-height:8rem; }

/* depth ruler (home only) */
.ruler{ position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:40; display:none; }
@media(min-width:1024px){ .ruler{ display:block; } }
.ruler .rtick{ display:block; width:22px; height:1px; background:rgba(227,217,208,.5); margin:26px 0; position:relative; }
.ruler .rtick span{ position:absolute; right:28px; top:-9px; font-family:'Inter','Inter Fallback',sans-serif; font-size:.6rem; letter-spacing:.18em; white-space:nowrap; opacity:.75; }

/* header + progress */
#progress{ position:fixed; top:0; left:0; height:2px; width:0; background:linear-gradient(90deg,#b08968,#9c6b4e); z-index:60; }
#hd{ position:fixed; top:0; left:0; right:0; z-index:50; transition:background .4s, box-shadow .4s; background:transparent; color:#faf9f7; }
#hd.scrolled,.hd-solid #hd{ background:rgba(43,30,22,.94); box-shadow:0 6px 24px rgba(0,0,0,.28); backdrop-filter:blur(6px); }
.hd-solid main{ padding-top:var(--hd-h); }
.hdlink{ min-height:44px; display:inline-flex; align-items:center; font-family:'Inter','Inter Fallback',sans-serif; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; opacity:.85; white-space:nowrap; }
.hdlink:hover,.hdlink[aria-current="page"]{ opacity:1; }
.hdlink[aria-current="page"]{ box-shadow:inset 0 -1px 0 #b08968; }
@media (min-width:1024px) and (max-width:1439px){ #hd nav{ gap:1rem; } .hdlink{ letter-spacing:.1em; } }
@media (min-width:1024px){ .hd-place{ display:none; } }

/* drawer: night compass */
#drawer{ position:fixed; inset:0; z-index:70; background:radial-gradient(120% 90% at 70% 10%, #10312d 0%, #2b1e16 60%); transform:translateX(100%); transition:transform .5s var(--ease-swell); visibility:hidden; color:#faf9f7; }
#drawer.open{ transform:none; visibility:visible; }
.starfield{ position:absolute; inset:0; background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff8,transparent),radial-gradient(1px 1px at 70% 20%,#fff6,transparent),radial-gradient(1.5px 1.5px at 40% 70%,#fff5,transparent),radial-gradient(1px 1px at 85% 60%,#fff7,transparent),radial-gradient(1px 1px at 15% 80%,#fff4,transparent); }
.dlink{ display:flex; align-items:baseline; gap:.8em; min-height:52px; font-family:'Playfair Display','Playfair Fallback',serif; font-size:clamp(1.4rem,5.5vw,1.9rem); color:#ffffff; }
.dlink:hover{ color:#b08968; }

/* footer */
.hh-footer{ background:#2b1e16; color:#e3d9d0; }

/* sticky bars */
#mobBar{ position:fixed; left:0; right:0; bottom:0; z-index:45; transform:translateY(110%); transition:transform .5s var(--ease-swell); padding-bottom:env(safe-area-inset-bottom); }
#mobBar.show{ transform:none; }
#tripPill{ transition:opacity .4s; }
#toTop,.wa-btn{ transition:opacity .3s, transform .4s var(--ease-swell); }
@media(max-width:1023px){ #toTop.lift,.wa-btn.lift{ transform:translateY(-72px); } }

/* lightbox */
#lb{ position:fixed; inset:0; z-index:80; background:rgba(6,12,11,.94); }
.lbbtn{ min-width:48px; min-height:48px; display:inline-flex; align-items:center; justify-content:center; }

/* touch strips */
.strip{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:6px 2px 18px; }
.strip::-webkit-scrollbar{ display:none; }
.strip > *{ scroll-snap-align:start; flex:0 0 78%; }
@media(min-width:768px){ .strip > *{ flex-basis:340px; } }

/* room rows */
.rs-list{ list-style:none; margin:.75rem 0 0; padding:0; }
.room-row{ width:100%; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; min-height:44px; padding:.45rem .15rem; text-align:left; border-bottom:1px dashed rgba(0,0,0,.3); color:inherit; transition:background .2s; }
.room-row:hover{ background:rgba(0,0,0,.05); }
.rs-chip{ display:inline-block; font-family:'Inter','Inter Fallback',sans-serif; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; border:1px solid currentColor; border-radius:999px; padding:.2rem .6rem; opacity:.8; }
.rs-amen{ list-style:none; padding:0; margin:.5rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem; }
.rs-amen li{ font-family:'Inter','Inter Fallback',sans-serif; font-size:.72rem; border:1px solid rgba(0,0,0,.22); border-radius:999px; padding:.28rem .6rem; background:rgba(255,255,255,.5); }

/* long-form text from the console editor (blog, legal, descriptions) */
.prose-hh{ font-family:'Playfair Display','Playfair Fallback',serif; font-size:clamp(1rem,2.6vw,1.12rem); line-height:1.75; }
.prose-hh > * + *{ margin-top:1em; }
.prose-hh h2,.prose-hh h3,.prose-hh h4{ font-weight:600; line-height:1.2; margin-top:1.6em; }
.prose-hh h2{ font-size:1.6em; } .prose-hh h3{ font-size:1.3em; } .prose-hh h4{ font-size:1.1em; }
.prose-hh a{ color:#9c6b4e; text-decoration:underline; text-underline-offset:3px; }
.prose-hh ul{ list-style:disc; padding-left:1.4em; } .prose-hh ol{ list-style:decimal; padding-left:1.4em; }
.prose-hh li + li{ margin-top:.35em; }
.prose-hh img{ border-radius:3px; margin:1.2em 0; }
.prose-hh blockquote{ border-left:2px solid #b08968; padding-left:1em; font-style:italic; }
.prose-hh table{ width:100%; border-collapse:collapse; font-family:'Inter','Inter Fallback',sans-serif; font-size:.9em; }
.prose-hh td,.prose-hh th{ border-bottom:1px dashed rgba(0,0,0,.25); padding:.5em .3em; text-align:left; }

/* messages from Django (booking errors etc.) */
.hh-msg{ font-family:'Inter','Inter Fallback',sans-serif; font-size:.9rem; border-radius:4px; padding:.75rem 1rem; }
.hh-msg.error{ background:#fff3ea; color:#8a2d12; border:1px solid #c9855f; }
.hh-msg.success{ background:#eef6ef; color:#1f5130; border:1px solid #8fbf9a; }
.hh-msg.info,.hh-msg.warning{ background:#f4efe3; color:#4f3327; border:1px solid rgba(79,51,39,.35); }

/* legacy hooks still used by pages not yet moved to this look */
.hero-heading{ font-family:'Playfair Display',serif; font-weight:700; font-style:italic; letter-spacing:.025em; font-size:2.25rem; line-height:1.2; color:#4F3327; margin-bottom:2rem; max-width:56rem; }
@media (min-width:1024px){ .hero-heading{ font-size:3rem; } }
.subtitle{ font-size:.875rem; text-transform:uppercase; letter-spacing:.1em; color:#8B6B5C; margin-bottom:1rem; font-weight:500; }
.heading-section{ font-family:'Inter',serif; font-size:2rem; color:#4F3327; font-weight:400; line-height:1.3; display:flex; align-items:center; justify-content:space-between; }
.hide-scrollbar::-webkit-scrollbar{ display:none; }
.hide-scrollbar{ scrollbar-width:none; -ms-overflow-style:none; }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } }
.animate-fade-in-up{ animation:fadeInUp .8s ease-out forwards; }
.modal-backdrop{ backdrop-filter:blur(4px); }
.grecaptcha-badge{ visibility:hidden !important; }

/* booking pages (results, rooms, guest details, confirmation): the original markup keeps
   its forms and script hooks; this layer only re-dresses it in the house colours */
.bk main{ background:#f4efe3; font-family:'Inter','Inter Fallback',sans-serif; color:#2b1e16; }
.bk main .bg-gray-50,.bk main .bg-gray-100{ background:#f4efe3; }
.bk main .bg-white{ background:#fffdf8; }
.bk main .rounded-lg,.bk main .rounded-xl{ border-radius:4px; }
.bk main .shadow-sm,.bk main .shadow,.bk main .shadow-md{ box-shadow:0 10px 28px rgba(43,30,22,.10); }
.bk main h1,.bk main h2,.bk main h3{ font-family:'Playfair Display','Playfair Fallback',serif; letter-spacing:-.01em; }
.bk main .text-gray-900,.bk main .text-gray-800{ color:#2b1e16; }
.bk main .text-gray-700,.bk main .text-gray-600{ color:#4f3327; }
.bk main .text-gray-500,.bk main .text-gray-400{ color:#8b6b5c; }
.bk main .border-gray-200,.bk main .border-gray-100,.bk main .border-gray-300{ border-color:rgba(79,51,39,.18); }
.bk main .bg-gray-900,.bk main .bg-dark-brown,.bk main .bg-black{ background:#4f3327; }
.bk main .hover\:bg-gray-800:hover,.bk main .bg-gray-900:hover{ background:#2b1e16; }
.bk main button.bg-gray-900,.bk main a.bg-gray-900,.bk main button.bg-dark-brown,.bk main a.bg-dark-brown{ font-family:'Inter','Inter Fallback',sans-serif; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; border-radius:2px; }
.bk main input[type=text],.bk main input[type=email],.bk main input[type=tel],.bk main input[type=date],.bk main select,.bk main textarea{ background:#fffdf8; border-color:rgba(0,0,0,.3); border-radius:4px; }
.bk main input:focus,.bk main select:focus,.bk main textarea:focus{ outline:2px solid #b08968; outline-offset:1px; box-shadow:none; }
.bk main .text-green-600,.bk main .text-green-700{ color:#1f6b4a; }
.bk main .bg-green-100,.bk main .bg-green-50{ background:#e6efe6; }