/* ===== 六月伊人 · Exaggerated Minimalism ===== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap');

/* ── Reset ── */
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:#fff;color:#000;font-family:'Outfit','Rubik',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.6;min-height:100vh;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
button,input{font-family:inherit;font-size:inherit}

/* ── Variables ── */
:root{
  --black:#000;
  --white:#fff;
  --accent:#000;
  --border:1.5px solid #000;
  --radius:4px;
  --nav-h:56px;
  --transition:0.18s cubic-bezier(.4,0,.2,1);
  --font-display:'Outfit',sans-serif;
  --font-body:'Rubik',sans-serif;
}

/* ── Site wrap ── */
.site-wrap{display:flex;flex-direction:column;min-height:100vh;padding-bottom:var(--nav-h)}

/* ══════════════════════════════════════
   BOTTOM FIXED NAV
══════════════════════════════════════ */
.site-header{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:200;
  background:#000;
  border-top:2px solid #fff;
  height:var(--nav-h);
}
.bottom-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
  padding:0 8px;
  gap:4px;
  overflow-x:auto;
  scrollbar-width:none;
}
.bottom-nav::-webkit-scrollbar{display:none}
.bottom-nav__left,
.bottom-nav__right{
  display:flex;
  align-items:center;
  gap:2px;
  flex:1;
}
.bottom-nav__right{justify-content:flex-end}
.bottom-nav__brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:-0.04em;
  color:#fff;
  white-space:nowrap;
  padding:0 12px;
  flex-shrink:0;
}
.bottom-nav__brand:hover{text-decoration:none;opacity:0.8}
.nav-a{
  color:#fff;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.02em;
  white-space:nowrap;
  padding:8px 6px;
  min-height:40px;
  display:flex;
  align-items:center;
  border-bottom:2px solid transparent;
  transition:border-color var(--transition),opacity var(--transition);
}
.nav-a:hover,.nav-a--active{
  border-bottom-color:#fff;
  opacity:1;
  text-decoration:none;
}

/* ══════════════════════════════════════
   HERO (home)
══════════════════════════════════════ */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:45vh;
  overflow:hidden;
  position:relative;
}
.hero__text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:4rem 3rem 4rem 2.5rem;
  background:#000;
  color:#fff;
  position:relative;
  z-index:2;
}
.hero__eyebrow{
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#fff;
  opacity:0.6;
  margin-bottom:1rem;
  display:block;
}
.hero__h1{
  font-family:var(--font-display);
  font-size:clamp(2rem,5vw,4.5rem);
  font-weight:700;
  letter-spacing:-0.04em;
  line-height:1.05;
  color:#fff;
  margin-bottom:1.2rem;
}
.hero__sub{
  font-size:1rem;
  line-height:1.6;
  color:rgba(255,255,255,.75);
  max-width:36ch;
  margin-bottom:2rem;
}
.btn-primary{
  display:inline-block;
  background:#fff;
  color:#000;
  font-weight:700;
  font-size:0.9rem;
  letter-spacing:0.05em;
  padding:0.75rem 1.75rem;
  border-radius:var(--radius);
  border:2px solid #fff;
  transition:background var(--transition),color var(--transition);
  align-self:flex-start;
}
.btn-primary:hover{background:#000;color:#fff;text-decoration:none}
.hero__media{
  position:relative;
  background:#111;
  overflow:hidden;
}
.hero__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero__slash{
  position:absolute;
  top:0;left:-60px;
  width:80px;height:100%;
  background:#000;
  transform:skewX(-6deg);
  z-index:3;
}

/* ══════════════════════════════════════
   INNER HERO (topic)
══════════════════════════════════════ */
.inner-hero--topic{
  background:#000;
  color:#fff;
  position:relative;
  overflow:hidden;
  padding:3.5rem 2.5rem 3rem;
  min-height:32vh;
  display:flex;
  align-items:center;
}
.inner-hero__text{
  position:relative;
  z-index:2;
  max-width:700px;
}
.inner-hero__h1{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,5vw,4rem);
  font-weight:700;
  letter-spacing:-0.04em;
  line-height:1.08;
  color:#fff;
  margin-bottom:0.8rem;
}
.inner-hero__desc{
  font-size:1rem;
  line-height:1.6;
  color:rgba(255,255,255,.7);
  max-width:60ch;
}
.inner-hero__slash{
  position:absolute;
  bottom:-40px;right:10%;
  width:200px;height:200px;
  background:rgba(255,255,255,.04);
  border-radius:50%;
  pointer-events:none;
}

