:root{
  --navy:#002d62;--navy-dark:#001d40;--red:#d71920;--cream:#ffffff;--white:#fff;--text:#17202a;--muted:#667085;--line:#d7dde5;--shadow:0 14px 35px rgba(0,0,0,.14)
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--cream);color:var(--text)}
.header{background:#fff;text-align:center;padding:22px 20px 30px;border-bottom:5px solid var(--navy)}
.site-nav{max-width:1200px;margin:0 auto 18px;text-align:left}
.home-link{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:700;font-size:14px;text-decoration:none;padding:10px 14px;border:1px solid #d8e0ea;border-radius:5px;background:#f7f9fc}
.home-link:hover,.home-link:focus-visible{background:var(--navy);color:#fff}
.header a:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.logo{width:min(255px,62vw);height:auto;display:block;margin:0 auto 14px}
.header h1{margin:0;color:var(--navy);font-family:"Arial Narrow",Impact,Haettenschweiler,sans-serif;font-size:clamp(42px,7vw,76px);letter-spacing:2px;line-height:.95}
.header .rule{width:86px;height:5px;background:var(--red);border-radius:99px;margin:17px auto 0}
.wrap{max-width:1200px;margin:0 auto;padding:46px 22px 76px}
.staff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 30px}
.card-wrap{perspective:1200px}
.flip-card{width:100%;aspect-ratio:4/5;position:relative;cursor:pointer;outline:none}
.flip-inner{position:absolute;inset:0;transition:transform .62s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
@media (hover:hover) and (pointer:fine){.card-wrap:hover .flip-inner,.card-wrap:focus-within .flip-inner{transform:rotateY(180deg)}}
@media (hover:none),(pointer:coarse){.card-wrap.flipped .flip-inner{transform:rotateY(180deg)}}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;overflow:hidden;background:#d9dee5;box-shadow:var(--shadow)}
.photo-stage{position:absolute;inset:0;overflow:hidden;background:#d9dee5}
.photo-stage img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center center}
.front:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.24),transparent 34%);pointer-events:none}
.flip-hint{position:absolute;z-index:3;bottom:12px;right:12px;background:rgba(0,45,98,.92);color:#fff;border-radius:20px;padding:6px 10px;font-size:11px;font-weight:700;letter-spacing:.45px}
.back{transform:rotateY(180deg)}
.back .overlay{position:absolute;inset:0;background:rgba(0,45,98,.84);display:flex;justify-content:center;align-items:center;text-align:center;padding:32px;color:#fff;z-index:2}
.back-text{font-size:14px);line-height:1.35;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.25);white-space:pre-line}
.info{text-align:center;padding:17px 8px 4px}
.info h2{margin:0;color:var(--navy);font-size:22px}
.info .title{margin:5px 0 13px;color:var(--muted);font-weight:700;line-height:1.35}
.links{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.links a{color:var(--navy);font-size:14px;font-weight:700;text-decoration:none;border:1px solid #ccd3dc;border-radius:7px;padding:8px 11px;background:#fff}
.links a:hover{background:#f2f5f8}
.empty,.loading{text-align:center;padding:70px 20px;color:var(--muted);grid-column:1/-1}
footer{text-align:center;padding:26px;color:#777;font-size:12px}

/* Admin */
.admin-shell{max-width:1200px;margin:0 auto;padding:30px 22px 70px}
.admin-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.admin-top h2{margin:0;color:var(--navy)}
.status{font-size:13px;font-weight:700;color:#19703c;min-height:18px}
.controls{display:flex;gap:8px;flex-wrap:wrap}
button,.button{border:0;border-radius:8px;padding:10px 14px;font:inherit;font-weight:700;cursor:pointer;background:var(--navy);color:#fff;text-decoration:none}
button:hover,.button:hover{filter:brightness(1.1)}
button.secondary{background:#e8ebef;color:var(--navy)}
button.danger{background:#b51e24}
button.small{font-size:12px;padding:7px 10px}
.editor-row{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:0 8px 18px rgba(0,0,0,.06)}
.dragbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;padding:9px 11px;background:#f4f6f8;border-radius:8px;color:var(--navy);font-weight:800;cursor:grab}
.dragbar:active{cursor:grabbing}.editor-row.dragging{opacity:.45}.editor-row.drag-over{outline:3px solid rgba(0,45,98,.25)}
.editor-grid{display:grid;grid-template-columns:150px 1fr 1fr;gap:14px;align-items:start}
.preview{width:150px;aspect-ratio:4/5;border-radius:9px;overflow:hidden;background:#ddd;position:relative}
.preview img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center}
label{display:block;font-size:12px;font-weight:800;color:#49515a;margin:0 0 5px}
input,textarea{width:100%;border:1px solid #cfd6df;border-radius:7px;padding:10px;font:inherit;background:#fff;color:var(--navy);-webkit-text-fill-color:var(--navy)}
textarea{min-height:92px;resize:vertical;white-space:pre-wrap}
.full{grid-column:2/4}
.crop-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px}
.crop-control{background:#f6f7f9;border:1px solid #e1e5ea;border-radius:8px;padding:9px}
.crop-control input{padding:0;border:0}
.crop-value{display:inline-block;font-size:11px;color:var(--muted);margin-left:5px}
.row-actions{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap;margin-top:13px}
.login-card{max-width:440px;margin:70px auto;background:#fff;border-radius:14px;padding:28px;box-shadow:var(--shadow)}
.login-card h2{margin-top:0;color:var(--navy)}
.login-card p{color:var(--muted);line-height:1.5}
.login-card button{width:100%;margin-top:12px}.error{color:#a61b22;font-weight:700;font-size:13px;margin-top:10px}
.hidden{display:none!important}
@media(max-width:900px){.staff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-grid{grid-template-columns:120px 1fr}.full{grid-column:2}.preview{width:120px}.crop-controls{grid-template-columns:1fr}}
@media(max-width:620px){.staff-grid{grid-template-columns:1fr}.editor-grid{grid-template-columns:1fr}.full{grid-column:auto}.preview{width:140px}.admin-top{align-items:flex-start}}

/* Kernels official-site-inspired finishing details */
.info h2{font-weight:800}

/* Official Kernels-inspired public page styling */
/* Does not affect the admin editor */

/* Page background */
body:has(#staffGrid) {
  background: #f3f4f6;
}

/* Team-style header */
body:has(#staffGrid) .header {
  background: #002d62;
  border-bottom: 5px solid #d71920;
  padding: 18px 20px 34px;
}

/* Navigation */
body:has(#staffGrid) .site-nav {
  max-width: 1200px;
  margin: 0 auto 22px;
}

body:has(#staffGrid) .home-link {
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  border-radius: 3px;
}

body:has(#staffGrid) .home-link:hover {
  background: #d71920;
  border-color: #d71920;
}

/* Logo and heading */
body:has(#staffGrid) .logo {
  width: min(190px, 48vw);
  margin-bottom: 20px;
}

body:has(#staffGrid) .header h1 {
  color: #fff;
  font-size: clamp(36px, 5vw, 58px);
  letter-spacing: 2px;
}

body:has(#staffGrid) .header .rule {
  background: #d71920;
  width: 100px;
  border-radius: 0;
}

/* Staff content area */
body:has(#staffGrid) .wrap {
  background: #fff;
  max-width: 1240px;
  padding: 45px 30px 75px;
  margin: 30px auto 45px;
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
}

/* Footer */
body:has(#staffGrid) footer {
  background: #002d62;
  border-top: 5px solid #d71920;
  color: #fff;
  padding: 30px 20px;
}

/* Fix fun-fact font typo */
.back-text {
  font-size: 14px;
}

@media (max-width: 620px) {
  body:has(#staffGrid) .wrap {
    margin: 0 auto;
    padding: 30px 18px 55px;
    box-shadow: none;
  }
}

.links a{border-radius:4px}
.face{border-radius:8px}
footer{background:var(--navy);color:#fff}
/* Smaller font for employee fun facts */
.card-back,
.flip-card-back {
  font-size: 14px;
  line-height: 1.35;
}

/* Kernels stadium background with green overlay */
body:has(#staffGrid) {
  background: #fff;
}

/* Stadium photo behind employee cards */
body:has(#staffGrid) .wrap {
  max-width: none;
  margin: 0;
  padding: 65px max(22px, calc((100vw - 1200px)/2)) 85px;
  background:
  
   linear-gradient(
  to bottom,
  rgba(100, 180, 45, 0.15) 0%,
  rgba(70, 160, 25, 0.35) 45%,
  rgba(25, 85, 20, 0.85) 100%
),

    url("/stadium-background.png") center center / cover no-repeat;
  box-shadow: none;
}

/* Keep employee information readable */
body:has(#staffGrid) .info h2 {
  color: #002d62;
}

body:has(#staffGrid) .info .title {
  color: #17202a;
}

/* Mobile styling */
@media (max-width: 620px) {
  body:has(#staffGrid) .wrap {
    padding: 35px 18px 55px;
    background-position: center top;
  }
}

/* Stadium background correction */
body:has(#staffGrid) .wrap {
  background-image:
    linear-gradient(
      to bottom,
      rgba(65, 150, 25, 0.65) 0%,
      rgba(45, 125, 20, 0.75) 50%,
      rgba(15, 70, 15, 0.92) 100%
    ),
    url("/fo_background.png");

  background-size: 100% 100%, 100% auto;
  background-position: center top, center top;
  background-repeat: no-repeat, repeat-y;
  background-color: #286b20;
}

/* Front Office background and collective staff container */

/* Show stadium photo once, without repeating */
body:has(#staffGrid) .wrap {
  background-image:
    linear-gradient(
      to bottom,
      rgba(65, 150, 25, 0.65) 0%,
      rgba(45, 125, 20, 0.75) 50%,
      rgba(15, 70, 15, 0.92) 100%
    ),
    url("/fo_background.png");

  background-size: 100% 100%, 100% auto;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-color: #286b20;
}

/* One white box around all employees */
body:has(#staffGrid) .staff-grid {
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid #fff;
  border-radius: 12px;
  padding: 35px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.20);
}

/* Mobile adjustments */
@media (max-width: 620px) {
  body:has(#staffGrid) .staff-grid {
    padding: 18px;
    border-radius: 8px;
  }
}

/* New Front Office background */
body:has(#staffGrid) .wrap {
  background-image: url("/FOFO.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #ffffff;
}

/* Keep the employee section together */
body:has(#staffGrid) .staff-grid {
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid #ffffff;
  border-radius: 12px;
  padding: 35px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.20);
}

@media (max-width: 620px) {
  body:has(#staffGrid) .staff-grid {
    padding: 18px;
  }
}


/* Front Office photo with green gradient */
body:has(#staffGrid) .wrap {
  background-image:
    linear-gradient(
  to bottom,
  rgba(35, 115, 15, 0.88) 0%,
  rgba(30, 100, 15, 0.82) 50%,
  rgba(10, 65, 15, 0.95) 100%
),
    url("/FOFO.png") !important;

  background-size: 100% 100%, 100% auto;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-color: #286b20;
}

/* Final Front Office green baseball background */
body:has(#staffGrid) .wrap {
  background: #064b25 url("/front-office-background.png") center top / 100% 100% no-repeat !important;
}

/* Keep the white box around all employees */
body:has(#staffGrid) .staff-grid {
  background: rgba(255, 255, 255, 0.94);
  border: 2px solid #ffffff;
  border-radius: 12px;
  padding: 35px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.20);
}

@media (max-width: 620px) {
  body:has(#staffGrid) .staff-grid {
    padding: 18px;
  }
}

/* =====================================
   KERNELS FRONT OFFICE - NEW DESIGN
   ===================================== */

/* Main page background */
body:has(#staffGrid) {
  background: #002d62;
}

/* Thin red header */
body:has(#staffGrid) .header {
  background: #d71920;
  padding: 0;
  border-bottom: 6px solid #008c45;
}

/* Header layout */
body:has(#staffGrid) .top-banner {
  max-width: 1400px;
  min-height: 88px;
  margin: 0 auto;
  padding: 12px 30px;
  display: flex;
  align-items: center;
  gap: 25px;
}

/* Smaller Kernels logo */
body:has(#staffGrid) .top-banner .logo {
  width: 115px;
  height: auto;
  margin: 0;
}

/* Back to home link */
body:has(#staffGrid) .home-link {
  background: transparent;
  color: #ffffff;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.55);
  border-radius: 0;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

body:has(#staffGrid) .home-link:hover {
  background: rgba(0,0,0,.12);
}

/* Front Office title area */
body:has(#staffGrid) .page-heading {
  background: #002d62;
  text-align: center;
  padding: 45px 20px 30px;
}

body:has(#staffGrid) .page-heading h1 {
  color: #ffffff;
  font-family: Impact, "Arial Narrow", sans-serif;
  font-size: clamp(44px, 7vw, 78px);
  letter-spacing: 3px;
  line-height: 1.1;
  margin: 0;
}

body:has(#staffGrid) .page-heading .rule {
  width: 110px;
  height: 5px;
  background: #d71920;
  margin: 20px auto 0;
}

/* Navy background with subtle texture */
body:has(#staffGrid) .wrap {
  max-width: none;
  margin: 0;
  padding: 20px max(22px, calc((100vw - 1200px)/2)) 80px;

  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(255,255,255,.055) 0 2px,
      transparent 3px
    ) 0 0 / 28px 28px,
    linear-gradient(
      135deg,
      #002d62 0%,
      #003c78 45%,
      #001d40 100%
    ) !important;

  box-shadow: none;
}

/* One white container for all staff */
body:has(#staffGrid) .staff-grid {
  background: #ffffff;
  border: 1px solid #e4e8ed;
  border-radius: 14px;
  padding: 35px;
  box-shadow: 0 14px 35px rgba(0,0,0,.22);
}

/* Keep staff names and titles clean */
body:has(#staffGrid) .info h2 {
  color: #002d62;
}

body:has(#staffGrid) .info .title {
  color: #56606c;
}

/* Footer */
body:has(#staffGrid) footer {
  background: #001d40;
  border-top: 4px solid #008c45;
  color: #ffffff;
}

/* Mobile layout */
@media (max-width: 620px) {
  body:has(#staffGrid) .top-banner {
    min-height: 68px;
    padding: 10px 15px;
    gap: 12px;
  }

  body:has(#staffGrid) .top-banner .logo {
    width: 80px;
  }

  body:has(#staffGrid) .home-link {
    font-size: 11px;
    padding: 8px 10px;
  }

  body:has(#staffGrid) .page-heading {
    padding: 32px 15px 25px;
  }

  body:has(#staffGrid) .wrap {
    padding: 15px 12px 50px;
  }

  body:has(#staffGrid) .staff-grid {
    padding: 18px;
    border-radius: 9px;
  }
}


/* FRONT OFFICE - Header and title refinements */

/* Smaller red top banner */
body:has(#staffGrid) .header {
  border-bottom: 4px solid #ffffff;
}

body:has(#staffGrid) .top-banner {
  min-height: 58px;
  padding: 6px 22px;
  gap: 14px;
}

/* Smaller Kernels logo */
body:has(#staffGrid) .top-banner .logo {
  width: 76px;
}

/* Smaller back-to-home link */
body:has(#staffGrid) .home-link {
  font-size: 11px;
  padding: 6px 12px;
}

/* Make title blend into the same background as staff */
body:has(#staffGrid) .page-heading {
  background: transparent;
  padding: 42px 20px 20px;
}

/* Continue navy texture behind title and staff */
body:has(#staffGrid) {
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(255,255,255,.055) 0 2px,
      transparent 3px
    ) 0 0 / 28px 28px,
    linear-gradient(
      135deg,
      #002d62 0%,
      #003c78 45%,
      #001d40 100%
    );
}

body:has(#staffGrid) .wrap {
  background: transparent !important;
}

/* Bigger, wider athletic-style title */
body:has(#staffGrid) .page-heading h1 {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(56px, 9vw, 112px);
  font-weight: 900;
  letter-spacing: 5px;
  transform: scaleX(1.12);
  transform-origin: center;
}

/* White and red title underline */
body:has(#staffGrid) .page-heading .rule {
  width: 180px;
  height: 5px;
  background: #d71920;
}

/* Mobile adjustments */
@media (max-width: 620px) {
  body:has(#staffGrid) .top-banner {
    min-height: 52px;
    padding: 6px 12px;
  }

  body:has(#staffGrid) .top-banner .logo {
    width: 65px;
  }

  body:has(#staffGrid) .home-link {
    font-size: 10px;
    padding: 5px 8px;
  }

  body:has(#staffGrid) .page-heading h1 {
    font-size: clamp(42px, 11vw, 65px);
    letter-spacing: 2px;
    transform: none;
  }
}
/* Hide Hover to Flip text */
.flip-hint {
  display: none !important;
}

/* Front Office Staff heading redesign */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&display=swap');

body:has(#staffGrid) .page-heading {
  padding: 42px 20px 24px;
  text-align: center;
}

body:has(#staffGrid) .team-name {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: 5px;
  color: #ffffff;
  margin-bottom: 6px;
}

body:has(#staffGrid) .page-heading h1 {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: clamp(48px, 8vw, 104px);
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1;
  transform: none;
  margin: 0;
  color: #ffffff;
}

body:has(#staffGrid) .page-heading .rule {
  width: 190px;
  height: 5px;
  background: #d71920;
  margin: 20px auto 0;
}

@media (max-width: 620px) {
  body:has(#staffGrid) .team-name {
    font-size: 18px;
    letter-spacing: 3px;
  }

  body:has(#staffGrid) .page-heading h1 {
    font-size: clamp(40px, 10vw, 58px);
    letter-spacing: 1px;
  }
}

/* Front Office Contact Information Section */

body:has(#staffGrid) .contact-section {
  background: #002d62;
  padding: 0 22px 75px;
}

body:has(#staffGrid) .contact-container {
  max-width: 1200px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 12px;
  padding: 35px;
  box-shadow: 0 12px 35px rgba(0,0,0,.20);
}

body:has(#staffGrid) .contact-container h2 {
  text-align: center;
  color: #002d62;
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: 1px;
  margin: 0 0 30px;
  padding-bottom: 15px;
  border-bottom: 4px solid #d71920;
}

body:has(#staffGrid) .contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

body:has(#staffGrid) .contact-card h3 {
  color: #002d62;
  font-size: 16px;
  margin: 25px 0 8px;
  border-left: 4px solid #d71920;
  padding-left: 10px;
}

body:has(#staffGrid) .contact-card h3:first-child {
  margin-top: 0;
}

body:has(#staffGrid) .contact-card p {
  font-size: 14px;
  line-height: 1.7;
  color: #333333;
  margin: 0 0 20px;
}

body:has(#staffGrid) .contact-card a {
  color: #002d62;
  text-decoration: none;
}

body:has(#staffGrid) .contact-card a:hover {
  color: #d71920;
  text-decoration: underline;
}

@media (max-width: 900px) {
  body:has(#staffGrid) .contact-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 620px) {
  body:has(#staffGrid) .contact-section {
    padding: 0 12px 50px;
  }

  body:has(#staffGrid) .contact-container {
    padding: 22px 18px;
  }
}

/* Slightly larger fun facts text */
body:has(#staffGrid) .back-text {
  font-size: 16px !important;
  line-height: 1.5;
}