/* ========== Theme & Animation Vars ========== */
:root{
  --bg:#000;
  --text:#eaeaea;
  --muted:#a7a7a7;
  --card:#0e0e0e;
  --stroke:#2a2a2a;

  /* Swapped accents */
  --learn:#949325;   /* olive */
  --legacy:#b4762b;  /* muted olive green */

  --radius:14px;
  --shadow:0 6px 18px rgba(0,0,0,.35);
  --gap:18px;

  --tileSize:60px;
  --tilePad:28px;
  --tileStart:34vh;
}

/* ===== Brand tiles (drop animation) ===== */
.tiles-wrap{
  margin-top:0;
  padding-top:var(--tilePad);
  text-align:center;
}
.tiles-wrap .tiles{
  display:inline-flex;
  flex-wrap:nowrap;
  gap:0;
  align-items:flex-start;
  justify-content:center;
}
.tiles-wrap .tile{
  width:var(--tileSize);
  height:var(--tileSize);
  flex:0 0 var(--tileSize);
  transform:translateY(calc(-1 * var(--tileStart)));
  opacity:0;
}
.tiles-wrap .tile img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Long drop */
@keyframes dropInLong{
  from{ transform:translateY(calc(-1 * var(--tileStart))); opacity:0; }
  to  { transform:translateY(0); opacity:1; }
}

/* Staggered animation, quick-start with negative delays */
.play .t1{ animation:dropInLong 4s ease-out -3.0s forwards; }
.play .t2{ animation:dropInLong 4s ease-out -2.5s forwards; }
.play .t3{ animation:dropInLong 4s ease-out -2.0s forwards; }
.play .t4{ animation:dropInLong 4s ease-out -1.5s forwards; }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .tiles-wrap .tile{ animation:none !important; transform:none; opacity:1; }
}

/* ========== Base ========== */
html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP",sans-serif;
}
a{color:inherit; text-decoration:none}

.container{
  max-width: 600px;            /* keeps large screens tidy */
  margin: 0 auto;
  padding: 16px 18px 52px;
}

/* Optional image wordmark */
.site-head{display:flex; justify-content:center; margin:0 0 8px}
.wordmark{height:52px; width:auto; display:block;}

/* Section headings */
.section{margin-top:28px}
.section-title{
  text-align:center; margin: 8px 0 6px;
  font-weight: 800; letter-spacing:.04em; font-size:22px;
}
.section-title.learn{ color: var(--learn) }
.section-title.legacy{ color: var(--legacy) }
.lead{ text-align:center; color:var(--muted); margin:0 0 16px; }

/* ========== Grids ========== */
/* Mobile-first: tightly centered rows that *stay on one line* */
.grid{ display:grid; margin:0 auto }

/* Learn: 2 across on phones (375–430px) */
.learn-grid{
  grid-template-columns: repeat(2, minmax(148px, 1fr));
  gap: 14px;
  max-width: 360px;              /* two cards fit on smallest phones */
}

/* Legacy: 3 across on phones */
.legacy-grid{
  grid-template-columns: repeat(3, minmax(98px, 1fr));
  gap: 10px;
  max-width: 360px;              /* three tiles fit on smallest phones */
}

.learn-grid > a:hover {
  box-shadow: 0 0 12px rgba(123, 139, 74, 0.4);
}
.legacy-grid > a:hover {
  box-shadow: 0 0 12px rgba(202, 138, 61, 0.4);
}

/* Scale up on tablets/desktops */
@media (min-width:600px){
  .learn-grid  { max-width: 520px; gap: 16px }
  .legacy-grid { max-width: 540px; gap: 12px }
}
@media (min-width:900px){
  .container   { max-width: 600px }
  .learn-grid  { max-width: 600px }
  .legacy-grid { max-width: 600px }
}

/* ========== Cards ========== */
/* Apply to any direct child <a> inside the grids */
.learn-grid > a,
.legacy-grid > a,
.card{
  display:block;
  background: linear-gradient(180deg,#0b0b0b,#111);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Learn cards (now warm orange) */
.learn-grid > a {
  padding: 14px 16px;
  border: 1px solid var(--learn); /* NEW: pick up swapped orange */
}
.learn-grid > a h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  color: var(--learn); /* accent for heading */
}
.learn-grid > a p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

/* Legacy tiles (now olive green) */
.legacy-grid > a {
  padding: 12px;
  text-align: center;
  border: 1px solid var(--legacy); /* NEW: pick up swapped olive */
}
.legacy-grid > a h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--legacy); /* accent for heading */
}
.legacy-grid > a p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

/* Hover/active */
.learn-grid > a:hover,
.legacy-grid > a:hover,
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.learn-grid > a:active,
.legacy-grid > a:active,
.card:active{
  transform: translateY(0);
  box-shadow: var(--shadow);
}

/* Accent borders & text */
.learn-grid > a {
  border-color: rgba(123,139,74,.45);   /* olive tint */
}
.learn-grid > a h3 {
  color: var(--learn);
}

.legacy-grid > a {
  border-color: rgba(202,149,46,.45);   /* earthy orange tint */
}
.legacy-grid > a h3 {
  color: var(--legacy);
}

/* ========== Share & Footer ========== */
.share{ margin-top:28px; text-align:center }
.share-label{ color:var(--muted); margin:0 0 10px; }
.share-row{ display:flex; justify-content:center; gap:16px }
.share-row a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid var(--stroke);
  border-radius:10px; font-weight:700; color:#cfcfcf;
}

.footer{
  margin-top:28px;
  text-align:center;
  color:#bdbdbd;
  border-top:1px solid var(--stroke);
  padding-top:14px;
  font-size:0.8rem;   /* smaller footer text */
  line-height:1.4;    /* keeps readability */
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .learn-grid > a:hover,
  .legacy-grid > a:hover,
  .card:hover{ transform:none; box-shadow:var(--shadow) }
}