/*
 * Gold look (Customize > JLO design > Layout > Overall look = Gold).
 * The look of jennifer-lopez.net: white cards with a thin gold line and corner ornaments,
 * picture left / text right in the news, Bodoni titles, light Jost text, spaced gold capitals.
 * Colours and pictures come from Customize > JLO design > Gold look (CSS variables --g-*).
 */

body.jlo-look-gold {
  --g-display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --g-caps: "Jost", Futura, "Century Gothic", system-ui, sans-serif;
  --g-body: "Jost", Futura, "Century Gothic", system-ui, sans-serif;
  color: var(--g-text);
  font-family: var(--g-body);
  font-weight: 300;
}

/* ---------- Shared type ---------- */
.jlo-look-gold .jlo-kicker {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
  color: var(--g-gold); text-decoration: none; background: none; padding: 0; border: 0;
  font: 600 10.5px/1 var(--g-caps); font-stretch: normal; letter-spacing: .28em; text-transform: uppercase;
}
.jlo-look-gold .jlo-kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .8; }
.jlo-look-gold .jlo-headline {
  margin: 0; font-family: var(--g-display); font-weight: 500; text-transform: none;
  line-height: 1.04; letter-spacing: -.012em; text-wrap: balance; color: var(--g-head);
}
.jlo-look-gold .jlo-headline a {
  color: inherit; text-decoration: none;
  background: linear-gradient(var(--g-gold), var(--g-gold)) 0 100% / 0 1px no-repeat;
  transition: background-size .5s ease;
}
.jlo-look-gold .jlo-headline a:hover { background-size: 100% 1px; }
.jlo-look-gold .jlo-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  color: var(--g-smoke); font: 400 12px/1.4 var(--g-body); letter-spacing: .06em; text-transform: none;
}
.jlo-look-gold .jlo-meta a { color: inherit; text-decoration: none; }
.jlo-look-gold .jlo-more-link {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 4px;
  font: 600 10.5px/1 var(--g-caps); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var(--g-gold);
  background: none; border: 0; padding: 0;
}
.jlo-look-gold .jlo-more-link::after { content: ""; width: 28px; height: 1px; background: currentColor; transition: width .4s ease; }
.jlo-look-gold .jlo-more-link:hover { color: var(--g-head); }
.jlo-look-gold .jlo-more-link:hover::after { width: 44px; }

/* Section heading ("Latest News"). */
.jlo-look-gold .jlo-sec-head__title { font-family: var(--g-display); font-weight: 500; text-transform: none; color: var(--g-head); }

