/* The Glover & Co. Grand Hotel on the open web: the layout kit (October 15, 2026, the Every Screen block).
   hotel.css is the frame every Concierge room shares (doors with plates, floors, the arched hero, Ask Erin).
   This sheet is the hotel's walls and sizing for any page, gated or public: the lobby wall, the brass rail
   and sage wainscot, the brass arch, the door grid, the room header, the avatar frame and a readable text
   column, each built once with phone sizing inside it. A page links this sheet, puts hw-page on <body> or
   <main>, and uses the pieces below. Rooms keep their own themes inside; the frame stays standard.
   How to use it: HOTEL-WEB-KIT.md at the repo root.

   THE STANDARD WIDTHS. Every page is checked at 390, 768, 1024 and 1440 wide before it goes to Erin.
   The sheet cuts at two points, and every piece uses the same two:
     phone    max-width: 560px   (390 and 430 wide phones)
     tablet   561px to 1023px    (768 wide)
     desktop  min-width: 1024px  (1024 and 1440 wide)
   Large, legible type is a standing principle. Body text never drops under 18px on a phone. */

:root{
  --hw-ink:#28322D; --hw-ink-soft:#3A4640; --hw-sage:#6E877C; --hw-sage-text:#4F6359;
  --hw-champ:#D2C288; --hw-champ-deep:#C4B072; --hw-brass:#8C7A3E; --hw-brass-light:#D8C07F; --hw-brass-mid:#C9AE6E;
  --hw-paper:#F2F5F3; --hw-on-wall:#EEF2EF; --hw-line:#DDE4E0; --hw-wall:#1E2622; --hw-white:#FFFFFF;
  --hw-f-display:'Marcellus',Georgia,serif; --hw-f-voice:'Fraunces',Georgia,serif; --hw-f-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hw-wrap:1200px; --hw-prose:680px;
}

/* ---------- the page: images never stretch, text never shrinks ----------
   The width and height attributes stay on every <img> so the browser reserves the space, and height:auto
   keeps a narrowed image in proportion. Without it the attribute's height wins over CSS aspect-ratio
   (measured October 15: a 760 x 987 hero drew at 300 x 987 on a phone). */
/* :where() keeps this at zero specificity: it beats the height attribute, and any piece that sizes its own image (hotel.css .arch-hero img, a round avatar) still wins */
:where(.hw-page) img{max-width:100%;height:auto}
.hw-page{-webkit-text-size-adjust:100%} /* the page's own sheet sets its type; the kit only keeps images in proportion */
.hw-type{font-family:var(--hw-f-body);font-size:19px;line-height:1.6}
.hw-wrap{max-width:var(--hw-wrap);margin:0 auto}
.hw-prose{max-width:var(--hw-prose);font-size:19px;line-height:1.6}
.hw-voice{font-family:var(--hw-f-voice);font-style:italic;font-weight:400}
.hw-eyebrow{margin:0;font-size:17px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--hw-sage-text)}
.hw-wall .hw-eyebrow{color:var(--hw-champ)}

/* ---------- the room header: eyebrow, title, a champagne rule ---------- */
.hw-room-head{text-align:center;max-width:760px;margin:0 auto 64px}
.hw-room-head .hw-eyebrow{margin-bottom:16px}
.hw-room-head h1,.hw-room-head h2{margin:0;font-family:var(--hw-f-display);font-weight:400;line-height:1.12;color:var(--hw-ink)}
.hw-room-head h1{font-size:clamp(40px,5.4vw,76px);line-height:1.08}
.hw-room-head h2{font-size:clamp(34px,4vw,56px)}
.hw-wall .hw-room-head h1,.hw-wall .hw-room-head h2{color:var(--hw-paper)}
.hw-rule{width:72px;height:2px;background:var(--hw-champ);margin:28px auto 0}

/* ---------- the lobby wall ----------
   Erin's painted wallpaper, dimmed a touch so paper text clears AA everywhere on it. Text set straight
   on the wall takes hw-on-wall for a soft ink halo. */
