/* Pratkelis Advisory. A strategy memo, marked up in red. */
@font-face{font-family:"Newsreader";src:url(assets/fonts/newsreader-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Newsreader";src:url(assets/fonts/newsreader-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Newsreader";font-style:italic;src:url(assets/fonts/newsreader-300-italic.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Newsreader";font-style:italic;src:url(assets/fonts/newsreader-400-italic.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(assets/fonts/ibm-plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(assets/fonts/ibm-plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --paper:#f4f1ea;--ink:#15171a;--graphite:#55564f;--rule:#c9c5ba;--red:#c22d19;--red-lit:#ff6a4d;--sheet:#fbf9f4;
  --serif:"Newsreader",Georgia,serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 19px/1.5 var(--serif);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
em{font-style:italic;color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.skip{position:fixed;left:12px;top:-60px;z-index:60;padding:10px 14px;background:var(--ink);color:var(--paper)}
.skip:focus{top:12px}
h2{font:300 clamp(38px,5.8vw,88px)/1.02 var(--serif);letter-spacing:-.022em;max-width:15em}
.label{font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.fine{font:400 12.5px/1.5 var(--mono);color:var(--graphite)}
.btn{display:inline-block;padding:14px 22px;background:var(--ink);color:var(--paper);border:0;font:500 14px/1.2 var(--mono);text-decoration:none;cursor:pointer;transition:background-color .2s,transform .2s}
.btn:hover{background:var(--red);transform:translateY(-2px)}
.link{display:inline-block;padding:7px 0;font:500 14px/1.3 var(--mono);text-decoration:none;border-bottom:1px solid currentColor}
.link:hover{color:var(--red)}

/* NAV */
.nav{position:fixed;inset:0 0 auto;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:8px var(--gut);background:color-mix(in srgb,var(--paper) 92%,transparent);border-bottom:1px solid var(--rule);backdrop-filter:blur(6px)}
.nav-logo{display:flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;font:400 19px/1 var(--serif);letter-spacing:-.01em}
.nav nav{display:flex;gap:clamp(12px,2vw,26px)}
.nav nav a,.nav-cta{font:400 13px/1 var(--mono);text-decoration:none;padding:13px 2px}
.nav nav a:hover,.nav-cta:hover{color:var(--red)}
.nav-cta{justify-self:end;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:6px}

/* REDLINE PIECES */
.del{position:relative;display:inline-block;transition:color .5s}
.del::after{content:"";position:absolute;left:-.04em;right:-.04em;top:56%;height:.055em;min-height:2px;background:var(--red);transform:scaleX(var(--strike,0));transform-origin:0 50%;transition:transform .7s cubic-bezier(.6,0,.2,1)}
.ins{position:relative;display:inline-block;color:var(--red);font-style:italic;opacity:var(--show,0);transform:translateY(calc((1 - var(--show,0))*.14em));transition:opacity .55s,transform .55s}
.caret{position:absolute;left:-.34em;top:.9em;width:.34em;height:.28em}
.caret::before{content:"";position:absolute;inset:0;background:var(--red);clip-path:polygon(50% 0,100% 100%,84% 100%,50% 30%,16% 100%,0 100%)}
.edited .del,.edit-on .del{--strike:1;color:color-mix(in srgb,var(--ink) 42%,transparent)}
.edited .ins,.edit-on .ins{--show:1}

/* MEMO */
.memo{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:stretch;padding:calc(62px + clamp(14px,2.4vw,34px)) var(--gut) clamp(20px,3vw,40px)}
.memo-sheet{display:flex;flex-direction:column;min-width:0}
.memo-title{font:500 13px/1 var(--mono);letter-spacing:.32em;text-transform:uppercase}
.memo-head{margin-top:14px;border-block:1px solid var(--ink)}
.memo-head div{display:grid;grid-template-columns:62px 1fr;gap:8px;padding:6px 0;border-top:1px solid var(--rule);font:400 13.5px/1.4 var(--mono)}
.memo-head div:first-child{border-top:0}
.memo-head dt{color:var(--graphite);text-transform:uppercase}
.memo-h{margin:clamp(20px,4vh,48px) 0;font:300 clamp(50px,8.6vw,146px)/.98 var(--serif);letter-spacing:-.032em}
.memo-h>span{display:block}
.memo-h .rl{white-space:nowrap}
.memo-h .ins{white-space:normal}
.memo-h .caret{left:-.08em;top:.92em}
.memo-foot{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:end}
.memo-foot p{max-width:32em;font-size:clamp(18px,1.45vw,21px);line-height:1.38}
.exhibit{position:relative;min-height:0;display:flex;flex-direction:column}
.exhibit img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:50% 80%}
.exhibit figcaption,.speak-fig figcaption{padding-top:7px;font:400 12.5px/1.3 var(--mono);color:var(--graphite)}
.exhibit figcaption b,.speak-fig figcaption b{color:var(--red);font-weight:500;margin-right:7px}

/* THESIS */
.thesis{height:300vh;position:relative;background:var(--ink);color:var(--paper);--ink-s:rgba(244,241,234,.76);--red:var(--red-lit)}
.thesis .label{color:var(--ink-s)}
.thesis-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:70px var(--gut) 24px;overflow:hidden}
.thesis-lead{margin-top:clamp(14px,3vh,34px);font:300 clamp(34px,5.4vw,84px)/1.05 var(--serif);letter-spacing:-.02em}
.edits{margin-top:clamp(10px,2.5vh,26px)}
.edits li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,.55fr);align-items:baseline;column-gap:clamp(14px,2.4vw,36px);padding:clamp(8px,1.6vh,18px) 0;border-top:1px solid rgba(244,241,234,.22);font:300 clamp(28px,3.9vw,68px)/1.06 var(--serif);letter-spacing:-.02em}
.edits .del{justify-self:start;white-space:nowrap}
.edits .del::after{background:var(--red)}
.edit-on .del{color:rgba(244,241,234,.5)!important}
.edits .caret{left:-.36em}
.edits aside{font:400 13px/1.45 var(--mono);letter-spacing:0;color:var(--ink-s);opacity:var(--show,0);transition:opacity .6s .15s}
.edit-on aside{--show:1}

/* MAP */
.mapsec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(64px,8vw,120px) var(--gut);scroll-margin-top:30px}
.mapsec h2{margin-top:12px;font-size:clamp(36px,4.6vw,72px)}
.map-how{margin:16px 0 22px;max-width:30em}
.verdict{padding:16px 0 18px;border-block:1px solid var(--ink);min-height:208px}
.verdict-k{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.verdict h3{margin:8px 0 6px;font:400 clamp(28px,3vw,42px)/1.08 var(--serif);letter-spacing:-.015em}
.verdict-start{margin-top:10px;font:400 14px/1.45 var(--mono)}
.verdict-start b{font-weight:500;color:var(--red);margin-right:6px}
.mapsec .link{margin-top:18px}
.mapsec .fine{margin-top:12px;max-width:40em}
.grid-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;min-width:0}
.axis-y{display:flex;flex-direction:column;justify-content:space-between;writing-mode:vertical-rl;transform:rotate(180deg);flex-direction:row-reverse;font:400 12px/1 var(--mono);color:var(--graphite)}
.axis-x{grid-column:2;display:flex;justify-content:space-between;font:400 12px/1 var(--mono);color:var(--graphite)}
.grid{position:relative;aspect-ratio:1;background-color:var(--sheet);background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:10% 10%;background-position:-1px -1px;border:1px solid var(--ink);touch-action:pan-y;cursor:crosshair;user-select:none;-webkit-user-select:none}
.grid::before,.grid::after{content:"";position:absolute;background:var(--ink);pointer-events:none}
.grid::before{left:50%;top:0;bottom:0;width:1px}
.grid::after{top:50%;left:0;right:0;height:1px}
.q{position:absolute;max-width:44%;font:400 clamp(17px,1.8vw,25px)/1.1 var(--serif);font-style:italic;color:var(--graphite);transition:color .3s;pointer-events:none}
.q.on{color:var(--red)}
.q-tl{left:10px;top:9px}.q-tr{right:10px;top:9px;text-align:right}.q-bl{left:10px;bottom:9px}.q-br{right:10px;bottom:9px;text-align:right}
.pin{position:absolute;left:0;top:0;width:52px;height:52px;margin:-26px 0 0 -26px;padding:0;background:none;border:0;cursor:grab;touch-action:none}
.pin:active{cursor:grabbing}
.pin i{position:absolute;inset:12px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--sheet),0 0 0 5px var(--red);transition:transform .2s}
.pin:hover i{transform:scale(1.14)}
.pin.hint i{animation:pulse 1.6s ease-out 3}
@keyframes pulse{0%{box-shadow:0 0 0 4px var(--sheet),0 0 0 5px var(--red)}70%{box-shadow:0 0 0 4px var(--sheet),0 0 0 22px rgba(194,45,25,0)}100%{box-shadow:0 0 0 4px var(--sheet),0 0 0 5px var(--red)}}

