:root { --ink:#171410; --paper:#f6f3ee; --white:#fffdfa; --line:#e3ddd4; --muted:#766f65; --orange:#f1502a; --olive:#667763; --shadow:0 14px 38px rgba(39,29,18,.09); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
.container { width:min(1180px,calc(100% - 48px)); margin:auto; }
.topbar { background:var(--ink); color:#fbf6ef; font:500 10px 'DM Mono',monospace; letter-spacing:.6px; text-align:center; padding:9px; }
.nav { height:77px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { font-weight:800; font-size:23px; letter-spacing:-1.7px; white-space:nowrap; }
.brand i { color:var(--orange); font-style:normal; }
.navlinks { display:flex; align-items:center; gap:28px; font-size:13px; font-weight:700; }
.navlinks a { opacity:.72; }
.navlinks a:hover,.navlinks a.active { opacity:1; color:var(--orange); }
.button { border:0; border-radius:9px; padding:12px 17px; font-size:12px; font-weight:800; transition:.2s transform,.2s opacity; }
.button:hover { transform:translateY(-1px); }
.button.dark { background:var(--ink); color:white; }.button.orange { background:var(--orange); color:white; }.button.light { background:var(--white); color:var(--ink); border:1px solid var(--line); }.button.full { width:100%; }
.hero { min-height:539px; border-radius:20px; overflow:hidden; display:grid; grid-template-columns:1.08fr .92fr; background:#d8d1c7; }
.hero-copy { padding:67px 0 60px 59px; }.eyebrow { color:var(--orange); font:500 10px 'DM Mono',monospace; letter-spacing:1.4px; text-transform:uppercase; }
h1 { font-size:clamp(47px,5.4vw,71px); letter-spacing:-4.6px; line-height:.97; margin:15px 0 20px; max-width:610px; }.accent { color:var(--orange); }
.lead { color:#514a42; max-width:460px; line-height:1.7; font-size:15px; margin:0 0 28px; }
.search-box { align-items:stretch; background:var(--white); border-radius:12px; box-shadow:var(--shadow); display:flex; padding:8px; width:min(570px,calc(100% - 20px)); }
.search-field { flex:1; min-width:0; padding:8px 17px; border-right:1px solid var(--line); }.search-field:last-of-type { border:0; }
.search-field label,.field label { color:#898075; display:block; font:500 9px 'DM Mono',monospace; letter-spacing:.8px; margin-bottom:5px; text-transform:uppercase; }.search-field span { font-size:12px; font-weight:800; white-space:nowrap; }
.search-go { align-self:stretch; border:0; border-radius:8px; color:white; background:var(--orange); font-size:22px; width:43px; }.microcopy { color:#796f62; font:500 10px 'DM Mono',monospace; letter-spacing:.5px; margin:18px 0 0; }
.visual { position:relative; overflow:hidden; background:linear-gradient(117deg,#cbb69f 0 43%,#ead9ca 43.2% 57%,#a65f41 57.2% 100%); }.visual:after { content:''; width:56%; height:53%; position:absolute; top:8%; right:12%; border:11px solid #302b26; box-shadow:inset 0 0 0 5px #eddfca; background:linear-gradient(133deg,#99c8ce 0 46%,#dff0ef 46.5% 66%,#d89268 66.5%); }
.visual .cross-v,.visual .cross-h { background:#302b26; position:absolute; z-index:1; }.cross-v{width:7px;height:53%;right:39%;top:8%;}.cross-h{height:7px;width:56%;right:12%;top:34%;}
.lamp { position:absolute; z-index:2; right:13%; top:13%; width:86px; height:61px; background:#e78a34; clip-path:polygon(19% 0,81% 0,100% 100%,0 100%); box-shadow:0 12px 32px #e5903c; }.lamp:after { content:''; background:#29231f; height:92px; left:41px; position:absolute; top:59px; width:3px; }
.table { position:absolute; z-index:1; height:31%; width:67%; bottom:7%; left:12%; background:linear-gradient(#a45d3f 0 10%,#744027 11% 76%,#512e21 77%); clip-path:polygon(13% 0,87% 0,100% 18%,94% 24%,84% 24%,80% 100%,70% 100%,70% 28%,30% 28%,30% 100%,20% 100%,16% 24%,6% 24%,0 18%); }.chair { background:#765145; border-radius:76px 76px 22px 22px; bottom:5%; box-shadow:inset -23px -11px 0 #593b33; height:137px; position:absolute; right:18%; width:148px; z-index:2; }
.feature-card { background:rgba(255,253,249,.96); border-radius:11px; bottom:28px; box-shadow:var(--shadow); left:24px; padding:14px 16px; position:absolute; width:205px; z-index:4; }.feature-card strong { display:block; font-size:12px; }.feature-card small { color:var(--muted); display:block; font-size:10px; margin-top:5px; }.feature-card b { color:var(--orange); display:block; font:500 10px 'DM Mono',monospace; margin-top:10px; }
.section { padding:66px 0; }.section-head { align-items:baseline; display:flex; justify-content:space-between; gap:15px; margin-bottom:21px; }h2 { font-size:26px; letter-spacing:-1.5px; margin:0; } .text-link { color:var(--orange); font-size:12px; font-weight:800; white-space:nowrap; }
.pills { display:flex; gap:8px; margin:0 0 25px; overflow:auto; padding-bottom:3px; }.pill { border:1px solid var(--line); background:transparent; border-radius:999px; color:#514b44; font-size:11px; font-weight:800; padding:9px 14px; white-space:nowrap; }.pill.active,.pill:hover { background:var(--ink); border-color:var(--ink); color:white; }
.cards { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }.location-card { background:var(--white); border-radius:12px; box-shadow:0 2px 0 rgba(20,18,15,.03); overflow:hidden; transition:.22s transform,.22s box-shadow; }.location-card:hover { box-shadow:var(--shadow); transform:translateY(-3px); }.photo { height:196px; overflow:hidden; position:relative; }.photo::before { border:7px solid rgba(255,251,242,.9); content:''; height:58%; left:17%; position:absolute; top:13%; width:34%; }.photo::after { background:rgba(29,25,21,.53); bottom:21%; box-shadow:0 -32px 0 rgba(29,25,21,.42); content:''; height:9px; left:20%; position:absolute; width:58%; }.photo.apartment { background:linear-gradient(138deg,#b6aa9e 0 49%,#5d7471 49%); }.photo.studio { background:linear-gradient(140deg,#e4d7c3 0 50%,#9f563f 50%); }.photo.warehouse { background:linear-gradient(130deg,#464744 0 43%,#bda16b 43% 60%,#252526 60%); }.photo.villa { background:linear-gradient(137deg,#d3bb8c 0 45%,#6d886e 45% 100%); }.photo.rooftop { background:linear-gradient(140deg,#6d9ebd 0 44%,#e8b978 44% 60%,#57423b 60%); }.photo.loft { background:linear-gradient(140deg,#58453f 0 46%,#d1a56a 46% 100%); }.fav { align-items:center; background:rgba(255,255,255,.88); border:0; border-radius:50%; color:#2f2924; display:flex; font-size:17px; height:31px; justify-content:center; position:absolute; right:10px; top:10px; width:31px; }.card-info { padding:14px 15px 16px; }.meta { color:#81786e; font-size:10px; font-weight:800; letter-spacing:.45px; text-transform:uppercase; }.name-price { align-items:start; display:flex; gap:8px; justify-content:space-between; margin-top:6px; }.name { font-size:13px; font-weight:800; line-height:1.35; }.price { color:var(--orange); font-size:11px; font-weight:800; white-space:nowrap; }.tags { color:#857d72; font-size:10px; margin-top:8px; }
.how { background:#e9e3d9; }.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:38px; }.step-no { color:var(--orange); font:500 11px 'DM Mono',monospace; }.step h3 { font-size:16px; letter-spacing:-.6px; margin:12px 0 8px; }.step p { color:#615a51; font-size:13px; line-height:1.65; margin:0; }.host-cta { background:var(--ink); border-radius:18px; color:#fffaf2; display:grid; grid-template-columns:1.1fr .9fr; margin:67px 0 0; overflow:hidden; }.host-copy { padding:48px 52px; }.host-copy h2 { font-size:35px; max-width:470px; }.host-copy p { color:#c8c1b7; line-height:1.6; max-width:465px; font-size:14px; }.host-copy .button { margin-top:12px; }.host-art { background:linear-gradient(139deg,#d98758 0 50%,#8c4a33 50%); min-height:270px; position:relative; }.host-art:before { content:''; position:absolute; inset:26px 27px auto auto; height:140px; width:65%; border:9px solid rgba(43,27,20,.75); background:linear-gradient(135deg,#d5dee0,#94b3b3 55%,#dfae71 56%); }.host-art:after { content:''; position:absolute; width:50%; height:28px; left:14%; bottom:28%; background:#563628; box-shadow:32px 44px 0 -10px #563628; }
.page-head { padding:41px 0 25px; }.page-head h1 { font-size:48px; margin:9px 0; }.page-head p { color:var(--muted); margin:0; }.explore-layout { display:grid; gap:26px; grid-template-columns:247px 1fr; padding-bottom:70px; }.filters { align-self:start; background:var(--white); border-radius:12px; padding:20px; }.filter-title { display:flex; justify-content:space-between; font-size:13px; font-weight:800; margin-bottom:20px; }.filter-group { border-top:1px solid var(--line); padding:16px 0; }.filter-group h3 { font-size:11px; margin:0 0 12px; }.check { align-items:center; color:#595249; display:flex; font-size:12px; gap:9px; margin:9px 0; }.check input { accent-color:var(--orange); }.results-top { align-items:center; display:flex; justify-content:space-between; margin:0 0 17px; }.results-top span { color:var(--muted); font-size:12px; }.sort { background:transparent; border:1px solid var(--line); border-radius:7px; font-size:11px; padding:8px; }.results { grid-template-columns:repeat(2,1fr); }.details { padding:26px 0 75px; }.breadcrumb { color:var(--muted); font-size:11px; margin:0 0 19px; }.detail-grid { display:grid; grid-template-columns:1.28fr .72fr; gap:27px; }.gallery { display:grid; gap:8px; grid-template-columns:1.4fr 1fr; height:425px; }.gallery-main,.gallery-small { border-radius:12px; overflow:hidden; position:relative; }.gallery-main { background:linear-gradient(138deg,#b6aa9e 0 49%,#5d7471 49%); }.gallery-main:after,.gallery-small:after { background:rgba(29,25,21,.4); bottom:23%; box-shadow:0 -58px 0 rgba(29,25,21,.36); content:''; height:14px; left:17%; position:absolute; width:65%; }.gallery-main:before { border:13px solid rgba(255,251,242,.88); content:''; height:54%; left:17%; position:absolute; top:10%; width:38%; }.gallery-aside { display:grid; gap:8px; grid-template-rows:1fr 1fr; }.gallery-small.one { background:linear-gradient(138deg,#dfd2be 0 45%,#92624c 45%); }.gallery-small.two { background:linear-gradient(135deg,#858b81 0 49%,#c2a572 49%); }.gallery-small:after { height:8px; box-shadow:0 -30px 0 rgba(29,25,21,.36); }.details-content { margin-top:28px; }.details-content h1 { font-size:35px; letter-spacing:-2.2px; margin:5px 0 8px; }.details-content p { color:#5d564d; font-size:14px; line-height:1.72; max-width:660px; }.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin:27px 0; }.fact { background:var(--white); padding:15px; }.fact b { display:block; font-size:12px; }.fact span { color:var(--muted); display:block; font-size:10px; margin-top:3px; }.booking { align-self:start; background:var(--white); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow); padding:21px; }.booking h3 { font-size:16px; margin:0 0 5px; }.booking .rate { color:var(--orange); font-size:14px; font-weight:800; }.booking .field { margin:19px 0; }.booking input,.booking select,.host-form input,.host-form select,.host-form textarea { background:#fffdf9; border:1px solid var(--line); border-radius:7px; padding:11px; width:100%; font-size:12px; }.booking-summary { border-top:1px solid var(--line); color:#635b51; display:grid; font-size:11px; gap:8px; margin:17px 0; padding-top:16px; }.summary-row { display:flex; justify-content:space-between; }.summary-total { color:var(--ink); font-size:13px; font-weight:800; }.notice { color:#837b70; font-size:10px; line-height:1.55; }.detail-section { border-top:1px solid var(--line); margin-top:26px; padding-top:22px; }.detail-section h3 { font-size:17px; margin:0 0 13px; }.amenities { display:flex; flex-wrap:wrap; gap:9px; }.amenity { background:#ece7df; border-radius:6px; color:#514b44; font-size:11px; padding:8px 10px; }
.host-page { padding:42px 0 76px; }.host-intro { background:#e5dace; border-radius:17px; margin-bottom:28px; padding:43px 50px; }.host-intro h1 { font-size:43px; margin:9px 0; }.host-intro p { color:#5b534a; max-width:620px; line-height:1.7; }.host-form { background:var(--white); border-radius:13px; max-width:790px; padding:29px; }.host-form h2 { font-size:22px; margin-bottom:22px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.host-form .field { margin-bottom:17px; }.host-form textarea { min-height:115px; resize:vertical; }.form-note { color:var(--muted); font-size:11px; line-height:1.6; }
.host-layout { align-items:start; display:grid; gap:25px; grid-template-columns:245px 1fr; }.host-side { background:#f0ece5; border-radius:12px; padding:19px; position:sticky; top:15px; }.host-side h3 { font-size:13px; margin:0 0 12px; }.host-side a { border-top:1px solid #ded7cd; color:#625a50; display:block; font-size:11px; padding:10px 0; }.host-side a:first-of-type { border-top:0; }.host-tip { border-top:1px solid #d9d1c5; color:#625b52; font-size:11px; line-height:1.6; margin-top:10px; padding-top:14px; }.host-tip b { color:var(--orange); display:block; font-size:10px; letter-spacing:.6px; margin-bottom:4px; }.listing-form { max-width:none; }.form-section { border-top:1px solid var(--line); margin:30px 0 0; padding:26px 0 0; scroll-margin-top:15px; }.form-section:first-of-type { border-top:0; margin-top:0; padding-top:0; }.form-section h2 { font-size:20px; margin:0 0 5px; }.section-sub { color:var(--muted); font-size:12px; line-height:1.6; margin:0 0 20px; }.helper { color:#81786e; font-size:10px; line-height:1.55; margin:6px 0 0; }.helper b { color:#5d554b; }.option-grid { display:grid; gap:9px; grid-template-columns:repeat(2,1fr); margin:9px 0 17px; }.option { align-items:flex-start; background:#fbf9f5; border:1px solid var(--line); border-radius:8px; display:flex; font-size:11px; gap:8px; line-height:1.45; padding:10px; }.option input { accent-color:var(--orange); margin:2px 0 0; width:auto; }.option small { color:var(--muted); display:block; font-size:9px; margin-top:2px; }.info-callout { background:#fff1e9; border-left:3px solid var(--orange); border-radius:0 8px 8px 0; color:#654339; font-size:11px; line-height:1.65; margin:18px 0; padding:12px 14px; }.power-panel { background:#f1eee7; border-radius:10px; margin:18px 0; padding:18px; }.power-panel h3 { font-size:13px; margin:0 0 5px; }.power-panel .form-grid { margin-top:16px; }.pricing-box { background:#1b1814; border-radius:11px; color:#fffaf2; margin:18px 0; padding:20px; }.pricing-box h3 { font-size:15px; margin:0 0 5px; }.pricing-box p { color:#c9c0b5; font-size:11px; line-height:1.55; margin:0 0 16px; }.pricing-box .field label { color:#c9c0b5; }.pricing-box input,.pricing-box select { background:#29241f; border-color:#51483e; color:#fffaf2; }.pricing-box .helper { color:#bfb5a8; }.photos-check { display:grid; gap:8px; grid-template-columns:repeat(3,1fr); }.photo-check { border:1px dashed #cfc5b8; border-radius:8px; color:#665e54; font-size:10px; min-height:79px; padding:11px; }.photo-check b { color:#332e29; display:block; font-size:11px; margin-bottom:4px; }.publish-bar { align-items:center; background:#e5dace; border-radius:10px; display:flex; gap:15px; justify-content:space-between; margin-top:28px; padding:18px; }.publish-bar p { color:#625b52; font-size:11px; line-height:1.5; margin:0; max-width:460px; }
.dashboard { padding:42px 0 75px; }.profile-bar { background:var(--ink); border-radius:14px; color:white; display:flex; justify-content:space-between; padding:25px 29px; }.profile-name { font-size:20px; font-weight:800; }.profile-bar p { color:#cfc7bc; font-size:12px; margin:4px 0 0; }.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px 0; }.stat { background:var(--white); border-radius:11px; padding:19px; }.stat b { display:block; font-size:24px; letter-spacing:-1px; }.stat span { color:var(--muted); font-size:11px; }.dashboard-list { background:var(--white); border-radius:11px; padding:21px; }.dashboard-list h2 { font-size:18px; margin-bottom:16px; }.booking-row { align-items:center; border-top:1px solid var(--line); display:grid; gap:15px; grid-template-columns:46px 1fr auto; padding:14px 0; }.booking-thumb { background:linear-gradient(130deg,#b6aa9e 0 49%,#5d7471 49%); border-radius:6px; height:44px; }.booking-row b { font-size:12px; }.booking-row span { color:var(--muted); display:block; font-size:10px; margin-top:3px; }.status { background:#e2eadf; border-radius:99px; color:#41603f; font-size:10px; font-weight:800; padding:6px 9px; }
.footer { background:#15120f; color:#fcf6ee; padding:42px 0; }.footer-grid { display:grid; grid-template-columns:1.2fr repeat(3,.6fr); gap:25px; }.footer p { color:#c5bcb0; font-size:12px; line-height:1.65; max-width:290px; }.footer h4 { font-size:11px; margin:3px 0 13px; }.footer a { color:#c5bcb0; display:block; font-size:11px; margin:8px 0; }.modal-bg { align-items:center; background:rgba(20,16,13,.58); display:flex; inset:0; justify-content:center; padding:20px; position:fixed; z-index:50; }.modal { background:var(--white); border-radius:14px; max-width:420px; padding:29px; width:100%; }.modal h2 { font-size:23px; }.modal p { color:var(--muted); font-size:13px; line-height:1.6; }.modal-actions { display:flex; gap:9px; justify-content:flex-end; margin-top:22px; }#toast { background:var(--ink); border-radius:9px; bottom:22px; color:white; font-size:12px; left:50%; opacity:0; padding:12px 16px; pointer-events:none; position:fixed; transform:translate(-50%,15px); transition:.22s; z-index:90; }#toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:780px) { .container{width:min(100% - 30px,1180px)}.topbar{font-size:9px}.nav{height:65px}.navlinks a{display:none}.hero{grid-template-columns:1fr}.hero-copy{padding:45px 23px 39px}.visual{min-height:315px}.feature-card{left:20px}.cards,.steps{grid-template-columns:1fr}.host-cta,.detail-grid,.host-layout{grid-template-columns:1fr}.host-side{display:none}.host-art{min-height:200px}.explore-layout{grid-template-columns:1fr}.filters{display:none}.results{grid-template-columns:1fr}.gallery{height:270px}.details-content h1,.page-head h1,.host-intro h1{font-size:34px}.facts{grid-template-columns:1fr 1fr}.form-grid,.stat-row,.option-grid,.photos-check{grid-template-columns:1fr}.host-intro{padding:30px 23px}.host-form{padding:21px}.footer-grid{grid-template-columns:1fr 1fr}.search-box{width:100%}.search-field{padding:8px 10px}.search-field span{font-size:10px}.publish-bar{align-items:flex-start;flex-direction:column} }