/* Christopher Macken — Journal. Same tokens as the home page, so the two read as one site. */
:root{--body:clamp(18px,1.6vw,20px);   /* the SMALLEST text on the site (Dom, 23 Oct): nothing goes below it */
      --ink:#0A0A0A;--ink2:#141414;--light:#E0DFDD;--mid:#8C8A88;--champ:#C2AF9E;--pink:#FF2D8F;--pink-deep:#D4156F;
      --line:rgba(224,223,221,.14);--gutter:clamp(22px,6vw,70px);--measure:700px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--light);font:300 var(--body)/1.7 Jost,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gutter)}
.rule-top{height:1px;background:linear-gradient(90deg,var(--pink),rgba(255,45,143,0));margin-bottom:clamp(22px,4vw,40px)}

/* ---- header -------------------------------------------------------------------------------- */
.jh{position:relative;z-index:5;padding-block:22px}
.jh__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.jh__name{text-decoration:none;font-weight:300;font-size:var(--body);letter-spacing:.16em;text-transform:uppercase;color:#fff;white-space:nowrap}
.jh__name span{color:var(--pink)}
.jh__nav{display:flex;gap:clamp(16px,3vw,30px)}
.jh__nav a{text-decoration:none;font-size:var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mid);padding:12px 0;transition:color .2s}
.jh__nav a:hover,.jh__nav a[aria-current]{color:var(--pink)}
/* phones: the 18px floor makes name + links too wide for one line, so the links drop under the name
   and the capitals tighten. Nothing gets smaller. */
@media(max-width:600px){
  .jh__in{flex-wrap:wrap;row-gap:0;justify-content:flex-start}
  .jh__name{letter-spacing:.16em;flex-basis:100%}
  .jh__nav{gap:22px}
  .jh__nav a{letter-spacing:.14em;padding:10px 0}
}

/* ---- journal index ------------------------------------------------------------------------- */
.ji{padding-block:clamp(18px,4vw,40px) clamp(50px,8vw,90px)}
.kick{margin:0 0 clamp(14px,2.5vw,22px);font-size:var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--pink);font-weight:500}
.ji h1{margin:0 0 clamp(30px,5vw,56px);font-weight:200;font-size:clamp(52px,13vw,150px);line-height:.84;text-transform:uppercase;color:#fff;letter-spacing:-.005em}
.ji__empty{color:var(--mid);font-size:clamp(18px,2.4vw,22px);margin:0;padding-block:20px 60px}
.grid{display:grid;gap:clamp(34px,5vw,56px) clamp(22px,3vw,36px);grid-template-columns:1fr}
@media(min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid{grid-template-columns:1fr 1fr 1fr}}

.jc{display:flex;flex-direction:column;gap:16px;text-decoration:none;color:inherit}
.jc__img,.jc__quote,.jc__blank{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink2)}
.jc__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .3s}
.jc:hover .jc__img img{transform:scale(1.035)}
.jc__img--video::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  background:rgba(10,10,10,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23fff'/%3E%3C/svg%3E") center/26px no-repeat;
  border:1px solid rgba(255,255,255,.5);transition:background-color .2s}
.jc:hover .jc__img--video::after{background-color:rgba(212,21,111,.85)}
.jc__quote{background:var(--pink-deep);color:var(--ink);display:flex;align-items:center;padding:clamp(22px,4vw,34px)}
.jc__quote span{font-weight:300;font-size:clamp(20px,2.4vw,26px);line-height:1.25}
.jc__quote::before{content:"\201C";position:absolute;top:-.12em;left:.12em;font-size:120px;line-height:1;font-weight:200;color:rgba(10,10,10,.35)}
.jc__blank{display:flex;align-items:flex-end;padding:22px;border:1px solid var(--line)}
.jc__blank span{font-weight:200;font-size:120px;line-height:.8;color:var(--pink);text-transform:uppercase}
.jc__txt{display:flex;flex-direction:column;gap:8px}
.jc__meta{font-size:var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mid);font-weight:400}
.jc__title{font-weight:300;font-size:clamp(21px,2.4vw,26px);line-height:1.18;letter-spacing:.04em;text-transform:uppercase;color:#fff;transition:color .2s}
.jc:hover .jc__title{color:var(--pink)}
.jc__ex{color:var(--mid);font-size:var(--body);line-height:1.6}

/* the lead story spans the grid */
@media(min-width:900px){
  .jc--feature{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,4vw,56px);align-items:end}
  .jc--feature .jc__img,.jc--feature .jc__quote,.jc--feature .jc__blank{aspect-ratio:5/4}
  .jc--feature .jc__title{font-size:clamp(30px,3.6vw,46px);line-height:1.05}
  .jc--feature .jc__ex{font-size:var(--body);max-width:42ch}
  .jc--feature .jc__txt{padding-bottom:6px}
}
.pager{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(40px,6vw,70px);border-top:1px solid var(--line);padding-top:24px}
.pager a{text-decoration:none;font-size:var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--pink);padding:10px 0}
.pager span{color:var(--mid);font-size:var(--body);letter-spacing:.16em;text-transform:uppercase;padding:10px 0}

