/* Hotel Manorama Inn — public site.
   All colour, type, spacing, radius, elevation and motion values come from
   ds/styles.css tokens. No local palette, no local easing. */

/* Base.css resets links to a brass underline; that is right for editorial prose
   only, so structural links opt out. */
a.nl,a.brand,.btn,.fab,.card a,footer a,.amen a{border-bottom:0}
footer a:hover,.amen a:hover{border-bottom:0}
html{scroll-behavior:smooth}
.skip{position:absolute;left:var(--space-4);top:-100px;z-index:100;background:var(--surface-card);color:var(--text-display);font:var(--type-label);padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);border-bottom:0;transition:top var(--dur-fast) var(--ease-standard)}
.skip:focus{top:var(--space-4)}
h1,h2,h3{color:var(--text-display);letter-spacing:var(--tracking-display);text-wrap:balance}
h1{font:var(--type-display-1)}
h2{font:var(--type-display-2)}
h3{font:var(--type-title-2)}
.disp{font-family:var(--font-display)}
p{text-wrap:pretty}
.wrap{max-width:var(--max-page);margin:0 auto;padding:0 var(--gutter-lg)}
.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent)}
.eyebrow::after{content:"";display:block;width:40px;height:1px;background:var(--accent);margin-top:var(--space-3)}
.lede{font:var(--type-serif-lead);color:var(--text-body);max-width:var(--max-editorial)}
.muted{color:var(--text-muted)}
.rule{height:1px;background:var(--border-hairline);border:0;margin:0}

/* ---- header ---- */
.nav{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;gap:var(--space-7);padding:var(--space-5) var(--gutter-lg);transition:background var(--dur-slow) var(--ease-standard),padding var(--dur-slow) var(--ease-standard)}
.nav.solid{background:var(--surface-glass);backdrop-filter:var(--blur-glass);border-bottom:1px solid var(--border-hairline);padding:var(--space-3) var(--gutter-lg)}
.brand{display:flex;flex-direction:column;line-height:1;margin-right:auto}
.brand b{font:600 13px/1 var(--font-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--text-display)}
.brand span{font:400 12px/1 var(--font-display);color:var(--text-accent);margin-top:6px}
.nav.over .brand b{color:var(--text-on-dark)}
.nav.over .brand span{color:var(--brass-2)}
.nlinks{display:flex;gap:var(--space-6);align-items:center}
.nav a.nl{position:relative;font:var(--type-label);color:var(--text-body);padding-bottom:3px}
.nav a.nl::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;background:var(--accent);transition:left var(--dur-base) var(--ease-standard),right var(--dur-base) var(--ease-standard)}
.nav a.nl:hover{color:var(--text-display)}
.nav a.nl:hover::after{left:0;right:0}
.nav.over a.nl{color:var(--text-on-dark-muted)}
.nav.over a.nl:hover{color:var(--text-on-dark)}

/* ---- collapsed-header control + menu sheet (DS Sheet pattern) ---- */
.burger{display:none;width:var(--tap-min);height:var(--tap-min);align-items:center;justify-content:center;border:1px solid var(--border-soft);border-radius:var(--radius-pill);background:none;color:var(--text-display);cursor:pointer;flex:none;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
.burger svg{width:22px;height:22px}
.burger:active{transform:scale(var(--press-scale))}
.nav.over .burger{border-color:var(--border-on-dark);color:var(--text-on-dark)}
.sh{position:fixed;inset:0;z-index:80;display:grid;align-items:end;background:var(--surface-scrim)}
.sh[hidden]{display:none}
.sh-panel{background:var(--surface-card);border-radius:var(--radius-xl) var(--radius-xl) 0 0;box-shadow:var(--shadow-sheet);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.sh:not([hidden]) .sh-panel{animation:shup var(--dur-slow) var(--ease-entrance)}
@keyframes shup{from{transform:translateY(100%)}to{transform:none}}
.sh-head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-5) var(--space-4);border-bottom:1px solid var(--border-hairline)}
.sh-head span{font:var(--type-title-2);color:var(--text-display)}
.sh-x{width:40px;height:40px;border:0;background:none;font:300 22px/1 var(--font-ui);color:var(--text-muted);cursor:pointer;border-radius:var(--radius-pill)}
.sh-body{display:grid;padding:var(--space-2) var(--space-5)}
.sh-body a{display:flex;align-items:center;min-height:var(--tap-min);padding:var(--space-2) 0;font:var(--type-title-3);color:var(--text-body);border-bottom:1px solid var(--border-hairline)}
.sh-body a:last-child{border-bottom:0}
.sh-body a[aria-current]{color:var(--text-accent)}
.sh-foot{display:grid;gap:var(--space-3);padding:var(--space-4) var(--space-5) var(--space-6);border-top:1px solid var(--border-hairline)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--tap-min);padding:0 var(--space-7);border-radius:var(--radius-pill);font:var(--type-label);border:1px solid transparent;cursor:pointer;transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.btn:active{transform:scale(var(--press-scale))}
.btn-gold{background:var(--accent);color:var(--accent-on)}
.btn-gold:hover{background:var(--accent-hover);color:var(--accent-on)}
.btn-ghost{border-color:var(--border-on-dark);color:var(--text-on-dark)}
.btn-ghost:hover{border-color:var(--text-on-dark);color:var(--text-on-dark)}
.btn-dark{border-color:var(--border-strong);color:var(--text-display)}
.btn-dark:hover{background:var(--ink-1);border-color:var(--ink-1);color:var(--text-on-dark)}
.hero-cta .btn:nth-child(-n+2){text-transform:uppercase;letter-spacing:var(--tracking-eyebrow)}

