/* ═══════════════════════════════════════════════════════════════════
   AFTERHOURS — concept site for TKO Solutions.

   Two materials, alternating. The dark sections are the room: charcoal,
   candlelight, the burgundy of the booths. The pale sections are printed
   matter, the menu card and the reservation slip, and they are pale because
   a price list has to be read, not admired.

   One accent: brass. Burgundy is a surface, never a second accent, or the
   page ends up with two things shouting. Every corner is square. A Didone
   and a steakhouse both want a crisp edge.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* the room */
  --char:      #16120E;
  --char-2:    #211A14;
  --char-3:    #2E251C;
  --rule-dark: rgba(232, 220, 201, .16);

  /* printed matter */
  --ivory:     #F3EADB;
  --ivory-2:   #EBE0CD;
  --rule-pale: rgba(26, 20, 16, .16);

  /* the booths, used as a surface */
  --burgundy:  #6B1220;
  --burgundy-2:#511019;

  /* the one accent */
  --brass:     #D2A05C;
  --brass-ink: #8A5E1C;

  /* text */
  --warm:      #EFE6D6;
  --warm-2:    #BAAB95;
  --ink:       #1A1410;
  --ink-2:     #5A4B3D;

  --shell: 1240px;
  --gut: clamp(20px, 5vw, 76px);
  --head-h: 68px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 720px) { :root { --head-h: 60px; } }

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchors land below the fixed bar rather than under it. */
  scroll-padding-top: calc(var(--head-h) + 14px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--char);
  color: var(--warm);
  font-family: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
/* The browser default for b is 700, which would push the page to four weights. */
b, strong { font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

::selection { background: var(--brass); color: var(--char); }

/* ── type ─────────────────────────────────────────────────────────── */
/* Bodoni only ever runs large. Its hairlines vanish under about 22px, so
   every piece of small text is Libre Franklin. */
.d {
  font-family: "Bodoni Moda", "Didot", "Times New Roman", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.005em;
}
.d-hero  { font-size: clamp(3.1rem, 12vw, 9rem); line-height: .92; letter-spacing: .005em; }
.d-xl    { font-size: clamp(2.2rem, 5.6vw, 4.2rem); line-height: 1.02; }
.d-lg    { font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.08; }
.d-md    { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.16; }

.lede { font-size: clamp(1.1rem, 1.55vw, 1.32rem); line-height: 1.62; max-width: 46ch; }
.body-m { font-size: 1rem; line-height: 1.68; max-width: 62ch; }
.small { font-size: .875rem; line-height: 1.6; }
.tiny  { font-size: .8125rem; line-height: 1.55; }

/* The one repeated micro-label. Used three times on the page, no more. */
.eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
}
.paper .eyebrow { color: var(--brass-ink); }

.num { font-variant-numeric: tabular-nums; }

/* ── shell ────────────────────────────────────────────────────────── */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.shell-wide { width: 100%; max-width: 1560px; margin-inline: auto; padding-inline: var(--gut); }

.band { padding-block: clamp(64px, 9vw, 132px); }
.band-tight { padding-block: clamp(48px, 6vw, 88px); }

.paper { background: var(--ivory); color: var(--ink); }
.paper .lede, .paper .body-m { color: var(--ink-2); }

/* ── buttons ──────────────────────────────────────────────────────── */
/* Square, and big enough to hit. 48px minimum on every control. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 13px 26px;
  font-family: inherit; font-size: .9375rem; font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent; background: none; cursor: pointer;
  text-decoration: none; text-align: center;
  transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
  touch-action: manipulation;
}
.btn-brass { background: var(--brass); color: #211603; border-color: var(--brass); }
.btn-brass:hover { background: #E4B472; border-color: #E4B472; }
.btn-line { border-color: var(--rule-dark); color: var(--warm); }
.btn-line:hover { border-color: var(--brass); color: var(--brass); }
.paper .btn-line { border-color: var(--rule-pale); color: var(--ink); }
.paper .btn-line:hover { border-color: var(--brass-ink); color: var(--brass-ink); }
.btn-ink { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn-ink:hover { background: #33291F; border-color: #33291F; }
.btn[disabled] { opacity: .42; cursor: not-allowed; }

.link-brass {
  color: var(--brass); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(210, 160, 92, .45); padding-bottom: 1px;
  transition: border-color .2s var(--ease);
}
.link-brass:hover { border-bottom-color: var(--brass); }
.paper .link-brass { color: var(--brass-ink); border-bottom-color: rgba(138, 94, 28, .45); }
.paper .link-brass:hover { border-bottom-color: var(--brass-ink); }

/* ── concept strip + header ───────────────────────────────────────── */
.concept {
  position: relative; z-index: 60;
  background: #0D0A07; border-bottom: 1px solid var(--rule-dark);
  font-size: .75rem; letter-spacing: .04em;
}
.concept .shell-wide { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 38px; }
.concept a { display: inline-flex; align-items: center; gap: 7px; color: var(--warm-2); text-decoration: none; padding: 7px 0; }
.concept a:hover { color: var(--brass); }
.concept .tag { color: var(--warm-2); border: 1px solid var(--rule-dark); padding: 3px 9px; letter-spacing: .1em; text-transform: uppercase; font-size: .6875rem; }