.hw-wall{
  background-color:var(--hw-wall);
  background-image:linear-gradient(rgba(20,26,23,.38),rgba(20,26,23,.38)),url('/assets/hotel/walls/lobby-wallpaper.webp');
  background-size:cover;background-position:center top;color:var(--hw-on-wall)
}
.hw-wall.hw-dim{background-image:linear-gradient(rgba(20,26,23,.4),rgba(20,26,23,.4)),url('/assets/hotel/walls/lobby-wallpaper.webp')}
.hw-on-wall{text-shadow:0 2px 10px rgba(0,0,0,.55)}
/* the painted wall with the sconces (the hub's Lobby and Directory): pinned to the viewport, anchored to the
   top so the sconces always show, and the content scrolls over it */
.hw-wall-fixed{position:relative;z-index:0}
.hw-wall-fixed::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--hw-ink) url('/assets/hotel/walls/lobby-wall.webp') center top / cover no-repeat}

/* ---------- the brass rail and the sage wainscot ---------- */
.hw-rail{height:14px;background:linear-gradient(var(--hw-brass-mid),var(--hw-brass));box-shadow:0 2px 6px rgba(0,0,0,.35)}
.hw-wainscot{height:150px;background-color:var(--hw-sage);background-image:url('/assets/hotel/walls/lobby-wainscot.webp');background-size:auto 100%;background-repeat:repeat-x;background-position:center top}
.hw-rail.hw-sm{height:10px;box-shadow:none}
.hw-wainscot.hw-sm{height:90px}

/* ---------- the brass arch: Concierge Erin in a gradient brass frame ----------
   The image keeps its own proportion (aspect-ratio with height:auto), cropped from the top so her face
   stays in the arch. --hw-arch-ratio sets the opening; the default is the hero's 760/900. */
.hw-arch{
  --hw-arch-ratio:760/900;
  background:linear-gradient(135deg,var(--hw-brass-light),var(--hw-brass));padding:10px;
  border-radius:999px 999px 10px 10px / 220px 220px 10px 10px;box-shadow:0 18px 40px rgba(0,0,0,.45)
}
.hw-arch img{display:block;width:100%;height:auto;aspect-ratio:var(--hw-arch-ratio);object-fit:cover;object-position:50% 20%;border-radius:999px 999px 4px 4px / 210px 210px 4px 4px}
.hw-arch.hw-sm{--hw-arch-ratio:760/880;padding:8px;border-radius:999px 999px 8px 8px / 160px 160px 8px 8px;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.hw-arch.hw-sm img{object-position:50% 18%;border-radius:999px 999px 4px 4px / 152px 152px 4px 4px}
.hw-arch-line{margin:18px 0 0;text-align:center;font-family:var(--hw-f-voice);font-style:italic;font-size:22px;color:var(--hw-champ)}

/* ---------- the door grid: painted doors in thin brass frames, a name and a line under each ----------
   Desktop: as many 240px columns as fit (three or four). Tablet: three. Phone: two. */
.hw-doors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:56px 40px}
.hw-doors>li,.hw-doors>.hw-room{display:flex;flex-direction:column;gap:14px;min-width:0}
.hw-door{background:linear-gradient(135deg,var(--hw-brass-light),var(--hw-brass));padding:6px;border-radius:10px;box-shadow:0 10px 24px rgba(40,50,45,.2)}
.hw-door img{display:block;width:100%;height:auto;aspect-ratio:640/794;object-fit:cover;border-radius:5px}
.hw-door-name{margin:0;font-family:var(--hw-f-display);font-weight:400;font-size:28px;line-height:1.2;color:var(--hw-ink)}
.hw-door-line{margin:0;font-size:19px;line-height:1.45;color:var(--hw-ink-soft)}
.hw-wall .hw-door-name{color:var(--hw-paper)}
.hw-wall .hw-door-line{color:var(--hw-on-wall)}
/* the miniature row (the homepage band): small frames, no names */
.hw-doors.hw-mini{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:18px}
.hw-doors.hw-mini .hw-door{padding:4px;border-radius:7px;box-shadow:0 8px 18px rgba(0,0,0,.4)}
.hw-doors.hw-mini .hw-door img{border-radius:4px}

