/*
 * nd-homepage.css — ニコルデジマ Homepage
 * =========================================
 * Homepage-only styles. Loads only on is_front_page().
 * All class names prefixed hp- to avoid collision.
 *
 * DEPENDS ON: nd-tokens.css, nd-base.css, nd-global.css
 */


/* ═══════════════════════════════════════════════
   1. SHARED SECTION PATTERN
   ═══════════════════════════════════════════════ */

.hp-section {
  padding: var(--s-22) 0;
}

.hp-section--flush {
  padding-top: 0;
}

.hp-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-9);
}

.hp-section-title {
  display: flex;
  align-items: baseline;
  gap: var(--s-3_5);
}

.hp-section-title h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.5px;
  margin: 0;
  color: var(--ink);
  white-space: nowrap;
}

.hp-en {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 2.5px;
  white-space: nowrap;
}

.hp-section-link {
  font-size: 12px;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: var(--s-1_5);
  transition: color var(--hover-dur) var(--ease-soft);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
}

.hp-section-link:hover { color: var(--kaki); }


/* ═══════════════════════════════════════════════
   2. BUTTONS
   ═══════════════════════════════════════════════ */

.hp-btn-primary {
  background: var(--kaki);
  color: #fff;
  border: none;
  padding: 13px 22px;
  border-radius: var(--r-ctrl);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  transition: background var(--hover-dur) var(--ease-soft);
}

.hp-btn-primary:hover { background: var(--kaki-hover, #bf5a2e); color: #fff; }

.hp-btn-text {
  font-size: 13px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: color var(--hover-dur) var(--ease-soft);
  white-space: nowrap;
  text-decoration: none;
}

.hp-btn-text:hover { color: var(--kaki); }

.hp-btn-outline {
  border: 1px solid var(--ink);
  padding: 11px 20px;
  border-radius: var(--r-ctrl);
  font-size: 12px;
  color: var(--ink);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  transition: background var(--hover-dur) var(--ease-soft), color var(--hover-dur) var(--ease-soft);
}

.hp-btn-outline:hover { background: var(--ink); color: var(--paper); }


/* ═══════════════════════════════════════════════
   3. HERO
   ═══════════════════════════════════════════════ */

.hp-hero {
  padding: var(--s-22) 0 var(--s-24);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-20);
  align-items: start;
}

.hp-kicker {
  font-size: 11px;
  color: var(--kaki);
  letter-spacing: 3px;
  font-weight: 500;
  margin-bottom: var(--s-5);
}

.hp-h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.35;
  letter-spacing: -0.5px;
  margin: 0 0 var(--s-8);
  color: var(--ink);
  text-wrap: pretty;
}

.hp-lede {
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-2);
  margin: 0 0 var(--s-9);
}

.hp-cta-row {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}

/* Hero right */
.hp-hero-right {
  display: flex;
  flex-direction: column;
  gap: var(--s-4_5);
}

.hp-author-strip {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s-4) var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-3_5);
  background: var(--paper);
}

.hp-author-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.hp-author-dot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hp-strip-label {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 2px;
  font-weight: 500;
}

.hp-strip-name {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  margin-top: 2px;
  color: var(--ink);
}

.hp-strip-role {
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 2px;
}

/* Feature card */
.hp-feature {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s-4_5) var(--s-5);
  background: var(--paper);
}

.hp-feature-head {
  display: flex;
  align-items: center;
  gap: var(--s-2_5);
  margin-bottom: var(--s-2_5);
}

.hp-feature-tag {
  font-size: 10px;
  color: var(--kaki);
  font-weight: 500;
  background: var(--kaki-soft);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.hp-feature-label {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 2px;
}

.hp-feature-img {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-thumb);
  overflow: hidden;
  margin-bottom: var(--s-3_5);
}

