:root{--paper:#F5EFE3;--sand:#E3D7C4;--terra:#974316;--slate:#7A8890;--navy:#264B64;--ink:#264B64;--g:clamp(18px,3.6vw,56px)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:Switzer,ui-sans-serif,system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px var(--g)}
.top-logo{width:clamp(170px,16vw,230px)}
.top-meta{font-size:13px;letter-spacing:.04em;color:var(--slate)}

/* intro: two set lines, the second in terracotta, the note hung on the right edge of the first */
.intro{position:relative;padding:clamp(40px,7vw,110px) var(--g) clamp(34px,4.5vw,64px);border-top:1px solid rgba(38,75,100,.14)}
.intro-k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);font-weight:500;margin-bottom:clamp(18px,2.4vw,34px)}
.intro-h{font-weight:300;font-size:clamp(46px,8.4vw,150px);line-height:.92;letter-spacing:-.045em}
.intro-h span{display:inline-block;opacity:0;transform:translateY(.3em);animation:rise .9s cubic-bezier(.2,.7,.1,1) forwards}
.intro-h span:nth-child(2){animation-delay:.07s}
.intro-h .intro-sub{display:block;color:var(--terra);font-weight:400;animation-delay:.16s;padding-left:clamp(0px,8vw,150px)}
.intro-p{max-width:25em;font-size:clamp(16px,1.2vw,19px);color:#3c5568;margin-top:clamp(22px,3vw,40px)}
@media (min-width:1024px){.intro-p{position:absolute;right:var(--g);bottom:clamp(40px,5vw,72px);margin:0}}
@keyframes rise{to{opacity:1;transform:none}}

/* the four directions: phones and tablets = a list with the first screen of each */
.pravci{list-style:none;display:grid;gap:clamp(40px,7vw,64px);padding:0 var(--g) clamp(56px,8vw,110px)}
.p{opacity:0;transform:translateY(24px);animation:rise 1s cubic-bezier(.2,.7,.1,1) forwards}
.p2{animation-delay:.1s}.p3{animation-delay:.2s}.p4{animation-delay:.3s}
.p-link{display:flex;flex-direction:column;text-decoration:none}
.p-shot{display:block;overflow:hidden;border-radius:3px;background:var(--sand);aspect-ratio:16/10;margin-bottom:18px;box-shadow:0 30px 60px -44px rgba(38,75,100,.55)}
.p-shot picture{display:block;width:100%;height:100%}
.p-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.p-head{display:flex;align-items:baseline;gap:12px;border-top:1px solid rgba(38,75,100,.18);padding-top:12px}
.p-n{font-size:12px;letter-spacing:.1em;color:var(--slate)}
.p-name{font-size:clamp(34px,3.2vw,50px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.p-name em{font-style:normal;color:var(--slate)}
.p1 .p-name{font-family:Gambarino,serif;color:var(--terra)}
.p2 .p-name{font-family:"Mona Sans",sans-serif;font-stretch:125%;font-weight:400;letter-spacing:-.01em}
.p3 .p-name{font-family:Anybody,sans-serif;font-stretch:140%;font-weight:300;animation:breathe 8s ease-in-out infinite}
.p4 .p-name{font-family:Imbue,serif;font-weight:600;font-size:clamp(42px,4vw,64px);font-variation-settings:"opsz" 100}
@keyframes breathe{0%,100%{font-stretch:70%}50%{font-stretch:145%}}
.p-idea{margin-top:12px;max-width:32em;color:#3c5568;font-size:15.5px}
.p-meta{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:12px;font-size:13px;color:#3c5568}
.sw{display:flex;gap:5px}
.sw i{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(38,75,100,.15)}
.p-go{margin-top:16px;align-self:flex-start;font-size:15px;font-weight:500;padding-bottom:4px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s}
.p1 .p-go{color:var(--terra)}
.p-link:hover .p-go{background-size:40% 1px}

/* desktop: four reels side by side; each runs through its whole page; hover widens one */
@media (min-width:1024px) and (hover:hover){
  .pravci{display:flex;gap:18px;height:clamp(640px,86vh,980px)}
  .p{flex:1 1 0;min-width:0;transition:flex-grow .8s cubic-bezier(.2,.7,.1,1)}
  .pravci:hover .p{flex-grow:.82}
  .pravci .p:hover{flex-grow:1.75}
  .p-link{height:100%}
  .p-shot{flex:1 1 auto;aspect-ratio:auto;position:relative;container-type:size;margin-bottom:16px}
  .p-shot img{position:absolute;inset:0 0 auto 0;height:auto;object-fit:initial;
    animation:reel var(--dur,80s) linear infinite alternate;will-change:transform}
  .p:hover .p-shot img{animation-duration:calc(var(--dur,80s) / 2.2)}
  .p-idea{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
@keyframes reel{from{transform:translateY(0)}to{transform:translateY(calc(-100% + 100cqh))}}

.note{margin:0 var(--g);padding:24px 0 56px;border-top:1px solid rgba(38,75,100,.14);max-width:62em;color:#3c5568;font-size:14.5px}
.foot{display:flex;align-items:center;gap:14px;padding:20px var(--g) 40px;font-size:13px;color:var(--slate)}

@media (max-width:480px){.top-meta{display:none}}
@media (prefers-reduced-motion:reduce){
  .intro-h span,.p{animation:none;opacity:1;transform:none}
  .p3 .p-name{animation:none;font-stretch:120%}
  .p-shot img{animation:none!important}
  .p{transition:none}
}