/* The Fixx Smash Burgers — base.css */

/* ---------- BRAND FONT FACES (self-hosted) ---------- */
/* Macho — used ONLY for the "The Fixx Smash Burgers" wordmark.
   Woodcutter Manero MMXVI / commercial license owned by user. */
@font-face {
  font-family: "Macho";
  src: url("../assets/fonts/Macho.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bonfire — used for all other headings and subheadings.
   Alpaprana Studio / commercial license owned by user. */
@font-face {
  font-family: "Bonfire";
  src: url("../assets/fonts/Bonfire.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Baloo — used for body, nav, buttons, UI. SIL Open Font License. */
@font-face {
  font-family: "Baloo";
  src: url("../assets/fonts/Baloo.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- TOKENS ---------- */
:root {
  /* Brand palette — matched to Square site spec (updated May 27 2026 — v3)
     Cream  #FFFADE — PRIMARY text color for headlines + body on dark
     Orange #faa649 — ACCENT only: eyebrows, button bg, links, hover
     Dark   #000000 — page background sitewide (pure black, matches hero)
     Rust   #c07d1e — deeper accent for button hover states */
  --charcoal: #000000;
  --charcoal-2: #0a0a0a;
  --hero-bg: #000000;
  --cream: #FFFADE;      /* cool off-white — headlines + body text */
  --cream-soft: #fff5d6;
  --orange: #faa649;     /* accent only */
  --orange-bright: #faa649;
  --rust: #c07d1e;
  --olive: #5C6B3D;
  --tomato: #C0392B;

  /* Roles — dark mode default */
  --bg: var(--charcoal);
  --bg-elev: var(--charcoal-2);
  --surface: #2A2622;
  --text: var(--cream); /* warm cream on dark per Square spec */
  --text-muted: #c9b893; /* muted cream */
  --border: #3A332C;
  --accent: var(--orange-bright);
  --accent-strong: var(--orange);
  --link: var(--orange-bright);
  --focus: #FFD89A;

  /* Type roles — verified against live Square site computed CSS (May 31 2026 inspection)
     Headlines (hero wordmark)   : Macho uppercase
     Titles (h2/h3/h4)           : Bonfire Regular
     Body Text (default)         : Carter One
     Paragraphs (article body)   : Carter One
     Labels (nav/eyebrow/badges) : Baloo
     Taglines (brand voice lines): Carter One
     Action Button text          : Baloo */
  --font-wordmark: "Macho", "Familjen Grotesk", Georgia, serif;
  --font-headline: "Macho", "Familjen Grotesk", Georgia, serif;
  --font-display: "Macho", "Familjen Grotesk", Georgia, serif;  /* legacy alias — used by some old rules */
  --font-title: "Bonfire", "Familjen Grotesk", Georgia, serif;
  --font-body: "Carter One", "Bonfire", system-ui, sans-serif;
  --font-paragraph: "Carter One", "Bonfire", system-ui, sans-serif;
  --font-label: "Baloo", "Carter One", system-ui, sans-serif;
  --font-tagline: "Carter One", "Bonfire", system-ui, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --text-hero: clamp(2.5rem, 5.5vw, 4.5rem); /* Macho display sizing */

  /* Layout */
  --container: 1200px;
  --container-narrow: 800px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 18px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.3,1);
}

[data-theme="light"] {
  --bg: var(--cream-soft);
  --bg-elev: #FFFFFF;
  --surface: #FFFFFF;
  --text: #1A1815;
  --text-muted: #5A4F40;
  --border: #E1D5BD;
  --accent: var(--orange);
  --accent-strong: #C95B1A;
  --link: #B0531B;
  --focus: #1A1815;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--text);font-size:var(--text-base);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-weight:400}

/* Labels (nav, eyebrow, badges, footer column titles, buttons) — Baloo */
nav a, .eyebrow, .menu-item__tag, .feature-card__badge, .footer-col h4, .btn, .nav-toggle, .site-nav, .site-nav a, .story-card__date{font-family:var(--font-label)}

/* Taglines (brand voice lines) — Carter One */
.hero__tagline, .hero__sub, .footer-bottom p{font-family:var(--font-tagline)}

/* Article paragraphs — Carter One (overrides body Bonfire) */
.article-body p, .article-body li{font-family:var(--font-paragraph)}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}

/* ---------- TYPOGRAPHY ----------
   H1 = headline (Macho, uppercase)
   H2/H3/H4 = title (Bonfire, normal case) */
h1{font-family:var(--font-headline);font-weight:400;line-height:1.1;letter-spacing:.02em;text-transform:uppercase;margin:0 0 .5em;color:var(--cream)}
h2,h3,h4{font-family:var(--font-title);font-weight:400;line-height:1.15;letter-spacing:0;text-transform:none;margin:0 0 .5em;color:var(--cream)}

/* The Macho font does not include an ampersand glyph (or apostrophe, quote, $).
   Wrap any such character in <span class="amp"> to render it in Carter One. */
h1 .amp, h2 .amp, h3 .amp, h4 .amp,
.hero__wordmark .amp,
.story-card__media .amp{font-family:var(--font-body);font-weight:400;text-transform:none;font-size:.85em;display:inline-block;vertical-align:baseline}

/* Article content (About page + Blog posts):
   - H2/H3 section titles in Carter One + main brand orange (#faa649)
   - Body paragraphs in lighter orange (#FFC480) — matches Square live site */
.article-body h2,.article-body h3{font-family:var(--font-body);color:var(--orange);text-transform:none;letter-spacing:0;font-weight:400;line-height:1.25}
.article-body h2{font-size:1.65rem;margin:1.5em 0 .5em}
.article-body h3{font-size:1.3rem;margin:1.5em 0 .5em}
.article-body p,.article-body li{color:var(--cream)} /* cream for body copy in articles */

/* ---------- WORDMARK — "The Fixx Smash Burgers" in Macho only ---------- */
.wordmark{font-family:var(--font-wordmark);letter-spacing:.04em;text-transform:uppercase;line-height:1;color:var(--text);display:inline-block;font-weight:400}
.wordmark--sm{font-size:1.15rem;margin-left:.5rem;color:var(--cream)}
.wordmark--lg{font-size:1.85rem;margin:.75rem 0 .5rem;color:var(--cream)}
@media (max-width: 720px){
  .wordmark--sm{display:none}
}
h1{font-size:var(--text-hero);letter-spacing:0;line-height:1.0}
h2{font-size:var(--text-3xl)}
h3{font-size:var(--text-xl)}
h4{font-size:var(--text-lg);font-family:var(--font-title);font-weight:400}
p{margin:0 0 1em}
small{color:var(--text-muted)}
.eyebrow{font-family:var(--font-body);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--accent);margin-bottom:.75rem;display:inline-block}

/* ---------- ACCESSIBILITY ---------- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#1A1815;padding:.75rem 1rem;font-weight:700;border-radius:0 0 var(--radius) 0;z-index:9999}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- LAYOUT ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 1.25rem}
.container-narrow{width:100%;max-width:var(--container-narrow);margin:0 auto;padding:0 1.25rem}
section{padding:5rem 0}
@media (max-width:700px){section{padding:3.25rem 0}}

/* ---------- HEADER ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(26,24,21,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
[data-theme="light"] .site-header{background:rgba(248,241,227,.92)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.25rem;max-width:var(--container);margin:0 auto;gap:1rem}
.site-header__logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text)}
.site-header__logo img{height:48px;width:auto}
.site-header__logo:hover{text-decoration:none}
.site-nav{display:flex;align-items:center;gap:.25rem}
.site-nav a{padding:.5rem .75rem;border-radius:var(--radius-sm);color:var(--text);font-weight:400;font-size:.9rem;letter-spacing:.01em;white-space:nowrap}
.site-nav a:hover{background:var(--surface);text-decoration:none}
.site-nav a.is-active{color:var(--accent)}
.site-nav__cta{margin-left:.5rem}
.theme-toggle{background:transparent;border:1px solid var(--border);color:var(--text);width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;margin-left:.25rem}
.theme-toggle:hover{border-color:var(--accent)}

/* Mobile nav */
.nav-toggle{display:none;background:transparent;border:1px solid var(--border);color:var(--text);width:44px;height:44px;border-radius:8px;align-items:center;justify-content:center}
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .site-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--border);padding:.5rem 1rem 1rem;display:none}
  .site-nav.is-open{display:flex}
  .site-nav a{padding:.85rem .5rem;border-bottom:1px solid var(--border)}
  .site-nav__cta{margin:.75rem 0 0}
}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem 1.5rem;border-radius:var(--radius);font-weight:700;font-size:1rem;letter-spacing:.01em;text-decoration:none;border:2px solid transparent;transition:transform .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);white-space:nowrap}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--primary,a.btn--primary{background:var(--orange);color:#fff;border-color:var(--orange);font-weight:400}
.btn--primary:hover,a.btn--primary:hover{background:var(--rust);color:#fff;border-color:var(--rust);text-decoration:none}
.btn--secondary{background:transparent;color:var(--text);border-color:var(--border)}
.btn--secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn--ghost{background:transparent;color:var(--accent);border-color:transparent;padding:.5rem 0}
.btn--lg{padding:1.1rem 1.85rem;font-size:1.05rem}
.btn--sm{padding:.6rem 1rem;font-size:.9rem}

/* ---------- HERO — wordmark-led, image-right ----------
   Hero uses pure black (#000) to match the source image background
   so the burger floats seamlessly. The rest of the page stays charcoal. */
.hero{position:relative;overflow:hidden;background:#000;color:var(--cream);padding:0}
.hero__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;min-height:min(85vh,760px);align-items:stretch}
.hero__content{padding:3rem 1.5rem 3rem 4vw;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000}
.hero__media{position:relative;height:100%;min-height:auto;background:#000;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;padding:0}
.hero__media img{width:115%;max-width:none;height:auto;min-height:auto;max-height:100%;object-fit:contain;object-position:right center;display:block;margin-right:-8%}

/* "Making Burgers Great Again™" eyebrow tagline */
.hero__tagline{font-family:var(--font-body);font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:.18em;color:var(--orange-bright);font-size:.92rem;margin-bottom:1.25rem;display:inline-block}

/* Wordmark h1 — force Macho instead of the global heading font */
.hero__wordmark{font-family:var(--font-wordmark);font-weight:400;text-transform:uppercase;font-size:clamp(2.5rem, 6vw, 5rem);line-height:.95;letter-spacing:.02em;margin:0 0 1.25rem;color:var(--cream)}

/* Sub-tagline "Fresh Beef. House-Made Sauces. No BS." — also in Macho for unity */
.hero__sub{font-family:var(--font-wordmark);font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(.95rem, 1.4vw, 1.25rem);color:var(--cream);opacity:.95;margin:0 0 2rem;line-height:1.3;max-width:none}

.hero__ctas{display:flex;gap:.85rem;flex-wrap:wrap;justify-content:center}
.hero__ctas .btn{border-radius:9999px;padding:.95rem 2.4rem}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;min-height:auto}
  .hero__content{padding:2.5rem 1.25rem 3rem;order:2;max-width:100%}
  .hero__media{order:1;min-height:auto;align-items:flex-start;padding:0;margin-top:-1px}
  .hero__media img{max-height:340px}
  .hero__media::after{background:linear-gradient(180deg, transparent 60%, var(--charcoal) 100%)}
  .hero__media img{width:100%;height:auto;max-height:380px;object-fit:contain;object-position:bottom center}
  .hero__wordmark{font-size:clamp(2.25rem, 11vw, 3.5rem)}
}

/* ---------- HOURS BANNER ---------- */
.hours-banner{background:var(--bg-elev);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:1rem 1.25rem;font-weight:600;text-align:center}
.hours-banner__dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin-right:.5rem;vertical-align:middle}
.hours-banner__dot--open{background:#7FB069}
.hours-banner__dot--closed{background:var(--tomato)}

/* ---------- CARDS / GRIDS ---------- */
.grid{display:grid;gap:1.5rem}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid--3,.grid--4{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid--3,.grid--4{grid-template-columns:1fr}}

.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.75rem;transition:transform .2s var(--ease), border-color .2s var(--ease)}
.card:hover{transform:translateY(-3px);border-color:var(--accent)}
.card h3{margin-bottom:.5rem}
.card p{color:var(--text-muted);margin-bottom:0}
.card__icon{font-size:2rem;color:var(--accent);margin-bottom:.75rem;display:block;font-family:var(--font-display);font-weight:800}

