/*! karla-page.css — the inner pages.
    Same book as the home page: paper ground, display headings, an index rail
    down the right, and the ink field confined to a masthead band so it reads
    as continuity rather than decoration. Tokens live in style.css. */

body.kb-page{margin:0;background:var(--k-paper);color:var(--k-ink);
  font-family:var(--k-sans);font-weight:300;font-size:16px;line-height:1.8;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body.kb-page *{box-sizing:border-box}
/* height:auto is not optional. Every image here carries width and height
   attributes so the browser can reserve space before it arrives, and without
   height:auto the browser honours that attribute literally: the portrait was
   being drawn 233 wide by 980 tall, squashed by two thirds, because its
   declared height no longer matched the file. */
body.kb-page img{max-width:100%;height:auto;display:block}
body.kb-page h1,body.kb-page h2,body.kb-page h3{font-family:var(--k-display);font-weight:400;
  line-height:1.05;letter-spacing:-.015em;text-wrap:balance;color:var(--k-ink)}
.kb-mast h1,.kb-mast .no,.kb-close h2,.kb-more h2{margin:0}
.cap{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--k-grey)}

/* ---- fixed furniture, matching the home page ---- */
.kb-page .brand{position:fixed;top:30px;left:clamp(22px,6vw,90px);z-index:30;
  font-family:var(--k-display);font-size:1.15rem}
.kb-page .brand a{color:inherit;text-decoration:none}
.kb-page .brand a:hover{color:var(--k-coral)}
.kb-page .lang{display:flex;gap:8px;align-items:center;margin-left:6px;
  padding-left:22px;border-left:1px solid var(--k-hair)}
.kb-page .lang a{text-decoration:none;color:var(--k-grey);padding:11px 2px;min-height:44px;
  display:inline-flex;align-items:center}
.kb-page .lang a.is-on{color:var(--k-ink)}
.kb-page .lang a:hover{color:var(--k-coral)}
.kb-page #trp-floater-ls,
.kb-page #trp-floater-ls-current-language,
.kb-page .trp-floater-ls-disabled-language,
.kb-page [id^="trp-floater"],
.kb-page .trp-floating-switcher{display:none !important}

/* top nav, right hand side */
.kb-nav{position:fixed;top:26px;right:clamp(22px,5vw,56px);z-index:30;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:62vw}
.kb-nav a{text-decoration:none;color:var(--k-grey);font-size:.78rem;letter-spacing:.15em;
  text-transform:uppercase;padding:11px 0;min-height:44px;display:inline-flex;align-items:center;
  border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.kb-nav a:hover{color:var(--k-ink)}
.kb-nav a[aria-current="page"]{color:var(--k-ink);border-bottom-color:var(--k-coral)}

/* ---- masthead band, ink lives here ---- */
.kb-mast{position:relative;overflow:hidden;min-height:clamp(360px,52vh,540px);
  display:grid;align-items:end;background:var(--k-paper);
  padding:clamp(120px,16vh,190px) clamp(22px,6vw,90px) clamp(40px,6vh,64px)}
.kb-mast #ink{position:absolute;inset:-90px;width:calc(100% + 180px);height:calc(100% + 180px);
  z-index:0;pointer-events:none;filter:blur(24px) saturate(1.14);opacity:1}
.kb-mast .veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(66% 68% at 20% 60%,rgba(247,244,239,.84) 0%,rgba(247,244,239,.34) 54%,rgba(247,244,239,0) 84%),
    linear-gradient(180deg,rgba(247,244,239,.92) 0,rgba(247,244,239,.10) 44%,rgba(247,244,239,.96) 100%)}
.kb-mast .in{position:relative;z-index:2;max-width:1080px;width:100%}

/* ---- the page's own artwork, full bleed ----
   Driven by the Featured Image. It runs off the top and the right of the
   masthead, sits above the ink field but under the veil and the type, and
   drifts on scroll. Deliberately allowed to be clipped by the frame: these
   pieces were generated with the composition running off the edge and they
   read better bled than boxed. */
.kb-mast .kb-art{position:absolute;z-index:1;pointer-events:none;
  top:-6%;right:-6%;width:min(58%,740px);line-height:0}