.hp-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*.hp-feature-img--placeholder {
  background: linear-gradient(135deg, var(--placeholder-from, #e8e3d4), var(--placeholder-to, #d8d2c0));
}*/

.hp-feature-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 var(--s-3_5);
  color: var(--ink);
}

.hp-feature-link {
  font-size: 12px;
  color: var(--ink-2);
  transition: color var(--hover-dur) var(--ease-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--s-1_5);
  text-decoration: none;
}

.hp-feature-link:hover { color: var(--kaki); }


/* ═══════════════════════════════════════════════
   4. STATS
   ═══════════════════════════════════════════════ */

.hp-stats {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--s-12) 0;
}

.hp-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.hp-stat {
  padding: 0 var(--s-8);
  border-left: 1px solid var(--hairline-2);
}

.hp-stat--first {
  border-left: none;
  padding-left: 0;
}

.hp-stat-icon {
  color: var(--ink-2);
  margin-bottom: var(--s-2_5);
  width: 18px;
  height: 18px;
}

.hp-stat-num-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-1_5);
  margin-bottom: var(--s-1_5);
}

.hp-stat-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 42px;
  line-height: 1;
  color: var(--ink);
}

.hp-stat-unit {
  font-size: 13px;
  color: var(--ink-2);
}

.hp-stat-label {
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 4px;
  font-weight: 500;
}

.hp-stat-sub {
  font-size: 11px;
  color: var(--ink-3);
}


/* ═══════════════════════════════════════════════
   5. LATEST POSTS
   ═══════════════════════════════════════════════ */

.hp-latest-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-12);
  align-items: start;
}

/* Featured article */
.hp-feat-art { }

.hp-feat-cover {
  display: block;
  border-radius: var(--r-ctrl);
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--hairline);
}

.hp-feat-cover img {
  display: block;
  width: 100%;
  height: auto;
}

.hp-feat-cover-placeholder {
  width: 100%;
  height: 100%;
}

.hp-feat-meta-overlay {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: var(--s-3) 0 var(--s-2);
}

.hp-feat-new {
  font-size: 10px;
  color: var(--kaki);
  font-weight: 600;
  letter-spacing: 1.5px;
}

.hp-feat-date {
  font-size: 11px;
  color: var(--ink-2);
  background: rgba(255,255,255,.85);
  padding: 2px 6px;
  border-radius: var(--r-pill);
}

.hp-feat-art h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.55;
  margin: 0 0 var(--s-3_5);
  color: var(--ink);
  letter-spacing: 0.3px;
}

.hp-feat-art h3 a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--hover-dur) var(--ease-soft);
}

.hp-feat-art h3 a:hover { color: var(--kaki); }

.hp-feat-art p {
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0 0 var(--s-4_5);
}

.hp-feat-art p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hp-feat-read {
  font-size: 12px;
  color: var(--kaki);
  display: inline-flex;
  align-items: center;
  gap: var(--s-1_5);
  font-weight: 500;
  text-decoration: none;
}

/* Latest list */
.hp-latest-list {
  display: flex;
  flex-direction: column;
}

.hp-latest-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s-5);
  padding: var(--s-4_5) 0;
  align-items: center;
  border-bottom: 1px solid var(--hairline-2);
  text-decoration: none;
}

.hp-latest-row:first-child { padding-top: 0; }
.hp-latest-row:last-child { border-bottom: none; }

.hp-latest-thumb {
  display: block;
  aspect-ratio: 40 / 21;
  border-radius: var(--r-thumb);
  overflow: hidden;
  background: linear-gradient(135deg, #e8e3d4, #d8d2c0);
  text-decoration: none;
}

.hp-latest-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; 
  display: block;
}

.hp-latest-thumb--placeholder { }

.hp-latest-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-1_5);
  flex-wrap: nowrap;
}

.hp-latest-date {
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.hp-latest-row h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 var(--s-1);
  color: var(--ink);
}

.hp-latest-row h4 a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--hover-dur) var(--ease-soft);
}

.hp-latest-row h4 a:hover { color: var(--kaki); }

.hp-read-time {
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════
   6. PILLARS
   ═══════════════════════════════════════════════ */

.hp-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.hp-pillar {
  padding: var(--s-9) var(--s-8) var(--s-8);
  border-left: 1px solid var(--hairline-2);
}

.hp-pillar--first {
  border-left: none;
  padding-left: 0;
}

.hp-pillars .hp-pillar:last-child { padding-right: 0; }

.hp-pillar-num {
  font-family: var(--serif);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 2px;
  margin-bottom: var(--s-3_5);
}

.hp-pillar h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  margin: 0 0 var(--s-3);
  color: var(--ink);
}