/* SCOPE */
.scope{padding:clamp(50px,7vw,100px) var(--gut);border-top:1px solid var(--ink);scroll-margin-top:30px}
.scope h2{margin:12px 0 clamp(30px,5vw,70px)}
.scope-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,6vw,90px)}
.scope-fig{position:sticky;top:84px;height:calc(100svh - 110px);max-height:760px}
.scope-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.6,0,.2,1)}
.scope-fig img.on{clip-path:inset(0)}
.clause{min-height:66vh;display:flex;flex-direction:column;justify-content:center;padding:26px 0;border-top:1px solid var(--rule);opacity:.42;transition:opacity .4s}
.clause.on{opacity:1}
.clause-img{display:none}
.no{font:500 13px/1 var(--mono);color:var(--red)}
.clause h3{margin:10px 0;font:300 clamp(32px,3.9vw,60px)/1.05 var(--serif);letter-spacing:-.02em}
.clause p{max-width:30em;font-size:clamp(19px,1.5vw,22px);line-height:1.42}

/* RECORD */
.record{padding:clamp(60px,8vw,120px) var(--gut);background:var(--ink);color:var(--paper);--red:var(--red-lit);scroll-margin-top:30px}
.record .label{color:rgba(244,241,234,.76)}
.record h2{margin-top:12px}
.rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,44px);margin-top:clamp(36px,6vw,80px)}
.rooms article{padding-top:12px;border-top:1px solid var(--paper)}
.rooms h3{font:300 clamp(30px,3vw,46px)/1.08 var(--serif);margin-bottom:10px}
.rooms a{text-underline-offset:3px}
.rooms a:hover{color:var(--red)}
.record-foot{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,90px);margin-top:clamp(40px,6vw,80px)}
.orgs{margin-top:10px}
.orgs li{padding:8px 0;border-top:1px solid rgba(244,241,234,.22)}
.interests{margin-top:10px;font:300 clamp(24px,2.3vw,34px)/1.2 var(--serif)}

