:root{
  --bg:#fff;--text:#181818;--muted:#5f5f5f;--soft:#8b8b8b;
  --line:#e9e9e9;--tone:#f7f7f4;--max:1180px;--read:690px;
}
*{box-sizing:border-box}
html{overflow-x:hidden}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"IBM Plex Sans",Arial,sans-serif;font-size:17.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
a{color:inherit;text-underline-offset:3px}
.site{width:min(calc(100% - 88px),var(--max));margin:0 auto}
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;display:flex;
  justify-content:space-between;align-items:center;
  padding:18px max(44px,calc((100vw - var(--max))/2)) 12px;background:#fff
}
.identity{display:flex;align-items:center;gap:20px;text-decoration:none}
.logo{display:block;width:78px;height:auto;flex:0 0 auto;transform:translateY(2px)}
.signature{font-size:30px;line-height:.92;font-weight:600;letter-spacing:-.015em}
.signature span{display:block}
nav{display:flex;align-items:center;gap:10px;padding-top:4px}
nav a{color:#a0a0a0;font-size:14px;font-weight:500;text-decoration:none}
nav a.is-active,nav a:hover{color:#111}
nav .slash{color:#c4c4c4;font-size:14px}
nav .active-slash{color:#111}
main{padding-top:86px}

.hero,.article-head,.segment{
  display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:44px
}
.hero{padding:74px 0 64px}
.rail,.head-guide,.segment-guide{
  grid-column:1;color:var(--soft);font-size:13px;line-height:1.3;padding-top:8px
}
.hero-copy,.head-copy,.segment-copy{grid-column:2}
.hero-copy{max-width:760px}
h1{margin:0 0 18px;font-size:clamp(36px,3.4vw,48px);line-height:1.08;font-weight:500;letter-spacing:-.028em}
.intro,.deck{max-width:650px;margin:0;color:var(--muted);font-size:18px;line-height:1.55}
.deck{margin-bottom:15px}
time{color:var(--soft);font-size:12.5px}

.list{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:44px;border-top:1px solid var(--line)}
.list-rail{grid-column:1;color:var(--soft);font-size:13px;line-height:1.3;padding-top:46px}
.entries{grid-column:2;max-width:820px}
.entry{display:block;padding:40px 0 42px;border-bottom:1px solid var(--line);text-decoration:none}
.entry h2{margin:0 0 12px;font-size:29px;line-height:1.2;font-weight:500;letter-spacing:-.018em}
.entry p{max-width:680px;margin:0 0 13px;color:var(--muted);font-size:16.5px;line-height:1.52}
.entry:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

.article-head{padding:74px 0 56px}
.head-copy{width:min(100%,760px)}
.article-head h1{font-size:clamp(38px,3.7vw,52px)}
.article-body{border-top:1px solid var(--line)}
.segment{padding:36px 0 38px}
.segment-guide{padding-top:4px}
.segment-copy{width:min(100%,var(--read))}
.segment-copy p{margin:0 0 18px}
.segment-copy p:last-child{margin-bottom:0}
.segment-copy h3,.segment-copy h4{
  margin:30px 0 14px;font-size:21px;line-height:1.35;font-weight:600;letter-spacing:-.01em
}
.segment-copy strong{font-weight:600}
.segment-copy em{font-style:italic}
.segment-copy blockquote{
  margin:30px 0;padding:0 0 0 20px;border-left:1px solid var(--line);
  font-size:20px;line-height:1.5;color:#292929
}
.segment-copy ul,.segment-copy ol{margin:18px 0 22px;padding-left:24px}
.segment-copy li{margin:6px 0}
.segment-copy a{text-decoration:underline}
.segment-copy figure{margin:34px 0}
.segment-copy figure img{display:block;width:100%;height:auto}
.segment.mirada{
  background:var(--tone);
  margin-left:calc((100vw - min(calc(100% - 88px),var(--max)))/-2);
  margin-right:calc((100vw - min(calc(100% - 88px),var(--max)))/-2);
  padding-left:calc((100vw - min(calc(100% - 88px),var(--max)))/2);
  padding-right:calc((100vw - min(calc(100% - 88px),var(--max)))/2)
}
.segment.mirada .segment-copy > p:first-child{
  font-size:27px;line-height:1.34;font-weight:500;letter-spacing:-.015em
}
.back{padding:36px 0 42px}
.back a{color:var(--muted);font-size:14px;text-decoration:none}
.back a:hover{text-decoration:underline}
.error{padding:90px 0 70px;max-width:680px}
footer{padding:8px 0 34px;color:var(--soft);font-size:12px}

@media(max-width:900px){
  .site{width:min(calc(100% - 48px),var(--max))}
  .site-header{padding-left:24px;padding-right:24px}
  .hero,.article-head,.segment,.list{grid-template-columns:72px minmax(0,1fr);column-gap:28px}
  .segment.mirada{
    margin-left:calc((100vw - min(calc(100% - 48px),var(--max)))/-2);
    margin-right:calc((100vw - min(calc(100% - 48px),var(--max)))/-2);
    padding-left:calc((100vw - min(calc(100% - 48px),var(--max)))/2);
    padding-right:calc((100vw - min(calc(100% - 48px),var(--max)))/2)
  }
}
@media(max-width:620px){
  .site{width:calc(100% - 36px)}
  .site-header{padding:12px 18px 10px}
  .identity{gap:8px}.logo{width:46px}.signature{font-size:16.5px}
  nav{gap:4px;padding-top:0}nav a,nav .slash{font-size:11.5px}
  main{padding-top:70px}
  .hero,.article-head,.segment,.list{grid-template-columns:1fr}
  .hero{padding:42px 0}
  .rail,.head-guide,.segment-guide,.list-rail{
    grid-column:1;padding-top:0;margin-bottom:18px;font-size:12.5px
  }
  .hero-copy,.head-copy,.segment-copy,.entries{grid-column:1}
  h1,.article-head h1{font-size:34px}
  .intro,.deck{font-size:16.5px}
  .entry{padding:30px 0 32px}.entry h2{font-size:24px}
  .article-head{padding:42px 0 38px}
  .segment{padding:30px 0 32px}
  .segment.mirada{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}
  .segment.mirada .segment-copy > p:first-child{font-size:23px}
}