@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=IM+Fell+English:ital@0;1&family=Marck+Script&family=Noto+Sans+JP:wght@300;400&display=swap');

/* The category pages (story / social / outfits / art.html, 2026-10-27): one of index.html's sections, its tiles
   made large enough to fill the screen. */
:root{
  --bg:#0c090a; --panel:#151012; --panel2:#1b1417; --line:#2b1d21;
  --red:#D0294C; --red-soft:#DF617C; --red-pale:#EB9DAD; --wine:#8D1737;
  --text:#efe6e8; --sub:#b3a2a6; --muted:#7d6b70;
  /* the shared nav bar's names, as on the other pages */
  --border2:#7a223c; --rose:#DF617C; --rose2:#D0294C; --gold:#e8e8e8; --glow-gold:rgba(220,220,220,.2);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:'Noto Sans JP',sans-serif;color:var(--text);background:var(--bg);min-height:100vh}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

.site-shell{display:flex;flex-direction:column;min-height:100vh}

/* ─── Shared Nav Bar ─── */
#site-nav{
  flex-shrink:0;display:flex;align-items:center;gap:18px;
  padding:0 20px;height:46px;
  background:linear-gradient(135deg,#080808,#150808 50%,#080808);
  border-bottom:1px solid var(--border2);
  position:relative;z-index:300;
}
#site-nav::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--rose2),#333,var(--rose2),transparent);opacity:.8}
.site-logo{font-family:'IM Fell English',serif;font-size:.95rem;color:var(--gold);letter-spacing:.08em;white-space:nowrap;display:flex;align-items:center;gap:6px;text-shadow:0 0 10px var(--glow-gold)}
.site-links{display:flex;gap:6px;min-width:0;overflow-x:auto}   /* scrolls instead of widening the page on phones */
.site-link{
  font-family:'Cormorant Garamond',serif;font-size:.85rem;letter-spacing:.04em;
  color:var(--muted);text-decoration:none;padding:5px 14px;border-radius:16px;
  border:1px solid transparent;transition:color .2s,border-color .2s,background .2s;white-space:nowrap;
}
.site-link:hover{color:var(--rose);background:rgba(208,41,76,.1)}
.site-link.current{color:var(--rose);border-color:var(--rose2);background:rgba(208,41,76,.14)}

/* ─── index.html's section: the heading with a red line, the tiles - here filling the rest of the screen ─── */
.main{flex:1;display:flex;flex-direction:column;padding:26px 32px 32px;max-width:1500px;margin:0 auto;width:100%}
.section-head{display:flex;align-items:center;gap:16px}
.section-head h2{font-family:'Marck Script',cursive;font-weight:400;font-size:clamp(1.8rem,3.4vw,2.3rem);line-height:1.2;color:var(--red-soft)}
.section-head::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--wine),var(--line) 60%,transparent)}
.grid{
  flex:1;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));grid-template-rows:repeat(var(--rows,2),minmax(220px,1fr));
  gap:22px;margin-top:18px;
}
.tile{
  position:relative;display:block;min-width:0;border-radius:8px;overflow:hidden;text-decoration:none;
  background:var(--panel);border:1px solid rgba(43,29,33,.55);   /* (--line, half see-through: softer edges) */
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
/* the cover: at .4 (full on hover), fading out to every edge (the two masks intersect) */
.tile .cover{
  position:absolute;inset:0;background:center/cover no-repeat;opacity:.4;transition:opacity .25s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-composite:intersect;
}
a.tile:hover .cover,a.tile:focus-visible .cover{opacity:1}
.tile .star{position:absolute;inset:0 0 18%;display:flex;align-items:center;justify-content:center;color:var(--wine);font-size:clamp(28px,3.4vw,46px)}
/* the name at the bottom, on a shade that fades into the picture */
.tile .label{
  position:absolute;left:0;right:0;bottom:0;padding:34px 20px 13px;
  background:linear-gradient(0deg,rgba(12,9,10,.92) 45%,rgba(12,9,10,0));   /* fades into the picture: no line between */
  font-size:1.2rem;font-weight:400;letter-spacing:.03em;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .18s ease;
}
.tile .soon{position:absolute;right:14px;top:12px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
a.tile:hover,a.tile:focus-visible{border-color:var(--red);background:var(--panel2);transform:translateY(-2px);outline:none}
a.tile:hover .label,a.tile:focus-visible .label{color:var(--red-pale)}
a.tile:hover .star{color:var(--red)}
div.tile{cursor:default}
@media (max-width:760px){
  .main{padding:16px 16px 32px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:clamp(120px,32vw,190px);gap:12px}
  .tile .label{font-size:.95rem;padding:22px 12px 8px}
}