/* ---------- the avatar frame: a round portrait in a brass ring ----------
   Erin's photo means the real Erin. Her AI avatar wears the illustration with the AI mark (hotel.css .ai-face),
   never her photo. --hw-avatar sets the size. */
.hw-avatar{--hw-avatar:56px;width:var(--hw-avatar);height:var(--hw-avatar);border-radius:50%;border:2px solid var(--hw-champ-deep);box-sizing:border-box;overflow:hidden;background:var(--hw-paper);flex-shrink:0;display:block}
.hw-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block;border-radius:50%}
.hw-avatar.hw-lg{--hw-avatar:72px}
.hw-avatar.hw-md{--hw-avatar:40px}
.hw-avatar.hw-brass{border-color:var(--hw-brass)}

/* ---------- the Company Banner: the North Star's banner under every room entrance ----------
   One line between two brass hairlines, in the hotel's ink; a word in Marcellus, a mission or vision
   in the Fraunces voice; the gentle prompt before a North Star exists. It sits below the entrance and
   never over a room's art. Hidden in print. Never a paper sign: no fill, no lettering, no doorway. */
.hw-banner{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:8px 24px;border-top:1px solid var(--hw-champ);border-bottom:1px solid var(--hw-champ);background:var(--hw-paper);color:var(--hw-ink);text-decoration:none;font-family:var(--hw-f-body);box-sizing:border-box}
.hw-banner:hover .hw-banner-text{text-decoration:underline;text-underline-offset:4px}
.hw-banner-star{color:var(--hw-champ-deep);font-size:14px;line-height:1;flex-shrink:0}
.hw-banner-text{text-align:center;overflow-wrap:anywhere}
.hw-banner-word .hw-banner-text{font-family:var(--hw-f-display);font-size:24px;line-height:1.2;letter-spacing:.06em}
.hw-banner-mission .hw-banner-text,.hw-banner-vision .hw-banner-text{font-family:var(--hw-f-voice);font-style:italic;font-size:19px;line-height:1.35}
.hw-banner-prompt .hw-banner-text{font-size:16px;line-height:1.35;color:var(--hw-ink-soft)}
.hw-banner-go{color:var(--hw-sage-text);font-size:20px;line-height:1;flex-shrink:0}
@media print{.hw-banner{display:none!important}}

/* ---------- tablet ---------- */
@media (min-width:561px) and (max-width:1023px){
  .hw-doors{grid-template-columns:repeat(3,1fr);gap:44px 24px}
}
@media (max-width:820px){
  .hw-rail{height:10px}
  .hw-wainscot{height:110px}
  .hw-room-head{margin-bottom:44px}
}
/* ---------- phone ---------- */
@media (max-width:560px){
  .hw-prose{font-size:18px}
  .hw-eyebrow{font-size:15px;letter-spacing:.14em}
  .hw-arch{width:66vw;max-width:300px;margin-left:auto;margin-right:auto}
  .hw-doors{grid-template-columns:repeat(2,1fr);gap:36px 16px}
  .hw-doors>li,.hw-doors>.hw-room{gap:10px}
  .hw-door-name{font-size:24px}
  .hw-door-line{font-size:18px}
  .hw-doors.hw-mini{grid-template-columns:repeat(4,1fr);gap:12px}
  .hw-wainscot.hw-sm{height:70px}
  .hw-banner{padding:8px 16px;gap:10px}
  .hw-banner-word .hw-banner-text{font-size:22px}
  .hw-banner-mission .hw-banner-text,.hw-banner-vision .hw-banner-text{font-size:18px}
  .hw-banner-prompt .hw-banner-text{font-size:16px}
  /* under a room entrance the banner is one line on a phone, so it never pushes the room's first action below the first screen; the tap opens the whole banner in North Star */
  .hw-banner-slim{min-height:44px;padding:6px 16px}
  .hw-banner-slim .hw-banner-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}