/* Amey Hostel. Forest green + bone, Onest, one accent.
   Radius rule: surfaces (cards, tiles, photos) 20px, controls (buttons, inputs) 12px, chips full pill. */

@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/onest-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/onest-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:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/onest-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}

:root{
  --bg:#f3f4ef; --panel:#fdfdfb; --panel-2:#e9ece4; --line:#dde2d8; --text:#1d2521; --muted:#5c6861;
  --accent:#2e6b5e; --accent-d:#24564b; --accent-soft:#dbe8e2; --cream:#f1e3c8; --on-accent:#fdfdfb;
  --ph:#dfe3dc; --ph-ink:#8a948d; --busy:#ecd3cc; --busy-ink:#8a4b40; --bad:#b3402e;
  --r-surface:20px; --r-control:12px;
  --shadow:0 1px 2px rgba(29,52,44,.05),0 10px 30px rgba(29,52,44,.07);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#121815; --panel:#18201c; --panel-2:#1f2924; --line:#2b3731; --text:#e8ede9; --muted:#9aa89f;
    --accent:#5fa892; --accent-d:#4c9480; --accent-soft:#1f3a32; --cream:#e9d9bb; --on-accent:#0f1512;
    --ph:#232d28; --ph-ink:#6f7d75; --busy:#4a2d28; --busy-ink:#f0b8ab; --bad:#ef8a76;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:16px/1.6 "Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
h1,h2,h3{letter-spacing:-.02em;line-height:1.15}
h1{font-size:clamp(2rem,3.6vw,3.1rem);font-weight:750;margin:0 0 .45em}
h2{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:700;margin:1.6em 0 .6em}
h3{margin:.6em 0 .3em;font-size:1.12rem;font-weight:650}
p{max-width:65ch}
[hidden]{display:none!important}
.ic{width:1.25em;height:1.25em;flex:none;vertical-align:-.2em}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
.block{padding-top:36px;padding-bottom:36px}
.meta{color:var(--muted);font-size:.93rem}

/* header */
.top{background:var(--accent);position:sticky;top:0;z-index:20;box-shadow:0 2px 14px rgba(20,40,35,.18)}
@media (prefers-color-scheme:dark){.top{background:#1d3a32}}
.top-in{display:flex;align-items:center;gap:14px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;white-space:nowrap}
.brand img{width:40px;height:40px;border-radius:9px;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.brand .bw{display:flex;flex-direction:column;line-height:1;font-size:1.45rem;font-weight:800;letter-spacing:-.01em}
.brand .bw small{display:block;margin:4px 0 0 1px;font-size:.5rem;letter-spacing:.32em;font-weight:600;color:#f1e3c8}
.nav{display:flex;gap:14px;flex:1;flex-wrap:nowrap;justify-content:center}
.nav a{text-decoration:none;color:rgba(255,255,255,.86);font-size:.9rem;white-space:nowrap;padding:6px 2px;border-bottom:2px solid transparent;transition:color .2s}
.nav a:hover{color:#fff}
.nav a[aria-current]{color:#fff;font-weight:600;border-bottom-color:#f1e3c8}
.nav a.muted{color:rgba(241,227,200,.8)}
.top-r{display:flex;align-items:center;gap:12px}
.top .btn.sm{background:#f1e3c8;color:#24564b}
.top .btn.sm:hover{background:#fff}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:8px;font-size:1.1rem;padding:4px 10px;cursor:pointer}
.lang-dd{position:relative;background:none;border:none;padding:0;margin:0}
.lang-dd summary{list-style:none;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:7px 10px;font-size:.88rem;background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
.lang-dd summary:hover{background:rgba(255,255,255,.18)}
.lang-dd summary::-webkit-details-marker{display:none}
.lang-dd .chev{font-size:.75rem;transition:transform .15s}
.lang-dd[open] .chev{transform:rotate(180deg)}
.lang-dd ul{list-style:none;margin:0;padding:6px;position:absolute;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);min-width:170px;z-index:10}
.lang-dd li a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--text);font-size:.9rem}
.lang-dd li a:hover{background:var(--panel-2)}
.lang-dd li a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.flag{display:inline-block;width:20px;height:14px;border-radius:3px;overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.flag svg{display:block;width:100%;height:100%}

/* controls */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--on-accent);border:none;border-radius:var(--r-control);padding:13px 22px;font:inherit;font-weight:650;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .2s,transform .15s var(--ease)}
.btn:hover{background:var(--accent-d)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.sm{padding:8px 14px;font-size:.9rem}
.btn.ghost{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.btn.ghost:hover{background:var(--accent-soft)}
.btn.cream{background:var(--cream);color:#24564b}
.btn.cream:hover{background:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none}
.link .ic{transition:transform .25s var(--ease)}
.link:hover .ic{transform:translateX(4px)}
label{display:flex;flex-direction:column;font-size:.85rem;color:var(--muted);gap:6px;font-weight:500}
input,select,textarea{font:inherit;color:var(--text);border:1px solid var(--line);border-radius:var(--r-control);padding:11px 13px;background:var(--panel);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);outline-offset:1px;border-color:var(--accent)}

/* photo placeholders (owner asked for plain fields until real photos exist) */
.ph{position:relative;background:var(--ph);border-radius:var(--r-surface);display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;aspect-ratio:4/3;color:var(--ph-ink);font-size:.85rem;width:100%;overflow:hidden;
  background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(29,52,44,.035) 14px 15px)}
.ph .ic{width:28px;height:28px;opacity:.7}
.ph.tall{aspect-ratio:4/5}
.gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:12px;margin:18px 0}
.gallery .ph{aspect-ratio:auto;min-height:160px}
.gallery .ph.tall{grid-row:1/3;min-height:340px}

/* hero */
.hero{padding:44px 0 28px;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.lead{font-size:1.18rem;color:var(--muted);margin:0 0 6px}
.hero-media{position:relative;min-height:470px}
.hero-media .ph-a{position:absolute;right:0;top:0;width:78%;height:88%;aspect-ratio:auto}
.hero-media .ph-b{position:absolute;left:0;bottom:0;width:46%;height:48%;aspect-ratio:auto;border:6px solid var(--bg);background-color:var(--panel-2)}
.search{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:12px;align-items:end;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-surface);padding:16px;margin-top:22px;box-shadow:var(--shadow)}
.hero .search{grid-template-columns:1fr 1fr 110px}
.hero .search .btn{grid-column:1/-1;justify-content:center}

/* features: bento, 8 items in a 4x3 grid */
.bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(120px,auto);gap:14px}
.bento li{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-surface);padding:20px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;font-weight:600;font-size:1rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.bento li:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.bento li .ic{width:30px;height:30px;color:var(--accent)}
.bento .b1{grid-column:span 2;grid-row:span 2;background:var(--accent);border-color:transparent;color:var(--on-accent);font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.15;padding:28px}
.bento .b1 .ic{width:56px;height:56px;color:var(--cream)}
.bento .b4{grid-column:span 2;background:var(--cream);border-color:transparent;color:#24564b}
.bento .b4 .ic{color:#24564b}
.bento .b8{background:var(--accent-soft);border-color:transparent}
@media (prefers-color-scheme:dark){.bento .b4{color:#1d2521}}

/* rooms: sticky intro + stacked rows */
.rooms-split{display:grid;grid-template-columns:.8fr 1.4fr;gap:48px;align-items:start}
.rooms-split .intro{position:sticky;top:96px}
.rooms-split .intro h2{margin-top:0}
.price-big{font-size:2.6rem;font-weight:750;letter-spacing:-.03em;color:var(--accent);line-height:1;margin:22px 0 4px}
.room-rows{display:grid;gap:16px}
.room-row{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-surface);padding:12px;text-decoration:none;color:inherit;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.room-row:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent-soft)}
.room-row .ph{aspect-ratio:4/3;border-radius:14px}
.room-row h3{margin:0 0 4px;font-size:1.25rem}
.room-row p{margin:6px 0 10px;color:var(--muted);font-size:.95rem}

/* entire hostel band */
.band{background:var(--accent);color:var(--on-accent);margin:40px 0;padding:56px 0}
@media (prefers-color-scheme:dark){.band{background:#1d3a32;color:var(--text)}}
.band-in{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.band h2{margin-top:0;color:inherit}
.band p{opacity:.9}
.band .meta{color:inherit;opacity:.8}
.band .ph{background-color:rgba(255,255,255,.1);color:rgba(255,255,255,.7);aspect-ratio:16/10;background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.05) 14px 15px)}

/* amenities: scroll-snap strip */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin}
.strip > div{scroll-snap-align:start}
.strip .ph{aspect-ratio:5/4}
.strip h3{margin:12px 0 2px}
.strip p{margin:0;color:var(--muted);font-size:.93rem}

/* location + boxes */
.loc{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:stretch}
.loc .addr{display:flex;align-items:center;gap:8px;font-weight:600}
.loc .addr .ic{color:var(--accent)}
.boxcard{background:var(--panel-2);border-radius:var(--r-surface);padding:26px;display:flex;flex-direction:column;gap:12px;justify-content:space-between}
.boxcard .ic{width:34px;height:34px;color:var(--accent)}
.boxcard p{margin:0}

/* older blocks used on inner pages */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0;list-style:none}
.feats li{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-weight:600;font-size:.92rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-surface);overflow:hidden}
.card .ph{border-radius:0}
.card-b{padding:16px 18px 20px}
.amen .ph{aspect-ratio:16/10}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;margin:12px 0;background:var(--panel);border-radius:14px;overflow:hidden}
td,th{border-bottom:1px solid var(--line);padding:11px 14px;text-align:left}
tr:last-child td{border-bottom:none}
.map{width:100%;height:400px;border:1px solid var(--line);border-radius:var(--r-surface)}
details{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:10px 0}
summary{cursor:pointer;font-weight:600}
.plain{padding-left:18px}

.form{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.form fieldset{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.form fieldset:disabled{opacity:.45}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chk{flex-direction:row;align-items:center;gap:8px;color:var(--text)}
.chk input{width:auto}
.msg{min-height:1.2em;font-weight:600}
.msg.ok{color:var(--accent)}
.msg.err{color:var(--bad)}
.note{color:var(--muted);font-size:.92rem;background:var(--panel-2);border-radius:14px;padding:12px 16px}

.quote{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-surface);padding:16px 18px}
.quote:empty{display:none}
.quote .ln{display:flex;justify-content:space-between;font-size:.93rem;padding:2px 0}
.quote .tot{border-top:1px solid var(--line);margin-top:6px;padding-top:8px;font-weight:800;font-size:1.1rem}
.quote .warn{color:var(--bad);font-weight:600}

.cal{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:10px 0}
.cal .mo{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-surface);padding:14px}
.cal .mh{font-weight:700;margin-bottom:6px;text-transform:capitalize}
.cal .dg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;font-size:.85rem}
.cal .dw{color:var(--muted);font-size:.72rem}
.cal .d{padding:5px 0;border-radius:6px;background:var(--panel-2)}
.cal .d.busy{background:var(--busy);color:var(--busy-ink);text-decoration:line-through}
.cal .d.past{opacity:.35}
.legend{font-size:.85rem;color:var(--muted)}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--panel-2);border:1px solid var(--line);vertical-align:middle;margin:0 4px 0 12px}
.sw.busy{background:var(--busy)}

.status{font-size:1.05rem}
.s-confirmed strong,.s-paid strong{color:var(--accent)}
.s-cancelled strong,.s-expired strong{color:var(--bad)}
.checkin{background:var(--panel);border:1px solid var(--accent);border-radius:var(--r-surface);padding:18px}

.legal h2{font-size:1.15rem;margin:1.8em 0 .5em}
.legal p{margin:.5em 0}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.pending{background:#f7ecd4;color:#7a5a1c;padding:1px 8px;border-radius:999px;font-size:.85rem}

.foot{border-top:1px solid var(--line);margin-top:48px;padding:30px 0;color:var(--muted);font-size:.9rem;background:var(--panel)}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* scroll reveal: only hides content when JS is running (html.js) */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
  .js .reveal.in{opacity:1;transform:none}
}

@media (min-width:1061px) and (max-width:1200px){.nav{gap:10px}.nav a{font-size:.86rem}}
@media (max-width:1060px){
  .burger{display:block}
  .top-in{position:relative;justify-content:space-between}
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--accent-d);flex-direction:column;padding:12px 20px;gap:12px;box-shadow:0 8px 20px rgba(20,40,35,.2)}
  .nav.open{display:flex}
}
@media (max-width:900px){
  .hero-in,.grid,.rooms-split,.band-in,.loc{grid-template-columns:1fr}
  .hero-in{gap:28px}
  .hero-media{min-height:340px}
  .rooms-split .intro{position:static}
  .bento{grid-template-columns:1fr 1fr}
  .bento .b1,.bento .b4{grid-column:span 2}
  .bento .b1{grid-row:span 1}
  .feats{grid-template-columns:1fr 1fr}
  .search{grid-template-columns:1fr 1fr}
  .search .btn{grid-column:1/-1;justify-content:center}
}
@media (max-width:600px){
  .room-row{grid-template-columns:1fr}
  .hero-media{min-height:280px}
  .gallery{grid-template-columns:1fr}
  .gallery .ph.tall{grid-row:auto;min-height:240px}
}
@media (max-width:520px){
  .row2,.search,.hero .search{grid-template-columns:1fr}
  .top-r .btn.sm{display:none}
  .bento{grid-template-columns:1fr}
  .bento .b1,.bento .b4{grid-column:auto}
}