/* ---------- News cards: picture left, text right ---------- */
.jlo-look-gold .jlo-news { display: grid; gap: 32px; }
.jlo-look-gold .jlo-news-item.jlo-gold-card {
  position: relative; padding: 40px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; align-items: start;
  background: var(--g-card); border: 1px solid var(--g-line);
  transition: border-color .4s ease;
}
.jlo-look-gold .jlo-news-item.jlo-gold-card + .jlo-news-item { padding-top: 40px; }
.jlo-look-gold .jlo-news-item.jlo-gold-card + .jlo-news-item::before { display: block; }
.jlo-look-gold .jlo-news-item.jlo-gold-card:hover { border-color: var(--g-line-strong); }
.jlo-look-gold .jlo-gold-card.jlo-gold-card--nopic { grid-template-columns: minmax(0, 1fr); }
/* One layer with a different ornament in each corner. */
.jlo-look-gold .jlo-gold-card::before {
  content: ""; position: absolute; inset: 5px; z-index: 2; pointer-events: none; border: 0; margin: 0; height: auto; width: auto;
  background:
    var(--g-nc-tl) top left     / var(--g-nc-size) no-repeat,
    var(--g-nc-tr) top right    / var(--g-nc-size) no-repeat,
    var(--g-nc-bl) bottom left  / var(--g-nc-size) no-repeat,
    var(--g-nc-br) bottom right / var(--g-nc-size) no-repeat;
}
.jlo-look-gold .jlo-gold-card::after { content: none; display: none; }
.jlo-look-gold .jlo-gold-card .jlo-news-item__frame {
  position: relative; display: block; padding: 6px; border: 1px solid var(--g-line); border-radius: 0; overflow: visible;
  transition: border-color .4s ease;
}
.jlo-look-gold .jlo-gold-card:hover .jlo-news-item__frame { border-color: var(--g-line-strong); }
.jlo-look-gold .jlo-gold-card .jlo-news-item__frame .ph,
.jlo-look-gold .jlo-gold-card .jlo-news-item__frame > img { display: block; width: 100%; aspect-ratio: var(--g-pic-ratio); object-fit: cover; position: relative; overflow: hidden; }
.jlo-look-gold .jlo-gold-card .jlo-news-item__frame .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jlo-look-gold .jlo-gold-card .jlo-news-item__frame::before,
.jlo-look-gold .jlo-gold-card .jlo-news-item__frame::after {
  content: ""; position: absolute; z-index: 5; width: 38px; height: 38px; pointer-events: none;
  background: var(--g-pic-corner) center / contain no-repeat;
}
.jlo-look-gold .jlo-gold-card .jlo-news-item__frame::before { top: 12px; left: 12px; }
.jlo-look-gold .jlo-gold-card .jlo-news-item__frame::after { bottom: 12px; right: 12px; transform: rotate(180deg); }
.jlo-look-gold .jlo-gold-card .jlo-news-item__text { display: grid; gap: 14px; align-content: start; min-width: 0; }
.jlo-look-gold .jlo-gold-card .jlo-headline { font-size: clamp(28px, 2.9vw, 40px); }
.jlo-look-gold .jlo-gold-card .jlo-news-item__head,
.jlo-look-gold .jlo-gold-card .jlo-news-item__body { padding-left: 0; }
.jlo-look-gold .jlo-gold-card .jlo-news-item__body {
  display: grid; gap: 14px; margin-top: 4px; max-width: 62ch;
  color: var(--g-text); font: 300 17px/1.65 var(--g-body);
}
.jlo-look-gold .jlo-gold-card .jlo-news-item__body p { margin: 0; }
.jlo-look-gold .jlo-gold-card .jlo-news-item__body > p:first-child::first-letter {
  float: left; font: italic 400 3.4em/.8 var(--g-display); color: var(--g-gold); margin: .08em .08em 0 0;
  -webkit-text-stroke: 0; text-shadow: none; background: none; padding: 0;
}
@media (max-width: 760px) {
  .jlo-look-gold .jlo-news-item.jlo-gold-card { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px 20px; }
  .jlo-look-gold .jlo-gold-card .jlo-news-item__frame .ph,
  .jlo-look-gold .jlo-gold-card .jlo-news-item__frame > img { aspect-ratio: 16 / 10; }
  body.jlo-look-gold { --g-nc-size: 44px; }
}

/* ---------- Single posts and pages: the same card, no black L ---------- */
.jlo-look-gold .jlo-panel { padding: 0; }
.jlo-look-gold .jlo-panel::after { content: none; display: none; }
.jlo-look-gold .jlo-panel > .jlo-panel__inner {
  position: relative; padding: 48px clamp(20px, 4vw, 56px);
  background: var(--g-card); border: 1px solid var(--g-line); border-radius: 0; box-shadow: none; color: var(--g-text);
}
.jlo-look-gold .jlo-panel > .jlo-panel__inner::before,
.jlo-look-gold .jlo-panel > .jlo-panel__inner::after {
  content: ""; position: absolute; z-index: 2; width: 34px; height: 34px; pointer-events: none; opacity: .9;
}
.jlo-look-gold .jlo-panel > .jlo-panel__inner::before { top: 5px; left: 5px; background: var(--g-box-tl) center / contain no-repeat; }
.jlo-look-gold .jlo-panel > .jlo-panel__inner::after { bottom: 5px; right: 5px; background: var(--g-box-br) center / contain no-repeat; }
.jlo-look-gold .entry-content { font: 300 17px/1.75 var(--g-body); color: var(--g-text); }
.jlo-look-gold .entry-title, .jlo-look-gold .jlo-article .jlo-headline { font-family: var(--g-display); font-weight: 500; text-transform: none; color: var(--g-head); }

