/* Bernard Engine, version 1975 (bernardengine.com/70s/): the same page, redecorated. Loaded after site.css.
   Orange shag carpet on the walls, wood panelling, 70s stripes, lava lamps, a sunburst behind the logo,
   wooden TV cabinets around the photos. Static, no script; animations stop for prefers-reduced-motion. */
:root { --bg: #2A1206; --panel: #3A1A08; --line: #6B3A12; --text: #FFF1D6; --muted: #F2C98A; --dim: #C9965A;
  --accent: #FFB627; --accent-ink: #2A1206; --rust: #C2410C; --avocado: #6B7A2A; --mustard: #D9A21B; }
body.seventies { background: #5A2408 url("/img/70s/moquette.jpg") repeat; background-size: 360px; color: var(--text); }
.seventies a:hover { color: #FFD36B; }

/* Fonts: a fat 1970s serif where the system has one (Cooper Black ships with Office), else a bold Georgia. */
.seventies h1, .seventies h2, .seventies .brand b, .seventies .plan .price, .seventies .rule h3, .seventies .card h3 {
  font-family: "Cooper Black", "Cooper Std", "Cooper", "Bookman Old Style", Georgia, serif; font-weight: 900; letter-spacing: -.5px; }
.seventies h1 .serif, .seventies h2 .serif { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; color: #FFE2A8; }
.seventies h1 { text-shadow: 3px 3px 0 #7C2D12, 6px 6px 0 rgba(0,0,0,.35); }
.seventies h2 { text-shadow: 2px 2px 0 #7C2D12; }
.seventies .k { color: #FFD08A; }

/* Wood panelling for the header and every other section. */
.seventies .site-header { background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, rgba(0,0,0,0) 2px 140px),
    repeating-linear-gradient(90deg, #6B3410 0 9px, #5E2C0C 9px 17px, #74391A 17px 31px, #5A2A0B 31px 40px);
  border-bottom: 4px solid #2A1206; backdrop-filter: none; }
.seventies .links a { color: #FFE2A8; }
.seventies section.block:nth-of-type(even), .seventies .foot {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 3px, rgba(0,0,0,0) 3px 180px),
    repeating-linear-gradient(90deg, #5E2C0C 0 11px, #6B3410 11px 23px, #57290A 23px 37px, #714019 37px 52px);
}
.seventies section.block, .seventies .oss-top { border-top: 0; position: relative; }
/* The stripes of every 1970s kitchen, between sections. */
.seventies section.block::before, .seventies .oss-top::before, .seventies .foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px;
  background: linear-gradient(to bottom, #F3B61F 0 20%, #E8731A 20% 40%, #C2410C 40% 60%, #8A3A0E 60% 80%, #4A1D0A 80% 100%); }
.seventies .foot { position: relative; padding-top: 70px; }

/* Readable panels on the carpet. */
.seventies .grid, .seventies .rules { background: #8A3A0E; border-color: #8A3A0E; }
.seventies .card, .seventies .rule, .seventies .plan, .seventies .vs div, .seventies .wf, .seventies .list li,
.seventies .facts div, .seventies .oss-points li {
  background: rgba(42, 18, 6, .88); }
.seventies .list li { padding-left: 14px; border-bottom-color: #8A3A0E; }
.seventies .wf { border-color: #D9A21B; border-width: 3px; border-radius: 22px; }
.seventies p.intro, .seventies .hero p.lead { background: rgba(42,18,6,.78); padding: 14px 18px; border-radius: 14px; }
.seventies .btn-main { background: #FFB627; border-radius: 40px; box-shadow: 3px 3px 0 #7C2D12; }
.seventies .btn-ghost { background: rgba(42,18,6,.8); border: 2px solid #FFB627; border-radius: 40px; }
.seventies .badge-oss { background: rgba(42,18,6,.85); border-color: #FFB627; }
.seventies .oss-top { background: rgba(42, 18, 6, .55); }
.seventies .film { border: 3px solid #D9A21B; border-radius: 22px; }
.seventies .chip { background: rgba(42,18,6,.85); border-color: #D9A21B; }

/* The sunburst behind the t-shirt logo, turning slowly. */
.seventies .hero-top .hero-mark.tee { position: relative; inset: auto; top: auto; right: auto; isolation: isolate; }
.seventies .hero-top .hero-mark.tee::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 46%;
  width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, #F3B61F 0deg 9deg, #E8731A 9deg 18deg, #C2410C 18deg 27deg, #E8731A 27deg 36deg);
  border-radius: 50%; -webkit-mask: radial-gradient(circle, #000 0 45%, transparent 70%); mask: radial-gradient(circle, #000 0 45%, transparent 70%);
  opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .seventies .hero-top .hero-mark.tee::before { animation: sunburst 60s linear infinite; }
  @keyframes sunburst { to { transform: translate(-50%, -50%) rotate(360deg); } }
}

/* Wooden TV cabinets around the photos, with two knobs. */
.seventies .archive { background: linear-gradient(135deg, #7A4419, #4E240A 60%, #6B3410); border: 0; border-radius: 26px;
  padding: 16px 16px 0; box-shadow: 0 10px 0 #2A1206, 0 18px 30px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,220,160,.25); }
.seventies .archive .crt { margin: 0; border: 6px solid #1A0C04; border-radius: 30px / 22px; }
.seventies .archive figcaption { border-top: 0; color: #FFE2A8; position: relative; padding: 12px 64px 14px 6px; }
.seventies .archive figcaption::after { content: ""; position: absolute; right: 8px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F2E3C2, #8C7A5A 60%, #3A2A14);
  box-shadow: -28px 0 0 0 #B79C70, -28px 0 0 2px #3A2A14; }
.seventies .shot { border: 3px solid #D9A21B; border-radius: 16px; }

/* Lava lamps on both sides of the screen (wide screens only). */
.lava { position: fixed; bottom: 12px; z-index: 20; width: 86px; pointer-events: none; filter: drop-shadow(0 0 22px rgba(255,120,30,.55)); }
.lava.left { left: 14px; } .lava.right { right: 14px; }
.lava svg { width: 100%; height: auto; display: block; }
.lava .blob { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .lava .b1 { animation: rise1 13s ease-in-out infinite; }
  .lava .b2 { animation: rise2 17s ease-in-out infinite; }
  .lava .b3 { animation: rise3 11s ease-in-out infinite; }
  .lava .b4 { animation: rise2 19s ease-in-out -7s infinite; }
  .lava.right .b1 { animation-delay: -5s; } .lava.right .b2 { animation-delay: -9s; } .lava.right .b3 { animation-delay: -3s; }
  @keyframes rise1 { 0%, 100% { transform: translate(0, 0) scale(1, 1); } 50% { transform: translate(3px, -150px) scale(.8, 1.25); } }
  @keyframes rise2 { 0%, 100% { transform: translate(0, 0) scale(1); } 45% { transform: translate(-4px, -120px) scale(1.2, .85); } 70% { transform: translate(2px, -165px) scale(.9, 1.1); } }
  @keyframes rise3 { 0%, 100% { transform: translate(0, -20px) scale(1); } 50% { transform: translate(2px, -95px) scale(1.15, .9); } }
}
@media (max-width: 1360px) { .lava { display: none; } }

/* Back to 2026. */
.timewarp { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 30; background: #FFB627; color: #2A1206;
  font: 600 13px "Geist", sans-serif; padding: 10px 18px; border-radius: 40px; box-shadow: 3px 3px 0 #7C2D12; }
.timewarp:hover { color: #2A1206; background: #FFD36B; }
.seventies .hero .k, .seventies section.block .k, .seventies .oss-top .k { display: table; background: rgba(42,18,6,.85); padding: 6px 10px; border-radius: 6px; }