/* ==========================================================================
   wing.css  -  the sailormoon wing index
   ==========================================================================
   The index has no palette of its own. Each CARD carries the senshi's vars
   inline, so the grid is nine palettes side by side - which makes this page
   double as the colour key for the whole wing. The page chrome is the site's
   own neutral, so the cards are the only colour and they do not fight.
   ========================================================================== */

*{ box-sizing:border-box; }

/* The wing + codex index pages sit in the site cabinet like any post, so
   this file styles the ARTICLE only. index.css paints the page. */
body.wing{ font-family:Raleway,system-ui,sans-serif; line-height:1.7; }
.wing-frame{
  background:#FFFFFB; border:3px solid #5A3268;
  box-shadow:5px 5px 0 rgba(90,50,104,.35);
  margin:0 0 20px 0; overflow:hidden;
}

.wing-banner{
  padding:26px 28px 22px;
  background:linear-gradient(180deg,#f7f2f6,#FFFFFB);
  border-bottom:3px solid #C7C4D9;
}
.wing-kicker{
  margin:0 0 8px; font-family:"Press Start 2P",monospace; font-size:9px;
  letter-spacing:1px; color:#7A6E96;
}
.wing-title{
  margin:0 0 12px; font-family:"Press Start 2P",monospace;
  font-size:clamp(15px,3.2vw,24px); line-height:1.35; color:#5A3268;
  text-shadow:2px 2px 0 #f6ebbe, 4px 4px 0 rgba(90,50,104,.25);
}
.wing-lede{ margin:0; font-size:16px; max-width:64ch; color:#524860; }

.wing-group{ padding:6px 28px 8px; }
.wing-h{
  margin:24px 0 14px; font-family:"Press Start 2P",monospace; font-size:11px;
  color:#5A3268; padding-bottom:9px; border-bottom:2px dashed #C7C4D9;
}

/* ---- the grid -----------------------------------------------------------
   auto-fill so a tenth profile reflows for free. minmax floor is 250px,
   which keeps two cards per row on a small tablet and one on a phone. */
.wing-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}

/* ---- the card -----------------------------------------------------------
   Root strip on top, skirt plate with the name, paper body underneath.
   Same three-layer logic as the profile page itself, shrunk - so the card
   is a genuine preview of the page it opens, not a generic tile. */
.wing-card{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--paper); color:var(--ink);
  border:2px solid var(--skirt);
  box-shadow:4px 4px 0 rgba(0,0,0,.28);
  overflow:hidden;
  transition:transform .08s;
}
.wing-card:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 rgba(0,0,0,.32); }
.wing-card:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.28); }

.wc-root{ display:block; height:10px; background:var(--root); }

.wc-plate{
  display:block; padding:11px 13px 10px;
  background:var(--skirt); color:var(--onskirt);
}
.wc-name{
  display:block; font-family:"Press Start 2P",monospace; font-size:11px;
  line-height:1.4; text-shadow:1px 1px 0 rgba(0,0,0,.35);
}
.wc-civ{ display:block; margin-top:6px; font-size:12.5px; font-weight:600; opacity:.9; }

.wc-body{ display:block; padding:12px 13px 13px; }
.wc-sum{ display:block; font-size:13.5px; line-height:1.55; min-height:3.1em; }

/* the four beats, as a colour key. this is why the index doubles as the
   palette sheet - you can compare nine uniforms at a glance. */
.wc-beats{ display:flex; gap:0; margin:11px 0 9px; }
.wc-beats i{ flex:1; height:12px; border:1px solid rgba(0,0,0,.18); }

.wc-meta{
  display:block; font-family:"Press Start 2P",monospace; font-size:7.5px;
  letter-spacing:.3px; opacity:.7; line-height:1.7;
}
.wc-meta b{ color:var(--accent); font-weight:normal; }

.wing-foot{
  margin-top:14px; padding:18px 28px 24px;
  border-top:3px solid #C7C4D9; background:#f7f2f6;
}
.wing-foot .codex-strip-label{ color:#5A3268; }
.wing-foot .codex-strip-label::before{ color:#C7A8B8; }
.wing-foot .codex-link{
  color:#2e2838; background:#FFFFFB; border-color:#5A3268;
}
.wing-foot .codex-link:hover{ background:#f6ebbe; }
.wing-note{ margin:12px 0 0; font-size:13px; font-style:italic; opacity:.7; }

@media (max-width:780px){

  .wing-banner{ padding:20px 16px 18px; }
  .wing-group{ padding:6px 16px 8px; }
  .wing-grid{ grid-template-columns:1fr; }
  .wing-foot{ padding:16px; }
}

/* ---- MOBILE ORDER -------------------------------------------------------
   Same reasoning as senshi.css: index.css owns the mobile stack (menu order
   2, about card order 3, CD player cut). .wing-frame is a new block, so it
   only needs a slot in that existing scale - order 4, straight after the
   about card. */
@media (max-width: 1249px){
  .wing-frame{
    order: 4;
    width: 100%;
    max-width: 100%;
    margin: 12px 0 20px 0;
  }
}

/* ---- SHARED COLUMN: keep it on SITE type, not wing type ------------------
   body.wing sets Raleway/line-height:1.7 for the wing's own content. The
   shared right column lives inside that body and inherited it, so menu rows
   grew 26 -> 30px and the header 29 -> 45px, pushing the menu 333 -> 390px
   on wing pages only.

   This belongs HERE, not in index.css: index.css is linked FIRST, so an
   equal-specificity rule there loses on source order. wing.css is linked
   after it and before codex.css. */
body.wing .rightsidebox--home,
body.wing .rightsidebox--home *{
  line-height: normal;
}
body.wing #mainmenu .sidelinks li a{ line-height: 1.2; }
body.wing #mainmenu .menu-title{ line-height: 1.1; }

/* ---- MOBILE: readable pixel type ----------------------------------------
   The wing chrome used 7-9px Press Start / basiic, which is fine on a
   desktop at arm's length and mush on a phone. 11px is the floor for a
   pixel face; nothing below it. */
@media (max-width: 900px){
  .wing-kicker{ font-size: 11px; }
  .wing-h{ font-size: 12px; }
  .wing-note{ font-size: 12.5px; }
  .wc-name{ font-size: 12px; }
  .wc-meta{ font-size: 10.5px; line-height: 1.8; }
  .wc-sum{ font-size: 13px; min-height: 0; }
  .wing-foot .codex-strip-label{ font-size: 11px; }
}

@media (max-width: 900px){
  .wc-name{ font-size: 12px; }
  .wc-meta{ font-size: 11px; }
  .wing-kicker{ font-size: 11px; }
}