@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

:root { --ink:#142d2c; --ink-2:#1d3f3d; --paper:#fbf8f1; --sand:#eee6d9; --warm:#f4eddf; --coral:#f06754; --coral-dark:#d94e3c; --yellow:#ffcf63; --sky:#bde7e9; --line:rgba(20,45,44,.15); --serif:'Playfair Display', Georgia, serif; --sans:'DM Sans', Arial, sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; -webkit-font-smoothing:antialiased; }
body:has(dialog[open]) { overflow:hidden; }
a { color:inherit; text-decoration:none; }
button, input, select { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
.skip-link { position:absolute; top:-100px; left:18px; background:var(--yellow); padding:10px 14px; z-index:30; font-weight:700; }
.skip-link:focus { top:10px; }
.section-shell { width:min(1280px, calc(100% - 80px)); margin-inline:auto; }
.announcement-bar { height:35px; display:flex; align-items:center; justify-content:center; gap:9px; background:var(--yellow); color:var(--ink); font:500 10px/1 var(--mono); letter-spacing:.055em; position:relative; }
.announcement-bar a { font-weight:500; text-decoration:underline; text-underline-offset:3px; }.spark { font-size:14px; }.announcement-close { position:absolute; right:22px; border:0; background:none; color:var(--ink); font-size:20px; line-height:1; padding:4px; }
.site-header { height:86px; display:flex; align-items:center; width:min(1370px, calc(100% - 64px)); margin:auto; position:relative; z-index:11; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); width:max-content; }.brand-mark { width:37px; height:37px; }.brand span { display:flex; flex-direction:column; letter-spacing:-.06em; line-height:.73; }.brand b { font-size:17px; font-weight:700; }.brand small { font-family:var(--mono); font-size:6px; font-weight:500; letter-spacing:.39em; margin:5px 0 0 2px; }.desktop-nav { display:flex; gap:34px; align-items:center; margin-left:auto; margin-right:40px; }.desktop-nav a { font-size:13px; font-weight:600; transition:color .2s; }.desktop-nav a:hover { color:var(--coral); }.header-actions { display:flex; align-items:center; gap:18px; }.language-button { border:0; padding:6px 0; background:none; color:var(--ink); font:500 10px var(--mono); }.language-button span { padding-left:3px; }.header-book-button { color:white; background:var(--ink); border:0; border-radius:30px; padding:12px 17px; font-size:12px; font-weight:700; box-shadow:0 5px 12px rgba(20,45,44,.12); transition:transform .2s, background .2s; }.header-book-button:hover { transform:translateY(-2px); background:var(--coral); }.header-book-button span { margin-left:5px; }.menu-toggle { display:none; border:0; background:none; padding:5px 0 5px 5px; }.menu-toggle span { display:block; height:1.5px; width:24px; margin:5px 0; background:var(--ink); }
.mobile-menu { position:absolute; left:0; right:0; top:78px; padding:18px; background:var(--paper); box-shadow:0 16px 24px rgba(20,45,44,.12); }.mobile-menu a { display:block; padding:12px 4px; border-bottom:1px solid var(--line); font-weight:600; }.mobile-menu button { width:100%; border:0; margin-top:18px; padding:13px; background:var(--coral); color:white; font-weight:700; text-align:left; }.mobile-menu button span { float:right; }
.hero { position:relative; min-height:650px; color:white; overflow:hidden; }.hero-image { position:absolute; inset:0; background-image:url('https://www.destinationhostels.com/wp-content/uploads/2021/07/Arrifana-nature-scaled.jpg'); background-size:cover; background-position:center; transform:scale(1.008); }.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg, rgba(9,35,34,.90) 0%, rgba(12,38,37,.68) 37%, rgba(8,27,26,.42) 72%), linear-gradient(0deg, rgba(7,27,27,.55), transparent 40%); }.hero-content { position:relative; padding-top:137px; }.eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 21px; color:var(--coral); font:500 10px/1.1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }.eyebrow span { display:inline-block; width:22px; height:1px; background:currentColor; }.eyebrow-light { color:#ffdf8c; }.hero h1, h2, h3, p { margin-top:0; }.hero h1 { max-width:730px; margin-bottom:24px; color:white; font:600 clamp(55px, 6.6vw, 94px)/.95 var(--serif); letter-spacing:-.058em; }.hero h1 em, h2 em { font-weight:500; }.hero-copy { width:415px; margin-bottom:28px; color:rgba(255,255,255,.9); font-size:15px; line-height:1.55; }.text-link { display:inline-flex; align-items:center; gap:9px; border-bottom:1px solid var(--ink); padding-bottom:6px; font:600 12px/1 var(--sans); }.text-link span { font-size:15px; transition:transform .2s; }.text-link:hover span { transform:translate(3px, 3px); }.text-link-light { color:white; border-color:rgba(255,255,255,.6); }.hero-bottom { position:absolute; bottom:31px; left:0; right:0; display:flex; align-items:center; gap:16px; color:rgba(255,255,255,.8); font:500 9px var(--mono); letter-spacing:.06em; text-transform:uppercase; }.hero-bottom p:last-child { margin-left:auto; }.hero-bottom p { margin:0; }.hero-scroll-line { flex:0 1 360px; height:1px; background:rgba(255,255,255,.48); }
.booking-wrap { position:relative; z-index:5; margin-top:-43px; }.booking-bar { display:grid; grid-template-columns:1.15fr 1.15fr .9fr .9fr .75fr auto; min-height:86px; background:white; box-shadow:0 18px 35px rgba(11,39,38,.16); }.booking-intro { display:flex; flex-direction:column; justify-content:center; padding:15px 21px 15px 31px; position:relative; }.booking-intro strong { font-size:14px; letter-spacing:-.025em; }.booking-intro small { margin-top:4px; color:#6e7a76; font:400 9px var(--mono); letter-spacing:.05em; }.live-dot { position:absolute; top:18px; right:22px; width:7px; height:7px; border-radius:50%; background:#51b399; box-shadow:0 0 0 4px #e9f7f3; }.field { display:flex; flex-direction:column; justify-content:center; border-left:1px solid var(--line); padding:13px 16px; min-width:0; }.field span { margin-bottom:6px; color:#697571; font:500 8px var(--mono); letter-spacing:.1em; text-transform:uppercase; }.field input,.field select { width:100%; color:var(--ink); border:0; background:transparent; outline:0; font:600 12px var(--sans); min-width:0; }.field input::-webkit-calendar-picker-indicator { opacity:.55; cursor:pointer; }.field select { appearance:none; background:linear-gradient(45deg, transparent 50%, #465755 50%) calc(100% - 5px) 50%/4px 4px no-repeat, linear-gradient(135deg, #465755 50%, transparent 50%) calc(100% - 1px) 50%/4px 4px no-repeat; }.booking-submit { align-self:center; margin-right:12px; min-height:53px; padding:0 17px; color:white; border:0; background:var(--coral); font-weight:700; font-size:12px; transition:background .2s, transform .2s; }.booking-submit:hover { background:var(--coral-dark); transform:translateY(-2px); }.booking-submit span { padding-left:5px; font-size:16px; }
.intro { display:grid; grid-template-columns: 1fr 2.2fr 1.1fr; gap:56px; padding-top:147px; padding-bottom:143px; }.intro-label { color:#6d7773; font:500 10px var(--mono); text-transform:uppercase; letter-spacing:.08em; }.scribble { color:var(--coral); font-size:13px; padding-right:6px; }.intro-copy h2,.section-heading h2,.experience-copy h2,.offer-copy h2,.story-inner h2 { margin-bottom:22px; color:var(--ink); font:600 clamp(43px, 4.2vw, 64px)/.98 var(--serif); letter-spacing:-.057em; }.intro-copy>p:not(.eyebrow) { max-width:450px; margin-bottom:25px; color:#52615e; font-size:15px; line-height:1.65; }.intro-stats { align-self:end; display:grid; grid-template-columns:repeat(3,1fr); padding-bottom:3px; }.intro-stats div { min-height:73px; padding-left:15px; border-left:1px solid var(--line); }.intro-stats strong { display:block; color:var(--coral); font:600 32px/.95 var(--serif); }.intro-stats span { display:block; margin-top:7px; color:#62706c; font:500 8px/1.45 var(--mono); letter-spacing:.045em; }
.stays-section { padding:93px 0 100px; background:var(--warm); }.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:41px; }.section-heading h2 { margin-bottom:0; }.round-link { display:flex; align-items:center; gap:9px; margin-bottom:8px; font:600 12px var(--sans); }.round-link i { display:flex; align-items:center; justify-content:center; height:36px; width:36px; border:1px solid var(--ink); border-radius:50%; font-style:normal; font-size:16px; transition:.2s; }.round-link:hover i { color:white; background:var(--ink); transform:rotate(45deg); }.stay-grid { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:24px; }.stay-card-image { position:relative; display:block; height:440px; overflow:hidden; background:#d4d1c8; }.stay-card-main .stay-card-image { height:490px; }.stay-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }.stay-card:hover img { transform:scale(1.055); }.card-flag { position:absolute; top:15px; left:15px; padding:7px 10px; background:rgba(255,255,255,.92); color:var(--ink); font:500 8px var(--mono); letter-spacing:.07em; text-transform:uppercase; }.stay-card-body { display:flex; justify-content:space-between; align-items:end; gap:10px; padding-top:16px; }.stay-place { margin-bottom:4px; color:var(--coral); font:500 9px var(--mono); letter-spacing:.1em; text-transform:uppercase; }.stay-card h3 { margin-bottom:0; font:600 25px/.98 var(--serif); letter-spacing:-.05em; }.circle-arrow { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:35px; height:35px; border:1px solid rgba(20,45,44,.55); border-radius:50%; font-size:16px; transition:.2s; }.circle-arrow:hover { color:white; background:var(--coral); border-color:var(--coral); }.stay-description { min-height:39px; margin:13px 0 13px; color:#596864; font-size:12px; line-height:1.5; }.stay-meta { display:flex; gap:10px; align-items:center; padding-top:12px; border-top:1px solid var(--line); color:#65716d; font:500 8px var(--mono); letter-spacing:.02em; }.stay-meta b { margin-left:auto; color:var(--ink); white-space:nowrap; font-weight:500; }.marquee { overflow:hidden; padding:20px 0; color:var(--warm); background:var(--ink); }.marquee-track { display:flex; align-items:center; justify-content:center; width:max-content; white-space:nowrap; font:500 14px var(--mono); letter-spacing:.18em; animation:marquee 30s linear infinite; }.marquee-track i { margin:0 23px; color:var(--yellow); font-style:normal; }@keyframes marquee { to { transform:translateX(-20%); } }
.experience-section { display:grid; grid-template-columns:1.08fr .92fr; gap:120px; padding-top:128px; padding-bottom:128px; }.experience-image { position:relative; min-height:536px; overflow:hidden; }.experience-image>img { width:100%; height:100%; position:absolute; object-fit:cover; object-position:center; }.image-stamp { display:flex; align-items:center; justify-content:center; position:absolute; right:-33px; bottom:38px; width:106px; height:106px; color:var(--ink); background:var(--yellow); border-radius:50%; text-align:center; text-transform:uppercase; font:500 8px/1.25 var(--mono); letter-spacing:.14em; transform:rotate(11deg); }.image-stamp b { display:block; font:600 23px/.9 var(--serif); letter-spacing:-.06em; }.experience-copy { align-self:center; }.experience-copy>p:not(.eyebrow) { max-width:410px; color:#52615e; font-size:14px; line-height:1.65; }.experience-list { padding:0; margin:34px 0 31px; list-style:none; }.experience-list li { display:grid; grid-template-columns:38px 1fr; padding:13px 0; border-top:1px solid var(--line); }.experience-list li:last-child { border-bottom:1px solid var(--line); }.experience-list span { grid-row:span 2; color:var(--coral); font:500 9px var(--mono); }.experience-list b { font-size:13px; }.experience-list small { margin-top:4px; color:#71807c; font-size:11px; }.button { display:inline-flex; align-items:center; gap:16px; border:0; padding:14px 18px; font-size:12px; font-weight:700; transition:transform .2s, background .2s; }.button:hover { transform:translateY(-2px); }.button span { font-size:17px; }.button-ink { color:#fff; background:var(--ink); }.button-ink:hover { background:var(--coral); }.button-coral { color:white; background:var(--coral); }.button-coral:hover { background:var(--coral-dark); }
.offers-section { padding:86px 0 89px; color:white; background:var(--ink); }.offer-layout { display:grid; grid-template-columns:.92fr 1.08fr; gap:90px; align-items:center; }.offer-copy h2 { color:white; }.offer-copy p:not(.eyebrow) { max-width:387px; margin-bottom:26px; color:#b9ceca; font-size:14px; line-height:1.6; }.offer-cards { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.offer-card { display:flex; flex-direction:column; justify-content:space-between; min-height:238px; padding:22px; color:var(--ink); background:var(--sky); transform:rotate(-2deg); transition:transform .2s; }.offer-card:hover { transform:rotate(0deg) translateY(-5px); }.offer-card-yellow { background:var(--yellow); transform:rotate(2deg) translateY(15px); }.offer-card-yellow:hover { transform:rotate(0) translateY(10px); }.offer-card p { font:500 8px/1.3 var(--mono); letter-spacing:.09em; }.offer-card h3 { margin:0; font:600 31px/.95 var(--serif); letter-spacing:-.06em; }.offer-card span { display:flex; justify-content:space-between; align-items:center; padding-top:12px; border-top:1px solid rgba(20,45,44,.25); font:600 10px var(--sans); }.offer-card b { font-size:17px; }
.testimonials { padding-top:124px; padding-bottom:117px; }.quote-wrap { display:flex; align-items:center; gap:30px; }.quote-wrap blockquote { max-width:980px; margin:4px auto 24px; color:var(--ink); text-align:center; font:500 clamp(33px, 4vw, 55px)/1.11 var(--serif); letter-spacing:-.055em; }.quote-control { flex:0 0 auto; width:43px; height:43px; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:transparent; font-size:20px; transition:.2s; }.quote-control:hover { color:white; background:var(--ink); }.quote-footer { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; color:#586662; font:500 10px var(--mono); }.quote-footer>span:last-child { text-align:right; }.quote-footer i { color:#84908c; font-style:normal; }.quote-dots { display:flex; justify-content:center; gap:7px; }.quote-dots button { width:6px; height:6px; padding:0; border:0; border-radius:50%; background:#c5cfca; }.quote-dots button.active { width:20px; border-radius:5px; background:var(--coral); }
.story-section { position:relative; min-height:405px; overflow:hidden; color:#fff; background:linear-gradient(90deg,rgba(7,31,30,.93),rgba(7,31,30,.62)),url('https://www.destinationhostels.com/wp-content/uploads/2021/07/DSF8749.jpg') center 45%/cover; }.story-inner { position:relative; padding-top:78px; }.story-inner h2 { color:white; }.story-circle-link { position:absolute; right:75px; top:125px; display:flex; justify-content:center; flex-direction:column; width:127px; height:127px; padding-left:26px; color:var(--ink); border-radius:50%; background:var(--yellow); font:500 11px/1.1 var(--mono); letter-spacing:.03em; transition:transform .25s; }.story-circle-link b { position:absolute; top:24px; right:25px; font:400 21px var(--sans); }.story-circle-link:hover { transform:rotate(8deg) scale(1.04); }
.site-footer { color:var(--ink); background:#e4dccd; }.footer-top { display:grid; grid-template-columns:1.15fr 1fr 1.3fr; gap:40px; padding-top:70px; padding-bottom:58px; }.brand-footer { align-self:start; }.footer-links { display:grid; grid-template-columns:1fr 1fr; gap:25px; }.footer-links div { display:flex; flex-direction:column; gap:9px; }.footer-links b,.newsletter b { margin-bottom:6px; font:600 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }.footer-links a { color:#53615e; font-size:12px; }.footer-links a:hover { color:var(--coral); }.newsletter { justify-self:end; width:min(100%,355px); }.newsletter p { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }.newsletter p span { color:#65716d; font-size:11px; line-height:1.5; }.newsletter label { display:flex; border-bottom:1px solid var(--ink); }.newsletter input { flex:1; min-width:0; border:0; padding:8px 0; outline:0; color:var(--ink); background:transparent; font-size:12px; }.newsletter input::placeholder { color:#65716d; }.newsletter button { border:0; background:transparent; font-size:20px; }.newsletter small { display:block; height:10px; margin-top:8px; color:var(--coral-dark); font-size:10px; }.footer-bottom { display:flex; align-items:center; gap:20px; padding:18px 0; border-top:1px solid rgba(20,45,44,.16); color:#62706c; font:500 8px var(--mono); letter-spacing:.04em; }.footer-bottom>span:nth-child(2) { margin:auto; }.footer-bottom div { display:flex; gap:17px; }.footer-bottom a:hover { color:var(--coral); }
.booking-dialog { width:min(485px, calc(100% - 36px)); padding:47px 48px 43px; border:0; color:var(--ink); background:var(--paper); box-shadow:0 28px 80px rgba(2,20,20,.38); }.booking-dialog::backdrop { background:rgba(6,27,26,.75); backdrop-filter:blur(3px); }.booking-dialog h2 { margin:0 0 26px; font:600 44px/.98 var(--serif); letter-spacing:-.057em; }.dialog-close { position:absolute; top:13px; right:17px; border:0; background:transparent; color:var(--ink); font-size:28px; }.dialog-form { display:grid; gap:16px; }.dialog-form label { display:flex; flex-direction:column; gap:7px; color:#62706c; font:500 9px var(--mono); letter-spacing:.07em; text-transform:uppercase; }.dialog-form input,.dialog-form select { min-height:42px; padding:0 11px; border:1px solid var(--line); outline-color:var(--coral); color:var(--ink); background:#fffdfa; font:600 12px var(--sans); text-transform:none; }.dialog-date-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.dialog-form .button { justify-content:space-between; margin-top:4px; padding:16px 18px; }.toast { position:fixed; left:50%; bottom:22px; z-index:40; min-width:270px; max-width:calc(100% - 36px); padding:13px 18px; color:white; background:var(--ink); box-shadow:0 10px 30px rgba(0,0,0,.2); text-align:center; font-size:12px; opacity:0; pointer-events:none; transform:translate(-50%, 15px); transition:.3s; }.toast.show { opacity:1; transform:translate(-50%, 0); }
@media (max-width: 1050px) { .section-shell { width:min(100% - 50px, 980px); }.site-header { width:calc(100% - 50px); }.desktop-nav { gap:20px; margin-right:22px; }.booking-bar { grid-template-columns:1fr 1fr 1fr 1fr auto; }.booking-intro { display:none; }.experience-section { gap:70px; }.stay-meta { gap:6px; }.stay-meta span:nth-child(2) { display:none; } }
@media (max-width: 760px) { .section-shell { width:calc(100% - 36px); }.announcement-bar { padding:0 36px 0 14px; height:40px; text-align:center; font-size:8px; line-height:1.3; }.announcement-close { right:9px; }.site-header { width:calc(100% - 36px); height:70px; }.brand-mark { width:32px; height:32px; }.brand b { font-size:15px; }.desktop-nav,.language-button,.header-book-button { display:none; }.header-actions { margin-left:auto; }.menu-toggle { display:block; }.hero { min-height:623px; }.hero-image { background-position:56% center; }.hero-overlay { background:linear-gradient(90deg,rgba(7,30,29,.88),rgba(7,30,29,.52)),linear-gradient(0deg,rgba(7,25,24,.60),transparent 55%); }.hero-content { padding-top:106px; }.hero h1 { font-size:55px; }.hero-copy { width:auto; max-width:358px; font-size:14px; }.hero-bottom { bottom:19px; gap:9px; font-size:7px; }.hero-bottom p:last-child { display:none; }.hero-scroll-line { flex:1; }.booking-wrap { margin-top:-30px; }.booking-bar { grid-template-columns:1fr 1fr; padding:10px; gap:0; }.field { padding:11px 9px; border-left:0; border-bottom:1px solid var(--line); }.field:nth-of-type(2n) { border-left:1px solid var(--line); }.field-destination { grid-column:span 2; }.field-guests { border-bottom:0; }.booking-submit { grid-column:span 2; margin:10px 0 0; min-height:48px; }.intro { display:block; padding-top:80px; padding-bottom:78px; }.intro-label { margin-bottom:42px; }.intro-copy h2,.section-heading h2,.experience-copy h2,.offer-copy h2,.story-inner h2 { font-size:45px; }.intro-copy>p:not(.eyebrow) { font-size:14px; }.intro-stats { margin-top:55px; max-width:350px; }.intro-stats strong { font-size:28px; }.stays-section { padding:68px 0 71px; }.section-heading { align-items:start; margin-bottom:32px; }.round-link span { display:none; }.round-link { margin-top:8px; }.stay-grid { grid-template-columns:1fr; gap:39px; }.stay-card-image,.stay-card-main .stay-card-image { height:min(115vw, 480px); }.stay-card h3 { font-size:28px; }.stay-description { margin-top:12px; }.marquee { padding:16px 0; }.marquee-track { font-size:11px; }.experience-section { display:flex; flex-direction:column; gap:52px; padding-top:72px; padding-bottom:70px; }.experience-image { width:calc(100% - 17px); align-self:start; min-height:400px; }.image-stamp { right:-17px; bottom:21px; width:90px; height:90px; }.experience-copy>p:not(.eyebrow) { font-size:14px; }.offer-layout { display:block; }.offers-section { padding:68px 0 70px; }.offer-copy p:not(.eyebrow) { font-size:14px; }.offer-cards { margin-top:51px; gap:10px; }.offer-card { min-height:205px; padding:17px; }.offer-card h3 { font-size:25px; }.offer-card span { font-size:8px; }.testimonials { padding-top:76px; padding-bottom:75px; }.testimonials>.eyebrow { justify-content:center; }.quote-wrap { gap:8px; }.quote-wrap blockquote { margin:4px auto 21px; font-size:33px; }.quote-control { width:33px; height:33px; font-size:15px; }.quote-footer { font-size:8px; }.quote-footer>span:last-child i { display:none; }.story-section { min-height:368px; }.story-inner { padding-top:68px; }.story-circle-link { top:239px; right:4px; width:102px; height:102px; padding-left:22px; font-size:9px; }.story-circle-link b { top:19px; right:19px; }.footer-top { grid-template-columns:1fr 1fr; padding-top:56px; padding-bottom:36px; gap:37px 20px; }.footer-links { grid-column:span 2; order:3; }.newsletter { justify-self:stretch; width:auto; }.footer-bottom { flex-wrap:wrap; row-gap:8px; font-size:7px; }.footer-bottom>span:nth-child(2) { margin:0; width:100%; order:3; }.footer-bottom div { margin-left:auto; }.booking-dialog { padding:40px 26px 29px; }.booking-dialog h2 { font-size:40px; } }
@media (max-width: 380px) { .hero h1 { font-size:48px; }.intro-copy h2,.section-heading h2,.experience-copy h2,.offer-copy h2,.story-inner h2 { font-size:40px; }.offer-card h3 { font-size:21px; }.offer-card { min-height:190px; }.quote-wrap blockquote { font-size:29px; }.footer-bottom div { width:100%; margin-left:0; } }