/* ---- hero ---- */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;align-items:flex-end}
.hero-media{position:absolute;inset:-6% 0;will-change:transform}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero::after{content:"";position:absolute;inset:0;background-image:var(--scrim-bottom);background-color:var(--surface-scrim)}
.hero-in{position:relative;z-index:2;width:100%;padding-bottom:var(--space-10)}
.hero h1{color:var(--text-on-dark);animation:rise var(--dur-cinema) var(--ease-editorial) both}
.hero .place{color:var(--brass-1);font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;margin-bottom:var(--space-6)}
.hero p{font:var(--type-body);color:var(--text-on-dark);max-width:52ch;margin-top:var(--space-5)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--space-7);margin-top:var(--space-9);padding-top:var(--space-6);border-top:1px solid var(--border-on-dark)}
.hero-meta div{font:var(--type-caption);color:var(--text-on-dark-muted)}
.hero-meta b{display:block;font:var(--type-display-3);color:var(--text-on-dark);margin-bottom:2px}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---- inner page header ---- */
.phead{padding:var(--space-13) 0 var(--space-9);background:var(--surface-sunk)}
.phead h1{font:var(--type-display-2)}
.phead .lede{margin-top:var(--space-4)}

/* ---- sections ---- */
section{padding:var(--section-y) 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-11);align-items:center}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-7)}
.card{background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-card);overflow:hidden;transition:transform var(--dur-slow) var(--ease-editorial),box-shadow var(--dur-slow) var(--ease-editorial)}
.card:hover{transform:translateY(var(--lift-hover));box-shadow:var(--shadow-soft)}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--surface-inset)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-cinema) var(--ease-editorial)}
.card:hover .ph img{transform:scale(var(--zoom-image))}
.card .body{padding:var(--space-8)}
.card .body h3{font:var(--type-display-3)}
.card .body p{font:var(--type-body-sm);color:var(--text-muted);margin-top:var(--space-2)}
.tag{display:inline-block;font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent);border:1px solid var(--border-brass);border-radius:var(--radius-pill);padding:6px 12px;margin-top:var(--space-5)}
.figure{border-radius:var(--radius-card);overflow:hidden;background:var(--surface-inset)}
.figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cap{font:var(--type-caption);color:var(--text-muted);margin-top:var(--space-3)}

/* ---- rate line ---- */
.rate{font:var(--type-display-3);color:var(--text-display);margin-top:var(--space-3);display:flex;align-items:baseline;gap:var(--space-2)}
.rate span{font:var(--type-label);color:var(--text-muted)}
.card{color:inherit}
.card:hover h3{color:var(--text-accent)}

/* ---- amenity / detail rows ---- */
.amen{display:grid;grid-template-columns:repeat(4,1fr);gap:0 var(--space-8);margin-top:var(--space-9);border-top:1px solid var(--border-hairline)}
.amen div{padding:var(--space-4) 0;border-bottom:1px solid var(--border-hairline);font:var(--type-body-sm);color:var(--text-body);display:flex;align-items:center;gap:var(--space-3)}
.amen i{width:5px;height:5px;border-radius:var(--radius-pill);background:var(--accent);flex:none}

