@import url("https://fonts.googleapis.com/css2?family=Noticia+Text:wght@400;700&display=swap");
:root{ --bg-page:#ffffff;
--text:#111827;
--muted:#6b7280;
--ring:#e5e7eb; --bg-dark:#0b0e1a; --panel-golden:#d0a933;
--panel-golden-2:#d0a933;
--hover-golden:#d0a933; --footer-bg:#151c18;
--footer-top:#d0a933;
--footer-text:#f5f5f5;
--footer-dim:#cfd6d3; --container-max:1180px; --nav-bg:#d0a933;
--nav-text:#000000;
--nav-hover:var(--hover-golden, #d0a933);
--nav-vpad:4px;
--nav-border:1px;
--nav-shadow-lg:
0 22px 60px rgba(17,24,39,.22),
0 10px 24px rgba(17,24,39,.14),
0  1px  0  rgba(17,24,39,.06);
} *{ box-sizing:border-box; }
html, body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
margin:0;
min-height:100vh;
display:flex;
flex-direction:column;
font-family:'Noticia Text',Georgia,serif;
background:var(--bg-page);
color:var(--text);
line-height:1.6;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block; }
.container{
width:min(var(--container-max),92%);
margin-inline:auto;
} main, .page-content{ flex:1 0 auto; }
.site-footer{ margin-top:auto; flex-shrink:0; } a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--hover-golden); }
a:focus-visible,
button:focus-visible{
outline:2px solid var(--hover-golden);
outline-offset:2px;
border-radius:6px;
} .hidden{ display:none !important; }
.sr-only{
position:absolute !important;
width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
} .topbar{
background:var(--bg-dark);
color:#e5e7eb;
}
.topbar-inner{
display:flex;
align-items:center;
justify-content:space-between;
min-height:64px;
gap:16px;
padding:10px 0;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:50px; width:auto; display:block; }
.tagline{
font-weight:700;
letter-spacing:.03em;
color:#b9c2cf;
line-height:1;
white-space:nowrap;
} .actions{ display:flex; align-items:center; gap:10px; }
.actions a{
color:#ffffff;
display:inline-flex; align-items:center; justify-content:center;
width:28px; height:28px; border-radius:999px;
opacity:.95; line-height:1;
transition:color .2s, opacity .2s, transform .2s;
}
.actions a:hover{ color:var(--hover-golden); opacity:1; transform:translateY(-1px); } .navbar{
background:var(--nav-bg);
position:relative;
z-index:90; }
.navbar .navbar-inner{
display:flex; align-items:center; flex-wrap:wrap;
gap:12px; min-height:44px; padding:var(--nav-vpad) 0;
}
.navbar .nav-list{
display:flex; align-items:center; 
list-style:none; margin:0; padding:0;
}
.navbar a{
display:inline-flex; align-items:center; gap:6px;
color:var(--nav-text); font-weight:700; white-space:nowrap;
padding:10px 12px; line-height:1; text-decoration:none;
transition:color .2s, background .2s, transform .2s;
border-bottom:3px solid transparent;
}
.navbar a:hover{ 
color:#000000; 
background:transparent; 
transform:translateY(-1px); 
border-bottom:3px solid #000000;
}
.navbar a.is-active{ color:#fff; background:#111827; } .navbar .has-submenu{ position:relative; }
.navbar .caret{ font-size:.9em; opacity:.7; transition:transform .2s ease; }
.navbar .has-submenu::after{
content:""; position:absolute; left:0; right:0; top:100%;
height: calc(var(--nav-vpad) + var(--nav-border));
} .navbar .submenu{
position:absolute; top:100%; left:0;
margin-top:-1px;
padding:0; list-style:none; min-width:200px;
border:1px solid var(--hover-golden); background:#fff; z-index:80;
opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px);
transition:opacity .18s ease, transform .18s ease;
box-shadow:var(--nav-shadow-lg);
}
.navbar .submenu > li{ list-style:none; }
.navbar .submenu > li > a{
display:block; padding:14px 16px; font-weight:700;
color:#111827; background:#fff; text-decoration:none;
border-top:1px solid #cfd2d6;
border-bottom:2px solid transparent;
}
.navbar .submenu > li:first-child > a{ border-top:none; }
.navbar .submenu > li > a:hover{
border-bottom:2px solid #d0a933;
}
.navbar .has-submenu:hover > .submenu,
.navbar .has-submenu:focus-within > .submenu,
.navbar .has-submenu.open > .submenu{
opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.navbar .has-submenu.open > .nav-link .caret{ transform:rotate(180deg); } .nav-toggle{
-webkit-appearance:none; appearance:none; background:transparent; border:0;
margin-left:auto; width:54px; height:48px;
border-left:1px solid var(--ring);
cursor:pointer; position:relative; z-index:95;
display:none; align-items:center;
justify-content:center;
flex-direction:column;
gap:5px;
}
.nav-toggle .line{
display:block; width:28px; height:3px; background:#2b2f36; border-radius:2px;
transition:transform .18s ease, opacity .18s ease;
} .nav-backdrop{
position:fixed; inset:0; background:rgba(0,0,0,.35);
opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:55;
}
body.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; } @media (max-width:980px){
.nav-toggle{ display:flex; border-left:0; }
.navbar .navbar-inner{ justify-content:space-between; } body.nav-open .nav-toggle{
opacity:0;
pointer-events:none;
} .navbar .nav-list{
position:fixed; right:0; bottom:0; top:0;
width:min(86vw, 340px);
background:#fff;
box-shadow:-24px 0 60px rgba(0,0,0,.18);
transform:translateX(100%);
transition:transform .25s ease;
overflow-y:auto; z-index:80;
display:flex; flex-direction:column;
padding:0;
border-top:0;
}
body.nav-open .navbar .nav-list{ transform:translateX(0); } .navbar .drawer-close{
align-self:stretch;
background:#fff; color:#111827;
border:0; outline:0; cursor:pointer;
display:flex; align-items:center; justify-content:flex-end;
padding:18px 22px 12px; font-size:22px; font-weight:700;
}
.navbar .drawer-close:active{ background:#f8fafc; }
.navbar .drawer-close:focus-visible{ box-shadow:0 0 0 2px #e11d48 inset; } .navbar .nav-list > li{
align-self:stretch;
border-bottom:1px solid #e8edf2;
}
.navbar .nav-list > li:last-child{ border-bottom:0; }
.navbar .nav-list > li > a{
display:flex; align-items:center;
padding:14px 22px;
font-size:17px; letter-spacing:.1px;
}
.navbar .nav-list > li > a:active{ background:#f8fafc; } .navbar .nav-list > li > a .caret{
margin-left:auto; transform-origin:center;
}
.navbar .has-submenu.open > .nav-link .caret{ transform:rotate(180deg); } .navbar .submenu{
position:static; display:none; margin:6px 0 12px;
padding-left:20px; border-left:2px solid #eef2f6;
background:transparent; box-shadow:none; border:0;
}
.navbar .has-submenu.open > .submenu{ display:block; }
.navbar .submenu > li > a{
padding:12px 0 12px 10px; font-weight:600; font-size:16px; color:#374151;
border-top:1px dashed #e9edf2;
}
.navbar .submenu > li:first-child > a{ border-top:none; } .navbar .has-submenu.open > .nav-link{ color:#e11d48; } body.nav-open .nav-toggle .line:nth-child(1){ transform:translateY(8px) rotate(45deg); }
body.nav-open .nav-toggle .line:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle .line:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
} .footer-top{ height:22px; background:var(--footer-top); }
.site-footer{ background:var(--bg-dark); color:var(--footer-text); }
.site-footer a{ color:var(--footer-text); text-decoration:none; }
.footer-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px 60px;
padding:56px 0 24px;
} .footer-left{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:24px;
} .site-footer img,
.site-footer .footer-brand img,
.site-footer .footer-left img,
.footer-brand img,
.footer-left img {
max-width: 250px !important;
width: auto !important;
height: auto !important;
}
.footer-brand {
max-width: 250px !important;
display: block !important;
}
.footer-social{
display:flex;
align-items:center;
gap:26px;
}
.footer-social a{
display:inline-flex; align-items:center; justify-content:center;
width:30px; height:30px; line-height:1; opacity:.95;
transition:color .2s, opacity .2s, transform .2s;
}
.footer-social a:hover{ color:var(--hover-golden); opacity:1; transform:translateY(-1px); } .footer-right{ display:block; }
.footer-links{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:14px 60px;
}
.footer-links ul{
list-style:none;
margin:0; padding:0;
display:grid; gap:12px;
}
.footer-links a{
font-weight:600; font-size:1.02rem; letter-spacing:.01em;
opacity:.92; transition:color .2s, opacity .2s;
}
.footer-links a:hover{ color:var(--hover-golden); opacity:1; } .footer-bottom{
border-top:1px solid rgba(255,255,255,.06);
padding:18px 0 32px;
}
.footer-bottom p{
margin:0; color:var(--footer-dim); opacity:.9; font-size:.95rem; text-align:left;
} @media (max-width:980px){
.tagline{ font-size:.9rem; }
}
@media (max-width:820px){
.footer-grid{ grid-template-columns:1fr; gap:28px; }
.footer-left{ align-items:center; text-align:center; }
.footer-social{ justify-content:center; }
.footer-links{ grid-template-columns:repeat(2, 1fr); justify-items:center; }
.footer-bottom p{ text-align:center; }
}
@media (max-width:760px){
.tagline{ display:none; }
.brand img{ height:44px; }
.navbar .navbar-inner{ gap:8px; }
.navbar a{ padding:8px 10px; }
}
@media (max-width:560px){
.navbar .navbar-inner{ gap:6px; }
.navbar a{ padding:7px 9px;}
.brand img{ height:40px; }
.footer-links{ grid-template-columns:1fr; justify-items:flex-start; }
.footer-left{ align-items:flex-start; text-align:left; }
.footer-social{ justify-content:flex-start; }
.footer-bottom p{ text-align:left; }
} .sidebar-best{
--best-bg:#fff34d;
--best-fg:#0b0e1a;
--best-rule:rgba(11,14,26,.35);
--best-shadow:0 14px 32px rgba(0,0,0,.22);
background:var(--best-bg);
color:var(--best-fg);
border-radius:18px;
padding:22px 20px;
box-shadow:var(--best-shadow);
}
.dark .sidebar-best,
[data-theme="dark"] .sidebar-best{
--best-bg:#ffef3a;
--best-fg:#0b0e1a;
--best-rule:rgba(11,14,26,.4);
}
.best-head{ margin-bottom:10px; }
.best-eyebrow{ display:block; font-weight:800; letter-spacing:.01em; }
.best-title{
margin:6px 0 10px;
font-size:44px;
line-height:.9;
font-weight:800;
letter-spacing:-0.05em;
}
.best-sub{ margin:0 0 8px; font-weight:600; }
.best-list{ list-style:none; margin:6px 0 0; padding:0; }
.best-item{
padding:16px 0;
background-image:radial-gradient(var(--best-rule) 1px, transparent 1px);
background-size:6px 2px;
background-repeat:repeat-x;
background-position:bottom left;
}
.best-item:last-child{ background:none; padding-bottom:0; }
.best-item a{
color:var(--best-fg);
font-weight:800;
font-size:14px;
line-height:1.25;
display:inline-block;
}
.best-item a:hover{ color:var(--hover-golden); }
@media (max-width:980px){
.best-title{ font-size:42px; }
.best-item a{ font-size:18px; }
} .sidebar-best.is-black{
--best-bg:#0b0e1a;
--best-fg:#ffffff;
--best-rule:#c0c0c0;
--best-shadow:0 18px 44px rgba(0,0,0,.6);
background:var(--best-bg);
color:var(--best-fg);
}
.sidebar-best.is-black .best-sub,
.sidebar-best.is-black .best-eyebrow{ color:rgba(255,255,255,.9); }
.sidebar-best.is-black .best-item a{ color:var(--best-fg); }
.sidebar-best.is-black .best-item a:hover{ color:var(--hover-golden); } .brand-desktop { display:flex; align-items:center; }
.brand-mobile  { display:none !important; }
.topbar-inner  { display:flex; }
@media (max-width:980px){
.brand-desktop { display:none !important; }
.brand-mobile  { display:flex !important; align-items:center; }
.navbar .navbar-inner{ justify-content:space-between; }
} @media (max-width:560px){
.footer-links{
grid-template-columns: repeat(2, minmax(0,1fr));
column-gap: 32px; row-gap: 28px; justify-items: stretch;
} .footer-links ul:nth-child(3){
margin-top: 16px; }
.footer-left{ align-items:flex-start; text-align:left; }
.footer-social{ justify-content:flex-start; }
.footer-bottom p{ text-align:left; }
} @media (max-width:980px){
.nav-footer-note{
padding: 20px;
font-size: 14px;
line-height: 1.4;
color: #6b7280; border-top: 1px solid #e5e7eb;
margin-top: auto; text-align: center;
}
.nav-footer-note a{
color: var(--hover-golden);
font-weight: 600;
}
} @media (max-width:980px){
.topbar .actions{ display:none !important; }
} @media (max-width:980px){
.nav-footer-note{
padding: 20px 18px 10px;
font-size: 14px;
line-height: 1.45;
color: #6b7280;
border-top: 1px solid #e5e7eb;
margin-top: auto; text-align: center;
}
.nav-footer-note a{
color: var(--hover-golden);
font-weight: 600;
} .nav-footer-social{
padding: 10px 18px 22px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
border-top: 1px solid #f2f3f5;
}
.nav-footer-social a{
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 999px;
color: #6b7280;
transition: transform .15s ease, color .15s ease, opacity .15s ease;
}
.nav-footer-social a:hover{ color: var(--hover-golden); transform: translateY(-1px); }
} @media (max-width:980px){
.topbar{
background: transparent !important; border: 0 !important;
padding: 0 !important;
}
.topbar-inner{ display: none !important;
}
} @media (min-width:981px){
.drawer-close,
.nav-footer-note,
.nav-footer-social{ display:none !important; }
}
.navbar .current-menu-item > a,
.navbar .current-menu-ancestor > a { 
color:#fff; background:#111827; 
}
.brand img.custom-logo { height:60px; width:auto; }
.breadcrumbs ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 12px;padding:0}
.breadcrumbs li{color:#6b7280;font-size:.95rem}
.breadcrumbs a{color:#111;text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs li+li:before{content:"/";margin:0 6px;color:#9ca3af}  .thumb.thumb-has-badge { position: relative; display: block; }
.thumb.thumb-has-badge img { display:block; width:100%; height:auto; } .thumb-badge{
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
display: inline-block;
padding: 6px 10px;
border-radius: 999px;
background: rgba(0,0,0,.75);
color: #fff !important;
font-weight: 600;
font-size: .78rem;
line-height: 1.1;
letter-spacing: .02em;
text-decoration: none;
white-space: nowrap;
}
.thumb-badge:hover{
background:#111;
text-decoration: underline;
} @media (max-width:560px){
.thumb-badge{ top:8px; left:8px; padding:5px 9px; font-size:.74rem; }
}
.thumb-wrap {
position: relative;
}
.thumb img {
display: block;
width: 100%;
height: auto;
}
.thumb-badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
padding: 6px 10px;
border-radius: 999px;
background: rgba(0,0,0,.75);
color: #fff;
font-weight: 600;
font-size: .78rem;
line-height: 1.2;
text-decoration: none;
}
.thumb-badge:hover {
background: #111;
text-decoration: underline;
} @media (max-width:980px){ .navbar{
background: #0b0e1a !important;
} .nav-toggle .line{
background: #ffffff !important;
} .navbar .nav-list > li > a{
color: #111827 !important;
background: transparent !important;
}
.navbar .nav-list > li > a:hover{
color: #d0a933 !important;
background: #f8fafc !important;
} .navbar .submenu > li > a{
color: #374151 !important;
background: transparent !important;
}
.navbar .submenu > li > a:hover{
color: #d0a933 !important;
background: transparent !important;
} .navbar .drawer-close{
color: #111827 !important;
}
}:root {
--color-dark: #0b0c18;
--color-golden: #d0a933;
--color-gray: #6b7280;
--color-light-gray: #f5f5f5;
--color-text: #374151;
--border-radius: 6px;
--transition: 0.2s;
} .archive-page {
background: #fff;
color: inherit;
} .archive-hero {
position: relative;
padding: 40px 0 24px;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
color: #fff;
} .archive-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
background: 
repeating-linear-gradient(
45deg,
transparent,
transparent 10px,
rgba(212, 175, 55, 0.01) 10px,
rgba(212, 175, 55, 0.01) 20px
);
pointer-events: none;
}
.archive-hero .container {
position: relative;
z-index: 1;
} .archive-title {
margin: 0 0 12px;
font-size: clamp(1.8rem, 5vw, 3rem);
font-weight: 700;
line-height: 1.1;
color: #FFF8E7;
} .archive-tagline {
margin: 0 0 20px;
max-width: 60ch;
font-size: 0.8rem;
line-height: 1.5;
color: rgba(255, 248, 231, 0.85);
opacity: 0.85;
} .chip-flow {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.archive-page .chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border-radius: 999px;
border: 2px solid var(--color-golden);
background: transparent;
color: var(--color-golden);
font-size: 0.75rem;
font-weight: 700;
text-decoration: none;
transition: background var(--transition), transform var(--transition), border-color var(--transition);
}
.archive-page .chip::after {
content: "→";
opacity: 0.85;
}
.archive-page .chip:hover {
background: var(--color-golden);
color: #1a1a1a;
transform: translateY(-1px);
}
.archive-hero .chip.is-active {
background: var(--color-golden);
border-color: var(--color-golden);
color: #1a1a1a;
} .archive-feature {
margin-top: 30px;
padding: 0;
}
.feature-grid {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 0;
align-items: stretch;
width: 100%;
overflow: hidden;
background: #fff;
border: 1px solid var(--color-light-gray);
border-radius: 16px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}
.feature-media {
display: block;
}
.feature-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.feature-card {
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
padding: 26px;
color: var(--color-dark);
border-left: 1px solid var(--color-light-gray);
}
.feature-card .kicker {
margin-bottom: 4px;
padding-bottom: 10px;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.12em;
opacity: 0.8;
border-bottom: 1px solid var(--color-light-gray);
} .feature-title {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3;
color: var(--color-dark);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.feature-title a {
color: inherit;
text-decoration: none;
transition: color var(--transition);
}
.feature-title a:hover {
color: var(--color-golden);
}
.feature-excerpt {
margin: 6px 0 2px;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--color-text);
}
.feature-byline {
font-size: 0.85rem;
font-weight: 700;
color: var(--color-dark);
}
.feature-byline a {
color: inherit;
text-decoration: none;
transition: color var(--transition);
}
.feature-byline a:hover {
color: var(--color-golden);
} .picks-header {
padding: 22px 0 10px;
} .picks-title {
margin: 0 0 8px;
font-size: clamp(0.85rem, 2.5vw, 1.8rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--color-dark);
} .picks-tagline {
margin: 0;
max-width: 70ch;
font-size: 0.8rem;
font-weight: 600;
color: var(--color-dark);
opacity: 0.85;
} .archive-row {
padding: 28px 0 48px;
}
.card-grid-4 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.post-card {
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
color: var(--color-dark);
text-decoration: none;
transition: transform var(--transition), box-shadow var(--transition);
}
.post-card:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}
.post-card .thumb {
display: block;
}
.post-card img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
display: block;
} .post-card-title {
margin: 12px 12px 6px;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.4;
color: var(--color-dark);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-card-title a {
color: inherit;
text-decoration: none;
transition: color var(--transition);
}
.post-card-title a:hover {
color: var(--color-golden);
} .post-meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin: 6px 12px 14px;
font-size: 0.85rem;
font-weight: 500;
color: var(--color-gray);
}
.post-meta .post-author {
font-weight: 600;
color: var(--color-dark);
text-decoration: none;
transition: color var(--transition);
}
.post-meta .post-author:hover {
color: var(--color-golden);
} .archive-pagination {
padding: 8px 0 64px;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.pagination a,
.pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 14px;
border: 2px solid var(--color-golden);
border-radius: 999px;
background: #fff;
color: var(--color-dark);
font-size: 0.75rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.pagination a:hover {
background: var(--color-golden);
color: #fff;
transform: translateY(-1px);
}
.pagination .current {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
border-color: var(--color-golden);
color: var(--color-golden);
}
.pagination .dots {
min-width: auto;
padding: 0 4px;
border-color: transparent;
background: transparent;
} @media (max-width: 1080px) {
.feature-grid {
grid-template-columns: 1fr;
}
.feature-card {
border-left: 0;
border-top: 1px solid var(--color-light-gray);
}
}
@media (max-width: 900px) {
.card-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.archive-title {
font-size: 2.2rem;
}
.card-grid-4 {
grid-template-columns: 1fr;
}
.pagination a,
.pagination span {
min-width: 36px;
height: 36px;
padding: 0 10px;
font-size: 0.7rem;
}
}