.feature-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.feature-card__media{aspect-ratio:4/3;background:#221F1B;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:3rem;color:var(--accent);background:linear-gradient(135deg, #2A2622 0%, #1A1815 100%);position:relative;overflow:hidden}
.feature-card__media--photo{padding:0}
.feature-card__media--photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.feature-card:hover .feature-card__media--photo img{transform:scale(1.04)}
.feature-card__badge{position:absolute;top:1rem;left:1rem;background:var(--tomato);color:var(--cream);font-family:"Bonfire",var(--font-display);font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;padding:.3rem .7rem;border-radius:var(--radius-sm);font-weight:400}
.feature-card__body{padding:1.5rem}
.feature-card h3{font-size:var(--text-xl);margin-bottom:.35rem}
.feature-card p{color:var(--text-muted);font-size:.95rem;margin:0}

/* ---------- SECTION HEADER ---------- */
.section-header{text-align:center;max-width:680px;margin:0 auto 3rem}
.section-header h2{margin-bottom:.75rem}
.section-header p{color:var(--text-muted);font-size:var(--text-lg)}

/* ---------- MENU ---------- */
.menu-layout{display:grid;grid-template-columns:220px 1fr;gap:3rem;align-items:start}
@media (max-width:900px){.menu-layout{grid-template-columns:1fr}}
.menu-nav{position:sticky;top:90px;display:flex;flex-direction:column;gap:.25rem}
@media (max-width:900px){.menu-nav{display:none}}
.menu-nav a{color:var(--text-muted);padding:.5rem .75rem;border-radius:var(--radius-sm);border-left:2px solid transparent;font-weight:600;font-size:.95rem}
.menu-nav a:hover{color:var(--text);text-decoration:none;background:var(--bg-elev)}
.menu-section{margin-bottom:3.5rem;scroll-margin-top:90px}
.menu-section h2{border-bottom:2px solid var(--border);padding-bottom:.5rem;margin-bottom:1.5rem}
.menu-item{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:1rem 0;border-bottom:1px dashed var(--border)}
.menu-item:last-child{border-bottom:none}
.menu-item__name{font-weight:400;font-size:1.05rem;color:var(--orange);margin-bottom:.25rem} /* brand orange #faa649 */
.menu-item__tag{display:inline-block;background:var(--olive);color:var(--cream);font-size:.7rem;font-weight:700;padding:.15rem .45rem;border-radius:4px;margin-left:.5rem;letter-spacing:.06em;text-transform:uppercase}
.menu-item__desc{color:var(--cream);font-size:.93rem;margin:0;max-width:55ch} /* cream #FFFADE */
.menu-item__price{font-family:var(--font-body);font-size:1.15rem;font-weight:400;color:var(--accent);white-space:nowrap} /* Carter One — Macho lacks $ symbol */

/* ---------- HOURS TABLE ---------- */
.hours-table{width:100%;border-collapse:collapse;margin:1rem 0}
.hours-table th,.hours-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--border)}
.hours-table th{font-family:var(--font-display);font-weight:700;color:var(--text);width:40%}
.hours-table tr.is-today td{background:var(--bg-elev);color:var(--accent);font-weight:700}
.hours-table tr.is-today th{color:var(--accent);font-weight:800}