/* SPEAKING */
.speaking{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,5vw,80px);padding:clamp(60px,8vw,120px) var(--gut);scroll-margin-top:30px}
.speaking h2{margin:12px 0 18px}
.topics{margin:clamp(20px,3vw,36px) 0 24px}
.topics li{position:relative;padding:6px 0;border-top:1px solid var(--rule);font:300 clamp(28px,3.6vw,56px)/1.1 var(--serif);letter-spacing:-.018em;transition:padding .3s,color .3s}
.topics li:hover{padding-left:.5em;color:var(--red);font-style:italic}
.speak-fig img{width:100%}

/* ENGAGE */
.engage{padding:clamp(60px,8vw,110px) var(--gut);background:var(--sheet);border-top:1px solid var(--ink);scroll-margin-top:30px}
.engage h2{margin:12px 0 clamp(26px,4vw,56px)}
.engage-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,6vw,90px)}
.engage-call h3{font:300 clamp(28px,2.6vw,40px)/1.1 var(--serif);margin-bottom:8px}
.engage-call p{margin-bottom:16px}
.intake{padding:clamp(18px,3vw,36px);background:var(--paper);border:1px solid var(--ink)}
.row{display:grid;grid-template-columns:82px minmax(0,1fr);align-items:baseline;gap:8px;border-bottom:1px solid var(--rule)}
.intake .memo-title{margin-bottom:14px}
.row label,.row output,.body-l{font:400 13px/1.4 var(--mono)}
.row label{color:var(--graphite);text-transform:uppercase}
.row output{padding:11px 0;font-size:16px}
.row input,.row select,.intake textarea{width:100%;padding:11px 0;background:transparent;border:0;color:inherit;font:400 16px/1.4 var(--mono);border-radius:0}
.row input:focus,.row select:focus,.intake textarea:focus{outline:0;box-shadow:inset 0 -2px 0 var(--red)}
.row input::placeholder{color:var(--graphite)}
.intake [aria-invalid="true"]{box-shadow:inset 0 -2px 0 var(--red)}
.body-l{display:block;margin-top:14px;color:var(--graphite)}
.intake textarea{border-bottom:1px solid var(--rule);resize:vertical}
.map-note{margin-top:12px;font:400 13px/1.4 var(--mono);color:var(--red)}
.intake-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:18px}
.intake-foot .fine{flex:1 1 220px}
.intake-foot .fine.err{color:var(--red);font-weight:500}

