/* ulrick.tech · W2 home. Mobile first; desktop matches mockups/home.html. */
.ph{color:var(--tezontle)}
.ph-note{display:inline-block;margin-top:14px;font-family:var(--font-mono);font-weight:500;font-size:.75rem;letter-spacing:.04em;
  padding:4px 8px;border:1px dashed var(--tezontle)}
.ph-on-ink{color:var(--tezontle-on-ink)!important}
.button{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--bone);text-decoration:none;
  padding:16px 22px;font-family:var(--font-mono);font-weight:600;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase}
.button:hover{background:var(--tezontle);color:var(--bone)}
.link-mono{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px}
.link-mono:hover{color:var(--tezontle);border-color:var(--tezontle)}

/* Hero */
.hero{padding-block:36px 48px}
.hero__grid{display:grid;gap:32px}
.hero .mono:first-child{font-size:.6875rem}
.hero__title{margin-top:16px;font-size:clamp(3.125rem,6.4vw,6.5rem)}
.hero__es{margin-top:14px;font-size:clamp(1.125rem,1.4vw + .6rem,1.625rem);font-weight:600;color:var(--slate)}
.hero__lede{margin-top:20px}
.hero__cta{margin-top:28px}
.hero__proof{max-width:480px}  /* < 1024: photo + proof list share one column, max 480px */
.hero__photo img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 15%;filter:grayscale(1)}
.proof{list-style:none;margin:20px 0 0;padding:0}
.proof li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--hairline)}
.proof li span:last-child{font-family:var(--font-mono);font-weight:500;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);text-align:right;white-space:nowrap}
.proof__more{display:none!important}

/* Ventures */
.cards{display:grid;gap:14px;list-style:none;margin:0;padding:0}
.card{background:var(--card);border:1px solid var(--hairline);padding:24px;display:flex;flex-direction:column}
.card__role{font-size:.6875rem}
.card h3{margin:16px 0 10px;font-size:1.625rem}
.card__text{color:var(--slate);flex:1}
.card__text.ph{color:var(--tezontle)}
.card__link{margin-top:20px;padding-top:14px;border-top:1px solid var(--ink);font-family:var(--font-mono);font-weight:600;font-size:.8125rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.card--more{display:none}
.ventures__also{display:none;margin-top:24px}
.ventures__see-all{margin-top:16px;font-size:.6875rem}

/* Thesis */
.thesis{list-style:none;margin:0;padding:0}
.thesis li{display:grid;grid-template-columns:44px 1fr;border-top:1px solid #3a3c3e;padding:22px 0;font-size:1rem}
.thesis li b{font-family:var(--font-mono);font-weight:600;color:var(--tezontle-on-ink);font-size:.9375rem;letter-spacing:.14em}
.thesis__effect{grid-column:2;margin-top:6px;font-size:.875rem;color:#9aa0a3}
.thesis__effect.accent{color:var(--tezontle-on-ink)}
.thesis__detail{display:none}
.thesis__total{border-bottom:3px double var(--bone)}

/* Writing empty state */
.feed-empty{display:grid;gap:10px;padding:24px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--hairline);align-items:baseline}
.feed-empty__title{font-size:1.625rem;font-weight:700;letter-spacing:-.02em}
.feed-empty .muted{margin-top:4px}

/* Subscribe + book */
.duo{display:grid;gap:24px}
.box{border:2px solid var(--ink);padding:24px;scroll-margin-top:24px}
.box__title{margin:16px 0;font-size:clamp(1.75rem,2vw + 1rem,2.5rem);letter-spacing:-.03em;line-height:1}
.box__text{font-size:1.0625rem}
.substack-embed{display:block;width:100%;max-width:480px;height:150px;margin-top:24px;border:1px solid var(--hairline);background:#fff}
/* W4.1 (QA P3-8): with scripting off, Substack's iframe only shows its "requires JavaScript" banner. Hide it; the plain
   Substack link next to it (Home: Open on Substack, Writing: Subscribe on Substack) stays visible. */
@media (scripting:none){.substack-embed{display:none}}
.box__alt{margin-top:14px}
.book{display:flex;flex-direction:column;gap:24px}
.book__cover{width:150px;height:220px;flex:none;background:var(--ink);position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:14px 14px 14px 22px}
.book__cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--tezontle)}
.book__cover .mono{color:var(--bone);font-size:.625rem;letter-spacing:.14em}
.book .box__title{margin-bottom:6px}
.book__subtitle{font-size:1.125rem;font-weight:600;color:var(--slate)}
.digest{list-style:none;margin:20px 0 24px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-bottom:3px double var(--ink)}
.digest li{padding:10px 0;font-family:var(--font-mono);font-weight:500;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase}
.digest b{color:var(--tezontle);font-weight:600}
.book__work{margin-top:20px}
.book__work a{color:var(--ink);text-decoration:none;white-space:nowrap}

@media (min-width:720px){
  .proof__more{display:flex!important}
  .card--more{display:flex}
  .ventures__also{display:block}
  .ventures__see-all{display:none}
  .cards{grid-template-columns:repeat(2,1fr);gap:24px}
  .card{padding:36px;min-height:280px}
  .card h3{font-size:2rem;margin-top:20px}
  .card__role{font-size:.8125rem}
  .thesis li{grid-template-columns:120px 1fr 1fr;padding:26px 0;font-size:1.25rem}
  .thesis__effect{grid-column:auto;margin-top:0;font-size:1.25rem}
  .thesis__detail{display:inline}
  .feed-empty{grid-template-columns:150px 1fr auto}
  .box{padding:40px}
  .book{flex-direction:row;align-items:center;gap:32px}
  .hero .mono:first-child{font-size:.8125rem}
}
@media (min-width:1024px){
  .hero{padding-block:72px 88px}
  .hero__grid{grid-template-columns:1.35fr 1fr;gap:72px}
  .hero__proof{border-left:1px solid var(--hairline);padding-left:40px}
  .hero__proof{max-width:none}
  .hero__photo img{height:400px;aspect-ratio:auto;object-position:50% 15%}
  .hero__lede{margin-top:36px}
  .hero__cta{margin-top:40px}
  .cards{grid-template-columns:repeat(3,1fr)}
  .duo{grid-template-columns:1fr 1fr}
  .book{flex-direction:column;align-items:flex-start}
}
@media (min-width:1200px){.book{flex-direction:row;align-items:center}}
/* W6.2: with the DIGEST list held, keep the gap it used to give between the subtitle and the waitlist button (Home book box). */
.book__subtitle + p:has(> .button){margin-top:24px}