/* ---------- FOOTER ---------- */
.site-footer{background:#0F0D0B;color:var(--cream);border-top:1px solid #2A2622;padding:4rem 0 2rem;margin-top:4rem}
[data-theme="light"] .site-footer{background:#1A1815}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;margin-bottom:3rem}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer-grid{grid-template-columns:1fr}}
.footer-col h4{font-family:var(--font-display);font-size:1rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:1rem;color:#E8702A}
.footer-col a{color:#E1D5BD;display:block;padding:.2rem 0}
.footer-col p a, .footer-col p{display:inline}
.footer-col img{height:120px;width:auto;margin-bottom:1rem}
.footer-bottom{border-top:1px solid #2A2622;padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;color:#9F8F75;font-size:.88rem}
.social-row{display:flex;gap:.75rem;margin-top:.75rem}
.social-row a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #3A332C;border-radius:50%;color:#E1D5BD;padding:0}
.social-row a:hover{border-color:#E8702A;color:#E8702A;text-decoration:none}

/* ---------- MISC ---------- */
.tag{display:inline-block;background:var(--surface);border:1px solid var(--border);color:var(--text-muted);font-size:.78rem;padding:.3rem .65rem;border-radius:999px;letter-spacing:.04em}
.callout{background:var(--bg-elev);border-left:4px solid var(--accent);padding:1.25rem 1.5rem;border-radius:var(--radius);margin:1.5rem 0}
.callout strong{color:var(--accent)}

/* ---------- BLOG ---------- */
.article-header{padding:5rem 0 2rem;text-align:center;border-bottom:1px solid var(--border);margin-bottom:3rem}
.article-meta{color:var(--text-muted);font-size:.95rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.article-body{max-width:720px;margin:0 auto;padding:0 1.25rem;font-size:1.075rem;line-height:1.75}
.article-body h2{font-size:1.85rem;margin-top:2.5rem;margin-bottom:1rem}
.article-body h3{font-size:1.35rem;margin-top:2rem;margin-bottom:.75rem}
.article-body p{margin-bottom:1.25rem}
.article-body ul{padding-left:1.5rem;margin-bottom:1.25rem}
.article-body li{margin-bottom:.5rem}

.story-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s var(--ease), border-color .2s var(--ease)}
.story-card:hover{transform:translateY(-3px);border-color:var(--accent);text-decoration:none}
.story-card__media{aspect-ratio:16/10;background:linear-gradient(135deg, #2A2622 0%, #1A1815 100%);display:flex;align-items:center;justify-content:center;color:var(--accent);font-family:var(--font-display);font-size:3rem;font-weight:800;position:relative;overflow:hidden}
.story-card__body{padding:1.5rem;flex:1;display:flex;flex-direction:column}
.story-card__date{font-size:.82rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}
.story-card h3{font-size:1.2rem;margin-bottom:.5rem;color:var(--text)}
.story-card p{color:var(--text-muted);font-size:.95rem;margin:0;flex:1}
.story-card--soon .story-card__media{opacity:.55}
.story-card--soon{opacity:.78}

/* ---------- FORMS ---------- */
.form-field{margin-bottom:1.25rem}
.form-field label{display:block;font-weight:600;margin-bottom:.4rem;font-size:.93rem}
.form-field input,.form-field textarea{width:100%;padding:.85rem 1rem;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:inherit;font-size:1rem}
.form-field textarea{min-height:140px;resize:vertical}
.form-field input:focus,.form-field textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(232,112,42,.18)}

/* ---------- MAP CARD ---------- */
.location-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:grid;grid-template-columns:1fr 1.2fr;gap:0}
@media (max-width:800px){.location-card{grid-template-columns:1fr}}
.location-card__info{padding:2rem}
.location-card__map{background:#2A2622;min-height:360px;position:relative;overflow:hidden}
.location-card__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;filter:saturate(.9)}

/* ---------- UTILITY ---------- */
.text-center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.bg-elev{background:var(--bg-elev)}
.divider-orange{height:3px;width:64px;background:var(--accent);border:0;margin:.5rem 0 1.5rem;border-radius:2px}