/* ---- dark band ---- */
.dark{background:var(--surface-dark);color:var(--text-on-dark-muted)}
.dark h2,.dark h3{color:var(--text-on-dark)}
.dark .eyebrow{color:var(--brass-3)}
.dark .eyebrow::after{background:var(--brass-3)}
.dark .lede{color:var(--text-on-dark-muted)}
.dark .rule{background:var(--border-on-dark)}
.dark .amen{border-color:var(--border-on-dark)}
.dark .amen div{border-color:var(--border-on-dark);color:var(--text-on-dark-muted)}

/* ---- full-bleed editorial ---- */
.bleed{position:relative;height:min(78vh,720px);overflow:hidden}
.bleed img{width:100%;height:100%;object-fit:cover}
.bleed .ov{position:absolute;inset:0;display:flex;align-items:center;background:var(--scrim-full)}
.bleed h2{color:var(--text-on-dark);max-width:16ch}
.bleed p{font:var(--type-body);color:var(--text-on-dark-muted);max-width:44ch;margin-top:var(--space-4)}

/* ---- enquiry form ---- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field.full{grid-column:1/-1}
label{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
input,select,textarea{font:var(--type-body-sm);color:var(--text-display);background:var(--surface-card);border:1px solid var(--border-soft);border-radius:var(--radius-field);padding:var(--space-4);outline:none;min-height:var(--tap-min);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
textarea{resize:vertical;min-height:104px}

/* ---- footer ---- */
footer{background:var(--surface-dark);color:var(--text-on-dark-muted);padding:var(--space-11) 0 var(--space-8);font:var(--type-body-sm)}
footer h3{color:var(--text-on-dark);font:var(--type-title-3);margin-bottom:var(--space-4)}
footer a{color:var(--text-on-dark-muted)}
footer a:hover{color:var(--brass-3)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-9)}
.fbot{display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;margin-top:var(--space-10);padding-top:var(--space-6);border-top:1px solid var(--border-on-dark);font:var(--type-caption);color:var(--text-faint)}

/* ---- footer contact row ---- */
.social{display:flex;gap:var(--space-3);margin-top:var(--space-6)}
.social a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--border-on-dark);border-radius:var(--radius-pill);color:var(--text-on-dark-muted);transition:border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.social a:hover{border-color:var(--brass-3);color:var(--brass-3)}
.social svg{width:20px;height:20px;fill:currentColor}
.social svg[stroke]{fill:none}

/* ---- embedded map ---- */
.mapwrap{margin-top:var(--space-7);border:1px solid var(--border-soft);border-radius:var(--radius-card);overflow:hidden;background:var(--surface-inset)}
.mapwrap iframe{display:block;width:100%;height:420px;border:0;filter:saturate(.82)}
@media(max-width:640px){.mapwrap iframe{height:300px}}

/* ---- floating call / WhatsApp pair ---- */
.floats{position:fixed;right:var(--space-6);bottom:var(--space-6);z-index:70;display:flex;flex-direction:column;gap:var(--space-3)}
.fab{width:52px;height:52px;border-radius:var(--radius-pill);display:grid;place-items:center;background:var(--surface-dark-raised);color:var(--text-on-dark);border:1px solid var(--ivory-4);box-shadow:var(--shadow-raised);transition:transform var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard)}
.fab:hover{transform:translateY(var(--lift-hover));color:var(--text-on-dark)}
.fab.wa{background:var(--emerald-4)}
.fab.wa:hover{background:var(--emerald-3)}
.fab svg{width:22px;height:22px;fill:currentColor}

/* ---- scroll reveal ---- */
.rv{opacity:0;transform:translateY(20px);transition:opacity var(--dur-reveal) var(--ease-editorial),transform var(--dur-reveal) var(--ease-editorial)}
.rv.in{opacity:1;transform:none}

@media(max-width:980px){.figure img{aspect-ratio:4/3}.cards{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr;gap:var(--space-8)}.amen{grid-template-columns:1fr 1fr;gap:0 var(--space-7)}.fgrid{grid-template-columns:1fr 1fr}section{padding:var(--section-y-tight) 0}}
@media(max-width:760px){.nlinks{display:none}.burger{display:flex}}
@media(max-width:640px){.wrap{padding:0 var(--gutter)}.cards{grid-template-columns:1fr}.form{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr;gap:var(--space-8)}.amen{grid-template-columns:1fr}.phead{padding:var(--space-11) 0 var(--space-8)}.floats{right:var(--space-4);bottom:var(--space-4)}.navcta{display:none}}