.hp-pillar p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-2);
  margin: 0 0 var(--s-5);
  min-height: 46px;
}

.hp-pillar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  gap: var(--s-3);
  flex-wrap: nowrap;
}

.hp-pillar-count {
  color: var(--ink-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.hp-pillar-link {
  color: var(--ink);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1_5);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity var(--hover-dur) var(--ease-soft);
}

.hp-pillar-link:hover { opacity: 0.7; }


/* ═══════════════════════════════════════════════
   7. AUTHOR
   ═══════════════════════════════════════════════ */

.hp-author {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: var(--s-12);
  align-items: start;
}

.hp-author-portrait {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.hp-author-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hp-author-portrait::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: var(--r-circle);
  border: 1px solid rgba(255,255,255,.4);
}

.hp-author-main h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  margin: 0 0 var(--s-1_5);
  color: var(--ink);
  letter-spacing: 0.5px;
}

.hp-author-role {
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: var(--s-5);
}

.hp-author-bio {
  font-size: 13px;
  line-height: 1.95;
  color: var(--ink-2);
  margin: 0 0 var(--s-6);
}

.hp-author-tags {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
}

.hp-author-ctas {
  display: flex;
  align-items: center;
  gap: var(--s-3_5);
  flex-wrap: wrap;
}

.hp-author-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-3_5);
  padding-top: var(--s-2);
}

.hp-author-side-label {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 2px;
  font-weight: 500;
}

.hp-author-side-value {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  margin-top: 4px;
}


/* ═══════════════════════════════════════════════
   8. ARCHIVE GRID
   ═══════════════════════════════════════════════ */

.hp-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-9) var(--s-8);
}

.hp-arc-art { }

.hp-arc-cover {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-thumb);
  overflow: hidden;
  margin-bottom: var(--s-3_5);
  background: linear-gradient(135deg, #e8e3d4, #d8d2c0);
  text-decoration: none;
}

.hp-arc-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--hover-dur) var(--ease-soft);
}

.hp-arc-cover:hover img { transform: scale(1.03); }

.hp-arc-cover-placeholder { width: 100%; height: 100%; }

.hp-arc-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  flex-wrap: nowrap;
}

.hp-arc-date {
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.hp-arc-art h4 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 var(--s-1_5);
  color: var(--ink);
}

.hp-arc-art h4 a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--hover-dur) var(--ease-soft);
}

.hp-arc-art h4 a:hover { color: var(--kaki); }

.hp-arc-read {
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════
   9. NEWSLETTER
   ═══════════════════════════════════════════════ */

.hp-newsletter {
  background: var(--paper-2);
  border-radius: var(--r-banner);
  padding: var(--s-9) var(--s-12);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-9);
  align-items: center;
}

.hp-nl-mark {
  width: 64px;
  height: 64px;
  border-radius: var(--r-circle);
  border: 1px dashed var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink-2);
  position: relative;
  flex-shrink: 0;
}

.hp-nl-mark::after {
  content: "nikorudigima";
  position: absolute;
  bottom: -14px;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--ink-3);
  font-family: var(--sans);
  white-space: nowrap;
}

.hp-nl-copy { padding-left: var(--s-2); }

.hp-nl-copy h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  margin: 0 0 var(--s-1_5);
  color: var(--ink);
  line-height: 1.5;
}

.hp-nl-copy p {
  font-size: 12px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.7;
}

.hp-nl-form {
  display: flex;
  align-items: center;
  gap: var(--s-2_5);
}

.hp-nl-input {
  border: 1px solid var(--hairline);
  background: var(--paper);
  padding: 11px 16px;
  border-radius: var(--r-ctrl);
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  width: 220px;
  outline: none;
}

.hp-nl-input::placeholder { color: var(--ink-3); }