/* FOOT */
.foot{padding:clamp(40px,6vw,80px) var(--gut) 24px;background:var(--ink);color:var(--paper);--red:var(--red-lit)}
.foot-line{margin:12px 0 clamp(26px,4vw,50px);font:300 clamp(44px,8.6vw,146px)/.98 var(--serif);letter-spacing:-.03em}
.foot-line em{display:block}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;padding-top:14px;border-top:1px solid rgba(244,241,234,.26);font:400 13px/1.4 var(--mono)}
.foot-row ul{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-row a{display:inline-block;padding:7px 0}
.foot-legal{margin-top:10px;color:rgba(244,241,234,.72)}

/* PHONE + TABLET */
@media (max-width:1000px){
  .nav{grid-template-columns:1fr auto}
  .nav nav{display:none}
  .memo{grid-template-columns:minmax(0,1fr);min-height:0}
  .exhibit img{height:62vh;flex:none}
  .memo-foot{margin-top:6px}
  .edits li{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
  .edits aside{grid-column:2;margin-top:4px}
  .scope-grid,.speaking,.engage-grid,.record-foot{grid-template-columns:minmax(0,1fr)}
  .mapsec{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .mapsec-copy{display:contents}
  .grid-wrap{order:1;margin:6px 0 14px;width:100%}
  .verdict{order:2}
  .mapsec .link{order:3;align-self:flex-start}
  .mapsec .fine{order:4}
  .rooms{grid-template-columns:minmax(0,1fr)}
  .grid-wrap{max-width:640px}
  .scope-fig{display:none}
  .clause{min-height:0;opacity:1;padding:18px 0 34px}
  .clause-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:16px}
}
@media (max-width:640px){
  body{font-size:18px}
  .memo-h{font-size:clamp(46px,14.2vw,92px)}
  .memo-h .rl{white-space:normal}
  .memo-foot{grid-template-columns:minmax(0,1fr)}
  .memo-foot .btn{justify-self:start}
  .exhibit img{height:56vh}
  .thesis-stage{justify-content:flex-start;padding-top:80px}
  .edits li{display:block;font-size:clamp(28px,8.4vw,44px);padding:12px 0}
  .edits .del{display:table}
  .edits .ins{display:block;margin:2px 0 0 .34em;width:fit-content}
  .edits aside{font-size:12.5px;margin-top:5px}
  .row{grid-template-columns:70px minmax(0,1fr)}
  .q{font-size:15px;max-width:46%}
  .verdict{min-height:230px}
  .axis-y{font-size:11px}
}
@media (max-height:520px) and (min-width:560px){
  .thesis{height:auto}
  .thesis-stage{position:relative;height:auto}
  .memo{min-height:0}
  .exhibit img{height:80vh}
}

/* REDUCED MOTION + PRINT */
.still .thesis{height:auto}
.still .thesis-stage{position:relative;height:auto;min-height:0}
.still .clause{opacity:1}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media print{
  .nav,.pin,.btn{display:none!important}
  .thesis{height:auto}.thesis-stage{position:relative;height:auto}
  .del{--strike:1}.ins{--show:1}
}