/* Rabbit Hole Digital — page-level section layouts. Ported from the page JSX. */

/* ===== Shared chips / dotted lists ===== */
.rh-chip{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); border:1px solid var(--hairline-strong); border-radius:999px; padding:6px 12px; }
.rh-chip--sm{ padding:5px 11px; }
.rh-chiprow{ display:flex; flex-wrap:wrap; gap:8px; }
.rh-dotlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.rh-dotlist li{ font-family:var(--font-body); font-size:14px; color:var(--text); display:flex; gap:10px; align-items:center; }
.rh-dotlist li::before{ content:""; width:5px; height:5px; border-radius:999px; background:var(--accent); flex:0 0 auto; }
.rh-metric{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.rh-cardmeta{ display:flex; gap:var(--space-3); align-items:center; margin-bottom:var(--space-3); }
.rh-cardmeta__cat{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.rh-cardmeta__date{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.rh-cardtitle{ font-family:var(--font-display); font-weight:700; font-size:1.35rem; line-height:1.1; color:var(--text-hi); margin:0 0 var(--space-3); }

/* ===== Home hero ===== */
.rh-home-hero{ position:relative; overflow:hidden; background:linear-gradient(180deg, var(--bg) 0%, var(--ink-800) 65%); }
.rh-home-hero__inner{ position:relative; z-index:1; }
.rh-home-hero__body{ padding-top:var(--space-8); padding-bottom:var(--space-8); }
.rh-home-hero__title{ font-family:var(--font-display); font-weight:900; font-size:var(--display-size); line-height:var(--display-lh); letter-spacing:var(--display-ls); text-transform:uppercase; color:var(--text-hi); margin:var(--space-5) 0 0; max-width:780px; }
.rh-hero-mesh{ position:absolute; inset:0; pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 16%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0%, transparent 16%, #000 100%); }
.rh-hero__marquee{ background:rgba(255,255,255,.04); -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }

/* ===== Services ===== */
.rh-svc{ background:var(--card-bg); border:1px solid var(--hairline); border-radius:var(--radius-card); padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3); }
.rh-svc__top{ display:flex; align-items:center; justify-content:space-between; }
.rh-svc__n{ font-family:var(--font-mono); font-size:var(--mono-size); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.rh-svc__title{ font-family:var(--font-display); font-weight:700; font-size:var(--h3-size); line-height:1.1; color:var(--text-hi); margin:0; }
.rh-svc__desc{ font-family:var(--font-body); font-size:14px; line-height:1.6; color:var(--text-muted); margin:0; }
.rh-svc__list{ list-style:none; margin:var(--space-3) 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.rh-svc__list li{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); display:flex; gap:8px; align-items:center; }
.rh-svc__list li::before{ content:""; width:5px; height:5px; border-radius:999px; background:var(--accent); flex:0 0 auto; }

/* ===== Approach ===== */
.rh-approach{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--space-8); margin-top:var(--space-7); align-items:center; }
.rh-approach__features{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6) var(--space-7); }
@media (max-width:900px){ .rh-approach{ grid-template-columns:1fr; } }

/* ===== Selected work / cards media ===== */
.rh-workcard__media{ height:150px; margin:0 0 var(--space-3); }
.rh-workcard__tag{ position:absolute; left:14px; top:12px; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }

/* ===== Tech stack ===== */
.rh-techgrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:var(--space-7); }
.rh-techgroup{ border-top:1px solid var(--hairline-strong); padding-top:var(--space-4); }
.rh-techgroup__title{ font-family:var(--font-mono); font-size:var(--mono-size); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:var(--space-4); }
.rh-chip--sm11{ font-size:11px; }

/* ===== Work index / case grids ===== */
.rh-seg{ margin-bottom:var(--space-7); }

/* ===== Case study ===== */
.rh-cs-hero__media{ height:340px; margin-top:0; }
.rh-metabar{ border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.rh-metabar__grid{ display:grid; gap:var(--space-5); padding-top:var(--space-5); padding-bottom:var(--space-5); }
.rh-metabar__k{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.rh-metabar__klabel{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.rh-metabar__v{ font-family:var(--font-body); font-size:14px; color:var(--text-hi); }
.rh-cs-body{ display:grid; grid-template-columns:2fr 1fr; gap:var(--space-8); align-items:start; }
.rh-prose{ font-family:var(--font-body); font-size:var(--body-lg-size); line-height:1.7; color:var(--text-muted); max-width:680px; display:flex; flex-direction:column; gap:var(--space-4); }
.rh-prose p{ margin:0; }
.rh-aside{ display:flex; flex-direction:column; gap:var(--space-6); }
.rh-featgrid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5) var(--space-7); margin-top:var(--space-6); }
.rh-nextcase{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--hairline-strong); padding-top:var(--space-5); flex-wrap:wrap; gap:var(--space-3); }
.rh-nextcase__label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; }
.rh-nextcase__title{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--text-hi); }
@media (max-width:900px){ .rh-cs-body{ grid-template-columns:1fr; } .rh-aside{ position:static; } .rh-featgrid-2{ grid-template-columns:1fr; } }