.head {
  position: sticky; top: 0; z-index: 50;
  height: var(--head-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.head.stuck { background: rgba(16, 13, 10, .94); backdrop-filter: blur(9px); border-bottom-color: var(--rule-dark); }
.head .shell-wide { display: flex; align-items: center; gap: 18px; height: 100%; }

.mark {
  font-family: "Bodoni Moda", Didot, serif; font-weight: 600;
  font-size: 1.0625rem; letter-spacing: .085em; text-transform: uppercase;
  color: var(--warm); text-decoration: none; white-space: nowrap;
}
.mark:hover { color: var(--brass); }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  padding: 10px 14px; font-size: .9375rem; font-weight: 500; color: var(--warm-2);
  text-decoration: none; transition: color .2s var(--ease);
}
.nav a:hover { color: var(--brass); }
.head .btn { min-height: 44px; padding: 10px 20px; font-size: .875rem; }

.navtoggle { display: none; }

/* ── mobile nav ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: calc(var(--head-h) + 20px) 0 28px;
    background: #100D0A; border-left: 1px solid var(--rule-dark);
    overflow-y: auto; margin-left: 0;
    /* It moves on Y, not X. A panel parked off the right edge is still laid out
       there, so it widens the document and overflow-x cannot clip it: the
       element is fixed, so its containing block is the viewport. Hidden as well
       as moved, or the links stay in the tab order while the panel is shut. */
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .26s var(--ease), transform .26s var(--ease), visibility 0s linear .26s;
  }
  .nav[data-open="true"] {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .26s var(--ease), transform .26s var(--ease), visibility 0s linear 0s;
  }
  .nav a { padding: 16px 26px; font-size: 1.0625rem; border-bottom: 1px solid var(--rule-dark); color: var(--warm); }
  .navtoggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 46px; height: 46px; background: none; cursor: pointer;
    border: 1px solid var(--rule-dark); color: var(--warm);
  }
  .navtoggle i, .navtoggle i::before, .navtoggle i::after {
    display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .25s var(--ease), opacity .2s;
  }
  .navtoggle i { position: relative; }
  .navtoggle i::before { content: ''; position: absolute; top: -6px; }
  .navtoggle i::after  { content: ''; position: absolute; top: 6px; }
  .navtoggle[aria-expanded="true"] i { background: transparent; }
  .navtoggle[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); }
  .navtoggle[aria-expanded="true"] i::after  { transform: translateY(-6px) rotate(-45deg); }
  .head .btn-brass { display: none; }
  .navbook { margin: 20px 26px 0; }
  .scrim {
    position: fixed; inset: 0; z-index: 45; background: rgba(8, 6, 4, .6);
    opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
  }
  .scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
}
@media (min-width: 901px) { .scrim { display: none; } .nav a[href="#book"] { display: none; } }

/* ── hero ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: calc(100dvh - var(--head-h) - 38px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  margin-top: calc(var(--head-h) * -1);
  padding-top: var(--head-h);
}
.hero-media { position: absolute; inset: 0; z-index: 0; background: var(--char); }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover;
  /* Narrow viewports crop the sides hard, so hold onto the middle of the grill
     where the steak is. */
  object-position: 50% 64%;
}
@media (min-width: 901px) {
  /* A laptop viewport is almost exactly the shape of the film, so cover leaves
     no room to compose with and the steak lands under the wordmark. Scaling up
     a little makes room; the origin on the left pushes the meat clear to the
     right, where the type is not. */
  .hero-media img, .hero-media video { transform: scale(1.26); transform-origin: 4% 66%; }
}
/* Only as much shading as the type needs: a foot at the bottom where the
   wordmark sits, and a light top wash so the nav stays legible. */
.hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(12, 9, 6, .86) 0%, rgba(12, 9, 6, .52) 24%, rgba(12, 9, 6, .06) 54%, rgba(12, 9, 6, 0) 72%),
    linear-gradient(to bottom, rgba(12, 9, 6, .52) 0%, rgba(12, 9, 6, 0) 24%),
    /* A wedge across the width the wordmark occupies. It has to reach the last
       letter, which lands on the bright crust of the steak, but it releases
       before the flames so the food still reads as food. */
    linear-gradient(to right, rgba(12, 9, 6, .58) 0%, rgba(12, 9, 6, .40) 38%, rgba(12, 9, 6, .22) 62%, rgba(12, 9, 6, .04) 80%, rgba(12, 9, 6, 0) 90%);
}
.hero-body { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(30px, 5vw, 62px); }
.hero h1 { color: #FBF5EA; }
.hero-desc {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: clamp(.95rem, 1.35vw, 1.1rem); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--brass);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3vw, 34px); }

.vidctl {
  position: absolute; z-index: 3; right: var(--gut); bottom: clamp(30px, 5vw, 62px);
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(239, 230, 214, .42); background: rgba(12, 9, 6, .5);
  color: #FBF5EA; cursor: pointer; backdrop-filter: blur(3px);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.vidctl:hover { border-color: var(--brass); color: var(--brass); }
.vidctl svg { width: 15px; height: 15px; }
@media (max-width: 560px) { .vidctl { right: auto; left: var(--gut); bottom: auto; top: calc(var(--head-h) + 14px); } }

/* ── intro ────────────────────────────────────────────────────────── */
/* Offset right, against a brass rule. Nothing else in this band. */
.intro .shell { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: clamp(22px, 4vw, 64px); align-items: start; }
.intro .rule { height: 1px; background: var(--brass); margin-top: 14px; }
.intro p { font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.46; max-width: 34ch; color: var(--warm); }
.intro p + p { margin-top: 1em; }
@media (max-width: 800px) { .intro .shell { grid-template-columns: 1fr; } .intro .rule { max-width: 84px; } }

/* ── table reveal ─────────────────────────────────────────────────── */
.reveal-frame {
  position: relative; overflow: hidden; background: var(--char-2);
  aspect-ratio: 1672 / 941;
}
.reveal-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: 50% 56%;
  transition: transform 1500ms var(--ease);
}
/* Armed by script only. 1.45 is the ceiling: the frame tops out at 1096px and
   the sizes attribute pulls the 1672px file, so the crop never asks for pixels
   the photograph does not have. */
.reveal-frame.armed img { transform: scale(1.45); will-change: transform; }
.reveal-frame.armed.in img { transform: scale(1); }
.reveal-cap { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
@media (prefers-reduced-motion: reduce) {
  .reveal-frame.armed img, .reveal-frame img { transform: none; transition: none; }
}

/* ── menus ────────────────────────────────────────────────────────── */
.menucard { max-width: 1000px; margin-inline: auto; }
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--rule-pale); margin-top: clamp(22px, 3vw, 34px); }
.tabs button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--ink-2);
  padding: 15px 22px; min-height: 50px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
  touch-action: manipulation;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brass-ink); }
@media (max-width: 560px) { .tabs button { padding: 14px 15px; font-size: .9375rem; } }