/* ---------- Sidebar boxes ---------- */
.jlo-look-gold .jlo-sidebar { display: grid; gap: 30px; }
.jlo-look-gold .jlo-box {
  position: relative; padding: 24px 22px 30px; text-align: left;
  background: var(--box-bg-own, var(--g-card)); color: var(--box-fg-own, var(--g-text));
  border: 1px solid var(--box-bc-own, var(--g-line)); border-radius: 0; box-shadow: none;
  transition: border-color .4s ease;
}
.jlo-look-gold .jlo-box:hover { border-color: var(--box-bc-own, var(--g-line-strong)); }
.jlo-look-gold .jlo-box > .jlo-corner { display: none; }
.jlo-look-gold .jlo-box::before,
.jlo-look-gold .jlo-box::after {
  content: ""; position: absolute; z-index: 2; width: 34px; height: 34px; pointer-events: none; opacity: .9;
}
.jlo-look-gold .jlo-box::before { top: 5px; left: 5px; background: var(--g-box-tl) center / contain no-repeat; }
.jlo-look-gold .jlo-box::after { bottom: 5px; right: 5px; background: var(--g-box-br) center / contain no-repeat; }
.jlo-look-gold .jlo-box__head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 0 44px; }
.jlo-look-gold .jlo-box__kicker {
  margin: 0; font: 600 9.5px/1 var(--g-caps); font-stretch: normal; letter-spacing: .3em; text-transform: uppercase;
  color: var(--box-accent-own, var(--g-gold));
}
.jlo-look-gold .jlo-box .widget-title {
  margin: 0; font: 500 24px/1.05 var(--g-display); letter-spacing: -.005em; text-transform: none;
  color: var(--box-title-own, var(--g-head));
}
.jlo-look-gold .jlo-box .widget-title a { color: inherit; text-decoration: none; }
.jlo-look-gold .jlo-box__divider { display: flex; justify-content: center; margin: 8px 0 14px; }
.jlo-look-gold .jlo-box__divider img, .jlo-look-gold .jlo-box__divider i { display: none; }
.jlo-look-gold .jlo-box__divider::before { content: ""; width: 120px; height: 16px; background: var(--g-rule) center / contain no-repeat; }
.jlo-look-gold .jlo-box__body { padding: 0 0 6px; font: 300 15px/1.7 var(--g-body); text-align: left; color: inherit; }
.jlo-look-gold .jlo-box a { color: inherit; }
.jlo-look-gold .jlo-box--dark { --box-ink: var(--g-text); --box-paper: var(--g-card); }

/* The top-right icon of a box (per box type, or its own: Appearance > Widgets). */
.jlo-box__icon {
  position: absolute; z-index: 3; top: 12px; right: 12px; width: var(--g-icon-size, 45px); height: var(--g-icon-size, 45px);
  object-fit: contain; pointer-events: none;
}

/* Welcome note. */
.jlo-look-gold .jlo-welcome__msg p { margin: 0 0 12px; color: inherit; font-size: 15px; line-height: 1.7; }
.jlo-look-gold .jlo-welcome__msg p:last-child { margin-bottom: 0; }
.jlo-look-gold .jlo-welcome__msg > p:first-child::first-letter {
  float: left; margin: 6px 10px 0 0; font: italic 400 54px/.8 var(--g-display); color: var(--box-accent-own, var(--g-gold));
}
.jlo-look-gold .jlo-welcome__sig { margin: 0; padding-top: 14px; text-align: right; font: italic 400 17px/1.3 var(--g-display); color: var(--box-accent-own, var(--g-gold)); }

/* Trending list: roman numerals in gold. */
.jlo-look-gold .jlo-widget--trending ol, .jlo-look-gold .jlo-widget--trending ul { font-family: var(--g-display); }

/* ---------- Picture of a post or page: soft fade + thin gold arch ---------- */
.jlo-look-gold .jlo-article__image {
  position: relative; overflow: hidden; margin: 28px 0 36px; isolation: isolate;
  height: clamp(280px, 48vw, var(--g-img-h, 620px));
  background: var(--g-card);
  box-shadow: 0 40px 90px -40px rgba(139, 94, 26, .3), 0 0 0 1px var(--g-line);
}
.jlo-look-gold .jlo-article__image img {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none;
  object-fit: cover; filter: saturate(.9) contrast(1.04);
}
.jlo-look-gold .jlo-article__image::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--g-fade) 72%, transparent) 70%, color-mix(in srgb, var(--g-fade) 95%, transparent) 100%);
}
.jlo-look-gold .jlo-article__image::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  inset: 14px 14px 14px;
  border: 1px solid var(--g-line-strong); border-bottom: 0;
  border-radius: 50% 50% 0 0 / 70px 70px 0 0;
}
.jlo-look-gold .jlo-article__head { display: grid; gap: 14px; }
.jlo-look-gold .jlo-article__head .jlo-headline { font-size: clamp(38px, 5vw, 68px); }
.jlo-look-gold .jlo-article .jlo-kicker { background: none; padding: 0; }

/* Site name in the menu bar uses the gold fonts. */
.jlo-look-gold .jlo-wordmark { --g-display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif; }
.jlo-look-gold .jlo-nav a { font-family: var(--g-caps); font-weight: 500; font-stretch: normal; letter-spacing: .24em; }