/*
Theme Name: Webbing Widow
Description: An editorial block theme for Webbing Widow, with native editable page content and custom thread artwork.
Version: 0.2.0
Requires at least: 6.6
Text Domain: webbing-widow
*/

/* Shared front-end/editor presentation. All copy stays in native blocks. */
body { margin: 0; }
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
a { text-underline-offset: .3em; }
a:focus-visible, button:focus-visible { outline: 2px solid #F5F5F5; outline-offset: 6px; }
.wp-site-blocks > * { margin-block-start: 0; }
.ww-header, .ww-hero { width: min(100% - 112px, 1400px); margin-inline: auto; }
.ww-header { padding-block: 34px; gap: 32px; }
.ww-wordmark { font-family: Newsreader, Georgia, serif; font-size: 34px; letter-spacing: -.055em; line-height: 1; }
.ww-wordmark a { text-decoration: none; }
.ww-nav { gap: 30px; font-size: 13px; }
.ww-nav p { margin: 0; }
.ww-nav .wp-block-navigation { font-size: inherit; }
.ww-nav .wp-block-navigation a { text-decoration: none; border-bottom: 1px solid #C1121F; padding-block: 9px; }
.ww-nav [aria-disabled] { color: #8F8F99; cursor: default; }
.ww-nav p a { text-decoration: none; }
.ww-nav p a:hover { text-decoration: underline; }
.ww-hero { display: grid; grid-template-columns: 58% 42%; align-items: center; min-height: min(800px, calc(100svh - 110px)); padding-block: 60px 100px; position: relative; }
.ww-hero > * { min-width: 0; margin: 0; }
.ww-hero-copy { position: relative; z-index: 1; }
.ww-eyebrow { display: flex; align-items: center; gap: 15px; font-size: 10px; font-weight: 500; letter-spacing: .2em; color: #B9B9C2; margin: 0 0 36px; }
.ww-eyebrow::before { content: ''; width: 30px; height: 1px; background: #C1121F; flex-shrink: 0; }
.ww-title { font-family: Newsreader, Georgia, serif; font-size: clamp(3rem, 7.2vw, 7.25rem); font-weight: 400; letter-spacing: -.055em; line-height: .98; margin: 0; text-wrap: balance; }
.ww-intro { max-width: 420px; color: #B9B9C2; font-size: 15px; line-height: 1.85; margin: 34px 0 0; }
.ww-hero-link { font-size: 12px; margin: 25px 0 0; }
.ww-hero-link a, .ww-hero-link > span { text-decoration: none; display: inline-flex; gap: 24px; align-items: center; padding-block: 10px; border-bottom: 1px solid #53535C; transition: border-color .2s ease; }
.ww-hero-link a:hover { border-color: #C1121F; }
.ww-hero .ww-eyebrow { margin: 0 0 36px; }
.ww-hero .ww-intro { margin: 34px 0 0; }
.ww-hero .ww-hero-link { margin: 25px 0 0; }
.ww-hero-art { position: relative; isolation: isolate; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.ww-hero-art::before { content: ''; position: absolute; inset: 9% -3% 10% -8%; z-index: -1; background: radial-gradient(ellipse at 52% 48%, #24242888, transparent 68%); }
.ww-web { width: 100%; margin: 0; position: relative; }
.ww-web img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 820; }
.ww-web .wp-element-caption { position: absolute; left: 0; bottom: 8px; width: 45%; margin: 0; text-align: left; font-family: Inter, sans-serif; font-size: 10px; line-height: 1.8; letter-spacing: .015em; color: #B9B9C2; }
/* Homepage story: native blocks, with different layouts for different ideas. */
.entry-content { position: relative; }
.ww-section { position: relative; width: min(100% - 112px, 1400px); margin-inline: auto; padding-block: 124px; scroll-margin-top: 36px; }
.ww-section :where(p, h2, h3, ol, .wp-block-group) { margin-block: 0; }
.ww-section .ww-section-tag { margin: 0 0 38px; padding-left: 40px; color: #B9B9C2; font-size: 10px; font-weight: 500; letter-spacing: .19em; }
.ww-section-tag::before { content: ''; position: absolute; margin-left: -40px; margin-top: 8px; width: 20px; height: 1px; background: #53535C; }
.ww-philosophy .ww-section-tag::before { display: none; }
.ww-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(48px, 8vw, 140px); align-items: start; }
.ww-section .ww-section-title { font-size: clamp(42px, 4.5vw, 68px); letter-spacing: -.045em; line-height: 1.08; font-weight: 400; }
.ww-prose p, .ww-body-copy, .ww-service-row p, .ww-process-steps li { color: #B9B9C2; font-size: 15px; line-height: 1.9; }
.ww-prose > p + p { margin-top: 22px; }
.ww-prose > .ww-section-title + p { margin-top: 30px; }
.ww-listen-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 80px !important; }
.ww-listen-step { position: relative; padding-top: 31px; border-top: 1px solid #35353B; }
.ww-listen-step:not(:last-child)::after { content: '→'; position: absolute; top: -15px; right: -31px; font-size: 15px; color: #B9B9C2; }
.ww-listen-step h3 { font-size: 36px; letter-spacing: -.025em; font-weight: 400; }
.ww-listen-step p { margin-top: 12px; font-size: 13px; line-height: 1.8; color: #B9B9C2; }
.ww-experience { border-top: 1px solid #242428; }
.ww-experience-split { grid-template-columns: 1fr 1fr; }
.ww-monthly { padding: 24px 34px 0; }
.ww-monthly .ww-monthly-word { font-family: Newsreader, Georgia, serif; font-size: 84px; font-weight: 400; letter-spacing: -.045em; line-height: 1.1; }
.ww-monthly .ww-monthly-lead { margin-top: 58px; margin-bottom: 22px; color: #F5F5F5; font-size: 20px; line-height: 1.6; }
.ww-services { border-top: 1px solid #242428; }
.ww-service-list { margin-top: 64px !important; }
.ww-service-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; border-top: 1px solid #35353B; padding-block: 32px; align-items: baseline; }
.ww-service-row:last-child { border-bottom: 1px solid #35353B; }
.ww-service-row h3 { font-size: 34px; line-height: 1.3; letter-spacing: -.025em; font-weight: 400; }
.ww-quiet-link { margin-top: 35px !important; font-size: 12px; }
.ww-quiet-link a { display: inline-flex; align-items: center; gap: 28px; padding-block: 9px; text-decoration: none; border-bottom: 1px solid #53535C; }
.ww-quiet-link a:hover { border-color: #C1121F; }
.ww-process { border-top: 1px solid #242428; }
.ww-process-steps { padding-left: 28px; margin: 0; }
.ww-process-steps li { padding: 0 0 32px 20px; margin: 0 0 30px; border-bottom: 1px solid #242428; }
.ww-process-steps li:last-child { margin-bottom: 0; }
.ww-process-steps li::marker { color: #B9B9C2; font-size: 12px; font-variant-numeric: tabular-nums; }
.ww-process-steps strong { display: inline-block; color: #F5F5F5; font-size: 23px; font-family: Newsreader, Georgia, serif; font-weight: 400; margin-bottom: 10px; }
.ww-next { padding-block: 120px 140px; border-top: 1px solid #242428; }
.ww-next .ww-section-title { max-width: 850px; }
.ww-next .ww-next-copy { margin-top: 30px; max-width: 510px; font-size: 15px; line-height: 1.9; color: #B9B9C2; }
.ww-next .ww-next-links { margin-top: 36px; gap: 42px; font-size: 13px; }
.ww-next-links p > span { display: inline-flex; gap: 24px; padding-bottom: 10px; border-bottom: 1px solid #53535C; }
.ww-next-links [aria-disabled] { color: #B9B9C2; }
.ww-footer { position: relative; background: #0B0B0D; padding-block: 120px 40px; }
.ww-footer::before { content: ''; position: absolute; inset: 0 0 auto; height: 110px; background: url('assets/art/footer-threads.svg') center top / cover no-repeat; pointer-events: none; }
.ww-footer-inner { width: min(100% - 112px, 1400px); margin-inline: auto; }
.ww-footer .ww-footer-top { gap: 28px; align-items: baseline; }
.ww-footer .ww-wordmark { font-size: 42px; margin: 0; }
.ww-footer-description { color: #B9B9C2; font-size: 12px; line-height: 1.8; margin: 0; }
.ww-footer .ww-footer-nav { margin-block: 42px; font-size: 12px; gap: 30px; }
.ww-footer-nav a { text-decoration: none; }
.ww-footer-nav a:hover { text-decoration: underline; }
.ww-footer .ww-footer-bottom { border-top: 1px solid #242428; padding-top: 25px; gap: 20px; color: #B9B9C2; font-size: 11px; }
.ww-footer-bottom p { margin: 0; }
@media (max-width: 1000px) {
  .ww-section, .ww-footer-inner { width: calc(100% - 64px); }
  .ww-section { padding-block: 105px; }
  .ww-split { gap: 48px; }
  .ww-section .ww-section-title { font-size: 46px; }
  .ww-monthly { padding-inline: 28px; }
  .ww-monthly .ww-monthly-word { font-size: 66px; }
  .ww-service-row { gap: 48px; }
}
@media (max-width: 700px) {
  .ww-section, .ww-footer-inner { width: calc(100% - 40px); }
  .ww-section { padding-block: 92px; scroll-margin-top: 24px; }
  .ww-section .ww-section-tag { font-size: 9px; letter-spacing: .15em; margin-bottom: 30px; }
  .ww-section .ww-section-title { font-size: clamp(39px, 9.5vw, 54px); }
  .ww-split { grid-template-columns: 1fr; gap: 30px; }
  .ww-prose p, .ww-body-copy, .ww-service-row p, .ww-process-steps li { font-size: 14px; }
  .ww-listen-flow { grid-template-columns: 1fr; gap: 26px; margin-top: 48px !important; }
  .ww-listen-step { padding: 0 0 25px 26px; border-top: 0; border-left: 1px solid #35353B; }
  .ww-listen-step:not(:last-child)::after { content: '↓'; top: auto; right: auto; left: -5px; bottom: -19px; font-size: 12px; background: #0B0B0D; }
  .ww-listen-step h3 { font-size: 32px; }
  .ww-monthly { margin-top: 22px !important; padding: 28px 28px 0; }
  .ww-monthly .ww-monthly-word { font-size: 60px; }
  .ww-monthly .ww-monthly-lead { font-size: 18px; margin-top: 58px; }
  .ww-service-list { margin-top: 40px !important; }
  .ww-service-row { grid-template-columns: 1fr; gap: 14px; padding-block: 27px; }
  .ww-service-row h3 { font-size: 30px; }
  .ww-process-steps { margin-top: 10px; }
  .ww-process-steps li { padding-left: 12px; }
  .ww-next .ww-next-links { gap: 26px; font-size: 12px; }
  .ww-next-links p > span { gap: 12px; }
  .ww-footer { padding-top: 100px; }
  .ww-footer .ww-wordmark { font-size: 36px; }
  .ww-footer .ww-footer-nav { margin-block: 32px; }
}
@media (min-width: 1700px) { .ww-hero { min-height: 820px; } }
@media (max-width: 1000px) {
  .ww-header, .ww-hero { width: calc(100% - 64px); }
  .ww-nav { gap: 20px; }
  .ww-title { font-size: clamp(3rem, 7.2vw, 6rem); }
  .ww-hero { min-height: 700px; padding-block: 55px 75px; }
}
@media (max-width: 700px) {
  .ww-header, .ww-hero { width: calc(100% - 40px); }
  .ww-header { padding-block: 26px 20px; gap: 25px; align-items: flex-start !important; }
  .ww-wordmark { font-size: 30px; }
  .ww-nav { width: 100%; gap: 22px; justify-content: flex-start !important; font-size: 11px; flex-wrap: wrap; }
  .ww-hero { grid-template-columns: 1fr; min-height: 0; padding-block: 48px 30px; }
  .ww-title { font-size: clamp(3rem, 9.6vw, 4.6rem); }
  .ww-eyebrow { font-size: 9px; letter-spacing: .17em; margin-bottom: 28px; }
  .ww-intro { font-size: 14px; max-width: 390px; margin-top: 27px; }
  .ww-hero .ww-eyebrow { margin-bottom: 28px; }
  .ww-hero .ww-intro { margin-top: 27px; }
  .ww-hero-art { width: min(100%, 470px); margin: 22px auto 0; }
  .ww-web { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}