.kb-mast .kb-art img{width:100%;height:auto;display:block;
  opacity:.88;will-change:transform;
  -webkit-mask-image:radial-gradient(120% 120% at 62% 44%,#000 50%,transparent 90%),
                     linear-gradient(180deg,transparent 0,#000 16%);
          mask-image:radial-gradient(120% 120% at 62% 44%,#000 50%,transparent 90%),
                     linear-gradient(180deg,transparent 0,#000 16%);
  -webkit-mask-composite:source-in; mask-composite:intersect}

/* The nav and the language pair are fixed over whatever the page puts behind
   them. With artwork bleeding to the top edge they need their own ground, or
   the labels sit on dense pigment and stop being readable. */
body.kb-page::before{content:"";position:fixed;top:0;left:0;right:0;z-index:25;
  height:150px;pointer-events:none;
  background:linear-gradient(180deg,var(--k-paper) 0,rgba(247,244,239,.92) 42%,rgba(247,244,239,0) 100%)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.kb-page::before{
    background:linear-gradient(180deg,rgba(247,244,239,.72) 0,rgba(247,244,239,.46) 55%,rgba(247,244,239,0) 100%);
    -webkit-backdrop-filter:blur(16px) saturate(1.06);
            backdrop-filter:blur(16px) saturate(1.06);
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 100%);
  }
}
body.kb-page.admin-bar::before{top:32px}
@media screen and (max-width:782px){ body.kb-page.admin-bar::before{top:46px} }
@media(max-width:760px){ body.kb-page::before{height:120px} }
/* with artwork present the masthead needs more room and a softer veil, so the
   picture is not washed out by the gradient meant for bare ink */
.kb-mast.has-art{min-height:clamp(440px,62vh,640px)}
.kb-mast.has-art .veil{
  background:
    radial-gradient(58% 62% at 16% 60%,rgba(247,244,239,.90) 0%,rgba(247,244,239,.30) 58%,rgba(247,244,239,0) 86%),
    linear-gradient(180deg,rgba(247,244,239,.55) 0,rgba(247,244,239,.05) 40%,rgba(247,244,239,.96) 100%)}
@media(max-width:900px){
  .kb-mast .kb-art{top:-8%;right:-18%;width:86%}
  .kb-mast .kb-art img{opacity:.42}
  .kb-mast.has-art{min-height:0}
}
@media(prefers-reduced-motion:reduce){ .kb-mast .kb-art img{transform:none !important} }
.kb-mast .no{font-family:var(--k-display);font-style:italic;font-size:1rem;color:var(--k-coral);
  margin:0 0 18px}
.kb-mast h1{font-size:clamp(2.6rem,6.6vw,5.4rem);line-height:.94}
.kb-mast h1 em{font-style:italic;color:var(--k-coral)}
.kb-lede{position:relative;z-index:2;font-family:var(--k-display);
  font-size:clamp(1.15rem,2.1vw,1.65rem);line-height:1.44;color:var(--k-ink);
  max-width:46ch;margin:28px 0 0}

/* ---- body ---- */
.kb-body{position:relative;z-index:2;padding:clamp(48px,8vh,96px) clamp(22px,6vw,90px) 0;
  max-width:1080px}
.kb-prose{max-width:66ch}
.kb-prose p{margin:0 0 1.5em;color:var(--k-grey);font-size:1.02rem}
.kb-prose p strong{color:var(--k-ink);font-weight:400}
body.kb-page .kb-prose h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin:2.6em 0 .8em;padding-top:1em;
  border-top:1px solid var(--k-hair);line-height:1.08}
body.kb-page .kb-prose h2:first-child{border-top:0;padding-top:0;margin-top:0}
body.kb-page .kb-prose h3{font-size:clamp(1.1rem,1.7vw,1.32rem);margin:2.1em 0 .6em;
  line-height:1.2;color:var(--k-ink)}
body.kb-page .kb-prose h2 + h3{margin-top:1.3em}
.kb-prose ul,.kb-prose ol{margin:0 0 1.6em;padding-left:0;list-style:none}
.kb-prose ul li{position:relative;padding:.55em 0 .55em 30px;color:var(--k-grey);
  border-top:1px solid var(--k-hair)}
.kb-prose ul li::before{content:"";position:absolute;left:0;top:1.25em;width:14px;height:1px;
  background:var(--k-coral)}
.kb-prose ol{counter-reset:kb;padding-left:0}
.kb-prose ol li{counter-increment:kb;position:relative;padding:.55em 0 .55em 42px;color:var(--k-grey);
  border-top:1px solid var(--k-hair)}
.kb-prose ol li::before{content:counter(kb,lower-roman);position:absolute;left:0;top:.62em;
  font-family:var(--k-display);font-style:italic;color:var(--k-coral);font-size:.95rem}
.kb-prose blockquote{font-family:var(--k-display);font-style:italic;border-left:2px solid var(--k-coral);
  margin:2em 0;padding:.2em 0 .2em 1.4em;font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.32;
  color:var(--k-ink);max-width:24ch}
body.kb-page .kb-prose blockquote cite,
body.kb-page .kb-prose blockquote footer{display:block;font-family:var(--k-sans);font-style:normal;
  font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--k-grey);margin-top:1em}
body.kb-page .kb-prose blockquote p{font-family:inherit;font-size:inherit;color:inherit;margin:0 0 .4em}
.kb-prose a{color:var(--k-coral)}
/* a rail label that runs long should stay legible, not shrink */
.kb-rail a span{display:block;line-height:1.35}
.kb-prose img{margin:2.4em 0}
.kb-prose>*:last-child{margin-bottom:0}

/* portrait, biography only */
.kb-portrait{float:right;width:min(300px,38%);margin:0 0 34px 48px;filter:grayscale(1) contrast(1.05)}
.kb-portrait figcaption{margin-top:12px}
@media(max-width:760px){.kb-portrait{float:none;width:100%;margin:0 0 34px}}

/* ---- artwork inside an article ----
   It sits IN the reading column, in the flow, at full strength, with the text
   above and below it. It used to escape the measure and run off the side of
   the screen behind the words at half opacity, which read as a picture
   floating loose on the page rather than part of the article.

   `bleed-l` and `bleed-r` are kept as class names because the page content
   already uses them, but on an inner page they no longer bleed: the side is
   only a hint for which way a wide picture is anchored if it is ever allowed
   to exceed the measure again.

   The picture still comes alive on scroll. That treatment is further down. */
.kb-prose .wp-block-image.bleed-l,
.kb-prose .wp-block-image.bleed-r{
  position:relative;z-index:0;line-height:0;
  display:flex;justify-content:center;width:100%;max-width:100%;
  margin:clamp(38px,6vh,72px) 0}
/* Height is capped as well as width. A portrait picture at the full width of
   the measure comes out 765px tall, which is the whole screen: an event, not
   a picture in an article. A landscape one still fills the measure, because
   its natural height at that width is under the cap. */
.kb-prose .wp-block-image.bleed-l img,
.kb-prose .wp-block-image.bleed-r img{
  width:auto;height:auto;
  max-width:100%;max-height:clamp(300px,48vh,540px);
  opacity:1;margin:0 auto;
  -webkit-mask-image:none;mask-image:none}
.kb-prose .wp-block-image figcaption{line-height:1.5;margin-top:12px}

@media(max-width:900px){
  .kb-prose .wp-block-image.bleed-l,
  .kb-prose .wp-block-image.bleed-r{margin:clamp(28px,4vh,48px) 0}
}

/* ---- what to read next ---- */
.kb-more{padding:clamp(60px,9vh,110px) clamp(22px,6vw,90px) 0;max-width:1080px}
.kb-more h2{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--k-grey);
  font-family:var(--k-sans);margin-bottom:8px}
