/* Mechanical Monkeys — FRC Team 12064 */
:root{
  --banana:#F5C518;
  --banana-dark:#C79A00;
  --jungle:#12301F;
  --jungle-2:#1C4630;
  --ink:#0E1512;
  --paper:#FFFFFF;
  --muted:#5C6B63;
  --line:#E3E8E4;
  --bg:#F7F9F7;
  --radius:14px;
  --shadow:0 6px 24px rgba(14,21,18,.08);
  --wrap:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 "Segoe UI",Inter,system-ui,-apple-system,Arial,sans-serif;
}
img{max-width:100%;display:block}
a{color:var(--jungle-2)}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3.4rem)}
h2{font-size:clamp(1.5rem,3vw,2.2rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.section{padding:72px 0}
.section--tight{padding:48px 0}
.section--alt{background:#EFF4F0}
.section--dark{background:var(--jungle);color:#EAF2EC}
.section--dark h2,.section--dark h3{color:#fff}
/* Buttons keep their own text color — otherwise this rule outranks
   .btn--primary and paints yellow text on a yellow button. */
.section--dark a:not(.btn){color:var(--banana)}
.lead{font-size:1.15rem;color:var(--muted);max-width:62ch}
.section--dark .lead{color:#B9CBBF}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.14em;
  font-size:.75rem;font-weight:800;color:var(--banana-dark);margin-bottom:.75rem}
.section--dark .eyebrow{color:var(--banana)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:16px;height:70px;position:relative}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:900}
.brand .logo{width:42px;height:42px;border-radius:12px;background:var(--jungle);
  color:var(--banana);display:grid;place-items:center;font-size:1.35rem}
.brand small{display:block;font-weight:600;font-size:.72rem;color:var(--muted);letter-spacing:.08em}
.nav-links{margin-left:auto;display:flex;gap:4px;align-items:center;list-style:none;padding:0;margin-block:0}
.nav-links a{padding:9px 12px;border-radius:9px;text-decoration:none;color:var(--ink);
  font-weight:600;font-size:.93rem}
.nav-links a:hover{background:#EEF3EF}
.nav-links a.active{background:var(--jungle);color:#fff}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:9px;padding:9px 12px;font-size:1.1rem;cursor:pointer}
@media(max-width:1000px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:70px;left:-20px;right:-20px;background:#fff;flex-direction:column;
    align-items:stretch;padding:10px 16px 18px;border-bottom:1px solid var(--line);display:none;
    box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px}
}

/* Buttons */
.btn{display:inline-block;padding:13px 24px;border-radius:999px;text-decoration:none;
  font-weight:800;border:2px solid transparent;cursor:pointer;font-size:.95rem}
.btn--primary{background:var(--banana);color:var(--ink)}
.btn--primary:hover{background:var(--banana-dark)}
.btn--dark{background:var(--jungle);color:#fff}
.btn--dark:hover{background:var(--jungle-2)}
.btn--ghost{border-color:currentColor;color:inherit}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* Hero */
.hero{background:linear-gradient(160deg,var(--jungle) 0%,var(--jungle-2) 60%,#245c3d 100%);
  color:#fff;padding:96px 0 104px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-120px;width:460px;height:460px;
  border-radius:50%;background:radial-gradient(circle,rgba(245,197,24,.28),transparent 70%)}
.hero .wrap{position:relative;z-index:1}
.hero p{color:#C6D8CC;font-size:1.15rem;max-width:60ch}
.hero .tag{display:inline-block;background:var(--banana);color:var(--ink);font-weight:900;
  padding:6px 14px;border-radius:999px;font-size:.8rem;letter-spacing:.06em;margin-bottom:18px}
.page-hero{background:var(--jungle);color:#fff;padding:64px 0}
.page-hero h1{color:#fff}
.page-hero p{color:#B9CBBF;max-width:65ch;margin:0}

/* Grid & cards */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.section--dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#EAF2EC}
.icon{font-size:1.9rem;line-height:1;margin-bottom:10px}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:center}
.stat b{display:block;font-size:2.1rem;color:var(--jungle-2);line-height:1}
.stat span{display:block;font-size:.85rem;color:var(--muted);font-weight:600;margin-top:6px}
/* The FTC -> FRC card holds a phrase, not a number, so it needs a smaller
   type size to stay on one line inside the same box. */
.stat--path b{font-size:1.5rem;white-space:nowrap}
.stat--path span{line-height:1.45}

/* Photo placeholders */
.photo{aspect-ratio:4/3;border-radius:var(--radius);background:
  repeating-linear-gradient(45deg,#E9EFEA,#E9EFEA 14px,#E2EAE4 14px,#E2EAE4 28px);
  display:grid;place-items:center;color:var(--muted);font-weight:700;font-size:.85rem;
  text-align:center;padding:12px;border:1px dashed #CBD6CE}
.photo--wide{aspect-ratio:16/9}
.photo--sq{aspect-ratio:1/1}

/* Member cards */
.member{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)}
.member .photo{border-radius:0;border:0;border-bottom:1px solid var(--line)}
.member .body{padding:16px 18px}
.member .body b{display:block}
.member .body span{font-size:.85rem;color:var(--muted)}

/* Timeline */
.timeline{position:relative;padding-left:34px;margin-top:32px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:3px;background:var(--line)}
.tl-item{position:relative;margin-bottom:32px}
.tl-item::before{content:"";position:absolute;left:-33px;top:6px;width:19px;height:19px;
  border-radius:50%;background:var(--banana);border:3px solid var(--bg)}
.tl-item .year{font-weight:900;color:var(--jungle-2);font-size:.9rem;letter-spacing:.06em}

/* Sponsor tiers */
.tier{border-top:6px solid var(--line)}
.tier--titanium{border-top-color:#7E8B9A}
.tier--gold{border-top-color:var(--banana)}
.tier--silver{border-top-color:#B7C0C7}
.tier--bronze{border-top-color:#C08457}
.tier .price{font-size:1.7rem;font-weight:900;color:var(--jungle-2);margin:.2em 0 .4em}
.tier ul{margin:0;padding-left:20px;color:var(--muted)}
.tier li{margin-bottom:6px}
.sponsor-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.sponsor-logo{background:#fff;border:1px solid var(--line);border-radius:12px;min-height:96px;
  display:grid;place-items:center;font-weight:800;color:var(--muted);text-align:center;padding:10px;font-size:.9rem}

/* Tables */
.table-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:560px;background:#fff;border:1px solid var(--line)}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);font-size:.95rem}
th{background:#F1F5F2;font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
tr:last-child td{border-bottom:0}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:800}
.badge--up{background:#E4F3E9;color:#1B6B3A}
.badge--past{background:#EDF0EE;color:var(--muted)}

/* Forms */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.field{margin-bottom:18px}
label{display:block;font-weight:700;font-size:.88rem;margin-bottom:6px}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;background:#FBFDFB}
input:focus,select:focus,textarea:focus{outline:2px solid var(--banana);border-color:var(--banana)}
textarea{min-height:140px;resize:vertical}
.form-note{font-size:.85rem;color:var(--muted)}
.form-status{margin-top:14px;font-weight:700;display:none}
.form-status.show{display:block}

/* Social */
.social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.social{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.social:hover{border-color:var(--banana)}
.social .mark{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  font-size:1.3rem;color:#fff;flex:0 0 auto}
.social b{display:block}
.social span{font-size:.85rem;color:var(--muted)}

/* Footer */
.site-footer{background:var(--ink);color:#B9C6BE;padding:56px 0 26px;font-size:.92rem}
.site-footer h4{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px}
.site-footer a{color:#B9C6BE;text-decoration:none;display:block;padding:4px 0}
.site-footer a:hover{color:var(--banana)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:32px}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-bottom{border-top:1px solid #23302A;margin-top:34px;padding-top:20px;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.85rem;color:#84978C}

.callout{background:#FFF9E3;border:1px solid #F0DFA0;border-left:5px solid var(--banana);
  border-radius:10px;padding:18px 20px}
.callout p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------
   Whimsy layer — hand-drawn feel.
   Sketchy borders are irregular border-radii (the classic "wobbly
   box" trick); the squiggles are inline SVG data URIs so the site
   still has zero external assets.
   --------------------------------------------------------------- */
.sketch,
.card,
.stat,
.member,
.social,
.form,
.sponsor-logo,
.callout{
  border-radius:255px 12px 225px 14px / 14px 225px 12px 255px;
}
.card,.stat,.member,.social{border-width:2px}
.card:nth-child(even){border-radius:14px 225px 12px 255px / 255px 12px 225px 14px}

/* Buttons keep the pill shape but pick up a slightly drawn edge. */
.btn{border-radius:220px 18px 200px 20px / 20px 200px 18px 220px}
.btn--ghost{border-width:2.5px}

/* The tag chip sits a touch off-square, like it was stuck on by hand. */
.hero .tag{
  border-radius:200px 16px 180px 18px / 18px 180px 16px 200px;
  transform:rotate(-1.4deg);
}

/* Hero headline gets a marker-stroke underline. */
.hero h1{position:relative;display:inline-block}
.hero h1::after{
  content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;
  background:no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9c40-6 78 3 118-1 42-4 80 5 122 0 22-3 38 1 56-2' fill='none' stroke='%23F5C518' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Mission statement reads like a note, not body copy. */
.hero p{font-size:1.28rem;font-style:italic;color:#DCEBE0;max-width:36ch}

/* Section eyebrows get a little underline scribble. */
.eyebrow::after{
  content:"";display:block;height:7px;margin-top:4px;
  background:no-repeat left/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 7' preserveAspectRatio='none'%3E%3Cpath d='M1 5c20-4 38 2 58-1 18-3 34 2 60-1' fill='none' stroke='%23C79A00' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.section--dark .eyebrow::after{filter:brightness(1.6)}

/* Photo placeholders look sketched in rather than boxed off. */
.photo{border-radius:240px 16px 210px 18px / 18px 210px 16px 240px;border-width:2px}
.member .photo{border-radius:0}

/* Stat cards tilt a hair, alternating, so the row feels pinned up. */
.stat:nth-child(odd){transform:rotate(-.8deg)}
.stat:nth-child(even){transform:rotate(.7deg)}
.stat:hover{transform:rotate(0)}
.stat{transition:transform .18s ease}

/* Timeline dots wobble like they were inked by hand. */
.tl-item::before{border-radius:60% 40% 55% 45% / 45% 55% 40% 60%}

/* Nobody wants a wobbly table, so tables and inputs stay square. */
table,input,select,textarea{border-radius:10px}

/* Real photos drop into the same slot as the .photo placeholders. */
/* Height comes from the aspect-ratio on .photo / .photo--sq. Using 100%
   here instead makes the image stretch to the whole card and swallow the
   name underneath it. */
img.photo{
  width:100%;height:auto;object-fit:cover;padding:0;border:0;background:none;
}
.member img.photo{border-radius:0;border-bottom:1px solid var(--line)}

/* Cap portrait height so the name/role box stays visible with the photo,
   even when the grid collapses to one wide column on small screens. */
.member .photo{max-height:480px}

/* Brand mark: the monkey art sits on the banana tile so the dark
   linework reads against it. */
.brand .logo{background:#2A7049;padding:3px}
.brand .logo img{width:100%;height:100%;object-fit:contain;display:block}

/* Marker underline for a phrase inside a heading. */
.u-marker{position:relative;display:inline-block}
.u-marker::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:10px;
  background:no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7c32-5 62 2 94-1 34-3 62 4 102-1' fill='none' stroke='%23F5C518' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Timeline years sit on the dark history section, where the default
   jungle green all but disappears. */
.section--dark .tl-item .year{color:var(--banana)}

/* Logo inside a social tile — the tile keeps its platform colour. */
.social .mark img{width:76%;height:76%;object-fit:contain;display:block}



/* Shown only while the forms have no endpoint. */
.form-offline{margin:0 0 14px;padding:10px 14px;border-radius:10px;
  background:#FDECE8;border-left:4px solid #C0392B;
  color:#A3321E;font-weight:700;font-size:.9rem}
.form-offline a{color:#A3321E}



/* Donations are off: the monkey delivers the news himself. */
.donate-down{display:flex;flex-direction:column;align-items:center;
  gap:16px;margin:28px auto 0;max-width:70ch;text-align:center}
.donate-down__bubble{position:relative;margin:0;
  background:#FFF9E3;color:var(--ink);font-size:.95rem;
  padding:18px 20px;border:2px solid var(--banana);
  border-radius:225px 15px 255px 15px / 15px 255px 15px 225px}
.donate-down__bubble strong{display:block;margin-bottom:4px}
.donate-down__bubble a{color:var(--jungle-2);font-weight:700}
/* Tail points down at him: a border triangle with a second inset to fill it. */
.donate-down__bubble::before,
.donate-down__bubble::after{content:"";position:absolute;width:0;height:0;
  left:50%;border-style:solid;border-color:transparent}
.donate-down__bubble::before{bottom:-15px;margin-left:-10px;
  border-width:15px 10px 0 10px;border-top-color:var(--banana)}
.donate-down__bubble::after{bottom:-11px;margin-left:-10px;
  border-width:15px 10px 0 10px;border-top-color:#FFF9E3}
.donate-down__monkey{position:relative;display:inline-block;width:92px;line-height:0}
.donate-down__monkey img{width:100%;display:block}
/* Tears flung out from his eyes — pointed end aimed back at the face. */
.donate-down__tear{position:absolute;width:15px;height:21px;top:34%}
.donate-down__tear--l{left:1px;transform:rotate(42deg)}
.donate-down__tear--r{right:1px;transform:rotate(-42deg)}

/* "Nothing yet" row in an otherwise empty table. */
.table-empty{text-align:center;color:var(--muted);font-weight:700;padding:26px 16px}

/* Subteam cards: photo across the top, like the member cards. */
.card--photo{padding:0;overflow:hidden}
.card--photo .photo{border-radius:0;border:0;border-bottom:1px solid var(--line)}
.card--photo .card-body{padding:26px}
.card--photo .card-body p:last-child{margin-bottom:0}