/* Original identities, restored from the live site's supplied brand assets.
   Load after the page styles. Photographs are deliberately left unfiltered. */
:root { --pixel: 'Wye Pixel', monospace; }
.identity { display: inline-flex; align-items: center; flex: none; }
.identity-studio { width: 174px; }
.brand .identity-studio img {
  width: 100%; height: auto; max-width: none; filter: none;
}
.brand .identity-studio .identity-studio-on-dark { display: none; }
:is(.site-footer, .dark, .brand-on-dark) .identity-studio .identity-studio-on-light { display: none; }
:is(.site-footer, .dark, .brand-on-dark) .identity-studio .identity-studio-on-dark { display: block; }
.identity-tech {
  font-family: var(--sans); font-size: 24px; font-weight: 900;
  line-height: 1; letter-spacing: -.055em; white-space: nowrap;
}
.identity-tech > img { width:1.4em; height:auto; flex:none; margin-right:.45em; filter:none; }
.brand .identity-tech > img { width:33px; height:auto; margin-right:12px; filter:none; }
.identity-tech-pixel {
  display: inline-block; width: 7px; height: 7px; margin: 11px 0 0 4px;
  background: #c4502a; flex: none;
}
.identity-five { gap: 10px; }
.brand .identity-five img { width: 44px; height: auto; filter: none; flex: none; }
.identity-five-name {
  font: 400 21px/1.25 var(--pixel); letter-spacing: 0;
  color: #171811; white-space: nowrap;
}
.identity-five-name > span { color: #b63118; }

/* Tech It Easy: the channel’s black, white and red identity. */
.brand-tech {
  --channel-ink: #151617; --channel-paper: #f8f8f5;
  --channel-accent: #d42b30; --channel-line: #d6d7d8;
  --accent: #d42b30; --dark: #151617; --muted: #5c6064;
}
.brand-tech .site-footer { background: #151617; color: #f8f8f5; }
.brand-tech .site-header { background:#111214; color:#f6f6f7; border-bottom-color:#303136; }
.brand-tech .site-header .nav-cta { background:transparent; color:#e1e2e5; border-color:#55575e; border-radius:5px; }
.brand-tech .site-header .nav-cta:hover { background:#292a2e; color:#fff; border-color:#74767e; }
.brand-tech .site-header nav { background:#111214; border-bottom-color:#303136; }
.brand-tech .site-header nav > a:not(.nav-cta):hover { color:#ff858c; }
.brand-tech .site-header .menu-button { border-color:#55575e; border-radius:5px; }
.brand-tech .site-footer p, .brand-tech .footer-bottom { color: #bfc2c5; }
.brand-tech ::selection { background: #f9b6b9; color: #151617; }
.brand-tech .identity-tech-pixel { background: #d42b30; }
.brand-tech .channel-tech-hero {
  background-color: #1c201f;
  background-image: linear-gradient(#f3e9d805 1px, transparent 1px), linear-gradient(90deg, #f3e9d805 1px, transparent 1px);
  background-size: 48px 48px;
}
.brand-tech .channel-tech-hero h1 em {
  font-family: var(--pixel); font-weight: 400; letter-spacing: -.035em;
  color: #eaa687;
}
.brand-tech .channel-tech-hero .eyebrow::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  background: #c4502a; margin-right: 9px; vertical-align: 1px;
}
.brand-tech :focus-visible { outline-color: #d42b30; }
.brand-tech :is(.partner-tech, .kit-tech) {
  --partner-paper: #1c201f; --partner-surface: #252a27;
  --partner-ink: #f3e9d8; --partner-accent: #eaa687;
}

/* 5 by Alex: the actual yellow/red pixel identity, across the channel,
   reading experience, shop, partnerships and printable media kit. */
.brand-five {
  --channel-ink: #171811; --channel-paper: #fbf7e9;
  --channel-accent: #b63118; --channel-line: #d7d0b7;
  --ink: #171811; --paper: #fbf7e9; --accent: #b63118;
  --muted: #5d5b49; --line: #d7d0b7; --dark: #171811;
  --five-yellow: #ffda09; --five-red: #e53025;
}
.brand-five ::selection { background: #ffda09; color: #171811; }
.brand-five :focus-visible { outline-color: #b63118; }
.brand-five .site-header { border-bottom-color: #d7d0b7; }
.brand-five .site-header .nav-cta { border-color: #171811; }
.brand-five .site-header .nav-cta:hover { background: #ffda09; color: #171811; }
.brand-five .site-footer { background: #ffda09; color: #171811; }
.brand-five .site-footer p, .brand-five .footer-bottom { color: #39391f; }
.brand-five .footer-bottom { border-color: #b39a0c; }
.brand-five .button.primary { background: #171811; color: #ffda09; border-color: #171811; }
.brand-five .button.primary:hover { background: #333323; filter: none; }
.brand-five .channel-play { background: #ffda09; color: #171811; }
.brand-five .five-hero-copy h1 em {
  font-family: var(--pixel); font-weight: 400; letter-spacing: -.045em;
  color: #b63118;
}
.brand-five .five-hero-copy h1 em::after { background: #ffda09; }
.brand-five .five-hero-copy > p:not(.eyebrow) { color: #5d5b49; }
.brand-five .five-hero-art {
  background: #ffda09; border-radius: 0;
  background-image: linear-gradient(#17181108 1px, transparent 1px), linear-gradient(90deg, #17181108 1px, transparent 1px);
  background-size: 35px 35px;
}
.brand-five .five-hero-number {
  color: #171811; font-family: var(--pixel); font-weight: 400;
  transform: translateX(-50%); letter-spacing: 0;
}
.brand-five .five-hero-photo { background: #fbf7e9; }
.brand-five .five-hero-photo figcaption { color: #39391f; }
.brand-five .five-ticker [aria-hidden] { color: #b63118; }
.brand-five .five-reading-number { font-family: var(--pixel); font-weight: 400; letter-spacing: -.07em; }
.brand-five .five-reading-number span { font-family: var(--mono); }
.brand-five .five-handwritten { font-family: var(--mono); font-size: .8rem; }
.brand-five .channel-video-meta span, .brand-five .reader-prose .reader-step { color: #a52e18; }
.brand-five .channel-newsletter-title h1 em { color: #b63118; font-family: var(--pixel); font-weight: 400; }
.brand-five :is(.wallpaper-promo, .wallpaper-product-scene, .reader-callout) { background: #fff1a5; }
.brand-five .reader-callout { border-left-color: #e53025; }
.brand-five .reader-callout :is(.eyebrow, p:last-child) { color: #39391f; }
.brand-five .wallpaper-product-scene { border-radius: 0; }
.brand-five :is(.channel-feed-note, .channel-play-note, .reader-byline, .reader-standfirst, .reader-contents a, .reader-contents a span,
  .reader-prose p, .channel-newsletter-content > p, .channel-newsletter-expect p, .wallpaper-unavailable, .wallpaper-product-spec dt,
  .channel-editorial-aside p, .wallpaper-promo-copy > p:not(.eyebrow,.fine)) { color: #5d5b49; }
.brand-five :is(.partner-five, .kit-five) {
  --partner-accent: #b63118; --partner-paper: #fbf7e9;
  --partner-surface: #fff1a5; --partner-line: #d7d0b7;
  --partner-ink: #171811; --partner-muted: #5d5b49;
}
.brand-five .partner-five-intro { background: #ffda09; }
.brand-five .partner-five-intro .eyebrow { color: #a52e18; }
.brand-five .partner-five-intro .partner-time { color: #171811; }
.brand-five :is(.partner-time, .partner-runtime strong) { font-family: var(--pixel); font-weight: 400; }
.brand-five .partner-time > span { font-family: var(--sans); }
.brand-five :is(.partner-five, .kit-five) .button.primary { background: #171811; color: #ffda09; border-color: #171811; }
.brand-five .kit-five-name { font-family: var(--pixel); font-weight: 400; letter-spacing: 0; }
.brand-five .kit-five-name > span { font-family: var(--pixel); font-weight: 400; color: #b63118; }

@media (max-width: 1050px) {
  .identity-five-name { font-size: 18px; }
  .brand .identity-five img { width: 38px; height: auto; }
}
@media (max-width: 800px) {
  .identity-studio { width: 153px; }
  .identity-tech { font-size: 22px; }
}
@media (max-width: 380px) {
  .identity-studio { width: 140px; }
  .identity-tech { font-size: 20px; }
  .brand .identity-tech > img { width:26px; margin-right:8px; }
  .brand-tech .site-header { gap:12px; }
  .brand-tech .menu-button { gap:8px; padding-inline:10px; }
  .identity-five { gap: 7px; }
  .identity-five-name { font-size: 17px; }
  .brand .identity-five img { width: 34px; height: auto; }
}
@media print {
  .brand-five .kit-five { --partner-paper: #fff; --partner-surface: #fff; --partner-accent: #b63118; }
  .brand-tech .kit-tech { --partner-paper: #fff; --partner-surface: #fff; --partner-ink: #171811; --partner-accent: #ad402b; }
}
/* The review chooser uses the same three identities. */
.review-map .grid-3>a:first-child{background:#e9dec9;border-color:#cfc6b5}
.review-map .grid-3>a:nth-child(2){background:#222522;color:#f3e9d8;border-color:#222522}
.review-map .grid-3>a:nth-child(3){background:#ffda09;color:#171811;border-color:#e9c709}
.review-map .grid-3>a:nth-child(3) h2{font-family:var(--pixel);font-weight:400;color:#a52e18;font-size:38px;letter-spacing:0;line-height:1.35}

/* A quiet parent-studio credit beneath the Tech footer identity. */
.brand-tech .footer-top { flex-wrap:wrap; row-gap:24px; }
.brand-tech .footer-channel-brand { display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.brand-tech .footer-channel-owner { display:inline-flex; flex-direction:column; align-items:flex-start; gap:7px; min-height:44px; color:#bfc2c5; font-size:11.5px; line-height:1.5; }
.brand-tech .footer-channel-owner img { display:block; width:108px; height:auto; filter:none; }
.brand-tech .footer-channel-owner:is(:hover,:focus-visible) { color:#f8f8f5; text-decoration:underline; text-underline-offset:4px; }

/* Five keeps the original yellow, ink and small red tally accent. */
.brand-five .site-header, .brand-five .site-header nav { background:#ffda09; color:#171919; }
.brand-five .site-header { border-bottom-color:#17191930; }
.brand-five .site-header .nav-cta { background:#171919; color:#ffda09; }
.brand-five .site-header .nav-cta:hover { background:#fbf7e9; color:#171919; }
.brand-five .site-header nav > a:not(.nav-cta):hover { text-decoration:underline; text-underline-offset:6px; }
.brand-five .site-footer .footer-top { flex-wrap:wrap; row-gap:24px; }
.brand-five .footer-channel-brand { display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.brand-five .footer-channel-owner { display:inline-flex; flex-direction:column; align-items:flex-start; gap:8px; min-height:44px; color:#39391f; font-size:11.5px; line-height:1.5; }
.brand-five .footer-channel-owner img { display:block; width:108px; height:auto; filter:none; }
.brand-five .footer-channel-owner:is(:hover,:focus-visible) { color:#171919; text-decoration:underline; text-underline-offset:4px; }