/* ===== Field notes ===== */
.rh-featured{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-7); align-items:stretch; border:1px solid var(--hairline); border-radius:var(--radius-card); background:var(--card-bg); overflow:hidden; }
.rh-featured__media{ background:linear-gradient(135deg, var(--ink-800), var(--ink-750)); position:relative; min-height:300px; border-right:1px solid var(--hairline); }
.rh-featured__body{ padding:var(--space-7); display:flex; flex-direction:column; justify-content:center; }
.rh-featured__title{ font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3.4vw,40px); line-height:1.02; letter-spacing:-.01em; color:var(--text-hi); margin:0; }
.rh-featured__desc{ font-family:var(--font-body); font-size:var(--body-lg-size); line-height:1.6; color:var(--text-muted); margin:var(--space-4) 0 var(--space-5); }
.rh-newsletter{ max-width:640px; text-align:center; margin:0 auto; }
.rh-newsletter__form{ display:flex; gap:var(--space-3); margin-top:var(--space-6); justify-content:center; flex-wrap:wrap; }
.rh-newsletter__form .rh-input{ min-width:280px; }
@media (max-width:900px){ .rh-featured{ grid-template-columns:1fr; } .rh-featured__media{ border-right:0; border-bottom:1px solid var(--hairline); } }

/* ===== Article ===== */
.rh-article-body{ display:grid; grid-template-columns:2fr 1fr; gap:var(--space-8); align-items:start; }
.rh-article-prose{ display:flex; flex-direction:column; gap:var(--space-5); max-width:680px; }
.rh-article-prose p{ font-family:var(--font-body); font-size:var(--body-lg-size); line-height:1.75; color:var(--text); margin:0; }
.rh-article-prose h3{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; letter-spacing:-.01em; color:var(--text-hi); margin:var(--space-4) 0 0; }
.rh-sidebar{ display:flex; flex-direction:column; gap:var(--space-5); }
.rh-widget{ border:1px solid var(--hairline); border-radius:var(--radius-card); background:var(--card-bg); padding:var(--space-5); }
.rh-widget__title{ font-family:var(--font-mono); font-size:var(--mono-size); letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-bottom:var(--space-4); }
.rh-widget__badge{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); text-align:center; border:1px dashed var(--hairline-strong); border-radius:var(--radius-card); padding:var(--space-3); }
.rh-widget__posts{ display:flex; flex-direction:column; gap:var(--space-3); }
.rh-widget__posts a{ font-family:var(--font-body); font-size:14px; color:var(--text); text-decoration:none; border-top:1px solid var(--hairline); padding-top:var(--space-3); }
.rh-widget__posts a:hover{ color:var(--accent)!important; }
.rh-author{ display:flex; gap:var(--space-5); align-items:center; border-top:1px solid var(--hairline-strong); padding-top:var(--space-6); max-width:680px; }
.rh-author__mark{ width:64px; height:64px; border-radius:var(--radius-card); background:linear-gradient(135deg, var(--ink-800), var(--ink-750)); border:1px solid var(--hairline-strong); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.rh-author__name{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--text-hi); }
.rh-author__bio{ font-family:var(--font-body); font-size:14px; color:var(--text-muted); margin:4px 0 0; max-width:460px; }
@media (max-width:900px){ .rh-article-body{ grid-template-columns:1fr; } .rh-sidebar{ position:static; } }

/* ===== About ===== */
.rh-about-hero{ padding-top:var(--space-8); padding-bottom:var(--space-8); display:grid; grid-template-columns:1.3fr 0.7fr; gap:var(--space-8); align-items:center; }
.rh-about-hero__title{ font-family:var(--font-display); font-weight:900; font-size:clamp(38px,5.5vw,64px); line-height:.98; letter-spacing:-.02em; text-transform:uppercase; color:var(--text-hi); margin:var(--space-4) 0 0; }
.rh-portrait{ aspect-ratio:3/4; border-radius:var(--radius-card); background:linear-gradient(135deg, var(--ink-800), var(--ink-750)); border:1px solid var(--hairline-strong); position:relative; overflow:hidden; }
.rh-timeline__row{ display:grid; grid-template-columns:160px 1fr; gap:var(--space-6); padding:var(--space-5) 0; border-top:1px solid var(--hairline-strong); }
.rh-timeline__yr{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.rh-timeline__role{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--text-hi); }
.rh-timeline__org{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.rh-timeline__desc{ font-family:var(--font-body); font-size:15px; line-height:1.6; color:var(--text-muted); margin:8px 0 0; max-width:620px; }
.rh-skillcard{ background:var(--card-bg); border:1px solid var(--hairline); border-radius:var(--radius-card); padding:var(--space-6); }
.rh-skillcard__head{ display:flex; align-items:center; gap:8px; margin-bottom:var(--space-4); }
.rh-skillcard__title{ font-family:var(--font-mono); font-size:var(--mono-size); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
@media (max-width:900px){ .rh-about-hero{ grid-template-columns:1fr; } .rh-timeline__row{ grid-template-columns:1fr; gap:var(--space-2); } }

/* ===== Contact ===== */
.rh-contact-grid{ display:grid; grid-template-columns:1.4fr 0.9fr; gap:var(--space-8); align-items:start; }
.rh-contact-card{ background:var(--card-bg); border:1px solid var(--hairline); border-radius:var(--radius-card); padding:var(--space-7); }
.rh-form{ display:flex; flex-direction:column; gap:var(--space-5); }
.rh-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); }
.rh-form__submit{ display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; }
.rh-form__note{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--text-faint); }
.rh-form__note.is-ok{ color:var(--accent-active); }
.rh-contact-aside{ display:flex; flex-direction:column; gap:var(--space-6); }
.rh-contact-row{ border-top:1px solid var(--hairline-strong); padding-top:var(--space-3); }
.rh-contact-row__k{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.rh-contact-row__klabel{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.rh-contact-row__v{ font-family:var(--font-body); font-size:15px; color:var(--text-hi); }
a.rh-contact-row__v{ color:var(--accent); text-decoration:none; }
@media (max-width:900px){ .rh-contact-grid{ grid-template-columns:1fr; } .rh-form__row{ grid-template-columns:1fr; } }