.course { margin-top: clamp(30px, 4vw, 48px); }
.course h3 {
  font-family: "Libre Franklin", sans-serif; font-size: .8125rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--brass-ink);
  padding-bottom: 10px; border-bottom: 1px solid var(--rule-pale);
}
.dish { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid rgba(26, 20, 16, .09); }
.dish:last-child { border-bottom: 0; }
.dish h4 { font-size: 1.0625rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.dish p { grid-column: 1 / -1; font-size: .9375rem; color: var(--ink-2); max-width: 58ch; margin-top: 2px; }
.price { font-size: 1.0625rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.veg { font-size: .75rem; font-weight: 600; letter-spacing: .08em; color: var(--brass-ink); }
.menunote { margin-top: clamp(26px, 3vw, 38px); padding-top: 18px; border-top: 1px solid var(--rule-pale); color: var(--ink-2); }

/* ── the room ─────────────────────────────────────────────────────── */
/* Photograph carries it; the text block sits over the lower corner on wide
   screens and moves below on narrow ones. */
.room-wrap { position: relative; }
.room-wrap img { width: 100%; height: auto; }
.room-note { background: var(--burgundy); color: #F7EDE0; padding: clamp(26px, 3.4vw, 44px); }
@media (min-width: 981px) {
  .room-note { position: absolute; right: 0; bottom: 0; width: min(430px, 40%); }
}
.room-note p { color: #EAD9CB; }
.room-note .d-md { text-wrap: balance; }

/* ── drinks ───────────────────────────────────────────────────────── */
/* Deliberately not the room's composition: a tall photograph beside a list. */
#drinks { padding-block: 0; }
.drinks-grid { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: clamp(26px, 4vw, 72px); align-items: center; }
.drinks-shot { aspect-ratio: 3 / 4; overflow: hidden; }
.drinks-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.drinks-copy { padding-block: clamp(56px, 7vw, 112px); padding-right: var(--gut); max-width: 640px; }
.pourlist { margin-top: 26px; }
.pour { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--rule-dark); }
.pour:last-of-type { border-bottom: 0; }
.pour b { font-weight: 600; font-size: 1.0625rem; }
.pour span:not(.price) { color: var(--warm-2); font-size: .9375rem; grid-column: 1 / -1; }
.pour .price { color: var(--warm); }
@media (max-width: 860px) {
  .drinks-grid { grid-template-columns: 1fr; gap: 0; }
  .drinks-shot { aspect-ratio: 16 / 10; }
  .drinks-copy { padding-inline: var(--gut); padding-block: clamp(34px, 6vw, 60px); }
}

/* ── booking ──────────────────────────────────────────────────────── */
.bookcard { max-width: 760px; margin-inline: auto; }
.demo-note { border-left: 3px solid var(--brass-ink); padding: 14px 18px; background: var(--ivory-2); color: var(--ink-2); }
.fieldrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
@media (max-width: 660px) { .fieldrow { grid-template-columns: 1fr; } }
.field label { display: block; font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 7px; }
.field select, .field input {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font-family: inherit; font-size: 1rem; color: var(--ink);
  background: #FFFDF8; border: 1px solid rgba(26, 20, 16, .28);
}
.field select:focus-visible, .field input:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 1px; }

.slots { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.slot {
  min-height: 48px; padding: 12px 17px; font-family: inherit; font-size: .9375rem; font-weight: 600;
  background: #FFFDF8; border: 1px solid rgba(26, 20, 16, .28); color: var(--ink); cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
  touch-action: manipulation;
}
.slot:hover:not([disabled]) { border-color: var(--brass-ink); }
.slot[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.slot[disabled] { color: rgba(26, 20, 16, .58); background: transparent; border-style: dashed; cursor: not-allowed; }

.review { margin-top: 26px; border: 1px solid var(--rule-pale); }
.review dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.review div { padding: 18px 20px; border-right: 1px solid var(--rule-pale); }
.review div:last-child { border-right: 0; }
.review dt { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.review dd { margin: 5px 0 0; font-size: 1.125rem; font-weight: 600; }
@media (max-width: 660px) {
  .review dl { grid-template-columns: 1fr; }
  .review div { border-right: 0; border-bottom: 1px solid var(--rule-pale); }
  .review div:last-child { border-bottom: 0; }
}
.confirm { border: 2px solid var(--ink); padding: clamp(22px, 3vw, 34px); background: var(--ivory-2); }
.err { color: #8A1420; font-weight: 600; font-size: .9375rem; margin-top: 10px; }

/* ── find us ──────────────────────────────────────────────────────── */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3.4vw, 54px); }
@media (max-width: 880px) { .facts { grid-template-columns: 1fr; } }
.facts h3 { font-size: .8125rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--brass); padding-bottom: 11px; border-bottom: 1px solid var(--rule-dark); }
.hours { margin-top: 15px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(232, 220, 201, .08); font-size: .9375rem; }
.hours div:last-child { border-bottom: 0; }
.hours b { font-weight: 500; color: var(--warm); }
.hours span { color: var(--warm-2); }

.areamap { margin-top: 15px; border: 1px solid var(--rule-dark); background: var(--char-2); padding: 16px; }
.areamap svg { width: 100%; height: auto; display: block; }

/* ── footer ───────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--rule-dark); padding-block: clamp(40px, 5vw, 66px); }
.foot-top { display: flex; flex-wrap: wrap; gap: 26px 46px; align-items: flex-start; justify-content: space-between; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.foot-nav a { color: var(--warm-2); text-decoration: none; font-size: .9375rem; padding: 6px 0; }
.foot-nav a:hover { color: var(--brass); }
.foot-small { margin-top: clamp(30px, 4vw, 46px); padding-top: 22px; border-top: 1px solid var(--rule-dark); color: var(--warm-2); max-width: 88ch; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 90; background: var(--brass); color: #211603; padding: 13px 20px; font-weight: 600; text-decoration: none; }
.skip:focus { left: 10px; top: 10px; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Without scripting the tab strip cannot work, so it goes and every menu is
   laid out in full instead. */
.panel-title { display: none; }