.kb-more .row{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--k-hair);
  border-top:1px solid var(--k-hair);border-bottom:1px solid var(--k-hair)}
.kb-more a{background:var(--k-paper);text-decoration:none;padding:30px 34px 34px;display:block;
  transition:background .4s}
.kb-more a:hover{background:var(--k-paper-2)}
.kb-more a .n{font-family:var(--k-display);font-style:italic;color:var(--k-coral);font-size:.92rem}
.kb-more a .t{display:block;font-family:var(--k-display);font-size:clamp(1.3rem,2.4vw,1.9rem);
  color:var(--k-ink);margin-top:12px;line-height:1.1}
@media(max-width:760px){.kb-more .row{grid-template-columns:1fr}}

/* ---- close ---- */
.kb-close{text-align:center;padding:clamp(90px,15vh,170px) clamp(22px,6vw,90px)}
.kb-close h2{font-family:var(--k-display);font-style:italic;
  font-size:clamp(1.7rem,4.6vw,3.4rem);line-height:1.16;max-width:17ch;margin:0 auto}
.lnk{display:inline-block;color:var(--k-ink);text-decoration:none;font-size:.8rem;
  letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--k-coral);
  padding-bottom:4px;transition:.3s}
.lnk:hover{color:var(--k-coral)}
.kb-close .lnk{margin-top:44px;border:1px solid var(--k-ink);padding:18px 44px}
.kb-close .lnk:hover{background:var(--k-coral);border-color:var(--k-coral);color:var(--k-paper)}