.hp-nl-submit {
  background: var(--kaki);
  color: #fff;
  border: none;
  padding: 11px 20px;
  border-radius: var(--r-ctrl);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--hover-dur) var(--ease-soft);
}

.hp-nl-submit:hover { background: var(--kaki-hover, #bf5a2e); }


/* ═══════════════════════════════════════════════
   10. FAQ
   ═══════════════════════════════════════════════ */

.hp-faq-list {
  border-top: 1px solid var(--hairline);
}

.hp-faq-item {
  border-bottom: 1px solid var(--hairline);
}

/* Remove default <details> marker */
.hp-faq-item summary { list-style: none; }
.hp-faq-item summary::-webkit-details-marker { display: none; }

.hp-faq-summary {
  padding: var(--s-5_5) 0;
  display: grid;
  grid-template-columns: 32px 1fr 24px;
  gap: var(--s-4);
  align-items: start;
  cursor: pointer;
  transition: opacity var(--hover-dur) var(--ease-soft);
}

.hp-faq-summary:hover { opacity: 0.75; }

.hp-faq-q {
  font-family: var(--serif);
  font-size: 11px;
  color: var(--kaki);
  font-weight: 500;
  letter-spacing: 1px;
  padding-top: 2px;
}

.hp-faq-text {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.6;
}

.hp-faq-icon {
  color: var(--ink-3);
  font-size: 18px;
  line-height: 1;
  text-align: right;
  transition: transform var(--hover-dur) var(--ease-soft);
}

.hp-faq-item[open] .hp-faq-icon {
  transform: rotate(45deg);
}

.hp-faq-answer {
  padding: 0 0 var(--s-5_5) calc(32px + var(--s-4));
}

.hp-faq-answer p {
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0;
}


/* ═══════════════════════════════════════════════
   11. RESPONSIVE
   ═══════════════════════════════════════════════ */

@media (max-width: 1000px) {
  .hp-hero {
    grid-template-columns: 1fr;
    gap: var(--s-12);
    padding: var(--s-16) 0 var(--s-16);
  }

  .hp-h1 { font-size: 40px; }

  .hp-latest-grid {
    grid-template-columns: 1fr;
    gap: var(--s-9);
  }

  .hp-archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hp-newsletter {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    padding: var(--s-8);
  }

  .hp-nl-mark { display: none; }
}

@media (max-width: 760px) {

  .hp-author {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }

  .hp-author-portrait {
    width: 100px;
    height: 100px;
  }
}

@media (max-width: 640px) {
  .hp-h1 { font-size: 32px; }

  .hp-stats-grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  .hp-stat {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--hairline-2);
    padding-top: var(--s-6);
  }

  .hp-stat:first-child {
    border-top: none;
    padding-top: 0;
  }

  .hp-pillars {
    grid-template-columns: 1fr;
  }

  .hp-pillar {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--hairline-2);
    padding-top: var(--s-7);
  }

  .hp-pillar--first {
    border-top: none;
    padding-top: var(--s-7);
  }

  .hp-archive-grid {
    grid-template-columns: 1fr;
  }

  .hp-nl-form {
    flex-direction: column;
    align-items: stretch;
  }

  .hp-nl-input { width: 100%; }
}


/* ═══════════════════════════════════════════════
   12. REVEAL ANIMATIONS
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  .hp-hero .hp-kicker,
  .hp-hero .hp-h1,
  .hp-hero .hp-lede,
  .hp-hero .hp-cta-row {
    opacity: 0;
    transform: translateY(6px);
    animation: hpRevealUp var(--rev-dur) var(--ease-soft) forwards;
  }

  .hp-hero .hp-kicker    { animation-delay: 60ms; }
  .hp-hero .hp-h1        { animation-delay: 160ms; }
  .hp-hero .hp-lede      { animation-delay: 280ms; }
  .hp-hero .hp-cta-row   { animation-delay: 400ms; }

  .hp-hero .hp-hero-right {
    opacity: 0;
    animation: hpFadeIn 800ms var(--ease-soft) 320ms forwards;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@keyframes hpRevealUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hpFadeIn {
  from { opacity: 0; } to { opacity: 1; }
}