/* ══════════════════════════════════════
   ARTICLE HERO
══════════════════════════════════════ */
.article-hero{
  position:relative;
  background:#000;
  min-height:38vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.article-hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.35;
}
.article-hero__overlay{
  position:relative;
  z-index:2;
  padding:3rem 2.5rem 2.5rem;
  max-width:800px;
}
.article-hero__h1{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,4.5vw,3.5rem);
  font-weight:700;
  letter-spacing:-0.04em;
  line-height:1.1;
  color:#fff;
  margin-bottom:0.75rem;
}
.article-hero__slash{
  position:absolute;
  bottom:0;right:0;
  width:0;height:0;
  border-style:solid;
  border-width:0 0 80px 120px;
  border-color:transparent transparent #fff transparent;
}
.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem 1.2rem;
  font-size:0.8rem;
  color:rgba(255,255,255,.6);
  margin-top:0.5rem;
}
.article-meta__label{
  font-weight:700;
  letter-spacing:0.08em;
}
.article-meta__date{color:rgba(255,255,255,.85)}

/* ══════════════════════════════════════
   ABOUT BANNER
══════════════════════════════════════ */
.about-banner{
  background:#000;
  color:#fff;
  position:relative;
  overflow:hidden;
  padding:4rem 2.5rem 3.5rem;
  min-height:36vh;
  display:flex;
  align-items:center;
}
.about-banner__inner{position:relative;z-index:2}
.about-banner__tag{
  display:inline-block;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:1rem;
}
.about-banner__h1{
  font-family:var(--font-display);
  font-size:clamp(2rem,5vw,5rem);
  font-weight:700;
  letter-spacing:-0.05em;
  line-height:1.05;
  color:#fff;
  margin-bottom:0.8rem;
}
.about-banner__desc{
  font-size:1rem;
  color:rgba(255,255,255,.65);
  max-width:55ch;
  line-height:1.6;
}
.about-banner__slash{
  position:absolute;
  top:-60px;right:-60px;
  width:320px;height:320px;
  border:60px solid rgba(255,255,255,.05);
  border-radius:50%;
  pointer-events:none;
}

/* ══════════════════════════════════════
   PRIVACY BANNER
══════════════════════════════════════ */
.privacy-banner{
  background:#000;
  color:#fff;
  padding:3rem 2.5rem 2.5rem;
  border-bottom:2px solid #000;
}
.privacy-banner__inner{max-width:700px}
.privacy-banner__tag{
  display:inline-block;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  margin-bottom:0.8rem;
}
.privacy-banner__h1{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,4vw,3.5rem);
  font-weight:700;
  letter-spacing:-0.04em;
  line-height:1.1;
  color:#fff;
  margin-bottom:0.6rem;
}