/* ---- post: shared pieces ------------------------------------------------------------------- */
.post h1{margin:0;font-weight:200;text-transform:uppercase;color:#fff;letter-spacing:.005em;line-height:.92;
         font-size:clamp(40px,8.4vw,104px);overflow-wrap:anywhere}
.jk{margin:0 0 clamp(16px,2.4vw,24px);font-size:var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--pink);font-weight:500}
.jk time{color:inherit}
.jl{margin:clamp(18px,2.6vw,28px) 0 0;font-size:clamp(19px,2.3vw,24px);line-height:1.45;color:var(--light);max-width:36ch}
.pbody{padding-block:clamp(36px,6vw,70px) clamp(50px,8vw,100px)}

.prose{max-width:var(--measure);font-size:var(--body);line-height:1.8}
.prose>*{margin:0 0 1.15em}
.prose>*:last-child{margin-bottom:0}
.prose h2{font-weight:300;font-size:clamp(22px,2.8vw,30px);line-height:1.25;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-top:2em}
.prose h3{font-weight:400;font-size:clamp(18px,2vw,21px);letter-spacing:.06em;text-transform:uppercase;color:var(--champ);margin-top:1.8em}
.prose strong{font-weight:500;color:#fff}
.prose em{font-style:italic}
.prose a{color:var(--pink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.prose a:hover{color:#fff}
.prose ul,.prose ol{padding-left:1.2em}
.prose li{margin-bottom:.45em}
.prose li::marker{color:var(--pink)}
.prose blockquote{margin-left:0;padding:4px 0 4px clamp(18px,3vw,28px);border-left:1px solid var(--pink);
  font-size:1.18em;line-height:1.55;color:#fff;font-weight:300}
.prose blockquote>*{margin:0 0 .6em}
.prose hr{border:0;height:1px;width:80px;background:var(--pink);margin:2.4em 0}
.prose figure{margin:2em 0}
.prose figure img,.prose>img{width:100%}
.prose figcaption{margin-top:10px;font-size:var(--body);letter-spacing:.06em;color:var(--mid)}

/* quote feature */
.jq{margin:0 0 clamp(30px,5vw,56px);position:relative;padding-top:clamp(40px,6vw,70px);max-width:22ch}
.jq::before{content:"\201C";position:absolute;top:-.05em;left:-.04em;font-size:clamp(120px,18vw,220px);line-height:1;font-weight:200;color:var(--pink)}
.jq blockquote{margin:0}
.jq blockquote p{margin:0 0 .5em;font-weight:200;font-size:clamp(30px,5.4vw,64px);line-height:1.12;color:#fff}
.jq figcaption{margin-top:clamp(16px,2.4vw,24px);font-size:var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--pink);font-weight:500}
.jq figcaption::before{content:"";display:inline-block;width:34px;height:1px;background:var(--pink);vertical-align:middle;margin-right:14px}

/* video */
.jv{position:relative;margin:0 0 clamp(30px,5vw,50px);background:#000}
.jv iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.jv--wide{aspect-ratio:16/9}
.jv--tall{aspect-ratio:9/16;max-width:380px}
.jv--insta{aspect-ratio:4/5.7;max-width:500px;background:#fff}

/* gallery */
.jg{columns:2;column-gap:clamp(10px,1.6vw,18px);margin-top:clamp(30px,5vw,50px)}
.prose+.jg{margin-top:clamp(40px,6vw,64px)}
@media(min-width:900px){.jg--c3{columns:3}}
.jg__item{break-inside:avoid;margin:0 0 clamp(10px,1.6vw,18px)}
.jg__open{display:block;cursor:zoom-in;overflow:hidden;background:var(--ink2)}
.jg__open img{width:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .3s}
.jg__open:hover img{transform:scale(1.03)}
.jg__item figcaption{padding-top:8px;font-size:var(--body);color:var(--mid);line-height:1.5}
.post--gallery .pbody>.jg:first-child{margin-top:0}

/* ---- layout 1: the Column (classic) -------------------------------------------------------- */
.pk{padding-top:clamp(18px,4vw,40px)}
.post--classic .pbody{padding-top:clamp(36px,6vw,64px)}
.pk__img{position:relative;margin:clamp(34px,5vw,60px) 0 0}
.pk__img::before{content:"";position:absolute;left:-14px;top:-14px;right:42%;bottom:38%;border:1px solid var(--pink);pointer-events:none}
.pk__img img{position:relative;width:100%;max-height:82vh;object-fit:cover}
@media(min-width:900px){.post--classic .pbody>.prose,.post--classic .pbody>.jq,.post--classic .pbody>.jv{margin-left:clamp(0px,7vw,110px)}}

/* ---- layout 2: the Cover ------------------------------------------------------------------- */
.pc{position:relative;min-height:min(100svh,980px);display:flex;align-items:flex-end;padding-top:120px;background:var(--pink-deep)}
.pc__img{position:absolute;inset:0;overflow:hidden}
.pc__img img{width:100%;height:100%;object-fit:cover}
.pc__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.92) 0%,rgba(10,10,10,.55) 38%,rgba(10,10,10,.08) 70%,rgba(10,10,10,.35) 100%)}
.pc__txt{position:relative;width:100%;padding-bottom:clamp(40px,7vw,90px)}
.pc__txt h1{max-width:14ch;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.post--cover.has-img .jk{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.post--cover.has-img .jl{text-shadow:0 1px 14px rgba(0,0,0,.6)}
.post--cover.no-img .pc{min-height:min(78svh,760px)}
.post--cover.no-img .pc h1{color:var(--ink)}
.post--cover.no-img .pc .jk{color:var(--ink)}
.post--cover.no-img .pc .jl{color:var(--ink)}
.post--cover .pbody{display:flex;flex-direction:column;align-items:center}
.post--cover .pbody>*{width:100%;max-width:var(--measure)}
.post--cover .pbody>.jg{max-width:none}
.post--cover .pbody>.jv--wide{max-width:960px}
.post--cover .pbody>.jv--tall,.post--cover .pbody>.jv--insta{max-width:420px}
.post--cover .pbody>.jq{max-width:var(--measure)}
/* the header floats over the cover picture rather than pushing it down */
.has-cover .jh{position:absolute;inset:0 0 auto 0}
.has-cover .jh__name,.has-cover .jh__nav a,.has-split .jh__name{text-shadow:0 1px 14px rgba(0,0,0,.7)}

/* ---- layout 3: the Spread (split) ---------------------------------------------------------- */
.ps{display:grid;grid-template-columns:1fr}
.ps__side{position:relative;background:var(--pink-deep);aspect-ratio:4/5;overflow:hidden}
.ps__side img{width:100%;height:100%;object-fit:cover}
.ps__mark{position:absolute;left:var(--gutter);bottom:clamp(10px,3vw,30px);font-weight:200;font-size:clamp(160px,40vw,420px);line-height:.8;color:var(--ink);text-transform:uppercase}
.ps__main{padding:clamp(30px,5vw,60px) var(--gutter) 0}
.ps__head h1{font-size:clamp(38px,6.4vw,84px)}
.post--split .pbody{padding-top:clamp(30px,4vw,50px)}
@media(min-width:960px){
  .ps{grid-template-columns:1fr 1fr;min-height:100svh}
  .ps__side{aspect-ratio:auto;position:sticky;top:0;height:100svh}
  /* the header floats over this layout, so the words start below it */
  .ps__main{padding:clamp(120px,10vw,150px) clamp(36px,5vw,80px) 0}
  .ps__head h1{max-width:12ch}
}
.has-split .jh{position:absolute;inset:0 0 auto 0}
@media(min-width:960px){.has-split .jh__in{max-width:none}}
@media(max-width:959px){.has-split .jh{position:relative}}

/* ---- more from the journal ----------------------------------------------------------------- */
.more{border-top:1px solid var(--line);padding-block:clamp(46px,7vw,80px)}
.more h2{margin:0 0 clamp(24px,4vw,40px);font-weight:200;font-size:clamp(23px,4.4vw,38px);letter-spacing:.1em;text-transform:uppercase;color:#fff}
.more__all{display:inline-block;margin-top:clamp(30px,4vw,44px);text-decoration:none;font-size:var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--pink);padding:10px 0}

/* ---- lightbox ------------------------------------------------------------------------------ */
.lb{position:fixed;inset:0;z-index:100;background:rgba(10,10,10,.97);display:none;align-items:center;justify-content:center;touch-action:pan-y}
.lb.is-open{display:flex}
.lb__fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:94vw}
.lb__img{max-width:94vw;max-height:84vh;width:auto;height:auto;object-fit:contain}
.lb__cap{color:var(--light);font-size:var(--body);text-align:center;max-width:60ch;min-height:1.4em}
.lb__count{position:absolute;top:22px;left:22px;font-size:var(--body);letter-spacing:.16em;color:var(--mid)}
.lb button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;font:200 34px/1 Jost,sans-serif;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.lb button:hover{color:var(--pink)}
.lb__x{top:10px;right:10px}
.lb__prev{left:6px;top:50%;transform:translateY(-50%)}
.lb__next{right:6px;top:50%;transform:translateY(-50%)}
@media(max-width:640px){.lb__prev,.lb__next{top:auto;bottom:14px;transform:none}}

/* ---- footer -------------------------------------------------------------------------------- */
.values{display:flex;flex-wrap:wrap;gap:10px 34px;justify-content:center;font-size:var(--body);letter-spacing:.16em;text-transform:uppercase;
        color:var(--mid);border-top:1px solid rgba(224,223,221,.09);padding:clamp(30px,5vw,50px) var(--gutter)}
.jf{text-align:center;padding:26px var(--gutter) clamp(40px,7vw,64px);border-top:1px solid rgba(224,223,221,.09)}
.jf p{margin:0;font-size:var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--mid)}
.jf b{font-weight:500;color:var(--pink)}

/* ---- admin preview bar (only on preview pages) --------------------------------------------- */
.pv{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;
    background:#fff;color:#0A0A0A;border-radius:999px;padding:6px;box-shadow:0 14px 40px -10px rgba(0,0,0,.6);font:500 var(--body)/1 Jost,system-ui,sans-serif;max-width:calc(100vw - 24px)}
.pv span{padding:0 10px 0 12px;color:#6b6865;letter-spacing:.04em}
.pv a{text-decoration:none;color:#0A0A0A;padding:10px 16px;border-radius:999px;min-height:40px;display:flex;align-items:center}
.pv a[aria-current]{background:#0A0A0A;color:#fff}
.pv a:not([aria-current]):hover{background:#f1efed}
.pv__tag{background:var(--pink-deep);color:#fff!important;border-radius:999px;padding:8px 12px!important;font-size:var(--body);letter-spacing:.14em;text-transform:uppercase}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ── reading progress ───────────────────────────────────────────────────────
   A pink rule across the top that fills left to right as you read, so you can
   see how much of the post is left. Dom, 19 Oct 2026.

   It is HIDDEN until the title has scrolled away. At the top of a post you can
   see where you are, so the bar is just a line across the artwork; it earns its
   place only once the heading has gone.

   z-index sits BELOW the lightbox (100) and the photo viewer (90) on purpose —
   a progress bar has no business drawing over a full-screen photograph.

   The fill is a transform, not a width: scaleX is composited, so it tracks a
   fast scroll without laying out the page on every frame.
   ------------------------------------------------------------------------- */
.rp{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  pointer-events:none;opacity:0;transition:opacity .28s ease;
  background:rgba(255,255,255,.07);
}
.rp.on{opacity:1}
.rp__bar{
  height:100%;width:100%;background:var(--pink);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
}
@media (prefers-reduced-motion:reduce){ .rp{transition:none} }