/* ---- foot ---- */
.kb-foot{position:relative;z-index:2;padding:26px clamp(22px,6vw,90px);
  border-top:1px solid var(--k-hair);display:flex;justify-content:space-between;gap:14px;
  flex-wrap:wrap;background:var(--k-paper)}
.kb-foot p{margin:0}
.kb-foot a{color:var(--k-grey);text-decoration:none;display:inline-flex;align-items:center;
  min-height:44px;padding:2px 0}
.kb-foot p{display:flex;align-items:center}
.kb-foot a:hover{color:var(--k-ink)}

/* ---- motion, reveal, focus ---- */
.f{opacity:0;transform:translateY(22px);
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.f.vis{opacity:1;transform:none}
.f[data-d="1"]{transition-delay:.14s}
.motion{position:fixed;bottom:30px;right:clamp(22px,3vw,36px);z-index:31;
  background:rgba(247,244,239,.86);backdrop-filter:blur(6px);border:0;
  font-family:var(--k-sans);font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--k-grey);cursor:pointer;padding:11px 14px;min-height:44px}
.motion:hover{color:var(--k-ink)}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--k-ink);color:var(--k-paper);
  padding:14px 22px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:12px;top:12px}
body.kb-page :focus-visible{outline:2px solid var(--k-coral);outline-offset:4px;border-radius:2px}

/* the rail and the pause button share the right gutter with the reading column */
@media(min-width:1100px){
  .kb-body,.kb-more{padding-right:clamp(230px,20vw,300px)}
}
/* The pause control is pinned to the bottom right corner, which is where the
   footer's last link sits. The footer reserves that corner for it. */
@media(min-width:901px){
  .kb-foot{padding-right:clamp(190px,17vw,260px)}
}
@media(max-width:1099px){
  .kb-rail{display:none}
  /* The solid chip and its border are gone: the frosted halo in style.css
     keeps it readable over text without drawing a box on plain paper. */
  .motion{bottom:16px;right:16px;border:0;padding:10px 14px;min-height:40px}
}
@media(max-width:900px){
  /* The link strip is replaced by the burger panel, which karla-ink.js fills
     from these very links. A sideways scrolling row of small labels is not
     something people find, and the language pair was hiding at the end of it
     where nobody scrolled to. */
  .kb-nav{display:none}
}
@media(max-width:760px){
  .kb-mast{padding-top:26px;padding-bottom:34px;min-height:0}
  .kb-body{padding-top:34px}
  .kb-page .brand{top:22px}
}
@media(prefers-reduced-motion:reduce){
  body.kb-page *{transition-duration:.001ms !important;animation:none !important}
  .f{opacity:1;transform:none}
}

/* admin bar */
body.kb-page.admin-bar .brand{top:62px}
body.kb-page.admin-bar .kb-nav{top:58px}


/* ---- in-article artwork comes alive on scroll ----
   The same treatment the home page pictures get, so an inner page reads as
   the same site rather than a plainer version of it. The canvas is drawn by
   karla-dust.js and sits inside the figure, so the specks belong to the
   picture and travel with it. No CSS mask anywhere near it: a mask on the
   canvas box leaves a visible rectangle, which is why the falloff is computed
   per particle in the script. */
.kb-prose .wp-block-image .kb-dust{position:absolute;left:0;top:0;z-index:1;
  pointer-events:none;display:block;max-width:none;width:auto;margin:0}

/* saturation climbs as the picture crosses the viewport, exactly as on home.
   Only saturation and a whisper of scale: a blur or a blend would draw a
   rectangle, because both have a bounding box the artwork does not. */
.kb-prose .wp-block-image.kb-live > img{
  --sat:.62; --rev:0;
  /* saturate() ONLY. contrast() and brightness() both apply an offset rather
     than a pure colour matrix, and on a cut-out PNG that lifts the fully
     transparent pixels off zero: the artwork's whole bounding box printed as
     a faint grey rectangle on the paper. saturate() is a colour matrix, so it
     follows the alpha exactly and leaves transparent pixels transparent.
     Do not add contrast or brightness back. */
  filter:saturate(var(--sat));
  transform:scale(calc(.97 + var(--rev) * .03));
  transform-origin:50% 55%;will-change:filter,transform}
@media(prefers-reduced-motion:reduce){
  .kb-prose .wp-block-image.kb-live > img{filter:none;transform:none}
}