/* ══════════════════════════════════════
   MAIN / PROSE
══════════════════════════════════════ */
.page-main{
  flex:1;
  padding:3rem 1.5rem 4rem;
  max-width:860px;
  width:100%;
  margin:0 auto;
}
.prose-wrap{border:var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:3rem}
.prose-wrap--about,.prose-wrap--legal{border-width:2px}
.prose-outer{padding:2.5rem 2.5rem 2rem}
.prose-inner{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.75;
  color:#000;
}
/* prose content styling */
.prose-inner h2{
  font-family:var(--font-display);
  font-size:clamp(1.25rem,3vw,1.9rem);
  font-weight:700;
  letter-spacing:-0.03em;
  margin:2.2rem 0 0.3rem;
  line-height:1.2;
}
.prose-inner h2+hr{
  border:none;
  border-top:2px solid #000;
  margin:0 0 1.2rem;
}
.prose-inner h3{
  font-size:1.15rem;
  font-weight:700;
  margin:1.8rem 0 0.4rem;
}
.prose-inner p{margin-bottom:1rem}
.prose-inner a{color:#000;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose-inner a:hover{opacity:0.6}
.prose-inner ul,.prose-inner ol{padding-left:1.4rem;margin-bottom:1rem}
.prose-inner li{margin-bottom:0.3rem}
.prose-inner table{width:100%;border-collapse:collapse;margin-bottom:1rem;font-size:0.9rem}
.prose-inner th{background:#000;color:#fff;padding:0.5rem 0.75rem;text-align:left;font-weight:700}
.prose-inner td{padding:0.45rem 0.75rem;border-bottom:1px solid #e0e0e0}
.prose-inner tr:last-child td{border-bottom:none}
.prose-inner blockquote{border-left:4px solid #000;padding:0.6rem 1rem;margin:1.2rem 0;font-style:italic;background:#f7f7f7}
.prose-inner code{background:#f0f0f0;padding:0.15em 0.35em;border-radius:3px;font-size:0.88em}
.prose-inner pre{background:#000;color:#fff;padding:1.2rem;border-radius:var(--radius);overflow-x:auto;margin-bottom:1rem}
.prose-inner pre code{background:none;color:inherit;padding:0}
.prose-inner img{border-radius:var(--radius);margin:1rem 0}
.prose-inner time{font-weight:600;color:#333}

/* ══════════════════════════════════════
   SECTION HEADERS
══════════════════════════════════════ */
.section-h2{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,3.5vw,2.2rem);
  font-weight:700;
  letter-spacing:-0.04em;
  line-height:1.1;
  margin-bottom:0.3rem;
}
.section-hr{
  border:none;
  border-top:2px solid #000;
  margin:0 0 1.5rem;
}

/* ══════════════════════════════════════
   CARDS GRID (home)
══════════════════════════════════════ */
.cards-section{margin-bottom:3rem}
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1.25rem;
}
.card{
  border:var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform var(--transition),box-shadow var(--transition);
}
.card:hover{transform:translateY(-3px);box-shadow:4px 4px 0 #000}
.card__thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.card__body{padding:1rem;flex:1;display:flex;flex-direction:column;gap:0.4rem}
.card__title{font-size:0.95rem;font-weight:700;line-height:1.3}
.card__title a{color:#000}
.card__title a:hover{text-decoration:underline}
.card__desc{font-size:0.82rem;color:#444;line-height:1.5;flex:1}
.card__date{font-size:0.75rem;color:#666;font-weight:500}

/* ══════════════════════════════════════
   TABLES (nav-table, child-table)
══════════════════════════════════════ */
.nav-table,.child-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:0.5rem;
  font-size:0.9rem;
}
.nav-table tr,.child-table__row{
  border-bottom:1px solid #e8e8e8;
  transition:background var(--transition);
}
.nav-table tr:hover,.child-table__row:hover{background:#f5f5f5}
.nav-table td,.child-table__title,.child-table__desc,.child-table__date{
  padding:0.7rem 0.6rem;
  vertical-align:top;
}
.nav-table__title a,.child-table__title a{
  font-weight:700;
  color:#000;
  font-size:0.9rem;
}
.nav-table__title a:hover,.child-table__title a:hover{text-decoration:underline}
.nav-table__desc,.child-table__desc{color:#555;font-size:0.82rem;line-height:1.45}
.child-table__date{color:#888;font-size:0.78rem;white-space:nowrap;text-align:right}
.topic-table-section,.topic-children,.related,.about-nav-links,.privacy-links{margin-bottom:3rem}

/* ══════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════ */
.breadcrumb{
  font-size:0.78rem;
  color:rgba(255,255,255,.5);
  margin-bottom:1rem;
  display:flex;
  flex-wrap:wrap;
  gap:0.3rem;
  align-items:center;
}
.breadcrumb a{color:rgba(255,255,255,.65);text-decoration:underline}
.breadcrumb a:hover{color:#fff}
.breadcrumb span[aria-current]{color:rgba(255,255,255,.85)}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.site-footer{
  background:#000;
  color:#fff;
  padding:3rem 2rem 1.5rem;
  margin-bottom:var(--nav-h);
}
.footer__subscribe{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.15);
  padding-bottom:2rem;
  margin-bottom:2rem;
}
.footer__subscribe-label{
  font-size:0.85rem;
  font-weight:700;
  letter-spacing:0.06em;
  color:rgba(255,255,255,.7);
  white-space:nowrap;
}
.footer__form{display:flex;gap:0.5rem;flex:1;min-width:220px}
.footer__input{
  flex:1;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius);
  color:#fff;
  padding:0.55rem 0.9rem;
  font-size:0.85rem;
  outline:none;
  min-height:40px;
}
.footer__input::placeholder{color:rgba(255,255,255,.35)}
.footer__input:focus{border-color:#fff}
.footer__submit{
  background:#fff;
  color:#000;
  border:none;
  border-radius:var(--radius);
  font-weight:700;
  font-size:0.82rem;
  padding:0.55rem 1.1rem;
  cursor:pointer;
  min-height:40px;
  transition:opacity var(--transition);
}
.footer__submit:hover{opacity:0.8}
.footer__cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin-bottom:2rem;
}
.footer__dl{}
.footer__dt{
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  margin-bottom:0.8rem;
}
.footer__dd{margin-bottom:0.45rem}
.footer__dd a{
  font-size:0.84rem;
  color:rgba(255,255,255,.7);
  transition:color var(--transition);
  line-height:1.6;
}
.footer__dd a:hover{color:#fff;text-decoration:none}
.footer__copy{
  font-size:0.75rem;
  color:rgba(255,255,255,.35);
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:1.2rem;
}
.footer__copy a{color:rgba(255,255,255,.5);text-decoration:underline}
.footer__copy a:hover{color:#fff}

/* ══════════════════════════════════════
   RELATED ASIDE
══════════════════════════════════════ */
.related{margin-top:2rem}

/* ══════════════════════════════════════
   PARALLAX / MICRO-INTERACTIONS
══════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  .card{will-change:transform}
  .prose-inner a{transition:opacity var(--transition)}
  .hero__media{overflow:hidden}
  .hero__img{transition:transform 0.6s cubic-bezier(.4,0,.2,1)}
  .hero:hover .hero__img{transform:scale(1.03)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width:768px){
  .hero{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    min-height:auto;
  }
  .hero__text{padding:3rem 1.5rem 2.5rem}
  .hero__media{min-height:220px}
  .hero__slash{display:none}

  .inner-hero--topic{padding:2.5rem 1.25rem 2rem;min-height:auto}
  .inner-hero__h1{font-size:clamp(1.4rem,7vw,2.2rem)}

  .article-hero{min-height:28vh}
  .article-hero__overlay{padding:2rem 1.25rem 1.75rem}
  .article-hero__h1{font-size:clamp(1.3rem,6vw,2rem)}

  .about-banner{padding:2.5rem 1.25rem 2rem;min-height:auto}
  .about-banner__h1{font-size:clamp(1.8rem,8vw,3rem)}

  .privacy-banner{padding:2rem 1.25rem 1.75rem}

  .page-main{padding:2rem 1.25rem 3rem}
  .prose-outer{padding:1.5rem 1.25rem 1.25rem}

  .footer__cols{grid-template-columns:1fr;gap:1.5rem}

  .cards-grid{grid-template-columns:1fr 1fr}

  .bottom-nav{padding:0 4px}
  .nav-a{font-size:0.65rem;padding:6px 4px}
  .bottom-nav__brand{font-size:0.95rem;padding:0 8px}
}

@media (max-width:480px){
  .cards-grid{grid-template-columns:1fr}
  .child-table__desc{display:none}
  .nav-a{font-size:0.6rem;padding:5px 3px}
}

/* ══════════════════════════════════════
   PRINT
══════════════════════════════════════ */
@media print{
  .site-header,.footer__subscribe{display:none}
  .site-wrap{padding-bottom:0}
  body{font-size:12pt}
}